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 {
-  name: 'ModuleNavbar',
-  components: {
-    BackPanel,
-    TitlePanel,
-    NavPanel,
-    HistoryPanel,
-    SavePanel,
-    PublishPanel
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapState({
-      title: (state) => _get(state, 'edit.schema.metaData.title')
-    })
-  }
-}
+const store = useStore()
+const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
 </script>
 
 <style lang="scss" scoped>

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

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

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

@@ -25,13 +25,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NavPanel',
-  props: {},
-  data() {
-    return {
-      btnList: [
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const btnList = reactive([
   {
     icon: 'icon-wenjuanbianji',
     text: '问卷编辑',
@@ -53,10 +50,7 @@ export default {
     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">
+    <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>
-export default {
-  name: 'TitlePanel',
-  props: {
+<script setup lang="ts">
+import { ref } from 'vue'
+import { defineProps } from 'vue'
+
+defineProps({
   title: {
     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>
+
+