feat: 完善组合订阅中单条订阅排序

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.16.52",
+  "version": "2.16.55",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/views/SubEditor.vue

@@ -331,12 +331,17 @@
               <nut-checkbox v-model="subCheckbox" :indeterminate="subCheckboxIndeterminate" @click="subCheckboxClick"></nut-checkbox>
             </div>
             <nut-checkboxgroup
-              v-model="form.subscriptions"
-              class="subs-checkbox-wrapper"
+              v-model="visibleSelectedSubscriptions"
+              :class="[
+                'subs-checkbox-wrapper',
+                {
+                  'is-simple-mode': appearanceSetting.isSimpleMode,
+                  'is-dragging': isDragging,
+                },
+              ]"
             >
               <draggable
-                :list="filteredSubsSelectList"
-                :sort="true"
+                v-model="displayedSubsSelectList"
                 item-key="0"
                 animation="300"
                 :scroll-sensitivity="200"
@@ -349,7 +354,6 @@
               >
                 <template #item="{ element }">
                   <nut-checkbox
-                    v-show="shouldShowElement(element[3])"
                     :key="element[0]"
                     :label="element[0]"
                     text-position="left"
@@ -359,7 +363,7 @@
                       <nut-avatar
                         :class="{ 'sub-item-customer-icon': !element[4], 'icon': true  }"
                         v-if="element[2]"
-                        size="32"
+                        :size="chooserAvatarSize"
                         :url="rewriteGithubUrl(element[2])"
                         bg-color=""
                       ></nut-avatar>
