优化权限控制

web/frontend/src/api/modules.ts

@@ -15,6 +15,7 @@ export interface UserInfo {
   is_active: boolean;
   remark: string;
   permissions: string[];
+  custom_permissions?: string[] | null;
 }
 
 export const authApi = {
@@ -30,9 +31,10 @@ export const userApi = {
   list: () => api.get<any, UserInfo[]>('/users'),
   create: (data: { username: string; password: string; role: string; remark?: string }) =>
     api.post<any, UserInfo>('/users', data),
-  update: (id: number, data: { password?: string; role?: string; is_active?: boolean; remark?: string }) =>
+  update: (id: number, data: { password?: string; role?: string; is_active?: boolean; remark?: string; custom_permissions?: string[] | null }) =>
     api.put<any, UserInfo>(`/users/${id}`, data),
   delete: (id: number) => api.delete<any, any>(`/users/${id}`),
+  listPermissions: () => api.get<any, any>('/users/permissions/list'),
 };
 
 export const accountApi = {

web/frontend/src/layouts/MainLayout.tsx

@@ -46,7 +46,7 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
   }
 
   // 登录任务
-  if (hasPerm(user, 'login:batch') || hasPerm(user, 'login:view_assigned')) {
+  if (hasPerm(user, 'login:batch') || hasPerm(user, 'login:view_all')) {
     menuItems.push({ key: '/login-tasks', label: '登录任务', icon: <ApiOutlined /> });
   }
 

web/frontend/src/pages/UsersPage.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import {
   Table, Button, Modal, Form, Input, Select, Tag, Popconfirm, message, Space,
+  Checkbox, Divider, Alert, Tooltip,
 } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SafetyOutlined } from '@ant-design/icons';
 import { userApi, type UserInfo } from '../api/modules';
+import { getUser, hasPerm } from '../store/auth';
 
 const ROLE_OPTIONS = [
   { value: 'super_admin', label: '超级管理员' },
@@ -17,6 +19,21 @@ const ROLE_COLORS: Record<string, string> = {
   support: 'green',
 };
 
+// 权限分组定义
+const PERMISSION_GROUPS = [
+  { label: '用户管理', prefix: 'user:' },
+  { label: '账号管理', prefix: 'account:' },
+  { label: '登录任务', prefix: 'login:' },
+  { label: 'Cookie', prefix: 'cookie:' },
+  { label: '代理 & 白名单', prefix: ['proxy:', 'whitelist:'] },
+  { label: '系统', prefix: ['system:', 'audit:'] },
+];
+
+function isPrefixMatch(key: string, prefix: string | string[]): boolean {
+  if (Array.isArray(prefix)) return prefix.some(p => key.startsWith(p));
+  return key.startsWith(prefix);
+}
+
 export default function UsersPage() {
   const [users, setUsers] = useState<UserInfo[]>([]);
   const [loading, setLoading] = useState(false);
@@ -24,6 +41,17 @@ export default function UsersPage() {
   const [editing, setEditing] = useState<UserInfo | null>(null);
   const [form] = Form.useForm();
 
+  // 权限管理
+  const [permModalOpen, setPermModalOpen] = useState(false);
+  const [permUser, setPermUser] = useState<UserInfo | null>(null);
+  const [permList, setPermList] = useState<Record<string, string>>({});
+  const [rolePermMap, setRolePermMap] = useState<Record<string, string[]>>({});
+  const [selectedPerms, setSelectedPerms] = useState<string[]>([]);
+  const [useCustom, setUseCustom] = useState(false);
+  const [permLoading, setPermLoading] = useState(false);
+
+  const canAssignPerm = hasPerm(getUser(), 'user:assign_permissions');
+
   const loadUsers = async () => {
     setLoading(true);
     try {
@@ -86,6 +114,52 @@ export default function UsersPage() {
     }
   };
 
+  // ---- 权限管理 ----
+  const handlePermClick = async (user: UserInfo) => {
+    setPermUser(user);
+    setPermModalOpen(true);
+    setPermLoading(true);
+    try {
+      const data = await userApi.listPermissions();
+      setPermList(data.permissions || {});
+      setRolePermMap(data.role_permissions || {});
+      // 初始化选中权限：如果用户有 custom_permissions 则使用，否则使用角色默认
+      if (user.custom_permissions !== null && user.custom_permissions !== undefined) {
+        setUseCustom(true);
+        setSelectedPerms(user.custom_permissions);
+      } else {
+        setUseCustom(false);
+        setSelectedPerms(data.role_permissions?.[user.role] || []);
+      }
+    } catch (e: any) {
+      message.error(e.message);
+    } finally {
+      setPermLoading(false);
+    }
+  };
+
+  const handlePermSave = async () => {
+    if (!permUser) return;
+    setPermLoading(true);
+    try {
+      await userApi.update(permUser.id, {
+        custom_permissions: useCustom ? selectedPerms : null,
+      });
+      message.success('权限已更新');
+      setPermModalOpen(false);
+      loadUsers();
+    } catch (e: any) {
+      message.error(e.message);
+    } finally {
+      setPermLoading(false);
+    }
+  };
+
+  const handleRoleChangeForPerm = (role: string) => {
+    const rolePerms = rolePermMap[role] || [];
+    setSelectedPerms(rolePerms);
+  };
+
   const columns = [
     { title: 'ID', dataIndex: 'id', width: 60 },
     { title: '用户名', dataIndex: 'username' },
@@ -97,18 +171,33 @@ export default function UsersPage() {
         return <Tag color={ROLE_COLORS[role] || 'default'}>{label}</Tag>;
       },
     },
+    {
+      title: '权限模式',
+      dataIndex: 'custom_permissions',
+      width: 100,
+      render: (_: any, record: UserInfo) =>
+        record.custom_permissions !== null && record.custom_permissions !== undefined
+          ? <Tag color="orange">自定义</Tag>
+          : <Tag>角色默认</Tag>,
+    },
     {
       title: '状态',
       dataIndex: 'is_active',
+      width: 80,
       render: (active: boolean) => active ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
     },
-    { title: '备注', dataIndex: 'remark' },
+    { title: '备注', dataIndex: 'remark', ellipsis: true },
     {
       title: '操作',
-      width: 160,
+      width: 200,
       render: (_: any, record: UserInfo) => (
         <Space>
           <Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
+          {canAssignPerm && (
+            <Tooltip title="权限管理">
+              <Button size="small" icon={<SafetyOutlined />} onClick={() => handlePermClick(record)}>权限</Button>
+            </Tooltip>
+          )}
           {record.role !== 'super_admin' && (
             <Popconfirm title="确认删除？" onConfirm={() => handleDelete(record.id)}>
               <Button danger size="small" icon={<DeleteOutlined />}>删除</Button>
@@ -133,6 +222,8 @@ export default function UsersPage() {
         size="small"
         pagination={{ pageSize: 20 }}
       />
+
+      {/* 编辑/新建用户 Modal */}
       <Modal
         title={editing ? '编辑用户' : '新建用户'}
         open={modalOpen}
@@ -159,6 +250,84 @@ export default function UsersPage() {
           </Form.Item>
         </Form>
       </Modal>
+
+      {/* 权限管理 Modal */}
+      <Modal
+        title={permUser ? `权限管理 - ${permUser.username}` : '权限管理'}
+        open={permModalOpen}
+        onCancel={() => setPermModalOpen(false)}
+        onOk={handlePermSave}
+        okText="保存"
+        width={640}
+        confirmLoading={permLoading}
+      >
+        {permUser && (
+          <>
+            <Alert
+              message={
+                useCustom
+                  ? '当前使用自定义权限，修改角色不会自动更新权限'
+                  : '当前使用角色默认权限，修改角色后权限会自动跟随'
+              }
+              type={useCustom ? 'warning' : 'info'}
+              showIcon
+              style={{ marginBottom: 16 }}
+            />
+            <div style={{ marginBottom: 16 }}>
+              <span>权限模式：</span>
+              <Select
+                value={useCustom ? 'custom' : 'role'}
+                style={{ width: 140 }}
+                onChange={(v) => {
+                  if (v === 'role') {
+                    setUseCustom(false);
+                    setSelectedPerms(rolePermMap[permUser.role] || []);
+                  } else {
+                    setUseCustom(true);
+                  }
+                }}
+                options={[
+                  { value: 'role', label: '角色默认' },
+                  { value: 'custom', label: '自定义' },
+                ]}
+              />
+              {useCustom && (
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => handleRoleChangeForPerm(permUser.role)}
+                >
+                  重置为角色默认
+                </Button>
+              )}
+            </div>
+            <Checkbox.Group
+              value={selectedPerms}
+              onChange={(vals) => setSelectedPerms(vals as string[])}
+              disabled={!useCustom}
+            >
+              {PERMISSION_GROUPS.map((group) => {
+                const groupKeys = Object.keys(permList).filter(k => isPrefixMatch(k, group.prefix));
+                if (groupKeys.length === 0) return null;
+                return (
+                  <div key={group.label} style={{ marginBottom: 12 }}>
+                    <Divider orientation="left" style={{ margin: '8px 0 12px' }}>
+                      {group.label}
+                    </Divider>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 24px' }}>
+                      {groupKeys.map(key => (
+                        <Checkbox key={key} value={key}>
+                          {permList[key]}
+                        </Checkbox>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </Checkbox.Group>
+          </>
+        )}
+      </Modal>
     </div>
   );
-}
+}