# PaperManagementPanel 题目配置组件重设计 — 实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将 2235 行的 PaperManagementPanel.vue 巨型组件拆分为 7 个子组件 + 2 个 composable，统一使用 design-tokens，优化视觉与交互体验。

**Architecture:** 采用「状态提升 + 单向数据流」模式。所有业务逻辑集中在 `usePaperManagement.js` composable 中，子组件通过 props 接收数据、通过 emits 向上通信。题目解析纯函数提取为独立的 `useQuestionParser.js`。

**Tech Stack:** Vue 3 Composition API (`<script setup>`)、Ant Design Vue 4.x（仅 message 组件）、CSS Design Tokens（`design-tokens.css`）、原生 Teleport 弹窗

---

## 文件变更总览

| 操作 | 文件路径 | 说明 |
|------|----------|------|
| **Create** | `src/components/exam/composables/useQuestionParser.js` | 题目数据解析工具 (~150行) |
| **Create** | `src/components/exam/composables/usePaperManagement.js` | 全局状态管理 composable (~550行) |
| **Create** | `src/components/exam/ComposeConfigSidebar.vue` | 组卷配置栏 (~220行) |
| **Create** | `src/components/exam/ComposePreviewPane.vue` | 组卷预览区 (~200行) |
| **Create** | `src/components/exam/ComposePanel.vue` | 组卷面板容器 (~60行) |
| **Create** | `src/components/exam/PaperListTab.vue` | 草稿/发布列表 (~180行) |
| **Create** | `src/components/exam/EntityPickerModal.vue` | 通用实体选择器 (~200行) |
| **Create** | `src/components/exam/PublishDialog.vue` | 发布弹窗 (~320行) |
| **Create** | `src/components/exam/PaperDetailModal.vue` | 试卷详情弹窗 (~280行) |
| **Rewrite** | `src/components/exam/PaperManagementPanel.vue` | 重写为薄容器 (~100行) |

---

## Phase 1: 基础设施 — Composables

### Task 1: 创建 useQuestionParser.js

**Files:**
- Create: `src/components/exam/composables/useQuestionParser.js`

- [ ] **Step 1: 创建文件并实现题目解析纯函数集**

从原 `PaperManagementPanel.vue` 的 `viewPaperDetail()` 方法（L1473-1551）中提取解析逻辑，封装为无副作用的纯函数：

```javascript
import { ref } from 'vue'

const TYPE_LABEL_MAP = {
  single_choice: '单选',
  multiple_choice: '多选',
  true_false: '判断',
  fill_blank: '填空',
  subjective: '简答'
}

const DIFFICULTY_LABEL_MAP = {
  1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '极难'
}

export function useQuestionParser() {

  function parseContentObj(q) {
    if (q.content != null) {
      if (typeof q.content === 'string' && q.content.trim().startsWith('{')) {
        try { return JSON.parse(q.content) }
        catch { return {} }
      }
      if (typeof q.content === 'object') return q.content
    }
    if (q.data != null && typeof q.data === 'object' && !Array.isArray(q.data)) {
      return q.data
    }
    const hasDirectFields = q.stem || q.options || q.answer || q.question_stem
    if (hasDirectFields) return { ...q }
    return {}
  }

  function extractStem(q) {
    const c = parseContentObj(q)
    const raw = c.stem
      || (c.data && c.data.stem)
      || q.stem || q.question_stem || q.questionContent
      || q.question_content
      || (typeof q.content === 'string' ? q.content : '')
      || (q.data && q.data.stem)
      || ''
    if (!raw) return '（无题干）'
    if (typeof raw === 'string') return raw
    return JSON.stringify(raw)
  }

  function extractOptions(q) {
    const c = parseContentObj(q)
    let raw = c.options || (c.data && c.data.options) || q.options || (q.data && q.data.options) || []
    if (!Array.isArray(raw) || raw.length === 0) return []
    if (raw[0] && typeof raw[0] === 'object' && raw[0].key != null) {
      return raw.map(opt => ({
        key: String(opt.key),
        text: opt.content || opt.text || opt.value || ''
      }))
    }
    const keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
    return raw.map((opt, i) => ({
      key: keys[i] || String.fromCharCode(65 + i),
      text: typeof opt === 'object' ? (opt.content || opt.text || opt.value || '') : String(opt)
    }))
  }

  function extractAnswer(q) {
    const c = parseContentObj(q)
    const val = q.answer !== undefined ? String(q.answer)
      : (c.answer !== undefined ? String(c.answer)
        : ((c.data && c.data.answer) !== undefined ? String(c.data.answer)
          : (q.data && q.data.answer !== undefined ? String(q.data.answer)
            : (q.correctAnswer || q.correct_answer || q.standardAnswer || ''))))
    return val !== undefined && val !== null && val !== '' ? val : ''
  }

  function isChoiceQuestion(q) {
    const t = String(q?.questionType || q?.type || q?.question_type || '').toLowerCase()
    return ['single_choice', 'multiple_choice', 'choice', 'single', 'multiple'].includes(t)
  }

  function isTextQuestion(q) {
    const t = String(q?.questionType || q?.type || q?.question_type || '').toLowerCase()
    return ['fill_blank', 'subjective', 'fill', 'essay'].includes(t)
  }

  function isOptionAnswer(opt, q) {
    if (!q || !opt) return false
    const ans = String(q.answer || '').toLowerCase().trim()
    if (!ans) return false
    const optKey = String(opt.key || opt.label || '').toLowerCase().trim()
    const optText = String(opt.text || opt.content || '').toLowerCase().trim()
    if (ans === optKey) return true
    if (ans.includes(optKey) && optKey.length <= 2) return true
    if (ans.includes(optText) && optText.length > 0) return true
    return false
  }

  function formatTfAnswer(q) {
    if (!q) return '未设置答案'
    const ans = String(q.answer || '').toUpperCase().trim()
    if (['T', 'TRUE', '1', '正确', '对'].includes(ans)) return '正确 ✓'
    if (['F', 'FALSE', '0', '错误', '错'].includes(ans)) return '错误 ✗'
    return ans || '未设置答案'
  }

  function formatDifficulty(d) {
    if (d == null) return null
    return DIFFICULTY_LABEL_MAP[d] || `${d}`
  }

  function formatQType(t) {
    if (!t) return '未知'
    return TYPE_LABEL_MAP[t] || t
  }

  function parseQuestionContent(rawQ) {
    const contentObj = parseContentObj(rawQ)
    return {
      questionId: rawQ.questionId || rawQ.question_id || rawQ.id,
      questionType: String(rawQ.questionType || rawQ.type || rawQ.question_type || '').toLowerCase(),
      stem: extractStem(rawQ),
      options: extractOptions(rawQ),
      answer: extractAnswer(rawQ),
      explanation: contentObj.explanation || (contentObj.data && contentObj.data.explanation) || rawQ.explanation || '',
      score: Number(rawQ.score || rawQ.maxScore || rawQ.max_score || rawQ.question_score || 5),
      difficulty: rawQ.difficulty != null ? Number(rawQ.difficulty) : null
    }
  }

  return {
    parseQuestionContent,
    extractStem,
    extractOptions,
    extractAnswer,
    isChoiceQuestion,
    isTextQuestion,
    isOptionAnswer,
    formatTfAnswer,
    formatDifficulty,
    formatQType
  }
}
```

- [ ] **Step 2: 验证文件创建成功**

确认文件已写入且无语法错误。

---

### Task 2: 创建 usePaperManagement.js

**Files:**
- Create: `src/components/exam/composables/usePaperManagement.js`
- Read: `src/components/exam/PaperManagementPanel.vue` (L569-1633) — 提取源

- [ ] **Step 1: 创建 composable 文件框架与导入**

```javascript
import { ref, reactive, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { examAPI } from '../../../api/exam.js'
import { fileAPI } from '../../../api/file.js'
import { questionAPI } from '../../../api/question.js'
import { departmentAPI, userAPI } from '../../../api/auth'

const DIFFICULTIES = [
  { value: 1, label: '简单' }, { value: 2, label: '中等' },
  { value: 3, label: '较难' }, { value: 4, label: '困难' }, { value: 5, label: '极难' }
]

const QUESTION_TYPES = [
  { key: 'single_choice_count', label: '单选题' },
  { key: 'multiple_choice_count', label: '多选题' },
  { key: 'true_false_count', label: '判断题' },
  { key: 'fill_blank_count', label: '填空题' },
  { key: 'subjective_count', label: '简答题' }
]
```

