v2.3.3

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

.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-     ["@babel/preset-env", {
-       "modules": "umd",
-       "useBuiltIns": "entry",
-       "corejs": 3
-     }]
-   ],
-   "plugins": [
-     "babel-plugin-add-module-exports",
-     "babel-plugin-class-display-name",
-     "@babel/plugin-transform-runtime"
-   ]
- }

.circleci/config.yml

@@ -0,0 +1,31 @@
+version: 2.1
+orbs:
+  node: circleci/node@5.0.2
+jobs:
+  build:
+    docker:
+      - image: 'cimg/node:16.15.0'
+    steps:
+      - node/install
+      - checkout
+      - run:
+          name: Print the node version
+          command: node -v
+      - run:
+          name: Install pnpm
+          command: npm i -g pnpm@7.1.2
+      - run:
+          name: Install Dependencies
+          command: pnpm install --frozen-lockfile
+      - run:
+          name: Build Artalk
+          command: pnpm build:all
+
+workflows:
+  tests:
+    jobs:
+      - build:
+          filters:
+            branches:
+              ignore:
+                - gh-pages

.eslintignore

@@ -0,0 +1,11 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage
+
+vite*.config*
+
+# 不检测 js
+**/*.js

.eslintrc.js

@@ -1,33 +1,44 @@
 module.exports = {
   root: true,
-  parser: '@typescript-eslint/parser',
-  env: {
-    browser: true
+  parser: "@typescript-eslint/parser",
+  env: { "browser": true} ,
+  parserOptions: {
+    project: ['./packages/*/tsconfig.json'],
+    tsconfigRootDir: __dirname,
   },
   extends: [
+    'airbnb-base',
     'airbnb-typescript/base',
     'prettier',
-    'prettier/@typescript-eslint',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    "plugin:compat/recommended",
   ],
-  plugins: ['@typescript-eslint', 'prettier', 'import'],
+  plugins: ['@typescript-eslint', 'import'],
   rules: {
-    'no-console': 0,
-    'arrow-parens': 0,
-    'generator-star-spacing': 0,
+    'no-alert': 'off',
     'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    'class-methods-use-this': 0,
-    'no-param-reassign': 0,
     'no-plusplus': 0,
-    'global-require': 0,
-    'import/no-cycle': 0, /** TODO: 待优化（未来计划） */
-    'import/no-extraneous-dependencies': 0,
-    'lines-between-class-members': 0
+    'no-param-reassign': 0,
+    'no-console': 0,
+    'no-constructor-return': 0,
+    'class-methods-use-this': 0,
+    'spaced-comment': 0,
+    'no-lonely-if': 0,
+    'prefer-destructuring': 0,
+    'import/no-cycle': 0,
+    '@typescript-eslint/lines-between-class-members': 0,
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-use-before-define': 0,
   },
   settings: {
     'import/resolver': {
-      // use <root>/tsconfig.json
-      'typescript': {},
-    }
-  }
+      typescript: {
+        "project": [__dirname + "/packages/*/tsconfig.json"]
+      },
+    },
+    'polyfills': [
+      'AbortController'
+    ]
+  },
 }

.github/renovate.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["config:base", "schedule:weekly"],
+  "branchPrefix": "chore/",
+  "labels": ["dependencies"],
+  "rangeStrategy": "bump",
+  "reviewers": [
+    "qwqcode",
+    "kecrily"
+  ]
+}

.github/workflows/npm.yml

@@ -0,0 +1,74 @@
+# https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+name: NPM Publish
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  publish:
+    # prevents this action from running on forks
+    if: github.repository == 'ArtalkJS/Artalk'
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7.1.2
+
+    - 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: pnpm build
+
+    - name: Publish
+      run: cd packages/artalk && pnpm publish --no-git-checks
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+    # GitHub Packages
+    #
+    # Setup .npmrc file to publish to GitHub Packages
+    # - uses: actions/setup-node@v2
+    #   with:
+    #     registry-url: 'https://npm.pkg.github.com'
+    # # Publish to GitHub Packages
+    # - run: npm publish
+    #   env:
+    #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  # Docs Update
+  docs-update:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get the version
+        id: get_version
+        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\/v/}
+
+      - name: Checkout ArtalkDocs
+        uses: actions/checkout@v3
+        with:
+          repository: ArtalkJS/Docs
+          token: ${{ secrets.PAT }}
+
+      - 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
+        with:
+          commit_message: Update Artalk CDN link to v${{ steps.get_version.outputs.VERSION }}

.github/workflows/pages.yml

@@ -0,0 +1,41 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Use pnpm
+      uses: pnpm/action-setup@v2.2.2
+      with:
+        version: 7.1.2
+
+    - 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 && pnpm predeploy
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_branch: gh-pages
+        publish_dir: ./packages/artalk/deploy
+        user_name: 'github-actions[bot]'
+        user_email: 'github-actions[bot]@users.noreply.github.com'

.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
@@ -13,4 +18,6 @@ yarn-error.log*
 *.sln
 .history
 
-/deploy
+dist
+deploy
+local

.npmignore

@@ -0,0 +1,57 @@
+.DS_Store
+node_modules/
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.history
+.editorconfig
+
+# git
+.gitignore
+.gitattributes
+
+# tests
+test
+coverage
+
+# build tools
+.travis.yml
+.jenkins.yml
+.codeclimate.yml
+
+# linters
+.jscsrc
+.jshintrc
+.eslintrc*
+
+# vite configs
+vite*.config*
+
+# develop tool configs
+.prettierrc
+.eslintrc.js
+.eslintignore
+postcss.config.js
+
+yarn.lock
+package-lock.json
+
+# local files
+deploy
+local
+CNAME
+index.html
+#dist
+
+.github

.travis.yml

@@ -0,0 +1,18 @@
+language: node_js
+
+node_js:
+  - lts/*
+
+script:
+  - pnpm run lint
+  - pnpm run build
+
+cache:
+  npm: false
+  directories:
+    - "~/.pnpm-store"
+before_install:
+  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7.1.2
+  - pnpm config set store-dir ~/.pnpm-store
+install:
+  - pnpm install

LICENSE

@@ -1,339 +1,165 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 2, June 1991
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
 
- Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ 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 licenses for most software are designed to take away your
-freedom to share and change it.  By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change free
-software--to make sure the software is free for all its users.  This
-General Public License applies to most of the Free Software
-Foundation's software and to any other program whose authors commit to
-using it.  (Some other Free Software Foundation software is covered by
-the GNU Lesser General Public License instead.)  You can apply it to
-your programs, too.
+  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.
 
-  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
-this service 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.
+  0. Additional Definitions.
 
-  To protect your rights, we need to make restrictions that forbid
-anyone to deny you these rights or to ask you to surrender the rights.
-These restrictions translate to certain responsibilities for you if you
-distribute copies of the software, or if you modify it.
+  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.
 
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must give the recipients all the rights that
-you have.  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.
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
 
-  We protect your rights with two steps: (1) copyright the software, and
-(2) offer you this license which gives you legal permission to copy,
-distribute and/or modify the software.
+  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.
 
-  Also, for each author's protection and ours, we want to make certain
-that everyone understands that there is no warranty for this free
-software.  If the software is modified by someone else and passed on, we
-want its recipients to know that what they have is not the original, so
-that any problems introduced by others will not reflect on the original
-authors' reputations.
+  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".
 
-  Finally, any free program is threatened constantly by software
-patents.  We wish to avoid the danger that redistributors of a free
-program will individually obtain patent licenses, in effect making the
-program proprietary.  To prevent this, we have made it clear that any
-patent must be licensed for everyone's free use or not licensed at all.
+  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 precise terms and conditions for copying, distribution and
-modification follow.
+  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.
 
-                    GNU GENERAL PUBLIC LICENSE
-   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+  1. Exception to Section 3 of the GNU GPL.
 
-  0. This License applies to any program or other work which contains
-a notice placed by the copyright holder saying it may be distributed
-under the terms of this General Public License.  The "Program", below,
-refers to any such program or work, and a "work based on the Program"
-means either the Program or any derivative work under copyright law:
-that is to say, a work containing the Program or a portion of it,
-either verbatim or with modifications and/or translated into another
-language.  (Hereinafter, translation is included without limitation in
-the term "modification".)  Each licensee is addressed as "you".
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
 
-Activities other than copying, distribution and modification are not
-covered by this License; they are outside its scope.  The act of
-running the Program is not restricted, and the output from the Program
-is covered only if its contents constitute a work based on the
-Program (independent of having been made by running the Program).
-Whether that is true depends on what the Program does.
+  2. Conveying Modified Versions.
 
-  1. You may copy and distribute 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 and disclaimer of warranty; keep intact all the
-notices that refer to this License and to the absence of any warranty;
-and give any other recipients of the Program a copy of this License
-along with the Program.
+  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:
 
-You may charge a fee for the physical act of transferring a copy, and
-you may at your option offer warranty protection in exchange for a fee.
+   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
 
-  2. You may modify your copy or copies of the Program or any portion
-of it, thus forming a work based on the Program, and copy and
-distribute such modifications or work under the terms of Section 1
-above, provided that you also meet all of these conditions:
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
 
-    a) You must cause the modified files to carry prominent notices
-    stating that you changed the files and the date of any change.
+  3. Object Code Incorporating Material from Library Header Files.
 
-    b) You must cause any work that you distribute or publish, that in
-    whole or in part contains or is derived from the Program or any
-    part thereof, to be licensed as a whole at no charge to all third
-    parties under the terms of this License.
+  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:
 
-    c) If the modified program normally reads commands interactively
-    when run, you must cause it, when started running for such
-    interactive use in the most ordinary way, to print or display an
-    announcement including an appropriate copyright notice and a
-    notice that there is no warranty (or else, saying that you provide
-    a warranty) and that users may redistribute the program under
-    these conditions, and telling the user how to view a copy of this
-    License.  (Exception: if the Program itself is interactive but
-    does not normally print such an announcement, your work based on
-    the Program is not required to print an announcement.)
+   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.
 
-These requirements apply to the modified work as a whole.  If
-identifiable sections of that work are not derived from the Program,
-and can be reasonably considered independent and separate works in
-themselves, then this License, and its terms, do not apply to those
-sections when you distribute them as separate works.  But when you
-distribute the same sections as part of a whole which is a work based
-on the Program, the distribution of the whole must be on the terms of
-this License, whose permissions for other licensees extend to the
-entire whole, and thus to each and every part regardless of who wrote it.
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
 
-Thus, it is not the intent of this section to claim rights or contest
-your rights to work written entirely by you; rather, the intent is to
-exercise the right to control the distribution of derivative or
-collective works based on the Program.
+  4. Combined Works.
 
-In addition, mere aggregation of another work not based on the Program
-with the Program (or with a work based on the Program) on a volume of
-a storage or distribution medium does not bring the other work under
-the scope of this License.
+  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:
 
-  3. You may copy and distribute the Program (or a work based on it,
-under Section 2) in object code or executable form under the terms of
-Sections 1 and 2 above provided that you also do one 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.
 
-    a) Accompany it with the complete corresponding machine-readable
-    source code, which must be distributed under the terms of Sections
-    1 and 2 above on a medium customarily used for software interchange; or,
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
 
-    b) Accompany it with a written offer, valid for at least three
-    years, to give any third party, for a charge no more than your
-    cost of physically performing source distribution, a complete
-    machine-readable copy of the corresponding source code, to be
-    distributed under the terms of Sections 1 and 2 above on a medium
-    customarily used for software interchange; or,
+   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.
 
-    c) Accompany it with the information you received as to the offer
-    to distribute corresponding source code.  (This alternative is
-    allowed only for noncommercial distribution and only if you
-    received the program in object code or executable form with such
-    an offer, in accord with Subsection b above.)
+   d) Do one of the following:
 
-The source code for a work means the preferred form of the work for
-making modifications to it.  For an executable work, complete source
-code means all the source code for all modules it contains, plus any
-associated interface definition files, plus the scripts used to
-control compilation and installation of the executable.  However, as a
-special exception, the source code distributed need not include
-anything that is normally distributed (in either source or binary
-form) with the major components (compiler, kernel, and so on) of the
-operating system on which the executable runs, unless that component
-itself accompanies the executable.
+       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.
 
-If distribution of executable or object code is made by offering
-access to copy from a designated place, then offering equivalent
-access to copy the source code from the same place counts as
-distribution of the source code, even though third parties are not
-compelled to copy the source along with the object code.
+       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.
 
-  4. You may not copy, modify, sublicense, or distribute the Program
-except as expressly provided under this License.  Any attempt
-otherwise to copy, modify, sublicense or distribute the Program is
-void, and will automatically terminate your rights under this License.
-However, parties who have received copies, or rights, from you under
-this License will not have their licenses terminated so long as such
-parties remain in full compliance.
+   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. You are not required to accept this License, since you have not
-signed it.  However, nothing else grants you permission to modify or
-distribute the Program or its derivative works.  These actions are
-prohibited by law if you do not accept this License.  Therefore, by
-modifying or distributing the Program (or any work based on the
-Program), you indicate your acceptance of this License to do so, and
-all its terms and conditions for copying, distributing or modifying
-the Program or works based on it.
+  5. Combined Libraries.
 
-  6. Each time you redistribute the Program (or any work based on the
-Program), the recipient automatically receives a license from the
-original licensor to copy, distribute or modify the Program subject to
-these terms and conditions.  You may not impose any further
-restrictions on the recipients' exercise of the rights granted herein.
-You are not responsible for enforcing compliance by third parties to
-this License.
+  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:
 
-  7. If, as a consequence of a court judgment or allegation of patent
-infringement or for any other reason (not limited to patent issues),
-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
-distribute so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you
-may not distribute the Program at all.  For example, if a patent
-license would not permit royalty-free redistribution of the Program by
-all those who receive copies directly or indirectly through you, then
-the only way you could satisfy both it and this License would be to
-refrain entirely from distribution of the Program.
+   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.
 
-If any portion of this section is held invalid or unenforceable under
-any particular circumstance, the balance of the section is intended to
-apply and the section as a whole is intended to apply in other
-circumstances.
+   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.
 
-It is not the purpose of this section to induce you to infringe any
-patents or other property right claims or to contest validity of any
-such claims; this section has the sole purpose of protecting the
-integrity of the free software distribution system, which is
-implemented by public license practices.  Many people have made
-generous contributions to the wide range of software distributed
-through that system in reliance on consistent application of that
-system; it is up to the author/donor to decide if he or she is willing
-to distribute software through any other system and a licensee cannot
-impose that choice.
+  6. Revised Versions of the GNU Lesser General Public License.
 
-This section is intended to make thoroughly clear what is believed to
-be a consequence of the rest of this 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.
 
-  8. If the distribution and/or use of the Program is restricted in
-certain countries either by patents or by copyrighted interfaces, the
-original copyright holder who places the Program under this License
-may add an explicit geographical distribution limitation excluding
-those countries, so that distribution is permitted only in or among
-countries not thus excluded.  In such case, this License incorporates
-the limitation as if written in the body of this License.
+  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.
 
-  9. The Free Software Foundation may publish revised and/or new versions
-of the 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 a version number of this License which applies to it and "any
-later version", you have the option of following the terms and conditions
-either of that version or of any later version published by the Free
-Software Foundation.  If the Program does not specify a version number of
-this License, you may choose any version ever published by the Free Software
-Foundation.
-
-  10. If you wish to incorporate parts of the Program into other free
-programs whose distribution conditions are different, write to the author
-to ask for permission.  For software which is copyrighted by the Free
-Software Foundation, write to the Free Software Foundation; we sometimes
-make exceptions for this.  Our decision will be guided by the two goals
-of preserving the free status of all derivatives of our free software and
-of promoting the sharing and reuse of software generally.
-
-                            NO WARRANTY
-
-  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, 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.
-
-  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
-REDISTRIBUTE 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.
-
-                     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
-convey 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 2 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, write to the Free Software Foundation, Inc.,
-    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If the program is interactive, make it output a short notice like this
-when it starts in an interactive mode:
-
-    Gnomovision version 69, Copyright (C) year name of author
-    Gnomovision 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, the commands you use may
-be called something other than `show w' and `show c'; they could even be
-mouse-clicks or menu items--whatever suits your program.
-
-You should also get your employer (if you work as a programmer) or your
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary.  Here is a sample; alter the names:
-
-  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
-  `Gnomovision' (which makes passes at compilers) written by James Hacker.
-
-  <signature of Ty Coon>, 1 April 1989
-  Ty Coon, President of Vice
-
-This 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.
+  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.en.md

@@ -0,0 +1,143 @@
+<p align="center">
+<img src="https://user-images.githubusercontent.com/22412567/137740516-d9e97af0-fb3b-4dab-b331-671a9a2a3a63.png" alt="Artalk" width="100%">
+</p>
+
+# Artalk
+
+[![](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)
+[![CircleCI](https://circleci.com/gh/ArtalkJS/Artalk/tree/master.svg?style=svg)](https://circleci.com/gh/ArtalkJS/Artalk/tree/master)
+
+> 🌌 A Self-hosted comment system
+
+[简体中文](./README.md) / [Documentation](https://artalk.js.org) / [Releases](https://github.com/ArtalkJS/ArtalkGo/releases) / [ArtalkGo](https://github.com/ArtalkJS/ArtalkGo)
+
+---
+
+- 🍃 Lightweight (~30kB)
+- 👨‍👧‍👦 Secure (Self-hosted)
+- 🐳 Easy to use (Very Easy)
+- 🍱 Golang backend (Fast and Cross Platform)
+- 🌊 TypeScript × Vanilla × Vite (No Dependencies)
+
+## Features
+
+- Sidebar: Multi-site centralized management
+- Notification Center: Red badge alert / Mark as read
+- Verification: User Verification Badge / Password access
+- Moderation: Anti-spam detection / Captcha frequency limit
+- Emoticons: Insert emoji / Quickly import presets
+- Email Notify: Template customization / Send to multi-admin
+- Site Isolation: Multi-site management / Admin assignment
+- Page Management: Provide page title / Easy to look up
+- Image Upload: Upload to localhost / various remote image host
+- Private Space Mode: Only visible to yourself / Message board
+- Multiple Msg Pushers: Support Telegram / Slack / LINE
+- Nested Comments: Switchable to Flat Mode
+- Comment Vote: For or against comments
+- Comment Sort: Sort by popularity or time
+- Comment PIN: Pin important comments
+- Track only author: Show only author's comments
+- Asynchronous: Send comments without waiting
+- Infinite Scrolling: Provide various comment content pagination custom
+- AutoSave: A anti-lost editor
+- AutoFill: Autofill user profile
+- Preview: Real-time preview of markdown
+- Dark Mode: Prevents eye disease damage
+- Collapse Comment: I do not want you to see this comment
+- Data Backup: Prevent comment data loss
+- Data Migration: Switch back and forth between different commenting systems
+- Multiple comments on one page: Multiple comment areas on one page (seems useless
+- Markdown: Markdown syntax was supported by default
+- LaTex support: Import KaTex plugin to integrate LaTex parser for artalk
+- Using [Vite](https://github.com/vitejs/vite): The ultimate developer experience
+
+## Getting Started
+
+Reference to：[**Documentation**](https://artalk.js.org/guide/deploy.html)
+
+```sh
+$ pnpm add artalk
+```
+
+```ts
+import Artalk from 'artalk'
+
+new Artalk({
+  el:        '#Comments',
+  pageKey:   'http://your_domain/post/1', // Page Link
+  pageTitle: 'The title of your page',    // Page Title
+  server:    'http://localhost:8080/api', // Server URL
+  site:      'Site Name',
+  i18n:      'en-US'
+})
+```
+
+### Docker
+
+```sh
+# Create a directory for Artalk
+mkdir Artalk
+cd Artalk
+
+# Download config template
+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
+```
+
+## Contributors
+
+[![](https://contrib.rocks/image?repo=ArtalkJS/Artalk)](https://github.com/ArtalkJS/Artalk/graphs/contributors)
+
+## Supporters
+
+[![Stargazers repo roster for @ArtalkJS/Artalk](https://reporoster.com/stars/ArtalkJS/Artalk)](https://github.com/ArtalkJS/Artalk/stargazers)
+
+## Feedback
+
+Thanks for the help and feedback provided by the community, if you have good suggestions or comments, please go to [issues](https://github.com/ArtalkJS/Artalk/issues) to let us know at any time.
+
+## Stargazers over time
+
+[![Stargazers over time](https://starchart.cc/ArtalkJS/Artalk.svg)](https://starchart.cc/ArtalkJS/Artalk)
+
+## 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)
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk?ref=badge_large)

README.md

@@ -1,99 +1,234 @@
 <p align="center">
-<img src="./docs/banner.png" alt="Artalk" width="200">
+<img src="https://user-images.githubusercontent.com/22412567/137740516-d9e97af0-fb3b-4dab-b331-671a9a2a3a63.png" alt="Artalk" width="100%">
 </p>
 
-# [Artalk](https://artalk.js.org)
-> 一款简洁有趣的自托管评论系统
+# Artalk
 
 [![](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://img.shields.io/github/last-commit/qwqcode/Artalk/master.svg?style=flat-square)](https://github.com/qwqcode/Artalk/commits/master)
-[![](https://img.shields.io/github/issues-raw/qwqcode/Artalk.svg?style=flat-square)](https://github.com/qwqcode/Artalk/issues)
-[![](https://img.shields.io/github/issues-pr-raw/qwqcode/Artalk.svg?style=flat-square)](https://github.com/qwqcode/Artalk/pulls)
-[![](https://img.shields.io/github/license/qwqcode/Artalk.svg?style=flat-square)](./LICENSE)
-[![](https://img.shields.io/badge/%24-donate-%23ff69b4.svg?style=flat-square)](#捐助)
+[![](https://badgen.net/bundlephobia/minzip/artalk?style=flat-square)](https://bundlephobia.com/package/artalk)
+[![CircleCI](https://circleci.com/gh/ArtalkJS/Artalk/tree/master.svg?style=svg)](https://circleci.com/gh/ArtalkJS/Artalk/tree/master)
+
+> 🌌 Golang 自托管评论系统
+
+[English](./README.en.md) / [官方文档](https://artalk.js.org) / [最新后端](https://github.com/ArtalkJS/ArtalkGo/releases) / [ArtalkGo](https://github.com/ArtalkJS/ArtalkGo)
+
+---
+
+- 🍃 轻量 (~30kB)
+- 👨‍👧‍👦 安全 (自托管)
+- 🐳 易上手 (防秃顶)
+- 🍱 Golang 后端 (快速 / 跨平台)
+- 🌊 TypeScript × Vanilla × Vite (纯天然 / 无依赖)
 
 ## 特性
-- 轻量简洁 (~23kB gzipped)
-- 有趣有爱
-- 自托管
-- Markdown
-- 表情自定
-- 滑稽表情包
-- 管理员密码，防冒名
-- 验证码，提交频率限制
-- 通知中心，邮件提醒
-- 无限层级回复
-- 滚动自动加载
-- 评论打分
-- TypeScript
 
-[查看 DEMO](https://artalk.js.org)
+- 侧 边 栏 ：多站点集中化管理
+- 通知中心：红点的标记 / 已读记录
+- 身份验证：徽标自定义 / 密码验证
+- 评论审核：反垃圾检测 / 验证码频率限制
+- 表情符号：插入表情包 / 快速导入表情包
+- 邮件提醒：模版自定义 / 多管理员通知
+- 站点隔离：多站点管理 / 管理员分配
+- 页面管理：标题可显示 / 快速跳转
+- 图片上传：上传到本地 / 多种图床
+- 树洞模式：仅自己可见 / 说说功能
+- 多元推送：支持钉钉飞书 TG
+- 无限层级：可切换为平铺模式
+- 评论投票：赞同还是反对评论
+- 评论排序：按热度或时间排序
+- 评论置顶：重要消息置顶显示
+- 只看作者：仅显示作者的评论
+- 异步处理：发送评论无需等待
+- 滚动加载：评论内容分页处置
+- 自动保存：用户输入防丢功能
+- 自动填充：用户链接自动填充
+- 实时预览：评论内容实时预览
+- 暗黑模式：防止眼部疾病伤害
+- 评论折叠：这个不打算给你康
+- 数据备份：防止评论数据丢失
+- 数据迁移：在不同评论系统之间来回切换
+- 一页多评：一页多个评论区（似乎没啥用
+- Markdown：语法默认支持
+- 支持 Latex：引入 Artalk 的 Katex 插件
+- 使用 [Vite](https://github.com/vitejs/vite)：开发者的极致体验
 
-## 食用
+## 食用方针
 
-> 生产环境版下载：[Artalk.js](https://raw.githubusercontent.com/qwqcode/Artalk/master/dist/Artalk.js) | [Artalk.css](https://raw.githubusercontent.com/qwqcode/Artalk/master/dist/Artalk.css)
+前往：[“**文档 · 部署**”](https://artalk.js.org/guide/deploy.html)
 
-1. 部署 Artalk 的后端，[PHP 版传送门](https://github.com/qwqcode/Artalk-API-PHP)
-2. 前端页面配置 Artalk 如下：
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- ... -->
-  <link href="dist/Artalk.css" rel="stylesheet">
-  <script type="text/javascript" src="dist/Artalk.js"></script>
-</head>
-<body>
-  <div id="ArtalkComments"></div>
-  <script>
-  new Artalk({
-    el: '#ArtalkComments',
-    placeholder: '来啊，快活啊 (/ω＼)',
-    noComment: '快来成为第一个评论的人吧~',
-    defaultAvatar: 'mp',
-    pageKey: '[页面唯一标识]',
-    serverUrl: '[后端程序URL]',
-    readMore: {
-      pageSize: 15, // 每次请求获取评论数
-      autoLoad: true // 滚动到底部自动加载
-    }
-  });
-  </script>
-</body>
-</html>
+```sh
+$ pnpm add artalk
 ```
 
-更多配置项详见 [types/artalk-config.d.ts](./types/artalk-config.d.ts)
+```ts
+import Artalk from 'artalk'
 
-## 开发
+new Artalk({
+  el:        '#Comments',
+  pageKey:   'http://your_domain/post/1', // 页面链接
+  pageTitle: '关于如何引入 Artalk 这档子事', // 页面标题
+  server:    'http://localhost:8080/api', // 后端地址
+  site:      'Artalk 的博客 (你的站点名)',
+})
+```
 
-```bash
-git clone https://github.com/qwqcode/Artalk.git
+### Docker
+
+```sh
+# 为 Artalk 创建一个目录
+mkdir Artalk
 cd Artalk
-yarn install
 
-# Dev
-yarn run dev
+# 下载配置文件模版
+curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
 
-# Build
-yarn run build
+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
 ```
 
-Made with ♥ by QWQAQ
+### Docker Compose
 
-## 捐助
+```sh
+mkdir Artalk
+cd Artalk
 
-如果您愿意给予我一点点支持与帮助，可以通过下面的方式向我捐助，爱你~~~ (/ω＼)
+vim docker-compose.yaml
+```
 
-| Alipay | Wechat | 
-| :------: | :------: | 
-| <img width="150" src="https://raw.githubusercontent.com/qwqcode/donate-qwqaq/master/docs/donate/alipay.png"> | <img width="150" src="https://raw.githubusercontent.com/qwqcode/donate-qwqaq/master/docs/donate/wechat.png"> | 
+```yaml
+version: "3.5"
+services:
+  artalk:
+    container_name: artalk
+    image: artalk/artalk-go
+    ports:
+      - 8080:23366
+    volumes:
+      - ./conf.yml:/conf.yml
+      - ./data:/data
+```
 
-捐助者的名字将保存于 [捐助者名单](https://github.com/qwqcode/donate-qwqaq)
+```sh
+docker-compose up -d
+```
 
-最后，我再次对您致以我最最最最最诚挚的感谢！
+## Contributors
+
+[![](https://contrib.rocks/image?repo=ArtalkJS/Artalk)](https://github.com/ArtalkJS/Artalk/graphs/contributors)
+
+## Supporters
+
+[![Stargazers repo roster for @ArtalkJS/Artalk](https://reporoster.com/stars/ArtalkJS/Artalk)](https://github.com/ArtalkJS/Artalk/stargazers)
+
+## 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) 随时告知。
+
+## Stargazers over time
+
+[![Stargazers over time](https://starchart.cc/ArtalkJS/Artalk.svg)](https://starchart.cc/ArtalkJS/Artalk)
 
 ## License
-[GPL-2.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)
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FArtalkJS%2FArtalk?ref=badge_large)

dist/Artalk.css

@@ -1,5 +0,0 @@
-/*!
- * Artalk v1.0.4
- * (c) 2016-2020 qwqaq.com
- * Link: https://github.com/qwqcode/Artalk
- */.artalk{position:relative;width:100%;min-height:200px}.artalk *,.artalk-layer-wrap *{line-height:1.6em;color:#565a5f;font-family:Helvetica Neue,PingFangSC-Light,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;word-wrap:break-word}.artalk-layer-wrap pre,.artalk pre{line-height:1.6em;background-color:#f6f6f6;color:#555;padding:5px 10px;border-radius:2px;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}.artalk-layer-wrap a,.artalk a{color:#0083ff;text-decoration:none}.artalk-layer-wrap blockquote,.artalk blockquote{position:static;margin:10px 0;padding:10px 20px;background:#fcfcfc;border-left:4px solid #eee}.artalk-layer-wrap p:first-child,.artalk p:first-child{margin-top:0}.artalk-layer-wrap p:last-child,.artalk p:last-child{margin-bottom:0}.artalk *,.artalk-layer-wrap *{box-sizing:border-box}.artalk-error-layer,.artalk-layer-dialog-wrap,.artalk-loading,.full-layer{width:100%;height:100%;position:absolute;top:0;left:0;background:#fff;z-index:10;align-items:center;justify-content:center;flex-flow:column;display:flex}.artalk-loading{z-index:11}.artalk-loading-spinner{position:relative;width:50px;height:50px}.artalk-loading-spinner svg{-webkit-animation:artalkRotate 2s linear infinite;animation:artalkRotate 2s linear infinite;transform-origin:center center;width:100%;height:100%;position:absolute;top:0;left:0}.artalk-loading-spinner svg circle{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:artalkDash 1.5s ease-in-out infinite,artalkColor 6s ease-in-out infinite;animation:artalkDash 1.5s ease-in-out infinite,artalkColor 6s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes artalkRotate{to{transform:rotate(1turn)}}@keyframes artalkRotate{to{transform:rotate(1turn)}}@-webkit-keyframes artalkDash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes artalkDash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@-webkit-keyframes artalkColor{0%,to{stroke:#ff5652}40%{stroke:#2196f3}66%{stroke:#32c787}80%,90%{stroke:#ffc107}}@keyframes artalkColor{0%,to{stroke:#ff5652}40%{stroke:#2196f3}66%{stroke:#32c787}80%,90%{stroke:#ffc107}}@-webkit-keyframes artalkLoadingIconRotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes artalkLoadingIconRotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.artalk-loading-icon{border-radius:100%;margin:0;border:1px solid #0083ff;border-bottom-color:transparent;height:15px;width:15px;background:0 0!important;display:inline-block;-webkit-animation:artalkLoadingIconRotate .75s linear 0s infinite;animation:artalkLoadingIconRotate .75s linear 0s infinite;vertical-align:middle}.artalk-fade-in{-webkit-animation:artalkFadeIn .3s both;animation:artalkFadeIn .3s both}.artalk-fade-out{-webkit-animation:artalkFadeOut .2s both;animation:artalkFadeOut .2s both}@-webkit-keyframes artalkFadeIn{0%{opacity:0}to{opacity:1}}@keyframes artalkFadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes artalkFadeOut{to{opacity:0}}@keyframes artalkFadeOut{to{opacity:0}}.artalk-error-layer{background-color:hsla(0,0%,100%,.94)}.artalk-error-layer .artalk-error-title{color:#ff5652}.artalk-error-layer .artalk-error-text{text-align:center}.artalk-layer-dialog-wrap{background-color:hsla(0,0%,100%,.94)}.artalk-layer-dialog-wrap>.artalk-layer-dialog{width:30%}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-content .artalk-captcha-img{cursor:pointer;width:100px;height:auto;margin-right:10px;padding-right:10px;border-right:1px solid #eee;vertical-align:bottom}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-content input{width:100%;line-height:29px;border:1px solid #999;border-radius:2px;outline:none;padding:0 6px;display:block;margin-top:10px;margin-bottom:5px;text-align:center}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-action{display:flex;flex-direction:row}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-action button{flex:1;display:block;cursor:pointer;border:1px solid #0083ff;background:transparent;color:#0083ff;border-radius:2px;padding:0 15px;line-height:25px;outline:none}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-action button:active{color:#fff;background:#0083ff}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-action button:not(:last-child){margin-right:5px}.artalk-layer-dialog-wrap>.artalk-layer-dialog>.artalk-layer-dialog-action button.error{color:#fff;background:#ff5652;border-color:#ff5652}@media only screen and (max-width:768px){.artalk-layer-dialog-wrap>.artalk-layer-dialog{width:90%!important}}.artalk-notify{display:block;overflow:hidden;background-cLine truncated

dist/Artalk.js

@@ -1,13 +0,0 @@
-/*!
- * Artalk v1.0.4
- * (c) 2016-2020 qwqaq.com
- * Link: https://github.com/qwqcode/Artalk
- */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Artalk",[],t):"object"==typeof exports?exports.Artalk=t():e.Artalk=t()}(window,function(){return d=[function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},function(e,t){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}},function(e,t,n){var r=n(20);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t,n){var r=n(11),a=n(8);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?a(e):t}},function(t,e){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n},function(i,l,s){var e,t,n;t=[l,s(0),s(9)],void 0===(n="function"==typeof(e=function(e,t,n){"use strict";var r=s(1);Object.defineProperty(e,"__esModule",{value:true}),e["default"]=void 0,t=r(t);var a=function e(){(0,t["default"])(this,e);this.artalk=n.ArtalkInstance};(e["default"]=a).displayName="ArtalkContext",i.exports=l.default})?e.apply(l,t):e)||(i.exports=n)},function(i,l,s){var e,t,n;t=[l,s(0),s(2)],void 0===(n="function"==typeof(e=function(e,t,n){"use strict";var r=s(1);Object.defineProperty(e,"__esModule",{value:true}),e["default"]=void 0,t=r(t),n=r(n);var a=function(){function e(){(0,t["default"])(this,e)}(0,n["default"])(e,null,[{key:"createElement",value:function e(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"";var n=document.createElement("div");n.innerHTML=t.trim();return n.firstElementChild||n}},{key:"getHeight",value:function e(t){return parseFloat(getComputedStyle(t,null).height.replace("px",""))}},{key:"htmlEncode",value:function e(t){var n=document.createElement("div");n.innerText=t;var r=n.innerHTML;n=null;return r}},{key:"htmlDecode",value:function e(t){var n=document.createElement("div");n.innerHTML=t;var r=n.innerText;n=null;return r}},{key:"getLocationParmByName",value:function e(t){var n=RegExp("[?&]".concat(t,"=([^&]*)")).exec(window.location.search);return n&&decodeURIComponent(n[1].replace(/\+/g," "))}},{key:"getOffset",value:function e(t){var n=t.getBoundingClientRect();return{top:n.top+window.scrollY,left:n.left+window.scrollX}}}]);return e}();(e["default"]=a).displayName="Utils",i.exports=l.default})?e.apply(l,t):e)||(i.exports=n)},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t,h){var n,r,a;r=[t,h(0),h(2),h(15),h(16),h(18),h(19),h(32),h(38),h(41)],void 0===(a="function"==typeof(n=function(n,r,e,t,l,s,a,i,o,c){"use strict";var u=h(1);Object.defineProperty(n,"__esModule",{value:true}),n["default"]=n.ArtalkInstance=void 0,r=u(r),e=u(e),l=u(l),s=u(s),a=u(a),i=u(i),o=u(o),c=u(c);var d={el:"",placeholder:"来啊，快活啊 (/ω＼)",noComment:"快来成为第一个评论的人吧~",defaultAvatar:"mp",pageKey:"",serverUrl:"",emoticons:h(42),gravatar:{cdn:"https://gravatar.loli.net/avatar/"}},f=null;n.ArtalkInstance=f;var p=function(){function t(e){(0,r["default"])(this,t);this.conf=e;console.log("\n %c "+"Artalk v".concat("1.0.4"," %c 一款简洁有趣的自托管评论系统 \n\n%c")+"> https://artalk.js.org\n"+"> https://github.com/qwqcode/Artalk\n"+"> https://qwqaq.com\n","color: #FFF; background: #1DAAFF; padding:5px 0;","color: #FFF; background: #656565; padding:5px 0;","");n.ArtalkInstance=f=this;this.conf=Object.assign(d,this.conf);try{this.el=document.querySelector(this.conf.el);if(this.el===null){throw Error('Sorry, Target element "'.concat(this.conf.el,'" was not found.'))}}catch(e){console.error(e);throw new Error("Artalk config `el` error")}this.el.classList.add("artalk");this.ui=new c["default"];this.initUser();this.initMarked();this.editor=new a["default"];this.list=new i["default"];this.sidebar=new o["default"]}(0,e["default"])(t,[{key:"initUser",value:function e(){var t=JSON.parse(window.localStorage.getItem("ArtalkUser")||"{}");this.user={nick:t.nick||"",email:t.email||"",link:t.link||"",password:t.password||"",isAdmin:t.isAdmin||false}}},{key:"saveUser",value:function e(){window.localStorage.setItem("ArtalkUser",JSON.stringify(this.user))}},{key:"checkHasBasicUserInfo",value:function e(){return!!this.user.nick&&!!this.user.email}},{key:"initMarked",value:function e(){var a=new l["default"].Renderer;var i=a.link;a.link=function(e,t,n){var r=i.call(a,e,t,n);return r.replace(/^<a /,'<a target="_blank" rel="nofollow" ')};var t=l["default"];tLine truncated
-/*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-e.exports=function(e){return null!=e&&(n(e)||"function"==typeof(t=e).readFloatLE&&"function"==typeof t.slice&&n(t.slice(0,0))||!!e._isBuffer);var t}},function(e,t,n){},function(module,exports){module.exports=function anonymous(locals,filters,escape,rethrow){escape=escape||function(e){return String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&#39;").replace(/"/g,"&quot;")};var __stack={lineno:1,input:'<div class="artalk-list">\n  <div class="artalk-list-header">\n    <div class="artalk-comment-count">\n      <span class="artalk-comment-count-num">0</span>\n      条评论\n    </div>\n    <div class="artalk-right-action">\n      <span data-action="open-sidebar" style="display: none;">通知中心</span>\n    </div>\n  </div>\n  <div class="artalk-list-body">\n    <div class="artalk-list-comments-wrap">\n    </div>\n    <div class="artalk-list-read-more" style="display: none;">\n      <div class="artalk-loading-icon" style="display: none;"></div>\n      <span class="artalk-text">查看更多</span>\n    </div>\n  </div>\n  <div class="artalk-list-footer">\n    <div class="artalk-copyright">\n      Powered By <a href="https://artalk.js.org" target="_blank" title="qwqcode/Artalk v<%= ARTALK_VERSION %>">Artalk</a>\n    </div>\n  </div>\n</div>\n',filename:"."};function rethrow(e,t,n,r){var a=t.split("\n"),i=Math.max(r-3,0),l=Math.min(a.length,r+3),s=a.slice(i,l).map(function(e,t){var n=t+i+1;return(n==r?" >> ":"    ")+n+"| "+e}).join("\n");throw e.path=n,e.message=(n||"ejs")+":"+r+"\n"+s+"\n\n"+e.message,e}try{var buf=[];with(locals||{})buf.push('<div class="artalk-list">\n  <div class="artalk-list-header">\n    <div class="artalk-comment-count">\n      <span class="artalk-comment-count-num">0</span>\n      条评论\n    </div>\n    <div class="artalk-right-action">\n      <span data-action="open-sidebar" style="display: none;">通知中心</span>\n    </div>\n  </div>\n  <div class="artalk-list-body">\n    <div class="artalk-list-comments-wrap">\n    </div>\n    <div class="artalk-list-read-more" style="display: none;">\n      <div class="artalk-loading-icon" style="display: none;"></div>\n      <span class="artalk-text">查看更多</span>\n    </div>\n  </div>\n  <div class="artalk-list-footer">\n    <div class="artalk-copyright">\n      Powered By <a href="https://artalk.js.org" target="_blank" title="qwqcode/Artalk v',escape((__stack.lineno=21,"1.0.4")),'">Artalk</a>\n    </div>\n  </div>\n</div>\n');return buf.join("")}catch(e){rethrow(e,__stack.input,__stack.filename,__stack.lineno)}}},function(g,v,k){var e,t,n;t=[v,k(0),k(2),k(8),k(3),k(4),k(5),k(10),k(39),k(6),k(7),k(12)],void 0===(n="function"==typeof(e=function(e,r,a,i,l,s,o,c,t,n,u,d){"use strict";var f=k(1);function p(r){return function(){var e=(0,o["default"])(r),t;if(h()){var n=(0,o["default"])(this).constructor;t=Reflect.construct(e,arguments,n)}else{t=e.apply(this,arguments)}return(0,s["default"])(this,t)}}function h(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Date.prototype.toString.call(Reflect.construct(Date,[],function(){}));return true}catch(e){return false}}Object.defineProperty(e,"__esModule",{value:true}),e["default"]=void 0,r=f(r),a=f(a),i=f(i),l=f(l),s=f(s),o=f(o),c=f(c),n=f(n),u=f(u),d=f(d);var m=function(e){(0,l["default"])(n,e);var t=p(n);function n(){var e;(0,r["default"])(this,n);e=t.call(this);e.el=u["default"].createElement(k(40)((0,i["default"])(e)));e.layer=new d["default"]("sidebar",e.el);e.contentEl=e.el.querySelector(".artalk-sidebar-content");e.el.querySelector(".artalk-sidebar-close").addEventListener("click",function(){e.hide()});return e}(0,a["default"])(n,[{key:"show",value:function e(){var n=this;this.layer.show();this.contentEl.scrollTo(0,0);setTimeout(function(){n.el.style.transform="translate(0, 0)"},20);this.artalk.request("CommentReplyGet",{nick:this.artalk.user.nick,email:this.artalk.user.email},function(){n.artalk.ui.showLoading(n.contentEl)},function(){n.artalk.ui.hideLoading(n.contentEl)},function(e,t){n.contentEl.innerHTML="";if(Array.isArray(t.reply_comments)){t.reply_comments.forEach(function(e){n.putComment(e)})}},function(e,t){})}},{key:"hide",value:function e(){this.el.style.transform="";this.layer.hide()}},{key:"putComment",value:function e(t){var n=new c["default"](null,t);n.elem.querySelector('[data-comment-action="reply"]').remove();n.elem.style.cursor="pointer";n.elem.addEventListener("mouseover",function(){n.elem.style.backgroundColor="#F4F4F4"});n.elem.addEventListener("mouseout",function(){n.elem.style.backgroundColor=""});n.elem.addEventListener("click",function(e){e.preventDefault();window.location.href="".concat(t.page_key,"#artalk-comment-").concat(n.data.id)});this.contentEl.appendChild(n.getElem())}}]);return n}(n["default"]);(e["default"]=m).displayName="Sidebar",g.exports=v.default})?e.apply(v,t):e)||(g.exports=n)},function(e,t,n){},function(moLine truncated

docs/README.md

@@ -1,2 +0,0 @@
-# Artalk
-> 一款简洁有趣的自托管评论系统

docs/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Artalk - 一款简洁有趣的自托管评论系统</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="一款简洁有趣的自托管评论系统">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-</head>
-<body>
-  <div id="app"></div>
-  <script>
-    window.$docsify = {
-      name: 'Artalk',
-      repo: 'https://github.com/qwqcode/Artalk'
-    }
-  </script>
-  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
-</body>
-</html>

index-tpl.ejs

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-    body { padding:45px 10px;margin:0;background:#f4f4f4 }
-    .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
-    .card:not(:last-child) { margin-bottom:10px }
-    .card.billboard { text-align: center; }
-    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
-    .title > a:hover { margin-left:0 }
-    .title > a > span { opacity:0 }
-    .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
-    .social { margin-top:20px }
-    .social > a:not(:last-child) { margin-right:2px }
-  </style>
-</head>
-<body>
-  <div class="card billboard">
-    <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>
-    <div class="desc">一款简洁有趣的自托管评论系统</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/qwqcode/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/qwqcode/Artalk?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/qwqcode/Artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk#%E6%8D%90%E5%8A%A9" target="_blank"><img src="https://img.shields.io/badge/%24-donate-%23ff69b4.svg?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/qwqcode/Artalk.svg?style=social"></a>
-    </div>
-  </div>
-  <div class="card">
-    <div id="comments"></div>
-  </div>
-  <script>
-    var artalk = new Artalk({
-      el: '#comments',
-      placeholder: '来啊，快活啊 (/ω＼)',
-      defaultAvatar: 'mp',
-      pageKey: 'https://artalk.js.org/',
-      serverUrl: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/' : 'https://qwqaq.com/Artalk/index.php',
-      readMore: {
-        pageSize: 15,
-        autoLoad: true
-      }
-    })
-  </script>
-</body>
-</html>

index.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Artalk DEMO</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-    body { padding:45px 10px;margin:0;background:#f4f4f4 }
-    .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px }
-    .card:not(:last-child) { margin-bottom:10px }
-    .card.billboard { text-align: center; }
-    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
-    .title > a:hover { margin-left:0 }
-    .title > a > span { opacity:0 }
-    .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
-    .social { margin-top:20px }
-    .social > a:not(:last-child) { margin-right:2px }
-  </style>
-<link href="dist/Artalk.css?864ece85c9b2d3868105" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?864ece85c9b2d3868105"></script></head>
-<body>
-  <div class="card billboard">
-    <div class="title"><a href="https://github.com/qwqcode/Artalk" target="_blank"><span>&gt; </span>Artalk<span> &lt;</span></a></div>
-    <div class="desc">一款简洁有趣的自托管评论系统</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/qwqcode/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/qwqcode/Artalk?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/qwqcode/Artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk#%E6%8D%90%E5%8A%A9" target="_blank"><img src="https://img.shields.io/badge/%24-donate-%23ff69b4.svg?style=flat-square"></a>
-      <a href="https://github.com/qwqcode/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/qwqcode/Artalk.svg?style=social"></a>
-    </div>
-  </div>
-  <div class="card">
-    <div id="comments"></div>
-  </div>
-  <script>
-    var artalk = new Artalk({
-      el: '#comments',
-      placeholder: '来啊，快活啊 (/ω＼)',
-      defaultAvatar: 'mp',
-      pageKey: 'https://artalk.js.org/',
-      serverUrl: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/' : 'https://qwqaq.com/Artalk/index.php',
-      readMore: {
-        pageSize: 15,
-        autoLoad: true
-      }
-    })
-  </script>
-</body>
-</html>

index.js

@@ -1,7 +0,0 @@
-/* eslint-disable */
-'use strict'
-
-var Artalk = require('./dist/Artalk.js')
-
-module.exports = Artalk
-module.exports.default = module.exports

local/.gitignore

@@ -1,2 +0,0 @@
-*
-!.gitignore

package.json

@@ -1,79 +1,36 @@
 {
-  "name": "artalk",
-  "version": "1.0.4",
-  "description": "一款简洁有趣的自托管评论系统",
-  "author": "qwqcode <1149527164@qq.com> (https://github.com/qwqcode)",
-  "keywords": [
-    "Artalk",
-    "comment-system"
-  ],
-  "license": "GPL-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/qwqcode/Artalk.git"
-  },
-  "bugs": {
-    "url": "https://github.com/qwqcode/Artalk/issues"
-  },
-  "homepage": "https://github.com/qwqcode/Artalk#readme",
-  "main": "dist/Artalk.js",
-  "types": "./types/index.d.ts",
+  "name": "artalk-monorepo",
+  "private": true,
+  "homepage": "https://artalk.js.org",
   "scripts": {
-    "start": "yarn run dev",
-    "dev": "webpack-dev-server --mode development --hot --colors",
-    "build": "webpack --mode production",
-    "copy:deploy": "mkdir -p deploy && rm -rf deploy/* && cp index.html deploy && cp -r dist deploy && cp -r docs deploy && cp docs/CNAME deploy",
-    "predeploy": "yarn run build && yarn run copy:deploy",
-    "deploy": "gh-pages -d deploy",
-    "lint": "eslint --ext .js,.ts -f ./node_modules/eslint-friendly-formatter src"
+    "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": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/register": "^7.0.0",
-    "@babel/runtime": "^7.3.4",
-    "@types/marked": "^0.6.5",
-    "@types/webpack-env": "^1.14.0",
-    "@typescript-eslint/eslint-plugin": "^2.3.0",
-    "@typescript-eslint/parser": "^2.3.0",
-    "autoprefixer": "^9.6.1",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-class-display-name": "^2.1.0",
-    "copy-webpack-plugin": "^5.0.4",
-    "css-loader": "^1.0.0",
-    "ejs-compiled-loader": "^1.1.0",
-    "eslint": "^6.4.0",
-    "eslint-config-airbnb-typescript": "^5.0.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-import-resolver-typescript": "^1.1.1",
-    "eslint-loader": "^3.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "gh-pages": "^2.1.1",
-    "hanabi": "^0.4.0",
-    "html-webpack-plugin": "^3.2.0",
-    "less": "^3.11.1",
-    "less-loader": "^6.0.0",
-    "marked": "^0.7.0",
-    "md5": "^2.2.1",
-    "mini-css-extract-plugin": "^0.8.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.18.2",
-    "style-loader": "^1.0.0",
-    "ts-loader": "^6.2.0",
-    "typescript": "^3.6.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "^2.1.0",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
+    "@rollup/plugin-dynamic-import-vars": "1.4.3",
+    "@types/node": "16.11.36",
+    "@typescript-eslint/eslint-plugin": "5.26.0",
+    "@typescript-eslint/parser": "5.26.0",
+    "autoprefixer": "10.4.7",
+    "eslint": "8.16.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-airbnb-typescript": "17.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-plugin-compat": "4.0.2",
+    "eslint-plugin-import": "2.26.0",
+    "less": "4.1.2",
+    "postcss": "8.4.14",
+    "prettier": "2.6.2",
+    "rollup": "2.75.3",
+    "typescript": "4.7.2",
+    "vite": "2.9.9",
+    "vite-tsconfig-paths": "3.5.0"
   },
-  "dependencies": {
-    "core-js": "3"
-  }
+  "browserslist": [
+    "supports es6 and supports es6-class and supports es6-generators and supports es6-module-dynamic-import and supports es6-module and supports es6-number and supports es6-string-includes"
+  ]
 }

