feat: 改版阶段 2：挑战和自由创作共用工作台，学生自己选版本提交

- 新的 Workbench：左边题目（可收起）+ AI 对话，右边预览 / 代码（可编辑），底部版本条；
  挑战页和自由创作页都用它，原来的“手动提交”“历史对话”标签换成“粘贴外部代码”和“全部历史”
- 不再每轮 AI 回复自动提交：学生点“交这一版”，可交多次，成绩仍取最高分；已交的版本不能重复点
- 手改代码、粘贴外部 AI 代码都存成版本（POST /prompt/versions，source 为 edit / manual），
  在版本条和提示词链里标“手改”“外部 AI”；它们进入 AI 上下文，AI 在手改后的代码上继续改；
  以前手动提交的回复正文为空时用代码补上；edit 的占位提问不参与提示词层级分类
- 互评从全屏弹窗改成对话里的卡片，打分前不显示作者，每个分数写明含义
- 编辑器代码按任务各存一份（useTaskCode），挑战页“清空”不再清掉教程的代码；
  提交列表“复制到编辑器”对挑战写入该任务自己的代码
- 抽出 utils/code.ts（整理代码、拆分整页 HTML）；删除 RandomRatingModal、ExternalAIPanel

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

client/src/components/ai/ExternalAIPanel.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="external-panel">
-    <div class="content-area">
-      <div class="field-label">提示词</div>
-      <n-input
-        v-model:value="promptText"
-        type="textarea"
-        :autosize="{ minRows: 3, maxRows: 8 }"
-        placeholder="粘贴你发给外部 AI 的提示词..."
-      />
-      <div class="code-field">
-        <div class="field-label" style="margin-top: 12px">完整的代码</div>
-        <n-input
-          v-model:value="rawCode"
-          type="textarea"
-          class="code-input"
-          placeholder="粘贴完整的前端代码..."
-        />
-      </div>
-      <div v-if="splitResult" class="split-result">
-        <n-tag size="small" type="success"
-          >HTML · {{ splitResult.html.length }} 字符</n-tag
-        >
-        <n-tag size="small" type="info"
-          >CSS · {{ splitResult.css.length }} 字符</n-tag
-        >
-        <n-tag size="small" type="warning"
-          >JS · {{ splitResult.js.length }} 字符</n-tag
-        >
-      </div>
-    </div>
-    <div class="action-bar">
-      <n-button :disabled="!rawCode.trim()" @click="applyPreview"
-        >应用预览</n-button
-      >
-      <n-button
-        type="primary"
-        :disabled="!splitResult || !promptText.trim()"
-        :loading="submitting"
-        @click="submit"
-      >
-        提交
-      </n-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue"
-import { useMessage } from "naive-ui"
-import { html, css, js } from "../../store/editors"
-import { Submission } from "../../api"
-
-const props = defineProps<{ taskId: number }>()
-const emit = defineEmits<{
-  submitted: []
-}>()
-const message = useMessage()
-
-const promptText = ref("")
-const rawCode = ref("")
-const splitResult = ref<{ html: string; css: string; js: string } | null>(null)
-const submitting = ref(false)
-
-watch(rawCode, () => {
-  splitResult.value = null
-})
-
-function splitHtml(raw: string): { html: string; css: string; js: string } {
-  let result = raw
-  const cssBlocks: string[] = []
-  const jsBlocks: string[] = []
-
-  result = result.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, content) => {
-    cssBlocks.push(content.trim())
-    return ""
-  })
-  result = result.replace(
-    /<script(?![^>]*\bsrc\b)[^>]*>([\s\S]*?)<\/script>/gi,
-    (_, content) => {
-      jsBlocks.push(content.trim())
-      return ""
-    },
-  )
-
-  return {
-    html: result.trim(),
-    css: cssBlocks.join("\n\n"),
-    js: jsBlocks.join("\n\n"),
-  }
-}
-
-function applyPreview() {
-  const result = splitHtml(rawCode.value)
-  splitResult.value = result
-  html.value = result.html
-  css.value = result.css
-  js.value = result.js
-}
-
-async function submit() {
-  if (!splitResult.value) return
-  submitting.value = true
-  try {
-    await Submission.create(props.taskId, {
-      html: splitResult.value.html,
-      css: splitResult.value.css,
-      js: splitResult.value.js,
-      prompt: promptText.value.trim(),
-    })
-    emit("submitted")
-    message.success("提交成功")
-    promptText.value = ""
-    rawCode.value = ""
-    splitResult.value = null
-  } catch {
-    message.error("提交失败，请重试")
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<style scoped>
-.external-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.content-area {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-}
-
-.code-field {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.code-input {
-  flex: 1;
-  min-height: 0;
-}
-
-.code-input :deep(.n-input__textarea) {
-  height: 100%;
-}
-
-.code-input :deep(.n-input__textarea-el) {
-  height: 100%;
-  resize: none;
-}
-
-.field-label {
-  font-size: 12px;
-  font-weight: bold;
-  color: #666;
-  margin-bottom: 6px;
-}
-
-.split-result {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  flex-wrap: wrap;
-}
-
-.action-bar {
-  padding: 12px;
-  border-top: 1px solid #e0e0e0;
-  display: flex;
-  justify-content: space-between;
-}
-</style>

client/src/components/ai/PromptHistoryPanel.vue

@@ -70,9 +70,9 @@
               </n-tag>
               <n-tag
                 size="small"
-                :type="item.source === 'manual' ? 'info' : 'success'"
+                :type="item.source === 'edit' ? 'warning' : item.source === 'manual' ? 'info' : 'success'"
               >
-                {{ item.source === "manual" ? "手动提交" : "AI 对话" }}
+                {{ sourceLabel(item.source) }}
               </n-tag>
             </n-flex>
             <n-flex align="center" :wrap="false" :size="4">
@@ -133,6 +133,7 @@ import { onMounted, ref, watch } from "vue"
 import { Icon } from "../../icons"
 import { useMessage } from "naive-ui"
 import { renderMarkdown } from "../../utils/markdown"
+import { sourceLabel } from "../../utils/helper"
 import { Prompt } from "../../api"
 import type { PromptHistoryItem } from "../../utils/type"
 import { parseTime } from "../../utils/helper"

client/src/components/ai/PromptPanel.vue

@@ -18,8 +18,15 @@
         </button>
 
         <!-- User message -->
-        <div class="message user">
-          <div class="message-role">我</div>
+        <div v-if="pair.userMsg.source === 'edit'" class="message note">
+          你手动修改了代码
+        </div>
+        <div v-else class="message user">
+          <div class="message-role">
+            我<span v-if="pair.userMsg.source === 'manual'" class="role-tag">
+              用外部 AI</span
+            >
+          </div>
           <div
             class="message-content"
             v-html="renderContent(pair.userMsg)"
@@ -28,23 +35,16 @@
 
         <!-- Assistant message -->
         <div v-if="pair.assistantMsg" class="message assistant">
-          <div class="message-role">AI</div>
-          <div
-            class="message-content"
-            v-html="renderContent(pair.assistantMsg)"
-          ></div>
-          <div
-            v-if="allowSubmit && hasCode(pair.assistantMsg)"
-            class="message-actions"
-          >
-            <n-button
-              size="tiny"
-              :disabled="pair.assistantMsg.submitted"
-              :loading="submittingId === pair.assistantMsg.id"
-              @click="submitVersion(pair.assistantMsg)"
-            >
-              {{ pair.assistantMsg.submitted ? "已提交" : "提交此版本" }}
-            </n-button>
+          <template v-if="pair.assistantMsg.source === 'conversation' || !pair.assistantMsg.source">
+            <div class="message-role">AI</div>
+            <div
+              class="message-content"
+              v-html="renderContent(pair.assistantMsg)"
+            ></div>
+          </template>
+          <div v-if="versionOf(pair.assistantMsg)" class="version-line">
+            <span class="version-chip">v{{ versionOf(pair.assistantMsg) }}</span>
+            <span v-if="pair.assistantMsg.submitted">已提交</span>
           </div>
         </div>
       </div>
@@ -62,6 +62,7 @@
         ></div>
         <div class="streaming-hint">AI 正在生成中…</div>
       </div>
+      <RatingCard v-if="rating" :active="streaming" />
     </div>
     <GuidancePanel @generate="onGuidanceGenerate" />
     <div class="input-area">
@@ -80,18 +81,22 @@
           style="flex: 1; min-width: 0"
           @keydown.enter.exact.prevent="send"
         />
-        <n-button
-          secondary
-          :disabled="!input.trim() || !connected || !currentTaskId || streaming"
-          style="flex-shrink: 0"
-          title="调教提示词"
-          aria-label="调教提示词"
-          @click="startGuidance"
-        >
-          <template #icon>
-            <Icon icon="lucide:lightbulb" :width="16" />
+        <n-tooltip>
+          <template #trigger>
+            <n-button
+              secondary
+              :disabled="!input.trim() || !connected || !currentTaskId || streaming"
+              style="flex-shrink: 0"
+              @click="startGuidance"
+            >
+              <template #icon>
+                <Icon icon="lucide:lightbulb" :width="16" />
+              </template>
+              帮我写清楚
+            </n-button>
           </template>
-        </n-button>
+          AI 教练会问你几个问题，帮你把想要的效果描述清楚
+        </n-tooltip>
       </n-flex>
       <n-flex justify="flex-end" align="center" style="margin-top: 8px">
         <n-select
@@ -122,6 +127,7 @@ import { useStorage } from "@vueuse/core"
 import { useMessage } from "naive-ui"
 import { Icon } from "../../icons"
 import GuidancePanel from "./GuidancePanel.vue"
+import RatingCard from "../workbench/RatingCard.vue"
 import { openGuidance } from "../../store/guidance"
 import {
   messages,
@@ -132,14 +138,19 @@ import {
   stopPrompt,
   currentTaskId,
   removeMessagePair,
-  markMessageSubmitted,
+  type PromptMessage,
 } from "../../store/prompt"
-import { Prompt, Submission } from "../../api"
+import { Prompt } from "../../api"
 import { renderMarkdown } from "../../utils/markdown"
 
-const { allowSubmit = true } = defineProps<{ allowSubmit?: boolean }>()
+const props = defineProps<{
+  // 发送前调用：工作台用它把还没存的手改先存成版本，AI 才会在手改后的代码上继续改
+  beforeSend?: () => Promise<void>
+  // AI 生成时在对话里显示同学作品让学生打分（挑战页才有）
+  rating?: boolean
+}>()
 
-const emit = defineEmits<{ deleted: []; submitted: [] }>()
+const emit = defineEmits<{ deleted: [] }>()
 
 const input = ref("")
 const messagesRef = ref<HTMLElement>()
@@ -156,18 +167,11 @@ if (!modelOptions.some((o) => o.value === selectedModel.value)) {
 }
 
 // Group messages into user+assistant pairs
-const submittingId = ref<number | null>(null)
 
 const pairs = computed(() => {
   const result: Array<{
-    userMsg: { role: string; content: string; id?: number }
-    assistantMsg: {
-      role: string
-      content: string
-      id?: number
-      code?: any
-      submitted?: boolean
-    } | null
+    userMsg: PromptMessage
+    assistantMsg: PromptMessage | null
     index: number
   }> = []
   const msgs = messages.value
@@ -190,30 +194,17 @@ function hasCode(msg: { code?: any } | null): boolean {
   return !!(msg.code.html || msg.code.css || msg.code.js)
 }
 
-async function submitVersion(msg: {
-  id?: number
-  code?: { html: string | null; css: string | null; js: string | null }
-}) {
-  if (!msg.id || !msg.code || !currentTaskId.value) return
-  submittingId.value = msg.id
-  try {
-    await Submission.create(
-      currentTaskId.value,
-      {
-        html: msg.code.html ?? "",
-        css: msg.code.css ?? "",
-        js: msg.code.js ?? "",
-      },
-      msg.id,
-    )
-    markMessageSubmitted(msg.id)
-    naiveMessage.success("提交成功")
-    emit("submitted")
-  } catch {
-    naiveMessage.error("提交失败，请重试")
-  } finally {
-    submittingId.value = null
+// 带代码的 AI 回复就是一个版本，按出现顺序编号（和工作台底部的版本条一致）
+const versionNumbers = computed(() => {
+  const map = new Map<number, number>()
+  for (const m of messages.value) {
+    if (m.role === "assistant" && m.id && hasCode(m)) map.set(m.id, map.size + 1)
   }
+  return map
+})
+
+function versionOf(msg: { id?: number }) {
+  return msg.id ? versionNumbers.value.get(msg.id) : undefined
 }
 
 async function deletePair(assistantMsgId: number) {
@@ -227,11 +218,12 @@ async function deletePair(assistantMsgId: number) {
   }
 }
 
-function send() {
+async function send() {
   const text = input.value.trim()
   if (!text || streaming.value) return
-  sendPrompt(text, selectedModel.value)
   input.value = ""
+  await props.beforeSend?.()
+  sendPrompt(text, selectedModel.value)
 }
 
 function startGuidance() {
@@ -240,9 +232,10 @@ function startGuidance() {
   openGuidance(currentTaskId.value, text)
 }
 
-function onGuidanceGenerate(finalPrompt: string) {
-  sendPrompt(finalPrompt, selectedModel.value)
+async function onGuidanceGenerate(finalPrompt: string) {
   input.value = ""
+  await props.beforeSend?.()
+  sendPrompt(finalPrompt, selectedModel.value)
 }
 
 function renderContent(msg: { role: string; content: string }): string {
@@ -297,6 +290,36 @@ watch([() => messages.value.length, streamingContent], () => {
   line-height: 1.6;
 }
 
+/* 手改代码这类不是对话的一行说明 */
+.message.note {
+  font-size: 12px;
+  color: var(--wp-muted);
+  text-align: center;
+}
+
+.role-tag {
+  margin-left: 6px;
+  font-weight: normal;
+  color: var(--wp-muted);
+}
+
+.version-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--wp-muted);
+}
+
+.version-chip {
+  padding: 0 7px;
+  border: 1px solid var(--wp-brand);
+  border-radius: 4px;
+  color: var(--wp-brand);
+  font: 600 12px/18px var(--wp-font-mono);
+}
+
 .message-content :deep(pre) {
   background: #f5f5f5;
   padding: 8px 12px;

client/src/components/ai/RandomRatingModal.vue

@@ -1,144 +0,0 @@
-<template>
-  <n-modal
-    preset="card"
-    :show="show"
-    title="等待 AI 回复时，给同学的作品打个分吧"
-    style="width: 90vw; max-width: 960px"
-    @update:show="onUpdateShow"
-  >
-    <n-text
-      v-if="current"
-      depth="3"
-      style="font-size: 12px; display: block; margin-bottom: 8px"
-    >
-      {{ current.task_title }} · 提交者 {{ current.username }}
-    </n-text>
-    <div class="preview-wrapper">
-      <iframe
-        class="preview-iframe"
-        :sandbox="PREVIEW_SANDBOX"
-        :srcdoc="previewContent"
-      ></iframe>
-    </div>
-    <div class="rate-row">
-      <n-rate
-        v-if="current"
-        :key="current.submission_id"
-        :size="32"
-        @update:value="onRate"
-      />
-    </div>
-    <n-text
-      depth="3"
-      style="font-size: 11px; display: block; text-align: center; margin-top: 8px"
-    >
-      打分后自动换下一个作品；AI 回复完成后弹窗会自动关闭
-    </n-text>
-  </n-modal>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onUnmounted } from "vue"
-import { useMessage } from "naive-ui"
-import { Submission } from "../../api"
-import { streaming } from "../../store/prompt"
-import {
-  buildPreviewDocument,
-  PREVIEW_SANDBOX,
-} from "../../utils/previewDocument"
-import type { RandomRatingItem } from "../../utils/type"
-
-const message = useMessage()
-
-const show = ref(false)
-const current = ref<RandomRatingItem | null>(null)
-const previewContent = ref("")
-let reshowTimer: ReturnType<typeof setTimeout> | null = null
-
-function clearReshowTimer() {
-  if (reshowTimer !== null) {
-    clearTimeout(reshowTimer)
-    reshowTimer = null
-  }
-}
-
-async function fetchAndShow() {
-  try {
-    const item = await Submission.randomForRating(current.value?.submission_id)
-    // 请求期间 AI 已经回复完了，就不要再弹出来
-    if (!streaming.value) return
-    if (item) {
-      current.value = item
-      previewContent.value = buildPreviewDocument({
-        html: item.html ?? "",
-        css: item.css ?? "",
-        js: item.js ?? "",
-      })
-      show.value = true
-    } else {
-      show.value = false
-    }
-  } catch (err: any) {
-    message.error(err.response?.data?.detail ?? "获取作品失败，请重试")
-  }
-}
-
-async function onRate(score: number) {
-  if (!current.value) return
-  try {
-    await Submission.updateScore(current.value.submission_id, score)
-    message.success("感谢评分！")
-    await fetchAndShow()
-  } catch (err: any) {
-    message.error(err.response?.data?.detail ?? "打分失败，请重试")
-  }
-}
-
-function onUpdateShow(value: boolean) {
-  show.value = value
-  if (!value) {
-    clearReshowTimer()
-    if (streaming.value) {
-      reshowTimer = setTimeout(fetchAndShow, 30_000)
-    }
-  }
-}
-
-watch(
-  streaming,
-  (val) => {
-    clearReshowTimer()
-    if (val) {
-      fetchAndShow()
-    } else {
-      show.value = false
-    }
-  },
-  { immediate: true },
-)
-
-onUnmounted(() => {
-  clearReshowTimer()
-})
-</script>
-
-<style scoped>
-.preview-wrapper {
-  height: 70vh;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.preview-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.rate-row {
-  display: flex;
-  justify-content: center;
-  padding: 16px 0;
-}
-</style>

client/src/components/editor/Editors.vue

@@ -70,6 +70,7 @@ import Editor from "./Editor.vue"
 import Toolbar from "./Toolbar.vue"
 import { html, css, js, tab, size, reset } from "../../store/editors"
 import { taskId } from "../../store/task"
+import { formatCode } from "../../utils/code"
 import { Submission } from "../../api"
 import { NCode, useDialog, useMessage } from "naive-ui"
 import { h, ref } from "vue"
@@ -86,43 +87,16 @@ function changeSize(num: number) {
   size.value = num
 }
 
-async function formatCode() {
-  // prettier 加上各语言插件近 1MB，只在点“格式化”时才加载
-  const [prettier, htmlParser, cssParser, babelParser, estreeParser] =
-    await Promise.all([
-      import("prettier/standalone"),
-      import("prettier/parser-html"),
-      import("prettier/parser-postcss"),
-      import("prettier/parser-babel"),
-      import("prettier/plugins/estree"),
-    ])
-  const [htmlFormatted, cssFormatted, jsFormatted] = await Promise.all([
-    prettier.format(html.value, {
-      parser: "html",
-      //@ts-ignore
-      plugins: [htmlParser, babelParser, estreeParser, cssParser],
-      tabWidth: 4,
-    }),
-    prettier.format(css.value, {
-      parser: "css",
-      plugins: [cssParser],
-      tabWidth: 4,
-    }),
-    prettier.format(js.value, {
-      parser: "babel",
-      //@ts-ignore
-      plugins: [babelParser, estreeParser],
-      tabWidth: 2,
-    }),
-  ])
-  html.value = htmlFormatted
-  css.value = cssFormatted
-  js.value = jsFormatted
+async function formatEditors() {
+  const out = await formatCode({ html: html.value, css: css.value, js: js.value })
+  html.value = out.html
+  css.value = out.css
+  js.value = out.js
 }
 
 async function format() {
   try {
-    await formatCode()
+    await formatEditors()
   } catch (err: any) {
     dialog.error({
       title: "格式化失败",
@@ -148,7 +122,7 @@ async function doSubmit() {
 async function formatAndSubmit() {
   submitLoading.value = true
   try {
-    await formatCode()
+    await formatEditors()
     await doSubmit()
   } catch (err: any) {
     dialog.warning({
@@ -180,41 +154,6 @@ async function formatAndSubmit() {
   font-size: 16px;
 }
 
-/* HTML / CSS / JS 各有固定颜色，见 theme.ts */
-.lang-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--wp-font-mono);
-  font-weight: 600;
-  font-size: 13px;
-}
-.lang-tab.lang-html::before,
-.lang-tab.lang-css::before,
-.lang-tab.lang-js::before {
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-.lang-html {
-  color: var(--wp-html);
-}
-.lang-html::before {
-  background: var(--wp-html);
-}
-.lang-css {
-  color: var(--wp-css);
-}
-.lang-css::before {
-  background: var(--wp-css);
-}
-.lang-js {
-  color: var(--wp-js);
-}
-.lang-js::before {
-  background: var(--wp-js);
-}
 
 :deep(.n-tabs-nav .n-tabs-tab[data-name="html"]) {
   background-color: var(--wp-html-soft) !important;

client/src/components/editor/Preview.vue

@@ -1,7 +1,7 @@
 <template>
   <n-flex align="center" justify="space-between" class="title">
     <div>
-      <n-text class="titleText">预览</n-text>
+      <slot name="title"><n-text class="titleText">预览</n-text></slot>
       <n-text v-if="!!submission.id" depth="3">
         ({{ submission.view_count || 0 }})
       </n-text>
@@ -214,9 +214,11 @@ onUnmounted(listenPreviewStorage(window, () => frame.value, storageScope))
 <style scoped>
 .title {
   height: 43px;
-  padding: 0 20px;
-  border-bottom: 1px solid rgb(239, 239, 245);
+  padding: 0 12px 0 16px;
+  border-bottom: 1px solid var(--wp-line);
+  background: var(--wp-surface);
   box-sizing: border-box;
+  flex-wrap: nowrap !important;
 }
 
 .titleText {
@@ -225,7 +227,8 @@ onUnmounted(listenPreviewStorage(window, () => frame.value, storageScope))
 
 .iframe-wrapper {
   width: 100%;
-  height: 100%;
+  /* 减去上面标题栏的高度，否则底部 43px 会被裁掉 */
+  height: calc(100% - 43px);
   margin: 0 auto;
   transition: max-width 0.3s ease;
   overflow: hidden;

client/src/components/submissions/ChainModal.vue

@@ -160,9 +160,7 @@
                       fontWeight: 500,
                       whiteSpace: 'nowrap',
                     }"
-                    >{{
-                      round.source === "conversation" ? "对话" : "手动"
-                    }}</span
+                    >{{ sourceLabel(round.source) }}</span
                   >
                   <span
                     v-if="round.prompt_level"
@@ -241,6 +239,7 @@ import { computed, ref, watch } from "vue"
 import { NPopconfirm, NButton, useMessage } from "naive-ui"
 import { Icon } from "../../icons"
 import { renderMarkdown } from "../../utils/markdown"
+import { sourceLabel } from "../../utils/helper"
 import { storageShim } from "../../utils/previewStorage"
 import { Prompt, Submission } from "../../api"
 import type { PromptRound } from "../../utils/type"

client/src/components/workbench/CodeTabs.vue

@@ -0,0 +1,83 @@
+<template>
+  <n-tabs
+    v-model:value="tab"
+    type="card"
+    size="small"
+    class="code-tabs"
+    :class="`tab-active-${tab}`"
+    pane-class="code-pane"
+  >
+    <template #prefix><slot name="prefix" /></template>
+    <n-tab-pane name="html">
+      <template #tab><span class="lang-tab lang-html">HTML</span></template>
+      <Editor v-model:value="code.html" :font-size="size" language="html" />
+    </n-tab-pane>
+    <n-tab-pane name="css">
+      <template #tab><span class="lang-tab lang-css">CSS</span></template>
+      <Editor v-model:value="code.css" :font-size="size" language="css" />
+    </n-tab-pane>
+    <n-tab-pane name="js">
+      <template #tab><span class="lang-tab lang-js">JS</span></template>
+      <Editor v-model:value="code.js" :font-size="size" language="js" />
+    </n-tab-pane>
+    <template #suffix>
+      <n-flex align="center" :wrap="false" :size="4" class="suffix">
+        <n-dropdown :options="sizeOptions" @select="(v: number) => (size = v)">
+          <n-button quaternary size="small">字号 {{ size }}</n-button>
+        </n-dropdown>
+        <slot name="suffix" />
+      </n-flex>
+    </template>
+  </n-tabs>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue"
+import Editor from "../editor/Editor.vue"
+import { size } from "../../store/editors"
+import type { Code } from "../../utils/code"
+
+// 直接改传进来的响应式对象，工作台按任务保存它
+defineProps<{ code: Code }>()
+
+const tab = ref<"html" | "css" | "js">("html")
+const sizeOptions = [12, 14, 16, 18, 20, 24, 28, 32].map((n) => ({
+  label: `${n}`,
+  key: n,
+}))
+</script>
+<style scoped>
+.code-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-tabs :deep(.n-tabs-pane-wrapper) {
+  flex: 1;
+  min-height: 0;
+}
+
+.code-tabs :deep(.code-pane) {
+  height: 100%;
+  padding: 0;
+  overflow: auto;
+}
+
+.code-tabs :deep(.n-tabs-nav) {
+  background: var(--wp-surface);
+}
+
+.code-tabs :deep(.n-tabs-tab[data-name="html"]) {
+  background-color: var(--wp-html-soft) !important;
+}
+.code-tabs :deep(.n-tabs-tab[data-name="css"]) {
+  background-color: var(--wp-css-soft) !important;
+}
+.code-tabs :deep(.n-tabs-tab[data-name="js"]) {
+  background-color: var(--wp-js-soft) !important;
+}
+
+.suffix {
+  padding-right: 8px;
+}
+</style>

client/src/components/workbench/PasteCodeModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <n-modal
+    v-model:show="show"
+    preset="card"
+    title="粘贴外部 AI 生成的代码"
+    style="width: 640px; max-width: 94vw"
+  >
+    <n-form-item label="你在外部 AI 里用的提示词" :show-feedback="false">
+      <n-input
+        v-model:value="prompt"
+        type="textarea"
+        :autosize="{ minRows: 2, maxRows: 6 }"
+        placeholder="把你发给豆包、DeepSeek 等 AI 的话粘贴到这里"
+      />
+    </n-form-item>
+    <n-form-item label="完整的网页代码" :show-feedback="false" style="margin-top: 12px">
+      <n-input
+        v-model:value="raw"
+        type="textarea"
+        :autosize="{ minRows: 8, maxRows: 16 }"
+        placeholder="粘贴整页 HTML，里面的 <style> 和 <script> 会自动拆到 CSS 和 JS"
+        class="code-input"
+      />
+    </n-form-item>
+    <n-text depth="3" class="hint">
+      保存后会成为一个新版本，提示词会记进你的提示词记录里。
+    </n-text>
+    <template #footer>
+      <n-flex justify="end">
+        <n-button @click="show = false">取消</n-button>
+        <n-button
+          type="primary"
+          :disabled="!prompt.trim() || !raw.trim()"
+          :loading="saving"
+          @click="save"
+        >
+          存为新版本
+        </n-button>
+      </n-flex>
+    </template>
+  </n-modal>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue"
+import { splitHtml, type Code } from "../../utils/code"
+
+const show = defineModel<boolean>("show", { required: true })
+const props = defineProps<{
+  onSave: (prompt: string, code: Code) => Promise<void>
+}>()
+
+const prompt = ref("")
+const raw = ref("")
+const saving = ref(false)
+
+async function save() {
+  saving.value = true
+  try {
+    await props.onSave(prompt.value.trim(), splitHtml(raw.value))
+    prompt.value = ""
+    raw.value = ""
+    show.value = false
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+<style scoped>
+.code-input :deep(textarea) {
+  font-family: var(--wp-font-mono);
+  font-size: 13px;
+}
+
+.hint {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+}
+</style>

client/src/components/workbench/RatingCard.vue

@@ -0,0 +1,257 @@
+<template>
+  <div v-if="current || revealed" class="rating-card">
+    <div class="head">
+      <span>等 AI 的时候，给同学的作品打个分</span>
+      <n-button v-if="current" text size="tiny" @click="next(true)">跳过</n-button>
+    </div>
+    <div v-if="revealed" class="revealed">
+      刚才那份是 <b>{{ revealed }}</b> 的作品，谢谢你的评分
+    </div>
+    <div v-else-if="current" class="body">
+      <button class="thumb" title="点击放大看" @click="showLarge = true">
+        <iframe
+          :sandbox="PREVIEW_SANDBOX"
+          :srcdoc="doc"
+          tabindex="-1"
+          loading="lazy"
+        ></iframe>
+      </button>
+      <div class="info">
+        <div class="task">{{ current.task_title }}</div>
+        <div class="rates">
+          <n-tooltip v-for="s in scores" :key="s.value">
+            <template #trigger>
+              <button class="rate" :disabled="rating" @click="rate(s.value)">
+                {{ s.value }}
+              </button>
+            </template>
+            {{ s.value }} 分：{{ s.label }}
+          </n-tooltip>
+        </div>
+        <div class="legend">1 没完成 · 3 基本完成 · 5 完成且有自己的想法</div>
+      </div>
+    </div>
+  </div>
+  <n-modal
+    v-model:show="showLarge"
+    preset="card"
+    :title="current ? `同学的作品 · ${current.task_title}` : '同学的作品'"
+    style="width: 90vw; max-width: 1000px"
+  >
+    <div class="large">
+      <iframe :sandbox="PREVIEW_SANDBOX" :srcdoc="doc"></iframe>
+    </div>
+    <div class="large-rates">
+      <button
+        v-for="s in scores"
+        :key="s.value"
+        class="rate wide"
+        :disabled="rating"
+        @click="rate(s.value)"
+      >
+        <b>{{ s.value }}</b> {{ s.label }}
+      </button>
+    </div>
+  </n-modal>
+</template>
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue"
+import { useMessage } from "naive-ui"
+import { Submission } from "../../api"
+import { buildPreviewDocument, PREVIEW_SANDBOX } from "../../utils/previewDocument"
+import type { RandomRatingItem } from "../../utils/type"
+
+// AI 生成期间在对话里显示一份同学的作品让学生打分。打分前不显示作者，减少给熟人打高分
+const props = defineProps<{ active: boolean }>()
+const message = useMessage()
+
+const scores = [
+  { value: 1, label: "没完成题目要求" },
+  { value: 2, label: "完成了一小部分" },
+  { value: 3, label: "基本完成" },
+  { value: 4, label: "完成得不错" },
+  { value: 5, label: "完成且有自己的想法" },
+]
+
+const current = ref<RandomRatingItem | null>(null)
+const revealed = ref("")
+const rating = ref(false)
+const showLarge = ref(false)
+let seq = 0
+
+const doc = computed(() =>
+  current.value
+    ? buildPreviewDocument({
+        html: current.value.html ?? "",
+        css: current.value.css ?? "",
+        js: current.value.js ?? "",
+      })
+    : "",
+)
+
+async function next(skip = false) {
+  const s = ++seq
+  const exclude = skip ? current.value?.submission_id : undefined
+  try {
+    const item = await Submission.randomForRating(exclude)
+    // 请求期间 AI 已经回复完了，就不要再显示
+    if (s !== seq || !props.active) return
+    current.value = item
+  } catch {
+    if (s === seq) current.value = null
+  }
+}
+
+async function rate(score: number) {
+  if (!current.value) return
+  rating.value = true
+  try {
+    await Submission.updateScore(current.value.submission_id, score)
+    revealed.value = current.value.username
+    current.value = null
+    showLarge.value = false
+    setTimeout(() => {
+      revealed.value = ""
+      if (props.active) next()
+    }, 1800)
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "打分失败，请重试")
+  } finally {
+    rating.value = false
+  }
+}
+
+watch(
+  () => props.active,
+  (active) => {
+    if (active) next()
+    else {
+      seq++
+      current.value = null
+      revealed.value = ""
+      showLarge.value = false
+    }
+  },
+  { immediate: true },
+)
+</script>
+<style scoped>
+.rating-card {
+  margin: 4px 0 16px;
+  padding: 10px 12px;
+  border: 1px solid var(--wp-line);
+  border-radius: 8px;
+  background: var(--wp-surface);
+}
+
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--wp-muted);
+  margin-bottom: 8px;
+}
+
+.body {
+  display: grid;
+  grid-template-columns: 132px 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.thumb {
+  position: relative;
+  width: 132px;
+  height: 84px;
+  padding: 0;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: zoom-in;
+  background: #fff;
+}
+
+/* 按 4 倍大小渲染再缩小，看起来像网页缩略图 */
+.thumb iframe {
+  width: 528px;
+  height: 336px;
+  border: 0;
+  transform: scale(0.25);
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.task {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.rates {
+  display: flex;
+  gap: 6px;
+}
+
+.rate {
+  min-width: 32px;
+  padding: 4px 0;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  background: var(--wp-surface);
+  color: var(--wp-ink);
+  font: 600 13px var(--wp-font-mono);
+  cursor: pointer;
+}
+
+.rate:hover:not(:disabled) {
+  border-color: var(--wp-brand);
+  background: var(--wp-brand-soft);
+  color: var(--wp-brand);
+}
+
+.rate:focus-visible {
+  outline: 2px solid var(--wp-brand);
+  outline-offset: 1px;
+}
+
+.legend {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--wp-faint);
+}
+
+.revealed {
+  font-size: 13px;
+  color: var(--wp-muted);
+}
+
+.large {
+  height: 65vh;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.large iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.large-rates {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.rate.wide {
+  flex: 1;
+  padding: 8px;
+  font: 13px var(--wp-font-sans);
+}
+
+.rate.wide b {
+  font-family: var(--wp-font-mono);
+  margin-right: 4px;
+}
+</style>

client/src/components/workbench/VersionBar.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="version-bar">
+    <span class="label">版本</span>
+    <div class="chips">
+      <span v-if="!versions.length" class="empty">
+        还没有版本：让 AI 生成，或者在“代码”里自己写
+      </span>
+      <n-tooltip v-for="v in versions" :key="v.id">
+        <template #trigger>
+          <button
+            :class="['chip', { on: v.id === selectedId && !modified }]"
+            @click="emit('select', v.id)"
+          >
+            v{{ v.n }}
+            <span v-if="v.source === 'edit'" class="src">手改</span>
+            <span v-else-if="v.source === 'manual'" class="src">外部</span>
+            <Icon v-if="v.submitted" icon="lucide:check" :width="12" class="ok" />
+          </button>
+        </template>
+        {{ describe(v) }}
+      </n-tooltip>
+      <span v-if="modified" class="chip on draft">当前修改</span>
+    </div>
+    <n-button quaternary size="small" @click="emit('history')">全部历史</n-button>
+    <template v-if="kind === 'challenge'">
+      <span v-if="submittedLabel" class="hint">{{ submittedLabel }}</span>
+      <n-button
+        type="primary"
+        size="small"
+        :disabled="!canSubmit || selectedSubmitted"
+        :loading="busy"
+        @click="emit('submit')"
+      >
+        {{ modified ? "交当前修改" : selectedSubmitted ? "已交这一版" : "交这一版" }}
+      </n-button>
+    </template>
+    <n-button
+      v-else
+      type="primary"
+      size="small"
+      :disabled="!canSubmit"
+      :loading="busy"
+      @click="emit('submit')"
+    >
+      保存作品
+    </n-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue"
+import { Icon } from "../../icons"
+
+export interface VersionItem {
+  id: number
+  n: number
+  source: string
+  submitted: boolean
+}
+
+const props = defineProps<{
+  kind: "challenge" | "creation"
+  versions: VersionItem[]
+  selectedId: number | null
+  modified: boolean
+  canSubmit: boolean
+  busy: boolean
+}>()
+const emit = defineEmits<{ select: [id: number]; submit: []; history: [] }>()
+
+const selectedSubmitted = computed(
+  () =>
+    !props.modified &&
+    !!props.versions.find((v) => v.id === props.selectedId)?.submitted,
+)
+
+const submittedLabel = computed(() => {
+  const done = props.versions.filter((v) => v.submitted).map((v) => `v${v.n}`)
+  if (done.length > 3) return `已交 ${done.length} 个版本`
+  return done.length ? `已交 ${done.join("、")}` : ""
+})
+
+function describe(v: VersionItem) {
+  const from =
+    v.source === "edit" ? "你手改的" : v.source === "manual" ? "外部 AI 生成的" : "AI 生成的"
+  return `${from}第 ${v.n} 版${v.submitted ? "，已提交" : ""}，点击查看`
+}
+</script>
+<style scoped>
+.version-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--wp-line);
+  background: var(--wp-surface);
+  min-width: 0;
+}
+
+.label {
+  font-size: 12px;
+  color: var(--wp-muted);
+  flex: none;
+}
+
+.chips {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.chip {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 9px;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  background: var(--wp-surface);
+  color: var(--wp-ink);
+  font: 12px/20px var(--wp-font-mono);
+  cursor: pointer;
+}
+
+.chip:hover {
+  border-color: var(--wp-brand);
+}
+
+.chip.on {
+  border-color: var(--wp-brand);
+  color: var(--wp-brand);
+  font-weight: 600;
+}
+
+.chip.draft {
+  cursor: default;
+  border-style: dashed;
+  font-family: var(--wp-font-sans);
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--wp-brand);
+  outline-offset: 1px;
+}
+
+.src {
+  font-family: var(--wp-font-sans);
+  font-size: 11px;
+  color: var(--wp-muted);
+}
+
+.ok {
+  color: var(--wp-brand);
+}
+
+.empty,
+.hint {
+  font-size: 12px;
+  color: var(--wp-faint);
+  white-space: nowrap;
+}
+</style>

client/src/components/workbench/Workbench.vue

@@ -0,0 +1,474 @@
+<template>
+  <n-split
+    class="workbench"
+    :default-size="0.38"
+    min="360px"
+    :max="0.62"
+  >
+    <template #1>
+      <div class="left">
+        <div class="left-head">
+          <n-tooltip>
+            <template #trigger>
+              <n-button text @click="$router.push(backTo)">
+                <Icon icon="lucide:arrow-left" :width="18" />
+              </n-button>
+            </template>
+            {{ backLabel }}
+          </n-tooltip>
+          <span class="title">{{ title }}</span>
+          <slot name="badges" />
+          <span class="spacer"></span>
+          <slot name="tools" />
+        </div>
+        <div v-if="$slots.brief" class="brief">
+          <button class="brief-toggle" @click="briefOpen = !briefOpen">
+            <b>{{ briefLabel }}</b>
+            <span>{{ briefOpen ? "收起" : "展开" }}</span>
+          </button>
+          <div v-show="briefOpen" class="brief-body">
+            <slot name="brief" />
+          </div>
+        </div>
+        <PromptPanel
+          class="chat"
+          :before-send="beforeSend"
+          :rating="kind === 'challenge'"
+          @deleted="historyKey++"
+        />
+      </div>
+    </template>
+    <template #2>
+      <div class="right">
+        <div class="right-body">
+          <div v-if="mode === 'preview'" class="preview-only">
+            <Preview
+              :html="code.html"
+              :css="code.css"
+              :js="code.js"
+              :asset-base-url="assetBaseUrl"
+              :storage-task-id="taskId"
+            >
+              <template #title>
+                <n-radio-group v-model:value="mode" size="small">
+                  <n-radio-button value="preview">预览</n-radio-button>
+                  <n-radio-button value="code">代码</n-radio-button>
+                </n-radio-group>
+              </template>
+            </Preview>
+          </div>
+          <n-split v-else direction="vertical" :default-size="0.55" min="160px" max="0.8">
+            <template #1>
+              <CodeTabs :code="code">
+                <template #prefix>
+                  <n-radio-group v-model:value="mode" size="small" class="mode">
+                    <n-radio-button value="preview">预览</n-radio-button>
+                    <n-radio-button value="code">代码</n-radio-button>
+                  </n-radio-group>
+                </template>
+                <template #suffix>
+                  <n-button quaternary size="small" @click="format">整理代码</n-button>
+                  <n-button quaternary size="small" @click="showPaste = true">
+                    粘贴外部代码
+                  </n-button>
+                  <n-button quaternary size="small" @click="clear">清空</n-button>
+                </template>
+              </CodeTabs>
+            </template>
+            <template #2>
+              <div class="preview-only">
+                <Preview
+                  :html="code.html"
+                  :css="code.css"
+                  :js="code.js"
+                  :asset-base-url="assetBaseUrl"
+                  :storage-task-id="taskId"
+                />
+              </div>
+            </template>
+          </n-split>
+        </div>
+        <VersionBar
+          :kind="kind"
+          :versions="versions"
+          :selected-id="selectedId"
+          :modified="modified"
+          :can-submit="canSubmit"
+          :busy="busy"
+          @select="select"
+          @submit="submit"
+          @history="openHistory"
+        />
+      </div>
+    </template>
+  </n-split>
+  <PasteCodeModal v-model:show="showPaste" :on-save="savePasted" />
+  <n-drawer v-model:show="showHistory" :width="420" placement="right">
+    <n-drawer-content title="全部历史" :native-scrollbar="false" body-content-style="padding: 0">
+      <PromptHistoryPanel
+        :task-id="taskId"
+        :active="showHistory"
+        :asset-base-url="assetBaseUrl"
+        :refresh-key="historyKey"
+        @select="adopt"
+        @deleted="removeMessagePair"
+      />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+<script lang="ts" setup>
+import { computed, h, onUnmounted, ref, toRef, watch } from "vue"
+import { useStorage } from "@vueuse/core"
+import type { RouteLocationRaw } from "vue-router"
+import { NCode, useDialog, useMessage } from "naive-ui"
+import { Icon } from "../../icons"
+import PromptPanel from "../ai/PromptPanel.vue"
+import PromptHistoryPanel from "../ai/PromptHistoryPanel.vue"
+import Preview from "../editor/Preview.vue"
+import CodeTabs from "./CodeTabs.vue"
+import VersionBar, { type VersionItem } from "./VersionBar.vue"
+import PasteCodeModal from "./PasteCodeModal.vue"
+import { Prompt, Submission } from "../../api"
+import { useTaskCode } from "../../composables/useTaskCode"
+import {
+  addVersionPair,
+  connectPrompt,
+  disconnectPrompt,
+  markMessageSubmitted,
+  messages,
+  removeMessagePair,
+  sendPrompt,
+  setCodeSink,
+} from "../../store/prompt"
+import { closeGuidance } from "../../store/guidance"
+import { authed } from "../../store/user"
+import {
+  emptyCode,
+  formatCode,
+  isEmptyCode,
+  sameCode,
+  type Code,
+} from "../../utils/code"
+
+// 挑战和自由创作共用的工作台：左边题目 + AI 对话，右边预览 / 代码，底部是版本条。
+// 每轮 AI 回复、每次手改或粘贴外部代码都是一个版本；挑战由学生自己点“交这一版”提交
+const props = defineProps<{
+  kind: "challenge" | "creation"
+  // 任务还没加载完时是 0
+  taskId: number
+  title: string
+  backLabel: string
+  backTo: RouteLocationRaw
+  briefLabel?: string
+  assetBaseUrl?: string
+  // 自由创作：保存作品（AI 生成完也会自动保存）
+  saveWork?: (code: Code) => Promise<void>
+}>()
+
+const message = useMessage()
+const dialog = useDialog()
+
+const { code, restored } = useTaskCode(toRef(props, "taskId"))
+const mode = ref<"preview" | "code">("preview")
+const selectedId = ref<number | null>(null)
+const busy = ref(false)
+const briefOpen = ref(true)
+const showPaste = ref(false)
+const showHistory = ref(false)
+const historyKey = ref(0)
+
+type CodeOut = { html: string | null; css: string | null; js: string | null }
+const normalize = (c: CodeOut): Code => ({
+  html: c.html ?? "",
+  css: c.css ?? "",
+  js: c.js ?? "",
+})
+
+const versionMessages = computed(() =>
+  messages.value.filter(
+    (m) => m.role === "assistant" && m.id && m.code && (m.code.html || m.code.css || m.code.js),
+  ),
+)
+
+const versions = computed<VersionItem[]>(() =>
+  versionMessages.value.map((m, i) => ({
+    id: m.id!,
+    n: i + 1,
+    source: m.source ?? "conversation",
+    submitted: !!m.submitted,
+  })),
+)
+
+function versionCode(id: number | null): Code | null {
+  const m = versionMessages.value.find((v) => v.id === id)
+  return m?.code ? normalize(m.code) : null
+}
+
+const modified = computed(() => {
+  const base = versionCode(selectedId.value)
+  return base ? !sameCode(code, base) : !isEmptyCode(code)
+})
+
+const canSubmit = computed(() => !!props.taskId && !isEmptyCode(code))
+
+function matchVersion(): number | null {
+  const hit = [...versionMessages.value]
+    .reverse()
+    .find((m) => sameCode(code, normalize(m.code!)))
+  return hit?.id ?? null
+}
+
+// 连上时：本地存着这个任务的代码就继续用它，否则打开最新一版。AI 生成完：换成新代码
+function onCode(c: CodeOut, id: number, reason: "init" | "complete") {
+  if (reason === "init" && restored.value) {
+    selectedId.value = matchVersion() ?? id
+    return
+  }
+  Object.assign(code, normalize(c))
+  selectedId.value = id
+  if (reason === "complete" && props.kind === "creation") {
+    props.saveWork?.({ ...code }).catch(() => {})
+  }
+}
+
+watch(
+  () => props.taskId,
+  (id) => {
+    if (!id || !authed.value) return
+    setCodeSink(onCode)
+    connectPrompt(id)
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  disconnectPrompt()
+  closeGuidance()
+})
+
+// 打开时已经有对话的，题目默认收起，给对话留地方
+let briefDecided = false
+watch(
+  () => messages.value.length,
+  (n) => {
+    if (briefDecided || !n) return
+    briefDecided = true
+    briefOpen.value = false
+  },
+)
+
+async function saveAsVersion(prompt?: string): Promise<number> {
+  const res = await Prompt.saveVersion(props.taskId, { ...code }, prompt)
+  addVersionPair(prompt || "（手动修改了代码）", res.source, res.message_id, { ...code })
+  selectedId.value = res.message_id
+  historyKey.value++
+  return res.message_id
+}
+
+// 发给 AI 之前，先把还没存的手改存成版本，AI 才会在手改后的代码上继续改
+async function beforeSend() {
+  briefOpen.value = false
+  briefDecided = true
+  if (!modified.value || isEmptyCode(code)) return
+  try {
+    await saveAsVersion()
+    message.info("已把你的修改存为新版本，AI 会在它的基础上改")
+  } catch {
+    message.error("保存你的修改失败，AI 会在上一版的基础上改")
+  }
+}
+
+function select(id: number) {
+  const apply = () => {
+    const c = versionCode(id)
+    if (!c) return
+    Object.assign(code, c)
+    selectedId.value = id
+  }
+  if (!modified.value) return apply()
+  dialog.warning({
+    title: "放弃当前修改？",
+    content: "当前的修改还没有存成版本，切换后会丢失。想留着的话，可以先点“交当前修改”或发给 AI。",
+    positiveText: "放弃并切换",
+    negativeText: "取消",
+    onPositiveClick: apply,
+  })
+}
+
+// 从“全部历史”里选了一份代码
+function adopt(c: Code) {
+  Object.assign(code, c)
+  selectedId.value = matchVersion()
+  showHistory.value = false
+}
+
+function openHistory() {
+  historyKey.value++
+  showHistory.value = true
+}
+
+async function submit() {
+  busy.value = true
+  try {
+    if (props.kind === "creation") {
+      await props.saveWork?.({ ...code })
+      message.success("作品已保存")
+      return
+    }
+    const id =
+      modified.value || !selectedId.value ? await saveAsVersion() : selectedId.value
+    await Submission.create(props.taskId, { ...code }, id)
+    markMessageSubmitted(id)
+    const n = versions.value.find((v) => v.id === id)?.n
+    message.success(n ? `已提交 v${n}` : "已提交")
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "提交失败，请重试")
+  } finally {
+    busy.value = false
+  }
+}
+
+async function savePasted(prompt: string, c: Code) {
+  Object.assign(code, c)
+  try {
+    await saveAsVersion(prompt)
+    message.success("已存为新版本")
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "保存失败，请重试")
+    throw err
+  }
+}
+
+async function format() {
+  try {
+    Object.assign(code, await formatCode({ ...code }))
+  } catch (err: any) {
+    dialog.error({
+      title: "整理失败，代码里可能有语法错误",
+      content: () => h(NCode, { code: err.message }),
+      style: { width: "auto" },
+    })
+  }
+}
+
+function clear() {
+  dialog.warning({
+    title: "清空代码？",
+    content: "只清空编辑器里的代码，已经存下的版本不受影响。",
+    positiveText: "清空",
+    negativeText: "取消",
+    onPositiveClick: () => {
+      Object.assign(code, emptyCode())
+    },
+  })
+}
+
+// 和 PromptPanel 里的模型选择是同一个存储
+const model = useStorage("prompt-model", "deepseek-flash")
+
+defineExpose({
+  // 页面自己发提示词（自由创作的“用这个主题生成”）
+  async send(text: string) {
+    await beforeSend()
+    sendPrompt(text, model.value)
+  },
+  // 页面用来放入示例代码，或自由创作从服务器读到的作品
+  setCode(c: Code) {
+    Object.assign(code, c)
+    selectedId.value = matchVersion()
+  },
+  restored,
+})
+</script>
+<style scoped>
+.workbench {
+  height: 100%;
+}
+
+.left,
+.right {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--wp-surface);
+}
+
+.left {
+  border-right: 1px solid var(--wp-line);
+}
+
+.left-head {
+  height: 43px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--wp-line);
+}
+
+.title {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.brief {
+  flex: none;
+  border-bottom: 1px solid var(--wp-line);
+}
+
+.brief-toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border: 0;
+  background: var(--wp-paper);
+  color: var(--wp-ink);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.brief-toggle span {
+  color: var(--wp-muted);
+  font-size: 12px;
+}
+
+.brief-toggle:focus-visible {
+  outline: 2px solid var(--wp-brand);
+  outline-offset: -2px;
+}
+
+.brief-body {
+  max-height: 42vh;
+  overflow-y: auto;
+}
+
+.chat {
+  flex: 1;
+  min-height: 0;
+}
+
+.right-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.preview-only {
+  height: 100%;
+}
+
+.mode {
+  margin: 0 8px;
+}
+</style>