feat: 适配naive

apps/web-naive/src/components/cropper/cropper-modal.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { UploadFileInfo } from 'naive-ui';
+
 import type { CropendResult, CropperModalProps, CropperType } from './typing';
 
 import { ref } from 'vue';
@@ -49,13 +51,13 @@ function modalLoading(loading: boolean) {
 }
 
 // Block upload
-function handleBeforeUpload(file: File) {
+function handleBeforeUpload(file: UploadFileInfo) {
   if (props.size > 0 && file.size > 1024 * 1024 * props.size) {
     emit('uploadError', { msg: $t('ui.cropper.imageTooBig') });
     return false;
   }
   const reader = new FileReader();
-  reader.readAsDataURL(file);
+  reader.readAsDataURL(file.file);
   src.value = '';
   previewSource.value = '';
   reader.addEventListener('load', (e) => {
@@ -111,7 +113,7 @@ async function handleOk() {
     :confirm-text="$t('ui.cropper.okText')"
     :fullscreen-button="false"
     :title="$t('ui.cropper.modalTitle')"
-    class="w-[800px]"
+    class="w-[50%]"
   >
     <div :class="prefixCls">
       <div :class="`${prefixCls}-left`" class="w-full">
@@ -127,12 +129,14 @@ async function handleOk() {
         </div>
 
         <div :class="`${prefixCls}-toolbar`">
+          <NSpace>
             <NUpload
-            :before-upload="handleBeforeUpload"
+              @before-upload="handleBeforeUpload"
               :file-list="[]"
               accept="image/*"
             >
-            <NTooltip :title="$t('ui.cropper.selectImage')" placement="bottom">
+              <NTooltip placement="bottom">
+                <template #trigger>
                   <NButton size="small" type="primary">
                     <template #icon>
                       <div class="flex items-center justify-center">
@@ -140,10 +144,12 @@ async function handleOk() {
                       </div>
                     </template>
                   </NButton>
+                </template>
+                {{ $t('ui.cropper.selectImage') }}
               </NTooltip>
             </NUpload>
-          <NSpace>
+            <NTooltip placement="bottom">
-            <NTooltip :title="$t('ui.cropper.btn_reset')" placement="bottom">
+              <template #trigger>
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -156,11 +162,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_reset') }}
             </NTooltip>
-            <NTooltip
+            <NTooltip placement="bottom">
-              :title="$t('ui.cropper.btn_rotate_left')"
+              <template #trigger>
-              placement="bottom"
-            >
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -175,11 +181,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_rotate_left') }}
             </NTooltip>
-            <NTooltip
+            <NTooltip placement="bottom">
-              :title="$t('ui.cropper.btn_rotate_right')"
+              <template #trigger>
-              placement="bottom"
-            >
                 <NButton
                   :disabled="!src"
                   pre-icon="ant-design:rotate-right-outlined"
@@ -195,8 +201,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_rotate_right') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_scale_x')" placement="bottom">
+            <NTooltip placement="bottom">
+              <template #trigger>
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -209,8 +218,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_scale_x') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_scale_y')" placement="bottom">
+            <NTooltip placement="bottom">
+              <template #trigger>
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -223,8 +235,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_scale_y') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_zoom_in')" placement="bottom">
+            <NTooltip placement="bottom">
+              <template #trigger>
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -237,8 +252,11 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_zoom_in') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_zoom_out')" placement="bottom">
+            <NTooltip placement="bottom">
+              <template #trigger>
                 <NButton
                   :disabled="!src"
                   size="small"
@@ -251,6 +269,8 @@ async function handleOk() {
                     </div>
                   </template>
                 </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_zoom_out') }}
             </NTooltip>
           </NSpace>
         </div>

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 v-model:value="activeName" class="-mt-4">
-          <NTabs.TabPane key="basicInfo" tab="基本设置">
+          <NTabPane name="basicInfo" tab="基本设置">
             <BaseInfo :profile="profile" @success="refreshProfile" />
-          </NTabs.TabPane>
+          </NTabPane>
-          <NTabs.TabPane key="resetPwd" tab="密码设置">
+          <NTabPane name="resetPwd" tab="密码设置">
             <ResetPwd />
-          </NTabs.TabPane>
+          </NTabPane>
-          <NTabs.TabPane key="userSocial" tab="社交绑定" force-render>
+          <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,7 +45,8 @@ async function handelUpload({
 <template>
   <div v-if="profile">
     <div class="flex flex-col items-center">
-      <NTooltip title="点击上传头像">
+      <NTooltip>
+        <template #trigger>
           <CropperAvatar
             :show-btn="false"
             :upload-api="handelUpload"
@@ -53,6 +54,8 @@ async function handelUpload({
             :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>