feat(frontend): migrate BaseInput to IconPark

This commit is contained in:
Tim
2025-09-06 01:55:50 +08:00
parent 4a4c256568
commit f5d8f37f96
6 changed files with 19 additions and 19 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div class="base-input">
<i v-if="icon" :class="['base-input-icon', icon]" />
<component v-if="icon" :is="icon" class="base-input-icon" size="14" />
<!-- 普通输入框 -->
<input
@@ -29,7 +29,7 @@ export default {
inheritAttrs: false,
props: {
modelValue: { type: [String, Number], default: '' },
icon: { type: String, default: '' },
icon: { type: [String, Object], default: '' },
type: { type: String, default: 'text' },
textarea: { type: Boolean, default: false },
},
@@ -66,7 +66,6 @@ export default {
.base-input-icon {
opacity: 0.5;
font-size: 14px;
}
.base-input-text {

View File

@@ -2,20 +2,20 @@
<div class="forgot-page">
<div class="forgot-content">
<div class="forgot-title">找回密码</div>
<div v-if="step === 0" class="step-content">
<BaseInput icon="fas fa-envelope" v-model="email" placeholder="邮箱" />
<BaseInput icon="Mail" v-model="email" placeholder="邮箱" />
<div v-if="emailError" class="error-message">{{ emailError }}</div>
<div class="primary-button" @click="sendCode" v-if="!isSending">发送验证码</div>
<div class="primary-button disabled" v-else>发送中...</div>
</div>
<div v-else-if="step === 1" class="step-content">
<BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
<BaseInput icon="Mail" v-model="code" placeholder="邮箱验证码" />
<div class="primary-button" @click="verifyCode" v-if="!isVerifying">验证</div>
<div class="primary-button disabled" v-else>验证中...</div>
</div>
<div v-else class="step-content">
<BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="新密码" />
<BaseInput icon="Lock" v-model="password" type="password" placeholder="新密码" />
<div v-if="passwordError" class="error-message">{{ passwordError }}</div>
<div class="primary-button" @click="resetPassword" v-if="!isResetting">重置密码</div>
<div class="primary-button disabled" v-else>提交中...</div>

View File

@@ -6,9 +6,9 @@
</div>
<div class="email-login-page-content">
<BaseInput icon="fas fa-envelope" v-model="username" placeholder="邮箱/用户名" />
<BaseInput icon="Mail" v-model="username" placeholder="邮箱/用户名" />
<BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="密码" />
<BaseInput icon="Lock" v-model="password" type="password" placeholder="密码" />
<div v-if="!isWaitingForLogin" class="login-page-button-primary" @click="submitLogin">
<div class="login-page-button-text">登录</div>

View File

@@ -23,7 +23,7 @@
</div>
<div class="form-row username-row">
<BaseInput
icon="fas fa-user"
icon="User"
v-model="username"
@input="usernameError = ''"
placeholder="用户名"

View File

@@ -6,16 +6,11 @@
</div>
<div v-if="emailStep === 0" class="email-signup-page-content">
<BaseInput
icon="fas fa-envelope"
v-model="email"
@input="emailError = ''"
placeholder="邮箱"
/>
<BaseInput icon="Mail" v-model="email" @input="emailError = ''" placeholder="邮箱" />
<div v-if="emailError" class="error-message">{{ emailError }}</div>
<BaseInput
icon="fas fa-user"
icon="User"
v-model="username"
@input="usernameError = ''"
placeholder="用户名"
@@ -23,7 +18,7 @@
<div v-if="usernameError" class="error-message">{{ usernameError }}</div>
<BaseInput
icon="fas fa-lock"
icon="Lock"
v-model="password"
@input="passwordError = ''"
type="password"
@@ -51,7 +46,7 @@
</div>
<div v-if="emailStep === 1" class="email-signup-page-content">
<BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
<BaseInput icon="Mail" v-model="code" placeholder="邮箱验证码" />
<div
v-if="!isWaitingForEmailVerified"
class="signup-page-button-primary"

View File

@@ -36,6 +36,9 @@ import {
MessageOne,
AlarmClock,
Bookmark,
Mail,
Lock,
User,
} from '@icon-park/vue-next'
export default defineNuxtPlugin((nuxtApp) => {
@@ -75,4 +78,7 @@ export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('MessageOne', MessageOne)
nuxtApp.vueApp.component('AlarmClock', AlarmClock)
nuxtApp.vueApp.component('Bookmark', Bookmark)
nuxtApp.vueApp.component('Mail', Mail)
nuxtApp.vueApp.component('Lock', Lock)
nuxtApp.vueApp.component('User', User)
})