基础设置中角色概览

2026-08-21 11:08:18 +08:00
parent 4710b24ef3
commit 54eebdfd15
2 changed files with 76 additions and 29 deletions
--- a/src/components/SystemSetting/BasicSettings.tsx
+++ b/src/components/SystemSetting/BasicSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
 	Form,
 	Input,
@@ -58,12 +58,14 @@ import {
 } from 'lucide-react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { getRoleList } from '@/api/role';

 const { Text, Title } = Typography;

 const BasicSettings = () => {
 	const { t } = useTranslation();
 	const [form] = Form.useForm();
+	const [roles, setRoles] = useState<any[]>([]);

 	// 响应式字体大小
 	const fontNormal = 'clamp(12px, 0.75vw, 13px)';
@@ -119,6 +121,7 @@ const BasicSettings = () => {

 	// 角色权限概览
 	const roleOverview = [
+		//平台管理员
 		{
 			title: t('roles.superAdmin'),
 			users: 2,
@@ -128,34 +131,48 @@ const BasicSettings = () => {
 			bg: '#e6f4ff',
 			icon: <ShieldCheck size={20} color="#1677ff" />
 		},
+		//普通用户
 		{
 			title: t('systemSetting.fixed2OM'),
 			users: 5,
 			perms: 18,
-			tags: [t('router.devices'), '工单管理'],
+			tags: ["处理工单","处理任务"],
 			color: '#52c41a',
 			bg: '#f6ffed',
 			icon: <Wrench size={20} color="#52c41a" />
 		},
+		//机构管理员
 		{
 			title: t('systemSetting.fixed2Inspection2'),
 			users: 8,
 			perms: 12,
-			tags: ['巡检管理', '告警处理'],
+			tags: ['管理机构下所有场站', '告警处理'],
 			color: '#fa8c16',
 			bg: '#fff7e6',
 			icon: <Users size={20} color="#fa8c16" />
 		},
+		//场站管理员
 		{
 			title: t('systemSetting.s322'),
 			users: 3,
 			perms: 15,
-			tags: ['数据分析', '报表查看'],
+			tags: ['管理自己场站', '报表查看','告警处理'],
 			color: '#722ed1',
 			bg: '#f9f0ff',
 			icon: <LineChart size={20} color="#722ed1" />
 		},
 	];
+	const matchRoleStyle = (roleName: string) => {
+		const found = roleOverview.find(item => item.title === roleName);
+		if (found) return found;
+		// 兜底默认样式
+		return {
+			color: '#8c8c8c',
+			bg: '#f5f5f5',
+			icon: null,
+			tags: []
+		};
+	};

 	// 设备状态
 	const deviceStatuses = [
@@ -168,6 +185,20 @@ const BasicSettings = () => {
 		{ name: t('systemSetting.api'), count: t('roles.normal'), status: t('roles.normal') },
 		{ name: 'Modbus', count: t('roles.normal'), status: t('roles.normal') },
 	];
+	const getRoleData = () => {
+		const params = { pageNum: 1, pageSize: 9999 };
+		getRoleList(params).then(res => {
+			if (res.code === 200) {
+				let sortedRoles = (res.data || []).sort((a, b) => (a.roleSort || 999) - (b.roleSort || 999));
+				setRoles(sortedRoles);
+			}
+		});
+	};
+
+	useEffect(() => {
+		getRoleData();
+	}, [])
+

 	return (
 		<div className="normal-spacing" style={{ padding: '8px 0px', background: '#f5f7fa', minHeight: '100vh' }}>
@@ -182,9 +213,9 @@ const BasicSettings = () => {
 					<Col key={idx} style={{ minWidth: '168px', flex: '1 0 auto', maxWidth: "250px" }}>
 						<AntdCard bordered={false} bodyStyle={{ padding: '12px 16px' }} style={{ borderRadius: 10, boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
 							<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-								<div style={{ width: 40, height: 40, borderRadius: 10, background: item.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+								{/*<div style={{ width: 40, height: 40, borderRadius: 10, background: item.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
 									{React.cloneElement(item.icon as React.ReactElement, { size: 20, style: item.icon.props.style ? { ...item.icon.props.style, fontSize: 20 } : { fontSize: 20 } })}
-								</div>
+								</div>*/}
 								<div style={{ flex: 1 }}>
 									<div style={{ color: '#8c8c8c', fontSize: fontSmall, marginBottom: 2 }}>{item.title}</div>
 									<div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
@@ -300,7 +331,7 @@ const BasicSettings = () => {
 								<Col xs={24} sm={12} lg={6} key={idx}>
 									<div style={{ display: 'flex', alignItems: 'center', padding: '10px 12px', background: '#f8fafc', borderRadius: 8, border: '1px solid #f1f5f9' }}>
 										<div style={{ width: 32, height: 32, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 1px 4px rgba(0,0,0,0.04)', marginRight: 10 }}>
-											{React.cloneElement(item.icon as React.ReactElement, { style: { color: item.color } })}
+											{/*{React.cloneElement(item.icon as React.ReactElement, { style: { color: item.color } })}*/}
 										</div>
 										<div style={{ flex: 1 }}>
 											<div style={{ fontSize: 10, color: '#8c8c8c' }}>{item.label}</div>
@@ -402,25 +433,41 @@ const BasicSettings = () => {
 						bodyStyle={{ padding: '10px' }}
 					>
 						<Row gutter={[8, 8]}>
-							{roleOverview.map((role, idx) => (
-								<Col xs={24} sm={12} key={idx}>
-									<div style={{ background: role.bg, borderRadius: 8, padding: 8, height: '100%' }}>
-										<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
-											{React.cloneElement(role.icon as React.ReactElement, { size: 16 })}
-											<RightOutlined style={{ fontSize: 9, color: role.color }} />
+							{roles.map((role, idx) => {
+								const styleConf = matchRoleStyle(role.roleName);
+								return (
+									<Col xs={24} sm={12} key={idx}>
+										<div style={{ background: styleConf.bg, borderRadius: 8, padding: 8, height: '100%' }}>
+											<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, alignItems: 'center' }}>
+												{styleConf.icon}
+											</div>
+											<div style={{ fontWeight: 600, fontSize: 11, color: styleConf.color, marginBottom: 2 }}>
+												{role.roleName}
+											</div>
+											<div style={{ fontSize: 9, color: '#8c8c8c', marginBottom: 6 }}>
+												用户 {role.users} | 菜单权限 {role.menuIds?.length ?? 0}
+											</div>
+											<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+												{styleConf.tags.map((tag, tidx) => (
+													<span
+														key={tidx}
+														style={{
+															fontSize: 8,
+															padding: '0 4px',
+															background: '#fff',
+															color: styleConf.color,
+															borderRadius: 2,
+															border: `1px solid ${styleConf.color}20`
+														}}
+													>
+														{tag}
+													</span>
+												))}
+											</div>
 										</div>
-										<div style={{ fontWeight: 600, fontSize: 11, color: role.color, marginBottom: 2 }}>{role.title}</div>
-										<div style={{ fontSize: 9, color: '#8c8c8c', marginBottom: 6 }}>
-											用户 {role.users} | 权限 {role.perms}
-										</div>
-										<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-											{role.tags.map((tag, tidx) => (
-												<span key={tidx} style={{ fontSize: 8, padding: '0 4px', background: '#fff', color: role.color, borderRadius: 2, border: `1px solid ${role.color}20` }}>{tag}</span>
-											))}
-										</div>
-									</div>
-								</Col>
-							))}
+									</Col>
+								);
+							})}
 						</Row>
 					</AntdCard>

--- a/src/locales/zh/index.ts
+++ b/src/locales/zh/index.ts
@@ -2636,7 +2636,7 @@ const zh = {

 		s28: '开启钉钉推送时必须填写加密密钥',

-		fixed2OM: '运维工程师',
+		fixed2OM: '普通用户',

 		fixed2Inspection: '巡检区',

@@ -3077,9 +3077,9 @@ const zh = {

 		s282: '最近更新',

-		fixed2Inspection2: '巡检主管',
+		fixed2Inspection2: '机构管理员',

-		s322: '数据分析师',
+		s322: '场站管理员',

 		fixed2Login2: '登录审计',

@@ -3415,7 +3415,7 @@ const zh = {
 		roleNamePlaceholder: '角色名称占位',
 		rolePermission: '角色权限',
 		roleSortLabel: '角色排序标签',
-		superAdmin: '超级管理员',
+		superAdmin: '平台管理员',
 	},
 	constants: {
 		// 工单类型