From c877f0551e4de16bd15b4b0d9dd98fe1af730f33 Mon Sep 17 00:00:00 2001
From: shenmo <jifengshenmo@outlook.com>
Date: Mon, 18 May 2026 13:25:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E8=89=B2=E4=B8=8E?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增SidebarEntry类型定义与侧边栏配置加载逻辑，支持从服务器拉取sidebar-config.json动态配置侧边栏入口
替换原分类侧边栏为可配置样式，新增CategoryBar分类选择组件，更新品牌色为苹果风格蓝色
重构侧边栏状态管理，拆分activeTab与选中分类逻辑，新增侧边栏入口计数统计
添加SIDEBAR_CONFIG.md文档说明配置格式与使用方法，更新测试用例与组件props
---
 SIDEBAR_CONFIG.md                     |  84 ++++++++++++++++
 package-lock.json                     |   4 +-
 src/App.vue                           | 130 ++++++++++++++++++++----
 src/__tests__/unit/AppSidebar.test.ts |   5 +-
 src/assets/css/appstyle.css           |   7 +-
 src/components/AppCard.vue            |   3 -
 src/components/AppHeader.vue          |   9 +-
 src/components/AppSidebar.vue         | 140 +++++++++++++++++---------
 src/components/CategoryBar.vue        | 128 +++++++++++++++++++++++
 src/components/HomeView.vue           |   3 -
 src/global/typedefinition.ts          |   8 ++
 11 files changed, 437 insertions(+), 84 deletions(-)
 create mode 100644 SIDEBAR_CONFIG.md
 create mode 100644 src/components/CategoryBar.vue

diff --git a/SIDEBAR_CONFIG.md b/SIDEBAR_CONFIG.md
new file mode 100644
index 00000000..330936a5
--- /dev/null
+++ b/SIDEBAR_CONFIG.md
@@ -0,0 +1,84 @@
+# 侧边栏入口配置 (Sidebar Config)
+
+星火应用商店支持通过服务器上的 JSON 文件动态配置左侧侧边栏的入口项。
+
+## 配置文件位置
+
+将 `sidebar-config.json` 放置在服务器应用仓库的架构目录下：
+
+```
+# Spark 仓库
+{baseUrl}/{arch}-store/sidebar-config.json
+
+# APM 仓库  
+{baseUrl}/{arch}-apm/sidebar-config.json
+```
+
+例如：
+- `https://example.com/amd64-store/sidebar-config.json`
+- `https://example.com/arm64-store/sidebar-config.json`
+
+## JSON 格式
+
+每个入口项为一个对象，包含以下字段：
+
+| 字段 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `id` | string | ✅ | 唯一标识符，对应分类名或自定义 ID |
+| `name` | string | ✅ | 侧边栏显示的入口名称 |
+| `icon` | string | ❌ | FontAwesome 图标类名，如 `fas fa-gamepad` |
+| `type` | string | ❌ | 入口类型：`category`（分类筛选）、`search`（搜索关键词）、`link`（外部链接）。默认为 `category` |
+| `value` | string | ❌ | 与 `type` 配合使用的值。`category` 类型为分类名，`search` 类型为搜索关键词。默认为 `id` 的值 |
+
+## 示例配置
+
+```json
+[
+  {
+    "id": "games",
+    "name": "游戏专区",
+    "icon": "fas fa-gamepad",
+    "type": "category",
+    "value": "games"
+  },
+  {
+    "id": "devtools",
+    "name": "开发工具",
+    "icon": "fas fa-code",
+    "type": "category",
+    "value": "development"
+  },
+  {
+    "id": "office",
+    "name": "办公学习",
+    "icon": "fas fa-book",
+    "type": "category",
+    "value": "office"
+  },
+  {
+    "id": "ai-search",
+    "name": "AI 应用",
+    "icon": "fas fa-robot",
+    "type": "search",
+    "value": "AI"
+  }
+]
+```
+
+## 入口类型说明
+
+### `category` 类型
+点击后在"全部应用"页面按指定分类筛选应用。`value` 字段对应 `categories.json` 中的分类键名。
+
+### `search` 类型
+点击后自动使用 `value` 字段的值进行搜索。适用于快速入口，如"AI 应用"、"微信"等热门关键词。
+
+### `link` 类型（预留）
+用于跳转到外部链接或内部页面。后续版本支持。
+
+## 注意事项
+
+- 如果两个仓库（Spark 和 APM）都存在 `sidebar-config.json`，相同的 `id` 会自动去重合并
+- 配置文件不存在时，侧边栏不会显示额外的入口项，不影响正常使用
+- 入口项显示在"首页推荐"和"全部应用"之间，以分隔线区分
+- 每个入口项会显示对应分类或搜索下的应用数量
diff --git a/package-lock.json b/package-lock.json
index 34c49d90..7a65de30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "spark-store",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "spark-store",
-      "version": "5.0.0",
+      "version": "5.1.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
diff --git a/src/App.vue b/src/App.vue
index 14286c2a..1440c1cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,21 +10,22 @@
     ></div>
 
     <aside