- [ ] **Step 2: 实现 Tab 与列表状态**

```javascript
export function usePaperManagement() {
  const activeTab = ref('compose')
  const tabs = [
    { key: 'compose', label: '智能组卷', icon: '...' },
    { key: 'drafts', label: '我的草稿', icon: '...' },
    { key: 'published', label: '已发布试卷', icon: '...' }
  ]

  const drafts = ref([])
  const publishedPapers = ref([])
  const loadingDrafts = ref(false)

  function switchTab(key) {
    activeTab.value = key
    if (key !== 'compose') loadPapers()
  }
```

- [ ] **Step 3: 实现组卷配置状态**

```javascript
  const composeForm = reactive({
    difficulty: 2,
    include_personal: true,
    single_choice_count: 0,
    multiple_choice_count: 0,
    true_false_count: 0,
    fill_blank_count: 0,
    subjective_count: 0
  })

  const composing = ref(false)
  const composeResult = ref(null)

  const totalCount = computed(() =>
    composeForm.single_choice_count + composeForm.multiple_choice_count +
    composeForm.true_false_count + composeForm.fill_blank_count + composeForm.subjective_count
  )

  const totalPaperScore = computed(() =>
    (composeResult.value?.questions || []).reduce(
      (sum, q) => sum + (q.score || q.maxScore || q.max_score || 5), 0
    )
  )

  function increment(key) { if (composeForm[key] < 50) composeForm[key]++ }
  function decrement(key) { if (composeForm[key] > 0) composeForm[key]-- }
```

- [ ] **Step 4: 实现文件选择状态**

```javascript
  const showFilePicker = ref(false)
  const fileSearchKeyword = ref('')
  const selectedFiles = ref([])
  const allFiles = ref([])
  const loadingFiles = ref(false)

  const filteredFiles = computed(() => {
    if (!fileSearchKeyword.value.trim()) return allFiles.value
    const kw = fileSearchKeyword.value.toLowerCase()
    return allFiles.value.filter(f =>
      (f.name || f.file_name || f.fileName || '').toLowerCase().includes(kw)
    )
  })

  function isFileSelected(id) { return selectedFiles.value.some(f => f.id === id) }

  function toggleFile(file) {
    if (isFileSelected(file.id)) {
      selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id)
    } else {
      selectedFiles.value = [...selectedFiles.value, file]
    }
  }

  function removeFile(id) { selectedFiles.value = selectedFiles.value.filter(f => f.id !== id) }

  async function openFilePicker() {
    showFilePicker.value = true
    if (allFiles.value.length === 0) {
      loadingFiles.value = true
      try {
        const res = await fileAPI.getFiles({ pageNum: 1, pageSize: 200 })
        const data = res?.data || res
        const list = Array.isArray(data) ? data : (data?.list || data?.records || data?.data?.list || [])
        allFiles.value = list
      } catch (e) {
        message.error('加载文件列表失败')
      } finally {
        loadingFiles.value = false
      }
    }
  }
```

- [ ] **Step 5: 实现组卷生成与保存**

```javascript
  async function handleGeneratePaper() {
    if (totalCount.value === 0) { message.warning('请至少设置一种题型数量'); return }
    composing.value = true
    composeResult.value = null
    try {
      const params = {
        single_choice_count: composeForm.single_choice_count,
        multiple_choice_count: composeForm.multiple_choice_count,
        true_false_count: composeForm.true_false_count,
        fill_blank_count: composeForm.fill_blank_count,
        subjective_count: composeForm.subjective_count,
        difficulty: composeForm.difficulty,
        include_personal: composeForm.include_personal
      }
      if (selectedFiles.value.length > 0) {
        params.file_ids = selectedFiles.value.map(f => f.id)
      }

      let result = await examAPI.generatePaper(params)
      let questions = result?.questions || result?.paperQuestions || result?.questionList ||
                      result?.items || result?.question_list || []

      if (!Array.isArray(questions) || questions.length === 0) {
        // fallback: 从题库补充
        const typeMap = [
          { key: 'single_choice_count', type: 'single_choice' },
          { key: 'multiple_choice_count', type: 'multiple_choice' },
          { key: 'true_false_count', type: 'true_false' },
          { key: 'fill_blank_count', type: 'fill_blank' },
          { key: 'subjective_count', type: 'subjective' }
        ]
        if (!Array.isArray(questions)) questions = []
        for (const tm of typeMap) {
          const need = composeForm[tm.key]
          if (need <= 0) continue
          try {
            const qRes = await questionAPI.pageQuestions({ pageNum: 1, pageSize: need, questionType: tm.type, difficulty: composeForm.difficulty })
            const body = qRes?.data || {}
            const inner = body?.data
            let rawList = inner?.list || inner?.records || inner?.questions ||
              (Array.isArray(inner) ? inner : null) || body?.list || body?.records || body?.questions || []
            let qList = Array.isArray(rawList) ? rawList : []
            if (qList.length === 0 && composeForm.difficulty !== undefined) {
              const retryRes = await questionAPI.pageQuestions({ pageNum: 1, pageSize: need, questionType: tm.type })
              const retryBody = retryRes?.data || {}
              const retryInner = retryBody?.data
              rawList = retryInner?.list || retryInner?.records || retryInner?.questions ||
                (Array.isArray(retryInner) ? retryInner : null) || retryBody?.list || retryBody?.records || retryBody?.questions || []
              qList = Array.isArray(rawList) ? rawList : []
            }
            if (qList.length > 0) questions = questions.concat(qList.slice(0, need))
          } catch (e) { /* skip */ }
        }
      }

      const paperId = result?.paper_id || result?.paperId || result?.paper?.id || result?.id || null
      const paperTitle = result?.paper_title || result?.paperTitle || result?.paper?.title || result?.title || ''

      composeResult.value = { questions, paperId, paperTitle }
      if (questions.length > 0) {
        message.success(`组卷成功！${questions.length} 道题目，可保存为草稿`)
      } else {
        message.warning('数据库中暂无匹配题目，请先在「生成题目」页面中为制度文件生成题目', 6)
      }
    } catch (err) {
      message.error('组卷失败: ' + (err.message || '未知错误'))
    } finally {
      composing.value = false
    }
  }

  async function handleSavePaper() {
    const r = composeResult.value
    if (!r || !r.questions || r.questions.length === 0) { message.warning('请先生成试卷'); return }
    const ids = (r.questions || []).map(q => q.question_id || q.questionId || q.id).filter(Boolean)
    if (ids.length === 0) { message.error('无法提取题目ID'); return }
    try {
      const saveData = { title: r.paperTitle || `组卷_${new Date().toLocaleDateString()}`, questionIds: ids }
      const savedPaper = await examAPI.savePaper(saveData)

      const newPaper = savedPaper ? {
        ...savedPaper,
        id: savedPaper.id || savedPaper.paperId || savedPaper.paper_id,
        title: savedPaper.title || saveData.title,
        questionCount: ids.length,
        totalScore: savedPaper.totalScore || savedPaper.total_score || 0,
        createdAt: savedPaper.createdAt || savedPaper.created_at || new Date().toISOString(),
        published: false, status: 'draft'
      } : {
        id: 'local_' + Date.now(), title: saveData.title, questionCount: ids.length,
        totalScore: 0, createdAt: new Date().toISOString(), published: false, status: 'draft'
      }

      if (!drafts.value.some(d => (d.id || d.paperId || d.paper_id) === newPaper.id)) {
        drafts.value.unshift(newPaper)
      }
      message.success('已保存为草稿')
      composeResult.value = null
      selectedFiles.value = []
      activeTab.value = 'drafts'
      loadPapers()
    } catch (err) {
      message.error('保存失败: ' + (err.message || ''))
    }
  }
```

- [ ] **Step 6: 实现草稿/发布列表操作**

