Spaces:
Sleeping
Sleeping
| # 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 生成与执行* | |