style: (web-ele)优化多个组件的样式和布局

-调整图像上传组件的样式，优化上传区域和处理按钮的布局
- 改进魔方编辑器组件的样式，统一边框和对齐方式
-统一垂直按钮组组件的样式，修复按钮圆角问题

apps/web-ele/src/components/magic-cube-editor/index.vue

@@ -259,11 +259,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
   border-collapse: collapse;
 
   .cube {
-    border: 1px solid var(--el-border-color);
-    text-align: center;
-    color: var(--el-text-color-secondary);
-    cursor: pointer;
     box-sizing: border-box;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--el-border-color);
+
     &.active {
       background: var(--el-color-primary-light-9);
     }
@@ -271,29 +272,29 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 
   .hot-area {
     position: absolute;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--el-color-primary);
-    background: var(--el-color-primary-light-8);
     color: var(--el-color-primary);
-    box-sizing: border-box;
+    cursor: pointer;
     border-spacing: 0;
     border-collapse: collapse;
-    cursor: pointer;
+    background: var(--el-color-primary-light-8);
+    border: 1px solid var(--el-color-primary);
 
     .btn-delete {
-      z-index: 1;
       position: absolute;
       top: -8px;
       right: -8px;
-      height: 16px;
+      z-index: 1;
-      width: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      width: 16px;
+      height: 16px;
       background-color: #fff;
+      border-radius: 50%;
     }
   }
 }

apps/web-ele/src/components/upload/image-upload.vue

@@ -326,87 +326,91 @@ const triggerEdit = () => {
 
 <style lang="scss" scoped>
 .upload-box {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px dashed var(--el-border-color-darker);
-  position: relative;
   overflow: hidden;
   background: #fafafa;
+  border: 1px dashed var(--el-border-color-darker);
   transition: border-color 0.2s;
 
   .upload {
-    width: 100% !important;
-    height: 100% !important;
-    border: none !important;
-    background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100% !important;
+    height: 100% !important;
+    background: transparent;
+    border: none !important;
   }
 
   .upload-content {
-    width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     cursor: pointer;
   }
 
   .upload-image-wrapper {
-    width: 100%;
-    height: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
-    border-radius: inherit;
     background: #fff;
+    border-radius: inherit;
   }
 
   .upload-image {
+    display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: inherit;
-    display: block;
   }
 
   .upload-handle {
     position: absolute;
     top: 0;
     right: 0;
-    width: 100%;
+    z-index: 2;
-    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background: rgb(0 0 0 / 50%);
     opacity: 0;
     transition: opacity 0.2s;
-    cursor: pointer;
+
-    z-index: 2;
     &:hover {
       opacity: 1;
     }
+
     .handle-icon {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      color: #fff;
       margin: 0 8px;
       font-size: 18px;
+      color: #fff;
+
       span {
-        font-size: 12px;
         margin-top: 2px;
+        font-size: 12px;
       }
     }
   }
+
   .upload-image-wrapper:hover .upload-handle {
     opacity: 1;
   }

apps/web-ele/src/components/vertical-button-group/index.vue

@@ -27,9 +27,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 
 .el-button-group > :deep(.el-button:last-child) {
   border-top-color: var(--el-button-divide-border-color);
+  border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--el-border-radius-base);
-  border-top-left-radius: 0;
 }
 
 .el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {