登录注册 主要框架 个人中心 已成功更改为setup

web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -11,15 +11,19 @@
 </template>
 
 <script>
+import { defineProps } from 'vue'
 export default {
   name: 'AsyncSubmenu',
-  props: {
-    routerInfo: {
-      default: function() {
-        return null
-      },
-      type: Object
-    }
-  }
 }
 </script>
+
+<script setup>
+defineProps({
+  routerInfo: {
+    default: function() {
+      return null
+    },
+    type: Object
+  }
+})
+</script>

web/src/view/layout/aside/asideComponent/index.vue

@@ -7,31 +7,29 @@
 </template>
 
 <script>
-import MenuItem from './menuItem.vue'
-import AsyncSubmenu from './asyncSubmenu.vue'
-
 export default {
   name: 'AsideComponent',
-  components: {
-    MenuItem,
-    AsyncSubmenu
-  },
-  props: {
-    routerInfo: {
-      default: function() {
-        return null
-      },
-      type: Object
-    }
-  },
-  computed: {
-    menuComponent() {
-      if (this.routerInfo.children && this.routerInfo.children.filter(item => !item.hidden).length) {
-        return 'AsyncSubmenu'
-      } else {
-        return 'MenuItem'
-      }
-    }
-  }
 }
 </script>
+
+<script setup>
+import MenuItem from './menuItem.vue'
+import AsyncSubmenu from './asyncSubmenu.vue'
+import { computed, defineProps } from 'vue'
+const props = defineProps({
+  routerInfo: {
+    type: Object,
+    default: () => null,
+  },
+})
+
+const menuComponent = computed(() => {
+  if (props.routerInfo.children && props.routerInfo.children.filter(item => !item.hidden).length) {
+    return AsyncSubmenu
+  } else {
+    return MenuItem
+  }
+})
+
+</script>
+

web/src/view/layout/aside/asideComponent/menuItem.vue

@@ -12,16 +12,21 @@
 <script>
 export default {
   name: 'MenuItem',
-  props: {
-    routerInfo: {
-      default: function() {
-        return null
-      },
-      type: Object
-    }
-  }
 }
 </script>
+
+<script setup>
+import { defineProps } from 'vue'
+defineProps({
+  routerInfo: {
+    default: function() {
+      return null
+    },
+    type: Object
+  }
+})
+</script>
+
 <style lang="scss" scoped>
 // .gva-menu-item-title {
 //   min-width: 160px;

web/src/view/layout/aside/historyComponent/history.vue

@@ -2,7 +2,7 @@
   <div class="router-history">
     <el-tabs
       v-model="activeValue"
-      :closable="!(historys.length===1&&$route.name===defaultRouter)"
+      :closable="!(historys.length === 1 && $route.name === defaultRouter)"
       type="card"
       @contextmenu.prevent="openContextMenu($event)"
       @tab-click="changeTab"
@@ -17,13 +17,28 @@
         class="gva-tab"
       >
         <template #label>
-          <span :style="{color: activeValue===name(item)?activeColor:'#333'}"><i class="dot" :style="{ backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
+          <span
+            :style="{
+              color: activeValue === name(item) ? activeColor : '#333',
+            }"
+          ><i
+             class="dot"
+             :style="{
+               backgroundColor:
+                 activeValue === name(item) ? activeColor : '#ddd',
+             }"
+           />
+            {{ item.meta.title }}</span>
         </template>
       </el-tab-pane>
     </el-tabs>
 
     <!--自定义右键菜单html代码-->
-    <ul v-show="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+    <ul
+      v-show="contextMenuVisible"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      class="contextmenu"
+    >
       <li @click="closeAll">关闭所有</li>
       <li @click="closeLeft">关闭左侧</li>
       <li @click="closeRight">关闭右侧</li>
