feat(frontend): migrate BaseInput to IconPark

frontend_nuxt/components/BaseInput.vue

@@ -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 {

frontend_nuxt/components/Dropdown.vue

@@ -19,14 +19,6 @@
                     class="option-icon"
                     :alt="label.name"
                   />
-                  <component
-                    v-else-if="isIconComponent(label.icon)"
-                    :is="label.icon"
-                    class="option-icon"
-                    theme="outline"
-                    size="16"
-                    fill="currentColor"
-                  />
                   <i v-else :class="['option-icon', label.icon]"></i>
                 </template>
                 <span>{{ label.name }}</span>
@@ -46,14 +38,6 @@
                   class="option-icon"
                   :alt="selectedLabels[0].name"
                 />
-                <component
-                  v-else-if="isIconComponent(selectedLabels[0].icon)"
-                  :is="selectedLabels[0].icon"
-                  class="option-icon"
-                  theme="outline"
-                  size="16"
-                  fill="currentColor"
-                />
                 <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
               </template>
               <span>{{ selectedLabels[0].name }}</span>
@@ -61,7 +45,7 @@
           </span>
           <span v-else class="placeholder">{{ placeholder }}</span>
         </template>
-        <Down class="dropdown-caret" theme="outline" size="16" fill="currentColor" />
+        <i class="fas fa-caret-down dropdown-caret"></i>
       </slot>
     </div>
     <div
@@ -70,7 +54,7 @@
       v-click-outside="close"
     >
       <div v-if="showSearch" class="dropdown-search">
-        <SearchIcon class="search-icon" theme="outline" size="16" fill="currentColor" />
+        <i class="fas fa-search search-icon"></i>
         <input type="text" v-model="search" placeholder="搜索" />
       </div>
       <div v-if="loading" class="dropdown-loading">
@@ -91,14 +75,6 @@
                 class="option-icon"
                 :alt="o.name"
               />
-              <component
-                v-else-if="isIconComponent(o.icon)"
-                :is="o.icon"
-                class="option-icon"
-                theme="outline"
-                size="16"
-                fill="currentColor"
-              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -109,12 +85,12 @@
     <Teleport to="body">
       <div v-if="open && isMobile" class="dropdown-mobile-page">
         <div class="dropdown-mobile-header">
-          <ArrowLeft @click="close" theme="outline" size="16" fill="currentColor" />
+          <i class="fas fa-arrow-left" @click="close"></i>
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
         <div class="dropdown-mobile-menu">
           <div v-if="showSearch" class="dropdown-search">
-            <SearchIcon class="search-icon" theme="outline" size="16" fill="currentColor" />
+            <i class="fas fa-search search-icon"></i>
             <input type="text" v-model="search" placeholder="搜索" />
           </div>
           <div v-if="loading" class="dropdown-loading">
@@ -135,14 +111,6 @@
                     class="option-icon"
                     :alt="o.name"
                   />
-                  <component
-                    v-else-if="isIconComponent(o.icon)"
-                    :is="o.icon"
-                    class="option-icon"
-                    theme="outline"
-                    size="16"
-                    fill="currentColor"
-                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>
@@ -281,11 +249,6 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    const isIconComponent = (icon) => {
-      if (!icon) return false
-      return !icon.includes(' ')
-    }
-
     expose({ toggle, close })
 
     return {
@@ -300,7 +263,6 @@ export default {
       isSelected,
       loading,
       isImageIcon,
-      isIconComponent,
       setSearch,
       isMobile,
     }

frontend_nuxt/pages/forgot-password.vue

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

frontend_nuxt/pages/login.vue

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

frontend_nuxt/pages/settings.vue

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

frontend_nuxt/pages/signup.vue

@@ -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"

frontend_nuxt/plugins/iconpark.client.ts

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