kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Animate): Add animate.css

This commit is contained in:
陈凯龙 2022-01-06 17:13:13 +08:00
parent 4216f7c218
commit 1436543a5c
10 changed files with 88 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,6 +28,7 @@
"@iconify/iconify": "^2.1.0",
"@vueuse/core": "^7.5.1",
"@zxcvbn-ts/core": "^1.2.0",
"animate.css": "^4.1.1",
"element-plus": "1.3.0-beta.1",
"lodash-es": "^4.17.21",
"pinia": "^2.0.9",
@ -49,7 +50,6 @@
"@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",
"autoprefixer": "^10.4.1",
"commitizen": "^4.2.4",
"eslint": "^8.6.0",

17
pnpm-lock.yaml
View File

@ -16,6 +16,7 @@ specifiers:
'@vueuse/core': ^7.5.1
'@windicss/plugin-animations': ^1.0.9
'@zxcvbn-ts/core': ^1.2.0
animate.css: ^4.1.1
autoprefixer: ^10.4.1
commitizen: ^4.2.4
element-plus: 1.3.0-beta.1
@ -60,6 +61,7 @@ dependencies:
'@iconify/iconify': registry.npmmirror.com/@iconify/iconify/2.1.0
'@vueuse/core': registry.npmmirror.com/@vueuse/core/7.5.1_vue@3.2.26
'@zxcvbn-ts/core': registry.npmmirror.com/@zxcvbn-ts/core/1.2.0
animate.css: registry.npmmirror.com/animate.css/4.1.1
element-plus: registry.npmmirror.com/element-plus/1.3.0-beta.1_vue@3.2.26
lodash-es: registry.nlark.com/lodash-es/4.17.21
pinia: registry.npmmirror.com/pinia/2.0.9_typescript@4.5.4+vue@3.2.26
@ -5212,7 +5214,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=1631501920740&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?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz
}
name: semver
version: 5.7.1
@ -5224,7 +5226,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=1631501920740&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?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz
}
name: semver
version: 6.3.0
@ -8333,6 +8335,17 @@ packages:
uri-js: registry.nlark.com/uri-js/4.4.1
dev: true
registry.npmmirror.com/animate.css/4.1.1:
resolution:
{
integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/animate.css/download/animate.css-4.1.1.tgz
}
name: animate.css
version: 4.1.1
dev: false
registry.npmmirror.com/arg/4.1.3:
resolution:
{

6
src/components/Icon/src/Icon.vue
View File

@ -13,7 +13,7 @@ const props = defineProps({
// icon name
icon: propTypes.string,
// icon color
color: propTypes.string,
color: propTypes.string.def('#888'),
// icon size
size: propTypes.number.def(16)
})
@ -66,12 +66,12 @@ watch(
</script>
<template>
<ElIcon :class="[prefixCls, $attrs.class]" :size="size" :color="color">
<ElIcon :class="prefixCls" :size="size" :color="color">
<svg v-if="isLocal" aria-hidden="true">
<use :xlink:href="symbolId" />
</svg>
<span v-else ref="elRef" :style="getIconifyStyle">
<span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
<span class="iconify" :data-icon="symbolId"></span>
</span>
</ElIcon>

11
src/components/LocaleDropdown/src/LocaleDropdown.vue
View File

@ -15,19 +15,24 @@ const textColor = useCssVar('--el-text-color-primary', document.documentElement)
function setLang(lang: LocaleType) {
if (lang === unref(currentLang).lang) return
// 需要重新加载页面让整个语言多初始化
window.location.reload()
localeStore.setLocale({
lang
})
const { changeLocale } = useLocale()
changeLocale(lang)
// 需要重新加载页面让整个语言多初始化
window.location.reload()
}
</script>
<template>
<ElDropdown trigger="click" @command="setLang">
<Icon icon="ion:language-sharp" :color="textColor" class="cursor-pointer" />
<Icon
icon="ion:language-sharp"
:color="textColor"
class="cursor-pointer"
:class="$attrs.class"
/>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">

10
src/components/ThemeSwitch/src/ThemeSwitch.vue
View File

@ -6,9 +6,9 @@ import { useCssVar } from '@vueuse/core'
import { useDesign } from '@/hooks/web/useDesign'
import { useIcon } from '@/hooks/web/useIcon'
const Sun = useIcon({ icon: 'emojione-monotone:sun' })
const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon' })
const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
const appStore = useAppStore()
@ -43,10 +43,4 @@ function themeChange(val: boolean) {
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-theme-switch';
.@{prefix-cls} {
:deep(.el-icon) {
color: #fde047;
}
}
</style>

3
src/main.ts
View File

@ -19,6 +19,9 @@ import { setupElementPlus } from '@/plugins/elementPlus'
// 引入全局样式
import '@/styles/index.less'
// 引入动画
import '@/plugins/animate'
// 路由
import { setupRouter } from './router'

1
src/plugins/animate/index.ts Normal file
View File

@ -0,0 +1 @@
import 'animate.css'

39
src/views/Login/Login.vue
View File

@ -17,22 +17,28 @@ const prefixCls = getPrefixCls('login')
</script>
<template>
<div :class="prefixCls" class="h-[100%] relative overflow-hidden <xl:bg-v-dark">
<div :class="prefixCls" class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px">
<div class="relative h-full flex mx-auto">
<div
:class="`${prefixCls}__left`"
class="flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden"
>
<div class="flex items-center text-white">
<div class="flex items-center relative text-white">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<div class="flex justify-center items-center h-[calc(100%-60px)]">
<div>
<img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-350px" />
<div class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div class="mt-5 font-normal text-white text-14px"> {{ t('login.message') }} </div>
</div>
<TransitionGroup
appear
tag="div"
enter-active-class="animate__animated animate__bounceInLeft"
>
<img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />
<div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div>
<div class="mt-5 font-normal text-white text-14px" key="3">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div class="flex-1 @2xl:p-30px @xl:p-30px @md:p-30px <md:pt-30px dark:bg-v-dark relative">
@ -44,15 +50,16 @@ const prefixCls = getPrefixCls('login')
<div class="flex justify-end items-center space-x-10px">
<ThemeSwitch />
<LocaleDropdown />
<LocaleDropdown class="<xl:!text-white dark:!text-white" />
</div>
</div>
<div
:class="`${prefixCls}__form`"
class="flex justify-center items-center <xl:(bg-white rounded-3xl) absolute top-[50%] left-[50%] w-[100%] @md:w-[calc(100%-60px)]"
>
<LoginForm class="p-20px" />
</div>
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px"
>
<LoginForm class="p-20px h-auto <xl:(bg-white rounded-3xl)" />
</div>
</Transition>
</div>
</div>
</div>
@ -76,9 +83,5 @@ const prefixCls = getPrefixCls('login')
content: '';
}
}
&__form {
transform: translate(-50%, -50%);
}
}
</style>

