首页新增新增&日活报表

2026-07-20 18:39:33 +08:00
parent d2a8ef2f2d
commit 3a0108dc54
26 changed files with 990 additions and 613 deletions
@@ -1,7 +0,0 @@
-schema_version: 1
-module_path: ""
-title: Audio Dashboard 全栈项目根（前后端 + 部署编排）
-scope: []
-source_files: []
-depends_on: []
-related_to: []
@@ -1 +0,0 @@
-Node.js 22 (Alpine) + Express + Sequelize + Redis + Meilisearch + AWS S3；前端 Vite + Vue3 + Naive UI + UnoCSS + Alova；容器编排使用 Docker Compose，Nginx 托管静态资源。
@@ -1,6 +0,0 @@
-仓库为 monorepo 根目录，按职责拆分为三个顶层子工程：
- `backend/`：Express + Sequelize 后端，入口 `src/app.js`，按领域分层组织——`config/` 加载数据库、Redis、日志等运行时配置；`models/` 定义 Sequelize 模型并通过 `index.js` 统一导出；`routes/` 暴露 REST 接口；`services/` 封装外部依赖（Curve 客户端、S3/OSS 存储、Meilisearch、OTA 存储、用户初始化）；`middleware/` 提供鉴权与请求体大小限制；`validators/` 使用 zod 校验入参；`utils/` 集中 JWT 与密码工具。
- `frontend/`：基于 Vite + Vue3 + Naive UI 的管理后台，包含 `packages/` 下的内部 pnpm workspace 子包（alova、axios、hooks、materials、scripts、uno-preset、utils），业务路由与页面位于 `src/views/`，状态由 Pinia store 管理，API 调用集中在 `src/service/api`。
- `autoeq/`：存放历史测量数据 CSV/TXT 与生成脚本，作为离线参考数据集。
-
-部署层由根级 `docker-compose.yml` 编排两个服务：`backend` 基于 `backend/Dockerfile` 构建 Node 镜像，`frontend` 直接使用 `nginx:alpine` 挂载 `frontend/dist` 静态资源，两者共享 `audio-network` 网络并通过 `/api` 反向代理通信；宿主机卷 `/data/projects/source` 用于 X9 OTA 升级包持久化。本地开发可通过 `pnpm --dir frontend build && ./scripts/upload.sh all` 一键构建并上传至服务器。
@@ -1 +0,0 @@
-音频设备曲线与 OTA 升级管理后台，采用 Node.js 后端 + Vue3 前端双包结构，通过 Docker Compose 编排 Nginx 与 API 服务。
@@ -1 +0,0 @@
-首次部署需在服务器 `/data/project/dashboard/` 创建 `.env`（参考 `.env.example`），然后执行 `./scripts/upload.sh all` 上传前端 dist、后端源码与 compose 文件，再在服务器上运行 `docker compose build --no-cache backend && docker compose up -d`。本地非 Docker 开发时，根目录 `.env` 中设置 `PORT=8083`，分别启动 `cd backend && pnpm start` 与 `cd frontend && pnpm dev`。
@@ -1,5 +0,0 @@
- 后端按领域分层：每个实体对应独立的 `models/<Entity>.js`、`routes/<entity>.js`、`validators/<entity>.js`，并在 `models/index.js` 中统一注册关联。
- 环境变量通过 `backend/src/config/loadEnv.js` 集中加载，所有模块从该配置对象读取而非直接访问 `process.env`。
- 对外响应统一经 `backend/src/utils/response.js` 包装，保持 `{ code, message, data }` 一致结构。
- 前端 API 调用集中在 `frontend/src/service/api/*.ts`，通过统一的 `frontend/src/service/request/` 封装的 alova 实例发起请求。
- Docker 部署时容器内端口固定为 8000，宿主机映射到 8083，Nginx 将 `/api` 反向代理到 `http://backend:8000`。
@@ -3,14 +3,15 @@ schema_version: 1
 locale: zh-CN
 branch: main
 nodes_managed: true
-exported_at: "2026-07-17T09:47:48Z"
+exported_at: "2026-07-20T08:03:28Z"
 modules:
    "":
-        dir_name: Audio Dashboard 全栈项目根（前后端 + 部署编排）
-        title: Audio Dashboard 全栈项目根（前后端 + 部署编排）
+        dir_name: Luxsin CMS 全栈工程根
+        title: Luxsin CMS 全栈工程根
        scope: []
        source_files: []
