From 182d87c77395d6e6ebe8bc1b67975da00de9e12c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Wed, 16 Apr 2025 14:56:53 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=B0=86=E5=8F=98=E9=87=8F=E5=90=8D?= =?UTF-8?q?=E7=BF=BB=E8=AF=91=E4=B8=BA=E4=B8=AD=E6=96=87=E4=BB=A5=E6=8F=90?= =?UTF-8?q?=E9=AB=98=E5=8F=AF=E8=AF=BB=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 19 ++-- src/pages/PkgsUsage/SortableJS.page.vue | 114 ++++++++++++------------ 2 files changed, 66 insertions(+), 67 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 148ec73..2e29169 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,12 +1,4 @@ { - "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit", - "source.fixAll.stylelint": "explicit", - "source.fixAll.oxc": "explicit", - - "source.organizeImports": "never" - }, - "editor.formatOnSave": true, // "editor.formatOnSaveMode": "modificationsIfAvailable", // 只格式化修改的部分 "editor.formatOnSaveMode": "file", // 格式化整个文件 "[vue]": { @@ -25,7 +17,12 @@ "typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"], "i18n-ally.localesPaths": ["src/locales"], "i18n-ally.keystyle": "nested", - "oxc.enable": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.fixAll.stylelint": "explicit", + "source.fixAll.oxc": "explicit", + "source.organizeImports": "never" + }, "editor.codeActionsOnSave": { "source.fixAll.eslint": "never", "source.fixAll.stylelint": "never", @@ -33,5 +30,7 @@ "source.organizeImports": "never", "source.fixAll": "never" }, - "editor.formatOnSave": false + "editor.formatOnSave": false, + "oxc.enable": true, + "eslint.enable": true } diff --git a/src/pages/PkgsUsage/SortableJS.page.vue b/src/pages/PkgsUsage/SortableJS.page.vue index 709774a..662cbab 100644 --- a/src/pages/PkgsUsage/SortableJS.page.vue +++ b/src/pages/PkgsUsage/SortableJS.page.vue @@ -6,7 +6,7 @@ interface ComponentItem { name: string; } -const componentsList = ref([ +const 组件列表 = ref([ { id: 1, name: '组件1' }, { id: 2, name: '组件2' }, { id: 3, name: '组件3' }, @@ -14,25 +14,25 @@ const componentsList = ref([ { id: 5, name: '组件5' }, ]); -const processStartList = ref([]); -const processEndList = ref([]); +const 流程起点列表 = ref([]); +const 流程终点列表 = ref([]); -const sourceListRef = ref(null); -const startListRef = ref(null); -const endListRef = ref(null); +const 源列表引用 = useTemplateRef('源列表引用'); +const 起点列表引用 = useTemplateRef('起点列表引用'); +const 终点列表引用 = useTemplateRef('终点列表引用'); function getItemIndex(item: ComponentItem): number { - return componentsList.value.findIndex((comp) => comp.id === item.id); + return 组件列表.value.findIndex((comp) => comp.id === item.id); } function getItemById(id: number): ComponentItem | undefined { - return componentsList.value.find((comp) => comp.id === id); + return 组件列表.value.find((comp) => comp.id === id); } // 添加元素到起点列表，维护相应的 DOM 和数据模型 function addToStartList(item: ComponentItem, domItem: HTMLElement) { const newStartIndex = getItemIndex(item); - const endIndex = processEndList.value.length > 0 ? getItemIndex(processEndList.value[0]) : -1; + const endIndex = 流程终点列表.value.length > 0 ? getItemIndex(流程终点列表.value[0]) : -1; // 约束检查：如果终点已存在，则新起点必须在终点之前 if (endIndex !== -1 && newStartIndex >= endIndex) { @@ -42,10 +42,10 @@ function addToStartList(item: ComponentItem, domItem: HTMLElement) { } // 更新数据模型 - if (processStartList.value.length > 0) { - processStartList.value.splice(0, 1, item); // 替换 + if (流程起点列表.value.length > 0) { + 流程起点列表.value.splice(0, 1, item); // 替换 } else { - processStartList.value.push(item); // 添加 + 流程起点列表.value.push(item); // 添加 } return true; // 表示添加成功 @@ -54,7 +54,7 @@ function addToStartList(item: ComponentItem, domItem: HTMLElement) { // 添加元素到终点列表，维护相应的 DOM 和数据模型 function addToEndList(item: ComponentItem, domItem: HTMLElement) { const newEndIndex = getItemIndex(item); - const startIndex = processStartList.value.length > 0 ? getItemIndex(processStartList.value[0]) : -1; + const startIndex = 流程起点列表.value.length > 0 ? getItemIndex(流程起点列表.value[0]) : -1; // 约束检查：如果起点已存在，则新终点必须在起点之后 if (startIndex !== -1 && newEndIndex <= startIndex) { @@ -64,10 +64,10 @@ function addToEndList(item: ComponentItem, domItem: HTMLElement) { } // 更新数据模型 - if (processEndList.value.length > 0) { - processEndList.value.splice(0, 1, item); // 替换 + if (流程终点列表.value.length > 0) { + 流程终点列表.value.splice(0, 1, item); // 替换 } else { - processEndList.value.push(item); // 添加 + 流程终点列表.value.push(item); // 添加 } return true; // 表示添加成功 @@ -75,11 +75,11 @@ function addToEndList(item: ComponentItem, domItem: HTMLElement) { // 清理起点列表的 DOM，确保与数据模型一致 function cleanupStartListDOM(keepItemId?: number) { - if (!startListRef.value) return; + if (!起点列表引用.value) return; consola.info(`清理起点列表 DOM，保留的项 ID：${keepItemId ?? '无'}`); - const children = [...startListRef.value.children]; + const children = [...起点列表引用.value.children]; let found = false; for (const child of children) { @@ -98,7 +98,7 @@ function cleanupStartListDOM(keepItemId?: number) { } // 对于其他项 else if (keepItemId === undefined || childId !== keepItemId) { - if (processStartList.value.length === 1 && processStartList.value[0].id === childId) { + if (流程起点列表.value.length === 1 && 流程起点列表.value[0].id === childId) { // 如果这个项与数据模型匹配，保留 if (found) { consola.info(`移除重复的起点项，ID: ${childId}`); @@ -113,7 +113,7 @@ function cleanupStartListDOM(keepItemId?: number) { child.remove(); } } - } else if (child.classList.contains('placeholder') && processStartList.value.length > 0) { + } else if (child.classList.contains('placeholder') && 流程起点列表.value.length > 0) { // 数据模型有项时，移除占位符 consola.info('移除起点列表中的占位符，因为数据模型中已有项'); child.remove(); @@ -121,22 +121,22 @@ function cleanupStartListDOM(keepItemId?: number) { } // 如果数据模型为空，且DOM中没有占位符，添加占位符 - if (processStartList.value.length === 0 && !startListRef.value.querySelector('.placeholder')) { + if (流程起点列表.value.length === 0 && !起点列表引用.value.querySelector('.placeholder')) { consola.info('添加起点列表占位符，因为数据模型为空'); const placeholder = document.createElement('div'); placeholder.className = 'placeholder'; placeholder.textContent = '请拖入组件构成流程起点'; - startListRef.value.append(placeholder); + 起点列表引用.value.append(placeholder); } } // 清理终点列表的 DOM，确保与数据模型一致 function cleanupEndListDOM(keepItemId?: number) { - if (!endListRef.value) return; + if (!终点列表引用.value) return; consola.info(`清理终点列表 DOM，保留的项 ID：${keepItemId ?? '无'}`); - const children = [...endListRef.value.children]; + const children = [...终点列表引用.value.children]; let found = false; for (const child of children) { @@ -155,7 +155,7 @@ function cleanupEndListDOM(keepItemId?: number) { } // 对于其他项 else if (keepItemId === undefined || childId !== keepItemId) { - if (processEndList.value.length === 1 && processEndList.value[0].id === childId) { + if (流程终点列表.value.length === 1 && 流程终点列表.value[0].id === childId) { // 如果这个项与数据模型匹配，保留 if (found) { consola.info(`移除重复的终点项，ID: ${childId}`); @@ -170,7 +170,7 @@ function cleanupEndListDOM(keepItemId?: number) { child.remove(); } } - } else if (child.classList.contains('placeholder') && processEndList.value.length > 0) { + } else if (child.classList.contains('placeholder') && 流程终点列表.value.length > 0) { // 数据模型有项时，移除占位符 consola.info('移除终点列表中的占位符，因为数据模型中已有项'); child.remove(); @@ -178,23 +178,23 @@ function cleanupEndListDOM(keepItemId?: number) { } // 如果数据模型为空，且DOM中没有占位符，添加占位符 - if (processEndList.value.length === 0 && !endListRef.value.querySelector('.placeholder')) { + if (流程终点列表.value.length === 0 && !终点列表引用.value.querySelector('.placeholder')) { consola.info('添加终点列表占位符，因为数据模型为空'); const placeholder = document.createElement('div'); placeholder.className = 'placeholder'; placeholder.textContent = '请拖入组件构成流程终点'; - endListRef.value.append(placeholder); + 终点列表引用.value.append(placeholder); } } onMounted(() => { - if (!sourceListRef.value || !startListRef.value || !endListRef.value) { + if (!源列表引用.value || !起点列表引用.value || !终点列表引用.value) { consola.error('未能获取到 SortableJS 容器元素'); return; } // 初始化源列表 - Sortable.create(sourceListRef.value, { + Sortable.create(源列表引用.value, { group: { name: 'components', pull: 'clone', // 允许克隆 @@ -212,7 +212,7 @@ onMounted(() => { }); // 初始化流程起点列表 - Sortable.create(startListRef.value, { + Sortable.create(起点列表引用.value, { group: { name: 'flowPoints', // 修改为新的组名，用于区分"流程点"和普通组件 pull: true, // 允许拖出 @@ -231,9 +231,9 @@ onMounted(() => { } // 检查来源，如果是从终点列表拖来的 - if (evt.from === endListRef.value) { + if (evt.from === 终点列表引用.value) { // 从终点列表移除 - processEndList.value = []; + 流程终点列表.value = []; } // 尝试添加到起点列表 @@ -244,7 +244,7 @@ onMounted(() => { cleanupStartListDOM(added ? itemId : undefined); // 如果来源是终点列表，需同时清理终点列表的 DOM - if (evt.from === endListRef.value) { + if (evt.from === 终点列表引用.value) { cleanupEndListDOM(); } }); @@ -252,7 +252,7 @@ onMounted(() => { }); // 初始化流程终点列表 - Sortable.create(endListRef.value, { + Sortable.create(终点列表引用.value, { group: { name: 'flowPoints', // 与起点列表使用相同的组名 pull: true, // 允许拖出 @@ -271,9 +271,9 @@ onMounted(() => { } // 检查来源，如果是从起点列表拖来的 - if (evt.from === startListRef.value) { + if (evt.from === 起点列表引用.value) { // 从起点列表移除 - processStartList.value = []; + 流程起点列表.value = []; } // 尝试添加到终点列表 @@ -284,7 +284,7 @@ onMounted(() => { cleanupEndListDOM(added ? itemId : undefined); // 如果来源是起点列表，需同时清理起点列表的 DOM - if (evt.from === startListRef.value) { + if (evt.from === 起点列表引用.value) { cleanupStartListDOM(); } }); @@ -294,16 +294,16 @@ onMounted(() => { // 计算流程中的中间节点 (基于起点和终点在原始列表中的位置) const intermediateNodes = computed(() => { - if (processStartList.value.length === 0 || processEndList.value.length === 0) { + if (流程起点列表.value.length === 0 || 流程终点列表.value.length === 0) { return []; } - const startIndex = getItemIndex(processStartList.value[0]); - const endIndex = getItemIndex(processEndList.value[0]); + const startIndex = getItemIndex(流程起点列表.value[0]); + const endIndex = getItemIndex(流程终点列表.value[0]); // 确保起点和终点都有效，且它们之间至少有一个组件 if (startIndex !== -1 && endIndex !== -1 && startIndex < endIndex - 1) { // 返回原始列表中位于起点和终点之间的组件 - return componentsList.value.slice(startIndex + 1, endIndex); + return 组件列表.value.slice(startIndex + 1, endIndex); } return []; }); @@ -314,9 +314,9 @@ const intermediateNodes = computed(() => {

组件选择

-
+
{
流程起点：
请拖入组件构成流程起点
{
流程终点：
请拖入组件构成流程终点
{
-