docs(tabs): 更新标签页视图组件设计与交互细节

- 采用固定内边距策略，解决标签页悬停时的布局抖动问题
- 统一关闭按钮尺寸为14x14px，提升视觉一致性
- 优化活动标签和悬停状态的层级管理，确保视觉层次正确
- 增强视觉反馈，添加内嵌阴影效果改善用户体验
- 添加平滑颜色过渡动画（0.2秒），提升交互流畅度
- 支持玻璃拟态设计系统，实现现代化视觉风格
- 完善工具箱图标支持，确保标签页工具功能准确显示

.qoder/repowiki/knowledge/zh/构建与部署体系（pnpm + Docker Compose + rsync）/构建与部署体系（pnpm + Docker Compose + rsync）.md

@@ -0,0 +1,53 @@
+---
+kind: build_system
+name: 构建与部署体系（pnpm + Docker Compose + rsync）
+category: build_system
+scope:
+    - '**'
+source_files:
+    - docker-compose.yml
+    - backend/Dockerfile
+    - frontend/Dockerfile
+    - frontend/vite.config.js
+    - backend/package.json
+    - frontend/package.json
+    - scripts/upload.sh
+    - DEPLOY.md
+    - backend/start.sh
+---
+
+## 1. 使用的系统与方法
+- **包管理**：前后端统一使用 pnpm（`packageManager: pnpm@11.5.2`），通过 `pnpm-lock.yaml` 锁定依赖。
+- **前端构建**：Vite（`vite build`），产物输出到 `frontend/dist/`，并通过手动 chunk 拆分 `vue/vue-router`、`element-plus`、`@element-plus/icons-vue` 提升缓存命中率。
+- **后端运行**：Express + Sequelize，入口 `backend/src/app.js`，开发用 nodemon，生产直接 `node src/app.js`。
+- **容器化**：Docker 多阶段构建——前端 builder 基于 `node:18-alpine`，最终镜像为 `nginx:alpine`；后端基于 `node:22-alpine`，仅安装 `--prod` 依赖。
+- **编排**：根目录 `docker-compose.yml` 定义 `backend`（Node API，端口 8000）和 `frontend`（Nginx 静态站点，端口 80），通过自定义 bridge 网络 `audio-network` 通信。
+- **发布上传**：`scripts/upload.sh` 基于 rsync+ssh 将指定文件增量同步到 EC2（`ubuntu@ec2-...:/data/project/dashboard/`），支持 `frontend|backend|compose|all` 预设目标及 `-n` dry-run。
+- **本地开发**：前端 Vite dev server 3000 端口，通过 proxy 将 `/api` 转发到 `http://localhost:8083`；后端默认 8083 端口，由 `.env` 的 `PORT` 控制。
+
+## 2. 关键文件与位置
+- `docker-compose.yml` — 服务编排、端口映射、日志轮转、数据卷挂载
+- `backend/Dockerfile` — Node 22 Alpine 镜像，只装 prod 依赖，启动 `src/app.js`
+- `frontend/Dockerfile` — 多阶段：builder 构建 dist，nginx:alpine 托管
+- `frontend/vite.config.js` — alias `@`、dev proxy、chunk 拆分、警告过滤
+- `backend/package.json` / `frontend/package.json` — 脚本与依赖声明，固定 pnpm 版本
+- `scripts/upload.sh` — rsync 上传脚本，含 preset 路径集合与帮助文档
+- `DEPLOY.md` — 完整部署指南（首次部署、更新、环境变量、常见问题）
+- `backend/start.sh` / `restart.sh` / `stop.sh` — 裸机运行时辅助脚本
+- `frontend/nginx.conf` — Nginx 反向代理配置（将 `/api` 指向 backend:8000）
+
+## 3. 架构与约定
+- **环境隔离**：`.env` 放在项目根目录，Compose 通过 `env_file` 注入容器；正式环境 S3 走 EC2 IAM 角色，不传 AK/SK。
+- **端口约定**：容器内后端固定 8000，宿主机映射 8083；前端 Nginx 容器内 80，宿主机映射 8082。本地开发时前端 3000 代理到 8083。
+- **构建产物位置**：前端 `dist/` 在服务器 `/data/project/dashboard/frontend/dist` 以只读方式挂载；后端源码 `backend/src/` 随镜像重建。
+- **OTA 存储**：宿主机 `/data/projects/source` 挂载到后端容器，用于存放 X9 OTA 升级包。
+- **日志策略**：Compose 中每个服务启用 json-file 驱动，单文件 10MB、最多 5 个文件。
+- **版本策略**：无 CI/CD 流水线，版本号停留在 `1.0.0`，发布靠人工执行 `upload.sh` + `docker compose up -d`。
+
+## 4. 开发者应遵循的规则
+- **依赖变更**：修改 `package.json` 后必须重新生成 `pnpm-lock.yaml`，否则 Docker 构建会失败。
+- **前端构建**：发布前先在本地执行 `cd frontend && pnpm install && pnpm build`，确保 `dist/` 存在后再上传。
+- **上传范围**：优先使用 `./scripts/upload.sh <target>`，不要手动遗漏 `pnpm-lock.yaml` 或 `Dockerfile`；需要改 nginx 配置时显式传入 `./frontend/nginx.conf`。
+- **环境变量**：`.env` 只在服务器维护，不会被 upload.sh 同步；修改后需 `docker compose up -d --force-recreate backend` 重启生效。
+- **端口一致性**：不要在代码里硬编码端口，统一通过 `.env` 的 `PORT` 或 Compose `environment` 覆盖。
+- **健康检查**：部署后用 `curl http://服务器IP:8083/health` 验证后端可用，再访问 `:8082` 确认前端页面。