perf: 首页展示版本信息

web/src/App.vue

@@ -5,7 +5,13 @@
       <v-navigation-drawer id="navigation-drawer" :width="160" app permanent rail>
         <v-list-item id="logo-list-item">
           <template v-slot:prepend>
-            <v-img src="@/assets/langbot-logo-block.png" height="32" width="32"></v-img>
+            <div id="logo-container">
+              <v-img id="logo-img" src="@/assets/langbot-logo-block.png" height="32" width="32"></v-img>
+
+              <div id="version-chip" v-tooltip="proxy.$store.state.version + (proxy.$store.state.debug ? ' (调试模式已启用)' : '')" :style="{ 'background-color': proxy.$store.state.debug ? '#c79a47' : '#1e9ae2' }">
+                {{ proxy.$store.state.version }}
+              </div>
+            </div>
           </template>
         </v-list-item>
         <v-divider></v-divider>
@@ -23,7 +29,7 @@
         <template v-slot:append>
           <div>
             <v-list density="compact" nav>
-              <v-list-item id="about-list-item" title="关于" prepend-icon="mdi-cog-outline" v-tooltip="关于">
+              <v-list-item id="about-list-item" title="系统信息" prepend-icon="mdi-cog-outline" v-tooltip="系统信息">
               </v-list-item>
             </v-list>
           </div>
@@ -38,6 +44,9 @@
 </template>
 
 <script setup>
+import { getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
 </script>
 
 <style scoped>
@@ -46,9 +55,39 @@
   flex-direction: column;
 }
 
-#logo-list-item {
+#logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   margin-left: -0.2rem;
-  margin-block: 0.5rem;
+}
+
+#logo-img {
+  /* margin-left: -0.2rem; */
+}
+
+#logo-list-item {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+#version-chip {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: 2.4rem;
+  margin-right: 0.3rem;
+  font-size: 0.55rem;
+  font-weight: 500;
+  padding-inline: 0.4rem;
+  text-align: center;
+  background-color: #c79a47;
+  color: white;
+  border-radius: 0.5rem;
+  border: 1px solid #fff;
+  box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.5);
+  user-select: none;
 }
 
 #about-list-item {

web/src/pages/Logs.vue

@@ -32,7 +32,7 @@ let logPointer = {
 }
 
 const refreshLog = () => {
-    proxy.$axios.get(`${proxy.$store.state.apiBaseUrl}/logs`, {
+    proxy.$axios.get(`/logs`, {
         params: {
             start_page_number: logPointer.start_page_number,
             start_offset: logPointer.start_offset
@@ -79,7 +79,7 @@ onUnmounted(() => {
 #log-card {
     margin: 1rem;
     margin-top: 1rem;
-    height: calc(100vh - 10rem);
+    height: calc(100vh - 9.5rem);
     border-radius: 1rem;
 }
 

web/src/plugins/index.js

@@ -17,4 +17,5 @@ export function registerPlugins (app) {
     .use(store)
 
   app.config.globalProperties.$axios = axios
+  store.commit('initializeFetch')
 }

web/src/store/index.js

@@ -6,8 +6,18 @@ export default createStore({
   state: {
     apiBaseUrl: 'http://localhost:5300/api/v1',
     autoRefreshLog: false,
-    version: '0.0.1'
+    version: 'v0.0.0',
+    debug: false
+  },
+  mutations: {
+    initializeFetch() {
+      axios.defaults.baseURL = this.state.apiBaseUrl
+
+      axios.get('/system/info').then(response => {
+        this.state.version = response.data.data.version
+        this.state.debug = response.data.data.debug
+      })
+    }
   },
-  mutations: {},
   actions: {},
 })