Merge pull request #1888 from DevCloudFE/dev

chore: update main
DevCloudFE · Jun 18, 2024 · 20101fe · 20101fe
2 parents 8651e8a + b772e49
commit 20101fe
Show file tree

Hide file tree

Showing 13 changed files with 617 additions and 35 deletions.
diff --git a/packages/devui-vue/devui/code-editor/src/code-editor.tsx b/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>;
+ }
 });
diff --git a/packages/devui-vue/devui/code-review/index.ts b/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);
  },
 };
diff --git a/packages/devui-vue/devui/code-review/src/code-review-types.ts b/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,

diff --git a/packages/devui-vue/devui/code-review/src/code-review.scss b/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 {

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,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>
  )}

diff --git a/packages/devui-vue/devui/code-review/src/components/code-review-header.tsx b/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';

diff --git a/packages/devui-vue/devui/code-review/src/components/code-review-icons.tsx b/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:https://www.w3.org/2000/svg">