perf: 问卷编辑页标题优化 (#240)

* refactor: 重构 src/management/pages/edit/modules 目录下组件, 使用 Vue3 组合式 API 写法

* perf: 问卷编辑页标题优化

web/package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "async-validator": "^4.2.5",

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

@@ -15,35 +15,19 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import BackPanel from '../modules/generalModule/BackPanel.vue'
 import TitlePanel from '../modules/generalModule/TitlePanel.vue'
 import NavPanel from '../modules/generalModule/NavPanel.vue'
 import HistoryPanel from '../modules/contentModule/HistoryPanel.vue'
 import SavePanel from '../modules/contentModule/SavePanel.vue'
 import PublishPanel from '../modules/contentModule/PublishPanel.vue'
-import { mapState } from 'vuex'
+import { useStore } from 'vuex'
 import { get as _get } from 'lodash-es'
+import { computed } from 'vue'
 
-export default {
+const store = useStore()
-  name: 'ModuleNavbar',
+const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
-  components: {
-    BackPanel,
-    TitlePanel,
-    NavPanel,
-    HistoryPanel,
-    SavePanel,
-    PublishPanel
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapState({
-      title: (state) => _get(state, 'edit.schema.metaData.title')
-    })
-  }
-}
 </script>
 
 <style lang="scss" scoped>

web/src/management/pages/edit/modules/generalModule/BackPanel.vue

@@ -5,14 +5,9 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+const onBack = () => {
-  name: 'BackPanel',
+  window.open('/survey', '_self')
-  methods: {
-    onBack() {
-      window.open('/survey', '_self')
-    }
-  }
 }
 </script>
 

web/src/management/pages/edit/modules/generalModule/NavPanel.vue

@@ -25,38 +25,32 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { reactive } from 'vue'
-  name: 'NavPanel',
+
-  props: {},
+const btnList = reactive([
-  data() {
+  {
-    return {
+    icon: 'icon-wenjuanbianji',
-      btnList: [
+    text: '问卷编辑',
-        {
+    router: 'QuestionEditIndex',
-          icon: 'icon-wenjuanbianji',
+    key: 'edit',
-          text: '问卷编辑',
+    next: true
-          router: 'QuestionEditIndex',
+  },
-          key: 'edit',
+  {
-          next: true
+    icon: 'icon-wenjuanshezhi',
-        },
+    text: '问卷设置',
-        {
+    router: 'QuestionEditSetting',
-          icon: 'icon-wenjuanshezhi',
+    key: 'settings',
-          text: '问卷设置',
+    next: true
-          router: 'QuestionEditSetting',
+  },
-          key: 'settings',
+  {
-          next: true
+    icon: 'icon-yangshishezhi',
-        },
+    text: '皮肤设置',
-        {
+    router: 'QuestionSkinSetting',
-          icon: 'icon-yangshishezhi',
+    key: 'skinsettings',
-          text: '皮肤设置',
+    next: true
-          router: 'QuestionSkinSetting',
-          key: 'skinsettings',
-          next: true
-        }
-      ]
-    }
   }
-}
+])
 </script>
 
 <style lang="scss" scoped>

web/src/management/pages/edit/modules/generalModule/TitlePanel.vue

@@ -1,26 +1,77 @@
 <template>
-  <div class="title">
+  <div class="title-container">
-    {{ title }}
+    <div
+        class="title"
+        @mouseover="showFullTitle"
+        @mousemove="updateTooltipPosition"
+        @mouseleave="hideFullTitle"
+    >
+      {{ title }}
+    </div>
+    <div
+        class="tooltip"
+        v-if="tooltipVisible"
+        :style="{ top: tooltipPosition.top + 'px', left: tooltipPosition.left + 'px' }"
+    >
+      {{ title }}
+    </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref } from 'vue'
-  name: 'TitlePanel',
+import { defineProps } from 'vue'
-  props: {
+
-    title: {
+defineProps({
-      type: String,
+  title: {
-      default: ''
+    type: String,
-    }
+    default: ''
   }
+})
+
+const tooltipVisible = ref(false)
+const tooltipPosition = ref({ top: 0, left: 0 })
+
+const showFullTitle = () => {
+  tooltipVisible.value = true
+}
+
+const updateTooltipPosition = (event: MouseEvent) => {
+  tooltipPosition.value = {
+    top: event.clientY + 10,
+    left: event.clientX + 10
+  }
+}
+
+const hideFullTitle = () => {
+  tooltipVisible.value = false
 }
 </script>
 
 <style lang="scss" scoped>
+.title-container {
+  position: relative;
+  width: 280px;
+}
+
 .title {
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 400px;
+  white-space: nowrap;
+  width: 100%;
+  cursor: pointer;
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 10;
+  background: white;
+  padding: 5px;
+  border: 1px solid #ddd;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 1200px;
   white-space: nowrap;
 }
 </style>
+
+