From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/layout/components/ThemeSwitch/src/ThemeSwitch.vue | 46 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 46 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue b/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
new file mode 100644
index 0000000..39a8cfd
--- /dev/null
+++ b/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store/modules/app'
+import { useIcon } from '@/hooks/web/useIcon'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ThemeSwitch' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('theme-switch')
+
+const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+
+const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+
+const appStore = useAppStore()
+
+// 鍒濆鍖栬幏鍙栨槸鍚︽槸鏆楅粦涓婚
+const isDark = ref(appStore.getIsDark)
+
+// 璁剧疆switch鐨勮儗鏅鑹�
+const blackColor = 'var(--el-color-black)'
+
+const themeChange = (val: boolean) => {
+ appStore.setIsDark(val)
+}
+</script>
+
+<template>
+ <ElSwitch
+ v-model="isDark"
+ :active-color="blackColor"
+ :active-icon="Sun"
+ :border-color="blackColor"
+ :class="prefixCls"
+ :inactive-color="blackColor"
+ :inactive-icon="CrescentMoon"
+ inline-prompt
+ @change="themeChange"
+ />
+</template>
+<style lang="scss" scoped>
+:deep(.el-switch__core .el-switch__inner .is-icon) {
+ overflow: visible;
+}
+</style>
--
Gitblit v1.8.0