packages/artalk-sidebar/index.html

@@ -0,0 +1,31 @@
+<!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>Artalk Sidebar</title>
+</head>
+<body>
+  <div id="ArtalkSidebar"></div>
+
+  <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.DEV) ? 'http://localhost:23366' : '../',
+      pageKey,
+      site,
+      darkMode,
+    }, user, view)
+  </script>
+</body>
+</html>

packages/artalk-sidebar/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@artalkjs/artalk-sidebar",
+  "version": "0.2.0",
+  "license": "LGPL-3.0",
+  "description": "The sidebar of artalk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "packages/artalk-sidebar"
+  },
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "scripts": {
+    "dev": "vite --port 23367",
+    "build": "pnpm lint && vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.ts src"
+  },
+  "dependencies": {
+    "artalk": "workspace: *"
+  }
+}

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

@@ -0,0 +1,271 @@
+import '../style/page-list.less'
+
+import Context from 'artalk/types/context'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { PageData } from 'artalk/types/artalk-data'
+import ActionBtn from 'artalk/src/components/action-btn'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
+
+export default class PageList extends Component {
+  $pageList!: HTMLElement
+  $editor?: HTMLElement
+  $inputer?: HTMLElement
+
+  pages: PageData[] = []
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
+
+    this.$el = Utils.createElement(`<div class="atk-page-list-wrap"></div>`)
+  }
+
+  /** 初始化 PageList (清空列表) */
+  initPageList() {
+    this.pages = []
+
+    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>
+    <div class="atk-page-list"></div>
+    `
+
+    this.$pageList = this.$el.querySelector('.atk-page-list')!
+
+    // 缓存操作按钮
+    const $cacheFlushBtn = this.$el.querySelector<HTMLElement>('.atk-cache-flush-all-btn')!
+    $cacheFlushBtn.onclick = () => { this.ctx.getApi().cacheFlushAll().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+    const $cacheWarmBtn = this.$el.querySelector<HTMLElement>('.atk-cache-warm-up-btn')!
+    $cacheWarmBtn.onclick = () => { this.ctx.getApi().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 this.ctx.getApi().pageFetch(undefined, undefined, true)
+        return status
+      }
+      const startWatchdog = () => {
+        $updateAllTitleIcon.classList.add('atk-rotate')
+
+        // 不完美的轮询更新状态
+        const timerID = window.setInterval(async () => {
+          const d = await this.ctx.getApi().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 this.ctx.getApi().pageFetch(undefined, this.sidebar.curtSite)
+        } catch (err: any) {
+          alert(err.msg)
+          done()
+        }
+      }
+    })()
+  }
+
+  /** 导入 Page 数据 */
+  importPages(pages: PageData[]) {
+    this.pages.push(...pages)
+
+    pages.forEach((page) => {
+      const $page = this.renderPage(page)
+      this.$pageList.append($page)
+    })
+  }
+
+  /** Page Element */
+  renderPage(page: PageData) {
+    const $page = Utils.createElement(
+      `<div class="atk-page-item">
+        <div class="atk-page-main">
+          <div class="atk-title"></div>
+          <div class="atk-sub"></div>
+        </div>
+        <div class="atk-page-actions">
+          <div class="atk-item atk-edit-btn">
+            <i class="atk-icon atk-icon-edit"></i>
+          </div>
+        </div>
+      </div>`)
+
+    const $main = $page.querySelector<HTMLElement>('.atk-page-main')!
+    const $title = $main.querySelector<HTMLElement>('.atk-title')!
+    const $sub = $main.querySelector<HTMLElement>('.atk-sub')!
+    const $editBtn = $page.querySelector<HTMLElement>('.atk-edit-btn')!
+
+    $title.innerText = page.title
+    $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
+  }
+
+  /** 显示编辑器 */
+  showEditor(page: PageData, $page: HTMLElement) {
+    this.closeEditor()
+
+    this.$editor = Utils.createElement(
+    `<div class="atk-page-edit-layer">
+      <div class="atk-page-main-actions">
+        <div class="atk-item atk-title-edit-btn">标题修改</div>
+        <div class="atk-item atk-key-edit-btn">KEY 变更</div>
+        <div class="atk-item atk-admin-only-btn"></div>
+      </div>
+      <div class="atk-page-actions">
+        <div class="atk-item atk-sync-btn">
+          <i class="atk-icon atk-icon-sync"></i>
+        </div>
+        <div class="atk-item atk-del-btn">
+          <i class="atk-icon atk-icon-del"></i>
+        </div>
+        <div class="atk-item atk-close-btn">
+          <i class="atk-icon atk-icon-close"></i>
+        </div>
+      </div>
+    </div>`)
+    $page.prepend(this.$editor)
+
+    const $titleEditBtn = this.$editor.querySelector<HTMLElement>('.atk-title-edit-btn')!
+    const $keyEditBtn = this.$editor.querySelector<HTMLElement>('.atk-key-edit-btn')!
+    const $adminOnlyBtn = this.$editor.querySelector<HTMLElement>('.atk-admin-only-btn')!
+    const $syncBtn = this.$editor.querySelector<HTMLElement>('.atk-sync-btn')!
+    const $delBtn = this.$editor.querySelector<HTMLElement>('.atk-del-btn')!
+    const $closeBtn = this.$editor.querySelector<HTMLElement>('.atk-close-btn')!
+    const showLoading = () => { Ui.showLoading(this.$editor!) }
+    const hideLoading = () => { Ui.hideLoading(this.$editor!) }
+    const showError = (msg: string) => { window.alert(msg) }
+
+    // 关闭编辑器
+    $closeBtn.onclick = () => this.closeEditor()
+
+    // 文本编辑
+    const openTextEditor = (key: string) => {
+      const textEditor = new ItemTextEditor({
+        initValue: page[key] || '',
+        onYes: async (val: string) => {
+          Ui.showLoading(textEditor.$el)
+          let p: PageData
+          try {
+            p = await this.ctx.getApi().pageEdit({ ...page, [key]: val })
+          } catch (err: any) {
+            showError(`修改失败：${err.msg || '未知错误'}`)
+            console.error(err)
+            return false
+          } finally { Ui.hideLoading(textEditor.$el) }
+          $page.replaceWith(this.renderPage(p))
+          return true
+        }
+      })
+      textEditor.appendTo(this.$editor!)
+    }
+
+    // 标题修改
+    $titleEditBtn.onclick = () => openTextEditor('title')
+
+    // Key 修改
+    $keyEditBtn.onclick = () => openTextEditor('key')
+
+    // 仅管理员可评
+    const adminOnlyActionBtn = new ActionBtn(this.ctx, {
+      text: () => {
+        $adminOnlyBtn.classList.remove('atk-green', 'atk-yellow')
+        $adminOnlyBtn.classList.add(!page.admin_only ? 'atk-green' : 'atk-yellow')
+        return (!page.admin_only) ? '所有人可评' : '管理员可评'
+      }
+    }).appendTo($adminOnlyBtn)
+
+    $adminOnlyBtn.onclick = async () => {
+      showLoading()
+      let p: PageData
+      try {
+        p = await this.ctx.getApi().pageEdit({ ...page, admin_only: !page.admin_only })
+      } catch (err: any) {
+        showError(`修改失败：${err.msg || '未知错误'}`)
+        console.log(err)
+        return
+      } finally { hideLoading() }
+      page.admin_only = p.admin_only
+      adminOnlyActionBtn.updateText()
+    }
+
+    // 同步操作
+    $syncBtn.onclick = async () => {
+      showLoading()
+      let p: PageData
+      try {
+        p = (await this.ctx.getApi().pageFetch(page.id)).page
+      } catch (err: any) {
+        showError(`同步失败：${err.msg || '未知错误'}`)
+        console.log(err)
+        return
+      } finally { hideLoading() }
+      $page.replaceWith(this.renderPage(p))
+    }
+
+    // 删除
+    $delBtn.onclick = () => {
+      const del = async () => {
+        showLoading()
+        try {
+          await this.ctx.getApi().pageDel(page.key, page.site_name)
+        } catch (err: any) {
+          console.log(err)
+          showError(`删除失败 ${String(err)}`)
+          return
+        } finally { hideLoading() }
+        $page.remove()
+      }
+      if (window.confirm(
+        `确认删除页面 "${page.title || page.key}"？将会删除所有相关数据`
+      )) del()
+    }
+  }
+
+  /** 关闭编辑器 */
+  public closeEditor() {
+    if (!this.$editor) return
+
+    this.$editor.remove()
+  }
+}

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

@@ -0,0 +1,97 @@
+import '../style/site-list.less'
+
+import Context from 'artalk/types/context'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { SiteData } from 'artalk/types/artalk-data'
+
+interface SiteListFloaterConf {
+  onSwitchSite: (siteName: string) => boolean|void
+  onClickSitesViewBtn: () => void
+}
+
+export default class SiteListFloater {
+  ctx: Context
+  conf: SiteListFloaterConf
+  $el: HTMLElement
+  sites: SiteData[] = []
+  $sites: HTMLElement
+
+  constructor(ctx: Context, conf: SiteListFloaterConf) {
+    this.ctx = ctx
+    this.conf = conf
+    this.$el = Utils.createElement(
+    `<div class="atk-site-list-floater" style="display: none;">
+      <div class="atk-sites"></div>
+    </div>`)
+    this.$sites = this.$el.querySelector('.atk-sites')!
+  }
+
+  /** 装载 */
+  public async load(selectedSite?: string) {
+    this.$sites.innerHTML = ''
+
+    const renderSiteItem = (siteName: string, siteLogo: string, siteTarget?: string, onclick?: Function) => {
+      const $site = Utils.createElement(
+        `<div class="atk-site-item">
+          <div class="atk-site-logo"></div>
+          <div class="atk-site-name"></div>
+        </div>`)
+        $site.onclick = !onclick ? () => this.switch(siteTarget || siteName) : () => onclick()
+        $site.setAttribute('data-name', siteTarget || siteName)
+        const $siteLogo = $site.querySelector<HTMLElement>('.atk-site-logo')!
+        const $siteName = $site.querySelector<HTMLElement>('.atk-site-name')!
+        $siteLogo.innerText = siteLogo
+        $siteName.innerText = siteName
+        if (selectedSite === (siteTarget || siteName)) $site.classList.add('atk-active')
+        this.$sites.append($site)
+    }
+
+    renderSiteItem('所有站点', '_', '__ATK_SITE_ALL')
+
+    const sites = await this.ctx.getApi().siteGet()
+    sites.forEach((site) => {
+      renderSiteItem(site.name, site.name.substring(0, 1))
+    })
+
+    renderSiteItem('站点管理', '+', '', () => { this.conf.onClickSitesViewBtn();this.hide() })
+  }
+
+  /** 切换站点 */
+  private switch(siteName: string) {
+    if (this.conf.onSwitchSite(siteName) === false) { return }
+
+    // set active
+    this.$sites.querySelectorAll('.atk-site-item').forEach(e => {
+      if (e.getAttribute('data-name') !== siteName) {
+        e.classList.remove('atk-active')
+      } else {
+        e.classList.add('atk-active')
+      }
+    })
+
+    this.hide()
+  }
+
+  private outsideChecker?: (evt: MouseEvent) => void // outside checker
+
+  /** 显示 */
+  public show($trigger?: HTMLElement) {
+    this.$el.style.display = ''
+
+    // 点击外部隐藏
+    if ($trigger) {
+      this.outsideChecker = (evt: MouseEvent) => {
+        const isClickInside = $trigger.contains(evt.target as any)||this.$el.contains(evt.target as any)
+        if (!isClickInside) { this.hide() }
+      }
+      document.addEventListener('click', this.outsideChecker)
+    }
+  }
+
+  /** 隐藏 */
+  public hide() {
+    this.$el.style.display = 'none'
+    if (this.outsideChecker) document.removeEventListener('click', this.outsideChecker)
+  }
+}

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

@@ -0,0 +1,297 @@
+import '../style/site-list.less'
+
+import Context from 'artalk/types/context'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { SiteData } from 'artalk/types/artalk-data'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
+
+export default class SiteList extends Component {
+  sites: SiteData[] = []
+
+  $header: HTMLElement
+  $headerTitle: HTMLElement
+  $headerActions: HTMLElement
+  $rowsWrap: HTMLElement
+
+  $editor?: HTMLElement
+  activeSite: string = ''
+
+  $add?: HTMLElement
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
+
+    this.$el = Utils.createElement(
+    `<div class="atk-site-list">
+      <div class="atk-header">
+        <div class="atk-title"></div>
+        <div class="atk-actions">
+          <div class="atk-item atk-site-add-btn"><i class="atk-icon atk-icon-plus"></i></div>
+        </div>
+      </div>
+      <div class="atk-site-rows-wrap"></div>
+    </div>`)
+
+    this.$header = this.$el.querySelector('.atk-header')!
+    this.$headerTitle = this.$header.querySelector('.atk-title')!
+    this.$headerActions = this.$header.querySelector('.atk-actions')!
+    this.$rowsWrap = this.$el.querySelector('.atk-site-rows-wrap')!
+
+    // 标题
+    this.$headerTitle.innerText = `共 0 个站点`
+
+    // 新建站点按钮
+    const $addBtn = this.$headerActions.querySelector<HTMLElement>('.atk-site-add-btn')!
+    $addBtn.onclick = () => {
+      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[]) {
+    this.sites = sites
+    this.activeSite = ''
+    this.$rowsWrap.innerHTML = ''
+    this.$headerTitle.innerText = `共 0 个站点`
+
+    let $row: HTMLElement
+
+    for (let i = 0; i < sites.length; i++) {
+      const site = sites[i]
+
+      if (i % 4 === 0) { // 每 4 个 item 为一行
+        $row = Utils.createElement('<div class="atk-site-row">')
+        this.$rowsWrap.append($row)
+      }
+
+      // 创建 site item
+      const $site = this.renderSite(site, $row!)
+      $row!.append($site)
+    }
+
+    this.$headerTitle.innerText = `共 ${sites.length} 个站点`
+  }
+
+  public renderSite(site: SiteData, $row: HTMLElement) {
+    const $site = Utils.createElement(
+      `<div class="atk-site-item">
+        <div class="atk-site-logo"></div>
+        <div class="atk-site-name"></div>
+      </div>`)
+
+    const $siteLogo = $site.querySelector<HTMLElement>('.atk-site-logo')!
+    const $siteName = $site.querySelector<HTMLElement>('.atk-site-name')!
+    const setActive = () => { $site.classList.add('atk-active') }
+
+    $siteLogo.innerText = site.name.substring(0, 1)
+    $siteName.innerText = site.name
+
+    // click
+    $site.onclick = () => {
+      this.closeEditor()
+      this.closeAdd()
+      setActive()
+      this.showEditor(site, $site, $row)
+    }
+
+    if (this.activeSite === site.name) { setActive() }
+
+    return $site
+  }
+
+  public showEditor(site: SiteData, $site: HTMLElement, $row: HTMLElement) {
+    this.activeSite = site.name
+    this.$editor = Utils.createElement(`
+    <div class="atk-site-edit">
+    <div class="atk-header">
+      <div class="atk-site-info">
+        <span class="atk-site-name"></span>
+        <span class="atk-site-urls"></span>
+      </div>
+      <div class="atk-close-btn">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <div class="atk-main">
+      <div class="atk-site-text-actions">
+        <div class="atk-item atk-rename-btn">重命名</div>
+        <div class="atk-item atk-edit-url-btn">修改 URL</div>
+        <!--<div class="atk-item atk-export-btn">导出</div>
+        <div class="atk-item atk-import-btn">导入</div>-->
+      </div>
+      <div class="atk-site-btn-actions">
+        <div class="atk-item atk-del-btn">
+          <i class="atk-icon atk-icon-del"></i>
+        </div>
+      </div>
+    </div>
+    </div>`)
+
+    // 插入
+    $row.before(this.$editor)
+
+    // header
+    const $siteName = this.$editor.querySelector<HTMLElement>('.atk-site-name')!
+    const $siteUrls = this.$editor.querySelector<HTMLElement>('.atk-site-urls')!
+    const $closeBtn = this.$editor.querySelector<HTMLElement>('.atk-close-btn')!
+    $closeBtn.onclick = () => this.closeEditor()
+
+    const update = (s: SiteData) => {
+      site = s
+      $siteName.innerText = site.name
+      $siteName.onclick = () => { if (site.first_url) window.open(site.first_url) }
+      $siteUrls.innerHTML = ''
+      site.urls?.forEach(u => {
+        const $item = Utils.createElement('<span class="atk-url-item"></span>')
+        $siteUrls.append($item)
+        $item.innerText = (u || '').replace(/\/$/, '')
+        $item.onclick = () => { window.open(u) }
+      })
+    }
+    update(site)
+
+    // actions
+    const $main = this.$editor.querySelector<HTMLElement>('.atk-main')!
+    const $actions = this.$editor.querySelector<HTMLElement>('.atk-site-text-actions')!
+    const $renameBtn = $actions.querySelector<HTMLElement>('.atk-rename-btn')!
+    const $editUrlBtn = $actions.querySelector<HTMLElement>('.atk-edit-url-btn')!
+    // const $exportBtn = $actions.querySelector<HTMLElement>('.atk-export-btn')!
+    // const $importBtn = $actions.querySelector<HTMLElement>(`.atk-import-btn`)!
+    const $delBtn = this.$editor.querySelector<HTMLElement>('.atk-del-btn')!
+    const showLoading = () => { Ui.showLoading(this.$editor!) }
+    const hideLoading = () => { Ui.hideLoading(this.$editor!) }
+    const showError = (msg: string) => { window.alert(msg) }
+
+    // 文本编辑
+    const openTextEditor = (key: string) => {
+      let initValue = site[key] || ''
+      if (key === 'urls') initValue = site.urls_raw || ''
+      const textEditor = new ItemTextEditor({
+        initValue,
+        onYes: async (val: string) => {
+          Ui.showLoading(textEditor.$el)
+          let s: SiteData
+          try {
+            s = await this.ctx.getApi().siteEdit({ ...site, [key]: val })
+          } catch (err: any) {
+            showError(`修改失败：${err.msg || '未知错误'}`)
+            console.error(err)
+            return false
+          } finally { Ui.hideLoading(textEditor.$el) }
+          $site.replaceWith(this.renderSite(s, $row))
+          update(s)
+          return true
+        }
+      })
+      textEditor.appendTo($main)
+    }
+
+    // 重命名
+    $renameBtn.onclick = () => openTextEditor('name')
+
+    // 修改 URL
+    $editUrlBtn.onclick = () => openTextEditor('urls')
+
+    // 导出
+    // $exportBtn.onclick = () => {}
+
+    // // 导入
+    // $importBtn.onclick = () => {}
+
+    // 删除
+    $delBtn.onclick = () => {
+      const del = async () => {
+        showLoading()
+        try {
+          await this.ctx.getApi().siteDel(site.id, true)
+        } catch (err: any) {
+          console.log(err)
+          showError(`删除失败 ${String(err)}`)
+          return
+        } finally { hideLoading() }
+        this.closeEditor()
+        $site.remove()
+        this.sites = this.sites.filter(s => s.name !== site.name)
+      }
+      if (window.confirm(
+        `确认删除站点 "${site.name}"？将会删除所有相关数据`
+      )) del()
+    }
+  }
+
+  public closeEditor() {
+    if (!this.$editor) return
+
+    this.$editor.remove()
+    this.$rowsWrap.querySelectorAll('.atk-site-item').forEach((e) => e.classList.remove('atk-active'))
+    this.activeSite = ''
+  }
+
+  public showAdd(defaultName?: string, defaultUrls?: string) {
+    this.closeAdd()
+
+    this.$add = Utils.createElement(`
+    <div class="atk-site-add">
+    <div class="atk-header">
+      <div class="atk-title">新增站点</div>
+      <div class="atk-close-btn">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <div class="atk-form">
+      <input type="text" name="AtkSiteName" placeholder="站点名称" autocomplete="off">
+      <input type="text" name="AtkSiteUrls" placeholder="站点 URL（多个用逗号隔开）" autocomplete="off">
+      <button class="atk-btn" name="AtkSubmit">创建</button>
+    </div>
+    </div>`)
+    this.$header.after(this.$add)
+
+    const $closeBtn = this.$add.querySelector<HTMLElement>('.atk-close-btn')!
+    $closeBtn.onclick = () => this.closeAdd()
+
+    const $siteName = this.$add.querySelector<HTMLInputElement>('[name="AtkSiteName"]')!
+    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()
+
+      if (siteName === '') { $siteName.focus(); return }
+
+      Ui.showLoading(this.$add!)
+      let s: SiteData
+      try {
+        s = await this.ctx.getApi().siteAdd(siteName, siteUrls)
+      } catch (err: any) {
+        window.alert(`创建失败：${err.msg || ''}`)
+        console.error(err)
+        return
+      } finally {  Ui.hideLoading(this.$add!) }
+
+      this.sites.push(s)
+      this.loadSites(this.sites)
+      this.closeAdd()
+    }
+
+    // 回车键提交
+    const keyDown = (evt: KeyboardEvent) => { if (evt.key === 'Enter') { $submitBtn.click() } }
+    $siteName.onkeyup = (evt) => keyDown(evt)
+    $siteUrls.onkeyup = (evt) => keyDown(evt)
+  }
+
+  public closeAdd() {
+    this.$add?.remove()
+  }
+}

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

@@ -0,0 +1,136 @@
+import '../style/item-text-editor.less'
+
+import * as Utils from 'artalk/src/lib/utils'
+
+interface ItemTextEditorConf {
+  initValue?: string
+  validator?: (value: string) => boolean
+  onYes?: (value: string) => boolean|void|Promise<boolean|void>
+  onNo?: () => boolean|void|Promise<boolean|void>
+  placeholder?: string
+}
+
+/**
+ * 通用列表项目文本编辑器
+ */
+export default class ItemTextEditor {
+  private conf: ItemTextEditorConf
+  public $el: HTMLElement
+
+  public $input: HTMLInputElement
+  public $yesBtn: HTMLElement
+  public $noBtn: HTMLElement
+
+  public value: string = ''
+  public allowSubmit = true
+
+  constructor(conf: ItemTextEditorConf) {
+    this.conf = conf
+
+    this.$el = Utils.createElement(
+    `<div class="atk-item-text-editor-layer">
+      <div class="atk-edit-form">
+        <input class="atk-main-input" type="text" placeholder="输入内容..." autocomplete="off" autofocus>
+      </div>
+      <div class="atk-actions">
+        <div class="atk-item atk-yes-btn">
+          <i class="atk-icon atk-icon-yes"></i>
+        </div>
+        <div class="atk-item atk-no-btn">
+          <i class="atk-icon atk-icon-no"></i>
+        </div>
+      </div>
+    </div>`)
+
+    this.$input = this.$el.querySelector('.atk-main-input')!
+    this.$yesBtn = this.$el.querySelector('.atk-yes-btn')!
+    this.$noBtn = this.$el.querySelector('.atk-no-btn')!
+
+    this.$input.value = conf.initValue || ''
+    this.value = conf.initValue || ''
+    if (this.conf.placeholder) this.$input.placeholder = this.conf.placeholder
+
+    this.$input.oninput = () => this.onInput()
+    this.$input.onkeyup = (evt) => {
+      if (evt.key === 'Enter' || evt.keyCode === 13) { // 按下回车键
+        evt.preventDefault()
+        this.submit()
+      }
+    }
+
+    window.setTimeout(() => this.$input.focus(), 80)
+
+    this.$yesBtn.onclick = () => { this.submit() }
+    this.$noBtn.onclick = () => { this.cancel() }
+  }
+
+  public appendTo(parentDOM: HTMLElement) {
+    parentDOM.append(this.$el)
+    return this
+  }
+
+  private onInput() {
+    this.value = this.$input.value
+
+    // 验证器
+    if (this.conf.validator) {
+      const ok = this.conf.validator(this.value)
+      this.setAllowSubmit(ok)
+      if (!ok) {
+        this.$input.classList.add('atk-invalid')
+      } else {
+        this.$input.classList.remove('atk-invalid')
+      }
+    }
+  }
+
+  public setAllowSubmit(allow: boolean) {
+    if (this.allowSubmit === allow) return
+    this.allowSubmit = allow
+    if (!allow) {
+      this.$yesBtn.classList.add('.atk-disabled')
+    } else {
+      this.$yesBtn.classList.remove('.atk-disabled')
+    }
+  }
+
+  public async submit() {
+    if (!this.allowSubmit) return
+
+    if (this.conf.onYes) {
+      let isContinue: any
+      if (this.conf.onYes instanceof (async () => {}).constructor) {
+        isContinue = await this.conf.onYes(this.value)
+      } else {
+        isContinue = this.conf.onYes(this.value)
+      }
+
+      if (isContinue === undefined || isContinue === true) {
+        this.closeEditor()
+      }
+    } else {
+      this.closeEditor()
+    }
+  }
+
+  public async cancel() {
+    if (this.conf.onNo) {
+      let isContinue: any
+      if (this.conf.onNo instanceof (async () => {}).constructor) {
+        isContinue = await this.conf.onNo()
+      } else {
+        isContinue = this.conf.onNo()
+      }
+
+      if (isContinue === undefined || isContinue === true) {
+        this.closeEditor()
+      }
+    } else {
+      this.closeEditor()
+    }
+  }
+
+  public closeEditor() {
+    this.$el.remove()
+  }
+}

packages/artalk-sidebar/src/lib/md5.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+
+// https://stackoverflow.com/questions/14733374/how-to-generate-an-md5-file-hash-in-javascript-node-js#answer-33486055
+var MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
+
+export default MD5

packages/artalk-sidebar/src/main.ts

@@ -0,0 +1,55 @@
+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.update({
+    ...user
+  })
+
+  // 初始化 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,14 @@
+import ArtalkComponent from 'artalk/src/lib/component'
+import Context from 'artalk/types/context'
+import { SidebarCtx } from './main'
+
+export default class Component extends ArtalkComponent {
+  declare public ctx: Context
+  sidebar: SidebarCtx
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx)
+
+    this.sidebar = sidebar
+  }
+}

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

@@ -0,0 +1,262 @@
+import './style/sidebar.less'
+
+import Context from 'artalk/types/context'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+
+import Component from './sidebar-component'
+import { SidebarCtx } from './main'
+import SidebarHTML from './sidebar.html?raw'
+
+import SidebarView from './sidebar-views/sidebar-view'
+import CommentsView from './sidebar-views/comments-view'
+import PagesView from './sidebar-views/pages-view'
+import SitesView from './sidebar-views/sites-view'
+import TransferView from './sidebar-views/transfer-view'
+import SiteListFloater from './components/site-list-floater'
+import SettingView from './sidebar-views/setting-view'
+
+import MD5 from './lib/md5'
+
+const REGISTER_VIEWS = [
+  CommentsView, PagesView, SitesView, TransferView, // SettingView
+]
+
+export default class SidebarRoot extends Component {
+  public static readonly DEFAULT_VIEW = 'comments'
+
+  public $header: HTMLElement
+  public $headerMenu: HTMLElement
+  public $title: HTMLElement
+  public $avatar: HTMLElement
+  public $siteLogo?: HTMLElement
+  public $nav: HTMLElement
+  public $curtViewBtn: HTMLElement
+  public $curtViewBtnIcon: HTMLElement
+  public $curtViewBtnText: HTMLElement
+  public $navTabs: HTMLElement
+  public $navViews: HTMLElement
+  public $viewWrap: HTMLElement
+  public siteSwitcher?: SiteListFloater
+
+  private get isAdmin() { return this.ctx.user.data.isAdmin }
+  public curtView?: string
+  public get curtViewInstance() {
+    return this.curtView ? this.viewInstances[this.curtView] : undefined
+  }
+  public curtTab?: string
+
+  public viewInstances: {[name: string]: SidebarView} = {}
+
+  private viewSwitcherShow = false
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
+
+    // initial elements
+    this.$el = Utils.createElement(SidebarHTML)
+    this.$header = this.$el.querySelector('.atk-sidebar-header')!
+    this.$headerMenu = this.$header.querySelector('.atk-menu')!
+    this.$title = this.$header.querySelector('.atk-sidebar-title')!
+    this.$avatar = this.$header.querySelector('.atk-avatar')!
+
+    this.$nav = this.$el.querySelector('.atk-sidebar-nav')!
+    this.$curtViewBtn = this.$nav.querySelector('.akt-curt-view-btn')!
+    this.$curtViewBtnIcon = this.$curtViewBtn.querySelector('.atk-icon')!
+    this.$curtViewBtnText = this.$curtViewBtn.querySelector('.atk-text')!
+    this.$navTabs = this.$nav.querySelector('.atk-tabs')!
+    this.$navViews = this.$nav.querySelector('.atk-views')!
+
+    this.$viewWrap = this.$el.querySelector('.atk-sidebar-view-wrap')!
+
+    // init UI
+    this.initViewInstances()
+    this.initViewSwitcher()
+
+    // 重载操作
+    this.sidebar.reload = () => {
+      this.init()
+    }
+  }
+
+  /** 初始化 views 实例对象 */
+  private initViewInstances() {
+    REGISTER_VIEWS.forEach((View) => {
+      const viewInstance = new View(this.ctx, this.sidebar, this.$viewWrap)
+      this.viewInstances[viewInstance.getName()] = viewInstance
+    })
+  }
+
+  /** 初始化 view 切换器 */
+  private initViewSwitcher() {
+    this.$curtViewBtn.onclick = () => {
+      this.toggleViewSwitcher()
+    }
+
+    this.$navViews.innerHTML = ''
+    Object.entries(this.viewInstances).forEach(([viewName, view]) => {
+      const $item = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navViews.append($item)
+      $item.setAttribute('data-name', viewName)
+      $item.innerText = view.viewTitle()
+      if (viewName === this.curtView) {
+        $item.classList.add('atk-active')
+        this.$curtViewBtnText.innerText = view.viewTitle()
+      }
+      $item.onclick = () => {
+        // 切换 view
+        this.switchView(viewName)
+
+        this.toggleViewSwitcher()
+      }
+    })
+  }
+
+  /** 显示/隐藏 view 切换器 */
+  private toggleViewSwitcher() {
+    if (!this.viewSwitcherShow) {
+      // 显示
+      this.$navViews.style.display = ''
+      this.$navTabs.style.display = 'none'
+      this.$curtViewBtnIcon.classList.add('atk-arrow')
+      // this.$curtViewBtnText.style.display = 'none'
+    } else {
+      // 隐藏
+      this.$navViews.style.display = 'none'
+      this.$navTabs.style.display = ''
+      this.$curtViewBtnIcon.classList.remove('atk-arrow')
+      // this.$curtViewBtnText.style.display = ''
+    }
+
+    this.viewSwitcherShow = !this.viewSwitcherShow
+  }
+
+  /** 初始化 */
+  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)
+        }
+      }
+
+      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)
+      }
+
+      // 站点图像
+      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) {
+    const view = this.viewInstances[viewName]
+    if (!view)
+      throw new Error(`Sidebar View "${viewName}" not found`)
+
+    // init view
+    view.mount()
+
+    this.curtView = viewName
+    this.curtTab = view.getActiveTab()
+
+    // update view indicator
+    this.$curtViewBtnText.innerText = view.viewTitle()
+    this.$navViews.querySelectorAll('.atk-tab-item').forEach((e) => {
+      if (e.getAttribute('data-name') === viewName) {
+        e.classList.add('atk-active')
+      } else {
+        e.classList.remove('atk-active')
+      }
+    })
+
+    // update tabs
+    this.loadViewTabs(view)
+
+    // load element
+    this.$viewWrap.innerHTML = ''
+    this.$viewWrap.append(view.$el)
+    this.$viewWrap.classList.forEach((c) => {
+      if (c.startsWith('atk-view-name-'))
+        this.$viewWrap.classList.remove(c)
+    })
+    this.$viewWrap.classList.add(`atk-view-name-${view.getName()}`)
+  }
+
+  private loadViewTabs(view: SidebarView) {
+    this.$navTabs.innerHTML = ''
+    Object.entries<string>(view.getTabs()).forEach(([tabName, label]) => {
+      const $tab = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navTabs.append($tab)
+      $tab.innerText = label
+      if (view.getActiveTab() === tabName) $tab.classList.add('atk-active')
+
+      // 切换 tab
+      $tab.onclick = () => {
+        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
+      }
+    })
+  }
+
+  /** 切换站点 */
+  private switchSite(siteName: string) {
+    this.sidebar.curtSite = siteName
+    const curtView = this.curtViewInstance
+    curtView?.switchTab(this.curtTab!)
+    if (this.$siteLogo) this.$siteLogo.innerText = this.sidebar.curtSite.substring(0, 1)
+  }
+}

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

@@ -0,0 +1,71 @@
+import ListLite from 'artalk/src/list/list-lite'
+import SidebarView from './sidebar-view'
+
+export default class MessageView extends SidebarView {
+  protected readonly viewName = 'comments'
+  viewTitle() { return '评论' }
+
+  protected tabs = {}
+  protected activeTab = ''
+
+  private list!: ListLite
+
+  mount() {
+    // tabs
+    if (this.ctx.user.data.isAdmin) {
+      this.tabs = {
+        admin_all: '全部',
+        admin_pending: '待审',
+        all: '个人',
+      }
+      this.activeTab = 'admin_all'
+    } else {
+      this.tabs = {
+        mentions: '提及',
+        all: '全部',
+        mine: '我的',
+        pending: '待审',
+      }
+      this.activeTab = 'mentions'
+    }
+
+    this.list = new ListLite(this.ctx)
+    this.ctx.setList(this.list)
+    this.list.flatMode = true
+    this.list.unreadHighlight = true
+    this.list.scrollListenerAt = this.$parent
+    this.list.pageMode = 'pagination'
+    this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
+    this.list.renderComment = (comment) => {
+      const pageURL = comment.getData().page_url
+      comment.getRender().setOpenURL(`${pageURL}#atk-comment-${comment.getID()}`)
+      comment.getConf().onReplyBtnClick = () => {
+        this.ctx.replyComment(comment.getData(), comment.getEl(), true)
+      }
+    }
+    this.list.paramsEditor = (params) => {
+      params.site_name = this.sidebar.curtSite
+    }
+    this.ctx.on('list-inserted', (data) => {
+      ;(this.$el.parentNode as any)?.scrollTo(0, 0)
+    })
+
+    this.$el.innerHTML = ''
+    this.$el.append(this.list.$el)
+
+    this.switchTab(this.activeTab)
+  }
+
+  switchTab(tab: string): boolean|void {
+    //console.log(tab, siteName)
+    this.activeTab = tab
+    this.list.paramsEditor = (params) => {
+      params.type = tab as any
+      params.site_name = this.sidebar.curtSite
+    }
+    this.list.fetchComments(0)
+
+    return true
+  }
+}
+

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

