diff --git a/frontend/package.json b/frontend/package.json
index 838a1c2..1cc48d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,6 @@
     "unplugin-vue-router": "^0.8.4",
     "vite": "^5.1.5",
     "vite-plugin-vuetify": "^2.0.3",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.4.0"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2caa78e..6fb643e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <v-app>
     <v-main>
-      <router-view />
+      <index />
     </v-main>
   </v-app>
 </template>
 
 <script setup>
-  //
+import index from './pages/index.vue';
 </script>
diff --git a/frontend/src/components/Auth.vue b/frontend/src/components/Auth.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/main.js b/frontend/src/main.js
index c849848..3859cea 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -19,6 +19,7 @@ import VueCookies from 'vue-cookies'
 
 
 const app = createApp(App)
+
 app.use(store)
 app.use(VueCookies)
 
diff --git a/frontend/src/pages/admin.vue b/frontend/src/pages/admin.vue
index 9be4f04..9eb0ee4 100644
--- a/frontend/src/pages/admin.vue
+++ b/frontend/src/pages/admin.vue
@@ -2,125 +2,82 @@
 
     <BottomNavBar id="bnb" v-model="value" @input="go" />
 
-    <div id="container-wrap" style="height: calc(100vh - 64px)">
-        <div id="pctabs">
-            <h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
-            <div
-                style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
-                <div>
-                    <div id="pctab-btn" @click="$router.push('/');">
-                        <span>📝 投稿</span>
-                    </div>
-                    <div id="pctab-btn" @click="$router.push('/world');">
-                        <span>🌏 稿件</span>
-                    </div>
-                    <div id="pctab-btn" @click="$router.push('/service');">
-                        <span>🛠 服务</span>
-                    </div>
-                    <div id="pctab-btn" @click="$router.push('/service');">
-                        <span style="font-weight: 1000">🔐 管理</span>
+    <div>
+        <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
+        <span>{{ $store.state.metadata.brand }}</span>
+    </div>
+    <v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
+        <v-tab value="1">🪪 账号</v-tab>
+        <v-tab value="2">🚫 封禁记录</v-tab>
+    </v-tabs>
+
+    <v-divider id="hdivider"></v-divider>
+
+    <v-window v-model="tab" disabled>
+        <v-window-item value="1">
+            <div style="padding: 16px;">
+                <!--UIN搜索框-->
+                <div id="accountFilter">
+                    <div style="display: flex;flex-direction: row;">
+
+                        <v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"
+                            style="margin-bottom: 0px"></v-text-field>
+                        <v-select v-model="filter.user_group" label="按用户组筛选" style="margin-inline: 10px;width: 30px"
+                            :items="['any', 'user', 'member', 'admin']" variant="solo"></v-select>
+
+                        <v-btn @click="getAccounts" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
                     </div>
                 </div>
+                <v-pagination :length="accountPages" v-model="filter.page" style="margin-top: -10px"
+                    @update:model-value="getAccounts"></v-pagination>
+                <div
+                    style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
+                    <!-- <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px"
+                                @recall="recallPost" /> -->
 
-                <div style="display: flex;">
-                    <img :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
-                    <div>
-                        <p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ uin }}</p>
-                        <p style="margin-left: 16px; font-size: 12px; color: #666;">{{ userGroup }}</p>
-                    </div>
+                    <AccountCard v-for="a in accounts" :key="a.id" :account="a" style="margin-top: 16px"
+                        @changeGroup="changeGroup" @banAccount="banAccount" @toast="toast" />
                 </div>
             </div>
+        </v-window-item>
+        <v-window-item value="2">
+            <div style="padding: 16px;">
+                <!--UIN搜索框-->
+                <div id="accountFilter">
+                    <div style="display: flex;flex-direction: row;">
+
+                        <v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"></v-text-field>
+
+                        <v-checkbox v-model="banListFilter.only_valid" label="仅生效中的" style="margin-inline: 10px;"
+                            @change="getBanList"></v-checkbox>
+                        <v-btn @click="getBanList" color="primary" style="margin-top: 8px; " size="large">查找</v-btn>
+                    </div>
+                </div>
 
-        </div>
-
-        <!-- 纵向分割线 -->
-        <div id="vdivider" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
-        </div>
-
-        <div id="container">
-            <div>
-                <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
-                <span>{{ $store.state.metadata.brand }}</span>
+                <v-pagination :length="banPages" v-model="banListFilter.page" style="margin-top: -10px"
+                    @update:model-value="getBanList"></v-pagination>
+                <div
+                    style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
+                    <BanRecordCard v-for="b in banRecords" :key="b.id" :banRecord="b" style="margin-top: 16px"
+                        @unban="unban" @toast="toast" />
+                </div>
             </div>
-            <v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
-                <v-tab value="1">🪪 账号</v-tab>
-                <v-tab value="2">🚫 封禁记录</v-tab>
-            </v-tabs>
-
-            <v-divider id="hdivider"></v-divider>
-
-            <v-window v-model="tab" disabled>
-                <v-window-item value="1">
-                    <div style="padding: 16px;">
-                        <!--UIN搜索框-->
-                        <div id="accountFilter">
-                            <div style="display: flex;flex-direction: row;">
-
-                                <v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"
-                                    style="margin-bottom: 0px"></v-text-field>
-                                <v-select v-model="filter.user_group" label="按用户组筛选"
-                                    style="margin-inline: 10px;width: 30px" :items="['any', 'user', 'member', 'admin']"
-                                    variant="solo"></v-select>
-
-                                <v-btn @click="getAccounts" color="primary" style="margin-top: 8px; "
-                                    size="large">查找</v-btn>
-                            </div>
-                        </div>
-                        <v-pagination :length="accountPages" v-model="filter.page" style="margin-top: -10px"
-                            @update:model-value="getAccounts"></v-pagination>
-                        <div
-                            style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
-                            <!-- <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px"
-                                @recall="recallPost" /> -->
-
-                            <AccountCard v-for="a in accounts" :key="a.id" :account="a" style="margin-top: 16px"
-                                @changeGroup="changeGroup" @banAccount="banAccount" @toast="toast" />
-                        </div>
-                    </div>
-                </v-window-item>
-                <v-window-item value="2">
-                    <div style="padding: 16px;">
-                        <!--UIN搜索框-->
-                        <div id="accountFilter">
-                            <div style="display: flex;flex-direction: row;">
-
-                                <v-text-field v-model="filter.uin" label="输入UIN搜索" variant="solo"></v-text-field>
-
-                                <v-checkbox v-model="banListFilter.only_valid" label="仅生效中的"
-                                    style="margin-inline: 10px;" @change="getBanList"></v-checkbox>
-                                <v-btn @click="getBanList" color="primary" style="margin-top: 8px; "
-                                    size="large">查找</v-btn>
-                            </div>
-                        </div>
-
-                        <v-pagination :length="banPages" v-model="banListFilter.page" style="margin-top: -10px"
-                            @update:model-value="getBanList"></v-pagination>
-                        <div
-                            style="overflow-y: scroll; max-height: calc(100vh - 260px); min-height: calc(100vh - 360px);margin-top: 10px">
-                            <BanRecordCard v-for="b in banRecords" :key="b.id" :banRecord="b" style="margin-top: 16px"
-                                @unban="unban" @toast="toast" />
-                        </div>
-                    </div>
-                </v-window-item>
-            </v-window>
-
-            <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"
-                style="margin-bottom: 64px">
-                {{ snackbar.text }}
-            </v-snackbar>
-
-            <v-dialog v-model="showServiceHint" width="auto">
-                <v-card :text="services[selectedService].toast" title="提示">
-                    <template v-slot:actions>
-                        <v-btn text="取消" @click="showServiceHint = false;"></v-btn>
-                        <v-btn class="ms-auto" text="确定"
-                            @click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
-                    </template>
-                </v-card>
-            </v-dialog>
-
-        </div>
-    </div>
+        </v-window-item>
+    </v-window>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
+        {{ snackbar.text }}
+    </v-snackbar>
+
+    <v-dialog v-model="showServiceHint" width="auto">
+        <v-card :text="services[selectedService].toast" title="提示">
+            <template v-slot:actions>
+                <v-btn text="取消" @click="showServiceHint = false;"></v-btn>
+                <v-btn class="ms-auto" text="确定"
+                    @click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
 
 </template>
 
