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>
52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
# 挑战 AI 对话改进设计文档
|
||
|
||
**日期：** 2026-03-09
|
||
|
||
## 背景
|
||
|
||
挑战页面有 AI 对话功能（思维链），目前存在两个问题：
|
||
1. AI 回复中的代码块占用大量空间，影响对话可读性
|
||
2. 用户需要手动点击"提交作品"，导致中间过程的代码版本无法被记录
|
||
|
||
## 需求
|
||
|
||
1. **AI 消息中的代码块默认折叠**，用户可点击展开查看
|
||
2. **AI 生成代码后自动静默提交**，每轮生成代码的回复都触发一次提交，保留手动提交按钮
|
||
|
||
## 方案
|
||
|
||
### 需求一：代码块折叠
|
||
|
||
**修改文件：** `client/src/components/PromptPanel.vue`
|
||
|
||
- 在 `renderMarkdown()` 中使用自定义 marked renderer，覆盖 `code` 渲染逻辑
|
||
- 代码块输出为原生 `<details>/<summary>` HTML，summary 显示语言名称
|
||
- 流式输出的 `streamingContent` 使用相同 renderer
|
||
- 加 scoped CSS 美化折叠组件样式
|
||
|
||
```html
|
||
<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`：注册回调、自动提交逻辑
|