show version

src/App.vue

@@ -4,6 +4,8 @@ import ConfigurationView from "./components/config/ConfigurationView.vue";
 import AppSidebar from "./components/sidebar/AppSidebar.vue";
 import { useBrowserManager } from "./composables/useBrowserManager";
 
+const appVersion = __APP_VERSION__;
+
 const {
   activeSection,
   associatedProfilesModal,
@@ -106,6 +108,7 @@ const {
       :loading="loading"
       :configs-loading="configsLoading"
       :browser-monogram="browserMonogram"
+      :app-version="appVersion"
       @select-browser="selectedBrowserId = $event; page = 'browserData'"
       @select-configuration="page = 'configuration'"
       @refresh="refreshAll"

src/components/sidebar/AppSidebar.vue

@@ -2,13 +2,14 @@
 import { browserIconSrc, configurationIconSrc } from "../../utils/icons";
 import type { AppPage, BrowserView } from "../../types/browser";
 
-defineProps<{
+const props = defineProps<{
   browsers: BrowserView[];
   currentBrowserId: string | null;
   page: AppPage;
   loading: boolean;
   configsLoading: boolean;
   browserMonogram: (browserId: string) => string;
+  appVersion: string;
 }>();
 
 const emit = defineEmits<{
@@ -78,6 +79,7 @@ const emit = defineEmits<{
       <div class="browser-nav-body">
         <strong>配置</strong>
       </div>
+      <span class="utility-version" :title="`版本 ${props.appVersion}`">v{{ props.appVersion }}</span>
     </button>
   </aside>
 </template>
@@ -255,6 +257,8 @@ const emit = defineEmits<{
 
 .sidebar-utility-nav {
   margin-top: auto;
+  position: relative;
+  padding-right: 70px;
 }
 
 .browser-nav-body {
@@ -268,6 +272,18 @@ const emit = defineEmits<{
   line-height: 1.25;
 }
 
+.utility-version {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(82, 98, 119, 0.7);
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  pointer-events: none;
+}
+
 .sidebar-empty {
   padding: 14px;
   border-radius: 14px;

src/vite-env.d.ts

@@ -5,3 +5,5 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare const __APP_VERSION__: string;

vite.config.ts

@@ -1,12 +1,17 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { readFileSync } from "node:fs";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
+const packageJson = JSON.parse(readFileSync(new URL("./package.json", import.meta.url), "utf-8"));
 
 // https://vite.dev/config/
 export default defineConfig(async () => ({
   plugins: [vue()],
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //