From ee28465c30d217eecd1d42af4121813399dc430b Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Mon, 20 Jul 2026 17:20:40 +0800
Subject: [PATCH] feat(mobile): redesign supervisor exam list, results and edit
 pages

---
 .../src/pages/supervisor/exams/edit.vue       | 743 +++++++++++++++---
 .../src/pages/supervisor/exams/index.vue      | 403 +++++++++-
 .../src/pages/supervisor/exams/results.vue    | 394 +++++++++-
 3 files changed, 1397 insertions(+), 143 deletions(-)

diff --git a/mobile-uni/src/pages/supervisor/exams/edit.vue b/mobile-uni/src/pages/supervisor/exams/edit.vue
index dd3a28e3..397fbbdc 100644
--- a/mobile-uni/src/pages/supervisor/exams/edit.vue
+++ b/mobile-uni/src/pages/supervisor/exams/edit.vue
@@ -1,64 +1,129 @@
 <template>
   <view class="page exam-edit-page">
     <view class="subpage-header">
-      <button class="subpage-back-button" aria-label="返回考试列表" :disabled="saving" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button>
-      <view class="subpage-heading"><text class="page-title">{{ examId ? '编辑考试' : '新建考试' }}</text><text class="page-subtitle">发布后冻结题目版本，已派发试卷不随草稿变化。</text></view>
+      <button class="subpage-back-button" aria-label="返回考试列表" title="返回考试列表" :disabled="saving" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button>
+      <view class="subpage-heading">
+        <text class="page-title">{{ examId ? '编辑考试' : '新建考试' }}</text>
+        <text class="page-subtitle">发布后冻结题目版本，已派发试卷不随草稿变化</text>
+      </view>
     </view>
     <text v-if="message" class="status-message">{{ message }}</text>
 
-    <view class="panel form-panel">
-      <label class="field-label">考试名称</label>
-      <input v-model="title" class="input" maxlength="80" placeholder="例如：生活顾问岗前基础测试" />
-      <label class="field-label">适用岗位</label>
-      <picker :range="positions" :value="positionIndex" @change="selectPosition"><view class="input picker-value">{{ positions[positionIndex] }}</view></picker>
-      <label class="field-label">及格分</label>
-      <input v-model.number="passingScore" class="input" type="number" />
-      <label class="field-label">截止日期</label>
-      <picker mode="date" :value="dueDate" :start="today" @change="selectDueDate"><view class="input picker-value">{{ dueDate }}</view></picker>
-      <view class="quick-row"><button v-for="item in quickDates" :key="item.days" class="quick-chip" @click="setDueDate(item.days)">{{ item.label }}</button></view>
+    <view class="panel info-panel">
+      <text class="panel-title">基本信息</text>
+      <view class="info-row">
+        <text class="info-label">考试名称</text>
+        <input v-model="title" class="info-input" maxlength="80" placeholder="例如：生活顾问岗前基础测试" />
+      </view>
+      <view class="info-row">
+        <text class="info-label">岗位</text>
+        <picker :range="positions" :value="positionIndex" @change="selectPosition">
+          <view class="info-picker">
+            <text class="info-value">{{ positions[positionIndex] }}</text>
+            <text class="info-arrow">›</text>
+          </view>
+        </picker>
+      </view>
+      <view class="info-row">
+        <text class="info-label">及格分数</text>
+        <view class="info-picker">
+          <input v-model.number="passingScore" class="info-input score-input" type="number" />
+          <text class="info-suffix">分</text>
+        </view>
+      </view>
+      <view class="info-row last">
+        <text class="info-label">截止日期</text>
+        <picker mode="date" :value="dueDate" :start="today" @change="selectDueDate">
+          <view class="info-picker">
+            <text class="info-value">{{ dueDate }}</text>
+            <text class="info-arrow">›</text>
+          </view>
+        </picker>
+      </view>
     </view>
 
-    <view class="panel">
-      <view class="section-head"><text class="panel-title">考试对象</text><text class="muted">已选 {{ selectedMemberIds.length }} 人</text></view>
-      <view class="member-actions"><button class="ghost-button" @click="selectAll">全选前100人</button><button class="secondary-button" @click="selectedMemberIds = []">清空</button></view>
-      <scroll-view class="member-list" scroll-y>
-        <button v-for="member in members" :key="member.extPartyId" class="member-row" :class="{ selected: selectedMemberIds.includes(member.extPartyId) }" @click="toggleMember(member.extPartyId)">
-          <text class="member-check">{{ selectedMemberIds.includes(member.extPartyId) ? '✓' : '' }}</text><text>{{ member.name || '未命名员工' }}</text>
-        </button>
+    <view class="panel target-panel">
+      <view class="section-head">
+        <text class="panel-title">考试对象</text>
+        <view class="head-actions">
+          <button class="text-button" @click="selectAll">全选</button>
+          <button class="text-button" :disabled="!selectedMemberIds.length" @click="selectedMemberIds = []">清空</button>
+        </view>
+      </view>
+      <text class="selected-count">已选 {{ selectedMemberIds.length }} 人</text>
+      <scroll-view v-if="members.length" class="member-list" scroll-y>
+        <view class="member-chip-wrap">
+          <button
+            v-for="member in members"
+            :key="member.extPartyId"
+            class="member-option"
+            :class="{ selected: selectedMemberIds.includes(member.extPartyId) }"
+            :aria-pressed="selectedMemberIds.includes(member.extPartyId)"
+            @click="toggleMember(member.extPartyId)"
+          >
+            <text class="member-check" aria-hidden="true">{{ selectedMemberIds.includes(member.extPartyId) ? '✓' : '' }}</text>
+            <text class="member-name">{{ member.name || '未命名员工' }}</text>
+          </button>
+        </view>
       </scroll-view>
-      <text v-if="!members.length" class="muted">当前项目暂无可派发的在职员工。</text>
+      <text v-else class="muted block">当前项目暂无可派发的在职员工。</text>
     </view>
 
     <view class="panel ai-panel">
-      <view class="section-head"><text class="panel-title">AI 出题</text></view>
-      <text class="muted">输入考察提示，AI 按岗位生成题目与答案，请逐题核对后发布</text>
-      <input v-model="aiHints" class="input" maxlength="120" placeholder="例如：投诉接待、停车费催缴、电梯故障应对" />
-      <view class="quick-row ai-chip-row"><button v-for="hint in aiHintPresets" :key="hint" class="quick-chip ai-chip" @click="appendAiHint(hint)">{{ hint }}</button></view>
-      <view class="quick-row ai-chip-row"><button v-for="option in aiCountOptions" :key="option" class="quick-chip ai-chip" :class="{ active: aiCount === option }" @click="aiCount = option">{{ option }} 题</button></view>
-      <button class="primary-button ai-generate-button" :disabled="saving || aiGenerating" @click="generateAiQuestions">{{ aiGenerating ? '生成中…约需10-30秒' : 'AI 生成题目' }}</button>
+      <text class="panel-title">AI 出题</text>
+      <text class="muted block-sm">输入考察提示，AI 按岗位生成题目与答案，请逐题核对后发布</text>
+      <input v-model="aiHints" class="input ai-hints-input" maxlength="120" placeholder="例如：投诉接待、催费沟通、电梯故障" />
+      <view class="ai-chip-row">
+        <button v-for="hint in aiHintPresets" :key="hint" class="quick-chip ai-chip" @click="appendAiHint(hint)">{{ hint }}</button>
+      </view>
+      <view class="ai-count-row">
+        <button v-for="option in aiCountOptions" :key="option" class="count-chip" :class="{ active: aiCount === option }" @click="aiCount = option">{{ option }}题</button>
+      </view>
+      <button class="ai-generate-button" :disabled="saving || aiGenerating" @click="generateAiQuestions">
+        {{ aiGenerating ? '生成中…约需10-30秒' : '✦ AI 生成题目' }}
+      </button>
     </view>
 