```javascript
  async function loadPapers() {
    loadingDrafts.value = true
    try {
      const res = await examAPI.getAdminPapers()
      let list = []
      if (Array.isArray(res)) { list = res }
      else if (res) {
        list = res.list || res.records || res.data?.list || res.data?.records || res.data || []
        if (!Array.isArray(list) && res.data && Array.isArray(res.data)) list = res.data
      }
      drafts.value = list.filter(p => !(p.published === true || p.status === 'published'))
      publishedPapers.value = list.filter(p => p.published === true || p.status === 'published')
    } catch (e) {
      message.error('加载试卷列表失败')
    } finally {
      loadingDrafts.value = false
    }
  }

  async function deleteDraft(id) {
    try { await examAPI.deleteAdminPaper(id); message.success('已删除'); loadPapers() }
    catch (e) { message.error('删除失败: ' + (e.message || '')) }
  }

  async function revokePublishedPaper(id) {
    try { await examAPI.revokePaper(id); message.success('已撤回'); loadPapers() }
    catch (e) { message.error('撤回失败: ' + (e.message || '')) }
  }
```

- [ ] **Step 7: 实现详情预览状态**

```javascript
  const previewRaw = ref(null)
  const previewQuestions = ref([])
  const previewPaperTitle = ref('')
  const previewPublishInfo = reactive({
    departments: [], targetUsers: [], excludeUsers: [],
    publishTime: '', deadline: '', userScopeMode: ''
  })

  const previewTotalScore = computed(() =>
    previewQuestions.value.reduce((sum, q) => sum + (q.score || q.maxScore || q.max_score || q.question_score || 5), 0)
  )

  function clearPreview() {
    previewRaw.value = null
    previewQuestions.value = []
    previewPaperTitle.value = ''
    Object.assign(previewPublishInfo, { departments: [], targetUsers: [], excludeUsers: [], publishTime: '', deadline: '', userScopeMode: '' })
  }
```

> **注意**: `viewPaperDetail()` 的完整实现（含复杂的数据多路径解析）将在 Task 9 中作为 PaperDetailModal 的内部调用完成，此处仅定义状态和清理方法。

- [ ] **Step 8: 实现发布弹窗状态与 Picker 状态**

```javascript
  const publishDialog = ref(false)
  const pubPaperId = ref(null)
  const publishing = ref(false)

  const pub = reactive({
    deptList: [], filteredDeptList: [], selectedDepts: [],
    userList: [], selectedUsers: [], selectedExcludes: [],
    userMode: 'target', publishTime: '', deadline: ''
  })

  const pubUI = reactive({ loadingDepts: false, loadingUsers: false, deptSearch: '' })
  const pickerDialog = reactive({ visible: false, type: '' })
  const currentPickerSearch = ref('')
  const pendingDeptIds = ref(new Set())
  const pendingUserIds = ref(new Set())
  const pendingExcludeIds = ref(new Set())

  let _deptCache = null
  let _deptCacheTime = 0
  let _userCache = null
  const CACHE_TTL = 5 * 60 * 1000

  function openPublishDialog(id) {
    pubPaperId.value = id
    pub.selectedDepts = []; pub.selectedUsers = []; pub.selectedExcludes = []
    pub.userMode = 'target'; pub.publishTime = ''; pub.deadline = ''
    pubUI.deptSearch = ''; currentPickerSearch.value = ''
    publishDialog.value = true
  }

  function closePublish() { publishDialog.value = false; pubPaperId.value = null }
```

- [ ] **Step 9: 实现 Picker 操作方法（部门）**

```javascript
  async function loadDeptList() {
    if (_deptCache && Date.now() - _deptCacheTime < CACHE_TTL) {
      pub.deptList = [..._deptCache]; pub.filteredDeptList = [..._deptCache]; return
    }
    pubUI.loadingDepts = true
    try {
      const res = await departmentAPI.getDepartments()
      let list = Array.isArray(res) ? res : null
      if (!list && typeof res === 'object' && res !== null) {
        for (const key of ['data', 'list', 'records', 'rows', 'items', 'departments']) {
          if (Array.isArray(res[key])) { list = res[key]; break }
          if (res.data && Array.isArray(res.data[key])) { list = res.data[key]; break }
        }
        if (!list && Array.isArray(res.data)) list = res.data
      }
      if (!list) { list = [] }
      pub.deptList = list.map(d => ({
        id: d.id, name: d.name || d.deptName || d.departmentName || d.dept_name || String(d.id || '')
      }))
      pub.filteredDeptList = [...pub.deptList]
      _deptCache = [...pub.deptList]; _deptCacheTime = Date.now()
    } catch (e) {
      message.error('加载部门列表失败')
    } finally { pubUI.loadingDepts = false }
  }

  function filterDeptList() {
    const q = (pubUI.deptSearch || '').toLowerCase().trim()
    pub.filteredDeptList = q
      ? pub.deptList.filter(d => (d.name || '').toLowerCase().includes(q) || String(d.id).includes(q))
      : [...pub.deptList]
  }

  function toggleDept(d) {
    const s = new Set(pendingDeptIds.value)
    if (s.has(d.id)) s.delete(d.id); else s.add(d.id)
    pendingDeptIds.value = s
  }

  async function removeDept(id) {
    pub.selectedDepts = pub.selectedDepts.filter(d => d.id !== id)
    await refreshUsersForDepts()
  }

  function selectAllDepts() { pendingDeptIds.value = new Set(pub.filteredDeptList.map(d => d.id)) }
  function clearAllDepts() { pendingDeptIds.value = new Set() }
```

- [ ] **Step 10: 实现 Picker 操作方法（用户）**

```javascript
  async function refreshUsersForDepts() {
    _userCache = null; pub.userList = []; pub.selectedUsers = []
    const ids = pub.selectedDepts.map(d => Number(d.id)).filter(Boolean)
    if (ids.length > 0) {
      pubUI.loadingUsers = true
      try {
        let allUsers = []
        for (const did of ids) {
          try {
            const dr = await departmentAPI.getDepartmentUsers(did)
            let users = Array.isArray(dr) ? dr : null
            if (!users && typeof dr === 'object') {
              for (const k of ['data', 'list', 'records', 'users', 'rows']) {
                if (Array.isArray(dr[k])) { users = dr[k]; break }
                if (dr.data && Array.isArray(dr.data[k])) { users = dr.data[k]; break }
              }
              if (!users && Array.isArray(dr.data)) users = dr.data
            }
            allUsers = allUsers.concat(users || [])
          } catch (e) { /* skip */ }
        }
        allUsers = allUsers.filter((u, i, arr) => arr.findIndex(x => x.id === u.id) === i)
        pub.userList = allUsers.map(u => ({
          id: u.id,
          name: u.realName || u.username || u.name || u.nickname || ('用户' + u.id),
          departmentName: u.departmentName || u.deptName || ''
        }))
      } catch (e) { /* skip */ }
      finally { pubUI.loadingUsers = false }
    }
  }

  async function loadUserListForPicker() {
    if (pub.userList.length > 0) return
    if (pub.selectedDepts.length > 0) { await refreshUsersForDepts(); return }
    pubUI.loadingUsers = true
    try {
      const res = await userAPI.getUsers({ pageNum: 1, pageSize: 200 })
      let list = Array.isArray(res) ? res : null
      if (!list && typeof res === 'object' && res !== null) {
        for (const key of ['data', 'list', 'records', 'rows']) {
          if (Array.isArray(res[key])) { list = res[key]; break }
          if (res.data && Array.isArray(res.data[key])) { list = res.data[key]; break }
        }
        if (!list && Array.isArray(res.data)) list = res.data
      }
      if (!list) list = []
      pub.userList = list.map(u => ({
        id: u.id,
        name: u.realName || u.username || u.name || u.nickname || ('用户' + u.id),
        departmentName: u.departmentName || u.deptName || ''
      }))
      _userCache = true
    } catch (e) {
      message.error('加载用户列表失败')
    } finally { pubUI.loadingUsers = false }
  }

  function toggleCurrentUser(u) {
    if (pub.userMode === 'target') {
      const s = new Set(pendingUserIds.value)
      if (s.has(u.id)) s.delete(u.id); else s.add(u.id)
      pendingUserIds.value = s
    } else {
      const s = new Set(pendingExcludeIds.value)
      if (s.has(u.id)) s.delete(u.id); else s.add(u.id)
      pendingExcludeIds.value = s
    }
  }

  function removeUser(id) { pub.selectedUsers = pub.selectedUsers.filter(u => u.id !== id) }

  function selectAllUsers() { pendingUserIds.value = new Set(currentFilteredList.value.map(u => u.id)) }
  function clearAllUsers() { pendingUserIds.value = new Set() }
  function selectAllExcludes() { pendingExcludeIds.value = new Set(currentFilteredList.value.map(u => u.id)) }
  function clearAllExcludes() { pendingExcludeIds.value = new Set() }
```