-      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="fixed inset-y-0 left-0 z-50 w-64 shrink-0 transform border-r border-slate-200/70 bg-white/95 px-4 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"
-        :active-category="activeCategory"
+        :active-tab="activeTab"
         :category-counts="categoryCounts"
         :theme-mode="themeMode"
         :spark-available="sparkAvailable"
         :apm-available="apmAvailable"
         :store-filter="storeFilter"
+        :sidebar-entries="sidebarEntries"
+        :entry-counts="entryCounts"
         @toggle-theme="toggleTheme"
-        @select-category="selectCategory"
+        @select-tab="selectTab"
         @close="isSidebarOpen = false"
         @list="handleList"
         @update="handleUpdate"
@@ -37,7 +38,7 @@
       >
         <AppHeader
           :search-query="searchQuery"
-          :active-category="activeCategory"
+          :active-tab="activeTab"
           :apps-count="filteredApps.length"
           @update-search="handleSearchInput"
           @search-focus="handleSearchFocus"
@@ -46,8 +47,15 @@
           @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
         />
       </div>
+      <CategoryBar
+        v-if="activeTab !== 'home' && Object.keys(categories).length > 0"
+        :categories="categories"
+        :selected-category="selectedCategory"
+        :category-counts="categoryCounts"
+        @select-category="selectSubCategory"
+      />
       <div class="px-4 py-6 lg:px-10">
-        <template v-if="activeCategory === 'home'">
+        <template v-if="activeTab === 'home'">
           <HomeView
             :links="homeLinks"
             :lists="homeLists"
@@ -61,7 +69,7 @@
           <AppGrid
             :apps="filteredApps"
             :loading="loading"
-            :scroll-key="activeCategory"
+            :scroll-key="activeTab + '-' + selectedCategory"
             :store-filter="storeFilter"
             @open-detail="openDetail"
           />
@@ -172,6 +180,7 @@ import AppSidebar from "./components/AppSidebar.vue";
 import AppHeader from "./components/AppHeader.vue";
 import AppGrid from "./components/AppGrid.vue";
 import HomeView from "./components/HomeView.vue";
+import CategoryBar from "./components/CategoryBar.vue";
 import AppDetailModal from "./components/AppDetailModal.vue";
 import ScreenPreview from "./components/ScreenPreview.vue";
 import DownloadQueue from "./components/DownloadQueue.vue";
@@ -217,6 +226,7 @@ import type {
   CategoryInfo,
   HomeLink,
   HomeList,
+  SidebarEntry,
   UpdateCenterItem,
 } from "./global/typedefinition";
 import type { Ref } from "vue";
