CSS_REFACTOR_PLAN.md

CSS 重构计划

发现的问题

🔴 严重问题

1. CSS 变量不一致

   • styles.css: --error-color: 229 115 115 (RGB 分量)
   • html.ts: --error-color: #e57373 (十六进制)
   • 影响: 服务端渲染和客户端渲染样式不一致

2. 重复定义

   • .btn-secondary 定义了两次 (253-263, 590-603)
   • @keyframes spin 定义了两次 (311-313, 535-537)
   • .avatar-preview img 定义了两次 (668-672, 681-682)
   • 影响: 样式冲突，维护困难

⚠️ 中等问题

3. 过多内联样式 (html.ts)

   style="float: right;"
   style="clear: both;"
   style="display: flex; justify-content: center;"
   style="opacity: 0.6;"
   style="color: var(--text-main);"

   • 影响: 难以维护，无法复用

4. 硬编码颜色

   • html.ts:269 - background: #00000020
   • 应该使用 CSS 变量
   • 影响: 主题不一致

5. 注释代码

   • html.ts:368 - 注释掉的 CSS
   • 影响: 代码混乱

📱 缺失功能

6. 响应式设计

   • 没有移动端媒体查询
   • 固定宽度在小屏幕上可能有问题

7. CSS 组织

   • 缺少明确的分区
   • 相关样式分散

重构方案

Phase 1: 修复严重问题 (优先)

1. 统一 CSS 变量格式

   /* 统一使用 RGB 分量格式 */
   --error-color: 229 115 115;
   --success-color: 129 199 132;
   --bg-black: 0 0 0;
   --bg-white: 255 255 255;

2. 删除重复定义

   • 保留最新的 .btn-secondary (590-603)
   • 删除旧的 (253-263)
   • 删除重复的 @keyframes spin
   • 合并 .avatar-preview img 样式

Phase 2: 提取内联样式

3. 创建工具类

   .float-right { float: right; }
   .clearfix::after { content: ''; display: table; clear: both; }
   .flex-center { display: flex; justify-content: center; }
   .text-dimmed { opacity: 0.6; }

4. 替换 html.ts 中的内联样式

Phase 3: 改进组织

5. 重新组织 CSS 文件

   /* ========== Variables ========== */
   /* ========== Reset & Base ========== */
   /* ========== Layout ========== */
   /* ========== Components ========== */
   /* ========== Utilities ========== */
   /* ========== Animations ========== */
   /* ========== Responsive ========== */

6. 添加响应式设计

   @media (max-width: 768px) {
     .container { padding: 24px; }
     .connection-visual { flex-direction: column; }
   }

实施步骤

1. ✅ 创建此计划文档
2. ⏳ 修复 CSS 变量不一致
3. ⏳ 删除重复定义
4. ⏳ 提取内联样式到工具类
5. ⏳ 更新 html.ts 使用工具类
6. ⏳ 重新组织 CSS 文件
7. ⏳ 添加响应式设计
8. ⏳ 测试所有页面

预期收益

• ✅ 样式一致性
• ✅ 更好的可维护性
• ✅ 减少代码重复
• ✅ 移动端支持
• ✅ 更清晰的代码结构