优化图表编辑器和图片裁剪工具样式

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue

@@ -162,11 +162,16 @@ export default defineComponent({
         tempRangeSize.value = { width, height }
       }
 
-      document.onmouseup = () => {
+      document.onmouseup = e => {
         isMouseDown = false
         document.onmousemove = null
         document.onmouseup = null
 
+        const endPageX = e.pageX
+        const endPageY = e.pageY
+
+        if(startPageX === endPageX && startPageY === endPageY) return
+
         let width = tempRangeSize.value.width
         let height = tempRangeSize.value.height
         if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
@@ -247,13 +252,31 @@ export default defineComponent({
 }
 .resizable {
   position: absolute;
-  width: 8px;
-  height: 8px;
+  width: 12px;
+  height: 12px;
   left: 0;
   top: 0;
-  margin: -4px 0 0 -4px;
-  background-color: $themeColor;
+  margin: -9px 0 0 -9px;
   cursor: nwse-resize;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 12px;
+    right: 0;
+    top: 0;
+    background-color: $themeColor;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 4px;
+    right: 0;
+    bottom: 0;
+    background-color: $themeColor;
+  }
 }
 table {
   width: 100%;

src/views/components/element/ImageElement/ImageClipHandler.vue

@@ -39,8 +39,12 @@
         :key="point" 
         @mousedown.stop="$event => scaleClipRange($event, point)"
       >
-        <SvgWrapper width="12" height="12" fill="#fff" stroke="#666">
-          <path d="M 12 0 L 0 0 L 0 12 L 3 12 L 3 3 L 12 3 L 12 0 Z"></path>
+        <SvgWrapper width="12" height="12" fill="#fff" stroke="#333">
+          <path
+            stroke-width="0.3" 
+            shape-rendering="crispEdges"
+            d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
+          ></path>
         </SvgWrapper>
       </div>
     </div>
@@ -288,8 +292,8 @@ export default defineComponent({
       isSettingClipRange.value = true
       let isMouseDown = true
 
-      const minWidth = 32 / props.width * 100
-      const minHeight = 32 / props.height * 100
+      const minWidth = 50 / props.width * 100
+      const minHeight = 50 / props.height * 100
       
       const startPageX = e.pageX
       const startPageY = e.pageY