refactor: 重构 management/components 目录下组件, 使用 Vue3 组合式 API 写法 (#151)

web/src/management/components/EmptyIndex.vue

@@ -5,19 +5,19 @@
     <div class="desc" v-html="data.desc"></div>
   </div>
 </template>
-
+<script setup lang="ts">
-<script>
+type DataType = {
-export default {
+  img: string
-  name: 'EmptyModule',
+  title: string
-  props: {
+  desc: string
-    data: {
-      type: Object,
-      required: true
-    }
-  }
 }
-</script>
 
+interface Props {
+  data: DataType
+}
+
+defineProps<Props>()
+</script>
 <style lang="scss" scoped>
 .default-empty-root {
   width: 350px;

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 {
+const tabs = [
-  name: 'LeftMenu',
+  {
-  components: {
+    text: '编辑问卷',
-    LogoIcon
+    icon: 'icon-bianji',
+    to: {
+      name: 'QuestionEditIndex'
+    }
   },
-  data() {
+  {
-    return {
+    text: '投放问卷',
-      tabList: [
+    icon: 'icon-toufang',
-        {
+    to: {
-          text: '编辑问卷',
+      name: 'publishResultPage'
-          icon: 'icon-bianji',
+    }
-          to: {
+  },
-            name: 'QuestionEditIndex'
+  {
-          }
+    text: '数据统计',
-        },
+    icon: 'icon-shujutongji',
-        {
+    to: {
-          text: '投放问卷',
+      name: 'analysisPage'
-          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;
     }

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>
+const router = useRouter()
-export default {
+
-  name: 'LogoIcon',
+const handleNavigate = () => {
-  methods: {
+  router.push({ name: 'survey' })
-    toHomePage() {
-      this.$router.push({
-        name: 'survey'
-      })
-    }
-  }
 }
 </script>
-
 <style lang="scss" scoped>
 .navbar-main-logo {
   width: 80px;