chore: 将变量名翻译为中文以提高可读性

src/pages/PkgsUsage/SortableJS.page.vue

@@ -6,7 +6,7 @@ interface ComponentItem {
   name: string;
 }
 
-const componentsList = ref<ComponentItem[]>([
+const 组件列表 = ref<ComponentItem[]>([
   { id: 1, name: '组件1' },
   { id: 2, name: '组件2' },
   { id: 3, name: '组件3' },
@@ -14,25 +14,25 @@ const componentsList = ref<ComponentItem[]>([
   { id: 5, name: '组件5' },
 ]);
 
-const processStartList = ref<ComponentItem[]>([]);
-const processEndList = ref<ComponentItem[]>([]);
+const 流程起点列表 = ref<ComponentItem[]>([]);
+const 流程终点列表 = ref<ComponentItem[]>([]);
 
-const sourceListRef = ref<HTMLElement | null>(null);
-const startListRef = ref<HTMLElement | null>(null);
-const endListRef = ref<HTMLElement | null>(null);
+const 源列表引用 = useTemplateRef<HTMLDivElement | null>('源列表引用');
+const 起点列表引用 = useTemplateRef<HTMLDivElement | null>('起点列表引用');
+const 终点列表引用 = useTemplateRef<HTMLDivElement | null>('终点列表引用');
 
 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(() => {
     <!-- 组件选择区域 -->
     <div class="flex-1 p-4 rounded">
       <h3 class="text-center mb-5 text-white font-bold">组件选择</h3>
-      <div ref="sourceListRef" class="min-h-150px rounded p-2.5 transition-bg duration-200">
+      <div ref="源列表引用" class="min-h-150px rounded p-2.5 transition-bg duration-200">
         <div
-          v-for="item in componentsList"
+          v-for="item in 组件列表"
           :key="item.id"
           class="py-2.5 px-4 mb-2 bg-[#333] border border-[#007bff] text-[#e0e0e0] rounded cursor-grab text-center drag-item component-item"
           :data-id="item.id"
@@ -333,17 +333,17 @@ const intermediateNodes = computed(() => {
       <div class="flex items-start mb-2.5">
         <div class="w-20 text-right mr-2.5 pt-2.5 text-[#ccc]">流程起点：</div>
         <div
-          ref="startListRef"
+          ref="起点列表引用"
           class="flex-1 min-h-150px rounded p-2.5 border-2 border-dashed border-[#555] bg-[#2a2a2a] mt-1.25 mb-5 target-list start-list"
         >
           <div
-            v-if="processStartList.length === 0"
+            v-if="流程起点列表.length === 0"
             class="flex justify-center items-center h-full min-h-130px text-[#888] text-center placeholder"
           >
             请拖入组件构成流程起点
           </div>
           <div
-            v-for="item in processStartList"
+            v-for="item in 流程起点列表"
             :key="item.id"
             class="py-2.5 px-4 mb-2 bg-[#444] border border-[#17a2b8] text-[#e0e0e0] rounded cursor-default text-center drag-item dropped-item"
             :data-id="item.id"
@@ -356,17 +356,17 @@ const intermediateNodes = computed(() => {
       <div class="flex items-start mb-2.5">
         <div class="w-20 text-right mr-2.5 pt-2.5 text-[#ccc]">流程终点：</div>
         <div
-          ref="endListRef"
+          ref="终点列表引用"
           class="flex-1 min-h-150px rounded p-2.5 border-2 border-dashed border-[#555] bg-[#2a2a2a] mt-1.25 target-list end-list"
         >
           <div
-            v-if="processEndList.length === 0"
+            v-if="流程终点列表.length === 0"
             class="flex justify-center items-center h-full min-h-130px text-[#888] text-center placeholder"
           >
             请拖入组件构成流程终点
           </div>
           <div
-            v-for="item in processEndList"
+            v-for="item in 流程终点列表"
             :key="item.id"
             class="py-2.5 px-4 mb-2 bg-[#444] border border-[#17a2b8] text-[#e0e0e0] rounded cursor-default text-center drag-item dropped-item"
             :data-id="item.id"
@@ -383,13 +383,13 @@ const intermediateNodes = computed(() => {
       <div
         class="mt-2.5 p-2.5 bg-[#2a2a2a] border border-[#444] rounded min-h-100px flex flex-col items-stretch justify-start gap-2"
       >
-        <template v-if="processStartList.length > 0 || processEndList.length > 0">
+        <template v-if="流程起点列表.length > 0 || 流程终点列表.length > 0">
           <div
-            v-if="processStartList.length > 0"
-            :key="`start-${processStartList[0].id}`"
+            v-if="流程起点列表.length > 0"
+            :key="`start-${流程起点列表[0].id}`"
             class="py-2.5 px-4 bg-[#333] border border-[#007bff] text-[#e0e0e0] rounded cursor-default flex-shrink-0 text-center drag-item component-item preview-item"
           >
-            {{ processStartList[0].name }}
+            {{ 流程起点列表[0].name }}
           </div>
           <div
             v-for="item in intermediateNodes"
@@ -399,11 +399,11 @@ const intermediateNodes = computed(() => {
             {{ item.name }}
           </div>
           <div
-            v-if="processEndList.length > 0"
-            :key="`end-${processEndList[0].id}`"
+            v-if="流程终点列表.length > 0"
+            :key="`end-${流程终点列表[0].id}`"
             class="py-2.5 px-4 bg-[#333] border border-[#007bff] text-[#e0e0e0] rounded cursor-default flex-shrink-0 text-center drag-item component-item preview-item"
           >
-            {{ processEndList[0].name }}
+            {{ 流程终点列表[0].name }}
           </div>
         </template>
         <div