feat: 多选行交互由shift选中改为拖拽选中 (#1914)

* feat(CodeReview): 支持传入options&暴露清除选中行样式的方法 * chore: 更新版本号 * feat: 多选行交互由shift选中改为拖拽选中 * feat: 更新文档 * feat(CodeReview): 添加边框线 * feat(CodeReview): 抛出选中事件 * feat(CodeReview): 优化边框线 * fix(CodeReview): 修复单行点击抛出数据错误问题 --------- Co-authored-by: GreatZP <[email protected]>
DevCloudFE · Nov 24, 2024 · 126d7b7 · 126d7b7
1 parent 7c32038
commit 126d7b7
Show file tree

Hide file tree

Showing 7 changed files with 306 additions and 121 deletions.
diff --git a/packages/devui-vue/devui/code-review/src/code-review.scss b/packages/devui-vue/devui/code-review/src/code-review.scss
@@ -183,6 +183,10 @@
       content: '';
     }
 
+    .d2h-code-linenumber {
+      border-right: 2px solid transparent;
+    }
+
     .d2h-code-line-ctn {
       word-break: break-all;
       word-wrap: break-word !important;
@@ -222,6 +226,11 @@
         position: static;
         display: table-cell;
       }
+
+      .d-code-left:nth-of-type(2) > .d2h-code-side-line,
+      .d-code-right:nth-of-type(4) > .d2h-code-side-line {
+        border-left: 2px solid transparent;
+      }
     }
 
     .d2h-file-diff {
@@ -269,6 +278,15 @@
           background-color: #daf4ae; // 增加行中的number
         }
       }
+
+      &.d2h-code-linenumber {
+        border-right: 2px solid #fe7300;
+      }
+
+      &.d-code-left:nth-of-type(2) > .d2h-code-side-line,
+      &.d-code-right:nth-of-type(4) > .d2h-code-side-line {
+        border-left: 2px solid #fe7300;
+      }
     }
   }
 

diff --git a/packages/devui-vue/devui/code-review/src/code-review.tsx b/packages/devui-vue/devui/code-review/src/code-review.tsx
@@ -1,5 +1,5 @@
 /* @jsxImportSource vue */
-import { defineComponent, onMounted, provide, toRefs, onBeforeUnmount } from 'vue';
+import { defineComponent, onMounted, provide, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
 import CodeReviewHeader from './components/code-review-header';
 import { CommentIcon } from './components/code-review-icons';
@@ -14,27 +14,40 @@ import './code-review.scss';
 export default defineComponent({
   name: 'DCodeReview',
   props: codeReviewProps,
-  emits: ['foldChange', 'addComment', 'afterViewInit', 'contentRefresh'],
+  emits: ['foldChange', 'addComment', 'afterViewInit', 'contentRefresh', 'afterCheckLines'],
   setup(props: CodeReviewProps, ctx: SetupContext) {
     const ns = useNamespace('code-review');
     const { diffType } = toRefs(props);
     const { renderHtml, reviewContentRef, diffFile, onContentClick } = useCodeReview(props, ctx);
     const { isFold, toggleFold } = useCodeReviewFold(props, ctx);
-    const { commentLeft, commentTop,
-      mouseEvent, onCommentMouseLeave,
-      onCommentIconClick, onCommentKeyDown,
-      unCommentKeyDown, insertComment,
-      removeComment, updateCheckedLineClass, clearCheckedLines } = useCodeReviewComment(reviewContentRef, props, ctx);
+    const {
+      commentLeft,
+      commentTop,
+      mouseEvent,
+      onCommentMouseLeave,
+      onCommentIconClick,
+      insertComment,
+      removeComment,
+      updateCheckedLineClass,
+      clearCheckedLines,
+    } = useCodeReviewComment(reviewContentRef, props, ctx);
 
     onMounted(() => {
-      ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment, updateCheckedLineClass, clearCheckedLines });
-      onCommentKeyDown();
+      ctx.emit('afterViewInit', {
+        toggleFold,
+        insertComment,
+        removeComment,
+        updateCheckedLineClass,
+        clearCheckedLines,
+      });
     });
-    // 销毁
-    onBeforeUnmount(() => {
-      unCommentKeyDown();
+    provide(CodeReviewInjectionKey, {
+      diffType,
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx,
     });
-    provide(CodeReviewInjectionKey, { diffType, reviewContentRef, diffInfo: diffFile.value[0], isFold, rootCtx: ctx });
 
     return () => (
       <div class={ns.b()}>
@@ -59,8 +72,7 @@ export default defineComponent({
             class="comment-icon"
             style={{ left: commentLeft.value + 'px', top: commentTop.value + 'px' }}
             onClick={onCommentIconClick}
-            onMouseleave={onCommentMouseLeave}
-          >
+            onMouseleave={onCommentMouseLeave}>
             <CommentIcon />
           </div>
         )}