@@ -33,258 +48,259 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { emitter } from '@/utils/bus.js'
-
-const getFmtString = (item) => {
-  return item.name +
-      JSON.stringify(item.query) +
-      JSON.stringify(item.params)
-}
 export default {
   name: 'HistoryComponent',
-  data() {
-    return {
-      historys: [],
-      activeValue: '',
-      contextMenuVisible: false,
-      left: 0,
-      top: 0,
-      isCollapse: false,
-      isMobile: false,
-      rightActive: ''
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'activeColor']),
-    defaultRouter() {
-      return this.userInfo.authority.defaultRouter
-    }
-  },
-  watch: {
-    contextMenuVisible() {
-      if (this.contextMenuVisible) {
-        document.body.addEventListener('click', () => {
-          this.contextMenuVisible = false
-        })
-      } else {
-        document.body.removeEventListener('click', () => {
-          this.contextMenuVisible = false
-        })
-      }
-    },
-    $route(to, now) {
-      if (to.name === 'Login') {
-        return
-      }
-      this.historys = this.historys.filter(item => !item.meta.closeTab)
-      this.setTab(to)
-      sessionStorage.setItem('historys', JSON.stringify(this.historys))
-      this.activeValue = window.sessionStorage.getItem('activeValue')
-      if (now && to && now.name === to.name) {
-        emitter.emit('reload')
-      }
-    }
-  },
-  created() {
-    // 全局监听 关闭当前页面函数
-    emitter.on('closeThisPage', () => {
-      this.removeTab(this.name(this.$route))
-    })
-    // 全局监听 关闭所有页面函数
-    emitter.on('closeAllPage', () => {
-      this.closeAll()
-    })
-    emitter.on('mobile', isMobile => {
-      this.isMobile = isMobile
-    })
-    emitter.on('collapse', isCollapse => {
-      this.isCollapse = isCollapse
-    })
-    const initHistorys = [
-      {
-        name: this.defaultRouter,
-        meta: {
-          title: '首页'
-        },
-        query: {},
-        params: {}
-      }
-    ]
-    this.historys =
-      JSON.parse(sessionStorage.getItem('historys')) || initHistorys
-    if (!window.sessionStorage.getItem('activeValue')) {
-      this.activeValue = getFmtString(this.$route)
+}
+</script>
+
+<script setup>
+import { useStore } from 'vuex'
+import { emitter } from '@/utils/bus.js'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+const getFmtString = (item) => {
+  return item.name + JSON.stringify(item.query) + JSON.stringify(item.params)
+}
+
+const historys = ref([])
+const activeValue = ref('')
+const contextMenuVisible = ref(false)
+
+const userInfo = computed(() => store.getters['user/userInfo'])
+const activeColor = computed(() => store.getters['user/activeColor'])
+
+const name = (item) => {
+  return (
+    item.name + JSON.stringify(item.query) + JSON.stringify(item.params)
+  )
+}
+
+const left = ref(0)
+const top = ref(0)
+const isCollapse = ref(false)
+const isMobile = ref(false)
+const rightActive = ref('')
+const defaultRouter = computed(() => userInfo.value.authority.defaultRouter)
+const openContextMenu = (e) => {
+  if (
+    historys.value.length === 1 &&
+        route.name === defaultRouter.value
+  ) {
+    return false
+  }
+  let id = ''
+  if (e.srcElement.nodeName === 'SPAN') {
+    id = e.srcElement.offsetParent.id
+  } else {
+    id = e.srcElement.id
+  }
+  if (id) {
+    contextMenuVisible.value = true
+    let width
+    if (isCollapse.value) {
+      width = 54
     } else {
-      this.activeValue = window.sessionStorage.getItem('activeValue')
+      width = 220
     }
-    this.setTab(this.$route)
-  },
-  beforeUnmount() {
-    emitter.off('collapse')
-    emitter.off('mobile')
-  },
-  methods: {
-    name(item) {
-      return item.name + JSON.stringify(item.query) + JSON.stringify(item.params)
-    },
-    openContextMenu(e) {
-      if (this.historys.length === 1 && this.$route.name === this.defaultRouter) {
-        return false
-      }
-      let id = ''
-      if (e.srcElement.nodeName === 'SPAN') {
-        id = e.srcElement.offsetParent.id
-      } else {
-        id = e.srcElement.id
-      }
-      if (id) {
-        this.contextMenuVisible = true
-        let width
-        if (this.isCollapse) {
-          width = 54
-        } else {
-          width = 220
-        }
-        if (this.isMobile) {
-          width = 0
-        }
-        this.left = e.clientX - width
-        this.top = e.clientY + 10
-        this.rightActive = id.split('-')[1]
-      }
-    },
-    closeAll() {
-      this.historys = [
-        {
-          name: this.defaultRouter,
-          meta: {
-            title: '首页'
-          },
-          query: {},
-          params: {}
-        }
-      ]
-      this.$router.push({ name: this.defaultRouter })
-      this.contextMenuVisible = false
-      sessionStorage.setItem('historys', JSON.stringify(this.historys))
-    },
-    closeLeft() {
-      let right
-      const rightIndex = this.historys.findIndex(item => {
-        if (getFmtString(item) === this.rightActive) {
-          right = item
-        }
-        return (
-          getFmtString(item) === this.rightActive
-        )
-      })
-      const activeIndex = this.historys.findIndex(
-        item => getFmtString(item) === this.activeValue
-      )
-      this.historys.splice(0, rightIndex)
-      if (rightIndex > activeIndex) {
-        this.$router.push(right)
-      }
-      sessionStorage.setItem('historys', JSON.stringify(this.historys))
-    },
-    closeRight() {
-      let right
-      const leftIndex = this.historys.findIndex(item => {
-        if (getFmtString(item) === this.rightActive) {
-          right = item
-        }
-        return (getFmtString(item) === this.rightActive)
-      })
-      const activeIndex = this.historys.findIndex(
-        item => getFmtString(item) === this.activeValue
-      )
-      this.historys.splice(leftIndex + 1, this.historys.length)
-      if (leftIndex < activeIndex) {
-        this.$router.push(right)
-      }
-      sessionStorage.setItem('historys', JSON.stringify(this.historys))
-    },
-    closeOther() {
-      let right
-      this.historys = this.historys.filter(item => {
-        if (getFmtString(item) === this.rightActive
-        ) {
-          right = item
-        }
-        return (getFmtString(item) === this.rightActive
-        )
-      })
-      this.$router.push(right)
-      sessionStorage.setItem('historys', JSON.stringify(this.historys))
-    },
-    isSame(route1, route2) {
-      if (route1.name !== route2.name) {
-        return false
-      }
-      for (const key in route1.query) {
-        if (route1.query[key] !== route2.query[key]) {
-          return false
-        }
-      }
-      for (const key in route1.params) {
-        if (route1.params[key] !== route2.params[key]) {
-          return false
-        }
-      }
-      return true
-    },
-    setTab(route) {
-      if (!this.historys.some(item => this.isSame(item, route))) {
-        const obj = {}
-        obj.name = route.name
-        obj.meta = route.meta
-        obj.query = route.query
-        obj.params = route.params
-        this.historys.push(obj)
-      }
-      window.sessionStorage.setItem(
-        'activeValue',
-        getFmtString(this.$route)
-      )
-    },
-    changeTab(component) {
-      const tab = component.instance.attrs.tab
-      this.$router.push({
-        name: tab.name,
-        query: tab.query,
-        params: tab.params
-      })
-    },
-    removeTab(tab) {
-      const index = this.historys.findIndex(
-        item => getFmtString(item) === tab
-      )
-      if (
-        getFmtString(this.$route) === tab
-      ) {
-        if (this.historys.length === 1) {
-          this.$router.push({ name: this.defaultRouter })
-        } else {
-          if (index < this.historys.length - 1) {
-            this.$router.push({
-              name: this.historys[index + 1].name,
-              query: this.historys[index + 1].query,
-              params: this.historys[index + 1].params
-            })
-          } else {
-            this.$router.push({
-              name: this.historys[index - 1].name,
-              query: this.historys[index - 1].query,
-              params: this.historys[index - 1].params
-            })
-          }
-        }
-      }
-      this.historys.splice(index, 1)
+    if (isMobile.value) {
+      width = 0
     }
+    left.value = e.clientX - width
+    top.value = e.clientY + 10
+    rightActive.value = id.split('-')[1]
   }
 }
+const closeAll = () => {
+  historys.value = [
+    {
+      name: defaultRouter.value,
+      meta: {
+        title: '首页',
+      },
+      query: {},
+      params: {},
+    },
+  ]
+  router.push({ name: defaultRouter.value })
+  contextMenuVisible.value = false
+  sessionStorage.setItem('historys', JSON.stringify(historys.value))
+}
+const closeLeft = () => {
+  let right
+  const rightIndex = historys.value.findIndex((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item
+    }
+    return getFmtString(item) === rightActive.value
+  })
+  const activeIndex = historys.value.findIndex(
+    (item) => getFmtString(item) === activeValue.value
+  )
+  historys.value.splice(0, rightIndex)
+  if (rightIndex > activeIndex) {
+    router.push(right)
+  }
+  sessionStorage.setItem('historys', JSON.stringify(historys.value))
+}
+const closeRight = () => {
+  let right
+  const leftIndex = historys.value.findIndex((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item
+    }
+    return getFmtString(item) === rightActive.value
+  })
+  const activeIndex = historys.value.findIndex(
+    (item) => getFmtString(item) === activeValue.value
+  )
+  historys.value.splice(leftIndex + 1, historys.value.length)
+  if (leftIndex < activeIndex) {
+    router.push(right)
+  }
+  sessionStorage.setItem('historys', JSON.stringify(historys.value))
+}
+const closeOther = () => {
+  let right
+  historys.value = historys.value.filter((item) => {
+    if (getFmtString(item) === rightActive.value) {
+      right = item
+    }
+    return getFmtString(item) === rightActive.value
+  })
+  router.push(right)
+  sessionStorage.setItem('historys', JSON.stringify(historys.value))
+}
+const isSame = (route1, route2) => {
+  if (route1.name !== route2.name) {
+    return false
+  }
+  for (const key in route1.query) {
+    if (route1.query[key] !== route2.query[key]) {
+      return false
+    }
+  }
+  for (const key in route1.params) {
+    if (route1.params[key] !== route2.params[key]) {
+      return false
+    }
+  }
+  return true
+}
+const setTab = (route) => {
+  if (!historys.value.some((item) => isSame(item, route))) {
+    const obj = {}
+    obj.name = route.name
+    obj.meta = route.meta
+    obj.query = route.query
+    obj.params = route.params
+    historys.value.push(obj)
+  }
+  window.sessionStorage.setItem('activeValue', getFmtString(route))
+}
+const changeTab = (component) => {
+  const tab = component.instance.attrs.tab
+  router.push({
+    name: tab.name,
+    query: tab.query,
+    params: tab.params,
+  })
+}
+const removeTab = (tab) => {
+  const index = historys.value.findIndex(
+    (item) => getFmtString(item) === tab
+  )
+  if (getFmtString(route) === tab) {
+    if (historys.value.length === 1) {
+      router.push({ name: defaultRouter.value })
+    } else {
+      if (index < historys.value.length - 1) {
+        router.push({
+          name: historys.value[index + 1].name,
+          query: historys.value[index + 1].query,
+          params: historys.value[index + 1].params,
+        })
+      } else {
+        router.push({
+          name: historys.value[index - 1].name,
+          query: historys.value[index - 1].query,
+          params: historys.value[index - 1].params,
+        })
+      }
+    }
+  }
+  historys.value.splice(index, 1)
+}
+
+watch(contextMenuVisible, () => {
+  if (contextMenuVisible.value) {
+    document.body.addEventListener('click', () => {
+      contextMenuVisible.value = false
+    })
+  } else {
+    document.body.removeEventListener('click', () => {
+      contextMenuVisible.value = false
+    })
+  }
+})
+
+watch(route, (to, now) => {
+  if (to.name === 'Login') {
+    return
+  }
+  historys.value = historys.value.filter((item) => !item.meta.closeTab)
+  setTab(to)
+  sessionStorage.setItem('historys', JSON.stringify(historys.value))
+  activeValue.value = window.sessionStorage.getItem('activeValue')
+  if (now && to && now.name === to.name) {
+    emitter.emit('reload')
+  }
+})
+
+const initPage = () => {
+  // 全局监听 关闭当前页面函数
+  emitter.on('closeThisPage', () => {
+    removeTab(name(route))
+  })
+  // 全局监听 关闭所有页面函数
+  emitter.on('closeAllPage', () => {
+    closeAll()
+  })
+  emitter.on('mobile', (data) => {
+    isMobile.value = data
+  })
+  emitter.on('collapse', (data) => {
+    isCollapse.value = data
+  })
+  const initHistorys = [
+    {
+      name: defaultRouter.value,
+      meta: {
+        title: '首页',
+      },
+      query: {},
+      params: {},
+    },
+  ]
+  historys.value =
+      JSON.parse(sessionStorage.getItem('historys')) || initHistorys
+  if (!window.sessionStorage.getItem('activeValue')) {
+    activeValue.value = getFmtString(route)
+  } else {
+    activeValue.value = window.sessionStorage.getItem('activeValue')
+  }
+  setTab(route)
+}
+initPage()
+
+onUnmounted(() => {
+  emitter.off('collapse')
+  emitter.off('mobile')
+})
 </script>
 
 <style lang="scss">
