wip(login): login developing

src/components/ThemeSwitch/index.ts

@@ -0,0 +1,3 @@
+import VThemeSwitch from './src/VThemeSwitch.vue'
+
+export { VThemeSwitch }

src/components/ThemeSwitch/src/VThemeSwitch.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import Sun from '~icons/emojione-monotone/sun'
+import CrescentMoon from '~icons/emojione-monotone/crescent-moon'
+import { ElSwitch } from 'element-plus'
+import { useCssVar } from '@vueuse/core'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const appStore = useAppStore()
+
+// 初始化获取是否是暗黑主题
+const isDark = ref(appStore.getIsDark)
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('theme-switch')
+
+// 设置switch的背景颜色
+const blackColor = useCssVar('--el-color-black', document.documentElement)
+
+function themeChange(val: boolean) {
+  appStore.setIsDark(val)
+}
+</script>
+
+<template>
+  <ElSwitch
+    :class="prefixCls"
+    v-model="isDark"
+    inline-prompt
+    :border-color="blackColor"
+    :inactive-color="blackColor"
+    :active-color="blackColor"
+    :active-icon="Sun"
+    :inactive-icon="CrescentMoon"
+    @change="themeChange"
+  />
+</template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-theme-switch';
+
+.@{prefix-cls} {
+  :deep(.el-icon) {
+    color: #fde047;
+  }
+}
+</style>