feat: 代码比较CodeReview组件增加多行选中功能。使用allow-checked参数控制。增加详细使用示例和文档说明。#1876 (#1885)

* 组件易用性优化，category-search组件唤出textInput时，input框自动聚焦 (#1842)

* feat: 代码比较CodeReview组件增加行/多行选中功能。使用allow-checked参数控制。增加详细使用示例和文档说明。 #1876

Author: aolinpk

packages/devui-vue/devui/code-editor/src/code-editor.tsx

@@ -1,16 +1,16 @@
+/* @jsxImportSource vue */
 import { defineComponent } from 'vue';
 import type { SetupContext } from 'vue';
 import { codeEditorProps, CodeEditorProps } from './code-editor-types';
 import { useCodeEditor } from './composables/use-code-editor';
 import './code-editor.scss';
 
 export default defineComponent({
-    name: 'DCodeEditor',
-    props: codeEditorProps,
-    emits: ['update:modelValue', 'afterEditorInit', 'click'],
-    setup(props: CodeEditorProps, ctx: SetupContext) {
-        const { editorEl } = useCodeEditor(props, ctx);
-
-        return () => <div ref={editorEl} class="devui-code-editor"></div>;
-    }
+  name: 'DCodeEditor',
+  props: codeEditorProps,
+  emits: ['update:modelValue', 'afterEditorInit', 'click'],
+  setup(props: CodeEditorProps, ctx: SetupContext) {
+    const { editorEl } = useCodeEditor(props, ctx);
+    return () => <div ref={editorEl} class="devui-code-editor"></div>;
+  }
 });

packages/devui-vue/devui/code-review/index.ts

@@ -9,6 +9,6 @@ export default {
   category: '演进中',
   status: '100%',
   install(app: App): void {
-    app.component(CodeReview.name, CodeReview);
+    app.component(CodeReview.name as string, CodeReview);
   },
 };

packages/devui-vue/devui/code-review/src/code-review-types.ts

@@ -30,6 +30,10 @@ export const codeReviewProps = {
     type: Boolean,
     default: true,
   },
+  allowChecked: {
+    type: Boolean,
+    default: false,
+  },
   allowExpand: {
     type: Boolean,
     default: true,

packages/devui-vue/devui/code-review/src/code-review.scss

@@ -223,6 +223,53 @@
         display: table-cell;
       }
     }
+
+    .d2h-file-diff {
+      // 单栏
+      .comment-checked {
+        &.d2h-cntx {
+          background-color: #fff8c5; // 通常选中
+        }
+
+        &.d2h-del {
+          background-color: #ffe5b4; // 删除行选中
+
+          &.d2h-code-linenumber {
+            background-color: #ffc89d; // 删除行中的number
+          }
+        }
+
+        &.d2h-ins {
+          background-color: #d1f1a8; // 增加行选中
+
+          &.d2h-code-linenumber {
+            background-color: #daf4ae; // 增加行中的number
+          }
+        }
+      }
+    }
+
+    .comment-checked {
+      &.d2h-cntx {
+        background-color: #fff8c5; // 通常选中
+      }
+
+      &.d2h-del {
+        background-color: #ffe5b4; // 删除行选中
+
+        &.d2h-code-side-linenumber {
+          background-color: #ffc89d; // 删除行中的number
+        }
+      }
+
+      &.d2h-ins {
+        background-color: #d1f1a8; // 增加行选中
+
+        &.d2h-code-side-linenumber {
+          background-color: #daf4ae; // 增加行中的number
+        }
+      }
+    }
   }
 
   .comment-icon {

packages/devui-vue/devui/code-review/src/code-review.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, onMounted, provide, toRefs } from 'vue';
+/* @jsxImportSource vue */
+import { defineComponent, onMounted, provide, toRefs, onBeforeUnmount } from 'vue';
 import type { SetupContext } from 'vue';
 import CodeReviewHeader from './components/code-review-header';
 import { CommentIcon } from './components/code-review-icons';
@@ -19,13 +20,20 @@ export default defineComponent({
     const { diffType } = toRefs(props);
     const { renderHtml, reviewContentRef, diffFile, onContentClick } = useCodeReview(props, ctx);
     const { isFold, toggleFold } = useCodeReviewFold(props, ctx);
-    const { commentLeft, commentTop, mouseEvent, onCommentMouseLeave, onCommentIconClick, insertComment, removeComment } =
-      useCodeReviewComment(reviewContentRef, props, ctx);
+    const { commentLeft, commentTop,
+      mouseEvent, onCommentMouseLeave,
+      onCommentIconClick, onCommentKeyDown,
+      unCommentKeyDown, insertComment,
+      removeComment, updateCheckedLineClass } = useCodeReviewComment(reviewContentRef, props, ctx);
 
     onMounted(() => {
-      ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment });
+      ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment, updateCheckedLineClass });
+      onCommentKeyDown();
+    });
+    // 销毁
+    onBeforeUnmount(() => {
+      unCommentKeyDown();
     });
-
     provide(CodeReviewInjectionKey, { diffType, reviewContentRef, diffInfo: diffFile.value[0], isFold, rootCtx: ctx });
 
     return () => (
@@ -51,7 +59,8 @@ export default defineComponent({
             class="comment-icon"
             style={{ left: commentLeft.value + 'px', top: commentTop.value + 'px' }}
             onClick={onCommentIconClick}
-            onMouseleave={onCommentMouseLeave}>
+            onMouseleave={onCommentMouseLeave}
+          >
             <CommentIcon />
           </div>
         )}

packages/devui-vue/devui/code-review/src/components/code-review-header.tsx

@@ -1,3 +1,4 @@
+/* @jsxImportSource vue */
 import { defineComponent, inject } from 'vue';
 import type { SetupContext } from 'vue';
 import { Popover } from '../../../popover';

packages/devui-vue/devui/code-review/src/components/code-review-icons.tsx

@@ -1,3 +1,4 @@
+/* @jsxImportSource vue */
 export function FoldIcon(): JSX.Element {
   return (
     <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">