From dfe5b5c0bda4b7d8a2be0f34e07b593cc941ccab Mon Sep 17 00:00:00 2001
From: piexlmax <qimiaojiangjizhao@gmail.com>
Date: Tue, 28 Dec 2021 20:05:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=20?=
 =?UTF-8?q?=E4=B8=BB=E8=A6=81=E6=A1=86=E6=9E=B6=20=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=20=E5=B7=B2=E6=88=90=E5=8A=9F=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BAsetup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/chooseImg/index.vue        |  63 ++-
 web/src/view/init/index.vue                   | 147 +++---
 .../aside/asideComponent/asyncSubmenu.vue     |  20 +-
 .../layout/aside/asideComponent/index.vue     |  44 +-
 .../layout/aside/asideComponent/menuItem.vue  |  21 +-
 .../layout/aside/historyComponent/history.vue | 498 +++++++++---------
 web/src/view/layout/aside/index.vue           | 135 ++---
 web/src/view/layout/index.vue                 | 250 +++++----
 web/src/view/layout/screenfull/index.vue      |  75 +--
 web/src/view/layout/search/search.vue         |  99 ++--
 web/src/view/layout/setting/index.vue         |  48 +-
 web/src/view/login/index.vue                  | 210 ++++----
 web/src/view/person/person.vue                | 342 +++++++-----
 13 files changed, 1034 insertions(+), 918 deletions(-)

diff --git a/web/src/components/chooseImg/index.vue b/web/src/components/chooseImg/index.vue
index cf44a757..b4589fa0 100644
--- a/web/src/components/chooseImg/index.vue
+++ b/web/src/components/chooseImg/index.vue
@@ -18,42 +18,41 @@
   </el-drawer>
 </template>
 
-<script>
-const path = process.env.VUE_APP_BASE_API
+<script setup>
+import { defineEmits, defineProps, ref, defineExpose } from 'vue'
 import { getFileList } from '@/api/fileUploadAndDownload'
