优化导入，增加模板下载

addons/admin/src/views/exam/component/ExcelImport.vue

@@ -48,11 +48,30 @@
             </el-form-item>
         </el-form>
 
-        <!-- 文件上传 -->
-        <el-upload :before-upload="beforeUpload" :show-file-list="false" :on-change="handleFileChange"
-            accept=".xls,.xlsx" style="margin-bottom: 10px;">
-            <el-button type="primary" icon="el-icon-upload2">选择 Excel 文件</el-button>
-        </el-upload>
+        <!-- 操作按钮区域 -->
+        <div class="import-actions">
+            <el-button type="success" icon="el-icon-download" @click="downloadTemplate">
+                下载导入模板
+            </el-button>
+            <el-upload :before-upload="beforeUpload" :show-file-list="false" :on-change="handleFileChange"
+                accept=".xls,.xlsx" style="display: inline-block; margin-left: 10px;">
+                <el-button type="primary" icon="el-icon-upload2">选择 Excel 文件</el-button>
+            </el-upload>
+        </div>
+
+        <!-- 格式说明 -->
+        <div class="format-tips">
+            <el-alert title="Excel格式要求" type="info" :closable="false" show-icon>
+                <template slot="default">
+                    <p><strong>Excel格式要求：</strong></p>
+                    <p>• 第一行必须是标题行：题目类型、题目、选项A、选项B、选项C、选项D、正确答案、解析、分数</p>
+                    <p>• 题目类型：单选题、多选题、判断题、填空题、问答题</p>
+                    <p>• 正确答案：单选题填选项字母(A/B/C/D)，多选题用逗号分隔(A,B)，判断题填对/错，填空题填答案，问答题可留空</p>
+                    <p>• 分数：每道题的分值，建议单选题2-5分，多选题5-10分，判断题1-2分，填空题3-8分，问答题10-20分</p>
+                    <p>• 支持富文本格式</p>
+                </template>
+            </el-alert>
+        </div>
 
         <!-- Excel 预览 -->
         <div v-if="previewData.length" class="excel-preview">
@@ -83,32 +102,32 @@
                 </el-table-column>
                 <el-table-column label="答案A" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_a" :max-length="20" />
+                        <text-ellipsis :text="row.answer_A" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column label="答案B" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_b" :max-length="20" />
+                        <text-ellipsis :text="row.answer_B" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column label="答案C" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_c" :max-length="20" />
+                        <text-ellipsis :text="row.answer_C" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column label="答案D" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_d" :max-length="20" />
+                        <text-ellipsis :text="row.answer_D" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column label="答案E" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_e" :max-length="20" />
+                        <text-ellipsis :text="row.answer_E" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column label="答案F" min-width="100">
                     <template #default="{ row }">
-                        <text-ellipsis :text="row.answer_f" :max-length="20" />
+                        <text-ellipsis :text="row.answer_F" :max-length="20" />
                     </template>
                 </el-table-column>
                 <el-table-column prop="score" label="分数" width="80" />
