feat(Animate): Add animate.css

package.json

@@ -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",

pnpm-lock.yaml

@@ -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:
       {

src/components/Icon/src/Icon.vue

@@ -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>

src/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -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">

src/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -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>

src/main.ts

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

src/plugins/animate/index.ts

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

src/views/Login/Login.vue

@@ -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>

src/views/Login/components/LoginForm.vue

@@ -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>

windi.config.ts

@@ -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
+  //     }
+  //   })
+  // ]
 })