@@ -0,0 +1,61 @@
+import * as Ui from 'artalk/src/lib/ui'
+import Pagination from 'artalk/src/components/pagination'
+import SidebarView from './sidebar-view'
+import PageList from '../components/page-list'
+
+const PAGE_SIZE = 20
+
+export default class PagesView extends SidebarView {
+  protected readonly viewName = 'pages'
+  public readonly viewAdminOnly = true
+  viewTitle() { return '页面' }
+
+  protected tabs = {}
+  protected activeTab = ''
+
+  isFirstLoad = true
+  pageList!: PageList
+  pagination!: Pagination
+
+  mount() {
+    if (!this.pageList) {
+      this.pageList = new PageList(this.ctx, this.sidebar)
+      this.$el.append(this.pageList.$el)
+    }
+
+    this.switchTab(this.activeTab)
+  }
+
+  switchTab(tab: string): boolean|void {
+    this.reqPages(0)
+  }
+
+  async reqPages(offset: number) {
+    if (this.isFirstLoad) this.pageList.initPageList()
+    ;(this.$el.parentNode as any)?.scrollTo(0, 0)
+
+    if (this.isFirstLoad) Ui.showLoading(this.$el)
+    else this.pagination.setLoading(true)
+
+    const data = await this.ctx.getApi().pageGet(this.sidebar.curtSite, offset, PAGE_SIZE)
+    this.pageList.$pageList!.innerHTML = ''
+    this.pageList.importPages(data.pages || [])
+
+    if (this.isFirstLoad) Ui.hideLoading(this.$el)
+    else this.pagination.setLoading(false)
+
+    if (this.isFirstLoad) {
+      this.pagination = new Pagination(data.total, {
+        pageSize: PAGE_SIZE,
+        onChange: (o: number) => {
+          this.reqPages(o)
+        }
+      })
+
+      this.$el.append(this.pagination.$el)
+      this.isFirstLoad = false
+    } else {
+      if (offset === 0) this.pagination.update(offset, data.total)
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import SidebarView from './sidebar-view'
+
+export default class SettingView extends SidebarView {
+  protected readonly viewName = 'setting'
+  public readonly viewAdminOnly = true
+  viewTitle() { return '配置' }
+
+  protected tabs: { [key: string]: string } = {}
+  protected activeTab = ''
+
+  mount() {
+  }
+
+  switchTab(tab: string) {}
+}

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

@@ -0,0 +1,42 @@
+import Context from 'artalk/types/context'
+import * as Utils from 'artalk/src/lib/utils'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+
+interface SidebarView {
+  ctx: Context
+  viewAdminOnly?: boolean
+}
+
+abstract class SidebarView extends Component {
+  protected $parent: HTMLElement
+
+  public constructor(ctx: Context, sidebar: SidebarCtx, $parent: HTMLElement) {
+    super(ctx, sidebar)
+
+    this.$parent = $parent
+    this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
+  }
+
+  protected abstract tabs: {[key: string]: string}
+  protected abstract activeTab: string
+  protected abstract readonly viewName: string
+  public abstract viewTitle(): string
+
+  public abstract mount(): void
+  public abstract switchTab(tab: string): boolean|void
+
+  public getName() {
+    return this.viewName
+  }
+
+  public getTabs() {
+    return this.tabs
+  }
+
+  public getActiveTab() {
+    return this.activeTab
+  }
+}
+
+export default SidebarView

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

@@ -0,0 +1,31 @@
+import SiteList from '../components/site-list'
+import SidebarView from './sidebar-view'
+
+export default class SitesView extends SidebarView {
+  protected readonly viewName = 'sites'
+  public readonly viewAdminOnly = true
+  viewTitle() { return '站点' }
+
+  protected tabs = {}
+  protected activeTab = ''
+
+  siteList!: SiteList
+
+  mount() {
+    if (!this.siteList) {
+      this.siteList = new SiteList(this.ctx, this.sidebar)
+      this.$el.append(this.siteList.$el)
+    }
+
+    this.reqSites()
+  }
+
+  switchTab(tab: string) {
+    this.reqSites()
+  }
+
+  async reqSites() {
+    const sites = await this.ctx.getApi().siteGet()
+    this.siteList.loadSites(sites)
+  }
+}

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

@@ -0,0 +1,310 @@
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import SidebarView from './sidebar-view'
+
+export default class TransferView extends SidebarView {
+  protected readonly viewName = 'transfer'
+  public readonly viewAdminOnly = true
+  viewTitle() { return '迁移' }
+
+  protected tabs = {
+    'import': '导入',
+    'export': '导出',
+  }
+  protected activeTab = 'import'
+
+  mount() {
+    this.switchTab('import')
+  }
+
+  switchTab(tab: string) {
+    if (tab === 'import') {
+      this.initImport()
+    } else if (tab === 'export') {
+      // if (window.confirm(`开始导出？`))
+      this.initExport()
+      return false
+    }
+    return true
+  }
+
+  initImport() {
+    this.$el.innerHTML =
+    `<div class="atk-log-wrap" style="display: none;">
+      <div class="atk-log-back-btn">返回</div>
+      <div class="atk-log"></div>
+    </div>
+    <div class="atk-form">
+    <div class="atk-label atk-data-file-label">Artrans 数据文件</div>
+    <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>
+    <input type="text" name="AtkSiteURL" placeholder="输入内容..." autocomplete="off">
+    <div class="atk-label">启动参数（可选）</div>
+    <textarea name="AtkPayload"></textarea>
+    <span class="atk-desc">参考「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">文档 · 数据迁移</a>」</span>
+    <button class="atk-btn" name="AtkSubmit">导入</button>
+    </div>`
+
+    const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
+
+    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 = () => {
+      if (!UploadedFilename) {
+        setError(`请先上传 Artrans 数据文件`)
+        return
+      }
+
+      const siteName = $siteName.value.trim()
+      const siteURL = $siteURL.value.trim()
+      const payload = $payload.value.trim()
+
+      // 请求 payload 参数制备
+      let rData: any = {}
+      if (payload) {
+        // JSON 格式检验
+        try {
+          rData = JSON.parse(payload)
+        } catch (err) {
+          setError(`Payload JSON 格式有误：${String(err)}`)
+          return
+        }
+
+        if (typeof rData !== 'object' || Array.isArray(rData)) {
+          setError(`Payload 需为 JSON 对象`)
+          return
+        }
+      }
+      if (siteName) rData.t_name = siteName
+      if (siteURL) rData.t_url = siteURL
+
+      // 创建导入会话
+      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')!
+
+        $logWrap.style.display = ''
+        $form.style.display = 'none'
+
+        $backBtn.onclick = () => {
+          $logWrap.style.display = 'none'
+          $form.style.display = ''
+          restoreFileInput()
+          UploadedFilename = ''
+          this.sidebar.reload()
+        }
+
+        if (filename) rData.json_file = filename
+
+        // 创建 iframe
+        const frameName = `f_${+new Date()}`
+        const $frame = document.createElement('iframe')
+        $frame.className = 'atk-iframe'
+        $frame.name = frameName
+        $log.innerHTML = ''
+        $log.append($frame)
+
+        const formParams: {[k: string]: string} = {
+          payload: JSON.stringify(rData),
+          token: this.ctx.user.data.token || '',
+        }
+
+        // 创建临时表单，初始化 iframe
+        const $formTmp = document.createElement('form')
+        $formTmp.style.display = 'none'
+        $formTmp.setAttribute('method', 'post')
+        $formTmp.setAttribute('action', `${this.ctx.conf.server}/api/admin/import`)
+        $formTmp.setAttribute("target", frameName)
+
+        Object.entries(formParams).forEach(([key, val]) => {
+          const $inputTmp = document.createElement('input')
+          $inputTmp.setAttribute('type', 'hidden')
+          $inputTmp.setAttribute('name', key)
+          $inputTmp.value = val
+          $formTmp.appendChild($inputTmp)
+        })
+
+        $logWrap.append($formTmp)
+        $formTmp.submit()
+        $formTmp.remove()
+      }
+
+      // 直接开始会话
+      createSession(UploadedFilename)
+    }
+  }
+
+  async initExport() {
+    Ui.showLoading(this.$el)
+
+    try {
+      const d = await this.ctx.getApi().export()
+      this.download(`backup-${this.getYmdHisFilename()}.artrans`, d)
+    } catch (err: any) {
+      console.log(err)
+      window.alert(`${String(err)}`)
+      return
+    } finally { Ui.hideLoading(this.$el) }
+  }
+
+  download(filename: string, text: string) {
+    const el = document.createElement('a')
+    el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(text)}`);
+    el.setAttribute('download', filename)
+    el.style.display = 'none'
+    document.body.appendChild(el)
+    el.click()
+    document.body.removeChild(el)
+  }
+
+  getYmdHisFilename() {
+    const date = new Date()
+
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+    const seconds = date.getSeconds()
+
+    return `${year}${month}${day}-${hours}${Utils.padWithZeros(minutes, 2)}${Utils.padWithZeros(seconds, 2)}`
+  }
+}

packages/artalk-sidebar/src/sidebar.html

@@ -0,0 +1,22 @@
+<div class="atk-sidebar artalk">
+  <div class="atk-sidebar-inner">
+    <div class="atk-sidebar-header">
+      <span class="atk-avatar">
+        <span class="atk-site-logo"></span>
+      </span>
+      <span class="atk-menu">
+        <span class="atk-item atk-active atk-sidebar-title">控制中心</span>
+      </span>
+      <div class="atk-sidebar-close" style="opacity: 0;"><i class="atk-icon atk-icon-close"></i></div>
+    </div>
+    <div class="atk-sidebar-nav">
+      <div class="akt-curt-view-btn">
+        <div class="atk-icon"><span></span><span></span><span></span></div>
+        <div class="atk-text"></div>
+      </div>
+      <div class="atk-tabs"></div>
+      <div class="atk-tabs atk-views" style="display: none;"></div>
+    </div>
+    <div class="atk-sidebar-view-wrap"></div>
+  </div>
+</div>

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

@@ -0,0 +1,100 @@
+.atk-slim-scrollbar() {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(86,86,86,.3);
+  }
+
+  &::-webkit-scrollbar-thumb:vertical:hover {
+    background: rgba(65,74,82,.77);
+  }
+
+  &::-webkit-scrollbar-thumb:vertical:active {
+    background: rgba(41,47,53,.77);
+  }
+}
+
+.atk-list-text-actions() {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  padding: 0 35px;
+  padding-top: 10px;
+  padding-bottom: 0;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .atk-item {
+    position: relative;
+    font-size: 17px;
+    max-width: 5em;
+    display: inline-flex;
+    margin-right: 15px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    user-select: none;
+
+    &.atk-green:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(50, 199, 134, 0.39);
+    }
+
+    &.atk-yellow:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(255, 203, 0, 39%);
+    }
+  }
+}
+
+.atk-list-btn-actions() {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20px;
+
+  .atk-item {
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+
+    &:not(:last-child) {
+      margin-right: 15px;
+    }
+
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    width: 35px;
+    height: 35px;
+    border-radius: 2px;
+    align-items: center;
+    justify-content: center;
+
+    &.atk-item-close {
+      margin-left: 10px;
+    }
+  }
+
+  .atk-icon {
+    background-color: var(--at-color-meta);
+  }
+
+  .atk-icon-yes {
+    background-color: var(--at-color-main);
+  }
+}

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

@@ -0,0 +1,4 @@
+@font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+@font-size: 14px;
+@line-height: 1.6em;
+@block-radius: 6px;

packages/artalk-sidebar/src/style/item-text-editor.less

@@ -0,0 +1,35 @@
+.atk-item-text-editor-layer {
+  z-index: 999;
+  background: var(--at-color-bg);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .atk-edit-form {
+    flex: auto;
+    padding-left: 20px;
+
+    input {
+      font-size: 17px;
+      width: 100%;
+      padding: 3px 5px;
+      border: 0;
+      border-bottom: 1px solid var(--at-color-border);
+      outline: none;
+      background: transparent;
+
+      &.atk-invalid {}
+    }
+  }
+
+  .atk-actions {
+    .atk-list-btn-actions();
+
+    .atk-yes-btn.atk-disabled {}
+  }
+}

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

@@ -0,0 +1,80 @@
+.atk-page-list-wrap {
+  .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-list {
+  .atk-page-item {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    min-height: 120px;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--at-color-border);
+    }
+  }
+
+  .atk-page-main {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    padding: 20px 30px;
+
+    .atk-title {
+      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;
+    }
+  }
+
+  .atk-page-main-actions {
+    .atk-list-text-actions();
+  }
+
+  .atk-page-actions {
+    .atk-list-btn-actions();
+  }
+
+  .atk-page-edit-layer {
+    z-index: 999;
+    background: var(--at-color-bg);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,494 @@
+@header-height: 60px;
+@nav-height: 40px;
+
+.artalk, .atk-layer-wrap {
+  font-family: @font-family;
+}
+
+.atk-sidebar {
+  @width: 430px;
+  position: fixed;
+  z-index: 99998;
+  top: 0;
+  right: 0;
+  width: @width;
+  height: 100%;
+  background: var(--at-color-bg);
+
+  @media only screen and (max-width: @width) {
+    & {
+      width: 100%;
+    }
+  }
+
+  .atk-sidebar-inner {
+    position: relative;
+  }
+
+  // Header
+  .atk-sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--at-color-border);
+
+    .atk-avatar {
+      display: flex;
+      width: @header-height + 5px;
+      height: @header-height;
+      align-items: center;
+      justify-content: center;
+
+      img, .atk-site-logo {
+        @height: @header-height - 30px;
+        height: @height;
+        width: @header-height - 30px;
+        border-radius: 2px;
+        background: var(--at-color-meta);
+        text-align: center;
+        line-height: @height;
+        font-size: 13px;
+        color: var(--at-color-bg);
+      }
+
+      .atk-site-logo {
+        user-select: none;
+        cursor: pointer;
+      }
+    }
+
+    .atk-menu {
+      flex: auto;
+      text-align: center;
+
+      .atk-item {
+        position: relative;
+        color: var(--at-color-sub);
+        font-size: 20px;
+        // cursor: pointer;
+        user-select: none;
+
+        &:not(:last-child) {
+          margin-right: 20px;
+        }
+
+        &.atk-active {
+          color: var(--at-color-font);
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background: var(--at-color-main);
+            opacity: .4;
+          }
+        }
+      }
+    }
+
+    .atk-sidebar-close {
+      display: flex;
+      flex-direction: column;
+      width: @header-height;
+      height: @header-height;
+      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);
+      }
+    }
+  }
+
+  // Nav
+  .atk-sidebar-nav {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid var(--at-color-border);
+    height: @nav-height + 1px;
+
+    .akt-curt-view-btn {
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      border-right: 1px solid var(--at-color-border);
+      cursor: pointer;
+      user-select: none;
+      height: @nav-height;
+      line-height: @nav-height;
+      white-space: nowrap;
+
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+
+      .atk-icon {
+        width: 17px;
+
+        span {
+          position: relative;
+          display: block;
+          width: 14px;
+          height: 1px;
+          margin: 0 auto 4px;
+          background: var(--at-color-deep);
+          transform-origin: 20px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        &.atk-arrow span {
+          width: 8px;
+          opacity: 1;
+          transform: rotate(-45deg);
+          transform-origin: 7px;
+
+          &:nth-child(2) {
+            transform: rotate(0deg);
+            width: 0;
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            opacity: 1;
+            transform: rotate(45deg);
+          }
+        }
+      }
+
+      .atk-text {
+        margin-left: 10px;
+      }
+    }
+
+    .atk-tabs {
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background: transparent;
+      }
+
+      display: flex;
+      flex-direction: row;
+      overflow-y: auto;
+
+      &.atk-views .atk-active {
+
+      }
+
+      .atk-tab-item {
+        line-height: @nav-height;
+        height: @nav-height;
+        color: var(--at-color-sub);
+        cursor: pointer;
+        user-select: none;
+        padding: 0 20px;
+        white-space: nowrap;
+
+        &:hover {
+          background: var(--at-color-bg-grey);
+        }
+
+        &.atk-active {
+          color: var(--at-color-deep);
+        }
+      }
+    }
+  }
+
+  .atk-site-list-floater {
+    .atk-slim-scrollbar();
+
+    position: absolute;
+    z-index: 9999;
+    left: 50%;
+    top: 70px;
+    transform: translateX(-50%);
+    pointer-events: all;
+    background: var(--at-color-bg);
+    width: 80%;
+    max-height: 40%;
+    margin: 0 auto;
+    border: 1px solid var(--at-color-border);
+    border-radius: 4px;
+    overflow-y: auto;
+
+    .atk-sites {
+      display: flex;
+      flex-direction: column;
+      padding: 7px 0;
+
+      .atk-site-item {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        align-items: center;
+        padding: 0 10px;
+        margin-bottom: 1px;
+
+        .atk-site-logo {
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          background: var(--at-color-meta);
+          margin: 10px;
+          border-radius: 3px;
+          text-align: center;
+          color: var(--at-color-bg);
+          font-size: 12px;
+        }
+
+        .atk-site-name {
+          color: var(--at-color-font);
+          font-size: 17px;
+          margin-left: 7px;
+        }
+
+        &.atk-active, &:hover {
+          background: var(--at-color-bg-grey);
+        }
+      }
+    }
+  }
+
+  .atk-sidebar-view-wrap {
+    position: relative;
+    overflow-y: auto;
+    height: calc(100vh - @header-height - @nav-height - 2px);
+    .atk-slim-scrollbar();
+
+    .atk-sidebar-no-content {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      font-size: 35px;
+      color: var(--at-color-meta);
+      pointer-events: none;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .atk-form {
+    @form-height: 35px;
+
+    padding: 20px 30px;
+
+    .atk-label {
+      font-size: 16px;
+      margin-bottom: 12px;
+      color: var(--at-color-font);
+    }
+
+    .atk-desc {
+      font-size: 14px;
+      margin-top: 10px;
+      margin-left: 15px;
+      margin-bottom: 25px;
+      display: block;
+      color: var(--at-color-meta);
+
+      a {
+        opacity: 0.8;
+      }
+    }
+
+    input, textarea {
+      display: block;
+      line-height: @form-height;
+      padding: 0 10px;
+      margin: 0;
+      border: none;
+      border-bottom: 2px solid var(--at-color-border);
+      outline: none;
+      width: 100%;
+      margin-bottom: 25px;
+      background: var(--at-color-bg);
+
+      &:focus {
+        border-bottom-color: var(--at-color-bg-light);
+      }
+
+      &[type="file"] {
+        background: transparent;
+        border: 2px solid var(--at-color-border);
+        cursor: pointer;
+        position: relative;
+        padding: 6px 15px;
+        line-height: 0;
+        margin-bottom: 17px;
+        border-radius: 50px;
+
+        &:hover {
+          background: var(--at-color-bg-light);
+          border-color: var(--at-color-bg-light);
+        }
+      }
+
+      &[type="file"]::-webkit-file-upload-button {
+        background: transparent;
+        color: var(--at-color-font);
+        border: 0;
+        border-right: 2px solid #eee;
+        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;
+      }
+    }
+
+    textarea {
+      font-size: 13px;
+      line-height: 20px;
+      min-height: 80px;
+      resize: vertical;
+    }
+
+    select {
+      display: block;
+      outline: none;
+      height: @form-height;
+      padding: 5px 10px;
+      width: 100%;
+      border: none;
+      border-bottom: 2px solid var(--at-color-border);
+      margin-bottom: 25px;
+      -webkit-appearance: none;
+      border-radius: 0;
+      background: var(--at-color-bg);
+    }
+
+    button {
+      &:hover {
+        background: var(--at-color-bg-light);
+      }
+
+      text-align: center;
+      color: var(--at-color-light);
+      background: transparent;
+      border: 2px solid var(--at-color-bg-light);
+      line-height: @form-height;
+      letter-spacing: 2em;
+      text-indent: 2em; // center
+      cursor: pointer;
+      outline: none;
+      padding: 0 20px;
+      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 {
+    .atk-log-back-btn {
+      display: inline-block;
+      padding: 5px 33px;
+      cursor: pointer;
+      user-select: none;
+      border-right: 1px solid var(--at-color-border);
+      border-left: 1px solid transparent;
+      &:hover {
+        background: #f4f4f4;
+      }
+    }
+
+    .atk-log {}
+
+    .atk-iframe {
+      width: 100%;
+      height: calc(100vh - 150px);
+      border: 0;
+      background: #f4f4f4;
+      border: 3px solid #eee;
+    }
+  }
+}
+
+.atk-view-name-pages, .atk-view-name-comments {
+  padding-bottom: 55px;
+
+  .atk-comment-wrap {
+    border-bottom: 1px solid var(--at-color-border);
+  }
+
+  .atk-pagination-wrap {
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: var(--at-color-bg);
+    border-top: 1px solid var(--at-color-border);
+  }
+
+  .atk-list-read-more {
+    margin-top: 30px;
+    margin-bottom: -40px;
+  }
+}

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

@@ -0,0 +1,210 @@
+.atk-site-list {
+  & > .atk-header {
+    display: flex;
+    flex-direction: row;
+    padding: 15px 30px;
+    align-items: center;
+
+    .atk-title {
+      flex: auto;
+      padding-right: 10px;
+    }
+
+    .atk-actions {
+      display: flex;
+      flex-direction: row;
+
+      .atk-item {
+        display: flex;
+        height: 30px;
+        width: 30px;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        border-radius: 2px;
+
+        &:hover {
+          background: var(--at-color-bg-grey);
+        }
+      }
+    }
+  }
+
+  .atk-site-rows-wrap {
+    position: relative;
+
+    .atk-site-row {
+      display: flex;
+      flex-direction: row;
+      padding: 10px 20px;
+      padding-bottom: 0;
+    }
+
+    .atk-site-item {
+      display: flex;
+      flex-basis: 25%;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 5px;
+      user-select: none;
+      cursor: pointer;
+      border: 1px solid transparent;
+
+      .atk-site-logo {
+        margin: 15px;
+        text-align: center;
+        font-size: 20px;
+        height: 65px;
+        width: 65px;
+        line-height: 65px;
+        background: #687a86;
+        color: #fff;
+        border-radius: 4px;
+      }
+
+      .atk-site-name {
+        text-align: center;
+        font-size: 15px;
+        color: var(--at-color-sub);
+        padding: 0 17px;
+        word-break: break-word;
+      }
+
+      &.atk-active {
+        background-color: var(--at-color-bg-grey);
+        border: 1px solid var(--at-color-border);
+        margin-top: -1px;
+        border-radius: 0 0 4px 4px;
+
+        .atk-site-name {
+          color: var(--at-color-deep);
+        }
+      }
+
+      &:hover {
+        .atk-site-name {
+          color: var(--at-color-font);
+        }
+      }
+    }
+  }
+
+  .atk-site-edit, .atk-site-add {
+    position: relative;
+    min-height: 120px;
+    width: 100%;
+    border-top: 1px solid var(--at-color-border);
+    border-bottom: 1px solid var(--at-color-border);
+    margin-bottom: -10px;
+
+    .atk-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px 30px 0 35px;
+      justify-content: space-between;
+
+      .atk-site-info {
+        .atk-site-name {
+          cursor: pointer;
+          display: inline-block;
+          font-size: 23px;
+          position: relative;
+          line-height: 1.6em;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            background: var(--at-color-main);
+            opacity: .4;
+            left: 0;
+            bottom: 6px;
+          }
+        }
+
+        .atk-site-urls {
+          display: flex;
+          width: 100%;
+          margin-top: 6px;
+          flex-wrap: wrap;
+          min-height: 23px;
+          margin-bottom: 15px;
+
+          .atk-url-item {
+            background: var(--at-color-bg-grey);
+            color: var(--at-color-font);
+            border-radius: 2px;
+            padding: 0 8px;
+            font-size: 13px;
+            margin-bottom: 3px;
+            margin-right: 3px;
+            cursor: pointer;
+
+            &:hover {
+            }
+          }
+        }
+      }
+
+      .atk-close-btn {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover i {
+          background-color: var(--at-color-red);
+        }
+      }
+    }
+
+    .atk-main {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      padding: 0 30px 6px 35px;
+      padding-bottom: 10px;
+
+      .atk-site-text-actions {
+        .atk-list-text-actions();
+        height: 90px;
+        padding: 0;
+        padding-left: 10px;
+
+        .atk-item {
+          margin-bottom: 17px;
+          margin-right: 25px;
+        }
+      }
+
+      .atk-site-btn-actions {
+        .atk-list-btn-actions();
+
+        padding-right: 9px;
+      }
+
+      .atk-item-text-editor-layer {
+        padding: 10px 20px;
+      }
+    }
+  }
+
+  .atk-site-add {
+    position: relative;
+
+    .atk-header {
+      .atk-title {
+        font-size: 20px;
+      }
+    }
+
+    .atk-form {
+      padding: 20px 40px;
+    }
+  }
+}

packages/artalk-sidebar/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src", "./types"]
+}

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

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

packages/artalk-sidebar/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { version as artalkVersion } from 'artalk/package.json'
+import { version as sidebarVersion } from './package.json'
+
+export default defineConfig({
+  base: './',
+  define: {
+    ARTALK_VERSION: JSON.stringify(artalkVersion),
+    ARTALK_SIDEBAR_VERSION: JSON.stringify(sidebarVersion)
+  },
+  build: {
+    target: 'es2015',
+    outDir: resolve(__dirname, "dist"),
+    minify: 'terser'
+  },
+  plugins: [tsconfigPaths()],
+  css: {
+    preprocessorOptions: {
+      less: {
+         additionalData: `@import "./src/style/_variables.less";@import "./src/style/_extend.less";`
+     },
+    },
+  },
+})

packages/artalk/index.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>Artalk DEMO</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
+  <style>
+    * { box-sizing: border-box; }
+    body { padding:45px 10px;margin:0;background:#f4f4f4 }
+    body.dark-mode { background:#000; }
+    .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px;border: 1px solid transparent; }
+    body.dark-mode .card { background: #1e2223;border: 1px solid #2d3235; }
+    .card:not(:last-child) { margin-bottom:10px; }
+    .card.billboard { text-align: center; }
+    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
+    .title > a:hover { margin-left:0 }
+    .title > a > span { opacity:0 }
+    .title > a:hover>span { opacity:1 }
+    .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) {
+      body { padding: 0;background: #FFF; }
+      .card.billboard { padding-top: 20px; }
+      .card { width: 100%;padding: 5px; }
+    }
+    .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: #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.
+    if (navigator.userAgentData.mobile) {
+      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" 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">
+    <div id="comments"></div>
+  </div>
+  <div class="float-btn to-night atk-fade-in">Blink</div>
+  <div class="float-btn to-top atk-fade-in" style="display: none;">TOP</div>
+
+  <script type="module">
+    import Artalk from './src/main'
+    var artalk = new Artalk({
+      el: '#comments',
+      pageKey: 'https://artalk.js.org/',
+      pageTitle: 'Artalk Home',
+      server: (import.meta.env.DEV) ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
+      site: 'ArtalkDocs',
+      //useBackendConf: true,
+    });
+
+    window.artalk = artalk;
+
+    ;(function () {
+      const toTopElem = document.querySelector('.to-top')
+      toTopElem.addEventListener('click', () => {
+        window.scrollTo(0, 0)
+      })
+
+      checkShowToTop()
+      document.addEventListener('scroll', () => {
+        checkShowToTop()
+      })
+
+      function checkShowToTop() {
+        const scrollTop = window.scrollY
+        const whereShow = window.screen.height
+        const isNeedShow = (scrollTop > 0) && (scrollTop > whereShow)
+
+        if (isNeedShow) {
+          toTopElem.style.display = ''
+        } else {
+          toTopElem.style.display = 'none'
+        }
+      }
+    })();
+
+    ;(function () {
+      // @Refer: https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers
+      let darkMode = false
+
+      if (getLS() == "true") {
+        darkMode = true;
+      } else {
+        try {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            darkMode = true;
+          }
+        } catch {}
+      }
+
+      function getLS() {
+        return localStorage.getItem("dark_mode_on") || null
+      }
+
+      function setLS(val) {
+        return localStorage.setItem("dark_mode_on", String(val))
+      }
+
+      function checkAndApplyDarkMode () {
+        artalk.setDarkMode(darkMode)
+        if (darkMode) {
+          document.body.classList.add('dark-mode')
+        } else {
+          document.body.classList.remove('dark-mode')
+        }
+      }
+
+      checkAndApplyDarkMode()
+
+      const toNightElem = document.querySelector('.to-night')
+      toNightElem.addEventListener('click', () => {
+        darkMode = !darkMode
+        setLS(darkMode)
+        checkAndApplyDarkMode()
+      })
+
+      // Listen
+      try {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+          const newColorScheme = e.matches ? "dark" : "light";
+          if (newColorScheme == "dark") {
+            darkMode = true
+          } else {
+            darkMode = false
+          }
+
+          checkAndApplyDarkMode()
+        });
+      } catch {}
+    })()
+  </script>
+</body>
+</html>

packages/artalk/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "artalk",
+  "version": "2.3.3",
+  "backendMinVersion": "2.1.7",
+  "license": "LGPL-3.0",
+  "description": "A Selfhosted Comment System",
+  "keywords": [
+    "comment-system",
+    "comments-widget",
+    "comment",
+    "comments",
+    "blog"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "packages/artalk"
+  },
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "main": "./dist/Artalk.js",
+  "unpkg": "./dist/Artalk.iife.js",
+  "jsdelivr": "./dist/Artalk.iife.js",
+  "module": "./dist/Artalk.es.js",
+  "types": "./types/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm lint && vite build && pnpm build:lite",
+    "build:lite": "vite build --config vite-lite.config.ts",
+    "build:demo": "vite build --config vite-demo.config.ts",
+    "serve": "vite preview",
+    "deploy": "gh-pages -d 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"
+  },
+  "devDependencies": {
+    "@types/marked": "4.0.3"
+  },
+  "dependencies": {
+    "hanabi": "^0.4.0",
+    "insane": "^2.6.2",
+    "marked": "^4.0.16",
+    "abortcontroller-polyfill": "^1.7.3"
+  }
+}

packages/artalk/src/api/index.ts

@@ -0,0 +1,373 @@
+import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '~/types/context'
+import { Fetch, ToFormData, POST, GET } from './request'
+import * as Utils from '../lib/utils'
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
+
+export default class Api {
+  private ctx: Context
+  private baseURL: string
+
+  constructor (ctx: Context) {
+    this.ctx = ctx
+    this.baseURL = `${ctx.conf.server}/api`
+  }
+
+  // ============================
+  //  评论 Comment
+  // ============================
+
+  /** 评论 · 获取 */
+  public get(offset: number, pageSize: number, flatMode?: boolean, paramsEditor?: (params: any) => void) {
+    const params: any = {
+      page_key: this.ctx.conf.pageKey,
+      site_name: this.ctx.conf.site || '',
+      limit: pageSize,
+      offset,
+    }
+
+    if (flatMode) params.flat_mode = flatMode // 平铺模式
+    if (this.ctx.user.checkHasBasicUserInfo()) {
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    if (paramsEditor) paramsEditor(params)
+
+    return POST<ListData>(this.ctx, `${this.baseURL}/get`, params)
+  }
+
+  /** 评论 · 创建 */
+  public async add(comment: { nick: string, email: string, link: string, content: string, rid: number, page_key: string, page_title?: string, site_name?: string }) {
+    const params: any = {
+      name: comment.nick,
+      email: comment.email,
+      link: comment.link,
+      content: comment.content,
+      rid: comment.rid,
+      page_key: comment.page_key,
+      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA
+    }
+
+    if (comment.page_title) params.page_title = comment.page_title
+    if (comment.site_name) params.site_name = comment.site_name
+
+    const data = await POST<any>(this.ctx, `${this.baseURL}/add`, params)
+    return (data.comment as CommentData)
+  }
+
+  /** 评论 · 修改 */
+  public async commentEdit(data: CommentData) {
+    const params: any = {
+      ...data,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/comment-edit`, params)
+    return (d.comment as CommentData)
+  }
+
+  /** 评论 · 删除 */
+  public commentDel(commentID: number, siteName?: string) {
+    const params: any = {
+      id: String(commentID),
+      site_name: siteName || '',
+    }
+
+    return POST(this.ctx, `${this.baseURL}/admin/comment-del`, params)
+  }
+
+  // ============================
+  //  用户 User
+  // ============================
+
+  /** 用户 · 登录 */
+  public async login(name: string, email: string, password: string) {
+    const params: any = {
+      name, email, password
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const data = await POST<any>(this.ctx, `${this.baseURL}/login`, params)
+    return (data.token as string)
+  }
+
+  /** 用户 · 获取  */
+  public userGet(name: string, email: string) {
+    const ctrl = new AbortController()
+    const params: any = {
+      name, email, site_name: (this.ctx.conf.site || '')
+    }
+
+    const req = Fetch(this.ctx, `${this.baseURL}/user-get`, {
+      method: 'POST',
+      body: ToFormData(params),
+      signal: ctrl.signal,
+    }).then((json) => ({
+      user: json.data.user as UserData|null,
+      is_login: json.data.is_login as boolean,
+      unread: (json.data.unread || []) as NotifyData[],
+      unread_count: json.data.unread_count || 0,
+    }))
+
+    return {
+      req,
+      abort: () => { ctrl.abort() },
+    }
+  }
+
+  /** 用户 · 登录状态 */
+  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
+  // ============================
+
+  /** 页面 · 获取 */
+  public async pageGet(siteName?: string, offset?: number, limit?: number) {
+    const params: any = {
+      site_name: siteName || '',
+      offset: offset || 0,
+      limit: limit || 15,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-get`, params)
+    return (d as { pages: PageData[], total: number })
+  }
+
+  /** 页面 · 修改 */
+  public async pageEdit(data: PageData) {
+    const params: any = {
+      id: data.id,
+      key: data.key,
+      title: data.title,
+      admin_only: data.admin_only,
+      site_name: data.site_name || this.ctx.conf.site,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-edit`, params)
+    return (d.page as PageData)
+  }
+
+  /** 页面 · 删除 */
+  public pageDel(pageKey: string, siteName?: string) {
+    const params: any = {
+      key: String(pageKey),
+      site_name: siteName || '',
+    }
+
+    return POST(this.ctx, `${this.baseURL}/admin/page-del`, params)
+  }
+
+  /** 页面 · 数据更新 */
+  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 as any)
+  }
+
+  // ============================
+  //  站点 Site
+  // ============================
+
+  /** 站点 · 获取 */
+  public async siteGet() {
+    const params: any = {}
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/site-get`, params)
+    return (d.sites as SiteData[])
+  }
+
+  /** 站点 · 创建 */
+  public async siteAdd(name: string, urls: string) {
+    const params: any = {
+      name, urls,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/site-add`, params)
+    return (d.site as SiteData)
+  }
+
+  /** 站点 · 修改 */
+  public async siteEdit(data: SiteData) {
+    const params: any = {
+      id: data.id,
+      name: data.name || '',
+      urls: data.urls || '',
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/site-edit`, params)
+    return (d.site as SiteData)
+  }
+
+  /** 站点 · 删除 */
+  public siteDel(id: number, delContent = false) {
+    const params: any = { id, del_content: delContent }
+
+    return POST(this.ctx, `${this.baseURL}/admin/site-del`, params)
+  }
+
+  /** 导出 */
+  public async export() {
+    const d = await Fetch(this.ctx, `${this.baseURL}/admin/export`, { method: 'POST' }, 0)
+    return (d.data?.data || '' as string)
+  }
+
+  // ============================
+  //  杂项
+  // ============================
+
+  /** 投票 */
+  public async vote(targetID: number, type: string) {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      target_id: targetID,
+      type,
+    }
+
+    if (this.ctx.user.checkHasBasicUserInfo()) {
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    const data = await POST<any>(this.ctx, `${this.baseURL}/vote`, params)
+    return (data as {up: number, down: number})
+  }
+
+  /** 已读标记 */
+  public markRead(notifyKey: string, readAll = false) {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      notify_key: notifyKey,
+    }
+
+    if (readAll) {
+      delete params.notify_key
+      params.read_all = true
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    return POST(this.ctx, `${this.baseURL}/mark-read`, params)
+  }
+
+  /** PV */
+  public async pv() {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      page_key: this.ctx.conf.pageKey || '',
+      page_title: this.ctx.conf.pageTitle || ''
+    }
+
+    const p = await POST<any>(this.ctx, `${this.baseURL}/pv`, params)
+    return p.pv as number
+  }
+
+  /** 统计 */
+  public async stat(
+    type: 'latest_comments'|'latest_pages'|'pv_most_pages'|'comment_most_pages'|
+          'page_pv'|'site_pv'|'page_comment'|'site_comment',
+    pageKeys?: string|string[],
+    limit?: number
+  ) {
+    const params: any = {
+      type,
+      site_name: this.ctx.conf.site || '',
+    }
+
+    if (pageKeys) params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(',') : pageKeys
+    if (limit) params.limit = limit
+
+    const data = await POST<PageData[]|CommentData[]|object|number>(this.ctx, `${this.baseURL}/stat`, params)
+    return data
+  }
+
+  /** 图片上传 */
+  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
+      } else if (conf.emoticons === "false") {
+        conf.emoticons = false
+      }
+    }
+
+    return conf
+  }
+
+  // ============================
+  //  验证码
+  // ============================
+
+  /** 验证码 · 获取 */
+  public async captchaGet() {
+    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 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

@@ -0,0 +1,97 @@
+import Context from '~/types/context'
+
+/** 公共请求函数 */
+export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
+  // JWT
+  if (ctx.user.data.token) {
+    const headers = new Headers(init.headers) // 保留原有 headers
+    headers.set('Authorization', `Bearer ${ctx.user.data.token}`)
+    init.headers = headers
+  }
+
+  // 请求操作
+  const resp = await timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15000, init)
+
+  const respHttpCode = resp.status
+  const noAccessCodes = [401, 400]
+  const isNoAccess = noAccessCodes.includes(respHttpCode)
+
+  if (!resp.ok && !isNoAccess)
+    throw new Error(`${ctx.$t('reqGot')} ${respHttpCode}`)
+
+  // 解析获取响应的 json
+  let json: any = await resp.json()
+
+  // 重新发起请求
+  const recall = (resolve, reject) => {
+    Fetch(ctx, input, init)
+      .then(d => { resolve(d) })
+      .catch(e => { reject(e) })
+  }
+
+  // 请求弹出层验证
+  if (json.data?.need_captcha) {
+    // 请求需要验证码
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.checkCaptcha({
+        imgData: json.data.img_data,
+        iframe: json.data.iframe,
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
+      })
+    }))
+  } else if (json.data?.need_login || isNoAccess) {
+    // 请求需要管理员权限
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.checkAdmin({
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
+      })
+    }))
+  }
+
+  if (!json.success) throw json // throw 相当于 reject(json)
+
+  return json
+}
+
+/** 公共 POST 请求 */
+export async function POST<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+  const init: RequestInit = {
+    method: 'POST',
+  }
+  if (data) init.body = ToFormData(data)
+
+  const json = await Fetch(ctx, url, init)
+  return ((json.data || {}) as T)
+}
+
+/** 公共 GET 请求 */
+export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+  const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
+    method: 'GET',
+  })
+  return ((json.data || {}) as T)
+}
+
+/** 对象转 FormData */
+export function ToFormData(object: {[key: string]: any}): FormData {
+  const formData = new FormData()
+  Object.keys(object).forEach(key => formData.append(key, String(object[key])))
+  return formData
+}
+
+/** 我靠，fetch 一个 timeout，都要丑陋的实现 */
+function timeoutFetch(ctx: Context, url: RequestInfo, ms: number, opts: RequestInit) {
+  const controller = new AbortController()
+  opts.signal?.addEventListener('abort', () => controller.abort()) // 保留原有 signal 功能
+  let promise = fetch(url, { ...opts, signal: controller.signal })
+  if (ms > 0) {
+    const timer = setTimeout(() => controller.abort(), ms)
+    promise.finally(() => { clearTimeout(timer) })
+  }
+  promise = promise.catch((err) => {
+    throw ((err || {}).name === 'AbortError') ? new Error(ctx.$t('reqAborted')) : err
+  })
+  return promise
+}

packages/artalk/src/artalk.ts

@@ -0,0 +1,256 @@
+import './style/main.less'
+
+import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Handler } from '~/types/event'
+import ArtalkPlug from '~/types/plug'
+import Context from '~/types/context'
+import ConcreteContext from './context'
+import defaults from './defaults'
+import { internal as internalLocales } from './i18n'
+
+import CheckerLauncher from './lib/checker'
+import Editor from './editor'
+import List from './list'
+import SidebarLayer from './layer/sidebar-layer'
+
+import Layer, { GetLayerWrap } from './layer'
+import * as Utils from './lib/utils'
+import * as Ui from './lib/ui'
+import * as Stat from './lib/stat'
+
+/**
+ * Artalk
+ *
+ * @website https://artalk.js.org
+ */
+export default class Artalk {
+  public static readonly defaults: ArtalkConfig = defaults
+
+  public conf!: ArtalkConfig
+  public ctx!: Context
+  public $root!: HTMLElement
+
+  public checkerLauncher!: CheckerLauncher
+  public editor!: Editor
+  public list!: List
+  public sidebarLayer!: SidebarLayer
+
+  protected static Plugins: ArtalkPlug[] = [
+    Stat.PvCountWidget
+  ]
+
+  constructor(customConf: Partial<ArtalkConfig>) {
+    /* 初始化基本配置 */
+    this.conf = Artalk.HandelBaseConf(customConf)
+    if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
+
+    /* 初始化 Context */
+    this.ctx = new ConcreteContext(this.conf, this.$root)
+
+    // @ts-ignore 远程加载引用后端的配置
+    if (this.conf.useBackendConf) return this.loadConfRemoteAndInitComponents()
+
+    /* 初始化组件 */
+    this.initComponents()
+  }
+
+  /** 组件初始化 */
+  private initComponents() {
+    this.initLocale()
+    this.initLayer()
+    this.initDarkMode()
+    Utils.initMarked(this.ctx)
+
+    // CheckerLauncher
+    this.checkerLauncher = new CheckerLauncher(this.ctx)
+    this.ctx.setCheckerLauncher(this.checkerLauncher)
+
+    // 编辑器
+    this.editor = new Editor(this.ctx)
+    this.ctx.setEditor(this.editor)
+    this.$root.appendChild(this.editor.$el)
+
+    // 评论列表
+    this.list = new List(this.ctx)
+    this.ctx.setList(this.list)
+    this.$root.appendChild(this.list.$el)
+
+    // 侧边栏
+    this.sidebarLayer = new SidebarLayer(this.ctx)
+    this.ctx.setSidebarLayer(this.sidebarLayer)
+    this.$root.appendChild(this.sidebarLayer.$el)
+
+    // 评论获取
+    this.list.fetchComments(0)
+
+    // 事件绑定初始化
+    this.initEventBind()
+
+    // 插件初始化
+    Artalk.Plugins.forEach(plugin => {
+      if (typeof plugin === 'function')
+        plugin(this.ctx)
+    })
+  }
+
+  /** 基本配置初始化 */
+  private static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+    // 合并默认配置
+    const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
+
+    // 绑定元素
+    if (typeof conf.el === 'string' && !!conf.el) {
+      try {
+        const findEl = document.querySelector<HTMLElement>(conf.el)
+        if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
+        conf.el = findEl
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
+    }
+
+    // 服务器配置
+    conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+
+    // 默认 pageKey
+    if (!conf.pageKey) {
+      // @link http://bl.ocks.org/abernier/3070589
+      conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!conf.pageTitle) {
+      conf.pageTitle = `${document.title}`
+    }
+
+    return conf
+  }
+
+  /** 初始化组件根据远程加载的配置 */
+  private async loadConfRemoteAndInitComponents() {
+    await this.loadConfRemote()
+    this.initComponents()
+    return this
+  }
+
+  /** 远程加载配置 */
+  private async loadConfRemote() {
+    Ui.showLoading(this.$root)
+    let backendConf = {}
+    try {
+      backendConf = await this.ctx.getApi().conf()
+    } catch (err) { console.error("Load config from remote err", err) }
+    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
+    Ui.hideLoading(this.$root)
+  }
+
+  /** 事件绑定初始化 */
+  private initEventBind() {
+    // 锚点快速跳转评论
+    window.addEventListener('hashchange', () => {
+      this.list.goToCommentDelay = false
+      this.list.checkGoToCommentByUrlHash()
+    })
+
+    // 本地用户数据变更
+    this.ctx.on('user-changed', () => {
+      this.ctx.checkAdminShowEl()
+      this.ctx.listRefreshUI()
+    })
+  }
+
+  /** 语言初始化 */
+  private initLocale() {
+    if (typeof this.conf.locale === 'string') {
+      if (this.conf.locale === 'auto') { // 自动切换
+        this.conf.locale = ((navigator.languages) ? navigator.languages[0] : navigator.language)
+      }
+
+      this.conf.locale = this.conf.locale.replace(
+        /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+        (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+      )
+
+      if (!internalLocales[this.conf.locale]) { // 语言不存在时，使用 en
+        console.log(`Locale "${this.conf.locale}" not found.`)
+        this.conf.locale = 'en'
+      }
+    }
+  }
+
+  /** Layer 初始化 */
+  private initLayer() {
+    // 记录页面原始 Styles
+    Layer.BodyOrgOverflow = document.body.style.overflow
+    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  }
+
+  /** 暗黑模式初始化 */
+  private initDarkMode() {
+    if (this.conf.darkMode === 'auto') {
+      // 自动切换暗黑模式，事件监听
+      const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+      darkModeMedia.addEventListener('change', (e) => { this.setDarkMode(e.matches) })
+      this.setDarkMode(darkModeMedia.matches)
+    } else {
+      this.setDarkMode(this.conf.darkMode || false)
+    }
+  }
+
+  /** 设置暗黑模式 */
+  public setDarkMode(darkMode: boolean) {
+    const darkModeClassName = 'atk-dark-mode'
+
+    this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
+
+    if (this.conf.darkMode) {
+      this.$root.classList.add(darkModeClassName)
+    } else {
+      this.$root.classList.remove(darkModeClassName)
+    }
+
+    // for Layer
+    const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
+    if ($layerWrap) {
+      if (this.conf.darkMode) {
+        $layerWrap.classList.add(darkModeClassName)
+      } else {
+        $layerWrap.classList.remove(darkModeClassName)
+      }
+    }
+  }
+
+  /** 监听事件 */
+  public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.ctx.on(name, handler, 'external')
+  }
+
+  /** 解除监听事件 */
+  public off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.ctx.off(name, handler, 'external')
+  }
+
+  /** 触发事件 */
+  public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
+    this.ctx.trigger(name, payload, 'external')
+  }
+
+  /** 重新加载 */
+  public reload() {
+    this.ctx.listReload()
+  }
+
+  /** Use Plugin */
+  public static Use(plugin: ArtalkPlug) {
+    this.Plugins.push(plugin)
+  }
+
+  /** 装载数量统计元素 */
+  public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
+    const conf = this.HandelBaseConf(customConf)
+    const ctx = new ConcreteContext(conf)
+    Stat.initCountWidget({ ctx, pvAdd: false })
+  }
+}

packages/artalk/src/comment/actions.ts

@@ -0,0 +1,86 @@
+import Comment from './comment'
+import ActionBtn from '../components/action-btn'
+
+export default class CommentActions {
+  private comment: Comment
+
+  private get ctx() { return this.comment.ctx }
+  private get data() { return this.comment.getData() }
+  private get cConf() { return this.comment.getConf() }
+
+  public constructor(comment: Comment) {
+    this.comment = comment
+  }
+
+  /** 投票操作 */
+  public vote(type: 'up'|'down') {
+    const actionBtn = (type === 'up') ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown
+
+    this.ctx.getApi().vote(this.data.id, `comment_${type}`)
+    .then((v) => {
+      this.data.vote_up = v.up
+      this.data.vote_down = v.down
+      this.comment.getRender().voteBtnUp?.updateText()
+      this.comment.getRender().voteBtnDown?.updateText()
+    })
+    .catch((err) => {
+      actionBtn?.setError(this.ctx.$t('voteFail'))
+      console.log(err)
+    })
+  }
+
+  /** 管理员 - 评论状态修改 */
+  public adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在修改中
+
+    btnElem.setLoading(true, `${this.ctx.$t('editing')}...`)
+
+    // 克隆并修改当前数据
+    const modify = { ...this.data }
+    if (type === 'collapsed') {
+      modify.is_collapsed = !modify.is_collapsed
+    } else if (type === 'pending') {
+      modify.is_pending = !modify.is_pending
+    } else if (type === 'pinned') {
+      modify.is_pinned = !modify.is_pinned
+    }
+
+    this.ctx.getApi().commentEdit(modify).then((data) => {
+      btnElem.setLoading(false)
+
+      // 刷新当前 Comment UI
+      this.comment.setData(data)
+
+      // 刷新 List UI
+      this.ctx.listRefreshUI()
+    }).catch((err) => {
+      console.error(err)
+      btnElem.setError(this.ctx.$t('editFail'))
+    })
+  }
+
+  /** 管理员 - 评论删除 */
+  public adminDelete(btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在删除中
+
+    btnElem.setLoading(true, `${this.ctx.$t('deleting')}...`)
+    this.ctx.getApi().commentDel(this.data.id, this.data.site_name)
+      .then(() => {
+        btnElem.setLoading(false)
+        if (this.cConf.onDelete) this.cConf.onDelete(this.comment)
+      })
+      .catch((e) => {
+        console.error(e)
+        btnElem.setError(this.ctx.$t('deleteFail'))
+      })
+  }
+
+  /** 快速跳转到该评论 */
+  public goToReplyComment() {
+    const origHash = window.location.hash
+    const modifyHash = `#atk-comment-${this.data.rid}`
+
+    window.location.hash = modifyHash
+    if (modifyHash === origHash) window.dispatchEvent(new Event('hashchange')) // 强制触发事件
+  }
+}

