Spaces:
Sleeping
Sleeping
File size: 3,342 Bytes
138f7fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
# InterConnect Server UI/UX 设计方案 2026
## 1. 设计理念："星云玻璃 (Nebula Glass)"
全新的设计语言摒弃了扁平的白色界面，转向以深度为导向的深色主题界面，灵感来源于现代开发工具（如 Vercel, Linear, Raycast）和游戏美学（Minecraft 光影）。
### 核心概念
- **沉浸式深度 (Immersive Depth)**：利用多层级的暗色、阴影和微妙的边框来构建层级关系，而不依赖厚重的投影。
- **玻璃拟态 (Glassmorphism)**：使用半透明表面和背景模糊 (`backdrop-filter`) 来提供上下文关联和未来感。
- **动效 (Motion)**：微交互（悬停状态、焦点转换）感觉即时且流畅。
- **内容优先 (Content-First)**：高对比度的排版和充足的留白（或"留黑"）。
## 2. 配色方案
### 深色模式 (Dark Mode - 默认)
| 变量 | 颜色 | 用途 |
| :--- | :--- | :--- |
| `--bg-body` | `#09090b` (Zinc 950) | 主背景 |
| `--bg-card` | `rgba(39, 39, 42, 0.6)` | 卡片背景 (玻璃效果) |
| `--border-color` | `rgba(255, 255, 255, 0.08)` | 边框 |
| `--primary` | `#6366f1` (Indigo 500) | 主要操作、激活状态 |
| `--primary-glow` | `rgba(99, 102, 241, 0.4)` | 发光效果 |
| `--text-main` | `#fafafa` (Zinc 50) | 标题、主要文本 |
| `--text-muted` | `#a1a1aa` (Zinc 400) | 次要文本、标签 |
| `--danger` | `#ef4444` (Red 500) | 破坏性操作 |
| `--success` | `#10b981` (Emerald 500) | 成功状态 |
### 浅色模式 (Light Mode - 专业白)
| 变量 | 颜色 | 用途 |
| :--- | :--- | :--- |
| `--bg-body` | `#f3f4f6` (Gray 100) | 主背景 |
| `--bg-card` | `#ffffff` (White) | 卡片背景 (纯白) |
| `--border-color` | `#e5e7eb` (Gray 200) | 边框 |
| `--primary` | `#4f46e5` (Indigo 600) | 主要操作 (加深以提升对比度) |
| `--text-main` | `#111827` (Gray 900) | 主要文本 |
| `--text-muted` | `#6b7280` (Gray 500) | 次要文本 |
## 3. 组件设计
### 3.1 导航栏 (Navigation)
- **样式**: 顶部固定，半透明磨砂玻璃效果。
- **功能**: 包含标题、用户信息、主题切换（深/浅色）和退出按钮。
### 3.2 卡片 (Cards - Bento Grid 风格)
- **结构**: 圆角矩形 (`border-radius: 12px/16px`)。
- **边框**: 1px 实线，微弱的透明度。
- **交互**: 悬停时轻微上浮并增强边框颜色。
### 3.3 按钮与输入框
- **按钮**:
- 主要按钮：渐变色填充 + 悬停发光。
- 次要按钮：透明背景 + 边框，悬停高亮。
- **输入框**:
- 深色背景 (`rgba(24, 24, 27, 0.8)`)。
- 聚焦光环：主色调光晕。
## 4. 排版 (Typography)
- **字体**:
- 界面: `Inter` (现代无衬线体)
- 代码/密钥: `JetBrains Mono` (等宽字体)
- **层级**:
- H1: 24px, 粗体, 紧凑字间距。
- H2: 18px, 半粗体, 大写字母间距。
- 正文: 14px/16px, 常规字重。
## 5. 实施计划 (已完成)
1. **CSS 重构**: 使用 CSS 变量 (`:root` 和 `[data-theme="light"]`) 实现了完整的主题切换系统。
2. **HTML 结构**: 优化了语义化标签，添加了主题切换按钮。
3. **交互优化**: 实现了二级折叠菜单、动态箭头动画和响应式布局。
4. **功能增强**: 集成了系统日志控制台、多 AI 提供商配置和 API 密钥安全管理。
---
*由 Trae AI Pair Programmer 生成与执行*
|