Merge pull request #183 from zestfulyk/dev

feat(style): 为发布/编辑页面的组件添加了样式类名

Author: DumbDaiDai

src/pages/DetailInfo/QuestionnaireSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center">
-    <div class="w-1/2 bg-gray-100 dark:bg-gray-700 border rounded-sm p-6 mb-20 shadow-md">
+    <div class="mb-20 questionSettings">
       <div class="flex items-center mt-15 ml-5 mb-15 px-10">
         <h3 class="text-lg font-bold">
           时间配置
@@ -32,7 +32,7 @@
       </div>
     </div>
 
-    <div class="w-1/2 bg-gray-100 dark:bg-gray-700 border rounded-sm p-6 mb-5 shadow-md">
+    <div class="mb-5 questionSettings">
       <div class="flex items-center mt-15 ml-5 mb-15 px-10">
         <h3 class="text-lg font-bold">
           作答限制
@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <div v-if="schema.baseConfig.verify" class="w-1/2 bg-gray-100 dark:bg-gray-700 border rounded-sm p-6 mt-20 shadow-md">
+    <div v-if="schema.baseConfig.verify" class="mt-20 questionSettings">
       <div class="flex items-center mt-15 ml-5 mb-15 px-10">
         <h3 class="text-lg font-bold">
           提交限制
@@ -100,4 +100,10 @@
 <script setup lang="ts">
 import { useEditStore } from "@/stores/edit";
 const { schema } = useEditStore();
-</script>
+</script>
+
+<style scoped>
+.questionSettings {
+  @apply w-1/2 bg-gray-100 dark:bg-gray-700 border rounded-sm p-6 shadow-md
+}
+</style>

src/pages/DetailInfo/leftMenu.vue

@@ -11,28 +11,28 @@
     <div class="flex flex-col justify-center p-20">
       <add-ques-button-panel ques-sort="输入类题型">
         <add-ques-button text="单行输入框" type="3">
-          <img src="@/assets/input.svg" class="h-25 w-25">
+          <img src="@/assets/input.svg" class="questionType">
         </add-ques-button>
         <add-ques-button text="多行输入框" type="4">
-          <img src="@/assets/textarea.svg" class="h-25 w-25">
+          <img src="@/assets/textarea.svg" class="questionType">
         </add-ques-button>
       </add-ques-button-panel>
       <el-divider />
       <add-ques-button-panel ques-sort="选择类题型">
         <add-ques-button text="单项选择" type="1">
-          <img src="@/assets/radio.svg" class="h-25 w-25">
+          <img src="@/assets/radio.svg" class="questionType">
         </add-ques-button>
         <add-ques-button text="多项选择" type="2">
-          <img src="@/assets/checkbox.svg" class="h-25 w-25">
+          <img src="@/assets/checkbox.svg" class="questionType">
         </add-ques-button>
         <!--        <add-ques-button text="投票" type="6">-->
-        <!--          <img src="@/assets/vote.svg" class="h-25 w-25">-->
+        <!--          <img src="@/assets/vote.svg" class="questionType">-->
         <!--        </add-ques-button>-->
       </add-ques-button-panel>
       <el-divider />
       <add-ques-button-panel ques-sort="上传类题型">
         <add-ques-button text="上传图片" type="5">
-          <img src="@/assets/uploadPic.svg" class="h-25 w-25">
+          <img src="@/assets/uploadPic.svg" class="questionType">
         </add-ques-button>
       </add-ques-button-panel>
     </div>
@@ -46,5 +46,7 @@ import AddQuesButton from "@/pages/DetailInfo/question/addQuesButton.vue";
 </script>
 
 <style scoped>
-
+.questionType {
+  @apply h-25 w-25
+}
 </style>

src/pages/DetailInfo/question/checkbox.vue

@@ -9,7 +9,7 @@
             v-model="localTitle"
             type="text"
             placeholder="Question"
-            class="rounded-none focus:outline-none dark:bg-customGray_more_shallow input input-bordered shadow-md w-350"
+            class="questionCheckboxName w-350"
           >
           <div v-else class="w-350">
             {{ localTitle }}
