From ae88da4c9f81b412162e998b348a3924cb290822 Mon Sep 17 00:00:00 2001
From: zichun <zhuzichunhogan@gmail.com>
Date: Fri, 8 May 2026 14:43:47 +0800
Subject: [PATCH] feat(usr): add NavOverlay component

---
 frontend/src/components/NavOverlay.tsx | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/src/test/NavOverlay.test.tsx  | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 142 insertions(+), 0 deletions(-)
 create mode 100644 frontend/src/components/NavOverlay.tsx
 create mode 100644 frontend/src/test/NavOverlay.test.tsx

diff --git a/frontend/src/components/NavOverlay.tsx b/frontend/src/components/NavOverlay.tsx
new file mode 100644
index 0000000..2a9d3b0
--- /dev/null
+++ b/frontend/src/components/NavOverlay.tsx
@@ -0,0 +1,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: '#2b3137', borderRight: '1px solid #1e2226', 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)' : '#d3d6db',
+                background: mod === '系统设置' ? '#34393f' : '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: '#e8eaee', fontWeight: 500, margin: '0 0 18px', borderBottom: '1px solid #4a4f57', paddingBottom: 10 }}>
+                {col.title}
+              </h3>
+              {col.items.map(item => {
+                if (typeof item === 'string') {
+                  return <div key={item} style={{ padding: '7px 0', color: '#cfd3da', 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: '#cfd3da', fontSize: 14, cursor: item.go === 'userlist' ? 'pointer' : 'default' }}
+                  >
+                    {item.label}
+                    {item.star && <span style={{ color: '#f3b526' }}>★</span>}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/test/NavOverlay.test.tsx b/frontend/src/test/NavOverlay.test.tsx
new file mode 100644
index 0000000..25e7093
--- /dev/null
+++ b/frontend/src/test/NavOverlay.test.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Provider } from 'react-redux'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { configureStore } from '@reduxjs/toolkit'
+import authReducer from '../store/slices/authSlice'
+import tabsReducer from '../store/slices/tabsSlice'
+import NavOverlay from '../components/NavOverlay'
+
+function makeStore() {
+  return configureStore({ reducer: { auth: authReducer, tabs: tabsReducer } })
+}
+
+function renderOverlay(onClose = vi.fn()) {
+  return render(
+    <Provider store={makeStore()}>
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<NavOverlay onClose={onClose} />} />
+          <Route path="/usr/users" element={<div>UserList</div>} />
+        </Routes>
+      </MemoryRouter>
+    </Provider>
+  )
+}
+
+describe('NavOverlay', () => {
+  it('renders_systemModules', () => {
+    renderOverlay()
+    expect(screen.getByText('系统设置')).toBeInTheDocument()
+    expect(screen.getByText('用户管理')).toBeInTheDocument()
+  })
+
+  it('clickUserList_navigatesAndClosesOverlay', async () => {
+    const onClose = vi.fn()
+    renderOverlay(onClose)
+    await userEvent.click(screen.getByText('用户列表'))
+    expect(screen.getByText('UserList')).toBeInTheDocument()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('clickBackground_callsOnClose', async () => {
+    const onClose = vi.fn()
+    render(
+      <Provider store={makeStore()}>
+        <MemoryRouter>
+          <NavOverlay onClose={onClose} />
+        </MemoryRouter>
+      </Provider>
+    )
+    // Click the outer overlay div (background)
+    await userEvent.click(document.querySelector('[data-testid="nav-bg"]')!)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})
--
libgit2 0.22.2