From 9d1133d4112c4af20105a0ba3750c37e691ba11d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Mon, 25 Nov 2024 14:09:26 +0800 Subject: [PATCH 1/5] Xingyan/fix code review (#1916) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(CodeReview): 修复拖拽时记录的行号区间错误的问题 --- .../src/composables/use-code-review-comment.ts | 18 ++++++++++-------- .../use-code-review-line-selection.ts | 6 ++++-- packages/devui-vue/package.json | 2 +- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts index f9ceeb0d5e..6a86b07983 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review-comment.ts @@ -118,7 +118,7 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: } }; // 获代码行 取值方法 - const getLineNumbers = (currentNumber: number, currentNumbers: Array) => { + const getLineNumbers = (currentNumber: number, currentNumbers: Array, moveDirection: 'up' | 'down') => { if (currentNumber === -1) { // 当前行没数据不代表之前选中的没数据，此时返回原来的 return currentNumbers; @@ -129,12 +129,12 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: const numbers = [...currentNumbers]; let max = Math.max(...numbers); let min = Math.min(...numbers); - if (currentNumber < min) { - min = currentNumber; - } - if (currentNumber > max) { + if (moveDirection === 'down') { max = currentNumber; } + if (moveDirection === 'up') { + min = currentNumber; + } return Array.from({ length: max - min + 1 }, (_, i) => i + min); }; // 获取一些公共类和判断 @@ -211,11 +211,13 @@ export function useCodeReviewComment(reviewContentRef: Ref, props: } getDoubleCheckedLineCode(shouldRenderClass); } - function updateLineNumbers() { + function updateLineNumbers(moveDirection: 'up' | 'down') { currentLeftLineNumbers = - currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers); + currentLeftLineNumber === -1 ? currentLeftLineNumbers : getLineNumbers(currentLeftLineNumber, currentLeftLineNumbers, moveDirection); currentRightLineNumbers = - currentRightLineNumber === -1 ? currentRightLineNumbers : getLineNumbers(currentRightLineNumber, currentRightLineNumbers); + currentRightLineNumber === -1 + ? currentRightLineNumbers + : getLineNumbers(currentRightLineNumber, currentRightLineNumbers, moveDirection); getCheckedLineCode(false); afterCheckLinesEmitData = { left: currentLeftLineNumber, diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts index 6d0592bb25..38edc38257 100644 --- a/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts +++ b/packages/devui-vue/devui/code-review/src/composables/use-code-review-line-selection.ts @@ -6,7 +6,7 @@ import { findParentTrNode } from '../utils'; export function useCodeReviewLineSelection( reviewContentRef: Ref, props: CodeReviewProps, - mouseMoveCb: () => void, + mouseMoveCb: (moveDirection: 'up' | 'down') => void, mouseupCb: () => void ) { const ns = useNamespace('code-review'); @@ -16,6 +16,7 @@ export function useCodeReviewLineSelection( let isClickedLeft: boolean | undefined; let shouldClear: boolean; let isMouseMoved: boolean; + let startClientY: number; const onMousedown = (e: MouseEvent) => { // 鼠标左键按下 @@ -44,6 +45,7 @@ export function useCodeReviewLineSelection( dragging = true; shouldClear = true; isMouseMoved = false; + startClientY = e.clientY; e.preventDefault(); e.stopPropagation(); document.addEventListener('mousemove', onMousemove); @@ -74,7 +76,7 @@ export function useCodeReviewLineSelection( if (endIndex === -1) { return; } - mouseMoveCb(); + mouseMoveCb(e.clientY > startClientY ? 'down' : 'up'); if (startIndex > endIndex) { [startIndex, endIndex] = [endIndex, startIndex]; } diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index fa6b791d3a..1d38592356 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.24", + "version": "1.6.25", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [ From f08a85430dfcc003f38ac2663cf27a18f0434cd2 Mon Sep 17 00:00:00 2001 From: GreatZP Date: Thu, 5 Dec 2024 22:08:25 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix(code-review):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8F=AF=E8=83=BD=E7=9A=84=E7=A9=BA=E5=80=BC=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/code-review/src/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/code-review/src/utils.ts b/packages/devui-vue/devui/code-review/src/utils.ts index 110a0e2539..d8408bf387 100644 --- a/packages/devui-vue/devui/code-review/src/utils.ts +++ b/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 }; } From 69a8967a30e2bee532924dc8d70ec5d6cdd8d67c Mon Sep 17 00:00:00 2001 From: GreatZP Date: Tue, 10 Dec 2024 23:10:37 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(git-graph):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=B6=85=E5=A4=9A=E5=B1=82=E7=BA=A7=E6=B8=B2=E6=9F=93=E4=B8=8D?= =?UTF-8?q?=E6=AD=A3=E7=A1=AE=EF=BC=8C=E6=96=87=E5=AD=97=E8=B6=85=E9=95=BF?= =?UTF-8?q?=E4=B8=8D=E7=9C=81=E7=95=A5=EF=BC=8C=E5=9B=BE=E5=BD=A2=E8=B6=85?= =?UTF-8?q?=E5=AE=BD=E6=97=A0=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/git-graph/src/git-graph-class.ts | 39 ++++++++++++------- .../devui/git-graph/src/git-graph.scss | 3 ++ .../devui/git-graph/src/git-graph.tsx | 2 +- 3 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 packages/devui-vue/devui/git-graph/src/git-graph.scss diff --git a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts b/packages/devui-vue/devui/git-graph/src/git-graph-class.ts index c620811109..05d5da3a71 100644 --- a/packages/devui-vue/devui/git-graph/src/git-graph-class.ts +++ b/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,7 +451,7 @@ 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)`, @@ -446,7 +459,7 @@ export class GitGraph { 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); diff --git a/packages/devui-vue/devui/git-graph/src/git-graph.scss b/packages/devui-vue/devui/git-graph/src/git-graph.scss new file mode 100644 index 0000000000..28e11539b2 --- /dev/null +++ b/packages/devui-vue/devui/git-graph/src/git-graph.scss @@ -0,0 +1,3 @@ +.d-graph-wrapper { + overflow-x: auto; +} diff --git a/packages/devui-vue/devui/git-graph/src/git-graph.tsx b/packages/devui-vue/devui/git-graph/src/git-graph.tsx index 95614bb715..ee2f044160 100644 --- a/packages/devui-vue/devui/git-graph/src/git-graph.tsx +++ b/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', From b8710c9c34a86a8a55ea3689083b33b383591d5e Mon Sep 17 00:00:00 2001 From: GreatZP Date: Tue, 10 Dec 2024 23:29:50 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(md-editor):=20=E5=BF=AB=E6=8D=B7?= =?UTF-8?q?=E9=94=AE=E5=85=BC=E5=AE=B9macOS=E9=94=AE=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/composables/use-editor-md.ts | 14 +++-- .../devui/editor-md/src/toolbar-config.ts | 52 +++++++++++++------ 2 files changed, 45 insertions(+), 21 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index 5fb37fd4cf..a6655aaf46 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/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](); diff --git a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts b/packages/devui-vue/devui/editor-md/src/toolbar-config.ts index d3711660ed..bc4b0c665c 100644 --- a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts +++ b/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,13 +278,17 @@ 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 = { 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: { @@ -291,7 +296,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'redo', type: 'button', icon: REDO_ICON, - shortKey: 'Ctrl+Y', + shortKey: `${CTRL_KEY}+Y`, + shortKeyWithCode: `${CTRL_KEY}+89`, handler: ToolBarHandler.redo, }, bold: { @@ -299,7 +305,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'bold', type: 'button', icon: BOLD_ICON, - shortKey: 'Ctrl+B', + shortKey: `${CTRL_KEY}+B`, + shortKeyWithCode: `${CTRL_KEY}+66`, handler: ToolBarHandler.bold, }, italic: { @@ -307,7 +314,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'italic', type: 'button', icon: ITALIC_ICON, - shortKey: 'Ctrl+I', + shortKey: `${CTRL_KEY}+I`, + shortKeyWithCode: `${CTRL_KEY}+73`, handler: ToolBarHandler.italic, }, strike: { @@ -315,7 +323,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'strike', type: 'button', icon: STRIKE_ICON, - shortKey: 'Ctrl+D', + shortKey: `${CTRL_KEY}+D`, + shortKeyWithCode: `${CTRL_KEY}+68`, handler: ToolBarHandler.strike, }, h1: { @@ -323,7 +332,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'h1', type: 'button', icon: H1_ICON, - shortKey: 'Ctrl+1', + shortKey: `${CTRL_KEY}+1`, + shortKeyWithCode: `${CTRL_KEY}+49`, handler: ToolBarHandler.h1, }, h2: { @@ -331,7 +341,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'h2', type: 'button', icon: H2_ICON, - shortKey: 'Ctrl+2', + shortKey: `${CTRL_KEY}+2`, + shortKeyWithCode: `${CTRL_KEY}+50`, handler: ToolBarHandler.h2, }, ul: { @@ -339,7 +350,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'unorderedlist', type: 'button', icon: LIST_UNORDERED_ICON, - shortKey: 'Ctrl+U', + shortKey: `${CTRL_KEY}+U`, + shortKeyWithCode: `${CTRL_KEY}+85`, handler: ToolBarHandler.ul, }, ol: { @@ -347,7 +359,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'orderedlist', type: 'button', icon: LIST_ORDERED_ICON, - shortKey: 'Ctrl+O', + shortKey: `${CTRL_KEY}+O`, + shortKeyWithCode: `${CTRL_KEY}+79`, handler: ToolBarHandler.ol, }, checklist: { @@ -355,7 +368,8 @@ export const DEFAULT_TOOLBARS: Record = { 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: { @@ -363,7 +377,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'underline', type: 'button', icon: UNDERLINE_ICON, - shortKey: 'Ctrl+R', + shortKey: `${CTRL_KEY}+R`, + shortKeyWithCode: `${CTRL_KEY}+82`, handler: ToolBarHandler.underline, }, font: { @@ -379,7 +394,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'link', type: 'button', icon: LINK_ICON, - shortKey: 'Ctrl+L', + shortKey: `${CTRL_KEY}+L`, + shortKeyWithCode: `${CTRL_KEY}+76`, handler: ToolBarHandler.link, }, image: { @@ -387,7 +403,8 @@ export const DEFAULT_TOOLBARS: Record = { 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,7 +414,8 @@ export const DEFAULT_TOOLBARS: Record = { type: 'button', icon: FILE_ICON, params: {}, - shortKey: 'Ctrl+F', + shortKey: `${CTRL_KEY}+F`, + shortKeyWithCode: `${CTRL_KEY}+70`, handler: ToolBarHandler.file, }, code: { @@ -405,7 +423,8 @@ export const DEFAULT_TOOLBARS: Record = { name: 'code', type: 'button', icon: CODE_ICON, - shortKey: 'Ctrl+K', + shortKey: `${CTRL_KEY}+K`, + shortKeyWithCode: `${CTRL_KEY}+75`, handler: ToolBarHandler.code, }, table: { @@ -413,7 +432,8 @@ export const DEFAULT_TOOLBARS: Record = { 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: { From 03b2b64f2c92a4712331eb11855b4a5c665e8741 Mon Sep 17 00:00:00 2001 From: GreatZP Date: Tue, 10 Dec 2024 23:33:43 +0800 Subject: [PATCH 5/5] chore: Update package.json --- packages/devui-vue/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 52c49a5fc2..6fbbb04538 100644 --- a/packages/devui-vue/package.json +++ b/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": [