diff --git a/.trae/documents/chatgpt-style-refactor-plan.md b/.trae/documents/chatgpt-style-refactor-plan.md new file mode 100644 index 0000000..618866a --- /dev/null +++ b/.trae/documents/chatgpt-style-refactor-plan.md @@ -0,0 +1,432 @@ +# DATA-AI 前端 ChatGPT 风格重构计划 + +## 目标 +将 DATA-AI 前端界面完全重构为 ChatGPT 风格的现代化 UI，**保持所有现有功能不变**，仅重写 HTML 布局和 CSS 样式体系。 + +--- + +## ChatGPT 风格设计原则 + +1. **极简主义**：隐藏复杂性，默认只展示核心对话界面 +2. **左侧折叠侧边栏**：对话历史列表，可完全折叠，hover 展开 +3. **居中对话流**：消息在页面中央纵向排列，最大宽度 ~768px +4. **清晰的消息角色区分**：用户消息靠右/深色背景，AI 消息靠左/无背景 +5. **底部固定输入区**：输入框居中，带附件/搜索等可展开按钮 +6. **顶部轻量导航**：模型选择器 + 新建对话 + 折叠侧边栏按钮 +7. **暗色/亮色主题无缝切换** +8. **微妙的动画过渡**：hover 状态、消息出现动画、面板滑入 + +--- + +## 实施步骤 + +### 步骤 1：创建全新 CSS 体系（ChatGPT 风格） + +**文件：`/workspace/static/css/chatgpt-style.css`**（新文件） + +创建全新的 CSS 变量和基础样式体系： + +#### 1.1 CSS 变量（暗色主题默认） +``` +--bg-primary: #212121 (类似 ChatGPT 深色背景) +--bg-secondary: #2f2f2f (侧边栏/卡片背景) +--bg-tertiary: #171717 (更深背景) +--bg-user-bubble: #303030 (用户消息气泡) +--bg-hover: #2a2a2a (hover 高亮) +--text-primary: #ECECF1 (主文字色) +--text-secondary: #B4B4B4 (次要文字) +--text-tertiary: #8E8E8E (更弱文字) +--accent-color: #10a37f (品牌绿色) +--border-color: #444444 (边框) +--border-light: #333333 (细边框) +--sidebar-width: 260px (侧边栏宽度) +--chat-max-width: 768px (对话最大宽度) +--input-max-width: 768px (输入区最大宽度) +--radius-sm: 6px +--radius-md: 12px +--radius-lg: 18px +--radius-xl: 24px +--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif +--font-mono: 'JetBrains Mono', 'Fira Code', monospace +``` + +亮色主题变量同理（反转）。 + +#### 1.2 全局重置 +- 去除所有默认 margin/padding +- box-sizing: border-box +- 设置 body 字体、背景色、文字色 +- 平滑滚动 `scroll-behavior: smooth` + +#### 1.3 布局系统 +``` +.app-container { + display: flex; + height: 100vh; + overflow: hidden; +} +``` + +--- + +### 步骤 2：重构 HTML 布局结构 + +**文件：`/workspace/static/index.html`** + +完全重写 HTML DOM 结构，保持所有数据属性和 ID 不变，只改变布局层级。 + +#### 2.1 新布局结构（自上而下） + +``` + + ├──
+ │ ├── + │ ├──