modules 添加web

modules/web/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

modules/web/.env.development

@@ -0,0 +1 @@
+VITE_API=http://192.168.10.5:1122

modules/web/.env.production

@@ -0,0 +1 @@
+VITE_API=

modules/web/.eslintrc-auto-import.json

@@ -0,0 +1,84 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ElLoading": true,
+    "ElMessage": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "acceptHMRUpdate": true,
+    "computed": true,
+    "createApp": true,
+    "createPinia": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "defineStore": true,
+    "effectScope": true,
+    "getActivePinia": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "store": true,
+    "storeToRefs": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useBookStore": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useSourceStore": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

modules/web/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "./.eslintrc-auto-import.json",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  rules: {
+    "no-unused-vars": "warn",
+  },
+};

modules/web/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: "daily"

modules/web/.github/workflows/build.yml

@@ -0,0 +1,66 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  UPSTREAM_REPOSITORY: gedoor/legado_web_source_editor
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@v3
+
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Project
+        run: |
+          npm install
+
+      - name: Format code
+        if: ${{ github.repository == env.UPSTREAM_REPOSITORY }}
+        run: |
+          npm run-script lint
+
+      - name: push changes
+        if: ${{ github.repository == env.UPSTREAM_REPOSITORY }}
+        uses: stefanzweifel/git-auto-commit-action@v4.16.0
+        with:
+          commit_message: 'style: format code'
+          file_pattern: src
+
+      - name: Build
+        run: |
+          npm run-script build
+
+      - name: Set Env
+        if: ${{ github.repository == env.UPSTREAM_REPOSITORY }}
+        shell: bash
+        run: |
+          version="v$(date -d "8 hour" -u +3.%y.%m%d%H)"
+          echo "APP_VER=$version" >> $GITHUB_ENV
+
+      - name: Push changes to legado
+        continue-on-error: true
+        if: ${{ github.repository == env.UPSTREAM_REPOSITORY }}
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git clone "https://gedoor:${{ secrets.ACTIONS_TOKEN }}@github.com/gedoor/legado" --depth 1
+          rm -rf legado/app/src/main/assets/web/source/*
+          mv -f $GITHUB_WORKSPACE/dist/* legado/app/src/main/assets/web/source/
+          cd legado
+          git add -A
+          git commit -m "web source editor: ${{ env.APP_VER }}"
+          git push

modules/web/.github/workflows/release.yml

@@ -0,0 +1,40 @@
+name: Release
+
+on: [workflow_dispatch]
+
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout master
+        uses: actions/checkout@v3
+          
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Set Env
+        shell: bash
+        run: |
+          version="v$(date -d "8 hour" -u +3.%y.%m%d%H)"
+          echo "VERSION=$version" >> $GITHUB_ENV
+
+      - name: Build
+        run: |
+          npm install
+          npm run-script build
+          zip -q -r ${{github.ref_name}}_${{env.VERSION}}.zip ./dist
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: ${{ env.VERSION }}
+          tag_name: ${{ env.VERSION }}
+          draft: false
+          prerelease: false
+          files: ${{ github.workspace }}/*.zip
+

modules/web/.gitignore

@@ -0,0 +1,28 @@
+.DS_Store
+node_modules
+/dist
+/doc
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.vim
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/package-lock.json
+/yarn.lock
+pnpm-lock.yaml

modules/web/LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

modules/web/index.html

@@ -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="./src/main.js"></script>
+    </body>
+</html>

modules/web/jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "types": ["element-plus/global", "@element-plus/icons-vue","@vueuse/shared", "vite/client"],
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "checkJs": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "paths": {
+      "@/*":["./src/*"],
+      "@api":["./src/api"],
+      "@utils/*":["./src/utils/*"]
+    }
+  },
+  //"exclude": ["node_modules", "dist"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.js", "src/**/*.vue"]
+}

modules/web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "legado-web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@element-plus/icons-svg": "^2.1.0",
+    "@element-plus/icons-vue": "^2.1.0",
+    "@vueuse/shared": "^9.13.0",
+    "axios": "^1.3.5",
+    "element-plus": "^2.3.1",
+    "pinia": "^2.0.33",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "hotkeys-js": "^3.10.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.10.0",
+    "prettier": "^2.8.7",
+    "sass": "^1.60.0",
+    "unplugin-auto-import": "^0.15.2",
+    "unplugin-icons": "^0.16.0",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1"
+  }
+}

modules/web/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

modules/web/src/api/axios.js

@@ -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;

modules/web/src/api/index.js

@@ -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,
+};

modules/web/src/assets/bookshelf.css

@@ -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%;
+}

modules/web/src/assets/code.css

@@ -0,0 +1,6 @@
+code {
+  background-color: #f2f1f1;
+  padding: .125rem .25rem;
+  border-radius: 0.25rem;
+  font-size: 0.835rem;
+}