@@ -25,7 +25,7 @@
           <input
             v-model="item.content"
             type="text"
-            class="rounded-none focus:outline-none dark:bg-customGray_more_shallow input input-bordered h-40 shadow-md"
+            class="questionCheckboxName h-40"
             placeholder="option"
           >
           <div class="ml-10 flex items-center gap-20">
@@ -208,5 +208,7 @@ watch(localOptions, (newOptions) => {
 </script>
 
 <style scoped>
-
+.questionCheckboxName {
+  @apply rounded-none focus:outline-none dark:bg-customGray_more_shallow input input-bordered shadow-md
+}
 </style>

src/pages/DetailInfo/question/fill.vue

@@ -9,7 +9,7 @@
             v-model="localTitle"
             type="text"
             placeholder="Question"
-            class="dark:bg-customGray_more_shallow input rounded-none h-40  focus:outline-none  w-350"
+            class="h-40 w-350 questionContent"
           >
           <div v-else>
             {{ localTitle }}
@@ -19,7 +19,7 @@
     </div>
     <div class="divider" />
     <div class="flex-col p-5 overflow-y-auto h-60">
-      <input class="dark:bg-customGray_more_shallow input input-bordered rounded-none  focus:outline-none w-full" :placeholder="pal">
+      <input class="input-bordered w-full questionContent" :placeholder="pal">
     </div>
   </div>
 </template>
@@ -100,4 +100,7 @@ const pal = computed(() => {
 </script>
 
 <style scoped>
+.questionContent {
+  @apply dark:bg-customGray_more_shallow input rounded-none focus:outline-none
+}
 </style>

src/pages/DetailInfo/question/radio.vue

@@ -9,7 +9,7 @@
             v-model="localTitle"
             type="text"
             placeholder="Question"
-            class="dark:bg-customGray_more_shallow input rounded-none h-40  focus:outline-none  w-350"
+            class="w-350 questionRadioName"
           >
           <div v-else>
             {{ localTitle }}
@@ -24,7 +24,7 @@
         <input
           v-model="item.content"
           type="text"
-          class="dark:bg-customGray_more_shallow input input-bordered h-40 shadow-md rounded-none focus:outline-none"
+          class="input-bordered shadow-md questionRadioName"
           placeholder="option"
         >
         <div class="ml-10 flex items-center gap-20">
@@ -185,4 +185,7 @@ watch(localOptions, (newOptions) => {
 </script>
 
 <style scoped>
-</style>
+.questionRadioName {
+  @apply dark:bg-customGray_more_shallow input rounded-none h-40 focus:outline-none
+}
+</style>

src/pages/DetailInfo/question/textArea.vue

@@ -9,7 +9,7 @@
             v-model="localTitle"
             type="text"
             placeholder="Question"
-            class="rounded-none focus:outline-none dark:bg-customGray_more_shallow input input-bordered shadow-md w-350"
+            class="questionTextInput input input-bordered w-350"
           >
           <div v-else class="w-350">
             {{ localTitle }}
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="divider" />
-    <textarea placeholder="Type here" class="rounded-none focus:outline-none dark:bg-customGray_more_shallow textarea textarea-bordered shadow-md w-full h-100" />
+    <textarea placeholder="Type here" class="questionTextInput textarea textarea-bordered w-full h-100" />
     <!-- <div class="divider" />
     <div class="mt-20 flex justify-evenly items-center ">
       <button class="btn btn-error dark:opacity-75 shadow-md dark:text-white" @click="$emit('on-click')">
@@ -80,4 +80,7 @@ watch(localUnique, (newUnique) => {
 </script>
 
 <style scoped>
+.questionTextInput {
+  @apply rounded-none focus:outline-none dark:bg-customGray_more_shallow shadow-md
+}
 </style>

src/pages/DetailInfo/questionList.vue

@@ -3,8 +3,8 @@
     <div v-if="mode === 'ques'" class="bg-base-200 dark:bg-customGray flex-1  overflow-y-auto h-[80vh]">
       <div v-if="schema && schema.quesConfig" class="flex-col justify-center p-20 pb-0">
         <div class="flex justify-center items-center flex-col gap-10">
-          <input v-model="schema.quesConfig.title" class="input bg-base-200 flex focus:bg-base-100 hover:border-gray-300 text-2xl w-[100%] text-center dark:bg-customGray" placeholder="问卷标题">
-          <textarea v-model="schema.quesConfig.desc" class=" textarea bg-base-200 flex focus:bg-base-100 hover:border-gray-300 text-md w-[100%] resize-none dark:bg-customGray" placeholder="问卷描述" />
+          <input v-model="schema.quesConfig.title" class="input questionHeader text-2xl text-center" placeholder="问卷标题">
+          <textarea v-model="schema.quesConfig.desc" class=" textarea questionHeader text-md resize-none" placeholder="问卷描述" />
         </div>
       </div>
       <div class="divider" />
@@ -15,7 +15,7 @@
           @click="activeSerial = q.serialNum"
         >
           <div class="relative flex items-center gap-4 w-full dark:bg-[#1A1A1A]">
-            <div v-if="q.quesSetting.questionType === QuesItemType.RADIO" class="flex-grow w-full">
+            <div v-if="q.quesSetting.questionType === QuesItemType.RADIO" class="questionItems">
               <el-skeleton animated :loading="loading">
                 <radio
                   v-model:title="q.subject"
@@ -30,7 +30,7 @@
                 />
               </el-skeleton>
             </div>
-            <div v-if="q.quesSetting.questionType === QuesItemType.CHECKBOX" class="flex-grow w-full">
+            <div v-if="q.quesSetting.questionType === QuesItemType.CHECKBOX" class="questionItems">
               <el-skeleton animated :loading="loading">
                 <template #template>
                   <skeleton-card />
@@ -52,7 +52,7 @@
                 </template>
               </el-skeleton>
             </div>
-            <div v-if="q.quesSetting.questionType === QuesItemType.INPUT" class="flex-grow w-full">
+            <div v-if="q.quesSetting.questionType === QuesItemType.INPUT" class="questionItems">
               <el-skeleton animated :loading="loading">
                 <template #template>
                   <skeleton-card />
@@ -71,7 +71,7 @@
                 </template>
               </el-skeleton>
             </div>
-            <div v-if="q.quesSetting.questionType === QuesItemType.TEXTAREA" class="flex-grow w-full">
+            <div v-if="q.quesSetting.questionType === QuesItemType.TEXTAREA" class="questionItems">
               <el-skeleton :loading="loading">
                 <template #template>
                   <skeleton-card />
@@ -89,7 +89,7 @@
                 </template>
               </el-skeleton>
             </div>
-            <div v-if="q.quesSetting.questionType === QuesItemType.PHOTO" class="flex-grow w-full">
+            <div v-if="q.quesSetting.questionType === QuesItemType.PHOTO" class="questionItems">
               <el-skeleton animated :loading="loading">
                 <template #template>
                   <skeleton-card />
@@ -111,22 +111,22 @@
             <div v-if="q.serialNum === activeSerial" class="flex flex-col gap-10">
               <button
                 v-if="q.serialNum !== 1"
-                class="rounded-full w-24 h-24 flex justify-center items-center bg-gray-300 hover:bg-gray-400 text-white transition-colors duration-200"
+                class="questionButton"
                 @click.stop="activeMove(activeSerial-1, 'up')"
               >
                 ↑
               </button>
 
               <button
                 v-if="q.serialNum !== schema.quesConfig.questionList.length"
-                class="rounded-full w-24 h-24 flex justify-center items-center bg-gray-300 hover:bg-gray-400 text-white transition-colors duration-200"
+                class="questionButton"
                 @click.stop="activeMove(activeSerial-1, 'down')"
               >
                 ↓
               </button>
 
               <button
-                class="rounded-full w-24 h-24 flex justify-center items-center bg-gray-300 hover:bg-gray-400 text-white transition-colors duration-200"
+                class="questionButton"
                 @click.stop="activeDelete(activeSerial-1)"
               >
                 x
@@ -139,15 +139,15 @@
     <div class="flex justify-center items-center gap-10 mt-10">
       <button
         v-show="isNew === 'true'"
-        class="btn dark:opacity-75 dark:text-white btn-sm flex-1 bg-red-100 hover:bg-red-200 hover:border-red-300"
+        class="btn btn-sm questionActionButton"
         style="border-radius: 0"
         @click="showModal('SaveQuestionnaireSubmit')"
       >
         保存
       </button>
       <button
         v-show="isNew === 'true'"
-        class="btn btn-sm dark:opacity-75 dark:text-white flex-1 hover:bg-red-200 bg-red-100 hover:border-red-300"
+        class="btn btn-sm questionActionButton"
         style="border-radius: 0"
         @click="showModal(surveyId === -1?'NewQuestionnaireSubmit':'SaveQuestionnaireSubmit')"
       >
@@ -288,4 +288,19 @@ const saveEdit = () => {
     }
   });
 };
-</script>
+</script>
+
+<style scoped>
+.questionButton {
+  @apply rounded-full w-24 h-24 flex justify-center items-center bg-gray-300 hover:bg-gray-400 text-white transition-colors duration-200
+}
+.questionHeader {
+  @apply bg-base-200 flex focus:bg-base-100 hover:border-gray-300 w-[100%] dark:bg-customGray
+}
+.questionItems {
+  @apply flex-grow w-full
+}
+.questionActionButton {
+  @apply dark:opacity-75 dark:text-white flex-1 hover:bg-red-200 bg-red-100 hover:border-red-300
+}
+</style>

src/pages/DetailInfo/rightMenu.vue

@@ -12,7 +12,7 @@
 
     <div class="pl-16">
       <!-- 所有题型通用 -->
-      <div class="text-sm font-medium">
+      <div class="questionText">
         基础配置
       </div>
       <div class="pt-8">
@@ -40,7 +40,7 @@
         />
       </div>
 
-      <div class="pt-16 text-sm font-medium">
+      <div class="pt-16 questionText">
         引导介绍文案
       </div>
 
@@ -55,7 +55,7 @@
 
       <!-- 填空特殊逻辑 -->
       <div v-if="currentType === QuesItemType.INPUT || currentType === QuesItemType.TEXTAREA" class="pt-24">
-        <div class="text-sm font-medium">
+        <div class="questionText">
           内容格式限制
         </div>
         <div class="pt-16">
@@ -72,20 +72,20 @@
 
       <!-- 多选特殊逻辑 -->
       <div v-if="currentType === QuesItemType.CHECKBOX" class="pt-24">
-        <div class="text-sm font-medium">
+        <div class="questionText">
           选项配置
         </div>
         <div class="pt-16">
           <div>
-            <span class="text-sm font-medium pr-8">最少选择数</span>
+            <span class="questionText pr-8">最少选择数</span>
             <el-input-number
               v-model="questionList[activeSerial - 1].quesSetting.minimumOption"
               min="0"
               :max="questionList[activeSerial - 1].quesSetting.maximumOption"
             />
           </div>
           <div class="pt-10">
-            <span class="text-sm font-medium pr-8">最多选择数</span>
+            <span class="questionText pr-8">最多选择数</span>
             <el-input-number
               v-model="questionList[activeSerial - 1].quesSetting.maximumOption"
               :min="questionList[activeSerial - 1].quesSetting.minimumOption"
@@ -163,4 +163,8 @@ const addOption = (serialNum: number) => {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+.questionText {
+  @apply text-sm font-medium
+}
+</style>

src/pages/View/view.vue

@@ -498,7 +498,7 @@ const checkAnswer = () => {
       if (q.answer.split("┋").length > q.quesSetting.maximumOption) {
         ElNotification.error(`该投票最多只能选择${q.quesSetting.maximumOption}个选项`);
       } else if (q.answer.split("┋").length < q.quesSetting.minimumOption) {
-        ElNotification.error(`该投票最少需要选择${q.quesSetting.maximumOption}个选项`);
+        ElNotification.error(`该投票最少需要选择${q.quesSetting.minimumOption}个选项`);
       }
       return true;
     }