packages/artalk/src/comment/comment.html

@@ -0,0 +1,18 @@
+<div class="atk-comment-wrap">
+  <div class="atk-comment">
+    <div class="atk-avatar"></div>
+    <div class="atk-main">
+      <div class="atk-header">
+        <span class="atk-item atk-nick"></span>
+        <span class="atk-badge-wrap"></span>
+        <span class="atk-item atk-date"></span>
+      </div>
+      <div class="atk-body">
+        <div class="atk-content"></div>
+      </div>
+      <div class="atk-footer">
+        <div class="atk-actions"></div>
+      </div>
+    </div>
+  </div>
+</div>

packages/artalk/src/comment/comment.ts

@@ -0,0 +1,191 @@
+import { CommentData } from '~/types/artalk-data'
+import Context from '~/types/context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import UADetect from '../lib/detect'
+import CommentRender from './render'
+import CommentActions from './actions'
+
+export interface CommentConf {
+  isUnread?: boolean
+  openURL?: string
+  isFlatMode: boolean
+  replyTo?: CommentData
+  afterRender?: () => void
+  openEvt?: () => void
+  onReplyBtnClick?: Function
+  onDelete?: Function
+}
+
+export default class Comment extends Component {
+  private renderInstance: CommentRender
+  private actionInstance: CommentActions
+
+  private data: CommentData
+  private cConf: CommentConf
+
+  private parent: Comment|null
+  private children: Comment[] = []
+
+  private nestCurt: number // 当前嵌套层数
+  private nestMax: number  // 最大嵌套层数
+
+  constructor(ctx: Context, data: CommentData, conf: CommentConf) {
+    super(ctx)
+
+    // 最大嵌套数
+    this.nestMax = ctx.conf.nestMax || 3
+
+    this.cConf = conf
+    this.data = { ...data }
+    this.data.date = this.data.date.replace(/-/g, '/') // 解决 Safari 日期解析 NaN 问题
+
+    this.parent = null
+    this.nestCurt = 1 // 现在已嵌套 n 层
+
+    this.actionInstance = new CommentActions(this)
+    this.renderInstance = new CommentRender(this)
+  }
+
+  /** 渲染 UI */
+  public render() {
+    const newEl = this.renderInstance.render()
+
+    if (this.$el) this.$el.replaceWith(newEl)
+    this.$el = newEl
+
+    if (this.cConf.afterRender) this.cConf.afterRender()
+  }
+
+  /** 获取评论操作实例对象 */
+  public getActions() {
+    return this.actionInstance
+  }
+
+  /** 获取评论渲染器实例对象 */
+  public getRender() {
+    return this.renderInstance
+  }
+
+  /** 获取评论数据 */
+  public getData() {
+    return this.data
+  }
+
+  /** 设置数据 */
+  public setData(data: CommentData) {
+    this.data = data
+
+    this.render()
+    this.getRender().playFadeAnimForBody()
+  }
+
+  /** 获取父评论 */
+  public getParent() {
+    return this.parent
+  }
+
+  /** 获取所有子评论 */
+  public getChildren() {
+    return this.children
+  }
+
+  /** 获取当前嵌套层数 */
+  public getNestCurt() {
+    return this.nestCurt
+  }
+
+  /** 判断是否为根评论 */
+  public getIsRoot() {
+    return this.data.rid === 0
+  }
+
+  /** 获取评论 ID */
+  public getID() {
+    return this.data.id
+  }
+
+  /** 置入子评论 */
+  public putChild(childC: Comment, insertMode: 'append'|'prepend' = 'append') {
+    childC.parent = this
+    childC.nestCurt = this.nestCurt + 1 // 嵌套层数 +1
+
+    this.children.push(childC)
+
+    const $children = this.getChildrenEl()
+    if (insertMode === 'append') $children.append(childC.getEl())
+    else if (insertMode === 'prepend') $children.prepend(childC.getEl())
+
+    childC.getRender().playFadeAnim()
+
+    // 内容限高
+    childC.getRender().checkHeightLimitArea('content')
+  }
+
+  /** 获取存放子评论的元素对象 */
+  public getChildrenEl(): HTMLElement {
+    let $children = this.getRender().getChildrenWrap()
+
+    if (!$children) {
+      // console.log(this.nestCurt)
+      if (this.nestCurt < this.nestMax) {
+        $children = this.getRender().renderChildrenWrap()
+      } else {
+          $children = this.parent!.getChildrenEl()
+      }
+    }
+
+    return $children
+  }
+
+  /** 获取所有父评论 */
+  public getParents() {
+    const parents: Comment[] = []
+    const once = (c: Comment) => {
+      if (c.parent) {
+        parents.push(c.parent)
+        once(c.parent)
+      }
+    }
+
+    once(this)
+    return parents
+  }
+
+  /** 获取评论元素对象 */
+  public getEl() {
+    return this.$el
+  }
+
+  /** 获取 Gravatar 头像 URL */
+  public getGravatarURL() {
+    return Utils.getGravatarURL(this.ctx, this.data.email_encrypted)
+  }
+
+  /** 获取评论 markdown 解析后的内容 */
+  public getContentMarked() {
+    return Utils.marked(this.ctx, this.data.content)
+  }
+
+  /** 获取格式化后的日期 */
+  public getDateFormatted() {
+    return Utils.timeAgo(new Date(this.data.date), this.ctx)
+  }
+
+  /** 获取用户 UserAgent 浏览器 */
+  public getUserUaBrowser() {
+    const info = UADetect(this.data.ua)
+    return `${info.browser} ${info.version}`
+  }
+
+  /** 获取用户 UserAgent 系统 */
+  public getUserUaOS() {
+    const info = UADetect(this.data.ua)
+    return `${info.os} ${info.osVersion}`
+  }
+
+  /** 获取配置 */
+  public getConf() {
+    return this.cConf
+  }
+}

