From 34f0951364a773014b4b038787925fa8be8dd529 Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Fri, 12 Aug 2022 12:54:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BA=86icon=E7=9A=84=E5=8C=85=E8=A3=85=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96login=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EIcon.vue                     | 20 ++++++------
 src/layouts/components/header/Breadcrumb.vue |  4 ---
 src/layouts/components/header/UserCenter.vue |  2 +-
 src/views/login/index.vue                    | 34 +++++++++++++++++---
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/EIcon.vue b/src/components/EIcon.vue
index 384a005..2389ee7 100644
--- a/src/components/EIcon.vue
+++ b/src/components/EIcon.vue
@@ -1,19 +1,17 @@
 <template>
-  <Icon :icon="props.icon" class="inline-block" :width="props.size" />
+  <n-icon :size="props.size || 18" :depth="props.depth" :color="props.color">
+    <Icon :icon="props.icon" />
+  </n-icon>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-const props = defineProps({
-  icon: {
-    type: String,
-    default: 'icon-park-outline:game',
-  },
-  size: {
-    type: Number,
-    default: 18,
-  },
-});
+const props = defineProps<{
+  icon: string;
+  color?: string;
+  size?: number;
+  depth?: 1 | 2 | 3 | 4 | 5;
+}>();
 </script>
 
 <style scoped></style>
diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue
index fa16463..69e7c74 100644
--- a/src/layouts/components/header/Breadcrumb.vue
+++ b/src/layouts/components/header/Breadcrumb.vue
@@ -1,9 +1,5 @@
 <template>
   <n-breadcrumb class="px-5">
-    <n-breadcrumb-item class="align-middle">
-      <e-icon icon="icon-park-outline:home-two" />
-      首页
-    </n-breadcrumb-item>
     <n-breadcrumb-item v-for="(item, index) in routes" :key="index">
       <e-icon :icon="item.meta.icon" />
       {{ item.meta.title }}
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
index d2c6bc1..4bd94d9 100644
--- a/src/layouts/components/header/UserCenter.vue
+++ b/src/layouts/components/header/UserCenter.vue
@@ -1,7 +1,7 @@
 <template>
   <n-dropdown trigger="hover" :options="options" @select="handleSelect">
     <HeaderButton>
-      <n-avatar size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
+      <n-avatar round size="large" src="https://z3.ax1x.com/2021/10/29/5jnWgf.jpg" />
       {{ authStore.name }}
     </HeaderButton>
   </n-dropdown>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 9127c6d..cfe55e7 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -12,13 +12,40 @@
         <n-p depth="3">高效、简约、可能对你有点帮助</n-p>
         <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
           <n-form-item path="account">
-            <n-input v-model:value="formValue.account" placeholder="输入账号" round />
+            <n-input v-model:value="formValue.account" placeholder="输入账号" round>
+              <template #prefix>
+                <e-icon icon="icon-park-outline:woman" />
+              </template>
+            </n-input>
           </n-form-item>
           <n-form-item path="pwd">
-            <n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" round />
+            <n-input
+              v-model:value="formValue.pwd"
+              type="password"
+              placeholder="输入密码"
+              show-password-on="click"
+              round
+            >
+              <template #prefix>
+                <e-icon icon="icon-park-outline:lock" />
+              </template>
+              <template #password-invisible-icon>
+                <e-icon icon="icon-park-outline:preview-close-one" />
+              </template>
+              <template #password-visible-icon>
+                <e-icon icon="icon-park-outline:preview-open" />
+              </template>
+            </n-input>
           </n-form-item>
           <n-form-item path="code">
-            <n-input v-model:value="formValue.code" placeholder="输入验证码" round />
+            <n-space align="center">
+              <n-input v-model:value="formValue.code" placeholder="输入验证码" round>
+                <template #prefix>
+                  <e-icon icon="icon-park-outline:message" />
+                </template>
+              </n-input>
+              <span>这边可以放点什么</span>
+            </n-space>
           </n-form-item>
           <n-space vertical :size="24">
             <div class="flex-y-center justify-between">
@@ -28,7 +55,6 @@
             <n-button w-full type="primary" round size="large" @click="validateAll">登录</n-button>
           </n-space>
         </n-form>
-
         <n-divider><span op-50>其他登录</span></n-divider>
       </div>
     </div>