-export default {
-  props: {
-    target: {
-      type: Object,
-      default: null
-    },
-    targetKey: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      drawer: false,
-      picList: [],
-      path: path
-    }
+
+const emit = defineEmits(['chooseImg'])
+defineProps({
+  target: {
+    type: Object,
+    default: null
   },
-  methods: {
-    chooseImg(url, target, targetKey) {
-      if (target && targetKey) {
-        target[targetKey] = url
-      }
-      this.$emit('enter-img', url)
-      this.drawer = false
-    },
-    async open() {
-      const res = await getFileList({ page: 1, pageSize: 9999 })
-      this.picList = res.data.list
-      this.drawer = true
-    }
+  targetKey: {
+    type: String,
+    default: ''
+  }
+})
+
+const drawer = ref(false)
+const picList = ref([])
+const path = ref(import.meta.env.VITE_BASE_API)
+
+const chooseImg = (url, target, targetKey) => {
+  if (target && targetKey) {
+    target[targetKey] = url
   }
+  emit('enter-img', url)
+  drawer.value = false
+}
+
+const open = async() => {
+  const res = await getFileList({ page: 1, pageSize: 9999 })
+  picList.value = res.data.list
+  drawer.value = true
 }
+
+defineExpose({ open })
 </script>
 
 <style lang="scss">
diff --git a/web/src/view/init/index.vue b/web/src/view/init/index.vue
index 7ccd90fe..3292e080 100644
--- a/web/src/view/init/index.vue
+++ b/web/src/view/init/index.vue
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div v-if="hello > 0 " :class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']" class=" form">
-        <el-form ref="form" :model="form" label-width="100px">
+        <el-form ref="formRef" :model="form" label-width="100px">
           <el-form-item label="数据库类型">
             <el-select v-model="form.dbType" placeholder="请选择" @change="changeDB">
               <el-option key="mysql" label="mysql" value="mysql" />
@@ -55,86 +55,93 @@
     </div>
   </div>
 </template>
+
 <script>
-import { initDB } from '@/api/initdb'
 export default {
   name: 'Init',
-  data() {
-    return {
-      hello: 0,
-      out: false,
-      form: {
+}
+</script>
+
+<script setup>
+import { initDB } from '@/api/initdb'
+import { reactive, ref } from 'vue'
+import { ElLoading, ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const hello = ref(0)
+const showNext = () => {
+  hello.value = hello.value + 1
+}
+
+const goDoc = () => {
+  window.open('https://www.gin-vue-admin.com/docs/first_master#3-init')
+}
+
+const out = ref(false)
+
+const form = reactive({
+  dbType: 'mysql',
+  host: '127.0.0.1',
+  port: '3306',
+  userName: 'root',
+  password: '',
+  dbName: 'gva'
+})
+const changeDB = (val) => {
+  switch (val) {
+    case 'mysql':
+      Object.assign(form, {
         dbType: 'mysql',
         host: '127.0.0.1',
         port: '3306',
         userName: 'root',
         password: '',
         dbName: 'gva'
-      }
-    }
-  },
-  methods: {
-    changeDB(val) {
-      switch (val) {
-        case 'mysql':
-          this.form = {
-            dbType: 'mysql',
-            host: '127.0.0.1',
-            port: '3306',
-            userName: 'root',
-            password: '',
-            dbName: 'gva'
-          }
-          break
-        case 'pgsql':
-          this.form = {
-            dbType: 'pgsql',
-            host: '127.0.0.1',
-            port: '5432',
-            userName: 'postgres',
-            password: '',
-            dbName: 'gva'
-          }
-          break
-        default:
-          this.form = {
-            dbType: 'mysql',
-            host: '127.0.0.1',
-            port: '3306',
-            userName: 'root',
-            password: '',
-            dbName: 'gva'
-          }
-      }
-    },
-    showNext() {
-      this.hello = this.hello + 1
-    },
-    goDoc() {
-      window.open('https://www.gin-vue-admin.com/docs/first_master#3-init')
-    },
-    async onSubmit() {
-      const loading = this.$loading({
-        lock: true,
-        text: '正在初始化数据库，请稍候',
-        spinner: 'loading',
-        background: 'rgba(0, 0, 0, 0.7)'
       })
-      try {
-        const res = await initDB(this.form)
-        if (res.code === 0) {
-          this.out = true
-          this.$message({
-            type: 'success',
-            message: res.msg
-          })
-          this.$router.push({ name: 'Login' })
-        }
-        loading.close()
-      } catch (err) {
-        loading.close()
-      }
+      break
+    case 'pgsql':
+      Object.assign(form, {
+        dbType: 'pgsql',
+        host: '127.0.0.1',
+        port: '5432',
+        userName: 'postgres',
+        password: '',
+        dbName: 'gva'
+      })
+      break
+    default:
+      Object.assign(form, {
+        dbType: 'mysql',
+        host: '127.0.0.1',
+        port: '3306',
+        userName: 'root',
+        password: '',
+        dbName: 'gva'
+      })
+  }
+}
+const onSubmit = async() => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在初始化数据库，请稍候',
+    spinner: 'loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+  try {
+    const res = await initDB(form)
+    if (res.code === 0) {
+      out.value = true
+      ElMessage({
+        type: 'success',
+        message: res.msg
+      })
+      router.push({ name: 'Login' })
     }
+    loading.close()
+  } catch (err) {
+    loading.close()
   }
 }
 </script>
diff --git a/web/src/view/layout/aside/asideComponent/asyncSubmenu.vue b/web/src/view/layout/aside/asideComponent/asyncSubmenu.vue
index 50776665..bf32d203 100644
--- a/web/src/view/layout/aside/asideComponent/asyncSubmenu.vue
+++ b/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>
diff --git a/web/src/view/layout/aside/asideComponent/index.vue b/web/src/view/layout/aside/asideComponent/index.vue
index 03e50582..bd48b107 100644
--- a/web/src/view/layout/aside/asideComponent/index.vue
+++ b/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
-    }
+}
+</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,
   },
-  computed: {
-    menuComponent() {
-      if (this.routerInfo.children && this.routerInfo.children.filter(item => !item.hidden).length) {
-        return 'AsyncSubmenu'
-      } else {
-        return 'MenuItem'
-      }
-    }
+})
+
+const menuComponent = computed(() => {
+  if (props.routerInfo.children && props.routerInfo.children.filter(item => !item.hidden).length) {
+    return AsyncSubmenu
+  } else {
+    return MenuItem
   }
-}
+})
+
 </script>