-        children: []
+        children:
+            - writings
        depends_on: []
        related_to: []
    writings:
@@ -6,34 +6,40 @@ scope:
    - '**'
 source_files:
    - backend/src/config/logger.js
-    - backend/logs/app.log
    - backend/src/app.js
+    - backend/src/routes/auth.js
+    - backend/src/config/redis.js
+    - backend/package.json
 ---

 ## 1. 使用的框架与工具
- 后端采用 Winston 作为统一日志库，通过 backend/src/config/logger.js 创建全局 logger 实例并导出。
- 前端未引入专用日志框架，调试依赖浏览器控制台，无集中式前端日志方案。
+- 日志框架：`winston ^3.14`
+- 依赖声明位于 `backend/package.json`，通过 `require('winston')` 引入。
+- 前端未集成专用日志库，调试主要依赖浏览器控制台。

 ## 2. 核心文件与位置
- backend/src/config/logger.js — Winston 初始化、格式与传输配置。
- backend/logs/app.log — 当前唯一持久化日志文件，由 File transport 写入。
- backend/src/app.js — 应用入口，启动阶段使用 logger 记录数据库同步与服务监听信息。
- 各业务模块（如 routes/auth.js、routes/blacklist.js、config/redis.js）通过 require('../config/logger') 或同级引用获取 logger 实例。
+- 日志配置与实例导出：`backend/src/config/logger.js`
+- 应用入口统一引入：`backend/src/app.js`（`const logger = require('./config/logger');`）
+- 各模块按需引入使用，典型示例：`backend/src/routes/auth.js`、`backend/src/config/redis.js` 等。
+- 默认日志文件路径：`backend/logs/app.log`（由 `logger.js` 自动创建目录并写入）。

 ## 3. 架构与约定
- 单例模式：logger 在 config/logger.js 中 createLogger 一次后 module.exports，所有模块共享同一实例。
- 日志级别：默认 level 为 info，代码中使用 logger.info / logger.warn / logger.error 三种级别；未发现 debug 级别的使用。
- 输出格式：自定义 printf 模板，形如 YYYY-MM-DD HH:mm:ss - level - message + JSON(meta)，时间戳固定格式，额外字段以 JSON 字符串拼接在消息末尾。
- Sinks（传输）：
-  - Console transport：直接输出到标准输出，便于 Docker 容器收集 stdout。
-  - File transport：追加写入 backend/logs/app.log，UTF-8 编码，未配置按天/大小轮转。
- 目录自动创建：启动时若 logs/ 不存在则 fs.mkdirSync(..., { recursive: true }) 自动创建。
- 第三方库日志：Sequelize 在开发环境将 SQL 语句通过 console.log 输出，生产环境关闭；Redis 错误通过统一 logger 记录。
+- **集中式初始化**：所有日志输出均通过 `src/config/logger.js` 暴露的单一 `logger` 实例，避免重复配置。
+- **输出目标（transports）**：同时输出到控制台和文件两个 sink：
+  - Console transport：便于本地开发实时观察。
+  - File transport：固定文件名 `logs/app.log`，编码 UTF-8。
+- **格式策略**：`timestamp + level + message + JSON meta` 拼接的单行文本格式，时间格式为 `YYYY-MM-DD HH:mm:ss`；当存在额外元数据时以空格分隔追加 JSON 字符串。
+- **级别策略**：全局 `level: 'info'`，代码中仅使用 `info / warn / error` 三个级别，未见 `debug` 级别调用。
+- **结构化字段**：未采用 winston 的 structured log 对象传参方式，而是将业务上下文拼入 message 字符串（如 `Login failed for username=${trimmedUsername}`），meta 字段基本未使用。
+- **数据库层日志**：Sequelize 在开发环境启用原生 `console.log` 打印 SQL，生产环境关闭（`logging: isDevelopment ? (msg) => console.log(msg) : false`），不走 Winston。

 ## 4. 开发者应遵循的规则
