From c295fdda37eef8e034b283ccd52ce6d2820a3466 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 20 Nov 2025 15:41:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd/ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90=E7=BB=84=E4=BB=B6=E3=80=91cropper=20=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85=E7=9A=84=E4=BB=A3=E7=A0=81=E7=BB=9F=E4=B8=80=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/components/cropper/cropper-modal.vue | 1 -
 apps/web-ele/src/components/cropper/cropper-avatar.vue | 8 ++++++++
 apps/web-ele/src/components/cropper/cropper-modal.vue  | 8 ++++++++
 apps/web-ele/src/components/cropper/cropper.vue        | 1 +
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web-antd/src/components/cropper/cropper-modal.vue b/apps/web-antd/src/components/cropper/cropper-modal.vue
index d2dedb6de..90c9dbc75 100644
--- a/apps/web-antd/src/components/cropper/cropper-modal.vue
+++ b/apps/web-antd/src/components/cropper/cropper-modal.vue
@@ -284,7 +284,6 @@ async function handleOk() {
             class="h-full w-full object-cover"
           />
         </div>
-
         <!-- 头像组合预览 -->
         <template v-if="previewSource">
           <div
diff --git a/apps/web-ele/src/components/cropper/cropper-avatar.vue b/apps/web-ele/src/components/cropper/cropper-avatar.vue
index 0ba42f6bd..e50085f3c 100644
--- a/apps/web-ele/src/components/cropper/cropper-avatar.vue
+++ b/apps/web-ele/src/components/cropper/cropper-avatar.vue
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<CropperAvatarProps>(), {
 const emit = defineEmits(['update:value', 'change']);
 
 const sourceValue = ref(props.value || '');
+// TODO @puhui999：这个有办法去掉么？
 const prefixCls = 'cropper-avatar';
 const [CropperModal, modalApi] = useVbenModal({
   connectedComponent: cropperModal,
@@ -73,12 +74,16 @@ defineExpose({
 </script>
 
 <template>
+  <!-- TODO @puhui999：html 部分，看看有没办法和 web-antd/src/components/cropper/cropper-avatar.vue 风格更接近 -->
+  <!-- 头像容器 -->
   <div :class="getClass" :style="getStyle">
+    <!-- 图片包装器 -->
     <div
       :class="`${prefixCls}-image-wrapper`"
       :style="getImageWrapperStyle"
       @click="openModal"
     >
+      <!-- 遮罩层 -->
       <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
         <span
           :style="{
@@ -90,8 +95,10 @@ defineExpose({
           class="icon-[ant-design--cloud-upload-outlined] text-[#d6d6d6]"
         ></span>
       </div>
+      <!-- 头像图片 -->
       <img v-if="sourceValue" :src="sourceValue" alt="avatar" />
     </div>
+    <!-- 上传按钮 -->
     <ElButton
       v-if="showBtn"
       :class="`${prefixCls}-upload-btn`"
@@ -111,6 +118,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/* TODO @puhui999：要类似 web-antd/src/components/cropper/cropper-avatar.vue 减少 scss，通过 tindwind 么？ */
 .cropper-avatar {
   display: inline-block;
   text-align: center;
diff --git a/apps/web-ele/src/components/cropper/cropper-modal.vue b/apps/web-ele/src/components/cropper/cropper-modal.vue
index 7e7008370..1d949c0aa 100644
--- a/apps/web-ele/src/components/cropper/cropper-modal.vue
+++ b/apps/web-ele/src/components/cropper/cropper-modal.vue
@@ -121,7 +121,9 @@ async function handleOk() {
     class="w-[800px]"
   >
     <div :class="prefixCls">
+      <!-- 左侧区域 -->
       <div :class="`${prefixCls}-left`" class="w-full">
+        <!-- 裁剪器容器 -->
         <div :class="`${prefixCls}-cropper`">
           <CropperImage
             v-if="src"
@@ -133,6 +135,7 @@ async function handleOk() {
           />
         </div>
 
+        <!-- 工具栏 -->
         <div :class="`${prefixCls}-toolbar`">
           <ElUpload
             :before-upload="handleBeforeUpload"
@@ -276,7 +279,10 @@ async function handleOk() {
           </ElSpace>
         </div>
       </div>
+
+      <!-- 右侧区域 -->
       <div :class="`${prefixCls}-right`">
+        <!-- 预览区域 -->
         <div :class="`${prefixCls}-preview`">
           <img
             v-if="previewSource"
@@ -284,6 +290,7 @@ async function handleOk() {
             :src="previewSource"
           />
         </div>
+        <!-- 头像组合预览 -->
         <template v-if="previewSource">
           <div :class="`${prefixCls}-group`">
             <ElAvatar :src="previewSource" size="large" />
@@ -298,6 +305,7 @@ async function handleOk() {
 </template>
 
 <style lang="scss">
+/* TODO @puhui999：要类似 web-antd/src/components/cropper/cropper-avatar.vue 减少 scss，通过 tindwind 么？ */
 .cropper-am {
   display: flex;
 
diff --git a/apps/web-ele/src/components/cropper/cropper.vue b/apps/web-ele/src/components/cropper/cropper.vue
index c2d62755e..d371e4a45 100644
--- a/apps/web-ele/src/components/cropper/cropper.vue
+++ b/apps/web-ele/src/components/cropper/cropper.vue
@@ -33,6 +33,7 @@ const imgElRef = ref<ElRef<HTMLImageElement>>();
 const cropper = ref<Cropper | null>();
 const isReady = ref(false);
 
+// TODO @puhui999：这个有办法去掉么？
 const prefixCls = 'cropper-image';
 const debounceRealTimeCropped = useDebounceFn(realTimeCropped, 80);