feat: 支持表格单元格快捷编辑

apps/admin/src/pages/Roles/index.tsx

@@ -3,6 +3,7 @@ import { Table, Modal, Form, Input, Space, Tag, Popconfirm, Card, Checkbox, Empt
 import { PlusOutlined, EditOutlined, StopOutlined } from '@ant-design/icons';
 import api from '../../api';
 import PermissionButton from '../../components/PermissionButton';
+import EditableCell from '../../components/EditableCell';
 import { message } from '../../ui/app-message';
 
 interface PermissionItem {
@@ -133,21 +134,74 @@ const RolesPage: React.FC = () => {
     ai: 'AI 配置',
   };
 
+  const permissionOptions = useMemo(
+    () =>
+      allPerms
+        .flatMap((group) => group.permissions)
+        .map((item) => ({ value: item.id, label: `${item.group} · ${item.name}` })),
+    [allPerms],
+  );
+  const saveCell = useCallback(
+    async (record: RoleItem, field: string, value: unknown) => {
+      await api.put(`/rbac/roles/${record.id}`, { [field]: value });
+      message.success('已保存');
+      await fetchData();
+    },
+    [fetchData],
+  );
+
   const columns = useMemo(
     () => [
       { title: 'ID', dataIndex: 'id', width: 80 },
-      { title: '名称', dataIndex: 'name', width: 120 },
-      { title: '描述', dataIndex: 'description', width: 200 },
+      {
+        title: '名称',
+        dataIndex: 'name',
+        width: 120,
+        render: (v: string, r: RoleItem) => (
+          <EditableCell
+            value={v}
+            required
+            permission="role:edit"
+            onSave={(next) => saveCell(r, 'name', next)}
+          >
+            {v}
+          </EditableCell>
+        ),
+      },
+      {
+        title: '描述',
+        dataIndex: 'description',
+        width: 200,
+        render: (v: string, r: RoleItem) => (
+          <EditableCell
+            value={v}
+            editor="textarea"
+            permission="role:edit"
+            onSave={(next) => saveCell(r, 'description', next)}
+          >
+            {v || '-'}
+          </EditableCell>
+        ),
+      },
       {
         title: '权限标签',
         dataIndex: 'permissions',
         width: 150,
-        render: (perms: PermissionItem[]) =>
-          perms?.length > 0 ? (
-            <Tag color="blue">{perms.length} 个权限</Tag>
-          ) : (
-            <Tag color="default">无权限</Tag>
-          ),
+        render: (perms: PermissionItem[], record: RoleItem) => (
+          <EditableCell
+            value={perms?.map((item) => item.id) || []}
+            editor="multi-select"
+            options={permissionOptions}
+            permission="role:edit"
+            onSave={(next) => saveCell(record, 'permissionIds', next)}
+          >
+            {perms?.length > 0 ? (
+              <Tag color="blue">{perms.length} 个权限</Tag>
+            ) : (
+              <Tag color="default">无权限</Tag>
+            )}
+          </EditableCell>
+        ),
       },
       {
         title: '系统',
@@ -186,7 +240,7 @@ const RolesPage: React.FC = () => {
         ),
       },
     ],
-    [],
+    [permissionOptions, saveCell],
   );
 
   const handleGroupCheckAll = (group: string, checked: boolean) => {