chore: 优化讨论交流

src/modules/student/contest/components/Discuss.vue

@@ -63,7 +63,7 @@ useInfiniteScroll(
       <el-radio :label="4">我的班级</el-radio> -->
     </el-radio-group>
     <!-- 发表新话题 -->
-    <DiscussPublish :competition_id="competition_id" @update="fetchInfo(true)" v-if="competition_id"></DiscussPublish>
+    <DiscussPublish :list="list" :competition_id="competition_id" @update="fetchInfo(true)" v-if="competition_id"></DiscussPublish>
     <el-empty description="暂无数据" v-if="isEmpty" />
     <template v-else>
       <div class="discuss-scroll" ref="scrollRef">

src/modules/student/contest/components/DiscussCommentPublish.vue

@@ -18,6 +18,7 @@ const form = reactive({ content: '' })
 const rules = ref<FormRules>({
   content: [{ required: true, message: '请输入话题评论内容', trigger: 'blur' }]
 })
+let publishVisible = $ref(false)
 
 // 提交
 function handleSubmit() {
@@ -30,22 +31,23 @@ function handleAdd() {
     ElMessage({ message: '评论成功', type: 'success' })
     emit('update')
     formRef?.resetFields()
+    publishVisible = false
   })
 }
 </script>
 
 <template>
-  <el-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
-  >
-    <el-form-item prop="content">
-      <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
-    </el-form-item>
+  <div style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0">
     <el-row justify="end">
-      <el-button type="primary" @click="handleSubmit">评论</el-button>
+      <el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">我要评论</el-button>
     </el-row>
-  </el-form>
+    <el-form ref="formRef" :model="form" :rules="rules" v-if="publishVisible">
+      <el-form-item prop="content">
+        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
+      </el-form-item>
+      <el-row justify="end">
+        <el-button type="primary" @click="handleSubmit">发表评论</el-button>
+      </el-row>
+    </el-form>
+  </div>
 </template>

src/modules/student/contest/components/DiscussItem.vue

@@ -59,6 +59,7 @@ const commentVisible = $ref(false)
 <style lang="scss" scoped>
 .discuss-item {
   margin-top: 10px;
+  padding-right: 15px;
   border-top: 1px solid #e6e6e6;
 }
 .discuss-box {
@@ -117,7 +118,6 @@ const commentVisible = $ref(false)
   align-items: center;
   justify-content: flex-end;
   margin-top: 10px;
-  padding-right: 15px;
   .button-comment {
     display: flex;
     align-items: center;

src/modules/student/contest/components/DiscussPublish.vue

 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
+import type { ExperimentDiscussType } from '../types'
 import { ElMessage } from 'element-plus'
 import { addExperimentDiscuss } from '../api'
 
 interface Props {
   competition_id: string
+  list: ExperimentDiscussType[]
 }
 const props = defineProps<Props>()
 
@@ -32,17 +34,25 @@ function handleAdd() {
     formRef?.resetFields()
   })
 }
+let publishVisible = $ref(true)
+watchEffect(() => {
+  publishVisible = !props.list.length
+})
 </script>
 
 <template>
-  <el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
+  <el-row justify="start" style="padding-top: 10px">
+    <el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">新话题</el-button>
+  </el-row>
+  <el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px" v-if="publishVisible">
     <el-form-item prop="title">
       <el-input v-model="form.title" placeholder="话题标题"></el-input>
     </el-form-item>
     <el-form-item prop="content">
       <el-input type="textarea" v-model="form.content" placeholder="话题描述" :autosize="{ minRows: 4, maxRows: 6 }" />
     </el-form-item>
-    <el-row justify="end">
+    <el-row justify="space-between">
+      <el-button type="info" @click="publishVisible = false">收起</el-button>
       <el-button type="primary" @click="handleSubmit">发表</el-button>
     </el-row>
   </el-form>

src/modules/student/lab/components/Discuss.vue

