feat：【antd/ele】【组件】cropper 封装的代码统一评审

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

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;

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;
 

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);