-    <view class="panel question-editor">
-      <view class="section-head"><text class="panel-title">题目（{{ questions.length }}）· 共 {{ totalScore }} 分</text><button class="ghost-button compact-button" @click="addQuestion">添加题目</button></view>
+    <view class="panel question-panel">
+      <view class="section-head">
+        <text class="panel-title">题目预览</text>
+        <button class="text-button" @click="addQuestion">添加题目</button>
+      </view>
+      <text class="question-summary">{{ questions.length }}题 · 共{{ totalScore }}分</text>
       <text v-if="totalScore !== 100" class="score-warning">发布前题目分值合计必须为 100 分</text>
-      <view v-for="(item, index) in questions" :key="item.id" class="question-block">
-        <view class="question-block-head"><text>第 {{ index + 1 }} 题</text><button class="remove-button" :disabled="questions.length === 1" @click="removeQuestion(index)">删除</button></view>
-        <textarea v-model="item.stem" class="textarea stem-input" maxlength="500" placeholder="输入题干" />
-        <picker :range="formats.map((value) => value.label)" :value="formatIndex(item.format)" @change="selectFormat(index, $event)"><view class="input picker-value">{{ formatLabel(item.format) }}</view></picker>
-        <label class="field-label">本题分值</label>
-        <input v-model.number="item.score" class="input" type="number" />
-        <template v-if="item.format !== 'short'">
-          <input v-for="(_, optionIndex) in item.options" :key="optionIndex" v-model="item.options[optionIndex]" class="input" :placeholder="`选项 ${optionIndex + 1}`" />
-          <input v-model="singleAnswerModels[index]" class="input" placeholder="正确答案（与选项文字一致，多选用｜分隔）" @input="syncAnswer(index)" />
-        </template>
-        <textarea v-else v-model="singleAnswerModels[index]" class="textarea compact-textarea" placeholder="参考答案" @input="syncAnswer(index)" />
-        <textarea v-model="item.explanation" class="textarea compact-textarea" placeholder="参考依据 / SOP 要点" />
+      <view class="question-list">
+        <view v-for="(item, index) in questions" :key="item.id" class="question-item">
+          <view class="question-row" @click="toggleQuestion(index)">
+            <text class="question-stem">{{ index + 1 }}. {{ item.stem || '未填写题干' }}</text>
+            <text class="question-meta">{{ formatLabel(item.format) }} · {{ item.score }}分</text>
+            <text class="question-arrow">{{ expandedIndex === index ? '⌄' : '›' }}</text>
+          </view>
+          <view v-if="expandedIndex === index" class="question-editor">
+            <textarea v-model="item.stem" class="textarea stem-input" maxlength="500" placeholder="输入题干" />
+            <view class="editor-grid">
+              <picker :range="formats.map((value) => value.label)" :value="formatIndex(item.format)" @change="selectFormat(index, $event)">
+                <view class="input picker-value">{{ formatLabel(item.format) }}</view>
+              </picker>
+              <view class="score-field">
+                <input v-model.number="item.score" class="input" type="number" />
+                <text class="score-suffix">分</text>
+              </view>
+            </view>
+            <template v-if="item.format !== 'short'">
+              <input v-for="(_, optionIndex) in item.options" :key="optionIndex" v-model="item.options[optionIndex]" class="input" :placeholder="`选项 ${optionIndex + 1}`" />
+              <input v-model="singleAnswerModels[index]" class="input" placeholder="正确答案（与选项文字一致，多选用｜分隔）" @input="syncAnswer(index)" />
+            </template>
+            <textarea v-else v-model="singleAnswerModels[index]" class="textarea compact-textarea" placeholder="参考答案" @input="syncAnswer(index)" />
+            <textarea v-model="item.explanation" class="textarea compact-textarea" placeholder="参考依据 / SOP 要点" />
+            <button class="remove-button" :disabled="questions.length === 1" @click="removeQuestion(index)">删除本题</button>
+          </view>
+        </view>
       </view>
     </view>
 
     <view class="publish-dock">
-      <button class="secondary-button" :disabled="saving || !valid" @click="save(false)">{{ saving ? '保存中' : '保存草稿' }}</button>
-      <button class="primary-button" :disabled="saving || !valid || !selectedMemberIds.length" @click="save(true)">{{ saving ? '发布中' : `发布给 ${selectedMemberIds.length} 人` }}</button>
+      <button class="dock-secondary" :disabled="saving || !valid" @click="save(false)">{{ saving ? '保存中' : '保存草稿' }}</button>
+      <button class="dock-primary" :disabled="saving || !valid || !selectedMemberIds.length" @click="save(true)">{{ saving ? '发布中' : `发布给 ${selectedMemberIds.length} 人` }}</button>
     </view>
     <SupervisorTabBar active="team" />
   </view>
@@ -74,17 +139,27 @@ import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
 
 const positions = ['生活顾问', '客服', '保安', '保洁', '保修'];
 const formats = [{ key: 'single', label: '单选题' }, { key: 'multiple', label: '多选题' }, { key: 'judge', label: '判断题' }, { key: 'short', label: '简答题' }];
-const quickDates = [{ label: '当天', days: 0 }, { label: '明天', days: 1 }, { label: '3天内', days: 3 }, { label: '7天内', days: 7 }];
-const examId = ref(0); const title = ref(''); const positionIndex = ref(0); const passingScore = ref(80); const dueDate = ref('');
-const members = ref<PracticeTeamMember[]>([]); const selectedMemberIds = ref<string[]>([]); const questions = ref<ExamQuestion[]>([]); const singleAnswerModels = ref<string[]>([]);
-const saving = ref(false); const message = ref('');
-const aiHints = ref(''); const aiCount = ref(5); const aiGenerating = ref(false);
+const examId = ref(0);
+const title = ref('');
+const positionIndex = ref(0);
+const passingScore = ref(80);
+const dueDate = ref('');
+const members = ref<PracticeTeamMember[]>([]);
+const selectedMemberIds = ref<string[]>([]);
+const questions = ref<ExamQuestion[]>([]);
+const singleAnswerModels = ref<string[]>([]);
+const expandedIndex = ref(0);
+const saving = ref(false);
+const message = ref('');
+const aiHints = ref('');
+const aiCount = ref(8);
+const aiGenerating = ref(false);
 const aiHintPresets = ['投诉接待', '催缴沟通', '电梯故障', '服务态度', '消防安全'];
 const aiCountOptions = [5, 8, 10];
