34 lines
1.9 KiB
Plaintext
34 lines
1.9 KiB
Plaintext
---
|
||
description: portal-ui UI 风格保持规则（暗黑实验室风 / Dark Lab）
|
||
alwaysApply: true
|
||
---
|
||
|
||
# portal-ui 暗黑实验室风格规则
|
||
|
||
**核心原则：深灰底（禁用纯黑 `#000`）、半透明毛玻璃卡片、极细发光描边、生成区点阵/网格背景、主按钮霓虹淡蓝紫渐变、提示词输入使用 `PromptHighlightTextarea` 高亮常见质量词。**
|
||
|
||
## 1. 颜色与质感（`var.less` & `base.less`）
|
||
|
||
- **页面背景**：`#0D0D0D` / `#111111`，禁止 `#000`
|
||
- **卡片/输入**：`rgba(20,20,20,0.8)` + `backdrop-filter: blur` + `1px` 边框 `rgba(140,180,255,0.25~0.3)` + 微弱外发光
|
||
- **主色**：Arco `arcoblue` 调整为偏蓝紫（如 `#8899ff`）；主按钮使用 **线性渐变**（淡蓝 → 淡紫）+ 柔和光晕
|
||
- **主字体**：`Inter`（`index.html` 已引入），中文回退 `PingFang SC` / `Microsoft YaHei`
|
||
- **生成画布区**：使用工具类 `.lab-canvas-bg`（约 5% 透明度的点阵 + 网格）
|
||
|
||
## 2. 布局与组件
|
||
|
||
- 主布局根节点：`default.vue` 使用 `class="app-wrapper dark-lab"`；全局覆盖在 `base.less` 的 `.dark-lab ...` 与 `.lab-*` 工具类
|
||
- 导航/侧栏：`navBar.vue`、`sideBar.vue` 与毛玻璃顶栏、侧栏一致
|
||
- 模态：`arco-modal-simple` 等与发光细边框一致，避免高饱和粉边
|
||
|
||
## 3. 提示词高亮
|
||
|
||
- 文生图等场景的提示词输入优先使用 `src/components/PromptHighlightTextarea.vue`（`v-model` 绑定字符串）
|
||
- 触发词列表维护在组件内（如 `cinematic`、`8k`、`masterpiece` 等），更新时保持 XSS 安全（先 escape 再包 `<span>`）
|
||
|
||
## 4. 开发要求
|
||
|
||
- 新页面卡片/表单区域与 `.dark-lab` 下 Arco 覆盖一致；局部可用与 `GeneratedImages.vue` 相同的 glass 块样式
|
||
- 预览图：细描边 + 深阴影浮起，避免粗黑硬边
|
||
- 修改全局主题后执行 `npm run dev` / `npm run build` 做回归
|