update main with dev

packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts

@@ -218,4 +218,4 @@ export function useCodeReviewComment(reviewContentRef: Ref<HTMLElement>, props:
     updateLineNumberMap,
     updateCheckedLine,
   };
-}
+}

packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts

@@ -248,4 +248,4 @@ export function useCodeReviewLineSelection(
   );
 
   return { onMousedown, updateLineNumberMap, getCheckedLineDetails, clearCommentClass, updateCheckedLine };
-}
+}

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

@@ -561,7 +561,7 @@ export function parseCodeToSingle(container: HTMLElement, code: string, options:
 }
 
 function generateNumberTdObj(tdNodes: HTMLElement[]) {
-  const lineNumber = parseInt(tdNodes[0].innerText) || -1;
+  const lineNumber = tdNodes[0]?.innerText ? parseInt(tdNodes[0].innerText) : -1;
   if (lineNumber !== -1) {
     return { [lineNumber]: tdNodes };
   }

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

@@ -2,7 +2,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { computed, nextTick, onMounted, reactive, Ref, ref, SetupContext, toRefs, watch, onBeforeUnmount } from 'vue';
 import { debounce } from '../../../shared/utils';
 import { EditorMdProps, Mode } from '../editor-md-types';
-import { DEFAULT_TOOLBARS } from '../toolbar-config';
+import { ALT_KEY, DEFAULT_TOOLBARS } from '../toolbar-config';
 import { parseHTMLStringToDomList } from '../utils';
 import { refreshEditorCursor, _enforceMaxLength } from './helper';
 import { throttle } from 'lodash';
@@ -289,8 +289,8 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
     const tempToolbars = { ...toolbars, ...customToolbars?.value };
     for (const key of Object.keys(tempToolbars)) {
       const toolbarItem = tempToolbars[key];
-      if (toolbarItem.shortKey && flatToolbarConfig.includes(toolbarItem.id)) {
-        shortKeys[toolbarItem.shortKey.replace(/\+/g, '-')] = toolbarItem.handler?.bind(null, editorIns, toolbarItem.params);
+      if (toolbarItem.shortKeyWithCode && flatToolbarConfig.includes(toolbarItem.id)) {
+        shortKeys[toolbarItem.shortKeyWithCode.replace(/\+/g, '-')] = toolbarItem.handler?.bind(null, editorIns, toolbarItem.params);
       }
     }
 
@@ -322,13 +322,17 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
       if (e.ctrlKey) {
         keyCombination += 'Ctrl-';
       }
+      if (e.metaKey) {
+        keyCombination += '⌘-';
+      }
       if (e.altKey) {
-        keyCombination += 'Alt-';
+        keyCombination += `${ALT_KEY}-`;
       }
       if (e.shiftKey) {
         keyCombination += 'Shift-';
       }
-      keyCombination += e.key.toUpperCase();
+
+      keyCombination += e.keyCode;
       if (shortKeys[keyCombination] && typeof shortKeys[keyCombination] === 'function') {
         e.preventDefault();
         shortKeys[keyCombination]();

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

@@ -31,6 +31,7 @@ export interface IToolbarItemConfig {
   template?: any;
   component?: any;
   shortKey?: string;
+  shortKeyWithCode?: string;
   params?: { [key: string]: any };
   handler?(editor?: any, params?: any): void;
 }
@@ -277,93 +278,107 @@ class ToolBarHandler {
   static color = (): void => {};
 }
 
+export const CTRL_KEY = navigator?.platform?.indexOf('Mac') !== -1 ? '⌘' : 'Ctrl';
+export const ALT_KEY = navigator?.platform?.indexOf('Mac') !== -1 ? '⌥' : 'Alt';
+
 export const DEFAULT_TOOLBARS: Record<string, IToolbarItemConfig> = {
   undo: {
     id: 'undo',
     name: 'undo',
     type: 'button',
     icon: UNDO_ICON,
-    shortKey: 'Ctrl+Z',
+    shortKey: `${CTRL_KEY}+Z`,
+    shortKeyWithCode: `${CTRL_KEY}+90`,
     handler: ToolBarHandler.undo,
   },
   redo: {
     id: 'redo',
     name: 'redo',
     type: 'button',
     icon: REDO_ICON,
-    shortKey: 'Ctrl+Y',
+    shortKey: `${CTRL_KEY}+Y`,
+    shortKeyWithCode: `${CTRL_KEY}+89`,
     handler: ToolBarHandler.redo,
   },
   bold: {
     id: 'bold',
     name: 'bold',
     type: 'button',
     icon: BOLD_ICON,
-    shortKey: 'Ctrl+B',
+    shortKey: `${CTRL_KEY}+B`,
+    shortKeyWithCode: `${CTRL_KEY}+66`,
     handler: ToolBarHandler.bold,
   },
   italic: {
     id: 'italic',
     name: 'italic',
     type: 'button',
     icon: ITALIC_ICON,
-    shortKey: 'Ctrl+I',
+    shortKey: `${CTRL_KEY}+I`,
+    shortKeyWithCode: `${CTRL_KEY}+73`,
     handler: ToolBarHandler.italic,
   },
   strike: {
     id: 'strike',
     name: 'strike',
     type: 'button',
     icon: STRIKE_ICON,
-    shortKey: 'Ctrl+D',
+    shortKey: `${CTRL_KEY}+D`,
+    shortKeyWithCode: `${CTRL_KEY}+68`,
     handler: ToolBarHandler.strike,
   },
   h1: {
     id: 'h1',
     name: 'h1',
     type: 'button',
     icon: H1_ICON,
-    shortKey: 'Ctrl+1',
+    shortKey: `${CTRL_KEY}+1`,
+    shortKeyWithCode: `${CTRL_KEY}+49`,
     handler: ToolBarHandler.h1,
   },
   h2: {
     id: 'h2',
     name: 'h2',
     type: 'button',
     icon: H2_ICON,
-    shortKey: 'Ctrl+2',
+    shortKey: `${CTRL_KEY}+2`,
+    shortKeyWithCode: `${CTRL_KEY}+50`,
     handler: ToolBarHandler.h2,
   },
   ul: {
     id: 'ul',
     name: 'unorderedlist',
     type: 'button',
     icon: LIST_UNORDERED_ICON,
-    shortKey: 'Ctrl+U',
+    shortKey: `${CTRL_KEY}+U`,
+    shortKeyWithCode: `${CTRL_KEY}+85`,
     handler: ToolBarHandler.ul,
   },
   ol: {
     id: 'ol',
     name: 'orderedlist',
     type: 'button',
     icon: LIST_ORDERED_ICON,
-    shortKey: 'Ctrl+O',
+    shortKey: `${CTRL_KEY}+O`,
+    shortKeyWithCode: `${CTRL_KEY}+79`,
     handler: ToolBarHandler.ol,
   },
   checklist: {
     id: 'checklist',
     name: 'checklist',
     type: 'button',
     icon: LIST_CHECK_ICON,
-    shortKey: 'Ctrl+Alt+C',
+    shortKey: `${CTRL_KEY}+${ALT_KEY}+C`,
+    shortKeyWithCode: `${CTRL_KEY}+${ALT_KEY}+67`,
     handler: ToolBarHandler.checkList,
   },
   underline: {
     id: 'underline',
     name: 'underline',
     type: 'button',
     icon: UNDERLINE_ICON,
-    shortKey: 'Ctrl+R',
+    shortKey: `${CTRL_KEY}+R`,
+    shortKeyWithCode: `${CTRL_KEY}+82`,
     handler: ToolBarHandler.underline,
   },
   font: {
@@ -379,15 +394,17 @@ export const DEFAULT_TOOLBARS: Record<string, IToolbarItemConfig> = {
     name: 'link',
     type: 'button',
     icon: LINK_ICON,
-    shortKey: 'Ctrl+L',
+    shortKey: `${CTRL_KEY}+L`,
+    shortKeyWithCode: `${CTRL_KEY}+76`,
     handler: ToolBarHandler.link,
   },
   image: {
     id: 'image',
     name: 'image',
     type: 'button',
     icon: IMAGE_ICON,
-    shortKey: 'Ctrl+G',
+    shortKey: `${CTRL_KEY}+G`,
+    shortKeyWithCode: `${CTRL_KEY}+71`,
     params: { imageUploadToServer: false },
     handler: ToolBarHandler.image,
   },
@@ -397,23 +414,26 @@ export const DEFAULT_TOOLBARS: Record<string, IToolbarItemConfig> = {
     type: 'button',
     icon: FILE_ICON,
     params: {},
-    shortKey: 'Ctrl+F',
+    shortKey: `${CTRL_KEY}+F`,
+    shortKeyWithCode: `${CTRL_KEY}+70`,
     handler: ToolBarHandler.file,
   },
   code: {
     id: 'code',
     name: 'code',
     type: 'button',
     icon: CODE_ICON,
-    shortKey: 'Ctrl+K',
+    shortKey: `${CTRL_KEY}+K`,
+    shortKeyWithCode: `${CTRL_KEY}+75`,
     handler: ToolBarHandler.code,
   },
   table: {
     id: 'table',
     name: 'table',
     type: 'button',
     icon: TABLE_ICON,
-    shortKey: 'Ctrl+Alt+T',
+    shortKey: `${CTRL_KEY}+${ALT_KEY}+T`,
+    shortKeyWithCode: `${CTRL_KEY}+${ALT_KEY}+84`,
     handler: ToolBarHandler.table,
   },
   fullscreen: {

packages/devui-vue/devui/git-graph/src/git-graph-class.ts

@@ -72,12 +72,12 @@ export class GitGraph {
     this.graphHeight = (this.element as HTMLElement).getBoundingClientRect().height;
     this.graphWidth = (this.element as HTMLElement).getBoundingClientRect().width;
 
-    // 按提交数据计算画布高度，并留出下方150，右边300空白，保证悬浮框不超出画布
+    // 按提交数据计算画布高度，并留出下方150，右边500空白，保证悬浮框不超出画布
     const ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
-    const cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+    const cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 500);
     this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     this.svg.setAttribute('height', ch + '');
-    this.svg.setAttribute('width', '100%');
+    this.svg.setAttribute('width', cw + '');
     this.element?.appendChild(this.svg);
     this.barHeight = Math.max(this.graphHeight, this.unitTime * this.commits.length + 320);
 
@@ -237,7 +237,7 @@ export class GitGraph {
       r: 4,
       fill: '#fff',
       strokeWidth: 1,
-      stroke: this.colors[commit.space],
+      stroke: this.colors[commit.space % 20],
       style: 'cursor: pointer;'
     };
     this.setNodeAttr(circle, attrs);
@@ -265,7 +265,7 @@ export class GitGraph {
     this.svg.appendChild(img);
 
     if (!this.messageBoxWidth) {
-      this.messageBoxWidth = this.svg.getBoundingClientRect.width - (avatar_box_x + 40);
+      this.messageBoxWidth = this.svg.getBoundingClientRect().width - (avatar_box_x + 40);
     }
     // 画竖线
     let route = ['M', avatar_box_x + 15, avatar_box_y - 20, 'L', avatar_box_x + 15, avatar_box_y];
@@ -292,17 +292,30 @@ export class GitGraph {
       commit.author.name = commit.author.name.substr(0, this.maxNameLength) + '...';
     }
 
-    const commitText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    const commitText = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
     const commitAttrs = {
       x: avatar_box_x + 40,
-      y: y + 4,
+      y: y - 8,
       'text-anchor': 'start',
       style: 'cursor: pointer;text-anchor: start;',
-      fill: isdark ? '#e8e8e8' : '#2e2e2e',
-      'font-size': 14,
+      width: this.messageBoxWidth,
+      height: 20,
     };
     this.setNodeAttr(commitText, commitAttrs);
 
+    const textArr = {
+      style: 'width: 100%; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;',
+      title: commit.message,
+    };
+
+    const text = document.createElement('div');
+    this.setNodeAttr(text, textArr);
+
+    text.innerText = commit.message.replace(/\n/g, ' ');
+    commitText.appendChild(text);
+
+    this.svg.appendChild(commitText);
+
     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
     tspan.appendChild(document.createTextNode(commit.message.replace(/\n/g, ' ')));
     commitText.appendChild(tspan);
@@ -339,9 +352,9 @@ export class GitGraph {
       parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
       parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
       if (parentCommit.space <= commit.space) {
-        color = this.colors[commit.space];
+        color = this.colors[commit.space % 20];
       } else {
-        color = this.colors[parentCommit.space];
+        color = this.colors[parentCommit.space % 20];
       }
       if (parent[1] === commit.space) {
         offset = [0, 5];
@@ -438,15 +451,15 @@ export class GitGraph {
 
       const rectAttrs = {
         fill: this.isDark ? '#4C4C4C' : '#fff',
-        stroke: this.colors[commit.space],
+        stroke: this.colors[commit.space % 20],
         'stroke-width': '1px',
         d: path.join(' '),
         transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`,
       };
 
       const newAttrs = {
         transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`,
-        fill: this.colors[commit.space],
+        fill: this.colors[commit.space % 20],
       };
 
       this.setNodeAttr(text, newAttrs);

packages/devui-vue/devui/git-graph/src/git-graph.scss

@@ -0,0 +1,3 @@
+.d-graph-wrapper {
+  overflow-x: auto;
+}

packages/devui-vue/devui/git-graph/src/git-graph.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, ref, SetupContext, nextTick } from "vue";
 import { GitGraphProps, gitGraphProps } from "./git-graph-types";
 import useGitGraph from "./use-git-graph";
-
+import './git-graph.scss';
 
 export default defineComponent({
   name: 'DGitGraph',

packages/devui-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.28",
+  "version": "1.6.29",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [