feat: add sidebar toggle functionality

Signed-off-by: Elysia <a.elysia@proton.me>

electron/main/index.ts

@@ -65,15 +65,15 @@ const indexHtml = path.join(RENDERER_DIST, "index.html");
 
 // Use app.getVersion() when the app is packaged.
 const getUserAgent = (): string => {
-  const version = app && app.isPackaged
+  const version =
-    ? app.getVersion()
+    app && app.isPackaged
-    : process.env.npm_package_version || "dev";
+      ? app.getVersion()
+      : process.env.npm_package_version || "dev";
   return `APM-Store/${version}`;
 };
 
 logger.info("User Agent: " + getUserAgent());
 
-
 async function createWindow() {
   win = new BrowserWindow({
     title: "APM AppStore",

src/App.vue

@@ -2,8 +2,18 @@
   <div
     class="flex min-h-screen flex-col bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100 lg:flex-row"
   >
+    <!-- 移动端侧边栏遮罩 -->
+    <div
+      v-if="isSidebarOpen"
+      class="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm lg:hidden"
+      @click="isSidebarOpen = false"
+    ></div>
+
     <aside
-      class="w-full border-b border-slate-200/70 bg-white/80 px-5 py-6 backdrop-blur dark:border-slate-800/70 dark:bg-slate-900/70 lg:sticky lg:top-0 lg:flex lg:h-screen lg:w-72 lg:flex-col lg:border-b-0 lg:border-r"
+      class="fixed inset-y-0 left-0 z-50 w-72 transform border-r border-slate-200/70 bg-white/95 px-5 py-6 backdrop-blur transition-transform duration-300 ease-in-out dark:border-slate-800/70 dark:bg-slate-900 lg:sticky lg:top-0 lg:flex lg:h-screen lg:translate-x-0 lg:flex-col lg:border-b-0"
+      :class="
+        isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+      "
     >
       <AppSidebar
         :categories="categories"
@@ -12,6 +22,7 @@
         :theme-mode="themeMode"
         @toggle-theme="toggleTheme"
         @select-category="selectCategory"
+        @close="isSidebarOpen = false"
       />
     </aside>
 
@@ -23,6 +34,7 @@
         @update-search="handleSearchInput"
         @update="handleUpdate"
         @list="handleList"
+        @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
       />
       <AppGrid
         :apps="filteredApps"
@@ -167,6 +179,7 @@ const categories: Ref<Record<string, string>> = ref({});
 const apps: Ref<App[]> = ref([]);
 const activeCategory = ref("all");
 const searchQuery = ref("");
+const isSidebarOpen = ref(false);
 const showModal = ref(false);
 const showPreview = ref(false);
 const currentScreenIndex = ref(0);
@@ -265,6 +278,7 @@ const toggleTheme = () => {
 const selectCategory = (category: string) => {
   activeCategory.value = category;
   searchQuery.value = "";
+  isSidebarOpen.value = false;
 };
 
 const openDetail = (app: App) => {

src/components/AppHeader.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex flex-col gap-4 lg:flex-row lg:items-center">
-      <TopActions @update="$emit('update')" @list="$emit('list')" />
+      <div class="flex items-center gap-3">
+        <button
+          type="button"
+          class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200/70 bg-white/80 text-slate-500 shadow-sm backdrop-blur transition hover:bg-slate-50 lg:hidden dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:bg-slate-800"
+          @click="$emit('toggle-sidebar')"
+          title="切换侧边栏"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+        <TopActions @update="$emit('update')" @list="$emit('list')" />
+      </div>
       <div class="w-full flex-1">
         <label for="searchBox" class="sr-only">搜索应用</label>
         <div class="relative">
@@ -38,6 +48,7 @@ const emit = defineEmits<{
   (e: "update-search", query: string): void;
   (e: "update"): void;
   (e: "list"): void;
+  (e: "toggle-sidebar"): void;
 }>();
 
 const localSearchQuery = ref(props.searchQuery || "");

src/components/AppSidebar.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="flex h-full flex-col gap-6">
-    <div class="flex items-center gap-3">
+    <div class="flex items-center justify-between gap-3">
-      <img
+      <div class="flex items-center gap-3">
-        :src="amberLogo"
+        <img
-        alt="Amber PM"
+          :src="amberLogo"
-        class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
+          alt="Amber PM"
-      />
+          class="h-11 w-11 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
-      <div class="flex flex-col">
+        />
-        <span
+        <div class="flex flex-col">
-          class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+          <span
-          >APM Store</span
+            class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
-        >
+            >APM Store</span
-        <span class="text-lg font-semibold text-slate-900 dark:text-white"
+          >
-          >APM 客户端商店</span
+          <span class="text-lg font-semibold text-slate-900 dark:text-white"
-        >
+            >APM 客户端商店</span
+          >
+        </div>
       </div>
+      <button
+        type="button"
+        class="inline-flex h-10 w-10 items-center justify-center rounded-2xl text-slate-400 hover:bg-slate-100 lg:hidden dark:hover:bg-slate-800"
+        @click="$emit('close')"
+        title="关闭侧边栏"
+      >
+        <i class="fas fa-times"></i>
+      </button>
     </div>
 
     <ThemeToggle :theme-mode="themeMode" @toggle="toggleTheme" />
@@ -78,6 +88,7 @@ defineProps<{
 const emit = defineEmits<{
   (e: "toggle-theme"): void;
   (e: "select-category", category: string): void;
+  (e: "close"): void;
 }>();
 
 const toggleTheme = () => {