NavOverlay.tsx
4.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { useNavigate } from 'react-router-dom'
import { useAppDispatch } from '../store/hooks'
import { openTab } from '../store/slices/tabsSlice'
const LEFT_MODULES = [
'销售管理', 'DCS系统', '产品管理', '生产运营', '生产执行', '模具管理',
'采购管理', '材料库存', '成品库存', '外协管理', '物流管理', '质量管理',
'财务管理', '成本管理(专)', '成本管理', '设备管理', '人事行政', 'OA系统',
'基础设置', '系统设置',
]
type NavItem = string | { label: string; go?: string; star?: boolean }
const NAV_COLS: { title: string; items: NavItem[] }[] = [
{ title: '期初设置', items: ['客户期初', '供应商期初', '材料期初', '产品期初', '数据导入', '离线导出下载'] },
{ title: '用户管理', items: [{ label: '用户列表', go: 'userlist', star: true }, '系统权限', '系统权限稽查表', '权限组'] },
{ title: '系统参数', items: ['系统参数', '财务结账', '系统常量配置'] },
{ title: '计算方案', items: ['方案列表', '计算参数'] },
{ title: '日志', items: ['个性化模块', '操作日志', '异常清除KPI任务表', 'MYSQL监听器'] },
{ title: '开发平台', items: ['自定义开发范例', { label: '系统功能模块设置', star: true }, 'EBC流程清单', '功能模块界面设置', '增删改存业务处理'] },
{ title: 'API对接管理', items: ['调用第三方接口(TOKEN配置)', '调用第三方接口(接口定义)', '被第三方调用(生成token)', '数据同步', '被第三方调用(API定义)'] },
]
interface Props { onClose: () => void }
export default function NavOverlay({ onClose }: Props) {
const navigate = useNavigate()
const dispatch = useAppDispatch()
function handleUserList() {
dispatch(openTab({ id: 'userlist', title: '用户列表', path: '/usr/users', closable: true }))
navigate('/usr/users')
onClose()
}
return (
<div
data-testid="nav-bg"
onClick={onClose}
style={{ position: 'absolute', inset: 0, background: 'var(--color-nav-overlay-bg)', zIndex: 20, color: '#cfd3da', display: 'flex' }}
>
<div onClick={e => e.stopPropagation()} style={{ display: 'flex', flex: 1 }}>
{/* Left sidebar */}
<div style={{ width: 200, background: 'var(--color-nav-overlay-bg)', borderRight: '1px solid var(--color-nav-sidebar-border)', padding: '8px 0', overflowY: 'auto' }}>
{LEFT_MODULES.map(mod => (
<div
key={mod}
style={{
display: 'flex', alignItems: 'center', gap: 10, padding: '11px 18px', fontSize: 14, cursor: 'pointer',
color: mod === '系统设置' ? 'var(--color-tab-active)' : 'var(--color-nav-item-text)',
background: mod === '系统设置' ? 'var(--color-nav-sidebar-active-bg)' : 'transparent',
}}
>
{mod}
</div>
))}
</div>
{/* Right grid */}
<div style={{ flex: 1, padding: '30px 40px', display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '30px 40px', alignContent: 'start', overflowY: 'auto' }}>
{NAV_COLS.map(col => (
<div key={col.title}>
<h3 style={{ fontSize: 15, color: 'var(--color-nav-col-header)', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid var(--color-nav-col-divider)', paddingBottom: 10 }}>
{col.title}
</h3>
{col.items.map(item => {
if (typeof item === 'string') {
return <div key={item} style={{ padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14 }}>{item}</div>
}
return (
<div
key={item.label}
onClick={item.go === 'userlist' ? handleUserList : undefined}
style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 0', color: 'var(--color-nav-item-text)', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
>
{item.label}
{item.star && <span style={{ color: 'var(--color-nav-item-star)' }}>★</span>}
</div>
)
})}
</div>
))}
</div>
</div>
</div>
)
}