wip(Login): Login developing

src/App.vue

@@ -10,18 +10,21 @@ const appStore = useAppStore()
 
 const localeStore = useLocaleStore()
 
-const local = computed(() => localeStore.locale)
+const locale = computed(() => localeStore.locale)
+
+const size = computed(() => appStore.size)
 
 function initDark() {
   const isDarkTheme = isDark()
   appStore.setIsDark(isDarkTheme)
 }
+
 initDark()
 </script>
 
 <template>
-  <ConfigGlobal>
-    <ElConfigProvider :locale="local.elLocale">
+  <ConfigGlobal :size="size">
+    <ElConfigProvider :locale="locale.elLocale" :size="size">
       <RouterView />
     </ElConfigProvider>
   </ConfigGlobal>

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -3,7 +3,7 @@ import { provide, defineComponent } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
 export default defineComponent({
-  name: 'VConfigGlobal',
+  name: 'ConfigGlobal',
   inheritAttrs: false,
   props: {
     size: propTypes.oneOf(['default', 'medium', 'small', 'mini']).def('default')

src/components/Form/index.ts

@@ -1,8 +1,8 @@
-import VFrom from './src/Form.vue'
+import Form from './src/Form.vue'
 
-export interface VFormExpose {
+export interface FormExpose {
   count: number
   sayHello: () => void
 }
 
-export { VFrom }
+export { Form }

src/components/Form/src/Form.vue

@@ -16,7 +16,7 @@ import { useRenderRadio } from './components/useRenderRadio'
 import { useRenderChcekbox } from './components/useRenderChcekbox'
 
 export default defineComponent({
-  name: 'VForm',
+  name: 'Form',
   props: {
     // 生成Form的布局结构数组
     schema: {

src/components/Icon/src/Icon.vue

@@ -20,10 +20,10 @@ const props = defineProps({
 
 const elRef = ref<ElRef>(null)
 
-const isLocal = computed(() => props.icon.startsWith('icon:'))
+const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
 
 const symbolId = computed(() => {
-  return unref(isLocal) ? `#icon-${props.icon.split('icon:')[1]}` : props.icon
+  return unref(isLocal) ? `#icon-${props.icon.split('svg-icon:')[1]}` : props.icon
 })
 
 const getIconifyStyle = computed(() => {
@@ -76,11 +76,3 @@ watch(
     </span>
   </ElIcon>
 </template>
-
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-icon';
-
-.@{prefix-cls} {
-  display: inline-block;
-}
-</style>

src/components/InputPassword/src/InputPassword.vue

@@ -19,16 +19,19 @@ const emit = defineEmits(['update:modelValue'])
 
 // 生成class前缀
 const { getPrefixCls } = useDesign()
+
 const prefixCls = ref(getPrefixCls('input-password'))
 
 // 设置input的type属性
 const textType = ref<'password' | 'text'>('password')
+
 function changeTextType() {
   textType.value = unref(textType) === 'text' ? 'password' : 'text'
 }
 
 // 输入框的值
 const valueRef = ref('')
+
 // 监听
 watch(
   () => valueRef.value,
@@ -36,6 +39,7 @@ watch(
     emit('update:modelValue', val)
   }
 )
+
 // 获取密码强度
 const getPasswordStrength = computed(() => {
   const value = unref(valueRef)

src/components/SizeDropdown/index.ts

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

src/components/SizeDropdown/src/SizeDropdown.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
+import { useAppStore } from '@/store/modules/app'
+import { useCssVar } from '@vueuse/core'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+
+const appStore = useAppStore()
+
+const sizeMap = computed(() => appStore.sizeMap)
+
+const textColor = useCssVar('--el-text-color-primary', document.documentElement)
+
+function setSize(size: ElememtPlusSzie) {
+  appStore.setSize(size)
+}
+</script>
+
+<template>
+  <ElDropdown trigger="click" @command="setSize">
+    <Icon icon="mdi:format-size" :color="textColor" class="cursor-pointer" />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
+          {{ t(`size.${[item]}`) }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>

src/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -7,6 +7,7 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { useIcon } from '@/hooks/web/useIcon'
 
 const Sun = useIcon({ icon: 'emojione-monotone:sun' })
+
 const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon' })
 
 const appStore = useAppStore()
@@ -15,6 +16,7 @@ const appStore = useAppStore()
 const isDark = ref(appStore.getIsDark)
 
 const { getPrefixCls } = useDesign()
+
 const prefixCls = getPrefixCls('theme-switch')
 
 // 设置switch的背景颜色

src/hooks/web/useLocale.ts

@@ -22,7 +22,7 @@ export function useLocale() {
   async function changeLocale(locale: LocaleType) {
     const globalI18n = i18n.global
 
-    const langModule = (await import(`../../locales/${locale}.ts`)) as any
+    const langModule = await import(`../../locales/${locale}.ts`)
 
     globalI18n.setLocaleMessage(locale, langModule.default)
 

src/locales/en.ts

@@ -6,6 +6,11 @@ export default {
     endTimeText: 'End time',
     login: 'Login'
   },
+  size: {
+    default: 'Default',
+    large: 'Large',
+    small: 'Small'
+  },
   formDemo: {
     input: 'Input',
     inputNumber: 'InputNumber',

src/locales/zh-CN.ts

@@ -6,6 +6,11 @@ export default {
     endTimeText: '结束时间',
     login: '登录'
   },
+  size: {
+    default: '默认',
+    large: '大',
+    small: '小'
+  },
   formDemo: {
     input: '输入框',
     inputNumber: '数字输入框',

src/plugins/elementPlus/index.ts

@@ -4,12 +4,14 @@ import type { App } from 'vue'
 import { ElLoading, ElScrollbar } from 'element-plus'
 
 const plugins = [ElLoading]
+
 const components = [ElScrollbar]
 
 export function setupElementPlus(app: App) {
   plugins.forEach((plugin) => {
     app.use(plugin)
   })
+
   components.forEach((component) => {
     app.component(component.name, component)
   })

src/store/modules/app.ts

@@ -23,6 +23,7 @@ export interface AppState {
   requestTime: boolean
   isDark: boolean
   size: ElememtPlusSzie
+  sizeMap: ElememtPlusSzie[]
 }
 
 export const useAppStore = defineStore({
@@ -46,7 +47,8 @@ export const useAppStore = defineStore({
     showMenuTab: false, // 是否固定一级菜单
     requestTime: false, // 是否在接口调用时添加时间戳，避免IE缓存
     isDark: false, // 是否是暗黑模式
-    size: 'default' // 组件尺寸
+    size: 'default', // 组件尺寸
+    sizeMap: ['default', 'large', 'small']
   }),
   getters: {
     getCollapsed(): boolean {
@@ -105,6 +107,9 @@ export const useAppStore = defineStore({
     },
     getSize(): ElememtPlusSzie {
       return this.size
+    },
+    getSizeMap(): ElememtPlusSzie[] {
+      return this.sizeMap
     }
   },
   actions: {

src/views/Login/Login.vue

@@ -1,34 +1,38 @@
 <script setup lang="ts">
-import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { LocaleDropdown } from '@/components/LocaleDropdown'
+import { LoginForm } from './components'
+import { ElCard } from 'element-plus'
+// import { ThemeSwitch } from '@/components/ThemeSwitch'
+// import { LocaleDropdown } from '@/components/LocaleDropdown'
+// import { SizeDropdown } from '@/components/SizeDropdown'
 import { useDesign } from '@/hooks/web/useDesign'
-import { useI18n } from '@/hooks/web/useI18n'
-import { ElCalendar } from 'element-plus'
-import { VFrom } from '@/components/Form'
+// import { useI18n } from '@/hooks/web/useI18n'
 
-const { t } = useI18n()
+// const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()
+
 const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
   <div :class="prefixCls" class="h-[calc(100%)] relative">
-    <Icon icon="icon:icon" />
-    <Icon icon="ant-design:eye-outlined" />
-    <ThemeSwitch />
-    <LocaleDropdown />
-    <ElCalendar />
-    <VFrom
-      :schema="[
-        {
-          label: 'input',
-          field: 'field1',
-          component: 'InputPassword'
-        }
-      ]"
-    />
-    {{ t('formDemo.default') }}
+    <div
+      class="container relative h-full py-2 mx-auto flex @2xl:max-w-1600px @xl:max-w-1000px @lg:max-w-600px @md:max-w-500px @sm:max-w-500px"
+    >
+      <div class="flex-1 <lg:hidden">
+        <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-1/2 m-auto" />
+      </div>
+      <div class="flex-1">
+        <ElCard>
+          <template #header>
+            <div>
+              <span>Card name</span>
+            </div>
+          </template>
+          <LoginForm />
+        </ElCard>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/Login/components/LoginForm.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+
+const schema: FormSchema[] = [
+  {
+    field: 'username',
+    component: 'Input'
+  },
+  {
+    field: 'password',
+    component: 'InputPassword'
+  }
+]
+</script>
+
+<template>
+  <Form :schema="schema" :label-width="0" />
+</template>

src/views/Login/components/index.ts

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