packages/artalk/src/comment/index.ts

@@ -0,0 +1,3 @@
+import Comment from './comment'
+
+export default Comment

packages/artalk/src/comment/render.ts

@@ -0,0 +1,425 @@
+import '../style/comment.less'
+
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import ActionBtn from '../components/action-btn'
+import CommentHTML from './comment.html?raw'
+import Comment from './comment'
+
+export default class CommentRender {
+  private comment: Comment
+
+  private get ctx() { return this.comment.ctx }
+  private get data() { return this.comment.getData() }
+  private get cConf() { return this.comment.getConf() }
+
+  public $el!: HTMLElement
+  public $main!: HTMLElement
+  public $header!: HTMLElement
+  public $headerNick!: HTMLElement
+  public $headerBadgeWrap!: HTMLElement
+  public $body!: HTMLElement
+  public $content!: HTMLElement
+  private $childrenWrap!: HTMLElement|null
+  public $actions!: HTMLElement
+  public voteBtnUp?: ActionBtn
+  public voteBtnDown?: ActionBtn
+
+  public $replyTo?: HTMLElement // 回复评论内容 (平铺下显示)
+  public $replyAt?: HTMLElement // 回复 AT（层级嵌套下显示）
+
+  public constructor(comment: Comment) {
+    this.comment = comment
+  }
+
+  public render() {
+    this.$el = Utils.createElement(CommentHTML)
+
+    this.$main = this.$el.querySelector('.atk-main')!
+    this.$header = this.$el.querySelector('.atk-header')!
+    this.$body = this.$el.querySelector('.atk-body')!
+    this.$content = this.$body.querySelector('.atk-content')!
+    this.$actions = this.$el.querySelector('.atk-actions')!
+
+    this.$el.setAttribute('data-comment-id', `${this.data.id}`)
+
+    this.renderAvatar()
+    this.renderHeader()
+    this.renderContent()
+    this.renderReplyAt()
+    this.renderReplyTo()
+    this.renderPending()
+    this.renderActionBtn()
+
+    this.recoveryChildrenWrap()
+
+    return this.$el
+  }
+
+  /** 初始化 - 评论头像 */
+  private renderAvatar() {
+    const $avatar = this.$el.querySelector<HTMLElement>('.atk-avatar')!
+    const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
+    $avatarImg.src = this.comment.getGravatarURL()
+    if (this.data.link) {
+      const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
+      $avatarA.href = this.data.link
+      $avatarA.append($avatarImg)
+      $avatar.append($avatarA)
+    } else {
+      $avatar.append($avatarImg)
+    }
+  }
+
+  /** 初始化 - 评论信息 */
+  private renderHeader() {
+    this.$headerNick = this.$el.querySelector<HTMLElement>('.atk-nick')!
+
+    if (this.data.link) {
+      const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
+      $nickA.innerText = this.data.nick
+      $nickA.href = this.data.link
+      this.$headerNick.append($nickA)
+    } else {
+      this.$headerNick.innerText = this.data.nick
+    }
+
+    this.$headerBadgeWrap = this.$el.querySelector<HTMLElement>('.atk-badge-wrap')!
+    this.$headerBadgeWrap.innerHTML = ''
+
+    const badgeText = this.data.badge_name
+    const badgeColor = this.data.badge_color
+    if (badgeText) {
+      const $badge = Utils.createElement(`<span class="atk-badge"></span>`)
+      $badge.innerText = badgeText.replace('管理员', this.ctx.$t('admin')) // i18n patch
+      $badge.style.backgroundColor = badgeColor || ''
+      this.$headerBadgeWrap.append($badge)
+    }
+
+    if (this.data.is_pinned) {
+      const $pinnedBadge = Utils.createElement(`<span class="atk-pinned-badge">${this.ctx.$t('pin')}</span>`) // 置顶徽章
+      this.$headerBadgeWrap.append($pinnedBadge)
+    }
+
+    const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
+    $date.innerText = this.comment.getDateFormatted()
+    $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
+
+    if (this.ctx.conf.uaBadge) {
+      let $uaWrap = this.$header.querySelector('atk-ua-wrap')
+      if (!$uaWrap) {
+        $uaWrap = Utils.createElement(`<span class="atk-ua-wrap"></span>`)
+        this.$header.append($uaWrap)
+      }
+
+      $uaWrap.innerHTML = ''
+      const $uaBrowser = Utils.createElement(`<span class="atk-ua ua-browser"></span>`)
+      const $usOS = Utils.createElement(`<span class="atk-ua ua-os"></span>`)
+      $uaBrowser.innerText = this.comment.getUserUaBrowser()
+      $usOS.innerText = this.comment.getUserUaOS()
+      $uaWrap.append($uaBrowser)
+      $uaWrap.append($usOS)
+    }
+  }
+
+  /** 初始化 - 评论内容 */
+  private renderContent() {
+    if (!this.data.is_collapsed) {
+      this.$content.innerHTML = this.comment.getContentMarked()
+      this.$content.classList.remove('atk-hide', 'atk-collapsed')
+      return
+    }
+
+    // 内容 & 折叠
+    this.$content.classList.add('atk-hide', 'atk-type-collapsed')
+    const collapsedInfoEl = Utils.createElement(`
+      <div class="atk-collapsed">
+        <span class="atk-text">${this.ctx.$t('collapsedMsg')}</span>
+        <span class="atk-show-btn">${this.ctx.$t('expand')}</span>
+      </div>`)
+    this.$body.insertAdjacentElement('beforeend', collapsedInfoEl)
+
+    const contentShowBtn = collapsedInfoEl.querySelector('.atk-show-btn')!
+    contentShowBtn.addEventListener('click', (e) => {
+      e.stopPropagation() // 防止穿透
+
+      if (this.$content.classList.contains('atk-hide')) {
+        this.$content.innerHTML = this.comment.getContentMarked()
+        this.$content.classList.remove('atk-hide')
+        Ui.playFadeInAnim(this.$content)
+        contentShowBtn.innerHTML = this.ctx.$t('collapse')
+      } else {
+        this.$content.innerHTML = ''
+        this.$content.classList.add('atk-hide')
+        contentShowBtn.innerHTML = this.ctx.$t('expand')
+      }
+    })
+  }
+
+  /** 初始化 - 层级嵌套模式显示 At */
+  private renderReplyAt() {
+    if (this.cConf.isFlatMode || this.data.rid === 0) return // not 平铺模式 或 根评论
+    if (!this.cConf.replyTo) return
+
+    this.$replyAt = Utils.createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`)
+    this.$replyAt.querySelector<HTMLElement>('.atk-nick')!.innerText = `${this.cConf.replyTo.nick}`
+    this.$replyAt.onclick = () => { this.comment.getActions().goToReplyComment() }
+
+    this.$headerBadgeWrap.insertAdjacentElement('afterend', this.$replyAt)
+  }
+
+  /** 初始化 - 回复的对象 */
+  private renderReplyTo() {
+    if (!this.cConf.isFlatMode) return // 仅平铺模式显示
+    if (!this.cConf.replyTo) return
+
+    this.$replyTo = Utils.createElement(`
+      <div class="atk-reply-to">
+        <div class="atk-meta">${this.ctx.$t('reply')} <span class="atk-nick"></span>:</div>
+        <div class="atk-content"></div>
+      </div>`)
+    const $nick = this.$replyTo.querySelector<HTMLElement>('.atk-nick')!
+    $nick.innerText = `@${this.cConf.replyTo.nick}`
+    $nick.onclick = () => { this.comment.getActions().goToReplyComment() }
+    let replyContent = Utils.marked(this.ctx, this.cConf.replyTo.content)
+    if (this.cConf.replyTo.is_collapsed) replyContent = `[${this.ctx.$t('collapsed')}]`
+    this.$replyTo.querySelector<HTMLElement>('.atk-content')!.innerHTML = replyContent
+    this.$body.prepend(this.$replyTo)
+  }
+
+  /** 初始化 - 待审核状态 */
+  private renderPending() {
+    if (!this.data.is_pending) return
+
+    const pendingEl = Utils.createElement(`<div class="atk-pending">${this.ctx.$t('pendingMsg')}</div>`)
+    this.$body.prepend(pendingEl)
+  }
+
+  /** 初始化 - 评论操作按钮 */
+  private renderActionBtn() {
+    // 投票功能
+    if (this.ctx.conf.vote) {
+      // 赞同按钮
+      this.voteBtnUp = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteUp')} (${this.data.vote_up || 0})`).appendTo(this.$actions)
+      this.voteBtnUp.setClick(() => {
+        this.comment.getActions().vote('up')
+      })
+
+      // 反对按钮
+      if (this.ctx.conf.voteDown) {
+        this.voteBtnDown = new ActionBtn(this.ctx, () => `${this.ctx.$t('voteDown')} (${this.data.vote_down || 0})`).appendTo(this.$actions)
+        this.voteBtnDown.setClick(() => {
+          this.comment.getActions().vote('down')
+        })
+      }
+    }
+
+    // 绑定回复按钮事件
+    if (this.data.is_allow_reply) {
+      const replyBtn = Utils.createElement(`<span>${this.ctx.$t('reply')}</span>`)
+      this.$actions.append(replyBtn)
+      replyBtn.addEventListener('click', (e) => {
+        e.stopPropagation() // 防止穿透
+        if (!this.cConf.onReplyBtnClick) {
+          this.ctx.replyComment(this.data, this.$el)
+        } else {
+          this.cConf.onReplyBtnClick()
+        }
+      })
+    }
+
+    // 绑定折叠按钮事件
+    const collapseBtn = new ActionBtn(this.ctx, {
+      text: () => (this.data.is_collapsed ? this.ctx.$t('expand') : this.ctx.$t('collapse')),
+      adminOnly: true
+    })
+    collapseBtn.appendTo(this.$actions)
+    collapseBtn.setClick(() => {
+      this.comment.getActions().adminEdit('collapsed', collapseBtn)
+    })
+
+    // 绑定待审核按钮事件
+    const pendingBtn = new ActionBtn(this.ctx, {
+      text: () => (this.data.is_pending ? this.ctx.$t('pending') : this.ctx.$t('approved')),
+      adminOnly: true
+    })
+    pendingBtn.appendTo(this.$actions)
+    pendingBtn.setClick(() => {
+      this.comment.getActions().adminEdit('pending', pendingBtn)
+    })
+
+    // 绑定删除按钮事件
+    const delBtn = new ActionBtn(this.ctx, {
+      text: this.ctx.$t('delete'),
+      confirm: true,
+      confirmText: this.ctx.$t('deleteConfirm'),
+      adminOnly: true,
+    })
+    delBtn.appendTo(this.$actions)
+    delBtn.setClick(() => {
+      this.comment.getActions().adminDelete(delBtn)
+    })
+
+    // 绑定置顶按钮事件
+    const pinnedBtn = new ActionBtn(this.ctx, {
+      text: () => (this.data.is_pinned ? this.ctx.$t('unpin') : this.ctx.$t('pin')),
+      adminOnly: true
+    })
+    pinnedBtn.appendTo(this.$actions)
+    pinnedBtn.setClick(() => {
+      this.comment.getActions().adminEdit('pinned', pendingBtn)
+    })
+  }
+
+  /** 内容限高检测 */
+  public checkHeightLimit() {
+    this.checkHeightLimitArea('content') // 评论内容限高
+    this.checkHeightLimitArea('children') // 子评论部分限高（嵌套模式）
+  }
+
+  /** 目标内容限高检测 */
+  public checkHeightLimitArea(area: 'children'|'content') {
+    // 参数准备
+    const childrenMaxH = this.ctx.conf.heightLimit.children
+    const contentMaxH = this.ctx.conf.heightLimit.content
+
+    if (area === 'children' && !childrenMaxH) return
+    if (area === 'content' && !contentMaxH) return
+
+    // 限高
+    let maxHeight: number
+    if (area === 'children') maxHeight = childrenMaxH!
+    if (area === 'content') maxHeight = contentMaxH!
+
+    // 检测指定元素
+    const checkEl = ($el?: HTMLElement|null) => {
+      if (!$el) return
+
+      // 是否超过高度
+      if (Utils.getHeight($el) > maxHeight) {
+        this.heightLimitAdd($el, maxHeight)
+      }
+    }
+
+    // 执行限高检测
+    if (area === 'children') {
+      checkEl(this.$childrenWrap)
+    } else if (area === 'content') {
+      checkEl(this.$content)
+      checkEl(this.$replyTo)
+
+      // 若有图片 · 图片加载完后再检测一次
+      Utils.onImagesLoaded(this.$content, () => {
+        checkEl(this.$content)
+      })
+      if (this.$replyTo) {
+        Utils.onImagesLoaded(this.$replyTo, () => {
+          checkEl(this.$replyTo)
+        })
+      }
+    }
+  }
+
+  /** 移除限高 */
+  private heightLimitRemove($el: HTMLElement) {
+    if (!$el) return
+    if (!$el.classList.contains('atk-height-limit')) return
+
+    $el.classList.remove('atk-height-limit')
+    Array.from($el.children).forEach((e) => {
+      if (e.classList.contains('atk-height-limit-btn')) e.remove()
+    })
+    $el.style.height = ''
+    $el.style.overflow = ''
+  }
+
+  /** 子评论区域移除限高 */
+  public heightLimitRemoveForChildren() {
+    if (!this.$childrenWrap) return
+    this.heightLimitRemove(this.$childrenWrap)
+  }
+
+  /** 内容限高区域新增 */
+  private heightLimitAdd($el: HTMLElement, maxHeight: number) {
+    if (!$el) return
+    if ($el.classList.contains('atk-height-limit')) return
+
+    $el.classList.add('atk-height-limit')
+    $el.style.height = `${maxHeight}px`
+    $el.style.overflow = 'hidden'
+    const $hideMoreOpenBtn = Utils.createElement(`<div class="atk-height-limit-btn">${this.ctx.$t('readMore')}</span>`)
+    $hideMoreOpenBtn.onclick = (e) => {
+      e.stopPropagation()
+      this.heightLimitRemove($el)
+
+      // 子评论数等于 1，直接取消限高
+      const children = this.comment.getChildren()
+      if (children.length === 1) children[0].getRender().heightLimitRemove(children[0].getRender().$content)
+    }
+    $el.append($hideMoreOpenBtn)
+  }
+
+  /** 渐出动画 */
+  playFadeAnim() {
+    Ui.playFadeInAnim(this.comment.getRender().$el)
+  }
+
+  /** 渐出动画 · 评论内容区域 */
+  playFadeAnimForBody() {
+    Ui.playFadeInAnim(this.comment.getRender().$body)
+  }
+
+  /** 获取子评论 Wrap */
+  public getChildrenWrap() {
+    return this.$childrenWrap
+  }
+
+  /** 初始化子评论区域 Wrap */
+  public renderChildrenWrap() {
+    if (!this.$childrenWrap) {
+      this.$childrenWrap = Utils.createElement('<div class="atk-comment-children"></div>')
+      this.$main.append(this.$childrenWrap)
+    }
+
+    return this.$childrenWrap
+  }
+
+  /** 恢复原有的子评论区域 Wrap */
+  public recoveryChildrenWrap() {
+    if (this.$childrenWrap) {
+      this.$main.append(this.$childrenWrap)
+    }
+  }
+
+  /** 设置已读 */
+  public setUnread(val: boolean) {
+    if (val) this.$el.classList.add('atk-unread')
+    else this.$el.classList.remove('atk-unread')
+  }
+
+  /** 设置为可点击的评论 */
+  public setOpenable(val: boolean) {
+    if (val) this.$el.classList.add('atk-openable')
+    else this.$el.classList.remove('atk-openable')
+  }
+
+  /** 设置点击评论打开置顶 URL */
+  public setOpenURL(url: string) {
+    this.setOpenable(true)
+    this.$el.onclick = (evt) => {
+      evt.preventDefault()
+      window.open(url)
+
+      if (this.cConf.openEvt) this.cConf.openEvt()
+    }
+  }
+
+  /** 设置点击评论时的操作 */
+  public setOpenAction(action: () => void) {
+    this.setOpenable(true)
+    this.$el.onclick = (evt) => {
+      evt.preventDefault()
+      action()
+    }
+  }
+}

packages/artalk/src/components/action-btn.ts

@@ -0,0 +1,172 @@
+import Context from '~/types/context'
+import * as Utils from '../lib/utils'
+
+interface ActionBtnConf {
+  /** 按钮文字 (动态/静态) */
+  text: (() => string) | string
+
+  /** 仅管理员可用 */
+  adminOnly?: boolean
+
+  /** 确认操作 */
+  confirm?: boolean
+
+  /** 确认时提示文字 */
+  confirmText?: string
+}
+
+/**
+ * 通用操作按钮
+ */
+export default class ActionBtn {
+  private ctx: Context
+  private conf: ActionBtnConf
+  public $el: HTMLElement
+
+  public isLoading = false // 正在加载
+
+  public msgRecTimer?: number // 消息显示复原定时器
+  public msgRecTimerFunc?: Function // 消息显示复原操作
+  public get isMessaging() { return !!this.msgRecTimer } // 消息正在显示
+
+  public isConfirming = false // 正在确认
+  public confirmRecTimer?: number // 确认消息复原定时器
+
+  /** 构造函数 */
+  constructor(ctx: Context, conf: ActionBtnConf|string|(() => string)) {
+    this.ctx = ctx
+    this.$el = Utils.createElement(`<span class="atk-common-action-btn"></span>`)
+
+    this.conf = (typeof conf !== 'object') ? ({ text: conf }) : conf
+    this.$el.innerText = this.getText()
+
+    // 仅管理员可操作
+    if (this.conf.adminOnly) this.$el.setAttribute('atk-only-admin-show', '')
+  }
+
+  /** 将按钮装载到指定元素 */
+  public appendTo(dom: HTMLElement) {
+    dom.append(this.$el)
+    return this
+  }
+
+  /** 获取按钮文字（动态/静态） */
+  private getText() {
+    return (typeof this.conf.text === 'string') ? this.conf.text : this.conf.text()
+  }
+
+  /** 设置点击事件 */
+  public setClick(func: Function) {
+    this.$el.onclick = (e) => {
+      e.stopPropagation() // 防止穿透
+
+      // 按钮处于加载状态，禁止点击
+      if (this.isLoading) {
+        return
+      }
+
+      // 操作确认
+      if (this.conf.confirm && !this.isMessaging) {
+        const confirmRestore = () => {
+          this.isConfirming = false
+          this.$el.classList.remove('atk-btn-confirm')
+          this.$el.innerText = this.getText()
+        }
+
+        if (!this.isConfirming) {
+          this.isConfirming = true
+          this.$el.classList.add('atk-btn-confirm')
+          this.$el.innerText = this.conf.confirmText || this.ctx.$t('actionConfirm')
+          this.confirmRecTimer = window.setTimeout(() => confirmRestore(), 5000)
+          return
+        }
+
+        if (this.confirmRecTimer) window.clearTimeout(this.confirmRecTimer)
+        confirmRestore()
+      }
+
+      // 立刻释放掉原有的定时器（当显示消息后，用户立刻点击时）
+      if (this.msgRecTimer) {
+        this.fireMsgRecTimer()
+        this.clearMsgRecTimer()
+        return
+      }
+
+      // 触发设定的点击事件
+      func()
+    }
+  }
+
+  /** 文字刷新（动态/静态） */
+  public updateText(text?: (() => string) | string) {
+    if (text) this.conf.text = text
+    this.setLoading(false)
+    this.$el.innerText = this.getText()
+  }
+
+  /** 设置加载状态 */
+  public setLoading(value: boolean, loadingText?: string) {
+    if (this.isLoading === value) return
+    this.isLoading = value
+    if (value) {
+      this.$el.classList.add('atk-btn-loading')
+      this.$el.innerText = loadingText || `${this.ctx.$t('loading')}...`
+    } else {
+      this.$el.classList.remove('atk-btn-loading')
+      this.$el.innerText = this.getText()
+    }
+  }
+
+  /** 错误消息 */
+  public setError(text: string) {
+    this.setMsg(text, 'atk-btn-error')
+  }
+
+  /** 警告消息 */
+  public setWarn(text: string) {
+    this.setMsg(text, 'atk-btn-warn')
+  }
+
+  /** 成功消息 */
+  public setSuccess(text: string) {
+    this.setMsg(text, 'atk-btn-success')
+  }
+
+  /** 设置消息 */
+  public setMsg(text: string, className?: string, duringTime?: number, after?: Function) {
+    this.setLoading(false)
+    if (className) this.$el.classList.add(className)
+    this.$el.innerText = text
+
+    // 设定复原 timer
+    this.setMsgRecTimer(() => {
+      this.$el.innerText = this.getText()
+      if (className) this.$el.classList.remove(className)
+      if (after) after()
+    }, duringTime || 2500) // 消息默认显示持续 2500s
+  }
+
+  /** 设置消息复原操作定时器 */
+  private setMsgRecTimer(func: Function, duringTime: number) {
+    this.fireMsgRecTimer()
+    this.clearMsgRecTimer()
+
+    this.msgRecTimerFunc = func
+    this.msgRecTimer = window.setTimeout(() => {
+      func()
+      this.clearMsgRecTimer()
+    }, duringTime)
+  }
+
+  /** 立刻触发器复原定时器 */
+  private fireMsgRecTimer() {
+    if (this.msgRecTimerFunc) this.msgRecTimerFunc()
+  }
+
+  /** 仅清除 timer */
+  private clearMsgRecTimer() {
+    if (this.msgRecTimer) window.clearTimeout(this.msgRecTimer)
+    this.msgRecTimer = undefined
+    this.msgRecTimerFunc = undefined
+  }
+}

packages/artalk/src/components/dialog.ts

@@ -0,0 +1,67 @@
+import Context from '~/types/context'
+import * as Utils from '../lib/utils'
+
+type BtnClickHandler = (btnEl: HTMLElement, dialog: Dialog) => boolean|void
+
+/**
+ * 对话框
+ */
+export default class Dialog {
+  public ctx: Context
+  public $el: HTMLElement
+  public $content: HTMLElement
+  public $actions: HTMLElement
+
+  constructor (ctx: Context, contentEl: HTMLElement) {
+    this.ctx = ctx
+
+    this.$el = Utils.createElement(
+      `<div class="atk-layer-dialog-wrap">
+        <div class="atk-layer-dialog">
+          <div class="atk-layer-dialog-content"></div>
+          <div class="atk-layer-dialog-actions"></div>
+        </div>
+      </div>`
+    )
+
+    // 按钮
+    this.$actions = this.$el.querySelector<HTMLElement>('.atk-layer-dialog-actions')!
+
+    // 内容
+    this.$content = this.$el.querySelector('.atk-layer-dialog-content')!
+    this.$content.appendChild(contentEl)
+
+    return this
+  }
+
+  /** 按钮 · 确定 */
+  public setYes(handler: BtnClickHandler) {
+    const btn = Utils.createElement<HTMLButtonElement>(
+      `<button data-action="confirm">${this.ctx.$t('confirm')}</button>`
+    )
+    btn.onclick = this.onBtnClick(handler)
+    this.$actions.appendChild(btn)
+
+    return this
+  }
+
+  /** 按钮 · 取消 */
+  public setNo(handler: BtnClickHandler) {
+    const btn = Utils.createElement<HTMLButtonElement>(
+      `<button data-action="cancel">${this.ctx.$t('cancel')}</button>`
+    )
+    btn.onclick = this.onBtnClick(handler)
+    this.$actions.appendChild(btn)
+
+    return this
+  }
+
+  private onBtnClick(handler: BtnClickHandler) {
+    return (evt: Event) => {
+      const re = handler(evt.currentTarget as HTMLElement, this)
+      if (re === undefined || re === true) {
+        this.$el.remove()
+      }
+    }
+  }
+}

packages/artalk/src/components/pagination.ts

@@ -0,0 +1,150 @@
+import '../style/pagination.less'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+
+export interface PaginationConf {
+  /** 每页条数 */
+  pageSize: number
+
+  /** 回调函数 */
+  onChange: (offset: number) => void
+}
+
+export default class Pagination {
+  private conf: PaginationConf
+  public total: number
+  public $el: HTMLElement
+  public $input: HTMLInputElement
+  public inputTimer?: number
+  public $prevBtn: HTMLElement
+  public $nextBtn: HTMLElement
+
+  public page: number = 1
+  get pageSize(): number {
+    return this.conf.pageSize
+  }
+  get offset(): number {
+    return this.pageSize * (this.page - 1)
+  }
+  get maxPage(): number {
+    return Math.ceil(this.total / this.pageSize)
+  }
+
+  public constructor(total: number, conf: PaginationConf) {
+    this.total = total
+    this.conf = conf
+
+    this.$el = Utils.createElement(
+      `<div class="atk-pagination-wrap">
+        <div class="atk-pagination">
+          <div class="atk-btn atk-btn-prev">Prev</div>
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
+          <div class="atk-btn atk-btn-next">Next</div>
+        </div>
+      </div>`)
+    this.$input = this.$el.querySelector('.atk-input')!
+    this.$input.value = `${this.page}`
+
+    this.$input.oninput = () => this.input()
+    this.$input.onkeydown = (e) => this.keydown(e)
+
+    this.$prevBtn = this.$el.querySelector('.atk-btn-prev')!
+    this.$nextBtn = this.$el.querySelector('.atk-btn-next')!
+
+    this.$prevBtn.onclick = () => this.prev()
+    this.$nextBtn.onclick = () => this.next()
+
+    this.checkDisabled()
+  }
+
+  public update(offset: number, total: number) {
+    this.page = Math.ceil(offset / this.pageSize) + 1
+    this.total = total
+
+    this.setInput(this.page)
+    this.checkDisabled()
+  }
+
+  public setInput(page: number) {
+    this.$input.value = `${page}`
+  }
+
+  public input(now: boolean = false) {
+    window.clearTimeout(this.inputTimer)
+
+    const value = this.$input.value.trim()
+
+    const modify = () => {
+      if (value === '') { this.setInput(this.page);return }
+      let page = Number(value)
+      if (Number.isNaN(page)) { this.setInput(this.page);return }
+      if (page < 1) { this.setInput(this.page);return }
+      if (page > this.maxPage) { this.setInput(this.maxPage);page = this.maxPage }
+      this.change(page)
+    }
+
+    // 延迟 800ms 执行
+    if (!now) this.inputTimer = window.setTimeout(() => modify(), 800)
+    else modify()
+  }
+
+  public prev() {
+    const page = this.page - 1
+    if (page < 1) { return }
+    this.change(page)
+  }
+
+  public next() {
+    const page = this.page + 1
+    if (page > this.maxPage) { return }
+    this.change(page)
+  }
+
+  public change(page: number) {
+    this.page = page
+    this.conf.onChange(this.offset)
+    this.setInput(page)
+    this.checkDisabled()
+  }
+
+  public checkDisabled() {
+    if (this.page + 1 > this.maxPage) {
+      this.$nextBtn.classList.add('atk-disabled')
+    } else {
+      this.$nextBtn.classList.remove('atk-disabled')
+    }
+
+    if (this.page - 1 < 1) {
+      this.$prevBtn.classList.add('atk-disabled')
+    } else {
+      this.$prevBtn.classList.remove('atk-disabled')
+    }
+  }
+
+  public keydown(e: KeyboardEvent) {
+    const keyCode = e.keyCode || e.which
+
+    if (keyCode === 38) {
+      // 上键
+      const page = Number(this.$input.value) + 1
+      if (page > this.maxPage) { return }
+      this.setInput(page);
+      this.input()
+    } else if (keyCode === 40) {
+      // 下键
+      const page = Number(this.$input.value) - 1
+      if (page < 1) { return }
+      this.setInput(page)
+      this.input()
+    } else if (keyCode === 13) {
+      // 回车
+      this.input(true)
+    }
+  }
+
+  /** 加载 */
+  setLoading (isLoading: boolean) {
+    if (isLoading) Ui.showLoading(this.$el)
+    else Ui.hideLoading(this.$el)
+  }
+}

