mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-04-26 09:20:18 +08:00
shenmo
cd43f34cbd
- 新增 AboutModal 组件显示应用版本和相关信息 - 重构 ThemeToggle 组件为更简洁的图标按钮 - 在侧边栏添加关于按钮并实现打开对话框功能 - 通过预加载脚本获取 package.json 版本号 - 支持命令行参数 --version/-v 显示版本号
40 lines
991 B
Vue
40 lines
991 B
Vue
<template>
|
|
<button
|
|
type="button"
|
|
class="inline-flex h-10 w-10 items-center justify-center rounded-2xl text-slate-500 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
:title="title"
|
|
tabindex="-1"
|
|
@click="toggle"
|
|
>
|
|
<i class="fas" :class="iconClass"></i>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
themeMode: "light" | "dark" | "auto";
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "toggle"): void;
|
|
}>();
|
|
|
|
const toggle = () => {
|
|
emit("toggle");
|
|
};
|
|
|
|
const title = computed(() => {
|
|
if (props.themeMode === "auto") return "自动模式";
|
|
if (props.themeMode === "dark") return "深色模式";
|
|
return "浅色模式";
|
|
});
|
|
|
|
const iconClass = computed(() => {
|
|
if (props.themeMode === "auto") return "fa-adjust";
|
|
if (props.themeMode === "dark") return "fa-moon";
|
|
return "fa-sun";
|
|
});
|
|
</script>
|