重构前端逻辑

2025-11-11 10:10:11 +08:00 · 2025-11-11 10:10:11 +08:00 · 13ae354929
commit 13ae354929
parent 161978b1be
5 changed files with 270 additions and 83 deletions
--- a/frontend/src/pages/System/Role/List/components/AssignTagDialog.tsx
+++ b/frontend/src/pages/System/Role/List/components/AssignTagDialog.tsx
@ -1,17 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
+  DialogBody,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 import { useToast } from '@/components/ui/use-toast';
-import { Loader2, Tag as TagIcon } from 'lucide-react';
+import { Loader2, Tag as TagIcon, Search, CheckCircle2 } from 'lucide-react';
 import type { RoleTagResponse } from '../types';
 import { getAllTags, assignTags } from '../service';

@ -38,6 +39,7 @@ const AssignTagDialog: React.FC<AssignTagDialogProps> = ({
  const [submitting, setSubmitting] = useState(false);
  const [allTags, setAllTags] = useState<RoleTagResponse[]>([]);
  const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
+  const [searchText, setSearchText] = useState('');

  useEffect(() => {
    if (open) {
@ -92,59 +94,122 @@ const AssignTagDialog: React.FC<AssignTagDialogProps> = ({
    }
  };

+  // 过滤标签
+  const filteredTags = useMemo(() => {
+    if (!searchText.trim()) return allTags;
+    const searchLower = searchText.toLowerCase();
+    return allTags.filter(tag => 
+      tag.name.toLowerCase().includes(searchLower) ||
+      tag.description?.toLowerCase().includes(searchLower)
+    );
+  }, [allTags, searchText]);
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <TagIcon className="h-5 w-5" /> 分配标签
+      <DialogContent className="sm:max-w-[580px]">
+        <DialogHeader className="space-y-3">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500">
+              <TagIcon className="h-5 w-5 text-white" />
+            </div>
+            <div className="flex-1">
+              <div className="font-semibold">分配标签</div>
+              <div className="text-sm font-normal text-muted-foreground mt-0.5">
+                为角色选择适合的标签分类
+              </div>
+            </div>
          </DialogTitle>
        </DialogHeader>
-        <div className="px-6 py-4">
+
+        <DialogBody>
          {loading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin mr-2" />
-              <span className="text-sm text-muted-foreground">加载中...</span>
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <span className="ml-3 text-sm text-muted-foreground">加载标签中...</span>
            </div>
          ) : (
-            <>
-              <Label className="mb-3 block">选择标签</Label>
-              <div className="space-y-3 max-h-[300px] overflow-y-auto border rounded-md p-4">
-                {allTags.length > 0 ? (
-                  allTags.map(tag => (
-                    <div key={tag.id} className="flex items-center space-x-3">
+            <div className="space-y-4">
+              {/* 搜索框 */}
+              {allTags.length > 0 && (
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索标签名称或描述..."
+                    value={searchText}
+                    onChange={(e) => setSearchText(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+              )}
+
+              {/* 统计信息 */}
+              <div className="flex items-center justify-between px-1 py-2 rounded-lg bg-muted/50">
+                <span className="text-sm text-muted-foreground">
+                  共 {filteredTags.length} 个标签
+                </span>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 text-green-600" />
+                  <span className="text-sm font-medium">
+                    已选 {selectedTagIds.length} 个
+                  </span>
+                </div>
+              </div>
+
+              {/* 标签列表 */}
+              <div className="space-y-2 max-h-[360px] overflow-y-auto pr-2 -mr-2">
+                {filteredTags.length > 0 ? (
+                  filteredTags.map(tag => (
+                    <div
+                      key={tag.id}
+                      className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors cursor-pointer group"
+                      onClick={() => handleToggle(tag.id)}
+                    >
                      <Checkbox
                        id={`tag-${tag.id}`}
                        checked={selectedTagIds.includes(tag.id)}
                        onCheckedChange={() => handleToggle(tag.id)}
+                        onClick={(e) => e.stopPropagation()}
                      />
-                      <label
-                        htmlFor={`tag-${tag.id}`}
-                        className="flex items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer flex-1"
-                      >
-                        <Badge
-                          variant="outline"
-                          style={{ backgroundColor: tag.color, color: '#fff' }}
-                        >
-                          {tag.name}
-                        </Badge>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Badge
+                            variant="secondary"
+                            className="font-medium"
+                            style={{ 
+                              backgroundColor: tag.color + '20', 
+                              color: tag.color,
+                              borderColor: tag.color + '40'
+                            }}
+                          >
+                            {tag.name}
+                          </Badge>
+                        </div>
                        {tag.description && (
-                          <span className="text-muted-foreground text-xs">
+                          <p className="text-xs text-muted-foreground line-clamp-1">
                            {tag.description}
-                          </span>
+                          </p>
                        )}
-                      </label>
+                      </div>
                    </div>
                  ))
+                ) : searchText ? (
+                  <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                    <Search className="w-12 h-12 mb-3 opacity-20" />
+                    <p className="text-sm">未找到匹配的标签</p>
+                    <p className="text-xs mt-1">请尝试其他搜索词</p>
+                  </div>
                ) : (
-                  <div className="text-sm text-muted-foreground text-center py-4">
-                    暂无可用标签
+                  <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                    <TagIcon className="w-12 h-12 mb-3 opacity-20" />
+                    <p className="text-sm">暂无可用标签</p>
+                    <p className="text-xs mt-1">请先创建标签</p>
                  </div>
                )}
              </div>
-            </>
+            </div>
          )}
-        </div>
+        </DialogBody>
+
        <DialogFooter>
          <Button
            variant="outline"
@ -153,7 +218,12 @@ const AssignTagDialog: React.FC<AssignTagDialogProps> = ({
          >
            取消
          </Button>
-          <Button onClick={handleSubmit} disabled={submitting || loading}>
+          <Button 
+            onClick={handleSubmit} 
+            disabled={submitting || loading}
+            className="min-w-[100px]"
+          >
+            {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            {submitting ? '保存中...' : '确定'}
          </Button>
        </DialogFooter>
--- a/frontend/src/pages/System/Role/List/components/PermissionDialog.tsx
+++ b/frontend/src/pages/System/Role/List/components/PermissionDialog.tsx
@ -16,8 +16,9 @@ import { getPermissionTree } from '../service';
 interface PermissionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
-  onConfirm: (permissionIds: number[]) => Promise<void>;
-  defaultCheckedKeys?: number[];
+  onConfirm: (menuIds: number[], permissionIds: number[]) => Promise<void>;
+  defaultMenuIds?: number[];
+  defaultPermissionIds?: number[];
 }

 interface Permission {
@ -40,17 +41,30 @@ interface MenuItem {

 /**
 * 权限分配对话框（使用 Accordion 实现树形结构）
+ * 
+ * 级联选择规则（与后端一致）：
+ * 1. ✅ 勾选权限 → 自动勾选所属菜单及所有父菜单
+ * 2. ✅ 勾选菜单 → 自动勾选该菜单、所有子菜单、所有父菜单
+ * 3. ✅ 取消菜单 → 自动取消该菜单及所有子菜单的菜单ID和权限ID
+ * 4. ✅ 半选状态 → 菜单部分权限被选中时显示半选状态
+ * 
+ * 示例：
+ * - 勾选"用户管理"权限 → 自动勾选"用户管理"菜单 + "系统管理"父菜单
+ * - 勾选"用户管理"菜单 → 自动勾选"系统管理"父菜单 + 所有子菜单和权限
+ * - 提交时同时包含菜单ID和权限ID，后端有兜底逻辑确保数据完整性
 */
 const PermissionDialog: React.FC<PermissionDialogProps> = ({
  open,
  onOpenChange,
  onConfirm,
-  defaultCheckedKeys = []
+  defaultMenuIds = [],
+  defaultPermissionIds = []
 }) => {
  const { toast } = useToast();
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [menuTree, setMenuTree] = useState<MenuItem[]>([]);
+  const [checkedMenuIds, setCheckedMenuIds] = useState<number[]>([]);
  const [checkedPermissionIds, setCheckedPermissionIds] = useState<number[]>([]);
  const [searchText, setSearchText] = useState('');

@ -62,7 +76,8 @@ const PermissionDialog: React.FC<PermissionDialogProps> = ({
      try {
        const response = await getPermissionTree();
        setMenuTree(response);
-        setCheckedPermissionIds(defaultCheckedKeys);
+        setCheckedMenuIds(defaultMenuIds);
+        setCheckedPermissionIds(defaultPermissionIds);
      } catch (error) {
        console.error('获取权限树失败:', error);
        toast({
@ -76,17 +91,89 @@ const PermissionDialog: React.FC<PermissionDialogProps> = ({
    };

    loadPermissionTree();
-  }, [open, defaultCheckedKeys]);
+  }, [open, defaultMenuIds, defaultPermissionIds]);

-  // 切换权限选中状态
-  const handleTogglePermission = (permissionId: number) => {
-    setCheckedPermissionIds(prev =>
-      prev.includes(permissionId)
-        ? prev.filter(id => id !== permissionId)
-        : [...prev, permissionId]
+  // 获取某个菜单的所有父菜单ID（递归向上查找）
+  const getParentMenuIds = (targetMenuId: number, menus: MenuItem[], parentIds: number[] = []): number[] => {
+    for (const menu of menus) {
+      if (menu.id === targetMenuId) {
+        return parentIds;
+      }
+      if (menu.permissionChildren && menu.permissionChildren.length > 0) {
+        const found = menu.permissionChildren.some(child => child.id === targetMenuId);
+        if (found) {
+          return [...parentIds, menu.id];
+        }
+        const result = getParentMenuIds(targetMenuId, menu.permissionChildren, [...parentIds, menu.id]);
+        if (result.length > 0) {
+          return result;
+        }
+      }
+    }
+    return [];
+  };
+
+  // 根据权限ID找到它所属的菜单
+  const getMenuByPermissionId = (permissionId: number, menus: MenuItem[]): MenuItem | null => {
+    for (const menu of menus) {
+      if (menu.permissions?.some(p => p.id === permissionId)) {
+        return menu;
+      }
+      if (menu.permissionChildren && menu.permissionChildren.length > 0) {
+        const result = getMenuByPermissionId(permissionId, menu.permissionChildren);
+        if (result) return result;
+      }
+    }
+    return null;
+  };
+
+  // 切换菜单选中状态
+  const handleToggleMenuId = (menuId: number) => {
+    setCheckedMenuIds(prev =>
+      prev.includes(menuId)
+        ? prev.filter(id => id !== menuId)
+        : [...prev, menuId]
    );
  };

+  // 切换权限选中状态（带级联）
+  const handleTogglePermission = (permissionId: number) => {
+    setCheckedPermissionIds(prev => {
+      if (prev.includes(permissionId)) {
+        // 取消勾选权限
+        return prev.filter(id => id !== permissionId);
+      } else {
+        // 勾选权限：自动勾选所属菜单及其所有父菜单
+        const menu = getMenuByPermissionId(permissionId, menuTree);
+        if (menu) {
+          const parentIds = getParentMenuIds(menu.id, menuTree);
+          const allParentMenuIds = [...parentIds, menu.id];
+          
+          // 添加所有父菜单ID
+          setCheckedMenuIds(prevMenuIds => {
+            const newMenuIds = new Set(prevMenuIds);
+            allParentMenuIds.forEach(id => newMenuIds.add(id));
+            return Array.from(newMenuIds);
+          });
+        }
+        
+        // 添加权限ID
+        return [...prev, permissionId];
+      }
+    });
+  };
+
+  // 递归获取菜单下所有子菜单ID（包括自己）
+  const getAllMenuIds = (menu: MenuItem): number[] => {
+    const ids: number[] = [menu.id];
+    if (menu.permissionChildren) {
+      menu.permissionChildren.forEach(child => {
+        ids.push(...getAllMenuIds(child));
+      });
+    }
+    return ids;
+  };
+
  // 递归获取菜单下所有权限ID
  const getAllPermissionIds = (menu: MenuItem): number[] => {
    const ids: number[] = [];
@ -101,37 +188,64 @@ const PermissionDialog: React.FC<PermissionDialogProps> = ({
    return ids;
  };

-  // 检查菜单下所有权限是否全选
+  // 检查菜单是否应该显示为选中状态
+  const isMenuChecked = (menu: MenuItem): boolean => {
+    // 如果菜单ID在checkedMenuIds中，直接返回true
+    if (checkedMenuIds.includes(menu.id)) {
+      return true;
+    }
+    // 否则检查菜单下所有权限是否都被选中
+    const allPermissionIds = getAllPermissionIds(menu);
+    return allPermissionIds.length > 0 && allPermissionIds.every(id => checkedPermissionIds.includes(id));
+  };
+
+  // 检查菜单下所有权限是否全选（用于判断取消逻辑）
  const isMenuFullyChecked = (menu: MenuItem): boolean => {
    const allIds = getAllPermissionIds(menu);
    return allIds.length > 0 && allIds.every(id => checkedPermissionIds.includes(id));
  };

-  // 检查菜单下是否有部分权限选中
+  // 检查菜单下是否有部分权限选中（用于半选状态）
  const isMenuPartiallyChecked = (menu: MenuItem): boolean => {
+    // 如果菜单ID在checkedMenuIds中，不显示半选
+    if (checkedMenuIds.includes(menu.id)) {
+      return false;
+    }
+    // 检查是否有部分权限被选中
    const allIds = getAllPermissionIds(menu);
    const checkedCount = allIds.filter(id => checkedPermissionIds.includes(id)).length;
    return checkedCount > 0 && checkedCount < allIds.length;
  };

-  // 切换菜单的全选/取消全选
+  // 切换菜单的全选/取消全选（带级联）
  const handleToggleMenu = (menu: MenuItem) => {
-    const allIds = getAllPermissionIds(menu);
-    const isFullyChecked = isMenuFullyChecked(menu);
+    const allPermissionIds = getAllPermissionIds(menu);
+    const allMenuIds = getAllMenuIds(menu);
+    // 使用 isMenuChecked 来判断当前状态
+    const currentChecked = isMenuChecked(menu);
    
-    if (isFullyChecked) {
-      // 取消全选
-      setCheckedPermissionIds(prev => prev.filter(id => !allIds.includes(id)));
+    if (currentChecked) {
+      // 取消全选：移除菜单ID和权限ID
+      setCheckedMenuIds(prev => prev.filter(id => !allMenuIds.includes(id)));
+      setCheckedPermissionIds(prev => prev.filter(id => !allPermissionIds.includes(id)));
    } else {
-      // 全选
+      // 全选：添加菜单ID、权限ID，并自动勾选所有父菜单
+      const parentIds = getParentMenuIds(menu.id, menuTree);
+      
+      setCheckedMenuIds(prev => {
+        const newIds = new Set(prev);
+        // 添加当前菜单及所有子菜单ID
+        allMenuIds.forEach(id => newIds.add(id));
+        // 添加所有父菜单ID
+        parentIds.forEach(id => newIds.add(id));
+        return Array.from(newIds);
+      });
+      
      setCheckedPermissionIds(prev => {
-        const newIds = [...prev];
-        allIds.forEach(id => {
-          if (!newIds.includes(id)) {
-            newIds.push(id);
-          }
-        });
-        return newIds;
+        const newIds = new Set(prev);
+        // 添加当前菜单及所有子菜单的权限ID
+        allPermissionIds.forEach(id => newIds.add(id));
+        return Array.from(newIds);
      });
    }
  };
@ -179,7 +293,7 @@ const PermissionDialog: React.FC<PermissionDialogProps> = ({
  const renderMenuItem = (menu: MenuItem, level: number = 0): React.ReactNode => {
    const hasChildren = menu.permissionChildren && menu.permissionChildren.length > 0;
    const hasPermissions = menu.permissions && menu.permissions.length > 0;
-    const isChecked = isMenuFullyChecked(menu);
+    const isChecked = isMenuChecked(menu);
    const isPartial = isMenuPartiallyChecked(menu);

    if (!hasChildren && !hasPermissions) {
@ -281,7 +395,7 @@ const PermissionDialog: React.FC<PermissionDialogProps> = ({
  const handleSubmit = async () => {
    setSubmitting(true);
    try {
-      await onConfirm(checkedPermissionIds);
+      await onConfirm(checkedMenuIds, checkedPermissionIds);
      onOpenChange(false);
    } catch (error) {
      console.error('分配权限失败:', error);
--- a/frontend/src/pages/System/Role/List/index.tsx
+++ b/frontend/src/pages/System/Role/List/index.tsx
@ -10,7 +10,7 @@ import {
  ShieldCheck, Settings, Shield
 } from 'lucide-react';
 import { useToast } from '@/components/ui/use-toast';
-import { getRoleList, deleteRole, getRolePermissions, assignPermissions } from './service';
+import { getRoleList, deleteRole, getRoleMenusAndPermissions, assignMenusAndPermissions } from './service';
 import type { RoleResponse, RoleQuery } from './types';
 import type { Page } from '@/types/base';
 import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
@ -36,7 +36,8 @@ const RolePage: React.FC = () => {
  const [tagDialogOpen, setTagDialogOpen] = useState(false);
  const [assignTagDialogOpen, setAssignTagDialogOpen] = useState(false);
  const [selectedRole, setSelectedRole] = useState<RoleResponse | null>(null);
-  const [defaultCheckedKeys, setDefaultCheckedKeys] = useState<number[]>([]);
+  const [defaultMenuIds, setDefaultMenuIds] = useState<number[]>([]);
+  const [defaultPermissionIds, setDefaultPermissionIds] = useState<number[]>([]);
  const [query, setQuery] = useState<RoleQuery>({
    pageNum: DEFAULT_CURRENT - 1,
    pageSize: DEFAULT_PAGE_SIZE,
@ -123,16 +124,11 @@ const RolePage: React.FC = () => {
  // 分配权限
  const handleAssignPermissions = async (record: RoleResponse) => {
    try {
-      const permissions = await getRolePermissions(record.id);
+      const data = await getRoleMenusAndPermissions(record.id);
      setSelectedRole(record);
      setPermissionDialogOpen(true);
-      setDefaultCheckedKeys(
-        Array.isArray(permissions)
-          ? typeof permissions[0] === 'number'
-            ? permissions
-            : permissions.map((p: any) => p.id)
-          : []
-      );
+      setDefaultMenuIds(data.menuIds || []);
+      setDefaultPermissionIds(data.permissionIds || []);
    } catch (error) {
      console.error('获取角色权限失败:', error);
      toast({
@ -143,10 +139,10 @@ const RolePage: React.FC = () => {
    }
  };

-  const confirmAssignPermissions = async (permissionIds: number[]) => {
+  const confirmAssignPermissions = async (menuIds: number[], permissionIds: number[]) => {
    if (!selectedRole) return;
    try {
-      await assignPermissions(selectedRole.id, permissionIds);
+      await assignMenusAndPermissions(selectedRole.id, { menuIds, permissionIds });
      toast({
        title: '分配成功',
        description: `已为角色 "${selectedRole.name}" 分配权限`,
@ -409,7 +405,8 @@ const RolePage: React.FC = () => {
            open={permissionDialogOpen}
            onOpenChange={setPermissionDialogOpen}
            onConfirm={confirmAssignPermissions}
-            defaultCheckedKeys={defaultCheckedKeys}
+            defaultMenuIds={defaultMenuIds}
+            defaultPermissionIds={defaultPermissionIds}
          />
          <AssignTagDialog
            open={assignTagDialogOpen}
--- a/frontend/src/pages/System/Role/List/service.ts
+++ b/frontend/src/pages/System/Role/List/service.ts
@ -1,5 +1,5 @@
 import request from '@/utils/request';
-import type {RoleResponse, RoleRequest, RoleQuery, RoleTagResponse, RoleTagRequest, Permission} from './types';
+import type {RoleResponse, RoleRequest, RoleQuery, RoleTagResponse, RoleTagRequest, Permission, MenusAndPermissions} from './types';
 import {Page} from "@/types/base.ts";

 const BASE_URL = '/api/v1/role';
@ -31,11 +31,11 @@ export const updateRoleTag = (id: number, data: RoleTagRequest) => request.put(`

 export const createRoleTag = (data: RoleTagRequest) => request.post<RoleTagResponse>(ROLE_TAG_BASE_URL, data);

-// 获取角色的权限列表
-export const getRolePermissions = (roleId: number) => request.get<string[]>(`${BASE_URL}/${roleId}/permissions`);
+// 获取角色的菜单和权限列表
+export const getRoleMenusAndPermissions = (roleId: number) => request.get<MenusAndPermissions>(`${BASE_URL}/${roleId}/menus-and-permissions`);

-// 分配权限
-export const assignPermissions = (roleId: number, permissionIds: Number[]) => request.post(`${BASE_URL}/${roleId}/permissions`, permissionIds);
+// 分配菜单和权限
+export const assignMenusAndPermissions = (roleId: number, data: MenusAndPermissions) => request.post(`${BASE_URL}/${roleId}/menus-and-permissions`, data);

 // 获取所有权限列表
 export const getAllPermissions = () => request.get<Permission[]>(`${PERMISSION_BASE_URL}/list`);
--- a/frontend/src/pages/System/Role/List/types.ts
+++ b/frontend/src/pages/System/Role/List/types.ts
@ -67,4 +67,10 @@ export interface Permission {
    enabled: boolean;
    sort: number;
    description?: string;
-} 
+}
+
+// 菜单和权限数据
+export interface MenusAndPermissions {
+    menuIds: number[];
+    permissionIds: number[];
+}