fix Bug or esLink formatting

src/views/login/index.vue

@@ -4,41 +4,46 @@
     <div class="view-account-container">
       <div class="view-account-top">
         <div class="view-account-top-logo">
-          <img src="~@/assets/images/account-logo.png" alt=""/>
+          <img src="~@/assets/images/account-logo.png" alt="" />
         </div>
         <div class="view-account-top-desc">Naive Ui Admin中台前端/设计解决方案</div>
       </div>
       <div class="view-account-form">
-        <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+        <n-form
+          ref="formRef"
+          label-placement="left"
+          size="large"
+          :model="formInline"
+          :rules="rules"
+        >
           <n-form-item path="username">
             <n-input v-model:value="formInline.username" placeholder="请输入用户名">
               <template #prefix>
                 <n-icon size="18" color="#808695">
-                  <PersonOutline/>
+                  <PersonOutline />
                 </n-icon>
               </template>
             </n-input>
           </n-form-item>
           <n-form-item path="password">
-            <n-input v-model:value="formInline.password" type="password" show-password-toggle placeholder="请输入密码">
+            <n-input
+              v-model:value="formInline.password"
+              type="password"
+              show-password-toggle
+              placeholder="请输入密码"
+            >
               <template #prefix>
                 <n-icon size="18" color="#808695">
-                  <LockClosedOutline/>
+                  <LockClosedOutline />
                 </n-icon>
               </template>
             </n-input>
           </n-form-item>
-<!--          <n-form-item-->
-<!--              path="isCaptcha">-->
-<!--            <div class="w-full">-->
-<!--              <mi-captcha-->
-<!--                  width="384"-->
-<!--                  theme-color="#2d8cf0"-->
-<!--                  :logo="logo"-->
-<!--                  @success="onAuthCode"-->
-<!--              ></mi-captcha>-->
-<!--            </div>-->
-<!--          </n-form-item>-->
+          <n-form-item path="isCaptcha">
+            <div class="w-full">
+              <mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
+            </div>
+          </n-form-item>
           <n-form-item class="default-color">
             <div class="flex justify-between">
               <div class="flex-initial">
@@ -62,18 +67,18 @@
               <div class="flex-initial mx-2">
                 <a href="javascript:;">
                   <n-icon size="24" color="#2d8cf0">
-                    <LogoGithub/>
+                    <LogoGithub />
                   </n-icon>
                 </a>
               </div>
               <div class="flex-initial mx-2">
                 <a href="javascript:;">
                   <n-icon size="24" color="#2d8cf0">
-                    <LogoFacebook/>
+                    <LogoFacebook />
                   </n-icon>
                 </a>
               </div>
-              <div class="flex-initial" style="margin-left:auto">
+              <div class="flex-initial" style="margin-left: auto">
                 <a href="javascript:;">注册账号</a>
               </div>
             </div>
@@ -85,142 +90,143 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref } from 'vue'
-import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5'
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/store/modules/user'
-import { useMessage } from 'naive-ui'
-import { ResultEnum } from '@/enums/httpEnum'
-import logo from '@/assets/images/logo.png'
+  import { defineComponent, reactive, toRefs, ref } from 'vue';
+  import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
+  import { useMessage } from 'naive-ui';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import logo from '@/assets/images/logo.png';
 
