From 98a1364c826e899980c3479db97d8d8f60aebbed Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Sun, 27 Oct 2024 20:11:04 -0700
Subject: [PATCH] fix(crop): [crop]modify crops component demo problem (#2419)

* fix(crops): [crops]modify crops component

* fix(crops): [crops]modify crops e2e-test
---
 .../crop/min-crop-box-width-height-composition-api.vue    | 8 ++++----
 .../demos/pc/app/crop/min-crop-box-width-height.spec.ts   | 8 ++++----
 .../sites/demos/pc/app/crop/min-crop-box-width-height.vue | 8 ++++----
 packages/theme/src/crop/index.less                        | 1 +
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue b/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
index 5049b84536..348ee83d64 100644
--- a/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
@@ -5,10 +5,10 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :min-crop-box-width="100"
-      :min-crop-box-height="100"
-      :min-container-height="200"
-      :min-container-width="800"
+      :min-crop-box-width="200"
+      :min-crop-box-height="350"
+      :min-container-height="300"
+      :min-container-width="650"
     ></tiny-crop>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts
index ad704eee78..c52f091cd1 100644
--- a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.spec.ts
@@ -21,12 +21,12 @@ test('裁剪框最小宽高', async ({ page }) => {
 
   box = await face.boundingBox()
 
-  expect(box.width).toBe(100)
-  expect(box.height).toBe(56.25) // 此处有bug, 高度最小应该为 100， 实际最小为56.25
+  expect(box.width).toBe(199.99996948242188)
+  expect(box.height).toBe(112.5) // 此处有bug, 高度最小应该为 100， 实际最小为56.25
 
   // 判断container 大小为  800*200
   box = await container.boundingBox()
 
-  expect(box.width).toBe(800)
-  expect(box.height).toBe(200)
+  expect(box.width).toBe(650)
+  expect(box.height).toBe(300)
 })
diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
index 6eaa4d57b5..14d7e4c8b3 100644
--- a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
@@ -5,10 +5,10 @@
       :cropvisible="visible"
       @update:cropvisible="visible = $event"
       :src="imgUrl"
-      :min-crop-box-width="100"
-      :min-crop-box-height="100"
-      :min-container-height="200"
-      :min-container-width="800"
+      :min-crop-box-width="200"
+      :min-crop-box-height="350"
+      :min-container-height="300"
+      :min-container-width="650"
     ></tiny-crop>
   </div>
 </template>
diff --git a/packages/theme/src/crop/index.less b/packages/theme/src/crop/index.less
index cc680eb9d8..944e85b7c0 100644
--- a/packages/theme/src/crop/index.less
+++ b/packages/theme/src/crop/index.less
@@ -347,6 +347,7 @@
         margin-right: 8px;
         padding: 4px;
         cursor: pointer;
+        border-radius: 4px;
 
         &:hover {
           background: #f5f5f5;