refactor(components): 修改了icon的包装，优化login样式

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({
+const props = defineProps<{
-  icon: {
+  icon: string;
-    type: String,
+  color?: string;
-    default: 'icon-park-outline:game',
+  size?: number;
-  },
+  depth?: 1 | 2 | 3 | 4 | 5;
-  size: {
+}>();
-    type: Number,
-    default: 18,
-  },
-});
 </script>
 
 <style scoped></style>

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

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>

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>