fix(主题/UI): 修复标题栏主题按钮事件链、社区版徽标方案B、侧边栏顶部块清理

- App.vue: WindowTitleBar 补 :theme-mode 与 @toggle-theme 绑定，使标题栏主题按钮真正触发 toggleTheme；watch(themeMode) 补 syncThemePreference() 立即落地 dark 类
- WindowTitleBar.vue: 新增 ThemeToggle 主题切换按钮；社区版标签改为方案B描边霓虹徽章(亮/暗双态)
- AppSidebar.vue: 删除侧边栏顶部 logo/账户菜单/主题切换块，导航容器滚动条还原为 scrollbar-muted，清理相关 script 死代码

debian/changelog

@@ -1,4 +1,4 @@
-spark-store (5.2.1.0) UNRELEASED; urgency=medium
+spark-store (5.2.1.16-test) UNRELEASED; urgency=medium
 
   * Initial release. (Closes: #nnnn)  <nnnn is the bug number of your ITP>
 

src/App.vue

@@ -6,10 +6,12 @@
   >
     <WindowTitleBar
       :search-query="searchQuery"
+      :theme-mode="themeMode"
       @update:search-query="handleSearchInput"
       @search-focus="handleSearchFocus"
       @open-install-settings="handleOpenInstallSettings"
       @open-about="openAboutModal"
+      @toggle-theme="toggleTheme"
       @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
       @spk-link="handleSpkLink"
     />
@@ -3547,6 +3549,7 @@ watch(themeMode, (newVal) => {
     "set-theme-source",
     newVal === "auto" ? "system" : newVal,
   );
+  syncThemePreference();
 });
 
 watch(isDarkTheme, () => {

src/components/AppSidebar.vue

@@ -1,51 +1,5 @@
 <template>
   <div class="flex h-full flex-col gap-6">
-    <div class="flex items-start justify-between gap-3">
-      <div ref="accountMenuRoot" class="relative min-w-0 flex-1">
-        <button
-          type="button"
-          class="flex w-full min-w-0 items-center gap-2 rounded-2xl p-1 text-left transition hover:bg-slate-100 dark:hover:bg-slate-800"
-          :aria-label="accountLabel"
-          @click="handleAccountClick"
-        >
-          <img
-            :src="amberLogo"
-            alt="星火应用商店"
-            class="h-11 w-11 shrink-0 rounded-2xl bg-white/70 p-2 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800"
-          />
-          <div data-testid="account-text" class="flex min-w-0 flex-col">
-            <span
-              class="truncate text-base font-semibold text-slate-900 dark:text-white"
-              >{{ accountLabel }}</span
-            >
-            <span
-              class="truncate text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500"
-              >社区版</span
-            >
-          </div>
-        </button>
-        <AccountQuickMenu
-          v-if="currentUser && showAccountMenu"
-          @open-user-management="emitAccountAction('open-user-management')"
-          @open-favorites="emitAccountAction('open-favorites')"
-          @open-forum="emitAccountAction('open-forum')"
-          @edit-profile="emitAccountAction('edit-profile')"
-          @logout="emitAccountAction('logout')"
-        />
-      </div>
-      <div class="flex items-center gap-1">
-        <ThemeToggle :theme-mode="themeMode" @toggle="toggleTheme" />
-        <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>
-    </div>
-
     <div class="flex-1 space-y-1 overflow-y-auto scrollbar-muted px-1 py-1">
       <button
         type="button"
@@ -152,10 +106,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed } from "vue";
-import AccountQuickMenu from "./AccountQuickMenu.vue";
-import ThemeToggle from "./ThemeToggle.vue";
-import amberLogo from "../assets/imgs/spark-store.svg";
 import type { SidebarEntry, SparkUser } from "../global/typedefinition";
 
 const props = defineProps<{
@@ -185,50 +136,6 @@ const emit = defineEmits<{
   (e: "logout"): void;
 }>();
 
-const showAccountMenu = ref(false);
-const accountMenuRoot = ref<HTMLElement | null>(null);
-
-const accountLabel = computed(() => "星火应用商店");
-
-const handleAccountClick = () => {
-  // 登录功能暂时关闭
-};
-
-const handleDocumentPointerDown = (event: MouseEvent) => {
-  if (!showAccountMenu.value) return;
-  const target = event.target;
-  if (target instanceof Node && accountMenuRoot.value?.contains(target)) return;
-  showAccountMenu.value = false;
-};
-
-onMounted(() => {
-  document.addEventListener("mousedown", handleDocumentPointerDown);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("mousedown", handleDocumentPointerDown);
-});
-
-const emitAccountAction = (
-  action:
-    | "open-user-management"
-    | "open-favorites"
-    | "open-forum"
-    | "edit-profile"
-    | "logout",
-) => {
-  showAccountMenu.value = false;
-  if (action === "open-user-management") emit("open-user-management");
-  else if (action === "open-favorites") emit("open-favorites");
-  else if (action === "open-forum") emit("open-forum");
-  else if (action === "edit-profile") emit("edit-profile");
-  else emit("logout");
-};
-
-const toggleTheme = () => {
-  emit("toggle-theme");
-};
-
 const canManageApps = computed(() => {
   return (
     (props.storeFilter !== "apm" && props.sparkAvailable) ||
@@ -239,12 +146,10 @@ const canManageApps = computed(() => {
 const canOpenUpdateCenter = canManageApps;
 
 const selectTab = (tab: string) => {
-  showAccountMenu.value = false;
   emit("select-tab", tab);
 };
 
 const emitSidebarAction = (action: "list" | "update" | "submit") => {
-  showAccountMenu.value = false;
   if (action === "list") emit("list");
   else if (action === "update") emit("update");
   else emit("submit");

src/components/WindowTitleBar.vue

@@ -19,6 +19,10 @@
         alt="星火应用商店"
       />
       <span class="truncate text-base font-semibold">星火应用商店</span>
+      <span
+        class="rounded-full border border-orange-400 bg-orange-50 px-2 py-0.5 text-[10px] font-semibold text-orange-600 dark:border-amber-400/70 dark:bg-amber-400/10 dark:text-amber-300 dark:shadow-[0_0_8px_rgba(251,191,36,0.4)]"
+        >社区版</span
+      >
     </div>
 
     <!-- 中：搜索框（取代原 AppHeader 里的搜索） -->
@@ -47,8 +51,9 @@
       </div>
     </div>
 
-    <!-- 右：设置 + 关于 + 窗口控制 -->
+    <!-- 右：主题 + 设置 + 关于 + 分隔符 + 窗口控制 -->
     <div class="window-titlebar-controls flex shrink-0 items-center gap-1">
+      <ThemeToggle :theme-mode="themeMode" @toggle="$emit('toggle-theme')" />
       <button
         type="button"
         class="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-200/80 dark:text-slate-400 dark:hover:bg-slate-800"
@@ -100,8 +105,11 @@
 </template>
 
 <script setup lang="ts">
+import ThemeToggle from "./ThemeToggle.vue";
+
 defineProps<{
   searchQuery: string;
+  themeMode: "light" | "dark" | "auto";
 }>();
 
 const emit = defineEmits<{
@@ -110,6 +118,7 @@ const emit = defineEmits<{
   (e: "spk-link", pkgname: string): void;
   (e: "open-install-settings"): void;
   (e: "open-about"): void;
+  (e: "toggle-theme"): void;
   (e: "toggle-sidebar"): void;
 }>();