优化

modules/web/src/components/BookItems.vue

@@ -4,7 +4,7 @@
       <div
         class="book"
         v-for="book in props.books"
-        :key="book.noteUrl"
+        :key="book.bookUrl"
         @click="handleClick(book)"
       >
         <div class="cover-img">
@@ -24,7 +24,7 @@
             </div>
             <div class="tags" v-show="props.isSearch">
               <el-tag
-                v-for="tag in book.kind.split(',').slice(0, 2)"
+                v-for="tag in book.kind?.split(',').slice(0, 2)"
                 :key="tag"
               >
                 {{ tag }}

modules/web/src/components/SourceDebug.vue

@@ -52,4 +52,8 @@ const isBookSource = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(#debug-text) {
+  height: calc(100vh - 45px - 36px - 5px);
+}
+</style>

modules/web/src/components/SourceItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-checkbox
+    size="large"
+    border
+    :label="source"
+    :class="{ error: errorPushSources.includes(source) }"
+    @change="handleSourceClick(source)"
+    :key="source.bookSourceUrl"
+  >
+    {{ source.bookSourceName || source.sourceName }}
+  </el-checkbox>
+</template>
+
+<script setup>
+const { source } = defineProps(['source'])
+const store = useSourceStore()
+const { errorPushSources } = storeToRefs(store)
+const handleSourceClick = source => {
+  store.changeCurrentSource(source)
+}
+</script>

modules/web/src/components/SourceJson.vue

@@ -1,5 +1,6 @@
 <template>
   <el-input
+    id="source-json"
     v-model="sourceString"
     type="textarea"
     placeholder="这里输出序列化的JSON数据,可直接导入'阅读'APP"
@@ -33,8 +34,11 @@ watchEffect(async () => {
   }
 });
 </script>
-<style>
-.el-input {
+<style scoped>
+:deep(.el-input) {
   width: 100%;
 }
+:deep(#source-json) {
+  height: calc(100vh - 50px);
+}
 </style>

modules/web/src/components/SourceList.vue

@@ -8,7 +8,7 @@
   <div class="tool">
     <el-button @click="importSourceFile" :icon="Folder"> 打开 </el-button>
     <el-button
-      :disabled="sourceSelect.length === 0"
+      :disabled="sourcesFiltered.length === 0"
       @click="outExport"
       :icon="Download"
     >
@@ -29,35 +29,28 @@
     >
   </div>
   <el-checkbox-group id="source-list" v-model="sourceSelect">
-    <el-checkbox
-      v-for="source in sourcesFiltered"
-      size="large"
-      border
-      :label="source"
-      :class="{ error: errorPushSources.includes(source) }"
-      @click="handleSourceClick(source)"
-      :key="source.bookSourceName"
-    >
-      {{ source.bookSourceName || source.sourceName }}
-    </el-checkbox>
+    <virtual-list
+      style="height: 100%; overflow-y: auto; overflow-x: hidden;"
+      :data-key="'bookSourceUrl'"
+      :data-sources="sourcesFiltered"
+      :data-component="SourceItem"
+      :estimate-size="45"
+    />
   </el-checkbox-group>
 </template>
 
 <script setup>
 import { Folder, Delete, Download, Search } from "@element-plus/icons-vue";
 import { isSourceContains } from "../utils/souce";
-
+import VirtualList from 'vue3-virtual-scroll-list';
+import SourceItem from "./SourceItem.vue";
 const store = useSourceStore();
 const sourceSelect = ref([]);
 const searchKey = ref("");
-const { sources, errorPushSources } = storeToRefs(store);
-
+const { sources } = storeToRefs(store);
 const isBookSource = computed(() => {
   return /bookSource/.test(window.location.href);
 });
-const handleSourceClick = (source) => {
-  store.changeCurrentSource(source);
-};
 const deleteSelectSources = () => {
   store.deleteSources(sourceSelect.value);
   sourceSelect.value = [];
@@ -104,7 +97,7 @@ const importSourceFile = () => {
 };
 const outExport = () => {
   const exportFile = document.createElement("a");
-  let sources = store.sources,
+  let sources = sourceSelect.value.length === 0 ? sourcesFiltered.value : sourceSelect.value,
     sourceType = isBookSource.value ? "BookSource" : "RssSource";
 
   exportFile.download = `${sourceType}_${Date()
@@ -122,15 +115,13 @@ const outExport = () => {
 <style lang="scss" scoped>
 .tool {
   display: flex;
-  padding: 4px 0;
-  justify-content: space-between;
+  margin: 4px 0;
+  justify-content: center;
 }
 
 #source-list {
-  padding-top: 6px;
-  height: calc(100vh - 112px - 20px);
-  overflow-y: auto;
-  overflow-x: hidden;
+  margin-top: 6px;
+  height: calc(100vh - 112px - 7px);
 
   :deep(.el-checkbox) {
     margin-bottom: 4px;

modules/web/src/components/SourceTabForm.vue

@@ -69,7 +69,12 @@ const { currentSource } = storeToRefs(store);
 
 <style lang="scss" scoped>
 :deep(.el-tab-pane) {
-  height: calc(100vh - 40px);
+  height: calc(100vh - 55px);
+  padding-top: 15px;
+  padding-right: 5px;
   overflow-y: auto;
 }
+:deep(.el-tabs__header) {
+  margin: 0;
+}
 </style>

modules/web/src/components/SourceTabTools.vue

@@ -29,4 +29,8 @@ const tabData = ref([
 ]);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-tabs__header) {
+  margin-bottom: 5px;
+}
+</style>

modules/web/src/components/ToolBar.vue

@@ -72,6 +72,11 @@ import { isInvaildSource } from "../utils/souce";
 
 const store = useSourceStore();
 const pull = () => {
+  const loadingMsg = ElMessage({
+    message: '加载中……',
+    showClose: true,
+    duration: 0
+  })
   API.getSources().then(({ data }) => {
     if (data.isSuccess) {
       store.changeTabName("editList");
@@ -86,7 +91,7 @@ const pull = () => {
         type: "error",
       });
     }
-  });
+  }).finally(() => loadingMsg.close());
 };
 
 const push = () => {