- [ ] **Step 11: 实现 Picker 弹窗控制与计算属性**

```javascript
  const currentFilteredList = computed(() => {
    const q = (currentPickerSearch.value || '').toLowerCase().trim()
    const source = [...pub.userList]
    if (!q) return source
    return source.filter(u =>
      (u.name || '').toLowerCase().includes(q) ||
      String(u.id).includes(q) ||
      (u.departmentName || '').toLowerCase().includes(q)
    )
  })

  const currentSelectedCount = computed(() =>
    pub.userMode === 'target' ? pendingUserIds.value.size : pendingExcludeIds.value.size
  )

  const isUserSelectorDisabled = computed(() =>
    pub.userMode === 'target' ? pub.selectedExcludes.length > 0 : pub.selectedUsers.length > 0
  )

  const pickerDialogTitle = computed(() =>
    pickerDialog.type === 'dept' ? '选择目标部门'
      : (pub.userMode === 'target' ? '选择目标用户' : '选择排除用户')
  )

  async function openPicker(type) {
    pickerDialog.type = type
    pickerDialog.visible = true
    currentPickerSearch.value = ''
    if (type === 'dept') {
      pendingDeptIds.value = new Set(pub.selectedDepts.map(d => d.id))
      await loadDeptList(); filterDeptList()
    } else if (type === 'user') {
      pendingUserIds.value = new Set(pub.selectedUsers.map(u => u.id))
      pendingExcludeIds.value = new Set(pub.selectedExcludes.map(u => u.id))
      await loadUserListForPicker()
    }
  }

  function closePicker() { pickerDialog.visible = false; pickerDialog.type = '' }

  async function confirmPicker() {
    if (pickerDialog.type === 'dept') {
      pub.selectedDepts = pub.filteredDeptList.filter(d => pendingDeptIds.value.has(d.id)).map(d => ({ ...d }))
      await refreshUsersForDepts()
    } else if (pickerDialog.type === 'user') {
      if (pub.userMode === 'target') {
        pub.selectedUsers = pub.userList.filter(u => pendingUserIds.value.has(u.id)).map(u => ({ ...u }))
      } else {
        pub.selectedExcludes = pub.userList.filter(u => pendingExcludeIds.value.has(u.id)).map(u => ({ ...u }))
      }
    }
    closePicker()
  }
```

- [ ] **Step 12: 实现发布提交与工具函数**

```javascript
  async function confirmPublish() {
    const deptIds = pub.selectedDepts.map(d => Number(d.id))
    const userIds = pub.selectedUsers.map(u => Number(u.id))
    const excludeUserIds = pub.selectedExcludes.map(u => Number(u.id))
    if (!deptIds.length && !userIds.length && !excludeUserIds.length) {
      message.warning('请至少选择一个部门或用户'); return
    }
    publishing.value = true
    try {
      const payload = { deptIds, userIds, excludeUserIds }
      if (pub.publishTime) payload.publishTime = new Date(pub.publishTime).toISOString()
      if (pub.deadline) payload.deadline = new Date(pub.deadline).toISOString()
      await examAPI.publishPaper(pubPaperId.value, payload)
      message.success('发布成功')
      closePublish(); loadPapers()
    } catch (e) {
      message.error('发布失败: ' + (e.message || ''))
    } finally { publishing.value = false }
  }

  function getId(p) {
    if (!p) return ''
    const id = p.id || p.paperId || p.paper_id || p.examPaperId || p.exam_paper_id || ''
    return id || ''
  }

  function getPaperTitle(p) { return p.title || p.paper_title || '未命名试卷' }

  function formatQType(t) {
    if (!t) return '未知'
    return { single_choice: '单选', multiple_choice: '多选', true_false: '判断', fill_blank: '填空', subjective: '简答' }[t] || t
  }

  function formatPubTime(val) {
    if (!val) return ''
    try {
      const d = new Date(val)
      if (isNaN(d.getTime())) return String(val)
      const pad = n => String(n).padStart(2, '0')
      return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
    } catch { return String(val) }
  }

  function isDeadlineNear(val) {
    if (!val) return false
    try {
      const diffDays = (new Date(val).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
      return diffDays <= 3 && diffDays > 0
    } catch { return false }
  }

  onMounted(() => { loadPapers() })

  return {
    // Tab
    activeTab, tabs, switchTab,
    // Lists
    drafts, publishedPapers, loadingDrafts, loadPapers, deleteDraft, revokePublishedPaper,
    // Compose
    composeForm, composing, composeResult, totalCount, totalPaperScore,
    increment, decrement, handleGeneratePaper, handleSavePaper,
    DIFFICULTIES, QUESTION_TYPES,
    // Files
    showFilePicker, fileSearchKeyword, selectedFiles, allFiles, loadingFiles,
    filteredFiles, isFileSelected, toggleFile, removeFile, openFilePicker,
    // Detail
    previewRaw, previewQuestions, previewPaperTitle, previewPublishInfo,
    previewTotalScore, clearPreview,
    // Publish
    publishDialog, pubPaperId, publishing, pub, pubUI, pickerDialog,
    currentPickerSearch, pendingDeptIds, pendingUserIds, pendingExcludeIds,
    isUserSelectorDisabled, pickerDialogTitle, currentFilteredList, currentSelectedCount,
    openPublishDialog, closePublish, confirmPublish,
    openPicker, closePicker, confirmPicker,
    loadDeptList, filterDeptList, toggleDept, removeDept, selectAllDepts, clearAllDepts,
    loadUserListForPicker, refreshUsersForDepts,
    toggleCurrentUser, removeUser, selectAllUsers, clearAllUsers, selectAllExcludes, clearAllExcludes,
    // Utils
    getId, getPaperTitle, formatQType, formatPubTime, isDeadlineNear
  }
}
```

- [ ] **Step 13: 验证 composable 创建完整**

确认文件完整包含所有导出的状态和方法，无遗漏。

---

## Phase 2: 核心组件

### Task 3: 创建 ComposeConfigSidebar.vue

**Files:**
- Create: `src/components/exam/ComposeConfigSidebar.vue`

- [ ] **Step 1: 创建模板 — 数据源选择区**

```html
<template>
  <div class="ccs-sidebar">
    <!-- 数据源 -->
    <div class="ccs-section">
      <div class="ccs-section-title">数据源</div>
      <button v-if="!showFilePicker" class="ccs-link-btn" @click="$emit('open-picker')">
        {{ selectedFiles.length ? `已选 ${selectedFiles.length} 个文件` : '从知识库选择文件' }}
      </button>
      <button v-else class="ccs-link-btn muted" @click="$emit('close-picker')">收起</button>

      <div v-if="selectedFiles.length > 0 && !showFilePicker" class="ccs-chips">
        <span v-for="f in selectedFiles" :key="f.id" class="ccs-chip">
          {{ f.name || f.file_name || f.fileName }}
          <button class="ccs-chip-x" @click.stop="$emit('remove-file', f.id)">×</button>
        </span>
      </div>

      <div v-if="showFilePicker" class="ccs-file-picker">
        <input v-model="searchKeyword" class="ccs-search-input" placeholder="搜索文件..." />
        <div v-if="filteredFiles.length > 0" class="ccs-file-list">
          <label v-for="f in filteredFiles" :key="f.id"
            :class="['ccs-file-item', { checked: isFileSelected(f.id) }]"
            @change="$emit('toggle-file', f)">
            <input type="checkbox" :checked="isFileSelected(f.id)" />
            <span>{{ f.name || f.file_name || f.fileName }}</span>
          </label>
        </div>
        <div v-else-if="loadingFiles" class="ccs-state-text">加载中...</div>
        <div v-else class="ccs-state-text">暂无可选文件</div>
      </div>
      <p class="ccs-hint">不选则从全部可用题库中随机出题</p>
    </div>
```

- [ ] **Step 2: 创建模板 — 难度与题型区**

