Files
dashboard/.qoder/repowiki/knowledge/zh/Luxsin CMS Dashboard(前后端单体仓库)/架构设计.md
T
eafonyang f48f1cce70 docs(tabs): 更新标签页视图组件设计与交互细节
- 采用固定内边距策略,解决标签页悬停时的布局抖动问题
- 统一关闭按钮尺寸为14x14px,提升视觉一致性
- 优化活动标签和悬停状态的层级管理,确保视觉层次正确
- 增强视觉反馈,添加内嵌阴影效果改善用户体验
- 添加平滑颜色过渡动画(0.2秒),提升交互流畅度
- 支持玻璃拟态设计系统,实现现代化视觉风格
- 完善工具箱图标支持,确保标签页工具功能准确显示
2026-07-15 09:58:56 +08:00

1.3 KiB
Raw Blame History

仓库为前后端同仓部署结构:

  • backend/src 采用经典 Express 分层:app.js 入口挂载 CORS、JSON/bodyLimit 中间件后按目录遍历加载 routes/*models/* 通过 Sequelize 定义 ORM 实体并由 config/database.js 初始化连接;services/* 封装外部依赖(S3/OtaStorage/MeasurementStorage/CurveClient/Squiglink),middleware/auth.js 负责 JWT 校验,validators/* 使用 Zod 做入参校验。
  • frontend/srclayout/index.vue 作为全局壳,内部用 el-container 组合侧栏(sidebar-glass)、顶栏(lux-header)、主内容区(TabsView 多标签页)和底栏;路由由 router/index.js 驱动,API 调用集中在 api/*.js,鉴权状态在 utils/auth.js
  • 样式体系完全收敛到 frontend/src/styles/lux-theme.css,通过 :root CSS 变量统一色板、模糊半径、阴影层级,并以 .lux-shell 命名空间覆盖 Element Plus 组件默认样式,实现 Glassmorphism + Dimensional Layering + Dark Mode OLED 三层次视觉。
  • 部署层由根级 docker-compose.yml 编排:后端容器暴露 8083,前端以 nginx:alpine 静态托管 frontend/dist,并通过 nginx.conf 反向代理 /api 到后端;autoeq/ 下存放测量 CSV 数据供服务读取。