perf: 面板文件更新检查和引导提示和AboutPage

Soulter · Jan 12, 2025 · bb05927 · bb05927
1 parent 038f56a
commit bb05927
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 10 deletions.
diff --git a/dashboard/src/assets/images/logo-normal.svg b/dashboard/src/assets/images/logo-normal.svg
diff --git a/dashboard/src/assets/images/logo-waifu.png b/dashboard/src/assets/images/logo-waifu.png
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -213,11 +213,5 @@ commonStore.getStartTime();
         </v-card-actions>
       </v-card>
     </v-dialog>
-
-
-    <v-btn class="text-primary mr-4" @click="open('https://github.com/Soulter/AstrBot')" color="lightprimary"
-      variant="flat" rounded="sm">
-      GitHub Star! 🌟
-    </v-btn>
   </v-app-bar>
 </template>
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -17,7 +17,7 @@ const sidebarMenu = shallowRef(sidebarItems);
       </template>
     </v-list>
     <div class="text-center">
-      <v-chip color="inputBorder" size="small"> v{{ version }} </v-chip>
+      <v-chip color="inputBorder" size="small"> {{ version }} </v-chip>
     </div>
 
     <div style="position: absolute; bottom: 32px; width: 100%" class="text-center">
@@ -28,7 +28,14 @@ const sidebarMenu = shallowRef(sidebarItems);
       </v-list-item>
       <small style="display: block;" v-if="buildVer">构建: {{ buildVer }}</small>
       <small style="display: block;" v-else="buildVer">构建: embedded</small>
-      <small style="display: block; margin-top: 8px;">© 2024 AstrBot</small>
+      <v-tooltip text="使用 /dashbord_update 指令更新管理面板">
+        <template v-slot:activator="{ props }">
+          <small v-bind="props" v-if="buildVer != version" style="display: block; margin-top: 4px;">面板有更新</small>
+        </template>
+      </v-tooltip>
+
+
+      <small style="display: block; margin-top: 8px;">© 2025 AstrBot</small>
     </div>
 
   </v-navigation-drawer>
@@ -54,14 +61,14 @@ export default {
         // 不是版本，不显示 😎
         return
       }
-      this.buildVer = res
+      this.buildVer = res.replace(/\s+/g, '')
     })
   },
   methods: {
     get_version() {
       axios.get('/api/stat/version')
         .then((res) => {
-          this.version = res.data.data.version;
+          this.version = "v" + res.data.data.version;
         })
         .catch((err) => {
           console.log(err);

diff --git a/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts b/dashboard/src/layouts/full/vertical-sidebar/sidebarItem.ts
@@ -40,6 +40,11 @@ const sidebarItem: menu[] = [
     icon: 'mdi-console',
     to: '/console'
   },
+  {
+    title: '关于',
+    icon: 'mdi-information',
+    to: '/about'
+  },
   // {
   //   title: 'Project ATRI',
   //   icon: 'mdi-grain',

diff --git a/dashboard/src/router/MainRoutes.ts b/dashboard/src/router/MainRoutes.ts
@@ -41,6 +41,11 @@ const MainRoutes = {
       name: 'Chat',
       path: '/chat',
       component: () => import('@/views/ChatPage.vue')
+    },
+    {
+      name: 'About',
+      path: '/about',
+      component: () => import('@/views/AboutPage.vue')
     }
   ]
 };

diff --git a/dashboard/src/views/AboutPage.vue b/dashboard/src/views/AboutPage.vue
@@ -0,0 +1,61 @@
+<template>
+    <v-card style="height: 100%;">
+        <v-card-text style="padding: 0; height: 100%;">
+            <div
+                style="display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;">
+                <div @click="selectedLogo = selectedLogo == 0 ? 1 : 0" style="height: 300px;">
+                    <img v-if="selectedLogo == 0" width="300" src="@/assets/images/logo-waifu.png" alt="AstrBot Logo" class="fade-in">
+                    <img v-if="selectedLogo == 1" width="300" src="@/assets/images/logo-normal.svg" alt="AstrBot Logo" class="fade-in">
+                </div>
+
+                <h1 class="mt-8">AstrBot</h1>
+
+                <span style="color: #777;" class="mt-4">By <a href="https://soulter.top">Soulter</a> And <a href="https://github.com/Soulter/AstrBot/graphs/contributors">AstrBot Contributors</a></span>
+
+                <v-btn class="text-primary mt-16" @click="open('https://github.com/Soulter/AstrBot')"
+                    color="lightprimary" variant="flat" rounded="sm">
+                    Star 这个项目! 🌟
+                </v-btn>
+
+                <v-btn class="text-primary mt-4" @click="open('https://github.com/Soulter/AstrBot/issues')"
+                    color="lightprimary" variant="flat" rounded="sm">
+                    有使用问题或者功能建议？提交 Issue！
+                </v-btn>
+            </div>
+
+        </v-card-text>
+    </v-card>
+</template>
+<script>
+export default {
+    name: 'AboutPage',
+    data() {
+        return {
+            selectedLogo: 0
+        }
+    },
+
+    methods: {
+        open(url) {
+            window.open(url, '_blank');
+        }
+    }
+}
+
+</script>
+
+<style>
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.2s ease-in-out;
+}
+</style>