impl frontend permission management

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>