docs(tabs): 更新标签页视图组件设计与交互细节
- 采用固定内边距策略,解决标签页悬停时的布局抖动问题 - 统一关闭按钮尺寸为14x14px,提升视觉一致性 - 优化活动标签和悬停状态的层级管理,确保视觉层次正确 - 增强视觉反馈,添加内嵌阴影效果改善用户体验 - 添加平滑颜色过渡动画(0.2秒),提升交互流畅度 - 支持玻璃拟态设计系统,实现现代化视觉风格 - 完善工具箱图标支持,确保标签页工具功能准确显示
This commit is contained in:
@@ -10,43 +10,35 @@ source_files:
|
||||
- backend/src/config/database.js
|
||||
- backend/src/config/redis.js
|
||||
- backend/src/config/logger.js
|
||||
- .env.example
|
||||
- backend/src/app.js
|
||||
- .env.example
|
||||
- docker-compose.yml
|
||||
---
|
||||
|
||||
## 系统概述
|
||||
本项目的配置系统基于 Node.js 的 `dotenv` + 进程环境变量(`process.env`)实现,采用「根目录 `.env` 文件 + Docker compose env_file 注入」的双源模式,通过统一的入口在应用启动时完成加载。
|
||||
## 系统概览
|
||||
本仓库采用「根目录 `.env` + 启动时 `dotenv` 注入 + 各模块按需读取 `process.env`」的轻量级配置方案,未引入集中式配置中心或类型化配置库。所有运行时参数均通过环境变量提供,由 Node.js 进程在启动阶段加载。
|
||||
|
||||
## 核心机制
|
||||
- **统一入口**:`backend/src/app.js` 首行 `require('./config/loadEnv')` 触发配置加载,确保所有后续模块都能读到环境变量。
|
||||
- **本地开发**:`loadEnv.js` 解析项目根目录 `dashboard/.env`(相对 `__dirname` 向上四层),使用 `dotenv.config({ path })` 注入到 `process.env`;若文件不存在则静默跳过。
|
||||
- **Docker 部署**:容器内无 `.env` 文件,由 `docker-compose.yml` 的 `env_file` 直接注入环境变量,`fs.existsSync` 判断避免覆盖已有值。
|
||||
- **环境判断**:`config/env.js` 暴露 `APP_ENV`、`isDevelopment`、`isProduction` 三个常量,供各模块按环境切换行为(如 Sequelize SQL 日志开关)。
|
||||
## 关键文件与职责
|
||||
- `backend/src/config/loadEnv.js`:应用入口最先执行,从仓库根目录解析并加载 `.env`(仅本地开发存在;Docker 部署时由 compose `env_file` 注入,容器内无该文件则跳过)。
|
||||
- `backend/src/config/env.js`:统一环境判断工具,基于 `APP_ENV` 导出 `isDevelopment` / `isProduction` 布尔值供其他模块使用。
|
||||
- `backend/src/app.js`:Express 入口,先 `require('./config/loadEnv')` 再初始化数据库、路由、监听端口等。
|
||||
- `backend/src/config/database.js`:Sequelize 实例,连接 MySQL,默认值 `audio/root/root123`,开发模式开启 SQL 日志。
|
||||
- `backend/src/config/redis.js`:ioredis 单例工厂 `getEqCacheRedis()`,按 `REDIS_EQ_DB` 选择独立 DB,带错误回调与超时重试。
|
||||
- `backend/src/config/logger.js`:winston 双通道(Console + File),固定输出到 `backend/logs/app.log`。
|
||||
- `.env.example`:完整的环境变量清单与注释,作为部署模板。
|
||||
- `docker-compose.yml`:通过 `env_file: .env` 与 `environment` 覆盖 `PORT=8000`、`APP_ENV=${APP_ENV:-production}`,并将宿主机 `/data/projects/source` 挂载进容器。
|
||||
|
||||
## 配置项组织
|
||||
所有可配置项集中在根级 `.env.example`,按功能域分组注释:
|
||||
- 数据库:`DATABASE_HOST/PORT/NAME/USER/PASSWORD`
|
||||
- 应用:`APP_NAME`、`APP_ENV`、`PORT`
|
||||
- JWT 与初始管理员:`JWT_SECRET`、`DASHBOARD_ADMIN_USERNAME/PASSWORD`
|
||||
- Meilisearch:`MEILISEARCH_URL/API_KEY/INDEX`
|
||||
- AWS S3:`AWS_REGION/ACCESS_KEY_ID/SECRET_ACCESS_KEY/S3_OTA_BUCKET/S3_MEASUREMENT_BUCKET`
|
||||
- OTA URL 与上传目录:`OTA_X8_PUBLIC_BASE`、`OTA_X9_URL_BASE`、`OTA_UPLOAD_DIR`
|
||||
- Curve API:`CURVE_API_BASE_URL`
|
||||
- Redis EQ 缓存:`REDIS_HOST/PORT/PASSWORD/EQ_DB`
|
||||
## 架构与约定
|
||||
1. **加载顺序**:`app.js` → `loadEnv`(dotenv)→ 各 `config/*` 模块读 `process.env` → 业务层直接使用。
|
||||
2. **环境区分**:仅依赖 `APP_ENV` 两个取值(development / production),没有多环境配置文件分支。
|
||||
3. **默认值策略**:每个配置项在读取处给出合理默认值(如数据库 `localhost:3306/audio/root/root123`、Redis `127.0.0.1:6379/db=1`、端口 `8083`),保证本地开箱即用。
|
||||
4. **密钥与敏感信息**:JWT secret、数据库密码、AWS 凭据、Meilisearch API Key 全部走环境变量,`.env` 被 `.gitignore` 排除。
|
||||
5. **外部服务解耦**:MySQL、Redis、S3、Meilisearch、Curve API 等均以独立环境变量命名空间暴露,新增依赖只需在 `.env.example` 补充条目并在对应 config 中读取。
|
||||
6. **前端侧**:前端为纯静态产物,不直接读取 `.env`;构建期由 Vite 注入 `import.meta.env.*`,但当前代码未见前端配置模块,前端通过相对路径请求后端 API。
|
||||
|
||||
## 配置消费方式
|
||||
各模块直接通过 `process.env.XXX || '默认值'` 读取,形成「分散式消费」模式:
|
||||
- `config/database.js` → MySQL 连接参数
|
||||
- `config/redis.js` → ioredis 客户端(含密码可选、错误监听)
|
||||
- `config/logger.js` → winston 输出级别与文件路径
|
||||
- `services/otaStorage.js` → OTA 包上传目录与 S3 配置
|
||||
- `services/measurementStorage.js` → 频响测量文件 S3 存储
|
||||
- `routes/models.js` → Meilisearch 搜索索引
|
||||
- `services/curveClient.js` → 曲线查询外部 API 基地址
|
||||
|
||||
## 设计约定与约束
|
||||
1. **禁止硬编码敏感信息**:所有密钥、密码、URL 必须来自环境变量,`.env` 已在 `.gitignore` 中排除。
|
||||
2. **默认值兜底**:每个 `process.env` 读取都提供合理默认值,保证本地开箱即用。
|
||||
3. **按域拆分配置文件**:数据库、Redis、日志等基础设施各自独立文件,便于扩展新依赖。
|
||||
4. **Docker 优先**:生产环境推荐通过 compose `env_file` 注入而非挂载 `.env` 文件。
|
||||
5. **新增配置项流程**:先在 `.env.example` 添加注释说明,再在各消费处补充 `process.env.XXX || default`。
|
||||
## 开发者应遵循的规则
|
||||
- 新增配置项必须在 `.env.example` 中声明并附带注释说明用途与默认值。
|
||||
- 所有配置读取必须放在 `backend/src/config/*` 子模块中,禁止在业务路由或服务里直接散落 `process.env` 调用。
|
||||
- 对数值型配置使用 `parseInt(..., 10)` 显式转换,避免字符串拼接导致类型错误。
|
||||
- 生产环境一律通过 Docker Compose `env_file` 或编排平台注入环境变量,不得将真实 `.env` 提交至仓库。
|
||||
- 如需新增外部依赖(新数据库、消息队列等),仿照 `database.js` / `redis.js` 的模式创建独立配置模块并导出单例。
|
||||
Reference in New Issue
Block a user