+
diff --git a/web/src/view/layout/aside/asideComponent/menuItem.vue b/web/src/view/layout/aside/asideComponent/menuItem.vue
index 44dc01cc..13919661 100644
--- a/web/src/view/layout/aside/asideComponent/menuItem.vue
+++ b/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;
diff --git a/web/src/view/layout/aside/historyComponent/history.vue b/web/src/view/layout/aside/historyComponent/history.vue
index f1b59df8..bede9238 100644
--- a/web/src/view/layout/aside/historyComponent/history.vue
+++ b/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'
+export default {
+  name: 'HistoryComponent',
+}
+</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)
+  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: ''
+
+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 {
+      width = 220
     }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'activeColor']),
-    defaultRouter() {
-      return this.userInfo.authority.defaultRouter
+    if (isMobile.value) {
+      width = 0
     }
-  },
-  watch: {
-    contextMenuVisible() {
-      if (this.contextMenuVisible) {
-        document.body.addEventListener('click', () => {
-          this.contextMenuVisible = false
+    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 {
-        document.body.removeEventListener('click', () => {
-          this.contextMenuVisible = false
+        router.push({
+          name: historys.value[index - 1].name,
+          query: historys.value[index - 1].query,
+          params: historys.value[index - 1].params,
         })
       }
-    },
-    $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
+  }
+  historys.value.splice(index, 1)
+}
+
+watch(contextMenuVisible, () => {
+  if (contextMenuVisible.value) {
+    document.body.addEventListener('click', () => {
+      contextMenuVisible.value = false
     })
-    emitter.on('collapse', isCollapse => {
-      this.isCollapse = isCollapse
+  } else {
+    document.body.removeEventListener('click', () => {
+      contextMenuVisible.value = false
     })
-    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)
-    } else {
-      this.activeValue = window.sessionStorage.getItem('activeValue')
-    }
-    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
-      })
+  }
+})
+
+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: {},
     },
-    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)
-    }
+  ]
+  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 {
diff --git a/web/src/view/layout/aside/index.vue b/web/src/view/layout/aside/index.vue
index 1ed8c5e5..f8f2d188 100644
--- a/web/src/view/layout/aside/index.vue
+++ b/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'
+export default {
+  name: 'Aside',
+}
+</script>
+
+<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'
 
-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
-    }
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
 
-    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)
+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;
   }
 }
diff --git a/web/src/view/layout/index.vue b/web/src/view/layout/index.vue
index d24cc171..407a50bb 100644
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@@ -97,145 +97,135 @@
 </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>
 
