wip(login): login developing

src/components/InputPassword/src/VInputPassword.vue

@@ -20,7 +20,7 @@ const emit = defineEmits(['update:modelValue'])
 
 // 生成class前缀
 const { getPrefixCls } = useDesign()
-const prefixCls = ref(getPrefixCls('inputpassword'))
+const prefixCls = ref(getPrefixCls('input-password'))
 
 // 设置input的type属性
 const textType = ref<'password' | 'text'>('password')
@@ -66,7 +66,7 @@ const getPasswordStrength = computed(() => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-inputpassword';
+@prefix-cls: ~'@{namespace}-input-password';
 
 .@{prefix-cls} {
   &__bar {

src/components/LocaleDropdown/index.ts

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

src/components/LocaleDropdown/src/VLocaleDropdown.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>s</div>
+  <!-- <el-dropdown trigger="click">
+    <span class="el-dropdown-link">
+      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
+        <el-dropdown-item :icon="CirclePlusFilled"> Action 2 </el-dropdown-item>
+        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
+        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
+        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown> -->
+</template>

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>