修复弹窗边距问题

2025-11-01 12:57:19 +08:00 · 2025-11-01 12:57:19 +08:00 · 33282d9229
commit 33282d9229
parent 895b3c0911
5 changed files with 73 additions and 36 deletions
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@ -47,6 +47,7 @@ const Toast = React.forwardRef<
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
+      duration={3000}
      {...props}
    />
  )
--- a/frontend/src/pages/Deploy/Team/List/components/TeamConfigDialog.tsx
+++ b/frontend/src/pages/Deploy/Team/List/components/TeamConfigDialog.tsx
@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetFooter,
-} from '@/components/ui/sheet';
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
@ -48,7 +48,7 @@ import {
  deleteTeamApplication,
 } from '../service';

-interface TeamConfigSheetProps {
+interface TeamConfigDialogProps {
  open: boolean;
  teamId: number;
  teamName: string;
@ -59,7 +59,7 @@ interface TeamConfigSheetProps {
  onSuccess: () => void;
 }

-const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
+const TeamConfigDialog: React.FC<TeamConfigDialogProps> = ({
  open,
  teamId,
  teamName,
@ -350,7 +350,7 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
        description: '团队配置已保存',
      });
      onSuccess();
-      onOpenChange(false); // 关闭抽屉
+      onOpenChange(false);
    } catch (error: any) {
      toast({
        variant: 'destructive',
@ -511,11 +511,11 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
  );

  return (
-    <Sheet open={open}>
-      <SheetContent side="right" className="w-[700px] sm:max-w-[700px]" showClose={false}>
-        <SheetHeader>
-          <SheetTitle>团队配置：{teamName}</SheetTitle>
-        </SheetHeader>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] p-0">
+        <DialogHeader className="px-6 pt-6 pb-0">
+          <DialogTitle>团队配置：{teamName}</DialogTitle>
+        </DialogHeader>

        {loading ? (
          <div className="flex items-center justify-center h-[400px]">
@ -524,10 +524,12 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
        ) : (
          <>
            {/* 步骤指示器 */}
-            {renderStepIndicator()}
+            <div className="px-6">
+              {renderStepIndicator()}
+            </div>

-            <ScrollArea className="h-[calc(100vh-240px)] mt-6 pr-4">
-              <div className="space-y-6">
+            <ScrollArea className="h-[calc(90vh-240px)] px-6">
+              <div className="space-y-6 py-4">
                {/* Step 1: 环境选择 */}
                {currentStep === 1 && (
                  <Card>
@ -904,14 +906,14 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
                          );
                        })}
                      </div>
-                  </CardContent>
-                </Card>
+                    </CardContent>
+                  </Card>
                )}
              </div>
            </ScrollArea>

            {/* 底部导航按钮 */}
-            <SheetFooter className="mt-4 flex justify-between items-center">
+            <DialogFooter className="flex justify-between items-center">
              <Button
                variant="outline"
                onClick={handlePrev}
@ -945,13 +947,13 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
                  </Button>
                )}
              </div>
-            </SheetFooter>
+            </DialogFooter>
          </>
        )}
-      </SheetContent>
-    </Sheet>
+      </DialogContent>
+    </Dialog>
  );
 };

-export default TeamConfigSheet;
+export default TeamConfigDialog;

--- a/frontend/src/pages/Deploy/Team/List/index.tsx
+++ b/frontend/src/pages/Deploy/Team/List/index.tsx
@ -9,7 +9,7 @@ import { getUserList } from '@/pages/System/User/List/service';
 import type { UserResponse } from '@/pages/System/User/List/types';
 import { getEnvironmentList, getApplicationList } from './service';
 import type { Environment, Application } from './types';
