ee52bed129
用户反馈: dark 主题下大量页面卡片/表头是白底, 文字看不清, 视觉割裂 根因 (W5.x v2 token 迁移遗漏): - v1 token (--rr-page-bg / --rr-bg-card / --rr-table-header-bg / --rr-row-hover / --rr-border-color / --rr-text-secondary) 在 themes.scss 完全没定义 - v2 用 --bg-soft / --surface / --surface-2 / --border / --ink-2 / --ink-3, 但大量组件没改 fallback, 永远走 hex fallback (#F1F5F9 / #FFFFFF) - EP el-table 内部用 getCssVar(color, white) = --el-color-white, 未在 tokens.scss 重定向, dark 下仍是 #FFFFFF - CSS 变量级联问题: :root 块 var(--surface) 解析时, dark 块的 --surface 重写还没生效 修法 (3 类共 11 文件): 1. EP token 补齐 (themes.scss dark 块 + tokens.scss :root 块): - --el-color-white / --el-color-black: #1E293B / #F8FAFC - --el-fill-color-blank / --el-fill-color-light: surface / bg-soft - --el-table-tr-bg-color / --el-table-bg-color: surface - --el-table-expanded-cell-bg-color: surface - --el-table-header-bg-color: surface-2 (表头略亮区分) - --el-table-row-hover-bg-color: bg-soft 2. v1 token 清理 (4 组件): - AppLayout.vue: 13 处 --rr-page-bg → --bg-soft - DataTable.vue: --rr-table-header-bg/--rr-text-secondary/--rr-row-hover/--rr-bg-card/--rr-border-color → v2 token - SearchBar.vue / ListTabs.vue: 同上 3. 业务页硬编码色 (5 业务页): - OpenAppListView.vue: 4 状态 badge + 表格头 #F8FAFC → var(--*-soft) - ApplyApiKeyDialog.vue: header #F8FAFC → var(--surface-2) - InquiryListView.vue / LogOperationView.vue / LogErrorView.vue: 4 类 badge → var(--amber/brand/green/red-soft) Playwright 1920 视口 dark 主题实测 (5 个典型页): - Dashboard: 侧栏 rgb(30,41,59), 主区 rgb(15,23,42), 表格 rgb(30,41,59) ✅ - 用户列表 / 应用列表 / 订单列表 / 询价列表: 全部统一深色 ✅ - 之前: elTableBg rgb(255,255,255) 纯白 → 现在: rgb(30,41,59) 暗 surface - 文字、badge、按钮、分页器、搜索条全部 dark 适配 不动调色板 (按用户要求 严重问题优先): --border/--ink-2 等保持原值 |
||
|---|---|---|
| public | ||
| src | ||
| .gitignore | ||
| ARCHITECTURE.md | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Admin New (F006)
重构后的管理后台 — 替代老的 renren-cloud-admin,渐进式双前端策略。
外网访问 (W5.x.x+3.5):
- 主入口 (frp):
http://direv.cloud:8080/admin/(快 2-60x vs Tailscale)- 备用 (Tailscale):
http://100.111.84.16:3000/admin/- 详细: 项目根目录
FRP-接入快速参考.md
任何架构变更必须先看
ARCHITECTURE.md再改代码。
启动
# 安装依赖
npm install
# Dev (端口 3001,proxy /api 到 gateway:8080)
npm run dev
# Build
npm run build
# Type check
npm run type-check
访问:
- Dev: http://localhost:3001/admin/
- Prod: http://100.111.84.16:3000/admin/(待 nginx 配置)
4 套主题
切主题:顶栏"主题"按钮,或登录页底部 4 个色点。
| 主题 | 主色 | 触发 |
|---|---|---|
| 科技蓝(默认) | #2563EB |
data-theme="tech-blue" |
| 中国红 | #DC2626 |
data-theme="red" |
| Notion 紫 | #5645D4 |
data-theme="purple" |
| 暗夜黑 | #0F172A |
data-theme="dark" |
新增主题:改 src/theme/themes.scss + src/theme/presets.ts 两处即可。
当前进度 (W1 D1 末)
- 项目骨架(Vite + Vue 3 + TS + Pinia + Element Plus)
- 4 套主题系统(tokens + themes + presets)
- ThemePicker 顶栏组件
- AppLayout 主布局(顶栏 + 侧边栏 + 内容区)
- LoginView 登录页(渐变 + 主题切换)
- DashboardView 数据看板(mock 数据)
- Vite proxy /api → gateway:8080
- D2: 登录接真实 OAuth2(axios + 路由守卫) — 明日
- D3: 菜单从后端拉
- D4: 看板接真实 API
- D5: nginx 部署到 /admin/
目录结构(按 ARCHITECTURE.md)
src/
├── theme/ # 主题系统(独立子模块)
├── layout/ # 布局(AppLayout 已迁移至 components/AppLayout)
├── modules/ # 业务模块(每个独立)
│ ├── auth/ # 登录
│ └── dashboard/ # 数据看板
├── components/ # 跨模块组件
│ ├── AppLayout/
│ └── ThemePicker/
├── stores/ # Pinia (theme/user/menu)
├── api/ # HTTP 封装(W2 接入)
├── router/ # 路由 + 守卫
├── composables/ # 可复用逻辑(预留)
├── directives/ # 全局指令(预留)
├── styles/ # 全局样式
└── utils/ # 工具函数