- 统一导入：在任意模块中通过 const logger = require('./config/logger')（相对路径根据层级调整）获取 logger，禁止直接使用 console.log 输出业务日志。
- 级别选择：仅使用 info / warn / error 三个级别，避免引入 debug；关键流程用 info，可恢复异常用 warn，不可恢复错误用 error。
- 结构化字段：需要附加上下文数据时，以对象形式传入第三个参数，例如 logger.info('User logged in', { userId: user.id })，会被序列化为 JSON 拼接到消息后。
- 敏感信息脱敏：不要在日志中明文记录密码、token、完整请求体等敏感内容。
- 日志文件管理：当前没有按天/大小轮转策略，长期运行需配合外部 logrotate 或容器日志驱动进行清理，避免 app.log 无限增长。
- Docker 集成：由于同时输出到 stdout，建议通过容器编排平台（docker-compose、K8s）收集 stdout 作为主日志源，本地开发保留 app.log 用于快速排查。
+- **统一引用**：始终从 `../config/logger` 或相对路径引用同一 logger 实例，不要自行 `createLogger`。
+- **级别选择**：
+  - `info`：记录关键业务流程事件（登录成功、密码修改、服务启动等）。
+  - `warn`：记录可恢复异常或预期外的分支（用户名不存在、资源未找到等）。
+  - `error`：记录异常堆栈信息或不可恢复错误。
+  - 不使用 `debug` 级别。
+- **消息内容**：将关键上下文（用户名、ID、MAC 等）直接拼入 message 字符串；如需附带复杂对象，可通过第三个参数传入 meta，但当前代码风格倾向于纯文本。
+- **敏感信息**：禁止在日志中输出密码、token、完整请求体等敏感数据（现有代码已避免输出 password_hash/token 值）。
+- **文件轮转**：当前未配置 winston-daily-rotate-file 等轮转插件，长期运行需注意 `app.log` 体积增长，后续可在 transports 中补充轮转策略。
@@ -1,45 +0,0 @@
---
-kind: logging_system
-name: 后端日志系统（Winston 单文件输出）
-category: logging_system
-scope:
-    - '**'
-source_files:
-    - backend/src/config/logger.js
-    - backend/src/app.js
-    - backend/src/routes/auth.js
-    - backend/src/config/redis.js
-    - backend/package.json
---
-
-## 1. 使用的框架与工具
- 日志框架：`winston ^3.14`
- 依赖声明位于 `backend/package.json`，通过 `require('winston')` 引入。
- 前端未集成专用日志库，调试主要依赖浏览器控制台。
-
-## 2. 核心文件与位置
- 日志配置与实例导出：`backend/src/config/logger.js`
- 应用入口统一引入：`backend/src/app.js`（`const logger = require('./config/logger');`）
- 各模块按需引入使用，典型示例：`backend/src/routes/auth.js`、`backend/src/config/redis.js` 等。
- 默认日志文件路径：`backend/logs/app.log`（由 `logger.js` 自动创建目录并写入）。
-
-## 3. 架构与约定
- **集中式初始化**：所有日志输出均通过 `src/config/logger.js` 暴露的单一 `logger` 实例，避免重复配置。
- **输出目标（transports）**：同时输出到控制台和文件两个 sink：
-  - Console transport：便于本地开发实时观察。
-  - File transport：固定文件名 `logs/app.log`，编码 UTF-8。
- **格式策略**：`timestamp + level + message + JSON meta` 拼接的单行文本格式，时间格式为 `YYYY-MM-DD HH:mm:ss`；当存在额外元数据时以空格分隔追加 JSON 字符串。
- **级别策略**：全局 `level: 'info'`，代码中仅使用 `info / warn / error` 三个级别，未见 `debug` 级别调用。
- **结构化字段**：未采用 winston 的 structured log 对象传参方式，而是将业务上下文拼入 message 字符串（如 `Login failed for username=${trimmedUsername}`），meta 字段基本未使用。
- **数据库层日志**：Sequelize 在开发环境启用原生 `console.log` 打印 SQL，生产环境关闭（`logging: isDevelopment ? (msg) => console.log(msg) : false`），不走 Winston。
-
-## 4. 开发者应遵循的规则
- **统一引用**：始终从 `../config/logger` 或相对路径引用同一 logger 实例，不要自行 `createLogger`。
- **级别选择**：
-  - `info`：记录关键业务流程事件（登录成功、密码修改、服务启动等）。
-  - `warn`：记录可恢复异常或预期外的分支（用户名不存在、资源未找到等）。
-  - `error`：记录异常堆栈信息或不可恢复错误。
-  - 不使用 `debug` 级别。
- **消息内容**：将关键上下文（用户名、ID、MAC 等）直接拼入 message 字符串；如需附带复杂对象，可通过第三个参数传入 meta，但当前代码风格倾向于纯文本。
- **敏感信息**：禁止在日志中输出密码、token、完整请求体等敏感数据（现有代码已避免输出 password_hash/token 值）。
- **文件轮转**：当前未配置 winston-daily-rotate-file 等轮转插件，长期运行需注意 `app.log` 体积增长，后续可在 transports 中补充轮转策略。
@@ -9,52 +9,35 @@ source_files:
    - frontend/packages/uno-preset/src/index.ts
    - frontend/src/theme/vars.ts
    - frontend/src/theme/settings.ts
