Merge pull request #1721 from DevCloudFE/dev

Update main from dev to release 1.5.13

packages/devui-vue/devui/auto-focus/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import AutoFocus from './src/auto-focus-directive';
+
+export { AutoFocus };
+
+export default {
+  title: 'AutoFocus 自动聚焦',
+  category: '公共',
+  install(app: App): void {
+    app.directive('dAutoFocus', AutoFocus);
+  },
+};

packages/devui-vue/devui/auto-focus/src/auto-focus-directive.ts

@@ -0,0 +1,7 @@
+export default {
+  mounted: (el: HTMLElement, binding: Record<string, any>) => {
+    if (binding.value) {
+      el.focus();
+    }
+  },
+};

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

@@ -70,7 +70,7 @@ export const codeEditorProps = {
     type: Array as PropType<Comment[]>,
     default: () => []
   }
-}
+};
 
 export type CodeEditorProps = ExtractPropTypes<typeof codeEditorProps>;
 
@@ -86,4 +86,4 @@ export interface PositionInfo {
 export interface LayoutInfo extends PositionInfo {
   minimapWidth?: number;
   offsetLeft?: number;
-}
+}

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

@@ -2,7 +2,7 @@ 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'
+import './code-editor.scss';
 
 export default defineComponent({
     name: 'DCodeEditor',
@@ -11,6 +11,6 @@ export default defineComponent({
     setup(props: CodeEditorProps, ctx: SetupContext) {
         const { editorEl } = useCodeEditor(props, ctx);
 
-        return () => <div ref={editorEl} class="devui-code-editor"></div>
+        return () => <div ref={editorEl} class="devui-code-editor"></div>;
     }
-})
+});

packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts

@@ -180,8 +180,11 @@ export function useCodeEditor(props: CodeEditorProps, ctx: SetupContext) {
 
     model?.onDidChangeContent(
       throttle(() => {
-        modifyValueFromInner = true;
-        ctx.emit('update:modelValue', model.getValue());
+        const editorValue = model.getValue();
+        if (modelValue.value !== editorValue) {
+          modifyValueFromInner = true;
+          ctx.emit('update:modelValue', model.getValue());
+        }
       }, 100)
     );
   }

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

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, InjectionKey, PropType, SetupContext, Ref } from 'vue';
 import type { DiffFile } from 'diff2html/lib/types';
 
+export type DiffType = 'modify' | 'add' | 'delete' | 'rename';
 export type OutputFormat = 'line-by-line' | 'side-by-side';
 export type ExpandDirection = 'up' | 'down' | 'updown' | 'all';
 export type LineSide = 'left' | 'right';
@@ -37,6 +38,10 @@ export const codeReviewProps = {
     type: Boolean,
     default: false,
   },