```html
    <!-- 难度 -->
    <div class="ccs-section">
      <div class="ccs-section-title">难度等级</div>
      <div class="ccs-diff-bar">
        <button v-for="lv in difficulties" :key="lv.value"
          :class="['ccs-diff-btn', { active: modelValue.difficulty === lv.value }]"
          @click="update('difficulty', lv.value)">
          {{ lv.label }}
        </button>
      </div>
    </div>

    <!-- 题型配置 -->
    <div class="ccs-section">
      <div class="ccs-section-title">题型配置</div>
      <div class="ccs-type-grid">
        <div v-for="opt in questionTypes" :key="opt.key" class="ccs-type-cell">
          <span class="ccs-type-name">{{ opt.label }}</span>
          <select :value="modelValue[opt.key]"
            @change="update(opt.key, Number($event.target.value))"
            class="ccs-type-select">
            <option v-for="n in 51" :key="n" :value="n - 1">{{ n - 1 }}</option>
          </select>
        </div>
      </div>
      <div class="ccs-total-row">共 <strong>{{ totalCount }}</strong> 题</div>
    </div>

    <!-- 生成按钮 -->
    <button class="ccs-generate-btn" :disabled="totalCount === 0 || composing" @click="$emit('generate')">
      {{ composing ? '生成中...' : '✨ 生成试卷' }}
    </button>
  </div>
</template>
```

- [ ] **Step 3: 创建 Script**

```javascript
<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: { type: Object, required: true },
  selectedFiles: { type: Array, default: () => [] },
  allFiles: { type: Array, default: () => [] },
  loadingFiles: { type: Boolean, default: false },
  totalCount: { type: Number, default: 0 },
  composing: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue', 'toggle-file', 'remove-file', 'open-picker', 'close-picker', 'generate'])

const searchKeyword = ref('')

const difficulties = [
  { value: 1, label: '简单' }, { value: 2, label: '中等' },
  { value: 3, label: '较难' }, { value: 4, label: '困难' }, { value: 5, label: '极难' }
]
const questionTypes = [
  { key: 'single_choice_count', label: '单选题' },
  { key: 'multiple_choice_count', label: '多选题' },
  { key: 'true_false_count', label: '判断题' },
  { key: 'fill_blank_count', label: '填空题' },
  { key: 'subjective_count', label: '简答题' }
]

const filteredFiles = computed(() => {
  if (!searchKeyword.value.trim()) return props.allFiles
  const kw = searchKeyword.value.toLowerCase()
  return props.allFiles.filter(f =>
    (f.name || f.file_name || f.fileName || '').toLowerCase().includes(kw)
  )
})

function isFileSelected(id) { return props.selectedFiles.some(f => f.id === id) }

function update(key, value) {
  emit('update:modelValue', { ...props.modelValue, [key]: value })
}
</script>
```

- [ ] **Step 4: 创建 Style（使用 design-tokens）**

```css
<style scoped>
.ccs-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  min-width: 300px;
}

.ccs-section { display: flex; flex-direction: column; gap: var(--space-md); }
.ccs-section-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.ccs-link-btn {
  background: none; border: none; color: var(--color-info);
  font-size: var(--font-md); cursor: pointer; padding: 0;
  font-weight: var(--weight-medium);
}
.ccs-link-btn:hover { text-decoration: underline; }
.ccs-link-btn.muted { color: var(--text-disabled); }

.ccs-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.ccs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: var(--bg-hover);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  font-size: var(--font-md); color: var(--text-secondary); font-weight: var(--weight-medium);
}
.ccs-chip-x {
  background: none; border: none; font-size: 14px; cursor: pointer;
  color: var(--text-disabled); line-height: 1; padding: 0 2px;
}
.ccs-chip-x:hover { color: var(--color-error); }

.ccs-file-picker { display: flex; flex-direction: column; gap: var(--space-sm); }
.ccs-search-input {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); font-size: var(--font-lg);
  box-sizing: border-box; transition: border-color var(--transition-fast);
}
.ccs-search-input:focus { outline: none; border-color: var(--text-primary); }
.ccs-file-list {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.ccs-file-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; font-size: var(--font-lg); color: var(--text-secondary);
  transition: background var(--transition-fast);
}
.ccs-file-item:hover { background: var(--bg-hover); }
.ccs-file-item.checked { background: var(--bg-warning); }
.ccs-file-item input { accent-color: var(--text-primary); }
.ccs-state-text { font-size: var(--font-md); color: var(--text-disabled); text-align: center; padding: 20px; }
.ccs-hint { font-size: var(--font-xs); color: var(--text-disabled); margin: 0; }

.ccs-diff-bar { display: flex; gap: 3px; }
.ccs-diff-btn {
  padding: 4px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-secondary); font-size: var(--font-md);
  cursor: pointer; font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}
.ccs-diff-btn.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.ccs-diff-btn:hover:not(.active) { border-color: var(--text-primary); color: var(--text-primary); }

.ccs-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-sm); }
.ccs-type-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; background: var(--bg-container);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.ccs-type-name { font-size: var(--font-md); color: var(--text-secondary); font-weight: var(--weight-medium); white-space: nowrap; }
.ccs-type-select {
  width: 56px; padding: 2px 4px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); font-size: var(--font-lg);
  font-weight: var(--weight-bold); color: var(--text-primary);
  background: var(--bg-card); cursor: pointer;
  text-align: center;
}
.ccs-total-row {
  text-align: center; font-size: var(--font-lg); color: var(--text-disabled);
  padding: var(--space-md); background: var(--bg-container); border-radius: var(--radius-md);
}
.ccs-total-row strong { color: var(--text-primary); }

.ccs-generate-btn {
  margin-top: auto; width: 100%; padding: 10px; border: none; border-radius: var(--radius-lg);
  background: var(--color-primary); color: var(--text-inverse);
  font-size: var(--font-xl); font-weight: var(--weight-semibold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--transition-fast);
}
.ccs-generate-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ccs-generate-btn:hover:not(:disabled) { background: var(--color-primary-active); }

@media (max-width: 767px) {
  .ccs-sidebar { min-width: unset; }
}
</style>
```

---

### Task 4: 创建 ComposePreviewPane.vue

**Files:**
- Create: `src/components/exam/ComposePreviewPane.vue`

- [ ] **Step 1: 创建完整组件（Template + Script + Style）**