packages/artalk/src/components/read-more-btn.ts

@@ -0,0 +1,92 @@
+import * as Utils from '../lib/utils'
+
+export interface ReadMoreBtnConf {
+  /** 回调函数 */
+  onClick: (offset: number) => void
+
+  pageSize: number
+
+  text?: string
+}
+
+/**
+ * 阅读更多按钮
+ */
+export default class ReadMoreBtn {
+  public conf: ReadMoreBtnConf
+  public $el: HTMLElement
+  private $loading: HTMLElement
+  private $text: HTMLElement
+  private offset: number = 0
+  private total: number = 0
+  private origText: string = 'Load More'
+
+  /** 是否有更多内容 */
+  get hasMore() {
+    return this.total > (this.offset + this.conf.pageSize)
+  }
+
+  public constructor(conf: ReadMoreBtnConf) {
+    this.conf = conf
+    this.origText = this.conf.text || this.origText
+
+    this.$el = Utils.createElement(
+    `<div class="atk-list-read-more" style="display: none;">
+      <div class="atk-list-read-more-inner">
+        <div class="atk-loading-icon" style="display: none;"></div>
+        <span class="atk-text">${this.origText}</span>
+      </div>
+    </div>`)
+
+    this.$loading = this.$el.querySelector<HTMLElement>('.atk-loading-icon')!
+    this.$text = this.$el.querySelector<HTMLElement>('.atk-text')!
+
+    this.$el.onclick = () => { this.click() }
+  }
+
+  click() {
+    if (this.hasMore) this.conf.onClick(this.offset + this.conf.pageSize)
+    this.checkDisabled()
+  }
+
+  /** 显示 */
+  show() {
+    this.$el.style.display = ''
+  }
+
+  /** 隐藏 */
+  hide() {
+    this.$el.style.display = 'none'
+  }
+
+  /** 加载 */
+  setLoading (isLoading: boolean) {
+    this.$loading.style.display = isLoading ? '' : 'none'
+    this.$text.style.display = isLoading ? 'none' : ''
+  }
+
+  /** 错误提示 */
+  showErr(errMsg: string) {
+    this.setLoading(false)
+
+    this.$text.innerText = errMsg
+    this.$el.classList.add('atk-err')
+    window.setTimeout(() => {
+      this.$text.innerText = this.origText
+      this.$el.classList.remove('atk-err')
+    }, 2000) // 2s后错误提示复原
+  }
+
+  /** 更新数据 */
+  public update(offset: number, total: number) {
+    this.offset = offset
+    this.total = total
+
+    this.checkDisabled()
+  }
+
+  public checkDisabled() {
+    if (this.hasMore) this.show()
+    else this.hide()
+  }
+}

packages/artalk/src/context.ts

@@ -0,0 +1,237 @@
+import { marked as libMarked } from 'marked'
+import ArtalkConfig from '~/types/artalk-config'
+import { CommentData, NotifyData } from '~/types/artalk-data'
+import { Event } from '~/types/event'
+import { internal as internalLocales, I18n } from './i18n'
+import User from './lib/user'
+import ContextApi from '../types/context'
+import Editor from './editor'
+import Comment from './comment'
+import ListLite from './list/list-lite'
+import SidebarLayer, { SidebarShowPayload } from './layer/sidebar-layer'
+import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from './lib/checker'
+import Layer, { GetLayerWrap } from './layer'
+import Api from './api'
+
+/**
+ * Artalk Context
+ */
+export default class Context implements ContextApi {
+  /* 持有同事类 */
+  private api!: Api
+  private editor!: Editor
+  private list!: ListLite
+  private sidebarLayer!: SidebarLayer
+  private checkerLauncher!: CheckerLauncher
+
+  /* 运行参数 */
+  public cid: number // Context 唯一标识
+  public conf: ArtalkConfig
+  public user: User
+  public $root: HTMLElement
+  public markedInstance?: typeof libMarked
+  public markedReplacers: ((raw: string) => string)[] = []
+
+  private commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
+
+  /* 订阅者模式 */
+  private eventList: Event[] = []
+
+  public constructor(conf: ArtalkConfig, $root?: HTMLElement) {
+    this.cid = +new Date()
+    this.conf = conf
+    this.user = new User(this)
+
+    this.$root = $root || document.createElement('div')
+    this.$root.setAttribute('atk-run-id', this.cid.toString())
+    this.$root.classList.add('artalk')
+    this.$root.innerHTML = ''
+
+    this.api = new Api(this)
+  }
+
+  /* 设置持有的同事类 */
+  public setApi(api: Api): void {
+    this.api = api
+  }
+
+  public setEditor(editor: Editor): void {
+    this.editor = editor
+  }
+
+  public setList(list: ListLite): void {
+    this.list = list
+  }
+
+  public setSidebarLayer(sidebarLayer: SidebarLayer): void {
+    this.sidebarLayer = sidebarLayer
+  }
+
+  public setCheckerLauncher(checkerLauncher: CheckerLauncher): void {
+    this.checkerLauncher = checkerLauncher
+  }
+
+  public getApi() {
+    return this.api
+  }
+
+  /* 评论操作 */
+  public getCommentList() {
+    return this.commentList
+  }
+
+  public getCommentDataList() {
+    return this.commentList.map(c => c.getData())
+  }
+
+  public findComment(id: number): Comment|undefined {
+    return this.commentList.find(c => c.getData().id === id)
+  }
+
+  public deleteComment(_comment: number|Comment) {
+    let comment: Comment
+    if (typeof _comment === 'number') {
+      const findComment = this.findComment(_comment)
+      if (!findComment) throw Error(`Comment ${_comment} cannot be found`)
+      comment = findComment
+    } else comment = _comment
+
+    comment.getEl().remove()
+    this.commentList.splice(this.commentList.indexOf(comment), 1)
+
+    const listData = this.list.getData()
+    if (listData) listData.total -= 1 // 评论数减 1
+
+    this.list.refreshUI()
+  }
+
+  public clearAllComments() {
+    this.list.getCommentsWrapEl().innerHTML = ''
+    this.list.clearData()
+    this.commentList = []
+  }
+
+  public insertComment(commentData: CommentData) {
+    this.list.insertComment(commentData)
+  }
+
+  public replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void {
+    this.editor.setReply(commentData, $comment, scroll)
+  }
+
+  public cancelReplyComment(): void {
+    this.editor.cancelReply()
+  }
+
+  public updateNotifies(notifies: NotifyData[]): void {
+    this.list.updateUnread(notifies)
+  }
+
+  /* 评论列表 */
+  public listReload(): void {
+    this.list.reload()
+  }
+
+  public listRefreshUI(): void {
+    this.list.refreshUI()
+  }
+
+  /* 编辑器 */
+  public editorOpen(): void {
+    this.editor.open()
+  }
+
+  public editorClose(): void {
+    this.editor.close()
+  }
+
+  public editorShowLoading(): void {
+    this.editor.showLoading()
+  }
+
+  public editorHideLoading(): void {
+    this.editor.hideLoading()
+  }
+
+  public editorShowNotify(msg, type): void {
+    this.editor.showNotify(msg, type)
+  }
+
+  public editorTravel($el: HTMLElement): void {
+    this.editor.travel($el)
+  }
+
+  public editorTravelBack(): void {
+    this.editor.travelBack()
+  }
+
+  /* 侧边栏 */
+  public showSidebar(payload?: SidebarShowPayload): void {
+    this.sidebarLayer.show(payload)
+  }
+
+  public hideSidebar(): void {
+    this.sidebarLayer.hide()
+  }
+
+  /* 权限检测 */
+  public checkAdmin(payload: CheckerPayload): void {
+    this.checkerLauncher.checkAdmin(payload)
+  }
+
+  public checkCaptcha(payload: CheckerCaptchaPayload): void {
+    this.checkerLauncher.checkCaptcha(payload)
+  }
+
+  public checkAdminShowEl() {
+    const items: HTMLElement[] = []
+
+    this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+    // for layer
+    const { $wrap: $layerWrap } = GetLayerWrap(this)
+    if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+    // for sidebar
+    // TODO: 这个其实应该写在 packages/artalk-sidebar 里面的
+    const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
+    if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+    items.forEach(($item: HTMLElement) => {
+      if (this.user.data.isAdmin) $item.classList.remove('atk-hide')
+      else $item.classList.add('atk-hide')
+    })
+  }
+
+  /* 订阅模式 */
+  public on(name: any, handler: any, scope: any = 'internal') {
+    this.eventList.push({ name, handler, scope })
+  }
+
+  public off(name: any, handler: any, scope: any = 'internal') {
+    this.eventList = this.eventList.filter((evt) => {
+      if (handler) return !(evt.name === name && evt.handler === handler && evt.scope === scope)
+      return !(evt.name === name && evt.scope === scope) // 删除全部相同 name event
+    })
+  }
+
+  public trigger(name: any, payload?: any, scope?: any) {
+    this.eventList
+      .filter((evt) => evt.name === name && (scope ? (evt.scope === scope) : true))
+      .map((evt) => evt.handler)
+      .forEach((handler) => handler(payload))
+  }
+
+  /* i18n */
+  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
+    let locales = this.conf.locale
+    if (typeof locales === 'string') {
+      locales = internalLocales[locales]
+    }
+
+    let str = locales?.[key] || key
+    str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
+
+    return str
+  }
+}

packages/artalk/src/defaults.ts

@@ -0,0 +1,60 @@
+import ArtalkConfig from "~/types/artalk-config"
+
+const defaults: ArtalkConfig = {
+  el: '',
+  pageKey: '',
+  pageTitle: '',
+  server: '',
+  site: '',
+
+  placeholder: '',
+  noComment: '',
+  sendBtn: '',
+  darkMode: false,
+  editorTravel: true,
+
+  flatMode: 'auto',
+  nestMax: 2,
+  nestSort: 'DATE_ASC',
+
+  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
+
+  vote: true,
+  voteDown: false,
+  uaBadge: true,
+  listSort: true,
+  preview: true,
+  countEl: '#ArtalkCount',
+  pvEl: '#ArtalkPV',
+
+  gravatar: {
+    default: 'mp',
+    mirror: 'https://sdn.geekzu.org/avatar/',
+  },
+
+  pagination: {
+    pageSize: 20,
+    readMore: true,
+    autoLoad: true,
+  },
+
+  heightLimit: {
+    content: 300,
+    children: 400,
+  },
+
+  imgUpload: true,
+  reqTimeout: 15000,
+  versionCheck: true,
+  useBackendConf: false,
+
+  locale: 'zh-CN',
+}
+
+if (ARTALK_LITE) {
+  defaults.vote = false
+  defaults.uaBadge = false
+  defaults.emoticons = false
+}
+
+export default defaults

packages/artalk/src/editor/editor.html

@@ -0,0 +1,18 @@
+<div class="atk-main-editor">
+  <div class="atk-header">
+    <input name="nick" class="atk-nick" type="text" required="required">
+    <input name="email" class="atk-email" type="email" required="required">
+    <input name="link" class="atk-link" type="url">
+  </div>
+  <div class="atk-textarea-wrap">
+    <textarea class="atk-textarea"></textarea>
+  </div>
+  <div class="atk-plug-panel-wrap" style="display: none;"></div>
+  <div class="atk-bottom">
+    <div class="atk-item atk-plug-btn-wrap"></div>
+    <div class="atk-item">
+      <button type="button" class="atk-send-btn"></button>
+    </div>
+  </div>
+  <div class="atk-notify-wrap"></div>
+</div>

packages/artalk/src/editor/editor.ts

@@ -0,0 +1,419 @@
+import '@/style/editor.less'
+
+import { CommentData } from '~/types/artalk-data'
+import Context from '~/types/context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+
+import EditorHTML from './editor.html?raw'
+
+import EmoticonsPlug from './plugs/emoticons-plug'
+import UploadPlug from './plugs/upload-plug'
+import PreviewPlug from './plugs/preview-plug'
+import EditorPlug from './plugs/editor-plug'
+import HeaderInputPlug from './plugs/header-input-plug'
+
+export default class Editor extends Component {
+  private get user() { return this.ctx.user }
+
+  public $header: HTMLElement
+  public $nick: HTMLInputElement
+  public $email: HTMLInputElement
+  public $link: HTMLInputElement
+  public get $inputs() {
+    return { nick: this.$nick, email: this.$email, link: this.$link }
+  }
+
+  public $textareaWrap: HTMLElement
+  public $textarea: HTMLTextAreaElement
+  public $bottom: HTMLElement
+  public $submitBtn: HTMLButtonElement
+  public $notifyWrap: HTMLElement
+
+  private replyComment: CommentData|null = null
+  private $sendReply: HTMLElement|null = null
+
+  private isTraveling = false
+
+  /** 启用的插件 */
+  private readonly ENABLED_PLUGS = [ EmoticonsPlug, UploadPlug, PreviewPlug, HeaderInputPlug ]
+  public plugList: { [name: string]: EditorPlug } = {}
+  private openedPlugName: string|null = null
+  public $plugPanelWrap: HTMLElement
+  public $plugBtnWrap: HTMLElement
+
+  public constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(EditorHTML)
+
+    this.$header = this.$el.querySelector('.atk-header')!
+    this.$nick = this.$header.querySelector('[name="nick"]')!
+    this.$email = this.$header.querySelector('[name="email"]')!
+    this.$link = this.$header.querySelector('[name="link"]')!
+
+    this.$textareaWrap = this.$el.querySelector('.atk-textarea-wrap')!
+    this.$textarea = this.$el.querySelector('.atk-textarea')!
+    this.$bottom = this.$el.querySelector('.atk-bottom')!
+    this.$submitBtn = this.$el.querySelector('.atk-send-btn')!
+    this.$notifyWrap = this.$el.querySelector('.atk-notify-wrap')!
+
+    this.$plugBtnWrap = this.$el.querySelector('.atk-plug-btn-wrap')!
+    this.$plugPanelWrap = this.$el.querySelector('.atk-plug-panel-wrap')!
+
+    // 执行初始化
+    this.initLocalStorage()
+    this.initHeader()
+    this.initTextarea()
+    this.initPlugs()
+    this.initSubmitBtn()
+
+    // 监听事件
+    this.ctx.on('conf-updated', () => {})
+  }
+
+  private initLocalStorage() {
+    const localContent = window.localStorage.getItem('ArtalkContent') || ''
+    if (localContent.trim() !== '') {
+      this.showNotify(this.$t('restoredMsg'), 'i')
+      this.setContent(localContent)
+    }
+
+    this.$textarea.addEventListener('input', () => (this.saveToLocalStorage()))
+  }
+
+  private saveToLocalStorage() {
+    window.localStorage.setItem('ArtalkContent', this.getContentOriginal().trim())
+  }
+
+  private initHeader() {
+    Object.entries(this.$inputs).forEach(([key, $input]) => {
+      $input.value = this.user.data[key] || ''
+      $input.addEventListener('input', () => this.onHeaderInput(key, $input))
+
+      // 设置 Placeholder
+      $input.placeholder = `${this.$t(key as any)}`
+    })
+  }
+
+  private onHeaderInput(key: string, $input: HTMLInputElement) {
+    this.user.update({
+      [key]: $input.value.trim()
+    })
+
+    // 插件监听事件响应
+    Object.entries(this.plugList).forEach(([plugName, plug]) => {
+      if (plug.onHeaderInput) plug.onHeaderInput(key, $input)
+    })
+  }
+
+  private initTextarea() {
+    // 占位符
+    this.$textarea.placeholder = this.ctx.conf.placeholder || this.$t('placeholder')
+
+    // 修复按下 Tab 输入的内容
+    this.$textarea.addEventListener('keydown', (e) => {
+      const keyCode = e.keyCode || e.which
+
+      if (keyCode === 9) {
+        e.preventDefault()
+        this.insertContent('\t')
+      }
+    })
+
+    // 输入框高度随内容而变化
+    this.$textarea.addEventListener('input', () => {
+      this.adjustTextareaHeight()
+    })
+  }
+
+  private initSubmitBtn() {
+    this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t('send')
+    this.$submitBtn.addEventListener('click', () => (this.submit()))
+  }
+
+  /** 最终用于 submit 的数据 */
+  public getFinalContent() {
+    let content = this.getContentOriginal()
+
+    // 表情包处理
+    if (this.plugList.emoticons) {
+      content = (this.plugList.emoticons as EmoticonsPlug).transEmoticonImageText(content)
+    }
+
+    return content
+  }
+
+  public getContentOriginal() {
+    return this.$textarea.value || '' // Tip: !!"0" === true
+  }
+
+  public getContentMarked() {
+    return Utils.marked(this.ctx, this.getFinalContent())
+  }
+
+  public setContent(val: string) {
+    this.$textarea.value = val
+    this.saveToLocalStorage()
+    if (this.plugList.preview) {
+      ;(this.plugList.preview as PreviewPlug).updateContent()
+    }
+
+    // 延迟执行防止无效
+    window.setTimeout(() => {
+      this.adjustTextareaHeight()
+    }, 80)
+  }
+
+  public insertContent(val: string) {
+    if ((document as any).selection) {
+      this.$textarea.focus();
+      (document as any).selection.createRange().text = val
+      this.$textarea.focus()
+    } else if (this.$textarea.selectionStart || this.$textarea.selectionStart === 0) {
+      const sStart = this.$textarea.selectionStart
+      const sEnd = this.$textarea.selectionEnd
+      const sT = this.$textarea.scrollTop
+      this.setContent(this.$textarea.value.substring(0, sStart) + val + this.$textarea.value.substring(sEnd, this.$textarea.value.length))
+      this.$textarea.focus()
+      this.$textarea.selectionStart = sStart + val.length
+      this.$textarea.selectionEnd = sStart + val.length
+      this.$textarea.scrollTop = sT
+    } else {
+      this.$textarea.focus()
+      this.$textarea.value += val
+    }
+  }
+
+  public clearEditor() {
+    this.setContent('')
+    this.cancelReply()
+  }
+
+  private adjustTextareaHeight() {
+    const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight
+    this.$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
+    this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`
+  }
+
+  public setReply(commentData: CommentData, $comment: HTMLElement, scroll = true) {
+    if (this.replyComment !== null) {
+      this.cancelReply()
+    }
+
+    if (this.$sendReply === null) {
+      this.$sendReply = Utils.createElement(`<div class="atk-send-reply">${this.$t('reply')} <span class="atk-text"></span><span class="atk-cancel">×</span></div>`);
+      this.$sendReply.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
+      this.$sendReply.addEventListener('click', () => {
+        this.cancelReply()
+      })
+      this.$textareaWrap.append(this.$sendReply)
+    }
+    this.replyComment = commentData
+
+    if (this.ctx.conf.editorTravel === true) {
+      this.travel($comment)
+    }
+
+    if (scroll) Ui.scrollIntoView(this.$el)
+
+    this.$textarea.focus()
+  }
+
+  public cancelReply() {
+    if (this.$sendReply !== null) {
+      this.$sendReply.remove()
+      this.$sendReply = null
+    }
+    this.replyComment = null
+
+    if (this.ctx.conf.editorTravel === true) {
+      this.travelBack()
+    }
+  }
+
+  public showNotify(msg: string, type: "i"|"s"|"w"|"e") {
+    Ui.showNotify(this.$notifyWrap, msg, type)
+  }
+
+  public showLoading() {
+    Ui.showLoading(this.$el)
+  }
+
+  public hideLoading() {
+    Ui.hideLoading(this.$el)
+  }
+
+  /** 提交评论 */
+  public async submit() {
+    if (this.getFinalContent().trim() === '') {
+      this.$textarea.focus()
+      return
+    }
+
+    this.ctx.trigger('editor-submit')
+
+    this.showLoading()
+
+    try {
+      const nComment = await this.ctx.getApi().add({
+        content: this.getFinalContent(),
+        nick: this.user.data.nick,
+        email: this.user.data.email,
+        link: this.user.data.link,
+        rid: (this.replyComment === null) ? 0 : this.replyComment.id,
+        page_key: (this.replyComment === null) ? this.ctx.conf.pageKey : this.replyComment.page_key,
+        page_title: (this.replyComment === null) ? this.ctx.conf.pageTitle : undefined,
+        site_name: (this.replyComment === null) ? this.ctx.conf.site : this.replyComment.site_name
+      })
+
+      // 回复不同页面的评论
+      if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
+        window.open(`${this.replyComment.page_url}#atk-comment-${nComment.id}`)
+      }
+
+      this.ctx.insertComment(nComment)
+      this.clearEditor() // 清空编辑器
+      this.ctx.trigger('editor-submitted')
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`${this.$t('commentFail')}，${err.msg || String(err)}`, 'e')
+      return
+    } finally {
+      this.hideLoading()
+    }
+  }
+
+  /** 关闭评论 */
+  public close() {
+    if (!this.$textareaWrap.querySelector('.atk-comment-closed'))
+      this.$textareaWrap.prepend(Utils.createElement(`<div class="atk-comment-closed">${this.$t('onlyAdminCanReply')}</div>`))
+
+    if (!this.user.data.isAdmin) {
+      this.$textarea.style.display = 'none'
+      this.closePlugPanel()
+      this.$bottom.style.display = 'none'
+    } else {
+      // 管理员一直打开评论
+      this.$textarea.style.display = ''
+      this.$bottom.style.display = ''
+    }
+  }
+
+  /** 打开评论 */
+  public open() {
+    this.$textareaWrap.querySelector('.atk-comment-closed')?.remove()
+    this.$textarea.style.display = ''
+    this.$bottom.style.display = ''
+  }
+
+  /** 移动评论框到置顶元素之后 */
+  public travel($afterEl: HTMLElement) {
+    if (this.isTraveling) return
+    this.isTraveling = true
+    this.$el.after(Utils.createElement('<div class="atk-editor-travel-placeholder"></div>'))
+
+    const $travelPlace = Utils.createElement('<div></div>')
+    $afterEl.after($travelPlace)
+    $travelPlace.replaceWith(this.$el)
+
+    this.$el.classList.add('atk-fade-in') // 添加渐入动画
+  }
+
+  /** 评论框归位 */
+  public travelBack() {
+    if (!this.isTraveling) return
+    this.isTraveling = false
+    this.ctx.$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.$el)
+
+    // 取消回复
+    if (this.replyComment !== null) this.cancelReply()
+  }
+
+  /** 插件初始化 */
+  private initPlugs() {
+    this.plugList = {}
+    this.$plugPanelWrap.innerHTML = ''
+    this.$plugPanelWrap.style.display = 'none'
+    this.openedPlugName = null
+    this.$plugBtnWrap.innerHTML = ''
+
+    const disabledPlugs: string[] = []
+    if (!this.conf.emoticons) disabledPlugs.push('emoticons')
+    if (!this.conf.preview) disabledPlugs.push('preview')
+
+    // 初始化 Editor 插件
+    this.ENABLED_PLUGS.forEach((Plug) => {
+      const plugName = Plug.Name
+
+      // 禁用的插件
+      if (disabledPlugs.includes(plugName)) return
+
+      // 插件对象实例化
+      const plug = new Plug(this)
+      this.plugList[plugName] = plug
+
+      // 插件按钮
+      const $btn = plug.getBtn()
+      if ($btn) {
+        this.$plugBtnWrap.appendChild($btn)
+        $btn.onclick = $btn.onclick || (() => {
+          // 其他按钮去除 Active
+          this.$plugBtnWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
+
+          // 若点击已打开的，则关闭打开的面板
+          if (plugName === this.openedPlugName) {
+            this.closePlugPanel()
+            return
+          }
+
+          this.openPlugPanel(plugName)
+
+          // 当前按钮添加 Active
+          $btn.classList.add('active')
+        })
+
+        // 插件面板初始化
+        const $panel = plug.getPanel()
+        if ($panel) {
+          $panel.setAttribute('data-plug-name', plugName)
+          $panel.style.display = 'none'
+          this.$plugPanelWrap.appendChild($panel)
+        }
+      }
+    })
+  }
+
+  /** 展开插件面板 */
+  public openPlugPanel(plugName: string) {
+    Object.entries(this.plugList).forEach(([aPlugName, plug]) => {
+      const plugPanel = plug.getPanel()
+      if (!plugPanel) return
+
+      if (aPlugName === plugName) {
+        plugPanel.style.display = ''
+        if (plug.onPanelShow) plug.onPanelShow()
+      } else {
+        plugPanel.style.display = 'none'
+        if (plug.onPanelHide) plug.onPanelHide()
+      }
+    })
+
+    this.$plugPanelWrap.style.display = ''
+    this.openedPlugName = plugName
+  }
+
+  /** 收起插件面板 */
+  public closePlugPanel() {
+    if (!this.openedPlugName) return
+
+    const plug = this.plugList[this.openedPlugName]
+    if (!plug) return
+
+    if (plug.onPanelHide) plug.onPanelHide()
+
+    this.$plugPanelWrap.style.display = 'none'
+    this.openedPlugName = null
+  }
+}

packages/artalk/src/editor/index.ts

@@ -0,0 +1,3 @@
+import Editor from './editor'
+
+export default Editor

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

@@ -0,0 +1,51 @@
+import * as Utils from '@/lib/utils'
+import Editor from '../editor'
+
+/**
+ * Editor 插件
+ *
+ * @desc 使用 Interface x Abstract 合并声明
+ * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
+ */
+interface EditorPlug {
+  onPanelShow?(): void
+  onPanelHide?(): void
+}
+
+abstract class EditorPlug {
+  protected editor: Editor
+  protected get ctx() { return this.editor.ctx }
+  protected $panel?: HTMLElement
+  protected $btn?: HTMLElement
+  public onHeaderInput?: (key: string, $input: HTMLElement) => void
+
+  public constructor(editor: Editor) {
+    this.editor = editor
+  }
+
+  public static Name: string
+
+  protected registerPanel(html: string = '<div></div>') {
+    this.$panel = Utils.createElement(html)
+    return this.$panel
+  }
+
+  protected registerBtn(html: string) {
+    this.$btn = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${this.constructor.name}">${html}</span>`)
+    return this.$btn
+  }
+
+  protected registerHeaderInputEvt(action: (key: string, $input: HTMLElement) => void) {
+    this.onHeaderInput = action
+  }
+
+  public getPanel() {
+    return this.$panel
+  }
+
+  public getBtn() {
+    return this.$btn
+  }
+}
+
+export default EditorPlug

packages/artalk/src/editor/plugs/emoticons-plug.less

