feat: 1.配置刷新token相关逻辑，2.添加后台服务页面 3.优化样式。

pages/user/index.vue

@@ -26,11 +26,29 @@ const userStore = useUserStore()
 //     ]
 // })
 
-onBeforeMount(() => {
-    if (userStore.isLogin === false) {
-        return router.replace('/user/login')
-    } else {
+onBeforeMount(async () => {
+    if (userStore && userStore.isLogin) {
         return router.replace('/user/main')
+    } else {
+        try {
+            if(userStore.token) {
+                const response = await $fetch('/api/user/refreshToken', {
+                    method: 'POST',
+                    body: {
+                        token: userStore.token
+                    }
+                })
+                userStore.setToken(response.token)
+                userStore.setTokenExpireTime(response.expiresIn)
+                userStore.setLoginStatus(true)
+                router.replace('/user/main')
+            } else {
+                router.replace('/user/login')
+            }
+        } catch (error) {
+            console.error(error)
+            router.replace('/user/login')
+        }
     }
 })
 </script>

pages/user/main.vue

@@ -44,6 +44,7 @@ import Cat from '~/components/icons/cat.vue'
 import chevronDown from '~/components/icons/chevronDown.vue';
 import Documents from '~/components/icons/documents.vue';
 import Home from '~/components/icons/home.vue';
+import Cloud from '~/components/icons/cloud.vue';
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -63,11 +64,16 @@ const menuItem = shallowReactive([
         title: '账户',
         icon: Cat,
         to: '/user/main/account'
+    }, {
+        title: '服务',
+        icon: Cloud,
+        iconFill: true,
+        to: '/user/main/server'
     }, {
         title: '测试',
         icon: Cat,
         to: '/user/main/test'
-    }
+    },
 ])
 
 const showSidebar = ref(true)

pages/user/main/server.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="user-server-config">
+      <el-container>
+        <el-header>
+            <h1>服务端配置</h1>
+        </el-header>
+        <el-main>
+            <el-divider content-position="left">
+                <h2>更新服务端</h2>
+                
+            </el-divider>
+            <p>上传更新包并更新服务端</p>
+            <el-upload 
+                :auto-upload="false" 
+                v-model="fileList" 
+                action="/api/system/update" 
+                ref="uploadRef" 
+                :headers="headers" 
+                drag
+                :on-exceed="handleExceed"
+                :on-change="handleUploadChange"
+                :limit="1"
+            >
+                <template #trigger>
+                    <div class="server-upload">
+                        <add class="server-upload-icon"></add>
+                        <el-text style="margin: 0;">拖拽 output.tar.gz 至此<br />或单击此处选择文件</el-text>
+                    </div>
+                </template>
+            </el-upload>
+            <el-row>
+                <el-col :span="24" class="flex-end">
+                    <el-button type="success" @click="submitUpload">
+                            点击上传更新包并更新服务
+                    </el-button>
+                </el-col>
+            </el-row>
+        </el-main>
+      </el-container>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import type { UploadInstance, UploadRawFile, UploadUserFile } from 'element-plus/es/components/index.mjs';
+import useUserStore from '~/hooks/pinia/useUserStore';
+import add from '~/components/icons/add.vue';
+import { genFileId } from 'element-plus'
+
+
+const fileList = ref<UploadUserFile[]>([])
+const userStore = useUserStore()
+
+
+const uploadRef = ref<UploadInstance>()
+
+const headers = computed(() => {
+    return {
+        Authorization: `Bearer ${userStore.token}`
+    }
+})
+
+const handleExceed = (files: UploadUserFile[]) => {
+  uploadRef.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadRef.value!.handleStart(file)
+}
+
+const handleUploadChange = (_file: UploadUserFile, files: UploadUserFile[]) => {
+    for (let i = files.length - 1; i >= 0; i--) {
+    if (files[i].name !== 'output.tar.gz') {
+        files.splice(i, 1);
+    }
+    }
+}
+
+const submitUpload = () => {
+  uploadRef.value!.submit()
+}
+
+</script>
+
+<style lang="scss" scoped>
+.user-server-config {
+    position: relative;
+    padding: 10px 20px;
+    .server-upload {
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: all .2s ease;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &-icon {
+            width: 45px;
+            color: #595959;
+        }
+    }
+    h1 {
+        font-size: xx-large;
+    }
+    h2 {
+        font-size: larger;
+    }
+    p {
+        color: #595959;
+    }
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>