From 57918272ac5e13e8afdcd2c804eef3287cfad844 Mon Sep 17 00:00:00 2001
From: alwayrun <minge23@live.cn>
Date: Thu, 23 May 2024 11:49:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20management/com?=
 =?UTF-8?q?ponents=20=E7=9B=AE=E5=BD=95=E4=B8=8B=E7=BB=84=E4=BB=B6,=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Vue3=20=E7=BB=84=E5=90=88=E5=BC=8F=20API?=
 =?UTF-8?q?=20=E5=86=99=E6=B3=95=20(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/management/components/EmptyIndex.vue | 22 ++++----
 web/src/management/components/LeftMenu.vue   | 56 ++++++++------------
 web/src/management/components/LogoIcon.vue   | 19 +++----
 3 files changed, 40 insertions(+), 57 deletions(-)

diff --git a/web/src/management/components/EmptyIndex.vue b/web/src/management/components/EmptyIndex.vue
index 9143ff1e..22e6093b 100644
--- a/web/src/management/components/EmptyIndex.vue
+++ b/web/src/management/components/EmptyIndex.vue
@@ -5,19 +5,19 @@
     <div class="desc" v-html="data.desc"></div>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'EmptyModule',
-  props: {
-    data: {
-      type: Object,
-      required: true
-    }
-  }
+<script setup lang="ts">
+type DataType = {
+  img: string
+  title: string
+  desc: string
 }
-</script>
 
+interface Props {
+  data: DataType
+}
+
+defineProps<Props>()
+</script>
 <style lang="scss" scoped>
 .default-empty-root {
   width: 350px;
diff --git a/web/src/management/components/LeftMenu.vue b/web/src/management/components/LeftMenu.vue
index cf95c30d..4c861ef0 100644
--- a/web/src/management/components/LeftMenu.vue
+++ b/web/src/management/components/LeftMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="nav">
     <LogoIcon />
-    <RouterLink v-for="(tab, index) in tabList" :key="index" class="tab-btn" :to="tab.to" replace>
+    <RouterLink v-for="(tab, index) in tabs" :key="index" class="tab-btn" :to="tab.to" replace>
       <div class="icon">
         <i class="iconfont" :class="tab.icon"></i>
       </div>
@@ -10,44 +10,33 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import LogoIcon from './LogoIcon.vue'
 
-export default {
-  name: 'LeftMenu',
-  components: {
-    LogoIcon
+const tabs = [
+  {
+    text: '编辑问卷',
+    icon: 'icon-bianji',
+    to: {
+      name: 'QuestionEditIndex'
+    }
   },
-  data() {
-    return {
-      tabList: [
-        {
-          text: '编辑问卷',
-          icon: 'icon-bianji',
-          to: {
-            name: 'QuestionEditIndex'
-          }
-        },
-        {
-          text: '投放问卷',
-          icon: 'icon-toufang',
-          to: {
-            name: 'publishResultPage'
-          }
-        },
-        {
-          text: '数据统计',
-          icon: 'icon-shujutongji',
-          to: {
-            name: 'analysisPage'
-          }
-        }
-      ]
+  {
+    text: '投放问卷',
+    icon: 'icon-toufang',
+    to: {
+      name: 'publishResultPage'
+    }
+  },
+  {
+    text: '数据统计',
+    icon: 'icon-shujutongji',
+    to: {
+      name: 'analysisPage'
     }
   }
-}
+]
 </script>
-
 <style lang="scss" scoped>
 .nav {
   width: 80px;
@@ -69,7 +58,6 @@ export default {
   &:hover {
     color: $normal-color;
 
-    // background-color: $background-color-light;
     .icon {
       background-color: $disable-color;
     }
diff --git a/web/src/management/components/LogoIcon.vue b/web/src/management/components/LogoIcon.vue
index b8e1eacc..3040d472 100644
--- a/web/src/management/components/LogoIcon.vue
+++ b/web/src/management/components/LogoIcon.vue
@@ -1,22 +1,17 @@
 <template>
-  <div class="navbar-main-logo" @click="toHomePage">
+  <div class="navbar-main-logo" @click="handleNavigate">
     <img src="/imgs/s-logo.webp" />
   </div>
 </template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
 
-<script>
-export default {
-  name: 'LogoIcon',
-  methods: {
-    toHomePage() {
-      this.$router.push({
-        name: 'survey'
-      })
-    }
-  }
+const router = useRouter()
+
+const handleNavigate = () => {
+  router.push({ name: 'survey' })
 }
 </script>
-
 <style lang="scss" scoped>
 .navbar-main-logo {
   width: 80px;