spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

feat: add sidebar toggle functionality

Browse Source 
Signed-off-by: Elysia <a.elysia@proton.me>
This commit is contained in:
Elysia
2026-02-17 23:23:20 +08:00
parent 7b3bd110a9
commit c27c1f1697
4 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/AppHeader.vue
View File

@@ -1,7 +1,17 @@
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center">
<TopActions @update="$emit('update')" @list="$emit('list')" />
<div class="flex items-center gap-3">
<button
type="button"
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-slate-200/70 bg-white/80 text-slate-500 shadow-sm backdrop-blur transition hover:bg-slate-50 lg:hidden dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:bg-slate-800"
@click="$emit('toggle-sidebar')"
title="切换侧边栏"
>
<i class="fas fa-bars"></i>
</button>
<TopActions @update="$emit('update')" @list="$emit('list')" />
</div>
<div class="w-full flex-1">
<label for="searchBox" class="sr-only">搜索应用</label>
<div class="relative">
@@ -38,6 +48,7 @@ const emit = defineEmits<{
(e: "update-search", query: string): void;
(e: "update"): void;
(e: "list"): void;
(e: "toggle-sidebar"): void;
}>();
const localSearchQuery = ref(props.searchQuery || "");

39
src/components/AppSidebar.vue
View File

@@ -1,20 +1,30 @@
<template>
<div class="flex h-full flex-col gap-6">
<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"
>APM Store</span
>
<span class="text-lg font-semibold text-slate-900 dark:text-white"
>APM 客户端商店</span
>
<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"
>APM Store</span
>
<span class="text-lg font-semibold text-slate-900 dark:text-white"
>APM 客户端商店</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" />
@@ -78,6 +88,7 @@ defineProps<{
const emit = defineEmits<{
(e: "toggle-theme"): void;
(e: "select-category", category: string): void;
(e: "close"): void;
}>();
const toggleTheme = () => {