feat: 修改选区面板样式 多语言完善

src/component/Canvas/CanvasEditor/components/SelectionPanel.vue

@@ -10,24 +10,33 @@
 
         <div class="tool-types">
           <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO },
+            ]"
             @click="setSelectionType(OperationType.LASSO)"
           >
-            <svg-icon name="CFree" size="26" />
+            <svg-icon name="CFree" size="20" />
             <span>{{ $t("手绘") }}</span>
           </div>
           <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO_RECTANGLE }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO_RECTANGLE },
+            ]"
             @click="setSelectionType(OperationType.LASSO_RECTANGLE)"
           >
-            <svg-icon name="CRectangle" size="32" />
+            <svg-icon name="CRectangle" size="26" />
             <span>{{ $t("矩形") }}</span>
           </div>
           <div
-            :class="['tool-btn', { active: selectionType === OperationType.LASSO_ELLIPSE }]"
+            :class="[
+              'tool-btn',
+              { active: selectionType === OperationType.LASSO_ELLIPSE },
+            ]"
             @click="setSelectionType(OperationType.LASSO_ELLIPSE)"
           >
-            <svg-icon name="CEllipse" size="30" />
+            <svg-icon name="CEllipse" size="24" />
             <span>{{ $t("椭圆") }}</span>
           </div>
         </div>
@@ -38,15 +47,15 @@
         <!-- 底部选区操作工具栏 -->
         <div class="tool-actions">
           <div class="action-btn" @click="copySelectionToNewLayer">
-            <svg-icon name="CPaste" size="20" />
+            <svg-icon name="CPaste" size="16" />
             <span class="btn-text">{{ $t("创建") }}</span>
           </div>
           <div class="action-btn" @click="cutSelectionToNewLayer">
-            <svg-icon name="CCut" size="30" />
+            <svg-icon name="CCut" size="26" />
             <span class="btn-text">{{ $t("创建并拷贝") }}</span>
           </div>
           <div class="action-btn" @click="clearSelectionContent">
-            <svg-icon name="CClear" size="22" />
+            <svg-icon name="CClear" size="18" />
             <span class="btn-text">{{ $t("清除选择内容") }}</span>
           </div>
           <!-- <button
@@ -150,7 +159,9 @@
         <div class="dialog-container">
           <div class="dialog-header">
             <h3>{{ $t("选择填充颜色") }}</h3>
-            <button class="close-dialog-btn" @click="cancelColorPicker">×</button>
+            <button class="close-dialog-btn" @click="cancelColorPicker">
+              ×
+            </button>
           </div>
           <div class="dialog-content">
             <input type="color" v-model="fillColor" class="color-picker" />
@@ -311,7 +322,8 @@ function setSelectionType(type) {
  */
 function checkSelectionStatus() {
   hasSelection.value =
-    props.selectionManager && props.selectionManager.getSelectionObject() !== null;
+    props.selectionManager &&
+    props.selectionManager.getSelectionObject() !== null;
 
   // 同步羽化值
   if (hasSelection.value) {
@@ -610,15 +622,15 @@ function confirmColorPicker() {
   background-color: rgba(0, 0, 0, 0.05);
   border: none;
   border-radius: 6px;
-  padding: 10px 5px;
+  padding: 6px;
   color: #333;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .tool-btn span {
-  margin-top: 6px;
-  font-size: 14px;
+  margin-top: 0;
+  font-size: 12px;
 }
 
 .tool-btn svg {
@@ -638,7 +650,7 @@ function confirmColorPicker() {
 .toolbar-divider {
   height: 1px;
   background-color: rgba(0, 0, 0, 0.05);
-  margin: 0 10px 10px;
+  margin: 0 10px 5px 10px;
 }
 
 .tool-actions {
@@ -674,13 +686,19 @@ function confirmColorPicker() {
 
 .action-btn {
   display: flex;
-  flex-direction: column;
+  // flex-direction: column;
+  flex-direction: row;
   align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: #333;
   cursor: pointer;
-  padding: 8px 2px;
+  padding: 0;
+  gap: 4px;
+  .c-svg {
+    width: auto;
+  }
 }
 
 .action-btn svg {
@@ -690,7 +708,8 @@ function confirmColorPicker() {
 }
 
 .btn-text {
-  font-size: 14px;
+  display: block;
+  font-size: 12px;
   text-align: center;
 }
 
@@ -825,9 +844,7 @@ function confirmColorPicker() {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 .fade-enter-from,
 .fade-leave-to {