xuyueandClaude Opus 5.5
47d4679984
- 根目录加入 docker-compose、Caddyfile、文档等原本不在仓库里的文件 - 前后端两份 GitHub Actions 合并成根目录的一个 deploy workflow： 构建前端上传到 build/，再在服务器上 git pull 并重建容器 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1.8 KiB
1.8 KiB
挑战 AI 对话改进设计文档
日期： 2026-03-09
背景
挑战页面有 AI 对话功能（思维链），目前存在两个问题：
- AI 回复中的代码块占用大量空间，影响对话可读性
- 用户需要手动点击"提交作品"，导致中间过程的代码版本无法被记录
需求
- AI 消息中的代码块默认折叠，用户可点击展开查看
- AI 生成代码后自动静默提交，每轮生成代码的回复都触发一次提交，保留手动提交按钮
方案
需求一：代码块折叠
修改文件： client/src/components/PromptPanel.vue
- 在
renderMarkdown()中使用自定义 marked renderer，覆盖code渲染逻辑 - 代码块输出为原生
<details>/<summary>HTML，summary 显示语言名称 - 流式输出的
streamingContent使用相同 renderer - 加 scoped CSS 美化折叠组件样式
<details class="code-block">
<summary>查看代码（javascript）</summary>
<pre><code class="hljs language-javascript">...</code></pre>
</details>
需求二：自动提交
修改文件： client/src/store/prompt.ts、client/src/pages/ChallengeHome.vue
prompt.ts：
- 暴露
onCodeComplete: ((code: {...}) => void) | null回调 complete事件中，当data.code存在时调用该回调
ChallengeHome.vue：
loadChallenge()中注册onCodeComplete回调，执行静默提交（不显示 loading，失败不弹提示）onUnmounted中将onCodeComplete置为null- 保留现有手动"提交作品"按钮
影响范围
client/src/components/PromptPanel.vue：代码块折叠渲染client/src/store/prompt.ts：新增onCodeComplete回调client/src/pages/ChallengeHome.vue：注册回调、自动提交逻辑