feat: 关于Dialog

components.d.ts

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    NA: typeof import('naive-ui')['NA']
     NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']

src/AppContent.vue

@@ -2,12 +2,14 @@
 import { onMounted, ref } from 'vue'
 import { useStore } from './store.ts'
 import LogDialog from './dialogs/LogDialog.vue'
-import { PhClockCounterClockwise } from '@phosphor-icons/vue'
+import { PhClockCounterClockwise, PhInfo } from '@phosphor-icons/vue'
 import { commands } from './bindings.ts'
+import AboutDialog from './dialogs/AboutDialog.vue'
 
 const store = useStore()
 
 const logDialogShowing = ref<boolean>(false)
+const aboutDialogShowing = ref<boolean>(false)
 
 onMounted(async () => {
   // 屏蔽浏览器右键菜单
@@ -33,10 +35,22 @@ onMounted(async () => {
             </n-button>
           </template>
         </n-tooltip>
+
+        <n-tooltip placement="right" trigger="hover" :show-arrow="false">
+          关于
+          <template #trigger>
+            <n-button text class="py-1 px-2 mb-2" @click="aboutDialogShowing = true">
+              <n-icon size="28">
+                <PhInfo />
+              </n-icon>
+            </n-button>
+          </template>
+        </n-tooltip>
       </div>
     </div>
 
     <LogDialog v-model:showing="logDialogShowing" />
+    <AboutDialog v-model:showing="aboutDialogShowing" />
   </div>
 </template>
 

src/dialogs/AboutDialog.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { getVersion } from '@tauri-apps/api/app'
+import { ref, onMounted } from 'vue'
+import icon from '../../src-tauri/icons/128x128.png'
+
+const showing = defineModel<boolean>('showing', { required: true })
+const version = ref('')
+
+onMounted(async () => {
+  version.value = await getVersion()
+})
+</script>
+
+<template>
+  <n-modal v-model:show="showing">
+    <n-dialog :showIcon="false" @close="showing = false">
+      <div class="flex flex-col items-center gap-row-6">
+        <img :src="icon" alt="icon" class="w-32 h-32" />
+        <div class="text-center text-gray-400 text-xs">
+          <div>
+            如果本项目对你有帮助，欢迎来
+            <n-a href="https://github.com/lanyeeee/bilibili-video-downloader" target="_blank">GitHub</n-a>
+            点个Star⭐支持！
+          </div>
+          <div class="mt-1">你的支持是我持续更新维护的动力🙏</div>
+        </div>
+        <div class="flex flex-col w-full gap-row-3 px-6">
+          <div class="flex items-center justify-between py-2 px-4 bg-gray-100 rounded-lg">
+            <span class="text-gray-500">软件版本</span>
+            <div class="font-medium">v{{ version }}</div>
+          </div>
+          <div class="flex items-center justify-between py-2 px-4 bg-gray-100 rounded-lg">
+            <span class="text-gray-500">开源地址</span>
+            <n-a href="https://github.com/lanyeeee/bilibili-video-downloader" target="_blank">GitHub</n-a>
+          </div>
+          <div class="flex items-center justify-between py-2 px-4 bg-gray-100 rounded-lg">
+            <span class="text-gray-500">问题反馈</span>
+            <n-a href="https://github.com/lanyeeee/bilibili-video-downloader/issues" target="_blank">GitHub Issues</n-a>
+          </div>
+        </div>
+        <div class="flex flex-col text-xs items-center text-gray-400">
+          <div>
+            Copyright © 2025
+            <n-a href="https://github.com/lanyeeee" target="_blank">lanyeeee</n-a>
+          </div>
+          <div>
+            Released under
+            <n-a href="https://github.com/lanyeeee/bilibili-video-downloader/blob/main/LICENSE" target="_blank">
+              MIT License
+            </n-a>
+          </div>
+        </div>
+      </div>
+    </n-dialog>
+  </n-modal>
+</template>