+  diffType: {
+    type: String as PropType<DiffType>,
+    default: 'modify',
+  },
   outputFormat: {
     type: String as PropType<OutputFormat>,
     default: 'line-by-line',
@@ -53,6 +58,7 @@ export const codeReviewProps = {
 export type CodeReviewProps = ExtractPropTypes<typeof codeReviewProps>;
 
 export interface CodeReviewContext {
+  diffType: Ref<DiffType>;
   reviewContentRef: Ref<HTMLElement>;
   diffInfo: DiffFile;
   isFold: Ref<boolean>;

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

@@ -8,6 +8,7 @@
   border-radius: $devui-border-radius-card;
 
   &__header {
+    position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -25,6 +26,40 @@
       box-shadow: inset 0 -1px 0 0 $devui-brand-foil;
     }
 
+    .diff-type {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 16px;
+      height: 16px;
+      font-size: $devui-font-size-sm;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 16px;
+      border-radius: 8px 0 8px 0;
+      user-select: none;
+
+      &.modify {
+        color: #fa9841;
+        background-color: rgba(250, 152, 65, 0.2);
+      }
+
+      &.add {
+        color: #3ac295;
+        background-color: rgba(58, 194, 149, 0.2);
+      }
+
+      &.delete {
+        color: #f66f6a;
+        background-color: rgba(246, 111, 106, 0.2);
+      }
+
+      &.rename {
+        color: #71757f;
+        background-color: rgba(113, 117, 127, 0.2);
+      }
+    }
+
     .file-info {
       display: flex;
       align-items: center;
@@ -36,6 +71,10 @@
         line-height: 20px;
       }
 
+      & > svg {
+        margin-right: 8px;
+      }
+
       .invert {
         transform: scale(-1);
       }
@@ -45,7 +84,6 @@
         font-size: $devui-font-size-sm;
         color: $devui-text;
         font-weight: bold;
-        padding-left: 8px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -72,7 +110,9 @@
   &__content {
     line-height: 20px;
 
-    table {
+    table.d2h-diff-table {
+      table-layout: fixed;
+      font-size: 12px;
       margin: 0;
     }
 
@@ -175,6 +215,7 @@
 
       .d2h-file-side-diff {
         width: 100%;
+        overflow: hidden;
       }
 
       .d2h-code-side-linenumber {

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

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, provide } 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';
@@ -16,6 +16,7 @@ export default defineComponent({
   emits: ['foldChange', 'addComment', 'afterViewInit', 'contentRefresh'],
   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, insertComment, removeComment } =
@@ -25,7 +26,7 @@ export default defineComponent({
       ctx.emit('afterViewInit', { toggleFold, insertComment, removeComment });
     });
 
-    provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile.value[0], isFold, rootCtx: ctx });
+    provide(CodeReviewInjectionKey, { diffType, reviewContentRef, diffInfo: diffFile.value[0], isFold, rootCtx: ctx });
 
     return () => (
       <div class={ns.b()}>

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

@@ -12,7 +12,7 @@ export default defineComponent({
   emits: ['click'],
   setup(_, ctx: SetupContext) {
     const ns = useNamespace('code-review');
-    const { diffInfo, isFold, rootCtx } = inject(CodeReviewInjectionKey) as CodeReviewContext;
+    const { diffType, diffInfo, isFold, rootCtx } = inject(CodeReviewInjectionKey) as CodeReviewContext;
     const { copyTipsText, tipsPopType, onCopy } = useCodeReviewCopy(diffInfo);
     const onClick = (e: Event) => {
       const composedPath = e.composedPath();
@@ -26,6 +26,7 @@ export default defineComponent({
 
     return () => (
       <div class={[ns.e('header'), { [ns.em('header', 'unfold')]: !isFold.value }]} onClick={onClick}>
+        <span class={['diff-type', diffType.value]}>{diffType.value[0].toUpperCase()}</span>
         <div class="file-info">
           <FoldIcon class={{ invert: !isFold.value }} />
           <span class="file-name">{diffInfo.newName}</span>

packages/devui-vue/devui/editor-md/src/composables/helper.ts

@@ -26,4 +26,4 @@ export function refreshEditorCursor() {
     event.initEvent('resize', true, true);
   }
   window.dispatchEvent(event);
-}
+}

packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts

@@ -20,7 +20,7 @@ export class MDRenderService {
       return '';
     }
   }) as any;
-  private baseUrl: string = '';
+  private baseUrl = '';
   private breaks = true;
   private renderParse: Function | undefined;
 
@@ -93,7 +93,7 @@ export class MDRenderService {
     plugins.forEach(item => {
       const { plugin, opts } = item;
       this.mdt.use(plugin, opts);
-    })
+    });
   }
 
   private onIgnoreTagAttr(tag: string, name: string, value: string, isWhiteAttr: boolean) {
@@ -115,7 +115,7 @@ export class MDRenderService {
         return `<${p1} id="${p2}-${headerRecord.get(p2)}">`;
       } else {
         headerRecord.set(p2, 0);
-        return `<${p1} id="${p2}">`
+        return `<${p1} id="${p2}">`;
       }
     });
   }
@@ -142,7 +142,7 @@ export class MDRenderService {
           right: true
         }),
       },
-    })
+    });
 
     setTimeout(() => {
       refreshMermaid();
@@ -155,7 +155,7 @@ export class MDRenderService {
     if (mdRules) {
       Object.keys(mdRules).forEach(rule => {
         this.mdt[rule].set(mdRules[rule]);
-      })
+      });
     }
   }
-}
+}

packages/devui-vue/devui/editor-md/src/composables/use-editor-md-theme.ts

@@ -10,7 +10,7 @@ export function useEditorMdTheme(callback: () => void) {
       isDarkMode.value = themeService.currentTheme.id.indexOf('dark') !== -1;
       callback();
     }
-  }
+  };
 
   onBeforeMount(() => {
     themeService = window['devuiThemeService'];
@@ -25,9 +25,9 @@ export function useEditorMdTheme(callback: () => void) {
 
   onBeforeUnmount(() => {
     if (themeService && themeService.eventBus) {
-      themeService.eventBus.remove('themeChanged', themeChange)
+      themeService.eventBus.remove('themeChanged', themeChange);
     }
-  })
+  });
 
   return { isDarkMode };
-}
+}

packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts

@@ -4,5 +4,5 @@ import { EditorMdInjectionKey, IEditorMdInjection } from '../editor-md-types';
 export function useToolbar() {
   const { toolbars, toolbarConfig } = inject(EditorMdInjectionKey) as IEditorMdInjection;
 
-  return { toolbars, toolbarConfig }
-}
+  return { toolbars, toolbarConfig };
+}

