feat: edit vuex迁移pinia (#325)

* build: dev reload optimized

* feat: edit store change pinia

* feat: store中状态修改增加方法

* feat: js改为ts

---------

Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>

web/src/management/hooks/useQuestionInfo.js

@@ -1,17 +1,19 @@
 import { computed } from 'vue'
-import store from '@/management/store'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import { cleanRichText } from '@/common/xss'
 export const useQuestionInfo = (field) => {
+  const editStore = useEditStore()
+  const { questionDataList } = storeToRefs(editStore)
+
   const getQuestionTitle = computed(() => {
-    const questionDataList = store.state.edit.schema.questionDataList
     return () => {
-      return questionDataList.find((item) => item.field === field)?.title
+      return questionDataList.value.find((item) => item.field === field)?.title
     }
   })
   const getOptionTitle = computed(() => {
-    const questionDataList = store.state.edit.schema.questionDataList
     return (value) => {
-      const options = questionDataList.find((item) => item.field === field)?.options || []
+      const options = questionDataList.value.find((item) => item.field === field)?.options || []
       if (value instanceof Array) {
         return options
           .filter((item) => value.includes(item.hash))

web/src/management/hooks/useResizeObserver.js

@@ -1,5 +1,5 @@
 // 引入防抖函数
-import _debounce from 'lodash/debounce'
+import { debounce as _debounce } from 'lodash-es'
 /**
  * @description: 监听元素尺寸变化
  * @param {*} el 元素dom

web/src/management/pages/analysis/components/StatisticsItem.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 import { reactive, toRefs, computed, watch, onMounted, onUnmounted, ref } from 'vue'
-import _cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep as _cloneDeep } from 'lodash-es'
 import {
   separateItemListHead,
   summaryType,

web/src/management/pages/edit/components/MaterialGroup.vue

@@ -34,7 +34,7 @@
 
 <script>
 import { computed, defineComponent, ref, getCurrentInstance } from 'vue'
-import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 import QuestionContainerB from '@/materials/questions/QuestionContainerB'
 import QuestionWrapper from '@/management/pages/edit/components/QuestionWrapper.vue'
 import draggable from 'vuedraggable'
@@ -61,13 +61,13 @@ export default defineComponent({
   },
   emits: ['change', 'select', 'changeSeq'],
   setup(props, { emit }) {
-    const store = useStore()
+    const editStore = useEditStore()
     const renderData = computed({
       get() {
         return filterQuestionPreviewData(props.questionDataList)
       },
-      set(questionDataList) {
-        store.commit('edit/setQuestionDataList', questionDataList)
+      set(value) {
+        editStore.setQuestionDataList(value)
       }
     })
     const handleSelect = (index) => {

web/src/management/pages/edit/components/ModuleNavbar.vue

@@ -17,8 +17,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { useEditStore } from '@/management/stores/edit'
 
 import BackPanel from '../modules/generalModule/BackPanel.vue'
 import TitlePanel from '../modules/generalModule/TitlePanel.vue'
@@ -28,8 +27,8 @@ import PreviewPanel from '../modules/contentModule/PreviewPanel.vue'
 import SavePanel from '../modules/contentModule/SavePanel.vue'
 import PublishPanel from '../modules/contentModule/PublishPanel.vue'
 
-const store = useStore()
-const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
+const editStore = useEditStore()
+const title = computed(() => (editStore.schema?.metaData as any)?.title || '')
 </script>
 <style lang="scss" scoped>
 .nav {

web/src/management/pages/edit/index.vue

@@ -15,7 +15,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
@@ -26,16 +26,17 @@ import Navbar from './components/ModuleNavbar.vue'
 
 import { initShowLogicEngine } from '@/management/hooks/useShowLogicEngine'
 
-const store = useStore()
+const editStore = useEditStore()
+const { schema, init, setSurveyId } = editStore
 const router = useRouter()
 const route = useRoute()
 
 onMounted(async () => {
-  store.commit('edit/setSurveyId', route.params.id)
+  setSurveyId(route.params.id as string)
 
   try {
-    await store.dispatch('edit/init')
-    await initShowLogicEngine(store.state.edit.schema.logicConf.showLogicConf || {})
+    await init()
+    await initShowLogicEngine(schema.logicConf.showLogicConf || {})
   } catch (err: any) {
     ElMessage.error(err.message)
 

web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue

@@ -25,9 +25,9 @@
   </el-popover>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useStore } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
 moment.locale('zh-cn')
@@ -44,21 +44,21 @@ const publishList = ref<Array<any>>([])
 const currentTab = ref<'daily' | 'publish'>('daily')
 const visible = ref<boolean>(false)
 
-const store = useStore()
+const editStore = useEditStore()
+const { surveyId, schemaUpdateTime } = storeToRefs(editStore)
 
 const queryHistories = async () => {
   if (dirtyMonitor.value) {
     loading.value = true
     dirtyMonitor.value = false
 
-    const surveyId = _get(store.state, 'edit.surveyId')
     const [dHis, pHis] = await Promise.all([
       getSurveyHistory({
-        surveyId,
+        surveyId: surveyId.value,
         historyType: 'dailyHis'
       }),
       getSurveyHistory({
-        surveyId,
+        surveyId: surveyId.value,
         historyType: 'publishHis'
       })
     ]).finally(() => {
@@ -81,7 +81,6 @@ const handlePopoverShow = async () => {
 }
 const loading = ref<boolean>(false)
 const dirtyMonitor = ref<boolean>(true)
-const schemaUpdateTime = computed(() => _get(store.state, 'edit.schemaUpdateTime'))
 
 watch(
   schemaUpdateTime,

web/src/management/pages/edit/modules/contentModule/PublishPanel.vue

@@ -5,7 +5,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
@@ -15,7 +15,8 @@ import { showLogicEngine } from '@/management/hooks/useShowLogicEngine'
 import buildData from './buildData'
 
 const isPublishing = ref<boolean>(false)
-const store = useStore()
+const editStore = useEditStore()
+const { schema, changeSchema, getSchemaFromRemote } = editStore
 const router = useRouter()
 
 const updateLogicConf = () => {
@@ -27,7 +28,7 @@ const updateLogicConf = () => {
     showLogicEngine.value.validateSchema()
     const showLogicConf = showLogicEngine.value.toJson()
     // 更新逻辑配置
-    store.dispatch('edit/changeSchema', { key: 'logicConf', value: { showLogicConf } })
+    changeSchema({ key: 'logicConf', value: { showLogicConf } })
   }
 }
 
@@ -46,7 +47,7 @@ const handlePublish = async () => {
     return
   }
 
-  const saveData = buildData(store.state.edit.schema)
+  const saveData = buildData(schema)
   if (!saveData.surveyId) {
     isPublishing.value = false
     ElMessage.error('未获取到问卷id')
@@ -64,7 +65,7 @@ const handlePublish = async () => {
     const publishRes: any = await publishSurvey({ surveyId: saveData.surveyId })
     if (publishRes.code === 200) {
       ElMessage.success('发布成功')
-      store.dispatch('edit/getSchemaFromRemote')
+      getSchemaFromRemote()
       router.push({ name: 'publish' })
     } else {
       ElMessage.error(`发布失败 ${publishRes.errmsg}`)

web/src/management/pages/edit/modules/contentModule/SavePanel.vue

@@ -15,8 +15,8 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, nextTick, watch } from 'vue'
-import { useStore } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
@@ -36,10 +36,12 @@ const saveText = computed(
     })[autoSaveStatus.value]
 )
 
-const store = useStore()
+const editStore = useEditStore()
+const { schemaUpdateTime } = storeToRefs(editStore)
+const { schema, changeSchema } = editStore
 
 const saveData = async () => {
-  const saveData = buildData(store.state.edit.schema)
+  const saveData = buildData(schema)
 
   if (!saveData.surveyId) {
     ElMessage.error('未获取到问卷id')
@@ -59,7 +61,7 @@ const updateLogicConf = () => {
     showLogicEngine.value.validateSchema()
     const showLogicConf = showLogicEngine.value.toJson()
     // 更新逻辑配置
-    store.dispatch('edit/changeSchema', { key: 'logicConf', value: { showLogicConf } })
+    changeSchema({ key: 'logicConf', value: { showLogicConf } })
   }
 }
 
@@ -128,7 +130,6 @@ const handleSave = async () => {
   }
 }
 
-const schemaUpdateTime = computed(() => _get(store.state, 'edit.schemaUpdateTime'))
 watch(schemaUpdateTime, () => {
   triggerAutoSave()
 })

web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue

@@ -6,13 +6,13 @@
           :bannerConf="bannerConf"
           :readonly="false"
           :is-selected="currentEditOne === 'mainTitle'"
-          @select="onSelectEditOne('mainTitle')"
+          @select="setCurrentEditOne('mainTitle')"
           @change="handleChange"
         />
         <MaterialGroup
           :current-edit-one="parseInt(currentEditOne)"
           :questionDataList="questionDataList"
-          @select="onSelectEditOne"
+          @select="setCurrentEditOne"
           @change="handleChange"
           @changeSeq="onQuestionOperation"
           ref="materialGroup"
@@ -22,7 +22,7 @@
           :readonly="false"
           :skin-conf="skinConf"
           :is-selected="currentEditOne === 'submit'"
-          @select="onSelectEditOne('submit')"
+          @select="setCurrentEditOne('submit')"
         />
       </div>
     </div>
@@ -30,24 +30,23 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, toRefs } from 'vue'
 import communalLoader from '@materials/communals/communalLoader.js'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
-import { useStore } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 
 const MainTitle = communalLoader.loadComponent('MainTitle')
 const SubmitButton = communalLoader.loadComponent('SubmitButton')
 
-const store = useStore()
+const editStore = useEditStore()
+const { questionDataList, currentEditOne, currentEditKey } = storeToRefs(editStore)
+const { schema, changeSchema, moveQuestion, copyQuestion, deleteQuestion, setCurrentEditOne } =
+  editStore
 const mainOperation = ref(null)
 const materialGroup = ref(null)
 
-const bannerConf = computed(() => store.state.edit.schema.bannerConf)
-const submitConf = computed(() => store.state.edit.schema.submitConf)
-const skinConf = computed(() => store.state.edit.schema.skinConf)
-const questionDataList = computed(() => store.state.edit.schema.questionDataList)
-const currentEditOne = computed(() => store.state.edit.currentEditOne)
-const currentEditKey = computed(() => store.getters['edit/currentEditKey'])
+const { bannerConf, submitConf, skinConf } = toRefs(schema)
 const autoScrollData = computed(() => {
   return {
     currentEditOne: currentEditOne.value,
@@ -55,44 +54,39 @@ const autoScrollData = computed(() => {
   }
 })
 
-const onSelectEditOne = async (currentEditOne) => {
-  store.commit('edit/setCurrentEditOne', currentEditOne)
-}
-
 const handleChange = (data) => {
   if (currentEditOne.value === null) {
     return
   }
   const { key, value } = data
   const resultKey = `${currentEditKey.value}.${key}`
-  store.dispatch('edit/changeSchema', { key: resultKey, value })
+  changeSchema({ key: resultKey, value })
 }
 
 const onMainClick = (e) => {
   if (e.target === mainOperation.value) {
-    store.commit('edit/setCurrentEditOne', null)
+    setCurrentEditOne(null)
   }
 }
 
 const onQuestionOperation = (data) => {
   switch (data.type) {
     case 'move':
-      store.dispatch('edit/moveQuestion', {
+      moveQuestion({
         index: data.index,
         range: data.range
       })
       break
     case 'delete':
-      store.dispatch('edit/deleteQuestion', { index: data.index })
+      deleteQuestion({ index: data.index })
       break
     case 'copy':
-      store.dispatch('edit/copyQuestion', { index: data.index })
+      copyQuestion({ index: data.index })
       break
     default:
       break
   }
 }
-
 watch(
   skinConf,
   (newVal) => {

web/src/management/pages/edit/modules/questionModule/SetterPanel.vue

@@ -17,23 +17,19 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 
 import SetterField from '@/management/pages/edit/components/SetterField.vue'
 
-const store = useStore()
-
-const currentEditOne = computed(() => store.state?.edit?.currentEditOne)
-const formConfigList = computed(() => store.getters['edit/formConfigList'])
-const moduleConfig = computed(() => store.getters['edit/moduleConfig'])
-const currentEditKey = computed(() => store.getters['edit/currentEditKey'])
-const currentEditMeta = computed(() => store.getters['edit/currentEditMeta'])
-
+const editStore = useEditStore()
+const { currentEditOne, currentEditKey, currentEditMeta, formConfigList, moduleConfig } =
+  storeToRefs(editStore)
+const { changeSchema } = editStore
 const handleFormChange = (data: any) => {
   const { key, value } = data
   const resultKey = `${currentEditKey.value}.${key}`
-  store.dispatch('edit/changeSchema', { key: resultKey, value })
+  changeSchema({ key: resultKey, value })
 }
 </script>
 <style lang="scss" scoped>

web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue

@@ -12,7 +12,7 @@
           :title="element.title"
           :indexNumber="element.indexNumber"
           :showIndex="element.showIndex"
-          @select="handleSelect(index)"
+          @select="setCurrentEditOne(index)"
         />
       </template>
     </draggable>
@@ -20,34 +20,30 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useStore } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import draggable from 'vuedraggable'
 
 import CatalogItem from './CatalogItem.vue'
 import { filterQuestionPreviewData } from '@/management/utils/index'
 
-const store = useStore()
+const editStore = useEditStore()
+const { questionDataList, currentEditOne } = storeToRefs(editStore)
+const { moveQuestion, setCurrentEditOne } = editStore
 const renderData = computed(() => {
-  const questions = store.state.edit.schema.questionDataList
-  return filterQuestionPreviewData(questions) || []
+  return filterQuestionPreviewData(questionDataList.value) || []
 })
 
 const handleDragEnd = ({ newIndex, oldIndex }: any) => {
-  const currentActivityKey = store.state.edit.currentEditOne
-
-  if (currentActivityKey === oldIndex) {
-    handleSelect(newIndex)
+  if (currentEditOne.value === oldIndex) {
+    setCurrentEditOne(newIndex)
   }
 
-  store.dispatch('edit/moveQuestion', {
+  moveQuestion({
     index: oldIndex,
     range: newIndex - oldIndex
   })
 }
-
-const handleSelect = (idx: number) => {
-  store.commit('edit/setCurrentEditOne', idx)
-}
 </script>
 <style lang="scss" scoped>
 .question-catalog-wrapper {

web/src/management/pages/edit/modules/questionModule/components/TypeList.vue

@@ -45,20 +45,24 @@ import { DND_GROUP } from '@/management/config/dnd'
 
 import questionMenuConfig, { questionTypeList } from '@/management/config/questionMenuConfig'
 import { getQuestionByType } from '@/management/utils/index'
-import { useStore } from 'vuex'
-import { get as _get, isNumber as _isNumber } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
+import { isNumber as _isNumber } from 'lodash-es'
 import { computed, ref } from 'vue'
 import { QUESTION_TYPE } from '@/common/typeEnum.ts'
-const store = useStore()
+
+const editStore = useEditStore()
+const { questionDataList, currentEditOne } = storeToRefs(editStore)
+const { addQuestion, setCurrentEditOne } = editStore
 
 const activeNames = ref([0, 1])
 const previewImg = ref('')
 const isShowPreviewImage = ref(false)
 const previewTop = ref(0)
-const questionDataList = computed(() => _get(store, 'state.edit.schema.questionDataList'))
 const newQuestionIndex = computed(() => {
-  const currentEditOne = _get(store, 'state.edit.currentEditOne')
-  const index = _isNumber(currentEditOne) ? currentEditOne + 1 : questionDataList.value.length
+  const index = _isNumber(currentEditOne.value)
+    ? currentEditOne.value + 1
+    : questionDataList.value.length
   return index
 })
 
@@ -78,8 +82,8 @@ const getNewQuestion = ({ type }) => {
 
 const onQuestionType = ({ type }) => {
   const newQuestion = getNewQuestion({ type })
-  store.dispatch('edit/addQuestion', { question: newQuestion, index: newQuestionIndex.value })
-  store.commit('edit/setCurrentEditOne', newQuestionIndex.value)
+  addQuestion({ question: newQuestion, index: newQuestionIndex.value })
+  setCurrentEditOne(newQuestionIndex.value)
 }
 
 const showPreview = ({ snapshot }, id) => {

web/src/management/pages/edit/modules/settingModule/SettingPanel.vue

@@ -38,7 +38,7 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, onMounted, shallowRef } from 'vue'
-import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get } from 'lodash-es'
 
 import baseConfig from './config/baseConfig'
@@ -61,12 +61,12 @@ const setterList = computed(() => {
       if (_isArray(formKey)) {
         formValue = []
         for (const key of formKey) {
-          const val = _get(store.state.edit.schema, key, formItem.value)
+          const val = _get(schema, key, formItem.value)
           formValue.push(val)
           dataConfig[key] = val
         }
       } else {
-        formValue = _get(store.state.edit.schema, formKey, formItem.value)
+        formValue = _get(schema, formKey, formItem.value)
         dataConfig[formKey] = formValue
       }
       formItem.value = formValue
@@ -78,9 +78,10 @@ const setterList = computed(() => {
   })
 })
 
-const store = useStore()
+const editStore = useEditStore()
+const { schema, changeSchema } = editStore
 const handleFormChange = (data: any) => {
-  store.dispatch('edit/changeSchema', {
+  changeSchema({
     key: data.key,
     value: data.value
   })

web/src/management/pages/edit/modules/settingModule/result/CatalogPanel.vue

@@ -17,10 +17,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 import { EDIT_STATUS_MAP } from '../enum'
+import { storeToRefs } from 'pinia'
 
-const store = useStore()
+const editStore = useEditStore()
+const { currentEditStatus } = storeToRefs(editStore)
 const statusList = [
   {
     type: EDIT_STATUS_MAP.SUCCESS,
@@ -35,10 +37,8 @@ const statusList = [
 ]
 
 const handleChangePreview = (data: any) => {
-  const currentStatus = store.state?.edit?.currentEditStatus
-
-  if (currentStatus && currentStatus !== data.type) {
-    store.commit('edit/changeStatusPreview', data)
+  if (currentEditStatus.value !== data.type) {
+    editStore.changeCurrentEditStatus(data.type)
   }
 }
 </script>

web/src/management/pages/edit/modules/settingModule/result/PreviewPanel.vue

@@ -12,9 +12,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { toRef } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 
 import SuccessContent from '../components/SuccessContent.vue'
 import OverTime from '../components/OverTime.vue'
@@ -25,11 +25,10 @@ const components = {
   [EDIT_STATUS_MAP.OVERTIME]: OverTime
 }
 
-const store = useStore()
-const currentEditStatus = computed(() => store.state?.edit?.currentEditStatus)
-const moduleConfig = computed(() => {
-  return _get(store.state, 'edit.schema.submitConf')
-})
+const editStore = useEditStore()
+const { currentEditStatus } = storeToRefs(editStore)
+const { schema } = editStore
+const moduleConfig = toRef(schema, 'submitConf')
 </script>
 <style lang="scss" scoped>
 .result-config-preview {

web/src/management/pages/edit/modules/settingModule/result/SetterPanel.vue

@@ -23,8 +23,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
-import { useStore } from 'vuex'
+import { computed, ref, shallowRef, toRef } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import { get as _get } from 'lodash-es'
 
 import FormItem from '@/materials/setters/widgets/FormItem.vue'
@@ -36,15 +37,16 @@ const textMap = {
   OverTime: '问卷过期页面配置'
 }
 
-const store = useStore()
+const editStore = useEditStore()
+const { currentEditStatus } = storeToRefs(editStore)
+const { schema, changeSchema } = editStore
 
 const components = shallowRef<any>({})
 const registerTypes = ref<any>({})
-const moduleConfig = computed(() => _get(store.state, 'edit.schema.submitConf'))
-const currentEditText = computed(() => (textMap as any)[store.state.edit.currentEditStatus])
+const moduleConfig = toRef(schema, 'submitConf')
+const currentEditText = computed(() => (textMap as any)[currentEditStatus.value])
 const formFields = computed(() => {
-  const currentStatus = store.state.edit.currentEditStatus
-  const formList = (statusConfig as any)[currentStatus] || []
+  const formList = (statusConfig as any)[currentEditStatus.value] || []
   const list = formList.map((item: any) => {
     const value = _get(moduleConfig.value, item.key, item.value)
 
@@ -57,7 +59,7 @@ const formFields = computed(() => {
 })
 
 const handleFormChange = ({ key, value }: any) => {
-  store.dispatch('edit/changeSchema', {
+  changeSchema({
     key: `submitConf.${key}`,
     value
   })

web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue

@@ -28,10 +28,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
+import { useEditStore } from '@/management/stores/edit'
 
 import skinPresets from '@/management/config/skinPresets.js'
 
 const store = useStore()
+const editStore = useEditStore()
+const { changeThemePreset } = editStore
 const groupName = ref<string>('temp')
 const bannerList = computed(() => store?.state?.bannerList || [])
 const groupList = computed(() =>
@@ -81,7 +84,7 @@ const changePreset = (banner: any) => {
     presets = Object.assign(presets, (skinPresets as any)[name])
   }
 
-  store.dispatch('edit/changeThemePreset', presets)
+  changeThemePreset(presets)
 }
 </script>
 <style lang="scss" scoped>

web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue

@@ -24,9 +24,10 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent } from 'vue'
+import { defineComponent, toRefs } from 'vue'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
-import { useStore } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import communalLoader from '@materials/communals/communalLoader.js'
 
 const HeaderContent = () => communalLoader.loadComponent('HeaderContent')
@@ -43,15 +44,10 @@ export default defineComponent({
     LogoIcon: LogoIcon()
   },
   setup() {
-    const store = useStore()
-
-    const bannerConf = computed(() => store.state.edit.schema.bannerConf)
-    const submitConf = computed(() => store.state.edit.schema.submitConf)
-    const bottomConf = computed(() => store.state.edit.schema.bottomConf)
-    const skinConf = computed(() => store.state.edit.schema.skinConf)
-    const questionDataList = computed(() => store.state.edit.schema.questionDataList)
-    const currentEditOne = computed(() => store.state.edit.currentEditOne)
-    const currentEditKey = computed(() => store.getters['edit/currentEditKey'])
+    const editStore = useEditStore()
+    const { questionDataList, currentEditOne, currentEditKey } = storeToRefs(editStore)
+    const { schema } = editStore
+    const { bannerConf, submitConf, skinConf, bottomConf } = toRefs(schema)
 
     return {
       bannerConf,

web/src/management/pages/edit/modules/settingModule/skin/SetterPanel.vue

@@ -24,23 +24,23 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useStore } from 'vuex'
+import { ref } from 'vue'
+import { useEditStore } from '@/management/stores/edit'
 import { get as _get } from 'lodash-es'
 
 import skinConfig from '@/management/config/setterConfig/skinConfig'
 import SetterField from '@/management/pages/edit/components/SetterField.vue'
 
-const store = useStore()
+const editStore = useEditStore()
+const { schema, changeSchema } = editStore
 const collapse = ref<string>('')
-const schema = computed(() => _get(store.state, 'edit.schema'))
 
 const handleFormChange = (data: any, collapse: string) => {
   const { key, value } = data
   const currentEditKey = `${collapse}`
   const resultKey = `${currentEditKey}.${key}`
 
-  store.dispatch('edit/changeSchema', { key: resultKey, value })
+  changeSchema({ key: resultKey, value })
 }
 </script>
 <style lang="scss" scoped>

web/src/management/pages/edit/pages/edit/LogicEditPage.vue

@@ -5,17 +5,15 @@
 </template>
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import { useStore } from 'vuex'
+import { storeToRefs } from 'pinia'
+import { useEditStore } from '@/management/stores/edit'
 import { cloneDeep } from 'lodash-es'
 
 import RulePanel from '../../modules/logicModule/RulePanel.vue'
 import { filterQuestionPreviewData } from '@/management/utils/index'
 
-const store = useStore()
-
-const questionDataList = computed(() => {
-  return store.state.edit.schema.questionDataList
-})
+const editStore = useEditStore()
+const { questionDataList } = storeToRefs(editStore)
 
 const renderData = computed(() => {
   return filterQuestionPreviewData(cloneDeep(questionDataList.value))

web/src/management/pages/publish/PublishPage.vue

@@ -25,8 +25,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useStore } from 'vuex'
+import { computed, onMounted, toRef } from 'vue'
+import { useEditStore } from '@/management/stores/edit'
 import { useRoute, useRouter } from 'vue-router'
 import { get as _get } from 'lodash-es'
 
@@ -44,14 +44,15 @@ const defaultConfig = {
   img: '/imgs/icons/unpublished.webp'
 }
 
-const store = useStore()
-const metaData = computed(() => _get(store.state, 'edit.schema.metaData'))
+const editStore = useEditStore()
+const { schema, init, setSurveyId } = editStore
+const metaData = toRef(schema, 'metaData')
 const curStatus = computed(() => _get(metaData.value, 'curStatus.status', 'new'))
 const mainChannel = computed(() => {
   let fullUrl = ''
 
   if (metaData.value) {
-    fullUrl = `${location.origin}/render/${metaData.value.surveyPath}?t=${Date.now()}`
+    fullUrl = `${location.origin}/render/${(metaData.value as any).surveyPath}?t=${Date.now()}`
   }
 
   return { fullUrl }
@@ -60,10 +61,10 @@ const mainChannel = computed(() => {
 const route = useRoute()
 const router = useRouter()
 onMounted(async () => {
-  store.commit('edit/setSurveyId', route.params.id)
+  setSurveyId(route.params.id as string)
 
   try {
-    await store.dispatch('edit/init')
+    await init()
   } catch (err: any) {
     ElMessage.error(err.message)
     setTimeout(() => {

web/src/management/stores/edit.ts

@@ -0,0 +1,343 @@
+import { defineStore } from 'pinia'
+import { type Ref, ref, reactive, toRef, computed } from 'vue'
+import { getSurveyById } from '@/management/api/survey'
+import { merge as _merge, cloneDeep as _cloneDeep, set as _set } from 'lodash-es'
+import { getNewField } from '@/management/utils'
+import submitFormConfig from '@/management/config/setterConfig/submitConfig'
+import questionLoader from '@/materials/questions/questionLoader'
+
+const innerMetaConfig = {
+  submit: {
+    title: '提交配置',
+    formConfig: submitFormConfig
+  }
+}
+
+function useInitializeSchema(surveyId: Ref<string>) {
+  const schema = reactive({
+    metaData: null,
+    bannerConf: {
+      titleConfig: {
+        mainTitle: '<h3 style="text-align: center">欢迎填写问卷</h3>',
+        subTitle: `<p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style="color: rgb(204, 0, 0)">期待您的参与！</span></p>`,
+        applyTitle: ''
+      },
+      bannerConfig: {
+        bgImage: '',
+        bgImageAllowJump: false,
+        bgImageJumpLink: '',
+        videoLink: '',
+        postImg: ''
+      }
+    },
+    bottomConf: {
+      logoImage: '',
+      logoImageWidth: '28%'
+    },
+    skinConf: {
+      backgroundConf: {
+        color: '#fff'
+      },
+      themeConf: {
+        color: '#ffa600'
+      },
+      contentConf: {
+        opacity: 100
+      }
+    },
+    baseConf: {
+      begTime: '',
+      endTime: '',
+      language: 'chinese',
+      showVoteProcess: 'allow',
+      tLimit: 0,
+      answerBegTime: '',
+      answerEndTime: '',
+      answerLimitTime: 0
+    },
+    submitConf: {
+      submitTitle: '',
+      msgContent: {},
+      confirmAgain: {
+        is_again: true
+      },
+      link: ''
+    },
+    questionDataList: [],
+    logicConf: {
+      showLogicConf: []
+    }
+  })
+
+  function initSchema({ metaData, codeData }: { metaData: any; codeData: any }) {
+    schema.metaData = metaData
+    schema.bannerConf = _merge({}, schema.bannerConf, codeData.bannerConf)
+    schema.bottomConf = _merge({}, schema.bottomConf, codeData.bottomConf)
+    schema.skinConf = _merge({}, schema.skinConf, codeData.skinConf)
+    schema.baseConf = _merge({}, schema.baseConf, codeData.baseConf)
+    schema.submitConf = _merge({}, schema.submitConf, codeData.submitConf)
+    schema.questionDataList = codeData.questionDataList || []
+    schema.logicConf = codeData.logicConf
+
+    console.log(metaData, codeData)
+  }
+
+  async function getSchemaFromRemote() {
+    const res: any = await getSurveyById(surveyId.value)
+    if (res.code === 200) {
+      const metaData = res.data.surveyMetaRes
+      document.title = metaData.title
+      const {
+        bannerConf,
+        bottomConf,
+        skinConf,
+        baseConf,
+        submitConf,
+        dataConf,
+        logicConf = {}
+      } = res.data.surveyConfRes.code
+      initSchema({
+        metaData,
+        codeData: {
+          bannerConf,
+          bottomConf,
+          skinConf,
+          baseConf,
+          submitConf,
+          questionDataList: dataConf.dataList,
+          logicConf
+        }
+      })
+    } else {
+      throw new Error(res.errmsg || '问卷不存在')
+    }
+  }
+
+  return {
+    schema,
+    initSchema,
+    getSchemaFromRemote
+  }
+}
+
+function useQuestionDataListOperations(questionDataList: Ref<any[]>, updateTime: () => void) {
+  function copyQuestion({ index }: { index: number }) {
+    const newQuestion = _cloneDeep(questionDataList.value[index])
+    newQuestion.field = getNewField(questionDataList.value.map((item) => item.field))
+    addQuestion({ question: newQuestion, index })
+  }
+
+  function addQuestion({ question, index }: { question: any; index: number }) {
+    questionDataList.value.splice(index, 0, question)
+    updateTime()
+  }
+
+  function deleteQuestion({ index }: { index: number }) {
+    questionDataList.value.splice(index, 1)
+    updateTime()
+  }
+
+  function moveQuestion({ index, range }: { index: number; range: number }) {
+    console.log('move')
+    let start, end
+    if (range < 0) {
+      // 向上移动
+      start = index + range
+      end = index
+    } else if (range > 0) {
+      // 向下移动
+      start = index + 1
+      end = index + range + 1
+    } else {
+      // 无变化
+      return
+    }
+    const currentData = questionDataList.value[index]
+    // 新位置和老位置之间所有的题目
+    const comparedList = questionDataList.value.slice(start, end)
+    if (range < 0) {
+      // 向上移动
+      questionDataList.value.splice(index + range, 1 - range, currentData, ...comparedList)
+    } else if (range > 0) {
+      // 向下移动
+      questionDataList.value.splice(index, range + 1, ...comparedList, currentData)
+    }
+    updateTime()
+  }
+
+  return {
+    copyQuestion,
+    addQuestion,
+    deleteQuestion,
+    moveQuestion
+  }
+}
+
+function useCurrentEdit({
+  schema,
+  questionDataList
+}: {
+  schema: any
+  questionDataList: Ref<any[]>
+}) {
+  const currentEditOne = ref()
+  const currentEditStatus = ref('Success')
+
+  const currentEditKey = computed(() => {
+    if (currentEditOne.value === null) {
+      return null
+    }
+    let key = ''
+    switch (currentEditOne.value) {
+      case 'banner':
+      case 'mainTitle':
+        key = 'bannerConf'
+        break
+      case 'submit':
+        key = 'submitConf'
+        break
+      case 'logo':
+        key = 'bottomConf'
+        break
+      default:
+        key = `questionDataList.${currentEditOne.value}`
+    }
+    return key
+  })
+
+  const moduleConfig = computed(() => {
+    if (currentEditOne.value === null) {
+      return null
+    }
+
+    if (currentEditOne.value === 'banner' || currentEditOne.value === 'mainTitle') {
+      return schema?.bannerConf
+    } else if (currentEditOne.value === 'submit') {
+      return schema?.submitConf
+    } else if (currentEditOne.value === 'logo') {
+      return schema?.bottomConf
+    } else if (!Number.isNaN(currentEditOne.value)) {
+      return questionDataList.value?.[currentEditOne.value]
+    } else {
+      return null
+    }
+  })
+
+  const formConfigList = computed(() => {
+    if (currentEditOne.value === null) {
+      return null
+    }
+
+    return currentEditMeta.value?.formConfig || []
+  })
+
+  const currentEditMeta = computed(() => {
+    if (currentEditOne.value === null) {
+      return null
+    } else if (innerMetaConfig[currentEditOne.value as keyof typeof innerMetaConfig]) {
+      return innerMetaConfig[currentEditOne.value as keyof typeof innerMetaConfig]
+    } else {
+      const questionType = questionDataList.value?.[currentEditOne.value]?.type
+      return questionLoader.getMeta(questionType)
+    }
+  })
+
+  function setCurrentEditOne(data: any) {
+    currentEditOne.value = data
+  }
+
+  function changeCurrentEditStatus(status: string) {
+    currentEditStatus.value = status
+  }
+
+  return {
+    currentEditOne,
+    currentEditKey,
+    currentEditStatus,
+    moduleConfig,
+    formConfigList,
+    currentEditMeta,
+    setCurrentEditOne,
+    changeCurrentEditStatus
+  }
+}
+
+export const useEditStore = defineStore('edit', () => {
+  const surveyId = ref('')
+  const schemaUpdateTime = ref(Date.now())
+  const { schema, initSchema, getSchemaFromRemote } = useInitializeSchema(surveyId)
+  const questionDataList = toRef(schema, 'questionDataList')
+  function setQuestionDataList(data: any) {
+    schema.questionDataList = data
+  }
+
+  function setSurveyId(id: string) {
+    surveyId.value = id
+  }
+
+  const {
+    currentEditOne,
+    currentEditKey,
+    currentEditStatus,
+    moduleConfig,
+    formConfigList,
+    currentEditMeta,
+    setCurrentEditOne,
+    changeCurrentEditStatus
+  } = useCurrentEdit({ schema, questionDataList })
+
+  async function init() {
+    const { metaData } = schema
+    if (!metaData || (metaData as any)?._id !== surveyId.value) {
+      getSchemaFromRemote()
+    }
+    currentEditOne.value = null
+    currentEditStatus.value = 'Success'
+  }
+
+  function updateTime() {
+    schemaUpdateTime.value = Date.now()
+  }
+
+  const { copyQuestion, addQuestion, deleteQuestion, moveQuestion } = useQuestionDataListOperations(
+    questionDataList,
+    updateTime
+  )
+
+  function changeSchema({ key, value }: { key: string; value: any }) {
+    _set(schema, key, value)
+    updateTime()
+  }
+
+  function changeThemePreset(presets: any) {
+    Object.keys(presets).forEach((key) => {
+      _set(schema, key, presets[key])
+    })
+  }
+
+  return {
+    surveyId,
+    setSurveyId,
+    currentEditOne,
+    moduleConfig,
+    formConfigList,
+    currentEditKey,
+    currentEditStatus,
+    currentEditMeta,
+    setCurrentEditOne,
+    changeCurrentEditStatus,
+    schemaUpdateTime,
+    schema,
+    questionDataList,
+    setQuestionDataList,
+    init,
+    initSchema,
+    getSchemaFromRemote,
+    copyQuestion,
+    addQuestion,
+    deleteQuestion,
+    moveQuestion,
+    changeSchema,
+    changeThemePreset
+  }
+})

web/vite.config.ts

@@ -59,7 +59,13 @@ export default defineConfig({
       'clipboard',
       'qrcode',
       'moment',
-      'moment/locale/zh-cn'
+      'moment/locale/zh-cn',
+      'echarts',
+      'nanoid',
+      'yup',
+      'crypto-js/sha256',
+      'element-plus/es/locale/lang/zh-cn',
+      'node-forge'
     ]
   },
   plugins: [