@@ -146,9 +103,6 @@ export default {
             },
             value: 2,
             displayInnerWindow: '',
-            avatarUrl: '',
-            uin: '',
-            userGroup: 'user',
             tab: null,
             accounts: [],
             filter: {
@@ -182,31 +136,10 @@ export default {
     },
 
     mounted() {
-        this.tokenLogin()
     },
 
     methods: {
 
-        tokenLogin() {
-            this.$axios.get('/v1/account/token-check')
-                .then(res => {
-                    if (res.data.code === 0) {
-                        this.uin = res.data.data.uin
-                        this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
-                        this.userGroup = res.data.data.user_group
-                    } else {
-                        this.toast('登录失败：' + res.data.msg)
-                    }
-                })
-                .catch(err => {
-                    if (err.response.data.code === -1) {
-                        this.$router.push('/auth?hint=请先登录嗷')
-                        return
-                    }
-                    this.toast('登录失败：' + err.response.data.msg)
-                    console.error(err)
-                })
-        },
         randomColor() {
             let colors = ["#FFC107", "#42A5F5", "#9CCC65", "#F06292", "#76FF03", "#9E9E9E", "#8D6E63"]
             return colors[Math.floor(Math.random() * 100) % colors.length]
@@ -254,7 +187,7 @@ export default {
                     if (res.data.code === 0) {
                         this.accounts = res.data.data.list
 
-                        for (let i = 0; this.accounts!=null && i < this.accounts.length; i++) {
+                        for (let i = 0; this.accounts != null && i < this.accounts.length; i++) {
                             let date = new Date(this.accounts[i].created_at)
 
                             this.accounts[i].created_at = date.toLocaleString()
diff --git a/frontend/src/pages/auth.vue b/frontend/src/pages/auth.vue
index 42f0056..b23baee 100644
--- a/frontend/src/pages/auth.vue
+++ b/frontend/src/pages/auth.vue
@@ -1,5 +1,5 @@
 <template style="">
-    <div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #f8f8f8;">
+    <div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #fff;">
         <div class="auth-card">
             <h2 style="margin-bottom: 32px;">{{ authTitle }}</h2>
             <v-form v-if="!authMode">
@@ -118,6 +118,7 @@ export default {
                 .then(res => {
                     if (res.data.code === 0) {
                         this.toast('登录成功', 'success')
+                        this.$store.commit('tokenCheck')
                         this.$router.push('/')
                     } else {
                         this.toast('登录失败：' + res.data.msg)
@@ -147,7 +148,7 @@ export default {
     padding: 20px;
     border-radius: 9px;
     background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .cursor {
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 961ce3b..9a10bd7 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,170 +1,54 @@
 <template>
 
+  <!-- 左侧导航栏 -->
   <div id="container-wrap" style="height: calc(100vh - 64px)">
-    <div id="pctabs">
+    <div id="pctabs" v-if="$store.state.account.uin != 0">
       <h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
-      <div style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
+      <div
+        style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
         <div>
-          <div id="pctab-btn" @click="$router.push('/');">
-            <span style="font-weight: 1000">📝 投稿</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/world');">
-            <span>🌏 稿件</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/service');">
-            <span>🛠 服务</span>
-          </div>
-          <div id="pctab-btn" v-if="userGroup === 'admin' || userGroup === 'member'" @click="$router.push('/admin');">
-            <span>🔐 管理</span>
-          </div>
+          <RouterLink to="/">
+            <div class="pctab-btn">
+              <span>📝 投稿</span>
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/world">
+            <div class="pctab-btn">
+              <span>🌏 稿件</span>
+            </div>
+          </RouterLink>
+
+          <RouterLink to="/service">
+            <div class="pctab-btn">
+              <span>🛠 服务</span>
+            </div>
+          </RouterLink>
+          
+          <RouterLink v-if="$store.state.account.userGroup === 'admin' || $store.state.account.userGroup === 'member'"  to="/admin">
+            <div class="pctab-btn">
+              <span>🔐 管理</span>
+            </div>
+          </RouterLink>
         </div>
 
         <div style="display: flex;">
-          <img :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
+          <img :src="$store.state.account.avatarUrl" width="50" height="50" style="border-radius: 50%;">
           <div>
-            <p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ uin }}</p>
-            <p style="margin-left: 16px; font-size: 12px; color: #666;">{{userGroup}}</p>
+            <p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ $store.state.account.uin }}</p>
+            <p style="margin-left: 16px; font-size: 12px; color: #666;">{{ $store.state.account.userGroup }}</p>
           </div>
         </div>
       </div>
 
-
     </div>
 
     <!-- 纵向分割线 -->
-    <div id="vdivider" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
+    <div id="vdivider" v-if="$store.state.account.uin != 0" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
     </div>
 
     <div id="container">
-      <div>
-        <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
-        <span>{{ $store.state.metadata.brand }}</span>
-      </div>
-      <v-banner v-if="$store.state.metadata.banner !== ''"
-        style="background: #f8b94c; color: #fff; font-size: 14px; text-align: center;" color="warning" lines="one"
-        :text="$store.state.metadata.banner" :stacked="false">
-      </v-banner>
-
-      <v-alert style="margin: 16px;" v-if="isPending" density="compact" text="你当前有一条待审核的投稿，请等待审核后再来投稿。" title="稿件待审核"
-        type="warning"></v-alert>
-
-      <div style="display: flex; padding: 16px">
-        <v-dialog max-width="500">
-          <template v-slot:activator="{ props: activatorProps }">
-            <img v-bind="activatorProps" :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
-          </template>
-
-          <template v-slot:default="{ isActive }">
-            <v-card title="😉 提示">
-
-              <v-card-text>
-                真的要退出吗
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn text="取消" @click="isActive.value = false"></v-btn>
-                <v-btn text="是的" @click="isActive.value = false; logout()"></v-btn>
-              </v-card-actions>
-            </v-card>
-          </template>
-        </v-dialog>
-        <textarea :readonly="isPending" style="" name="textarea" v-model="post.text" placeholder="有什么新鲜事？！"
-          class="post"></textarea>
-      </div>
-
-      <div style="margin-left: 16px; display: flex; flex-wrap: wrap;">
-        <img v-for="(image, index) in post.images" :src="image" :key="index" width="70" height="70"
-          style="margin-right: 8px; margin-top:4px; border-radius: 10px;"
-          @click="selectedIndex = index; showDeleteImageDialog = true">
-        <svg style="margin-top: 8px" @click="selectImage" t="1712897639010" class="icon" viewBox="0 0 1024 1024"
-          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1448" width="70" height="70">
-          <path
-            d="M85.312 85.312v853.376h853.376V85.312H85.312zM0 0h1024v1024H0V0z m554.624 213.312v256h256v85.376h-256v256H469.312v-256h-256V469.376h256v-256h85.312z"
-            fill="#262626" p-id="1449"></path>
-        </svg>
-      </div>
-
-      <div style="margin-left: 8px;">
-        <!-- 标签 -->
-        <div style="display: flex; align-items: center">
-          <v-chip class="ma-2" color="pink" size="small" label>
-            <v-icon icon="mdi-label" start></v-icon>
-            标签
-          </v-chip>
-          <v-chip @click="selectTag(index)" :ripple="true" style="margin-right: 4px;" v-for="(tag, index) in tags"
-            :key="index" size="x-small" :variant="tag.selected ? 'primary' : 'outlined'"
-            :color="tag.selected ? 'primary' : 'pink'" label>
-            {{ tag.name }}
-          </v-chip>
-        </div>
-        <small class="taghint">🤔 添加标签可更快过审，不要选择不完全符合内容的标签。</small>
-
-        <div class="rect" style="background-color: #8BC34A;">
-          <p style="display: inline-block;">🫥 匿名投稿</p>
-          <input type="checkbox" v-model="post.anon" style="margin-left: 16px; display: inline-block;">
-        </div>
-
-        <v-dialog max-width="500">
-          <template v-slot:activator="{ props: activatorProps }">
-            <div v-bind="activatorProps" class="rect" style="background-color: #FF8A65; font-size: 16px;">
-              <p style="display: inline-block;">🪧 请务必遵守 <strong>投稿规则</strong></p>
-            </div>
-          </template>
-
-          <template v-slot:default="{ isActive }">
-            <v-card title="😉 投稿规则">
-
-              <v-card-text>
-                <p v-for="(rule, index) in $store.state.metadata.post_rules" :key="index">{{ index + 1 }}. {{ rule }}</p>
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-
-                <v-btn text="好的👌" @click="isActive.value = false"></v-btn>
-              </v-card-actions>
-            </v-card>
-          </template>
-        </v-dialog>
-
-        <div style="display: flex; align-items: center;">
-          <button v-if="!isPending && uin !== ''" @click="letsPost" class="postbtn"
-            style="margin: 8px; margin-top: 16px">
-            <span> 投稿
-            </span>
-          </button>
-          <v-progress-circular v-if="loading" :size="25" color="primary" indeterminate></v-progress-circular>
-        </div>
-
-        <div>
-          <span style="font-size: 12px; color: #c3c3c3; margin-left: 8px">{{ $store.state.metadata.beianhao }}</span>
-        </div>
-
-        <v-dialog v-model="showDeleteImageDialog" width="auto">
-          <v-card text="要删除吗？" title="提示">
-            <template v-slot:actions>
-              <v-btn class="ms-auto" text="不是" @click="showDeleteImageDialog = false"></v-btn>
-              <v-btn class="ms-auto" text="是的"
-                @click="showDeleteImageDialog = false; removeImage(selectedIndex)"></v-btn>
-            </template>
-          </v-card>
-        </v-dialog>
-
-        <v-dialog v-model="showPopupAN" width="auto">
-          <v-card :text="$store.state.metadata.popup_announcement" title="提示">
-            <template v-slot:actions>
-              <v-btn class="ms-auto" text="1 天内不再提醒" @click="showPopupAN = false;"></v-btn>
-            </template>
-          </v-card>
-        </v-dialog>
-
-      </div>
-      <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"
-        style="margin-bottom: 64px">
-        {{ snackbar.text }}
-      </v-snackbar>
-
+      <RouterView />
     </div>
   </div>
 
@@ -175,7 +59,6 @@
 
 <script>
 import BottomNavBar from '@/components/BottomNavBar.vue'
-import Cookies from "js-cookie";
 
 export default {
   components: {
@@ -183,234 +66,29 @@ export default {
   },
   data() {
     return {
-      showPopupAN: false,
-      snackbar: {
-        show: false,
-        text: '',
-        color: ''
-      },
       value: 0,
-      post: {
-        uuid: '',
-        text: '',
-        anon: false,
-        images: [],
-      },
-      tags: [
-        {
-          name: '寻物/招领',
-          selected: false
-        },
-        {
-          name: '教学升学内容相关问答',
-          selected: false
-        },
-        {
-          name: '食堂品质',
-          selected: false
-        }
-      ],
-      avatarUrl: '',
-      uin: '',
       loading: false,
-      showDeleteImageDialog: false,
-      selectedIndex: -1,
-      isPending: false,
-      userGroup: ''
     }
   },
 
   mounted() {
-    this.tokenLogin()
-    this.getPosts()
+    this.$store.commit('tokenCheck')
     this.$store.commit('initMetadata', 'banner')
     this.$store.commit('initMetadata', 'brand')
     this.$store.commit('initMetadata', 'popup_announcement')
     this.$store.commit('initMetadata', 'post_rules')
     this.$store.commit('initMetadata', 'beianhao')
     console.log(this.$store.state.metadata)
+    console.log(this.$store.state.account)
 
   },
 
   methods: {
-    getPosts() {
-      let filter = {
-        "status": "pending_approval",
-        "time_order": 1,
-        "page": 1,
-        "page_size": 1
-      }
-      this.$axios.post('/v1/post/get-self-posts', filter)
-        .then((response) => {
-          if (response.data.code === 0) {
-            let p = response.data.data.list
-            if (p !== null) {
-              this.isPending = true
-            }
-          } else {
-            this.toast(response.data.msg)
-          }
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-
-    removeImage(index) {
-      if (index === -1) {
-        return
-      }
-      this.post.images.splice(index, 1)
-    },
-    generateUUID4() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0,
-          v = c == 'x' ? r : (r & 0x3 | 0x8)
-        return v.toString(16)
-      })
-    },
-    letsPost() {
-      if (this.post.text === '') {
-        this.toast('内容不能为空')
-        return
-      }
-      // random generate uuid4
-      this.loading = true
-      this.post.uuid = this.generateUUID4()
-
-      // 将images中的baseurl去掉
-      this.post.images = this.post.images.map(image => {
-        return image.replace(this.$store.state.base_url + "/v1/post/download-image/", '')
-      })
-
-      this.$axios.post('/v1/post/post-new', this.post)
-        .then(res => {
-          if (res.data.code === 0) {
-            this.toast('🥰 投稿成功', 'success')
-            this.post.text = ''
-            this.post.images = []
-            this.tags.forEach(tag => {
-              tag.selected = false
-            })
-            this.loading = false
-            this.getPosts()
-          } else {
-            this.toast('投稿失败：' + res.data.msg)
-          }
-        })
-        .catch(err => {
-          this.toast('投稿失败：' + err.response.data.msg)
-          console.error(err)
-          this.loading = false
-        })
-
-    },
-    selectImage() {
-      // file select
-      const input = document.createElement('input')
-      input.type = 'file'
-      input.accept = 'image/*'
-      input.onchange = (e) => {
-        this.loading = true
-        const file = e.target.files[0]
-        this.$axios.post('/v1/post/upload-image', {
-          image: file,
-          suffix: file.type.split('/')[1]
-        },
-          {
-            headers: {
-              'Content-Type': 'multipart/form-data'
-            }
-          })
-          .then(res => {
-            if (res.data.code === 0) {
-              let url = this.$store.state.base_url + '/v1/post/download-image/' + res.data.data.key
-              console.log(url)
-              this.post.images.push(url)
-              this.loading = false
-            } else {
-              this.toast('上传失败：' + res.data.msg)
-              this.loading = false
-            }
-          })
-          .catch(err => {
-            this.toast('上传失败：' + err.response.data.msg)
-            console.error(err)
-            this.loading = false
-          })
-      }
-      input.click()
-    },
-    selectTag(index) {
-      this.toast("标签功能暂时关闭", "warning")
-      this.tags[index].selected = !this.tags[index].selected
-    },
-    tokenLogin() {
-      this.$axios.get('/v1/account/token-check')
-        .then(res => {
-          if (res.data.code === 0) {
-            this.uin = res.data.data.uin
-            this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
-            this.userGroup = res.data.data.user_group
-          } else {
-            this.toast('登录失败：' + res.data.msg)
-          }
-        })
-        .catch(err => {
-          if (err.response.data.code === -1) {
-            this.$router.push('/auth?hint=请先登录嗷')
-            return
-          }
-          this.toast('登录失败：' + err.response.data.msg)
-          console.error(err)
-        })
-    },
-    toast(text, color = 'error') {
-      this.snackbar.text = text
-      this.snackbar.color = color
-      this.snackbar.show = true
-    },
-    logout() {
-      Cookies.remove("access-token");
-      // reload
-      window.location.reload()
-    },
-
   }
 }
 </script>
 
 <style>
-.post {
-  width: 100%;
-  height: 160px;
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-  resize: none;
-}
-
-.post:focus {
-  outline: none;
-}
-
-.taghint {
-  font-size: 12px;
-  color: #666;
-  margin-left: 8px;
-}
-
-.rect {
-  padding: 4px;
-  font-size: 18px;
-  margin-left: 8px;
-  border-radius: 5px;
-  color: #fff;
-  margin-top: 8px;
-  width: fit-content;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 button {
   border: none;
   border-radius: 20px;
@@ -422,24 +100,6 @@ button {
   padding: 0;
 }
 
-.postbtn span {
-  display: inline-block;
-  padding: 10px 50px;
-  font-size: 17px;
-  border-radius: 10px;
-  background: #ffffff10;
-  backdrop-filter: blur(20px);
-  transition: 0.4s ease-in-out;
-  transition-property: color;
-  height: 100%;
-  width: 100%;
-  color: #fff
-}
-
-.postbtn span:hover {
-  backdrop-filter: blur(10px);
-  color: #ffffff;
-}
 
 /* 适配pc端 */
 @media (min-width: 600px) {
@@ -460,27 +120,35 @@ button {
 
   #container-wrap {
     width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   #container {
-    margin-left: 16px;
+    margin-left: 0px;
     height: 100%;
     width: 60%;
   }
 
-  #pctab-btn {
+  .pctab-btn {
     padding: 12px 28px;
     margin-top: 16px;
     text-align: center;
     font-size: 18px;
     border-radius: 24px;
     cursor: pointer;
+    text-decoration: none;
+    color: black;
+  }
+
+  a{
+    text-decoration: none;
+    color: black;
   }
 
-  #pctab-btn:hover {
+  .pctab-btn:hover {
     background-color: #f5f5f5;
   }
 
diff --git a/frontend/src/pages/post.vue b/frontend/src/pages/post.vue
new file mode 100644
index 0000000..a8d1c8d
--- /dev/null
+++ b/frontend/src/pages/post.vue
@@ -0,0 +1,445 @@
+<template>
+
+    <div>
+        <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
+        <span>{{ $store.state.metadata.brand }}</span>
+    </div>
+    <v-banner v-if="$store.state.metadata.banner !== ''"
+        style="background: #f8b94c; color: #fff; font-size: 14px; text-align: center;" color="warning" lines="one"
+        :text="$store.state.metadata.banner" :stacked="false">
+    </v-banner>
+
+    <v-alert style="margin: 16px;" v-if="isPending" density="compact" text="你当前有一条待审核的投稿，请等待审核后再来投稿。" title="稿件待审核"
+        type="warning"></v-alert>
+
+    <div style="display: flex; padding: 16px">
+        <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+                <img v-bind="activatorProps" :src="$store.state.account.avatarUrl" width="50" height="50" style="border-radius: 50%;">
+            </template>
+
+            <template v-slot:default="{ isActive }">
+                <v-card title="😉 提示">
+
+                    <v-card-text>
+                        真的要退出吗
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn text="取消" @click="isActive.value = false"></v-btn>
+                        <v-btn text="是的" @click="isActive.value = false; logout()"></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </template>
+        </v-dialog>
+        <textarea :readonly="isPending" style="" name="textarea" v-model="post.text" placeholder="有什么新鲜事？！"
+            class="post"></textarea>
+    </div>
+
+    <div style="margin-left: 16px; display: flex; flex-wrap: wrap;">
+        <img v-for="(image, index) in post.images" :src="image" :key="index" width="70" height="70"
+            style="margin-right: 8px; margin-top:4px; border-radius: 10px;"
+            @click="selectedIndex = index; showDeleteImageDialog = true">
+        <svg style="margin-top: 8px" @click="selectImage" t="1712897639010" class="icon" viewBox="0 0 1024 1024"
+            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1448" width="70" height="70">
+            <path
+                d="M85.312 85.312v853.376h853.376V85.312H85.312zM0 0h1024v1024H0V0z m554.624 213.312v256h256v85.376h-256v256H469.312v-256h-256V469.376h256v-256h85.312z"
+                fill="#262626" p-id="1449"></path>
+        </svg>
+    </div>
+
+    <div style="margin-left: 8px;">
+        <!-- 标签 -->
+        <div style="display: flex; align-items: center">
+            <v-chip class="ma-2" color="pink" size="small" label>
+                <v-icon icon="mdi-label" start></v-icon>
+                标签
+            </v-chip>
+            <v-chip @click="selectTag(index)" :ripple="true" style="margin-right: 4px;" v-for="(tag, index) in tags"
+                :key="index" size="x-small" :variant="tag.selected ? 'primary' : 'outlined'"
+                :color="tag.selected ? 'primary' : 'pink'" label>
+                {{ tag.name }}
+            </v-chip>
+        </div>
+        <small class="taghint">🤔 添加标签可更快过审，不要选择不完全符合内容的标签。</small>
+
+        <div class="rect" style="background-color: #8BC34A;">
+            <p style="display: inline-block;">🫥 匿名投稿</p>
+            <input type="checkbox" v-model="post.anon" style="margin-left: 16px; display: inline-block;">
+        </div>
+
+        <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+                <div v-bind="activatorProps" class="rect" style="background-color: #FF8A65; font-size: 16px;">
+                    <p style="display: inline-block;">🪧 请务必遵守 <strong>投稿规则</strong></p>
+                </div>
+            </template>
+
+            <template v-slot:default="{ isActive }">
+                <v-card title="😉 投稿规则">
+
+                    <v-card-text>
+                        <p v-for="(rule, index) in $store.state.metadata.post_rules" :key="index">{{ index + 1 }}. {{
+                            rule }}</p>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+
+                        <v-btn text="好的👌" @click="isActive.value = false"></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </template>
+        </v-dialog>
+
+        <div style="display: flex; align-items: center;">
+            <button v-if="!isPending && $store.state.account.uin !== 0" @click="letsPost" class="postbtn"
+                style="margin: 8px; margin-top: 16px">
+                <span> 投稿
+                </span>
+            </button>
+            <v-progress-circular v-if="loading" :size="25" color="primary" indeterminate></v-progress-circular>
+        </div>
+
+        <div>
+            <span style="font-size: 12px; color: #c3c3c3; margin-left: 8px">{{ $store.state.metadata.beianhao }}</span>
+        </div>
+
+        <v-dialog v-model="showDeleteImageDialog" width="auto">
+            <v-card text="要删除吗？" title="提示">
+                <template v-slot:actions>
+                    <v-btn class="ms-auto" text="不是" @click="showDeleteImageDialog = false"></v-btn>
+                    <v-btn class="ms-auto" text="是的"
+                        @click="showDeleteImageDialog = false; removeImage(selectedIndex)"></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+
+        <v-dialog v-model="showPopupAN" width="auto">
+            <v-card :text="$store.state.metadata.popup_announcement" title="提示">
+                <template v-slot:actions>
+                    <v-btn class="ms-auto" text="1 天内不再提醒" @click="showPopupAN = false;"></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+
+    </div>
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
+        {{ snackbar.text }}
+    </v-snackbar>
+
+
+    <BottomNavBar id="bnb" v-model="value" />
+
+
+</template>
+
+<script>
+import BottomNavBar from '@/components/BottomNavBar.vue'
+import Cookies from "js-cookie";
+
+export default {
+    components: {
+        BottomNavBar
+    },
+    data() {
+        return {
+            showPopupAN: false,
+            snackbar: {
+                show: false,
+                text: '',
+                color: ''
+            },
+            value: 0,
+            post: {
+                uuid: '',
+                text: '',
+                anon: false,
+                images: [],
+            },
+            tags: [
+                {
+                    name: '寻物/招领',
+                    selected: false
+                },
+                {
+                    name: '教学升学内容相关问答',
+                    selected: false
+                },
+                {
+                    name: '食堂品质',
+                    selected: false
+                }
+            ],
+            loading: false,
+            showDeleteImageDialog: false,
+            selectedIndex: -1,
+            isPending: false,
+        }
+    },
+
+    mounted() {
+        this.getPosts()
+        this.$store.commit('initMetadata', 'banner')
+        this.$store.commit('initMetadata', 'brand')
+        this.$store.commit('initMetadata', 'popup_announcement')
+        this.$store.commit('initMetadata', 'post_rules')
+        this.$store.commit('initMetadata', 'beianhao')
+        console.log(this.$store.state.metadata)
+
+    },
+
+    methods: {
+        getPosts() {
+            let filter = {
+                "status": "pending_approval",
+                "time_order": 1,
+                "page": 1,
+                "page_size": 1
+            }
+            this.$axios.post('/v1/post/get-self-posts', filter)
+                .then((response) => {
+                    if (response.data.code === 0) {
+                        let p = response.data.data.list
+                        if (p !== null) {
+                            this.isPending = true
+                        }
+                    } else {
+                        this.toast(response.data.msg)
+                    }
+                })
+                .catch((error) => {
+                    console.log(error)
+                })
+        },
+
+        removeImage(index) {
+            if (index === -1) {
+                return
+            }
+            this.post.images.splice(index, 1)
+        },
+        generateUUID4() {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0,
+                    v = c == 'x' ? r : (r & 0x3 | 0x8)
+                return v.toString(16)
+            })
+        },
+        letsPost() {
+            if (this.post.text === '') {
+                this.toast('内容不能为空')
+                return
+            }
+            // random generate uuid4
+            this.loading = true
+            this.post.uuid = this.generateUUID4()
+
+            // 将images中的baseurl去掉
+            this.post.images = this.post.images.map(image => {
+                return image.replace(this.$store.state.base_url + "/v1/post/download-image/", '')
+            })
+
+            this.$axios.post('/v1/post/post-new', this.post)
+                .then(res => {
+                    if (res.data.code === 0) {
+                        this.toast('🥰 投稿成功', 'success')
+                        this.post.text = ''
+                        this.post.images = []
+                        this.tags.forEach(tag => {
+                            tag.selected = false
+                        })
+                        this.loading = false
+                        this.getPosts()
+                    } else {
+                        this.toast('投稿失败：' + res.data.msg)
+                    }
+                })
+                .catch(err => {
+                    this.toast('投稿失败：' + err.response.data.msg)
+                    console.error(err)
+                    this.loading = false
+                })
+
+        },
+        selectImage() {
+            // file select
+            const input = document.createElement('input')
+            input.type = 'file'
+            input.accept = 'image/*'
+            input.onchange = (e) => {
+                this.loading = true
+                const file = e.target.files[0]
+                this.$axios.post('/v1/post/upload-image', {
+                    image: file,
+                    suffix: file.type.split('/')[1]
+                },
+                    {
+                        headers: {
+                            'Content-Type': 'multipart/form-data'
+                        }
+                    })
+                    .then(res => {
+                        if (res.data.code === 0) {
+                            let url = this.$store.state.base_url + '/v1/post/download-image/' + res.data.data.key
+                            console.log(url)
+                            this.post.images.push(url)
+                            this.loading = false
+                        } else {
+                            this.toast('上传失败：' + res.data.msg)
+                            this.loading = false
+                        }
+                    })
+                    .catch(err => {
+                        this.toast('上传失败：' + err.response.data.msg)
+                        console.error(err)
+                        this.loading = false
+                    })
+            }
+            input.click()
+        },
+        selectTag(index) {
+            this.toast("标签功能暂时关闭", "warning")
+            this.tags[index].selected = !this.tags[index].selected
+        },
+        toast(text, color = 'error') {
+            this.snackbar.text = text
+            this.snackbar.color = color
+            this.snackbar.show = true
+        },
+        logout() {
+            Cookies.remove("access-token");
+            // reload
+            window.location.reload()
+        },
+
+    }
+}
+</script>
+
+<style>
+.post {
+    width: 100%;
+    height: 160px;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    resize: none;
+}
+
+.post:focus {
+    outline: none;
+}
+
+.taghint {
+    font-size: 12px;
+    color: #666;
+    margin-left: 8px;
+}
+
+.rect {
+    padding: 4px;
+    font-size: 18px;
+    margin-left: 8px;
+    border-radius: 5px;
+    color: #fff;
+    margin-top: 8px;
+    width: fit-content;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+button {
+    border: none;
+    border-radius: 20px;
+    background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
+    transition: all 1.5s ease;
+    font-family: 'Ropa Sans', sans-serif;
+    font-weight: bold;
+    letter-spacing: 0.05rem;
+    padding: 0;
+}
+
+.postbtn span {
+    display: inline-block;
+    padding: 10px 50px;
+    font-size: 17px;
+    border-radius: 10px;
+    background: #ffffff10;
+    backdrop-filter: blur(20px);
+    transition: 0.4s ease-in-out;
+    transition-property: color;
+    height: 100%;
+    width: 100%;
+    color: #fff
+}
+
+.postbtn span:hover {
+    backdrop-filter: blur(10px);
+    color: #ffffff;
+}
+
+/* 适配pc端 */
+@media (min-width: 600px) {
+
+    #mt {
+        display: none;
+    }
+
+    #bnb {
+        display: none;
+    }
+
+    #pctabs {
+        height: 100%;
+        display: block;
+        min-width: 200px;
+    }
+
+    #container-wrap {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    #container {
+        margin-left: 16px;
+        height: 100%;
+        width: 60%;
+    }
+
+    #pctab-btn {
+        padding: 12px 28px;
+        margin-top: 16px;
+        text-align: center;
+        font-size: 18px;
+        border-radius: 24px;
+        cursor: pointer;
+    }
+
+    #pctab-btn:hover {
+        background-color: #f5f5f5;
+    }
+
+    #vdivider {
+        display: block;
+    }
+}
+
+/* 适配移动端 */
+@media (max-width: 600px) {
+    #tabs {
+        display: block;
+    }
+
+    #pctabs {
+        display: none;
+    }
+
+    #vdivider {
+        display: none;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/service.vue b/frontend/src/pages/service.vue
index a78bac7..7cebd02 100644
--- a/frontend/src/pages/service.vue
+++ b/frontend/src/pages/service.vue
@@ -2,135 +2,96 @@
 
   <BottomNavBar id="bnb" v-model="value" @input="go" />
 
-  <div id="container-wrap" style="height: calc(100vh - 64px)">
-    <div id="pctabs">
-      <h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
-      <div
-        style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
-        <div>
-          <div id="pctab-btn" @click="$router.push('/');">
-            <span>📝 投稿</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/world');">
-            <span>🌏 稿件</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/service');">
-            <span style="font-weight: 1000">🛠 服务</span>
-          </div>
-          <div id="pctab-btn" v-if="userGroup === 'admin' || userGroup === 'member'" @click="$router.push('/admin');">
-            <span>🔐 管理</span>
-          </div>
-        </div>
 
-        <div style="display: flex;">
-          <img :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
+  <div>
+    <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
+    <span>{{ $store.state.metadata.brand }}</span>
+  </div>
+  <div style="padding: 16px;">
+
+    <h1 style="margin-bottom: 16px">🎲 服务</h1>
+
+    <h2 style="margin-top: 16px">🙂 账号服务</h2>
+    <v-dialog max-width="500">
+      <template v-slot:activator="{ props: activatorProps }">
+        <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
           <div>
-            <p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ uin }}</p>
-            <p style="margin-left: 16px; font-size: 12px; color: #666;">{{ userGroup }}</p>
+            <p style="font-weight: bold; font-size: 16px">修改密码</p>
           </div>
+          <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
         </div>
-      </div>
+      </template>
 
-    </div>
+      <template v-slot:default="{ isActive }">
+        <v-card title="修改密码">
 
-    <!-- 纵向分割线 -->
-    <div id="vdivider" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
-    </div>
+          <v-card-text>
+            <v-text-field variant="outlined" v-model="password" label="新密码" type="password"></v-text-field>
+          </v-card-text>
 
-    <div id="container">
-      <div>
-        <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
-        <span>{{ $store.state.metadata.brand }}</span>
-      </div>
-      <div style="padding: 16px;">
-
-        <h1 style="margin-bottom: 16px">🎲 服务</h1>
-
-        <h2 style="margin-top: 16px">🙂 账号服务</h2>
-        <v-dialog max-width="500">
-          <template v-slot:activator="{ props: activatorProps }">
-            <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
-              <div>
-                <p style="font-weight: bold; font-size: 16px">修改密码</p>
-              </div>
-              <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
-            </div>
-          </template>
-
-          <template v-slot:default="{ isActive }">
-            <v-card title="修改密码">
-
-              <v-card-text>
-                <v-text-field variant="outlined" v-model="password" label="新密码" type="password"></v-text-field>
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn text="取消" @click="isActive.value = false"></v-btn>
-                <v-btn text="确认" @click="isActive.value = false; updatePassword()"></v-btn>
-              </v-card-actions>
-            </v-card>
-          </template>
-        </v-dialog>
-
-        <v-dialog max-width="500">
-          <template v-slot:activator="{ props: activatorProps }">
-            <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
-              <div>
-                <p style="font-weight: bold; font-size: 16px">退出登录</p>
-              </div>
-              <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
-            </div>
-          </template>
-
-          <template v-slot:default="{ isActive }">
-            <v-card title="提示">
-
-              <v-card-text>
-                真的要退出吗？
-              </v-card-text>
-
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn text="取消" @click="isActive.value = false"></v-btn>
-                <v-btn text="确认" @click="isActive.value = false; logout()"></v-btn>
-              </v-card-actions>
-            </v-card>
-          </template>
-        </v-dialog>
-
-        <h2 style="margin-top: 16px">🤩 推荐网站</h2>
-        <div class="rect1" v-for="(service, index) in services" :style="service.color">
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text="取消" @click="isActive.value = false"></v-btn>
+            <v-btn text="确认" @click="isActive.value = false; updatePassword()"></v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+
+    <v-dialog max-width="500">
+      <template v-slot:activator="{ props: activatorProps }">
+        <div class="rect1" style="background-color: #2196F3;" v-bind="activatorProps">
           <div>
-            <p style="font-weight: bold; font-size: 16px">{{ service.emoji }} {{ service.name }}</p>
-            <small style="color: #fff; font-size: 13px">{{ service.link }}</small>
+            <p style="font-weight: bold; font-size: 16px">退出登录</p>
           </div>
-          <a style="font-size: 16px; cursor:pointer; font-weight: bold;"
-            @click="selectedService = index; showServiceHint = true">点击查看</a>
+          <a style="font-size: 16px; cursor:pointer; font-weight: bold;">></a>
         </div>
+      </template>
 
-        <p style="text-align: center; margin-top: 16px; color: #c3c3c3">更多服务正在开发...</p>
-      </div>
-
+      <template v-slot:default="{ isActive }">
+        <v-card title="提示">
 
-      <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"
-        style="margin-bottom: 64px">
-        {{ snackbar.text }}
-      </v-snackbar>
+          <v-card-text>
+            真的要退出吗？
+          </v-card-text>
 
-      <v-dialog v-model="showServiceHint" width="auto">
-        <v-card :text="services[selectedService].toast" title="提示">
-          <template v-slot:actions>
-            <v-btn text="取消" @click="showServiceHint = false;"></v-btn>
-            <v-btn class="ms-auto" text="确定"
-              @click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
-          </template>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text="取消" @click="isActive.value = false"></v-btn>
+            <v-btn text="确认" @click="isActive.value = false; logout()"></v-btn>
+          </v-card-actions>
         </v-card>
-      </v-dialog>
+      </template>
+    </v-dialog>
 
+    <h2 style="margin-top: 16px">🤩 推荐网站</h2>
+    <div class="rect1" v-for="(service, index) in services" :style="service.color">
+      <div>
+        <p style="font-weight: bold; font-size: 16px">{{ service.emoji }} {{ service.name }}</p>
+        <small style="color: #fff; font-size: 13px">{{ service.link }}</small>
+      </div>
+      <a style="font-size: 16px; cursor:pointer; font-weight: bold;"
+        @click="selectedService = index; showServiceHint = true">点击查看</a>
     </div>
+
+    <p style="text-align: center; margin-top: 16px; color: #c3c3c3">更多服务正在开发...</p>
   </div>
 
+
+  <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
+    {{ snackbar.text }}
+  </v-snackbar>
+
+  <v-dialog v-model="showServiceHint" width="auto">
+    <v-card :text="services[selectedService].toast" title="提示">
+      <template v-slot:actions>
+        <v-btn text="取消" @click="showServiceHint = false;"></v-btn>
+        <v-btn class="ms-auto" text="确定" @click="showServiceHint = false; go(services[selectedService].link)"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+
+
 </template>
 
 <script>
@@ -153,14 +114,10 @@ export default {
       },
       value: 2,
       displayInnerWindow: '',
-      avatarUrl: '',
-      uin: '',
-      userGroup: ''
     }
   },
 
   mounted() {
-    this.tokenLogin()
     this.getMetadata_('services')
   },
 
