去除界面优化

src/components/AppSidebar.vue

@@ -1,87 +1,62 @@
 <template>
-  <div class="flex h-full flex-col gap-5">
+  <div class="flex h-full flex-col gap-6">
     <div class="flex items-center justify-between gap-3">
       <div class="flex items-center gap-3">
-        <div
-          class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-brand/20 to-brand/5 ring-1 ring-slate-200/60 dark:ring-slate-700/50"
-        >
-          <img :src="amberLogo" alt="Amber PM" class="h-8 w-8 object-contain" />
-        </div>
-        <div class="flex flex-col min-w-0">
+        <img
+          :src="amberLogo"
+          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
-            class="text-[10px] font-medium uppercase tracking-widest text-slate-400 dark:text-slate-500"
+            class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
             >Spark Store</span
           >
-          <span
-            class="truncate text-base font-bold tracking-tight text-slate-800 dark:text-white"
+          <span class="text-lg font-semibold text-slate-900 dark:text-white"
             >星火应用商店</span
           >
         </div>
       </div>
       <button
         type="button"
-        class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 lg:hidden dark:hover:bg-slate-800 dark:hover:text-slate-300"
+        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="关闭侧边栏"
-        aria-label="关闭侧边栏"
       >
-        <i class="fas fa-times text-sm"></i>
+        <i class="fas fa-times"></i>
       </button>
     </div>
 
     <ThemeToggle :theme-mode="themeMode" @toggle="toggleTheme" />
     <StoreModeSwitcher />
 
-    <nav
-      class="flex-1 space-y-1 overflow-y-auto scrollbar-muted pr-1"
-      aria-label="分类导航"
-    >
+    <div class="flex-1 space-y-2 overflow-y-auto scrollbar-muted pr-2">
       <button
         type="button"
-        class="nav-item flex w-full items-center gap-3 rounded-xl border border-transparent px-3.5 py-2.5 text-left text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
+        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'
-            ? 'nav-item-active border-brand/20 bg-brand/10 text-brand dark:bg-brand/20 dark:text-brand-soft'
-            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800/80 dark:hover:text-slate-200'
+            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
+            : ''
         "
         @click="selectCategory('home')"
       >
-        <span
-          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors"
-          :class="
-            activeCategory === 'home'
-              ? 'bg-brand/15 text-brand dark:bg-brand/25 dark:text-brand-soft'
-              : 'bg-slate-100/80 text-slate-500 dark:bg-slate-800/80 dark:text-slate-400'
-          "
-        >
-          <i class="fas fa-home"></i>
-        </span>
-        <span class="flex-1 truncate">主页</span>
+        <span>主页</span>
       </button>
 
       <button
         type="button"
-        class="nav-item flex w-full items-center gap-3 rounded-xl border border-transparent px-3.5 py-2.5 text-left text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
+        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'
-            ? 'nav-item-active border-brand/20 bg-brand/10 text-brand dark:bg-brand/20 dark:text-brand-soft'
-            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800/80 dark:hover:text-slate-200'
+            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
+            : ''
         "
         @click="selectCategory('all')"
       >
+        <span>全部应用</span>
         <span
-          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors"
-          :class="
-            activeCategory === 'all'
-              ? 'bg-brand/15 text-brand dark:bg-brand/25 dark:text-brand-soft'
-              : 'bg-slate-100/80 text-slate-500 dark:bg-slate-800/80 dark:text-slate-400'
-          "
-        >
-          <i class="fas fa-th-large"></i>
-        </span>
-        <span class="flex-1 truncate">全部应用</span>
-        <span
-          class="rounded-full bg-slate-200/80 px-2.5 py-0.5 text-xs font-semibold tabular-nums text-slate-600 dark:bg-slate-700/80 dark:text-slate-300"
+          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>
@@ -90,31 +65,25 @@
         v-for="(category, key) in categories"
         :key="key"
         type="button"
-        class="nav-item flex w-full items-center gap-3 rounded-xl border border-transparent px-3.5 py-2.5 text-left text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
+        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
-            ? 'nav-item-active border-brand/20 bg-brand/10 text-brand dark:bg-brand/20 dark:text-brand-soft'
-            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800/80 dark:hover:text-slate-200'
+            ? 'border-brand/40 bg-brand/10 text-brand dark:bg-brand/15'
+            : ''
         "
         @click="selectCategory(key)"
       >
-        <span
-          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors"
-          :class="
-            activeCategory === key
-              ? 'bg-brand/15 text-brand dark:bg-brand/25 dark:text-brand-soft'
-              : 'bg-slate-100/80 text-slate-500 dark:bg-slate-800/80 dark:text-slate-400'
-          "
-        >
-          <i class="fas fa-folder"></i>
+        <span class="flex flex-col">
+          <span>
+            <div class="text-left">{{ category.zh }}</div>
+          </span>
         </span>
-        <span class="flex-1 truncate text-left">{{ category.zh }}</span>
         <span
-          class="rounded-full bg-slate-200/80 px-2.5 py-0.5 text-xs font-semibold tabular-nums text-slate-600 dark:bg-slate-700/80 dark:text-slate-300"
+          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
         >
       </button>
-    </nav>
+    </div>
   </div>
 </template>