feat: 添加关于对话框并优化主题切换按钮样式

- 新增 AboutModal 组件显示应用版本和相关信息
- 重构 ThemeToggle 组件为更简洁的图标按钮
- 在侧边栏添加关于按钮并实现打开对话框功能
- 通过预加载脚本获取 package.json 版本号
- 支持命令行参数 --version/-v 显示版本号

src/components/ThemeToggle.vue

@@ -1,24 +1,12 @@
 <template>
   <button
     type="button"
-    class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
-    :aria-pressed="themeMode === 'dark'"
+    class="inline-flex h-10 w-10 items-center justify-center rounded-2xl text-slate-500 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-400 dark:hover:bg-slate-800"
+    :title="title"
+    tabindex="-1"
     @click="toggle"
   >
-    <span class="flex items-center gap-2">
-      <i class="fas" :class="iconClass"></i>
-      <span>{{ label }}</span>
-    </span>
-    <span
-      class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700"
-    >
-      <span
-        :class="[
-          'inline-block h-4 w-4 rounded-full bg-white shadow transition',
-          togglePosition,
-        ]"
-      ></span>
-    </span>
+    <i class="fas" :class="iconClass"></i>
   </button>
 </template>
 
@@ -37,21 +25,15 @@ const toggle = () => {
   emit("toggle");
 };
 
-const label = computed(() => {
-  if (props.themeMode === "auto") return "跟随系统";
-  if (props.themeMode === "dark") return "深色主题";
-  return "浅色主题";
+const title = computed(() => {
+  if (props.themeMode === "auto") return "自动模式";
+  if (props.themeMode === "dark") return "深色模式";
+  return "浅色模式";
 });
 
 const iconClass = computed(() => {
-  if (props.themeMode === "auto") return "fa-adjust text-slate-500";
-  if (props.themeMode === "dark") return "fa-moon text-amber-200";
-  return "fa-sun text-amber-400";
-});
-
-const togglePosition = computed(() => {
-  if (props.themeMode === "auto") return "translate-x-4";
-  if (props.themeMode === "dark") return "translate-x-7";
-  return "translate-x-1";
+  if (props.themeMode === "auto") return "fa-adjust";
+  if (props.themeMode === "dark") return "fa-moon";
+  return "fa-sun";
 });
 </script>