修复弹窗边距问题

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 <ToastPrimitives.Root
ref={ref} ref={ref}
className={cn(toastVariants({ variant }), className)} className={cn(toastVariants({ variant }), className)}
duration={3000}
{...props} {...props}
/> />
) )

View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { import {
Sheet, Dialog,
SheetContent, DialogContent,
SheetHeader, DialogHeader,
SheetTitle, DialogTitle,
SheetFooter, DialogFooter,
} from '@/components/ui/sheet'; } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
@ -48,7 +48,7 @@ import {
deleteTeamApplication, deleteTeamApplication,
} from '../service'; } from '../service';
interface TeamConfigSheetProps { interface TeamConfigDialogProps {
open: boolean; open: boolean;
teamId: number; teamId: number;
teamName: string; teamName: string;
@ -59,7 +59,7 @@ interface TeamConfigSheetProps {
onSuccess: () => void; onSuccess: () => void;
} }
const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({ const TeamConfigDialog: React.FC<TeamConfigDialogProps> = ({
open, open,
teamId, teamId,
teamName, teamName,
@ -350,7 +350,7 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
description: '团队配置已保存', description: '团队配置已保存',
}); });
onSuccess(); onSuccess();
onOpenChange(false); // 关闭抽屉 onOpenChange(false);
} catch (error: any) { } catch (error: any) {
toast({ toast({
variant: 'destructive', variant: 'destructive',
@ -511,11 +511,11 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
); );
return ( return (
<Sheet open={open}> <Dialog open={open} onOpenChange={onOpenChange}>
<SheetContent side="right" className="w-[700px] sm:max-w-[700px]" showClose={false}> <DialogContent className="max-w-4xl max-h-[90vh] p-0">
<SheetHeader> <DialogHeader className="px-6 pt-6 pb-0">
<SheetTitle>{teamName}</SheetTitle> <DialogTitle>{teamName}</DialogTitle>
</SheetHeader> </DialogHeader>
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-[400px]"> <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"> <ScrollArea className="h-[calc(90vh-240px)] px-6">
<div className="space-y-6"> <div className="space-y-6 py-4">
{/* Step 1: 环境选择 */} {/* Step 1: 环境选择 */}
{currentStep === 1 && ( {currentStep === 1 && (
<Card> <Card>
@ -904,14 +906,14 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
); );
})} })}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
)} )}
</div> </div>
</ScrollArea> </ScrollArea>
{/* 底部导航按钮 */} {/* 底部导航按钮 */}
<SheetFooter className="mt-4 flex justify-between items-center"> <DialogFooter className="flex justify-between items-center">
<Button <Button
variant="outline" variant="outline"
onClick={handlePrev} onClick={handlePrev}
@ -945,13 +947,13 @@ const TeamConfigSheet: React.FC<TeamConfigSheetProps> = ({
</Button> </Button>
)} )}
</div> </div>
</SheetFooter> </DialogFooter>
</> </>
)} )}
</SheetContent> </DialogContent>
</Sheet> </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 type { UserResponse } from '@/pages/System/User/List/types';
import { getEnvironmentList, getApplicationList } from './service'; import { getEnvironmentList, getApplicationList } from './service';
import type { Environment, Application } from './types'; import type { Environment, Application } from './types';
import TeamConfigSheet from './components/TeamConfigSheet'; import TeamConfigDialog from './components/TeamConfigDialog';
import { import {
Table, Table,
TableHeader, TableHeader,
@ -482,7 +482,7 @@ const TeamList: React.FC = () => {
onOpenChange={setMemberDialogOpen} onOpenChange={setMemberDialogOpen}
onSuccess={handleSuccess} onSuccess={handleSuccess}
/> />
<TeamConfigSheet <TeamConfigDialog
open={configDialogOpen} open={configDialogOpen}
teamId={currentTeam.id} teamId={currentTeam.id}
teamName={currentTeam.teamName} teamName={currentTeam.teamName}

View File

@ -4,9 +4,10 @@ import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast'; import { useToast } from '@/components/ui/use-toast';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { import {
Loader2, Plus, Edit, Trash2, ChevronRight, ChevronDown, Loader2, Plus, Edit, Trash2, ChevronRight, ChevronDown,
FolderTree, Menu as MenuIcon FolderTree, Menu as MenuIcon, EyeOff
} from 'lucide-react'; } from 'lucide-react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { setMenus } from '@/store/userSlice'; import { setMenus } from '@/store/userSlice';
@ -146,7 +147,10 @@ const MenuPage: React.FC = () => {
// 当前菜单行 // 当前菜单行
rows.push( 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"> <TableCell width="250px">
<div className="flex items-center gap-2" style={{ paddingLeft: `${level * 24}px` }}> <div className="flex items-center gap-2" style={{ paddingLeft: `${level * 24}px` }}>
{hasChildren ? ( {hasChildren ? (
@ -163,20 +167,49 @@ const MenuPage: React.FC = () => {
) : ( ) : (
<span className="w-5" /> <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> </div>
</TableCell> </TableCell>
<TableCell width="80px"> <TableCell width="80px">
{menu.icon && ( {menu.icon && (
<div className="flex items-center"> <div className={`flex items-center ${menu.hidden ? 'opacity-50' : ''}`}>
{getIconComponent(menu.icon)} {getIconComponent(menu.icon)}
</div> </div>
)} )}
</TableCell> </TableCell>
<TableCell width="200px" className="text-sm">{menu.path || '-'}</TableCell> <TableCell width="200px" className={`text-sm ${menu.hidden ? 'line-through text-muted-foreground' : ''}`}>
<TableCell width="200px" className="text-sm max-w-[200px] truncate" title={menu.component}> {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 || '-'} {menu.component || '-'}
</TableCell> </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">{getTypeBadge(menu.type)}</TableCell>
<TableCell width="100px" className="text-center">{menu.sort}</TableCell> <TableCell width="100px" className="text-center">{menu.sort}</TableCell>
<TableCell width="200px" sticky> <TableCell width="200px" sticky>
@ -304,13 +337,14 @@ const MenuPage: React.FC = () => {
<CardContent> <CardContent>
{/* 表格 */} {/* 表格 */}
<div className="rounded-md border"> <div className="rounded-md border">
<Table minWidth="1130px"> <Table minWidth="1280px">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead width="250px"></TableHead> <TableHead width="250px"></TableHead>
<TableHead width="80px"></TableHead> <TableHead width="80px"></TableHead>
<TableHead width="200px"></TableHead> <TableHead width="200px"></TableHead>
<TableHead width="200px"></TableHead> <TableHead width="200px"></TableHead>
<TableHead width="150px"></TableHead>
<TableHead width="100px"></TableHead> <TableHead width="100px"></TableHead>
<TableHead width="100px" className="text-center"></TableHead> <TableHead width="100px" className="text-center"></TableHead>
<TableHead width="200px" sticky></TableHead> <TableHead width="200px" sticky></TableHead>
@ -319,7 +353,7 @@ const MenuPage: React.FC = () => {
<TableBody> <TableBody>
{loading ? ( {loading ? (
<TableRow> <TableRow>
<TableCell colSpan={7} className="h-24 text-center"> <TableCell colSpan={8} className="h-24 text-center">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin mr-2" /> <Loader2 className="h-6 w-6 animate-spin mr-2" />
<span className="text-sm text-muted-foreground">...</span> <span className="text-sm text-muted-foreground">...</span>
@ -330,7 +364,7 @@ const MenuPage: React.FC = () => {
menuTree.map(menu => renderMenuRow(menu)) menuTree.map(menu => renderMenuRow(menu))
) : ( ) : (
<TableRow> <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"> <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" /> <FolderTree className="w-16 h-16 mb-4 text-muted-foreground/50" />
<div className="text-lg font-semibold mb-2"></div> <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 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');