feat: 优化展示

web/src/management/hooks/useJumpLogicInfo.js

@@ -3,7 +3,6 @@ import { useQuestionInfo } from './useQuestionInfo'
 import { useEditStore } from '../stores/edit'
 import { storeToRefs } from 'pinia'
 
-
 // 目标题的显示逻辑提示文案
 export const useJumpLogicInfo = (field) => {
   const editStore = useEditStore()

web/src/management/pages/login/LoginPage.vue

@@ -38,7 +38,7 @@
 
         <el-form-item label="验证码" prop="captcha">
           <div class="captcha-wrapper">
-            <el-input style="width: 150px" v-model="formData.captcha" size="large"></el-input>
+            <el-input style="width: 200px" v-model="formData.captcha" size="large"></el-input>
             <div class="captcha-img" @click="refreshCaptcha" v-html="captchaImgData"></div>
           </div>
         </el-form-item>
@@ -71,6 +71,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
+import { debounce as _debounce } from 'lodash-es'
+
 import { getPasswordStrength, login, register } from '@/management/api/auth'
 import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
 import { CODE_MAP } from '@/management/api/base'
@@ -159,8 +161,8 @@ const rules = {
   ],
   password: [
     {
-      validator: passwordValidator,
+      validator: _debounce(passwordValidator, 500),
-      trigger: 'blur'
+      trigger: 'change'
     }
   ],
   captcha: [
@@ -311,18 +313,20 @@ const refreshCaptcha = async () => {
       cursor: pointer;
       :deep(> svg) {
         max-height: 40px;
+        width: 120px;
+        margin-left: 20px;
       }
     }
   }
 
   .strength {
     display: inline-block;
-    width: 20%;
+    width: 30%;
     height: 6px;
     border-radius: 8px;
     background: red;
     &:not(:first-child) {
-      margin-left: 10px;
+      margin-left: 8px;
     }
   }
 }

web/src/management/styles/icon.scss