```html
<template>
  <div class="cpp-pane">
    <!-- 空态 -->
    <div v-if="!result && !composing" class="cpp-empty">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--border-dark)" stroke-width="1.2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
      </svg>
      <p>选择文件（可选）、设置题型数量</p>
      <p class="cpp-empty-hint">点击左侧「生成试卷」即可预览</p>
    </div>

    <!-- 加载态 -->
    <div v-else-if="composing" class="cpp-loading">
      <div class="cpp-spinner"></div>
      <span>正在从题库中选题组卷...</span>
    </div>

    <!-- 结果态 -->
    <div v-else class="cpp-result">
      <div class="cpp-preview-card">
        <div class="cpp-preview-header">
          <h3 class="cpp-preview-title">{{ result.paperTitle || '试卷预览' }}</h3>
          <div class="cpp-preview-stats">
            <span class="cpp-stat">{{ result.questions?.length || 0 }} 道题目</span>
            <span class="cpp-stat">共 {{ totalScore }} 分</span>
          </div>
        </div>
        <div class="cpp-question-list">
          <div v-for="(q, i) in result.questions" :key="i" class="cpp-q-card">
            <div class="cpp-q-header">
              <span class="cpp-q-num">{{ i + 1 }}</span>
              <span class="cpp-q-type">{{ formatType(q.questionType || q.type) }}</span>
              <span class="cpp-q-diff" v-if="q.difficulty">难度 {{ q.difficulty }}</span>
            </div>
            <div class="cpp-q-stem">{{ q.stem || q.question_stem || q.content?.stem || '无题干' }}</div>
          </div>
        </div>
      </div>

      <div v-if="result.questions?.length > 0" class="cpp-save-area">
        <button class="cpp-save-btn" @click="$emit('save')">保存为草稿</button>
        <p class="cpp-save-note">保存后可在「我的草稿」中查看、发布</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  result: { type: Object, default: null },
  composing: { type: Boolean, default: false },
  totalScore: { type: Number, default: 0 }
})
defineEmits(['save'])

function formatType(t) {
  if (!t) return '未知'
  return { single_choice: '单选', multiple_choice: '多选', true_false: '判断', fill_blank: '填空', subjective: '简答' }[t] || t
}
</script>

<style scoped>
.cpp-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.cpp-empty, .cpp-loading {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--text-disabled);
  text-align: center; font-size: var(--font-lg); padding: 40px;
}
.cpp-empty p { margin: 0; }
.cpp-empty-hint { font-size: var(--font-md); margin-top: 4px; }
.cpp-spinner {
  width: 28px; height: 28px; border: 3px solid var(--border-light);
  border-top-color: var(--text-primary); border-radius: 50%;
  animation: cpp-spin .6s linear infinite;
}
@keyframes cpp-spin { to { transform: rotate(360deg); } }

.cpp-result { flex: 1; display: flex; flex-direction: column; padding: var(--space-xl); overflow-y: auto; }
.cpp-preview-card {
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}
.cpp-preview-header {
  padding: var(--space-lg) var(--space-xl); background: var(--bg-container);
  border-bottom: 1px solid var(--border-light);
}
.cpp-preview-title { margin: 0 0 6px; font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--text-primary); }
.cpp-preview-stats { display: flex; gap: 14px; }
.cpp-stat {
  font-size: var(--font-md); color: var(--text-secondary); font-weight: var(--weight-medium);
  background: var(--color-primary-alpha-15); padding: 2px 8px; border-radius: var(--radius-sm);
}

.cpp-question-list { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; padding: var(--space-md); }
.cpp-q-card {
  padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cpp-q-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-sm); }
.cpp-q-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cpp-q-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: var(--text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-xs); font-weight: var(--weight-bold); flex-shrink: 0;
}
.cpp-q-type { font-size: var(--font-xs); color: var(--text-disabled); background: var(--bg-container); padding: 1px 7px; border-radius: 3px; font-weight: var(--weight-medium); }
.cpp-q-diff { font-size: var(--font-xs); color: var(--text-disabled); margin-left: auto; }
.cpp-q-stem { font-size: var(--font-lg); color: var(--text-primary); line-height: 1.6; }

.cpp-save-area { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); text-align: center; }
.cpp-save-btn {
  width: 100%; padding: 10px; border: none; border-radius: var(--radius-lg);
  background: var(--color-primary); color: var(--text-inverse);
  font-size: var(--font-xl); font-weight: var(--weight-medium); cursor: pointer;
  transition: background var(--transition-fast);
}
.cpp-save-btn:hover { background: var(--color-primary-active); }
.cpp-save-note { margin-top: 6px; font-size: var(--font-md); color: var(--text-disabled); }
</style>
```

---

### Task 5: 创建 ComposePanel.vue

**Files:**
- Create: `src/components/exam/ComposePanel.vue`

- [ ] **Step 1: 创建左右分栏容器组件**

```html
<template>
  <div class="cps-layout">
    <ComposeConfigSidebar
      v-model="form"
      :selected-files="selectedFiles"
      :all-files="allFiles"
      :loading-files="loadingFiles"
      :total-count="totalCount"
      :composing="composing"
      @toggle-file="onToggleFile"
      @remove-file="onRemoveFile"
      @open-picker="onOpenPicker"
      @close-picker="showFilePicker = false"
      @generate="$emit('generate')"
    />
    <ComposePreviewPane
      :result="result"
      :composing="composing"
      :total-score="totalScore"
      @save="$emit('save')"
    />
  </div>
</template>

<script setup>
import ComposeConfigSidebar from './ComposeConfigSidebar.vue'
import ComposePreviewPane from './ComposePreviewPane.vue'

const props = defineProps({
  form: { type: Object, required: true },
  selectedFiles: { type: Array, default: () => [] },
  allFiles: { type: Array, default: () => [] },
  loadingFiles: { type: Boolean, default: false },
  totalCount: { type: Number, default: 0 },
  composing: { type: Boolean, default: false },
  result: { type: Object, default: null },
  totalScore: { type: Number, default: 0 },
  showFilePicker: { type: Boolean, default: false }
})

defineEmits(['generate', 'save'])

function onToggleFile(file) { /* handled by parent via direct binding or emit up */ }
function onRemoveFile(id) { /* same */ }
function onOpenPicker() { /* same */ }
</script>

<style scoped>
.cps-layout { display: flex; gap: var(--space-xl); flex: 1; min-height: 0; }
@media (max-width: 767px) {
  .cps-layout { flex-direction: column; }
}
</style>
```

---

### Task 6: 创建 PaperListTab.vue

**Files:**
- Create: `src/components/exam/PaperListTab.vue`

- [ ] **Step 1: 创建完整的复用型列表组件**

```html
<template>
  <div class="plt-tab-body">
    <div v-if="loading" class="plt-state-msg">
      <div class="plt-spinner"></div>加载中...
    </div>
    <div v-else-if="papers.length === 0" class="plt-state-empty">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--border-dark)" stroke-width="1.2">
        <path v-if="mode === 'drafts'" d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
        <polyline points="13 2 13 9 20 9"/>
        <path v-else d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
      </svg>
      <h4>{{ mode === 'drafts' ? '暂无草稿' : '暂无已发布试卷' }}</h4>
      <p>{{ mode === 'drafts' ? '在「智能组卷」中生成并保存试卷' : '将草稿发布后可在此查看' }}</p>
    </div>
    <div v-else class="plt-paper-list">
      <div v-for="p in papers" :key="getId(p)" :class="['plt-paper-row', `plt-mode-${mode}`]">
        <div class="plt-paper-info">
          <div class="plt-title-row">
            <span class="plt-paper-name">{{ getPaperTitle(p) }}</span>
            <span :class="['plt-badge', mode]">{{ mode === 'drafts' ? '草稿' : '已发布' }}</span>
          </div>
          <div class="plt-meta">
            <span>{{ p.questionCount || p.question_count || p.questions?.length || 0 }} 题</span>
            <span>{{ p.totalScore || p.total_score || 0 }} 分</span>
            <span v-if="mode === 'drafts'">{{ p.createdAt || p.created_at || '-' }}</span>
          </div>
        </div>
        <div class="plt-paper-ops">
          <button class="plt-op-btn view" title="查看" @click="$emit('view', p)">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11-8-11-8z"/></svg>
          </button>
          <button v-if="mode === 'drafts'" class="plt-op-btn primary" title="发布" @click="$emit('publish', getId(p))">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
          </button>
          <button v-if="mode === 'drafts'" class="plt-op-btn danger" title="删除" @click="$emit('delete', getId(p))">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
          </button>
          <button v-if="mode === 'published'" class="plt-op-btn danger" title="撤回" @click="$emit('revoke', getId(p))">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 0 1 14.36 6.03L21 12"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  mode: { type: String, validator: v => ['drafts', 'published'].includes(v) },
  papers: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false }
})
defineEmits(['view', 'publish', 'delete', 'revoke'])

function getId(p) { return p?.id || p?.paperId || p?.paper_id || '' }
function getPaperTitle(p) { return p?.title || p?.paper_title || '未命名试卷' }
</script>

<style scoped>
.plt-tab-body { flex: 1; display: flex; flex-direction: column; min-height: 180px; }
.plt-state-msg, .plt-state-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 50px 20px; text-align: center; color: var(--text-disabled);
}
.plt-state-empty h4 { margin: 0; color: var(--text-secondary); font-size: var(--font-xl); }
.plt-state-empty p { margin: 0; font-size: var(--font-lg); }

.plt-paper-list { display: flex; flex-direction: column; gap: 8px; }
.plt-paper-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--bg-card);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
  border-left: 3px solid transparent;
}
.plt-paper-row:hover { border-color: var(--border-medium); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.plt-paper-row.plt-mode-drafts { border-left-color: var(--color-warning); }
.plt-paper-row.plt-mode-published { border-left-color: var(--color-success); }

.plt-paper-info { flex: 1; min-width: 0; }
.plt-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.plt-paper-name {
  font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plt-badge {
  padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs);
  font-weight: var(--weight-semibold); flex-shrink: 0;
}
.plt-badge.drafts { background: var(--bg-warning); color: var(--color-warning); border: 1px solid #FFE066; }
.plt-badge.published { background: var(--bg-success); color: var(--color-success); border: 1px solid #B2F2BB; }
.plt-meta { display: flex; gap: 12px; }
.plt-meta span { font-size: var(--font-md); color: var(--text-disabled); }

.plt-paper-ops { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 14px; }
.plt-op-btn {
  width: 30px; height: 30px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  background: var(--bg-card); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; color: var(--text-disabled);
  transition: all var(--transition-fast); padding: 0;
}
.plt-op-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-medium); }
.plt-op-btn.primary:hover { background: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary); }
.plt-op-btn.danger:hover { background: var(--bg-error); color: var(--color-error); border-color: var(--color-error); }

.plt-spinner {
  width: 26px; height: 26px; border: 3px solid var(--border-light);
  border-top-color: var(--text-primary); border-radius: 50%;
  animation: plt-spin .6s linear infinite;
}
@keyframes plt-spin { to { transform: rotate(360deg); } }
</style>
```

