feat: 适配naive

apps/web-naive/src/views/_core/profile/index.vue

@@ -5,7 +5,7 @@ import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { NCard, NTabs } from 'naive-ui';
+import { NCard, NTabPane, NTabs } from 'naive-ui';
 
 import { getUserProfile } from '#/api/system/user/profile';
 import { useAuthStore } from '#/store';
@@ -47,16 +47,16 @@ onMounted(loadProfile);
 
       <!-- 右侧 标签页 -->
       <NCard class="ml-3 w-3/5">
-        <NTabs v-model:active-key="activeName" class="-mt-4">
-          <NTabs.TabPane key="basicInfo" tab="基本设置">
+        <NTabs v-model:value="activeName" class="-mt-4">
+          <NTabPane name="basicInfo" tab="基本设置">
             <BaseInfo :profile="profile" @success="refreshProfile" />
-          </NTabs.TabPane>
-          <NTabs.TabPane key="resetPwd" tab="密码设置">
+          </NTabPane>
+          <NTabPane name="resetPwd" tab="密码设置">
             <ResetPwd />
-          </NTabs.TabPane>
-          <NTabs.TabPane key="userSocial" tab="社交绑定" force-render>
+          </NTabPane>
+          <NTabPane name="userSocial" tab="社交绑定" force-render>
             <UserSocial @update:active-name="activeName = $event" />
-          </NTabs.TabPane>
+          </NTabPane>
           <!-- TODO @芋艿：在线设备 -->
         </NTabs>
       </NCard>

apps/web-naive/src/views/_core/profile/modules/profile-user.vue

@@ -45,14 +45,17 @@ async function handelUpload({
 <template>
   <div v-if="profile">
     <div class="flex flex-col items-center">
-      <NTooltip title="点击上传头像">
-        <CropperAvatar
-          :show-btn="false"
-          :upload-api="handelUpload"
-          :value="avatar"
-          :width="120"
-          @change="emit('success')"
-        />
+      <NTooltip>
+        <template #trigger>
+          <CropperAvatar
+            :show-btn="false"
+            :upload-api="handelUpload"
+            :value="avatar"
+            :width="120"
+            @change="emit('success')"
+          />
+        </template>
+        点击上传头像
       </NTooltip>
     </div>
     <div class="mt-8">

apps/web-naive/src/views/_core/profile/modules/reset-pwd.vue

@@ -13,7 +13,10 @@ const [Form, formApi] = useVbenForm({
   },
   schema: [
     {
-      component: 'InputPassword',
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+      },
       fieldName: 'oldPassword',
       label: '旧密码',
       rules: z
@@ -22,7 +25,10 @@ const [Form, formApi] = useVbenForm({
         .max(20, '密码长度不能超过 20 个字符'),
     },
     {
-      component: 'InputPassword',
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+      },
       dependencies: {
         rules(values) {
           return z
@@ -41,7 +47,10 @@ const [Form, formApi] = useVbenForm({
       rules: 'required',
     },
     {
-      component: 'InputPassword',
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+      },
       dependencies: {
         rules(values) {
           return z

apps/web-naive/src/views/_core/profile/modules/user-social.vue

@@ -192,9 +192,9 @@ onMounted(() => {
                     {{ item.socialUser?.nickname || item.socialUser?.openid }}
                   </template>
                   <template v-else>
-                    绑定{{
-                      getDictLabel(DICT_TYPE.SYSTEM_SOCIAL_TYPE, item.type)
-                    }}账号
+                    绑定
+                    {{ getDictLabel(DICT_TYPE.SYSTEM_SOCIAL_TYPE, item.type) }}
+                    账号
                   </template>
                 </span>
               </div>