-const formatDate = (date: Date) => `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
-const dateAfter = (days: number) => { const date = new Date(); date.setHours(12,0,0,0); date.setDate(date.getDate()+days); return formatDate(date); };
+const formatDate = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+const dateAfter = (days: number) => { const date = new Date(); date.setHours(12, 0, 0, 0); date.setDate(date.getDate() + days); return formatDate(date); };
 const today = dateAfter(0);
-const requestId = () => `exam-publish:${examId.value || 'new'}:${Date.now()}:${Math.random().toString(36).slice(2,8)}`;
+const requestId = () => `exam-publish:${examId.value || 'new'}:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
 const totalScore = computed(() => questions.value.reduce((sum, item) => sum + Number(item.score || 0), 0));
 const valid = computed(() => title.value.trim().length >= 4
   && passingScore.value > 0 && passingScore.value <= 100
@@ -94,44 +169,72 @@ const valid = computed(() => title.value.trim().length >= 4
     && Number(item.score) > 0
     && singleAnswerModels.value[index]?.trim()
     && (item.format === 'short' || item.options.filter((option) => option.trim()).length >= 2)));
-const goBack = () => uni.navigateBack({ delta: 1 });
+const goBack = () => uni.navigateBack({ delta: 1, fail: () => uni.redirectTo({ url: '/pages/supervisor/exams/index' }) });
 const selectPosition = (event: { detail: { value: string } }) => { positionIndex.value = Number(event.detail.value || 0); };
 const selectDueDate = (event: { detail: { value: string } }) => { dueDate.value = event.detail.value; };
-const setDueDate = (days: number) => { dueDate.value = dateAfter(days); };
 const formatIndex = (value: string) => Math.max(0, formats.findIndex((item) => item.key === value));
 const formatLabel = (value: string) => formats.find((item) => item.key === value)?.label || '单选题';
-const newQuestion = (): ExamQuestion => ({ id: Date.now() + Math.floor(Math.random()*1000), format: 'single', stem: '', options: ['', '', '', ''], score: 100, answer: '', explanation: '' });
+const newQuestion = (): ExamQuestion => ({ id: Date.now() + Math.floor(Math.random() * 1000), format: 'single', stem: '', options: ['', '', '', ''], score: 100, answer: '', explanation: '' });
 const rebalanceScores = () => {
   const count = questions.value.length;
   if (!count) return;
   const base = Math.floor(100 / count);
   questions.value.forEach((item, index) => { item.score = index === count - 1 ? 100 - base * (count - 1) : base; });
 };
-const addQuestion = () => { questions.value.push(newQuestion()); singleAnswerModels.value.push(''); rebalanceScores(); };
-const removeQuestion = (index: number) => { questions.value.splice(index,1); singleAnswerModels.value.splice(index,1); rebalanceScores(); };
-const selectFormat = (index: number, event: { detail: { value: string } }) => {
-  const format = formats[Number(event.detail.value || 0)]?.key || 'single'; questions.value[index].format = format;
-  questions.value[index].options = format === 'short' ? [] : format === 'judge' ? ['正确','错误'] : (questions.value[index].options.length ? questions.value[index].options : ['','','','']);
+const addQuestion = () => {
+  questions.value.push(newQuestion());
+  singleAnswerModels.value.push('');
+  rebalanceScores();
+  expandedIndex.value = questions.value.length - 1;
 };
-const syncAnswer = (index: number) => { questions.value[index].answer = questions.value[index].format === 'multiple' ? singleAnswerModels.value[index].split('｜').map((value) => value.trim()).filter(Boolean) : singleAnswerModels.value[index]; };
-const toggleMember = (id: string) => { selectedMemberIds.value = selectedMemberIds.value.includes(id) ? selectedMemberIds.value.filter((item) => item !== id) : selectedMemberIds.value.length < 100 ? [...selectedMemberIds.value,id] : selectedMemberIds.value; };
-const selectAll = () => { selectedMemberIds.value = members.value.slice(0,100).map((item) => item.extPartyId); };
+const removeQuestion = (index: number) => {
+  questions.value.splice(index, 1);
+  singleAnswerModels.value.splice(index, 1);
+  rebalanceScores();
+  expandedIndex.value = Math.min(expandedIndex.value, questions.value.length - 1);
+};
+const toggleQuestion = (index: number) => {
+  expandedIndex.value = expandedIndex.value === index ? -1 : index;
+};
+const selectFormat = (index: number, event: { detail: { value: string } }) => {
+  const format = formats[Number(event.detail.value || 0)]?.key || 'single';
+  questions.value[index].format = format;
+  questions.value[index].options = format === 'short' ? [] : format === 'judge' ? ['正确', '错误'] : (questions.value[index].options.length ? questions.value[index].options : ['', '', '', '']);
+};
+const syncAnswer = (index: number) => {
+  questions.value[index].answer = questions.value[index].format === 'multiple'
+    ? singleAnswerModels.value[index].split('｜').map((value) => value.trim()).filter(Boolean)
+    : singleAnswerModels.value[index];
+};
+const toggleMember = (id: string) => {
+  selectedMemberIds.value = selectedMemberIds.value.includes(id)
+    ? selectedMemberIds.value.filter((item) => item !== id)
+    : selectedMemberIds.value.length < 100 ? [...selectedMemberIds.value, id] : selectedMemberIds.value;
+};
+const selectAll = () => { selectedMemberIds.value = members.value.slice(0, 100).map((item) => item.extPartyId); };
 const appendAiHint = (hint: string) => {
   const parts = aiHints.value.split(/[、，,\s]+/).map((value) => value.trim()).filter(Boolean);
   if (!parts.includes(hint)) parts.push(hint);
   aiHints.value = parts.join('、');
 };
 const generateAiQuestions = async () => {
-  if (saving.value || aiGenerating.value) return; aiGenerating.value = true; message.value = '';
+  if (saving.value || aiGenerating.value) return;
+  aiGenerating.value = true;
+  message.value = '';
   try {
-    const result = await generateSupervisorExamQuestions({ positionCode: positions[positionIndex.value], hints: aiHints.value.trim(), count: aiCount.value, formats: ['single','multiple','judge'] });
+    const result = await generateSupervisorExamQuestions({ positionCode: positions[positionIndex.value], hints: aiHints.value.trim(), count: aiCount.value, formats: ['single', 'multiple', 'judge'] });
     questions.value = result.questions;
     singleAnswerModels.value = result.questions.map((item) => Array.isArray(item.answer) ? item.answer.join('｜') : String(item.answer || ''));
+    expandedIndex.value = -1;
     message.value = result.groundedFragments > 0
       ? `已生成 ${result.questions.length} 题（参考 ${result.groundedFragments} 条 SOP 片段），请逐题核对修改后再发布`
       : `已生成 ${result.questions.length} 题，请逐题核对修改后再发布`;
-    uni.pageScrollTo({ selector: '.question-editor', duration: 200 });
-  } catch (error) { message.value = error instanceof Error ? error.message : 'AI 出题失败，请稍后重试'; } finally { aiGenerating.value = false; }
+    uni.pageScrollTo({ selector: '.question-panel', duration: 200 });
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : 'AI 出题失败，请稍后重试';
+  } finally {
+    aiGenerating.value = false;
+  }
 };
 const draft = (): SupervisorExamDraft => ({
   title: title.value.trim(),
@@ -150,56 +253,496 @@ const draft = (): SupervisorExamDraft => ({
   }))
 });
 const save = async (publish: boolean) => {
-  if (!valid.value || saving.value) return; saving.value = true; message.value = '';
+  if (!valid.value || saving.value) return;
+  saving.value = true;
+  message.value = '';
   try {
-    const saved = examId.value ? await updateSupervisorExam(examId.value, draft()) : await saveSupervisorExam(draft()); examId.value = saved.id;
-    if (publish) { await publishSupervisorExam(saved.id, requestId()); uni.showToast({ title: '考试已发布', icon: 'none' }); setTimeout(goBack,350); }
-    else message.value = '草稿已保存';
-  } catch (error) { message.value = error instanceof Error ? error.message : '考试保存失败'; } finally { saving.value = false; }
+    const saved = examId.value ? await updateSupervisorExam(examId.value, draft()) : await saveSupervisorExam(draft());
+    examId.value = saved.id;
+    if (publish) {
+      await publishSupervisorExam(saved.id, requestId());
+      uni.showToast({ title: '考试已发布', icon: 'none' });
+      setTimeout(goBack, 350);
+    } else {
+      message.value = '草稿已保存';
+    }
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : '考试保存失败';
+  } finally {
+    saving.value = false;
+  }
 };
 const load = async () => {
   try {
-    const team = await getPracticeTeamSnapshot(); members.value = team.members || [];
+    const team = await getPracticeTeamSnapshot();
+    members.value = team.members || [];
     if (examId.value) {
       const existing = await getSupervisorExam(examId.value);
       title.value = existing.title;
       positionIndex.value = Math.max(0, positions.indexOf(existing.positionCode || '生活顾问'));
       passingScore.value = existing.passingScore;
-      dueDate.value = existing.dueDate?.slice(0,10) || dateAfter(1);
+      dueDate.value = existing.dueDate?.slice(0, 10) || dateAfter(1);
       questions.value = existing.questions;
       singleAnswerModels.value = existing.questions.map((item) => Array.isArray(item.answer) ? item.answer.join('｜') : String(item.answer || ''));
       selectedMemberIds.value = existing.targets.map((item) => item.extPartyId);
-    } else { dueDate.value = dateAfter(1); addQuestion(); }
-  } catch (error) { message.value = error instanceof Error ? error.message : '考试配置加载失败'; }
+      expandedIndex.value = -1;
+    } else {
+      dueDate.value = dateAfter(1);
+      addQuestion();
+    }
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : '考试配置加载失败';
+  }
 };
 onLoad((options) => { examId.value = Number(options?.id || 0); void load(); });
 </script>
 
 <style scoped>
