From 4d52f7bf5849b197789ed4ce44efddea8d62cfb5 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Mon, 3 Jan 2022 18:01:43 +0800 Subject: [PATCH] wip(Login): Login developing --- package.json | 1 + pnpm-lock.yaml | 17 +- src/App.vue | 9 +- src/assets/svgs/login-box-bg.svg | 1643 +++++++++++++++++ .../ConfigGlobal/src/ConfigGlobal.vue | 2 +- src/components/Form/index.ts | 6 +- src/components/Form/src/Form.vue | 2 +- src/components/Icon/src/Icon.vue | 12 +- .../InputPassword/src/InputPassword.vue | 4 + src/components/SizeDropdown/index.ts | 3 + .../SizeDropdown/src/SizeDropdown.vue | 31 + .../ThemeSwitch/src/ThemeSwitch.vue | 2 + src/hooks/web/useLocale.ts | 2 +- src/locales/en.ts | 5 + src/locales/zh-CN.ts | 5 + src/plugins/elementPlus/index.ts | 2 + src/store/modules/app.ts | 7 +- src/views/Login/Login.vue | 46 +- src/views/Login/components/LoginForm.vue | 18 + src/views/Login/components/index.ts | 3 + windi.config.ts | 30 +- 21 files changed, 1798 insertions(+), 52 deletions(-) create mode 100644 src/assets/svgs/login-box-bg.svg create mode 100644 src/components/SizeDropdown/index.ts create mode 100644 src/components/SizeDropdown/src/SizeDropdown.vue create mode 100644 src/views/Login/components/LoginForm.vue create mode 100644 src/views/Login/components/index.ts diff --git a/package.json b/package.json index 1fd0113..ed66baf 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@typescript-eslint/parser": "^5.8.1", "@vitejs/plugin-vue": "^2.0.1", "@vitejs/plugin-vue-jsx": "^1.3.3", + "@windicss/plugin-animations": "^1.0.9", "async-validator": "^4.0.7", "autoprefixer": "^10.4.1", "commitizen": "^4.2.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eea0135..0207946 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,7 @@ specifiers: '@vitejs/plugin-vue': ^2.0.1 '@vitejs/plugin-vue-jsx': ^1.3.3 '@vueuse/core': ^7.5.1 + '@windicss/plugin-animations': ^1.0.9 '@zxcvbn-ts/core': ^1.2.0 async-validator: ^4.0.7 autoprefixer: ^10.4.1 @@ -79,6 +80,7 @@ devDependencies: '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.8.1_eslint@8.6.0+typescript@4.5.4 '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.0.1_vite@2.7.10+vue@3.2.26 '@vitejs/plugin-vue-jsx': registry.npmmirror.com/@vitejs/plugin-vue-jsx/1.3.3 + '@windicss/plugin-animations': registry.npmmirror.com/@windicss/plugin-animations/1.0.9 async-validator: registry.npmmirror.com/async-validator/4.0.7 autoprefixer: registry.npmmirror.com/autoprefixer/10.4.1_postcss@8.4.5 commitizen: registry.npmmirror.com/commitizen/4.2.4_@types+node@17.0.5 @@ -5210,7 +5212,7 @@ packages: { integrity: sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz + tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz } name: semver version: 5.7.1 @@ -5222,7 +5224,7 @@ packages: { integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz + tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz } name: semver version: 6.3.0 @@ -8230,6 +8232,17 @@ packages: - supports-color dev: true + registry.npmmirror.com/@windicss/plugin-animations/1.0.9: + resolution: + { + integrity: sha1-q9fILZBuvX1hzcYqMBm2DoxXynI=, + registry: https://registry.npm.taobao.org/, + tarball: https://registry.npmmirror.com/@windicss/plugin-animations/download/@windicss/plugin-animations-1.0.9.tgz + } + name: '@windicss/plugin-animations' + version: 1.0.9 + dev: true + registry.npmmirror.com/@windicss/plugin-utils/1.6.1: resolution: { diff --git a/src/App.vue b/src/App.vue index ce9735e..e1f3544 100644 --- a/src/App.vue +++ b/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() - - diff --git a/src/components/InputPassword/src/InputPassword.vue b/src/components/InputPassword/src/InputPassword.vue index b3b26d8..cde9149 100644 --- a/src/components/InputPassword/src/InputPassword.vue +++ b/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) diff --git a/src/components/SizeDropdown/index.ts b/src/components/SizeDropdown/index.ts new file mode 100644 index 0000000..516488d --- /dev/null +++ b/src/components/SizeDropdown/index.ts @@ -0,0 +1,3 @@ +import SizeDropdown from './src/SizeDropdown.vue' + +export { SizeDropdown } diff --git a/src/components/SizeDropdown/src/SizeDropdown.vue b/src/components/SizeDropdown/src/SizeDropdown.vue new file mode 100644 index 0000000..5cea223 --- /dev/null +++ b/src/components/SizeDropdown/src/SizeDropdown.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/components/ThemeSwitch/src/ThemeSwitch.vue b/src/components/ThemeSwitch/src/ThemeSwitch.vue index 07fc574..e40a33c 100644 --- a/src/components/ThemeSwitch/src/ThemeSwitch.vue +++ b/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的背景颜色 diff --git a/src/hooks/web/useLocale.ts b/src/hooks/web/useLocale.ts index 6e2849a..a7a5ede 100644 --- a/src/hooks/web/useLocale.ts +++ b/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) diff --git a/src/locales/en.ts b/src/locales/en.ts index 17e5b67..3b6c925 100644 --- a/src/locales/en.ts +++ b/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', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 47100df..ecc254e 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -6,6 +6,11 @@ export default { endTimeText: '结束时间', login: '登录' }, + size: { + default: '默认', + large: '大', + small: '小' + }, formDemo: { input: '输入框', inputNumber: '数字输入框', diff --git a/src/plugins/elementPlus/index.ts b/src/plugins/elementPlus/index.ts index 97b9a05..127cefe 100644 --- a/src/plugins/elementPlus/index.ts +++ b/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) }) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 2dadf98..8384401 100644 --- a/src/store/modules/app.ts +++ b/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: { diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index e251dce..acab556 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -1,34 +1,38 @@ diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue new file mode 100644 index 0000000..e632421 --- /dev/null +++ b/src/views/Login/components/LoginForm.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/views/Login/components/index.ts b/src/views/Login/components/index.ts new file mode 100644 index 0000000..aee8f27 --- /dev/null +++ b/src/views/Login/components/index.ts @@ -0,0 +1,3 @@ +import LoginForm from './LoginForm.vue' + +export { LoginForm } diff --git a/windi.config.ts b/windi.config.ts index 76191df..f989133 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -12,14 +12,14 @@ export default defineConfig({ darkMode: 'class', attributify: false, theme: { - extend: { - screens: { - sm: '768px', - md: '992px', - lg: '1200px', - xl: '1920px' - } - } + // extend: { + // screens: { + // sm: '768px', + // md: '992px', + // lg: '1200px', + // xl: '1920px' + // } + // } // height: { // ...range(50).map((i) => `h-${i}px`) // }, @@ -29,5 +29,17 @@ export default defineConfig({ // // ...range(50).map((i) => `mb-${i}px`), // // ...range(50).map((i) => `ml-${i}px`) // } - } + }, + Plugin: [ + require('@windicss/plugin-animations')({ + settings: { + animatedSpeed: 1000, + heartBeatSpeed: 1000, + hingeSpeed: 2000, + bounceInSpeed: 750, + bounceOutSpeed: 750, + animationDelaySpeed: 1000 + } + }) + ] })