From d59c1370362905592fed18061c7fda6bb97eb6d2 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 9 May 2025 18:16:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8Dnaive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cropper/cropper-modal.vue  | 258 ++++++++++--------
 .../src/views/_core/profile/index.vue         |  16 +-
 .../_core/profile/modules/profile-user.vue    |  19 +-
 .../views/_core/profile/modules/reset-pwd.vue |  15 +-
 .../_core/profile/modules/user-social.vue     |   6 +-
 5 files changed, 173 insertions(+), 141 deletions(-)

diff --git a/apps/web-naive/src/components/cropper/cropper-modal.vue b/apps/web-naive/src/components/cropper/cropper-modal.vue
index d14bf71f..2f2922cf 100644
--- a/apps/web-naive/src/components/cropper/cropper-modal.vue
+++ b/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,130 +129,148 @@ async function handleOk() {
         </div>
 
         <div :class="`${prefixCls}-toolbar`">
-          <NUpload
-            :before-upload="handleBeforeUpload"
-            :file-list="[]"
-            accept="image/*"
-          >
-            <NTooltip :title="$t('ui.cropper.selectImage')" placement="bottom">
-              <NButton size="small" type="primary">
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--upload-outlined]"></span>
-                  </div>
-                </template>
-              </NButton>
-            </NTooltip>
-          </NUpload>
           <NSpace>
-            <NTooltip :title="$t('ui.cropper.btn_reset')" placement="bottom">
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('reset')"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--reload-outlined]"></span>
-                  </div>
-                </template>
-              </NButton>
-            </NTooltip>
-            <NTooltip
-              :title="$t('ui.cropper.btn_rotate_left')"
-              placement="bottom"
+            <NUpload
+              @before-upload="handleBeforeUpload"
+              :file-list="[]"
+              accept="image/*"
             >
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('rotate', -45)"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span
-                      class="icon-[ant-design--rotate-left-outlined]"
-                    ></span>
-                  </div>
+              <NTooltip placement="bottom">
+                <template #trigger>
+                  <NButton size="small" type="primary">
+                    <template #icon>
+                      <div class="flex items-center justify-center">
+                        <span class="icon-[ant-design--upload-outlined]"></span>
+                      </div>
+                    </template>
+                  </NButton>
                 </template>
-              </NButton>
+                {{ $t('ui.cropper.selectImage') }}
+              </NTooltip>
+            </NUpload>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('reset')"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span class="icon-[ant-design--reload-outlined]"></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_reset') }}
             </NTooltip>
-            <NTooltip
-              :title="$t('ui.cropper.btn_rotate_right')"
-              placement="bottom"
-            >
-              <NButton
-                :disabled="!src"
-                pre-icon="ant-design:rotate-right-outlined"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('rotate', 45)"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span
-                      class="icon-[ant-design--rotate-right-outlined]"
-                    ></span>
-                  </div>
-                </template>
-              </NButton>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('rotate', -45)"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span
+                        class="icon-[ant-design--rotate-left-outlined]"
+                      ></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_rotate_left') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_scale_x')" placement="bottom">
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('scaleX')"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[vaadin--arrows-long-h]"></span>
-                  </div>
-                </template>
-              </NButton>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  pre-icon="ant-design:rotate-right-outlined"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('rotate', 45)"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span
+                        class="icon-[ant-design--rotate-right-outlined]"
+                      ></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_rotate_right') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_scale_y')" placement="bottom">
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('scaleY')"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[vaadin--arrows-long-v]"></span>
-                  </div>
-                </template>
-              </NButton>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('scaleX')"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span class="icon-[vaadin--arrows-long-h]"></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_scale_x') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_zoom_in')" placement="bottom">
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('zoom', 0.1)"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--zoom-in-outlined]"></span>
-                  </div>
-                </template>
-              </NButton>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('scaleY')"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span class="icon-[vaadin--arrows-long-v]"></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_scale_y') }}
             </NTooltip>
-            <NTooltip :title="$t('ui.cropper.btn_zoom_out')" placement="bottom">
-              <NButton
-                :disabled="!src"
-                size="small"
-                type="primary"
-                @click="handlerToolbar('zoom', -0.1)"
-              >
-                <template #icon>
-                  <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--zoom-out-outlined]"></span>
-                  </div>
-                </template>
-              </NButton>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('zoom', 0.1)"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span class="icon-[ant-design--zoom-in-outlined]"></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_zoom_in') }}
+            </NTooltip>
+            <NTooltip placement="bottom">
+              <template #trigger>
+                <NButton
+                  :disabled="!src"
+                  size="small"
+                  type="primary"
+                  @click="handlerToolbar('zoom', -0.1)"
+                >
+                  <template #icon>
+                    <div class="flex items-center justify-center">
+                      <span class="icon-[ant-design--zoom-out-outlined]"></span>
+                    </div>
+                  </template>
+                </NButton>
+              </template>
+              {{ $t('ui.cropper.btn_zoom_out') }}
             </NTooltip>
           </NSpace>
         </div>
diff --git a/apps/web-naive/src/views/_core/profile/index.vue b/apps/web-naive/src/views/_core/profile/index.vue
index 9bd5fa84..71d78b4a 100644
--- a/apps/web-naive/src/views/_core/profile/index.vue
+++ b/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>
diff --git a/apps/web-naive/src/views/_core/profile/modules/profile-user.vue b/apps/web-naive/src/views/_core/profile/modules/profile-user.vue
index 7355e74f..84f43cfc 100644
--- a/apps/web-naive/src/views/_core/profile/modules/profile-user.vue
+++ b/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">
diff --git a/apps/web-naive/src/views/_core/profile/modules/reset-pwd.vue b/apps/web-naive/src/views/_core/profile/modules/reset-pwd.vue
index 70d70b7d..3d3dc3a6 100644
--- a/apps/web-naive/src/views/_core/profile/modules/reset-pwd.vue
+++ b/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
diff --git a/apps/web-naive/src/views/_core/profile/modules/user-social.vue b/apps/web-naive/src/views/_core/profile/modules/user-social.vue
index 949c934c..2b2693c3 100644
--- a/apps/web-naive/src/views/_core/profile/modules/user-social.vue
+++ b/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>