@@ -169,27 +126,6 @@ export default {
       this.$cookies.remove('access-token')
       window.location.reload()
     },
-
-    tokenLogin() {
-      this.$axios.get('/v1/account/token-check')
-        .then(res => {
-          if (res.data.code === 0) {
-            this.uin = res.data.data.uin
-            this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
-            this.userGroup = res.data.data.user_group
-          } else {
-            this.toast('登录失败：' + res.data.msg)
-          }
-        })
-        .catch(err => {
-          if (err.response.data.code === -1) {
-            this.$router.push('/auth?hint=请先登录嗷')
-            return
-          }
-          this.toast('登录失败：' + err.response.data.msg)
-          console.error(err)
-        })
-    },
     randomColor() {
       let colors = ["#FFC107", "#42A5F5", "#9CCC65", "#F06292", "#76FF03", "#9E9E9E", "#8D6E63"]
       return colors[Math.floor(Math.random() * 100) % colors.length]
diff --git a/frontend/src/pages/world.vue b/frontend/src/pages/world.vue
index c56b1fa..a0efe67 100644
--- a/frontend/src/pages/world.vue
+++ b/frontend/src/pages/world.vue
@@ -2,96 +2,51 @@
 
   <BottomNavBar id="bnb" v-model="value" />
 
-  <div id="container-wrap" style="height: calc(100vh - 64px)">
-
-    <div id="pctabs">
-      <h2 style="text-align: center; background-color: #42A5F5; color: #fff; padding: 8px 0px">Campux</h2>
-      <div
-        style="display: flex; justify-content: space-between; flex-direction: column; align-items: center; height: 100%">
-        <div>
-          <div id="pctab-btn" @click="$router.push('/');">
-            <span>📝 投稿</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/world');">
-            <span style="font-weight: 1000">🌏 稿件</span>
-          </div>
-          <div id="pctab-btn" @click="$router.push('/service');">
-            <span>🛠 服务</span>
-          </div>
-          <div id="pctab-btn" v-if="userGroup === 'admin' || userGroup === 'member'" @click="$router.push('/admin');">
-            <span>🔐 管理</span>
-          </div>
-        </div>
-
-        <div style="display: flex;">
-          <img :src="avatarUrl" width="50" height="50" style="border-radius: 50%;">
-          <div>
-            <p style="margin-left: 16px; font-size: 16px; font-weight: bold;">{{ uin }}</p>
-            <p style="margin-left: 16px; font-size: 12px; color: #666;">{{ userGroup }}</p>
-          </div>
+  <div>
+    <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
+    <span>{{ $store.state.metadata.brand }}</span>
+  </div>
+  <v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
+    <v-tab value="1">📰 你的稿件</v-tab>
+    <v-tab value="2">🌏 动态</v-tab>
+    <v-tab v-if="$store.state.account.userGroup === 'admin' || $store.state.account.userGroup === 'member'" value="3">🤵 审核稿件</v-tab>
+  </v-tabs>
+
+  <v-divider id="hdivider"></v-divider>
+
+  <v-window v-model="tab" disabled>
+    <v-window-item value="1">
+      <div style="padding: 16px;">
+        <!-- <v-select v-model="filter.status" label="按条件筛选" :items="filterStatus" variant="solo"
+              @update:model-value="refreshPosts"></v-select> -->
+        <div style="overflow-y: scroll; max-height: calc(100vh - 140px); min-height: calc(100vh - 140px);">
+          <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px" @recall="recallPost" />
         </div>
       </div>
-
-
-    </div>
-
-    <!-- 纵向分割线 -->
-    <div id="vdivider" style="height: calc(100vh - 64px); width: 1px; background-color: #f5f5f5;">
-    </div>
-
-    <div id="container">
-      <div>
-        <h2 id="mt" style="padding: 8px 16px; font-family: Lilita One; display: inline-block">Campux</h2>
-        <span>{{ $store.state.metadata.brand }}</span>
+    </v-window-item>
+    <v-window-item value="2">
+      <div
+        style="display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 140px); margin-top: 32px;">
+        <p style="font-weight: bold">前面的区域，以后再来探索吧</p>
       </div>
-      <v-tabs id="tabs" v-model="tab" align-tabs="center" color="deep-purple-accent-4" show-arrows>
-        <v-tab value="1">📰 你的稿件</v-tab>
-        <v-tab value="2">🌏 动态</v-tab>
-        <v-tab v-if="userGroup === 'admin' || userGroup === 'member'" value="3">🤵 审核稿件</v-tab>
-      </v-tabs>
-
-      <v-divider id="hdivider"></v-divider>
-
-      <v-window v-model="tab" disabled>
-        <v-window-item value="1">
-          <div style="padding: 16px;">
-            <!-- <v-select v-model="filter.status" label="按条件筛选" :items="filterStatus" variant="solo"
+    </v-window-item>
+    <v-window-item value="3">
+      <div style="padding-inline: 16px;">
+        <v-pagination :length="judgePages" v-model="judgeCurrentPage"
+          @update:model-value="getJudgePosts"></v-pagination>
+        <!-- <v-select v-model="filterForJudge.status" label="按条件筛选" :items="filterStatus" variant="solo"
               @update:model-value="refreshPosts"></v-select> -->
-            <div style="overflow-y: scroll; max-height: calc(100vh - 140px); min-height: calc(100vh - 140px);">
-              <PostCard v-for="p in posts" :key="p.id" :post="p" typ="self" style="margin-top: 16px"
-                @recall="recallPost" />
-            </div>
-          </div>
-        </v-window-item>
-        <v-window-item value="2">
-          <div
-            style="display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 140px); margin-top: 32px;">
-            <p style="font-weight: bold">前面的区域，以后再来探索吧</p>
-          </div>
-        </v-window-item>
-        <v-window-item value="3">
-          <div style="padding-inline: 16px;">
-            <v-pagination :length="judgePages" v-model="judgeCurrentPage"
-            @update:model-value="getJudgePosts"
-            ></v-pagination>
-            <!-- <v-select v-model="filterForJudge.status" label="按条件筛选" :items="filterStatus" variant="solo"
-              @update:model-value="refreshPosts"></v-select> -->
-            <div style="overflow-y: scroll; max-height: calc(100vh - 180px); min-height: calc(100vh - 200px);">
-              <PostCard v-for="p in judgePosts" :key="p.id" :post="p" typ="judge" style="margin-top: 16px"
-              currentFilterStatus="{{ filterForJudge.status }}"
-                @updateJudgePost="updateJudgePost" />
-            </div>
-          </div>
-        </v-window-item>
-      </v-window>
+        <div style="overflow-y: scroll; max-height: calc(100vh - 180px); min-height: calc(100vh - 200px);">
+          <PostCard v-for="p in judgePosts" :key="p.id" :post="p" typ="judge" style="margin-top: 16px"
+            currentFilterStatus="{{ filterForJudge.status }}" @updateJudgePost="updateJudgePost" />
+        </div>
+      </div>
+    </v-window-item>
+  </v-window>
 
-      <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"
-        style="margin-bottom: 64px">
-        {{ snackbar.text }}
-      </v-snackbar>
-
-    </div>
-  </div>
+  <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout" style="margin-bottom: 64px">
+    {{ snackbar.text }}
+  </v-snackbar>
 
   <v-menu>
     <template v-slot:activator="{ props }">
@@ -145,9 +100,6 @@ export default {
       posts: [],
       filterStatus: ['全部', '待审核', '已通过', '已拒绝', '已取消', '队列中', '已发布', '失败', '待撤回', '已撤回'],
       tab: null,
-      uin: "",
-      avatarUrl: "",
-      userGroup: "user",
       judgePosts: [],
       judgePages: 1,
       judgeCurrentPage: 1,
@@ -167,7 +119,6 @@ export default {
   },
 
   mounted() {
-    this.tokenLogin()
   },
 
   methods: {
@@ -276,26 +227,6 @@ export default {
           console.log(error)
         })
     },
-    tokenLogin() {
-      this.$axios.get('/v1/account/token-check')
-        .then(res => {
-          if (res.data.code === 0) {
-            this.uin = res.data.data.uin
-            this.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
-            this.userGroup = res.data.data.user_group
-          } else {
-            this.toast('登录失败：' + res.data.msg)
-          }
-        })
-        .catch(err => {
-          if (err.response.data.code === -1) {
-            this.$router.push('/auth?hint=请先登录嗷')
-            return
-          }
-          this.toast('登录失败：' + err.response.data.msg)
-          console.error(err)
-        })
-    },
     getPosts() {
       console.log(this.filter)
       // 检查status
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index bdddd58..7b9ee2d 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -6,10 +6,26 @@
  */
 
 // Composables
-import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createWebHashHistory, createRouter } from 'vue-router'
+
+import auth from '@/pages/auth.vue'
+import post from '../pages/post.vue'
+import world from '../pages/world.vue'
+import service from '../pages/service.vue'
+import admin from '../pages/admin.vue'
+
+const routes = [
+  { path: '/', component: post },
+  { path: '/auth', component: auth},
+  { path: '/world', component: world },
+  { path: '/service', component: service },
+  { path: '/admin', component: admin },
+]
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(),
+  routes,
 })
 
+
 export default router
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index f8e86ea..b66359a 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -1,4 +1,5 @@
 import { createStore } from 'vuex'
+import router from '@/router'
 import axios from 'axios'
 
 export default createStore({
@@ -23,6 +24,11 @@ export default createStore({
             "pending_recall": "待撤回",
             "recalled": "已撤回"
         },
+        account: {
+            "uin": 0,
+            "avatarUrl": '',
+            "userGroup": 'user',
+        }
     },
     mutations: {
         initMetadata(state, key) {
@@ -51,6 +57,24 @@ export default createStore({
         },
         setBaseURL(state, url) {
             state.base_url = url
+        },
+        tokenCheck(state) {
+            axios.get(this.state.base_url + '/v1/account/token-check', { withCredentials: true })
+                .then(res => {
+                    console.log(res)
+                    if (res.data.code === 0) {
+                        this.state.account.uin = res.data.data.uin
+                        this.state.account.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
+                        this.state.account.userGroup = res.data.data.user_group
+                    }
+                })
+                .catch(err => {
+                    if (err.response.data.code === -1) {
+                        router.push('/auth?hint=请先登录嗷')
+                        return
+                    }
+                    console.error(err)
+                })
         }
     },
 })
\ No newline at end of file