ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可正常启用

Browse Source
This commit is contained in:
戚辰先生 2024-12-02 22:50:42 +08:00
parent 1582caf776
commit c733f0c1d8
16 changed files with 653 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@ -2,9 +2,9 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>管理系统</title>
<title>Deploy Ease Platform</title>
</head>
<body>
<div id="root"></div>

8
frontend/public/favicon.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Deploy Ease</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle fill="#1890FF" cx="16" cy="16" r="16"/>
<path d="M16,8 L24,16 L20,16 L20,24 L12,24 L12,16 L8,16 L16,8 Z" fill="#FFFFFF"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 405 B

11
frontend/src/App.tsx
View File

@ -1,8 +1,15 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import { RouterProvider } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import router from './router';
const App: React.FC = () => {
return <Outlet />;
return (
<ConfigProvider locale={zhCN}>
<RouterProvider router={router} />
</ConfigProvider>
);
};
export default App;

18
frontend/src/components/IconSelect/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Modal, Input, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import * as AntdIcons from '@ant-design/icons';
import styles from './index.module.css';
import { getAvailableIcons } from '@/config/icons.tsx';
interface IconSelectProps {
value?: string;
@ -21,16 +21,8 @@ const IconSelect: React.FC<IconSelectProps> = ({
// 获取所有图标
const iconList = React.useMemo(() => {
return Object.keys(AntdIcons)
.filter(key => key.endsWith('Outlined'))
.map(key => {
const IconComponent = AntdIcons[key as keyof typeof AntdIcons] as any;
return {
name: key.replace('Outlined', '').toLowerCase(),
component: IconComponent
};
})
.filter(icon =>
const icons = getAvailableIcons();
return icons.filter(icon =>
search ? icon.name.toLowerCase().includes(search.toLowerCase()) : true
);
}, [search]);
@ -63,7 +55,9 @@ const IconSelect: React.FC<IconSelectProps> = ({
onClick={() => handleSelect(name)}
>
{React.createElement(Icon)}
<div className={styles.iconName}>{name}</div>
<div className={styles.iconName}>
{name.replace('Outlined', '')}
</div>
</div>
))}
</div>

41
frontend/src/config/icons.ts Normal file
View File

@ -0,0 +1,41 @@
import * as AntdIcons from '@ant-design/icons';
// 图标名称映射配置
export const iconMap: Record<string, string> = {
'setting': 'SettingOutlined',
'user': 'UserOutlined',
'tree-table': 'TableOutlined',
'tree': 'ApartmentOutlined',
'api': 'ApiOutlined',
'menu': 'MenuOutlined',
'department': 'TeamOutlined',
'role': 'UserSwitchOutlined',
'external': 'ApiOutlined',
'system': 'SettingOutlined'
};
// 获取图标组件的通用函数
export const getIconComponent = (iconName: string | undefined) => {
if (!iconName) return null;
// 如果在映射中存在，使用映射的名称
const mappedName = iconMap[iconName] || iconName;
// 确保首字母大写并添加Outlined后缀（如果需要）
const iconKey = mappedName.endsWith('Outlined')
? mappedName.charAt(0).toUpperCase() + mappedName.slice(1)
: `${mappedName.charAt(0).toUpperCase() + mappedName.slice(1)}Outlined`;
const Icon = (AntdIcons as any)[iconKey];
return Icon ? <Icon/> : null;
};
// 获取所有可用的图标列表
export const getAvailableIcons = () => {
return Object.keys(AntdIcons)
.filter(key => key.endsWith('Outlined'))
.map(key => ({
name: key,
component: (AntdIcons as any)[key]
}));
};

43
frontend/src/config/icons.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import * as AntdIcons from '@ant-design/icons';
// 图标名称映射配置
export const iconMap: Record<string, string> = {
'setting': 'SettingOutlined',
'user': 'UserOutlined',
'tree-table': 'TableOutlined',
'tree': 'ApartmentOutlined',
'api': 'ApiOutlined',
'menu': 'MenuOutlined',
'department': 'TeamOutlined',
'role': 'UserSwitchOutlined',
'external': 'ApiOutlined',
'system': 'SettingOutlined',
'dashboard': 'DashboardOutlined'
};
// 获取图标组件的通用函数
export const getIconComponent = (iconName: string | undefined) => {
if (!iconName) return null;
// 如果在映射中存在，使用映射的名称
const mappedName = iconMap[iconName] || iconName;
// 确保首字母大写并添加Outlined后缀（如果需要）
const iconKey = mappedName.endsWith('Outlined')
? mappedName.charAt(0).toUpperCase() + mappedName.slice(1)
: `${mappedName.charAt(0).toUpperCase() + mappedName.slice(1)}Outlined`;
const Icon = (AntdIcons as any)[iconKey];
return Icon ? React.createElement(Icon) : null;
};
// 获取所有可用的图标列表
export const getAvailableIcons = () => {
return Object.keys(AntdIcons)
.filter(key => key.endsWith('Outlined'))
.map(key => ({
name: key,
component: (AntdIcons as any)[key]
}));
};

57
frontend/src/layouts/BasicLayout.tsx
View File

@ -19,6 +19,7 @@ import type {RootState} from '../store';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {MenuResponse, MenuTypeEnum} from "@/pages/System/Menu/types";
import { getIconComponent } from '@/config/icons.tsx';
const {Header, Content, Sider} = Layout;
const {confirm} = Modal;
@ -26,7 +27,6 @@ const {confirm} = Modal;
// 设置中文语言
dayjs.locale('zh-cn');
const BasicLayout: React.FC = () => {
const navigate = useNavigate();
const location = useLocation();
@ -36,7 +36,32 @@ const BasicLayout: React.FC = () => {
const [loading, setLoading] = useState(true);
const [currentTime, setCurrentTime] = useState(dayjs());
const [weather, setWeather] = useState({temp: '--', weather: '未知', city: '未知'});
const [openKeys, setOpenKeys] = useState<string[]>([]);
// 根据当前路径获取需要展开的父级菜单
const getDefaultOpenKeys = () => {
const pathSegments = location.pathname.split('/').filter(Boolean);
const openKeys: string[] = [];
let currentPath = '';
pathSegments.forEach(segment => {
currentPath += `/${segment}`;
openKeys.push(currentPath);
});
return openKeys;
};
// 设置默认展开的菜单
const [openKeys, setOpenKeys] = useState<string[]>(getDefaultOpenKeys());
// 当路由变化时，自动展开对应的父级菜单
useEffect(() => {
const newOpenKeys = getDefaultOpenKeys();
setOpenKeys(prevKeys => {
const mergedKeys = [...new Set([...prevKeys, ...newOpenKeys])];
return mergedKeys;
});
}, [location.pathname]);
// 将天气获取逻辑提取为useCallback
const fetchWeather = useCallback(async () => {
@ -126,26 +151,27 @@ const BasicLayout: React.FC = () => {
];
// 获取图标组件
const getIcon = (iconName: string | undefined) => {
if (!iconName) return null;
const iconKey = `${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Outlined`;
const Icon = (AntdIcons as any)[iconKey];
return Icon ? <Icon/> : null;
};
const getIcon = getIconComponent;
// 将菜单数据转换为antd Menu需要的格式
const getMenuItems = (menuList: MenuResponse[]): MenuProps['items'] => {
return menuList
?.map(menu => {
?.filter(menu => menu.type !== MenuTypeEnum.BUTTON && !menu.hidden) // 过滤掉按钮类型和隐藏的菜单
.map(menu => {
// 确保path存在，否则使用id
const key = menu.path || `menu-${menu.id}`;
// 如果有子菜单，递归处理子菜单
const children = menu.children && menu.children.length > 0
? getMenuItems(menu.children.filter(child =>
child.type !== MenuTypeEnum.BUTTON && !child.hidden))
: undefined;
return {
key,
icon: getIcon(menu.icon),
label: menu.name,
children: menu.children && menu.children.length > 0
? getMenuItems(menu.children)
: undefined
children: children
};
});
};
@ -181,6 +207,9 @@ const BasicLayout: React.FC = () => {
);
}
console.log('Current location:', location.pathname);
console.log('Current menus:', menus);
return (
<Layout style={{minHeight: '100vh'}}>
<Sider>
@ -254,8 +283,8 @@ const BasicLayout: React.FC = () => {
</Dropdown>
</Space>
</Header>
<Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
<Outlet/>
<Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
<Outlet />
</Content>
</Layout>
</Layout>

110
frontend/src/pages/System/External/index.tsx vendored Normal file
View File

@ -0,0 +1,110 @@
import React from 'react';
import { Card, Table, Button, Space, Modal, Form, Input, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
interface ExternalSystem {
id: number;
name: string;
url: string;
description?: string;
createTime: string;
updateTime?: string;
}
const ExternalPage: React.FC = () => {
const [loading, setLoading] = React.useState(false);
const [data, setData] = React.useState<ExternalSystem[]>([]);
const columns: ColumnsType<ExternalSystem> = [
{
title: '系统名称',
dataIndex: 'name',
key: 'name',
width: 200,
},
{
title: '系统地址',
dataIndex: 'url',
key: 'url',
width: 300,
render: (url: string) => (
<a href={url} target="_blank" rel="noopener noreferrer">
{url}
</a>
),
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 180,
},
{
title: '更新时间',
dataIndex: 'updateTime',
key: 'updateTime',
width: 180,
},
{
title: '操作',
key: 'action',
width: 180,
render: (_, record) => (
<Space>
<Button
type="link"
icon={<EditOutlined />}
onClick={() => message.info('编辑功能开发中')}
>
编辑
</Button>
<Button
type="link"
danger
icon={<DeleteOutlined />}
onClick={() => message.info('删除功能开发中')}
>
删除
</Button>
</Space>
),
},
];
return (
<div>
<Card>
<div style={{ marginBottom: 16 }}>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => message.info('新增功能开发中')}
>
新增系统
</Button>
</div>
<Table
columns={columns}
dataSource={data}
rowKey="id"
loading={loading}
pagination={{
total: data.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条`,
}}
/>
</Card>
</div>
);
};
export default ExternalPage;

40
frontend/src/pages/System/Menu/index.tsx
View File

@ -3,15 +3,20 @@ import { Table, Button, Modal, Form, Input, Space, Switch, Select, TreeSelect, T
import { PlusOutlined, EditOutlined, DeleteOutlined, QuestionCircleOutlined, FolderOutlined, MenuOutlined, ToolOutlined, CaretRightOutlined } from '@ant-design/icons';
import type { TablePaginationConfig } from 'antd/es/table';
import type { FilterValue, SorterResult } from 'antd/es/table/interface';
import { getMenuTree } from './service';
import { getMenuTree, getCurrentUserMenus } from './service';
import type { MenuResponse } from './types';
import { MenuTypeEnum } from './types';
import IconSelect from '@/components/IconSelect';
import { useTableData } from '@/hooks/useTableData';
import * as AntdIcons from '@ant-design/icons';
import {FixedType} from "rc-table/lib/interface";
import { getIconComponent } from '@/config/icons.tsx';
import { useDispatch } from 'react-redux';
import { setMenus } from '@/store/userSlice';
import { message } from 'antd';
const MenuPage: React.FC = () => {
const dispatch = useDispatch();
const {
list: menus,
loading,
@ -111,6 +116,15 @@ const MenuPage: React.FC = () => {
}));
};
const updateReduxMenus = async () => {
try {
const menus = await getCurrentUserMenus();
dispatch(setMenus(menus));
} catch (error) {
console.error('更新菜单数据失败:', error);
}
};
const handleSubmit = async () => {
try {
const values = await form.validateFields();
@ -122,12 +136,16 @@ const MenuPage: React.FC = () => {
if (success) {
setModalVisible(false);
fetchMenus();
await updateReduxMenus();
message.success('更新成功');
}
} else {
const success = await handleCreate(values);
if (success) {
setModalVisible(false);
fetchMenus();
await updateReduxMenus();
message.success('创建成功');
}
}
} catch (error) {
@ -135,13 +153,21 @@ const MenuPage: React.FC = () => {
}
};
const getIcon = (iconName: string | undefined) => {
if (!iconName) return null;
const iconKey = `${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Outlined`;
const Icon = (AntdIcons as any)[iconKey];
return Icon ? <Icon /> : null;
const handleMenuDelete = async (id: number) => {
try {
const success = await handleDelete(id);
if (success) {
fetchMenus();
await updateReduxMenus();
message.success('删除成功');
}
} catch (error) {
console.error('删除失败:', error);
}
};
const getIcon = getIconComponent;
const columns = [
{
title: '菜单名称',
@ -229,7 +255,7 @@ const MenuPage: React.FC = () => {
size="small"
danger
icon={<DeleteOutlined/>}
onClick={() => handleDelete(record.id)}
onClick={() => handleMenuDelete(record.id)}
disabled={record.children?.length > 0}
>
删除

43
frontend/src/pages/System/Menu/service.ts
View File

@ -13,9 +13,48 @@ export const getMenuTree = () =>
request.get<MenuResponse[]>(`${BASE_URL}/tree`);
// 获取当前用户菜单
export const getCurrentUserMenus = () =>
request.get<MenuResponse[]>(`${BASE_URL}/current`);
export const getCurrentUserMenus = async () => {
const menus = await request.get<MenuResponse[]>(`${BASE_URL}/current`);
// 添加首页路由
const dashboard: MenuResponse = {
id: 0,
createTime: new Date().toISOString(),
updateTime: new Date().toISOString(),
version: 0,
deleted: false,
name: "首页",
path: "/dashboard",
component: "/Dashboard/index",
icon: "dashboard",
type: 2,
parentId: 0,
sort: 0,
hidden: false,
enabled: true,
createBy: "system",
updateBy: "system"
};
// 处理组件路径格式
const processMenu = (menu: MenuResponse): MenuResponse => {
const processed = { ...menu };
// 确保组件路径格式正确
if (processed.component && !processed.component.startsWith('/')) {
processed.component = `/${processed.component}`;
}
// 递归处理子菜单
if (processed.children) {
processed.children = processed.children.map(processMenu);
}
return processed;
};
const processedMenus = menus.map(processMenu);
return [dashboard, ...processedMenus];
};
// 创建菜单
export const createMenu = (data: MenuRequest) =>

84
frontend/src/pages/System/Role/components/AssignTagModal.tsx Normal file
View File

@ -0,0 +1,84 @@
import React, { useEffect, useState } from 'react';
import { Modal, Select, message, Spin } from 'antd';
import type { RoleTagResponse } from '../types';
import { getAllTags, assignTags } from '../service';
interface AssignTagModalProps {
visible: boolean;
roleId: number;
onCancel: () => void;
onSuccess: () => void;
selectedTags?: RoleTagResponse[];
}
const AssignTagModal: React.FC<AssignTagModalProps> = ({
visible,
roleId,
onCancel,
onSuccess,
selectedTags = []
}) => {
const [loading, setLoading] = useState(false);
const [allTags, setAllTags] = useState<RoleTagResponse[]>([]);
const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
useEffect(() => {
if (visible) {
loadTags();
setSelectedTagIds(selectedTags.map(tag => tag.id));
}
}, [visible, selectedTags]);
const loadTags = async () => {
try {
setLoading(true);
const tags = await getAllTags();
setAllTags(tags);
} catch (error) {
message.error('获取标签列表失败');
} finally {
setLoading(false);
}
};
const handleOk = async () => {
try {
await assignTags(roleId, selectedTagIds);
message.success('标签分配成功');
onSuccess();
} catch (error) {
message.error('标签分配失败');
}
};
return (
<Modal
title="分配标签"
open={visible}
onCancel={onCancel}
onOk={handleOk}
width={500}
styles={{
body: {
padding: '12px'
}
}}
>
<Spin spinning={loading}>
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="请选择标签"
value={selectedTagIds}
onChange={setSelectedTagIds}
options={allTags.map(tag => ({
label: tag.name,
value: tag.id
}))}
/>
</Spin>
</Modal>
);
};
export default AssignTagModal;

80
frontend/src/pages/System/Role/components/PermissionModal.tsx
View File

@ -39,44 +39,50 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
}) => {
const [loading, setLoading] = useState(false);
const [treeData, setTreeData] = useState<DataNode[]>([]);
const [checkedKeys, setCheckedKeys] = useState<number[]>(defaultCheckedKeys);
const [checkedKeys, setCheckedKeys] = useState<number[]>([]);
const [idMapping, setIdMapping] = useState<Record<string, number>>({});
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
// 将菜单和权限数据转换为Tree组件需要的格式
const convertToTreeData = (menuList: MenuItem[]): { treeData: DataNode[], idMapping: Record<string, number> } => {
const idMapping: Record<string, number> = {};
const convertToTreeData = (menuList: MenuItem[]): { treeData: DataNode[], idMapping: Record<string, number>, expandedKeys: string[] } => {
const mapping: Record<string, number> = {};
const expanded: string[] = [];
const convertMenuToNode = (menu: MenuItem): DataNode => {
const node: DataNode = {
key: `menu-${menu.id}`,
title: menu.name,
children: []
};
const children: DataNode[] = [];
const menuKey = `menu-${menu.id}`;
expanded.push(menuKey);
// 添加功能权限节点
if (menu.permissions?.length > 0) {
const permissionNodes = menu.permissions.map(perm => {
menu.permissions.forEach(perm => {
const key = `permission-${perm.id}`;
idMapping[key] = perm.id;
return {
mapping[key] = perm.id;
children.push({
key,
title: perm.name,
isLeaf: true
};
});
node.children!.push(...permissionNodes);
});
}
// 递归处理子菜单
if (menu.permissionChildren?.length > 0) {
const childNodes = menu.permissionChildren.map(convertMenuToNode);
node.children!.push(...childNodes);
menu.permissionChildren.forEach(child => {
children.push(convertMenuToNode(child));
});
}
return node;
return {
key: menuKey,
title: menu.name,
children: children.length > 0 ? children : undefined,
selectable: false // 菜单节点不可选择，只能展开/收缩
};
};
const treeData = menuList.map(convertMenuToNode);
return { treeData, idMapping };
return { treeData, idMapping: mapping, expandedKeys: expanded };
};
useEffect(() => {
@ -86,16 +92,18 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
setLoading(true);
try {
const response = await getPermissionTree();
const { treeData, idMapping } = convertToTreeData(response);
setTreeData(treeData);
// 将默认选中的ID转换为Tree需要的key
const defaultKeys = defaultCheckedKeys.map(id => {
const key = Object.entries(idMapping).find(([_, value]) => value === id)?.[0];
return key;
}).filter(Boolean);
const { treeData: newTreeData, idMapping: newIdMapping, expandedKeys: newExpandedKeys } = convertToTreeData(response);
setTreeData(newTreeData);
setIdMapping(newIdMapping);
setExpandedKeys(newExpandedKeys);
// 设置选中的权限
setCheckedKeys(defaultCheckedKeys);
console.log('权限树数据:', response);
console.log('转换后的树数据:', newTreeData);
console.log('ID映射:', newIdMapping);
console.log('默认选中的权限:', defaultCheckedKeys);
} catch (error) {
console.error('获取权限树失败:', error);
} finally {
@ -113,22 +121,28 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
checkedKeys.forEach(key => {
const keyStr = key.toString();
if (keyStr.startsWith('permission-')) {
const id = parseInt(keyStr.replace('permission-', ''));
if (!isNaN(id)) {
const id = idMapping[keyStr];
if (id) {
permissionIds.push(id);
}
}
});
console.log('选中的权限ID:', permissionIds);
setCheckedKeys(permissionIds);
};
const handleExpand = (newExpandedKeys: Key[]) => {
setExpandedKeys(newExpandedKeys);
};
const handleOk = () => {
onOk(checkedKeys);
};
// 将权限ID转换为Tree需要的key
const getTreeCheckedKeys = (): string[] => {
console.log('当前选中的权限:', checkedKeys);
return checkedKeys.map(id => `permission-${id}`);
};
@ -139,15 +153,23 @@ const PermissionModal: React.FC<PermissionModalProps> = ({
onCancel={onCancel}
onOk={handleOk}
width={600}
bodyStyle={{ maxHeight: '60vh', overflow: 'auto' }}
styles={{
body: {
padding: '12px',
maxHeight: 'calc(100vh - 250px)',
overflow: 'auto'
}
}}
>
<Spin spinning={loading}>
<Tree
checkable
checkedKeys={getTreeCheckedKeys()}
expandedKeys={expandedKeys}
onExpand={handleExpand}
onCheck={handleCheck}
treeData={treeData}
defaultExpandAll
autoExpandParent={false}
/>
</Spin>
</Modal>

155
frontend/src/pages/System/Role/components/TagModal.tsx
View File

@ -1,154 +1,118 @@
import React, { useEffect, useState } from 'react';
import { Modal, Table, message, Spin, Tag, Button, Form, Input, ColorPicker, Space } from 'antd';
import { Modal, Table, Button, Form, Input, Space, message, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { RoleTagResponse, RoleTagRequest } from '../types';
import { getAllTags, assignTags, createRoleTag, updateRoleTag, deleteRoleTag } from '../service';
import { getAllTags, createRoleTag, updateRoleTag, deleteRoleTag } from '../service';
interface TagModalProps {
roleId: number;
visible: boolean;
onCancel: () => void;
onSuccess: () => void;
selectedTags?: RoleTagResponse[];
}
const TagModal: React.FC<TagModalProps> = ({
roleId,
visible,
onCancel,
onSuccess,
selectedTags = []
onSuccess
}) => {
const [form] = Form.useForm();
const [tags, setTags] = useState<RoleTagResponse[]>([]);
const [selectedKeys, setSelectedKeys] = useState<number[]>([]);
const [loading, setLoading] = useState(false);
const [tagManageVisible, setTagManageVisible] = useState(false);
const [editModalVisible, setEditModalVisible] = useState(false);
const [editingTag, setEditingTag] = useState<RoleTagResponse | null>(null);
// 获取所有标签
const fetchTags = async () => {
useEffect(() => {
if (visible) {
loadTags();
}
}, [visible]);
const loadTags = async () => {
try {
setLoading(true);
const data = await getAllTags();
setTags(data);
} catch (error) {
message.error('获取标签数据失败');
message.error('获取标签列表失败');
} finally {
setLoading(false);
}
};
useEffect(() => {
if (visible) {
fetchTags();
// 设置已选标签
setSelectedKeys(selectedTags.map(tag => tag.id));
}
}, [visible, selectedTags]);
const handleOk = async () => {
try {
setLoading(true);
await assignTags(roleId, selectedKeys);
message.success('标签更新成功');
onSuccess();
} catch (error) {
message.error('标签更新失败');
} finally {
setLoading(false);
}
};
const handleTagManage = () => {
setTagManageVisible(true);
const handleAdd = () => {
setEditingTag(null);
form.resetFields();
setEditModalVisible(true);
};
const handleTagManageSubmit = async () => {
try {
const values = await form.validateFields();
if (editingTag) {
await updateRoleTag(editingTag.id, {
...values,
color: values.color.toHexString?.() || values.color
});
message.success('标签更新成功');
} else {
await createRoleTag({
...values,
color: values.color.toHexString?.() || values.color
});
message.success('标签创建成功');
}
setTagManageVisible(false);
fetchTags();
} catch (error) {
message.error('操作失败');
}
const handleEdit = (record: RoleTagResponse) => {
setEditingTag(record);
form.setFieldsValue(record);
setEditModalVisible(true);
};
const handleTagDelete = async (id: number) => {
Modal.confirm({
title: '确认删除',
content: '确定要删除这个标签吗？',
onOk: async () => {
const handleDelete = async (id: number) => {
try {
await deleteRoleTag(id);
message.success('删除成功');
fetchTags();
loadTags();
} catch (error) {
message.error('删除失败');
}
};
const handleSubmit = async () => {
try {
const values = await form.validateFields();
if (editingTag) {
await updateRoleTag(editingTag.id, values);
message.success('更新成功');
} else {
await createRoleTag(values);
message.success('创建成功');
}
setEditModalVisible(false);
loadTags();
} catch (error) {
message.error('操作失败');
}
});
};
const columns = [
{
title: '标签名称',
dataIndex: 'name',
width: 150
},
{
title: '标签颜色',
dataIndex: 'color',
width: 100,
render: (color: string) => (
<Tag color={color}>{color}</Tag>
key: 'name',
render: (text: string, record: RoleTagResponse) => (
<Tag color={record.color}>{text}</Tag>
)
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
ellipsis: true
},
{
title: '操作',
key: 'action',
width: 180,
width: 160,
render: (_: any, record: RoleTagResponse) => (
<Space>
<Button
type="link"
size="small"
icon={<EditOutlined />}
onClick={() => {
setEditingTag(record);
form.setFieldsValue({
...record,
color: record.color
});
setTagManageVisible(true);
}}
onClick={() => handleEdit(record)}
>
编辑
</Button>
<Button
type="link"
size="small"
danger
icon={<DeleteOutlined />}
onClick={() => handleTagDelete(record.id)}
onClick={() => handleDelete(record.id)}
>
删除
</Button>
@ -160,41 +124,32 @@ const TagModal: React.FC<TagModalProps> = ({
return (
<>
<Modal
title="分配标签"
title="标签管理"
open={visible}
onOk={handleOk}
onCancel={onCancel}
footer={null}
width={800}
confirmLoading={loading}
destroyOnClose
>
<div style={{ marginBottom: 16 }}>
<Button type="primary" icon={<PlusOutlined />} onClick={handleTagManage}>
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
新建标签
</Button>
</div>
<Spin spinning={loading}>
<Table
rowSelection={{
type: 'checkbox',
selectedRowKeys: selectedKeys,
onChange: (keys) => setSelectedKeys(keys as number[])
}}
columns={columns}
dataSource={tags}
rowKey="id"
loading={loading}
pagination={false}
scroll={{ y: 400 }}
/>
</Spin>
</Modal>
<Modal
title={editingTag ? '编辑标签' : '新建标签'}
open={tagManageVisible}
onOk={handleTagManageSubmit}
onCancel={() => setTagManageVisible(false)}
destroyOnClose
open={editModalVisible}
onOk={handleSubmit}
onCancel={() => setEditModalVisible(false)}
>
<Form
form={form}
@ -211,9 +166,9 @@ const TagModal: React.FC<TagModalProps> = ({
<Form.Item
name="color"
label="标签颜色"
rules={[{ required: true, message: '请选择标签颜色' }]}
rules={[{ required: true, message: '请输入标签颜色' }]}
>
<ColorPicker />
<Input type="color" style={{ width: 60 }} />
</Form.Item>
<Form.Item

103
frontend/src/pages/System/Role/index.tsx
View File

@ -1,12 +1,13 @@
import React, { useEffect, useState } from 'react';
import { Card, Button, Table, Space, Modal, Form, Input, InputNumber, message, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TagsOutlined } from '@ant-design/icons';
import { Card, Button, Table, Space, Modal, Form, Input, InputNumber, message, Tag, Dropdown, MenuProps } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TagsOutlined, MoreOutlined, SettingOutlined } from '@ant-design/icons';
import type { RoleResponse, RoleTagResponse, RoleQuery } from './types';
import { getRoleList, createRole, updateRole, deleteRole, getRolePermissions, assignPermissions } from './service';
import type { TablePaginationConfig } from 'antd/es/table';
import type {FilterValue, SorterResult} from 'antd/es/table/interface';
import PermissionModal from './components/PermissionModal';
import TagModal from './components/TagModal';
import AssignTagModal from './components/AssignTagModal';
const RolePage: React.FC = () => {
const [form] = Form.useForm();
@ -15,6 +16,7 @@ const RolePage: React.FC = () => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [permissionModalVisible, setPermissionModalVisible] = useState(false);
const [tagModalVisible, setTagModalVisible] = useState(false);
const [assignTagModalVisible, setAssignTagModalVisible] = useState(false);
const [selectedRole, setSelectedRole] = useState<RoleResponse>();
const [loading, setLoading] = useState(false);
const [roles, setRoles] = useState<RoleResponse[]>([]);
@ -143,7 +145,9 @@ const RolePage: React.FC = () => {
const permissions = await getRolePermissions(record.id);
setSelectedRole(record);
setPermissionModalVisible(true);
setDefaultCheckedKeys(permissions);
setDefaultCheckedKeys(Array.isArray(permissions) ?
(typeof permissions[0] === 'number' ? permissions : permissions.map(p => p.id)) :
[]);
} catch (error) {
message.error('获取角色权限失败');
}
@ -164,7 +168,7 @@ const RolePage: React.FC = () => {
const handleAssignTags = (record: RoleResponse) => {
setSelectedRole(record);
setTagModalVisible(true);
setAssignTagModalVisible(true);
};
const columns = [
@ -202,7 +206,8 @@ const RolePage: React.FC = () => {
{
title: '描述',
dataIndex: 'description',
ellipsis: true
ellipsis: true,
width: 200
},
{
title: '创建时间',
@ -213,8 +218,36 @@ const RolePage: React.FC = () => {
{
title: '操作',
key: 'action',
width: 280,
render: (_: any, record: RoleResponse) => (
fixed: 'right' as const,
width: 120,
render: (_: any, record: RoleResponse) => {
const items: MenuProps['items'] = [
{
key: 'permissions',
icon: <KeyOutlined />,
label: '分配权限',
onClick: () => handleAssignPermissions(record)
},
{
key: 'tags',
icon: <TagsOutlined />,
label: '分配标签',
onClick: () => handleAssignTags(record)
}
];
// 如果不是admin角色，添加删除选项
if (record.code !== 'admin') {
items.push({
key: 'delete',
icon: <DeleteOutlined />,
label: '删除',
danger: true,
onClick: () => handleDelete(record.id)
});
}
return (
<Space>
<Button
type="link"
@ -223,40 +256,32 @@ const RolePage: React.FC = () => {
>
编辑
</Button>
<Button
type="link"
icon={<KeyOutlined />}
onClick={() => handleAssignPermissions(record)}
<Dropdown
menu={{ items }}
placement="bottomRight"
trigger={['click']}
>
分配权限
</Button>
<Button
type="link"
icon={<TagsOutlined />}
onClick={() => handleAssignTags(record)}
>
分配标签
</Button>
<Button
type="link"
danger
icon={<DeleteOutlined />}
onClick={() => handleDelete(record.id)}
disabled={record.code === 'admin'}
>
删除
</Button>
type="text"
icon={<MoreOutlined />}
style={{ padding: '4px 8px' }}
/>
</Dropdown>
</Space>
)
);
}
}
];
return (
<Card>
<div style={{ marginBottom: 16 }}>
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
新建角色
</Button>
<Button icon={<SettingOutlined />} onClick={() => setTagModalVisible(true)}>
标签管理
</Button>
</div>
<Table
@ -266,6 +291,7 @@ const RolePage: React.FC = () => {
loading={loading}
pagination={pagination}
onChange={handleTableChange}
scroll={{ x: 1300 }}
/>
<Modal
@ -321,18 +347,27 @@ const RolePage: React.FC = () => {
onOk={handlePermissionAssign}
defaultCheckedKeys={defaultCheckedKeys}
/>
<TagModal
<AssignTagModal
visible={assignTagModalVisible}
roleId={selectedRole.id}
visible={tagModalVisible}
onCancel={() => setTagModalVisible(false)}
onCancel={() => setAssignTagModalVisible(false)}
onSuccess={() => {
setTagModalVisible(false);
setAssignTagModalVisible(false);
fetchRoles();
}}
selectedTags={selectedRole.tags}
/>
</>
)}
<TagModal
visible={tagModalVisible}
onCancel={() => setTagModalVisible(false)}
onSuccess={() => {
setTagModalVisible(false);
fetchRoles();
}}
/>
</Card>
);
};

72
frontend/src/router/index.tsx
View File

@ -1,20 +1,11 @@
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { Spin } from 'antd';
import Login from '../pages/Login';
import BasicLayout from '../layouts/BasicLayout';
import { useSelector } from 'react-redux';
import { RootState } from '../store';
// 懒加载组件
const Dashboard = lazy(() => import('../pages/Dashboard'));
const Department = lazy(() => import('../pages/System/Department'));
const Role = lazy(() => import('../pages/System/Role'));
const User = lazy(() => import('../pages/System/User'));
const Menu = lazy(() => import('../pages/System/Menu'));
const Tenant = lazy(() => import('../pages/System/Tenant'));
const Repository = lazy(() => import('../pages/System/Repository'));
const Jenkins = lazy(() => import('../pages/System/Jenkins'));
import { MenuResponse } from '@/pages/System/Menu/types';
// 加载中组件
const LoadingComponent = () => (
@ -34,11 +25,16 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
return <>{children}</>;
};
// 懒加载组件
const Dashboard = lazy(() => import('../pages/Dashboard'));
const User = lazy(() => import('../pages/System/User'));
const Role = lazy(() => import('../pages/System/Role'));
const Menu = lazy(() => import('../pages/System/Menu'));
const Department = lazy(() => import('../pages/System/Department'));
const External = lazy(() => import('../pages/System/External'));
// 创建路由
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/',
element: (
@ -49,7 +45,7 @@ const router = createBrowserRouter([
children: [
{
path: '',
element: <Navigate to="/dashboard" />
element: <Navigate to="/dashboard" replace />
},
{
path: 'dashboard',
@ -63,30 +59,10 @@ const router = createBrowserRouter([
path: 'system',
children: [
{
path: '',
element: <Navigate to="/system/dashboard" />
},
{
path: 'dashboard',
path: 'user',
element: (
<Suspense fallback={<LoadingComponent />}>
<Dashboard />
</Suspense>
)
},
{
path: 'tenant',
element: (
<Suspense fallback={<LoadingComponent />}>
<Tenant />
</Suspense>
)
},
{
path: 'department',
element: (
<Suspense fallback={<LoadingComponent />}>
<Department />
<User />
</Suspense>
)
},
@ -98,14 +74,6 @@ const router = createBrowserRouter([
</Suspense>
)
},
{
path: 'user',
element: (
<Suspense fallback={<LoadingComponent />}>
<User />
</Suspense>
)
},
{
path: 'menu',
element: (
@ -115,18 +83,18 @@ const router = createBrowserRouter([
)
},
{
path: 'repository',
path: 'department',
element: (
<Suspense fallback={<LoadingComponent />}>
<Repository />
<Department />
</Suspense>
)
},
{
path: 'jenkins',
path: 'external',
element: (
<Suspense fallback={<LoadingComponent />}>
<Jenkins />
<External />
</Suspense>
)
}
@ -137,6 +105,10 @@ const router = createBrowserRouter([
element: <Navigate to="/dashboard" />
}
]
},
{
path: '/login',
element: <Login />
}
]);

17
frontend/vite.config.ts
View File

@ -6,7 +6,22 @@ export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
'@': path.resolve(__dirname, 'src')
}
},
build: {
rollupOptions: {
output: {
manualChunks: {
'system': [
'./src/pages/System/User/index.tsx',
'./src/pages/System/Role/index.tsx',
'./src/pages/System/Menu/index.tsx',
'./src/pages/System/Department/index.tsx',
'./src/pages/System/External/index.tsx'
]
}
}
}
},
server: {