系统名称：
企业审批矩阵配置平台。
功能描述：
适合为企业内部应用系统，例如BPM，来可视化配置各种业务审批权限矩阵：审批金额，审批范围，审批路线，审批层级，审批数据等等，适合业务用户自行可视化来维护和配置并且具备审计功能。
基于 Tailwind CSS 与 Awe 字体库，采用单页应用（SPA）架构，使用原生 JavaScript（ES6+）开发一套高保真 HTML 原型系统。项目必须满足以下技术与功能规范：
1. 技术栈与目录结构
1.1 目录规范
- /src
├─ /styles – 所有 *.css 文件，仅允许 Tailwind 自定义层（@layer components/utilities）与主题变量
├─ /scripts
│ ├─ /core – 基类、路由、事件总线、权限守卫
│ ├─ /pages – 每个页面一个 Class 文件，采用 IIFE 包裹形成闭包，禁止全局污染
│ ├─ /components – 可复用控件（Button、Table、Modal…），必须继承自 core/Component 基类
│ ├─ /services – Axios 实例封装，统一拦截器处理 sstoken 注入、401 退登、retry 逻辑
│ ├─ /mock – 开发模式下自动拦截 XHR/fetch，按接口路径返回 Mock JSON，支持随机延迟 100-500 ms
│ └─ /utils – 主题切换、防抖节流、断点检测、echarts 初始化封装
- /public
├─ index.html（唯一入口）
└─ /assets – 图片、Awe 字体子集（woff2，≤200 KB）
1.2 编码约束
- 禁止使用框架（React/Vue/Angular），仅允许原生 ES Module 或 IIFE
- 所有 DOM 操作必须通过 Class 方法封装，this.root 指向当前组件根节点
- 样式必须 100% 使用 Tailwind 工具类；自定义 CSS 仅允许通过 theme.extend 注入
- 所有 JS 文件使用严格模式（'use strict'），并通过 ESLint airbnb-base 规则校验
2. 核心功能与交互
2.1 路由与状态
- 基于 History API 实现前端路由（/login、/dashboard、/org、/user、/role）
- 全局状态管理使用发布-订阅模式（EventBus），禁止直接跨模块修改 DOM
- 页面切换需加 300 ms 淡入淡出过渡，使用 CSS transition 实现
2.2 认证与权限
- 登录成功后服务端返回 sstoken，Axios 拦截器自动将 sstoken 加入 Header：Authorization: Bearer <sstoken>
- 权限守卫：路由跳转前调用 /api/auth/verify，返回 401 则清空 token 并强制跳转 /login
- 注销时调用 /api/auth/logout，前端同步清除 localStorage 与内存状态，触发全局事件 user:logout
2.3 业务模块
- 用户管理：分页列表、模糊搜索、新建/编辑/删除、批量导入（Excel 上传预览）
- 组织管理：树形展示（echarts-tree），支持拖拽变更上级，实时保存
- 角色权限：RBAC 模型，角色列表、分配菜单与按钮级权限，权限变更后即时生效（前端路由动态过滤）
2.4 响应式与主题
- 移动端优先：断点 sm≥640px、md≥768px、lg≥1024px；侧边栏在 <768px 时自动折叠为抽屉
- 明暗双主题：通过 tailwind dark 前缀实现，切换按钮置于顶部导航右侧，选择后立即写入 localStorage 并同步 html.classList.toggle('dark')
3. 第三方库与性能
- Axios：统一实例，封装 get/post/put/delete 方法，返回 Promise<BusinessResponse>
- ECharts：按需引入柱状图、折线图、饼图、Tree 图，封装 src/utils/chart.js，自动销毁实例防止内存泄漏
- 动画：仅允许使用 AOS 或 animate.css，禁止引入 >50 KB 的动画库
- 首屏指标：LCP ≤2.5 s，JS 分包 ≤200 KB，生产环境使用 esbuild 压缩，输出 sourcemap
4. 开发与部署
4.1 环境切换
- 在 src/config/index.js 中配置 API_BASE_URL 与 USE_MOCK 开关；当 USE_MOCK=true 时，src/services 自动加载 mock/index.js 完成接口拦截
- 提供 .env.development 与 .env.production 变量文件，通过 import.meta.env 读取
4.2 构建与测试
- 使用 Vite 作为 devServer，端口 3000，自动打开浏览器
- 编写 Jest 单元测试：对 services/ 与 utils/ 覆盖率 ≥80%，使用 jsdom 模拟 DOM
- 端到端测试：Cypress 覆盖登录→创建用户→分配角色→注销完整链路，断言耗时 ≤10 s
5. 交付物与验收标准
- 完整源代码（含上述目录结构）
- README.md：环境准备、安装、脚本说明、Mock→真实接口切换步骤
- 可交互原型链接（部署在 Netlify 或 Vercel），同时提供明暗主题切换演示
- 性能报告：Lighthouse 得分 ≥90（性能、可访问性、最佳实践、SEO）
- 代码质量：ESLint 0 error、0 warning；Git 提交记录遵循 Conventional Commits