1f087599c5
- 新增多轮 GraphRAG 检索功能，支持流式进度输出（SSE） - 新增用户管理界面，可查看所有用户图谱统计并快速导航 - 新增多 Agent 任务拆解与执行服务，支持复杂任务协作处理 - 改进 embedding 和 rerank 服务的容错机制，支持备用模型和端点 - 更新前端样式遵循 Acmetone 设计规范，优化视觉一致性 - 新增流式分析接口，支持并行处理和专家评审选项
53 lines
3.5 KiB
Markdown
53 lines
3.5 KiB
Markdown
---
|
||
name: acmetone-design-specs
|
||
description: Acmetone项目专属设计规范（颜色、字体、特色UI组件）。在创建新页面、组件或修改样式时务必调用此技能，以保证UI风格一致和最小化改动。
|
||
---
|
||
|
||
# Acmetone 设计规范 (Design Specifications)
|
||
|
||
在为 Acmetone 项目开发新功能、新增页面或修改 UI 组件时，请务必遵循以下设计规范，确保“基于最小改动”并“尽量在原基础上复用”。
|
||
|
||
## 1. 颜色规范 (Color Palette)
|
||
- **基础背景**：主要为纯白 (`#ffffff`)，特殊页面（如 AirplanMode）使用深灰 (`#333333`)。
|
||
- **文本颜色**：
|
||
- 主文本：黑色 (`#000000`) 或 `#111111`
|
||
- 次要/辅助文本：各级灰色（`#555555`, `#666666`, `#888888`）
|
||
- **边框与装饰线**：浅灰色（`#cccccc`, `#dddddd`）
|
||
|
||
## 2. 字体与排版 (Typography)
|
||
- **基础字体**：系统默认无衬线字体栈 `var(--font-family)` (`-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC" ...`)。
|
||
- **特效/高亮字体**：`DotGothic16`（点阵字体），常用于超大标题或特殊高亮，自带复古科技感。
|
||
- **典型字号层级**：
|
||
- 超大标题 (Hero Title)：`72px`
|
||
- 模块标题 (Section Title)：`48px` / `36px`
|
||
- 正文描述 (Body Text)：`16px` / `14px`
|
||
- 小标签/附加信息 (Labels)：`13px` / `12px`（配合 `letter-spacing: 1px` 或 `1.5px`）
|
||
|
||
## 3. 特色 UI 元素 (Signature UI Elements)
|
||
- **科技感边角 (Tech Brackets / Corner Crosses)**：
|
||
- 项目显著特征。在按钮 (`.btn-container`)、图标包裹盒 (`.ms-icon-box`) 边缘使用四个直角边框进行装饰。
|
||
- DOM 结构参考：包含四个 `<span class="corner top-left"></span>`、`<span class="corner top-right"></span>` 等元素。
|
||
- 交互：Hover 时伴随边角向外扩散的动效 (`transform: translate(...)`)。
|
||
- **按钮体系**：
|
||
- `light` 模式：透明背景 + 黑字 (`.tech-btn.light`)
|
||
- `dark` 模式：黑底白字 + 柔和底阴影 (`box-shadow: 0 15px 35px rgba(0,0,0,0.15)`) (`.tech-btn.dark`)
|
||
- **高亮十字星 (Highlight Crosses)**：使用 `.highlight` 配合伪元素或 `.cross-tl`, `.cross-br` 实现角落的十字线装饰。
|
||
|
||
## 4. 布局与视觉动效 (Layout & Effects)
|
||
- **环境光效 (Ambient Glow)**：页面顶部常驻半透明的径向渐变光效 (`.ambient-glow`)。
|
||
- **层级管理 (Z-Index)**：
|
||
- 底层粒子画布 `#particleCanvas`：`z-index: 1`，`pointer-events: none`。
|
||
- 顶层导航：`z-index: 100`。
|
||
- **微交互动效**：
|
||
- 图标上下缓动悬浮 (`@keyframes floatIcon`)。
|
||
- 按钮内箭头的水平位移动效 (`.btn-container:hover .btn-arrow { transform: translateX(4px); }`)。
|
||
|
||
## 5. 开发原则
|
||
- **复用优先**：优先使用 `style.css` 中已有的类名（如 `.btn-container`, `.ms-icon-box`, `.flex-center`），避免重复写样式。
|
||
- **Tailwind 结合**：项目已配置 Tailwind CSS 4.x，基础布局可使用 Tailwind 类名，但特色组件（如带边角的按钮）请复用自定义 CSS 类以保持一致性。
|
||
|
||
## 6. 核心资源参考 (Core Resources)
|
||
为了确保设计规范的严格执行，本 Skill 附带了项目核心的样式与配置资源。在需要深入了解具体样式实现或 CSS 变量时，请参考以下文件：
|
||
- **全局样式与特色组件**：`resources/style.css` (包含了所有自定义的 UI 组件如 `.corner`, `.btn-container` 等的具体实现)
|
||
- **Tailwind 配置**：`resources/tailwind.config.js`
|
||
- **视觉展示网站**：`website/index.html` (包含完整设计系统视觉指南与交互演示) |