ranjl/reader-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): 移除题目标题必填验证并优化诗词理解题目展示

Browse Source 
移除题目配置中的标题输入框及相关必填验证，使标题字段变为可选
诗词理解题目类型使用富文本编辑器，其他类型使用普通文本域
优化用户端汉字听写和词语听写题目的米字格展示样式
统一图片展示样式，限制最大宽度为50%并居中显示
This commit is contained in:
冉军林
2026-02-13 08:34:09 +08:00
parent f3136cd9ad
commit f1ff053b68
5 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/admin/src/views/user/modules/QuestionRenderer.vue
View File

@ -3,11 +3,6 @@ import { computed, watch } from 'vue'
import { QuestionCategoryEnum } from '@/enum/business'
import { useCompetitionStore } from '@/store/modules/competition'
// const props = defineProps<{
// template: QuestionCategoryName
// content: QuestionContent
// }>()
const store = useCompetitionStore()
const currentQuestionMainInfo = computed(() => store.currentQuestionMainInfo)
const currentQuestionDetail = computed(() => store.currentQuestionDetail)
@ -61,7 +56,7 @@ const parsedComponentAddTitle = computed(() => {
/** 获取富文本里面的text */
const pinyinChars = computed(() => {
if (template.value === QuestionCategoryEnum.WordDictation && content.value) {
if (content.value) {
// 创建临时元素提取HTML文本内容
const div = document.createElement('div')
div.innerHTML = content.value
@ -84,16 +79,35 @@ watch(
</script>
<template>
<div class="w-full flex p-6" style="border: 1px solid red;">
<div class="w-full flex p-6">
<!-- template:{{ template }} -->
<!-- 模板A: 汉字听写-提示 (拼音+提示) -->
<div v-if="template === QuestionCategoryEnum.ChineseCharacterDictation" class="text-center">
<div class="mb-6 inline-block text-5xl font-bold leading-none">
<div class="ptions-container1 text-2xl">
<div class="ptions-container1 mb-2 text-center text-2xl">
{{ title }}
</div>
<div class="rich-content1">
{{ content }}
<div class="rich-content flex gap-1">
<div
v-for="(char, index) in pinyinChars" :key="index"
class="relative h-38 w-42 flex select-none items-center justify-center border-2 border-red-500 bg-white"
>
<!-- 米字格背景 -->
<div class="pointer-events-none absolute inset-0 z-0 h-full w-full">
<!-- 横虚线 -->
<div class="absolute left-0 top-1/2 h-[1px] w-full border-t border-red-400 border-dashed opacity-60" />
<!-- 竖虚线 -->
<div class="absolute left-1/2 top-0 h-full w-[1px] border-l border-red-400 border-dashed opacity-60" />
<!-- 斜虚线 (SVG) -->
<svg width="100%" height="100%" class="absolute inset-0 opacity-60">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
</svg>
</div>
<!-- 文字 -->
<span class="z-10 text-4xl text-gray-800 font-bold font-sans">{{ char }}</span>
</div>
</div>
</div>
</div>
@ -153,21 +167,11 @@ watch(
<!-- 模板E: 成语-文字要求 -->
<div v-else-if="template === QuestionCategoryEnum.IdiomWriting" class="text-center">
<div class="mb-8 text-4xl text-gray-800 font-bold">
<!-- {{ content.title }} -->
<!-- {{ content }} -->
<div class="rich-content" v-html="content" />
</div>
<!-- <div class="rounded bg-gray-100 px-4 py-2 text-xl text-gray-500">
示例：{{ content.meta?.example }}
</div> -->
</div>
<!-- 模板F: 诗词理解 -->
<!-- <div v-else-if="template === 'TEMPLATE_IDIOM_IMAGE'" class="flex flex-col items-center text-center">
<div class="mb-6 h-60 w-80 flex items-center justify-center">
<img :src="content.titleImage" alt="idiom image" class="h-full w-full object-contain">
</div>
</div> -->
<!-- 模板G: 诗词理解-选择题 (通用选择题模板) -->
<div v-else-if="template === QuestionCategoryEnum.PoetryComprehension" class="w-full flex flex-col items-center">
<div class="options-container text-2xl">
@ -376,9 +380,10 @@ watch(
.rich-content {
:deep(img) {
max-width: 100%;
max-width: 50%;
height: auto;
object-fit: contain;
margin: 0 auto;
vertical-align: middle;
}
}