@@ -302,7 +318,7 @@ export default {
   color: #333;
   box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
 }
-.el-tabs__item .el-icon-close{
+.el-tabs__item .el-icon-close {
   color: initial !important;
 }
 .el-tabs__item .dot {
@@ -312,7 +328,7 @@ export default {
   margin-right: 8px;
   display: inline-block;
   border-radius: 50%;
-  transition: background-color .2s;
+  transition: background-color 0.2s;
 }
 
 .contextmenu li {

web/src/view/layout/aside/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <div :style="{background:sideMode}">
-    <el-scrollbar style="height:calc(100vh - 60px)">
-      <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
+  <div :style="{ background: sideMode }">
+    <el-scrollbar style="height: calc(100vh - 60px)">
+      <transition
+        :duration="{ enter: 800, leave: 100 }"
+        mode="out-in"
+        name="el-fade-in-linear"
+      >
         <el-menu
           :collapse="isCollapse"
           :collapse-transition="false"
@@ -14,7 +18,11 @@
           @select="selectMenuItem"
         >
           <template v-for="item in asyncRouters[0].children">
-            <aside-component v-if="!item.hidden" :key="item.name" :router-info="item" />
+            <aside-component
+              v-if="!item.hidden"
+              :key="item.name"
+              :router-info="item"
+            />
           </template>
         </el-menu>
       </transition>
@@ -23,80 +31,85 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
-import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
-import { emitter } from '@/utils/bus.js'
-
 export default {
   name: 'Aside',
-  components: {
-    AsideComponent
-  },
-  data() {
-    return {
-      active: '',
-      isCollapse: false
-    }
-  },
-  computed: {
-    ...mapGetters('router', ['asyncRouters']),
-    ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
-  },
-  watch: {
-    $route() {
-      this.active = this.$route.name
-    }
-  },
-  created() {
-    this.active = this.$route.name
-    const screenWidth = document.body.clientWidth
-    if (screenWidth < 1000) {
-      this.isCollapse = !this.isCollapse
-    }
+}
+</script>
 
-    emitter.on('collapse', item => {
-      this.isCollapse = item
-    })
-  },
-  beforeUnmount() {
-    emitter.off('collapse')
-  },
-  methods: {
-    ...mapMutations('history', ['addHistory']),
-    selectMenuItem(index, _, ele) {
-      const query = {}
-      const params = {}
-      ele?.route?.parameters &&
-      ele.route.parameters.forEach(item => {
-        if (item.type === 'query') {
-          query[item.key] = item.value
-        } else {
-          params[item.key] = item.value
-        }
-      })
-      if (index === this.$route.name) return
-      if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
-        window.open(index)
+<script setup>
+import { useStore } from 'vuex'
+import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
+import { emitter } from '@/utils/bus.js'
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const asyncRouters = computed(() => store.getters['router/asyncRouters'])
+const baseColor = computed(() => store.getters['user/baseColor'])
+const activeColor = computed(() => store.getters['user/activeColor'])
+const sideMode = computed(() => store.getters['user/sideMode'])
+
+const active = ref('')
+watch(route, () => {
+  active.value = route.name
+})
+
+const isCollapse = ref(false)
+const initPage = () => {
+  active.value = route.name
+  const screenWidth = document.body.clientWidth
+  if (screenWidth < 1000) {
+    isCollapse.value = !isCollapse.value
+  }
+
+  emitter.on('collapse', (item) => {
+    isCollapse.value = item
+  })
+}
+
+initPage()
+
+onUnmounted(() => {
+  emitter.off('collapse')
+})
+
+const selectMenuItem = (index, _, ele) => {
+  const query = {}
+  const params = {}
+  ele?.route?.parameters &&
+    ele.route.parameters.forEach((item) => {
+      if (item.type === 'query') {
+        query[item.key] = item.value
       } else {
-        this.$router.push({ name: index, query, params })
+        params[item.key] = item.value
       }
-    }
+    })
+  if (index === route.name) return
+  if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
+    window.open(index)
+  } else {
+    router.push({ name: index, query, params })
   }
 }
 </script>
 
 <style lang="scss">
-.el-sub-menu__title,.el-menu-item{
-  i{
+.el-sub-menu__title,
+.el-menu-item {
+  i {
     color: inherit !important;
   }
 }
 
-.el-sub-menu__title:hover,.el-menu-item:hover{
-  i{
+.el-sub-menu__title:hover,
+.el-menu-item:hover {
+  i {
     color: inherit !important;
   }
-  span{
+  span {
     color: inherit !important;
   }
 }

web/src/view/layout/index.vue

@@ -97,146 +97,136 @@
 </template>
 
 <script>
+export default {
+  name: 'Layout',
+}
+</script>
+
+<script setup>
 import Aside from '@/view/layout/aside/index.vue'
 import HistoryComponent from '@/view/layout/aside/historyComponent/history.vue'
 import Search from '@/view/layout/search/search.vue'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
-import { mapGetters, mapActions } from 'vuex'
 import CustomPic from '@/components/customPic/index.vue'
 import Setting from './setting/index.vue'
+import { useStore } from 'vuex'
 import { setUserAuthority } from '@/api/user'
 import { emitter } from '@/utils/bus.js'
-export default {
-  name: 'Layout',
-  components: {
-    Aside,
-    HistoryComponent,
-    Search,
-    BottomInfo,
-    CustomPic,
-    Setting
-  },
-  data() {
-    return {
-      show: false,
-      isCollapse: false,
-      isSider: true,
-      isMobile: false,
-      isShadowBg: false,
-      loadingFlag: false,
-      reloadFlag: true,
-      value: ''
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
-    textColor() {
-      if (this.$store.getters['user/sideMode'] === 'dark') {
-        return '#fff'
-      } else if (this.$store.getters['user/sideMode'] === 'light') {
-        return '#191a23'
-      } else {
-        return this.baseColor
-      }
-    },
-    backgroundColor() {
-      if (this.sideMode === 'dark') {
-        return '#191a23'
-      } else if (this.sideMode === 'light') {
-        return '#fff'
-      } else {
-        return this.sideMode
-      }
-    },
-    title() {
-      return this.$route.meta.title || '当前页面'
-    },
-    matched() {
-      return this.$route.matched
-    }
-  },
-  created() {
-    const screenWidth = document.body.clientWidth
-    if (screenWidth < 1000) {
-      this.isMobile = true
-      this.isSider = false
-      this.isCollapse = true
-    } else if (screenWidth >= 1000 && screenWidth < 1200) {
-      this.isMobile = false
-      this.isSider = false
-      this.isCollapse = true
-    } else {
-      this.isMobile = false
-      this.isSider = true
-      this.isCollapse = false
-    }
-  },
-  mounted() {
-    emitter.emit('collapse', this.isCollapse)
-    emitter.emit('mobile', this.isMobile)
-    emitter.on('reload', this.reload)
-    emitter.on('showLoading', () => {
-      this.loadingFlag = true
-    })
-    emitter.on('closeLoading', () => {
-      this.loadingFlag = false
-    })
-    window.onresize = () => {
-      return (() => {
-        const screenWidth = document.body.clientWidth
-        if (screenWidth < 1000) {
-          this.isMobile = true
-          this.isSider = false
-          this.isCollapse = true
-        } else if (screenWidth >= 1000 && screenWidth < 1200) {
-          this.isMobile = false
-          this.isSider = false
-          this.isCollapse = true
-        } else {
-          this.isMobile = false
-          this.isSider = true
-          this.isCollapse = false
-        }
-        emitter.emit('collapse', this.isCollapse)
-        emitter.emit('mobile', this.isMobile)
-      })()
-    }
-  },
-  methods: {
-    ...mapActions('user', ['LoginOut', 'GetUserInfo']),
-    async changeUserAuth(id) {
-      const res = await setUserAuthority({
-        authorityId: id
-      })
-      if (res.code === 0) {
-        emitter.emit('closeAllPage')
-        setTimeout(() => {
-          window.location.reload()
-        }, 1)
-      }
-    },
-    reload() {
-      this.reloadFlag = false
-      this.$nextTick(() => {
-        this.reloadFlag = true
-      })
-    },
-    totalCollapse() {
-      this.isCollapse = !this.isCollapse
-      this.isSider = !this.isCollapse
-      this.isShadowBg = !this.isCollapse
-      emitter.emit('collapse', this.isCollapse)
-    },
-    toPerson() {
-      this.$router.push({ name: 'person' })
-    },
-    changeShadow() {
-      this.isShadowBg = !this.isShadowBg
-      this.isSider = !!this.isCollapse
-      this.totalCollapse()
-    }
+import { computed, ref, onMounted, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+
+// 三种窗口适配
+const isCollapse = ref(false)
+const isSider = ref(true)
+const isMobile = ref(false)
+const initPage = () => {
+  const screenWidth = document.body.clientWidth
+  if (screenWidth < 1000) {
+    isMobile.value = true
+    isSider.value = false
+    isCollapse.value = true
+  } else if (screenWidth >= 1000 && screenWidth < 1200) {
+    isMobile.value = false
+    isSider.value = false
+    isCollapse.value = true
+  } else {
+    isMobile.value = false
+    isSider.value = true
+    isCollapse.value = false
   }
 }
+
+initPage()
+
+const loadingFlag = ref(false)
+onMounted(() => {
+  // 挂载一些通用的事件
+  emitter.emit('collapse', isCollapse.value)
+  emitter.emit('mobile', isMobile.value)
+  emitter.on('reload', reload)
+  emitter.on('showLoading', () => {
+    loadingFlag.value = true
+  })
+  emitter.on('closeLoading', () => {
+    loadingFlag.value = false
+  })
+  window.onresize = () => {
+    return (() => {
+      initPage()
+      emitter.emit('collapse', isCollapse.value)
+      emitter.emit('mobile', isMobile.value)
+    })()
+  }
+})
+
+const userInfo = computed(() => store.getters['user/userInfo'])
+const sideMode = computed(() => store.getters['user/sideMode'])
+const baseColor = computed(() => store.getters['user/baseColor'])
+const textColor = computed(() => {
+  if (sideMode === 'dark') {
+    return '#fff'
+  } else if (sideMode === 'light') {
+    return '#191a23'
+  } else {
+    return baseColor.value
+  }
+})
+
+const backgroundColor = computed(() => {
+  if (sideMode === 'dark') {
+    return '#191a23'
+  } else if (sideMode === 'light') {
+    return '#fff'
+  } else {
+    return sideMode.value
+  }
+})
+
+const matched = computed(() => route.matched)
+
+const LoginOut = () => {
+  store.dispatch('user/LoginOut')
+}
+
+const changeUserAuth = async(id) => {
+  const res = await setUserAuthority({
+    authorityId: id
+  })
+  if (res.code === 0) {
+    emitter.emit('closeAllPage')
+    setTimeout(() => {
+      window.location.reload()
+    }, 1)
+  }
+}
+
+const reloadFlag = ref(true)
+const reload = async() => {
+  reloadFlag.value = false
+  await nextTick()
+  reloadFlag.value = true
+}
+
+const isShadowBg = ref(false)
+const totalCollapse = () => {
+  isCollapse.value = !isCollapse.value
+  isSider.value = !isCollapse.value
+  isShadowBg.value = !isCollapse.value
+  emitter.emit('collapse', isCollapse.value)
+}
+
+const toPerson = () => {
+  router.push({ name: 'person' })
+}
+const changeShadow = () => {
+  isShadowBg.value = !isShadowBg.value
+  isSider.value = !!isCollapse.value
+  totalCollapse()
+}
 </script>
 
 <style lang="scss">

web/src/view/layout/screenfull/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-icon @click="click">
+  <el-icon @click="clickFull">
     <svg
       v-if="isShow"
       t="1590133227479"
@@ -63,47 +63,50 @@
 </template>
 
 <script>
-import screenfull from 'screenfull' // 引入screenfull
 export default {
   name: 'Screenfull',
-  props: {
-    width: {
-      type: Number,
-      default: 22
-    },
-    height: {
-      type: Number,
-      default: 22
-    },
-    fill: {
-      type: String,
-      default: '#48576a'
-    }
+}
+</script>
+
+<script setup>
+import screenfull from 'screenfull' // 引入screenfull
+import { defineProps, onMounted, onUnmounted, ref } from 'vue'
+defineProps({
+  width: {
+    type: Number,
+    default: 22
   },
-  data() {
-    return {
-      isShow: true
-    }
+  height: {
+    type: Number,
+    default: 22
   },
-  mounted() {
-    if (screenfull.isEnabled) {
-      screenfull.on('change', this.changeFullShow)
-    }
-  },
-  unmounted() {
-    screenfull.off('change', this.changeFullShow)
-  },
-  methods: {
-    click() {
-      if (screenfull.isEnabled) {
-        screenfull.toggle()
-      }
-    },
-    changeFullShow() {
-      this.isShow = !screenfull.isFullscreen
-    }
+  fill: {
+    type: String,
+    default: '#48576a'
+  }
+})
+
+onMounted(() => {
+  if (screenfull.isEnabled) {
+    screenfull.on('change', changeFullShow)
+  }
+})
+
+onUnmounted(() => {
+  screenfull.off('change')
+})
+
+const clickFull = () => {
+  if (screenfull.isEnabled) {
+    screenfull.toggle()
   }
 }
+
+const isShow = ref(true)
+const changeFullShow = () => {
+  isShow.value = !screenfull.isFullscreen
+}
+
 </script>
 
 <style scoped lang="scss">

web/src/view/layout/search/search.vue

@@ -3,7 +3,7 @@
     <transition name="el-fade-in-linear">
       <div v-show="show" class="transition-box" style="display: inline-block; ">
         <el-select
-          ref="search-input"
+          ref="searchInput"
           v-model="value"
           filterable
           placeholder="请选择"
@@ -31,7 +31,7 @@
       v-if="btnShow"
       class="user-box"
     >
-      <el-icon class="search-icon" @click="showSearch()">
+      <el-icon class="search-icon" @click="showSearch">
         <search />
       </el-icon>
     </div>
@@ -51,57 +51,58 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { emitter } from '@/utils/bus.js'
-import Screenfull from '@/view/layout/screenfull/index.vue'
-
 export default {
-  name: 'SearchComponent',
-  components: {
-    Screenfull
-  },
-  data() {
-    return {
-      value: '',
-      show: false,
-      btnShow: true,
-      reload: false
-    }
-  },
-  computed: {
-    ...mapGetters('router', ['routerList']),
-  },
-
-  methods: {
-    changeRouter() {
-      this.$router.push({ name: this.value })
-      this.value = ''
-    },
-    hiddenSearch() {
-      this.show = false
-      setTimeout(() => {
-        this.btnShow = true
-      }, 500)
-    },
-    showSearch() {
-      this.btnShow = false
-      this.show = true
-      this.$nextTick(() => {
-        this.$refs['search-input'].focus()
-      })
-    },
-    handleReload() {
-      this.reload = true
-      emitter.emit('reload')
-      setTimeout(() => {
-        this.reload = false
-      }, 500)
-    },
-    toService() {
-      window.open('https://support.qq.com/product/371961')
-    }
-  }
+  name: 'BtnBox',
 }
+</script>
+
+<script setup>
+import Screenfull from '@/view/layout/screenfull/index.vue'
+import { useStore } from 'vuex'
+import { emitter } from '@/utils/bus.js'
+import { ref, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+
+const store = useStore()
+const router = useRouter()
+
+const routerList = computed(() => store.getters['router/routerList'])
+
+const value = ref('')
+const changeRouter = () => {
+  router.push({ name: value.value })
+  value.value = ''
+}
+
+const show = ref(false)
+const btnShow = ref(true)
+const hiddenSearch = () => {
+  show.value = false
+  setTimeout(() => {
+    btnShow.value = true
+  }, 500)
+}
+
+const searchInput = ref(null)
+const showSearch = async() => {
+  btnShow.value = false
+  show.value = true
+  await nextTick()
+  searchInput.value.focus()
+}
+
+const reload = ref(false)
+const handleReload = () => {
+  reload.value = true
+  emitter.emit('reload')
+  setTimeout(() => {
+    reload.value = false
+  }, 500)
+}
+const toService = () => {
+  window.open('https://support.qq.com/product/371961')
+}
+
 </script>
 <style scoped lang="scss">
 .reload{

web/src/view/layout/setting/index.vue

@@ -43,35 +43,35 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 export default {
-  data() {
-    return {
-      drawer: false,
-      direction: 'rtl'
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['mode'])
-  },
-  methods: {
-    handleClose() {
-      this.drawer = false
-    },
-    showSettingDrawer() {
-      this.drawer = true
-    },
-    changeMode(e) {
-      if (e === null) {
-        this.$store.dispatch('user/changeSideMode', 'dark')
-        return
-      }
-      this.$store.dispatch('user/changeSideMode', e)
-    },
-  }
+  name: 'Setting',
 }
 </script>
 
+<script setup>
+import { useStore } from 'vuex'
+import { computed, ref } from 'vue'
+const store = useStore()
+const drawer = ref(false)
+const direction = ref('rtl')
+const mode = computed(() => store.getters['user/mode'])
+
+const handleClose = () => {
+  drawer.value = false
+}
+const showSettingDrawer = () => {
+  drawer.value = true
+}
+const changeMode = (e) => {
+  if (e === null) {
+    store.dispatch('user/changeSideMode', 'dark')
+    return
+  }
+  store.dispatch('user/changeSideMode', e)
+}
+
+</script>
+
 <style lang="scss" scoped>
 .drawer-container {
   transition: all 0.2s;