-interface FormState {
-  username: string
-  password: string
-}
-
-export default defineComponent({
-  components: { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook },
-  setup() {
-    const formRef = ref()
-    const message = useMessage()
-    const state = reactive({
-      loading: false,
-      autoLogin: true,
-      formInline: {
-        username: 'admin',
-        password: '123456',
-        isCaptcha: true
-      }
-    })
-    const rules = {
-      username: { required: true, message: '请输入用户名', trigger: 'blur' },
-      password: { required: true, message: '请输入密码', trigger: 'blur' },
-      isCaptcha: {
-        required: true, type: 'boolean', trigger: 'change',
-        message: '请点击按钮进行验证码校验',
-        validator: (_, value) => value === true,
-      },
-    }
-    const userStore = useUserStore();
-
-    const router = useRouter()
-    const route = useRoute()
-    let loadingMessage
-    const handleSubmit = (e) => {
-      e.preventDefault()
-      formRef.value.validate(async (errors) => {
-        if (!errors) {
-          const { username, password } = state.formInline
-          loadingMessage = message.loading('登录中...')
-          state.loading = true
-
-          const params: FormState = {
-            username,
-            password
-          }
-
-          const { code, message: msg } = await userStore.login(params)
-
-          if (code == ResultEnum.SUCCESS) {
-            const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
-            message.success('登录成功！')
-            router.replace(toPath).then((_) => {
-              if (route.name == 'login') {
-                router.replace('/')
-              }
-            })
-          } else {
-            message.info(msg || '登录失败')
-          }
-        } else {
-          message.error('请填写完整信息，并且进行验证码校验')
-        }
-      })
-    }
-
-    function onAuthCode() {
-      state.formInline.isCaptcha = true
-    }
-
-    return {
-      ...toRefs(state),
-      formRef,
-      rules,
-      logo,
-      handleSubmit,
-      onAuthCode
-    }
+  interface FormState {
+    username: string;
+    password: string;
   }
-})
+
+  export default defineComponent({
+    components: { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook },
+    setup() {
+      const formRef = ref();
+      const message = useMessage();
+      const state = reactive({
+        loading: false,
+        autoLogin: true,
+        formInline: {
+          username: 'admin',
+          password: '123456',
+          isCaptcha: true,
+        },
+      });
+      const rules = {
+        username: { required: true, message: '请输入用户名', trigger: 'blur' },
+        password: { required: true, message: '请输入密码', trigger: 'blur' },
+        isCaptcha: {
+          required: true,
+          type: 'boolean',
+          trigger: 'change',
+          message: '请点击按钮进行验证码校验',
+          validator: (_, value) => value === true,
+        },
+      };
+      const userStore = useUserStore();
+
+      const router = useRouter();
+      const route = useRoute();
+      const handleSubmit = (e) => {
+        e.preventDefault();
+        formRef.value.validate(async (errors) => {
+          if (!errors) {
+            const { username, password } = state.formInline;
+            message.loading('登录中...');
+            state.loading = true;
+
+            const params: FormState = {
+              username,
+              password,
+            };
+
+            const { code, message: msg } = await userStore.login(params);
+
+            if (code == ResultEnum.SUCCESS) {
+              const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+              message.success('登录成功！');
+              router.replace(toPath).then((_) => {
+                if (route.name == 'login') {
+                  router.replace('/');
+                }
+              });
+            } else {
+              message.info(msg || '登录失败');
+            }
+          } else {
+            message.error('请填写完整信息，并且进行验证码校验');
+          }
+        });
+      };
+
+      function onAuthCode() {
+        state.formInline.isCaptcha = true;
+      }
+
+      return {
+        ...toRefs(state),
+        formRef,
+        rules,
+        logo,
+        handleSubmit,
+        onAuthCode,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.view-account {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-
-  &-container {
-    flex: 1;
-    padding: 32px 0;
-    width: 384px;
-    margin: 0 auto;
-  }
-
-  &-top {
-    padding: 32px 0;
-    text-align: center;
-
-    &-desc {
-      font-size: 14px;
-      color: #808695;
-    }
-  }
-
-  &-other {
-    width: 100%;
-  }
-
-  .default-color {
-    color: #515a6e;
-
-    .ant-checkbox-wrapper {
-      color: #515a6e;
-    }
-  }
-}
-
-@media (min-width: 768px) {
   .view-account {
-    background-image: url('@/assets/images/login.svg');
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+
+    &-container {
+      flex: 1;
+      padding: 32px 0;
+      width: 384px;
+      margin: 0 auto;
+    }
+
+    &-top {
+      padding: 32px 0;
+      text-align: center;
+
+      &-desc {
+        font-size: 14px;
+        color: #808695;
+      }
+    }
+
+    &-other {
+      width: 100%;
+    }
+
+    .default-color {
+      color: #515a6e;
+
+      .ant-checkbox-wrapper {
+        color: #515a6e;
+      }
+    }
   }
 
-  .page-account-container {
-    padding: 32px 0 24px 0;
+  @media (min-width: 768px) {
+    .view-account {
+      background-image: url('@/assets/images/login.svg');
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: 100%;
+    }
+
+    .page-account-container {
+      padding: 32px 0 24px 0;
+    }
   }
-}
 </style>