@@ -1,8 +1,9 @@
 @font-face {
-  font-family: 'iconfont';  /* Project id 4263849 */
+  font-family: 'iconfont'; /* Project id 4263849 */
-  src: url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff2?t=1723600417360') format('woff2'),
+  src:
-       url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff?t=1723600417360') format('woff'),
+    url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff2?t=1723600417360') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.ttf?t=1723600417360') format('truetype');
+    url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff?t=1723600417360') format('woff'),
+    url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.ttf?t=1723600417360') format('truetype');
 }
 
 .iconfont {

web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue'
+import { inject } from 'vue'
 import ExtraIcon from '../ExtraIcon/index.vue'
 
 defineProps({
@@ -34,14 +34,8 @@ defineProps({
 })
 const emit = defineEmits(['addOther', 'optionChange', 'change'])
 
-const moduleConfig = inject('moduleConfig')
 const slots = inject('slots')
 
-const optionConfigVisible = ref(false)
-const openOptionConfig = () => {
-  optionConfigVisible.value = true
-}
-
 const addOther = () => {
   emit('addOther')
 }

web/src/render/components/QuestionWrapper.vue

@@ -30,7 +30,7 @@ const props = defineProps({
     default: () => {
       return {}
     }
-  },
+  }
 })
 const emit = defineEmits(['change'])
 const questionStore = useQuestionStore()
@@ -40,11 +40,7 @@ const formValues = computed(() => {
   return surveyStore.formValues
 })
 const { showLogicEngine } = storeToRefs(surveyStore)
-const {
+const { changeField, changeIndex, needHideFields } = storeToRefs(questionStore)
-  changeField,
-  changeIndex,
-  needHideFields,
-} = storeToRefs(questionStore)
 // 题型配置转换
 const questionConfig = computed(() => {
   let moduleConfig = props.moduleConfig
@@ -93,7 +89,6 @@ const logicshow = computed(() => {
   return result === undefined ? true : result
 })
 
-
 const logicskip = computed(() => {
   return needHideFields.value.includes(props.moduleConfig.field)
 })
@@ -101,7 +96,6 @@ const visibily = computed(() => {
   return logicshow.value && !logicskip.value
 })
 
-
 // 当题目被隐藏时，清空题目的选中项，实现a显示关联b，b显示关联c场景下，b隐藏不影响题目c的展示
 watch(
   () => visibily.value,
@@ -109,7 +103,7 @@ watch(
     const { field, type, innerType } = props.moduleConfig
     if (!newVal && oldVal) {
       // 如果被隐藏题目有选中值，则需要清空选中值
-      if(formValues.value[field].toString()) {
+      if (formValues.value[field].toString()) {
         let value = ''
         // 题型是多选，或者子题型是多选（innerType是用于投票）
         if (type === QUESTION_TYPE.CHECKBOX || innerType === QUESTION_TYPE.CHECKBOX) {
@@ -136,37 +130,43 @@ const handleChange = (data) => {
 }
 
 const processJumpSkip = () => {
-    const targetResult = surveyStore.jumpLogicEngine
+  const targetResult = surveyStore.jumpLogicEngine
-      .getResultsByField(changeField.value, surveyStore.formValues)
+    .getResultsByField(changeField.value, surveyStore.formValues)
-      .map(item => {
+    .map((item) => {
-        // 获取目标题的序号，处理跳转问卷末尾为最大题的序号
+      // 获取目标题的序号，处理跳转问卷末尾为最大题的序号
-        const index = item.target === 'end' ? surveyStore.dataConf.dataList.length : questionStore.getQuestionIndexByField(item.target)
+      const index =
-        return {
+        item.target === 'end'
-          index,
+          ? surveyStore.dataConf.dataList.length
-          ...item
+          : questionStore.getQuestionIndexByField(item.target)
-        }
+      return {
-      })
+        index,
-    const notMatchedFields = targetResult.filter(item => !item.result)
+        ...item
-    const matchedFields = targetResult.filter(item => item.result)
+      }
-    // 目标题均未匹配，需要展示出来条件题和目标题之间的题目
+    })
-    if (notMatchedFields.length) {
+  const notMatchedFields = targetResult.filter((item) => !item.result)
-      notMatchedFields.forEach(element => {
+  const matchedFields = targetResult.filter((item) => item.result)
-        const endIndex = element.index
+  // 目标题均未匹配，需要展示出来条件题和目标题之间的题目
-        const fields = surveyStore.dataConf.dataList.slice(changeIndex.value + 1, endIndex).map(item => item.field)
+  if (notMatchedFields.length) {
-        // hideMap中remove被跳过的题
+    notMatchedFields.forEach((element) => {
-        questionStore.removeNeedHideFields(fields)
+      const endIndex = element.index
-      });
+      const fields = surveyStore.dataConf.dataList
-    }
+        .slice(changeIndex.value + 1, endIndex)
-  
+        .map((item) => item.field)
-    if (!matchedFields.length) return
+      // hideMap中remove被跳过的题
-    // 匹配到多个目标题时，取最大序号的题目
+      questionStore.removeNeedHideFields(fields)
-    const maxIndexQuestion =
+    })
-      matchedFields.filter(item => item.result).sort((a, b) => b.index - a.index)[0].index
-  
-    // 条件题和目标题之间的题目隐藏
-    const skipKey = surveyStore.dataConf.dataList
-      .slice(changeIndex.value + 1, maxIndexQuestion).map(item => item.field)
-    questionStore.addNeedHideFields(skipKey)
   }
 
+  if (!matchedFields.length) return
+  // 匹配到多个目标题时，取最大序号的题目
+  const maxIndexQuestion = matchedFields
+    .filter((item) => item.result)
+    .sort((a, b) => b.index - a.index)[0].index
+
+  // 条件题和目标题之间的题目隐藏
+  const skipKey = surveyStore.dataConf.dataList
+    .slice(changeIndex.value + 1, maxIndexQuestion)
+    .map((item) => item.field)
+  questionStore.addNeedHideFields(skipKey)
+}
 </script>

web/src/render/stores/question.js

@@ -189,14 +189,14 @@ export const useQuestionStore = defineStore('question', () => {
     return questionData.value[field].index
   }
   const addNeedHideFields = (fields) => {
-    fields.forEach(field => {
+    fields.forEach((field) => {
-      if(!needHideFields.value.includes(field)) {
+      if (!needHideFields.value.includes(field)) {
         needHideFields.value.push(field)
       }
     })
   }
   const removeNeedHideFields = (fields) => {
-    needHideFields.value = needHideFields.value.filter(field => !fields.includes(field))
+    needHideFields.value = needHideFields.value.filter((field) => !fields.includes(field))
   }
   return {
     voteMap,

web/src/render/stores/survey.js

@@ -42,7 +42,6 @@ export const useSurveyStore = defineStore('survey', () => {
   const whiteData = ref({})
   const pageConf = ref([])
 
-
   const router = useRouter()
   const questionStore = useQuestionStore()
   const { setErrorInfo } = useErrorInfo()