全局右侧模块切换功能

src/components/MyComponent/MyTitle/my-title.vue

@@ -10,7 +10,7 @@
         v-for="btn in btns"
         :key="btn.name"
         :class="{ on: btn.type === curBtn }"
-        @click="curBtn = btn.type"
+        @click="handleThemeSelect(btn.type)"
       >
         {{ btn.name }}
       </div>
@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, ref } from 'vue'
 import { getDate, getTime } from '../util'
+import store from '@/store'
 
 export default defineComponent({
   name: 'MyTitle',
@@ -45,7 +46,11 @@ export default defineComponent({
       },
     ])
     const curBtn = ref('manage')
-
+    const handleThemeSelect = (type: string) => {
+      if (curBtn.value === type) return
+      curBtn.value = type
+      store.commit('SET_CURRENT_THEME', type)
+    }
     timer.value = setInterval(() => {
       time.value = getTime()
     })
@@ -59,6 +64,7 @@ export default defineComponent({
       timer,
       btns,
       curBtn,
+      handleThemeSelect,
     }
   },
 })

src/store/index.ts

@@ -3,8 +3,10 @@ import state from './state'
 import mutations from './mutations'
 import actions from './actions'
 
+export type ThemeType = 'manage' | 'service' | 'safety'
 export interface GlobalStateProps {
   showLoading: boolean
+  curTheme: ThemeType
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

-import { GlobalStateProps } from './index'
+import { GlobalStateProps, ThemeType } from './index'
 
 export default {
   SET_LOADING(state: GlobalStateProps, val: boolean): void {
     state.showLoading = val
   },
+  SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
+    state.curTheme = val
+  },
 }

src/store/state.ts

+import { GlobalStateProps } from './index'
 export default {
   showLoading: false,
-}
+  curTheme: 'manage',
+} as GlobalStateProps

src/view/main.vue

@@ -10,19 +10,30 @@
       <LeftComponent area="left" />
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <RightComponent area="right" />
+      <PublicManage v-show="curTheme === 'manage'" area="right" />
+    </m-animate>
+    <m-animate enter="fadeInRight" leave="fadeOutRight">
+      <PublicService v-show="curTheme === 'service'" area="right" />
     </m-animate>
   </m-grid>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import LeftComponent from './left/left-component.vue'
-import RightComponent from './right/right-component.vue'
+import PublicManage from './right/public-manage.vue'
+import PublicService from './right/public-service.vue'
+import store from '@/store'
 
 export default defineComponent({
   name: 'Main',
-  components: { LeftComponent, RightComponent },
+  components: { LeftComponent, PublicManage, PublicService },
+  setup() {
+    const curTheme = computed(() => store.state.curTheme)
+    return {
+      curTheme,
+    }
+  },
 })
 </script>
 

src/view/right/business-entry.vue

@@ -12,7 +12,6 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'BussinessEntry',
-  setup() {},
 })
 </script>
 

src/view/right/right-component.vue → src/view/right/public-manage.vue

 <template>
-  <div class="right-component">
+  <div class="public-manage">
     <m-card mode="border">
       <Complain />
     </m-card>
@@ -23,7 +23,7 @@ import KeyTask from './key-task.vue'
 import BussinessEntry from './business-entry.vue'
 
 export default defineComponent({
-  name: 'RightComponent',
+  name: 'PublicMange',
   components: { Complain, Demand, Analysis, KeyTask, BussinessEntry },
 })
 </script>
@@ -31,7 +31,7 @@ export default defineComponent({
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
 
-.right-component
+.public-manage
   $full()
   display flex
   justify-content space-between

src/view/right/public-service.vue

+<template>
+  <div class="public-service">
+    <m-card mode="border"> </m-card>
+    <m-card mode="border"> </m-card>
+    <m-card mode="border"> </m-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'PublicService',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.public-service
+  $full()
+  display flex
+  justify-content space-between
+  >div
+    height 100%
+    width 33%
+</style>