修复弹窗边距问题

This commit is contained in:
dengqichen 2025-11-01 12:57:19 +08:00
parent 895b3c0911
commit 33282d9229
5 changed files with 73 additions and 36 deletions

View File

@ -47,6 +47,7 @@ const Toast = React.forwardRef<
<ToastPrimitives.Root
ref={ref}
className={cn(toastVariants({ variant }), className)}
duration={3000}
{...props}
/>
)

View File

@ -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> = ({
) : (
<>
{/* 步骤指示器 */}
<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>
@ -911,7 +913,7 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
</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;

View File

@ -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}

View File

@ -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>

View File

@ -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');