@@ -63,7 +63,7 @@ useInfiniteScroll(
       <el-radio :label="4">我的班级</el-radio>
     </el-radio-group>
     <!-- 发表新话题 -->
-    <DiscussPublish :experiment_id="experiment_id" @update="fetchInfo(true)" v-if="experiment_id"></DiscussPublish>
+    <DiscussPublish :list="list" :experiment_id="experiment_id" @update="fetchInfo(true)" v-if="experiment_id"></DiscussPublish>
     <el-empty description="暂无数据" v-if="isEmpty" />
     <template v-else>
       <div class="discuss-scroll" ref="scrollRef">

src/modules/student/lab/components/DiscussCommentPublish.vue

@@ -18,6 +18,7 @@ const form = reactive({ content: '' })
 const rules = ref<FormRules>({
   content: [{ required: true, message: '请输入话题评论内容', trigger: 'blur' }]
 })
+let publishVisible = $ref(false)
 
 // 提交
 function handleSubmit() {
@@ -30,22 +31,23 @@ function handleAdd() {
     ElMessage({ message: '评论成功', type: 'success' })
     emit('update')
     formRef?.resetFields()
+    publishVisible = false
   })
 }
 </script>
 
 <template>
-  <el-form
-    ref="formRef"
-    :model="form"
-    :rules="rules"
-    style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0"
-  >
-    <el-form-item prop="content">
-      <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
-    </el-form-item>
+  <div style="border-top: 1px dashed #e6e6e6; border-bottom: 1px dashed #e6e6e6; padding: 20px 0">
     <el-row justify="end">
-      <el-button type="primary" @click="handleSubmit">发表评论</el-button>
+      <el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">我要评论</el-button>
     </el-row>
-  </el-form>
+    <el-form ref="formRef" :model="form" :rules="rules" v-if="publishVisible">
+      <el-form-item prop="content">
+        <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4, maxRows: 6 }" />
+      </el-form-item>
+      <el-row justify="end">
+        <el-button type="primary" @click="handleSubmit">发表评论</el-button>
+      </el-row>
+    </el-form>
+  </div>
 </template>

src/modules/student/lab/components/DiscussItem.vue

@@ -59,6 +59,7 @@ const commentVisible = $ref(false)
 <style lang="scss" scoped>
 .discuss-item {
   margin-top: 10px;
+  padding-right: 15px;
   border-top: 1px solid #e6e6e6;
 }
 .discuss-box {
@@ -117,7 +118,6 @@ const commentVisible = $ref(false)
   align-items: center;
   justify-content: flex-end;
   margin-top: 10px;
-  padding-right: 15px;
   .button-comment {
     display: flex;
     align-items: center;

src/modules/student/lab/components/DiscussPublish.vue

 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
+import type { ExperimentDiscussType } from '../types'
 import { ElMessage } from 'element-plus'
 import { addExperimentDiscuss } from '../api'
 
 interface Props {
   experiment_id: string
+  list: ExperimentDiscussType[]
 }
 const props = defineProps<Props>()
 
@@ -32,17 +34,25 @@ function handleAdd() {
     formRef?.resetFields()
   })
 }
+let publishVisible = $ref(true)
+watchEffect(() => {
+  publishVisible = !props.list.length
+})
 </script>
 
 <template>
-  <el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px">
+  <el-row justify="start" style="padding-top: 10px">
+    <el-button type="primary" @click="publishVisible = true" v-if="!publishVisible">新话题</el-button>
+  </el-row>
+  <el-form ref="formRef" :model="form" :rules="rules" style="padding: 20px 0 10px" v-if="publishVisible">
     <el-form-item prop="title">
       <el-input v-model="form.title" placeholder="话题标题"></el-input>
     </el-form-item>
     <el-form-item prop="content">
       <el-input type="textarea" v-model="form.content" placeholder="话题描述" :autosize="{ minRows: 4, maxRows: 6 }" />
     </el-form-item>
-    <el-row justify="end">
+    <el-row justify="space-between">
+      <el-button type="info" @click="publishVisible = false">收起</el-button>
       <el-button type="primary" @click="handleSubmit">发表</el-button>
     </el-row>
   </el-form>