modules 添加web

2023-04-07 20:28:21 +08:00
parent ed14659aa6
commit 95f53948f1
88 changed files with 5784 additions and 0 deletions
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const SECOND = 1000;
+
+const ajax = axios.create({
+  baseURL: import.meta.env.VITE_API || location.origin,
+  timeout: 5 * SECOND,
+});
+
+export default ajax;
@@ -0,0 +1,131 @@
+import ajax from "./axios";
+import { ElMessage } from "element-plus/es";
+
+/** https://github.com/gedoor/legado/tree/master/app/src/main/java/io/legado/app/api */
+/** https://github.com/gedoor/legado/tree/master/app/src/main/java/io/legado/app/web */
+
+const { hostname, port } = new URL(import.meta.env.VITE_API || location.href);
+
+const isSourecEditor = /source/i.test(location.href);
+const APIExceptionHandler = (error) => {
+  if (isSourecEditor) {
+    ElMessage({
+      message: "后端错误，检查网络或者阅读app",
+      type: "error",
+    });
+  }
+  throw error;
+};
+ajax.interceptors.response.use((response) => response, APIExceptionHandler);
+
+// Http
+const getReadConfig = () => ajax.get("/getReadConfig");
+const saveReadConfig = (config) => ajax.post("/saveReadConfig", config);
+
+const saveBookProcess = (bookProgress) =>
+  ajax.post("/saveBookProgress", bookProgress);
+
+const getBookShelf = () => ajax.get("/getBookshelf");
+
+const getChapterList = (/** @type {string} */ bookUrl) =>
+  ajax.get("/getChapterList?url=" + encodeURIComponent(bookUrl));
+
+const getBookContent = (
+  /** @type {string} */ bookUrl,
+  /** @type {number} */ chapterIndex
+) =>
+  ajax.get(
+    "/getBookContent?url=" +
+      encodeURIComponent(bookUrl) +
+      "&index=" +
+      chapterIndex
+  );
+
+const search = (
+  /** @type {string} */ searchKey,
+  /** @type {(data: string) => void} */ onReceive,
+  /** @type {() => void} */ onFinish
+) => {
+  // webSocket
+  const url = `ws://${hostname}:${Number(port) + 1}/searchBook`;
+
+  const socket = new WebSocket(url);
+
+  socket.onopen = () => {
+    socket.send(`{"key":"${searchKey}"}`);
+  };
+  socket.onmessage = ({ data }) => onReceive(data);
+
+  socket.onclose = () => {
+    onFinish();
+  };
+};
+
+const saveBook = (book) => ajax.post("/saveBook", book);
+const deleteBook = (book) => ajax.post("/deleteBook", book);
+
+const isBookSource = /bookSource/i.test(location.href);
+
+// Http
+const getSources = () =>
+  isBookSource ? ajax.get("getBookSources") : ajax.get("getRssSources");
+
+const saveSource = (data) =>
+  isBookSource
+    ? ajax.post("saveBookSource", data)
+    : ajax.post("saveRssSource", data);
+
+const saveSources = (data) =>
+  isBookSource
+    ? ajax.post("saveBookSources", data)
+    : ajax.post("saveRssSources", data);
+
+const deleteSource = (data) =>
+  isBookSource
+    ? ajax.post("deleteBookSources", data)
+    : ajax.post("deleteRssSources", data);
+
+const debug = (
+  /** @type {string} */ sourceUrl,
+  /** @type {string} */ searchKey,
+  /** @type {(data: string) => void} */ onReceive,
+  /** @type {() => void} */ onFinish
+) => {
+  // webSocket
+  const url = `ws://${hostname}:${Number(port) + 1}/${
+    isBookSource ? "bookSource" : "rssSource"
+  }Debug`;
+
+  const socket = new WebSocket(url);
+
+  socket.onopen = () => {
+    socket.send(`{"tag":"${sourceUrl}", "key":"${searchKey}"}`);
+  };
+  socket.onmessage = ({ data }) => onReceive(data);
+
+  socket.onclose = () => {
+    ElMessage({
+      message: "调试已关闭！",
+      type: "info",
+    });
+    onFinish();
+  };
+};
+
+export default {
+  getReadConfig,
+  saveReadConfig,
+  saveBookProcess,
+  getBookShelf,
+  getChapterList,
+  getBookContent,
+  search,
+  saveBook,
+  deleteBook,
+
+  getSources,
+  saveSources,
+  saveSource,
+  deleteSource,
+  debug,
+};
@@ -0,0 +1,14 @@
+body {
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+}
+
+#app {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    margin: 0;
+    height: 100%;
+}
@@ -0,0 +1,6 @@
+code {
+  background-color: #f2f1f1;
+  padding: .125rem .25rem;
+  border-radius: 0.25rem;
+  font-size: 0.835rem;
+}
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "iconfont";
+  src: url("./iconfont.woff") format("woff");
+}
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "FZZCYSK";
+  src: local("☺"), url("./popfont.ttf");
+  font-style: normal;
+  font-weight: normal;
+}
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "FZZCYSK";
+  src: local("☺"), url("./shelffont.ttf");
+  font-style: normal;
+  font-weight: normal;
+}
@@ -0,0 +1,7 @@
+kbd {
+  background-color: hsl(0deg, 0%, 99%);
+  border-radius: 3px;
+  border: 1px solid hsl(0deg, 0%, 80%);
+  padding: 4px 5px;
+  font-weight: bold;
+}
@@ -0,0 +1,18 @@
+@import './kbd.css';
+@import './code.css';
+
+::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+body {
+    padding: 0;
+    margin: 0;
+}
+
+.el-tabs__header {
+    position: sticky;
+    top: 0px;
+    z-index: 2;
+    background-color: white;
+}
@@ -0,0 +1,85 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const store: typeof import('./store/index.js')['default']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBookStore: typeof import('./store/bookStore.js')['useBookStore']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSourceStore: typeof import('./store/sourceStore.js')['useSourceStore']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}
@@ -0,0 +1,44 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    BookItems: typeof import('./components/BookItems.vue')['default']
+    ChapterContent: typeof import('./components/ChapterContent.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    PopCatalog: typeof import('./components/PopCatalog.vue')['default']
+    ReadSettings: typeof import('./components/ReadSettings.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SourceDebug: typeof import('./components/SourceDebug.vue')['default']
+    SourceHelp: typeof import('./components/SourceHelp.vue')['default']
+    SourceJson: typeof import('./components/SourceJson.vue')['default']
+    SourceList: typeof import('./components/SourceList.vue')['default']
+    SourceTabForm: typeof import('./components/SourceTabForm.vue')['default']
+    SourceTabTools: typeof import('./components/SourceTabTools.vue')['default']
+    ToolBar: typeof import('./components/ToolBar.vue')['default']
+  }
+}
@@ -0,0 +1,184 @@
+<template>
+  <div class="books-wrapper">
+    <div class="wrapper">
+      <div
+        class="book"
+        v-for="book in props.books"
+        :key="book.noteUrl"
+        @click="handleClick(book)"
+      >
+        <div class="cover-img">
+          <img
+            class="cover"
+            :src="getCover(book.coverUrl)"
+            :key="book.coverUrl"
+            alt=""
+            loading="lazy"
+          />
+        </div>
+        <div class="info">
+          <div class="name">{{ book.name }}</div>
+          <div class="sub">
+            <div class="author">
+              {{ book.author }}
+            </div>
+            <div class="tags" v-show="props.isSearch">
+              <el-tag
+                v-for="tag in book.kind.split(',').slice(0, 2)"
+                :key="tag"
+              >
+                {{ tag }}
+              </el-tag>
+            </div>
+            <div class="update-info" v-show="!props.isSearch">
+              <div class="dot">•</div>
+              <div class="size">共{{ book.totalChapterNum }}章</div>
+              <div class="dot">•</div>
+              <div class="date">{{ dateFormat(book.lastCheckTime) }}</div>
+            </div>
+          </div>
+          <div class="intro" v-show="props.isSearch">{{ book.intro }}</div>
+
+          <div class="dur-chapter" v-show="!props.isSearch">
+            已读：{{ book.durChapterTitle }}
+          </div>
+          <div class="last-chapter">最新：{{ book.latestChapterTitle }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { dateFormat } from "../plugins/utils";
+const props = defineProps(["books", "isSearch"]);
+const emit = defineEmits(["bookClick"]);
+const handleClick = (book) => emit("bookClick", toRaw(book));
+const getCover = (coverUrl) => {
+  return /^data:/.test(coverUrl)
+    ? coverUrl
+    : (import.meta.env.VITE_API || location.origin) +
+        "/cover?path=" +
+        encodeURIComponent(coverUrl);
+};
+
+const subJustify = computed(() =>
+  props.isSearch ? "space-between" : "flex-start"
+);
+</script>
+
+<style lang="scss" scoped>
+.books-wrapper {
+  overflow: scroll;
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 380px);
+    justify-content: space-around;
+    grid-gap: 10px;
+
+    .book {
+      user-select: none;
+      display: flex;
+      cursor: pointer;
+      margin-bottom: 18px;
+      padding: 24px 24px;
+      width: 360px;
+      flex-direction: row;
+      justify-content: space-around;
+
+      .cover-img {
+        width: 84px;
+        height: 112px;
+
+        .cover {
+          width: 84px;
+          height: 112px;
+        }
+      }
+
+      .info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: left;
+        height: 112px;
+        margin-left: 20px;
+        flex: 1;
+
+        .name {
+          width: fit-content;
+          font-size: 16px;
+          font-weight: 700;
+          color: #33373d;
+        }
+
+        .sub {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          justify-content: v-bind("subJustify");
+          font-size: 12px;
+          font-weight: 600;
+          color: #6b6b6b;
+          .tags {
+            :deep(.el-tag) {
+              margin-right: 0.5em;
+            }
+          }
+          .update-info {
+            display: flex;
+            .dot {
+              margin: 0 7px;
+            }
+          }
+        }
+
+        .intro,
+        .dur-chapter,
+        .last-chapter {
+          color: #969ba3;
+          font-size: 13px;
+          margin-top: 3px;
+          font-weight: 500;
+          word-wrap: break-word;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          text-align: left;
+        }
+      }
+    }
+
+    .book:hover {
+      background: rgba(0, 0, 0, 0.1);
+      transition-duration: 0.5s;
+    }
+  }
+
+  .wrapper:last-child {
+    margin-right: auto;
+  }
+}
+
+.books-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+@media screen and (max-width: 750px) {
+  .books-wrapper {
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+
+      .book {
+        box-sizing: border-box;
+        width: 100%;
+        margin-bottom: 0;
+        padding: 10px 20px;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,61 @@
+<template>
+  <div v-for="(para, index) in props.carray" :key="index">
+    <img
+      class="full"
+      v-if="/^\s*<img[^>]*src[^>]+>$/.test(para)"
+      :src="getImageSrc(para)"
+      loading="lazy"
+    />
+    <p v-else :style="style" v-html="para" />
+  </div>
+</template>
+
+<script setup>
+import config from "../plugins/config";
+const store = useBookStore();
+const props = defineProps(["carray"]);
+
+const fontFamily = computed(() => {
+  if (store.config.font >= 0) {
+    return config.fonts[store.config.font];
+  }
+  return { fontFamily: store.config.customFontName };
+});
+const fontSize = computed(() => {
+  return store.config.fontSize + "px";
+});
+const style = computed(() => {
+  let style = fontFamily.value;
+  style.fontSize = fontSize.value;
+  return style;
+});
+
+function getImageSrc(content) {
+  const imgPattern = /<img[^>]*src="([^"]*(?:"[^>]+\})?)"[^>]*>/;
+  return content.match(imgPattern)[1];
+}
+
+watch(fontSize, () => {
+  store.setShowContent(false);
+  nextTick(() => {
+    store.setShowContent(true);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+p {
+  display: block;
+  word-wrap: break-word;
+  word-break: break-all;
+
+  :deep(img) {
+    height: 1em;
+  }
+}
+
+.full {
+  display: block;
+  width: 100%;
+}
+</style>
@@ -0,0 +1,137 @@
+<template>
+  <div class="cata-wrapper" :style="popupTheme">
+    <div class="title">目录</div>
+    <div
+      class="data-wrapper"
+      ref="cataData"
+      :class="{ night: isNight, day: !isNight }"
+    >
+      <div class="cata">
+        <div
+          class="log"
+          v-for="(note, index) in catalog"
+          :class="{ selected: isSelected(index) }"
+          :key="note.durChapterIndex"
+          @click="gotoChapter(note)"
+          ref="cata"
+        >
+          <div class="log-text">
+            {{ note.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import jump from "../plugins/jump";
+import settings from "../plugins/config";
+import "../assets/fonts/popfont.css";
+const store = useBookStore();
+
+const isNight = ref(false);
+const { index } = toRefs(store.readingBook);
+const { catalog, popCataVisible } = storeToRefs(store);
+
+const theme = computed(() => {
+  return store.config.theme;
+});
+
+const popupTheme = computed(() => {
+  return {
+    background: settings.themes[theme.value].popup,
+  };
+});
+watchEffect(() => {
+  isNight.value = theme.value == 6;
+});
+
+const cata = ref();
+const cataData = ref();
+watch(popCataVisible, () => {
+  nextTick(() => {
+    let wrapper = cataData.value;
+    jump(cata.value[index.value], { container: wrapper, duration: 0 });
+  });
+});
+
+const isSelected = (idx) => {
+  return idx == index.value;
+};
+const emit = defineEmits(["getContent"]);
+const gotoChapter = (note) => {
+  index.value = catalog.value.indexOf(note);
+  store.setPopCataVisible(false);
+  store.setContentLoading(true);
+  emit("getContent", index.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.cata-wrapper {
+  margin: -16px;
+  padding: 18px 0 24px 25px;
+
+  // background: #ede7da url('../assets/imgs/themes/popup_1.png') repeat;
+  .title {
+    font-size: 18px;
+    font-weight: 400;
+    font-family: FZZCYSK;
+    margin: 0 0 20px 0;
+    color: #ed4259;
+    width: fit-content;
+    border-bottom: 1px solid #ed4259;
+  }
+
+  .data-wrapper {
+    height: 300px;
+    overflow: auto;
+
+    .cata {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .selected {
+        color: #eb4259;
+      }
+
+      .log {
+        width: 50%;
+        height: 40px;
+        cursor: pointer;
+        float: left;
+        font: 16px / 40px PingFangSC-Regular, HelveticaNeue-Light,
+          "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
+
+        .log-text {
+          margin-right: 26px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .night {
+    :deep(.log) {
+      border-bottom: 1px solid #666;
+    }
+  }
+
+  .day {
+    :deep(.log) {
+      border-bottom: 1px solid #f2f2f2;
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .cata-wrapper .data-wrapper .cata .log {
+    width: 100%;
+  }
+}
+</style>
@@ -0,0 +1,477 @@
+<template>
+  <div
+    class="settings-wrapper"
+    :style="popupTheme"
+    :class="{ night: isNight, day: !isNight }"
+  >
+    <div class="settings-title">设置</div>
+    <div class="setting-list">
+      <ul>
+        <li class="theme-list">
+          <i>阅读主题</i>
+          <span
+            class="theme-item"
+            v-for="(themeColor, index) in themeColors"
+            :key="index"
+            :style="themeColor"
+            ref="themes"
+            @click="setTheme(index)"
+            :class="{ selected: selectedTheme == index }"
+            ><em v-if="index < 6" class="iconfont">&#58980;</em
+            ><em v-else class="moon-icon">{{ moonIcon }}</em></span
+          >
+        </li>
+        <li class="font-list">
+          <i>正文字体</i>
+          <span
+            class="font-item"
+            v-for="(font, index) in fonts"
+            :key="index"
+            :class="{ selected: selectedFont == index }"
+            @click="setFont(index)"
+            >{{ font }}</span
+          >
+        </li>
+        <li class="font-list">
+          <i>自定字体</i>
+          <el-tooltip effect="dark" content="自定义的字体名称" placement="top">
+            <input
+              type="text"
+              class="font-item font-item-input"
+              v-model="customFontName"
+              placeholder="请输入自定义的字体名称"
+            />
+          </el-tooltip>
+
+          <el-popover
+            placement="top"
+            width="180"
+            trigger="click"
+            v-model:visible="customFontSavePopVisible"
+          >
+            <p>
+              请确认输入的字体名称完整无误，并且该字体已经安装在您的设备上。
+            </p>
+            <p>确定保存吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button
+                size="small"
+                plain
+                @click="customFontSavePopVisible = false"
+                >取消</el-button
+              >
+              <el-button
+                type="primary"
+                size="small"
+                @click="
+                  setCustomFont();
+                  customFontSavePopVisible = false;
+                "
+                >确定</el-button
+              >
+            </div>
+            <template #reference>
+              <span type="text" class="font-item">保存</span>
+            </template>
+          </el-popover>
+        </li>
+        <li class="font-size">
+          <i>字体大小</i>
+          <div class="resize">
+            <span class="less" @click="lessFontSize"
+              ><em class="iconfont">&#58966;</em></span
+            ><b></b> <span class="lang">{{ fontSize }}</span
+            ><b></b>
+            <span class="more" @click="moreFontSize"
+              ><em class="iconfont">&#58976;</em></span
+            >
+          </div>
+        </li>
+        <li class="read-width" v-if="!store.miniInterface">
+          <i>页面宽度</i>
+          <div class="resize">
+            <span class="less" @click="lessReadWidth"
+              ><em class="iconfont">&#58965;</em></span
+            ><b></b> <span class="lang">{{ readWidth }}</span
+            ><b></b>
+            <span class="more" @click="moreReadWidth"
+              ><em class="iconfont">&#58975;</em></span
+            >
+          </div>
+        </li>
+        <li class="infinite-loading">
+          <i>无限加载</i>
+          <span
+            class="infinite-loading-item"
+            :key="0"
+            :class="{ selected: infiniteLoading == false }"
+            @click="setInfiniteLoading(false)"
+            >关闭</span
+          >
+          <span
+            class="infinite-loading-item"
+            :key="1"
+            :class="{ selected: infiniteLoading == true }"
+            @click="setInfiniteLoading(true)"
+            >开启</span
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "../assets/fonts/popfont.css";
+import "../assets/fonts/iconfont.css";
+import settings from "../plugins/config";
+import API from "@api";
+const store = useBookStore();
+
+const theme = ref(0);
+
+const isNight = ref(store.config.theme == 6);
+const moonIcon = ref("");
+const themeColors = shallowRef([
+  {
+    background: "rgba(250, 245, 235, 0.8)",
+  },
+  {
+    background: "rgba(245, 234, 204, 0.8)",
+  },
+  {
+    background: "rgba(230, 242, 230, 0.8)",
+  },
+  {
+    background: "rgba(228, 241, 245, 0.8)",
+  },
+  {
+    background: "rgba(245, 228, 228, 0.8)",
+  },
+  {
+    background: "rgba(224, 224, 224, 0.8)",
+  },
+  {
+    background: "rgba(0, 0, 0, 0.5)",
+  },
+]);
+const moonIconStyle = ref({
+  display: "inline",
+  color: "rgba(255,255,255,0.2)",
+});
+const fonts = ref(["雅黑", "宋体", "楷书"]);
+const customFontName = ref(store.config.customFontName);
+const customFontSavePopVisible = ref(false);
+
+onMounted(() => {
+  //初始化设置项目
+  var config = store.config;
+  theme.value = config.theme;
+  if (theme.value == 6) {
+    moonIcon.value = "";
+  } else {
+    moonIcon.value = "";
+  }
+});
+const config = computed(() => {
+  return store.config;
+});
+const popupTheme = computed(() => {
+  return {
+    background: settings.themes[config.value.theme].popup,
+  };
+});
+const selectedTheme = computed(() => {
+  return store.config.theme;
+});
+const selectedFont = computed(() => {
+  return store.config.font;
+});
+const fontSize = computed(() => {
+  return store.config.fontSize;
+});
+const readWidth = computed(() => {
+  return store.config.readWidth;
+});
+const infiniteLoading = computed(() => {
+  return store.config.infiniteLoading;
+});
+
+const setTheme = (theme) => {
+  if (theme == 6) {
+    isNight.value = true;
+    moonIcon.value = "";
+    moonIconStyle.value.color = "#ed4259";
+  } else {
+    isNight.value = false;
+    moonIcon.value = "";
+    moonIconStyle.value.color = "rgba(255,255,255,0.2)";
+  }
+  config.value.theme = theme;
+  saveConfig(config.value);
+};
+const setFont = (font) => {
+  config.value.font = font;
+  saveConfig(config.value);
+};
+const setCustomFont = () => {
+  config.value.font = -1;
+  config.value.customFontName = customFontName.value;
+  saveConfig(config.value);
+};
+const moreFontSize = () => {
+  if (config.value.fontSize < 48) config.value.fontSize += 2;
+  saveConfig(config.value);
+};
+const lessFontSize = () => {
+  if (config.value.fontSize > 12) config.value.fontSize -= 2;
+  saveConfig(config.value);
+};
+const moreReadWidth = () => {
+  /*if (config.value.readWidth < 960)*/
+  config.value.readWidth += 160;
+  saveConfig(config.value);
+};
+const lessReadWidth = () => {
+  if (config.value.readWidth > 640) config.value.readWidth -= 160;
+  saveConfig(config.value);
+};
+const setInfiniteLoading = (loading) => {
+  config.value.infiniteLoading = loading;
+  saveConfig(config.value);
+};
+const saveConfig = (config) => {
+  store.setConfig(config);
+  localStorage.setItem("config", JSON.stringify(config));
+  uploadConfig(config);
+};
+const uploadConfig = (config) => {
+  API.saveReadConfig(config);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.iconfont) {
+  font-family: iconfont;
+  font-style: normal;
+}
+
+:deep(.moon-icon) {
+  font-family: iconfont;
+  font-style: normal;
+}
+
+.settings-wrapper {
+  user-select: none;
+  margin: -13px;
+  // width: 478px;
+  // height: 350px;
+  text-align: left;
+  padding: 40px 0 40px 24px;
+  background: #ede7da url("../assets/imgs/themes/popup_1.png") repeat;
+
+  .settings-title {
+    font-size: 18px;
+    line-height: 22px;
+    margin-bottom: 28px;
+    font-family: FZZCYSK;
+    font-weight: 400;
+  }
+
+  .setting-list {
+    ul {
+      list-style: none outside none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        list-style: none outside none;
+
+        i {
+          font: 12px / 16px PingFangSC-Regular, "-apple-system", Simsun;
+          display: inline-block;
+          min-width: 48px;
+          margin-right: 16px;
+          vertical-align: middle;
+          color: #666;
+        }
+
+        .theme-item {
+          line-height: 32px;
+          width: 34px;
+          height: 34px;
+          margin-right: 16px;
+          margin-top: 5px;
+          border-radius: 100%;
+          display: inline-block;
+          cursor: pointer;
+          text-align: center;
+          vertical-align: middle;
+
+          .iconfont {
+            display: none;
+          }
+        }
+
+        .selected {
+          color: #ed4259;
+
+          .iconfont {
+            display: inline;
+          }
+        }
+      }
+
+      .font-list,
+      .infinite-loading {
+        margin-top: 28px;
+
+        .font-item,
+        .infinite-loading-item {
+          width: 78px;
+          height: 34px;
+          cursor: pointer;
+          margin-right: 16px;
+          border-radius: 2px;
+          text-align: center;
+          vertical-align: middle;
+          display: inline-block;
+          font: 14px / 34px PingFangSC-Regular, HelveticaNeue-Light,
+            "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
+        }
+        .font-item-input {
+          width: 168px;
+          color: #000000;
+        }
+        .selected {
+          color: #ed4259;
+          border: 1px solid #ed4259;
+        }
+
+        .font-item:hover,
+        .infinite-loading-item:hover {
+          border: 1px solid #ed4259;
+          color: #ed4259;
+        }
+      }
+
+      .font-size,
+      .read-width {
+        margin-top: 28px;
+
+        .resize {
+          display: inline-block;
+          width: 274px;
+          height: 34px;
+          vertical-align: middle;
+          border-radius: 2px;
+
+          span {
+            width: 89px;
+            height: 34px;
+            line-height: 34px;
+            display: inline-block;
+            cursor: pointer;
+            text-align: center;
+            vertical-align: middle;
+
+            em {
+              font-style: normal;
+            }
+          }
+
+          .less:hover,
+          .more:hover {
+            color: #ed4259;
+          }
+
+          .lang {
+            color: #a6a6a6;
+            font-weight: 400;
+            font-family: FZZCYSK;
+          }
+
+          b {
+            display: inline-block;
+            height: 20px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+}
+
+.night {
+  :deep(.theme-item) {
+    border: 1px solid #666;
+  }
+
+  :deep(.selected) {
+    border: 1px solid #666;
+  }
+
+  :deep(.moon-icon) {
+    color: #ed4259;
+  }
+
+  :deep(.font-list),
+  .infinite-loading {
+    .font-item,
+    .infinite-loading-item {
+      border: 1px solid #666;
+      background: rgba(45, 45, 45, 0.5);
+    }
+  }
+
+  :deep(.resize) {
+    border: 1px solid #666;
+    background: rgba(45, 45, 45, 0.5);
+
+    b {
+      border-right: 1px solid #666;
+    }
+  }
+}
+
+.day {
+  :deep(.theme-item) {
+    border: 1px solid #e5e5e5;
+  }
+
+  :deep(.selected) {
+    border: 1px solid #ed4259;
+  }
+
+  :deep(.moon-icon) {
+    display: inline;
+    color: rgba(255, 255, 255, 0.2);
+  }
+
+  :deep(.font-list),
+  .infinite-loading {
+    .font-item,
+    .infinite-loading-item {
+      background: rgba(255, 255, 255, 0.5);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  :deep(.resize) {
+    border: 1px solid #e5e5e5;
+    background: rgba(255, 255, 255, 0.5);
+
+    b {
+      border-right: 1px solid #e5e5e5;
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .settings-wrapper i {
+    display: flex !important;
+    flex-wrap: wrap;
+    padding-bottom: 5px !important;
+  }
+}
+</style>
@@ -0,0 +1,55 @@
+<template>
+  <el-input
+    v-if="isBookSource"
+    id="debug-key"
+    v-model="searchKey"
+    placeholder="搜索书名、作者"
+    :prefix-icon="Search"
+    style="padding-bottom: 4px"
+    @keydown.enter="startDebug"
+  />
+  <el-input
+    id="debug-text"
+    v-model="printDebug"
+    type="textarea"
+    readonly
+    rows="29"
+    placeholder="这里用于输出调试信息"
+  />
+</template>
+
+<script setup>
+import API from "@api";
+import { Search } from "@element-plus/icons-vue";
+
+const store = useSourceStore();
+
+const printDebug = ref("");
+const searchKey = ref("");
+
+watchEffect(() => {
+  if (store.isDebuging) startDebug();
+});
+
+const appendDebugMsg = (msg) => {
+  let debugDom = document.querySelector("#debug-text");
+  debugDom.scrollTop = debugDom.scrollHeight;
+  printDebug.value += msg + "\n";
+};
+const startDebug = async () => {
+  printDebug.value = "";
+  await API.saveSource(store.currentSource);
+  API.debug(
+    store.currentSourceUrl,
+    searchKey.value || store.searchKey,
+    appendDebugMsg,
+    store.debugFinish
+  );
+};
+
+const isBookSource = computed(() => {
+  return /bookSource/.test(window.location.href);
+});
+</script>
+
+<style lang="scss" scoped></style>
@@ -0,0 +1,57 @@
+<script setup>
+import { Link } from "@element-plus/icons-vue";
+</script>
+<template>
+  <el-link
+    :icon="Link"
+    href="https://alanskycn.gitee.io/teachme/"
+    target="_blank"
+    >书源制作教程</el-link
+  ><br />
+  <el-link
+    :icon="Link"
+    href="https://zhuanlan.zhihu.com/p/29436838"
+    target="_blank"
+    >xpath基础教程</el-link
+  ><br />
+  <el-link
+    :icon="Link"
+    href="https://zhuanlan.zhihu.com/p/32187820"
+    target="_blank"
+    >xpath高级教程</el-link
+  ><br />
+  <el-link
+    :icon="Link"
+    href="https://www.w3cschool.cn/regex_rmjc"
+    target="_blank"
+    >正则表达式教程</el-link
+  ><br />
+  <el-link :icon="Link" href="https://regexr-cn.com/" target="_blank"
+    >正则表达式在线验证工具</el-link
+  ><br />
+  <div style="margin-top: 20px">
+    <span
+      ><el-text
+        ><code>^$()[]{}.?+*|</code> 这些是Java正则特殊符号,匹配需转义</el-text
+      ></span
+    ><br />
+    <span
+      ><el-text><code>(?s)</code> 前缀表示跨行解析</el-text></span
+    ><br />
+    <span
+      ><el-text><code>(?m)</code> 前缀表示逐行匹配</el-text></span
+    ><br />
+    <span
+      ><el-text><code>(?i)</code> 前缀表示忽略大小写</el-text></span
+    ><br />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-link {
+  padding: 4px;
+}
+.el-text {
+  padding-top: 20px;
+}
+</style>
@@ -0,0 +1,40 @@
+<template>
+  <el-input
+    v-model="sourceString"
+    type="textarea"
+    placeholder="这里输出序列化的JSON数据,可直接导入'阅读'APP"
+    rows="30"
+    @change="update"
+    style="margin-bottom: 4px"
+  ></el-input>
+</template>
+<script setup>
+import { useSourceStore } from "@/store";
+
+const store = useSourceStore();
+const sourceString = ref("");
+const update = async (string) => {
+  try {
+    store.changeEditTabSource(JSON.parse(string));
+  } catch {
+    ElMessage({
+      message: "粘贴的源格式错误",
+      type: "error",
+    });
+  }
+};
+
+watchEffect(async () => {
+  let source = store.editTabSource;
+  if (Object.keys(source).length > 0) {
+    sourceString.value = JSON.stringify(source, null, 4);
+  } else {
+    sourceString.value = "";
+  }
+});
+</script>
+<style>
+.el-input {
+  width: 100%;
+}
+</style>
@@ -0,0 +1,148 @@
+<template>
+  <el-input
+    v-model="searchKey"
+    class="search"
+    :prefix-icon="Search"
+    placeholder="筛选源"
+  />
+  <div class="tool">
+    <el-button @click="importSourceFile" :icon="Folder"> 打开 </el-button>
+    <el-button
+      :disabled="sourceSelect.length === 0"
+      @click="outExport"
+      :icon="Download"
+    >
+      导出</el-button
+    >
+    <el-button
+      :icon="Delete"
+      @click="deleteSelectSources"
+      :disabled="sourceSelect.length === 0"
+      >删除</el-button
+    >
+    <el-button
+      type="danger"
+      :icon="Delete"
+      @click="clearAllSources"
+      :disabled="sources.length === 0"
+      >清空</el-button
+    >
+  </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>
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { Folder, Delete, Download, Search } from "@element-plus/icons-vue";
+import { isSourceContains } from "../utils/souce";
+
+const store = useSourceStore();
+const sourceSelect = ref([]);
+const searchKey = ref("");
+const { sources, errorPushSources } = 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 = [];
+};
+const clearAllSources = () => {
+  store.clearAllSource();
+  sourceSelect.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 = () => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".json,.txt";
+  input.addEventListener("change", (e) => {
+    // @ts-ignore
+    const file = e.target.files[0];
+    var reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = () => {
+      try {
+        // @ts-ignore
+        const jsonData = JSON.parse(reader.result);
+        store.saveSources(jsonData);
+      } catch {
+        ElMessage({
+          message: "上传的源格式错误",
+          type: "error",
+        });
+      }
+    };
+  });
+  input.click();
+};
+const outExport = () => {
+  const exportFile = document.createElement("a");
+  let sources = store.sources,
+    sourceType = isBookSource.value ? "BookSource" : "RssSource";
+
+  exportFile.download = `${sourceType}_${Date()
+    .replace(/.*?\s(\d+)\s(\d+)\s(\d+:\d+:\d+).*/, "$2$1$3")
+    .replace(/:/g, "")}.json`;
+
+  let myBlob = new Blob([JSON.stringify(sources, null, 4)], {
+    type: "application/json",
+  });
+  exportFile.href = window.URL.createObjectURL(myBlob);
+  exportFile.click();
+};
+</script>
+
+<style lang="scss" scoped>
+.tool {
+  display: flex;
+  padding: 4px 0;
+  justify-content: space-between;
+}
+
+#source-list {
+  padding-top: 6px;
+  height: calc(100vh - 112px - 20px);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  :deep(.el-checkbox) {
+    margin-bottom: 4px;
+    width: 100%;
+  }
+}
+
+.error {
+  border-color: var(--el-color-error) !important;
+  color: var(--el-color-error) !important;
+  --el-checkbox-checked-text-color: var(--el-color-error);
+  --el-checkbox-checked-bg-color: var(--el-color-error);
+  --el-checkbox-checked-input-border-color: var(--el-color-error);
+}
+</style>
@@ -0,0 +1,75 @@
+<template>
+  <el-tabs id="source-edit">
+    <el-tab-pane
+      v-for="{ name, children } in tabsData"
+      :label="name"
+      :key="name"
+    >
+      <el-form label-position="right" label-width="5em">
+        <el-form-item
+          v-for="{
+            type,
+            title,
+            namespace,
+            id,
+            array,
+            hint,
+            required,
+          } in children"
+          :label="title"
+          :key="title"
+          :required="required"
+        >
+          <el-input
+            v-if="type == 'String' && typeof namespace == 'undefined'"
+            type="textarea"
+            v-model="currentSource[id]"
+            :placeholder="hint"
+            autosize
+          />
+          <el-input
+            v-if="type == 'String' && typeof namespace != 'undefined'"
+            type="textarea"
+            v-model="currentSource[namespace][id]"
+            :placeholder="hint"
+            autosize
+          />
+
+          <el-switch v-if="type == 'Boolean'" v-model="currentSource[id]" />
+
+          <el-input-number
+            v-if="type == 'Number'"
+            v-model="currentSource[id]"
+            :min="0"
+          />
+
+          <el-select v-if="type == 'Array'" v-model="currentSource[id]">
+            <el-option
+              v-for="(name, index) in array"
+              :value="index"
+              :key="name"
+              :label="name"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+const store = useSourceStore();
+
+const props = defineProps(["config"]);
+
+const tabsData = Object.values(props.config);
+
+const { currentSource } = storeToRefs(store);
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tab-pane) {
+  height: calc(100vh - 40px);
+  overflow-y: auto;
+}
+</style>
@@ -0,0 +1,32 @@
+<template>
+  <el-tabs v-model="current_tab">
+    <el-tab-pane
+      v-for="(tab, index) in tabData"
+      :key="tab[0]"
+      :name="tab[0]"
+      :label="tab[1]"
+    >
+      <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>
+
+<script setup>
+import { useSourceStore } from "@/store";
+
+const store = useSourceStore();
+
+const { currentTab: current_tab } = storeToRefs(store);
+
+const tabData = ref([
+  ["editTab", "编辑源"],
+  ["editDebug", "调试源"],
+  ["editList", "源列表"],
+  ["editHelp", "帮助信息"],
+]);
+</script>
+
+<style lang="scss" scoped></style>
@@ -0,0 +1,316 @@
+<template>
+  <div class="menu flex-column-center">
+    <el-button
+      v-for="button in buttons"
+      size="large"
+      :key="button.name"
+      @click="button.action"
+    >
+      {{ button.name }}
+    </el-button>
+    <el-button size="large" @click="() => (hotkeysDialogVisible = true)"
+      >快捷键</el-button
+    >
+  </div>
+  <el-dialog
+    v-model="hotkeysDialogVisible"
+    :show-close="false"
+    :before-close="stopRecordKeyDown"
+  >
+    <template #header="{ titleClass, titleId }">
+      <div class="hotkeys-header flex-space-between">
+        <div :id="titleId" :class="titleClass">
+          快捷键设置
+          <span v-if="recordKeyDowning">
+            <el-text> / 录入中 </el-text>
+          </span>
+        </div>
+        <el-button
+          :disabled="recordKeyDowning"
+          @click="bindHotKeys"
+          :icon="CircleCheckFilled"
+          >保存</el-button
+        >
+      </div>
+    </template>
+
+    <div class="hotkeys-settings flex-column-center">
+      <div
+        v-for="(button, index) in buttons"
+        :key="button.name"
+        class="hotkeys-item flex-space-between"
+      >
+        <span class="title"
+          ><el-text>{{ button.name }}</el-text></span
+        >
+        <div class="hotkeys-item__content">
+          <div v-for="(key, index) in button.hotKeys" :key="key">
+            <kbd>{{ key }}</kbd>
+            <span v-if="index + 1 < button.hotKeys.length">
+              <el-text>+</el-text>
+            </span>
+          </div>
+          <span v-if="button.hotKeys.length == 0">未设置</span>
+        </div>
+        <el-button
+          :disabled="recordKeyDowning"
+          text
+          :icon="Edit"
+          @click="recordKeyDown(index)"
+          >编辑</el-button
+        >
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import API from "@api";
+import { CircleCheckFilled, Edit } from "@element-plus/icons-vue";
+import hotkeys from "hotkeys-js";
+import { isInvaildSource } from "../utils/souce";
+
+const store = useSourceStore();
+const pull = () => {
+  API.getSources().then(({ data }) => {
+    if (data.isSuccess) {
+      store.changeTabName("editList");
+      store.saveSources(data.data);
+      ElMessage({
+        message: `成功拉取${data.data.length}条源`,
+        type: "success",
+      });
+    } else {
+      ElMessage({
+        message: data.errorMsg ?? "后端错误",
+        type: "error",
+      });
+    }
+  });
+};
+
+const push = () => {
+  let sources = store.sources;
+  store.changeTabName("editList");
+  if (sources.length === 0) {
+    return ElMessage({
+      message: "空空如也",
+      type: "info",
+    });
+  }
+  ElMessage({
+    message: "正在推送中",
+    type: "info",
+  });
+  API.saveSources(sources).then(({ data }) => {
+    if (data.isSuccess) {
+      let okData = data.data;
+      if (Array.isArray(okData)) {
+        let failMsg = ``;
+        if (sources.length > okData.length) {
+          failMsg = "\n推送失败的源将用红色字体标注!";
+          store.setPushReturnSources(okData);
+        }
+        ElMessage({
+          message: `批量推送源到「阅读3.0APP」\n共计: ${
+            sources.length
+          } 条\n成功: ${okData.length} 条\n失败: ${
+            sources.length - okData.length
+          } 条${failMsg}`,
+          type: "success",
+        });
+      }
+    } else {
+      ElMessage({
+        message: `批量推送源失败!\nErrorMsg: ${data.errorMsg}`,
+        type: "error",
+      });
+    }
+  });
+};
+
+const conver2Tab = () => {
+  store.changeTabName("editTab");
+  store.changeEditTabSource(store.currentSource);
+};
+const conver2Source = () => {
+  store.changeCurrentSource(store.editTabSource);
+};
+
+const undo = () => {
+  store.editHistoryUndo();
+};
+
+const clearEdit = () => {
+  store.clearEdit();
+  ElMessage({
+    message: "已清除",
+    type: "success",
+  });
+};
+
+const redo = () => {
+  store.clearEdit();
+  store.clearAllHistory();
+  ElMessage({
+    message: "已清除所有历史记录",
+    type: "success",
+  });
+};
+
+const saveSource = () => {
+  let isBookSource = /bookSource/.test(location.href),
+    /** @type {import("@/source.js").Source} */
+    source = store.currentSource;
+  if (isInvaildSource(source)) {
+    API.saveSource(source).then(({ data }) => {
+      if (data.isSuccess) {
+        ElMessage({
+          message: `源《${
+            isBookSource ? source.bookSourceName : source.sourceName
+          }》已成功保存到「阅读3.0APP」`,
+          type: "success",
+        });
+        //save to store
+        store.saveCurrentSource();
+      } else {
+        ElMessage({
+          message: `源《${
+            isBookSource ? source.bookSourceName : source.sourceName
+          }》保存失败!\nErrorMsg: ${data.errorMsg}`,
+          type: "error",
+        });
+      }
+    });
+  } else {
+    ElMessage({
+      message: `请检查<必填>项是否全部填写`,
+      type: "error",
+    });
+  }
+};
+
+const debug = () => {
+  store.startDebug();
+};
+
+const buttons = ref(
+  Array.of(
+    { name: "⇈推送源", hotKeys: [], action: push },
+    { name: "⇊拉取源", hotKeys: [], action: pull },
+    { name: "⋙生成源", hotKeys: [], action: conver2Tab },
+    { name: "⋘编辑源", hotKeys: [], action: conver2Source },
+    { name: "✗清空表单", hotKeys: [], action: clearEdit },
+    { name: "↶撤销操作", hotKeys: [], action: undo },
+    { name: "↷重做操作", hotKeys: [], action: redo },
+    { name: "⇏调试源", hotKeys: [], action: debug },
+    { name: "✓保存源", hotKeys: [], action: saveSource }
+  )
+);
+const hotkeysDialogVisible = ref(true);
+
+const recordKeyDowning = ref(false);
+
+const recordKeyDownIndex = ref(-1);
+
+const stopRecordKeyDown = () => {
+  recordKeyDowning.value = false;
+};
+
+watch(hotkeysDialogVisible, (visibale) => {
+  if (!visibale) return hotkeys.unbind("*");
+  hotkeys.unbind();
+  /**监听按键 */
+  hotkeys("*", (event) => {
+    event.preventDefault();
+    if (recordKeyDowning.value && recordKeyDownIndex.value > -1)
+      buttons.value[recordKeyDownIndex.value].hotKeys =
+        // @ts-ignore
+        hotkeys.getPressedKeyString();
+  });
+});
+
+const recordKeyDown = (index) => {
+  recordKeyDowning.value = true;
+  ElMessage({
+    message: "按ESC键或者点击空白处结束录入",
+    type: "info",
+  });
+  buttons.value[index].hotKeys = [];
+  recordKeyDownIndex.value = index;
+};
+
+const bindHotKeys = () => {
+  hotkeysDialogVisible.value = false;
+  const hotKeysConfig = [];
+  buttons.value.forEach(({ hotKeys, action }) => {
+    hotkeys(hotKeys.join("+"), (event) => {
+      event.preventDefault();
+      action.call(null);
+    });
+    hotKeysConfig.push(hotKeys);
+  });
+  saveHotkeysConfig(hotKeysConfig);
+};
+
+const saveHotkeysConfig = (config) => {
+  localStorage.setItem("legado_web_hotkeys", JSON.stringify(config));
+};
+
+const readHotkeysConfig = () => {
+  try {
+    const config = JSON.parse(localStorage.getItem("legado_web_hotkeys"));
+    if (!Array.isArray(config) || config.length == 0) return;
+    buttons.value.forEach((button, index) => (button.hotKeys = config[index]));
+    hotkeysDialogVisible.value = false;
+    bindHotKeys();
+  } catch {
+    ElMessage({ message: "快捷键配置错误", type: "error" });
+    localStorage.removeItem("legado_web_hotkeys");
+  }
+};
+
+onMounted(() => {
+  /**读取热键配置 */
+  readHotkeysConfig();
+});
+</script>
+
+<style lang="scss" scoped>
+.flex-space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.flex-column-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.menu > .el-button {
+  margin: 4px;
+  padding: 1em;
+  width: 6em;
+}
+
+.hotkeys-item {
+  .title {
+    width: 5em;
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 1em;
+  }
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    div {
+      margin-bottom: 1em;
+    }
+    span {
+      margin: 0.5em;
+    }
+  }
+}
+</style>
@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "@/router";
+import store from "@/store";
+
+createApp(App).use(store).use(router).mount("#app");
+
+import("./pages/bookshelf/config");
@@ -0,0 +1,39 @@
+# 「阅读3.0」 web 端（已打包进阅读3.0，不能设置IP）
+
+本程序为「阅读3.0」的配套 web 端，需要保证手机和电脑在同一局域网内，然后手机端打开 web 服务。
+
+~~在线地址 http://alanskycn.gitee.io/vip/reader/~~
+
+## 具体实现
+
+使用 Vue3 开发
+
+## 功能特性
+
+- 本地存储阅读记录与设置
+- 阅读主题切换
+- 夜间模式
+- 字号调节
+- 字体调节
+- 阅读宽度调节
+
+## 使用方法
+
+```shell
+pnpm install
+#安装项目
+pnpm serve
+#开发模式
+pnpm build
+#打包
+pnpm lint
+#格式化代码
+```
+ - 调试的时候可以修改.env.development里面的地址连接手机端调试
+
+## 预览
+
+![](imgs/1.jpg)
+![](imgs/2.jpg)
+![](imgs/3.jpg)
+![](imgs/4.jpg)
@@ -0,0 +1,25 @@
+import API from "@api";
+import { useBookStore } from "@/store";
+import "@/assets/bookshelf.css";
+
+/**
+ * pc移动端判断
+ */
+const bookStore = useBookStore();
+bookStore.setMiniInterface(window.innerWidth < 750);
+window.onresize = () => {
+  bookStore.setMiniInterface(window.innerWidth < 750);
+};
+/**
+ * 加载配置
+ */
+API.getReadConfig().then((res) => {
+  var data = res.data.data;
+  if (data) {
+    const bookStore = useBookStore();
+    let config = JSON.parse(data);
+    let defaultConfig = bookStore.config;
+    config = Object.assign(defaultConfig, config);
+    bookStore.setConfig(config);
+  }
+});
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh" class="">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="./main.js"></script>
+    </body>
+</html>
@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "@/App.vue";
+import bookRouter from "@/router";
+import store from "@/store";
+
+createApp(App).use(store).use(bookRouter).mount("#app");
+
+import("./config");
@@ -0,0 +1,34 @@
+# legado_web_editor
+
+![image-20220901202413040](https://cdn.jsdelivr.net/gh/jgckM/image@main/image/202209031638325.png)
+
+## 🚧开发注意
+
+如果你想要调试项目 请修改文件`.env.development`里`VITE_API`为阅读web服务ip
+
+## 路由
+
+/rssSource 订阅源编辑
+/rssSource 书源编辑
+
+## 🎨Project setup
+
+```
+pnpm i
+```
+
+### Compiles and hot-reloads for development
+```
+pnpm dev
+```
+
+### Compiles and minifies for production
+```
+pnpm build
+```
+
+### Lints and fixes files
+```
+pnpm lint
+```
+
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh" class="">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="./main.js"></script>
+    </body>
+</html>
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "@/App.vue";
+import sourceRouter from "@/router";
+import store from "@/store";
+
+createApp(App).use(store).use(sourceRouter).mount("#app");
@@ -0,0 +1,70 @@
+import body_0 from "../assets/imgs/themes/body_0.png";
+import content_0 from "../assets/imgs/themes/content_0.png";
+import popup_0 from "../assets/imgs/themes/popup_0.png";
+import body_1 from "../assets/imgs/themes/body_1.png";
+import content_1 from "../assets/imgs/themes/content_1.png";
+import popup_1 from "../assets/imgs/themes/popup_1.png";
+import body_2 from "../assets/imgs/themes/body_2.png";
+import content_2 from "../assets/imgs/themes/content_2.png";
+import popup_2 from "../assets/imgs/themes/popup_2.png";
+import body_3 from "../assets/imgs/themes/body_3.png";
+import content_3 from "../assets/imgs/themes/content_3.png";
+import popup_3 from "../assets/imgs/themes/popup_3.png";
+import body_5 from "../assets/imgs/themes/body_5.png";
+import content_5 from "../assets/imgs/themes/content_5.png";
+import popup_5 from "../assets/imgs/themes/popup_5.png";
+import body_6 from "../assets/imgs/themes/body_6.png";
+import content_6 from "../assets/imgs/themes/content_6.png";
+import popup_6 from "../assets/imgs/themes/popup_6.png";
+var settings = {
+  themes: [
+    {
+      body: "#ede7da url(" + body_0 + ") repeat",
+      content: "#ede7da url(" + content_0 + ") repeat",
+      popup: "#ede7da url(" + popup_0 + ") repeat",
+    },
+    {
+      body: "#ede7da url(" + body_1 + ") repeat",
+      content: "#ede7da url(" + content_1 + ") repeat",
+      popup: "#ede7da url(" + popup_1 + ") repeat",
+    },
+    {
+      body: "#ede7da url(" + body_2 + ") repeat",
+      content: "#ede7da url(" + content_2 + ") repeat",
+      popup: "#ede7da url(" + popup_2 + ") repeat",
+    },
+    {
+      body: "#ede7da url(" + body_3 + ") repeat",
+      content: "#ede7da url(" + content_3 + ") repeat",
+      popup: "#ede7da url(" + popup_3 + ") repeat",
+    },
+    {
+      body: "#ebcece repeat",
+      content: "#f5e4e4 repeat",
+      popup: "#faeceb repeat",
+    },
+    {
+      body: "#ede7da url(" + body_5 + ") repeat",
+      content: "#ede7da url(" + content_5 + ") repeat",
+      popup: "#ede7da url(" + popup_5 + ") repeat",
+    },
+    {
+      body: "#ede7da url(" + body_6 + ") repeat",
+      content: "#ede7da url(" + content_6 + ") repeat",
+      popup: "#ede7da url(" + popup_6 + ") repeat",
+    },
+  ],
+  fonts: [
+    {
+      fontFamily:
+        "Microsoft YaHei, PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, sans-serif",
+    },
+    {
+      fontFamily: "PingFangSC-Regular, -apple-system, Simsun",
+    },
+    {
+      fontFamily: "Kaiti",
+    },
+  ],
+};
+export default settings;
@@ -0,0 +1,186 @@
+const easeInOutQuad = (t, b, c, d) => {
+  t /= d / 2;
+  if (t < 1) return (c / 2) * t * t + b;
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
+
+const jumper = () => {
+  // private variable cache
+  // no variables are created during a jump, preventing memory leaks
+
+  let container; // container element to be scrolled       (node)
+  let element; // element to scroll to                   (node)
+
+  let start; // where scroll starts                    (px)
+  let stop; // where scroll stops                     (px)
+
+  let offset; // adjustment from the stop position      (px)
+  let easing; // easing function                        (function)
+  let a11y; // accessibility support flag             (boolean)
+
+  let distance; // distance of scroll                     (px)
+  let duration; // scroll duration                        (ms)
+
+  let timeStart; // time scroll started                    (ms)
+  let timeElapsed; // time spent scrolling thus far          (ms)
+
+  let next; // next scroll position                   (px)
+
+  let callback; // to call when done scrolling            (function)
+
+  // scroll position helper
+
+  function location() {
+    let top = container.scrollTop || container.scrollY || container.pageYOffset;
+    top = typeof top === "undefined" ? 0 : top;
+    return top;
+  }
+
+  // element offset helper
+
+  function top(element) {
+    const elementTop = element.getBoundingClientRect().top;
+    const containerTop = container.getBoundingClientRect
+      ? container.getBoundingClientRect().top
+      : 0;
+
+    return elementTop - containerTop + start;
+  }
+
+  // scrollTo helper
+
+  function scrollTo(top) {
+    container.scrollTo
+      ? container.scrollTo(0, top) // window
+      : (container.scrollTop = top); // custom container
+  }
+
+  // rAF loop helper
+
+  function loop(timeCurrent) {
+    // store time scroll started, if not started already
+    if (!timeStart) {
+      timeStart = timeCurrent;
+    }
+
+    // determine time spent scrolling so far
+    timeElapsed = timeCurrent - timeStart;
+
+    // calculate next scroll position
+    next = easing(timeElapsed, start, distance, duration);
+
+    // scroll to it
+    scrollTo(next);
+
+    // check progress
+    timeElapsed < duration
+      ? requestAnimationFrame(loop) // continue scroll loop
+      : done(); // scrolling is done
+  }
+
+  // scroll finished helper
+
+  function done() {
+    // account for rAF time rounding inaccuracies
+    scrollTo(start + distance);
+
+    // if scrolling to an element, and accessibility is enabled
+    if (element && a11y) {
+      // add tabindex indicating programmatic focus
+      element.setAttribute("tabindex", "-1");
+
+      // focus the element
+      element.focus();
+    }
+
+    // if it exists, fire the callback
+    if (typeof callback === "function") {
+      callback();
+    }
+
+    // reset time for next jump
+    timeStart = false;
+  }
+
+  // API
+
+  function jump(target, options = {}) {
+    // resolve options, or use defaults
+    duration = options.duration || 1000;
+    offset = options.offset || 0;
+    callback = options.callback; // "undefined" is a suitable default, and won't be called
+    easing = options.easing || easeInOutQuad;
+    a11y = options.a11y || false;
+
+    // resolve container
+    switch (typeof options.container) {
+      case "object":
+        // we assume container is an HTML element (Node)
+        container = options.container;
+        break;
+
+      case "string":
+        container = document.querySelector(options.container);
+        break;
+
+      default:
+        container = window;
+    }
+
+    // cache starting position
+    start = location();
+
+    // resolve target
+    switch (typeof target) {
+      // scroll from current position
+      case "number":
+        element = undefined; // no element to scroll to
+        a11y = false; // make sure accessibility is off
+        stop = start + target;
+        break;
+
+      // scroll to element (node)
+      // bounding rect is relative to the viewport
+      case "object":
+        element = target;
+        stop = top(element);
+        break;
+
+      // scroll to element (selector)
+      // bounding rect is relative to the viewport
+      case "string":
+        element = document.querySelector(target);
+        stop = top(element);
+        break;
+    }
+
+    // resolve scroll distance, accounting for offset
+    distance = stop - start + offset;
+
+    // resolve duration
+    switch (typeof options.duration) {
+      // number in ms
+      case "number":
+        duration = options.duration;
+        break;
+
+      // function passed the distance of the scroll
+      case "function":
+        duration = options.duration(distance);
+        break;
+    }
+
+    // start the loop
+    requestAnimationFrame(loop);
+  }
+
+  // expose only the jump method
+  return jump;
+};
+
+// export singleton
+
+const singleton = jumper();
+
+export default singleton;
@@ -0,0 +1,49 @@
+import { formatDate } from "@vueuse/shared";
+
+export const isLegadoUrl = (/** @type {string} */ url) =>
+  /,\s*\s*\{/.test(url) ||
+  !(
+    url.startsWith("http") ||
+    url.startsWith("data:") ||
+    url.startsWith("blob:")
+  );
+/**
+ * @param {string} src
+ */
+export function getImageFromLegado(src) {
+  //返回阅读代理的图片链接 已经代理的或者dataurl返回传入值
+  if (!isLegadoUrl(src)) {
+    return src;
+  }
+  return (
+    (import.meta.env.VITE_API || location.origin) +
+    "/image?path=" +
+    encodeURIComponent(src) +
+    "&url=" +
+    encodeURIComponent(sessionStorage.getItem("bookUrl")) +
+    "&width=" +
+    useBookStore().config.readWidth
+  );
+}
+// @ts-ignore
+
+export const dateFormat = (/** @type {number} */ t) => {
+  let time = new Date().getTime();
+  let offset = Math.floor((time - t) / 1000);
+  let str = "";
+
+  if (offset <= 30) {
+    str = "刚刚";
+  } else if (offset < 60) {
+    str = offset + "秒前";
+  } else if (offset < 3600) {
+    str = Math.floor(offset / 60) + "分钟前";
+  } else if (offset < 86400) {
+    str = Math.floor(offset / 3600) + "小时前";
+  } else if (offset < 2592000) {
+    str = Math.floor(offset / 86400) + "天前";
+  } else {
+    str = formatDate(new Date(t), "YYYY-MM-DD");
+  }
+  return str;
+};
@@ -0,0 +1,23 @@
+import { createWebHashHistory, createRouter } from "vue-router";
+
+export const bookRoutes = [
+  {
+    path: "/",
+    name: "shelf",
+    component: () => import("../views/BookShelf.vue"),
+  },
+  {
+    path: "/chapter",
+    name: "chapter",
+    component: () => import("../views/BookChapter.vue"),
+  },
+];
+
+const router = createRouter({
+  // mode: "history",
+  history: createWebHashHistory(),
+  // @ts-ignore
+  routes: bookRoutes,
+});
+
+export default router;
@@ -0,0 +1,15 @@
+import { createWebHashHistory, createRouter } from "vue-router";
+import { bookRoutes } from "./bookRouter";
+import { sourceRoutes } from "./sourceRouter";
+
+const router = createRouter({
+  //   history: createWebHistory(process.env.BASE_URL),
+  history: createWebHashHistory(),
+  // @ts-ignore
+  routes: bookRoutes.concat(sourceRoutes),
+});
+
+router.afterEach((to) => {
+  if (to.name == "shelf") document.title = "书架";
+});
+export default router;
@@ -0,0 +1,23 @@
+import sourceEditor from "../views/SourceEditor.vue";
+import { createWebHashHistory, createRouter } from "vue-router";
+
+export const sourceRoutes = [
+  {
+    path: "/bookSource",
+    name: "book-home",
+    component: sourceEditor,
+  },
+  {
+    path: "/rssSource",
+    name: "rss-home",
+    component: sourceEditor,
+  },
+];
+
+const router = createRouter({
+  //   history: createWebHistory(process.env.BASE_URL),
+  history: createWebHashHistory(),
+  routes: sourceRoutes,
+});
+
+export default router;
@@ -0,0 +1,29 @@
+/** https://github.com/gedoor/legado/tree/master/app/src/main/java/io/legado/app/data/entities */
+interface BaseSource {
+    lastUpdateTime?: number | undefined
+}
+interface BookSoure extends BaseSource {
+    bookSourceUrl?: string | undefined
+    bookSourceName?: string | undefined
+    bookSourceType?: number | undefined
+    bookSourceGroup?: string | undefined
+    bookSourceComment?: string | undefined
+    ruleSearch?: RuleSearch | undefined
+    ruleBookInfo?: RuleBookInfo | undefined
+    ruleToc?: RuleToc | undefined
+    ruleContent?: RuleContent | undefined
+    ruleReview?: RuleReview | undefined
+    ruleExplore?: ruleExplore | undefined
+}
+interface RuleSearch {
+    checkKeyWord?: string | undefined
+}
+interface RssSource extends BaseSource {
+    sourceUrl?: string | undefined
+    sourceName?: string | undefined
+    sourceGroup?: string | undefined
+    sourceComment?: string | undefined
+}
+type Source = BookSoure & RssSource
+
+export { Source, BookSoure, RssSource }
@@ -0,0 +1,96 @@
+import { defineStore } from "pinia";
+import API from "@api";
+
+export const useBookStore = defineStore("book", {
+  state: () => {
+    return {
+      connectStatus: "正在连接后端服务器……",
+      connectType: "",
+      newConnect: true,
+      searchBooks: [],
+      shelf: [],
+      catalog: [],
+      /**@type {{index: number,chapterPos:number}} */
+      readingBook: { index: 0, chapterPos: 0 },
+      popCataVisible: false,
+      contentLoading: true,
+      showContent: false,
+      config: {
+        theme: 0,
+        font: 0,
+        fontSize: 18,
+        readWidth: 800,
+        infiniteLoading: false,
+        customFontName: "",
+      },
+      miniInterface: false,
+      readSettingsVisible: false,
+    };
+  },
+  actions: {
+    setConnectStatus(connectStatus) {
+      this.connectStatus = connectStatus;
+    },
+    setConnectType(connectType) {
+      this.connectType = connectType;
+    },
+    setNewConnect(newConnect) {
+      this.newConnect = newConnect;
+    },
+    addBooks(books) {
+      this.shelf = books;
+    },
+    setCatalog(catalog) {
+      this.catalog = catalog;
+    },
+    setPopCataVisible(visible) {
+      this.popCataVisible = visible;
+    },
+    setContentLoading(loading) {
+      this.contentLoading = loading;
+    },
+    setReadingBook(readingBook) {
+      this.readingBook = readingBook;
+    },
+    setConfig(config) {
+      this.config = config;
+    },
+    setReadSettingsVisible(visible) {
+      this.readSettingsVisible = visible;
+    },
+    setShowContent(visible) {
+      this.showContent = visible;
+    },
+    setMiniInterface(mini) {
+      this.miniInterface = mini;
+    },
+    async setSearchBooks(books) {
+      books.forEach((book) => {
+        let findBook = this.shelf.find((item) => item.bookUrl == book.bookUrl);
+        if (findBook === undefined) {
+          this.searchBooks.push(book);
+        }
+      });
+    },
+    clearSearchBooks() {
+      this.searchBooks = [];
+    },
+    //保存进度到app
+    async saveBookProcess() {
+      if (this.catalog.length == 0) return;
+      // @ts-ignore
+      const { index, chapterPos, bookName, bookAuthor } = this.readingBook;
+      let title = this.catalog[index]?.title;
+      if (!title) return;
+
+      API.saveBookProcess({
+        name: bookName,
+        author: bookAuthor,
+        durChapterIndex: index,
+        durChapterPos: chapterPos,
+        durChapterTime: new Date().getTime(),
+        durChapterTitle: title,
+      });
+    },
+  },
+});
@@ -0,0 +1,5 @@
+import { createPinia } from "pinia";
+
+export * from "./bookStore";
+export * from "./sourceStore";
+export default createPinia();
@@ -0,0 +1,151 @@
+import { defineStore } from "pinia";
+import { emptyBookSource, emptyRssSource } from "@utils/souce";
+
+const isBookSource = /bookSource/i.test(location.href);
+const emptySource = isBookSource ? emptyBookSource : emptyRssSource;
+
+export const useSourceStore = defineStore("source", {
+  state: () => {
+    return {
+      /** @type {import("@/source").BookSoure[]} */
+      bookSources: [], // 临时存放所有书源,
+      /** @type {import("@/source").RssSource[]} */
+      rssSources: [], // 临时存放所有订阅源
+      errorPushSources: [], // 保存到阅读app出错的源
+      /** @type {import("@/source").Source} */
+      currentSource: emptySource, // 当前编辑的源
+      currentTab: localStorage.getItem("tabName") || "editTab",
+      editTabSource: {}, // 生成序列化的json数据
+      isDebuging: false,
+    };
+  },
+  getters: {
+    sources: (state) => (isBookSource ? state.bookSources : state.rssSources),
+    currentSourceUrl: (state) =>
+      isBookSource
+        ? state.currentSource.bookSourceUrl
+        : state.currentSource.sourceUrl,
+    searchKey: (state) =>
+      isBookSource
+        ? state.currentSource.ruleSearch.checkKeyWord || "我的"
+        : null,
+  },
+  actions: {
+    startDebug() {
+      this.currentTab = "editDebug";
+      this.isDebuging = true;
+    },
+    debugFinish() {
+      this.isDebuging = false;
+    },
+
+    //拉取源后保存
+    saveSources(data) {
+      if (isBookSource) {
+        this.bookSources = data;
+      } else {
+        this.rssSources = data;
+      }
+    },
+    //删除源
+    deleteSources(data) {
+      let sources = isBookSource ? this.bookSources : this.rssSources;
+      data.forEach((source) => {
+        let index = sources.indexOf(source);
+        if (index > -1) sources.splice(index, 1);
+      });
+    },
+    //保存当前编辑源
+    saveCurrentSource() {
+      let source = this.currentSource,
+        sources,
+        searchKey;
+      if (isBookSource) {
+        sources = this.bookSources;
+        searchKey = "bookSourceUrl";
+      } else {
+        sources = this.rssSources;
+        searchKey = "sourceUrl";
+      }
+      let index = sources.findIndex(
+        (element) => element[searchKey] === source[searchKey]
+      );
+      //去掉响应 toRaw?
+      source = JSON.parse(JSON.stringify(source));
+      if (index > -1) {
+        sources.splice(index, 1, source);
+      } else {
+        sources.push(source);
+      }
+    },
+    // 更改当前编辑的源
+    changeCurrentSource(source) {
+      const newContent = JSON.stringify(source);
+      this.currentSource = JSON.parse(newContent);
+    },
+    async setPushReturnSources(returnSoures) {
+      if (isBookSource) {
+        // @ts-ignore
+        this.errorPushSources = this.sources.filter((source) =>
+          returnSoures.every(
+            (item) => item.bookSourceUrl !== source.bookSourceUrl
+          )
+        );
+      } else {
+        // @ts-ignore
+        this.errorPushSources = this.sources.filter((source) =>
+          returnSoures.every((item) => item.sourceUrl !== source.sourceUrl)
+        );
+      }
+    },
+    // update editTab tabName and editTab info
+    changeTabName(tabName) {
+      this.currentTab = tabName;
+      localStorage.setItem("tabName", tabName);
+    },
+    changeEditTabSource(source) {
+      const newContent = JSON.stringify(source);
+      this.editTabSource = JSON.parse(newContent);
+    },
+    editHistory(history) {
+      let historyObj;
+      if (localStorage.getItem("history")) {
+        historyObj = JSON.parse(localStorage.getItem("history"));
+        historyObj.new.push(history);
+        if (historyObj.new.length > 50) {
+          historyObj.new.shift();
+        }
+        if (historyObj.old.length > 50) {
+          historyObj.old.shift();
+        }
+        localStorage.setItem("history", JSON.stringify(historyObj));
+      } else {
+        const arr = { new: [history], old: [] };
+        localStorage.setItem("history", JSON.stringify(arr));
+      }
+    },
+    editHistoryUndo() {
+      if (localStorage.getItem("history")) {
+        let historyObj = JSON.parse(localStorage.getItem("history"));
+        historyObj.old.push(this.currentSource);
+        if (historyObj.new.length) {
+          this.currentSource = historyObj.new.pop();
+        }
+        localStorage.setItem("history", JSON.stringify(historyObj));
+      }
+    },
+    clearAllHistory() {
+      localStorage.setItem("history", JSON.stringify({ new: [], old: [] }));
+    },
+    clearEdit() {
+      this.editTabSource = {};
+      this.currentSource = emptySource;
+    },
+
+    // clear all source
+    clearAllSource() {
+      this.bookSources = [];
+      this.rssSources = [];
+    },
+  },
+});
@@ -0,0 +1,565 @@
+export default {
+  base: {
+    name: "基础",
+    children: [
+      {
+        title: "源类型",
+        id: "bookSourceType",
+        type: "Array",
+        array: ["文本", "音频", "图片", "文件"],
+        required: true,
+      },
+      {
+        title: "源域名",
+        id: "bookSourceUrl",
+        type: "String",
+        hint: "通常填写网站主页,例: https://www.qidian.com",
+        required: true,
+      },
+      {
+        title: "源名称",
+        id: "bookSourceName",
+        type: "String",
+        hint: "会显示在源列表",
+        required: true,
+      },
+      {
+        title: "源分组",
+        id: "bookSourceGroup",
+        type: "String",
+        hint: "描述源的特征信息",
+      },
+      {
+        title: "源注释",
+        id: "bookSourceComment",
+        type: "String",
+        hint: "描述源作者和状态",
+      },
+      {
+        title: "书源变量",
+        id: "variableComment",
+        type: "String",
+        hint: "书源变量说明",
+      },
+      {
+        title: "登录地址",
+        id: "loginUrl",
+        type: "String",
+        hint: "填写网站登录网址,仅在需要登录的源有用",
+      },
+      {
+        title: "登录界面",
+        id: "loginUi",
+        type: "String",
+        hint: "自定义登录界面",
+      },
+      {
+        title: "登录检测",
+        id: "loginCheckJs",
+        type: "String",
+        hint: "登录检测js",
+      },
+      {
+        title: "封面解密",
+        id: "coverDecodeJs",
+        type: "String",
+        hint: "封面解密js",
+      },
+      {
+        title: "并发率",
+        id: "concurrentRate",
+        type: "String",
+        hint: "并发率",
+      },
+      {
+        title: "请求头",
+        id: "header",
+        type: "String",
+        hint: "客户端标识",
+      },
+      {
+        title: "链接验证",
+        id: "bookUrlPattern",
+        type: "String",
+        hint: "当详情页URL与源URL的域名不一致时有效，用于添加网址",
+      },
+    ],
+  },
+  search: {
+    name: "搜索",
+    children: [
+      {
+        title: "搜索地址",
+        id: "searchUrl",
+        type: "String",
+        hint: "[域名可省略]/search.php@kw={{key}}",
+      },
+      {
+        title: "校验文字",
+        namespace: "ruleSearch",
+        id: "checkKeyWord",
+        type: "String",
+        hint: "校验关键字",
+      },
+      {
+        title: "列表规则",
+        namespace: "ruleSearch",
+        id: "bookList",
+        type: "String",
+        hint: "选择书籍节点 (规则结果为List<Element>)",
+      },
+      {
+        title: "书名规则",
+        namespace: "ruleSearch",
+        id: "name",
+        type: "String",
+        hint: "选择节点书名 (规则结果为String)",
+      },
+      {
+        title: "作者规则",
+        namespace: "ruleSearch",
+        id: "author",
+        type: "String",
+        hint: "选择节点作者 (规则结果为String)",
+      },
+      {
+        title: "分类规则",
+        namespace: "ruleSearch",
+        id: "kind",
+        type: "String",
+        hint: "选择节点分类信息 (规则结果为String)",
+      },
+      {
+        title: "字数规则",
+        namespace: "ruleSearch",
+        id: "wordCount",
+        type: "String",
+        hint: "选择节点字数信息 (规则结果为String)",
+      },
+      {
+        title: "最新章节",
+        namespace: "ruleSearch",
+        id: "lastChapter",
+        type: "String",
+        hint: "选择节点最新章节 (规则结果为String)",
+      },
+      {
+        title: "简介规则",
+        namespace: "ruleSearch",
+        id: "intro",
+        type: "String",
+        hint: "选择节点书籍简介 (规则结果为String)",
+      },
+      {
+        title: "封面规则",
+        namespace: "ruleSearch",
+        id: "coverUrl",
+        type: "String",
+        hint: "选择节点书籍封面 (规则结果为String类型的url)",
+      },
+      {
+        title: "详情地址",
+        namespace: "ruleSearch",
+        id: "bookUrl",
+        type: "String",
+        hint: "选择书籍详情页网址 (规则结果为String类型的url)",
+      },
+    ],
+  },
+  find: {
+    name: "发现",
+    children: [
+      {
+        title: "发现地址",
+        id: "exploreUrl",
+        type: "String",
+        hint: "内容能显示在发现菜单\n每行一条发现分类(网址域名可省略)，例：\n名称1::网址(Url)1\n名称2::网址(Url)2\n...",
+      },
+      {
+        title: "列表规则",
+        namespace: "ruleExplore",
+        id: "bookList",
+        type: "String",
+        hint: "选择书籍节点 (规则结果为List<Element>)",
+      },
+      {
+        title: "书名规则",
+        namespace: "ruleExplore",
+        id: "name",
+        type: "String",
+        hint: "选择节点书名 (规则结果为String)",
+      },
+      {
+        title: "作者规则",
+        namespace: "ruleExplore",
+        id: "author",
+        type: "String",
+        hint: "选择节点作者 (规则结果为String)",
+      },
+      {
+        title: "分类规则",
+        namespace: "ruleExplore",
+        id: "kind",
+        type: "String",
+        hint: "选择节点分类信息 (规则结果为String)",
+      },
+      {
+        title: "字数规则",
+        namespace: "ruleExplore",
+        id: "wordCount",
+        type: "String",
+        hint: "选择节点字数信息 (规则结果为String)",
+      },
+      {
+        title: "最新章节",
+        namespace: "ruleExplore",
+        id: "lastChapter",
+        type: "String",
+        hint: "选择节点最新章节 (规则结果为String)",
+      },
+      {
+        title: "简介规则",
+        namespace: "ruleExplore",
+        id: "intro",
+        type: "String",
+        hint: "选择节点书籍简介 (规则结果为String)",
+      },
+      {
+        title: "封面规则",
+        namespace: "ruleExplore",
+        id: "coverUrl",
+        type: "String",
+        hint: "选择节点书籍封面 (规则结果为String类型的url)",
+      },
+      {
+        title: "详情地址",
+        namespace: "ruleExplore",
+        id: "bookUrl",
+        type: "String",
+        hint: "选择书籍详情页网址 (规则结果为String类型的url)",
+      },
+    ],
+  },
+  detail: {
+    name: "详情",
+    children: [
+      {
+        title: "预处理",
+        namespace: "ruleBookInfo",
+        id: "init",
+        type: "String",
+        hint: "用于加速详情信息检索，只支持AllInOne规则",
+      },
+      {
+        title: "书名规则",
+        namespace: "ruleBookInfo",
+        id: "name",
+        type: "String",
+        hint: "选择节点书名 (规则结果为String)",
+      },
+      {
+        title: "作者规则",
+        namespace: "ruleBookInfo",
+        id: "author",
+        type: "String",
+        hint: "选择节点作者 (规则结果为String)",
+      },
+      {
+        title: "分类规则",
+        namespace: "ruleBookInfo",
+        id: "kind",
+        type: "String",
+        hint: "选择节点分类信息 (规则结果为String)",
+      },
+      {
+        title: "字数规则",
+        namespace: "ruleBookInfo",
+        id: "wordCount",
+        type: "String",
+        hint: "选择节点字数信息 (规则结果为String)",
+      },
+      {
+        title: "最新章节",
+        namespace: "ruleBookInfo",
+        id: "lastChapter",
+        type: "String",
+        hint: "选择节点最新章节 (规则结果为String)",
+      },
+      {
+        title: "简介规则",
+        namespace: "ruleBookInfo",
+        id: "intro",
+        type: "String",
+        hint: "选择节点书籍简介 (规则结果为String)",
+      },
+      {
+        title: "封面规则",
+        namespace: "ruleBookInfo",
+        id: "coverUrl",
+        type: "String",
+        hint: "选择节点书籍封面 (规则结果为String类型的url)",
+      },
+      {
+        title: "目录地址",
+        namespace: "ruleBookInfo",
+        id: "tocUrl",
+        type: "String",
+        hint: "选择书籍详情页网址 (规则结果为String类型的url, 与详情页相同时可省略)",
+      },
+      {
+        title: "下载URL",
+        namespace: "ruleBookInfo",
+        id: "downloadUrls",
+        type: "String",
+        hint: "文件类书源下载地址 (规则结果为String类型的url, 多个链接返回数组)",
+      },
+      {
+        title: "修改书籍",
+        namespace: "ruleBookInfo",
+        id: "canReName",
+        type: "String",
+        hint: "允许修改书名作者(规则结果为String类型, 默认不允许)",
+      },
+    ],
+  },
+  directory: {
+    name: "目录",
+    children: [
+      {
+        title: "预处理",
+        namespace: "ruleToc",
+        id: "preUpdateJs",
+        type: "String",
+        hint: "更新目录前调用JS 动态更新目录链接",
+      },
+      {
+        title: "列表规则",
+        namespace: "ruleToc",
+        id: "chapterList",
+        type: "String",
+        hint: "选择目录列表的章节节点 (规则结果为List<Element>)",
+      },
+      {
+        title: "章节名称",
+        namespace: "ruleToc",
+        id: "chapterName",
+        type: "String",
+        hint: "选择章节名称 (规则结果为String)",
+      },
+      {
+        title: "章节地址",
+        namespace: "ruleToc",
+        id: "chapterUrl",
+        type: "String",
+        hint: "选择章节链接 (规则结果为String类型的Url)",
+      },
+      {
+        title: "卷名标识",
+        namespace: "ruleToc",
+        id: "isVolume",
+        type: "String",
+        hint: "章节名称是否是卷名 (规则结果为Bool)",
+      },
+      {
+        title: "收费标识",
+        namespace: "ruleToc",
+        id: "isVip",
+        type: "String",
+        hint: "章节是否为VIP章节 (规则结果为Bool)",
+      },
+      {
+        title: "购买标识",
+        namespace: "ruleToc",
+        id: "isPay",
+        type: "String",
+        hint: "章节是否为已购买 (规则结果为Bool)",
+      },
+      {
+        title: "章节信息",
+        namespace: "ruleToc",
+        id: "updateTime",
+        type: "String",
+        hint: "选择章节信息 (规则结果为String)",
+      },
+      {
+        title: "翻页规则",
+        namespace: "ruleToc",
+        id: "nextTocUrl",
+        type: "String",
+        hint: "选择目录下一页链接 (规则结果为List<String>或String)",
+      },
+    ],
+  },
+  content: {
+    name: "正文",
+    children: [
+      {
+        title: "脚本注入",
+        namespace: "ruleContent",
+        id: "webJs",
+        type: "String",
+        hint: "注入javascript，用于模拟鼠标点击等，必须有返回值，一般为String类型",
+      },
+      {
+        title: "正文规则",
+        namespace: "ruleContent",
+        id: "content",
+        type: "String",
+        hint: "选择正文内容 (规则结果为String)",
+      },
+      {
+        title: "翻页规则",
+        namespace: "ruleContent",
+        id: "nextContentUrl",
+        type: "String",
+        hint: "选择下一分页(不是下一章)链接 (规则结果为String类型的Url)",
+      },
+      {
+        title: "资源正则",
+        namespace: "ruleContent",
+        id: "sourceRegex",
+        type: "String",
+        hint: "匹配资源的url特征，用于嗅探",
+      },
+      {
+        title: "替换规则",
+        namespace: "ruleContent",
+        id: "replaceRegex",
+        type: "String",
+        hint: "多页内容合并后替换，用于正文净化",
+      },
+      {
+        title: "图片样式",
+        namespace: "ruleContent",
+        id: "imageStyle",
+        type: "String",
+        hint: "FULL:铺满 不填:默认样式",
+      },
+      {
+        title: "购买操作",
+        namespace: "ruleContent",
+        id: "payAction",
+        type: "String",
+        hint: "填写JavaScript 返回购买链接或者调用购买接口",
+      },
+      {
+        title: "图片解密",
+        namespace: "ruleContent",
+        id: "imageDecode",
+        type: "String",
+        hint: "填写JavaScript 返回解密图片的bytes ",
+      },
+    ],
+  },
+  /*
+  review: {
+    name: "段评",
+    children: [
+      {
+        title: "段评URL",
+        namespace: "ruleReview",
+id: "reviewUrl",
+        type: "String",
+        hint: "段评URL",
+      },
+      {
+        title: "发布头像",
+        namespace: "ruleReview",
+id: "avatarRule",
+        type: "String",
+        hint: "段评发布者头像",
+      },
+      {
+        title: "段评内容",
+        namespace: "ruleReview",
+id: "contentRule",
+        type: "String",
+        hint: "段评内容",
+      },
+      {
+        title: "发布时间",
+        namespace: "ruleReview",
+id: "postTimeRule",
+        type: "String",
+        hint: "段评发布时间",
+      },
+      {
+        title: "回复URL",
+        namespace: "ruleReview",
+id: "reviewQuoteUrl",
+        type: "String",
+        hint: "获取段评回复URL",
+      },
+      {
+        title: "点赞URL",
+        namespace: "ruleReview",
+id: "voteUpUrl",
+        type: "String",
+        hint: "点赞URL",
+      },
+      {
+        title: "点踩URL",
+        namespace: "ruleReview",
+id: "voteDownUrl",
+        type: "String",
+        hint: "点踩URL",
+      },
+      {
+        title: "发送回复",
+        namespace: "ruleReview",
+id: "postReviewUrl",
+        type: "String",
+        hint: "发送回复URL",
+      },
+      {
+        title: "回复段评",
+        namespace: "ruleReview",
+id: "postQuoteUrl",
+        type: "String",
+        hint: "发送回复段评URL",
+      },
+      {
+        title: "删除段评",
+        namespace: "ruleReview",
+id: "deleteUrl",
+        type: "String",
+        hint: "删除段评URL",
+      },
+    ],
+  },*/
+  other: {
+    name: "其他",
+    children: [
+      {
+        title: "启用搜索",
+        id: "enabled",
+        type: "Boolean",
+      },
+      {
+        title: "启用发现",
+        id: "enabledExplore",
+        type: "Boolean",
+      },
+      {
+        title: "启用段评",
+        id: "enabledReview",
+        type: "Boolean",
+      },
+      {
+        title: "Cookie",
+        id: "enabledCookieJar",
+        type: "Boolean",
+      },
+      {
+        title: "搜索权重",
+        id: "weight",
+        type: "Number",
+      },
+      {
+        title: "排序编号",
+        id: "customOrder",
+        type: "Number",
+      },
+    ],
+  },
+};
@@ -0,0 +1,210 @@
+export default {
+  base: {
+    name: "基础",
+    children: [
+      {
+        title: "源域名",
+        id: "sourceUrl",
+        type: "String",
+        hint: "通常填写网站主页,例: https://www.qidian.com",
+        required: true,
+      },
+      {
+        title: "图标",
+        id: "sourceIcon",
+        type: "String",
+        hint: "填写图片网络链接",
+      },
+      {
+        title: "源名称",
+        id: "sourceName",
+        type: "String",
+        hint: "会显示在源列表",
+        required: true,
+      },
+      {
+        title: "源分组",
+        id: "sourceGroup",
+        type: "String",
+        hint: "描述源的特征信息",
+      },
+      {
+        title: "源注释",
+        id: "sourceComment",
+        type: "String",
+        hint: "描述源作者和状态",
+      },
+      {
+        title: "分类地址",
+        id: "sortUrl",
+        type: "String",
+        hint: "名称1::链接1\n名称2::链接2",
+      },
+      {
+        title: "登录地址",
+        id: "loginUrl",
+        type: "String",
+        hint: "填写网站登录网址,仅在需要登录的源有用",
+      },
+      {
+        title: "登录界面",
+        id: "loginUi",
+        type: "String",
+        hint: "自定义登录界面",
+      },
+      {
+        title: "登录检测",
+        id: "loginCheckJs",
+        type: "String",
+        hint: "登录检测js",
+      },
+      {
+        title: "封面解密",
+        id: "coverDecodeJs",
+        type: "String",
+        hint: "封面解密js",
+      },
+      {
+        title: "请求头",
+        id: "header",
+        type: "String",
+        hint: "客户端标识",
+      },
+      {
+        title: "变量说明",
+        id: "variableComment",
+        type: "String",
+        hint: "源变量说明",
+      },
+      {
+        title: "并发率",
+        id: "concurrentRate",
+        type: "String",
+        hint: "并发率",
+      },
+    ],
+  },
+  list: {
+    name: "列表",
+    children: [
+      {
+        title: "列表规则",
+        id: "ruleArticles",
+        type: "String",
+        hint: "规则结果为List<Element>",
+      },
+      {
+        title: "翻页规则",
+        id: "ruleNextPage",
+        type: "String",
+        hint: "下一页链接 规则结果为List<String>或String",
+      },
+      {
+        title: "标题规则",
+        id: "ruleTitle",
+        type: "String",
+        hint: "文章标题 规则结果为String",
+      },
+      {
+        title: "时间规则",
+        id: "rulePubDate",
+        type: "String",
+        hint: "文章发布时间 规则结果为String",
+      },
+      {
+        title: "描述规则",
+        id: "ruleDescription",
+        type: "String",
+        hint: "文章简要描述 规则结果为String",
+      },
+      {
+        title: "图片规则",
+        id: "ruleImage",
+        type: "String",
+        hint: "文章图片链接 规则结果为String",
+      },
+      {
+        title: "链接规则",
+        id: "ruleLink",
+        type: "String",
+        hint: "文章链接 规则结果为String",
+      },
+    ],
+  },
+  webView: {
+    name: "WebView",
+    children: [
+      {
+        title: "内容规则",
+        id: "ruleContent",
+        type: "String",
+        hint: "文章正文",
+      },
+      {
+        title: "样式规则",
+        id: "style",
+        type: "String",
+        hint: "文章正文样式 填写css",
+      },
+      {
+        title: "注入规则",
+        id: "injectJs",
+        type: "String",
+        hint: "注入网页的JavaScript",
+      },
+      {
+        title: "黑名单",
+        id: "contentBlacklist",
+        type: "String",
+        hint: "webView链接加载黑名单，英文逗号隔开",
+      },
+      {
+        title: "白名单",
+        id: "contentWhitelist",
+        type: "String",
+        hint: "webView链接加载白名单，英文逗号隔开",
+      },
+    ],
+  },
+  other: {
+    name: "其他",
+    children: [
+      {
+        title: "列表样式",
+        id: "articleStyle",
+        type: "Array",
+        array: ["默认", "大图", "双列"],
+      },
+      {
+        title: "加载地址",
+        id: "loadWithBaseUrl",
+        type: "Boolean",
+      },
+      {
+        title: "启用JS",
+        id: "enableJs",
+        type: "Boolean",
+      },
+      {
+        title: "启用",
+        id: "enabled",
+        type: "Boolean",
+      },
+      {
+        title: "Cookie",
+        id: "enabledCookieJar",
+        type: "Boolean",
+      },
+      {
+        title: "单URL",
+        id: "singleUrl",
+        type: "Boolean",
+      },
+      {
+        title: "排序编号",
+        id: "customOrder",
+        type: "Number",
+      },
+    ],
+  },
+};
@@ -0,0 +1,38 @@
+import { Source } from '../source'
+
+
+const isNullOrBlank = (string: string | null | undefined | number) => string == null || (string as string).length === 0 || /^\s+$/.test(string as string)
+const isBookSource = (source: Source) => "bookSourceName" in source
+
+export const isInvaildSource: (source: Source) => boolean = (source) => {
+    if (isBookSource(source)) {
+        return !isNullOrBlank(source.bookSourceName) &&
+            !isNullOrBlank(source.bookSourceUrl) &&
+            !isNullOrBlank(source.bookSourceType)
+    }
+    return !isNullOrBlank(source.sourceName) &&
+        !isNullOrBlank(source.sourceName)
+}
+
+export const isSourceContains: (source: Source, searchKey: string) => boolean = (source, searchKey) => {
+    if (isBookSource(source)) {
+        return (source.bookSourceName?.includes(searchKey) ||
+            source.bookSourceUrl?.includes(searchKey) ||
+            source.bookSourceGroup?.includes(searchKey) ||
+            source.bookSourceComment?.includes(searchKey)) ?? false
+    }
+    return (source.sourceName?.includes(searchKey) ||
+        source.sourceUrl?.includes(searchKey) ||
+        source.sourceGroup?.includes(searchKey) ||
+        source.sourceComment?.includes(searchKey)) ?? false
+}
+
+export const emptyBookSource = {
+    ruleSearch: {},
+    ruleBookInfo: {},
+    ruleToc: {},
+    ruleContent: {},
+    ruleReview: {},
+    ruleExplore: {}
+}
+export const emptyRssSource = {}
@@ -0,0 +1,797 @@
+<template>
+  <div
+    class="chapter-wrapper"
+    :style="bodyTheme"
+    :class="{ night: isNight, day: !isNight }"
+    @click="showToolBar = !showToolBar"
+  >
+    <div class="tool-bar" :style="leftBarTheme">
+      <div class="tools">
+        <el-popover
+          placement="right"
+          :width="popupWidth"
+          trigger="click"
+          :show-arrow="false"
+          v-model:visible="popCataVisible"
+          popper-class="pop-cata"
+        >
+          <PopCatalog @getContent="getContent" class="popup" />
+          <template #reference>
+            <div class="tool-icon" :class="{ 'no-point': noPoint }">
+              <div class="iconfont">&#58905;</div>
+              <div class="icon-text">目录</div>
+            </div>
+          </template>
+        </el-popover>
+        <el-popover
+          placement="right"
+          :width="popupWidth"
+          trigger="click"
+          :show-arrow="false"
+          v-model:visible="readSettingsVisible"
+          popper-class="pop-setting"
+        >
+          <read-settings class="popup" />
+          <template #reference>
+            <div class="tool-icon" :class="{ 'no-point': noPoint }">
+              <div class="iconfont">&#58971;</div>
+              <div class="icon-text">设置</div>
+            </div>
+          </template>
+        </el-popover>
+        <div class="tool-icon" @click="toShelf">
+          <div class="iconfont">&#58892;</div>
+          <div class="icon-text">书架</div>
+        </div>
+        <div class="tool-icon" :class="{ 'no-point': noPoint }" @click="toTop">
+          <div class="iconfont">&#58914;</div>
+          <div class="icon-text">顶部</div>
+        </div>
+        <div
+          class="tool-icon"
+          :class="{ 'no-point': noPoint }"
+          @click="toBottom"
+        >
+          <div class="iconfont">&#58915;</div>
+          <div class="icon-text">底部</div>
+        </div>
+      </div>
+    </div>
+    <div class="read-bar" :style="rightBarTheme">
+      <div class="tools">
+        <div
+          class="tool-icon"
+          :class="{ 'no-point': noPoint }"
+          @click="toPreChapter"
+        >
+          <div class="iconfont">&#58920;</div>
+          <span v-if="miniInterface">上一章</span>
+        </div>
+        <div
+          class="tool-icon"
+          :class="{ 'no-point': noPoint }"
+          @click="toNextChapter"
+        >
+          <span v-if="miniInterface">下一章</span>
+          <div class="iconfont">&#58913;</div>
+        </div>
+      </div>
+    </div>
+    <div class="chapter-bar"></div>
+    <div class="chapter" ref="content" :style="chapterTheme">
+      <div class="content">
+        <div class="top-bar" ref="top"></div>
+        <div v-for="data in chapterData" :key="data.index" ref="chapter">
+          <div class="title" :index="data.index">
+            {{ data.title }}
+          </div>
+          <chapter-content :carray="data.content" />
+        </div>
+        <div class="loading" ref="loading"></div>
+        <div class="bottom-bar" ref="bottom"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import jump from "@/plugins/jump";
+import settings from "@/plugins/config";
+import API from "@api";
+import loadingSvg from "@element-plus/icons-svg/loading.svg?raw";
+
+const showLoading = ref(false);
+const loadingSerive = ref(null);
+watch(showLoading, (loading) => {
+  if (!loading) return loadingSerive.value?.close();
+  loadingSerive.value = ElLoading.service({
+    target: content.value,
+    spinner: loadingSvg,
+    text: "正在获取信息",
+    backgroud: "rgb(0,0,0,0)",
+    lock: true,
+  });
+});
+
+const store = useBookStore();
+
+try {
+  const browerConfig = JSON.parse(localStorage.getItem("config"));
+  if (browerConfig != null) store.setConfig(browerConfig);
+} catch {
+  localStorage.removeItem("config");
+}
+const content = ref();
+const loading = ref();
+
+const noPoint = ref(true);
+
+const showToolBar = ref(false);
+const chapterData = ref([]);
+const scrollObserve = ref(null);
+const readingObserve = ref(null);
+
+const { chapterPos } = toRefs(store.readingBook);
+const chapterIndex = computed({
+  get: () => store.readingBook.index,
+  set: (index) => (store.readingBook.index = index),
+});
+const {
+  catalog,
+  popCataVisible,
+  readSettingsVisible,
+  config,
+  showContent: show,
+  miniInterface,
+} = storeToRefs(store);
+
+const theme = computed(() => config.value.theme);
+
+const bodyColor = computed(() => settings.themes[config.value.theme].body);
+const chapterColor = computed(
+  () => settings.themes[config.value.theme].content
+);
+const popupColor = computed(() => settings.themes[config.value.theme].popup);
+
+const readWidth = computed(() => {
+  if (!store.miniInterface) {
+    return store.config.readWidth - 130 + "px";
+  } else {
+    return window.innerWidth + "px";
+  }
+});
+const popupWidth = computed(() => {
+  if (!store.miniInterface) {
+    return store.config.readWidth - 33;
+  } else {
+    return window.innerWidth - 33;
+  }
+});
+
+const bodyTheme = computed(() => {
+  return {
+    background: settings.themes[store.config.theme].body,
+  };
+});
+const chapterTheme = computed(() => {
+  return {
+    background: settings.themes[store.config.theme].content,
+    width: readWidth.value,
+  };
+});
+
+const leftBarTheme = computed(() => {
+  return {
+    background: settings.themes[store.config.theme].popup,
+    marginLeft: store.miniInterface
+      ? 0
+      : -(store.config.readWidth / 2 + 68) + "px",
+    display: store.miniInterface && !showToolBar.value ? "none" : "block",
+  };
+});
+const rightBarTheme = computed(() => {
+  return {
+    background: settings.themes[store.config.theme].popup,
+    marginRight: store.miniInterface
+      ? 0
+      : -(store.config.readWidth / 2 + 52) + "px",
+    display: store.miniInterface && !showToolBar.value ? "none" : "block",
+  };
+});
+
+const enableInfiniteLoading = computed(() => {
+  return config.value.infiniteLoading;
+});
+
+watchEffect(() => {
+  if (chapterData.value.length > 0) {
+    store.setContentLoading(false);
+    //添加章节内容到observe
+    addReadingObserve();
+  }
+});
+
+watchEffect(() => {
+  document.title = catalog.value[chapterIndex.value]?.title;
+  console.log(chapterIndex.value, store.readingBook.index);
+  store.saveBookProcess();
+});
+const isNight = ref(false);
+watchEffect(() => {
+  isNight.value = theme.value == 6;
+});
+
+watch(bodyColor, (color) => {
+  bodyTheme.value.background = color;
+});
+watch(chapterColor, (color) => {
+  chapterTheme.value.background = color;
+});
+
+watch(readWidth, (width) => {
+  chapterTheme.value.width = width;
+  let leftToolMargin = -((parseInt(width) + 130) / 2 + 68) + "px";
+  let rightToolMargin = -((parseInt(width) + 130) / 2 + 52) + "px";
+  leftBarTheme.value.marginLeft = leftToolMargin;
+  rightBarTheme.value.marginRight = rightToolMargin;
+});
+
+watch(popupColor, (color) => {
+  leftBarTheme.value.background = color;
+  rightBarTheme.value.background = color;
+});
+watchEffect(() => {
+  if (!enableInfiniteLoading.value) {
+    scrollObserve.value?.disconnect();
+  } else {
+    scrollObserve.value?.observe(loading.value);
+  }
+});
+
+const top = ref();
+const getContent = (index, reloadChapter = true, chapterPos = 0) => {
+  if (reloadChapter) {
+    //展示进度条
+    store.setShowContent(false);
+    showLoading.value = true;
+    //强制滚回顶层
+    jump(top.value, { duration: 0 });
+    //从目录，按钮切换章节时保存进度 预加载时不保存
+    saveReadingBookProgressToBrowser(index, chapterPos);
+  }
+  let bookUrl = sessionStorage.getItem("bookUrl");
+  let { title, index: chapterIndex } = catalog.value[index];
+
+  API.getBookContent(bookUrl, chapterIndex).then(
+    (res) => {
+      if (res.data.isSuccess) {
+        let data = res.data.data;
+        let content = data.split(/\n+/);
+        updateChapterData({ index, content, title }, reloadChapter);
+      } else {
+        ElMessage({ message: res.data.errorMsg, type: "error" });
+        let content = [res.data.errorMsg];
+        updateChapterData({ index, content, title }, reloadChapter);
+      }
+      store.setContentLoading(true);
+      showLoading.value = false;
+      noPoint.value = false;
+      store.setShowContent(true);
+      if (!res.data.isSuccess) {
+        throw res.data;
+      }
+    },
+    (err) => {
+      ElMessage({ message: "获取章节内容失败", type: "error" });
+      let content = ["获取章节内容失败！"];
+      updateChapterData({ index, content, title }, reloadChapter);
+      showLoading.value = false;
+      store.setShowContent(true);
+      throw err;
+    }
+  );
+};
+const chapter = ref();
+const toChapterPos = (chapterPos) => {
+  if (!chapterPos) return;
+  nextTick(() => {
+    //计算chapterPos对应的段落行数
+    let wordCount = 0;
+    let index = chapterData.value[0].content.findIndex((paragraph) => {
+      wordCount += paragraph.length;
+      return wordCount >= chapterPos.value;
+    });
+    if (index == -1) index = chapterData.value[0].content.length - 1;
+    if (index == 0) return; //第一行不跳转
+    //跳转
+    jump(chapter.value[0].children[1].children[index], {
+      duration: 0,
+      callback: () => (chapterPos.value = 0),
+    });
+  });
+};
+//计算当前章节阅读的字数
+const computeChapterPos = () => {
+  //dom没渲染时 返回0
+  if (!chapter.value[0]) return;
+  //计算当前阅读进度对应的element
+  let index = chapterData.value.findIndex(
+    (chapter) => chapter.index == chapterIndex.value
+  );
+  if (index == -1) return;
+  let element = chapter.value[index].children[1].children;
+  //计算已读字数
+  let mChapterPos = 0;
+  for (let paragraph of element) {
+    let text = paragraph.innerText;
+    mChapterPos += text.length;
+    if (paragraph.getBoundingClientRect().top >= 0) {
+      chapterPos.value = mChapterPos;
+      break;
+    }
+  }
+};
+const bottom = ref();
+const toTop = () => {
+  jump(top.value);
+};
+const toBottom = () => {
+  jump(bottom.value);
+};
+const toNextChapter = () => {
+  store.setContentLoading(true);
+  let index = chapterIndex.value + 1;
+  if (typeof catalog.value[index] !== "undefined") {
+    ElMessage({
+      message: "下一章",
+      type: "info",
+    });
+    getContent(index);
+  } else {
+    ElMessage({
+      message: "本章是最后一章",
+      type: "error",
+    });
+  }
+};
+const toPreChapter = () => {
+  store.setContentLoading(true);
+  let index = chapterIndex.value - 1;
+  if (typeof catalog.value[index] !== "undefined") {
+    ElMessage({
+      message: "上一章",
+      type: "info",
+    });
+    getContent(index);
+  } else {
+    ElMessage({
+      message: "本章是第一章",
+      type: "error",
+    });
+  }
+};
+const saveReadingBookProgressToBrowser = (index, pos = chapterPos.value) => {
+  //保存localStorage
+  let bookUrl = sessionStorage.getItem("bookUrl");
+  var book = JSON.parse(localStorage.getItem(bookUrl));
+  book.index = index;
+  book.chapterPos = pos;
+  localStorage.setItem(bookUrl, JSON.stringify(book));
+  //最近阅读
+  book = JSON.parse(localStorage.getItem("readingRecent"));
+  book.chapterIndex = index;
+  book.chapterPos = pos;
+  localStorage.setItem("readingRecent", JSON.stringify(book));
+  //保存vuex
+  chapterIndex.value = index;
+  chapterPos.value = pos;
+  //保存sessionStorage
+  sessionStorage.setItem("chapterIndex", index);
+  sessionStorage.setItem("chapterPos", String(pos));
+};
+const updateChapterData = async (data, reloadChapter) => {
+  if (reloadChapter) {
+    chapterData.value.splice(0);
+  }
+  chapterData.value.push(data);
+};
+const loadMore = () => {
+  let index = chapterData.value.slice(-1)[0].index;
+  if (catalog.value.length - 1 > index) {
+    getContent(index + 1, false);
+  }
+};
+const router = useRouter();
+const toShelf = () => {
+  router.push("/");
+};
+//监听方向键
+const handleKeyPress = (event) => {
+  switch (event.key) {
+    case "ArrowLeft":
+      event.stopPropagation();
+      event.preventDefault();
+      toPreChapter();
+      break;
+    case "ArrowRight":
+      event.stopPropagation();
+      event.preventDefault();
+      toNextChapter();
+      break;
+    case "ArrowUp":
+      event.stopPropagation();
+      event.preventDefault();
+      if (document.documentElement.scrollTop === 0) {
+        ElMessage({
+          message: "已到达页面顶部",
+          type: "warn",
+        });
+      } else {
+        jump(0 - document.documentElement.clientHeight + 100);
+      }
+      break;
+    case "ArrowDown":
+      event.stopPropagation();
+      event.preventDefault();
+      if (
+        document.documentElement.clientHeight +
+          document.documentElement.scrollTop ===
+        document.documentElement.scrollHeight
+      ) {
+        ElMessage({
+          message: "已到达页面底部",
+          type: "warn",
+        });
+      } else {
+        jump(document.documentElement.clientHeight - 100);
+      }
+      break;
+  }
+};
+//IntersectionObserver回调 底部加载
+const handleIScrollObserve = (entries) => {
+  if (showLoading.value) return;
+  for (let { isIntersecting } of entries) {
+    if (!isIntersecting) return;
+    loadMore();
+  }
+};
+//IntersectionObserver回调 当前阅读章节序号
+const handleIReadingObserve = (entries) => {
+  nextTick(() => {
+    for (let { isIntersecting, target, boundingClientRect } of entries) {
+      let titleElement = target.querySelector(".title");
+      if (!titleElement) return;
+      let chapterTitleIndex = parseInt(titleElement.getAttribute("index"));
+      if (isIntersecting) {
+        chapterIndex.value = chapterTitleIndex;
+      } else {
+        if (boundingClientRect.top < 0) {
+          chapterIndex.value = chapterTitleIndex + 1;
+        } else {
+          chapterIndex.value = chapterTitleIndex - 1;
+        }
+      }
+    }
+  });
+};
+//添加所有章节到observe
+const addReadingObserve = () => {
+  nextTick(() => {
+    let chapterElements = chapter.value;
+    if (!chapterElements) return;
+    chapterElements.forEach((el) => readingObserve.value.observe(el));
+  });
+};
+/*
+onBeforeRouteLeave((to, from, next) => {
+  if (
+    store.searchBooks.every((book) => book.bookUrl != store.readingBook.bookUrl)
+  ) {
+    next();
+  } else {
+    alert(111);
+    next(false);
+  }
+});
+window.addEventListener("beforeunload", (e) => {
+  e.preventDefault();
+  e.returnValue = "";
+  alert(111);
+});
+*/
+onMounted(() => {
+  showLoading.value = true;
+  //获取书籍数据
+  let bookUrl = sessionStorage.getItem("bookUrl");
+  let bookName = sessionStorage.getItem("bookName");
+  let bookAuthor = sessionStorage.getItem("bookAuthor");
+  let chapterIndex = Number(sessionStorage.getItem("chapterIndex") || 0);
+  let chapterPos = Number(sessionStorage.getItem("chapterPos") || 0);
+  var book = JSON.parse(localStorage.getItem(bookUrl));
+  if (
+    book == null ||
+    chapterIndex != book.index ||
+    chapterPos != book.chapterPos
+  ) {
+    book = {
+      bookName: bookName,
+      bookAuthor: bookAuthor,
+      bookUrl: bookUrl,
+      index: chapterIndex,
+      chapterPos: chapterPos,
+    };
+    localStorage.setItem(bookUrl, JSON.stringify(book));
+  }
+
+  API.getChapterList(bookUrl).then(
+    (res) => {
+      showLoading.value = false;
+      if (!res.data.isSuccess) {
+        ElMessage({ message: res.data.errorMsg, type: "error" });
+        setTimeout(toShelf, 500);
+        return;
+      }
+      let data = res.data.data;
+      store.setCatalog(data);
+      store.setReadingBook(book);
+
+      getContent(chapterIndex, true, chapterPos);
+
+      window.addEventListener("keyup", handleKeyPress);
+      //监听底部加载
+      scrollObserve.value = new IntersectionObserver(handleIScrollObserve, {
+        rootMargin: "-100% 0% 20% 0%",
+      });
+      enableInfiniteLoading.value && scrollObserve.value.observe(loading.value);
+      //监听当前阅读章节
+      readingObserve.value = new IntersectionObserver(handleIReadingObserve);
+      //第二次点击同一本书 页面标题不会变化
+      document.title = null;
+      document.title = bookName + " | " + catalog.value[chapterIndex].title;
+    },
+    (err) => {
+      showLoading.value = false;
+      ElMessage({ message: "获取书籍目录失败", type: "error" });
+      throw err;
+    }
+  );
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keyup", handleKeyPress);
+  readSettingsVisible.value = false;
+  popCataVisible.value = false;
+  scrollObserve.value?.disconnect();
+  readingObserve.value?.disconnect();
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.pop-setting) {
+  margin-left: 68px;
+  top: 0;
+}
+
+:deep(.pop-cata) {
+  margin-left: 10px;
+}
+
+.chapter-wrapper {
+  padding: 0 4%;
+  flex-direction: column;
+  align-items: center;
+
+  :deep(.no-point) {
+    pointer-events: none;
+  }
+
+  .tool-bar {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    z-index: 100;
+
+    .tools {
+      display: flex;
+      flex-direction: column;
+
+      .tool-icon {
+        font-size: 18px;
+        width: 58px;
+        height: 48px;
+        text-align: center;
+        padding-top: 12px;
+        cursor: pointer;
+        outline: none;
+
+        .iconfont {
+          font-family: iconfont;
+          width: 16px;
+          height: 16px;
+          font-size: 16px;
+          margin: 0 auto 6px;
+        }
+
+        .icon-text {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .read-bar {
+    position: fixed;
+    bottom: 0;
+    right: 50%;
+    z-index: 100;
+
+    .tools {
+      display: flex;
+      flex-direction: column;
+
+      .tool-icon {
+        font-size: 18px;
+        width: 42px;
+        height: 31px;
+        padding-top: 12px;
+        text-align: center;
+        align-items: center;
+        cursor: pointer;
+        outline: none;
+        margin-top: -1px;
+
+        .iconfont {
+          font-family: iconfont;
+          width: 16px;
+          height: 16px;
+          font-size: 16px;
+          margin: 0 auto 6px;
+        }
+      }
+    }
+  }
+
+  .chapter-bar {
+    .el-breadcrumb {
+      .item {
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+  }
+
+  .chapter {
+    font-family: "Microsoft YaHei", PingFangSC-Regular, HelveticaNeue-Light,
+      "Helvetica Neue Light", sans-serif;
+    text-align: left;
+    padding: 0 65px;
+    min-height: 100vh;
+    width: 670px;
+    margin: 0 auto;
+
+    :deep(.el-loading-spinner) {
+      font-size: 36px;
+      color: #b5b5b5;
+    }
+
+    :deep(.el-loading-text) {
+      font-weight: 500;
+      color: #b5b5b5;
+    }
+
+    .content {
+      overflow: hidden;
+      font-size: 18px;
+      line-height: 1.8;
+      font-family: "Microsoft YaHei", PingFangSC-Regular, HelveticaNeue-Light,
+        "Helvetica Neue Light", sans-serif;
+
+      .title {
+        margin-bottom: 57px;
+        font: 24px / 32px PingFangSC-Regular, HelveticaNeue-Light,
+          "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
+      }
+
+      .bottom-bar,
+      .top-bar {
+        height: 64px;
+      }
+    }
+  }
+}
+
+.day {
+  :deep(.popup) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  }
+
+  :deep(.tool-icon) {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: -1px;
+    color: #000;
+
+    .icon-text {
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  :deep(.chapter) {
+    border: 1px solid #d8d8d8;
+    color: #262626;
+  }
+}
+
+.night {
+  :deep(.popup) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.48), 0 0 6px rgba(0, 0, 0, 0.16);
+  }
+
+  :deep(.tool-icon) {
+    border: 1px solid #444;
+    margin-top: -1px;
+    color: #666;
+
+    .icon-text {
+      color: #666;
+    }
+  }
+
+  :deep(.chapter) {
+    border: 1px solid #444;
+    color: #666;
+  }
+
+  :deep(.popper__arrow) {
+    background: #666;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .chapter-wrapper {
+    padding: 0;
+
+    .tool-bar {
+      left: 0;
+      width: 100vw;
+      margin-left: 0 !important;
+
+      .tools {
+        flex-direction: row;
+        justify-content: space-between;
+
+        .tool-icon {
+          border: none;
+        }
+      }
+    }
+
+    .read-bar {
+      right: 0;
+      width: 100vw;
+      margin-right: 0 !important;
+
+      .tools {
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0 15px;
+
+        .tool-icon {
+          border: none;
+          width: auto;
+
+          .iconfont {
+            display: inline-block;
+          }
+        }
+      }
+    }
+
+    .chapter {
+      width: 100vw !important;
+      padding: 0 20px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
@@ -0,0 +1,369 @@
+<template>
+  <div class="index-wrapper">
+    <div class="navigation-wrapper">
+      <div class="navigation-title-wrapper">
+        <div class="navigation-title">阅读</div>
+        <div class="navigation-sub-title">清风不识字，何故乱翻书</div>
+      </div>
+      <div class="search-wrapper">
+        <el-input
+          placeholder="搜索书籍，在线书籍自动加入书架"
+          v-model="search"
+          class="search-input"
+          :prefix-icon="Search"
+          @keyup.enter="searchBook"
+        >
+        </el-input>
+      </div>
+      <div class="bottom-wrapper">
+        <div class="recent-wrapper">
+          <div class="recent-title">最近阅读</div>
+          <div class="reading-recent">
+            <el-tag
+              :type="readingRecent.name == '尚无阅读记录' ? 'warning' : ''"
+              class="recent-book"
+              size="large"
+              @click="
+                toDetail(
+                  readingRecent.url,
+                  readingRecent.name,
+                  readingRecent.author,
+                  readingRecent.chapterIndex,
+                  readingRecent.chapterPos
+                )
+              "
+              :class="{ 'no-point': readingRecent.url == '' }"
+            >
+              {{ readingRecent.name }}
+            </el-tag>
+          </div>
+        </div>
+        <div class="setting-wrapper">
+          <div class="setting-title">基本设定</div>
+          <div class="setting-item">
+            <el-tag
+              :type="connectType"
+              size="large"
+              class="setting-connect"
+              :class="{ 'no-point': newConnect }"
+              @click="setIP"
+            >
+              {{ connectStatus }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-icons">
+        <a
+          href="https://github.com/gedoor/legado_web_bookshelf"
+          target="_blank"
+        >
+          <div class="bottom-icon">
+            <img :src="githubUrl" alt="" />
+          </div>
+        </a>
+      </div>
+    </div>
+    <div class="shelf-wrapper" ref="shelfWrapper">
+      <book-items
+        :books="books"
+        @bookClick="handleBookClick"
+        :isSearch="isSearching"
+      ></book-items>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "@/assets/fonts/shelffont.css";
+import { useBookStore } from "@/store";
+import githubUrl from "@/assets/imgs/github.png";
+import { Search } from "@element-plus/icons-vue";
+import loadingSvg from "@element-plus/icons-svg/loading.svg?raw";
+import API from "@api";
+
+const store = useBookStore();
+const { connectStatus, connectType, newConnect, shelf } = storeToRefs(store);
+
+const readingRecent = ref({
+  name: "尚无阅读记录",
+  author: "",
+  url: "",
+  chapterIndex: 0,
+  chapterPos: 0,
+});
+const showLoading = ref(false);
+const shelfWrapper = ref(null);
+const loadingSerive = ref(null);
+watch(showLoading, (loading) => {
+  if (!loading) return loadingSerive.value?.close();
+  loadingSerive.value = ElLoading.service({
+    target: shelfWrapper.value,
+    spinner: loadingSvg,
+    text: "正在获取书籍信息",
+    backgroud: "rgb(247,247,247)",
+    lock: true,
+  });
+});
+
+const books = ref([]);
+watchEffect(() => {
+  if (books.value.length > 0) showLoading.value = false;
+});
+
+const search = ref("");
+const isSearching = ref(false);
+watchEffect(() => {
+  if (isSearching.value && search.value != "") return;
+  isSearching.value = false;
+  books.value = [];
+  if (search.value == "") {
+    books.value = shelf.value;
+    return;
+  }
+  books.value = shelf.value.filter((book) => {
+    return (
+      book.name.includes(search.value) || book.author.includes(search.value)
+    );
+  });
+});
+
+const searchBook = () => {
+  if (search.value == "") return;
+  books.value = [];
+  store.clearSearchBooks();
+  showLoading.value = true;
+  isSearching.value = true;
+  API.search(
+    search.value,
+    (data) => {
+      try {
+        store.setSearchBooks(JSON.parse(data));
+        store.searchBooks.forEach((item) => books.value.push(item));
+      } catch (e) {
+        ElMessage({ message: "后端数据错误", type: "error" });
+        throw e;
+      }
+    },
+    () => (showLoading.value = false)
+  );
+};
+
+const setIP = () => {};
+
+const router = useRouter();
+const handleBookClick = async (book) => {
+  const {
+    bookUrl,
+    name,
+    author,
+    durChapterIndex = 0,
+    durChapterPos = 0,
+  } = book;
+  await API.saveBook(book);
+  toDetail(bookUrl, name, author, durChapterIndex, durChapterPos);
+};
+const toDetail = (bookUrl, bookName, bookAuthor, chapterIndex, chapterPos) => {
+  if (bookName === "尚无阅读记录") return;
+  sessionStorage.setItem("bookUrl", bookUrl);
+  sessionStorage.setItem("bookName", bookName);
+  sessionStorage.setItem("bookAuthor", bookAuthor);
+  sessionStorage.setItem("chapterIndex", chapterIndex);
+  sessionStorage.setItem("chapterPos", chapterPos);
+  readingRecent.value = {
+    name: bookName,
+    author: bookAuthor,
+    url: bookUrl,
+    chapterIndex: chapterIndex,
+    chapterPos: chapterPos,
+  };
+  localStorage.setItem("readingRecent", JSON.stringify(readingRecent.value));
+  router.push({
+    path: "/chapter",
+  });
+};
+
+onMounted(async () => {
+  //获取最近阅读书籍
+  let readingRecentStr = localStorage.getItem("readingRecent");
+  if (readingRecentStr != null) {
+    readingRecent.value = JSON.parse(readingRecentStr);
+    if (typeof readingRecent.value.chapterIndex == "undefined") {
+      readingRecent.value.chapterIndex = 0;
+    }
+  }
+  showLoading.value = true;
+  //await store.saveBookProcess();
+  fetchBookShelfData();
+});
+const fetchBookShelfData = () => {
+  API.getBookShelf()
+    .then((response) => {
+      store.setConnectType("success");
+      if (response.data.isSuccess) {
+        //store.increaseBookNum(response.data.data.length);
+        store.addBooks(
+          response.data.data.sort(function (a, b) {
+            var x = a["durChapterTime"] || 0;
+            var y = b["durChapterTime"] || 0;
+            return y - x;
+          })
+        );
+      } else {
+        ElMessage({ message: response.data.errorMsg, type: "error" });
+      }
+      store.setConnectStatus("已连接 ");
+      store.setNewConnect(false);
+    })
+    .catch(function (error) {
+      showLoading.value = false;
+      store.setConnectType("danger");
+      store.setConnectStatus("连接失败");
+      ElMessage({ message: "后端连接失败", type: "error" });
+      store.setNewConnect(false);
+      throw error;
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.index-wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  .navigation-wrapper {
+    width: 260px;
+    min-width: 260px;
+    padding: 48px 36px;
+    background-color: #f7f7f7;
+
+    .navigation-title {
+      font-size: 24px;
+      font-weight: 500;
+      font-family: FZZCYSK;
+    }
+
+    .navigation-sub-title {
+      font-size: 16px;
+      font-weight: 300;
+      font-family: FZZCYSK;
+      margin-top: 16px;
+      color: #b1b1b1;
+    }
+
+    .search-wrapper {
+      .search-input {
+        border-radius: 50%;
+        margin-top: 24px;
+
+        :deep(.el-input__wrapper) {
+          border-radius: 50px;
+          border-color: #e3e3e3;
+        }
+      }
+    }
+
+    .recent-wrapper {
+      margin-top: 36px;
+
+      .recent-title {
+        font-size: 14px;
+        color: #b1b1b1;
+        font-family: FZZCYSK;
+      }
+
+      .reading-recent {
+        margin: 18px 0;
+
+        .recent-book {
+          font-size: 10px;
+          // font-weight: 400;
+          // margin: 12px 0;
+          // font-weight: 500;
+          // color: #6B7C87;
+          cursor: pointer;
+          // padding: 6px 18px;
+        }
+      }
+    }
+
+    .setting-wrapper {
+      margin-top: 36px;
+
+      .setting-title {
+        font-size: 14px;
+        color: #b1b1b1;
+        font-family: FZZCYSK;
+      }
+
+      .no-point {
+        pointer-events: none;
+      }
+
+      .setting-connect {
+        font-size: 8px;
+        margin-top: 16px;
+        // color: #6B7C87;
+        cursor: pointer;
+      }
+    }
+
+    .bottom-icons {
+      position: fixed;
+      bottom: 0;
+      height: 120px;
+      width: 260px;
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  .shelf-wrapper {
+    padding: 48px 48px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :deep(.el-loading-spinner) {
+      font-size: 36px;
+      color: #b5b5b5;
+    }
+
+    :deep(.el-loading-text) {
+      font-weight: 500;
+      color: #b5b5b5;
+    }
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .index-wrapper {
+    overflow-x: hidden;
+    flex-direction: column;
+    .navigation-wrapper {
+      padding: 20px 24px;
+      box-sizing: border-box;
+      width: 100%;
+      .navigation-title-wrapper {
+        white-space: nowrap;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+      }
+      .bottom-wrapper,
+      .bottom-icons {
+        display: none;
+      }
+    }
+    .shelf-wrapper {
+      padding: 0;
+      :deep(.el-loading-spinner) {
+        display: none;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,43 @@
+<template>
+  <div class="editor">
+    <source-tab-form class="left" :config="config" />
+    <tool-bar />
+    <source-tab-tools class="right" />
+  </div>
+</template>
+<script setup>
+import bookSourceConfig from "@/utils/bookSourceEditConfig.js";
+import rssSourceConfig from "@/utils/rssSourceEditConfig.js";
+import "@/assets/main.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+
+const config = ref({});
+
+if (/bookSource/i.test(location.href)) {
+  config.value = bookSourceConfig;
+  document.title = "书源管理";
+} else {
+  config.value = rssSourceConfig;
+  document.title = "订阅源管理";
+}
+</script>
+<style lang="scss" scoped>
+.editor {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  .left {
+    flex: 1;
+    margin-left: 20px;
+  }
+  .right {
+    width: 360px;
+    margin-right: 20px;
+  }
+  #loading {
+    position: fixed;
+    top: 100px;
+    left: 90vw;
+  }
+}
+</style>