主界面修改及代理模块初始化

src/components/layout/Sidebar.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { 
-  Settings, 
-  Globe, 
-  ClipboardList, 
-  Camera, 
-  Activity, 
-  Download, 
-  Search 
-} from '@lucide/vue'
+import { Settings } from '@lucide/vue'
 import { Button } from '@/components/ui/button'
-import { ButtonGroup } from '@/components/ui/button-group'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { getModuleIcon } from '@/modules/icons'
 
 const props = defineProps<{
   modules: Array<{ id: string; name: string; icon: string }>
@@ -22,54 +14,45 @@ const emit = defineEmits<{
   (e: 'change', moduleId: string): void
 }>()
 
-const iconMap: Record<string, typeof Settings> = {
-  settings: Settings,
-  proxy: Globe,
-  clipboard: ClipboardList,
-  screenshot: Camera,
-  monitor: Activity,
-  downloader: Download,
-  finder: Search
-}
-
-const getIcon = (iconName: string) => {
-  return iconMap[iconName] || Settings
-}
-
 const displayModules = computed(() => {
   return props.modules.filter(m => m.id !== 'settings')
 })
 </script>
 
 <template>
-  <aside 
-    class="w-16 flex flex-col items-center py-4 border-r border-border transition-all duration-300"
+  <aside
+    class="w-17 flex flex-col items-center py-4 border-r border-border transition-all duration-300"
     :style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
   >
-    <ButtonGroup orientation="vertical" class="flex flex-col gap-1">
-      <Tooltip v-for="module in displayModules" :key="module.id">
-        <TooltipTrigger as-child>
-          <Button
-            :variant="activeModule === module.id ? 'default' : 'ghost'"
-            size="icon"
-            class="h-10 w-10 rounded-lg transition-all duration-300"
-            :class="{
-              'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
-              'hover:bg-secondary/50': activeModule !== module.id
-            }"
-            @click="emit('change', module.id)"
-          >
-            <component :is="getIcon(module.icon)" class="h-5 w-5" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="right" class="w-fit">
-          <p>{{ module.name }}</p>
-        </TooltipContent>
-      </Tooltip>
-    </ButtonGroup>
-    
+    <div class="flex flex-col gap-1">
+      <TransitionGroup name="module-flip">
+        <div v-for="module in displayModules" :key="module.id">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Button
+                :variant="activeModule === module.id ? 'default' : 'ghost'"
+                size="icon"
+                class="h-10 w-10 rounded-lg transition-all duration-300"
+                :class="{
+                  'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
+                  'hover:bg-secondary/50': activeModule !== module.id
+                }"
+                :title="module.name"
+                @click="emit('change', module.id)"
+              >
+                <component :is="getModuleIcon(module.icon)" class="h-5 w-5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right" class="w-fit">
+              <p>{{ module.name }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </TransitionGroup>
+    </div>
+
     <div class="flex-1"></div>
-    
+
     <Tooltip>
       <TooltipTrigger as-child>
         <Button
@@ -80,6 +63,7 @@ const displayModules = computed(() => {
             'bg-primary text-primary-foreground shadow-md': activeModule === 'settings',
             'hover:bg-secondary/50': activeModule !== 'settings'
           }"
+          title="常规设置"
           @click="emit('change', 'settings')"
         >
           <Settings class="h-5 w-5" />
@@ -90,4 +74,10 @@ const displayModules = computed(() => {
       </TooltipContent>
     </Tooltip>
   </aside>
-</template>
+</template>
+
+<style scoped>
+.module-flip-move {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

src/components/layout/TitleBar.vue

@@ -49,18 +49,24 @@ const handleSettingSelect = (item: SearchItem) => {
   isSearchFocused.value = false
 }
 
-const tauriWindow = getCurrentWindow()
+let tauriWindow: ReturnType<typeof getCurrentWindow> | null = null
+try {
+  tauriWindow = getCurrentWindow()
+} catch {
+  // 非 Tauri 环境（如浏览器调试），窗口控制不可用
+  tauriWindow = null
+}
 
 const minimize = async () => {
-  await tauriWindow.minimize()
+  await tauriWindow?.minimize()
 }
 
 const maximize = async () => {
-  await tauriWindow.toggleMaximize()
+  await tauriWindow?.toggleMaximize()
 }
 
 const close = async () => {
-  await tauriWindow.hide()
+  await tauriWindow?.hide()
 }
 
 const handleBlur = () => {