@@ -564,12 +568,17 @@ const githubUrlRewriter = computed(() => {
 const rewriteGithubUrl = (url?: string | null) => {
   return githubUrlRewriter.value(url);
 };
+const chooserAvatarSize = computed(() => {
+  return appearanceSetting.value.isSimpleMode ? "28" : "32";
+});
+
+type SubSelectRow = [string, string, string | undefined, string[] | undefined, boolean];
 
   const sub = computed(() => subsStore.getOneSub(configName));
   const collection = computed(() => subsStore.getOneCollection(configName));
 
   
-  const subsSelectList = computed(() => {
+  const subsSelectList = computed<SubSelectRow[]>(() => {
     return subsStore.subs.map(item => {
       return [
         item.name,
@@ -1197,73 +1206,151 @@ const urlValidator = (val: string): Promise<boolean> => {
     if(tag.value === 'untagged') return !Array.isArray(element) || element.length === 0
     return element.includes(tag.value)
   };
+  const ensureSubscriptions = (): string[] => {
+    if (!Array.isArray(form.subscriptions)) {
+      form.subscriptions = [];
+    }
+    return form.subscriptions;
+  };
+  const hasSameSubscriptions = (left: string[], right: string[]) => {
+    return left.length === right.length && left.every((name, index) => name === right[index]);
+  };
+  const skipNextDisplayedListSync = ref(false);
+  const replaceSubscriptions = (
+    nextSubscriptions: string[],
+    options?: { preserveDisplayedOrder?: boolean },
+  ) => {
+    const subscriptions = ensureSubscriptions();
+
+    if (hasSameSubscriptions(subscriptions, nextSubscriptions)) {
+      return;
+    }
+
+    if (options?.preserveDisplayedOrder) {
+      skipNextDisplayedListSync.value = true;
+    }
+
+    subscriptions.splice(0, subscriptions.length, ...nextSubscriptions);
+  };
+  const syncSubscriptionsFromRows = (rows: SubSelectRow[]) => {
+    const selectedSet = new Set(ensureSubscriptions());
+    const nextSubscriptions = rows
+      .filter(([name]) => selectedSet.has(name))
+      .map(([name]) => name);
+
+    replaceSubscriptions(nextSubscriptions, { preserveDisplayedOrder: true });
+  };
+  const selectedSubscriptions = computed(() => {
+    return Array.isArray(form.subscriptions) ? form.subscriptions : [];
+  });
+  const isRowVisibleByName = (name: string) => {
+    const row = subsSelectList.value.find((item) => item[0] === name);
+    return row ? shouldShowElement(row[3]) : false;
+  };
+  const orderedSubsSelectList = computed<SubSelectRow[]>(() => {
+    const selectedRows = selectedSubscriptions.value
+      .map(name => subsSelectList.value.find(item => item[0] === name))
+      .filter((item): item is SubSelectRow => Boolean(item));
+    const selectedSet = new Set(selectedRows.map(([name]) => name));
+
+    return [
+      ...selectedRows,
+      ...subsSelectList.value.filter(([name]) => !selectedSet.has(name)),
+    ];
+  });
+  const getCurrentVisibleRows = () => {
+    if (displayedSubsSelectList.value.length > 0) {
+      return displayedSubsSelectList.value;
+    }
+
+    return orderedSubsSelectList.value.filter((item) => shouldShowElement(item[3]));
+  };
+  const visibleSelectedSubscriptions = computed<string[]>({
+    get: () => {
+      return selectedSubscriptions.value.filter((name) => isRowVisibleByName(name));
+    },
+    set: (visibleSelectedNames) => {
+      const subscriptions = ensureSubscriptions();
+      const visibleRowOrder = getCurrentVisibleRows().map(([name]) => name);
+      const visibleSet = new Set(visibleRowOrder);
+      const visibleSelectedSet = new Set(visibleSelectedNames);
+      const visibleSelectedRowOrder = visibleRowOrder.filter((name) => visibleSelectedSet.has(name));
+      const nextSubscriptions = subscriptions.filter((name) => {
+        return !visibleSet.has(name) || visibleSelectedSet.has(name);
+      });
+      const findExistingIndex = (name: string) => nextSubscriptions.indexOf(name);
+
+      visibleSelectedRowOrder.forEach((name, index) => {
+        if (findExistingIndex(name) > -1) return;
+
+        const nextVisibleAnchor = visibleSelectedRowOrder
+          .slice(index + 1)
+          .find((candidate) => findExistingIndex(candidate) > -1);
+
+        if (nextVisibleAnchor) {
+          nextSubscriptions.splice(findExistingIndex(nextVisibleAnchor), 0, name);
+          return;
+        }
+
+        const previousVisibleAnchor = visibleSelectedRowOrder
+          .slice(0, index)
+          .reverse()
+          .find((candidate) => findExistingIndex(candidate) > -1);
+
+        if (previousVisibleAnchor) {
+          nextSubscriptions.splice(findExistingIndex(previousVisibleAnchor) + 1, 0, name);
+          return;
+        }
+
+        nextSubscriptions.push(name);
+      });
+
+      replaceSubscriptions(nextSubscriptions, { preserveDisplayedOrder: true });
+    },
+  });
+  const mergeVisibleOrder = <T>(
+    source: T[],
+    reorderedVisibleItems: T[],
+    shouldInclude: (item: T) => boolean,
+  ) => {
+    let visibleIndex = 0;
+
+    return source.map((item) => {
+      if (!shouldInclude(item)) {
+        return item;
+      }
+
+      const reorderedItem = reorderedVisibleItems[visibleIndex];
+      visibleIndex += 1;
+      return reorderedItem ?? item;
+    });
+  };
   const subCheckboxIndeterminate = ref(true);
   const subCheckbox = ref(true);
   // const subCheckboxChange = (v) => {
   //   console.log(`${!v} -> ${v}`)
   // };
   const subCheckboxClick = () => {
-    // 确保 form.subscriptions 存在
-    if (!form.subscriptions) {
-      form.subscriptions = [];
-    }
-    // const selected = toRaw(form.subscriptions) || []
-    const group = subsSelectList.value.filter(item => shouldShowElement(item[3])).map(item => item[0]) || []
+    const group = getCurrentVisibleRows().map(([name]) => name);
     if (subCheckboxIndeterminate.value) {
       console.log(`半选, 应变为全选`)  
-      for (let i = 0; i < group.length; i++) {
-        const index = form.subscriptions.indexOf(group[i])
-        if (index === -1) {
-          form.subscriptions.push(group[i])
-        }
-      }
+      visibleSelectedSubscriptions.value = group;
     } else if (!subCheckbox.value) {
       console.log(`全选, 应变为不选`)
-      // 用遍历与 form.subscriptions.slice 的方式, 去掉 form.subscriptions 中所有被 group 包含的元素
-      for (let i = 0; i < group.length; i++) {
-        const index = form.subscriptions.indexOf(group[i])
-        if (index > -1) {
-          form.subscriptions.splice(index, 1)
-        }
-      }
+      visibleSelectedSubscriptions.value = [];
       // subCheckbox.value = !subCheckbox.value
     } else {
       console.log(`不选, 应变为全选`)
-      for (let i = 0; i < group.length; i++) {
-        const index = form.subscriptions.indexOf(group[i])
-        if (index === -1) {
-          form.subscriptions.push(group[i])
-        }
-      }
+      visibleSelectedSubscriptions.value = group;
       // subCheckbox.value = !subCheckbox.value
     }
     subCheckboxIndeterminate.value = false
   };
-  const filteredSubsSelectList = ref([]);
-
-  const updateFilteredSubsList = () => {
-    if (!subsSelectList.value?.length) {
-      filteredSubsSelectList.value = [];
-      return;
-    }
-    
-    form.subscriptions = form.subscriptions || [];
-    
-    // 当选中"全部"标签时，将已选中的订阅提到最前面；否则保持原顺序
-    filteredSubsSelectList.value = tag.value === 'all'
-      ? [
-          // 已选中的（按选中顺序）
-          ...form.subscriptions.map(name => subsSelectList.value.find(item => item[0] === name)).filter(Boolean),
-          // 未选中的
-          ...subsSelectList.value.filter(item => !form.subscriptions.includes(item[0]))
-        ]
-      : [...subsSelectList.value];
-  };
-  // 监听 tag、subsSelectList 和 subsStore.subs 的变化时更新列表
-  watch([tag, subsSelectList, () => subsStore.subs], () => {
-    updateFilteredSubsList();
-  }, { immediate: true, deep: true });
+  const displayedSubsSelectList = ref<SubSelectRow[]>([]);
   const isDragging = ref(false);
+  const syncDisplayedSubsSelectList = () => {
+    displayedSubsSelectList.value = orderedSubsSelectList.value.filter((item) => shouldShowElement(item[3]));
+  };
 
   const onStartDrag = () => {
     console.log("开始拖拽");
@@ -1272,38 +1359,29 @@ const urlValidator = (val: string): Promise<boolean> => {
 
   const onEndDrag = () => {
     console.log("结束拖拽");
+    const mergedRows = mergeVisibleOrder(
+      orderedSubsSelectList.value,
+      displayedSubsSelectList.value,
+      (item) => shouldShowElement(item[3]),
+    );
     isDragging.value = false;
-  
-    // 获取当前过滤视图中可见的订阅顺序
-    const visibleOrder = filteredSubsSelectList.value
-      .filter(item => shouldShowElement(item[3]))
-      .map(item => item[0]);
-    
-    const newSubscriptions = [];
-    
-    // 确保 form.subscriptions 存在
-    if (!form.subscriptions) {
-      form.subscriptions = [];
-    }
-    
-    // 先按新顺序添加当前过滤列表中已选中的订阅
-    visibleOrder.forEach(name => {
-      if (form.subscriptions.includes(name)) {
-        newSubscriptions.push(name);
-      }
-    });
-    
-    // 添加不在当前过滤列表中但已选中的订阅（保持原有顺序）
-    form.subscriptions.forEach(name => {
-      if (!visibleOrder.includes(name)) {
-        newSubscriptions.push(name);
-      }
-    });
-    form.subscriptions.splice(0, form.subscriptions.length, ...newSubscriptions);
-    console.log("更新后的 form.subscriptions:", form.subscriptions);
+    syncSubscriptionsFromRows(mergedRows);
+    syncDisplayedSubsSelectList();
   };
-  watch([tag, form.subscriptions, subsSelectList], () => {
-    const selected = toRaw(form.subscriptions || []) || []
+  watch([tag, subsSelectList], () => {
+    if (isDragging.value) return;
+    syncDisplayedSubsSelectList();
+  }, { immediate: true });
+  watch(selectedSubscriptions, () => {
+    if (isDragging.value) return;
+    if (skipNextDisplayedListSync.value) {
+      skipNextDisplayedListSync.value = false;
+      return;
+    }
+    syncDisplayedSubsSelectList();
+  }, { deep: true });
+  watch([tag, selectedSubscriptions, subsSelectList], () => {
+    const selected = toRaw(selectedSubscriptions.value) || []
     const group = subsSelectList.value.filter(item => shouldShowElement(item[3])).map(item => item[0]) || []
     // 1. group 中不包含 selected 中的任何元素, subCheckbox 为 false, subCheckboxIndeterminate 为 false
     // 2. group 中包含 selected 中的任意元素, subCheckbox 为 true, subCheckboxIndeterminate 为 true
@@ -1321,7 +1399,7 @@ const urlValidator = (val: string): Promise<boolean> => {
       subCheckbox.value = false
       subCheckboxIndeterminate.value = false
     }
-  }, { immediate: true });
+  }, { immediate: true, deep: true });
   // const subCheckboxIndeterminate = computed(() => {
   //   const selected = toRaw(form.subscriptions)
   //   const currentGroup = subsSelectList.value.filter(item => shouldShowElement(item[3])).map(item => item[0])
@@ -1521,6 +1599,54 @@ const handleEditGlobalClick = () => {
   .subs-checkbox-wrapper {
     flex-direction: row-reverse;
 
+    &.is-dragging {
+      .subs-checkbox,
+      .sub-img-wrapper,
+      .sub-img-wrapper * {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+
+    &.is-simple-mode {
+      .subs-checkbox {
+        padding: 10px 0 0 0;
+
+        &:not(:last-child) {
+          padding: 10px 0;
+        }
+
+        .sub-img-wrapper {
+          font-size: 13px;
+
+          .icon {
+            margin-right: 6px;
+          }
+
+          .sub-item {
+            margin: -3px 0 0 -3px;
+
+            .name {
+              margin: 3px 0 0 3px;
+            }
+
+            .tag {
+              margin: 3px 0 0 3px;
+            }
+          }
+
+          .sub-item-customer-icon {
+            margin-right: 8px;
+          }
+
+          .drag-handle {
+            font-size: 14px;
+            padding: 6px;
+          }
+        }
+      }
+    }
+
     .subs-checkbox {
       justify-content: space-between;
       // margin-left: 16px;