-.exam-edit-page { max-width: var(--mobile-shell-max-width); margin: 0 auto; padding-bottom: 190px; }
-.status-message { display:block; margin-top:12px; color:#a9000d; }
-.form-panel,.question-editor { display:grid; gap:10px; }
-.field-label { display:block; margin-top:4px; font-size:13px; font-weight:900; }
-.picker-value { display:flex; align-items:center; }
-.two-column { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
-.quick-row,.member-actions,.section-head,.question-block-head { display:flex; gap:8px; align-items:center; justify-content:space-between; }
-.quick-chip { min-height:36px; padding:0 12px; border:1px solid var(--line); background:#fff; color:var(--muted); }
-.member-actions button { flex:1; min-width:0; margin-top:10px; white-space:nowrap; }
-.member-list { max-height:260px; margin-top:10px; }
-.member-row { display:flex; width:100%; gap:10px; min-height:46px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; }
-.member-row.selected { background:var(--employee-primary-soft); }
-.member-check { flex:0 0 24px; color:var(--brand); font-weight:900; }
-.compact-button { min-height:36px; padding:0 10px; font-size:12px; }
-.question-block { display:grid; gap:9px; padding:14px 0; border-top:1px solid var(--line); }
-.question-block-head { font-weight:900; }
-.remove-button { background:transparent; color:var(--brand); font-size:13px; }
-.stem-input { min-height:96px; }
-.compact-textarea { min-height:82px; }
-.score-warning { color:#a86100; font-size:12px; font-weight:800; }
-.publish-dock { position:fixed; z-index:10; right:0; bottom:calc(76px + env(safe-area-inset-bottom)); left:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:var(--mobile-shell-max-width); margin:0 auto; padding:12px 16px; border-top:1px solid var(--line); background:rgba(255,255,255,.97); }
-.ai-panel { display:grid; gap:10px; }
-.ai-chip-row { justify-content:flex-start; flex-wrap:wrap; }
-.ai-chip { display:flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; line-height:1; }
-.ai-chip.active { border-color:var(--brand); color:var(--brand); font-weight:900; }
-.ai-generate-button { display:flex; align-items:center; justify-content:center; min-height:44px; line-height:1; }
+.exam-edit-page {
+  padding-bottom: 190px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
+}
+
+.subpage-header {
+  align-items: center;
+}
+
+.status-message {
+  display: block;
+  margin-top: 12px;
+  color: #a9000d;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.info-panel,
+.target-panel,
+.ai-panel,
+.question-panel {
+  margin-top: 14px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.text-button {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  background: transparent;
+  color: var(--employee-primary);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.text-button::after {
+  border: 0;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 46px;
+  border-bottom: 1px solid #e5edf7;
+}
+
+.info-row.last {
+  border-bottom: 0;
+}
+
+.info-label {
+  flex: 0 0 auto;
+  color: var(--employee-muted);
+  font-size: 14px;
+}
+
+.info-input {
+  min-width: 0;
+  flex: 1;
+  color: var(--employee-text);
+  font-size: 14px;
+  text-align: right;
+}
+
+.info-picker {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.info-value {
+  color: var(--employee-text);
+  font-size: 14px;
+}
+
+.info-arrow {
+  color: #c0c4cc;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.info-suffix {
+  flex: 0 0 auto;
+  color: var(--employee-muted);
+  font-size: 13px;
+}
+
+.score-input {
+  flex: 0 1 80px;
+}
+
+.selected-count {
+  display: block;
+  margin-top: 8px;
+  color: var(--employee-muted);
+  font-size: 12px;
+}
+
+.member-list {
+  max-height: 190px;
+  margin-top: 10px;
+}
+
+.member-chip-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.member-option {
+  display: inline-flex;
+  align-items: center;
+  min-height: 38px;
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid #dbe4f0;
+  border-radius: 19px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: left;
+}
+
+.member-option::after {
+  border: 0;
+}
+
+.member-option.selected {
+  border-color: var(--employee-primary);
+  background: var(--employee-primary-soft);
+  color: var(--employee-primary);
+}
+
+.member-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  border: 1px solid #cbd5e1;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.member-option.selected .member-check {
+  border-color: var(--employee-primary);
+  background: var(--employee-primary);
+}
+
+.member-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.block,
+.block-sm {
+  display: block;
+  color: var(--employee-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.block {
+  margin-top: 10px;
+}
+
+.block-sm {
+  margin-top: 6px;
+}
+
+.ai-hints-input {
+  margin-top: 10px;
+}
+
+.ai-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 10px;
+}
+
+.quick-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid #d7e0eb;
+  border-radius: 16px;
+  background: #ffffff;
+  color: var(--employee-muted);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.quick-chip::after {
+  border: 0;
+}
+
+.ai-count-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.count-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  flex: 1;
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid #d7e0eb;
+  border-radius: 10px;
+  background: #ffffff;
+  color: var(--employee-muted);
+  font-size: 13px;
+  line-height: 1;
+}
+
+.count-chip::after {
+  border: 0;
+}
+
+.count-chip.active {
+  border-color: #ef9da5;
+  background: var(--employee-primary-soft);
+  color: var(--employee-primary);
+  font-weight: 900;
+}
+
+.ai-generate-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 44px;
+  margin: 12px 0 0;
+  border: 1px solid var(--brand);
+  border-radius: 22px;
+  background: #ffffff;
+  color: var(--brand);
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.ai-generate-button::after {
+  border: 0;
+}
+
+.ai-generate-button:disabled {
+  opacity: 0.6;
+}
+
+.question-summary {
+  display: block;
+  margin-top: 8px;
+  color: var(--employee-muted);
+  font-size: 12px;
+}
+
+.score-warning {
+  display: block;
+  margin-top: 6px;
+  color: #a86100;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.question-list {
+  margin-top: 6px;
+}
+
+.question-item {
+  border-bottom: 1px solid #e5edf7;
+}
+
+.question-item:last-child {
+  border-bottom: 0;
+}
+
+.question-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 0;
+}
+
+.question-stem {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
+  color: var(--employee-text);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.question-meta {
+  flex: 0 0 auto;
+  color: var(--employee-muted);
+  font-size: 12px;
+}
+
+.question-arrow {
+  flex: 0 0 auto;
+  color: #c0c4cc;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.question-editor {
+  display: grid;
+  gap: 9px;
+  padding: 0 0 14px;
+}
+
+.stem-input {
+  min-height: 88px;
+}
+
+.compact-textarea {
+  min-height: 72px;
+}
+
+.editor-grid {
+  display: grid;
+  grid-template-columns: 1fr 110px;
+  gap: 8px;
+}
+
+.picker-value {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+}
+
+.score-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.score-suffix {
+  position: absolute;
+  right: 12px;
+  color: var(--employee-muted);
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.remove-button {
+  justify-self: end;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--brand);
+  font-size: 12px;
+}
+
+.remove-button::after {
+  border: 0;
+}
+
+.publish-dock {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: calc(76px + env(safe-area-inset-bottom));
+  left: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  max-width: var(--mobile-shell-max-width);
+  margin: 0 auto;
+  padding: 12px 16px;
+  border-top: 1px solid #e5edf7;
+  background: rgba(255, 255, 255, 0.97);
+}
+
+.dock-primary,
+.dock-secondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  margin: 0;
+  border-radius: 23px;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.dock-primary::after,
+.dock-secondary::after {
+  border: 0;
+}
+
+.dock-primary {
+  border: 0;
+  background: var(--brand);
+  color: #ffffff;
+}
+
+.dock-primary:disabled,
+.dock-secondary:disabled {
+  opacity: 0.5;
+}
+
+.dock-secondary {
+  border: 1px solid var(--brand);
+  background: #ffffff;
+  color: var(--brand);
+}
 </style>
diff --git a/mobile-uni/src/pages/supervisor/exams/index.vue b/mobile-uni/src/pages/supervisor/exams/index.vue
index e0b67ff3..bd918d24 100644
--- a/mobile-uni/src/pages/supervisor/exams/index.vue
+++ b/mobile-uni/src/pages/supervisor/exams/index.vue
@@ -1,51 +1,398 @@
 <template>
   <view class="page supervisor-exams-page">
     <view class="subpage-header">
-      <button class="subpage-back-button" aria-label="返回主管首页" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button>
-      <view class="subpage-heading"><text class="page-title">岗前测试</text><text class="page-subtitle">按岗位组卷、选择真实员工并查看完成情况。</text></view>
-    </view>
-    <button class="primary-button create-button" @click="createExam">新建考试</button>
-    <text v-if="message" class="status-message">{{ message }}</text>
-    <view v-if="loading" class="panel">考试列表加载中…</view>
-    <view v-else-if="exams.length" class="exam-list">
-      <view v-for="item in exams" :key="item.id" class="panel exam-card">
-        <view class="exam-head"><text class="panel-title">{{ item.title }}</text><text class="status-chip">{{ item.status }}</text></view>
-        <text class="muted">{{ item.positionCode || '通用岗位' }} · {{ item.questionCount }} 题 · {{ item.targetCount }} 人 · 及格 {{ item.passingScore }} 分</text>
-        <text v-if="item.dueDate" class="muted">截止 {{ item.dueDate }}</text>
-        <view class="exam-actions">
-          <button class="secondary-button" :disabled="item.status !== 'DRAFT'" @click="editExam(item.id)">编辑</button>
-          <button class="ghost-button" @click="viewResults(item.id)">查看结果</button>
-        </view>
+      <button class="subpage-back-button" aria-label="返回主管首页" title="返回主管首页" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button>
+      <view class="subpage-heading">
+        <text class="page-title">岗前测试</text>
+        <text class="page-subtitle">按岗位组卷并查看完成情况</text>
       </view>
     </view>
-    <view v-else class="panel empty">暂无考试，先创建岗位题目并派发。</view>
+
+    <button class="create-button" @click="createExam">
+      <text class="create-button-plus">+</text>
+      <text>新建考试</text>
+    </button>
+    <text v-if="message" class="status-message">{{ message }}</text>
+
+    <view class="exam-stats">
+      <view class="exam-stat">
+        <text class="exam-stat-value active">{{ statusCounts.active }}</text>
+        <text class="exam-stat-label">进行中</text>
+      </view>
+      <view class="exam-stat">
+        <text class="exam-stat-value draft">{{ statusCounts.draft }}</text>
+        <text class="exam-stat-label">待发布</text>
+      </view>
+      <view class="exam-stat">
+        <text class="exam-stat-value">{{ statusCounts.ended }}</text>
+        <text class="exam-stat-label">已结束</text>
+      </view>
+    </view>
+
+    <view class="panel exam-list-panel">
+      <view class="exam-tabs" role="group" aria-label="考试状态筛选">
+        <button
+          v-for="tab in statusTabs"
+          :key="tab.key"
+          class="exam-tab"
+          :class="{ active: statusFilter === tab.key }"
+          @click="statusFilter = tab.key"
+        >{{ tab.label }}</button>
+      </view>
+
+      <view v-if="loading" class="empty compact-empty">考试列表加载中…</view>
+      <template v-else-if="filteredExams.length">
+        <view v-for="item in filteredExams" :key="item.id" class="exam-card">
+          <view class="exam-head">
+            <text class="exam-title">{{ item.title }}</text>
+            <text class="exam-badge" :class="examState(item).key">{{ examState(item).label }}</text>
+          </view>
+          <text class="exam-meta">{{ item.positionCode || '通用岗位' }} · {{ item.questionCount }}题 · {{ item.targetCount }}人 · 及格{{ item.passingScore }}分</text>
+          <template v-if="examState(item).key === 'active'">
+            <text class="exam-due">{{ dueDateLabel(item.dueDate) }}</text>
+            <view class="exam-progress-row">
+              <text class="exam-progress-text">完成{{ item.submissionCount }}/{{ item.targetCount }}</text>
+              <view class="exam-progress-track">
+                <view class="exam-progress-fill" :style="{ width: `${progressPercent(item)}%` }"></view>
+              </view>
+            </view>
+          </template>
+          <view class="exam-actions">
+            <button v-if="examState(item).key === 'draft'" class="exam-link" @click="editExam(item.id)">继续编辑<text class="exam-link-arrow">›</text></button>
+            <button v-else class="exam-link" @click="viewResults(item.id)">查看结果<text class="exam-link-arrow">›</text></button>
+          </view>
+        </view>
+      </template>
+      <view v-else class="empty compact-empty">{{ emptyLabel }}</view>
+    </view>
     <SupervisorTabBar active="team" />
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import type { ExamSummary } from '@/types/api';
 import { listSupervisorExams } from '@/services/exam';
 import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
-const exams = ref<ExamSummary[]>([]); const loading = ref(false); const message = ref('');
+
+type ExamStateKey = 'active' | 'draft' | 'ended';
+
+const exams = ref<ExamSummary[]>([]);
+const loading = ref(false);
+const message = ref('');
+const statusTabs: Array<{ key: 'all' | ExamStateKey; label: string }> = [
+  { key: 'all', label: '全部' },
+  { key: 'active', label: '进行中' },
+  { key: 'draft', label: '待发布' },
+  { key: 'ended', label: '已结束' }
+];
+const statusFilter = ref<'all' | ExamStateKey>('all');
+
+const todayStr = () => {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+};
+
+const examState = (item: ExamSummary): { key: ExamStateKey; label: string } => {
+  if (item.status === 'DRAFT') return { key: 'draft', label: '待发布' };
+  const due = item.dueDate?.slice(0, 10) || '';
+  if (due && due < todayStr()) return { key: 'ended', label: '已结束' };
+  return { key: 'active', label: '进行中' };
+};
+
+const statusCounts = computed(() => exams.value.reduce<Record<ExamStateKey, number>>((counts, item) => {
+  counts[examState(item).key] += 1;
+  return counts;
+}, { active: 0, draft: 0, ended: 0 }));
+
+const filteredExams = computed(() => (statusFilter.value === 'all'
+  ? exams.value
+  : exams.value.filter((item) => examState(item).key === statusFilter.value)));
+
+const emptyLabel = computed(() => (statusFilter.value === 'all' ? '暂无考试，先创建岗位题目并派发。' : '当前状态下暂无考试'));
+
+const dueDateLabel = (value?: string | null) => {
+  const due = value?.slice(0, 10) || '';
+  if (!due) return '长期有效';
+  const [, month, day] = due.split('-');
+  return `截止${Number(month)}月${Number(day)}日`;
+};
+
+const progressPercent = (item: ExamSummary) => {
+  if (!item.targetCount) return 0;
+  return Math.min(100, Math.round((item.submissionCount / item.targetCount) * 100));
+};
+
 const goBack = () => uni.redirectTo({ url: '/pages/supervisor/index/index' });
 const createExam = () => uni.navigateTo({ url: '/pages/supervisor/exams/edit' });
 const editExam = (id: number) => uni.navigateTo({ url: `/pages/supervisor/exams/edit?id=${id}` });
 const viewResults = (id: number) => uni.navigateTo({ url: `/pages/supervisor/exams/results?id=${id}` });
-const load = async () => { loading.value = true; try { exams.value = await listSupervisorExams(); } catch (error) { message.value = error instanceof Error ? error.message : '考试列表读取失败'; } finally { loading.value = false; } };
+
+const load = async () => {
+  loading.value = true;
+  message.value = '';
+  try {
+    exams.value = await listSupervisorExams();
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : '考试列表读取失败';
+  } finally {
+    loading.value = false;
+  }
+};
+
 onShow(() => { void load(); });
 </script>
 
 <style scoped>
-.supervisor-exams-page { max-width: var(--mobile-shell-max-width); margin: 0 auto; }
-.create-button { width: 100%; margin-top: 18px; }
-.status-message { display: block; margin-top: 12px; color: #a9000d; }
-.exam-list { display: grid; gap: 4px; }
-.exam-card { display: grid; gap: 9px; }
-.exam-head, .exam-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
-.status-chip { padding: 4px 8px; border-radius: 999px; background: #eef3f9; color: var(--knowledge); font-size: 12px; }
-.exam-actions button { flex: 1; min-width: 0; }
-.empty { color: var(--muted); }
+.supervisor-exams-page {
+  padding-bottom: 112px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
+}
+
+.subpage-header {
+  align-items: center;
+}
+
+.status-message {
+  display: block;
+  margin-top: 12px;
+  color: #a9000d;
+  font-size: 13px;
+}
+
+.create-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 46px;
+  margin: 16px 0 0;
+  border: 0;
+  border-radius: 12px;
+  background: var(--brand);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.create-button::after {
+  border: 0;
+}
+
+.create-button-plus {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.exam-stats {
+  display: grid;
+  margin-top: 14px;
+  overflow: hidden;
+  border: 1px solid #e5edf7;
+  border-radius: 12px;
+  background: #ffffff;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.exam-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  padding: 13px 8px;
+  border-right: 1px solid #e5edf7;
+}
+
+.exam-stat:last-child {
+  border-right: 0;
+}
+
+.exam-stat-value {
+  color: #0f172a;
+  font-size: 23px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.exam-stat-value.active {
+  color: var(--employee-primary);
+}
+
+.exam-stat-value.draft {
+  color: #d97706;
+}
+
+.exam-stat-label {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.exam-list-panel {
+  margin-top: 14px;
+}
+
+.exam-tabs {
+  display: flex;
+  gap: 18px;
+  border-bottom: 1px solid #e5edf7;
+}
+
+.exam-tab {
+  position: relative;
+  margin: 0;
+  padding: 0 2px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--employee-muted);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.exam-tab::after {
+  border: 0;
+}
+
+.exam-tab.active {
+  color: var(--employee-primary);
+  font-weight: 900;
+}
+
+.exam-tab.active::before {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--employee-primary);
+  content: '';
+}
+
+.exam-card {
+  padding: 14px 0;
+  border-bottom: 1px solid #e5edf7;
+}
+
+.exam-card:last-child {
+  padding-bottom: 2px;
+  border-bottom: 0;
+}
+
+.exam-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.exam-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--employee-text);
+  font-size: 15px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exam-badge {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.exam-badge.active {
+  background: var(--employee-primary-soft);
+  color: var(--employee-primary);
+}
+
+.exam-badge.draft {
+  background: #fff7ed;
+  color: #d97706;
+}
+
+.exam-badge.ended {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.exam-meta,
+.exam-due {
+  display: block;
+  margin-top: 7px;
+  color: var(--employee-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.exam-progress-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.exam-progress-text {
+  flex: 0 0 auto;
+  color: var(--employee-text);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.exam-progress-track {
+  height: 6px;
+  overflow: hidden;
+  flex: 1;
+  border-radius: 999px;
+  background: #eef2f7;
+}
+
+.exam-progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--brand);
+}
+
+.exam-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.exam-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--employee-primary);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.4;
+}
+
+.exam-link::after {
+  border: 0;
+}
+
+.exam-link-arrow {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.compact-empty {
+  padding: 22px 8px 12px;
+  color: var(--employee-muted);
+  font-size: 13px;
+  text-align: center;
+}
 </style>
diff --git a/mobile-uni/src/pages/supervisor/exams/results.vue b/mobile-uni/src/pages/supervisor/exams/results.vue
index f0aabae6..af77d7ee 100644
--- a/mobile-uni/src/pages/supervisor/exams/results.vue
+++ b/mobile-uni/src/pages/supervisor/exams/results.vue
@@ -1,29 +1,393 @@
 <template>
   <view class="page exam-results-page">
-    <view class="subpage-header"><button class="subpage-back-button" aria-label="返回" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button><view class="subpage-heading"><text class="page-title">考试结果</text><text class="page-subtitle">按人员查看成绩、未完成与通过状态。</text></view></view>
-    <text v-if="message" class="status-message">{{ message }}</text>
-    <view class="metric-grid">
-      <view class="metric-card"><text>{{ results.length }}</text><label>已派发</label></view>
-      <view class="metric-card"><text>{{ completed }}</text><label>已完成</label></view>
-      <view class="metric-card"><text>{{ passed }}</text><label>已通过</label></view>
+    <view class="subpage-header">
+      <button class="subpage-back-button" aria-label="返回" title="返回" @click="goBack"><uni-icons type="back" size="20" color="#25282d" /></button>
+      <view class="subpage-heading">
+        <text class="page-title">考试结果</text>
+        <text class="page-subtitle">按人员查看成绩与通过状态</text>
+      </view>
+      <button v-if="results.length" class="export-button" @click="exportResults">导出结果</button>
     </view>
-    <view v-if="results.length" class="result-list">
-      <view v-for="item in results" :key="item.attemptId || item.extPartyId" class="panel result-row">
-        <view><text class="result-name">{{ item.traineeName }}</text><text class="muted">{{ item.submittedTime || '尚未提交' }} · {{ item.status === 'PENDING' ? '待完成' : '已提交' }}</text></view>
-        <view class="result-score"><text>{{ item.score == null ? '--' : `${item.score}分` }}</text><label>{{ item.status === 'PENDING' ? '未完成' : item.passed ? '通过' : '未通过' }}</label></view>
+
+    <text v-if="message" class="status-message">{{ message }}</text>
+
+    <view v-if="examTitle" class="exam-name">{{ examTitle }}</view>
+
+    <view class="results-summary">
+      <view class="summary-cells">
+        <view class="summary-cell">
+          <text class="summary-value assigned">{{ totalCount }}</text>
+          <text class="summary-label">已派发</text>
+        </view>
+        <view class="summary-cell">
+          <text class="summary-value">{{ completedCount }}</text>
+          <text class="summary-label">已完成</text>
+        </view>
+        <view class="summary-cell">
+          <text class="summary-value passed">{{ passedCount }}</text>
+          <text class="summary-label">已通过</text>
+        </view>
+        <view class="summary-cell">
+          <text class="summary-label ratio-label">完成率</text>
+          <text class="summary-value ratio">{{ completionRate }}%</text>
+        </view>
+      </view>
+      <view class="summary-track">
+        <view class="summary-fill" :style="{ width: `${completionRate}%` }"></view>
       </view>
     </view>
-    <view v-else class="panel empty">暂无派发结果</view>
+
+    <view class="result-filters" role="group" aria-label="结果筛选">
+      <button
+        v-for="tab in filterTabs"
+        :key="tab.key"
+        class="filter-chip"
+        :class="{ active: resultFilter === tab.key }"
+        @click="resultFilter = tab.key"
+      >{{ tab.label }}</button>
+    </view>
+
+    <view v-if="filteredResults.length" class="panel result-panel">
+      <view v-for="item in filteredResults" :key="item.attemptId || item.extPartyId" class="result-row">
+        <view class="result-avatar">
+          <uni-icons type="person" size="20" color="#9aa0a6" />
+        </view>
+        <view class="result-main">
+          <text class="result-name">{{ item.traineeName || '未命名员工' }}</text>
+          <text class="result-sub">{{ resultSub(item) }}</text>
+        </view>
+        <text class="result-score">{{ item.score == null ? '--' : `${item.score}分` }}</text>
+        <text class="result-badge" :class="statusClass(item)">{{ statusLabel(item) }}</text>
+      </view>
+    </view>
+    <view v-else-if="!loading" class="panel empty-panel">
+      <view class="empty">暂无符合筛选的派发结果</view>
+    </view>
     <SupervisorTabBar active="team" />
   </view>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; import type { ExamResultItem } from '@/types/api'; import { getSupervisorExamResults } from '@/services/exam'; import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
-const id=ref(0); const results=ref<ExamResultItem[]>([]); const message=ref(''); const completed=computed(()=>results.value.filter((item)=>item.status==='SUBMITTED').length); const passed=computed(()=>results.value.filter((item)=>item.status==='SUBMITTED'&&item.passed===true).length);
-const goBack=()=>uni.navigateBack({delta:1}); const load=async()=>{try{results.value=await getSupervisorExamResults(id.value);}catch(error){message.value=error instanceof Error?error.message:'考试结果读取失败';}}; onLoad((options)=>{id.value=Number(options?.id||0);void load();});
+import { computed, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import type { ExamResultItem } from '@/types/api';
+import { getSupervisorExam, getSupervisorExamResults } from '@/services/exam';
+import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
+
+type ResultFilter = 'all' | 'passed' | 'failed' | 'pending';
+
+const id = ref(0);
+const examTitle = ref('');
+const results = ref<ExamResultItem[]>([]);
+const loading = ref(false);
+const message = ref('');
+const filterTabs: Array<{ key: ResultFilter; label: string }> = [
+  { key: 'all', label: '全部' },
+  { key: 'passed', label: '已通过' },
+  { key: 'failed', label: '未通过' },
+  { key: 'pending', label: '未完成' }
+];
+const resultFilter = ref<ResultFilter>('all');
+
+const isPending = (item: ExamResultItem) => item.status === 'PENDING' || item.score == null;
+const isPassed = (item: ExamResultItem) => !isPending(item) && item.passed === true;
+
+const totalCount = computed(() => results.value.length);
+const completedCount = computed(() => results.value.filter((item) => !isPending(item)).length);
+const passedCount = computed(() => results.value.filter(isPassed).length);
+const completionRate = computed(() => (totalCount.value ? Math.round((completedCount.value / totalCount.value) * 100) : 0));
+
+const filteredResults = computed(() => results.value.filter((item) => {
+  if (resultFilter.value === 'passed') return isPassed(item);
+  if (resultFilter.value === 'failed') return !isPending(item) && !isPassed(item);
+  if (resultFilter.value === 'pending') return isPending(item);
+  return true;
+}));
+
+const statusLabel = (item: ExamResultItem) => (isPending(item) ? '未完成' : isPassed(item) ? '通过' : '未通过');
+const statusClass = (item: ExamResultItem) => (isPending(item) ? 'pending' : isPassed(item) ? 'passed' : 'failed');
+
+const formatSubmitted = (value: string | null) => {
+  if (!value) return '';
+  const time = new Date(value.replace(/-/g, '/'));
+  if (Number.isNaN(time.getTime())) return value;
+  const hhmm = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`;
+  const now = new Date();
+  const startOf = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  const dayDiff = Math.round((startOf(now) - startOf(time)) / 86400000);
+  if (dayDiff === 0) return `今天${hhmm}`;
+  if (dayDiff === 1) return `昨天${hhmm}`;
+  return `${time.getMonth() + 1}月${time.getDate()}日 ${hhmm}`;
+};
+
+const resultSub = (item: ExamResultItem) => (isPending(item) ? '尚未提交' : `${formatSubmitted(item.submittedTime)} · 已提交`);
+
+const exportResults = () => {
+  if (!results.value.length) return;
+  const rows: string[][] = [['姓名', '状态', '分数', '提交时间']];
+  results.value.forEach((item) => {
+    rows.push([
+      item.traineeName || '未命名员工',
+      statusLabel(item),
+      item.score == null ? '' : String(item.score),
+      item.submittedTime || ''
+    ]);
+  });
+  const csv = '' + rows
+    .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+    .join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${examTitle.value || '考试结果'}-结果.csv`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(link.href);
+};
+
+const goBack = () => uni.navigateBack({ delta: 1, fail: () => uni.redirectTo({ url: '/pages/supervisor/exams/index' }) });
+
+const load = async () => {
+  loading.value = true;
+  message.value = '';
+  try {
+    const [detail, items] = await Promise.all([getSupervisorExam(id.value), getSupervisorExamResults(id.value)]);
+    examTitle.value = detail.title || '';
+    results.value = items;
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : '考试结果读取失败';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onLoad((options) => {
+  id.value = Number(options?.id || 0);
+  void load();
+});
 </script>
 
 <style scoped>
-.exam-results-page{max-width:var(--mobile-shell-max-width);margin:0 auto}.status-message{display:block;margin-top:12px;color:#a9000d}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.metric-card{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}.metric-card text{font-size:22px;font-weight:900}.metric-card label,.muted{color:var(--muted);font-size:12px}.result-list{display:grid;gap:4px}.result-row{display:flex;gap:12px;align-items:center;justify-content:space-between}.result-name,.result-row .muted,.result-score text,.result-score label{display:block}.result-name{font-weight:900}.result-score{text-align:right}.result-score text{color:var(--brand);font-weight:900}.result-score label{margin-top:4px;color:var(--muted);font-size:12px}.empty{color:var(--muted)}
+.exam-results-page {
+  padding-bottom: 112px;
+  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
+}
+
+.subpage-header {
+  align-items: center;
+}
+
+.export-button {
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--employee-primary);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.export-button::after {
+  border: 0;
+}
+
+.status-message {
+  display: block;
+  margin-top: 12px;
+  color: #a9000d;
+  font-size: 13px;
+}
+
+.exam-name {
+  margin-top: 14px;
+  color: var(--employee-text);
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.results-summary {
+  margin-top: 12px;
+  padding: 14px;
+  border: 1px solid #e5edf7;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.summary-cells {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.summary-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.summary-value {
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.summary-value.assigned {
+  color: var(--employee-primary);
+}
+
+.summary-value.passed {
+  color: #16a34a;
+}
+
+.summary-value.ratio {
+  color: var(--employee-primary);
+  font-size: 18px;
+}
+
+.summary-label {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.ratio-label {
+  order: -1;
+}
+
+.summary-track {
+  height: 8px;
+  margin-top: 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eef2f7;
+}
+
+.summary-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--brand);
+}
+
+.result-filters {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.filter-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  margin: 0;
+  padding: 0 14px;
+  border: 1px solid #dbe4f0;
+  border-radius: 16px;
+  background: #ffffff;
+  color: var(--employee-muted);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.filter-chip::after {
+  border: 0;
+}
+
+.filter-chip.active {
+  border-color: var(--employee-primary);
+  background: var(--employee-primary);
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.result-panel {
+  margin-top: 12px;
+}
+
+.result-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 0;
+  border-bottom: 1px solid #e5edf7;
+}
+
+.result-row:last-child {
+  border-bottom: 0;
+}
+
+.result-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: #eef0f3;
+}
+
+.result-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.result-name {
+  display: block;
+  overflow: hidden;
+  color: var(--employee-text);
+  font-size: 14px;
+  font-weight: 900;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-sub {
+  display: block;
+  margin-top: 4px;
+  color: var(--employee-muted);
+  font-size: 12px;
+}
+
+.result-score {
+  flex: 0 0 auto;
+  min-width: 44px;
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 900;
+  text-align: right;
+}
+
+.result-badge {
+  flex: 0 0 auto;
+  min-width: 52px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.result-badge.passed {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.result-badge.failed {
+  background: var(--employee-primary-soft);
+  color: var(--employee-primary);
+}
+
+.result-badge.pending {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.empty-panel {
+  margin-top: 12px;
+}
 </style>