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

pages/tools/fucksq.vue

@@ -11,22 +11,22 @@
                 </el-col>
             </el-row>
             <el-row style="width: 100%;" :gutter="20">
-                <el-col :span="16" class="col-flex-end">
-                    <el-text size="large">刷赞数：</el-text>
-                    <el-input-number v-model="likes" :min="1" :max="300" />
+                <el-col :span="13" class="col-flex-end">
+                    <el-text size="large" style="margin-right: 7px;">赞数</el-text>
+                    <el-input-number style="width: 130px;" v-model="likes" :min="1" :max="300" />
                 </el-col>
                 <el-col :span="4" class="col-flex-end">
                     <el-button type="primary" style="width: 100%"
                         :disabled="status === 'busy' || id === undefined" @click="handleStart">开始</el-button>
                 </el-col>
-                <el-col :span="4" class="col-flex-end">
+                <el-col :span="7" class="col-flex-end">
                     <el-button type="primary" style="width: 100%" :disabled="messages.length === 0" @click="handleClear">清空输出</el-button>
                 </el-col>
             </el-row>
             <div class="message-container-wrapper">
                 <el-scrollbar>
                     <div class="message-container">
-                        <el-text v-for="(message, index) in messages" :key="message.timestamp" class="message-container-message">
+                        <el-text v-for="(message) in messages" :key="message.id" class="message-container-message">
                             <span style="margin-right: 7px;">{{ `${_fd(message.timestamp)} ==>`
                                 }}</span>
                             <span>{{ message.message }}</span>
@@ -46,13 +46,15 @@ const status = ref<'waiting' | 'busy'>('waiting')
 
 const messages = reactive<{
     timestamp: number,
-    message: string
+    message: string,
+    id: number
 }[]>([])
 
 const log = (...message: string[]) => {
-    messages.push({
+    messages.unshift({
         timestamp: Date.now(),
-        message: message.join('')
+        message: message.join(''),
+        id: Math.random()
     })
 }
 
@@ -128,13 +130,14 @@ watchEffect(() => {
     /* padding: 5px 10px; */
     border: 1px solid #ccc;
     border-radius: 5px;
+    /* max-height: 500px; */
 }
 
 .message-container {
     width: 100%;
     max-width: 800px;
-    height: 100%;
-    max-height: 500px;
+    height: calc( 100vh - 350px );
+    max-height: calc( 100vh - 350px );
     overflow-y: auto;
     display: flex;
     flex-direction: column;

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>