v2.2.8

Signed-off-by: qwqcode <qwqcode@gmail.com>

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   ],
   plugins: ['@typescript-eslint', 'import'],
   rules: {
+    'no-alert': 'off',
     'no-unused-vars': 'off',
     'no-plusplus': 0,
     'no-param-reassign': 0,

.github/workflows/npm.yml

@@ -15,20 +15,26 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v3
 
-    - name: Set node version to 12.x
-      uses: actions/setup-node@v2
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2.0.1
       with:
-        node-version: '12.x'
-        registry-url: 'https://registry.npmjs.org'
+        version: 7.0.0-rc.3
+
+    - name: Set node version to 16.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+        registry-url: https://registry.npmjs.org/
+        cache: 'pnpm'
 
     - name: Install dependencies
-      run: yarn install
+      run: pnpm install
 
     - name: Build
-      run: yarn build
+      run: pnpm build
 
     - name: Publish
-      run: cd packages/artalk && yarn publish
+      run: cd packages/artalk && pnpm publish --no-git-checks
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
@@ -60,6 +66,7 @@ jobs:
       - name: Update CDN links
         run: |
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/ArtalkCDN.json
+          perl -pi -e 's#"Artalk"(\W+)?:(\W+)?".*?"#"Artalk": "${{ steps.get_version.outputs.VERSION }}"#g' docs/code/ArtalkVersion.json
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/quick-start/cdn.html
 
       - uses: stefanzweifel/git-auto-commit-action@v4

.github/workflows/pages.yml

@@ -13,16 +13,23 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v2
 
-    - name: Setup
-      uses: actions/setup-node@v1
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2.0.1
       with:
-        node-version: '12.x'
+        version: 7.0.0-rc.3
 
-    - name: Install
-      run: yarn install
+    - name: Set node version to 16.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+        registry-url: https://registry.npmjs.org/
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      run: pnpm install
 
     - name: Build
-      run: cd packages/artalk && yarn predeploy
+      run: cd packages/artalk && pnpm predeploy
 
     - name: Deploy
       uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -1,8 +1,13 @@
 .DS_Store
 node_modules/
+
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # Editor directories and files
 .idea

.npmignore

@@ -1,8 +1,12 @@
 .DS_Store
 node_modules/
+
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 .idea
 .vscode

.travis.yml

@@ -4,10 +4,15 @@ node_js:
   - lts/*
 
 script:
-  - yarn run lint
-  - yarn run build
+  - pnpm run lint
+  - pnpm run build
 
 cache:
-  yarn: true
+  npm: false
   directories:
-    - node_modules
+    - "~/.pnpm-store"
+before_install:
+  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7.0.0-rc.3
+  - pnpm config set store-dir ~/.pnpm-store
+install:
+  - pnpm install

LICENSE

@@ -1,674 +1,165 @@
-                    GNU GENERAL PUBLIC LICENSE
+                   GNU LESSER 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>.
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser 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
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

README.md

@@ -6,6 +6,7 @@
 
 [![](https://img.shields.io/npm/v/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
 [![](https://img.shields.io/npm/dt/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
+[![](https://badgen.net/bundlephobia/minzip/artalk?style=flat-square)](https://bundlephobia.com/package/artalk)
 [![](https://img.shields.io/github/last-commit/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master)
 [![](https://img.shields.io/github/issues-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/issues)
 [![](https://img.shields.io/github/issues-pr-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/pulls)
@@ -14,38 +15,48 @@
 
 > 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.
 
-前往：[“**官方文档**”](https://artalk.js.org)
+可参考：[“官方文档”](https://artalk.js.org)
+
+最新版：[“Releases”](https://github.com/ArtalkJS/ArtalkGo/releases)
 
 ---
 
-- 轻量 (~30kB gzipped)
-- 自托管 (隐私安全)
-- 简单易上手 (防秃顶)
-- Markdown 语法 (通用性)
+- 轻量级 (~30kB)
+- 自托管 (数据安全)
+- 易上手 (防秃顶)
 - Golang 后端 (易部署 / 跨平台)
+- TypeScript & Vanilla (纯天然无添加 / 无依赖)
 
 ## 特性
 
-- 表 情 包 ：统一管理 / 链接替换
-- 通知中心：红点标记 / 已读记录
+- 侧 边 栏 ：所见即所得的管理方式
+- 通知中心：红点的标记 / 已读记录
 - 身份验证：徽标自定义 / 密码验证
-- 站点隔离：多站点管理 / 站点管理员用户分配
-- 评论审核：反垃圾检测 / 验证码 / 提交频率限制
+- 评论审核：反垃圾检测 / 验证码频率限制
+- 表情符号：插入表情包 / 快速导入表情包
 - 邮件提醒：模版自定义 / 多管理员通知
-- 树洞模式：仅自己可见 / 说说功能
+- 站点隔离：多站点管理 / 管理员分配
 - 页面管理：标题可显示 / 快速跳转
-- 无限层级：可切换为 “平铺模式”
+- 图片上传：上传到本地 / 多种图床
+- 树洞模式：仅自己可见 / 说说功能
+- 多元推送：支持钉钉飞书 TG
+- 无限层级：可切换为平铺模式
 - 评论投票：赞同还是反对评论
-- 异步处理：邮件发送无需等待
+- 评论排序：按热度或时间排序
+- 评论置顶：重要消息置顶显示
+- 只看作者：仅显示作者的评论
+- 异步处理：发送评论无需等待
 - 滚动加载：评论内容分页处置
 - 自动保存：用户输入防丢功能
 - 自动填充：用户链接自动填充
+- 实时预览：评论内容实时预览
 - 暗黑模式：防止眼部疾病伤害
 - 评论折叠：这个不打算给你康
 - 数据备份：防止评论数据丢失
 - 数据迁移：在不同评论系统之间来回切换
 - 一页多评：一页多个评论区（似乎没啥用
-- TypeScript & Vanilla：纯天然无添加 / 无需依赖
+- Markdown：语法默认支持
+- 支持 Latex：引入 Artalk 的 Katex 插件
 - [Vite](https://github.com/vitejs/vite)：开发者的极致体验
 
 ## 食用方针
@@ -53,7 +64,7 @@
 前往：[“**文档 · 部署**”](https://artalk.js.org/guide/deploy.html)
 
 ```sh
-$ yarn add artalk
+$ pnpm add artalk
 ```
 
 ```ts
@@ -61,13 +72,149 @@ import Artalk from 'artalk'
 
 new Artalk({
   el:        '#Comments',
-  pageKey:   '<页面链接>',
-  pageTitle: '<页面标题>',
-  server:    '<后端地址>',
-  site:      '<站点名称>',
+  pageKey:   'http://your_domain/post/1', // 页面链接
+  pageTitle: '关于如何引入 Artalk 这档子事', // 页面标题
+  server:    'http://localhost:8080/api', // 后端地址
+  site:      'Artalk 的博客 (你的站点名)',
 })
 ```
 
+### Docker
+
+```sh
+# 为 Artalk 创建一个目录
+mkdir Artalk
+cd Artalk
+
+# 下载配置文件模版
+curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
+
+docker run -d \
+  --name artalk \
+  -p 0.0.0.0:8080:23366 \
+  -v $(pwd)/conf.yml:/conf.yml \
+  -v $(pwd)/data:/data \
+  artalk/artalk-go
+```
+
+### Docker Compose
+
+```sh
+mkdir Artalk
+cd Artalk
+
+vim docker-compose.yaml
+```
+
+```yaml
+version: "3.5"
+services:
+  artalk:
+    container_name: artalk
+    image: artalk/artalk-go
+    ports:
+      - 8080:23366
+    volumes:
+      - ./conf.yml:/conf.yml
+      - ./data:/data
+```
+
+```sh
+docker-compose up -d
+```
+
+## TODOs 
+
+- [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
+- [x] 多数据库支持
+  - [x] SQLite
+  - [x] MySQL
+  - [x] Postgres
+  - [x] SQLServer
+- [x] 多缓存支持
+  - [x] In-memory (内建缓存)
+  - [x] Redis
+  - [x] Memcache
+- [x] 多站点支持
+- [x] 评论获取分页
+- [x] 评论点赞投票
+- [x] 浏览量统计
+- [x] 评论分页加载
+- [x] 评论置顶 / 精华
+- [x] 评论排序 (热度 / 时间)
+- [x] 通知中心
+  - [x] 提及
+  - [x] 全部
+  - [x] 我的
+  - [x] 待审
+- [x] 管理员控制台
+  - [x] 评论 (增/删/改)
+  - [x] 页面 (增/删/改)
+  - [x] 站点 (增/删/改)
+  - [x] 数据分页
+  - [ ] 配置 (GUI)
+- [x] 数据导入 ([Artransfer](https://artalk.js.org/guide/transfer.html))
+  - [x] Artrans
+  - [x] WordPress
+  - [x] Typecho ([插件](https://github.com/ArtalkJS/Artrans-Typecho) / [Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
+  - [x] Valine
+  - [x] Disqus
+  - [x] Commento
+  - [x] Waline ([Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
+  - [x] Twikoo
+  - [x] Artalk v1 (PHP)
+- [x] 数据导出
+- [ ] 数据备份同步
+- [x] 邮件异步队列发送
+- [ ] 邮件队列持久化
+- [x] 邮件多种发送方式
+  - [x] SMTP
+  - [x] 阿里云邮件
+  - [x] 系统调用 sendmail
+- [x] 邮件多模板自定义
+- [x] 用户已读标记
+- [x] 验证码
+  - [x] 图片验证码
+  - [x] [极验](https://www.geetest.com/)滑动验证码
+- [x] 反垃圾
+  - [x] [Akismet](https://akismet.com/)
+  - [x] [阿里云内容安全](https://help.aliyun.com/document_detail/28417.html)
+  - [x] [腾讯云内容安全](https://cloud.tencent.com/document/product/1124/64508)
+  - [x] 关键字过滤
+- [x] 评论通知管理员 ([notify](https://github.com/nikoksr/notify))
+  - [x] Telegram Bot
+  - [x] 飞书 WebHook Bot
+  - [x] 钉钉
+  - [x] Bark
+  - [x] Slack
+  - [x] LINE
+  - [ ] 自定义 HTTP 回调
+- [ ] 命令行管理
+- [ ] 博客邮件订阅
+- [x] 用户鉴权机制
+- [x] 跨域非法请求阻止
+- [x] 全局验证码操作次数限制
+- [x] JWT 登陆状态验证
+- [x] 时区自定义
+- [x] 只看作者功能
+- [ ] AT 提及 (@)
+- [ ] 评论提及 (#)
+- [ ] 表情包统一管理
+  - [ ] 导入表情包
+  - [ ] 表情包图片地址控制
+- [x] 图片上传
+- [x] 图片上传到图床 ([upgit](https://github.com/pluveto/upgit))
+- [ ] 图片管理
+- [ ] 附件上传 / 管理
+- [ ] 评论标签分类系统
+- [ ] 主题样式更换
+- [ ] 规范化 API
+- [ ] 扩展中心
+- [ ] 开放用户注册
+- [ ] 接入第三方登录
+- [ ] 国际化 (i18n)
+- [x] 一键升级
+
 ## 特别致谢
 
 感谢社区提供的帮助与反馈，若有好的建议与意见欢迎前往 [ISSUES](https://github.com/ArtalkJS/Artalk/issues) 随时告知。
@@ -77,7 +224,8 @@ new Artalk({
 [![Stargazers over time](https://starchart.cc/ArtalkJS/Artalk.svg)](https://starchart.cc/ArtalkJS/Artalk)
 
 ## License
-[GPL-3.0](./LICENSE)
+
+[LGPL-3.0](./LICENSE)
 
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk?ref=badge_shield)
 

package.json

@@ -1,33 +1,32 @@
 {
   "name": "artalk-monorepo",
   "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
   "homepage": "https://artalk.js.org",
   "scripts": {
-    "build": "yarn --cwd packages/artalk run build",
-    "dev": "yarn --cwd packages/artalk run dev",
-    "build:sidebar": "yarn run build && yarn --cwd packages/artalk-sidebar run build",
-    "build:all": "yarn --cwd packages/artalk run build && yarn --cwd packages/artalk-sidebar run build"
+    "dev": "pnpm -F artalk dev",
+    "dev:sidebar": "pnpm -F @artalkjs/artalk-sidebar dev",
+    "build": "pnpm -F artalk build",
+    "build:sidebar": "pnpm -F @artalkjs/artalk-sidebar build",
+    "build:all": "pnpm build && pnpm build:sidebar"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
-    "@types/node": "^16.11.7",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "autoprefixer": "^10.4.0",
-    "eslint": "^8.2.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.3",
+    "@types/node": "^16.11.27",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "autoprefixer": "^10.4.4",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-airbnb-typescript": "^16.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-config-airbnb-typescript": "^16.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
     "less": "^4.1.2",
-    "prettier": "^2.4.1",
-    "typescript": "^4.5.2",
-    "vite": "^2.6.14",
-    "vite-tsconfig-paths": "^3.3.17"
-  },
-  "dependencies": {}
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "rollup": "^2.70.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-tsconfig-paths": "^3.4.1"
+  }
 }

packages/artalk-sidebar/index.html

@@ -9,6 +9,23 @@
 <body>
   <div id="ArtalkSidebar"></div>
 
-  <script type="module" src="./src/index.ts"></script>
+  <script type="module">
+    import InitSidebar from './src/main'
+
+    const p        = new URLSearchParams(document.location.search)
+    const pageKey  = p.get('pageKey') || ''
+    const site     = p.get('site') || ''
+    const user     = JSON.parse(p.get('user') || '{}')
+    const view     = p.get('view') || ''
+    const darkMode = p.get('darkMode') === '1'
+
+    InitSidebar({
+      el: '#ArtalkSidebar',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : '../',
+      pageKey,
+      site,
+      darkMode,
+    }, user, view)
+  </script>
 </body>
 </html>

packages/artalk-sidebar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@artalkjs/artalk-sidebar",
-  "version": "0.1.0",
-  "license": "GPL-2.0",
+  "version": "0.1.1",
+  "license": "LGPL-3.0",
   "description": "The sidebar of artalk",
   "repository": {
     "type": "git",
@@ -10,26 +10,13 @@
   },
   "homepage": "https://artalk.js.org",
   "bugs": "https://github.com/ArtalkJS/Artalk/issue",
-  "main": "./dist/ArtalkSidebar.js",
-  "unpkg": "./dist/ArtalkSidebar.iife.js",
-  "jsdelivr": "./dist/ArtalkSidebar.iife.js",
-  "module": "./dist/ArtalkSidebar.es.js",
-  "types": "./types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/ArtalkSidebar.es.js",
-      "require": "./dist/ArtalkSidebar.js"
-    }
-  },
   "scripts": {
     "dev": "vite --port 23367",
-    "build": "yarn lint && vite build",
+    "build": "pnpm -F artalk build && pnpm lint && vite build",
     "serve": "vite preview",
     "lint": "eslint --ext .js,.ts src"
   },
-  "devDependencies": {
-  },
   "dependencies": {
-    "artalk": "*"
+    "artalk": "workspace: *"
   }
 }

packages/artalk-sidebar/src/admin/page-list.ts

@@ -1,13 +1,14 @@
 import '../style/page-list.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { PageData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
 import ActionBtn from 'artalk/src/components/action-btn'
-import ItemTextEditor from '../item-text-editor'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
 
 export default class PageList extends Component {
   $editor?: HTMLElement
@@ -15,16 +16,85 @@ export default class PageList extends Component {
 
   pages: PageData[] = []
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
   }
 
-  /** 清空所有 Pages */
-  clearAll() {
+  /** 初始化 PageList (清空列表) */
+  initPageList() {
     this.pages = []
-    this.$el.innerHTML = ''
+
+    this.$el.innerHTML = `<div class="atk-header-action-bar">
+    <span class="atk-update-all-title-btn"><i class="atk-icon atk-icon-sync"></i> <span class="atk-text">更新标题</span></span>
+    <span class="atk-cache-flush-all-btn"><span class="atk-text">缓存清除</span></span>
+    <span class="atk-cache-warm-up-btn"><span class="atk-text">缓存预热</span></span>
+    </div>`
+
+    // 缓存操作按钮
+    const $cacheFlushBtn = this.$el.querySelector<HTMLElement>('.atk-cache-flush-all-btn')!
+    $cacheFlushBtn.onclick = () => { new Api(this.ctx).cacheFlushAll().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+    const $cacheWarmBtn = this.$el.querySelector<HTMLElement>('.atk-cache-warm-up-btn')!
+    $cacheWarmBtn.onclick = () => { new Api(this.ctx).cacheWarmUp().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+
+    // 更新全部页面标题按钮
+    ;(async () => {
+      const $updateAllTitleBtn = this.$el.querySelector<HTMLElement>('.atk-update-all-title-btn')!
+      const $updateAllTitleIcon = $updateAllTitleBtn.querySelector<HTMLElement>('i')!
+      const $updateAllTitleText = $updateAllTitleBtn.querySelector<HTMLElement>('.atk-text')!
+      const btnTextOrg = $updateAllTitleText.innerText
+
+      const done = () => {
+        $updateAllTitleText.innerText = '更新完毕'
+        $updateAllTitleIcon.classList.remove('atk-rotate')
+        window.setTimeout(() => {
+          $updateAllTitleText.innerText = btnTextOrg
+        }, 1500)
+      }
+      const checkStatus = async () => {
+        const status = await new Api(this.ctx).pageFetch(undefined, undefined, true)
+        return status
+      }
+      const startWatchdog = () => {
+        $updateAllTitleIcon.classList.add('atk-rotate')
+
+        // 不完美的轮询更新状态
+        const timerID = window.setInterval(async () => {
+          const d = await new Api(this.ctx).pageFetch(undefined, undefined, true)
+
+          if (d.is_progress === false) {
+            clearInterval(timerID)
+            done()
+            return
+          }
+
+          $updateAllTitleText.innerText = d.msg
+        }, 1000)
+      }
+
+      // 图标恢复
+      const status = await checkStatus()
+      if (status.is_progress === true) {
+        startWatchdog()
+        $updateAllTitleText.innerText = status.msg
+      }
+
+      // 点击发起任务
+      $updateAllTitleBtn.onclick = async () => {
+        if ($updateAllTitleIcon.classList.contains('atk-rotate')) return
+        startWatchdog()
+        $updateAllTitleText.innerText = '开始更新...'
+
+        // 发起任务
+        try {
+          await new Api(this.ctx).pageFetch(undefined, this.sidebar.curtSite)
+        } catch (err: any) {
+          alert(err.msg)
+          done()
+        }
+      }
+    })()
   }
 
   /** 导入 Page 数据 */
@@ -61,6 +131,9 @@ export default class PageList extends Component {
     $sub.innerText = page.url || page.key
     $editBtn.onclick = () => this.showEditor(page, $page)
 
+    $title.onclick = () => { if (page.url) window.open(page.url) }
+    $sub.onclick = () => { if (page.url) window.open(page.url) }
+
     return $page
   }
 
@@ -157,7 +230,7 @@ export default class PageList extends Component {
       showLoading()
       let p: PageData
       try {
-        p = await new Api(this.ctx).pageFetch(page.id)
+        p = (await new Api(this.ctx).pageFetch(page.id)).page
       } catch (err: any) {
         showError(`同步失败：${err.msg || '未知错误'}`)
         console.log(err)

packages/artalk-sidebar/src/admin/site-list-floater.ts

@@ -52,7 +52,7 @@ export default class SiteListFloater {
 
     const sites = await new Api(this.ctx).siteGet()
     sites.forEach((site) => {
-      renderSiteItem(site.name, site.name.substr(0, 1))
+      renderSiteItem(site.name, site.name.substring(0, 1))
     })
 
     renderSiteItem('站点管理', '+', '', () => { this.conf.onClickSitesViewBtn();this.hide() })

packages/artalk-sidebar/src/admin/site-list.ts

@@ -1,12 +1,13 @@
 import '../style/site-list.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { SiteData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
-import ItemTextEditor from '../item-text-editor'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
 
 export default class SiteList extends Component {
   sites: SiteData[] = []
@@ -21,8 +22,8 @@ export default class SiteList extends Component {
 
   $add?: HTMLElement
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     this.$el = Utils.createElement(
     `<div class="atk-site-list">
@@ -49,6 +50,11 @@ export default class SiteList extends Component {
       this.closeEditor()
       this.showAdd()
     }
+
+    // TODO 这个太 magic 了
+    this.ctx.on('sidebar-sites-create-form', (p: any) => {
+      this.showAdd(p.create_name, p.create_urls)
+    })
   }
 
   public loadSites(sites: SiteData[]) {
@@ -86,7 +92,7 @@ export default class SiteList extends Component {
     const $siteName = $site.querySelector<HTMLElement>('.atk-site-name')!
     const setActive = () => { $site.classList.add('atk-active') }
 
-    $siteLogo.innerText = site.name.substr(0, 1)
+    $siteLogo.innerText = site.name.substring(0, 1)
     $siteName.innerText = site.name
 
     // click
@@ -230,7 +236,7 @@ export default class SiteList extends Component {
     this.activeSite = ''
   }
 
-  public showAdd() {
+  public showAdd(defaultName?: string, defaultUrls?: string) {
     this.closeAdd()
 
     this.$add = Utils.createElement(`
@@ -256,6 +262,9 @@ export default class SiteList extends Component {
     const $siteUrls = this.$add.querySelector<HTMLInputElement>('[name="AtkSiteUrls"]')!
     const $submitBtn = this.$add.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
 
+    if (defaultName) $siteName.value = defaultName
+    if (defaultUrls) $siteUrls.value = defaultUrls
+
     $submitBtn.onclick = async () => {
       const siteName = $siteName.value.trim()
       const siteUrls = $siteUrls.value.trim()

packages/artalk-sidebar/src/artalk-sidebar.ts

@@ -1,31 +0,0 @@
-import Artalk from 'artalk'
-import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
-import 'artalk/dist/Artalk.css'
-import Sidebar from './sidebar'
-
-class ArtalkSidebar extends Artalk {
-  constructor(customConf: ArtalkConfig, user: LocalUser) {
-    super(customConf)
-
-    this.$root.style.display = 'none'
-
-    user = user || {}
-    this.ctx.user.data = {
-      ...this.ctx.user.data,
-      ...user
-    }
-    this.ctx.user.save()
-
-    const sidebar = new Sidebar(this.ctx)
-    document.body.appendChild(sidebar.$el)
-
-    if (customConf.darkMode) {
-      sidebar.$el.classList.add('atk-dark-mode')
-    }
-
-    sidebar.show()
-    console.log('hello artalk-sidebar')
-  }
-}
-
-export default ArtalkSidebar

packages/artalk-sidebar/src/index.ts

@@ -1,15 +0,0 @@
-import ArtalkSidebar from './artalk-sidebar'
-
-const searchParams = new URLSearchParams(document.location.search)
-const pageKey = searchParams.get('pageKey') || ''
-const site = searchParams.get('site') || ''
-const user = JSON.parse(searchParams.get('user') || '{}')
-const darkMode = searchParams.get('darkMode') === '1'
-
-const artalkSidebar = new ArtalkSidebar({
-  el: '#ArtalkSidebar',
-  server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
-  pageKey,
-  site,
-  darkMode,
-}, user)

packages/artalk-sidebar/src/lib/item-text-editor.ts

@@ -1,4 +1,4 @@
-import './style/item-text-editor.less'
+import '../style/item-text-editor.less'
 
 import * as Utils from 'artalk/src/lib/utils'
 

packages/artalk-sidebar/src/main.ts

@@ -0,0 +1,57 @@
+import Artalk from 'artalk'
+import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
+import 'artalk/dist/Artalk.css'
+import SidebarRoot from './sidebar-root'
+
+export default async function InitSidebar(conf: ArtalkConfig, user: LocalUser, view?: string) {
+  // 初始化 Artalk 主程序
+  conf.useBackendConf = true
+  const artalk = await (new Artalk(conf))
+  artalk.$root.style.display = 'none'
+
+  // 初始化用户数据
+  user = user || {}
+  artalk.ctx.user.data = {
+    ...artalk.ctx.user.data,
+    ...user
+  }
+  artalk.ctx.user.save()
+
+  // 初始化 Sidebar
+  const sidebarCtx = new SidebarCtx()
+  sidebarCtx.curtSite = conf.site!
+
+  const sidebar = new SidebarRoot(artalk.ctx, sidebarCtx)
+
+  // 装载元素
+  document.body.appendChild(sidebar.$el)
+
+  // 暗黑模式
+  if (conf.darkMode) sidebar.$el.classList.add('atk-dark-mode')
+
+  // 初始化侧边栏
+  await sidebar.init()
+
+  // 打开 View
+  let viewName = SidebarRoot.DEFAULT_VIEW
+  let viewParams = {}
+  if (view) {
+    const splitted = view.split('|')
+    if (splitted[0]) viewName = splitted[0]
+    if (splitted[1]) viewParams = JSON.parse(splitted[1])
+  }
+
+  sidebar.switchView(viewName)
+
+  if (viewName === 'sites') {
+    // TODO 炮打翻山...
+    artalk.ctx.trigger('sidebar-sites-create-form', viewParams)
+  }
+
+  console.log('hello artalk-sidebar')
+}
+
+export class SidebarCtx {
+  reload!: () => void
+  curtSite!: string
+}

packages/artalk-sidebar/src/sidebar-component.ts

@@ -0,0 +1,13 @@
+import ArtalkComponent from 'artalk/src/lib/component'
+import Context from 'artalk/src/context'
+import { SidebarCtx } from './main'
+
+export default class Component extends ArtalkComponent {
+  sidebar: SidebarCtx
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx)
+
+    this.sidebar = sidebar
+  }
+}

packages/artalk-sidebar/src/sidebar-root.ts

@@ -1,13 +1,14 @@
 import './style/sidebar.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment  from 'artalk/src/components/comment'
 import { SiteData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
 
+import Component from './sidebar-component'
+import { SidebarCtx } from './main'
 import SidebarHTML from './sidebar.html?raw'
 
 import SidebarView from './sidebar-view'
@@ -20,18 +21,18 @@ import SettingView from './sidebar-views/setting-view'
 
 import MD5 from './lib/md5'
 
-const DEFAULT_VIEW = 'comments'
 const REGISTER_VIEWS: (typeof SidebarView)[] = [
   CommentsView, PagesView, SitesView, TransferView, // SettingView
 ]
 
-export default class Sidebar extends Component {
+export default class SidebarRoot extends Component {
+  public static DEFAULT_VIEW = 'comments'
+
   public $header: HTMLElement
   public $headerMenu: HTMLElement
   public $title: HTMLElement
   public $avatar: HTMLElement
   public $siteLogo?: HTMLElement
-  public $closeBtn: HTMLElement
   public $nav: HTMLElement
   public $curtViewBtn: HTMLElement
   public $curtViewBtnIcon: HTMLElement
@@ -42,8 +43,7 @@ export default class Sidebar extends Component {
   public siteSwitcher?: SiteListFloater
 
   private get isAdmin() { return this.ctx.user.data.isAdmin }
-  public curtSite?: string
-  public curtView: string = DEFAULT_VIEW
+  public curtView?: string
   public get curtViewInstance() {
     return this.curtView ? this.viewInstances[this.curtView] : undefined
   }
@@ -53,8 +53,8 @@ export default class Sidebar extends Component {
 
   private viewSwitcherShow = false
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     // initial elements
     this.$el = Utils.createElement(SidebarHTML)
@@ -62,7 +62,6 @@ export default class Sidebar extends Component {
     this.$headerMenu = this.$header.querySelector('.atk-menu')!
     this.$title = this.$header.querySelector('.atk-sidebar-title')!
     this.$avatar = this.$header.querySelector('.atk-avatar')!
-    this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
 
     this.$nav = this.$el.querySelector('.atk-sidebar-nav')!
     this.$curtViewBtn = this.$nav.querySelector('.akt-curt-view-btn')!
@@ -76,14 +75,10 @@ export default class Sidebar extends Component {
     // init UI
     this.initViewSwitcher()
 
-    this.$closeBtn.onclick = () => {
-      this.hide()
+    // 重载操作
+    this.sidebar.reload = () => {
+      this.init()
     }
-
-    // event
-    this.ctx.on('sidebar-show', () => (this.show()))
-    this.ctx.on('sidebar-hide', () => (this.hide()))
-    this.ctx.on('user-changed', () => { this.firstShow = true })
   }
 
   /** 初始化 view 切换器 */
@@ -130,89 +125,89 @@ export default class Sidebar extends Component {
     this.viewSwitcherShow = !this.viewSwitcherShow
   }
 
-  private firstShow = true
-
-  /** 显示 */
-  public async show() {
-    // 第一次加载
-    if (this.firstShow) {
-      ///////////////////
-      //// IMPORTANT ////
-      ///////////////////
-
-      // 用户权限检测
-      if (this.isAdmin) {
-        // 是管理员
-        this.$title.innerText = '控制中心'
-        this.$curtViewBtn.style.display = ''
-
-        if (!this.siteSwitcher) {
-          // 初始化站点切换器
-          this.siteSwitcher = new SiteListFloater(this.ctx, {
-            onSwitchSite: (siteName) => { this.switchSite(siteName) },
-            onClickSitesViewBtn: () => { this.switchView('sites') }
-          })
-          this.$viewWrap.before(this.siteSwitcher.$el)
-          this.$avatar.onclick = (evt) => {
-            if (!this.isAdmin) return
-            this.siteSwitcher?.show(evt.target as any)
-          }
+  /** 初始化 */
+  public async init() {
+     // 用户权限检测
+     if (this.isAdmin) {
+      // 是管理员
+      this.$title.innerText = '控制中心'
+      this.$curtViewBtn.style.display = ''
 
+      if (!this.siteSwitcher) {
+        // 初始化站点切换器
+        this.siteSwitcher = new SiteListFloater(this.ctx, {
+          onSwitchSite: (siteName) => {
+            this.switchSite(siteName)
+          },
+          onClickSitesViewBtn: () => {
+            this.switchView('sites')
+          },
+        })
+        this.$viewWrap.before(this.siteSwitcher.$el)
+        this.$avatar.onclick = (evt) => {
+          if (!this.isAdmin) return
+          this.siteSwitcher?.show(evt.target as any)
         }
-
-        this.curtSite = this.conf.site
-
-        Ui.showLoading(this.$el)
-        try {
-          await this.siteSwitcher!.load(this.curtSite)
-        } catch (err: any) {
-          const $err = Utils.createElement(`<span>加载失败：${err.msg || '网络错误'}<br/></span>`)
-          const $retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
-          $err.appendChild($retryBtn)
-          $retryBtn.onclick = () => { Ui.setError(this.$el, null); this.show() }
-          Ui.setError(this.$el, $err)
-          return
-        } finally { Ui.hideLoading(this.$el) }
-
-        // 站点图像
-        this.$avatar.innerHTML = ''
-        this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
-        this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
-        this.$avatar.append(this.$siteLogo)
-      } else {
-        // 不是管理员
-        this.$title.innerText = '通知中心'
-        this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
-        this.curtSite = this.conf.site // 第一次 show 使用当前站点数据
-
-        // 头像
-        const $avatarImg = document.createElement('img') as HTMLImageElement
-        $avatarImg.src = Utils.getGravatarURL(this.ctx, MD5(this.ctx.user.data.email.toLowerCase()))
-        this.$avatar.innerHTML = ''
-        this.$avatar.append($avatarImg)
       }
 
-      this.switchView(DEFAULT_VIEW) // 打开默认 view
-      this.firstShow = false
-    }
-  }
+      Ui.showLoading(this.$el)
+      try {
+        await this.siteSwitcher!.load(this.sidebar.curtSite)
+      } catch (err: any) {
+        const $err = Utils.createElement(
+          `<span>加载失败：${err.msg || '网络错误'}<br/></span>`
+        )
+        const $retryBtn = Utils.createElement(
+          '<span style="cursor:pointer;">点击重新获取</span>'
+        )
+        $err.appendChild($retryBtn)
+        $retryBtn.onclick = () => {
+          Ui.setError(this.$el, null)
+          this.init()
+        }
+        Ui.setError(this.$el, $err)
+        return
+      } finally {
+        Ui.hideLoading(this.$el)
+      }
 
-  public async hide() {
-    console.log("hide")
+      // 站点图像
+      this.$avatar.innerHTML = ''
+      this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
+      this.$siteLogo.innerText = (this.sidebar.curtSite || '').substring(0, 1)
+      this.$avatar.append(this.$siteLogo)
+    } else {
+      // 不是管理员
+      this.$title.innerText = '通知中心'
+      this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
+      this.sidebar.curtSite = this.conf.site // 第一次 show 使用当前站点数据
+
+      // 头像
+      const $avatarImg = document.createElement('img') as HTMLImageElement
+      $avatarImg.src = Utils.getGravatarURL(
+        this.ctx,
+        MD5(this.ctx.user.data.email.toLowerCase())
+      )
+      this.$avatar.innerHTML = ''
+      this.$avatar.append($avatarImg)
+    }
   }
 
   /** 切换 View */
   public switchView(viewName: string) {
+    if (!REGISTER_VIEWS.find(o => o.viewName === viewName))
+      throw new Error(`Sidebar View "${viewName}" not found`)
+
     let view = this.viewInstances[viewName]
     if (!view) {
       // 初始化 View
       const View = REGISTER_VIEWS.find(o => o.viewName === viewName)!
-      view = new View(this.ctx, this.$viewWrap)
+      view = new View(this.ctx, this.sidebar, this.$viewWrap)
       this.viewInstances[viewName] = view
     }
 
     // init view
-    view.mount(this.curtSite!)
+    view.mount()
 
     this.curtView = viewName
     this.curtTab = view.viewActiveTab
@@ -250,7 +245,7 @@ export default class Sidebar extends Component {
 
       // 切换 tab
       $tab.onclick = () => {
-        if (view.switchTab(tabName, this.curtSite!) === false) { return }
+        if (view.switchTab(tabName) === false) { return }
         this.$navTabs.querySelectorAll('.atk-active').forEach(e => e.classList.remove('atk-active'))
         $tab.classList.add('atk-active')
         this.curtTab = tabName
@@ -260,9 +255,9 @@ export default class Sidebar extends Component {
 
   /** 切换站点 */
   private switchSite(siteName: string) {
-    this.curtSite = siteName
+    this.sidebar.curtSite = siteName
     const curtView = this.curtViewInstance
-    curtView?.switchTab(this.curtTab!, siteName)
-    if (this.$siteLogo) this.$siteLogo.innerText = this.curtSite.substr(0, 1)
+    curtView?.switchTab(this.curtTab!)
+    if (this.$siteLogo) this.$siteLogo.innerText = this.sidebar.curtSite.substring(0, 1)
   }
 }

packages/artalk-sidebar/src/sidebar-view.ts

@@ -1,7 +1,8 @@
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
+import Component from './sidebar-component'
+import { SidebarCtx } from './main'
 
 export default class SidebarView extends Component {
   static viewName = ''
@@ -13,14 +14,14 @@ export default class SidebarView extends Component {
 
   protected $parent: HTMLElement
 
-  constructor(ctx: Context, $parent: HTMLElement) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx, $parent: HTMLElement) {
+    super(ctx, sidebar)
 
     this.$parent = $parent
     this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
   }
 
-  mount(siteName: string) {}
+  mount() {}
 
-  switchTab(tab: string, siteName: string): boolean|void {}
+  switchTab(tab: string): boolean|void {}
 }

packages/artalk-sidebar/src/sidebar-views/comments-view.ts

@@ -13,7 +13,7 @@ export default class MessageView extends SidebarView {
 
   list!: ListLite
 
-  mount(siteName: string) {
+  mount() {
     // tabs
     if (this.ctx.user.data.isAdmin) {
       this.viewTabs = {
@@ -39,7 +39,8 @@ export default class MessageView extends SidebarView {
     this.list.pageMode = 'pagination'
     this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
     this.list.renderComment = (comment) => {
-      comment.setOpenURL(`${comment.data.page_key}#atk-comment-${comment.data.id}`)
+      const pageURL = comment.data.page_url
+      comment.setOpenURL(`${pageURL}#atk-comment-${comment.data.id}`)
       comment.onReplyBtnClick = () => {
         if (this.ctx.conf.editorTravel === true) {
           this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: false})
@@ -50,21 +51,21 @@ export default class MessageView extends SidebarView {
       }
     }
     this.list.paramsEditor = (params) => {
-      params.site_name = siteName
+      params.site_name = this.sidebar.curtSite
     }
 
     this.$el.innerHTML = ''
     this.$el.append(this.list.$el)
 
-    this.switchTab(this.viewActiveTab, siteName)
+    this.switchTab(this.viewActiveTab)
   }
 
-  switchTab(tab: string, siteName: string): boolean|void {
+  switchTab(tab: string): boolean|void {
     //console.log(tab, siteName)
     this.viewActiveTab = tab
     this.list.paramsEditor = (params) => {
       params.type = tab as any
-      params.site_name = siteName
+      params.site_name = this.sidebar.curtSite
     }
     this.list.fetchComments(0)
 

packages/artalk-sidebar/src/sidebar-views/pages-view.ts

@@ -1,13 +1,12 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment from 'artalk/src/components/comment'
 import Pagination, { PaginationConf } from 'artalk/src/components/pagination'
 
-import PageList from '../admin/page-list'
 import SidebarView from '../sidebar-view'
+import PageList from '../admin/page-list'
 
 const PAGE_SIZE = 20
 
@@ -22,26 +21,26 @@ export default class PagesView extends SidebarView {
   pageList!: PageList
   pagination!: Pagination
 
-  mount(siteName: string) {
+  mount() {
     if (!this.pageList) {
-      this.pageList = new PageList(this.ctx)
+      this.pageList = new PageList(this.ctx, this.sidebar)
       this.$el.append(this.pageList.$el)
     }
 
-    this.switchTab(this.viewActiveTab, siteName)
+    this.switchTab(this.viewActiveTab)
   }
 
-  switchTab(tab: string, siteName: string): boolean|void {
-    this.reqPages(siteName, 0)
+  switchTab(tab: string): boolean|void {
+    this.reqPages(0)
   }
 
-  async reqPages(siteName: string, offset: number) {
-    this.pageList.clearAll()
+  async reqPages(offset: number) {
+    this.pageList.initPageList()
     ;(this.$el.parentNode as any)?.scrollTo(0, 0)
 
     Ui.showLoading(this.$el)
 
-    const data = await new Api(this.ctx).pageGet(siteName, offset, PAGE_SIZE)
+    const data = await new Api(this.ctx).pageGet(this.sidebar.curtSite, offset, PAGE_SIZE)
     this.pageList.importPages(data.pages || [])
 
     Ui.hideLoading(this.$el)
@@ -50,7 +49,7 @@ export default class PagesView extends SidebarView {
       this.pagination = new Pagination(data.total, {
         pageSize: PAGE_SIZE,
         onChange: (o: number) => {
-          this.reqPages(siteName, o)
+          this.reqPages(o)
         }
       })
 

packages/artalk-sidebar/src/sidebar-views/setting-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
 
@@ -15,8 +14,8 @@ export default class SettingView extends SidebarView {
   viewTabs = {}
   viewActiveTab = ''
 
-  mount(siteName: string) {
+  mount() {
   }
 
-  switchTab(tab: string, siteName: string) {}
+  switchTab(tab: string) {}
 }

packages/artalk-sidebar/src/sidebar-views/sites-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
 
@@ -17,16 +16,16 @@ export default class SitesView extends SidebarView {
 
   siteList!: SiteList
 
-  mount(siteName: string) {
+  mount() {
     if (!this.siteList) {
-      this.siteList = new SiteList(this.ctx)
+      this.siteList = new SiteList(this.ctx, this.sidebar)
       this.$el.append(this.siteList.$el)
     }
 
     this.reqSites()
   }
 
-  switchTab(tab: string, siteName: string) {
+  switchTab(tab: string) {
     this.reqSites()
   }
 

packages/artalk-sidebar/src/sidebar-views/transfer-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment from 'artalk/src/components/comment'
@@ -8,7 +7,7 @@ import Comment from 'artalk/src/components/comment'
 import SiteList from '../admin/site-list'
 import SidebarView from '../sidebar-view'
 
-export default class TransferView extends SidebarView {ß
+export default class TransferView extends SidebarView {
   static viewName = 'transfer'
   static viewTitle = '迁移'
   static viewAdminOnly = true
@@ -19,11 +18,11 @@ export default class TransferView extends SidebarView {ß
   }
   viewActiveTab = 'import'
 
-  mount(siteName: string) {
-    this.switchTab('import', siteName)
+  mount() {
+    this.switchTab('import')
   }
 
-  switchTab(tab: string, siteName: string) {
+  switchTab(tab: string) {
     if (tab === 'import') {
       this.initImport()
     } else if (tab === 'export') {
@@ -42,8 +41,18 @@ export default class TransferView extends SidebarView {ß
     </div>
     <div class="atk-form">
     <div class="atk-label atk-data-file-label">Artrans 数据文件</div>
-    <input type="file" name="AtkDataFile" accept="text/plain,.json,.artrans">
-    <span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
+    <div class="atk-file-upload-group">
+      <div class="atk-file-input-wrap atk-fade-in">
+        <input type="file" name="AtkDataFile" accept=".artrans">
+        <span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
+      </div>
+      <div class="atk-uploading-wrap atk-fade-in">
+        <div class="atk-progress">
+          <div class="atk-bar"></div>
+        </div>
+        <div class="atk-status">上传中 <span class="atk-curt">0%</span>... <span class="atk-abort">取消</span></div>
+      </div>
+    </div>
     <div class="atk-label">目标站点名</div>
     <input type="text" name="AtkSiteName" placeholder="输入内容..." autocomplete="off">
     <div class="atk-label">目标站点 URL</div>
@@ -55,16 +64,139 @@ export default class TransferView extends SidebarView {ß
     </div>`
 
     const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
-    const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
-    const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
+
+    const $fileWrap = $form.querySelector<HTMLElement>('.atk-file-input-wrap')!
+    const $file = $fileWrap.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
+    const $fileDesc = $fileWrap.querySelector<HTMLElement>('.atk-desc')!
+    const fileDescOrgHTML = $fileDesc.innerHTML
+    const restoreFileInput = () => {
+      $fileDesc.innerHTML = fileDescOrgHTML
+      $file.value = ''
+    }
+
+    // 文件上传
+    const $uploadingWrap = $form.querySelector<HTMLElement>('.atk-uploading-wrap')!
+    const $uploadProgress = $uploadingWrap.querySelector<HTMLElement>('.atk-progress')!
+    const $uploadProgressBar = $uploadProgress.querySelector<HTMLElement>('.atk-bar')!
+    const $uploadStatus = $uploadingWrap.querySelector<HTMLElement>('.atk-status')!
+    const $uploadStatusCurt = $uploadStatus.querySelector<HTMLElement>('.atk-curt')!
+    const $uploadAbortBtn = $uploadStatus.querySelector<HTMLElement>('.atk-abort')!
+
     const $siteName = $form.querySelector<HTMLInputElement>('[name="AtkSiteName"]')!
     const $siteURL = $form.querySelector<HTMLInputElement>('[name="AtkSiteURL"]')!
     const $payload = $form.querySelector<HTMLTextAreaElement>('[name="AtkPayload"]')!
     const $submitBtn = $form.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
     const setError = (msg: string) => window.alert(msg)
 
+    const showUploading = () => {
+      $fileWrap.style.display = 'none'
+      $uploadingWrap.style.display = ''
+      setUploading(0)
+    }
+
+    const hideUploading = () => {
+      $fileWrap.style.display = ''
+      $uploadingWrap.style.display = 'none'
+    }
+
+    const setUploading = (progress: number) => {
+      $uploadProgressBar.style.width = `${progress}%`
+      $uploadStatusCurt.innerText = `${progress}%`
+    }
+
+    let UploadedFilename: string = ''
+
+    hideUploading()
+
+    const startUploadFile = async () => {
+      UploadedFilename = ''
+
+      const xhr = new XMLHttpRequest()
+
+      // 进度条
+      xhr.upload.addEventListener('progress', (evt) => {
+        if (evt.loaded === evt.total) {
+          // 上传完毕
+          setUploading(100)
+          return
+        }
+
+        const fileSize = $file.files![0].size
+        if (evt.loaded <= fileSize) {
+          // 正在上传
+          const percent = Math.round(evt.loaded / fileSize * 100)
+          setUploading(percent)
+        }
+      })
+
+      // 创建上传参数
+      const formData = new FormData()
+      formData.append('file', $file.files![0])
+      formData.append('token', this.ctx.user.data.token)
+
+      // 开始上传
+      xhr.open('post', `${this.ctx.conf.server}/api/admin/import-upload`)
+      xhr.timeout = 2*60*1000 // 2min
+      xhr.send(formData)
+
+      // 上传成功事件
+      xhr.onload = () => {
+        const setErr = (msg: string): void => {
+          restoreFileInput()
+          hideUploading()
+          alert(`文件上传失败，${msg}`)
+        }
+
+        if (xhr.status !== 200) {
+          setErr(`响应状态码：${xhr.status}`)
+          return
+        }
+
+        let json: any
+        try {
+          json = JSON.parse(xhr.response)
+        } catch (err) {
+          console.error(err)
+          setErr(`JSON 解析失败：${err}`)
+          return
+        }
+
+        if (!json.success || !json.data.filename) {
+          setErr(`响应：${xhr.response}`)
+          return
+        }
+
+        $fileDesc.innerHTML = '文件已成功上传，可以开始导入'
+        UploadedFilename = json.data.filename
+        hideUploading()
+      }
+
+      // 中止上传
+      $uploadAbortBtn.onclick = () => {
+        xhr.abort()
+        restoreFileInput()
+        hideUploading()
+      }
+    }
+
+    // 文件上传操作
+    $file.onchange = () => {
+      if (!$file.files || $file.files.length === 0) return
+
+      showUploading()
+      setTimeout(async () => {
+        await startUploadFile()
+        hideUploading()
+      }, 80)
+    }
+
+    // 开始导入按钮
     $submitBtn.onclick = () => {
-      const dataType = 'artrans'
+      if (!UploadedFilename) {
+        setError(`请先上传 Artrans 数据文件`)
+        return
+      }
+
       const siteName = $siteName.value.trim()
       const siteURL = $siteURL.value.trim()
       const payload = $payload.value.trim()
@@ -80,7 +212,7 @@ export default class TransferView extends SidebarView {ß
           return
         }
 
-        if (rData !instanceof Object) {
+        if (typeof rData !== 'object' || Array.isArray(rData)) {
           setError(`Payload 需为 JSON 对象`)
           return
         }
@@ -89,7 +221,7 @@ export default class TransferView extends SidebarView {ß
       if (siteURL) rData.t_url = siteURL
 
       // 创建导入会话
-      const createSession = (dataStr?: string) => {
+      const createSession = (filename?: string) => {
         const $logWrap = this.$el.querySelector<HTMLElement>('.atk-log-wrap')!
         const $log = $logWrap.querySelector<HTMLElement>('.atk-log')!
         const $backBtn = this.$el.querySelector<HTMLElement>('.atk-log-back-btn')!
@@ -100,9 +232,12 @@ export default class TransferView extends SidebarView {ß
         $backBtn.onclick = () => {
           $logWrap.style.display = 'none'
           $form.style.display = ''
+          restoreFileInput()
+          UploadedFilename = ''
+          this.sidebar.reload()
         }
 
-        if (dataStr) rData.json_data = dataStr
+        if (filename) rData.json_file = filename
 
         // 创建 iframe
         const frameName = `f_${+new Date()}`
@@ -113,7 +248,6 @@ export default class TransferView extends SidebarView {ß
         $log.append($frame)
 
         const formParams: {[k: string]: string} = {
-          type: dataType,
           payload: JSON.stringify(rData),
           token: this.ctx.user.data.token || '',
         }
@@ -122,7 +256,7 @@ export default class TransferView extends SidebarView {ß
         const $formTmp = document.createElement('form')
         $formTmp.style.display = 'none'
         $formTmp.setAttribute('method', 'post')
-        $formTmp.setAttribute('action', `${this.ctx.conf.server}/admin/import`)
+        $formTmp.setAttribute('action', `${this.ctx.conf.server}/api/admin/import`)
         $formTmp.setAttribute("target", frameName)
 
         Object.entries(formParams).forEach(([key, val]) => {
@@ -138,20 +272,8 @@ export default class TransferView extends SidebarView {ß
         $formTmp.remove()
       }
 
-      const reader = new FileReader()
-      reader.onload = () => {
-        const data = String(reader.result)
-        createSession(data)
-      }
-
-      // 是否已选择文件
-      if ($dataFile.files?.length) {
-        // 先读取文件
-        reader.readAsText($dataFile.files[0])
-      } else {
-        // 直接开始会话
-        createSession()
-      }
+      // 直接开始会话
+      createSession(UploadedFilename)
     }
   }
 
@@ -160,7 +282,7 @@ export default class TransferView extends SidebarView {ß
 
     try {
       const d = await new Api(this.ctx).export()
-      this.download(`artrans-${this.getYmdHisFilename()}.json`, d)
+      this.download(`backup-${this.getYmdHisFilename()}.artrans`, d)
     } catch (err: any) {
       console.log(err)
       window.alert(`${String(err)}`)

packages/artalk-sidebar/src/style/page-list.less

@@ -21,11 +21,13 @@
       color: var(--at-color-font);
       font-size: 21px;
       margin-bottom: 10px;
+      cursor: pointer;
     }
 
     .atk-sub {
       color: var(--at-color-sub);
       font-size: 14px;
+      cursor: pointer;
     }
   }
 
@@ -33,6 +35,32 @@
     .atk-list-text-actions();
   }
 
+  .atk-header-action-bar {
+    display: block;
+    overflow: hidden;
+    padding: 10px 15px 0 15px;
+
+    & > span {
+      display: inline-block;
+      padding: 2px 10px;
+      cursor: pointer;
+      font-size: 13px;
+
+      i {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+        background-color: var(--at-color-meta);
+        margin-right: 4px;
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+
   .atk-page-actions {
     .atk-list-btn-actions();
   }

packages/artalk-sidebar/src/style/sidebar.less

@@ -317,13 +317,14 @@
       }
 
       &[type="file"] {
-        border-radius: 2px;
         background: transparent;
         border: 2px solid var(--at-color-border);
         cursor: pointer;
         position: relative;
-        padding: 0 15px;
-        margin-bottom: 20px;
+        padding: 6px 15px;
+        line-height: 0;
+        margin-bottom: 17px;
+        border-radius: 50px;
 
         &:hover {
           background: var(--at-color-bg-light);
@@ -336,11 +337,16 @@
         color: #000;
         border: 0;
         border-right: 2px solid #eee;
-        padding: 0 20px 0 5px;
+        border-left: 0;
+        border-top: 0;
+        border-bottom: 0;
+        padding: 0 20px 0 10px;
         line-height: 25px;
         margin-right: 15px;
         cursor: pointer;
         transition: .2s ease;
+        -webkit-appearance: none;
+        border-radius: 0;
       }
     }
 
@@ -380,14 +386,59 @@
       cursor: pointer;
       outline: none;
       padding: 0 20px;
-      border-radius: 4px;
+      border-radius: 50px;
       margin: 0 5px;
       width: 100%;
+      user-select: none;
     }
 
     input, select, button {
       font-size: 15px;
     }
+
+    .atk-file-upload-group {
+      height: 100px;
+      overflow: hidden;
+    }
+
+    .atk-uploading-wrap {
+      .atk-progress {
+        width: 100%;
+        height: 12px;
+        display: block;
+        overflow: hidden;
+        background: #eee;
+        border-radius: 100px;
+        margin-bottom: 7px;
+        margin-top: 20px;
+
+        .atk-bar {
+          transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+          background: var(--at-color-main);
+          height: 100%;
+          width: 0%;
+          opacity: 0.7;
+        }
+      }
+
+      .atk-status {
+        color: var(--at-color-meta);
+        font-size: 14px;
+
+        .atk-curt {
+          color: var(--at-color-main)
+        }
+
+        .atk-abort {
+          cursor: pointer;
+          float: right;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+      }
+    }
   }
 
   .atk-log-wrap {

packages/artalk-sidebar/src/style/site-list.less

@@ -111,6 +111,7 @@
           display: inline-block;
           font-size: 23px;
           position: relative;
+          line-height: 1.6em;
 
           &:after {
             content: ' ';
@@ -130,6 +131,7 @@
           margin-top: 6px;
           flex-wrap: wrap;
           min-height: 23px;
+          margin-bottom: 15px;
 
           .atk-url-item {
             background: var(--at-color-bg-grey);
@@ -165,7 +167,7 @@
       position: relative;
       display: flex;
       flex-direction: row;
-      padding: 20px 30px 6px 35px;
+      padding: 0 30px 6px 35px;
       padding-bottom: 10px;
 
       .atk-site-text-actions {

packages/artalk-sidebar/tsconfig.json

@@ -1,23 +1,8 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "lib": ["esnext", "dom"],
-    "moduleResolution": "node",
-    "strict": true,
-    "sourceMap": true,
-    "experimentalDecorators": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]

packages/artalk-sidebar/types/index.d.ts

@@ -1,3 +1,3 @@
-import ArtalkSidebar from '../src/artalk-sidebar'
+import ArtalkSidebar from '../src/main'
 
 export default ArtalkSidebar

packages/artalk-sidebar/types/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

packages/artalk-sidebar/vite.config.ts

@@ -13,29 +13,7 @@ export default defineConfig({
   build: {
     target: 'es2015',
     outDir: resolve(__dirname, "dist"),
-    minify: 'terser',
-    // lib: {
-    //   entry: resolve(__dirname, 'src/main.ts'),
-    //   name: 'ArtalkSidebar',
-    //   fileName: (format) => ((format == "umd") ? 'ArtalkSidebar.js' : `ArtalkSidebar.${format}.js`),
-    //   formats: ["es", "umd", "iife"]
-    // },
-    rollupOptions: {
-      // 确保外部化处理那些你不想打包进库的依赖
-      // external: ['artalk'],
-      output: {
-        assetFileNames: assetInfo => {
-          if (/\.css$/.test(assetInfo.name)) {
-            return 'ArtalkSidebar.css'
-          }
-          return "[name].[ext]"
-        },
-        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
-        globals: {
-          artalk: 'Artalk'
-        }
-      }
-    }
+    minify: 'terser'
   },
   plugins: [tsconfigPaths()],
   css: {

packages/artalk/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <title>Artalk DEMO</title>
@@ -16,7 +16,8 @@
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
+    .desc { font-size:12px;color:#697182 }
+    body.dark-mode .desc { color:#848da3 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
     @media only screen and (max-width: 768px) {
@@ -26,20 +27,30 @@
     }
     .float-btn { user-select: none;bottom: 25px;display: block;cursor: pointer;text-align: center;width: 60px;height: 37px;line-height: 37px;font-size: 13px;color: #757e91;background: #fff;opacity: 0.8;border-radius: 4px;border: 1px solid #eceff2;position: fixed; }
     .to-night { z-index: 99999;left: 25px;background: #1e2223;color: #fff; }
-    body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
+    body.dark-mode .to-night { background: #006fd9;border: 1px solid #2d3235;color: #fff; }
     .to-top { right: 25px; }
   </style>
+  <!--<link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/arta.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>-->
+
+  <!-- For mobile testing -->
+  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+  <script>
+    // VConsole will be exported to `window.VConsole` by default.
+    var vConsole = new window.VConsole();
+  </script>
 </head>
 <body>
   <div class="card billboard atk-fade-in">
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
     <div class="desc">一款简洁的自托管评论系统 <span id="ArtalkPV"></span></div>
     <div class="social">
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package version" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package download number" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/commits/master" aria-label="last commit" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" aria-label="open source license" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk" aria-label="GitHub star number" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
   <div class="card atk-fade-in">
@@ -54,8 +65,9 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
+      //useBackendConf: true,
     });
 
     window.artalk = artalk;

packages/artalk/package.json

@@ -1,7 +1,8 @@
 {
   "name": "artalk",
-  "version": "2.1.7",
-  "license": "GPL-3.0",
+  "version": "2.2.8",
+  "backendMinVersion": "2.1.4",
+  "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
@@ -24,11 +25,11 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "yarn lint && vite build",
+    "build": "pnpm lint && vite build",
     "build:demo": "vite build --config vite-demo.config.ts",
     "serve": "vite preview",
     "deploy": "gh-pages -d deploy",
-    "predeploy": "yarn run build && yarn run build:demo && yarn run copy:deploy",
+    "predeploy": "pnpm build && pnpm build:demo && pnpm copy:deploy",
     "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
     "lint": "eslint --ext .js,.ts src"
   },

packages/artalk/src/api/index.ts

@@ -1,5 +1,6 @@
-import Context from '../context'
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 
@@ -9,7 +10,7 @@ export default class Api {
 
   constructor (ctx: Context) {
     this.ctx = ctx
-    this.baseURL = ctx.conf.server
+    this.baseURL = `${ctx.conf.server}/api`
   }
 
   // ============================
@@ -45,7 +46,7 @@ export default class Api {
       content: comment.content,
       rid: comment.rid,
       page_key: comment.page_key,
-      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA (针对 Win11)
+      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA
     }
 
     if (comment.page_title) params.page_title = comment.page_title
@@ -117,6 +118,15 @@ export default class Api {
     }
   }
 
+  /** 用户 · 登录状态 */
+  public async loginStatus() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/login-status`, {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email
+    })
+    return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
+  }
+
   // ============================
   //  页面 Page
   // ============================
@@ -158,13 +168,14 @@ export default class Api {
   }
 
   /** 页面 · 数据更新 */
-  public async pageFetch(id: number) {
-    const params: any = {
-      id,
-    }
+  public async pageFetch(id?: number, siteName?: string, getStatus?: boolean) {
+    const params: any = {}
+    if (id) params.id = id
+    if (siteName) params.site_name = siteName
+    if (getStatus) params.get_status = getStatus
 
     const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-fetch`, params)
-    return (d.page as PageData)
+    return (d as any)
   }
 
   // ============================
@@ -264,19 +275,79 @@ export default class Api {
     return p.pv as number
   }
 
+  /** 图片上传 */
+  public async imgUpload(file: File) {
+    const params: any = {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email,
+      page_key: this.ctx.conf.pageKey,
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const form = ToFormData(params)
+    form.set('file', file)
+
+    const init: RequestInit = {
+      method: 'POST',
+      body: form
+    }
+
+    const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
+    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+  }
+
+  /** 获取配置 */
+  public async conf() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/conf`)
+    const conf = (data.frontend_conf || {}) as ArtalkConfig
+
+    // Patch: `emoticons` config string to json
+    if (conf.emoticons && typeof conf.emoticons === "string") {
+      conf.emoticons = conf.emoticons.trim()
+      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+        conf.emoticons = JSON.parse(conf.emoticons) // pase json
+      }
+    }
+
+    return conf
+  }
+
   // ============================
   //  验证码
   // ============================
 
   /** 验证码 · 获取 */
   public async captchaGet() {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
     return (data.img_data || '') as string
   }
 
   /** 验证码 · 检验 */
   public async captchaCheck(value: string) {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
     return (data.img_data || '') as string
   }
+
+  /** 验证码 · 状态 */
+  public async captchaStatus() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/status`)
+    return (data || { is_pass: false }) as { is_pass: boolean }
+  }
+
+  // ============================
+  //  管理员缓存操作
+  // ============================
+
+  /** 缓存清除 */
+  public cacheFlushAll() {
+    const params: any = { flush_all: true }
+    return POST(this.ctx, `${this.baseURL}/admin/cache-flush`, params)
+  }
+
+  /** 缓存预热 */
+  public cacheWarmUp() {
+    const params: any = {}
+    return POST(this.ctx, `${this.baseURL}/admin/cache-warm`, params)
+  }
 }

packages/artalk/src/api/request.ts

@@ -43,6 +43,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
       json = await (new Promise<any>((resolve, reject) => {
         ctx.trigger('checker-captcha', {
           imgData: json.data.img_data,
+          iframe: json.data.iframe,
           onSuccess: () => {
             recall(resolve, reject)
           },

packages/artalk/src/artalk.ts

@@ -1,7 +1,8 @@
 import './style/main.less'
 
-import Context from './context'
 import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Handler } from '~/types/event'
+import Context from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
@@ -9,9 +10,10 @@ import Editor from './components/editor'
 import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
-import { GetLayerWrap } from './components/layer'
-import { EventPayloadMap, Handler } from '~/types/event'
+import Layer, { GetLayerWrap } from './components/layer'
 import Api from './api'
+import * as Utils from './lib/utils'
+import * as Ui from './lib/ui'
 
 /**
  * Artalk
@@ -20,33 +22,43 @@ import Api from './api'
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
 
-  public ctx: Context
-  public conf: ArtalkConfig
-  public $root: HTMLElement
+  public ctx!: Context
+  public conf!: ArtalkConfig
+  public $root!: HTMLElement
 
-  public checkerLauncher: CheckerLauncher
-  public editor: Editor
-  public list: List
-  public sidebarLayer: SidebarLayer
+  public checkerLauncher!: CheckerLauncher
+  public editor!: Editor
+  public list!: List
+  public sidebarLayer!: SidebarLayer
 
   constructor (customConf: ArtalkConfig) {
     // 配置
-    this.conf = { ...Artalk.defaults, ...customConf }
-    this.conf.server = this.conf.server.replace(/\/$/, '')
+    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
+    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
-      this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
+      // @link http://bl.ocks.org/abernier/3070589
+      this.conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!this.conf.pageTitle) {
+      this.conf.pageTitle = `${document.title}`
     }
 
     // 装载元素
-    try {
-      const $root = document.querySelector<HTMLElement>(this.conf.el)
-      if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
-      this.$root = $root
-    } catch (e) {
-      console.error(e)
-      throw new Error('Please check your Artalk `el` config.')
+    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
+      this.$root = this.conf.el
+    } else {
+      try {
+        const $root = document.querySelector<HTMLElement>(this.conf.el)
+        if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+        this.$root = $root
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
     }
 
     // Context 初始化
@@ -55,10 +67,27 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
-    this.initDarkMode()
 
+    // 初始化组件
+    if (this.conf.useBackendConf) {
+      // 复用后端的配置
+      // @ts-ignore
+      return (async () => {
+        await this.loadConfRemote()
+        this.initCore()
+        return this // Promise<Artalk>
+      })()
+    }
+
+    this.initCore()
+  }
+
+  private initCore() {
     // 组件初始化
+    this.initLayer()
+    this.initDarkMode()
     this.checkerLauncher = new CheckerLauncher(this.ctx)
+    Utils.initMarked(this.ctx) // 初始化 marked
 
     // 编辑器
     this.editor = new Editor(this.ctx)
@@ -80,6 +109,24 @@ export default class Artalk {
 
     // 其他
     this.initPV()
+
+    // 插件初始化
+    Artalk.Plugins.forEach(plugin => {
+      if (typeof plugin === 'function') {
+        plugin(this.ctx)
+      }
+    })
+  }
+
+  /** 获取远程配置 */
+  private async loadConfRemote() {
+    Ui.showLoading(this.$root)
+    let backendConf = {}
+    try {
+      backendConf = await (new Api(this.ctx)).conf()
+    } catch (err) { console.error("配置远程获取失败", err) }
+    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
+    Ui.hideLoading(this.$root)
   }
 
   /** 事件绑定 · 初始化 */
@@ -124,6 +171,13 @@ export default class Artalk {
     this.list.fetchComments(0)
   }
 
+  /** Layer 初始化 */
+  initLayer() {
+    // 记录页面原始 Styles
+    Layer.BodyOrgOverflow = document.body.style.overflow
+    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  }
+
   /** 暗黑模式 · 初始化 */
   public initDarkMode() {
     const darkModeClassName = 'atk-dark-mode'
@@ -148,19 +202,21 @@ export default class Artalk {
   /** 暗黑模式 · 设定 */
   public setDarkMode(darkMode: boolean) {
     this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
     this.initDarkMode()
   }
 
   /** PV */
   public async initPV() {
+    const pvNum = await new Api(this.ctx).pv()
+    if (Number.isNaN(Number(pvNum)))
+      return
+
     if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
       return
 
     const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
     // $pv.innerText = '-' // 默认占位符
-    const pvNum = await new Api(this.ctx).pv()
-    if (Number.isNaN(Number(pvNum)))
-      return
 
     $pv.innerText = String(pvNum)
   }
@@ -179,4 +235,12 @@ export default class Artalk {
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
+
+  /** Plugins */
+  protected static Plugins: ((ctx: Context) => void)[] = []
+
+  /** Enable Plugin */
+  public static Use(plugin: ((ctx: Context) => void)) {
+    this.Plugins.push(plugin)
+  }
 }

packages/artalk/src/components/comment.ts

@@ -1,11 +1,11 @@
 import '../style/comment.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import UADetect from '../lib/detect'
-import { CommentData } from '~/types/artalk-data'
 import CommentHTML from './html/comment.html?raw'
 import Api from '../api'
 import ActionBtn from './action-btn'
@@ -317,7 +317,7 @@ export default class Comment extends Component {
   }
 
   getIsRoot() {
-    return this.parent === null
+    return this.data.rid === 0
   }
 
   getChildren() {

packages/artalk/src/components/editor-plugs/emoticons-plug.ts

@@ -1,10 +1,10 @@
 import './emoticons-plug.less'
 
-import Editor from '../editor'
-import EditorPlug from './editor-plug'
 import * as Utils from '~/src/lib/utils'
 import * as Ui from '~/src/lib/ui'
 import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
+import EditorPlug from './editor-plug'
+import Editor from '../editor'
 
 type OwOFormatType = {
   [key: string] : {
@@ -20,22 +20,33 @@ export default class EmoticonsPlug extends EditorPlug {
   public $grpWrap!: HTMLElement
   public $grpSwitcher!: HTMLElement
 
+  public loadingTask: Promise<void>|null = null
+
   constructor (public editor: Editor) {
     super(editor)
 
     this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
-
-    this.init()
   }
 
-  async init() {
-    // 数据处理
-    Ui.showLoading(this.$el)
-    this.emoticons = await this.handleData(this.ctx.conf.emoticons)
-    Ui.hideLoading(this.$el)
+  isListLoaded = false
+  isImgLoaded = false
 
-    // 初始化元素
-    this.initEmoticonsList()
+  async loadEmoticonsData() {
+    if (this.isListLoaded) return
+    if (this.loadingTask !== null) {
+      await this.loadingTask
+      return
+    }
+
+    // 数据处理
+    this.loadingTask = (async () => {
+      Ui.showLoading(this.$el)
+      this.emoticons = await this.handleData(this.ctx.conf.emoticons)
+      Ui.hideLoading(this.$el)
+      this.loadingTask = null
+      this.isListLoaded = true
+    })()
+    await this.loadingTask
   }
 
   async handleData(data: any): Promise<any[]> {
@@ -85,7 +96,7 @@ export default class EmoticonsPlug extends EditorPlug {
     // 剔除非法数据
     data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
 
-    console.log(data)
+    // console.log(data)
 
     this.solveNullKey(data)
     this.solveSameKey(data)
@@ -243,10 +254,20 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   onShow () {
-    // 延迟执行，防止无法读取高度
-    setTimeout(() => {
-      this.changeListHeight()
-    }, 30)
+    ;(async () => {
+      await this.loadEmoticonsData()
+
+      // 初始化元素
+      if (!this.isImgLoaded) {
+        this.initEmoticonsList()
+        this.isImgLoaded = true
+      }
+
+      // 延迟执行，防止无法读取高度
+      setTimeout(() => {
+        this.changeListHeight()
+      }, 30)
+    })()
   }
 
   onHide () {

packages/artalk/src/components/editor-plugs/preview-plug.ts

@@ -1,8 +1,8 @@
 import './preview-plug.less'
 
+import * as Utils from '~/src/lib/utils'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
-import * as Utils from '~/src/lib/utils'
 
 export default class PreviewPlug extends EditorPlug {
   $el!: HTMLElement

packages/artalk/src/components/editor.ts

@@ -1,5 +1,6 @@
 import '../style/editor.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
@@ -8,7 +9,6 @@ import EditorHTML from './html/editor.html?raw'
 
 import EmoticonsPlug from './editor-plugs/emoticons-plug'
 import PreviewPlug from './editor-plugs/preview-plug'
-import { CommentData } from '~/types/artalk-data'
 import Api from '../api'
 
 export default class Editor extends Component {
@@ -21,6 +21,8 @@ export default class Editor extends Component {
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
+  public $imgUploadBtn?: HTMLElement
+  public $imgUploadInput?: HTMLInputElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -63,6 +65,7 @@ export default class Editor extends Component {
     this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
     this.ctx.on('editor-travel', ($el) => (this.travel($el)))
     this.ctx.on('editor-travel-back', () => (this.travelBack()))
+    this.ctx.on('conf-updated', () => (this.refreshUploadBtn()))
   }
 
   initLocalStorage () {
@@ -200,8 +203,19 @@ export default class Editor extends Component {
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
       this.$plugBtnWrap.appendChild(btnElem)
+
+      // 表情包插件预加载
+      if (PlugObj.Name === 'emoticons') {
+        const emoPlug = new PlugObj(this) as EmoticonsPlug
+        this.plugList[PlugObj.Name] = emoPlug
+
+        window.setTimeout(() => {
+          emoPlug.loadEmoticonsData()
+        }, 1000) // 延迟 1s 加载
+      }
+
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
         if (!plug) {
@@ -244,6 +258,8 @@ export default class Editor extends Component {
         btnElem.classList.add('active')
       })
     })
+
+    this.initImgUpload()
   }
 
   /** 关闭编辑器插件 */
@@ -253,6 +269,120 @@ export default class Editor extends Component {
     this.openedPlugName = null
   }
 
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  /** 初始化图片上传功能 */
+  initImgUpload() {
+    this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
+    this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
+
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+    this.$imgUploadBtn.after(this.$imgUploadInput)
+
+    // 按钮点击
+    this.$imgUploadBtn.onclick = () => {
+      // 选择图片
+      const $input = this.$imgUploadInput!
+      $input.onchange = () => {
+        (async () => { // 解决阻塞 UI 问题
+          if (!$input.files || $input.files.length === 0) return
+          const file = $input.files[0]
+          this.uploadImg(file)
+        })()
+      }
+      $input.click() // 显示选择图片对话框
+    }
+
+    // 统一从 FileList 获取文件并上传图片方法
+    const uploadFromFileList = (files?: FileList) => {
+      if (!files) return
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        this.uploadImg(file)
+      }
+    }
+
+    // 拖拽图片
+    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+    // 阻止浏览器的默认释放行为
+    this.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.$textarea.addEventListener('drop', (evt) => {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+  }
+
+  /** 刷新图片上传按钮 */
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn) return
+
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute('atk-only-admin-show', '')
+      this.ctx.trigger('check-admin-show-el')
+    }
+  }
+
+  async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.showNotify('填入你的名字邮箱才能上传哦', 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.$textarea.value.trim() === '') insertPrefix = ''
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
+    this.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      resp = await new Api(this.ctx).imgUpload(file)
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`图片上传失败，${err.msg}`, 'e')
+    }
+    if (!!resp && resp.img_url) {
+      let imgURL = resp.img_url as string
+
+      // 若为相对路径，加上 artalk server
+      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
+
+      // 上传成功插入图片
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+    } else {
+      // 上传失败删除加载文字
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ''))
+    }
+  }
+
   insertContent (val: string) {
     if ((document as any).selection) {
       this.$textarea.focus();
@@ -279,7 +409,11 @@ export default class Editor extends Component {
     if (!!this.plugList && !!this.plugList.preview) {
       this.plugList.preview.updateContent()
     }
-    this.adjustTextareaHeight()
+
+    // 延迟执行防止无效
+    window.setTimeout(() => {
+      this.adjustTextareaHeight()
+    }, 80)
   }
 
   clearEditor () {
@@ -287,7 +421,8 @@ export default class Editor extends Component {
     this.cancelReply()
   }
 
-  getContent () {
+  /** 获取最终用于 submit 的数据 */
+  getFinalContent () {
     let content = this.getContentOriginal()
 
     // 表情包处理
@@ -304,7 +439,7 @@ export default class Editor extends Component {
   }
 
   getContentMarked () {
-    return Utils.marked(this.ctx, this.getContent())
+    return Utils.marked(this.ctx, this.getFinalContent())
   }
 
   initBottomPart () {
@@ -363,7 +498,7 @@ export default class Editor extends Component {
   }
 
   async submit () {
-    if (this.getContent().trim() === '') {
+    if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
       return
     }
@@ -374,7 +509,7 @@ export default class Editor extends Component {
 
     try {
       const nComment = await new Api(this.ctx).add({
-        content: this.getContent(),
+        content: this.getFinalContent(),
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,
@@ -386,7 +521,7 @@ export default class Editor extends Component {
 
       // 回复不同页面的评论
       if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
-        window.open(`${this.replyComment.page_key}#atk-comment-${nComment.id}`)
+        window.open(`${this.replyComment.page_url}#atk-comment-${nComment.id}`)
       }
 
       this.ctx.trigger('list-insert', nComment)
@@ -436,6 +571,8 @@ export default class Editor extends Component {
     const $travelPlace = Utils.createElement('<div></div>')
     $afterEl.after($travelPlace)
     $travelPlace.replaceWith(this.$el)
+
+    this.$el.classList.add('atk-fade-in') // 添加渐入动画
   }
 
   travelBack () {
@@ -446,5 +583,9 @@ export default class Editor extends Component {
     // 取消回复
     if (this.replyComment !== null) this.cancelReply()
   }
+
+  initRemoteEmoticons () {
+
+  }
 }
 

packages/artalk/src/components/layer.ts

@@ -10,8 +10,8 @@ export default class Layer extends Component {
 
   private maskClickHideEnable: boolean = true
 
-  private bodyStyleOrgOverflow = ''
-  private bodyStyleOrgPaddingRight = ''
+  public static BodyOrgOverflow: string
+  public static BodyOrgPaddingRight: string
 
   public afterHide?: Function
 
@@ -65,12 +65,7 @@ export default class Layer extends Component {
     }
 
     // body style 禁止滚动 + 防抖
-    this.bodyStyleOrgOverflow = document.body.style.overflow
-    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight
-    document.body.style.overflow = 'hidden'
-
-    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
-    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
+    this.pageBodyScrollBarHide()
   }
 
   hide () {
@@ -78,11 +73,11 @@ export default class Layer extends Component {
     this.$wrap.classList.add('atk-fade-out')
     this.$el.style.display = 'none'
 
+    // body style 禁止滚动解除
+    this.pageBodyScrollBarShow()
+
     this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
-      // body style 禁止滚动解除
-      document.body.style.overflow = this.bodyStyleOrgOverflow
-      document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
       this.checkCleanLayer()
     }, 450)
     this.newActionTimer(() => {
@@ -95,6 +90,20 @@ export default class Layer extends Component {
     this.maskClickHideEnable = enable
   }
 
+  // 页面滚动条隐藏
+  pageBodyScrollBarHide() {
+    document.body.style.overflow = 'hidden'
+
+    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
+  }
+
+  // 页面滚动条显示
+  pageBodyScrollBarShow() {
+    document.body.style.overflow = Layer.BodyOrgOverflow
+    document.body.style.paddingRight = Layer.BodyOrgPaddingRight
+  }
+
   // Timers
   private static actionTimers: {act: Function, tid: number}[] = []
 
@@ -118,8 +127,8 @@ export default class Layer extends Component {
 
   /** 销毁 - 无动画 */
   disposeNow () {
-    document.body.style.overflow = ''
     this.$el.remove()
+    this.pageBodyScrollBarShow()
     // this.$el dispose
     this.checkCleanLayer()
   }

packages/artalk/src/components/list-lite.ts

@@ -1,12 +1,13 @@
+import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import Comment from './comment'
-import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
+import { backendMinVersion } from '../../package.json'
 
 export default class ListLite extends Component {
   protected $commentsWrap: HTMLElement
@@ -48,6 +49,9 @@ export default class ListLite extends Component {
     </div>`)
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
+    // 评论为空时显示字符
+    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
+
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -90,7 +94,7 @@ export default class ListLite extends Component {
     try {
       listData = await new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor)
     } catch (e: any) {
-      this.onError(e.msg || String(e), offset)
+      this.onError(e.msg || String(e), offset, e.data)
       throw e
     } finally {
       hideLoading()
@@ -117,7 +121,14 @@ export default class ListLite extends Component {
     this.data = data
 
     // 版本检测
-    if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version)) return
+    const feMinVersion = data.api_version?.fe_min_version || '0.0.0'
+    if (this.ctx.conf.versionCheck && this.versionCheck('前端', feMinVersion, ARTALK_VERSION)) return
+    if (this.ctx.conf.versionCheck && this.versionCheck('后端', backendMinVersion, data.api_version?.version)) return
+
+    // 图片上传功能
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload
+    }
 
     // 导入数据
     this.importComments(data.comments)
@@ -130,6 +141,7 @@ export default class ListLite extends Component {
 
     this.ctx.trigger('unread-update', { notifies: data.unread || [] })
     this.ctx.trigger('comments-loaded')
+    this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
   }
@@ -210,7 +222,7 @@ export default class ListLite extends Component {
   }
 
   /** 错误处理 */
-  protected onError(msg: any, offset: number) {
+  protected onError(msg: any, offset: number, errData?: any) {
     msg = String(msg)
     console.error(msg)
 
@@ -228,9 +240,24 @@ export default class ListLite extends Component {
     $err.appendChild($retryBtn)
 
     const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
-    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show'))
-    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
     $err.appendChild(adminBtn)
+    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
+
+    let sidebarView = ''
+
+    // 找不到站点错误，打开侧边栏并填入创建站点表单
+    if (errData?.err_no_site) {
+      const viewLoadParam = {
+        create_name: this.ctx.conf.site,
+        create_urls: `${window.location.protocol}//${window.location.host}`
+      }
+      // TODO 真的是飞鸽传书啊
+      sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
+    }
+
+    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show', {
+      view: sidebarView
+    }))
 
     Ui.setError(this.$el, $err)
   }
@@ -466,25 +493,25 @@ export default class ListLite extends Component {
     }
   }
 
-  /** 前端版本检测 */
-  public versionCheck(versionData: ApiVersionData): boolean {
-    const needVersion = versionData?.fe_min_version || '0.0.0'
-    const needUpdate = Utils.versionCompare(needVersion, ARTALK_VERSION) === 1
+  /** 版本检测 */
+  public versionCheck(name: '前端'|'后端', needVersion: string, curtVersion: string): boolean {
+    const needUpdate = Utils.versionCompare(needVersion, curtVersion) === 1
     if (needUpdate) {
       // 需要更新
-      const errEl = Utils.createElement(`<div>前端 Artalk 版本已过时，请更新以获得完整体验<br/>`
-      + `若您是站点管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获取帮助`
+      const errEl = Utils.createElement(`<div>Artalk ${name}版本已过时，请更新以获得完整体验<br/>`
+      + `如果你是管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获得帮助`
       + `<br/><br/>`
-      + `<span style="color: var(--at-color-meta);">前端版本 ${ARTALK_VERSION}，需求版本 >= ${needVersion}</span><br/><br/>`
+      + `<span style="color: var(--at-color-meta);">当前${name}版本 ${curtVersion}，需求版本 >= ${needVersion}</span><br/><br/>`
       + `</div>`)
       const ignoreBtn = Utils.createElement('<span style="cursor:pointer;">忽略</span>')
       ignoreBtn.onclick = () => {
-        Ui.setError(this.ctx, null)
+        Ui.setError(this.$el.parentElement!, null)
         this.ctx.conf.versionCheck = false
+        this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)
-      Ui.setError(this.ctx, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+      Ui.setError(this.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
     }
 
     return needUpdate

packages/artalk/src/components/list.ts

@@ -1,12 +1,12 @@
 import '../style/list.less'
 
+import { ListData } from '~/types/artalk-data'
 import Context from '../context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import ListHTML from './html/list.html?raw'
 import ListLite from './list-lite'
-import { ListData } from '~/types/artalk-data'
 
 export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
@@ -42,9 +42,12 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
-    // 下拉选择层
     this.$commentCount = this.$el.querySelector('.atk-comment-count')!
-    this.initDropdown()
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (this.ctx.conf.listSort) {
+      this.initDropdown()
+    }
 
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
@@ -184,7 +187,7 @@ export default class List extends ListLite {
     this.$commentCount.classList.add('atk-dropdown-wrap')
 
     // 插入图标
-    this.$commentsWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
 
     const reloadUseParamsEditor = (func: (p: any) => void) => {
       this.paramsEditor = (p) => { func(p) }

packages/artalk/src/components/pagination.ts

@@ -38,7 +38,7 @@ export default class Pagination {
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
           <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" />
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
           <div class="atk-btn atk-btn-next">Next</div>
         </div>
       </div>`)

packages/artalk/src/components/sidebar-layer.ts

@@ -3,9 +3,11 @@ import '../style/sidebar-layer.less'
 import Context from '@/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
-import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
+import { SidebarShowPayload } from '~/types/event'
+import SidebarHTML from './html/sidebar-layer.html?raw'
 import Layer from './layer'
+import Api from '../api'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -27,7 +29,7 @@ export default class SidebarLayer extends Component {
     }
 
     // event
-    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-show', (conf) => (this.show(conf || {})))
     this.ctx.on('sidebar-hide', () => (this.hide()))
     this.ctx.on('user-changed', () => { this.firstShow = true })
   }
@@ -35,7 +37,7 @@ export default class SidebarLayer extends Component {
   private firstShow = true
 
   /** 显示 */
-  public async show() {
+  public async show(conf: SidebarShowPayload) {
     this.$el.style.transform = '' // 动画清除，防止二次打开失效
 
     // 获取 Layer
@@ -58,32 +60,60 @@ export default class SidebarLayer extends Component {
       this.$el.style.transform = 'translate(0, 0)'
     }, 20)
 
+    // 管理员身份验证 (若身份失效，弹出验证窗口)
+    ;(async () => {
+      const resp = await new Api(this.ctx).loginStatus()
+      if (resp.is_admin && !resp.is_login) {
+        this.layer?.hide()
+        this.firstShow = true
+
+        this.ctx.trigger('checker-admin', {
+          onSuccess: () => {
+            setTimeout(() => {
+              this.show(conf)
+            }, 500)
+          },
+          onCancel: () => {}
+        })
+      }
+    })()
+
+    // 清空 unread
+    this.ctx.trigger('unread-update', { notifies: [] })
+
     // 第一次加载
     if (this.firstShow) {
       this.$iframeWrap.innerHTML = ''
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
+      // 准备 Iframe 参数
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
-        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
-      const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
+        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
 
-      // 测试是否能访问
-      this.iframeLoad(`${baseURL}`
-        + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
-        + `&site=${encodeURIComponent(this.conf.site || '')}`
-        + `&user=${userData}`
-        + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
+      const query: any = {
+        pageKey: this.conf.pageKey,
+        site: this.conf.site || '',
+        user: JSON.stringify(this.ctx.user.data),
+        time: +new Date()
+      }
+
+      if (conf.view) query.view = conf.view
+      if (this.conf.darkMode) query.darkMode = '1'
+
+      const urlParams = new URLSearchParams(query);
+      this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
 
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
       // 暗黑模式
-      if (this.conf.darkMode && !this.$iframe!.src.match(/darkMode=1$/)) {
+      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+
+      if (this.conf.darkMode && !isIframeSrcDarkMode)
         this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
-      }
-      if (!this.conf.darkMode && this.$iframe!.src.match(/darkMode=1$/)) {
-        this.iframeLoad(this.$iframe!.src.replace(/&darkMode=1$/, ''))
-      }
+
+      if (!this.conf.darkMode && isIframeSrcDarkMode)
+        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
     }
   }
 

packages/artalk/src/context.ts

@@ -1,6 +1,7 @@
-import User from './lib/user'
+import { marked as libMarked } from 'marked'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+import User from './lib/user'
 
 /**
  * Artalk Context
@@ -39,4 +40,7 @@ export default class Context {
       .map((evt) => evt.handler)
       .forEach((handler) => handler(payload as any))
   }
+
+  public markedInstance!: typeof libMarked
+  public markedReplacers: ((raw: string) => string)[] = []
 }

packages/artalk/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,
@@ -36,8 +37,10 @@ const defaults: ArtalkConfig = {
     children: 400,
   },
 
+  imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
+  useBackendConf: false,
 }
 
 export default defaults

packages/artalk/src/lib/checker/admin-checker.ts

@@ -5,7 +5,7 @@ import { Checker } from '.'
 const AdminChecker: Checker = {
   inputType: 'password',
 
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     const data = {
       name: that.ctx.user.data.nick,
       email: that.ctx.user.data.email,
@@ -15,11 +15,11 @@ const AdminChecker: Checker = {
     return new Api(that.ctx).login(data.name, data.email, data.password)
   },
 
-  body() {
+  body(that, ctx) {
     return Utils.createElement('<span>敲入密码来验证管理员身份：</span>')
   },
 
-  onSuccess(that, userToken, inputVal, formEl) {
+  onSuccess(that, ctx, userToken, inputVal, formEl) {
     that.ctx.user.data.isAdmin = true
     that.ctx.user.data.token = userToken
     that.ctx.user.save()
@@ -27,7 +27,7 @@ const AdminChecker: Checker = {
     that.ctx.trigger('list-reload')
   },
 
-  onError(that, err, inputVal, formEl) {}
+  onError(that, ctx, err, inputVal, formEl) {}
 }
 
 export default AdminChecker

packages/artalk/src/lib/checker/captcha-checker.ts

@@ -1,15 +1,61 @@
 import Api from '@/api'
 import * as Utils from '../utils'
+import * as Ui from '../ui'
 import { Checker } from '.'
 
 const CaptchaChecker: Checker = {
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     return new Api(that.ctx).captchaCheck(inputVal)
   },
 
-  body(that) {
+  body(that, ctx) {
+    // Iframe 验证方式
+    if (that.captchaConf.iframe) {
+      const $iframeWrap = Utils.createElement(`<div class="atk-checker-iframe-wrap"></div>`)
+      const $iframe = Utils.createElement<HTMLIFrameElement>(`<iframe class="atk-fade-in"></iframe>`)
+      $iframe.style.display = 'none'
+      Ui.showLoading($iframeWrap, { transparentBg: true })
+      $iframe.src = `${that.ctx.conf.server}/api/captcha/get?t=${+new Date()}`
+      $iframe.onload = () => {
+        $iframe.style.display = ''
+        Ui.hideLoading($iframeWrap)
+      }
+      $iframeWrap.append($iframe)
+
+      const $closeBtn = Utils.createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`)
+      $iframeWrap.append($closeBtn)
+
+      ctx.hideInteractInput()
+
+      // 轮询状态
+      let stop = false // 打断
+      const sleep = (ms: number) => new Promise((resolve) => { window.setTimeout(() => { resolve(null) }, ms) })
+      ;(async function queryStatus() {
+        await sleep(1000)
+        if (stop) return
+        let isPass = false
+        try {
+          const resp = await new Api(that.ctx).captchaStatus()
+          isPass = resp.is_pass
+        } catch { isPass = false }
+        if (isPass) {
+          ctx.triggerSuccess()
+        } else {
+          queryStatus()
+        }
+      })()
+
+      $closeBtn.onclick = () => {
+        stop = true
+        ctx.cancel()
+      }
+
+      return $iframeWrap
+    }
+
+    // 图片验证方式
     const elem = Utils.createElement(
-      `<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ''}" alt="验证码">敲入验证码继续：</span>`
+      `<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ''}" alt="验证码">敲入验证码继续：</span>`
     );
 
     // 刷新验证码
@@ -26,11 +72,11 @@ const CaptchaChecker: Checker = {
     return elem
   },
 
-  onSuccess(that, data, inputVal, formEl) {
-    that.submitCaptchaVal = inputVal
+  onSuccess(that, ctx, data, inputVal, formEl) {
+    that.captchaConf.val = inputVal
   },
 
-  onError(that, err, inputVal, formEl) {
+  onError(that, ctx, err, inputVal, formEl) {
     formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
   }
 }

packages/artalk/src/lib/checker/index.ts

@@ -1,9 +1,9 @@
 import Context from '@/context'
 import Layer from '@/components/layer'
 import Dialog from '@/components/dialog'
+import { CheckerPayload } from '~/types/event'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
-import { CheckerPayload } from '~/types/event'
 import CaptchaChecker from './captcha-checker'
 import AdminChecker from './admin-checker'
 
@@ -14,8 +14,7 @@ export default class CheckerLauncher {
   public ctx: Context
 
   public launched: Checker[] = []
-  public submitCaptchaVal?: string
-  public submitCaptchaImgData?: string
+  public captchaConf: { val?: string, imgData?: string, iframe?: string } = {}
 
   constructor(ctx: Context) {
     this.ctx = ctx
@@ -26,9 +25,9 @@ export default class CheckerLauncher {
   /** 初始化事件绑定 */
   public initEventBind() {
     this.ctx.on('checker-captcha', (conf) => {
-      if (conf.imgData) {
-        this.submitCaptchaImgData = conf.imgData
-      }
+      if (conf.imgData) this.captchaConf.imgData = conf.imgData
+      if (conf.iframe) this.captchaConf.iframe = conf.iframe
+
       this.fire(CaptchaChecker, conf)
     })
 
@@ -41,20 +40,42 @@ export default class CheckerLauncher {
     if (this.launched.includes(checker)) return // 阻止同时 fire 相同的 checker
     this.launched.push(checker)
 
+    // 创建层
     const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`)
     layer.setMaskClickHide(false)
     layer.show()
 
-    const formEl = Utils.createElement()
-    formEl.appendChild(checker.body(this))
+    // Checker 的上下文
+    let hideInteractInput = false
+    const checkerCtx: CheckerCtx = {
+      getLayer: () => layer,
+      hideInteractInput: () => {
+        hideInteractInput = true
+      },
+      triggerSuccess: () => {
+        this.close(checker, layer)
+        if (checker.onSuccess) checker.onSuccess(this, checkerCtx, "", "", formEl)
+        if (payload.onSuccess) payload.onSuccess("", dialog.$el)
+      },
+      cancel: () => {
+        this.close(checker, layer)
+        if (payload.onCancel) payload.onCancel()
+      }
+    }
 
-    const input = Utils.createElement<HTMLInputElement>(
+    // 创建表单
+    const formEl = Utils.createElement()
+    formEl.appendChild(checker.body(this, checkerCtx))
+
+    // 输入框
+    const $input = Utils.createElement<HTMLInputElement>(
       `<input id="check" type="${checker.inputType || 'text'}" autocomplete="off" required placeholder="">`
     )
-    formEl.appendChild(input)
-    setTimeout(() => input.focus(), 80) // 延迟 Focus
+    formEl.appendChild($input)
+    setTimeout(() => $input.focus(), 80) // 延迟 Focus
 
-    input.onkeyup = (evt) => {
+    // 绑定键盘事件
+    $input.onkeyup = (evt) => {
       if (evt.key === 'Enter' || evt.keyCode === 13) {
         // 按下回车键
         evt.preventDefault()
@@ -70,7 +91,9 @@ export default class CheckerLauncher {
 
     // 确认按钮
     dialog.setYes((btnEl) => {
-      const inputVal = input.value.trim()
+      const inputVal = $input.value.trim()
+
+      // 按钮操作
       if (!btnTextOrg) btnTextOrg = btnEl.innerText
       const btnTextSet = (btnText: string) => {
         btnEl.innerText = btnText
@@ -83,21 +106,25 @@ export default class CheckerLauncher {
 
       btnEl.innerText = '加载中...'
 
+      // 发送请求
       checker
-        .request(this, inputVal)
+        .request(this, checkerCtx, inputVal)
         .then((data) => {
           // 请求成功
-          this.done(checker, layer)
-          if (checker.onSuccess) checker.onSuccess(this, data, inputVal, formEl)
+          this.close(checker, layer)
+
+          if (checker.onSuccess) checker.onSuccess(this, checkerCtx, data, inputVal, formEl)
           if (payload.onSuccess) payload.onSuccess(inputVal, dialog.$el)
         })
         .catch((err) => {
           // 请求失败
           btnTextSet(String(err.msg || String(err)))
-          if (checker.onError) checker.onError(this, err, inputVal, formEl)
 
+          if (checker.onError) checker.onError(this, checkerCtx, err, inputVal, formEl)
+
+          // 错误显示 3s 后恢复按钮
           const tf = setTimeout(() => btnTextRestore(), 3000)
-          input.onfocus = () => {
+          $input.onfocus = () => {
             btnTextRestore()
             clearTimeout(tf)
           }
@@ -108,17 +135,25 @@ export default class CheckerLauncher {
 
     // 取消按钮
     dialog.setNo(() => {
-      this.done(checker, layer)
+      this.close(checker, layer)
       if (payload.onCancel) payload.onCancel()
       return false
     })
 
+    if (hideInteractInput) {
+      $input.style.display = 'none'
+      dialog.$el.querySelector<HTMLElement>('.atk-layer-dialog-actions')!.style.display = 'none'
+    }
+
+    // 层装载 dialog 元素
     layer.getEl().append(dialog.$el)
 
-    if (payload.onMount) payload.onMount(dialog.$el) // onMount
+    // onMount 回调
+    if (payload.onMount) payload.onMount(dialog.$el)
   }
 
-  private done(checker: Checker, layer: Layer) {
+  // 关闭 checker 对话框
+  private close(checker: Checker, layer: Layer) {
     layer.disposeNow()
     this.launched = this.launched.filter(c => c !== checker)
   }
@@ -127,8 +162,15 @@ export default class CheckerLauncher {
 export interface Checker {
   el?: HTMLElement
   inputType?: 'password' | 'text'
-  body: (launcher: CheckerLauncher) => HTMLElement
-  request: (launcher: CheckerLauncher, inputVal: string) => Promise<string>
-  onSuccess?: (launcher: CheckerLauncher, data: string, inputVal: string, formEl: HTMLElement) => void
-  onError?: (launcher: CheckerLauncher, err: any, inputVal: string, formEl: HTMLElement) => void
+  body: (launcher: CheckerLauncher, ctx: CheckerCtx) => HTMLElement
+  request: (launcher: CheckerLauncher, ctx: CheckerCtx, inputVal: string) => Promise<string>
+  onSuccess?: (launcher: CheckerLauncher, ctx: CheckerCtx, data: string, inputVal: string, formEl: HTMLElement) => void
+  onError?: (launcher: CheckerLauncher, ctx: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void
+}
+
+export interface CheckerCtx {
+  getLayer(): Layer
+  hideInteractInput(): void
+  triggerSuccess(): void
+  cancel(): void
 }

packages/artalk/src/lib/detect.js

@@ -1,263 +0,0 @@
-/* eslint-disable */
-var win = window || {}
-var nav = navigator || {}
-function Detect (userAgent) {
-  var u = userAgent || nav.userAgent
-  var _this = this
-
-  var match = {
-    // 内核
-    Trident: u.indexOf('Trident') > -1 || u.indexOf('NET CLR') > -1,
-    Presto: u.indexOf('Presto') > -1,
-    WebKit: u.indexOf('AppleWebKit') > -1,
-    Gecko: u.indexOf('Gecko/') > -1,
-    // 浏览器
-    Safari: u.indexOf('Safari') > -1,
-    Chrome: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1,
-    IE: u.indexOf('MSIE') > -1 || u.indexOf('Trident') > -1,
-    Edge: u.indexOf('Edge') > -1,
-    Firefox: u.indexOf('Firefox') > -1 || u.indexOf('FxiOS') > -1,
-    'Firefox Focus': u.indexOf('Focus') > -1,
-    Chromium: u.indexOf('Chromium') > -1,
-    Opera: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1,
-    Vivaldi: u.indexOf('Vivaldi') > -1,
-    Yandex: u.indexOf('YaBrowser') > -1,
-    Kindle: u.indexOf('Kindle') > -1 || u.indexOf('Silk/') > -1,
-    360: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1,
-    UC: u.indexOf('UC') > -1 || u.indexOf(' UBrowser') > -1,
-    QQBrowser: u.indexOf('QQBrowser') > -1,
-    QQ: u.indexOf('QQ/') > -1,
-    Baidu: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1,
-    Maxthon: u.indexOf('Maxthon') > -1,
-    Sogou: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1,
-    LBBROWSER: u.indexOf('LBBROWSER') > -1,
-    '2345Explorer': u.indexOf('2345Explorer') > -1,
-    TheWorld: u.indexOf('TheWorld') > -1,
-    XiaoMi: u.indexOf('MiuiBrowser') > -1,
-    Quark: u.indexOf('Quark') > -1,
-    Qiyu: u.indexOf('Qiyu') > -1,
-    Wechat: u.indexOf('MicroMessenger') > -1,
-    Taobao: u.indexOf('AliApp(TB') > -1,
-    Alipay: u.indexOf('AliApp(AP') > -1,
-    Weibo: u.indexOf('Weibo') > -1,
-    Douban: u.indexOf('com.douban.frodo') > -1,
-    Suning: u.indexOf('SNEBUY-APP') > -1,
-    iQiYi: u.indexOf('IqiyiApp') > -1,
-    // 系统或平台
-    Windows: u.indexOf('Windows') > -1,
-    Linux: u.indexOf('Linux') > -1 || u.indexOf('X11') > -1,
-    'Mac OS': u.indexOf('Macintosh') > -1,
-    Android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
-    Ubuntu: u.indexOf('Ubuntu') > -1,
-    FreeBSD: u.indexOf('FreeBSD') > -1,
-    Debian: u.indexOf('Debian') > -1,
-    'Windows Phone': u.indexOf('IEMobile') > -1 || u.indexOf('Windows Phone') > -1,
-    BlackBerry: u.indexOf('BlackBerry') > -1 || u.indexOf('RIM') > -1,
-    MeeGo: u.indexOf('MeeGo') > -1,
-    Symbian: u.indexOf('Symbian') > -1,
-    iOS: u.indexOf('like Mac OS X') > -1,
-    'Chrome OS': u.indexOf('CrOS') > -1,
-    WebOS: u.indexOf('hpwOS') > -1,
-    // 设备
-    Mobile: u.indexOf('Mobi') > -1 || u.indexOf('iPh') > -1 || u.indexOf('480') > -1,
-    Tablet: u.indexOf('Tablet') > -1 || u.indexOf('Pad') > -1 || u.indexOf('Nexus 7') > -1
-  }
-  // 修正
-  if (match.Mobile) {
-    match.Mobile = !(u.indexOf('iPad') > -1)
-  } else if (win.showModalDialog && win.chrome) {
-    match['360'] = true
-  }
-  // 基本信息
-  var hash = {
-    engine: ['WebKit', 'Trident', 'Gecko', 'Presto'],
-    browser: ['Safari', 'Chrome', 'Edge', 'IE', 'Firefox', 'Firefox Focus', 'Chromium', 'Opera', 'Vivaldi', 'Yandex', 'Kindle', '360', 'UC', 'QQBrowser', 'QQ', 'Baidu', 'Maxthon', 'Sogou', 'LBBROWSER', '2345Explorer', 'TheWorld', 'XiaoMi', 'Quark', 'Qiyu', 'Wechat', 'Taobao', 'Alipay', 'Weibo', 'Douban', 'Suning', 'iQiYi'],
-    os: ['Windows', 'Linux', 'Mac OS', 'Android', 'Ubuntu', 'FreeBSD', 'Debian', 'iOS', 'Windows Phone', 'BlackBerry', 'MeeGo', 'Symbian', 'Chrome OS', 'WebOS'],
-    device: ['Mobile', 'Tablet']
-  }
-  _this.device = 'PC'
-  _this.language = (function () {
-    var g = (nav.browserLanguage || nav.language)
-    var arr = g.split('-')
-    if (arr[1]) {
-      arr[1] = arr[1].toUpperCase()
-    }
-    return arr.join('_')
-  })()
-  for (var s in hash) {
-    for (var i = 0; i < hash[s].length; i++) {
-      var value = hash[s][i]
-      if (match[value]) {
-        _this[s] = value
-      }
-    }
-  }
-  // 系统版本信息
-  var osVersion = {
-    Windows: function () {
-      var v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1')
-      var hash = {
-        6.4: '10',
-        6.3: '8.1',
-        6.2: '8',
-        6.1: '7',
-        '6.0': 'Vista',
-        5.2: 'XP',
-        5.1: 'XP',
-        '5.0': '2000',
-        '10.0': '10',
-        '11.0': '11' // 自定的，不是微软官方的判断方法
-      }
-      return hash[v] || v
-    },
-    Android: function () {
-      return u.replace(/^.*Android ([\d.]+);.*$/, '$1')
-    },
-    iOS: function () {
-      return u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.')
-    },
-    Debian: function () {
-      return u.replace(/^.*Debian\/([\d.]+).*$/, '$1')
-    },
-    'Windows Phone': function () {
-      return u.replace(/^.*Windows Phone( OS)? ([\d.]+);.*$/, '$2')
-    },
-    'Mac OS': function () {
-      return u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.')
-    },
-    WebOS: function () {
-      return u.replace(/^.*hpwOS\/([\d.]+);.*$/, '$1')
-    }
-  }
-  _this.osVersion = ''
-  if (osVersion[_this.os]) {
-    _this.osVersion = osVersion[_this.os]()
-    if (_this.osVersion === u) {
-      _this.osVersion = ''
-    }
-  }
-  // 浏览器版本信息
-  var version = {
-    Safari: function () {
-      return u.replace(/^.*Version\/([\d.]+).*$/, '$1')
-    },
-    Chrome: function () {
-      return u.replace(/^.*Chrome\/([\d.]+).*$/, '$1').replace(/^.*CriOS\/([\d.]+).*$/, '$1')
-    },
-    IE: function () {
-      return u.replace(/^.*MSIE ([\d.]+).*$/, '$1').replace(/^.*rv:([\d.]+).*$/, '$1')
-    },
-    Edge: function () {
-      return u.replace(/^.*Edge\/([\d.]+).*$/, '$1')
-    },
-    Firefox: function () {
-      return u.replace(/^.*Firefox\/([\d.]+).*$/, '$1').replace(/^.*FxiOS\/([\d.]+).*$/, '$1')
-    },
-    'Firefox Focus': function () {
-      return u.replace(/^.*Focus\/([\d.]+).*$/, '$1')
-    },
-    Chromium: function () {
-      return u.replace(/^.*Chromium\/([\d.]+).*$/, '$1')
-    },
-    Opera: function () {
-      return u.replace(/^.*Opera\/([\d.]+).*$/, '$1').replace(/^.*OPR\/([\d.]+).*$/, '$1')
-    },
-    Vivaldi: function () {
-      return u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1')
-    },
-    Yandex: function () {
-      return u.replace(/^.*YaBrowser\/([\d.]+).*$/, '$1')
-    },
-    Kindle: function () {
-      return u.replace(/^.*Version\/([\d.]+).*$/, '$1')
-    },
-    Maxthon: function () {
-      return u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1')
-    },
-    QQBrowser: function () {
-      return u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1')
-    },
-    QQ: function () {
-      return u.replace(/^.*QQ\/([\d.]+).*$/, '$1')
-    },
-    Baidu: function () {
-      return u.replace(/^.*BIDUBrowser[\s/]([\d.]+).*$/, '$1')
-    },
-    UC: function () {
-      return u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1')
-    },
-    Sogou: function () {
-      return u.replace(/^.*SE ([\d.X]+).*$/, '$1').replace(/^.*SogouMobileBrowser\/([\d.]+).*$/, '$1')
-    },
-    '2345Explorer': function () {
-      return u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1')
-    },
-    TheWorld: function () {
-      return u.replace(/^.*TheWorld ([\d.]+).*$/, '$1')
-    },
-    XiaoMi: function () {
-      return u.replace(/^.*MiuiBrowser\/([\d.]+).*$/, '$1')
-    },
-    Quark: function () {
-      return u.replace(/^.*Quark\/([\d.]+).*$/, '$1')
-    },
-    Qiyu: function () {
-      return u.replace(/^.*Qiyu\/([\d.]+).*$/, '$1')
-    },
-    Wechat: function () {
-      return u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1')
-    },
-    Taobao: function () {
-      return u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1')
-    },
-    Alipay: function () {
-      return u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1')
-    },
-    Weibo: function () {
-      return u.replace(/^.*weibo__([\d.]+).*$/, '$1')
-    },
-    Douban: function () {
-      return u.replace(/^.*com.douban.frodo\/([\d.]+).*$/, '$1')
-    },
-    Suning: function () {
-      return u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1')
-    },
-    iQiYi: function () {
-      return u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1')
-    }
-  }
-  _this.version = ''
-  if (version[_this.browser]) {
-    _this.version = version[_this.browser]()
-    if (_this.version === u) {
-      _this.version = ''
-    }
-  }
-
-  // 简化版本号
-  /* if (_this.osVersion.indexOf('.')) {
-    _this.osVersion = _this.osVersion.substring(0, _this.osVersion.indexOf('.'))
-  } */
-  if (_this.version.indexOf('.')) {
-    _this.version = _this.version.substring(0, _this.version.indexOf('.'))
-  }
-
-  // 修正
-  if (_this.browser === 'Edge') {
-    _this.engine = 'EdgeHTML'
-  } else if (_this.browser === 'Chrome' && parseInt(_this.version) > 27) {
-    _this.engine = 'Blink'
-  } else if (_this.browser === 'Opera' && parseInt(_this.version) > 12) {
-    _this.engine = 'Blink'
-  } else if (_this.browser === 'Yandex') {
-    _this.engine = 'Blink'
-  } else if (_this.browser === undefined) {
-    _this.browser = 'Unknow App'
-  }
-};
-
-function detectFactory (u) {
-  return new Detect(u)
-}
-
-export default detectFactory

packages/artalk/src/lib/detect.ts

@@ -0,0 +1,222 @@
+const win = (window as any) || {}
+const nav = navigator || {}
+
+function Detect (userAgent?: string) {
+  const u = String(userAgent || nav.userAgent)
+  const dest = {
+    os: '',
+    osVersion: '',
+    engine: '',
+    browser: '',
+    device: '',
+    language: '',
+    version: ''
+  }
+
+  // 内核
+  const engineMatch = {
+    Trident: u.includes('Trident') || u.includes('NET CLR'),
+    Presto: u.includes('Presto'),
+    WebKit: u.includes('AppleWebKit'),
+    Gecko: u.includes('Gecko/')
+  }
+
+  // 浏览器
+  const browserMatch = {
+    Safari: u.includes('Safari'),
+    Chrome: u.includes('Chrome') || u.includes('CriOS'),
+    IE: u.includes('MSIE') || u.includes('Trident'),
+    Edge: u.includes('Edge') || u.includes('Edg'),
+    Firefox: u.includes('Firefox') || u.includes('FxiOS'),
+    'Firefox Focus': u.includes('Focus'),
+    Chromium: u.includes('Chromium'),
+    Opera: u.includes('Opera') || u.includes('OPR'),
+    Vivaldi: u.includes('Vivaldi'),
+    Yandex: u.includes('YaBrowser'),
+    Kindle: u.includes('Kindle') || u.includes('Silk/'),
+    360: u.includes('360EE') || u.includes('360SE'),
+    UC: u.includes('UC') || u.includes(' UBrowser'),
+    QQBrowser: u.includes('QQBrowser'),
+    QQ: u.includes('QQ/'),
+    Baidu: u.includes('Baidu') || u.includes('BIDUBrowser'),
+    Maxthon: u.includes('Maxthon'),
+    Sogou: u.includes('MetaSr') || u.includes('Sogou'),
+    LBBROWSER: u.includes('LBBROWSER'),
+    '2345Explorer': u.includes('2345Explorer'),
+    TheWorld: u.includes('TheWorld'),
+    MIUI: u.includes('MiuiBrowser'),
+    Quark: u.includes('Quark'),
+    Qiyu: u.includes('Qiyu'),
+    Wechat: u.includes('MicroMessenger'),
+    Taobao: u.includes('AliApp(TB'),
+    Alipay: u.includes('AliApp(AP'),
+    Weibo: u.includes('Weibo'),
+    Douban: u.includes('com.douban.frodo'),
+    Suning: u.includes('SNEBUY-APP'),
+    iQiYi: u.includes('IqiyiApp'),
+  }
+
+  // 系统或平台
+  const osMatch = {
+    Windows: u.includes('Windows'),
+    Linux: u.includes('Linux') || u.includes('X11'),
+    'macOS': u.includes('Macintosh'),
+    Android: u.includes('Android') || u.includes('Adr'),
+    Ubuntu: u.includes('Ubuntu'),
+    FreeBSD: u.includes('FreeBSD'),
+    Debian: u.includes('Debian'),
+    'Windows Phone': u.includes('IEMobile') || u.includes('Windows Phone'),
+    BlackBerry: u.includes('BlackBerry') || u.includes('RIM'),
+    MeeGo: u.includes('MeeGo'),
+    Symbian: u.includes('Symbian'),
+    iOS: u.includes('like Mac OS X'),
+    'Chrome OS': u.includes('CrOS'),
+    WebOS: u.includes('hpwOS'),
+  }
+
+  // 设备
+  const deviceMatch = {
+    Mobile: u.includes('Mobi') || u.includes('iPh') || u.includes('480'),
+    Tablet: u.includes('Tablet') || u.includes('Pad') || u.includes('Nexus 7')
+  }
+
+  // 修正
+  if (deviceMatch.Mobile) {
+    deviceMatch.Mobile = !(u.includes('iPad'))
+  } else if (browserMatch.Chrome && u.includes('Edg')) {
+    // Chrome 内核的 Edge
+    browserMatch.Chrome = false
+    browserMatch.Edge = true
+  } else if (win.showModalDialog && win.chrome) {
+    browserMatch.Chrome = false
+    browserMatch['360'] = true
+  }
+
+  // 默认设备
+  dest.device = 'PC'
+
+  // 语言
+  dest.language = (() => {
+    const g = ((nav as any).browserLanguage || nav.language)
+    const arr = g.split('-')
+    if (arr[1]) arr[1] = arr[1].toUpperCase()
+    return arr.join('_')
+  })()
+
+  // 应用判断数据
+  const hash = {
+    engine: engineMatch,
+    browser: browserMatch,
+    os: osMatch,
+    device: deviceMatch,
+  }
+  Object.entries(hash).forEach(([type, match]) => {
+    Object.entries(match).forEach(([name, result]) => {
+      if (result === true) dest[type] = name
+    })
+  })
+
+  // 系统版本信息
+  const osVersion = {
+    Windows: () => {
+      const v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1')
+      const wvHash = {
+        '6.4': '10',
+        '6.3': '8.1',
+        '6.2': '8',
+        '6.1': '7',
+        '6.0': 'Vista',
+        '5.2': 'XP',
+        '5.1': 'XP',
+        '5.0': '2000',
+        '10.0': '10',
+        '11.0': '11' // 自定的，不是微软官方的判断方法
+      }
+      return wvHash[v] || v
+    },
+    Android: () => u.replace(/^.*Android ([\d.]+);.*$/, '$1'),
+    iOS: () => u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.'),
+    Debian: () => u.replace(/^.*Debian\/([\d.]+).*$/, '$1'),
+    'Windows Phone': () => u.replace(/^.*Windows Phone( OS)? ([\d.]+);.*$/, '$2'),
+    'macOS': () => u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.'),
+    WebOS: () => u.replace(/^.*hpwOS\/([\d.]+);.*$/, '$1')
+  }
+
+  dest.osVersion = ''
+  if (osVersion[dest.os]) {
+    dest.osVersion = osVersion[dest.os]()
+    if (dest.osVersion === u) {
+      dest.osVersion = ''
+    }
+  }
+
+  // 浏览器版本信息
+  const version = {
+    Safari: () => u.replace(/^.*Version\/([\d.]+).*$/, '$1'),
+    Chrome: () => u.replace(/^.*Chrome\/([\d.]+).*$/, '$1').replace(/^.*CriOS\/([\d.]+).*$/, '$1'),
+    IE: () => u.replace(/^.*MSIE ([\d.]+).*$/, '$1').replace(/^.*rv:([\d.]+).*$/, '$1'),
+    Edge: () => u.replace(/^.*(Edge|Edg|Edg[A-Z]{1})\/([\d.]+).*$/, '$2'),
+    Firefox: () => u.replace(/^.*Firefox\/([\d.]+).*$/, '$1').replace(/^.*FxiOS\/([\d.]+).*$/, '$1'),
+    'Firefox Focus': () => u.replace(/^.*Focus\/([\d.]+).*$/, '$1'),
+    Chromium: () => u.replace(/^.*Chromium\/([\d.]+).*$/, '$1'),
+    Opera: () => u.replace(/^.*Opera\/([\d.]+).*$/, '$1').replace(/^.*OPR\/([\d.]+).*$/, '$1'),
+    Vivaldi: () => u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1'),
+    Yandex: () => u.replace(/^.*YaBrowser\/([\d.]+).*$/, '$1'),
+    Kindle: () => u.replace(/^.*Version\/([\d.]+).*$/, '$1'),
+    Maxthon: () => u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1'),
+    QQBrowser: () => u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1'),
+    QQ: () => u.replace(/^.*QQ\/([\d.]+).*$/, '$1'),
+    Baidu: () => u.replace(/^.*BIDUBrowser[\s/]([\d.]+).*$/, '$1'),
+    UC: () => u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1'),
+    Sogou: () => u.replace(/^.*SE ([\d.X]+).*$/, '$1').replace(/^.*SogouMobileBrowser\/([\d.]+).*$/, '$1'),
+    '2345Explorer': () => u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1'),
+    TheWorld: () => u.replace(/^.*TheWorld ([\d.]+).*$/, '$1'),
+    MIUI: () => u.replace(/^.*MiuiBrowser\/([\d.]+).*$/, '$1'),
+    Quark: () => u.replace(/^.*Quark\/([\d.]+).*$/, '$1'),
+    Qiyu: () => u.replace(/^.*Qiyu\/([\d.]+).*$/, '$1'),
+    Wechat: () => u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1'),
+    Taobao: () => u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1'),
+    Alipay: () => u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1'),
+    Weibo: () => u.replace(/^.*weibo__([\d.]+).*$/, '$1'),
+    Douban: () => u.replace(/^.*com.douban.frodo\/([\d.]+).*$/, '$1'),
+    Suning: () => u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1'),
+    iQiYi: () => u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1'),
+  }
+
+  dest.version = ''
+  if (version[dest.browser]) {
+    dest.version = version[dest.browser]()
+    if (dest.version === u) {
+      dest.version = ''
+    }
+  }
+
+  // 简化版本号
+  /* if (_this.osVersion.indexOf('.')) {
+    _this.osVersion = _this.osVersion.substring(0, _this.osVersion.indexOf('.'))
+  } */
+  if (dest.version.indexOf('.')) {
+    dest.version = dest.version.substring(0, dest.version.indexOf('.'))
+  }
+
+  // 修正
+  if (dest.os === 'iOS' && u.includes('iPad')) {
+    dest.os = 'iPadOS'
+  } else if (dest.browser === 'Edge' && !u.includes('Edg')) {
+    dest.engine = 'EdgeHTML'
+  } else if (dest.browser === 'MIUI') {
+    dest.os = 'Android'
+  } else if (dest.browser === 'Chrome' && Number(dest.version) > 27) {
+    dest.engine = 'Blink'
+  } else if (dest.browser === 'Opera' && Number(dest.version) > 12) {
+    dest.engine = 'Blink'
+  } else if (dest.browser === 'Yandex') {
+    dest.engine = 'Blink'
+  } else if (dest.browser === undefined) {
+    dest.browser = 'Unknow App'
+  }
+
+  return dest
+}
+
+export default Detect

packages/artalk/src/lib/ui.ts

@@ -2,7 +2,7 @@ import * as Utils from './utils'
 import Context from '../context'
 
 /** 显示加载 */
-export function showLoading(parentElem: HTMLElement|Context) {
+export function showLoading(parentElem: HTMLElement|Context, conf?: { transparentBg?: boolean }) {
   if (parentElem instanceof Context) parentElem = parentElem.$root
 
   let $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
@@ -13,6 +13,7 @@ export function showLoading(parentElem: HTMLElement|Context) {
         <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
       </div>
     </div>`)
+    if (conf?.transparentBg) $loading.style.background = 'transparent'
     parentElem.appendChild($loading)
   }
   $loading.style.display = ''

packages/artalk/src/lib/utils.ts

@@ -140,66 +140,186 @@ export function versionCompare(a: string, b: string) {
   return 0
 }
 
-let markedInstance: typeof libMarked
-export function marked(ctx: Context, src: string): string {
-  if (!markedInstance) {
-    const renderer = new libMarked.Renderer()
-    const linkRenderer = renderer.link
-    renderer.link = (href, title, text) => {
-      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer as any, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-    }
-
-    // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-    const nMarked = libMarked
-    libMarked.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane(html, {
-        ...insane.defaults,
-        allowedAttributes: {
-          ...insane.defaults.allowedAttributes,
-          img: ['src', 'atk-emoticon']
-        },
-      }),
-      silent: true,
-    })
-
-    markedInstance = nMarked
+/** 初始化 marked */
+export function initMarked(ctx: Context) {
+  const renderer = new libMarked.Renderer()
+  const orgLinkRenderer = renderer.link
+  renderer.link = (href, title, text) => {
+    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = orgLinkRenderer.call(renderer as any, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
-  return markedInstance.parse(src)
+  renderer.code = (block, lang) => {
+    // Colorize the block only if the language is known to highlight.js
+    const realLang = (!lang ? 'plaintext' : lang)
+    let colorized = block
+    if ((window as any).hljs) {
+      if (realLang && (window as any).hljs.getLanguage(realLang)) {
+        colorized = (window as any).hljs.highlight(realLang, block).value
+      }
+    } else {
+      colorized = hanabi(block)
+    }
+
+    return `<pre rel="${realLang}">\n`
+      + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
+      + `</pre>`
+  }
+
+  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
+  const nMarked = libMarked
+  libMarked.setOptions({
+    renderer,
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: false,
+    silent: true,
+  })
+
+  ctx.markedInstance = nMarked
+}
+
+/** 解析 markdown */
+export function marked(ctx: Context, src: string): string {
+  // @link https://github.com/markedjs/marked/discussions/1232
+  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
+  let dest = insane(ctx.markedInstance.parse(src), {
+    allowedClasses: {},
+    allowedSchemes: ['http', 'https', 'mailto'],
+    allowedTags: [
+      'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
+      'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
+      'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
+    ],
+    allowedAttributes: {
+      '*': ['title', 'accesskey'],
+      a: ['href', 'name', 'target', 'aria-label', 'rel'],
+      img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
+      // for code highlight
+      code: ['class'],
+      span: ['class', 'style'],
+    },
+    filter: node => {
+      // allow hljs style
+      const allowed = [
+        [ 'code', /^hljs\W+language-(.*)$/ ],
+        [ 'span', /^(hljs-.*)$/ ]
+      ]
+      allowed.forEach(([ tag, reg ]) => {
+        if (
+          node.tag === tag
+          && !!node.attrs.class
+          && !(reg as RegExp).test(node.attrs.class)
+        ) {
+          delete node.attrs.class
+        }
+      })
+
+      // allow <span> set color sty
+      if (node.tag === 'span' && !!node.attrs.style
+          && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
+        delete node.attrs.style
+      }
+
+      return true
+    }
+  })
+
+  // 内容替换器
+  ctx.markedReplacers.forEach((replacer) => {
+    if (typeof replacer === 'function') dest = replacer(dest)
+  })
+
+  return dest
 }
 
 /** 获取修正后的 UserAgent */
 export async function getCorrectUserAgent() {
   const uaRaw = navigator.userAgent
-  const uaData = (navigator as any).userAgentData // @link https://web.dev/migrate-to-ua-ch/
-  if (!uaData || !uaData.getHighEntropyValues) {
+  if (!(navigator as any).userAgentData || !(navigator as any).userAgentData.getHighEntropyValues) {
     return uaRaw
   }
 
-  // microsoft f******k you!!!!!
-  // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+  // @link https://web.dev/migrate-to-ua-ch/
+  // @link https://web.dev/user-agent-client-hints/
+  const uaData = (navigator as any).userAgentData
   let uaGot: any = null
   try {
     uaGot = await uaData.getHighEntropyValues(["platformVersion"])
   } catch (err) { console.error(err); return uaRaw }
-
-  if (uaData.platform !== "Windows") { return uaRaw }
   const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
-  if (majorPlatformVersion >= 13) {
-    // Win11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
-    return uaRaw.replace(/Windows\W+NT\W+10.0/, 'Windows NT 11.0')
+
+  if (uaData.platform === "Windows") {
+    if (majorPlatformVersion >= 13) { // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+      // @date 2022-4-29
+      // Win 11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
+      return uaRaw.replace(/Windows NT 10.0/, 'Windows NT 11.0')
+    }
+  }
+  if (uaData.platform === "macOS") {
+    if (majorPlatformVersion >= 11) { // 11 => BigSur
+      // @date 2022-4-29
+      // (Intel Chip) macOS 12.3 样本："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
+      // (Arm Chip) macOS 样本："Mozilla/5.0 (Macintosh; ARM Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
+      return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`)
+    }
   }
 
   return uaRaw
 }
+
+/** 是否为完整的 URL */
+export function isValidURL(urlRaw: string) {
+  // @link https://www.rfc-editor.org/rfc/rfc3986
+  let url: URL
+  try {
+    url = new URL(urlRaw)
+  } catch (_) { return false }
+  return url.protocol === "http:" || url.protocol === "https:"
+}
+
+/** 获取基于 conf.server 的 URL */
+export function getURLBasedOnApi(ctx: Context, path: string) {
+  return getURLBasedOn(ctx.conf.server, path)
+}
+
+/** 获取基于某个 baseURL 的 URL */
+export function getURLBasedOn(baseURL: string, path: string) {
+  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
+}
+
+/**
+ * Performs a deep merge of `source` into `target`.
+ * Mutates `target` only but not its objects and arrays.
+ *
+ * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
+ * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
+ */
+export function mergeDeep(target: any, source: any) {
+  const isObject = (obj: any) => obj && typeof obj === 'object'
+
+  if (!isObject(target) || !isObject(source)) {
+    return source
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key]
+    const sourceValue = source[key]
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue)
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = mergeDeep({ ...targetValue}, sourceValue)
+    } else {
+      target[key] = sourceValue
+    }
+  })
+
+  return target
+}

packages/artalk/src/style/_color.less

@@ -2,8 +2,8 @@
   --at-color-font: #2a2e2e;
   --at-color-deep: #2a2e2e;
   --at-color-sub: #757575;
-  --at-color-grey: #999;
-  --at-color-meta: #757e91;
+  --at-color-grey: #747474;
+  --at-color-meta: #697182;
   --at-color-border: #eceff2;
   --at-color-light: #4285f4;
   --at-color-bg: #FFF;

packages/artalk/src/style/comment.less

@@ -167,6 +167,7 @@
         border-left: 3px solid #eee;
         margin-bottom: 10px;
         position: relative;
+        margin-top: 10px;
 
         .atk-meta {
           font-size: 15px;
@@ -212,6 +213,8 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
+        margin-bottom: -15px;
 
         & > span {
           color: var(--at-color-meta);
@@ -220,6 +223,7 @@
           display: inline-flex;
           cursor: pointer;
           user-select: none;
+          margin-bottom: 15px;
 
           &.atk-error, &.atk-error:hover {
             color: var(--at-color-red);

packages/artalk/src/style/list.less

@@ -19,9 +19,9 @@
       .atk-arrow-down-icon {
         cursor: pointer;
         vertical-align: middle;
-        border-top: 6px solid var(--at-color-grey);
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
+        border-top: 5px solid var(--at-color-grey);
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
         margin-top: -1px;
         margin-left: 0.4rem;
         display: inline-block;
@@ -127,7 +127,10 @@
   & > .atk-list-body {
     min-height: 150px;
 
-    & > .atk-list-comments-wrap {
+    .atk-list-comments-wrap {
+      .atk-main-editor {
+        margin-top: -1px;
+      }
     }
   }
 

packages/artalk/src/style/main.less

@@ -7,28 +7,48 @@
 }
 
 .artalk, .atk-layer-wrap {
+  line-height: @line-height;
+  color: var(--at-color-font);
+  font-family: @font-family;
+  word-wrap: break-word;
+  word-break: break-all;
+
   * {
     box-sizing: border-box;
-    line-height: @line-height;
+  }
+
+  input, textarea, button, optgroup, select {
+    font-family: inherit;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
+
+  code {
+    font-family: @codeFont;
+    margin: 0 .3em;
+    padding: .1em .2em;
+    background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    font-family: @font-family;
-    word-wrap: break-word;
-    word-break: break-all;
+    border-radius: @block-radius;
   }
 
   pre {
-    padding: 10px;
+    margin: 10px 0 0 0;
+    padding: 0;
+    line-height: 0;
+  }
+
+  pre code {
+    * { font-family: @codeFont; }
     line-height: @line-height;
+    display: block;
+    padding: 10px 15px;
+    white-space: pre-wrap;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    padding: 10px 15px;
-    border-radius: @block-radius;
     margin: 0;
-    font-family: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
-
-    code {
-      white-space: pre-wrap;
-    }
   }
 
   a {
@@ -55,6 +75,28 @@
   img {
     max-width: 100%;
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1.5em;
+    font-size: .96em
+  }
+
+  td, th {
+    text-align: left;
+    padding: 4px 8px 4px 10px;
+    border: 1px solid var(--at-color-border)
+  }
+
+  td {
+    vertical-align: top
+  }
+
+  tr:nth-child(even) {
+    background-color: var(--at-color-bg-grey);
+  }
 }
 
 .atk-hide {
@@ -156,6 +198,9 @@
 .atk-fade-out {
   animation: atkFadeOut both .2s;
 }
+.atk-rotate {
+  animation: atkRotate 2s linear infinite;
+}
 
 @keyframes atkFadeIn {
   0% { opacity: 0 }
@@ -167,6 +212,11 @@
   0% {}
 }
 
+@keyframes atkRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 i.atk-icon {
   width: 20px;
   height: 20px;
@@ -175,6 +225,7 @@ i.atk-icon {
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
   mask-position: center;
+  mask-size: contain;
 }
 
 .atk-icon-sync {
@@ -303,6 +354,41 @@ i.atk-icon {
         }
       }
     }
+
+    .atk-checker-iframe-wrap {
+      position: fixed;
+      z-index: 999998;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      width: 100vw;
+
+      & > iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+
+      .atk-close-btn {
+        z-index: 999999;
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        display: flex;
+        flex-direction: column;
+        width: 50px;
+        height: 50px;
+        align-items: center;
+        place-content: center;
+        cursor: pointer;
+        user-select: none;
+        margin-left: 10px;
+
+        &:hover .atk-icon-close {
+          background-color: rgba(232, 17, 35, 0.9);
+        }
+      }
+    }
   }
 }
 

packages/artalk/tsconfig.json

@@ -1,23 +1,8 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "lib": ["esnext", "dom"],
-    "moduleResolution": "node",
-    "strict": true,
-    "sourceMap": true,
-    "experimentalDecorators": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]

packages/artalk/types/artalk-config.d.ts

@@ -1,6 +1,6 @@
 export default interface ArtalkConfig {
   /** 装载元素 */
-  el: string
+  el: string|HTMLElement
 
   /** 页面唯一标识（完整 URL） */
   pageKey: string
@@ -80,8 +80,17 @@ export default interface ArtalkConfig {
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 
+  /** 评论列表排序功能 (显示 Dropdown) */
+  listSort?: boolean
+
+  /** 图片上传功能 */
+  imgUpload?: boolean
+
   /** 版本检测 */
   versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }
 
 export interface LocalUser {

packages/artalk/types/artalk-data.d.ts

@@ -87,6 +87,9 @@ export interface ListData {
 
   /** API 版本 */
   api_version: ApiVersionData
+
+  /** 后端配置 */
+  conf: any // TODO
 }
 
 export interface PageData {

packages/artalk/types/event.d.ts

@@ -8,6 +8,7 @@ export interface EventPayloadMap {
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
+  'conf-updated': undefined        // Artalk 配置变更时
 
   // List 操作（外部：不建议 listen，仅 trigger）
   'list-reload': undefined         // 重新加载 List
@@ -18,7 +19,7 @@ export interface EventPayloadMap {
   'list-refresh-ui': undefined     // 刷新 List UI
 
   // Sidebar
-  'sidebar-show': undefined           // 侧边栏显示
+  'sidebar-show': SidebarShowPayload  // 侧边栏显示
   'sidebar-hide': undefined           // 侧边栏隐藏
 
   // Editor
@@ -54,6 +55,7 @@ export interface NotifyConf {
 
 export interface CheckerCaptchaPayload extends CheckerPayload {
   imgData?: string
+  iframe?: string
 }
 
 export interface UnreadUpdatePayload {
@@ -68,6 +70,10 @@ export interface EditorReplyPayload {
   scroll?: boolean
 }
 
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'|string
+}
+
 // ============================================
 export interface Handler<P> {
   (payload: P): void

packages/artalk/types/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

packages/plugin-katex/README.md

@@ -0,0 +1,3 @@
+# @artalkjs/plugin-katex
+
+食用方法参考：[官方文档](https://artalk.js.org/guide/frontend/latex.html)

packages/plugin-katex/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>plugin-katex</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"></script>
+</head>
+<body>
+  <div id="comments"></div>
+
+  <script type="module">
+    import Artalk from 'artalk'
+    import './main.ts'
+    import 'artalk/dist/Artalk.css'
+
+    var artalk = new Artalk({
+      el: '#comments',
+      pageKey: 'https://artalk.js.org/',
+      pageTitle: 'Artalk Home',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
+      site: 'ArtalkDemo',
+    });
+  </script>
+</body>
+</html>

packages/plugin-katex/main.ts

@@ -0,0 +1,63 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+import Artalk from 'artalk'
+import katex from 'katex'
+
+// @link https://github.com/markedjs/marked/issues/1538#issuecomment-575838181
+Artalk.Use((ctx) => {
+  let i = 0
+  const nextID = () => `__atk_katext_id_${i++}__`
+  const mathExpressions: { [key: string]: { type: 'block' | 'inline', expression: string } } = {}
+
+  function replaceMathWithIds(text: string) {
+    // Allowing newlines inside of `$$...$$`
+    text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_match, expression) => {
+      const id = nextID()
+      mathExpressions[id] = { type: 'block', expression }
+      return id
+    })
+
+    // Not allowing newlines or space inside of `$...$`
+    text = text.replace(/\$([^\n]+?)\$/g, (_match, expression) => {
+      const id = nextID()
+      mathExpressions[id] = { type: 'inline', expression }
+      return id
+    })
+
+    return text
+  }
+
+  // Marked render
+  const renderer = new ctx.markedInstance.Renderer() as any
+
+  const orgListitem = renderer.listitem
+  const orgParagraph = renderer.paragraph
+  const orgTablecell = renderer.tablecell
+  const orgCodespan = renderer.codespan
+  const orgText = renderer.text
+
+  renderer.listitem = (text: string, task: boolean, checked: boolean) => orgListitem(replaceMathWithIds(text), task, checked)
+  renderer.paragraph = (text: string) => orgParagraph(replaceMathWithIds(text))
+  renderer.tablecell = (content: string, flags: any) => orgTablecell(replaceMathWithIds(content), flags)
+  renderer.codespan = (code: string) => orgCodespan(replaceMathWithIds(code))
+  renderer.text = (text: string) => orgText(replaceMathWithIds(text)) // Inline level, maybe unneded
+
+  ctx.markedReplacers.push((text) => {
+    text = text.replace(/(__atk_katext_id_\d+__)/g, (_match, capture) => {
+      const v = mathExpressions[capture]
+      const type = v.type
+      let expression = v.expression
+
+      // replace <br/> tag to \n
+      expression = expression.replace(/<br\s*\/?>/mg, "\n")
+
+      return katex.renderToString(expression, { displayMode: type === 'block' })
+    })
+
+    return text
+  })
+
+  ctx.markedInstance.use({
+    renderer
+  })
+})

packages/plugin-katex/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@artalkjs/plugin-katex",
+  "version": "0.1.2",
+  "license": "LGPL-3.0",
+  "description": "The katex plugin of artalk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "packages/plugin-katex"
+  },
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "main": "./dist/artalk-plugin-katex.js",
+  "unpkg": "./dist/artalk-plugin-katex.iife.js",
+  "jsdelivr": "./dist/artalk-plugin-katex.iife.js",
+  "module": "./dist/artalk-plugin-katex.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "prepublish": "pnpm build",
+    "publish": "pnpm publish --access=public"
+  },
+  "dependencies": {
+    "artalk": "workspace: *",
+    "katex": "^0.15.3"
+  },
+  "devDependencies": {
+    "@types/katex": "^0.14.0"
+  }
+}

packages/plugin-katex/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist"
+  },
+}

packages/plugin-katex/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  base: './',
+  build: {
+    target: 'es2015',
+    outDir: resolve(__dirname, "dist"),
+    minify: 'terser',
+    lib: {
+      entry: resolve(__dirname, './main.ts'),
+      name: 'artalk-plugin-katex',
+      fileName: (format) => ((format == "umd") ? 'artalk-plugin-katex.js' : `artalk-plugin-katex.${format}.js`),
+      formats: ["es", "umd", "iife"]
+    },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ['artalk', 'katex'],
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          artalk: 'Artalk',
+          katex: 'katex',
+        },
+        extend: true
+      }
+    }
+  },
+  plugins: [tsconfigPaths()],
+})

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "types": ["vite/client"]
+  }
+}