diff --git a/web/src/view/layout/screenfull/index.vue b/web/src/view/layout/screenfull/index.vue
index ddb6f853..f02a0b7b 100644
--- a/web/src/view/layout/screenfull/index.vue
+++ b/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'
-    }
-  },
-  data() {
-    return {
-      isShow: true
-    }
-  },
-  mounted() {
-    if (screenfull.isEnabled) {
-      screenfull.on('change', this.changeFullShow)
-    }
+}
+</script>
+
+<script setup>
+import screenfull from 'screenfull' // 引入screenfull
+import { defineProps, onMounted, onUnmounted, ref } from 'vue'
+defineProps({
+  width: {
+    type: Number,
+    default: 22
   },
-  unmounted() {
-    screenfull.off('change', this.changeFullShow)
+  height: {
+    type: Number,
+    default: 22
   },
-  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">
diff --git a/web/src/view/layout/search/search.vue b/web/src/view/layout/search/search.vue
index 75e10a34..7e3eba11 100644
--- a/web/src/view/layout/search/search.vue
+++ b/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'
+export default {
+  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'
 
-export default {
-  name: 'SearchComponent',
-  components: {
-    Screenfull
-  },
-  data() {
-    return {
-      value: '',
-      show: false,
-      btnShow: true,
-      reload: false
-    }
-  },
-  computed: {
-    ...mapGetters('router', ['routerList']),
-  },
+const store = useStore()
+const router = useRouter()
+
+const routerList = computed(() => store.getters['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')
-    }
-  }
+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{
diff --git a/web/src/view/layout/setting/index.vue b/web/src/view/layout/setting/index.vue
index 285af793..efed3a18 100644
--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
@@ -43,33 +43,33 @@
 </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>
diff --git a/web/src/view/login/index.vue b/web/src/view/login/index.vue
index 5a37f4ba..e6feeebd 100644
--- a/web/src/view/login/index.vue
+++ b/web/src/view/login/index.vue
@@ -12,12 +12,15 @@
         </div>
         <el-form
           ref="loginForm"
-          :model="loginForm"
+          :model="loginFormData"
           :rules="rules"
           @keyup.enter="submitForm"
         >
           <el-form-item prop="username">
-            <el-input v-model="loginForm.username" placeholder="请输入用户名">
+            <el-input
+              v-model="loginFormData.username"
+              placeholder="请输入用户名"
+            >
               <template #suffix>
                 <span class="input-icon">
                   <el-icon>
@@ -29,21 +32,25 @@
           </el-form-item>
           <el-form-item prop="password">
             <el-input
-              v-model="loginForm.password"
+              v-model="loginFormData.password"
               :type="lock === 'lock' ? 'password' : 'text'"
               placeholder="请输入密码"
             >
               <template #suffix>
                 <span class="input-icon">
-                  <el-icon><component :is="lock" @click="changeLock" /></el-icon>
+                  <el-icon>
+                    <component
+                      :is="lock"
+                      @click="changeLock"
+                    />
+                  </el-icon>
                 </span>
               </template>
             </el-input>
           </el-form-item>
           <el-form-item style="position: relative" prop="captcha">
             <el-input
-              v-model="loginForm.captcha"
-              name="logVerify"
+              v-model="loginFormData.captcha"
               placeholder="请输入验证码"
               style="width: 60%"
             />
@@ -79,7 +86,10 @@
           <a href="https://support.qq.com/product/371961" target="_blank">
             <img src="@/assets/kefu.png" class="link-icon">
           </a>
-          <a href="https://github.com/flipped-aurora/gin-vue-admin" target="_blank">
+          <a
+            href="https://github.com/flipped-aurora/gin-vue-admin"
+            target="_blank"
+          >
             <img src="@/assets/github.png" class="link-icon">
           </a>
           <a href="https://space.bilibili.com/322210472" target="_blank">
@@ -93,101 +103,109 @@
     </div>
   </div>
 </template>
+
 <script>
-import { mapActions } from 'vuex'
+export default {
+  name: 'Login',
+}
+</script>
+
+<script setup>
+import { useStore } from 'vuex'
 import { captcha } from '@/api/user'
 import { checkDB } from '@/api/initdb'
 import bootomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
-export default {
-  name: 'Login',
-  components: {
-    bootomInfo
-  },
-  data() {
-    const checkUsername = (rule, value, callback) => {
-      if (value.length < 5) {
-        return callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const checkPassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        return callback(new Error('请输入正确的密码'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      lock: 'lock',
-      loginForm: {
-        username: 'admin',
-        password: '123456',
-        captcha: '',
-        captchaId: ''
-      },
-      rules: {
-        username: [{ validator: checkUsername, trigger: 'blur' }],
-        password: [{ validator: checkPassword, trigger: 'blur' }],
-        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' },
-          {
-            message: '验证码格式不正确',
-            trigger: 'blur',
-          }]
-      },
-      logVerify: '',
-      picPath: ''
-    }
-  },
-  created() {
-    this.loginVerify()
-  },
-  methods: {
-    ...mapActions('user', ['LoginIn']),
-    async checkInit() {
-      const res = await checkDB()
-      if (res.code === 0) {
-        if (res.data?.needInit) {
-          this.$store.commit('user/NeedInit')
-          this.$router.push({ name: 'Init' })
-        } else {
-          this.$message({
-            type: 'info',
-            message: '已配置数据库信息，无法初始化'
-          })
-        }
-      }
-    },
-    async login() {
-      return await this.LoginIn(this.loginForm)
+import { reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const store = useStore()
+
+// 验证函数
+const checkUsername = (rule, value, callback) => {
+  if (value.length < 5) {
+    return callback(new Error('请输入正确的用户名'))
+  } else {
+    callback()
+  }
+}
+const checkPassword = (rule, value, callback) => {
+  if (value.length < 6) {
+    return callback(new Error('请输入正确的密码'))
+  } else {
+    callback()
+  }
+}
+
+// 获取验证码
+const loginVerify = () => {
+  captcha({}).then((ele) => {
+    rules.captcha[1].max = ele.data.captchaLength
+    rules.captcha[1].min = ele.data.captchaLength
+    picPath.value = ele.data.picPath
+    loginFormData.captchaId = ele.data.captchaId
+  })
+}
+loginVerify()
+
+// 登录相关操作
+const lock = ref('lock')
+const changeLock = () => {
+  lock.value = lock.value === 'lock' ? 'unlock' : 'lock'
+}
+
+const loginForm = ref(null)
+const picPath = ref('')
+const loginFormData = reactive({
+  username: 'admin',
+  password: '123456',
+  captcha: '',
+  captchaId: '',
+})
+const rules = reactive({
+  username: [{ validator: checkUsername, trigger: 'blur' }],
+  password: [{ validator: checkPassword, trigger: 'blur' }],
+  captcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+    {
+      message: '验证码格式不正确',
+      trigger: 'blur',
     },
-    async submitForm() {
-      this.$refs.loginForm.validate(async(v) => {
-        if (v) {
-          const flag = await this.login()
-          if (!flag) {
-            this.loginVerify()
-          }
-        } else {
-          this.$message({
-            type: 'error',
-            message: '请正确填写登录信息',
-            showClose: true
-          })
-          this.loginVerify()
-          return false
-        }
+  ],
+})
+const login = async() => {
+  return await store.dispatch('user/LoginIn', loginFormData)
+}
+const submitForm = () => {
+  loginForm.value.validate(async(v) => {
+    if (v) {
+      const flag = await login()
+      if (!flag) {
+        loginVerify()
+      }
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '请正确填写登录信息',
+        showClose: true,
       })
-    },
-    changeLock() {
-      this.lock = this.lock === 'lock' ? 'unlock' : 'lock'
-    },
-    loginVerify() {
-      captcha({}).then((ele) => {
-        this.rules.captcha[1].max = ele.data.captchaLength
-        this.rules.captcha[1].min = ele.data.captchaLength
-        this.picPath = ele.data.picPath
-        this.loginForm.captchaId = ele.data.captchaId
+      loginVerify()
+      return false
+    }
+  })
+}
+
+// 跳转初始化
+const checkInit = async() => {
+  const res = await checkDB()
+  if (res.code === 0) {
+    if (res.data?.needInit) {
+      store.commit('user/NeedInit')
+      router.push({ name: 'Init' })
+    } else {
+      ElMessage({
+        type: 'info',
+        message: '已配置数据库信息，无法初始化',
       })
     }
   }
diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index acf5a90b..964d0ccd 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -4,7 +4,19 @@
       <el-col :span="6">
         <div class="fl-left avatar-box">
           <div class="user-card">
-            <div class="user-headpic-update" :style="{ 'background-image': `url(${(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg})`,'background-repeat':'no-repeat','background-size':'cover' }">
+            <div
+              class="user-headpic-update"
+              :style="{
+                'background-image': `url(${
+                  userInfo.headerImg &&
+                  userInfo.headerImg.slice(0, 4) !== 'http'
+                    ? path + userInfo.headerImg
+                    : userInfo.headerImg
+                })`,
+                'background-repeat': 'no-repeat',
+                'background-size': 'cover',
+              }"
+            >
               <span class="update" @click="openChooseImg">
                 <el-icon>
                   <edit />
@@ -12,7 +24,8 @@
                 重新上传</span>
             </div>
             <div class="user-personality">
-              <p v-if="!editFlag" class="nickName">{{ userInfo.nickName }}
+              <p v-if="!editFlag" class="nickName">
+                {{ userInfo.nickName }}
                 <el-icon class="pointer" color="#66b1ff" @click="openEidt">
                   <edit />
                 </el-icon>
@@ -36,7 +49,12 @@
                   </el-icon>
                   {{ userInfo.nickName }}
                 </li>
-                <el-tooltip class="item" effect="light" content="北京反转极光科技有限公司-技术部-前端事业群" placement="top">
+                <el-tooltip
+                  class="item"
+                  effect="light"
+                  content="北京反转极光科技有限公司-技术部-前端事业群"
+                  placement="top"
+                >
                   <li>
                     <el-icon>
                       <data-analysis />
@@ -50,7 +68,12 @@
                   </el-icon>
                   中国·北京市·朝阳区
                 </li>
-                <el-tooltip class="item" effect="light" content="GoLang/JavaScript/Vue/Gorm" placement="top">
+                <el-tooltip
+                  class="item"
+                  effect="light"
+                  content="GoLang/JavaScript/Vue/Gorm"
+                  placement="top"
+                >
                   <li>
                     <el-icon>
                       <medal />
@@ -58,7 +81,6 @@
                     GoLang/JavaScript/Vue/Gorm
                   </li>
                 </el-tooltip>
-
               </ul>
             </div>
           </div>
@@ -94,7 +116,10 @@
                   <p class="title">修改密码</p>
                   <p class="desc">
                     修改个人密码
-                    <a href="javascript:void(0)" @click="showPassword=true">修改密码</a>
+                    <a
+                      href="javascript:void(0)"
+                      @click="showPassword = true"
+                    >修改密码</a>
                   </p>
                 </li>
               </ul>
@@ -104,10 +129,20 @@
       </el-col>
     </el-row>
 
-    <ChooseImg ref="chooseImg" @enter-img="enterImg" />
+    <ChooseImg ref="chooseImgRef" @enter-img="enterImg" />
 
-    <el-dialog v-model="showPassword" title="修改密码" width="360px" @close="clearPassword">
-      <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
+    <el-dialog
+      v-model="showPassword"
+      title="修改密码"
+      width="360px"
+      @close="clearPassword"
+    >
+      <el-form
+        ref="modifyPwdForm"
+        :model="pwdModify"
+        :rules="rules"
+        label-width="80px"
+      >
         <el-form-item :minlength="6" label="原密码" prop="password">
           <el-input v-model="pwdModify.password" show-password />
         </el-form-item>
@@ -120,8 +155,15 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="showPassword=false">取 消</el-button>
-          <el-button size="small" type="primary" @click="savePassword">确 定</el-button>
+          <el-button
+            size="small"
+            @click="showPassword = false"
+          >取 消</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            @click="savePassword"
+          >确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -129,118 +171,128 @@
 </template>
 
 <script>
+export default {
+  name: 'Person',
+}
+</script>
+
+<script setup>
 import ChooseImg from '@/components/chooseImg/index.vue'
 import { setUserInfo, changePassword } from '@/api/user.js'
+import { useStore } from 'vuex'
+import { computed, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
-import { mapGetters, mapMutations } from 'vuex'
-const path = import.meta.env.VITE_BASE_API
-export default {
-  name: 'Person',
-  components: {
-    ChooseImg
-  },
-  data() {
-    return {
-      path: path,
-      activeName: 'second',
-      showPassword: false,
-      pwdModify: {},
-      nickName: '',
-      editFlag: false,
-      rules: {
-        password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
-        ],
-        newPassword: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
-        ],
-        confirmPassword: [
-          { required: true, message: '请输入确认密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' },
-          {
-            validator: (rule, value, callback) => {
-              if (value !== this.pwdModify.newPassword) {
-                callback(new Error('两次密码不一致'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'blur'
-          }
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token'])
-  },
-  methods: {
-    ...mapMutations('user', ['ResetUserInfo']),
-    savePassword() {
-      this.$refs.modifyPwdForm.validate(valid => {
-        if (valid) {
-          changePassword({
-            username: this.userInfo.userName,
-            password: this.pwdModify.password,
-            newPassword: this.pwdModify.newPassword
-          }).then((res) => {
-            if (res.code === 0) {
-              this.$message.success('修改密码成功！')
-            }
-            this.showPassword = false
-          })
+const store = useStore()
+
+const path = ref(import.meta.env.VITE_BASE_API)
+const activeName = ref('second')
+const rules = reactive({
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '最少6个字符', trigger: 'blur' },
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, message: '最少6个字符', trigger: 'blur' },
+  ],
+  confirmPassword: [
+    { required: true, message: '请输入确认密码', trigger: 'blur' },
+    { min: 6, message: '最少6个字符', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== pwdModify.value.newPassword) {
+          callback(new Error('两次密码不一致'))
         } else {
-          return false
+          callback()
         }
-      })
+      },
+      trigger: 'blur',
     },
-    clearPassword() {
-      this.pwdModify = {
-        password: '',
-        newPassword: '',
-        confirmPassword: ''
-      }
-      this.$refs.modifyPwdForm.clearValidate()
-    },
-    openChooseImg() {
-      this.$refs.chooseImg.open()
-    },
-    async enterImg(url) {
-      const res = await setUserInfo({ headerImg: url, ID: this.userInfo.ID })
-      if (res.code === 0) {
-        this.ResetUserInfo({ headerImg: url })
-        this.$message({
-          type: 'success',
-          message: '设置成功'
-        })
-      }
-    },
-    openEidt() {
-      this.nickName = this.userInfo.nickName
-      this.editFlag = true
-    },
-    closeEdit() {
-      this.nickName = ''
-      this.editFlag = false
-    },
-    async enterEdit() {
-      const res = await setUserInfo({ nickName: this.nickName, ID: this.userInfo.ID })
-      if (res.code === 0) {
-        this.ResetUserInfo({ nickName: this.nickName })
-        this.$message({
-          type: 'success',
-          message: '设置成功'
-        })
-      }
-      this.nickName = ''
-      this.editFlag = false
-    },
-    handleClick(tab, event) {
-      console.log(tab, event)
+  ],
+})
+
+const userInfo = computed(() => store.getters['user/userInfo'])
+const modifyPwdForm = ref(null)
+const showPassword = ref(false)
+const pwdModify = ref({})
+const nickName = ref('')
+const editFlag = ref(false)
+const savePassword = async() => {
+  modifyPwdForm.value.validate((valid) => {
+    if (valid) {
+      changePassword({
+        username: userInfo.value.userName,
+        password: pwdModify.value.password,
+        newPassword: pwdModify.value.newPassword,
+      }).then((res) => {
+        if (res.code === 0) {
+          ElMessage.success('修改密码成功！')
+        }
+        showPassword.value = false
+      })
+    } else {
+      return false
     }
+  })
+}
+
+const clearPassword = () => {
+  pwdModify.value = {
+    password: '',
+    newPassword: '',
+    confirmPassword: '',
   }
+  modifyPwdForm.value.clearValidate()
+}
+
+const chooseImgRef = ref(null)
+const openChooseImg = () => {
+  chooseImgRef.value.open()
+}
+
+const ResetUserInfo = (data) => {
+  store.commit('user/ResetUserInfo', data)
+}
+const enterImg = async(url) => {
+  const res = await setUserInfo({ headerImg: url, ID: userInfo.value.ID })
+  if (res.code === 0) {
+    ResetUserInfo({ headerImg: url })
+    ElMessage({
+      type: 'success',
+      message: '设置成功',
+    })
+  }
+}
+
+const openEidt = () => {
+  nickName.value = userInfo.value.nickName
+  editFlag.value = true
+}
+
+const closeEdit = () => {
+  nickName.value = ''
+  editFlag.value = false
+}
+
+const enterEdit = async() => {
+  const res = await setUserInfo({
+    nickName: nickName.value,
+    ID: userInfo.value.ID,
+  })
+  if (res.code === 0) {
+    ResetUserInfo({ nickName: nickName.value })
+    ElMessage({
+      type: 'success',
+      message: '设置成功',
+    })
+  }
+  nickName.value = ''
+  editFlag.value = false
+}
+
+const handleClick = (tab, event) => {
+  console.log(tab, event)
 }
 </script>
 
@@ -291,10 +343,10 @@ export default {
         align-items: center;
         font-size: 26px;
       }
-      .person-info{
+      .person-info {
         margin-top: 6px;
         font-size: 14px;
-        color:#999
+        color: #999;
       }
     }
     .user-information {
@@ -307,7 +359,7 @@ export default {
         width: 100%;
         li {
           width: 100%;
-          white-space:nowrap;
+          white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           i {
@@ -343,30 +395,40 @@ export default {
     }
   }
 }
-.user-headpic-update{
-    width: 120px;
-    height: 120px;
-    line-height: 120px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    border-radius: 20px;
-     &:hover{
+.user-headpic-update {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  border-radius: 20px;
+  &:hover {
+    color: #fff;
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15) 0%,
+        rgba(0, 0, 0, 0.15) 100%
+      ),
+      radial-gradient(
+          at top center,
+          rgba(255, 255, 255, 0.4) 0%,
+          rgba(0, 0, 0, 0.4) 120%
+        )
+        #989898;
+    background-blend-mode: multiply, multiply;
+    .update {
       color: #fff;
-      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
-      background-blend-mode: multiply,multiply;
-      .update{
-        color:#fff ;
-      }
-    }
-    .update{
-      height: 120px;
-      width: 120px;
-      text-align: center;
-      color:transparent;
     }
   }
-  .pointer{
-    cursor: pointer;
+  .update {
+    height: 120px;
+    width: 120px;
+    text-align: center;
+    color: transparent;
   }
+}
+.pointer {
+  cursor: pointer;
+}
 </style>