管理端题库管理页面浅色化统一系统风格:移除暗色原型背景与红色需求备注,改为正式题库说明(平台默认题库全教师可见、教师仅可编辑自己的题)

fix/exam-question-access-material-excel-delete-draft
陈沅 2 weeks ago
parent 5209376aa6
commit c23d623f5e

@ -3,7 +3,7 @@
<header class="page-head"><div><h1>题库管理</h1><p>维护平台公共题库,供教师组卷使用</p></div><div class="actions"><el-button type="primary" :icon="Plus" @click="openEditor()">添加题目</el-button><el-button type="success" :icon="Upload" :loading="loading" @click="pickImport">批量导入</el-button><el-dropdown trigger="click" @command="downloadTemplate"><el-button type="success" :icon="Download">下载模板<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="word">Word 导入模板</el-dropdown-item><el-dropdown-item command="excel">Excel 导入模板</el-dropdown-item></el-dropdown-menu></template></el-dropdown><el-button type="primary" @click="openAi">AI出题</el-button></div></header>
<section class="toolbar"><el-select v-model="query.type" clearable placeholder="题型:请选择" @change="load"><el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-select v-model="query.taskKey" clearable placeholder="归属项目:请选择" @change="load"><el-option v-for="item in projects" :key="item.taskKey" :label="projectLabel(item)" :value="item.taskKey" /></el-select><el-input v-model="query.keyword" placeholder="请输入题干关键词" clearable @keyup.enter="load" /><el-button type="primary" :icon="Search" @click="load">搜索</el-button><input ref="fileInput" type="file" accept=".docx,.xlsx,.xls" hidden @change="importFile" /></section>
<el-table v-loading="loading" :data="questions" class="data-table"><el-table-column type="index" label="序号" width="78" /><el-table-column label="题干" min-width="420" show-overflow-tooltip><template #default="{ row }"><span>{{ plainHtml(row.stem) }}</span></template></el-table-column><el-table-column label="题型" width="120"><template #default="{ row }"><el-tag>{{ typeName[row.type] }}</el-tag></template></el-table-column><el-table-column label="题目来源" width="140"><template #default><el-tag type="success">平台题库</el-tag></template></el-table-column><el-table-column label="操作" width="190" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="openEditor(row)">编辑</el-button><el-button link type="primary" @click="openEditor(row)">查看</el-button><el-button link type="danger" @click="remove(row)">删除</el-button></template></el-table-column><template #empty><el-empty description="暂无题目" /></template></el-table>
<p class="prototype-note">说明:简答题批量导入不支持文件上传,只导入题干和参考答案。管理端进行内置题库管理,题库管理功能在管理端也放一个页面。老师端只能查看管理端的题目,只能编辑删除自己新增的题目。智云平台上有AI出题功能,可以复用过来,点击AI出题按钮跳转到AI出题界面,支持导出试题</p>
<p class="bank-note">说明:平台题库为系统默认题库,所有教师可见;教师仅可查看平台题目,编辑删除自己新增的题目。</p>
<el-dialog v-model="editorVisible" :title="form.id ? '编辑题目' : '新增题目'" width="min(1180px, 94vw)" top="4vh" class="question-editor-dialog" destroy-on-close>
<div class="editor-shell"><div class="editor-project"><span>归属项目</span><el-select v-model="form.taskKey" placeholder="请选择归属项目"><el-option v-for="item in projects" :key="item.taskKey" :label="projectLabel(item)" :value="item.taskKey" /></el-select></div>
@ -46,10 +46,10 @@ function displayAnswer(value) { return Array.isArray(value) ? value.join("、")
</script>
<style scoped>
.question-bank { min-height: 100%; color: #eaf8ff; background: linear-gradient(145deg, #061b2b, #07111c); }
.question-bank { min-height: 100%; color: #1f2937; background: transparent; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 26px; }.page-head p { margin: 7px 0 0; color: #9fc2d8; }.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; margin-bottom: 16px; border: 1px solid rgba(69, 185, 236, .3); border-radius: 10px; background: rgba(2, 18, 31, .6); }.toolbar .el-select { width: 210px; }.toolbar .el-input { width: min(300px, 30vw); }
.data-table { background: rgba(2, 18, 31, .72); }.prototype-note { margin: 14px auto 0; max-width: 1180px; color: #ff5e67; font-size: 15px; line-height: 1.8; text-align: center; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: #1f2937; }.page-head p { margin: 7px 0 0; color: #6b7280; font-size: 13px; }.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px; margin-bottom: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; }.toolbar .el-select { width: 210px; }.toolbar .el-input { width: min(300px, 30vw); }
.data-table { background: #ffffff; border-radius: 10px; }.bank-note { margin: 14px auto 0; max-width: 1180px; color: #6b7280; font-size: 13px; line-height: 1.8; text-align: center; }
.editor-shell { padding: 4px 8px 12px; color: #243746; }.editor-project { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.editor-project > span { width: 62px; color: #526979; }.editor-project .el-select { width: 420px; }.type-switch { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px; font-size: 16px; }.rich-row, .option-block { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }.rich-row > label, .option-block > label, .tf-block > label { padding-top: 10px; color: #526979; font-size: 15px; text-align: right; }.option-list { display: grid; gap: 12px; }.option-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 8px; }.answer-control { padding-top: 12px; }.tf-block { display: flex; align-items: center; gap: 24px; margin: 18px 0 30px; }.tf-block .el-radio-group { display: flex; gap: 28px; }.material-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px 102px; }.material-name { color: #5c7585; }.preview-alert { margin-bottom: 12px; }.preview-item { padding: 10px 4px; border-bottom: 1px solid #24465a; line-height: 1.7; }.editor-shell :deep(.ql-container) { min-height: 88px; font-size: 15px; }.editor-shell :deep(.ql-editor) { min-height: 74px; }.editor-shell :deep(.ql-toolbar) { background: #fff; }.editor-shell :deep(.ql-editor.ql-blank::before) { color: #a6b0b8; font-style: normal; }
</style>

Loading…
Cancel
Save