-import TeamConfigSheet from './components/TeamConfigSheet';
+import TeamConfigDialog from './components/TeamConfigDialog';
 import {
  Table,
  TableHeader,
@ -482,7 +482,7 @@ const TeamList: React.FC = () => {
            onOpenChange={setMemberDialogOpen}
            onSuccess={handleSuccess}
          />
-          <TeamConfigSheet
+          <TeamConfigDialog
            open={configDialogOpen}
            teamId={currentTeam.id}
            teamName={currentTeam.teamName}
--- a/frontend/src/pages/System/Menu/List/index.tsx
+++ b/frontend/src/pages/System/Menu/List/index.tsx
@ -4,9 +4,10 @@ import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
  Loader2, Plus, Edit, Trash2, ChevronRight, ChevronDown,
-  FolderTree, Menu as MenuIcon
+  FolderTree, Menu as MenuIcon, EyeOff
 } from 'lucide-react';
 import { useDispatch } from 'react-redux';
 import { setMenus } from '@/store/userSlice';
@ -146,7 +147,10 @@ const MenuPage: React.FC = () => {

    // 当前菜单行
    rows.push(
-      <TableRow key={menu.id} className="hover:bg-muted/50">
+      <TableRow 
+        key={menu.id} 
+        className={`hover:bg-muted/50 ${menu.hidden ? 'bg-muted/30' : ''}`}
+      >
        <TableCell width="250px">
          <div className="flex items-center gap-2" style={{ paddingLeft: `${level * 24}px` }}>
            {hasChildren ? (
@ -163,20 +167,49 @@ const MenuPage: React.FC = () => {
            ) : (
              <span className="w-5" />
            )}
-            <span className="font-medium">{menu.name}</span>
+            <span className={`font-medium ${menu.hidden ? 'line-through text-muted-foreground' : ''}`}>
+              {menu.name}
+            </span>
+            {menu.hidden && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground/60 ml-1.5" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>隐藏菜单</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
          </div>
        </TableCell>
        <TableCell width="80px">
          {menu.icon && (
-            <div className="flex items-center">
+            <div className={`flex items-center ${menu.hidden ? 'opacity-50' : ''}`}>
              {getIconComponent(menu.icon)}
            </div>
          )}
        </TableCell>
-        <TableCell width="200px" className="text-sm">{menu.path || '-'}</TableCell>
-        <TableCell width="200px" className="text-sm max-w-[200px] truncate" title={menu.component}>
+        <TableCell width="200px" className={`text-sm ${menu.hidden ? 'line-through text-muted-foreground' : ''}`}>
+          {menu.path || '-'}
+        </TableCell>
+        <TableCell 
+          width="200px" 
+          className={`text-sm max-w-[200px] truncate ${menu.hidden ? 'line-through text-muted-foreground' : ''}`} 
+          title={menu.component}
+        >
          {menu.component || '-'}
        </TableCell>
+        <TableCell width="150px" className="text-sm">
+          {menu.permission ? (
+            <code className={`text-xs bg-muted px-2 py-0.5 rounded ${menu.hidden ? 'line-through text-muted-foreground' : ''}`}>
+              {menu.permission}
+            </code>
+          ) : (
+            <span className={menu.hidden ? 'line-through text-muted-foreground' : ''}>-</span>
+          )}
+        </TableCell>
        <TableCell width="100px">{getTypeBadge(menu.type)}</TableCell>
        <TableCell width="100px" className="text-center">{menu.sort}</TableCell>
        <TableCell width="200px" sticky>
@ -304,13 +337,14 @@ const MenuPage: React.FC = () => {
        <CardContent>
          {/* 表格 */}
          <div className="rounded-md border">
-            <Table minWidth="1130px">
+            <Table minWidth="1280px">
              <TableHeader>
                <TableRow>
                  <TableHead width="250px">菜单名称</TableHead>
                  <TableHead width="80px">图标</TableHead>
                  <TableHead width="200px">路由地址</TableHead>
                  <TableHead width="200px">组件路径</TableHead>
+                  <TableHead width="150px">权限标识</TableHead>
                  <TableHead width="100px">菜单类型</TableHead>
                  <TableHead width="100px" className="text-center">显示排序</TableHead>
                  <TableHead width="200px" sticky>操作</TableHead>
@ -319,7 +353,7 @@ const MenuPage: React.FC = () => {
              <TableBody>
                {loading ? (
                  <TableRow>
-                    <TableCell colSpan={7} className="h-24 text-center">
+                    <TableCell colSpan={8} className="h-24 text-center">
                      <div className="flex items-center justify-center">
                        <Loader2 className="h-6 w-6 animate-spin mr-2" />
                        <span className="text-sm text-muted-foreground">加载中...</span>
@ -330,7 +364,7 @@ const MenuPage: React.FC = () => {
                  menuTree.map(menu => renderMenuRow(menu))
                ) : (
                  <TableRow>
-                    <TableCell colSpan={7} className="h-24 text-center">
+                    <TableCell colSpan={8} className="h-24 text-center">
                      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
                        <FolderTree className="w-16 h-16 mb-4 text-muted-foreground/50" />
                        <div className="text-lg font-semibold mb-2">暂无菜单数据</div>
--- a/frontend/src/pages/System/Role/List/service.ts
+++ b/frontend/src/pages/System/Role/List/service.ts
@ -40,4 +40,4 @@ export const assignPermissions = (roleId: number, permissionIds: Number[]) => re
 export const getAllPermissions = () => request.get<Permission[]>('/api/v1/permission/list');

 // 获取权限树
-export const getPermissionTree = () => request.get('/api/v1/menu/permission-tree');
+export const getPermissionTree = () => request.get('/api/v1/role/permission-tree');