feat: 使用tailwindcss 重构样式

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

@@ -37,7 +37,6 @@ const cropper = ref<CropperType>();
 let scaleX = 1;
 let scaleY = 1;
 
-const prefixCls = 'cropper-am';
 const [Modal, modalApi] = useVbenModal({
   onConfirm: handleOk,
   onOpenChange(isOpen) {
@@ -129,9 +128,13 @@ async function handleOk() {
     :title="$t('ui.cropper.modalTitle')"
     class="w-2/3"
   >
-    <div :class="prefixCls">
-      <div :class="`${prefixCls}-left`" class="w-full">
-        <div :class="`${prefixCls}-cropper`">
+    <div class="flex h-96">
+      <!-- 左侧区域 -->
+      <div class="h-full w-3/5">
+        <!-- 裁剪器容器 -->
+        <div
+          class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
+        >
           <CropperImage
             v-if="src"
             :circled="circled"
@@ -142,7 +145,8 @@ async function handleOk() {
           />
         </div>
 
-        <div :class="`${prefixCls}-toolbar`">
+        <!-- 工具栏 -->
+        <div class="mt-4 flex items-center justify-between">
           <Upload
             :before-upload="handleBeforeUpload"
             :file-list="[]"
@@ -266,16 +270,26 @@ async function handleOk() {
           </Space>
         </div>
       </div>
-      <div :class="`${prefixCls}-right`">
-        <div :class="`${prefixCls}-preview`">
+
+      <!-- 右侧区域 -->
+      <div class="h-full w-2/5">
+        <!-- 预览区域 -->
+        <div
+          class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
+        >
           <img
             v-if="previewSource"
             :alt="$t('ui.cropper.preview')"
             :src="previewSource"
+            class="h-full w-full object-cover"
           />
         </div>
+
+        <!-- 头像组合预览 -->
         <template v-if="previewSource">
-          <div :class="`${prefixCls}-group`">
+          <div
+            class="mt-2 flex items-center justify-around border-t border-gray-200 pt-2"
+          >
             <Avatar :src="previewSource" size="large" />
             <Avatar :size="48" :src="previewSource" />
             <Avatar :size="64" :src="previewSource" />
@@ -286,76 +300,3 @@ async function handleOk() {
     </div>
   </Modal>
 </template>
-
-<style lang="scss">
-.cropper-am {
-  display: flex;
-
-  &-left,
-  &-right {
-    height: 340px;
-  }
-
-  &-left {
-    width: 55%;
-  }
-
-  &-right {
-    width: 45%;
-  }
-
-  &-cropper {
-    height: 300px;
-    background: #eee;
-    background-image:
-      linear-gradient(
-        45deg,
-        rgb(0 0 0 / 25%) 25%,
-        transparent 0,
-        transparent 75%,
-        rgb(0 0 0 / 25%) 0
-      ),
-      linear-gradient(
-        45deg,
-        rgb(0 0 0 / 25%) 25%,
-        transparent 0,
-        transparent 75%,
-        rgb(0 0 0 / 25%) 0
-      );
-    background-position:
-      0 0,
-      12px 12px;
-    background-size: 24px 24px;
-  }
-
-  &-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-  }
-
-  &-preview {
-    width: 220px;
-    height: 220px;
-    margin: 0 auto;
-    overflow: hidden;
-    border: 1px solid #eee;
-    border-radius: 50%;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-group {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    padding-top: 8px;
-    margin-top: 8px;
-    border-top: 1px solid #eee;
-  }
-}
-</style>