mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-04-26 09:20:18 +08:00
70cab0182d
- 删除 AppSidebar.vue 中的 StoreModeSwitcher 引入并删除该组件。 - 强制设置当前商店模式为 'hybrid'。 - 修复了因为 `window.apm_store.arch` 包含 `-store` 或 `-apm` 后缀导致路径替换异常的问题，现在会通过动态添加后缀来构建资源请求路径，以兼容 Spark Store 和 APM Store 服务器不同的资源组织结构。
116 lines
4.2 KiB
Vue
116 lines
4.2 KiB
Vue
<template>
|
|
<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">
|
|
<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-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
|
|
>Spark Store</span
|
|
>
|
|
<span class="text-lg font-semibold text-slate-900 dark:text-white"
|
|
>星火应用商店</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" />
|
|
<StoreModeSwitcher />
|
|
|
|
<div class="flex-1 space-y-2 overflow-y-auto scrollbar-muted pr-2">
|
|
<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')"
|
|
>
|
|
<span>主页</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')"
|
|
>
|
|
<span>全部应用</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>
|
|
|
|
<button
|
|
v-for="(category, key) in categories"
|
|
:key="key"
|
|
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)"
|
|
>
|
|
<span class="flex flex-col">
|
|
<span>
|
|
<div class="text-left">{{ category.zh }}</div>
|
|
</span>
|
|
</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[key] || 0 }}</span
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ThemeToggle from "./ThemeToggle.vue";
|
|
import amberLogo from "../assets/imgs/spark-store.svg";
|
|
|
|
defineProps<{
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
categories: Record<string, any>;
|
|
activeCategory: string;
|
|
categoryCounts: Record<string, number>;
|
|
themeMode: "light" | "dark" | "auto";
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "toggle-theme"): void;
|
|
(e: "select-category", category: string): void;
|
|
(e: "close"): void;
|
|
}>();
|
|
|
|
const toggleTheme = () => {
|
|
emit("toggle-theme");
|
|
};
|
|
|
|
const selectCategory = (category: string) => {
|
|
emit("select-category", category);
|
|
};
|
|
</script>
|