update vue3.3

web编辑 修正筛选删除导出逻辑

modules/web/src/components/BookItems.vue

@@ -64,7 +64,6 @@ const getCover = (coverUrl) => {
 const subJustify = computed(() =>
   props.isSearch ? "space-between" : "flex-start"
 );
-
 </script>
 
 <style lang="scss" scoped>

modules/web/src/components/CatalogItem.vue

@@ -12,7 +12,12 @@
   </div>
 </template>
 <script setup>
-const props = defineProps(["index", "source", "gotoChapter", "currentChapterIndex"]);
+const props = defineProps([
+  "index",
+  "source",
+  "gotoChapter",
+  "currentChapterIndex",
+]);
 
 const isSelected = (idx) => {
   return idx == props.currentChapterIndex;

modules/web/src/components/SourceDebug.vue

@@ -27,9 +27,12 @@ const store = useSourceStore();
 const printDebug = ref("");
 const searchKey = ref("");
 
-watch(() => store.isDebuging, () => {
-  if (store.isDebuging) startDebug();
-});
+watch(
+  () => store.isDebuging,
+  () => {
+    if (store.isDebuging) startDebug();
+  }
+);
 
 const appendDebugMsg = (msg) => {
   let debugDom = document.querySelector("#debug-text");

modules/web/src/components/SourceItem.vue

@@ -15,11 +15,12 @@
 
 <script setup>
 import { Edit } from "@element-plus/icons-vue";
+import { getSourceUniqueKey } from "@/utils/souce";
 
 const props = defineProps(["source"]);
 const store = useSourceStore();
-const { savedSourcesMap, currentSourceUrl, sourceUrlKey } = storeToRefs(store);
-const sourceUrl = computed(() => props.source[sourceUrlKey.value]);
+const { savedSourcesMap, currentSourceUrl } = storeToRefs(store);
+const sourceUrl = computed(() => getSourceUniqueKey(props.source));
 const handleSourceClick = (source) => {
   store.changeCurrentSource(source);
 };

modules/web/src/components/SourceList.vue

@@ -18,7 +18,7 @@
       type="danger"
       :icon="Delete"
       @click="deleteSelectSources"
-      :disabled="sourceUrlSelect.length === 0"
+      :disabled="sourceSelect.length === 0"
       >删除</el-button
     >
     <el-button
@@ -43,7 +43,11 @@
 <script setup>
 import API from "@api";
 import { Folder, Delete, Download, Search } from "@element-plus/icons-vue";
-import { isSourceContains } from "@utils/souce";
+import {
+  isSourceMatches,
+  getSourceUniqueKey,
+  convertSourcesToMap,
+} from "@utils/souce";
 import VirtualList from "vue3-virtual-scroll-list";
 import SourceItem from "./SourceItem.vue";
 
@@ -52,35 +56,50 @@ const sourceUrlSelect = ref([]);
 const searchKey = ref("");
 const { sources, sourcesMap } = storeToRefs(store);
 
+// 筛选源
+/** @type Ref<import('@/source').Source[]> */
+const sourcesFiltered = computed(() => {
+  const key = searchKey.value;
+  if (key === "") return sources.value;
+  return (
+    sources.value
+      // @ts-ignore
+      .filter((source) => isSourceMatches(source, key))
+  );
+});
+// 计算当前筛选关键词下的选中源
+/** @type Ref<import('@/source').Source[]> */
 const sourceSelect = computed(() => {
   const urls = sourceUrlSelect.value;
   if (urls.length == 0) return [];
-  return urls.map(
-    (sourceUrl) => sourcesMap.value.get(sourceUrl) ?? {}
-  );
+  const sourcesFilteredMap =
+    searchKey.value == ""
+      ? sourcesMap.value
+      : convertSourcesToMap(sourcesFiltered.value);
+  return urls.reduce((sources, sourceUrl) => {
+    const source = sourcesFilteredMap.get(sourceUrl);
+    if (source) sources.push(source);
+    return sources;
+  }, []);
 });
+
 const deleteSelectSources = () => {
   const sourceSelectValue = sourceSelect.value;
   API.deleteSource(sourceSelectValue).then(({ data }) => {
     if (!data.isSuccess) return ElMessage.error(data.errorMsg);
     store.deleteSources(sourceSelectValue);
-    sourceUrlSelect.value = [];
+    const sourceUrlSelectRawValue = toRaw(sourceUrlSelect.value);
+    sourceSelectValue.forEach((source) => {
+      const index = sourceUrlSelectRawValue.indexOf(getSourceUniqueKey(source));
+      if (index > -1) sourceUrlSelectRawValue.splice(index, 1);
+    });
+    sourceUrlSelect.value = sourceUrlSelectRawValue;
   });
 };
 const clearAllSources = () => {
   store.clearAllSource();
   sourceUrlSelect.value = [];
 };
-//筛选源
-const sourcesFiltered = computed(() => {
-  let key = searchKey.value;
-  if (key === "") return sources.value;
-  return (
-    sources.value
-      // @ts-ignore
-      .filter((source) => isSourceContains(source, key))
-  );
-});
 
 //导入本地文件
 const importSourceFile = () => {

modules/web/src/components/SourceTabTools.vue

@@ -6,10 +6,10 @@
       :name="tab[0]"
       :label="tab[1]"
     >
-      <source-json v-show="index == 0" />
-      <source-debug v-show="index == 1" />
-      <source-list v-show="index == 2" />
-      <source-help v-show="index == 3" />
+      <source-json v-if="index == 0" />
+      <source-debug v-if="index == 1" />
+      <source-list v-if="index == 2" />
+      <source-help v-if="index == 3" />
     </el-tab-pane>
   </el-tabs>
 </template>