+    - frontend/src/theme/preset/default.json
    - frontend/src/theme/preset/dark.json
    - frontend/src/styles/css/reset.css
-    - frontend/src/styles/css/global.css
+    - frontend/src/styles/scss/scrollbar.scss
 ---

-## 样式系统概览
-
-本项目前端采用 **UnoCSS + NaiveUI** 的原子化 CSS 方案，结合运行时主题变量实现动态换肤。整体风格源自 SoybeanAdmin 模板，通过设计令牌（Design Tokens）统一管理色彩、圆角、阴影等视觉规范。
+## 系统概述
+前端采用 **UnoCSS**（原子化 CSS）+ **Naive UI** 组件库的混合方案，配合自研 `@sa/uno-preset` 预设与 JSON 主题预设文件，实现可配置、可切换的多主题中后台风格。

 ## 核心架构
-
-### 1. 原子化样式引擎：UnoCSS
- 使用 `presetWind3`（Tailwind v3 兼容预设）提供基础原子类
- 自定义 `@sa/uno-preset` 包定义项目级快捷类（如 `flex-center`、`absolute-lt`、`ellipsis-text`）
- 启用 `transformerDirectives` 和 `transformerVariantGroup` 支持 `@apply` 与类分组语法
- 根配置位于 `frontend/uno.config.ts`
-
-### 2. 组件库：Naive UI
- 作为主要 UI 组件来源，配合 `tailwind-merge` 处理样式冲突
- 通过 Pinia store 管理主题状态，与 UnoCSS 变量联动
-
-### 3. 主题系统
- **运行时主题变量**：`src/theme/vars.ts` 生成 CSS 变量映射（如 `--primary-color`、`--container-bg-color`），覆盖 UnoCSS 主题
- **主题设置**：`src/theme/settings.ts` 定义默认主题色（`#646cff`）、圆角（6px）、布局模式等
- **预设主题**：`src/theme/preset/*.json` 提供 light/dark/compact/azir 等多套预设，支持运行时切换
- **暗色模式**：通过 `class` 策略（`dark: 'class'`）在 `<html>` 上切换，而非媒体查询
-
-### 4. 全局样式组织
- `src/styles/css/global.css`：统一引入 reset、nprogress、transition 样式
- `src/styles/css/reset.css`：基于 Tailwind 官方 base 的完整浏览器重置
- `src/styles/scss/`：仅保留滚动条等少量 SCSS，主体样式走 UnoCSS
- 组件内样式优先使用 UnoCSS 原子类，必要时用 `<style scoped>` 补充
+- **原子化样式层**：通过 `unocss` + `presetWind3` 提供 Tailwind 兼容类名；自定义 `presetSoybeanAdmin` 在 `packages/uno-preset/src/index.ts` 中集中定义 `flex-*`、`absolute-*`、`fixed-*` 等常用快捷类。
+- **设计令牌层**：`src/theme/vars.ts` 将颜色、阴影映射为 CSS 变量（如 `--primary-color`、`--header-box-shadow`），由 `themeSettings` 与 `src/theme/preset/*.json` 驱动注入。
+- **主题预设层**：`src/theme/preset/{default,dark,azir,compact}.json` 以 JSON 描述主题色板、圆角、布局模式、Header/Sider/Tab/Footer 尺寸等，运行时由 `theme-drawer` 动态切换。
+- **全局样式层**：`src/styles/css/reset.css` 提供浏览器默认样式重置；`global.css` 统一 `html/body/#app` 高度与基础文本色；`src/styles/scss/global.scss` 引入滚动条 mixin，支持暗色覆盖。

 ## 关键文件
