impl frontend permission management

frontend/src/components/CascadeFilter.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { api } from '@/utils/request'
+
+export interface CascadeValue {
+  company_id: number | undefined
+  platform_id: number | undefined
+  store_id: number | undefined
+}
+
+const model = defineModel<CascadeValue>({ default: () => ({ company_id: undefined, platform_id: undefined, store_id: undefined }) })
+
+const companies = ref<{ id: number; name: string; label: string }[]>([])
+const platforms = ref<{ id: number; developer_id: number }[]>([])
+const stores = ref<{ id: number; company_id: number; platform_id: number; name: string; label: string }[]>([])
+
+const loadingCompanies = ref(false)
+const loadingStores = ref(false)
+
+const companyOptions = computed(() =>
+  companies.value.map((c) => ({ value: c.id, label: c.label || c.name })),
+)
+
+const platformOptions = computed(() =>
+  platforms.value.map((p) => ({ value: p.id, label: `平台 #${p.id}` })),
+)
+
+const storeOptions = computed(() => {
+  let filtered = stores.value
+  if (model.value.company_id) {
+    filtered = filtered.filter((s) => s.company_id === model.value.company_id)
+  }
+  if (model.value.platform_id) {
+    filtered = filtered.filter((s) => s.platform_id === model.value.platform_id)
+  }
+  return filtered.map((s) => ({ value: s.id, label: s.label || s.name }))
+})
+
+function handleCompanyChange(val: unknown) {
+  model.value = {
+    company_id: (val as number) ?? undefined,
+    platform_id: undefined,
+    store_id: undefined,
+  }
+}
+
+function handlePlatformChange(val: unknown) {
+  model.value = {
+    ...model.value,
+    platform_id: (val as number) ?? undefined,
+    store_id: undefined,
+  }
+}
+
+function handleStoreChange(val: unknown) {
+  model.value = {
+    ...model.value,
+    store_id: (val as number) ?? undefined,
+  }
+}
+
+async function loadData() {
+  loadingCompanies.value = true
+  loadingStores.value = true
+  try {
+    const [c, p, s] = await Promise.all([
+      api.get<typeof companies.value>('/api/v1/companies'),
+      api.get<typeof platforms.value>('/api/v1/platforms'),
+      api.get<typeof stores.value>('/api/v1/stores'),
+    ])
+    companies.value = c
+    platforms.value = p
+    stores.value = s
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : '加载筛选数据失败'
+    message.error(msg)
+  } finally {
+    loadingCompanies.value = false
+    loadingStores.value = false
+  }
+}
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <a-select
+      :value="model.company_id"
+      :options="companyOptions"
+      placeholder="选择公司"
+      allow-clear
+      show-search
+      :filter-option="(input: string, option: unknown) =>
+        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+      "
+      :loading="loadingCompanies"
+      style="min-width: 160px"
+      @change="handleCompanyChange"
+    />
+    <a-select
+      :value="model.platform_id"
+      :options="platformOptions"
+      placeholder="选择平台"
+      allow-clear
+      show-search
+      :filter-option="(input: string, option: unknown) =>
+        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+      "
+      style="min-width: 160px"
+      @change="handlePlatformChange"
+    />
+    <a-select
+      :value="model.store_id"
+      :options="storeOptions"
+      placeholder="选择店铺"
+      allow-clear
+      show-search
+      :filter-option="(input: string, option: unknown) =>
+        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+      "
+      :loading="loadingStores"
+      style="min-width: 160px"
+      @change="handleStoreChange"
+    />
+  </div>
+</template>