@@ -0,0 +1,71 @@
+.atk-editor-plug-emoticons {
+  height: 100%;
+  width: 100%;
+
+  & > .atk-grp-wrap {
+    .atk-slim-scrollbar();
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 100%; // calc(100% - 30px);
+    width: 100%;
+
+    & > .atk-grp {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      padding: 5px 10px 35px 10px;
+
+      &[data-type="image"] > .atk-item {
+        height: 63px;
+        width: 63px;
+      }
+
+      & > .atk-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5px;
+        cursor: pointer;
+        user-select: none;
+        border-radius: (@block-radius / 2);
+        font-size: 16px;
+        min-width: 35px;
+
+        & > img {
+          max-height: 100%;
+          width: auto;
+        }
+
+        &:hover {
+          background: var(--at-color-bg-grey);
+        }
+      }
+    }
+  }
+
+  & > .atk-grp-switcher {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: var(--at-color-bg-transl);
+    height: 30px;
+    border-top: 1px solid var(--at-color-border);
+    border-bottom: 1px solid var(--at-color-border);
+
+    & > span {
+      user-select: none;
+      padding: 0 10px;
+      line-height: 30px;
+      float: left;
+      display: block;
+      cursor: pointer;
+      font-size: @font-size;
+
+      &:hover,
+      &.active {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,293 @@
+import './emoticons-plug.less'
+
+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] : {
+    type: 'emoticon'|'emoji'|'image',
+    container: {icon: string, text: string}[]
+  }
+}
+
+export default class EmoticonsPlug extends EditorPlug {
+  public static Name = 'emoticons'
+
+  declare protected $panel: HTMLElement
+
+  public emoticons: EmoticonListData = []
+  public loadingTask: Promise<void>|null = null
+
+  public $grpWrap!: HTMLElement
+  public $grpSwitcher!: HTMLElement
+
+  public constructor(public editor: Editor) {
+    super(editor)
+
+    this.registerPanel(`<div class="atk-editor-plug-emoticons"></div>`)
+    this.registerBtn(this.ctx.$t('emoticon'))
+
+    // 表情包预加载
+    window.setTimeout(() => {
+      this.loadEmoticonsData()
+    }, 1000) // 延迟 1s 加载
+  }
+
+  public onPanelShow() {
+    ;(async () => {
+      await this.loadEmoticonsData()
+
+      // 初始化元素
+      if (!this.isImgLoaded) {
+        this.initEmoticonsList()
+        this.isImgLoaded = true
+      }
+
+      // 延迟执行，防止无法读取高度
+      setTimeout(() => {
+        this.changeListHeight()
+      }, 30)
+    })()
+  }
+
+  public onPanelHide() {
+    this.$panel.parentElement!.style.height = ''
+  }
+
+  isListLoaded = false
+  isImgLoaded = false
+
+  public async loadEmoticonsData() {
+    if (this.isListLoaded) return
+    if (this.loadingTask !== null) {
+      await this.loadingTask
+      return
+    }
+
+    // 数据处理
+    this.loadingTask = (async () => {
+      Ui.showLoading(this.$panel)
+      this.emoticons = await this.handleData(this.ctx.conf.emoticons)
+      Ui.hideLoading(this.$panel)
+      this.loadingTask = null
+      this.isListLoaded = true
+    })()
+    await this.loadingTask
+  }
+
+  private async handleData(data: any): Promise<any[]> {
+    if (!Array.isArray(data) && ['object', 'string'].includes(typeof data)) {
+      data = [data]
+    }
+
+    if (!Array.isArray(data)) {
+      Ui.setError(this.$panel, "表情包数据必须为 Array/Object/String 类型")
+      Ui.hideLoading(this.$panel)
+      return []
+    }
+
+    const pushGrp = (grp: EmoticonGrpData) => {
+      if (typeof grp !== 'object') return
+      if (grp.name && data.find(o => o.name === grp.name)) return
+      data.push(grp)
+    }
+
+    // 加载子内容
+    const remoteLoad = async (d: any[]) => {
+      await Promise.all(d.map(async (grp, index) => {
+        if (typeof grp === 'object' && !Array.isArray(grp)) {
+          pushGrp(grp)
+        } else if (Array.isArray(grp)) {
+          await remoteLoad(grp)
+        } else if (typeof grp === "string") {
+          const grpData = await this.remoteLoad(grp)
+
+          if (Array.isArray(grpData)) await remoteLoad(grpData)
+          else if (typeof grpData === 'object') pushGrp(grpData)
+        }
+      }))
+    }
+    await remoteLoad(data)
+
+    // 处理数组数据
+    data.forEach((item: any) => {
+      if (this.isOwOFormat(item)) {
+        const c = this.convertOwO(item)
+        c.forEach((grp) => { pushGrp(grp) })
+      } else if (Array.isArray(item)) {
+        item.forEach((grp) => { pushGrp(grp) })
+      }
+    })
+
+    // 剔除非法数据
+    data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
+
+    // console.log(data)
+
+    this.solveNullKey(data)
+    this.solveSameKey(data)
+
+    return data
+  }
+
+  /** 远程加载 */
+  private async remoteLoad(url: string): Promise<any> {
+    if (!url) return []
+
+    try {
+      const resp = await fetch(url)
+      const json = await resp.json()
+      return json
+    } catch (err) {
+      Ui.hideLoading(this.$panel)
+      Ui.setError(this.$panel, `表情加载失败 ${String(err)}`)
+      return []
+    }
+  }
+
+  /** 避免表情 item.key 为 null 的情况 */
+  private solveNullKey(data: EmoticonGrpData[]) {
+    data.forEach((grp) => {
+      grp.items.forEach((item, index) => {
+        if (!item.key) item.key = `${grp.name} ${index+1}`
+      })
+    })
+  }
+
+  /** 避免相同 item.key */
+  private solveSameKey(data: EmoticonGrpData[]) {
+    const tmp: {[key: string]: number} = {}
+    data.forEach((grp) => {
+      grp.items.forEach(item => {
+        if (!item.key || String(item.key).trim() === "") return
+        if (!tmp[item.key]) tmp[item.key] = 1
+        else tmp[item.key]++
+
+        if (tmp[item.key] > 1) item.key = `${item.key} ${tmp[item.key]}`
+      })
+    })
+  }
+
+  /** 判断是否为 OwO 格式 */
+  private isOwOFormat(data: any) {
+    try {
+      return (typeof data === 'object') && !!Object.values(data).length
+        && Array.isArray(Object.keys(Object.values<any>(data)[0].container))
+        && Object.keys(Object.values<any>(data)[0].container[0]).includes('icon')
+    } catch { return false }
+  }
+
+  /** 转换 OwO 格式数据 */
+  private convertOwO(owoData: OwOFormatType): EmoticonListData {
+    const dest: EmoticonListData = []
+    Object.entries(owoData).forEach(([grpName, grp]) => {
+      const nGrp: EmoticonGrpData = { name: grpName, type: grp.type, items: [] }
+      grp.container.forEach((item, index) => {
+        // 图片标签提取 src 属性值
+        const iconStr = item.icon
+        if (/<(img|IMG)/.test(iconStr)) {
+          const find = /src=["'](.*?)["']/.exec(iconStr)
+          if (find && find.length > 1) item.icon = find[1]
+        }
+        nGrp.items.push({ key: item.text || `${grpName} ${index+1}`, val: item.icon })
+      })
+      dest.push(nGrp)
+    })
+    return dest
+  }
+
+  /** 初始化表情列表界面 */
+  private initEmoticonsList() {
+    // 表情列表
+    this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
+    this.$panel.append(this.$grpWrap)
+
+    this.emoticons.forEach((grp, index) => {
+      const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
+      this.$grpWrap.append($grp)
+      $grp.setAttribute('data-index', String(index))
+      $grp.setAttribute('data-grp-name', grp.name)
+      $grp.setAttribute('data-type', grp.type)
+      grp.items.forEach((item) => {
+        const $item = Utils.createElement(`<span class="atk-item"></span>`)
+        $grp.append($item)
+
+        if (!!item.key && !(new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key)))
+          $item.setAttribute('title', item.key)
+
+        if (grp.type === 'image') {
+          const imgEl = document.createElement('img')
+          imgEl.src = item.val
+          imgEl.alt = item.key
+          $item.append(imgEl)
+        } else {
+          $item.innerText = item.val
+        }
+
+        $item.onclick = () => {
+          if (grp.type === 'image') {
+            this.editor.insertContent(`:[${item.key}]`)
+          } else {
+            this.editor.insertContent(item.val || '')
+          }
+        }
+      })
+    })
+
+    // 表情分类切换 bar
+    if (this.emoticons.length > 1) {
+      this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
+      this.$panel.append(this.$grpSwitcher)
+      this.emoticons.forEach((grp, index) => {
+        const $item = Utils.createElement('<span />')
+        $item.innerText = grp.name
+        $item.setAttribute('data-index', String(index))
+        $item.onclick = () => (this.openGrp(index))
+        this.$grpSwitcher.append($item)
+      })
+    }
+
+    // 默认打开第一个分类
+    if (this.emoticons.length > 0) this.openGrp(0)
+  }
+
+  /** 打开一个表情组 */
+  public openGrp(index: number) {
+    Array.from(this.$grpWrap.children).forEach((item) => {
+      const el = item as HTMLElement
+      if (el.getAttribute('data-index') !== String(index)) {
+        el.style.display = 'none'
+      } else {
+        el.style.display = ''
+      }
+    })
+
+    this.$grpSwitcher?.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
+    this.$grpSwitcher?.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
+
+    this.changeListHeight()
+  }
+
+  private changeListHeight() {
+    /* const listWrapHeight = Utils.getHeight(this.$grpWrapem)
+    this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
+  }
+
+  /** 处理评论 content 中的表情内容 */
+  public transEmoticonImageText(text: string) {
+    if (!this.emoticons || !Array.isArray(this.emoticons))
+      return text
+
+    this.emoticons.forEach((grp) => {
+      if (grp.type !== 'image') return
+      Object.entries(grp.items).forEach(([index, item]) => {
+        text = text.split(`:[${item.key}]`).join(`<img src="${item.val}" atk-emoticon="${item.key}">`) // replaceAll(...)
+      })
+    })
+
+    return text
+  }
+}

packages/artalk/src/editor/plugs/header-input-plug.ts

@@ -0,0 +1,78 @@
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class HeaderInputPlug extends EditorPlug {
+  public static Name = 'headerInput'
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.registerHeaderInputEvt((key, $input) => {
+      if (key === 'nick' || key === 'email') {
+        this.fetchUserInfo()
+      }
+    })
+
+    // Link URL 自动补全协议
+    this.editor.$link.addEventListener('change', () => {
+      const link = this.editor.$link.value.trim()
+      if (!!link && !/^(http|https):\/\//.test(link)) {
+        this.editor.$link.value = `https://${link}`
+        this.ctx.user.update({ link: this.editor.$link.value })
+      }
+    })
+  }
+
+  queryUserInfo = {
+    timeout: <number|null>null,
+    abortFunc: <(() => void)|null>null
+  }
+
+  /** 远程获取用户数据 */
+  fetchUserInfo() {
+    this.ctx.user.logout()
+
+    // 获取用户信息
+    if (this.queryUserInfo.timeout) window.clearTimeout(this.queryUserInfo.timeout) // 清除待发出的请求
+    if (this.queryUserInfo.abortFunc) this.queryUserInfo.abortFunc() // 之前发出未完成的请求立刻中止
+
+    this.queryUserInfo.timeout = window.setTimeout(() => {
+      this.queryUserInfo.timeout = null // 清理
+
+      const {req, abort} = this.ctx.getApi().userGet(
+        this.ctx.user.data.nick, this.ctx.user.data.email
+      )
+      this.queryUserInfo.abortFunc = abort
+      req.then(data => {
+        if (!data.is_login) {
+          this.ctx.user.logout()
+        }
+
+        // 未读消息更新
+        this.ctx.updateNotifies(data.unread)
+
+        // 若用户为管理员，执行登陆操作
+        if (this.ctx.user.checkHasBasicUserInfo() && !data.is_login && data.user?.is_admin) {
+          this.showLoginDialog()
+        }
+
+        // 自动填入 link
+        if (data.user && data.user.link) {
+          this.editor.$link.value = data.user.link
+          this.ctx.user.update({ link: data.user.link })
+        }
+      })
+      .catch(() => {})
+      .finally(() => {
+        this.queryUserInfo.abortFunc = null // 清理
+      })
+    }, 400) // 延迟执行，减少请求次数
+  }
+
+  showLoginDialog() {
+    this.ctx.checkAdmin({
+      onSuccess: () => {
+      }
+    })
+  }
+}

packages/artalk/src/editor/plugs/preview-plug.less

@@ -1,7 +1,7 @@
-.artalk-editor-plug-preview {
+.atk-editor-plug-preview {
   overflow-y: scroll;
   overflow-x: hidden;
   height: 100%;
   width: 100%;
-  padding: @block-padding 10px + 5px;
+  padding: 10px (10px + 5px);
 }

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

@@ -0,0 +1,40 @@
+import './preview-plug.less'
+
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class PreviewPlug extends EditorPlug {
+  public static Name = 'preview'
+  declare protected $panel: HTMLElement
+
+  private isBind = false
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.registerPanel(`<div class="atk-editor-plug-preview"></div>`)
+
+    let btnText = this.editor.$t('preview')
+    if (this.ctx.markedInstance) btnText += ` <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`
+    this.registerBtn(btnText)
+  }
+
+  public onPanelShow() {
+    this.updateContent()
+
+    if (!this.isBind) {
+      const event = () => {
+        this.updateContent()
+      }
+      this.editor.$textarea.addEventListener('input', event)
+      this.editor.$textarea.addEventListener('change', event)
+      this.isBind = true
+    }
+  }
+
+  public updateContent() {
+    if (this.$panel.style.display !== 'none') {
+      this.$panel.innerHTML = this.editor.getContentMarked()
+    }
+  }
+}

packages/artalk/src/editor/plugs/upload-plug.ts

@@ -0,0 +1,124 @@
+import * as Utils from '@/lib/utils'
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+
+export default class UploadPlug extends EditorPlug {
+  public static Name = 'upload'
+
+  public $imgUploadInput?: HTMLInputElement
+
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  public constructor(editor: Editor) {
+    super(editor)
+
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+
+    const $btn = this.registerBtn(`${this.ctx.$t('image')}`)
+    $btn.after(this.$imgUploadInput)
+    $btn.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() // 显示选择图片对话框
+    }
+
+    this.ctx.on('conf-updated', () => {
+      if (!this.ctx.conf.imgUpload) {
+        this.getBtn()!.setAttribute('atk-only-admin-show', '')
+        this.ctx.checkAdminShowEl()
+      }
+    })
+
+    // 统一从 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.editor.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.editor.$textarea.addEventListener('drop', (evt) => {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.editor.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+  }
+
+  public async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.editor.showNotify(this.ctx.$t('uploadLoginMsg'), 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.editor.$textarea.value.trim() === '') insertPrefix = ''
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
+    this.editor.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      if (!this.ctx.conf.imgUploader) {
+        // 使用 ArtalkGo 进行图片上传
+        resp = await this.ctx.getApi().imgUpload(file)
+      } else {
+        // 使用自定义的图片上传器
+        resp = {img_url: await this.ctx.conf.imgUploader(file)}
+      }
+    } catch (err: any) {
+      console.error(err)
+      this.editor.showNotify(`${this.ctx.$t('uploadFail')}，${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.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+    } else {
+      // 上传失败删除加载文字
+      this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, ''))
+    }
+  }
+}

packages/artalk/src/i18n/en.ts

@@ -0,0 +1,78 @@
+export default {
+  /* Editor */
+  placeholder: 'Leave a comment',
+  noComment: 'No Comment',
+  send: 'Send',
+  nick: 'Nickname',
+  email: 'Email',
+  link: 'Website',
+  emoticon: 'Emoji',
+  preview: 'Preview',
+  image: 'Image',
+  uploadFail: 'Upload Failed',
+  commentFail: 'Failed to comment',
+  restoredMsg: 'Content has been restored',
+  onlyAdminCanReply: 'Only admin can reply',
+  uploadLoginMsg: 'Please fill in your name and email to upload',
+
+  /* List */
+  counter: '{count} Comments',
+  sortLatest: 'Latest',
+  sortOldest: 'Oldest',
+  sortBest: 'Best',
+  sortAuthor: 'Author',
+  openComment: 'Open Comment',
+  closeComment: 'Close Comment',
+  listLoadFailMsg: 'Failed to load comments',
+  listRetry: 'Click to retry',
+  loadMore: 'Load More',
+
+  /* Comment */
+  admin: 'Admin',
+  reply: 'Reply',
+  voteUp: 'Up',
+  voteDown: 'Down',
+  voteFail: 'Vote Failed',
+  readMore: 'Read More',
+  actionConfirm: 'Confirm',
+  collapse: 'Collapse',
+  collapsed: 'Collapsed',
+  collapsedMsg: 'This comment has been collapsed',
+  expand: 'Expand',
+  approved: 'Approved',
+  pending: 'Pending',
+  pendingMsg: 'Pending, visible only to commenter.',
+  delete: 'Delete',
+  deleteConfirm: 'Confirm',
+  pin: 'Pin',
+  unpin: 'Unpin',
+
+  /* Time */
+  seconds: 'seconds ago',
+  minutes: 'minutes ago',
+  hours: 'hours ago',
+  days: 'days ago',
+  now: 'just now',
+
+  /* Checker */
+  adminCheck: 'Enter admin password:',
+  captchaCheck: 'Enter the CAPTCHA to continue:',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+
+  /* Sidebar */
+  msgCenter: 'Messages',
+  ctrlCenter: 'Admin',
+
+  /* General */
+  frontend: 'Frontend',
+  backend: 'Backend',
+  loading: 'Loading',
+  loadFail: 'Load Failed',
+  editing: 'Editing',
+  editFail: 'Edit Failed',
+  deleting: 'Deleting',
+  deleteFail: 'Delete Failed',
+  reqGot: 'Request got',
+  reqAborted: 'Request timed out or terminated unexpectedly',
+}

packages/artalk/src/i18n/index.ts

@@ -0,0 +1,21 @@
+import en from './en'
+import zhCN from './zh-CN'
+
+export type I18n = typeof en
+
+// @note the Key name is followed by `ISO 639`
+// https://en.wikipedia.org/wiki/ISO_639
+// https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
+export const internal = {
+  'en': en,
+  'en-US': en,
+  'zh-CN': zhCN,
+}
+
+export const external = {
+  'jp-JP': {},
+  'zh-TW': {},
+  'fr-FR': {},
+  'de-DE': {},
+  'bn-IN': {},
+}

packages/artalk/src/i18n/zh-CN.ts

@@ -0,0 +1,82 @@
+import { I18n } from '.'
+
+const zhCN: I18n = {
+  /* Editor */
+  placeholder: '键入内容...',
+  noComment: '「此时无声胜有声」',
+  send: '发送评论',
+  nick: '昵称',
+  email: '邮箱',
+  link: '网址',
+  emoticon: '表情',
+  preview: '预览',
+  image: '图片',
+  uploadFail: '上传失败',
+  commentFail: '评论失败',
+  restoredMsg: '内容已自动恢复',
+  onlyAdminCanReply: '仅管理员可评论',
+  uploadLoginMsg: '填入你的名字邮箱才能上传哦',
+
+  /* List */
+  counter: '{count} 条评论',
+  sortLatest: '最新',
+  sortOldest: '最早',
+  sortBest: '最热',
+  sortAuthor: '作者',
+  openComment: '打开评论',
+  closeComment: '关闭评论',
+  listLoadFailMsg: '无法获取评论列表数据',
+  listRetry: '点击重新获取',
+  loadMore: '加载更多',
+
+  /* Comment */
+  admin: '管理员',
+  reply: '回复',
+  voteUp: '赞同',
+  voteDown: '反对',
+  voteFail: '投票失败',
+  readMore: '阅读更多',
+  actionConfirm: '确认操作',
+  collapse: '折叠',
+  collapsed: '已折叠',
+  collapsedMsg: '该评论已被系统或管理员折叠',
+  expand: '取消折叠',
+  approved: '已审',
+  pending: '待审',
+  pendingMsg: '审核中，仅本人可见。',
+  delete: '删除',
+  deleteConfirm: '确认删除',
+  pin: '置顶',
+  unpin: '取消置顶',
+
+  /* Time */
+  seconds: '秒前',
+  minutes: '分钟前',
+  hours: '小时前',
+  days: '天前',
+  now: '刚刚',
+
+  /* Checker */
+  adminCheck: '键入密码来验证管理员身份：',
+  captchaCheck: '键入验证码继续：',
+  confirm: '确认',
+  cancel: '取消',
+
+  /* Sidebar */
+  msgCenter: '通知中心',
+  ctrlCenter: '控制中心',
+
+  /* General */
+  frontend: '前端',
+  backend: '后端',
+  loading: '加载中',
+  loadFail: '加载失败',
+  editing: '修改中',
+  editFail: '修改失败',
+  deleting: '删除中',
+  deleteFail: '删除失败',
+  reqGot: '请求响应',
+  reqAborted: '请求超时或意外终止',
+}
+
+export default zhCN

packages/artalk/src/layer/index.ts

@@ -0,0 +1,4 @@
+import Layer, { GetLayerWrap } from './layer'
+
+export default Layer
+export { GetLayerWrap }

packages/artalk/src/layer/layer.ts

@@ -0,0 +1,163 @@
+import Context from '~/types/context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+
+export default class Layer extends Component {
+  private name: string
+  private $wrap: HTMLElement
+  private $mask: HTMLElement
+
+  private maskClickHideEnable: boolean = true
+
+  public static BodyOrgOverflow: string
+  public static BodyOrgPaddingRight: string
+
+  public afterHide?: Function
+
+  constructor (ctx: Context, name: string, el?: HTMLElement) {
+    super(ctx)
+
+    this.name = name
+    const { $wrap, $mask } = GetLayerWrap(ctx)
+    this.$wrap = $wrap
+    this.$mask = $mask
+
+    this.$el = this.$wrap.querySelector(`[data-layer-name="${name}"].atk-layer-item`)!
+    if (this.$el === null) {
+      // 若传递 layer 元素为空
+      if (!el) {
+        this.$el = Utils.createElement()
+        this.$el.classList.add('atk-layer-item')
+      } else {
+        this.$el = el
+      }
+    }
+    this.$el.setAttribute('data-layer-name', name)
+    this.$el.style.display = 'none'
+
+    // 添加到 layers wrap 中
+    this.$wrap.append(this.$el)
+  }
+
+  getName() {
+    return this.name
+  }
+
+  getWrapEl() {
+    return this.$wrap
+  }
+
+  getEl() {
+    return this.$el
+  }
+
+  show() {
+    this.fireAllActionTimer()
+
+    this.$wrap.style.display = 'block'
+    this.$mask.style.display = 'block'
+    this.$mask.classList.add('atk-fade-in')
+    this.$el.style.display = ''
+
+    this.$mask.onclick = () => {
+      if (this.maskClickHideEnable) this.hide()
+    }
+
+    // body style 禁止滚动 + 防抖
+    this.pageBodyScrollBarHide()
+  }
+
+  hide () {
+    if (this.afterHide) this.afterHide()
+    this.$wrap.classList.add('atk-fade-out')
+    this.$el.style.display = 'none'
+
+    // body style 禁止滚动解除
+    this.pageBodyScrollBarShow()
+
+    this.newActionTimer(() => {
+      this.$wrap.style.display = 'none'
+      this.checkCleanLayer()
+    }, 450)
+    this.newActionTimer(() => {
+      this.$wrap.style.display = 'none'
+      this.$wrap.classList.remove('atk-fade-out')
+    }, 200)
+  }
+
+  setMaskClickHide (enable: boolean) {
+    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}[] = []
+
+  private newActionTimer(func: Function, delay: number) {
+    const act = () => {
+      func() // 执行
+      Layer.actionTimers = Layer.actionTimers.filter(o => o.act !== act) // 删除
+    }
+
+    const tid = window.setTimeout(() => act(), delay)
+
+    Layer.actionTimers.push({ act, tid })
+  }
+
+  private fireAllActionTimer() {
+    Layer.actionTimers.forEach(item => {
+      clearTimeout(item.tid)
+      item.act() // 立即执行
+    })
+  }
+
+  /** 销毁 - 无动画 */
+  disposeNow() {
+    this.$el.remove()
+    this.pageBodyScrollBarShow()
+    // this.$el dispose
+    this.checkCleanLayer()
+  }
+
+  /** 销毁 */
+  dispose() {
+    this.hide()
+    this.$el.remove()
+    // this.$el dispose
+    this.checkCleanLayer()
+  }
+
+  checkCleanLayer() {
+    if (this.getWrapEl().querySelectorAll('.atk-layer-item').length === 0) {
+      this.$wrap.style.display = 'none'
+    }
+  }
+}
+
+export function GetLayerWrap(ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
+  let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
+  if (!$wrap) {
+    $wrap = Utils.createElement(
+      `<div class="atk-layer-wrap" id="ctx-${ctx.cid}" style="display: none;"><div class="atk-layer-mask"></div></div>`
+    )
+    document.body.appendChild($wrap)
+  }
+
+  const $mask = $wrap.querySelector<HTMLElement>('.atk-layer-mask')!
+
+  return { $wrap, $mask }
+}

packages/artalk/src/layer/sidebar-layer.html

@@ -0,0 +1,8 @@
+<div class="atk-sidebar-layer">
+  <div class="atk-sidebar-inner">
+    <div class="atk-sidebar-header">
+      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>
+    </div>
+    <div class="atk-sidebar-iframe-wrap"></div>
+  </div>
+</div>

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

@@ -0,0 +1,143 @@
+import '../style/sidebar-layer.less'
+
+import Context from '~/types/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+import SidebarHTML from './sidebar-layer.html?raw'
+import Layer from './layer'
+
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'
+}
+
+export default class SidebarLayer extends Component {
+  public layer?: Layer
+  public $header: HTMLElement
+  public $closeBtn: HTMLElement
+  public $iframeWrap: HTMLElement
+  public $iframe?: HTMLIFrameElement
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(SidebarHTML)
+    this.$header = this.$el.querySelector('.atk-sidebar-header')!
+    this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
+    this.$iframeWrap = this.$el.querySelector('.atk-sidebar-iframe-wrap')!
+
+    this.$closeBtn.onclick = () => {
+      this.hide()
+    }
+
+    // event
+    this.ctx.on('user-changed', () => { this.firstShow = true })
+  }
+
+  private firstShow = true
+
+  /** 显示 */
+  public async show(conf: SidebarShowPayload = {}) {
+    this.$el.style.transform = '' // 动画清除，防止二次打开失效
+
+    // 获取 Layer
+    if (this.layer == null) {
+      this.layer = new Layer(this.ctx, 'sidebar', this.$el)
+      this.layer.afterHide = () => {
+        // 防止评论框被吞
+        if (this.ctx.conf.editorTravel === true) {
+          this.ctx.editorTravelBack()
+        }
+      }
+    }
+    this.layer.show()
+
+    // viewWrap 滚动条归位
+    // this.$viewWrap.scrollTo(0, 0)
+
+    // 执行动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 20)
+
+    // 管理员身份验证 (若身份失效，弹出验证窗口)
+    ;(async () => {
+      const resp = await this.ctx.getApi().loginStatus()
+      if (resp.is_admin && !resp.is_login) {
+        this.layer?.hide()
+        this.firstShow = true
+
+        this.ctx.checkAdmin({
+          onSuccess: () => {
+            setTimeout(() => {
+              this.show(conf)
+            }, 500)
+          },
+          onCancel: () => {}
+        })
+      }
+    })()
+
+    // 清空 unread
+    this.ctx.updateNotifies([])
+
+    // 第一次加载
+    if (this.firstShow) {
+      this.$iframeWrap.innerHTML = ''
+      this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
+
+      // 准备 Iframe 参数
+      const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
+        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
+
+      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 {
+      // 暗黑模式
+      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+
+      if (this.conf.darkMode && !isIframeSrcDarkMode)
+        this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
+
+      if (!this.conf.darkMode && isIframeSrcDarkMode)
+        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
+    }
+
+    this.ctx.trigger('sidebar-show')
+  }
+
+  /** 隐藏 */
+  public hide() {
+    // 执行动画
+    this.$el.style.transform = ''
+
+    this.layer?.hide()
+
+    this.ctx.trigger('sidebar-hide')
+  }
+
+  private iframeLoad(src: string) {
+    if (!this.$iframe) return
+
+    this.$iframe.src = src
+
+    // 加载动画
+    Ui.showLoading(this.$iframeWrap)
+    this.$iframe.onload = () => {
+      Ui.hideLoading(this.$iframeWrap)
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import * as Utils from '../utils'
+import { Checker } from '.'
+
+const AdminChecker: Checker = {
+  inputType: 'password',
+
+  request(that, ctx, inputVal) {
+    const data = {
+      name: that.ctx.user.data.nick,
+      email: that.ctx.user.data.email,
+      password: inputVal
+    }
+
+    return that.ctx.getApi().login(data.name, data.email, data.password)
+  },
+
+  body(that, ctx) {
+    return Utils.createElement(`<span>${that.ctx.$t('adminCheck')}</span>`)
+  },
+
+  onSuccess(that, ctx, userToken, inputVal, formEl) {
+    that.ctx.user.update({
+      isAdmin: true,
+      token: userToken
+    })
+    that.ctx.trigger('user-changed', that.ctx.user.data)
+    that.ctx.listReload()
+  },
+
+  onError(that, ctx, err, inputVal, formEl) {}
+}
+
+export default AdminChecker

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

@@ -0,0 +1,83 @@
+import * as Utils from '../utils'
+import * as Ui from '../ui'
+import { Checker } from '.'
+
+const CaptchaChecker: Checker = {
+  request(that, ctx, inputVal) {
+    return that.ctx.getApi().captchaCheck(inputVal)
+  },
+
+  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 that.ctx.getApi().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.captchaConf.imgData || ''}">${that.ctx.$t('captchaCheck')}</span>`
+    );
+
+    // 刷新验证码
+    elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
+      const imgEl = elem.querySelector('.atk-captcha-img')
+      that.ctx.getApi().captchaGet()
+        .then((imgData) => {
+          imgEl!.setAttribute('src', imgData)
+        })
+        .catch((err) => {
+          console.error('Failed to get captcha image ', err)
+        })
+    }
+    return elem
+  },
+
+  onSuccess(that, ctx, data, inputVal, formEl) {
+    that.captchaConf.val = inputVal
+  },
+
+  onError(that, ctx, err, inputVal, formEl) {
+    formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
+  }
+}
+
+export default CaptchaChecker

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

@@ -0,0 +1,181 @@
+import Context from '~/types/context'
+import Dialog from '@/components/dialog'
+import Layer from '@/layer'
+import * as Utils from '../utils'
+import * as Ui from '../ui'
+import CaptchaChecker from './captcha-checker'
+import AdminChecker from './admin-checker'
+
+export interface CheckerCaptchaPayload extends CheckerPayload {
+  imgData?: string
+  iframe?: string
+}
+
+export interface CheckerPayload {
+  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
+  onMount?: (dialogEl: HTMLElement) => void
+  onCancel?: () => void
+}
+
+/**
+ * Checker 发射台
+ */
+export default class CheckerLauncher {
+  public ctx: Context
+
+  public launched: Checker[] = []
+  public captchaConf: { val?: string, imgData?: string, iframe?: string } = {}
+
+  constructor(ctx: Context) {
+    this.ctx = ctx
+  }
+
+  public checkCaptcha(payload: CheckerCaptchaPayload) {
+    this.captchaConf.imgData = payload.imgData
+    this.captchaConf.iframe = payload.iframe
+
+    this.fire(CaptchaChecker, payload)
+  }
+
+  public checkAdmin(payload: CheckerPayload) {
+    this.fire(AdminChecker, payload)
+  }
+
+  public fire(checker: Checker, payload: CheckerPayload) {
+    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()
+
+    // 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 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
+
+    // 绑定键盘事件
+    $input.onkeyup = (evt) => {
+      if (evt.key === 'Enter' || evt.keyCode === 13) {
+        // 按下回车键
+        evt.preventDefault()
+        layer
+          .getEl()
+          .querySelector<HTMLButtonElement>('button[data-action="confirm"]')!
+          .click()
+      }
+    }
+
+    let btnTextOrg: string | undefined
+    const dialog = new Dialog(this.ctx, formEl)
+
+    // 确认按钮
+    dialog.setYes((btnEl) => {
+      const inputVal = $input.value.trim()
+
+      // 按钮操作
+      if (!btnTextOrg) btnTextOrg = btnEl.innerText
+      const btnTextSet = (btnText: string) => {
+        btnEl.innerText = btnText
+        btnEl.classList.add('error')
+      }
+      const btnTextRestore = () => {
+        btnEl.innerText = btnTextOrg || ''
+        btnEl.classList.remove('error')
+      }
+
+      btnEl.innerText = `${this.ctx.$t('loading')}...`
+
+      // 发送请求
+      checker
+        .request(this, checkerCtx, inputVal)
+        .then((data) => {
+          // 请求成功
+          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, checkerCtx, err, inputVal, formEl)
+
+          // 错误显示 3s 后恢复按钮
+          const tf = setTimeout(() => btnTextRestore(), 3000)
+          $input.onfocus = () => {
+            btnTextRestore()
+            clearTimeout(tf)
+          }
+        })
+
+      return false
+    })
+
+    // 取消按钮
+    dialog.setNo(() => {
+      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)
+
+    // onMount 回调
+    if (payload.onMount) payload.onMount(dialog.$el)
+  }
+
+  // 关闭 checker 对话框
+  private close(checker: Checker, layer: Layer) {
+    layer.disposeNow()
+    this.launched = this.launched.filter(c => c !== checker)
+  }
+}
+
+export interface Checker {
+  el?: HTMLElement
+  inputType?: 'password' | 'text'
+  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/component.ts

@@ -0,0 +1,19 @@
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '~/types/context'
+import { I18n } from '../i18n'
+
+export default abstract class Component {
+  public $el!: HTMLElement
+
+  public ctx: Context
+  public readonly conf: ArtalkConfig
+
+  public constructor(ctx: Context) {
+    this.ctx = ctx
+    this.conf = ctx.conf
+  }
+
+  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
+    return this.ctx.$t(key, args)
+  }
+}

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/stat.ts

@@ -0,0 +1,63 @@
+import ContextApi from '~/types/context'
+import ArtalkPlug from '~/types/plug'
+
+export interface CountConf {
+  ctx: ContextApi
+
+  /** 是否增加当前页面 PV 数 */
+  pvAdd?: boolean
+}
+
+export const PvCountWidget: ArtalkPlug = (ctx: ContextApi) => {
+  initCountWidget({ ctx, pvAdd: true })
+}
+
+/** 初始化评论数和 PV 数量展示元素 */
+export async function initCountWidget(p: CountConf) {
+  // 评论数
+  const countEl = p.ctx.conf.countEl
+  if (countEl && document.querySelector(countEl)) {
+    handleStatCount(p, { api: 'page_comment', countEl })
+  }
+
+  // PV
+  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().pv() : undefined
+  const pvEl = p.ctx.conf.pvEl
+  if (pvEl && document.querySelector(pvEl)) {
+    handleStatCount(p, {
+      api: 'page_pv',
+      countEl: pvEl,
+      curtPageCount: curtPagePvNum,
+    })
+  }
+}
+
+export async function handleStatCount(
+  p: CountConf,
+  args: {
+    api: 'page_pv' | 'page_comment'
+    countEl: string
+    curtPageCount?: number
+  }
+) {
+  let pageCounts: { [key: string]: number } = {}
+
+  // 当前页面的统计数
+  const curtPageKey = p.ctx.conf.pageKey
+  if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
+
+  // 查询其他页面的统计数
+  let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
+    .map((e) => e.getAttribute('data-page-key') || curtPageKey)
+    .filter((pageKey) => pageCounts[pageKey] === undefined)
+  queryPageKeys = [...new Set(queryPageKeys)] // 去重
+  if (queryPageKeys.length > 0) {
+    const counts: any = await p.ctx.getApi().stat(args.api, queryPageKeys)
+    pageCounts = { ...pageCounts, ...counts }
+  }
+
+  document.querySelectorAll(args.countEl).forEach((el) => {
+    const pageKey = el.getAttribute('data-page-key') || curtPageKey
+    el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
+  })
+}

packages/artalk/src/lib/ui.ts

