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

didi · May 23, 2024 · 3242ad8 · 3242ad8
1 parent 8ce6dc7
commit 3242ad8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 56 deletions.
diff --git 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 setup lang="ts">
+type DataType = {
+ img: string
+ title: string
+ desc: string
+}
 
-<script>
-export default {
- name: 'EmptyModule',
- props: {
- data: {
- type: Object,
- required: true
- }
- }
+interface Props {
+ data: DataType
 }
-</script>
 
+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
@@ -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'
+ }
+ },
+ {
+ text: '投放问卷',
+ icon: 'icon-toufang',
+ to: {
+ name: 'publishResultPage'
+ }
  },
- 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-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
@@ -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;