- `frontend/uno.config.ts` — UnoCSS 主配置
- `frontend/packages/uno-preset/src/index.ts` — 自定义快捷类预设
- `frontend/src/theme/vars.ts` — CSS 变量令牌生成器
- `frontend/src/theme/settings.ts` — 默认主题设置
- `frontend/src/theme/preset/*.json` — 主题预设文件
- `frontend/src/styles/css/reset.css` — 浏览器样式重置
- `frontend/src/styles/css/global.css` — 全局样式入口
+- `frontend/uno.config.ts` — UnoCSS 入口，合并 `themeVars`、注册 `presetWind3({ dark: 'class' })` 与 `presetSoybeanAdmin`、启用 `transformerDirectives` / `transformerVariantGroup`
+- `frontend/packages/uno-preset/src/index.ts` — 项目级快捷类集合（flex/absolute/fixed/ellipsis 等）
+- `frontend/src/theme/vars.ts` — 生成 `colors.*`、`boxShadow.*` 的 CSS 变量映射表
+- `frontend/src/theme/settings.ts` — 默认主题设置（主色、圆角、布局模式、各区域尺寸、light/dark tokens）
+- `frontend/src/theme/preset/*.json` — 可插拔主题预设（default/dark/azir/compact）
+- `frontend/src/styles/css/reset.css` — 跨浏览器 reset 基线
+- `frontend/src/styles/scss/scrollbar.scss` — 带暗色覆盖的滚动条 mixin
+- `frontend/package.json` — 依赖声明（naive-ui、unocss、sass、tailwind-merge 等）

-## 开发者约定
-1. **优先使用 UnoCSS 原子类**，避免手写 CSS；仅在无法表达时写 `<style scoped>`
-2. **颜色必须通过 CSS 变量**（如 `text-primary`、`bg-container`），禁止硬编码色值
-3. **新增主题色**需同步更新 `settings.ts` 中的 `otherColor` 及 `vars.ts` 的调色板生成逻辑
-4. **暗色适配**通过 `dark:` 前缀类或 `class` 切换，不使用 `prefers-color-scheme`
-5. **响应式断点**遵循 UnoCSS 默认（sm/md/lg/xl），不自行扩展断点
-6. **图标统一使用 @iconify/vue**，尺寸通过 `icon-*` 字号类控制
+## 约定与规则
+1. **优先使用 UnoCSS 原子类**：布局用 `flex-center`、`absolute-lt` 等 preset 快捷类，避免手写 flex/position 代码。
+2. **主题色通过 CSS 变量消费**：组件内直接引用 `var(--primary-color)` 或 Uno 类 `text-primary`，禁止硬编码十六进制色值。
+3. **暗色模式以 class 切换**：Uno 配置 `dark: 'class'`，通过给 `<html>` 添加 `.dark` 类触发，所有样式需遵循此约定。
+4. **新增主题走 preset JSON**：在 `src/theme/preset/` 下新建 JSON 文件，保持与 `default.json` 一致的字段结构，再通过 theme drawer 加载。
+5. **全局样式分层**：reset 放 `css/reset.css`，业务通用样式放 `scss/global.scss`，页面级样式尽量拆到组件 SCSS 文件中，避免污染全局。
+6. **滚动条统一使用 mixin**：需要自定义滚动条时引入 `@forward 'scrollbar'` 并使用 `$size/$color` 参数，确保暗色自动适配。
				`@@ -1 +0,0 @@`
				`Node.js 22 (Alpine) + Express + Sequelize + Redis + Meilisearch + AWS S3；前端 Vite + Vue3 + Naive UI + UnoCSS + Alova；容器编排使用 Docker Compose，Nginx 托管静态资源。`
				`@@ -1 +0,0 @@`
				`音频设备曲线与 OTA 升级管理后台，采用 Node.js 后端 + Vue3 前端双包结构，通过 Docker Compose 编排 Nginx 与 API 服务。`
				`@@ -1 +0,0 @@`
				首次部署需在服务器 `/data/project/dashboard/` 创建 `.env`（参考 `.env.example`），然后执行 `./scripts/upload.sh all` 上传前端 dist、后端源码与 compose 文件，再在服务器上运行 `docker compose build --no-cache backend && docker compose up -d`。本地非 Docker 开发时，根目录 `.env` 中设置 `PORT=8083`，分别启动 `cd backend && pnpm start` 与 `cd frontend && pnpm dev`。