@@ -0,0 +1,180 @@
+import * as Utils from './utils'
+
+/** 显示加载 */
+export function showLoading(parentElem: HTMLElement, conf?: { transparentBg?: boolean }) {
+  // Use :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
+  let $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
+  if (!$loading) {
+    $loading = Utils.createElement(
+    `<div class="atk-loading atk-fade-in" style="display: none;">
+      <div class="atk-loading-spinner">
+        <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 = ''
+
+  // spinner 延迟显示，若加载等待时间太短，没必要显示（闪一下即可）
+  const $spinner = $loading.querySelector<HTMLElement>('.atk-loading-spinner')
+  if ($spinner) {
+    $spinner.style.display = 'none'
+    window.setTimeout(() => {
+      $spinner.style.display = ''
+    }, 500)
+  }
+}
+
+/** 隐藏加载 */
+export function hideLoading(parentElem: HTMLElement) {
+  const $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
+  if ($loading) $loading.style.display = 'none'
+}
+
+/** 元素是否用户可见 */
+export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
+  const viewportHeight = viewport.clientHeight
+
+  const docViewTop = viewport.scrollTop
+  const docViewBottom = docViewTop + viewportHeight
+
+  const rect = el.getBoundingClientRect()
+  const elemTop = rect.top + docViewTop
+  const elemBottom = elemTop + rect.height
+
+  return (elemBottom <= docViewBottom) //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
+}
+
+/** 滚动到元素中心 */
+export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
+  const top =
+    Utils.getOffset(elem).top +
+    Utils.getHeight(elem) / 2 -
+    document.documentElement.clientHeight / 2
+
+  if (enableAnim) {
+    window.scroll({
+      top: top > 0 ? top : 0,
+      left: 0,
+      // behavior: 'smooth',
+    })
+  } else {
+    // 无动画
+    window.scroll(0, top > 0 ? top : 0)
+  }
+}
+
+/** 显示消息 */
+export function showNotify(
+  wrapElem: HTMLElement,
+  msg: string,
+  type: 's' | 'e' | 'w' | 'i',
+) {
+  const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
+  const timeout = 3000 // 持续显示时间 ms
+
+  const notifyElem = Utils.createElement(
+    `<div class="atk-notify atk-fade-in" style="background-color: ${colors[type]}"><span class="atk-notify-content"></span></div>`
+  )
+  const notifyContentEl = notifyElem.querySelector<HTMLElement>('.atk-notify-content')!
+  notifyContentEl.innerHTML = Utils.htmlEncode(msg).replace('\n', '<br/>')
+
+  wrapElem.appendChild(notifyElem)
+
+  const notifyRemove = () => {
+    notifyElem.classList.add('atk-fade-out')
+    setTimeout(() => {
+      notifyElem.remove()
+    }, 200)
+  }
+
+  let timeoutFn: number
+  if (timeout > 0) {
+    timeoutFn = window.setTimeout(() => {
+      notifyRemove()
+    }, timeout)
+  }
+
+  notifyElem.addEventListener('click', () => {
+    notifyRemove()
+    window.clearTimeout(timeoutFn)
+  })
+}
+
+/** fade 动画 */
+export function playFadeAnim(
+  elem: HTMLElement,
+  after?: () => void,
+  type: 'in' | 'out' = 'in'
+) {
+  elem.classList.add(`atk-fade-${type}`)
+  // 动画结束清除 class
+  const onAnimEnded = () => {
+    elem.classList.remove(`atk-fade-${type}`)
+    elem.removeEventListener('animationend', onAnimEnded)
+    if (after) after()
+  }
+  elem.addEventListener('animationend', onAnimEnded)
+}
+
+/** 渐入动画 */
+export function playFadeInAnim(elem: HTMLElement, after?: () => void) {
+  playFadeAnim(elem, after, 'in')
+}
+
+/** 渐出动画 */
+export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
+  playFadeAnim(elem, after, 'out')
+}
+
+/** 设置全局错误 */
+export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
+  let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
+  if (html === null) {
+    if (elem !== null) elem.remove()
+    return
+  }
+  if (!elem) {
+    elem = Utils.createElement(
+      `<div class="atk-error-layer">${title}<span class="atk-error-text"></span></div>`
+    )
+    parentElem.appendChild(elem)
+  }
+
+  const errorTextEl = elem.querySelector<HTMLElement>('.atk-error-text')!
+  errorTextEl.innerHTML = ''
+  if (html === null) return
+
+  if (html instanceof HTMLElement) {
+    errorTextEl.appendChild(html)
+  } else {
+    errorTextEl.innerText = html
+  }
+}
+
+export function getScrollBarWidth() {
+  const inner = document.createElement('p')
+  inner.style.width = '100%'
+  inner.style.height = '200px'
+
+  const outer = document.createElement('div')
+  outer.style.position = 'absolute'
+  outer.style.top = '0px'
+  outer.style.left = '0px'
+  outer.style.visibility = 'hidden'
+  outer.style.width = '200px'
+  outer.style.height = '150px'
+  outer.style.overflow = 'hidden'
+  outer.appendChild(inner)
+
+  document.body.appendChild(outer)
+  const w1 = inner.offsetWidth
+  outer.style.overflow = 'scroll'
+  let w2 = inner.offsetWidth
+  if (w1 === w2) w2 = outer.clientWidth
+
+  document.body.removeChild(outer)
+
+  return (w1 - w2)
+}

packages/artalk/src/lib/user.ts

@@ -0,0 +1,44 @@
+import ArtalkConfig, { LocalUser } from "~/types/artalk-config"
+import Context from '~/types/context'
+
+export default class User {
+  public ctx: Context
+  public data: LocalUser
+
+  public constructor(ctx: Context) {
+    this.ctx = ctx
+
+    // 从 localStorage 导入
+    const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
+    this.data = {
+      nick: localUser.nick || '',
+      email: localUser.email || '',
+      link: localUser.link || '',
+      token: localUser.token || '',
+      isAdmin: localUser.isAdmin || false
+    }
+  }
+
+  /** 保存用户到 localStorage 中 */
+  public update(obj: Partial<LocalUser> = {}) {
+    Object.entries(obj).forEach(([key, value]) => {
+      this.data[key] = value
+    })
+
+    window.localStorage.setItem('ArtalkUser', JSON.stringify(this.data))
+    this.ctx.trigger('user-changed', this.ctx.user.data)
+  }
+
+  /** 注销，清除用户登录状态 */
+  public logout() {
+    this.update({
+      token: '',
+      isAdmin: false
+    })
+  }
+
+  /** 是否已填写基本用户信息 */
+  public checkHasBasicUserInfo() {
+    return !!this.data.nick && !!this.data.email
+  }
+}

packages/artalk/src/lib/utils.ts

@@ -0,0 +1,339 @@
+import { marked as libMarked } from 'marked'
+import insane from 'insane'
+import hanabi from 'hanabi'
+import Context from '~/types/context'
+
+export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
+  const div = document.createElement('div')
+  div.innerHTML = htmlStr.trim()
+  return (div.firstElementChild || div) as E
+}
+
+export function getHeight(el: HTMLElement) {
+  return parseFloat(getComputedStyle(el, null).height.replace('px', ''))
+}
+
+export function htmlEncode(str: string) {
+  const temp = document.createElement('div')
+  temp.innerText = str
+  const output = temp.innerHTML
+  return output
+}
+
+export function htmlDecode(str: string) {
+  const temp = document.createElement('div')
+  temp.innerHTML = str
+  const output = temp.innerText
+  return output
+}
+
+export function getQueryParam(name: string) {
+  const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
+  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+}
+
+export function getOffset(el: HTMLElement) {
+  const rect = el.getBoundingClientRect()
+  return {
+    top: rect.top + window.scrollY,
+    left: rect.left + window.scrollX
+  }
+}
+
+export function padWithZeros(vNumber: number, width: number) {
+  let numAsString = vNumber.toString()
+  while (numAsString.length < width) {
+    numAsString = `0${numAsString}`
+  }
+  return numAsString
+}
+
+export function dateFormat(date: Date) {
+  const vDay = padWithZeros(date.getDate(), 2)
+  const vMonth = padWithZeros(date.getMonth() + 1, 2)
+  const vYear = padWithZeros(date.getFullYear(), 2)
+  // var vHour = padWithZeros(date.getHours(), 2);
+  // var vMinute = padWithZeros(date.getMinutes(), 2);
+  // var vSecond = padWithZeros(date.getSeconds(), 2);
+  return `${vYear}-${vMonth}-${vDay}`
+}
+
+export function timeAgo(date: Date, ctx: Context) {
+  try {
+    const oldTime = date.getTime()
+    const currTime = new Date().getTime()
+    const diffValue = currTime - oldTime
+
+    const days = Math.floor(diffValue / (24 * 3600 * 1000))
+    if (days === 0) {
+      // 计算相差小时数
+      const leave1 = diffValue % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
+      const hours = Math.floor(leave1 / (3600 * 1000))
+      if (hours === 0) {
+        // 计算相差分钟数
+        const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
+        const minutes = Math.floor(leave2 / (60 * 1000))
+        if (minutes === 0) {
+          // 计算相差秒数
+          const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
+          const seconds = Math.round(leave3 / 1000)
+          return `${seconds} ${ctx.$t('seconds')}`
+        }
+        return `${minutes} ${ctx.$t('minutes')}`
+      }
+      return `${hours} ${ctx.$t('hours')}`
+    }
+    if (days < 0) return ctx.$t('now')
+
+    if (days < 8) {
+      return `${days} ${ctx.$t('days')}`
+    }
+
+    return dateFormat(date)
+  } catch (error) {
+    console.error(error)
+    return ' - '
+  }
+}
+
+/** 所有图片加载完毕后执行 */
+export function onImagesLoaded($container: HTMLElement, event: Function) {
+  if (!$container) return
+  const images = $container.getElementsByTagName('img')
+  if (!images.length) return
+  let loaded = images.length
+  for (let i = 0; i < images.length; i++) {
+    if (images[i].complete) {
+      loaded--
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
+      images[i].addEventListener('load', () => {
+        loaded--
+        if (loaded === 0) event()
+      })
+    }
+
+    if (loaded === 0) event()
+  }
+}
+
+export function getGravatarURL(ctx: Context, emailMD5: string) {
+  return `${(ctx.conf.gravatar.mirror).replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar.default)}&s=80`
+}
+
+export function sleep(ms: number) {
+  return new Promise(resolve => { setTimeout(resolve, ms) });
+}
+
+/** 版本号比较（a < b :-1 | 0 | b < a :1） */
+export function versionCompare(a: string, b: string) {
+  const pa = a.split('.')
+  const pb = b.split('.')
+  for (let i = 0; i < 3; i++) {
+      const na = Number(pa[i])
+      const nb = Number(pb[i])
+      if (na > nb) return 1
+      if (nb > na) return -1
+      if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
+      if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
+  }
+  return 0
+}
+
+/** 初始化 marked */
+export function initMarked(ctx: Context) {
+  try { if (!libMarked.name) return } catch { return }
+
+  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"` : ''} `);
+  }
+
+  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 {
+  let markedContent = ctx.markedInstance?.parse(src)
+  if (!markedContent) {
+    // 无 Markdown 模式简单处理
+    markedContent = src
+      // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${hanabi(code)}</code></pre>`)
+      // .replace(/`([^`]+?)`/g, '<code>$1</code>')
+      .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
+      .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
+      .replace(/\n/g, '<br>')
+  }
+
+  // @link https://github.com/markedjs/marked/discussions/1232
+  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
+  let dest = insane(markedContent, {
+    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
+  if (!(navigator as any).userAgentData || !(navigator as any).userAgentData.getHighEntropyValues) {
+    return uaRaw
+  }
+
+  // @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 }
+  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[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/list/index.ts

@@ -0,0 +1,3 @@
+import List from './list'
+
+export default List

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

@@ -0,0 +1,477 @@
+import { ListData, CommentData, NotifyData } from '~/types/artalk-data'
+import Context from '~/types/context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Comment from '../comment'
+import Pagination from '../components/pagination'
+import ReadMoreBtn from '../components/read-more-btn'
+import * as ListNest from './list-nest'
+import { backendMinVersion } from '../../package.json'
+
+export default class ListLite extends Component {
+  protected $commentsWrap: HTMLElement
+
+  protected data?: ListData
+  protected isLoading: boolean = false
+
+  public noCommentText: string // 无评论时显示
+
+  /** 平铺模式 */
+  public flatMode = false
+
+  /** 嵌套模式 */
+  public nestSortBy!: ListNest.SortByType
+
+  /** 分页 */
+  public pageMode: 'pagination'|'read-more' = 'pagination'
+  public pageSize: number = 20 // 每次请求获取量
+  public scrollListenerAt?: HTMLElement // 监听指定元素上的滚动
+  public repositionAt?: HTMLElement // 翻页归位到指定元素
+
+  protected pagination?: Pagination   // 分页条
+  protected readMoreBtn?: ReadMoreBtn // 阅读更多
+  protected autoLoadScrollEvent?: any // 自动加载滚动事件
+
+  public renderComment?: (comment: Comment) => void
+  public paramsEditor?: (params: any) => void
+  public onAfterLoad?: (data: ListData) => void
+
+  // 未读标记
+  protected unread: NotifyData[] = []
+  public unreadHighlight?: boolean // 高亮未读
+
+  constructor (ctx: Context) {
+    super(ctx)
+
+    // 初始化元素
+    this.$el = Utils.createElement(
+    `<div class="atk-list-lite">
+      <div class="atk-list-comments-wrap"></div>
+    </div>`)
+    this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
+
+    // 评论为空时显示字符
+    this.noCommentText = ctx.conf.noComment || ctx.$t('noComment')
+
+    // 嵌套排序方式
+    this.nestSortBy = this.ctx.conf.nestSort || 'DATE_ASC'
+
+    // 评论时间自动更新
+    window.setInterval(() => {
+      this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
+        const date = el.getAttribute('data-atk-comment-date')
+        el.innerText = Utils.timeAgo(new Date(Number(date)), this.ctx)
+      })
+    }, 30 * 1000) // 30s 更新一次
+  }
+
+  public getData() {
+    return this.data
+  }
+
+  public clearData() {
+    this.data = undefined
+  }
+
+  public getCommentsWrapEl() {
+    return this.$commentsWrap
+  }
+
+  /** 评论获取 */
+  public async fetchComments(offset: number) {
+    if (this.isLoading) return
+
+    // 加载动画
+    const showLoading = () => {
+      this.isLoading = true
+      if (offset === 0) Ui.showLoading(this.$el)
+      else if (this.pageMode === 'read-more') this.readMoreBtn!.setLoading(true)
+      else if (this.pageMode === 'pagination') this.pagination!.setLoading(true)
+    }
+    const hideLoading = () => {
+      this.isLoading = false
+      if (offset === 0) Ui.hideLoading(this.$el)
+      else if (this.pageMode === 'read-more') this.readMoreBtn!.setLoading(false)
+      else if (this.pageMode === 'pagination') this.pagination!.setLoading(false)
+    }
+    showLoading()
+
+    // 事件通知（开始加载评论）
+    this.ctx.trigger('list-load')
+
+    // 清空评论（加载按钮）
+    if (this.pageMode === 'read-more' && offset === 0) { this.ctx.clearAllComments() }
+
+    // 请求评论数据
+    let listData: ListData
+    try {
+      listData = await this.ctx.getApi().get(offset, this.pageSize, this.flatMode, this.paramsEditor)
+    } catch (e: any) {
+      this.onError(e.msg || String(e), offset, e.data)
+      throw e
+    } finally {
+      hideLoading()
+    }
+
+    // 清除原有错误
+    Ui.setError(this.$el, null)
+
+    // 装载数据
+    try {
+      this.onLoad(listData, offset)
+    } catch (e: any) {
+      this.onError(String(e), offset)
+      throw e
+    } finally {
+      hideLoading()
+    }
+  }
+
+  protected onLoad(data: ListData, offset: number) {
+    // 清空评论（分页条）
+    if (this.pageMode === 'pagination') { this.ctx.clearAllComments() }
+
+    this.data = data
+
+    // 版本检测
+    const feMinVersion = data.api_version?.fe_min_version || '0.0.0'
+    if (this.ctx.conf.versionCheck && this.versionCheck('frontend', feMinVersion, ARTALK_VERSION)) return
+    if (this.ctx.conf.versionCheck && this.versionCheck('backend', 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)
+
+    // 分页方式
+    this.refreshPagination(offset, (this.flatMode ? data.total : data.total_roots)) // 初始化
+
+    // 加载后事件
+    this.refreshUI()
+
+    this.ctx.updateNotifies(data.unread || [])
+    this.ctx.trigger('list-loaded')
+    this.ctx.trigger('conf-updated')
+
+    if (this.onAfterLoad) this.onAfterLoad(data)
+  }
+
+  /** 分页模式 */
+  private refreshPagination(offset: number, total: number) {
+    const modePagination = (this.pageMode === 'pagination')
+    const modeReadMoreBtn = (this.pageMode === 'read-more')
+    const initialized = (modePagination) ? !!this.pagination : !!this.readMoreBtn
+
+    // 初始化
+    if (!initialized) {
+      this.initPagination()
+    }
+
+    // 更新
+    if (modePagination) this.pagination!.update(offset, total)
+    if (modeReadMoreBtn) this.readMoreBtn!.update(offset, total)
+  }
+
+  private initPagination() {
+    // 加载更多按钮
+    if (this.pageMode === 'read-more') {
+      this.readMoreBtn = new ReadMoreBtn({
+        pageSize: this.pageSize,
+        onClick: async (o) => {
+          await this.fetchComments(o)
+        },
+        text: this.ctx.$t('loadMore'),
+      })
+      this.$el.append(this.readMoreBtn.$el)
+
+      // 滚动到底部自动加载
+      if (this.conf.pagination.autoLoad) {
+        // 添加滚动事件监听
+        const at = this.scrollListenerAt || document
+        if (this.autoLoadScrollEvent) at.removeEventListener('scroll', this.autoLoadScrollEvent) // 解除原有
+        this.autoLoadScrollEvent = () => {
+          if (this.pageMode !== 'read-more') return
+          if (!this.readMoreBtn) return
+
+          if (!this.readMoreBtn.hasMore) return
+          if (this.isLoading) return
+
+          const $target = this.$el.querySelector<HTMLElement>('.atk-list-comments-wrap > .atk-comment-wrap:nth-last-child(3)') // 获取倒数第3个评论元素
+          if (!$target) return
+          if (Ui.isVisible($target, this.scrollListenerAt)) {
+            this.readMoreBtn.click() // 自动点击加载更多按钮
+          }
+        }
+        at.addEventListener('scroll', this.autoLoadScrollEvent)
+      }
+    }
+
+    // 分页条
+    if (this.pageMode === 'pagination') {
+      this.pagination = new Pagination((!this.flatMode ? this.data!.total_roots : this.data!.total), {
+        pageSize: this.pageSize,
+        onChange: async (o) => {
+          if (this.ctx.conf.editorTravel === true) {
+            this.ctx.editorTravelBack() // 防止评论框被吞
+          }
+
+          await this.fetchComments(o)
+
+          // 滚动到第一个评论的位置
+          if (this.repositionAt) {
+            const at = this.scrollListenerAt || window
+            at.scroll({
+              top: this.repositionAt ? Utils.getOffset(this.repositionAt).top : 0,
+              left: 0,
+            })
+          }
+        }
+      })
+
+      this.$el.append(this.pagination.$el)
+    }
+  }
+
+  /** 错误处理 */
+  protected onError(msg: any, offset: number, errData?: any) {
+    msg = String(msg)
+    console.error(msg)
+
+    // 加载更多按钮显示错误
+    if (offset !== 0 && this.pageMode === 'read-more') {
+      this.readMoreBtn?.showErr(this.$t('loadFail'))
+      return
+    }
+
+    // 显示错误对话框
+    const $err = Utils.createElement(`<span>${msg}，${this.$t('listLoadFailMsg')}<br/></span>`)
+
+    const $retryBtn = Utils.createElement(`<span style="cursor:pointer;">${this.$t('listRetry')}</span>`)
+    $retryBtn.onclick = () => (this.fetchComments(0))
+    $err.appendChild($retryBtn)
+
+    const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
+    $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.showSidebar({
+      view: sidebarView as any
+    })
+
+    Ui.setError(this.$el, $err)
+  }
+
+  /** 刷新界面 */
+  public refreshUI() {
+    // 无评论
+    const isNoComment = this.ctx.getCommentList().length <= 0
+    let $noComment = this.$commentsWrap.querySelector<HTMLElement>('.atk-list-no-comment')
+
+    if (isNoComment) {
+      if (!$noComment) {
+        $noComment = Utils.createElement('<div class="atk-list-no-comment"></div>')
+        $noComment.innerHTML = this.noCommentText
+        this.$commentsWrap.appendChild($noComment)
+      }
+    } else {
+      $noComment?.remove()
+    }
+
+    // 仅管理员显示控制
+    this.ctx.checkAdminShowEl()
+  }
+
+  /** 重新加载列表 */
+  public reload() {
+    this.fetchComments(0)
+  }
+
+  /** 创建新评论 */
+  protected createComment(cData: CommentData, ctxData?: CommentData[]) {
+    if (!ctxData) ctxData = this.ctx.getCommentDataList()
+
+    const comment = new Comment(this.ctx, cData, {
+      isFlatMode: this.flatMode,
+      afterRender: () => {
+        if (this.renderComment) this.renderComment(comment)
+      },
+      onDelete: (c: Comment) => {
+        this.ctx.deleteComment(c)
+        this.refreshUI()
+      },
+      replyTo: (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+    })
+
+    // 渲染元素
+    comment.render()
+
+    // 放入 comment 总表中
+    this.ctx.getCommentList().push(comment)
+
+    return comment
+  }
+
+  /** 导入评论 · 通过请求数据 */
+  public importComments(srcData: CommentData[]) {
+    if (this.flatMode) {
+      srcData.forEach((commentData: CommentData) => {
+        this.putCommentFlatMode(commentData, srcData, 'append')
+      })
+    } else {
+      this.importCommentsNest(srcData)
+    }
+  }
+
+  // 导入评论 · 嵌套模式
+  private importCommentsNest(srcData: CommentData[]) {
+    // 遍历 root 评论
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.nestSortBy, this.conf.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.createComment(rootNode.comment, srcData)
+
+      // 显示并播放渐入动画
+      this.$commentsWrap.appendChild(rootC.getEl())
+      rootC.getRender().playFadeAnim()
+
+      // 加载子评论
+      const that = this
+      ;(function loadChildren(parentC: Comment, parentNode: ListNest.CommentNode) {
+        parentNode.children.forEach((node: ListNest.CommentNode) => {
+          const childD = node.comment
+          const childC = that.createComment(childD, srcData)
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      })(rootC, rootNode)
+
+      // 限高检测
+      rootC.getRender().checkHeightLimit()
+    })
+  }
+
+  /** 导入评论 · 平铺模式 */
+  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
+    if (cData.is_collapsed) cData.is_allow_reply = false
+    const comment = this.createComment(cData, ctxData)
+
+    // 可见评论添加到界面
+    // 注：不可见评论用于显示 “引用内容”
+    if (cData.visible) {
+      if (insertMode === 'append') this.$commentsWrap.append(comment.getEl())
+      if (insertMode === 'prepend') this.$commentsWrap.prepend(comment.getEl())
+      comment.getRender().playFadeAnim()
+    }
+
+    // 平铺评论插入后 · 内容限高检测
+    comment.getRender().checkHeightLimit()
+
+    return comment
+  }
+
+  /** 新增评论 · 首部添加 */
+  public insertComment(commentData: CommentData) {
+    if (!this.flatMode) {
+      // 嵌套模式
+      const comment = this.createComment(commentData)
+
+      if (commentData.rid === 0) {
+        // root评论 新增
+        this.$commentsWrap.prepend(comment.getEl())
+      } else {
+        // 子评论 新增
+        const parent = this.ctx.findComment(commentData.rid)
+        if (parent) {
+          parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
+
+          // 若父评论存在 “子评论部分” 限高，取消限高
+          comment.getParents().forEach((p) => {
+            p.getRender().heightLimitRemoveForChildren()
+          })
+        }
+      }
+
+      comment.getRender().checkHeightLimit()
+
+      Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
+      comment.getRender().playFadeAnim() // 播放评论渐出动画
+    } else {
+      // 平铺模式
+      const comment = this.putCommentFlatMode(commentData, this.ctx.getCommentDataList(), 'prepend')
+      Ui.scrollIntoView(comment.getEl()) // 滚动到可见
+    }
+
+    // 评论数增加 1
+    if (this.data) this.data.total += 1
+
+    // 评论新增后
+    this.refreshUI()
+    this.ctx.trigger('list-loaded')
+    this.ctx.trigger('list-inserted', commentData)
+  }
+
+  /** 更新未读数据 */
+  public updateUnread(notifies: NotifyData[]) {
+    this.unread = notifies
+
+    // 高亮评论
+    if (this.unreadHighlight === true) {
+      this.ctx.getCommentList().forEach((comment) => {
+        const notify = this.unread.find(o => o.comment_id === comment.getID())
+        if (notify) {
+          comment.getRender().setUnread(true)
+          comment.getRender().setOpenAction(() => {
+            window.open(notify.read_link)
+            this.unread = this.unread.filter(o => o.comment_id !== comment.getID()) // remove
+            this.ctx.updateNotifies(this.unread)
+          })
+        } else {
+          comment.getRender().setUnread(false)
+        }
+      })
+    }
+  }
+
+  /** 版本检测 */
+  public versionCheck(name: 'frontend'|'backend', needVersion: string, curtVersion: string): boolean {
+    const needUpdate = Utils.versionCompare(needVersion, curtVersion) === 1
+    if (needUpdate) {
+      // 需要更新
+      const errEl = Utils.createElement(`<div>Artalk ${this.$t(name)}版本已过时，请更新以获得完整体验<br/>`
+      + `如果你是管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获得帮助`
+      + `<br/><br/>`
+      + `<span style="color: var(--at-color-meta);">当前${this.$t(name)}版本 ${curtVersion}，需求版本 >= ${needVersion}</span><br/><br/>`
+      + `</div>`)
+      const ignoreBtn = Utils.createElement('<span style="cursor:pointer;">忽略</span>')
+      ignoreBtn.onclick = () => {
+        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.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+    }
+
+    return needUpdate
+  }
+}

packages/artalk/src/list/list-nest.ts

@@ -0,0 +1,66 @@
+import { CommentData } from '~/types/artalk-data'
+
+export type CommentNode = {
+  id: number
+  comment: CommentData
+  children: CommentNode[]
+  parent?: CommentNode
+  level: number
+}
+
+export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
+
+// 构建树状结构列表
+export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
+  const nodeList: CommentNode[] = []
+
+  const roots = srcData.filter((o) => o.rid === 0)
+  roots.forEach((root: CommentData) => {
+    const rootNode: CommentNode = {
+      id: root.id,
+      comment: root,
+      children: [],
+      level: 1,
+    }
+
+    rootNode.parent = rootNode
+    nodeList.push(rootNode)
+
+    ;(function loadChildren(parentNode: CommentNode) {
+      const children = srcData.filter((o) => o.rid === parentNode.id)
+      if (children.length === 0) return
+      if (parentNode.level >= nestMax) parentNode = parentNode.parent!
+      children.forEach((child: CommentData) => {
+        const childNode: CommentNode = {
+          id: child.id,
+          comment: child,
+          children: [],
+          parent: parentNode,
+          level: parentNode.level + 1,
+        }
+
+        parentNode.children.push(childNode)
+        loadChildren(childNode)
+      })
+    })(rootNode)
+  })
+
+  // 排序
+  const sortFunc = (a: CommentNode, b: CommentNode): number => {
+    let v = a.id - b.id
+    if (sortBy === 'DATE_ASC') v = +new Date(a.comment.date) - +new Date(b.comment.date)
+    else if (sortBy === 'DATE_DESC') v = +new Date(b.comment.date) - +new Date(a.comment.date)
+    else if (sortBy === 'SRC_INDEX') v = srcData.indexOf(a.comment) - srcData.indexOf(b.comment)
+    else if (sortBy === 'VOTE_UP_DESC') v = b.comment.vote_up - a.comment.vote_up
+    return v
+  }
+
+  (function sortLevels(nodes: CommentNode[]) {
+    nodes.forEach((node) => {
+      node.children = node.children.sort(sortFunc)
+      sortLevels(node.children)
+    })
+  })(nodeList)
+
+  return nodeList
+}

packages/artalk/src/list/list.html

@@ -0,0 +1,18 @@
+<div class="atk-list">
+  <div class="atk-list-header">
+    <div class="atk-comment-count">
+      <div class="atk-text"></div>
+    </div>
+    <div class="atk-right-action">
+      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>
+      <span data-action="open-sidebar" class="atk-hide atk-on">
+        <span class="atk-unread-badge" style="display: none;"></span>
+        <div class="atk-text"></div>
+      </span>
+    </div>
+  </div>
+  <div class="atk-list-body"></div>
+  <div class="atk-list-footer">
+    <div class="atk-copyright"></div>
+  </div>
+</div>

packages/artalk/src/list/list.ts

@@ -0,0 +1,259 @@
+import '../style/list.less'
+
+import { ListData, NotifyData } from '~/types/artalk-data'
+import Context from '~/types/context'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import ListHTML from './list.html?raw'
+import ListLite from './list-lite'
+
+export default class List extends ListLite {
+  private $closeCommentBtn!: HTMLElement
+  private $openSidebarBtn!: HTMLElement
+  private $unreadBadge!: HTMLElement
+  private $commentCount!: HTMLElement
+  private $commentCountNum!: HTMLElement
+  private $dropdownWrap?: HTMLElement
+
+  constructor (ctx: Context) {
+    const el = Utils.createElement(ListHTML)
+
+    super(ctx)
+
+    // 把 listLite $el 变为子元素
+    el.querySelector('.atk-list-body')!.append(this.$el)
+    this.$el = el
+
+    // 平铺模式
+    if (this.ctx.conf.flatMode === true) {
+      this.flatMode = true // 遵循配置总是开启平铺模式
+    } else if (this.conf.nestMax && this.conf.nestMax <= 1) {
+      this.flatMode = true // 嵌套层数值无效时，强制开启平铺模式
+    } else if (this.ctx.conf.flatMode === 'auto') {
+      // 自动判断启用平铺模式
+      if (window.matchMedia("(max-width: 768px)").matches)
+        this.flatMode = true
+    }
+
+    // 分页模式
+    this.pageMode = this.conf.pagination.readMore ? 'read-more' : 'pagination'
+    this.pageSize = this.conf.pagination.pageSize || 20
+    this.repositionAt = this.$el
+
+    // 操作按钮
+    this.initListActionBtn()
+
+    this.$commentCount = this.$el.querySelector('.atk-comment-count')!
+    this.$commentCount.innerHTML = this.$t('counter', {
+      count: '<span class="atk-comment-count-num">0</span>',
+    })
+    this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
+
+    // 评论列表排序 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>`
+
+    // event listen
+  }
+
+  private initListActionBtn() {
+    // 侧边栏呼出按钮
+    this.$openSidebarBtn = this.$el.querySelector('[data-action="open-sidebar"]')!
+    this.$closeCommentBtn = this.$el.querySelector('[data-action="admin-close-comment"]')!
+    this.$unreadBadge = this.$el.querySelector('.atk-unread-badge')!
+
+    this.$openSidebarBtn.addEventListener('click', () => {
+      this.ctx.showSidebar()
+    })
+
+    // 关闭评论按钮
+    this.$closeCommentBtn.addEventListener('click', () => {
+      if (!this.data) return
+
+      this.data.page.admin_only = !this.data.page.admin_only
+      this.adminPageEditSave()
+    })
+  }
+
+  /** 刷新界面 */
+  public refreshUI() {
+    super.refreshUI()
+
+    this.$commentCountNum.innerText = String(Number(this.data?.total) || 0)
+
+    // 已输入个人信息
+    if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
+      this.$openSidebarBtn.classList.remove('atk-hide')
+    } else {
+      this.$openSidebarBtn.classList.add('atk-hide')
+    }
+
+    // 仅管理员显示控制
+    this.ctx.checkAdminShowEl()
+    this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!
+      .innerText = (!this.ctx.user.data.isAdmin) ? this.$t('msgCenter') : this.$t('ctrlCenter')
+
+    // 关闭评论
+    if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
+      this.ctx.editorClose()
+      this.$closeCommentBtn.innerHTML = this.$t('openComment')
+    } else {
+      this.ctx.editorOpen()
+      this.$closeCommentBtn.innerHTML = this.$t('closeComment')
+    }
+  }
+
+  protected onLoad(data: ListData, offset: number) {
+    super.onLoad(data, offset)
+
+    // 检测锚点跳转
+    if (!this.goToCommentFounded) this.checkGoToCommentByUrlHash()
+
+    // 防止评论框被吞
+    if (this.ctx.conf.editorTravel === true) {
+      this.ctx.editorTravelBack()
+    }
+  }
+
+  private goToCommentFounded = false
+  public goToCommentDelay = true
+
+  /** 跳到评论项位置 - 根据 `location.hash` */
+  public checkGoToCommentByUrlHash() {
+    let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
+    if (!commentId) {
+      const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
+      if (!match || !match[1] || Number.isNaN(Number(match[1]))) return
+      commentId = Number(match[1])
+    }
+    if (!commentId) return
+
+    const comment = this.ctx.findComment(commentId)
+    if (!comment) { // 若找不到评论
+      // 自动翻页
+      if (this.readMoreBtn) this.readMoreBtn.click()
+      else if (this.pagination) this.pagination.next()
+      return
+    }
+
+    // 已阅 API
+    const notifyKey = Utils.getQueryParam('atk_notify_key')
+    if (notifyKey) {
+      this.ctx.getApi().markRead(notifyKey)
+        .then(() => {
+          this.unread = this.unread.filter(o => o.comment_id !== commentId)
+          this.updateUnread(this.unread)
+        })
+    }
+
+    // 若父评论存在 “子评论部分” 限高，取消限高
+    comment.getParents().forEach((p) => {
+      p.getRender().heightLimitRemoveForChildren()
+    })
+
+    const goTo = () => {
+      Ui.scrollIntoView(comment.getEl(), false)
+
+      comment.getEl().classList.remove('atk-flash-once')
+      window.setTimeout(() => {
+        comment.getEl().classList.add('atk-flash-once')
+      }, 150)
+    }
+
+    if (!this.goToCommentDelay) goTo()
+    else window.setTimeout(() => goTo(), 350)
+
+    this.goToCommentFounded = true
+  }
+
+  /** 管理员设置页面信息 */
+  public adminPageEditSave () {
+    if (!this.data || !this.data.page) return
+
+    this.ctx.editorShowLoading()
+    this.ctx.getApi().pageEdit(this.data.page)
+      .then((page) => {
+        if (this.data)
+          this.data.page = { ...page }
+        this.refreshUI()
+      })
+      .catch(err => {
+        this.ctx.editorShowNotify(`${this.$t('editFail')}: ${err.msg || String(err)}`, 'e')
+      })
+      .finally(() => {
+        this.ctx.editorHideLoading()
+      })
+  }
+
+  public showUnreadBadge(count: number) {
+    if (count > 0) {
+      this.$unreadBadge.innerText = `${Number(count || 0)}`
+      this.$unreadBadge.style.display = 'block'
+    } else {
+      this.$unreadBadge.style.display = 'none'
+    }
+  }
+
+  /** 初始化选择下拉层 */
+  protected initDropdown() {
+    this.$dropdownWrap = this.$commentCount
+    this.$commentCount.classList.add('atk-dropdown-wrap')
+
+    // 插入图标
+    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+    const reloadUseParamsEditor = (func: (p: any) => void) => {
+      this.paramsEditor = (p) => { func(p) }
+      this.fetchComments(0)
+    }
+
+    // 下拉列表
+    const dropdownList = [
+      [this.$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+      [this.$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+      [this.$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+      [this.$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+    ]
+
+    // 列表项点击事件
+    let curtActive = 0 // 当前选中
+    const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
+      action()
+
+      // set active
+      curtActive = i
+      $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+      $item.classList.add('active')
+
+      // 关闭层 (临时消失，取消 :hover)
+      $dropdown.style.display = 'none'
+      setTimeout(() => { $dropdown.style.display = '' }, 80)
+    }
+
+    // 生成列表元素
+    const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
+    dropdownList.forEach((item, i) => {
+      const name = item[0] as string
+      const action = item[1] as Function
+
+      const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
+      const $link = $item.querySelector<HTMLElement>('span')!
+      $link.innerText = name
+      $link.onclick = () => { onItemClick(i, $item, name, action) }
+      $dropdown.append($item)
+
+      if (i === curtActive) $item.classList.add('active') // 默认选中项
+    })
+
+    this.$dropdownWrap.append($dropdown)
+  }
+
+  public updateUnread(notifies: NotifyData[]): void {
+    super.updateUnread(notifies)
+    this.showUnreadBadge(notifies?.length || 0)
+  }
+}

packages/artalk/src/main.ts

@@ -0,0 +1,3 @@
+import Artalk from './artalk'
+
+export default Artalk