@@ -158,6 +177,45 @@ export default {
         subjectOptionsComputed() { return this.subjectOptions.length ? this.subjectOptions : []; }
     },
     methods: {
+        // 下载导入模板
+        downloadTemplate() {
+            // 创建模板数据
+            const templateData = [
+                ['题目类型', '题目', '选项A', '选项B', '选项C', '选项D', '正确答案', '解析', '分数'],
+                ['单选题', '这是一道单选题示例？', '选项A内容', '选项B内容', '选项C内容', '选项D内容', 'A', '这是单选题的解析', '5'],
+                ['多选题', '这是一道多选题示例？', '选项A内容', '选项B内容', '选项C内容', '选项D内容', 'A,B', '这是多选题的解析', '10'],
+                ['判断题', '这是一道判断题示例？', '', '', '', '', '对', '这是判断题的解析', '2'],
+                ['填空题', '这是一道填空题示例，答案是___', '', '', '', '', '答案内容', '这是填空题的解析', '8'],
+                ['问答题', '这是一道问答题示例？', '', '', '', '', '', '这是问答题的解析', '15']
+            ];
+
+            // 创建工作簿
+            const wb = XLSX.utils.book_new();
+            const ws = XLSX.utils.aoa_to_sheet(templateData);
+
+            // 设置列宽
+            ws['!cols'] = [
+                { width: 12 }, // 题目类型列
+                { width: 40 }, // 题目列
+                { width: 20 }, // 选项A列
+                { width: 20 }, // 选项B列
+                { width: 20 }, // 选项C列
+                { width: 20 }, // 选项D列
+                { width: 12 }, // 正确答案列
+                { width: 30 }, // 解析列
+                { width: 8 }   // 分数列
+            ];
+
+            // 添加工作表到工作簿
+            XLSX.utils.book_append_sheet(wb, ws, '题目导入模板');
+
+            // 下载文件
+            const fileName = `题目导入模板_${new Date().toISOString().slice(0, 10)}.xlsx`;
+            XLSX.writeFile(wb, fileName);
+
+            this.$message.success('模板下载成功');
+        },
+
         getDefaultFormData() {
             return {
                 type: this.type,
@@ -212,15 +270,21 @@ export default {
                     _id: index,
                     topic_type: r[0] || "",
                     topic_name: r[1] || "",
-                    topic_analysis: r[2] || "",
-                    correct_answer: r[3] || "",
-                    answer_a: r[4] || "",
-                    answer_b: r[5] || "",
-                    answer_c: r[6] || "",
-                    answer_d: r[7] || "",
-                    answer_e: r[8] || "",
-                    answer_f: r[9] || "",
-                    score: Number(r[10]) || 0
+                    answer_A: r[2] || "",
+                    answer_B: r[3] || "",
+                    answer_C: r[4] || "",
+                    answer_D: r[5] || "",
+                    correct_answer: r[6] || "",
+                    topic_analysis: r[7] || "",
+                    score: Number(r[8]) || 0,
+                    show_type: 1, // 导入的数据固定为文本类型
+                    answer_type: 2, // 导入的数据固定为不可提交图片答案
+                    answer_E: "", // 默认空值
+                    answer_F: "", // 默认空值
+                    topic_image_id: "", // 默认空值
+                    sort: index + 1, // 按顺序排序
+                    status: 1, // 默认有效状态
+                    mark: 1 // 默认未删除
                 }));
 
                 this.formData.topic_count = this.previewData.length;
@@ -261,6 +325,19 @@ export default {
     overflow: auto;
 }
 
+.import-actions {
+    margin: 20px 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.format-tips {
+    margin: 20px 0;
+}
+
 .excel-preview {
     overflow-x: auto;
 }

addons/admin/src/views/exam/component/TopicManager.vue

@@ -1,221 +1,233 @@
 <template>
-    <el-dialog :close-on-click-modal="false" :visible="visible" :title="'试题管理 - 试卷ID: ' + paperId" width="90%" top="5vh"
-        @close="closeDialog" custom-class="topic-manager-dialog">
-        <div class="topic-manager-container">
-            <!-- 试题列表 -->
-            <div class="topic-list-container">
-                <div class="topic-list-header">
-                    <h3>试题列表</h3>
-                    <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddForm()">
-                        添加试题
-                    </el-button>
-                </div>
+    <div>
+        <el-dialog :close-on-click-modal="false" :visible="visible" :title="'试题管理 - 试卷ID: ' + paperId" width="90%"
+            top="5vh" @close="closeDialog" custom-class="topic-manager-dialog">
+            <div class="topic-manager-container">
+                <!-- 试题列表 -->
+                <div class="topic-list-container">
+                    <div class="topic-list-header">
+                        <h3>试题列表</h3>
+                        <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddForm()">
+                            添加试题
+                        </el-button>
+                    </div>
 
-                <el-table :data="topics" row-key="id" height="600" v-loading="loading">
-                    <el-table-column label="排序" width="80">
-                        <template slot-scope="{}">
-                            <i class="el-icon-sort"></i>
-                        </template>
-                    </el-table-column>
-                    <!-- <el-table-column label="ID" prop="id" width="60" /> -->
-                    <el-table-column label="题目内容" min-width="150">
-                        <template slot-scope="{ row }">
-                            <div v-if="row.show_type === 1" class="topic-content">
-                                {{ row.topic_name }}
-                            </div>
-                            <div v-else class="topic-content">
-                                <image-preview size="xs" :images="[row.topic_name]" />
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="题型" min-width="40">
-                        <template slot-scope="{ row }">
-                            <el-tag :type="getTopicTypeTag(row.topic_type)">
-                                {{ row.topic_type }}
-                            </el-tag>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="分数" prop="score" min-width="40" />
-                    <el-table-column label="正确答案" min-width="80">
-                        <template slot-scope="{ row }">
-                            <div v-if="row.answer_type === 1" class="topic-content">
-                                <text-ellipsis :text="row.correct_answer" :max-length="10" />
-                            </div>
-                            <div v-else class="topic-content">
-                                <image-preview size="xs" :images="row.correct_answer" />
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="解析" min-width="80">
-                        <template slot-scope="{ row }">
-                            <div v-if="row.show_type === 1" class="topic-content">
-                                <text-ellipsis :text="row.topic_analysis" :max-length="10" />
-                            </div>
-                            <div v-else class="topic-content">
-                                <image-preview size="xs" :images="row.topic_analysis" />
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="操作" min-width="60" fixed="right">
-                        <template slot-scope="{ row, $index }">
-                            <el-button size="mini" @click="editTopic(row)">编辑</el-button>
-                            <el-button size="mini" type="danger" @click="deleteTopic(row, $index)">删除</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-
-                <!-- 拖拽排序提示 -->
-                <div class="drag-tips">
-                    <i class="el-icon-info"></i>
-                    提示：可以通过拖拽行来调整试题顺序
+                    <el-table :data="topics" row-key="id" height="600" v-loading="loading" :border="true"
+                        :stripe="true">
+                        <el-table-column label="排序" width="80">
+                            <template slot-scope="{}">
+                                <i class="el-icon-sort"></i>
+                            </template>
+                        </el-table-column>
+                        <!-- <el-table-column label="ID" prop="id" width="60" /> -->
+                        <el-table-column label="题目内容" min-width="200">
+                            <template slot-scope="{ row }">
+                                <div v-if="row.show_type === 1" class="topic-content clickable"
+                                    @click="showContentDialog('题目内容', row.topic_name)">
+                                    {{ row.topic_name }}
+                                </div>
+                                <div v-else class="topic-content clickable"
+                                    @click="showImageDialog('题目内容', row.topic_name)">
+                                    <image-preview size="xs" :images="[row.topic_name]" />
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="题型" width="80">
+                            <template slot-scope="{ row }">
+                                <el-tag :type="getTopicTypeTag(row.topic_type)">
+                                    {{ row.topic_type }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="分数" prop="score" width="60" align="center" />
+                        <el-table-column label="正确答案" width="120">
+                            <template slot-scope="{ row }">
+                                <div v-if="row.show_type === 1" class="topic-content clickable"
+                                    @click="showContentDialog('正确答案', row.correct_answer)">
+                                    <text-ellipsis :text="row.correct_answer" :max-length="10" />
+                                </div>
+                                <div v-else class="topic-content clickable"
+                                    @click="showImageDialog('正确答案', row.correct_answer)">
+                                    <image-preview size="xs" :images="[row.correct_answer]" />
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="解析" width="120">
+                            <template slot-scope="{ row }">
+                                <div v-if="row.show_type === 1" class="topic-content clickable"
+                                    @click="showContentDialog('解析', row.topic_analysis)">
+                                    <text-ellipsis :text="row.topic_analysis" :max-length="10" />
+                                </div>
+                                <div v-else class="topic-content clickable"
+                                    @click="showImageDialog('解析', row.topic_analysis)">
+                                    <image-preview size="xs" :images="[row.topic_analysis]" />
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="180" align="center" fixed="right">
+                            <template slot-scope="{ row, $index }">
+                                <el-button size="mini" type="primary" plain @click="editTopic(row)">编辑</el-button>
+                                <el-button size="mini" type="danger" plain
+                                    @click="deleteTopic(row, $index)">删除</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+
+                    <!-- 拖拽排序提示 -->
+                    <div class="drag-tips">
+                        <i class="el-icon-info"></i>
+                        提示：可以通过拖拽行来调整试题顺序
+                    </div>
                 </div>
-            </div>
 
-            <!-- 添加/编辑试题表单 -->
-            <div class="topic-form-container">
-                <h3>{{ isEdit ? '编辑试题' : '添加试题' }}</h3>
-
-                <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
-                    <el-form-item label="题目类型" prop="topic_type">
-                        <el-select v-model="form.topic_type" placeholder="请选择题型" @change="changeTopicType">
-                            <el-option label="单选题" value="单选题"></el-option>
-                            <el-option label="多选题" value="多选题"></el-option>
-                            <el-option label="判断题" value="判断题"></el-option>
-                            <el-option label="填空题" value="填空题"></el-option>
-                            <el-option label="简答题" value="简答题"></el-option>
-                        </el-select>
-                    </el-form-item>
-
-                    <el-form-item label="显示方式" prop="show_type">
-                        <el-radio-group v-model="form.show_type">
-                            <el-radio :label="1">文本</el-radio>
-                            <el-radio :label="2">图片</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
+            </div>
+        </el-dialog>
+
+        <!-- 添加/编辑试题弹窗 -->
+        <el-dialog :visible.sync="showForm" :title="isEdit ? '编辑试题' : '添加试题'" width="800px"
+            :close-on-click-modal="false">
+            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+                <el-form-item label="题目类型" prop="topic_type">
+                    <el-select v-model="form.topic_type" placeholder="请选择题型" @change="changeTopicType">
+                        <el-option label="单选题" value="单选题"></el-option>
+                        <el-option label="多选题" value="多选题"></el-option>
+                        <el-option label="判断题" value="判断题"></el-option>
+                        <el-option label="填空题" value="填空题"></el-option>
+                        <el-option label="简答题" value="简答题"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="显示方式" prop="show_type">
+                    <el-radio-group v-model="form.show_type">
+                        <el-radio :label="1">文本</el-radio>
+                        <el-radio :label="2">图片</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="题目内容" prop="topic_name" v-if="form.show_type === 1">
+                    <el-input type="textarea" :rows="3" v-model="form.topic_name" placeholder="请输入题目内容"></el-input>
+                </el-form-item>
+
+                <el-form-item label="题目图片" prop="topic_name" v-else>
+                    <uploadImage :limit="1" v-model="form.topic_name"></uploadImage>
+                </el-form-item>
+
+                <el-form-item label="分数" prop="score">
+                    <el-input-number v-model="form.score" :min="1" :max="100"></el-input-number>
+                </el-form-item>
+
+                <el-form-item label="图片选项/答案" prop="answer_type" v-if="form.show_type === 2">
+                    <el-radio-group v-model="form.answer_type">
+                        <el-radio :label="1">是</el-radio>
+                        <el-radio :label="2">否</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <!-- 单选题、多选题 -->
+                <div v-if="['单选题', '多选题'].includes(form.topic_type)">
+                    <template v-if="form.answer_type == 1">
+                        <!-- 选项：图片方式 -->
+                        <el-form-item v-for="(option, index) in options" :key="index"
+                            :label="'选项 ' + String.fromCharCode(65 + index)"
+                            :prop="'answer_' + String.fromCharCode(65 + index)">
+                            <uploadImage :limit="1" v-model="options[index]" />
+                        </el-form-item>
 
-                    <el-form-item label="题目内容" prop="topic_name" v-if="form.show_type === 1">
-                        <el-input type="textarea" :rows="3" v-model="form.topic_name" placeholder="请输入题目内容"></el-input>
-                    </el-form-item>
+                        <!-- 正确答案：选择对应选项 -->
+                        <el-form-item label="正确答案" prop="correct_answer">
+                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
+                                v-if="form.topic_type === '多选题'">
+                                <el-option v-for="(option, index) in options" :key="index"
+                                    :label="'选项 ' + String.fromCharCode(65 + index)"
+                                    :value="String.fromCharCode(65 + index)" />
+                            </el-select>
+                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
+                                <el-option v-for="(option, index) in options" :key="index"
+                                    :label="'选项 ' + String.fromCharCode(65 + index)"
+                                    :value="String.fromCharCode(65 + index)" />
+                            </el-select>
+                        </el-form-item>
+                    </template>
+
+                    <template v-else>
+                        <!-- 选项：文本方式 -->
+                        <el-form-item v-for="(option, index) in options" :key="index"
+                            :label="'选项 ' + String.fromCharCode(65 + index)"
+                            :prop="'answer_' + String.fromCharCode(65 + index)">
+                            <el-input v-model="options[index]"
+                                :placeholder="'请输入选项' + String.fromCharCode(65 + index) + '的内容'" />
+                        </el-form-item>
 
-                    <el-form-item label="题目图片" prop="topic_name" v-else>
-                        <uploadImage :limit="1" v-model="form.topic_name"></uploadImage>
-                    </el-form-item>
+                        <!-- 正确答案：选择对应选项 -->
+                        <el-form-item label="正确答案" prop="correct_answer">
+                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
+                                v-if="form.topic_type === '多选题'">
+                                <el-option v-for="(option, index) in options" :key="index"
+                                    :label="String.fromCharCode(65 + index)" :value="String.fromCharCode(65 + index)" />
+                            </el-select>
+                            <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
+                                <el-option v-for="(option, index) in options" :key="index"
+                                    :label="String.fromCharCode(65 + index)" :value="String.fromCharCode(65 + index)" />
+                            </el-select>
+                        </el-form-item>
+                    </template>
+                </div>
 
-                    <el-form-item label="分数" prop="score">
-                        <el-input-number v-model="form.score" :min="1" :max="100"></el-input-number>
-                    </el-form-item>
 
-                    <el-form-item label="图片选项/答案" prop="answer_type" v-if="form.show_type === 2">
-                        <el-radio-group v-model="form.answer_type">
-                            <el-radio :label="1">是</el-radio>
-                            <el-radio :label="2">否</el-radio>
+                <div v-else-if="form.topic_type === '判断题'">
+                    <el-form-item label="正确答案" prop="correct_answer">
+                        <el-radio-group v-model="form.correct_answer">
+                            <el-radio label="正确">正确</el-radio>
+                            <el-radio label="错误">错误</el-radio>
                         </el-radio-group>
                     </el-form-item>
+                </div>
 
-                    <!-- 单选题、多选题 -->
-                    <div v-if="['单选题', '多选题'].includes(form.topic_type)">
-                        <template v-if="form.answer_type == 1">
-                            <!-- 选项：图片方式 -->
-                            <el-form-item v-for="(option, index) in options" :key="index"
-                                :label="'选项 ' + String.fromCharCode(65 + index)"
-                                :prop="'answer_' + String.fromCharCode(65 + index)">
-                                <uploadImage :limit="1" v-model="options[index]" />
-                            </el-form-item>
-
-                            <!-- 正确答案：选择对应选项 -->
-                            <el-form-item label="正确答案" prop="correct_answer">
-                                <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
-                                    v-if="form.topic_type === '多选题'">
-                                    <el-option v-for="(option, index) in options" :key="index"
-                                        :label="'选项 ' + String.fromCharCode(65 + index)"
-                                        :value="String.fromCharCode(65 + index)" />
-                                </el-select>
-                                <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
-                                    <el-option v-for="(option, index) in options" :key="index"
-                                        :label="'选项 ' + String.fromCharCode(65 + index)"
-                                        :value="String.fromCharCode(65 + index)" />
-                                </el-select>
-                            </el-form-item>
-                        </template>
-
-                        <template v-else>
-                            <!-- 选项：文本方式 -->
-                            <el-form-item v-for="(option, index) in options" :key="index"
-                                :label="'选项 ' + String.fromCharCode(65 + index)"
-                                :prop="'answer_' + String.fromCharCode(65 + index)">
-                                <el-input v-model="options[index]"
-                                    :placeholder="'请输入选项' + String.fromCharCode(65 + index) + '的内容'" />
-                            </el-form-item>
-
-                            <!-- 正确答案：选择对应选项 -->
-                            <el-form-item label="正确答案" prop="correct_answer">
-                                <el-select v-model="form.correct_answer" placeholder="请选择正确答案" multiple
-                                    v-if="form.topic_type === '多选题'">
-                                    <el-option v-for="(option, index) in options" :key="index"
-                                        :label="String.fromCharCode(65 + index)"
-                                        :value="String.fromCharCode(65 + index)" />
-                                </el-select>
-                                <el-select v-model="form.correct_answer" placeholder="请选择正确答案" v-else>
-                                    <el-option v-for="(option, index) in options" :key="index"
-                                        :label="String.fromCharCode(65 + index)"
-                                        :value="String.fromCharCode(65 + index)" />
-                                </el-select>
-                            </el-form-item>
-                        </template>
+                <!-- 填空题，简答题 -->
+                <div v-else>
+                    <div v-if="form.answer_type === 1">
+                        <el-form-item label="正确答案" prop="correct_answer">
+                            <uploadImage :limit="1" v-model="form.correct_answer"></uploadImage>
+                        </el-form-item>
                     </div>
-
-
-                    <div v-else-if="form.topic_type === '判断题'">
+                    <div v-else>
                         <el-form-item label="正确答案" prop="correct_answer">
-                            <el-radio-group v-model="form.correct_answer">
-                                <el-radio label="正确">正确</el-radio>
-                                <el-radio label="错误">错误</el-radio>
-                            </el-radio-group>
+                            <el-input type="textarea" :rows="2" v-model="form.correct_answer"
+                                placeholder="请输入正确答案"></el-input>
                         </el-form-item>
-                        <!-- 更详细的调试信息 -->
-                        <div style="color: red; font-size: 12px; background: #f0f0f0; padding: 5px; margin-top: 10px;">
-                            <div>调试信息 - 判断题:</div>
-                            <div>当前值: "{{ form.correct_answer }}"</div>
-                            <div>值类型: {{ typeof form.correct_answer }}</div>
-                            <div>值长度: {{ form.correct_answer ? form.correct_answer.length : 0 }}</div>
-                            <div>是否等于'正确': {{ form.correct_answer === '正确' }}</div>
-                            <div>是否等于'错误': {{ form.correct_answer === '错误' }}</div>
-                            <div>原始数据: {{ currentTopic ? currentTopic.correct_answer : '无' }}</div>
-                        </div>
                     </div>
-
-                    <!-- 填空题，简答题 -->
+                </div>
+                <el-form-item label="答案解析" prop="topic_analysis" class="mt-16">
+                    <div v-if="form.show_type === 1">
+                        <el-input type="textarea" :rows="3" v-model="form.topic_analysis"
+                            placeholder="请输入题目解析"></el-input>
+                    </div>
                     <div v-else>
-                        <div v-if="form.answer_type === 1">
-                            <el-form-item label="正确答案" prop="correct_answer">
-                                <uploadImage :limit="1" v-model="form.correct_answer"></uploadImage>
-                            </el-form-item>
-                        </div>
-                        <div v-else>
-                            <el-form-item label="正确答案" prop="correct_answer">
-                                <el-input type="textarea" :rows="2" v-model="form.correct_answer"
-                                    placeholder="请输入正确答案"></el-input>
-                            </el-form-item>
-                        </div>
+                        <uploadImage :limit="1" v-model="form.topic_analysis"></uploadImage>
                     </div>
-                    <el-form-item label="答案解析" prop="topic_analysis" class="mt-16">
-                        <div v-if="form.show_type === 1">
-                            <el-input type="textarea" :rows="3" v-model="form.topic_analysis"
-                                placeholder="请输入题目解析"></el-input>
-                        </div>
-                        <div v-else>
-                            <uploadImage :limit="1" v-model="form.topic_analysis"></uploadImage>
-                        </div>
-                    </el-form-item>
+                </el-form-item>
+            </el-form>
 
-                    <el-form-item>
-                        <el-button type="primary" @click="submitForm">保存</el-button>
-                        <el-button @click="cancelForm">重置</el-button>
-                    </el-form-item>
-                </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancelForm">取消</el-button>
+                <el-button type="primary" @click="submitForm">保存</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 内容查看弹窗 -->
+        <el-dialog :visible.sync="contentDialogVisible" :title="contentDialogTitle" width="600px">
+            <div class="content-display">
+                <pre>{{ contentDialogContent }}</pre>
+            </div>
+        </el-dialog>
+
+        <!-- 图片查看弹窗 -->
+        <el-dialog :visible.sync="imageDialogVisible" :title="imageDialogTitle" width="800px">
+            <div class="image-display">
+                <image-preview size="lg" :images="[imageDialogImage]" />
             </div>
-        </div>
-    </el-dialog>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -273,7 +285,15 @@ export default {
                 ]
             },
             options: ['', '', '', ''],
-            currentTopic: null
+            currentTopic: null,
+            // 内容查看弹窗
+            contentDialogVisible: false,
+            contentDialogTitle: '',
+            contentDialogContent: '',
+            // 图片查看弹窗
+            imageDialogVisible: false,
+            imageDialogTitle: '',
+            imageDialogImage: ''
         };
     },
     watch: {
@@ -349,15 +369,6 @@ export default {
             this.resetForm();
             this.form.paper_id = this.paperId;
             this.showForm = true;
-            console.log('显示表单:', this.showForm); // 添加调试信息
-
-            // 确保DOM更新后滚动到表单区域
-            this.$nextTick(() => {
-                const formContainer = this.$el.querySelector('.topic-form-container');
-                if (formContainer) {
-                    formContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                }
-            });
         },
 
         editTopic(topic) {
@@ -556,6 +567,20 @@ export default {
             return typeMap[type] || 'default';
         },
 
+        // 显示文本内容弹窗
+        showContentDialog(title, content) {
+            this.contentDialogTitle = title;
+            this.contentDialogContent = content;
+            this.contentDialogVisible = true;
+        },
+
+        // 显示图片内容弹窗
+        showImageDialog(title, image) {
+            this.imageDialogTitle = title;
+            this.imageDialogImage = image;
+            this.imageDialogVisible = true;
+        },
+
         closeDialog() {
             this.$emit('update:visible', false);
         }
@@ -565,35 +590,11 @@ export default {
 
 <style scoped>
 .topic-manager-container {
-    display: flex;
     height: 70vh;
-    transition: all 0.3s ease;
 }
 
 .topic-list-container {
-    flex: 1;
-    padding-right: 20px;
-    transition: width 0.3s ease;
-}
-
-.topic-form-container {
-    width: 400px;
-    padding-left: 20px;
-    overflow-y: auto;
-    border-left: 1px solid #eee;
-    animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateX(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+    width: 100%;
 }
 
 .topic-list-header {
@@ -612,6 +613,36 @@ export default {
     -webkit-box-orient: vertical;
 }
 
+.topic-content.clickable {
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.topic-content.clickable:hover {
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    padding: 4px;
+}
+
+.content-display {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.content-display pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: inherit;
+    margin: 0;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.image-display {
+    text-align: center;
+}
+
 .drag-tips {
     margin-top: 10px;
     padding: 8px 12px;
@@ -620,8 +651,4 @@ export default {
     border-radius: 4px;
     font-size: 12px;
 }
-
-.image-preview {
-    margin-top: 10px;
-}
 </style>