modules/web/src/assets/fonts/iconfont.css

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "iconfont";
+  src: url("./iconfont.woff") format("woff");
+}

modules/web/src/assets/fonts/popfont.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "FZZCYSK";
+  src: local("☺"), url("./popfont.ttf");
+  font-style: normal;
+  font-weight: normal;
+}

modules/web/src/assets/fonts/shelffont.css

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@font-face {
+  font-family: "FZZCYSK";
+  src: local("☺"), url("./shelffont.ttf");
+  font-style: normal;
+  font-weight: normal;
+}

modules/web/src/assets/kbd.css

@@ -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;
+}

modules/web/src/assets/main.css

@@ -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;
+}

modules/web/src/auto-imports.d.ts

@@ -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'
+}

modules/web/src/components.d.ts

@@ -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']
+  }
+}

modules/web/src/components/BookItems.vue

@@ -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>

modules/web/src/components/ChapterContent.vue

@@ -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>

modules/web/src/components/PopCatalog.vue

@@ -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>

modules/web/src/components/ReadSettings.vue

@@ -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>

modules/web/src/components/SourceDebug.vue

@@ -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>

modules/web/src/components/SourceHelp.vue

@@ -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>

modules/web/src/components/SourceJson.vue

@@ -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>

modules/web/src/components/SourceList.vue

@@ -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>

modules/web/src/components/SourceTabForm.vue

@@ -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>

modules/web/src/components/SourceTabTools.vue

@@ -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>

modules/web/src/components/ToolBar.vue

@@ -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>

modules/web/src/main.js

@@ -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");

modules/web/src/pages/bookshelf/README.md

@@ -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)

modules/web/src/pages/bookshelf/config.js

@@ -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);
+  }
+});

modules/web/src/pages/bookshelf/index.html

@@ -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>

modules/web/src/pages/bookshelf/main.js

@@ -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");

modules/web/src/pages/source/README.md

@@ -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
+```
+

modules/web/src/pages/source/index.html

@@ -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>

modules/web/src/pages/source/main.js

@@ -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");

modules/web/src/plugins/config.js

@@ -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;

modules/web/src/plugins/jump.js

@@ -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;

modules/web/src/plugins/utils.js

@@ -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;
+};

modules/web/src/router/bookRouter.js

@@ -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;

modules/web/src/router/index.js

@@ -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;

modules/web/src/router/sourceRouter.js

@@ -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;

modules/web/src/source.d.ts

@@ -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 }

modules/web/src/store/bookStore.js

@@ -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,
+      });
+    },
+  },
+});

modules/web/src/store/index.js

@@ -0,0 +1,5 @@
+import { createPinia } from "pinia";
+
+export * from "./bookStore";
+export * from "./sourceStore";
+export default createPinia();

modules/web/src/store/sourceStore.js

@@ -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 = [];
+    },
+  },
+});

modules/web/src/utils/bookSourceEditConfig.js

@@ -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",
+      },
+    ],
+  },
+};

modules/web/src/utils/rssSourceEditConfig.js

@@ -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",
+      },
+    ],
+  },
+};

modules/web/src/utils/souce.ts

@@ -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 = {}

modules/web/src/views/BookChapter.vue

@@ -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>

modules/web/src/views/BookShelf.vue

@@ -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>

modules/web/src/views/SourceEditor.vue

@@ -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>

modules/web/vite.config.js

@@ -0,0 +1,55 @@
+import { resolve } from "path";
+import { defineConfig, splitVendorChunkPlugin } from "vite";
+import vue from "@vitejs/plugin-vue";
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+// https://vitejs.dev/config/
+export default ({ mode }) =>
+  defineConfig({
+    plugins: [
+      vue(),
+      splitVendorChunkPlugin(), // index vendor打包
+      AutoImport({
+        imports: ["vue", "vue-router", "pinia"],
+        include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+        dirs: ["src/components", "src/store"],
+        eslintrc: {
+          enabled: true,
+        },
+        resolvers: [
+          ElementPlusResolver(),
+          IconsResolver({
+            prefix: "Icon",
+          }),
+        ],
+        dts: "./src/auto-imports.d.ts",
+      }),
+      Components({
+        resolvers: [
+          ElementPlusResolver(),
+          IconsResolver({
+            enabledCollections: ["ep"],
+          }),
+        ],
+        dts: "./src/components.d.ts",
+      }),
+      Icons({
+        autoInstall: true,
+      }),
+    ],
+    base: mode === "development" ? "/" : "./",
+    server: {
+      port: 8080,
+    },
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "./src"),
+        "@api": resolve(__dirname, "./src/api"),
+        "@utils": resolve(__dirname, "./src/utils/"),
+      },
+    },
+  });