33
src/views/Login/components/LoginForm.vue
View File

@ -68,14 +68,7 @@ const remember = ref(false)
</script>
<template>
<Form
:schema="schema"
:rules="rules"
label-position="top"
hide-required-asterisk
size="large"
class="@2xl:max-w-500px @xl:max-w-400px"
>
<Form :schema="schema" :rules="rules" label-position="top" hide-required-asterisk size="large">
<template #tool>
<div class="flex justify-between items-center w-[100%]">
<ElCheckbox v-model="remember" :label="t('login.remember')" size="small" />
@ -89,11 +82,27 @@ const remember = ref(false)
<template #otherIcon>
<div class="flex justify-between w-[100%]">
<Icon icon="ant-design:github-filled" :size="iconSize" class="cursor-pointer" />
<Icon icon="ant-design:wechat-filled" :size="iconSize" class="cursor-pointer" />
<Icon icon="ant-design:alipay-circle-filled" :size="iconSize" class="cursor-pointer" />
<Icon icon="ant-design:weibo-circle-filled" :size="iconSize" class="cursor-pointer" />
<Icon icon="ant-design:github-filled" :size="iconSize" class="cursor-pointer anticon" />
<Icon icon="ant-design:wechat-filled" :size="iconSize" class="cursor-pointer anticon" />
<Icon
icon="ant-design:alipay-circle-filled"
:size="iconSize"
class="cursor-pointer anticon"
/>
<Icon
icon="ant-design:weibo-circle-filled"
:size="iconSize"
class="cursor-pointer anticon"
/>
</div>
</template>
</Form>
</template>
<style lang="less" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
</style>

26
windi.config.ts
View File

@ -33,17 +33,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
}
})
]
}
// Plugin: [
// require('@windicss/plugin-animations')({
// settings: {
// animatedSpeed: 1000,
// heartBeatSpeed: 1000,
// hingeSpeed: 2000,
// bounceInSpeed: 750,
// bounceOutSpeed: 750,
// animationDelaySpeed: 1000
// }
// })
// ]
})