packages/devui-vue/devui/editor-md/src/icons-config.ts

@@ -90,13 +90,13 @@ export const LIST_ORDERED_ICON = `<svg width="16px" height="16px" viewBox="0 0 1
         <path d="M5,1 L16,1 L16,2.5 L5,2.5 L5,1 Z M0,0 L2,0 L2,3 L3,3 L3,4 L0,4 L0,3 L1,3 L1,1 L0,1 L0,0 Z M5,7 L16,7 L16,8.5 L5,8.5 L5,7 Z M5,13 L16,13 L16,14.5 L5,14.5 L5,13 Z M0,15 L1.75,15 C1.88807119,15 2,14.8880712 2,14.75 C2,14.6119288 1.88807119,14.5 1.75,14.5 L0,14.5 L0,13.5 L1.75,13.5 C1.88807119,13.5 2,13.3880712 2,13.25 C2,13.1119288 1.88807119,13 1.75,13 L0,13 L0,12 L1.5,12 C2.32842712,12 3,12.6715729 3,13.5 C3,13.6753177 2.96992289,13.8436105 2.91464715,14 C2.96992289,14.1563895 3,14.3246823 3,14.5 C3,15.3284271 2.32842712,16 1.5,16 L0,16 L0,15 Z M2,7.5 C2,7.35127258 1.9375,7.22627258 1.84375,7.13845444 C1.76307119,7.05596441 1.63807119,7 1.5,7 C1.22385763,7 1,7.22385763 1,7.5 L1.62630326e-19,7.5 C0.147399902,6.5 0.647399902,6 1.5,6 C2.32842712,6 3,6.67157288 3,7.5 C3,8.07312512 2.50016007,8.55650475 2.22821045,8.74661255 C1.95626083,8.93672035 1.77325955,8.99789088 1.76769962,9 L3,9 L3,10 L0,10 L1.62630326e-19,9 C0.619515577,8.77257137 1.06188822,8.55939591 1.32711792,8.36047363 C1.6371448,8.12795347 1.87259637,7.91592701 1.96143498,7.69289356 C1.98627694,7.633537 2,7.5683711 2,7.5 Z" id="形状"></path>
     </g>
 </g>
-</svg>`
+</svg>`;
 
 export const LIST_CHECK_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <path d="M14,15 L14,9.37100497 L15,9.37100497 L15,16 L1,16 L1,2 L10.1946467,2 L10.1946467,3 L2,3 L2,15 L14,15 Z M14.4525049,2.48740937 C14.7356009,2.1850362 15.2102174,2.16940895 15.5125906,2.45250493 C15.8149638,2.73560092 15.8305911,3.21021745 15.5474951,3.51259063 L8.45990379,11.0828057 L4.46558382,7.02621226 C4.17496481,6.73106236 4.17863783,6.25620283 4.47378774,5.96558382 C4.76893764,5.67496481 5.24379717,5.67863783 5.53441618,5.97378774 L8.43263799,8.91719429 L14.4525049,2.48740937 Z" id="形状结合" fill="#293040" fill-rule="nonzero"></path>
 </g>
-</svg>`
+</svg>`;
 
 export const CODE_BLOCK_ICON = `<svg class="icon" viewBox="0 0 1024 1024" version="1.1" width="16" height="16">
 <path fill="#293040" d="M181.40490722 476.99755859l58.04077149-32.33276367A49.43847656 49.43847656 0 0 0 264.80761719 401.50500488L264.80761719 264.80761719a98.87695313 98.87695313 0 0 1 98.87695312-98.87695313l49.43847657 0a24.71923828 24.71923828 0 0 1 0 49.43847657L363.68457031 215.36914062a49.43847656 49.43847656 0 0 0-49.43847655 49.43847657l0 144.50866699a98.87695313 98.87695313 0 0 1-52.30590821 87.25891113L233.01867675 512l28.9215088 15.42480469A98.87695313 98.87695313 0 0 1 314.24609375 614.63427734L314.24609376 759.19238281a49.43847656 49.43847656 0 0 0 49.43847655 49.43847657l49.43847657 0a24.71923828 24.71923828 0 1 1 0 49.43847656L363.68457031 858.06933594a98.87695313 98.87695313 0 0 1-98.87695312-98.87695313l0-136.6973877a49.43847656 49.43847656 0 0 0-25.36193848-43.15979003l-58.04077148-32.33276367a37.07885742 37.07885742 0 0 1 0-70.00488282z m611.75170899 1e-8a37.07885742 37.07885742 0 0 1 0 70.0048828l-58.04077149 32.33276368a49.43847656 49.43847656 0 0 0-25.36193848 43.15979004L709.75390624 759.19238281a98.87695313 98.87695313 0 0 1-98.87695312 98.87695313L561.43847656 858.06933594a24.71923828 24.71923828 0 1 1 0-49.43847656l49.43847657 0a49.43847656 49.43847656 0 0 0 49.43847656-49.43847657l0-144.50866699a98.87695313 98.87695313 0 0 1 52.3059082-87.25891113L741.54284668 512l-28.92150879-15.42480469A98.87695313 98.87695313 0 0 1 660.31542969 409.36572266L660.31542969 264.80761719a49.43847656 49.43847656 0 0 0-49.43847657-49.43847657L561.43847656 215.36914062a24.71923828 24.71923828 0 0 1 0-49.43847656l49.43847657 0a98.87695313 98.87695313 0 0 1 98.87695311 98.87695313l0 136.6973877a49.43847656 49.43847656 0 0 0 25.36193848 43.15979003l58.04077149 32.33276368z" p-id="1449"></path>