@@ -258,7 +268,8 @@ const isDarkTheme = computed(() => {
 
 const categories: Ref<Record<string, CategoryInfo>> = ref({});
 const apps: Ref<App[]> = ref([]);
-const activeCategory = ref("home");
+const activeTab = ref("home");
+const selectedCategory = ref("all");
 const searchQuery = ref("");
 const isSidebarOpen = ref(false);
 const showModal = ref(false);
@@ -280,6 +291,7 @@ const showAboutModal = ref(false);
 const showSettingsModal = ref(false);
 const sparkAvailable = ref(false);
 const apmAvailable = ref(false);
+const sidebarEntries: Ref<SidebarEntry[]> = ref([]);
 
 /** 启动参数 --no-apm => 仅 Spark；--no-spark => 仅 APM；由主进程 IPC 提供 */
 const storeFilter = ref<"spark" | "apm" | "both">("both");
@@ -322,9 +334,9 @@ const baseApps = computed(() => {
 const filteredApps = computed(() => {
   let result = [...baseApps.value];
 
-  // 按分类筛选
-  if (activeCategory.value !== "all") {
-    result = result.filter((app) => app.category === activeCategory.value);
+  const effectiveCategory = getEffectiveCategory();
+  if (effectiveCategory && effectiveCategory !== "all") {
+    result = result.filter((app) => app.category === effectiveCategory);
   }
 
   if (searchQuery.value.trim()) {
@@ -339,7 +351,6 @@ const categoryCounts = computed(() => {
     return countSearchMatchesByCategory(baseApps.value, searchQuery.value);
   }
 
-  // 无搜索时显示总数量
   const counts: Record<string, number> = { all: apps.value.length };
   apps.value.forEach((app) => {
     if (!counts[app.category]) counts[app.category] = 0;
@@ -348,6 +359,23 @@ const categoryCounts = computed(() => {
   return counts;
 });
 
+const entryCounts = computed(() => {
+  const counts: Record<string, number> = {};
+  const allApps = baseApps.value;
+
+  sidebarEntries.value.forEach((entry) => {
+    if (entry.type === "category" && entry.value) {
+      counts[entry.id] = allApps.filter(
+        (app) => app.category === entry.value,
+      ).length;
+    } else {
+      counts[entry.id] = 0;
+    }
+  });
+
+  return counts;
+});
+
 // 方法
 const syncThemePreference = () => {
   document.documentElement.classList.toggle("dark", isDarkTheme.value);
@@ -384,12 +412,13 @@ const toggleTheme = () => {
   else themeMode.value = "auto";
 };
 
-const selectCategory = (category: string) => {
-  activeCategory.value = category;
+const selectTab = (tab: string) => {
+  activeTab.value = tab;
+  selectedCategory.value = "all";
   isSidebarOpen.value = false;
   window.scrollTo({ top: 0, behavior: "smooth" });
   if (
-    category === "home" &&
+    tab === "home" &&
     homeLinks.value.length === 0 &&
     homeLists.value.length === 0
   ) {
@@ -397,6 +426,27 @@ const selectCategory = (category: string) => {
   }
 };
 
+const selectSubCategory = (category: string) => {
+  selectedCategory.value = category;
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+const getEffectiveCategory = (): string => {
+  if (activeTab.value === "home") return "";
+  if (activeTab.value === "all") return selectedCategory.value;
+
+  const entry = sidebarEntries.value.find((e) => e.id === activeTab.value);
+  if (entry) {
+    if (entry.type === "category" && entry.value) return entry.value;
+    if (entry.type === "search") {
+      searchQuery.value = entry.value || "";
+      return selectedCategory.value;
+    }
+  }
+
+  return selectedCategory.value;
+};
+
 // 从仓库获取应用详细信息的辅助函数
 const fetchAppFromStore = async (
   pkgname: string,
@@ -1130,6 +1180,50 @@ const loadCategories = async () => {
   }
 };
 
+const loadSidebarConfig = async () => {
+  try {
+    const arch = window.apm_store.arch || "amd64";
+    const modes: Array<"spark" | "apm"> =
+      storeFilter.value === "both" ? ["spark", "apm"] : [storeFilter.value];
+
+    const entryMap = new Map<string, SidebarEntry>();
+
+    for (const mode of modes) {
+      const finalArch = mode === "spark" ? `${arch}-store` : `${arch}-apm`;
+      const path = `/${finalArch}/sidebar-config.json`;
+
+      try {
+        const response = await axiosInstance.get(path);
+        const data = response.data;
+        const entries = Array.isArray(data) ? data : (data.entries || []);
+
+        for (const entry of entries) {
+          if (entry.id && entry.name) {
+            if (!entryMap.has(entry.id)) {
+              entryMap.set(entry.id, {
+                id: entry.id,
+                name: entry.name,
+                icon: entry.icon || "",
+                type: entry.type || "category",
+                value: entry.value || entry.id,
+              });
+            }
+          }
+        }
+      } catch (e) {
+        logger.warn(`读取 ${mode} sidebar-config.json 失败: ${e}`);
+      }
+    }
+
+    sidebarEntries.value = Array.from(entryMap.values());
+    if (sidebarEntries.value.length > 0) {
+      logger.info(`已加载 ${sidebarEntries.value.length} 个侧边栏配置入口`);
+    }
+  } catch (error) {
+    logger.warn(`读取 sidebar-config 失败: ${error}`);
+  }
+};
+
 const loadApps = async (onFirstBatch?: () => void) => {
   try {
     logger.info("开始加载应用数据（全并发带重试）...");
@@ -1214,7 +1308,7 @@ const handleSearchInput = (value: string) => {
 };
 
 const handleSearchFocus = () => {
-  if (activeCategory.value === "home") activeCategory.value = "all";
+  if (activeTab.value === "home") activeTab.value = "all";
 };
 
 // 生命周期钩子
@@ -1242,6 +1336,8 @@ onMounted(async () => {
 
   await loadCategories();
 
+  await loadSidebarConfig();
+
   // 分类目录加载后，并行加载主页数据和所有应用列表
   // 使用非阻塞方式加载，让UI先展示出来
   loading.value = true;
@@ -1335,7 +1431,7 @@ onMounted(async () => {
       // 根据包名直接打开应用详情
       const tryOpen = () => {
         // 先切换到"全部应用"分类
-        activeCategory.value = "all";
+        activeTab.value = "all";
         // 使用类似 HomeView 的方式打开应用，从两个仓库获取完整信息
         const target = apps.value.find((a) => a.pkgname === data.pkgname);
         if (target) {
diff --git a/src/__tests__/unit/AppSidebar.test.ts b/src/__tests__/unit/AppSidebar.test.ts
index a67cc7af..f861add1 100644
--- a/src/__tests__/unit/AppSidebar.test.ts
+++ b/src/__tests__/unit/AppSidebar.test.ts
@@ -8,13 +8,14 @@ const renderSidebar = (
 ) => {
   return render(AppSidebar, {
     props: {
-      categories: {},
-      activeCategory: "all",
+      activeTab: "all",
       categoryCounts: { all: 0 },
       themeMode: "auto",
       storeFilter: "both",
       sparkAvailable: true,
       apmAvailable: true,
+      sidebarEntries: [],
+      entryCounts: {},
       ...overrides,
     },
   });
diff --git a/src/assets/css/appstyle.css b/src/assets/css/appstyle.css
index 59e4e570..79eb1b31 100644
--- a/src/assets/css/appstyle.css
+++ b/src/assets/css/appstyle.css
@@ -3,9 +3,9 @@
 @theme {
   --font-sans: "Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif";
 
-  --color-brand: #2563eb;
-  --color-brand-dark: #1d4ed8;
-  --color-brand-soft: #60a5fa;
+  --color-brand: #0071e3;
+  --color-brand-dark: #0066cc;
+  --color-brand-soft: #409cff;
 
   --color-surface-light: #f5f7fb;
   --color-surface-dark: #0b1220;
@@ -76,4 +76,3 @@
     border-radius: 0;
   }
 }
-
diff --git a/src/components/AppCard.vue b/src/components/AppCard.vue
index 347127fd..e266ea8d 100644
--- a/src/components/AppCard.vue
+++ b/src/components/AppCard.vue
@@ -21,16 +21,13 @@
         >
           {{ app.name || "" }}
         </div>
-        <!-- 来源标识 -->
         <div class="flex shrink-0 gap-1">
-          <!-- 合并标识：两个来源都有时显示 -->
           <span
             v-if="showMergedBadge"
             class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
           >
             SPARK/APM
           </span>
-          <!-- 单独标识 -->
           <template v-else>
             <span
               v-if="showSparkBadge"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d5dcad1d..753b1238 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -51,13 +51,6 @@
         </button>
       </div>
     </div>
-    <div
-      v-if="activeCategory !== 'home'"
-      class="text-sm text-slate-500 dark:text-slate-400"
-      id="currentCount"
-    >
-      <!-- 共 {{ appsCount }} 个应用 -->
-    </div>
   </div>
 </template>
 
@@ -66,7 +59,7 @@ import { ref, watch } from "vue";
 
 const props = defineProps<{
   searchQuery: string;
-  activeCategory: string;
+  activeTab: string;
   appsCount: number;
 }>();
 const emit = defineEmits<{
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 124a373b..2ec3369d 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -30,59 +30,53 @@
       </div>
     </div>
 
-    <StoreModeSwitcher />
-
-    <div class="flex-1 space-y-2 overflow-y-auto scrollbar-muted px-2 py-1">
+    <div class="flex-1 space-y-1 overflow-y-auto scrollbar-muted px-1 py-1">
       <button
         type="button"
-        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
-        :class="
-          activeCategory === 'home'
-            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
-            : ''
-        "
-        @click="selectCategory('home')"
+        class="sidebar-tab"
+        :class="{ 'sidebar-tab-active': activeTab === 'home' }"
+        @click="selectTab('home')"
       >
-        <span>主页</span>
+        <span class="sidebar-tab-icon"><i class="fas fa-star"></i></span>
+        <span class="sidebar-tab-label">首页推荐</span>
       </button>
 
       <button
         type="button"
-        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
-        :class="
-          activeCategory === 'all'
-            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
-            : ''
-        "
-        @click="selectCategory('all')"
+        class="sidebar-tab"
+        :class="{ 'sidebar-tab-active': activeTab === 'all' }"
+        @click="selectTab('all')"
       >
-        <span>全部应用</span>
+        <span class="sidebar-tab-icon"><i class="fas fa-th-large"></i></span>
+        <span class="sidebar-tab-label">全部应用</span>
         <span
           class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
           >{{ categoryCounts.all || 0 }}</span
         >
       </button>
 
+      <div
+        v-if="sidebarEntries.length > 0"
+        class="my-3 border-t border-slate-100 dark:border-slate-800"
+      ></div>
+
       <button
-        v-for="(category, key) in categories"
-        :key="key"
+        v-for="entry in sidebarEntries"
+        :key="entry.id"
         type="button"
-        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
-        :class="
-          activeCategory === key
-            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
-            : ''
-        "
-        @click="selectCategory(key)"
+        class="sidebar-tab"
+        :class="{ 'sidebar-tab-active': activeTab === entry.id }"
+        @click="selectTab(entry.id)"
       >
-        <span class="flex flex-col">
-          <span>
-            <div class="text-left">{{ category.zh }}</div>
-          </span>
+        <span class="sidebar-tab-icon">
+          <i v-if="entry.icon" :class="entry.icon"></i>
+          <i v-else class="fas fa-folder"></i>
         </span>
+        <span class="sidebar-tab-label">{{ entry.name }}</span>
         <span
+          v-if="entryCounts[entry.id]"
           class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500 dark:bg-slate-800/70 dark:text-slate-300"
-          >{{ categoryCounts[key] || 0 }}</span
+          >{{ entryCounts[entry.id] }}</span
         >
       </button>
     </div>
@@ -91,20 +85,20 @@
       <button
         v-if="canManageApps"
         type="button"
-        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
+        class="sidebar-tab"
         @click="$emit('list')"
       >
-        <i class="fas fa-download"></i>
-        <span>应用管理</span>
+        <span class="sidebar-tab-icon"><i class="fas fa-download"></i></span>
+        <span class="sidebar-tab-label">应用管理</span>
       </button>
       <button
         v-if="canOpenUpdateCenter"
         type="button"
-        class="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left text-sm font-medium text-slate-600 transition hover:border-brand/30 hover:bg-brand/5 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-300 dark:hover:bg-slate-800"
+        class="sidebar-tab"
         @click="$emit('update')"
       >
-        <i class="fas fa-sync-alt"></i>
-        <span>软件更新</span>
+        <span class="sidebar-tab-icon"><i class="fas fa-sync-alt"></i></span>
+        <span class="sidebar-tab-label">软件更新</span>
       </button>
     </div>
   </div>
@@ -114,21 +108,22 @@
 import { computed } from "vue";
 import ThemeToggle from "./ThemeToggle.vue";
 import amberLogo from "../assets/imgs/spark-store.svg";
+import type { SidebarEntry } from "../global/typedefinition";
 
 const props = defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  categories: Record<string, any>;
-  activeCategory: string;
+  activeTab: string;
   categoryCounts: Record<string, number>;
   themeMode: "light" | "dark" | "auto";
   sparkAvailable: boolean;
   apmAvailable: boolean;
   storeFilter: "spark" | "apm" | "both";
+  sidebarEntries: SidebarEntry[];
+  entryCounts: Record<string, number>;
 }>();
 
 const emit = defineEmits<{
   (e: "toggle-theme"): void;
-  (e: "select-category", category: string): void;
+  (e: "select-tab", tab: string): void;
   (e: "close"): void;
   (e: "list"): void;
   (e: "update"): void;
@@ -147,7 +142,62 @@ const canManageApps = computed(() => {
 
 const canOpenUpdateCenter = canManageApps;
 
-const selectCategory = (category: string) => {
-  emit("select-category", category);
+const selectTab = (tab: string) => {
+  emit("select-tab", tab);
 };
 </script>
+
+<style scoped>
+.sidebar-tab {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #64748b;
+  transition: all 0.15s ease;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sidebar-tab:hover {
+  background: rgba(0, 113, 227, 0.06);
+  color: #0071e3;
+}
+
+.dark .sidebar-tab:hover {
+  background: rgba(64, 156, 255, 0.1);
+  color: #409cff;
+}
+
+.sidebar-tab-active {
+  background: rgba(0, 113, 227, 0.1);
+  color: #0066cc;
+  border-color: rgba(0, 113, 227, 0.2);
+}
+
+.dark .sidebar-tab-active {
+  background: rgba(64, 156, 255, 0.15);
+  color: #409cff;
+  border-color: rgba(64, 156, 255, 0.25);
+}
+
+.sidebar-tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+.sidebar-tab-label {
+  flex: 1;
+}
+</style>
diff --git a/src/components/CategoryBar.vue b/src/components/CategoryBar.vue
new file mode 100644
index 00000000..d697b6c0
--- /dev/null
+++ b/src/components/CategoryBar.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="category-bar-wrapper">
+    <div class="category-bar">
+      <button
+        type="button"
+        class="category-pill"
+        :class="{ 'category-pill-active': selectedCategory === 'all' }"
+        @click="selectCategory('all')"
+      >
+        <span>全部</span>
+        <span v-if="totalCount > 0" class="category-pill-count">{{ totalCount }}</span>
+      </button>
+      <button
+        v-for="(category, key) in categories"
+        :key="key"
+        type="button"
+        class="category-pill"
+        :class="{ 'category-pill-active': selectedCategory === key }"
+        @click="selectCategory(key)"
+      >
+        <span>{{ category.zh }}</span>
+        <span v-if="categoryCounts[key]" class="category-pill-count">{{ categoryCounts[key] }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  categories: Record<string, any>;
+  selectedCategory: string;
+  categoryCounts: Record<string, number>;
+}>();
+
+const emit = defineEmits<{
+  (e: "select-category", category: string): void;
+}>();
+
+const totalCount = computed(() => {
+  let total = 0;
+  Object.values(props.categoryCounts).forEach((v) => {
+    if (typeof v === "number") total += v;
+  });
+  return total;
+});
+
+const selectCategory = (category: string) => {
+  emit("select-category", category);
+};
+</script>
+
+<style scoped>
+.category-bar-wrapper {
+  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
+  padding: 0 1rem;
+}
+
+.dark .category-bar-wrapper {
+  border-color: rgba(30, 41, 59, 0.7);
+}
+
+.category-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+}
+
+.category-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #64748b;
+  background: #f1f5f9;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.category-pill:hover {
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.dark .category-pill {
+  background: #1e293b;
+  color: #94a3b8;
+}
+
+.dark .category-pill:hover {
+  background: #334155;
+  color: #cbd5e1;
+}
+
+.category-pill-active {
+  background: #0071e3;
+  color: #fff;
+}
+
+.category-pill-active:hover {
+  background: #0066cc;
+  color: #fff;
+}
+
+.dark .category-pill-active {
+  background: #409cff;
+  color: #fff;
+}
+
+.dark .category-pill-active:hover {
+  background: #0071e3;
+  color: #fff;
+}
+
+.category-pill-count {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  opacity: 0.75;
+}
+</style>
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index ab654f7a..8ed84968 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -72,7 +72,6 @@
           class="group block overflow-hidden rounded-xl transition-transform duration-300 hover:scale-[1.02]"
           :title="link.more as string"
         >
-          <!-- 图片区域 - 850:400 比例 -->
           <div
             class="relative w-full aspect-[850/400] overflow-hidden rounded-xl bg-slate-100 dark:bg-slate-800"
           >
@@ -88,7 +87,6 @@
                   imageLoaded[link.url + link.name],
               }"
             />
-            <!-- 图片加载占位符 -->
             <div
               v-if="!imageLoaded[link.url + link.name]"
               class="absolute inset-0 flex items-center justify-center"
@@ -98,7 +96,6 @@
               ></div>
             </div>
           </div>
-          <!-- 文字信息区域 -->
           <div class="mt-3 px-1">
             <div
               class="text-base font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
diff --git a/src/global/typedefinition.ts b/src/global/typedefinition.ts
index 6146cd58..f2f7ccd6 100644
--- a/src/global/typedefinition.ts
+++ b/src/global/typedefinition.ts
@@ -241,3 +241,11 @@ export interface HomeList {
   title: string;
   apps: App[];
 }
+
+export interface SidebarEntry {
+  id: string;
+  name: string;
+  icon?: string;
+  type?: "category" | "search" | "link";
+  value?: string;
+}