From ac3249a4a4aa29fecc413b32ec0fa8bbb81e4db0 Mon Sep 17 00:00:00 2001
From: yanlongqi <yuchat@163.com>
Date: Fri, 7 Nov 2025 22:27:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=98=E7=9B=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2UI=E5=92=8C=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

主要改进：
1. 优化题目标题布局
   - 调整标题大小为 level 5，更加精致
   - 添加占位元素使标题真正居中显示
   - 优化标题与返回按钮的视觉平衡

2. 统一标签样式
   - 题目列表中的标签改为统一的蓝色分类标签
   - 题目顺序调整：「第X题」在前，分类标签在后
   - 移除题目ID显示，界面更简洁

3. 优化题目导航抽屉
   - 导航抽屉从按题型分组改为按分类分组
   - 使用统一的蓝色分类标签
   - 题号网格显示题目序号而非题目ID
   - 与答题页面QuestionCard保持统一的视觉风格

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/QuestionListDrawer.tsx | 40 +++++++----------------
 web/src/pages/QuestionList.module.less    |  5 +++
 web/src/pages/QuestionList.tsx            | 15 ++++-----
 3 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/web/src/components/QuestionListDrawer.tsx b/web/src/components/QuestionListDrawer.tsx
index 2ab7021..63dd871 100644
--- a/web/src/components/QuestionListDrawer.tsx
+++ b/web/src/components/QuestionListDrawer.tsx
@@ -6,17 +6,6 @@ import styles from './QuestionListDrawer.module.less'
 
 const { Text } = Typography
 
-// 题型配置
-const questionTypeConfig: Record<string, { label: string; color: string }> = {
-  'multiple-choice': { label: '选择题', color: '#1677ff' },
-  'multiple-selection': { label: '多选题', color: '#52c41a' },
-  'true-false': { label: '判断题', color: '#fa8c16' },
-  'fill-in-blank': { label: '填空题', color: '#722ed1' },
-  'short-answer': { label: '简答题', color: '#eb2f96' },
-  'ordinary-essay': { label: '普通涉密人员论述题', color: '#f759ab' },
-  'management-essay': { label: '保密管理人员论述题', color: '#d4380d' },
-}
-
 interface QuestionListDrawerProps {
   visible: boolean
   onClose: () => void
@@ -25,9 +14,7 @@ interface QuestionListDrawerProps {
 }
 
 interface QuestionGroup {
-  type: string
-  typeLabel: string
-  typeColor: string
+  category: string
   items: Array<{ index: number; question: Question }>
 }
 
@@ -37,21 +24,18 @@ const QuestionListDrawer: React.FC<QuestionListDrawerProps> = ({
   questions,
   onQuestionSelect,
 }) => {
-  // 按题型分组
+  // 按分类分组
   const groupedQuestions = useMemo(() => {
     const groups: Record<string, QuestionGroup> = {}
 
     questions.forEach((question, index) => {
-      const typeConfig = questionTypeConfig[question.type]
-      if (!groups[question.type]) {
-        groups[question.type] = {
-          type: question.type,
-          typeLabel: typeConfig?.label || question.type,
-          typeColor: typeConfig?.color || 'default',
+      if (!groups[question.category]) {
+        groups[question.category] = {
+          category: question.category,
           items: [],
         }
       }
-      groups[question.type].items.push({ index, question })
+      groups[question.category].items.push({ index, question })
     })
 
     return Object.values(groups)
@@ -76,11 +60,11 @@ const QuestionListDrawer: React.FC<QuestionListDrawerProps> = ({
     >
       <div className={styles.groupsContainer}>
         {groupedQuestions.map((group, groupIndex) => (
-          <div key={group.type} className={styles.questionGroup}>
-            {/* 题型标题 */}
+          <div key={group.category} className={styles.questionGroup}>
+            {/* 分类标题 */}
             <div className={styles.groupHeader}>
-              <Tag color={group.typeColor} className={styles.typeTag}>
-                {group.typeLabel}
+              <Tag color="blue" className={styles.typeTag}>
+                {group.category}
               </Tag>
               <span className={styles.groupCount}>共 {group.items.length} 题</span>
             </div>
@@ -95,9 +79,9 @@ const QuestionListDrawer: React.FC<QuestionListDrawerProps> = ({
                     onQuestionSelect(index)
                     onClose()
                   }}
-                  title={`题目 ${question.question_id}`}
+                  title={`第 ${index + 1} 题`}
                 >
-                  {question.question_id}
+                  {index + 1}
                 </div>
               ))}
             </div>
diff --git a/web/src/pages/QuestionList.module.less b/web/src/pages/QuestionList.module.less
index b61b177..0590086 100644
--- a/web/src/pages/QuestionList.module.less
+++ b/web/src/pages/QuestionList.module.less
@@ -16,9 +16,14 @@
   font-size: 16px;
 }
 
+.placeholder {
+  width: 64px; // 与返回按钮宽度保持一致
+}
+
 .title {
   margin: 0 !important;
   flex: 1;
+  text-align: center;
 }
 
 .filterCard {
diff --git a/web/src/pages/QuestionList.tsx b/web/src/pages/QuestionList.tsx
index a168665..28876bc 100644
--- a/web/src/pages/QuestionList.tsx
+++ b/web/src/pages/QuestionList.tsx
@@ -222,9 +222,11 @@ const QuestionList: React.FC = () => {
         >
           返回
         </Button>
-        <Title level={3} className={styles.title}>
+        <Title level={5} className={styles.title}>
           <BookOutlined /> 题目列表
         </Title>
+        {/* 占位元素，保持标题居中 */}
+        <div className={styles.placeholder}></div>
       </div>
 
       {/* 筛选栏 */}
@@ -289,16 +291,11 @@ const QuestionList: React.FC = () => {
                 {/* 题目头部 */}
                 <div className={styles.questionHeader}>
                   <Space size="small">
-                    <Tag color={typeConfig?.color || 'default'}>
-                      {typeConfig?.icon} {typeConfig?.label || question.type}
-                    </Tag>
-                    <Text type="secondary" className={styles.questionId}>
-                      #{question.question_id}
+                    <Text type="secondary" className={styles.questionNumber}>
+                      第 {index + 1} 题
                     </Text>
+                    <Tag color="blue">{question.category}</Tag>
                   </Space>
-                  <Text type="secondary" className={styles.questionNumber}>
-                    第 {index + 1} 题
-                  </Text>
                 </div>
 
                 {/* 题目内容 */}