frontend/src/components/DataScopeModal.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { api } from '@/utils/request'
+import { useUserManageStore, type ScopeRecord } from '@/stores/user-manage'
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps<{
+  open: boolean
+  userId: number | null
+  username: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  saved: []
+}>()
+
+const store = useUserManageStore()
+
+const loading = ref(false)
+const saving = ref(false)
+const scopes = ref<ScopeRecord[]>([])
+
+// 基础数据列表
+const companies = ref<{ id: number; name: string; label: string }[]>([])
+const platforms = ref<{ id: number; developer_id: number }[]>([])
+const stores = ref<{ id: number; company_id: number; platform_id: number; name: string; label: string }[]>([])
+
+const scopeTypeOptions = [
+  { value: 'company', label: '公司' },
+  { value: 'platform', label: '平台' },
+  { value: 'store', label: '店铺' },
+]
+
+function entityOptions(scopeType: string) {
+  if (scopeType === 'company') {
+    return companies.value.map((c) => ({ value: c.id, label: c.label || c.name }))
+  }
+  if (scopeType === 'platform') {
+    return platforms.value.map((p) => ({ value: p.id, label: `平台 #${p.id}` }))
+  }
+  if (scopeType === 'store') {
+    return stores.value.map((s) => ({ value: s.id, label: s.label || s.name }))
+  }
+  return []
+}
+
+function handleClose() {
+  emit('update:open', false)
+}
+
+function addRow() {
+  scopes.value.push({ scope_type: 'company', scope_id: 0 })
+}
+
+function removeRow(index: number) {
+  scopes.value.splice(index, 1)
+}
+
+function handleTypeChange(index: number) {
+  const row = scopes.value[index]
+  if (row) row.scope_id = 0
+}
+
+async function loadData() {
+  if (!props.userId) return
+  loading.value = true
+  try {
+    const [scopeData] = await Promise.allSettled([
+      store.fetchUserDataScope(props.userId),
+      loadEntities(),
+    ])
+    if (scopeData.status === 'fulfilled') {
+      scopes.value = scopeData.value.scopes.map((s) => ({
+        scope_type: s.scope_type,
+        scope_id: s.scope_id,
+      }))
+    } else {
+      scopes.value = []
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadEntities() {
+  try {
+    const [c, p, s] = await Promise.all([
+      api.get<typeof companies.value>('/api/v1/companies'),
+      api.get<typeof platforms.value>('/api/v1/platforms'),
+      api.get<typeof stores.value>('/api/v1/stores'),
+    ])
+    companies.value = c
+    platforms.value = p
+    stores.value = s
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : '加载基础数据失败'
+    message.error(msg)
+  }
+}
+
+async function handleSave() {
+  if (!props.userId) return
+  // 过滤掉未选择实体的行，并去重
+  const seen = new Set<string>()
+  const validScopes = scopes.value
+    .filter((s) => {
+      if (s.scope_id <= 0) return false
+      const key = `${s.scope_type}:${s.scope_id}`
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+    .map(({ scope_type, scope_id }) => ({ scope_type, scope_id }))
+  saving.value = true
+  try {
+    await store.saveUserDataScope(props.userId, validScopes)
+    message.success('数据范围保存成功')
+    emit('saved')
+    handleClose()
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : '保存失败'
+    message.error(msg)
+  } finally {
+    saving.value = false
+  }
+}
+
+watch(
+  () => props.open,
+  (val) => {
+    if (val) {
+      loadData()
+    } else {
+      scopes.value = []
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    :title="`数据范围 - ${username}`"
+    width="640px"
+    :confirm-loading="saving"
+    @cancel="handleClose"
+    @ok="handleSave"
+  >
+    <a-spin :spinning="loading">
+      <div class="mb-3">
+        <a-button type="dashed" block @click="addRow">
+          <template #icon><PlusOutlined /></template>
+          添加数据范围
+        </a-button>
+      </div>
+
+      <div v-if="scopes.length === 0 && !loading" class="text-center text-gray-400 py-4">
+        暂无数据范围配置，该用户将无法访问任何业务数据
+      </div>
+
+      <div
+        v-for="(scope, index) in scopes"
+        :key="index"
+        class="flex gap-2 mb-2 items-center"
+      >
+        <a-select
+          :value="scope.scope_type"
+          :options="scopeTypeOptions"
+          style="width: 120px"
+          @change="(val: unknown) => { scope.scope_type = val as ScopeRecord['scope_type']; handleTypeChange(index) }"
+        />
+        <a-select
+          :value="scope.scope_id || undefined"
+          :options="entityOptions(scope.scope_type)"
+          placeholder="选择实体"
+          show-search
+          :filter-option="(input: string, option: unknown) =>
+            ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+          "
+          style="flex: 1"
+          @change="(val: unknown) => { scope.scope_id = (val as number) ?? 0 }"
+        />
+        <a-button type="text" danger size="small" @click="removeRow(index)">
+          <template #icon><DeleteOutlined /></template>
+        </a-button>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>

frontend/src/components/__tests__/CascadeFilter.spec.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+import CascadeFilter from '@/components/CascadeFilter.vue'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})
+
+vi.mock('@/utils/request', () => ({
+  api: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import { api } from '@/utils/request'
+
+const mockCompanies = [
+  { id: 1, name: 'acme', label: '阿克米公司', enabled: true },
+  { id: 2, name: 'beta', label: '贝塔公司', enabled: true },
+]
+
+const mockPlatforms = [
+  { id: 1, developer_id: 1 },
+  { id: 2, developer_id: 2 },
+]
+
+const mockStores = [
+  { id: 1, company_id: 1, platform_id: 1, name: 'store-a', label: 'A 店铺' },
+  { id: 2, company_id: 1, platform_id: 2, name: 'store-b', label: 'B 店铺' },
+  { id: 3, company_id: 2, platform_id: 1, name: 'store-c', label: 'C 店铺' },
+]
+
+function setupMocks() {
+  vi.mocked(api.get).mockImplementation((url: string) => {
+    if (url === '/api/v1/companies') return Promise.resolve(mockCompanies) as never
+    if (url === '/api/v1/platforms') return Promise.resolve(mockPlatforms) as never
+    if (url === '/api/v1/stores') return Promise.resolve(mockStores) as never
+    return Promise.resolve([]) as never
+  })
+}
+
+describe('CascadeFilter', () => {
+  let wrapper: ReturnType<typeof mount>
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    document.body.innerHTML = ''
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    document.body.innerHTML = ''
+  })
+
+  async function mountFilter(props = {}) {
+    wrapper = mount(CascadeFilter, {
+      props: {
+        modelValue: { company_id: undefined, platform_id: undefined, store_id: undefined },
+        ...props,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    await nextTick()
+    return wrapper
+  }
+
+  function queryBody(selector: string) {
+    return document.body.querySelectorAll(selector)
+  }
+
+  it('渲染三个下拉框', async () => {
+    setupMocks()
+    await mountFilter()
+    const selects = queryBody('.ant-select')
+    expect(selects.length).toBe(3)
+  })
+
+  it('挂载时加载基础数据', async () => {
+    setupMocks()
+    await mountFilter()
+
+    const calls = vi.mocked(api.get).mock.calls.map((c) => c[0])
+    expect(calls).toContain('/api/v1/companies')
+    expect(calls).toContain('/api/v1/platforms')
+    expect(calls).toContain('/api/v1/stores')
+  })
+
+  it('选择公司后触发 update:modelValue', async () => {
+    setupMocks()
+    await mountFilter()
+
+    // Simulate selecting company by triggering component method
+    const vm = wrapper.vm as unknown as { handleCompanyChange: (val: unknown) => void }
+    vm.handleCompanyChange(1)
+    await nextTick()
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const lastEvent = emitted!.at(-1)!
+    expect(lastEvent[0]).toEqual({
+      company_id: 1,
+      platform_id: undefined,
+      store_id: undefined,
+    })
+  })
+
+  it('选择平台后重置店铺', async () => {
+    setupMocks()
+    await mountFilter({
+      modelValue: { company_id: 1, platform_id: undefined, store_id: 2 },
+    })
+
+    const vm = wrapper.vm as unknown as { handlePlatformChange: (val: unknown) => void }
+    vm.handlePlatformChange(1)
+    await nextTick()
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const lastEvent = emitted!.at(-1)!
+    expect(lastEvent[0]).toEqual({
+      company_id: 1,
+      platform_id: 1,
+      store_id: undefined,
+    })
+  })
+
+  it('清空公司时重置平台和店铺', async () => {
+    setupMocks()
+    await mountFilter({
+      modelValue: { company_id: 1, platform_id: 1, store_id: 2 },
+    })
+
+    const vm = wrapper.vm as unknown as { handleCompanyChange: (val: unknown) => void }
+    vm.handleCompanyChange(undefined)
+    await nextTick()
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeTruthy()
+    const lastEvent = emitted!.at(-1)!
+    expect(lastEvent[0]).toEqual({
+      company_id: undefined,
+      platform_id: undefined,
+      store_id: undefined,
+    })
+  })
+
+  it('API 失败时不崩溃', async () => {
+    vi.mocked(api.get).mockRejectedValue(new Error('网络错误'))
+    await mountFilter()
+
+    const selects = queryBody('.ant-select')
+    expect(selects.length).toBe(3)
+  })
+})

frontend/src/components/__tests__/DataScopeModal.spec.ts

@@ -0,0 +1,235 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+import { message } from 'ant-design-vue'
+import DataScopeModal from '@/components/DataScopeModal.vue'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})
+
+vi.mock('@/utils/request', () => ({
+  api: {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+import { api } from '@/utils/request'
+
+const mockScopes = {
+  user_id: 1,
+  role: 'accessor',
+  scopes: [
+    { scope_type: 'company', scope_id: 1, name: '阿克米公司' },
+    { scope_type: 'store', scope_id: 5, name: '我的店铺' },
+  ],
+  resolved_store_ids: [5],
+}
+
+const mockCompanies = [
+  { id: 1, name: 'acme', label: '阿克米公司', enabled: true },
+  { id: 2, name: 'beta', label: '贝塔公司', enabled: true },
+]
+
+const mockPlatforms = [
+  { id: 1, developer_id: 1 },
+  { id: 2, developer_id: 1 },
+]
+
+const mockStores = [
+  { id: 5, company_id: 1, platform_id: 1, name: 'my-store', label: '我的店铺' },
+  { id: 6, company_id: 2, platform_id: 2, name: 'other-store', label: '其他店铺' },
+]
+
+function setupMocks(overrides: { scopes?: typeof mockScopes } = {}) {
+  vi.mocked(api.get).mockImplementation((url: string) => {
+    if (url.match(/\/users\/\d+\/data-scope/)) return Promise.resolve(overrides.scopes ?? mockScopes) as never
+    if (url === '/api/v1/companies') return Promise.resolve(mockCompanies) as never
+    if (url === '/api/v1/platforms') return Promise.resolve(mockPlatforms) as never
+    if (url === '/api/v1/stores') return Promise.resolve(mockStores) as never
+    return Promise.resolve([]) as never
+  })
+  vi.mocked(api.put).mockResolvedValue(undefined as never)
+}
+
+describe('DataScopeModal', () => {
+  let wrapper: ReturnType<typeof mount>
+
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    document.body.innerHTML = ''
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    document.body.innerHTML = ''
+  })
+
+  async function mountModal(props = {}) {
+    wrapper = mount(DataScopeModal, {
+      props: {
+        open: true,
+        userId: 1,
+        username: 'testuser',
+        ...props,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    await nextTick()
+    return wrapper
+  }
+
+  function queryBody(selector: string) {
+    return document.body.querySelectorAll(selector)
+  }
+
+  describe('数据加载', () => {
+    it('打开时加载用户 scope 数据', async () => {
+      setupMocks()
+      await mountModal()
+
+      expect(vi.mocked(api.get)).toHaveBeenCalled()
+      const calls = vi.mocked(api.get).mock.calls.map((c) => c[0])
+      expect(calls.some((url) => url.includes('/data-scope'))).toBe(true)
+      expect(calls.some((url) => url.includes('/companies'))).toBe(true)
+    })
+
+    it('标题包含用户名', async () => {
+      setupMocks()
+      await mountModal()
+      const title = document.body.querySelector('.ant-modal-title')
+      expect(title?.textContent).toContain('testuser')
+    })
+
+    it('open=false 不渲染内容', async () => {
+      setupMocks()
+      await mountModal({ open: false })
+      const modal = document.body.querySelector('.ant-modal')
+      expect(modal).toBeNull()
+    })
+  })
+
+  describe('Scope 行操作', () => {
+    it('加载后显示 scope 行', async () => {
+      setupMocks()
+      await mountModal()
+
+      // 2 scope rows rendered as flex rows
+      const selects = queryBody('.ant-select')
+      // Each row has 2 selects (type + entity), so expect >= 4
+      expect(selects.length).toBeGreaterThanOrEqual(4)
+    })
+
+    it('点击添加按钮增加一行', async () => {
+      setupMocks({ scopes: { ...mockScopes, scopes: [] } })
+      await mountModal()
+
+      const addBtn = Array.from(queryBody('.ant-btn-dashed')).find(
+        (btn) => btn.textContent?.includes('添加数据范围'),
+      ) as HTMLElement
+      expect(addBtn).toBeTruthy()
+      addBtn.click()
+      await flushPromises()
+      await nextTick()
+
+      // Should have at least one row with selects now
+      const selects = queryBody('.ant-select')
+      expect(selects.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('点击删除按钮移除行', async () => {
+      setupMocks()
+      await mountModal()
+
+      const deleteBtns = queryBody('.anticon-delete')
+      const initialCount = deleteBtns.length
+      expect(initialCount).toBe(2)
+
+      // Click first delete
+      const firstDeleteBtn = deleteBtns[0]?.closest('button') as HTMLElement
+      if (firstDeleteBtn) {
+        firstDeleteBtn.click()
+        await flushPromises()
+        await nextTick()
+      }
+
+      const afterDeleteBtns = queryBody('.anticon-delete')
+      expect(afterDeleteBtns.length).toBe(initialCount - 1)
+    })
+  })
+
+  describe('保存', () => {
+    it('保存调用正确 API', async () => {
+      setupMocks()
+      await mountModal()
+
+      // Click OK button
+      const okBtn = Array.from(queryBody('.ant-btn-primary')).find(
+        (btn) => btn.textContent?.includes('确') || btn.textContent?.includes('OK'),
+      ) as HTMLElement
+      if (okBtn) {
+        okBtn.click()
+        await flushPromises()
+      }
+
+      expect(vi.mocked(api.put)).toHaveBeenCalledWith(
+        '/api/v1/users/1/data-scope',
+        {
+          scopes: [
+            { scope_type: 'company', scope_id: 1 },
+            { scope_type: 'store', scope_id: 5 },
+          ],
+        },
+      )
+    })
+
+    it('保存成功显示 success message', async () => {
+      setupMocks()
+      const spy = vi.spyOn(message, 'success')
+      await mountModal()
+
+      const okBtn = Array.from(queryBody('.ant-btn-primary')).find(
+        (btn) => btn.textContent?.includes('确') || btn.textContent?.includes('OK'),
+      ) as HTMLElement
+      if (okBtn) {
+        okBtn.click()
+        await flushPromises()
+      }
+
+      expect(spy).toHaveBeenCalledWith('数据范围保存成功')
+    })
+
+    it('API 失败显示 error message', async () => {
+      setupMocks()
+      vi.mocked(api.put).mockRejectedValueOnce(new Error('保存出错'))
+      const spy = vi.spyOn(message, 'error')
+      await mountModal()
+
+      const okBtn = Array.from(queryBody('.ant-btn-primary')).find(
+        (btn) => btn.textContent?.includes('确') || btn.textContent?.includes('OK'),
+      ) as HTMLElement
+      if (okBtn) {
+        okBtn.click()
+        await flushPromises()
+      }
+
+      expect(spy).toHaveBeenCalledWith('保存出错')
+    })
+  })
+})

frontend/src/pages/users/index.vue

@@ -3,6 +3,7 @@ import { api } from '@/utils/request'
 import { useUserManageStore, type UserRecord } from '@/stores/user-manage'
 import { useUserStore } from '@/stores/user'
 import UserFormModal from '@/components/UserFormModal.vue'
+import DataScopeModal from '@/components/DataScopeModal.vue'
 import {
   PlusOutlined,
   SearchOutlined,
@@ -29,6 +30,11 @@ const assigningUser = ref<UserRecord | null>(null)
 const selectedRoleId = ref<number | undefined>(undefined)
 const roleOptions = ref<{ value: number; label: string }[]>([])
 
+// Data scope modal
+const scopeModalOpen = ref(false)
+const scopeUserId = ref<number | null>(null)
+const scopeUsername = ref('')
+
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
   { title: '用户名', dataIndex: 'username' },
@@ -36,7 +42,8 @@ const columns = [
   { title: '角色', key: 'role', width: 120 },
   { title: '状态', dataIndex: 'status', width: 100 },
   { title: '创建时间', dataIndex: 'created_at', width: 180 },
-  { title: '操作', key: 'action', width: 280 },
+  { title: '数据范围', key: 'data_scope', width: 120 },
+  { title: '操作', key: 'action', width: 320 },
 ]
 
 onMounted(() => {
@@ -129,6 +136,16 @@ async function submitRoleAssign() {
   }
 }
 
+function handleDataScope(record: UserRecord) {
+  scopeUserId.value = record.id
+  scopeUsername.value = record.username
+  scopeModalOpen.value = true
+}
+
+function handleScopeSuccess() {
+  store.fetchUsers()
+}
+
 function formatTime(time: string) {
   return time ? time.replace('T', ' ').substring(0, 19) : '-'
 }
@@ -204,6 +221,11 @@ function formatTime(time: string) {
             <a-tag v-if="record.role" color="blue">{{ record.role.name }}</a-tag>
             <span v-else>-</span>
           </template>
+          <template v-else-if="column.key === 'data_scope'">
+            <a-tag v-if="record.role?.name === 'administrator'" color="green">全部权限</a-tag>
+            <a-tag v-else-if="record.role?.name === 'developer'" color="blue">平台级</a-tag>
+            <a-tag v-else color="orange">自定义</a-tag>
+          </template>
           <template v-else-if="column.dataIndex === 'status'">
             <a-tag :color="record.status === 1 ? 'green' : 'red'">
               {{ record.status === 1 ? '启用' : '禁用' }}
@@ -228,6 +250,14 @@ function formatTime(time: string) {
               >
                 分配角色
               </a-button>
+              <a-button
+                v-if="userStore.isAdmin && record.role?.name !== 'administrator'"
+                type="link"
+                size="small"
+                @click="handleDataScope(record as UserRecord)"
+              >
+                数据范围
+              </a-button>
               <a-popconfirm
                 v-if="userStore.isAdmin"
                 :title="`确定要${record.status === 1 ? '禁用' : '启用'}该用户吗？`"
@@ -317,5 +347,13 @@ function formatTime(time: string) {
       :user-data="editingUser"
       @success="handleModalSuccess"
     />
+
+    <!-- Data scope modal -->
+    <DataScopeModal
+      v-model:open="scopeModalOpen"
+      :user-id="scopeUserId"
+      :username="scopeUsername"
+      @saved="handleScopeSuccess"
+    />
   </div>
 </template>

frontend/src/stores/user-manage.ts

@@ -19,6 +19,19 @@ export interface UserFilters {
   status: number | undefined
 }
 
+export interface ScopeRecord {
+  scope_type: 'company' | 'platform' | 'store'
+  scope_id: number
+  name?: string | null
+}
+
+export interface UserDataScope {
+  user_id: number
+  role: string | null
+  scopes: ScopeRecord[]
+  resolved_store_ids: number[]
+}
+
 export const useUserManageStore = defineStore('user-manage', () => {
   const users = ref<UserRecord[]>([])
   const loading = ref(false)
@@ -61,6 +74,14 @@ export const useUserManageStore = defineStore('user-manage', () => {
     pagination.page = 1
   }
 
+  async function fetchUserDataScope(userId: number): Promise<UserDataScope> {
+    return api.get<UserDataScope>(`/api/v1/users/${userId}/data-scope`)
+  }
+
+  async function saveUserDataScope(userId: number, scopes: Omit<ScopeRecord, 'name'>[]) {
+    await api.put(`/api/v1/users/${userId}/data-scope`, { scopes })
+  }
+
   return {
     users,
     loading,
@@ -68,5 +89,7 @@ export const useUserManageStore = defineStore('user-manage', () => {
     filters,
     fetchUsers,
     resetFilters,
+    fetchUserDataScope,
+    saveUserDataScope,
   }
 })