@@ -130,13 +130,13 @@ export const LINK_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
 export const CODE_ICON = `<svg viewBox="0 0 1024 1024" width="16" height="16">
 <path d="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" p-id="13752"></path>
 <path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z" p-id="13753"></path>
-</svg>`
+</svg>`;
 
 export const H1_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z M1,1 L1,15 L15,15 L15,1 L1,1 Z M12,12 L13,12 L13,13 L10,13 L10,12 L11,12 L11,9 L10,9 L10,8 L12,8 L12,12 Z M3,3 L11,3 L11,4 L3,4 L3,3 Z" id="形状" fill="#293040"></path>
 </g>
-</svg>`
+</svg>`;
 
 export const H2_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -160,4 +160,4 @@ export const FULLSCREEN_EXPAND_ICON = `<svg width="16px" height="16px" viewBox="
 
 export const FULLSCREEN_CONTRACT_ICON = `<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
 <path fill="#293040" d="M682.666667 384h192a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333H725.333333V149.333333a21.333333 21.333333 0 0 0-21.333333-21.333333h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333333V341.333333a42.666667 42.666667 0 0 0 42.666667 42.666667zM384 341.333333V149.333333a21.333333 21.333333 0 0 0-21.333333-21.333333h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333333V298.666667H149.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333333 21.333333H341.333333a42.666667 42.666667 0 0 0 42.666667-42.666667z m341.333333 533.333334V725.333333h149.333334a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333H682.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v192a21.333333 21.333333 0 0 0 21.333333 21.333333h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333333z m-405.333333 21.333333h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333333V682.666667a42.666667 42.666667 0 0 0-42.666667-42.666667H149.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333333 21.333333H298.666667v149.333334a21.333333 21.333333 0 0 0 21.333333 21.333333z" p-id="17085"></path>
-</svg>`;
+</svg>`;

packages/devui-vue/devui/editor-md/src/plugins/mermaid.ts

@@ -12,7 +12,7 @@ const DEFAULT_CONFIG = {
 
 function render(code: string, options: Record<string, any>) {
   try {
-    return `<div class="mermaid" id="${options.id}">${code}</div>`
+    return `<div class="mermaid" id="${options.id}">${code}</div>`;
   } catch (err: any) {
     return `<pre>${err.name}: ${err.message}</pre>`;
   }
@@ -27,14 +27,14 @@ export function mermaidRender(md: any, options = {}) {
     const token = tokens[idx];
     const code = token.content.trim();
     if (token.info.startsWith('mermaid')) {
-      return render(code, options)
+      return render(code, options);
     }
-    return defaultRenderer(tokens, idx, opts, env, self)
-  }
+    return defaultRenderer(tokens, idx, opts, env, self);
+  };
 }
 
 export function refreshMermaid(delay = 0) {
   setTimeout(() => {
     Mermaid.init();
   }, delay);
-}
+}

packages/devui-vue/devui/editor-md/src/utils.ts

@@ -29,7 +29,7 @@ export function locale(key: string): string {
     underline: '下划线',
     strike: '删除线',
     color: '字体颜色',
-    backgound: '背景色',
+    background: '背景色',
     orderedlist: '有序列表',
     unorderedlist: '无序列表',
     checklist: '任务列表',
@@ -82,7 +82,7 @@ export function locale(key: string): string {
     'counter-limit-tips': '{{countUnit}}数超出最大允许值',
     'ie-msg': '为了更好体验，请使用chrome浏览器',
     loading: '正在加载中...',
-    pasting: '您粘贴内容较多, 正在努力加载中，请耐心等待...'
-  }
+    pasting: '您粘贴内容较多, 正在努力加载中，请耐心等待...',
+  };
   return localeMap[key];
-}
+}