修复弹窗边距问题
This commit is contained in:
parent
895b3c0911
commit
33282d9229
@ -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}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -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;
|
||||||
|
|
||||||
@ -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}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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');
|
||||||
Loading…
Reference in New Issue
Block a user