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

去除界面优化

Browse Source
This commit is contained in:
shenmo
2026-03-15 17:00:58 +08:00
parent 74b1f65ab1
commit 6729e321a6
15 changed files with 141 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ThemeToggle.vue
View File

@@ -1,27 +1,23 @@
<template>
<button
type="button"
class="flex w-full items-center justify-between rounded-xl border border-slate-200/60 bg-white/80 px-3.5 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-700/60 dark:bg-slate-800/80 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm font-medium text-slate-600 shadow-sm transition hover:border-brand/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-300"
:aria-pressed="themeMode === 'dark'"
@click="toggle"
>
<span class="flex items-center gap-2.5">
<span
class="flex h-7 w-7 items-center justify-center rounded-lg bg-slate-100/80 dark:bg-slate-700/80"
>
<i class="fas text-sm" :class="iconClass"></i>
</span>
<span class="flex items-center gap-2">
<i class="fas" :class="iconClass"></i>
<span>{{ label }}</span>
</span>
<span
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full bg-slate-200/90 transition dark:bg-slate-600/80"
class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-300/80 transition dark:bg-slate-700"
>
<span
:class="[
'absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-white shadow-md ring-2 ring-slate-200/50 transition-all duration-200 dark:ring-slate-600/50',
'inline-block h-4 w-4 rounded-full bg-white shadow transition',
togglePosition,
]"
/>
></span>
</span>
</button>
</template>
@@ -54,8 +50,8 @@ const iconClass = computed(() => {
});
const togglePosition = computed(() => {
if (props.themeMode === "auto") return "left-1/2 -translate-x-1/2";
if (props.themeMode === "dark") return "left-6";
return "left-0.5";
if (props.themeMode === "auto") return "translate-x-4";
if (props.themeMode === "dark") return "translate-x-7";
return "translate-x-1";
});
</script>