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 死代码
This commit is contained in:
xiyidaiwa
2026-08-11 22:45:37 +08:00
parent 7cafcc51f6
commit aef9ccd1ec
4 changed files with 15 additions and 98 deletions
+1 -96
View File
@@ -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 AccountQuickMenu from "./AccountQuickMenu.vue";
import ThemeToggle from "./ThemeToggle.vue";
import amberLogo from "../assets/imgs/spark-store.svg";
import { computed } from "vue";
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");