From 8db8f9ab194cb7f08e7a5d36197776b39ae1dcb0 Mon Sep 17 00:00:00 2001
From: xixiIBN5100 <144224541+xixiIBN5100@users.noreply.github.com>
Date: Thu, 30 May 2024 14:40:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=97=AE=E5=8D=B7=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=87=E9=A2=98=E4=BC=98=E5=8C=96=20(#240)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* perf: 问卷编辑页标题优化
---
 web/package.json                              |  1 +
 .../pages/edit/components/ModuleNavbar.vue    | 26 ++-----
 .../edit/modules/generalModule/BackPanel.vue  | 11 +--
 .../edit/modules/generalModule/NavPanel.vue   | 56 +++++++-------
 .../edit/modules/generalModule/TitlePanel.vue | 73 ++++++++++++++++---
 5 files changed, 96 insertions(+), 71 deletions(-)

diff --git a/web/package.json b/web/package.json
index c2a6226b..3cc9e456 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/management/pages/edit/components/ModuleNavbar.vue b/web/src/management/pages/edit/components/ModuleNavbar.vue
index a8250340..8b9de47b 100644
--- a/web/src/management/pages/edit/components/ModuleNavbar.vue
+++ b/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>
diff --git a/web/src/management/pages/edit/modules/generalModule/BackPanel.vue b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
index e6559fe7..5a804f9c 100644
--- a/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
+++ b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
@@ -5,14 +5,9 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'BackPanel',
-  methods: {
-    onBack() {
-      window.open('/survey', '_self')
-    }
-  }
+<script setup lang="ts">
+const onBack = () => {
+  window.open('/survey', '_self')
 }
 </script>
 
diff --git a/web/src/management/pages/edit/modules/generalModule/NavPanel.vue b/web/src/management/pages/edit/modules/generalModule/NavPanel.vue
index 6b7085a5..70e0f6b1 100644
--- a/web/src/management/pages/edit/modules/generalModule/NavPanel.vue
+++ b/web/src/management/pages/edit/modules/generalModule/NavPanel.vue
@@ -25,38 +25,32 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NavPanel',
-  props: {},
-  data() {
-    return {
-      btnList: [
-        {
-          icon: 'icon-wenjuanbianji',
-          text: '问卷编辑',
-          router: 'QuestionEditIndex',
-          key: 'edit',
-          next: true
-        },
-        {
-          icon: 'icon-wenjuanshezhi',
-          text: '问卷设置',
-          router: 'QuestionEditSetting',
-          key: 'settings',
-          next: true
-        },
-        {
-          icon: 'icon-yangshishezhi',
-          text: '皮肤设置',
-          router: 'QuestionSkinSetting',
-          key: 'skinsettings',
-          next: true
-        }
-      ]
-    }
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const btnList = reactive([
+  {
+    icon: 'icon-wenjuanbianji',
+    text: '问卷编辑',
+    router: 'QuestionEditIndex',
+    key: 'edit',
+    next: true
+  },
+  {
+    icon: 'icon-wenjuanshezhi',
+    text: '问卷设置',
+    router: 'QuestionEditSetting',
+    key: 'settings',
+    next: true
+  },
+  {
+    icon: 'icon-yangshishezhi',
+    text: '皮肤设置',
+    router: 'QuestionSkinSetting',
+    key: 'skinsettings',
+    next: true
   }
-}
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue b/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
index 26e30ef7..3a552ca7 100644
--- a/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
+++ b/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
@@ -1,26 +1,77 @@
 <template>
-  <div class="title">
-    {{ 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: {
-    title: {
-      type: String,
-      default: ''
-    }
+<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>
+
+