perf(components): 增加登录按钮载入效果

build/plugins/unplugin.ts

@@ -1,6 +1,6 @@
 import Components from 'unplugin-vue-components/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
-import Icons from 'unplugin-icons/vite';
+import Icons from 'unplugin-icons/vite'; // https://github.com/antfu/unplugin-icons
 import IconsResolver from 'unplugin-icons/resolver';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
 import path from 'path';
@@ -12,6 +12,7 @@ export default [
   }),
   Icons({
     /* options */
+    defaultStyle: 'display:inline-block',
     compiler: 'vue3',
   }),
   createSvgIconsPlugin({

src/layouts/components/common/HeaderButton.vue

@@ -1,5 +1,8 @@
 <template>
-  <n-space align="center" class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer">
+  <n-space
+    align="center"
+    class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer transition duration-300"
+  >
     <slot />
   </n-space>
 </template>

src/layouts/components/header/UserCenter.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown trigger="click" :options="options" @select="handleSelect">
     <HeaderButton>
-      <n-avatar round size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
+      <n-avatar round size="large" :src="authStore.userInfo?.avatar" />
       {{ authStore.userInfo?.realName }}
     </HeaderButton>
   </n-dropdown>

src/types/global.d.ts

@@ -1,7 +1,3 @@
-import 'vue-router';
-declare module 'vue-router' {
-  interface RouteMeta extends AppRoute.RouteMeta {}
-}
 interface Window {
   $loadingBar?: import('naive-ui').LoadingBarApiInjection;
   $dialog?: import('naive-ui').DialogApiInjection;

src/types/route.d.ts

@@ -1,3 +1,8 @@
+import 'vue-router';
+declare module 'vue-router' {
+  interface RouteMeta extends AppRoute.RouteMeta {}
+}
+
 declare namespace AppRoute {
   /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
   interface Route {

src/views/login/index.vue

@@ -6,7 +6,8 @@
     <div flex-1 flex-center>
       <div w-full h-xl px-6xl>
         <n-h1 c-blue>
-          <e-icon icon="icon-park-outline:plastic-surgery" :size="28" />
+          <!-- <e-icon icon="icon-park-outline:plastic-surgery" :size="28" /> -->
+          <i-icon-park-outline-plastic-surgery />
           Ench Admin
         </n-h1>
         <n-p depth="3">高效、简约、可能对你有点帮助</n-p>
@@ -52,7 +53,14 @@
               <n-checkbox>记住我</n-checkbox>
               <n-button :text="true">忘记密码？</n-button>
             </div>
-            <n-button w-full type="primary" round size="large" @click="handleLogin">登录</n-button>
+            <n-button w-full type="primary" round size="large" :loading="authStore.loginLoading" @click="handleLogin">
+              <template #icon>
+                <n-icon>
+                  <i-icon-park-outline-six-points />
+                </n-icon>
+              </template>
+              登录
+            </n-button>
           </n-space>
         </n-form>
         <n-divider><span op-50>其他登录</span></n-divider>