docs/UI_UX_DESIGN_2026.md

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 生成与执行