chore: 优化移动端显示

src/components/DragPanel.vue

@@ -66,6 +66,13 @@ onMounted(() => {
         </svg>
       </div>
     </div>
+    <button
+      v-if="!isLeftShow && isMobile"
+      type="button"
+      class="panel-mobile-toggle"
+      @click="leftPanelVisible = !leftPanelVisible">
+      {{ leftPanelVisible ? '收起试题' : '展开试题' }}
+    </button>
     <div class="drag-panel-right">
       <div class="drag-cover" v-if="dragFlag"></div>
       <slot name="right"></slot>
@@ -123,6 +130,9 @@ onMounted(() => {
     cursor: pointer;
   }
 }
+.panel-mobile-toggle {
+  display: none;
+}
 .drag-panel-left-content {
   overflow: hidden;
   height: 100%;
@@ -147,16 +157,46 @@ onMounted(() => {
   .drag-panel {
     flex-direction: column;
     height: auto;
-    gap: 12px;
   }
   .drag-panel-left {
     width: 100% !important;
     padding: 12px;
     margin-right: 0;
+    height: 50vh;
+    min-height: 320px;
+    overflow: hidden;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    &.is-hidden {
+      height: 0;
+      min-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      .drag-panel-left-content {
+        display: none;
+      }
+    }
+  }
+  .panel-mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    margin-top: 0;
+    margin-bottom: 12px;
+    border: 0;
+    border-radius: 0 0 16px 16px;
+    background: #fff;
+    color: var(--main-color);
+    font-size: 14px;
+    line-height: 1;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
   }
   .drag-panel-left-content {
-    height: auto;
-    overflow: visible;
+    height: 100%;
+    overflow: auto;
   }
   .drag-panel-right {
     width: 100%;

src/modules/admin/lab/experiment/api.ts

@@ -232,6 +232,7 @@ export function saveCompetitionRule(data: {
   end_time: string
   questions: string
   competition: string
+  config?: string
 }) {
   return httpRequest.post('/api/resource/v1/backend/experiment-competition-rule/save', data)
 }

src/modules/admin/lab/experiment/components/CompetitionRuleDialog.vue

@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { useMediaQuery } from '@vueuse/core'
 import { getCompetitionRule, saveCompetitionRule } from '../api'
+import AppEditor from '@/components/base/AppEditor.vue'
 
 interface Props {
   id: string
@@ -22,6 +23,7 @@ const gradeRuleList = [
 ]
 const defaultConfig = {
   min_submit_time: '',
+  practical_question: '',
   rules: [] as any[],
 }
 const formRef = ref()
@@ -40,6 +42,7 @@ const rules = ref({
   end_time: [{ required: true, message: '请选择' }],
   questions: [{ required: true, message: '请选择' }],
   competition: [{ required: true, message: '请选择' }],
+  'config.practical_question': [{ required: true, message: '请输入实操试题' }],
 })
 
 const options = ref([
@@ -178,7 +181,7 @@ function disabledMinSubmitDate(time: Date) {
 
 <template>
   <el-button type="primary" @click="dialogVisible = true">编辑大赛规则</el-button>
-  <el-dialog title="编辑大赛规则" :close-on-click-modal="false" width="800px" v-model="dialogVisible" append-to-body>
+  <el-dialog title="编辑大赛规则" :close-on-click-modal="false" width="1000px" v-model="dialogVisible" append-to-body>
     <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="100px">
       <el-form-item label="大赛名称" prop="name">
         <el-input v-model="form.name" placeholder="请输入大赛名称" />
@@ -222,6 +225,12 @@ function disabledMinSubmitDate(time: Date) {
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="实操试题" prop="config.practical_question">
+        <AppEditor
+          v-model="form.config.practical_question"
+          :height="320"
+          placeholder="请输入实操试题内容" />
+      </el-form-item>
       <el-divider />
       <el-form-item label-width="0">
         <el-row justify="space-between" style="width: 100%">

src/modules/student/lab/composables/useCompetition.ts

@@ -14,6 +14,7 @@ interface Competition {
   student_status: StudentStatus
   competition: string
   questions: string
+  config?: string | Record<string, any>
 }
 
 export function useCompetition() {

src/modules/student/lab/views/Competition.vue

@@ -10,9 +10,7 @@ import { useEventListener } from '@vueuse/core'
 
 const appConfig = useAppConfig()
 
-const Case = defineAsyncComponent(() => import('../components/Case.vue'))
-
-const { courseId, experimentId, competition, submit, examURL, biURL } = useCompetition()
+const { experimentId, competition, submit, examURL, biURL } = useCompetition()
 
 const LAB_URL = computed<string>(() => {
   if (competition.value?.competition == '2') {
@@ -67,6 +65,19 @@ const handleSubmit = async () => {
 }
 const tabActive = ref('bi')
 
+const practicalQuestionHtml = computed(() => {
+  const rawConfig = competition.value?.config
+  if (!rawConfig) return ''
+
+  try {
+    const config = typeof rawConfig === 'string' ? JSON.parse(rawConfig) : rawConfig
+    return config?.practical_question || ''
+  } catch (error) {
+    console.error(error)
+    return ''
+  }
+})
+
 useEventListener(window, 'message', async (event) => {
   console.log(event)
   const { data } = event
@@ -82,7 +93,8 @@ useEventListener(window, 'message', async (event) => {
       <div class="left-box">
         <h2 class="left-box-title">实操试题</h2>
         <div class="left-box-content">
-          <Case :course_id="courseId" :experiment_id="experimentId" />
+          <div class="practical-question" v-if="practicalQuestionHtml" v-html="practicalQuestionHtml"></div>
+          <el-empty description="暂无数据" v-else />
         </div>
       </div>
     </template>
@@ -151,6 +163,36 @@ useEventListener(window, 'message', async (event) => {
 
 .left-box-content {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.practical-question {
+  color: #303133;
+  line-height: 1.75;
+  word-break: break-word;
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :deep(table) {
+    width: 100% !important;
+    border-collapse: collapse;
+    display: block;
+    overflow-x: auto;
+  }
+
+  :deep(td),
+  :deep(th) {
+    border: 1px solid #dcdfe6;
+    padding: 8px 10px;
+  }
+
+  :deep(p) {
+    margin: 0 0 12px;
+  }
 }
 
 .competition-header {
@@ -217,6 +259,19 @@ useEventListener(window, 'message', async (event) => {
   align-items: flex-end;
 }
 
+@media (max-width: 767px) {
+  .iframe-box {
+    min-height: 65vh;
+    margin-top: 12px;
+  }
+
+  .competition-header {
+    gap: 8px;
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
 .welcome-box-header-content {
   width: 100%;
   max-width: 1000px;