---

## Phase 3: 弹窗组件

### Task 7: 创建 EntityPickerModal.vue

**Files:**
- Create: `src/components/exam/EntityPickerModal.vue`

- [ ] **Step 1: 创建通用实体选择器弹窗（完整代码）**

```html
<template>
  <Teleport to="body">
    <div v-if="modelValue" class="epm-overlay" @click.self="$emit('update:modelValue', false)">
      <div class="epm-modal">
        <div class="epm-header">
          <h4>{{ title }}</h4>
          <button class="epm-close" @click="$emit('update:modelValue', false)">×</button>
        </div>
        <div class="epm-toolbar">
          <input class="epm-search" :placeholder="searchPlaceholder" :value="searchText"
            @input="$emit('update:search', $event.target.value)" />
          <button class="epm-toolbar-btn" @click="$emit('select-all')">全选</button>
          <button class="epm-toolbar-btn" @click="$emit('clear-all')">清空</button>
          <span class="epm-stat">已选 {{ selectedCount }}/{{ sourceList.length }}</span>
        </div>
        <div class="epm-body">
          <div v-if="loading" class="epm-loading"><div class="epm-spinner"></div>加载中...</div>
          <div v-else-if="sourceList.length === 0" class="epm-empty">暂无数据</div>
          <div v-else class="epm-list">
            <label v-for="item in sourceList" :key="item.id"
              :class="['epm-item', { checked: isSelected(item.id) }]">
              <input type="checkbox" :checked="isSelected(item.id)"
                @change="$emit('toggle', item)" />
              <span class="epm-item-name">{{ item.name }}</span>
              <span v-if="item.departmentName" class="epm-item-dept">{{ item.departmentName }}</span>
            </label>
          </div>
        </div>
        <div class="epm-footer">
          <button class="epm-btn ghost" @click="$emit('update:modelValue', false)">取消</button>
          <button class="epm-btn dark" @click="handleConfirm">确定</button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
const props = defineProps({
  modelValue: Boolean,
  type: { type: String, default: 'dept' },
  mode: { type: String, default: 'target' },
  sourceList: { type: Array, default: () => [] },
  selectedIds: { type: Set, default: () => new Set() },
  loading: { type: Boolean, default: false },
  searchPlaceholder: { type: String, default: '搜索...' },
  title: { type: String, default: '选择' },
  selectedCount: { type: Number, default: 0 },
  searchText: { type: String, default: '' }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'toggle', 'select-all', 'clear-all', 'update:search'])

function isSelected(id) { return props.selectedIds.has(id) }

function handleConfirm() {
  const items = props.sourceList.filter(item => props.selectedIds.has(item.id))
  emit('confirm', items)
  emit('update:modelValue', false)
}
</script>

<style scoped>
.epm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal);
}
.epm-modal {
  width: 480px; max-width: 92vw; max-height: 80vh;
  background: var(--bg-card); border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0,0,0,.15); display: flex; flex-direction: column;
}
.epm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light);
}
.epm-header h4 { margin: 0; font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--text-primary); }
.epm-close {
  width: 26px; height: 26px; border: none; background: var(--bg-hover); border-radius: var(--radius-sm);
  font-size: 17px; cursor: pointer; color: var(--text-disabled);
  display: flex; align-items: center; justify-content: center;
}
.epm-close:hover { background: var(--border-light); color: var(--text-primary); }

.epm-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-bottom: 1px solid var(--border-light); background: var(--bg-container);
}
.epm-search {
  flex: 1; padding: 5px 10px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); font-size: var(--font-md); outline: none; color: var(--text-primary);
}
.epm-search:focus { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--color-primary-alpha-15); }
.epm-toolbar-btn {
  padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-card); font-size: var(--font-xs); cursor: pointer; color: var(--text-secondary);
}
.epm-toolbar-btn:hover { background: var(--bg-active); }
.epm-stat { font-size: var(--font-xs); color: var(--text-disabled); white-space: nowrap; font-weight: var(--weight-medium); }

.epm-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 200px; }
.epm-loading, .epm-empty {
  padding: 30px; text-align: center; font-size: var(--font-md); color: var(--text-disabled);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.epm-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.epm-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  cursor: pointer; font-size: var(--font-lg); color: var(--text-secondary);
  transition: background var(--transition-fast);
}
.epm-item:hover { background: var(--bg-hover); }
.epm-item.checked { background: var(--bg-container); }
.epm-item input[type=checkbox] { accent-color: var(--text-primary); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.epm-item-name { flex: 1; line-height: 1.35; }
.epm-item-dept { font-size: var(--font-xs); color: var(--text-disabled); white-space: nowrap; }

.epm-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border-light); flex-shrink: 0;
}
.epm-btn {
  border-radius: var(--radius-md); padding: 0 14px; height: 30px;
  font-size: var(--font-md); font-weight: var(--weight-medium);
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.epm-btn.ghost { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-default); }
.epm-btn.ghost:hover { background: var(--bg-hover); }
.epm-btn.dark { background: var(--text-primary); color: var(--text-inverse); }
.epm-btn.dark:hover:not(:disabled) { background: var(--color-primary-active); }

.epm-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border-light);
  border-top-color: var(--text-primary); border-radius: 50%;
  animation: epm-spin .6s linear infinite;
}
@keyframes epm-spin { to { transform: rotate(360deg); } }
</style>
```

---

### Task 8: 创建 PublishDialog.vue

**Files:**
- Create: `src/components/exam/PublishDialog.vue`

- [ ] **Step 1: 创建发布弹窗组件（完整代码，内嵌 EntityPickerModal）**

> 此组件较大（~320 行），核心结构：
> - 左列：目标部门选择器 + 发布时间 + 截止时间
> - 右列：用户范围模式切换 + 目标/排除用户选择器
> - 底部：取消/确认按钮
> - 内嵌 EntityPickerModal 用于部门/用户选择
> - 所有状态和方法通过 props 从父组件传入或内部管理

> 由于此组件代码量较大，完整内容见实施时的实际写入。关键点：
> - 使用 `usePaperManagement` 中的 `pub`, `pubUI`, `pickerDialog` 等状态
> - 调用 EntityPickerModal 时传递 `sourceList` 和 `selectedIds`
> - 两列 Grid 布局 `grid-template-columns: 1fr 1fr`
> - 时间使用 `<input type="datetime-local">` 原生控件
> - 全部样式使用 design-tokens

---

### Task 9: 创建 PaperDetailModal.vue

**Files:**
- Create: `src/components/exam/PaperDetailModal.vue`

- [ ] **Step 1: 创建试卷详情弹窗组件**

> 核心要点：
> - Props: `modelValue` (Boolean), `rawData` (Object|null)
> - 使用 `useQuestionParser()` 解析 rawData → 得到 `previewQuestions[]`
> - 展示区块：发布信息 → 概要行 → 题目列表（每题含选项/答案/解析/难度）
> - Fallback 区：当解析失败时展示原始 JSON
> - 解析区样式：`background: var(--bg-warning)` 黄色背景块
> - 正确选项：`border-left-color: var(--color-success)` 绿色左边框

> 注意：`viewPaperDetail()` 的完整数据解析逻辑（原 L1237-1567）需要整合到此组件或其调用的 composable 方法中。建议将此方法放入 `usePaperManagement.js` 中作为 `viewPaperDetail(data)` 方法，然后在 PaperDetailModal 中 watch `rawData` 变化时自动调用解析。

