refactor: 优化表格所见即所得编辑里，拖拽行列、删除行列的交互和功能

Tencent · Sep 25, 2024 · 77bf4db · 77bf4db
1 parent 4d51a56
commit 77bf4db
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 67 deletions.
diff --git a/src/locales/en_US.js b/src/locales/en_US.js
@@ -105,4 +105,10 @@ export default {
   wordCountP: 'P',
   wordCountW: 'W',
   wordCountC: 'C',
+  deleteColumn: 'delete column',
+  deleteRow: 'delete row',
+  addRow: 'add row',
+  addCol: 'add column',
+  moveRow: 'move row',
+  moveCol: 'move column',
 };
diff --git a/src/locales/ru_RU.js b/src/locales/ru_RU.js
@@ -105,4 +105,10 @@ export default {
   wordCountP: 'P',
   wordCountW: 'W',
   wordCountC: 'C',
+  deleteColumn: 'Удалить столбец',
+  deleteRow: 'Удалить строку',
+  addRow: 'Добавить строку',
+  addCol: 'Добавить столбец',
+  moveRow: 'Переместить строку',
+  moveCol: 'Переместить столбец',
 };
diff --git a/src/locales/zh_CN.js b/src/locales/zh_CN.js
@@ -108,4 +108,10 @@ export default {
   wordCountP: '段落',
   wordCountW: '单词',
   wordCountC: '字符',
+  deleteColumn: '删除列',
+  deleteRow: '删除行',
+  addRow: '添加行',
+  addCol: '添加列',
+  moveRow: '移动行',
+  moveCol: '移动列',
 };
diff --git a/src/sass/ch-icon.scss b/src/sass/ch-icon.scss
@@ -20,6 +20,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ch-icon-swap-vert:before { content: "\EA77" }
+.ch-icon-swap:before { content: "\EA78" }
 .ch-icon-list:before { content: "\EA03" }
 .ch-icon-check:before { content: "\EA04" }
 .ch-icon-square:before { content: "\EA09" }

diff --git a/src/sass/icons/uEA77-swap-vert.svg b/src/sass/icons/uEA77-swap-vert.svg
diff --git a/src/sass/icons/uEA78-swap.svg b/src/sass/icons/uEA78-swap.svg
diff --git a/src/sass/previewer.scss b/src/sass/previewer.scss
@@ -91,9 +91,10 @@
     position: absolute;
     pointer-events: none;
     z-index: 999;
-    &-container {
+    &-container, &-sort-container, &-delete-container {
       position: absolute;
       height: 100%;
+      width: 100%;
       padding: 0;
       margin: 0;
       list-style-type: none;
@@ -109,21 +110,14 @@
       line-height: 12px;
       border: 1px solid #3582fb00;
       background-color: #ffffff00;
+      border-radius: 3px;
       cursor: pointer;
       transition: all 0.3s;
       &:hover {
         background-color: #3582fb88;
         color: #FFF;
       }
     }
-    &-sort-container, &-delete-container {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      padding: 0;
-      margin: 0;
-      list-style-type: none;
-    }
     &__sort {
       pointer-events: auto;
       display: flex;
@@ -132,29 +126,46 @@
       color: #3582fb;
       width: 12px;
       height: 12px;
+      padding: 5px 0;
       line-height: 12px;
       border: 1px solid #3582fb00;
       background-color: #ffffff00;
+      border-radius: 3px;
       cursor: pointer;
       transition: all 0.3s;
+      &:hover {
+        background-color: #3582fb88;
+        border-color: #3582fb88;
+        color: #FFF;
+      }
+      &[data-type='ColUp'], &[data-type='ColDown'] {
+        padding: 0 5px;
+      }
     }
     &__delete {
       pointer-events: auto;
       position: absolute;
       color: #FFF;
-      width: 40px;
-      height: 18px;
+      width: 25px;
+      height: 15px;
       font-size: 12px;
       line-height: 12px;
-      border: 1px solid #FF4D4F;
-      border-radius: 5px;
-      background-color: #FF4D4F;
+      border: 1px solid rgba(255, 77, 79, 0);
+      border-radius: 3px;
+      background-color: rgba(255, 77, 79, 0);
+      color: rgba(255, 77, 79, 0.5);
       cursor: pointer;
       transition: all 0.3s;
       &:hover {
-        background-color: #FF7875;
+        background-color: rgba(255, 77, 79);
+        border-color: rgba(255, 77, 79);
         color: #FFF;
       }
+      &[data-type='left'], &[data-type='right'] {
+        padding: 0;
+        width: 18px;
+        height: 18px;
+      }
     }
   }
   @keyframes changeBgColor {
@@ -165,4 +176,4 @@
   .cherry-highlight-line {
     animation: changeBgColor 3s;
   }
-
+}
diff --git a/src/toolbars/PreviewerBubble.js b/src/toolbars/PreviewerBubble.js
@@ -399,6 +399,7 @@ export default class PreviewerBubble {
       this.previewerDom,
       this.editor.editor,
       tableElement,
+      this.previewer.$cherry,
     );
     handler.showBubble();
     this.bubbleHandler[trigger] = handler;