《60天AI学习计划启动 | Day 52: 信息架构 & 交互设计（第二个实战：代码助手）》

Day 52：信息架构 & 交互设计（第二个实战：代码助手）

学习目标

• 梳理 Code Assistant 页面的信息架构（有哪些区块、组件）
• 弄清 交互流程：切换模式 / 粘贴代码 / 发送问题 / 查看回答
• 用 TS/伪代码 表达组件树与页面状态结构

---

核心知识点

• 1. 页面信息架构（以代码助手为例）

  • 顶部：Header
    • 项目名称 + 模式说明（如：解释 / 修复 / 重构 / 测试）
  • 左侧：CodePanel
    • 模式选择（单选按钮/Tab）
    • 语言选择（TS/JS/Vue/React 等）
    • 代码输入区（大文本框，支持粘贴 / 高亮）
  • 右侧：ChatPanel
    • 对话列表（问题 + AI 回答）
    • 提问输入框（可直接引用左侧代码）
  • 可选底部：PromptDebug（显示当前模式使用的 Prompt 模板）

• 2. 页面组件树（简单示意）

  // 只是架构示意，不是完整实现
  interface CodeAssistantPageProps {
    // 未来可传入 aiClient / 初始配置
  }
  
  const CodeAssistantPage: React.FC<CodeAssistantPageProps> = () => {
    return (
      <div className="code-assistant-page">
        <Header />
        <div className="main">
          <CodePanel />   {/* 左：模式 + 代码输入 */}
          <ChatPanel />   {/* 右：问答区 */}
        </div>
        {/* <PromptDebug /> 可选调试面板 */}
      </div>
    )
  }
  

• 3. 页面状态结构（前端 state 设计）

  export type Mode = 'explain' | 'fix' | 'refactor' | 'test'
  
  export interface CodeAssistantState {
    mode: Mode               // 当前模式
    language: string         // 代码语言，如 'typescript'
    code: string             // 代码输入内容
    question: string         // 文本问题（可为空，仅用代码）
    // 聊天使用前面几天的 Message 模型即可
  }
  

  • 核心交互：
    • 切换模式：更新 mode，后续组 Prompt 时使用
    • 编辑代码：更新 code，发送请求时随 question 一起传给后端
    • 发送：{ mode, language, code, question } → /api/code-assistant → 填入 ChatPanel

• 4. 典型交互流程（从用户视角）

  1. 选择模式（比如「解释代码」）
  2. 选择语言（TS / React / Vue）
  3. 粘贴代码到左侧 CodePanel
  4. 在右侧 ChatPanel 输入补充问题（如“这段有性能问题吗？”）
  5. 点击发送 → 前端把当前 mode + language + code + question 发给后端 → 展示 AI 回答

---

明日学习计划预告（Day 53）

• 主题：接入聊天 + RAG + Function Calling（Code Assistant 实战）
• 方向：
  • 把 Day 52 的状态结构串到一个真实 /api/code-assistant 接口
  • 根据不同 mode 选择不同 Prompt 模板 / 工具调用（例如 lint / refactor / generate_tests）