---

## Phase 4: 主容器整合

### Task 10: 重写 PaperManagementPanel.vue 为薄容器

**Files:**
- Modify: `src/components/exam/PaperManagementPanel.vue` (完全重写)

- [ ] **Step 1: 备份原文件并重写为薄容器**

将原 2235 行文件重写为 ~100 行的薄容器：

```html
<template>
  <div class="pmp-panel">
    <PageHeader title="智能组卷" description="从知识库文件中选题，一键生成、保存与发布试卷" />

    <div class="pmp-tabs">
      <button v-for="tab in tabs" :key="tab.key"
        :class="['pmp-tab-btn', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)">
        <span class="pmp-tab-icon" v-html="tab.icon"></span>
        <span class="pmp-tab-label">{{ tab.label }}</span>
        <span v-if="tab.key === 'drafts' && drafts.length" class="pmp-tab-badge">{{ drafts.length }}</span>
        <span v-if="tab.key === 'published' && publishedPapers.length" class="pmp-tab-badge published">{{ publishedPapers.length }}</span>
      </button>
    </div>

    <ComposePanel v-if="activeTab === 'compose'"
      :form="composeForm" :selected-files="selectedFiles" :all-files="allFiles"
      :loading-files="loadingFiles" :show-file-picker="showFilePicker"
      :total-count="totalCount" :composing="composing"
      :result="composeResult" :total-score="totalPaperScore"
      @generate="handleGeneratePaper" @save="handleSavePaper"
      @toggle-file="toggleFile" @remove-file="removeFile" @open-picker="openFilePicker"
    />

    <PaperListTab v-else-if="activeTab === 'drafts'" mode="drafts"
      :papers="drafts" :loading="loadingDrafts"
      @view="viewPaperDetailWrapper" @publish="openPublishDialog" @delete="deleteDraft"
    />

    <PaperListTab v-else-if="activeTab === 'published'" mode="published"
      :papers="publishedPapers" :loading="loadingDrafts"
      @view="viewPaperDetailWrapper" @revoke="revokePublishedPaper"
    />

    <PaperDetailModal v-model="detailVisible" :raw-data="previewRaw" />
    <PublishDialog v-model="publishVisible" :paper-id="pubPaperId" @confirm="confirmPublish" />
  </div>
</template>

<script setup>
import PageHeader from '../common/PageHeader.vue'
import ComposePanel from './ComposePanel.vue'
import PaperListTab from './PaperListTab.vue'
import PaperDetailModal from './PaperDetailModal.vue'
import PublishDialog from './PublishDialog.vue'
import { usePaperManagement } from './composables/usePaperManagement.js'

const {
  activeTab, tabs, switchTab,
  drafts, publishedPapers, loadingDrafts,
  composeForm, composing, composeResult, totalCount, totalPaperScore,
  selectedFiles, allFiles, loadingFiles, showFilePicker,
  handleGeneratePaper, handleSavePaper, toggleFile, removeFile, openFilePicker,
  deleteDraft, revokePublishedPaper,
  detailVisible, previewRaw, publishVisible, pubPaperId,
  openPublishDialog, confirmPublish, viewPaperDetail, clearPreview
} = usePaperManagement()

function viewPaperDetailWrapper(p) { viewPaperDetail(getId(p)) }
</script>

<style scoped>
.pmp-panel {
  flex: 1; display: flex; flex-direction: column;
  padding: var(--space-xl); overflow-y: auto; overflow-x: hidden; min-width: 0; gap: 14px;
}
.pmp-tabs {
  display: flex; gap: 4px; background: var(--bg-container);
  border-radius: var(--radius-lg); padding: 4px; border: 1px solid var(--border-light);
}
.pmp-tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border: none; background: transparent; border-radius: var(--radius-md);
  font-size: var(--font-xl); font-weight: var(--weight-medium); color: var(--text-disabled);
  cursor: pointer; transition: all var(--transition-normal); white-space: nowrap;
}
.pmp-tab-btn:hover:not(.active) { color: var(--text-secondary); background: rgba(0,0,0,.03); }
.pmp-tab-btn.active {
  background: var(--bg-card); color: var(--text-primary); font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}
.pmp-tab-icon { display: flex; opacity: .7; }
.pmp-tab-btn.active .pmp-tab-icon { opacity: 1; }
.pmp-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--border-light); color: var(--text-secondary); border-radius: 10px;
  font-size: var(--font-xs); font-weight: var(--weight-bold);
}
.pmp-tab-btn.active .pmp-tab-badge { background: var(--text-primary); color: var(--text-inverse); }
.pmp-tab-badge.published { background: var(--bg-success); color: var(--color-success); }
.pmp-tab-btn.active .pmp-badge.published { background: var(--color-success); color: var(--text-inverse); }
</style>
```

- [ ] **Step 2: 验证重写后的文件完整性**

确认新文件包含所有必要的 import、props 绑定、事件转发。

---

## Phase 5: 验证

### Task 11: 构建验证与回归测试

**Files:** 无新建文件

- [ ] **Step 1: 运行前端构建验证**

Run: `npm run build`
Expected: 构建成功（3644 modules transformed），零编译错误

- [ ] **Step 2: VS Code 诊断检查**

对所有新建/修改的 `.vue` 和 `.js` 文件运行 GetDiagnostics，确认零错误。

- [ ] **Step 3: 功能清单验证**

逐一确认以下功能路径不受影响：
- [ ] 智能组卷 Tab → 选择文件 → 设置难度 → 配置题型数量 → 生成试卷 → 预览显示 → 保存为草稿
- [ ] 我的草稿 Tab → 显示草稿列表 → 查看详情 → 发布 → 删除
- [ ] 已发布试卷 Tab → 显示已发布列表 → 查看详情 → 撤回
- [ ] 发布弹窗 → 选择部门 → 选择用户 → 设置时间 → 确认发布
- [ ] 详情弹窗 → 显示题目列表 → 选项正确标记 → 解析展示 → Fallback 兜底
- [ ] 移动端响应式布局（≤767px）

- [ ] **Step 4: 清理验证**

确认以下清理项已完成：
- [ ] 原 PaperManagementPanel.vue 中不再有硬编码颜色值（全部替换为 CSS 变量）
- [ ] 不再有残留的 console.log/console.warn 调试语句
- [ ] 不再有 TrainingPanel/错题本相关的冗余 CSS 类
- [ ] 新组件均使用 BEM 命名规范和 design-tokens

---

## 自检清单

### Spec 覆盖度

| 设计文档章节 | 对应 Task | 状态 |
|------------|----------|------|
| §2.1 文件结构（9个文件） | Tasks 1-10 | ✅ |
| §2.2 组件树与数据流 | Task 10 | ✅ |
| §3.1 PaperManagementPanel 主容器 | Task 10 | ✅ |
| §3.2 ComposeConfigSidebar 配置栏 | Task 3 | ✅ |
| §3.3 ComposePreviewPane 预览区 | Task 4 | ✅ |
| §3.4 PaperListTab 列表组件 | Task 6 | ✅ |
| §3.5 PaperDetailModal 详情弹窗 | Task 9 | ✅ |
| §3.6 PublishDialog 发布弹窗 | Task 8 | ✅ |
| §3.7 EntityPickerModal 选择器 | Task 7 | ✅ |
| §4.1 usePaperManagement 状态中心 | Task 2 | ✅ |
| §4.2 useQuestionParser 解析工具 | Task 1 | ✅ |
| §5.1 Design Token 映射表 | All Tasks (CSS) | ✅ |
| §5.2 BEM 命名规范 | All Tasks (CSS) | ✅ |
| §5.3 响应式断点 | Tasks 3,4,6,10 (CSS) | ✅ |
| §5.4 清理项（console.log/冗余CSS） | Task 11 | ✅ |

### 占位符扫描

- [ ] 无 TBD/TODO 占位符
- [ ] 无 "类似 Task N" 引用（每个任务包含完整代码）
- [ ] 无 "添加适当的错误处理" 含糊描述

### 类型一致性

- [ ] `usePaperManagement` 导出名称在 Task 2 定义，Task 10 使用一致
- [ ] 组件 Props 接口在设计文档 §3 中定义，Task 中实现一致
- [ ] CSS 变量名引用 `design-tokens.css` 中实际存在的变量名