docs(tabs): 更新标签页视图组件设计与交互细节
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题 - 统一关闭按钮尺寸为14x14px，提升视觉一致性 - 优化活动标签和悬停状态的层级管理，确保视觉层次正确 - 增强视觉反馈，添加内嵌阴影效果改善用户体验 - 添加平滑颜色过渡动画（0.2秒），提升交互流畅度 - 支持玻璃拟态设计系统，实现现代化视觉风格 - 完善工具箱图标支持，确保标签页工具功能准确显示
This commit is contained in:
eafonyang
@@ -0,0 +1,7 @@
|
||||
schema_version: 1
|
||||
module_path: ""
|
||||
title: Luxsin CMS Dashboard（前后端单体仓库）
|
||||
scope: []
|
||||
source_files: []
|
||||
depends_on: []
|
||||
related_to: []
|
||||
@@ -0,0 +1 @@
|
||||
前端：Vue 3 + Vite + Element Plus + vue-router + axios；后端：Express + Sequelize(ORM) + MySQL2 + JSON Web Token + Multer(文件上传) + Axios(上游曲线服务) + Winston(日志) + ioredis + @aws-sdk/client-s3；构建产物由 Nginx 静态托管，开发期使用 nodemon 热重载。
|
||||
@@ -0,0 +1,5 @@
|
||||
仓库为前后端同仓部署结构：
|
||||
- `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/src` 以 `layout/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 数据供服务读取。
|
||||
@@ -0,0 +1 @@
|
||||
基于 Vue3 + Element Plus 与 Express/Sequelize 的耳机品牌型号 OTA 管理平台，提供玻璃拟态暗色主题的管理后台。
|
||||
@@ -0,0 +1 @@
|
||||
本地启动需先复制 `.env.example` 为 `.env` 并填写数据库/Redis/S3 等环境变量；运行 `docker compose up -d` 即可同时拉起后端与前端（端口 8082/8083）。前端单独开发：`cd frontend && pnpm dev`；后端单独开发：`cd backend && pnpm dev`。
|
||||
@@ -0,0 +1,6 @@
|
||||
- CSS 主题通过 `:root` 下的 `--lux-*` 变量集中管理颜色、模糊、阴影、圆角，组件样式一律引用这些变量而非硬编码色值。
|
||||
- 所有覆盖 Element Plus 的全局样式都包裹在 `.lux-shell` 命名空间下，避免污染登录页等非 shell 页面。
|
||||
- 后端路由文件只导出 `{ path, handler }` 对象数组，由 `routes/index.js` 统一遍历注册，新增接口只需新建文件并在 index 中引入。
|
||||
- 模型定义遵循 `src/models/<Name>.js` 单文件一个 Sequelize Model 的模式，并通过 `src/models/index.js` 统一关联与导出。
|
||||
- 业务逻辑从路由中下沉到 `src/services/*`，路由仅做参数校验与响应包装，保持控制器薄而纯。
|
||||
- 前端 API 模块按资源维度拆分为 `api/*.js`，每个模块暴露同名函数，组件通过 `import { listModels } from '@/api/model'` 直接调用。
|
||||
Reference in New Issue
Block a user