feat:新增进度条功能 (#68)

web/src/materials/questions/components/Options/OptionEditBar.vue

@@ -28,7 +28,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const moduleConfig = inject('moduleConfig');
     const optionConfigVisible = ref(false);
-    
+
     const addOther = () => {
       emit('addOther');
     };

web/src/materials/questions/widgets/EditOptions.jsx

@@ -14,7 +14,7 @@ export default defineComponent({
   provide() {
     return {
       currentEditKey: store.getters['edit/currentEditKey'],
-      moduleConfig: computed(()=>this.moduleConfig),
+      moduleConfig: computed(() => this.moduleConfig),
     };
   },
   props: {

web/src/render/components/progressBar.vue

@@ -1,57 +1,97 @@
 <template>
   <div class="progress-outer">
-    <div
-      class="progress-inner"
-      :style="{
-        transition: 'all 0.5s',
-        width: progressConf.precent || 0,
-      }"
-    ></div>
-    <div class="progress-inner-wrapper-pc">
-      <div
-        class="progress-inner-pc"
-        :style="{
-          transition: 'all 0.5s',
-          height: progressConf.precent || 0,
-        }"
-      ></div>
+    <div class="progress-position">
+      <div class="progress-inner-wrapper-mobile">
+        <div
+          class="progress-inner-mobile"
+          :style="{
+            transition: 'all 0.5s',
+            width: precent || 0,
+          }"
+        ></div>
+      </div>
+      <div class="progress-inner-wrapper-pc">
+        <div class="progress-inner-bar">
+          <div
+            class="progress-inner-pc"
+            :style="{
+              transition: 'all 0.5s',
+              height: precent || 0,
+            }"
+          ></div>
+        </div>
+        <div class="percent-pc">{{ precent || '0%' }}</div>
+      </div>
     </div>
-    <div class="percent-pc">{{ progressConf.precent || '0%' }}</div>
   </div>
 </template>
-<script>
-export default {
-  name: 'ProgressBar',
-  props: {
-    progressConf: {
-      type: Object,
-      required: true,
-    },
-  },
-};
+<script setup>
+import { useProgressBar } from '../hook/useProgress';
+
+const { precent } = useProgressBar();
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
 .progress-outer {
   z-index: 10000;
-  position: fixed;
-  width: 100%;
-  height: 2px;
-  top: 0;
-  background-color: #f5f5f5;
+  position: relative;
   overflow: hidden;
-  .progress-inner {
-    display: block;
-    z-index: 10000;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
-    background-color: $primary-color;
-  }
-  .progress-inner-wrapper-pc,
-  .percent-pc {
+  .progress-inner-wrapper-pc {
     display: none;
   }
 }
+@media (min-width: 930px) {
+  .progress-position {
+    position: absolute;
+    right: -24px;
+    top: 160px;
+  }
+  .progress-inner-wrapper-pc {
+    position: fixed;
+    display: flex !important;
+    flex-direction: column;
+    align-items: center;
+    background: #ffffff;
+    border-radius: 2px;
+    width: 56px;
+    height: 240px;
+    .progress-inner-bar {
+      height: 190px;
+      width: 8px;
+      background: #f2f4f7;
+      border-radius: 4px;
+      margin-top: 12px;
+    }
+    .percent-pc {
+      font-size: 12px;
+      color: #6e707c;
+      margin-top: 8px;
+    }
+    .progress-inner-pc {
+      border-radius: 2px;
+      background-color: $primary-color;
+    }
+  }
+}
+@media (max-width: 930px) {
+  .progress-outer {
+    .progress-inner-wrapper-mobile {
+      position: fixed;
+      width: 750px;
+      height: 2px;
+      top: 0;
+      background-color: #f5f5f5;
+      display: block;
+    }
+    .progress-inner-mobile {
+      display: block;
+      z-index: 10000;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      background-color: $primary-color;
+    }
+  }
+}
 </style>

web/src/render/hook/useProgress.js

@@ -0,0 +1,40 @@
+import store from '../store/index';
+import { computed } from 'vue';
+export const useProgressBar = () => {
+  const isVariableEmpty = (variable) => {
+    if (variable === undefined || variable === null) {
+      return true;
+    }
+    if (typeof variable === 'string' && variable.trim() === '') {
+      return true;
+    }
+    if (Array.isArray(variable) && variable.length === 0) {
+      return true;
+    }
+    if (typeof variable === 'object' && Object.keys(variable).length === 0) {
+      return true;
+    }
+    return false;
+  };
+
+  const surveySchedule = computed(() => {
+    let data = {
+      fillCount: 0,
+      topicCount: 0,
+    };
+    const formValues = store.state.formValues;
+    for (let key in formValues) {
+      if (key.split('_').length > 1) continue;
+      data.topicCount++;
+      if (!isVariableEmpty(formValues[key])) data.fillCount++;
+    }
+    return data;
+  });
+
+  const precent = computed(() => {
+    const { fillCount, topicCount } = surveySchedule.value;
+    return Math.floor((100 / topicCount) * fillCount) + '%';
+  });
+
+  return { surveySchedule, precent };
+};

web/src/render/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="index">
+    <progressBar />
     <Header></Header>
     <mainRenderer ref="main"></mainRenderer>
     <submit
@@ -14,6 +15,7 @@
 import Header from '../components/header.vue';
 import submit from '../components/submit.vue';
 import mainRenderer from '../components/mainRenderer';
+import progressBar from '../components/progressBar';
 import { submitForm } from '@/render/api/survey';
 import encrypt from '../utils/encrypt';
 
@@ -33,6 +35,7 @@ export default {
     Header,
     submit,
     mainRenderer,
+    progressBar,
   },
   computed: {
     formModel() {