v2.1.2

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

.eslintrc.js

@@ -18,7 +18,10 @@ module.exports = {
     'react/sort-comp': 0,
     '@typescript-eslint/no-use-before-define': 0,
     'class-methods-use-this': 0,
-    'import/no-cycle': 'warn',
+    'import/no-cycle': 0,
+    'spaced-comment': 0,
+    'no-lonely-if': 0,
+    'prefer-destructuring': 0,
   },
   settings: {
     'import/resolver': {

.github/workflows/npm.yml

@@ -1,28 +1,54 @@
-name: NPM Package
+# https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+name: NPM Publish
 
 on:
-  release:
-    types: [created]
-  workflow_dispatch:
+  push:
+    tags:
+      - v*
 
 jobs:
   publish:
-    if: github.repository == "ArtalkJS/Artalk"
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    # Setup .npmrc file to publish to npm
+    - uses: actions/setup-node@v2
       with:
-        node-version: '12'
-        registry-url: 'https://npm.pkg.github.com'
-    - name: Release
-      run: |
-        git config --local user.email "github-actions[bot]@users.noreply.github.com"
-        git config --local user.name "github-actions[bot]"
-        npx version-from-git --allow-same-version --template 'master.short'
-    - name: Publish
-      run: |
-        npm ci
-        npm publish
+        node-version: '12.x'
+        registry-url: 'https://registry.npmjs.org'
+    - run: npm install
+    - run: npm run build
+    - run: npm publish
       env:
-        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    # 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@v2
+        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
+          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 }}
+

.npmignore

@@ -39,7 +39,6 @@ vite*.config*
 .eslintrc.js
 .eslintignore
 postcss.config.js
-tsconfig.json
 
 yarn.lock
 package-lock.json
@@ -50,3 +49,5 @@ local
 CNAME
 index.html
 #dist
+
+.github

README.md

@@ -4,8 +4,6 @@
 
 # Artalk
 
-> 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.
-
 [![](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/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master)
@@ -14,7 +12,11 @@
 [![](https://img.shields.io/travis/com/ArtalkJS/Artalk?style=flat-square)](https://travis-ci.com/ArtalkJS/Artalk)
 [![](https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square)](./LICENSE)
 
-## [官网前往](https://artalk.js.org) | [文档细节](https://artalk.js.org/docs)
+> 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.
+
+前往：[“**官方文档**”](https://artalk.js.org)
+
+---
 
 - 轻量 (~30kB gzipped)
 - 自托管 (隐私安全)
@@ -22,7 +24,7 @@
 - Markdown 语法 (通用性)
 - Golang 后端 (易部署 / 跨平台)
 
-## 特色功能
+## 特性
 
 - 表 情 包 ：统一管理 / 链接替换
 - 通知中心：红点标记 / 已读记录
@@ -46,62 +48,9 @@
 - TypeScript & Vanilla：纯天然无添加 / 无需依赖
 - [Vite](https://github.com/vitejs/vite)：开发者的极致体验
 
-## 基本食用方针
+## 食用方针
 
-### 两步抵达
-
-1. 后端程序部署：[ArtalkGo](https://github.com/ArtalkJS/ArtalkGo)
-2. 前端页面引入：
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-
-  <!-- 引入 CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/artalk@2/dist/Artalk.css" rel="stylesheet">
-
-</head>
-<body>
-
-  <!-- 给定元素 -->
-  <div id="ArtalkComments"></div>
-
-  <!-- 引入 JS -->
-  <script src="https://cdn.jsdelivr.net/npm/artalk@2/dist/Artalk.umd.js"></script>
-
-  <!-- 配置 Artalk -->
-  <script>
-  new Artalk({
-    el:          '#ArtalkComments',
-    placeholder: '说点什么 (づ￣ 3￣)づ',
-    noComment:   '此时无声胜有声',
-    pageKey:     '',   // 页面链接 (填写一个页面的完整 URL)
-    pageTitle:   '',   // 页面标题 (用于后台列表显示)
-    server:      '',   // 后端程序 (填写后端程序完整 URL；例如：https://domain/api)
-    site:        '',   // 站点名称（用于站点隔离，留空使用默认站点）
-  })
-  </script>
-
-</body>
-</html>
-```
-
-更多细节请 [查阅文档](https://artalk.js.org/docs)
-
-### CDN 资源
-
-在页面合适的位置通过 CDN 资源引入 Artalk：
-
-```html
-<!-- CSS -->
-<link href="https://cdn.jsdelivr.net/npm/artalk@2/dist/Artalk.css" rel="stylesheet">
-
-<!-- JS -->
-<script src="https://cdn.jsdelivr.net/npm/artalk@2/dist/Artalk.umd.js"></script>
-```
-
-### NPM 引用
+前往：[“**文档 · 部署**”](https://artalk.js.org/guide/deploy.html)
 
 ```sh
 $ yarn add artalk
@@ -111,23 +60,25 @@ $ yarn add artalk
 import Artalk from 'artalk'
 
 new Artalk({
-  // ...your configs
+  el:        '#Comments',
+  pageKey:   '<页面链接>',
+  pageTitle: '<页面标题>',
+  server:    '<后端地址>',
+  site:      '<站点名称>',
 })
 ```
 
-Artalk 拥有 TypeScript 声明文件，能够在引用时帮助您进行代码提示。
-
 ## 特别致谢
 
-感谢社区提供的帮助与反馈，若有好的建议与意见欢迎前往 [issues](https://github.com/ArtalkJS/Artalk/issues) 随时告知。
+感谢社区提供的帮助与反馈，若有好的建议与意见欢迎前往 [ISSUES](https://github.com/ArtalkJS/Artalk/issues) 随时告知。
 
 ## Stargazers over time
 
 [![Stargazers over time](https://starchart.cc/ArtalkJS/Artalk.svg)](https://starchart.cc/ArtalkJS/Artalk)
-[![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)
 
 ## License
 [GPL-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)
+[![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)

example/multiple-on-one-page/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Multiple Artalk On One Page Example</title>
-  <!-- 1. 引入 Artalk.css -->
-  <link rel="stylesheet" href="/dist/Artalk.css">
-</head>
-<body>
-
-  <h1>Multiple Artalk On One Page Example</h1>
-
-  <div class="main">
-    <h2>Artalk One</h2>
-    <div id="ArtalkComments-1"></div>
-
-    <h2>Artalk Two</h2>
-    <div id="ArtalkComments-2"></div>
-  </div>
-
-  <!-- 2. 引入 Artalk.js -->
-  <script src="/dist/Artalk.js"></script>
-  <!-- 3. 配置 Artalk -->
-  <script>
-  (function () {
-    // 公用配置
-    const commonConf = {
-      placeholder: '来啊，快活啊 ( ゜- ゜)',
-      noComment: '快来成为第一个评论的人吧~',
-      defaultAvatar: 'mp',
-      serverUrl: 'http://localhost:23366/',
-      readMore: {
-        pageSize: 15,
-        autoLoad: true
-      }
-    }
-
-    // 第一个评论
-    new Artalk({
-      el: '#ArtalkComments-1',
-      pageKey: 'multiple-on-one-page-1',
-      ...commonConf
-    })
-
-    // 第二个评论
-    new Artalk({
-      el: '#ArtalkComments-2',
-      pageKey: 'multiple-on-one-page-2',
-      ...commonConf
-    })
-  })();
-  </script>
-</body>
-</html>

example/normal/index.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Artalk Normal Example</title>
-  <!-- 1. 引入 Artalk.css -->
-  <link rel="stylesheet" href="/dist/Artalk.css">
-</head>
-<body>
-
-  <h1>Artalk Normal Example</h1>
-
-  <div class="main">
-    <div id="ArtalkComments"></div>
-  </div>
-
-  <!-- 2. 引入 Artalk.js -->
-  <script src="/dist/Artalk.js"></script>
-  <!-- 3. 配置 Artalk -->
-  <script>
-  var artalk = new Artalk({
-    el: '#ArtalkComments', // 元素选择
-    placeholder: '来啊，快活啊 ( ゜- ゜)', // 占位符
-    noComment: '快来成为第一个评论的人吧~', // 无评论时显示
-    defaultAvatar: 'mp', // 参考 https://cn.gravatar.com/site/implement/images/#default-image
-    pageKey: 'Artalk Normal Example',
-    serverUrl: 'http://localhost:23366/',
-    readMore: { // 阅读更多配置
-      pageSize: 15, // 每次请求获取评论数
-      autoLoad: true // 滚动到底部自动加载
-    }
-  })
-  </script>
-</body>
-</html>

example/pjax/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Artalk Pjax Example</title>
-  <!-- 1. 引入 Artalk.css -->
-  <link rel="stylesheet" href="/dist/Artalk.css">
-</head>
-<body>
-  <h1>Artalk Pjax Example</h1>
-  <div>
-    Go to <a href="./res1.html">第一页</a> | <a href="./res2.html">第二页</a>
-  </div>
-  <div id="container"></div>
-</body>
-
-<!-- 2. 引入 Artalk.js -->
-<script src="/dist/Artalk.js"></script>
-
-<!-- Pjax 配置 -->
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery-pjax@2.0.1/jquery.pjax.min.js"></script>
-<script type="text/javascript">
-$(document).pjax('a', '#container', {
-  fragment: '.main' // △ 提取 AJAX 响应内容中指定的元素内容片段；参考：http://bsify.admui.com/jquery-pjax/
-})
-</script>
-
-</html>

example/pjax/res1.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Res</title>
-  <!-- 1. 引入 Artalk.css -->
-  <link rel="stylesheet" href="/dist/Artalk.css">
-</head>
-<body>
-
-<div class="main"> <!-- △ fragment: .main -->
-  <section id="comments">
-    <div id="ArtalkComments"></div>
-  </section>
-
-  <!-- 2. 引入 Artalk.js -->
-  <script src="/dist/Artalk.js"></script>
-  <!-- 3. 配置 Artalk -->
-  <script>
-  window.artalk = new Artalk({
-    el: '#ArtalkComments',
-    placeholder: '来啊，快活啊 ( ゜- ゜)',
-    noComment: '快来成为第一个评论的人吧~',
-    defaultAvatar: 'mp',
-    pageKey: 'pjax-example-page1',
-    serverUrl: 'http://localhost:23366/index.php',
-    readMore: {
-      pageSize: 15,
-      autoLoad: true
-    }
-  });
-  </script>
-
-</div>
-
-<!-- Pjax 配置 -->
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery-pjax@2.0.1/jquery.pjax.min.js"></script>
-
-</body>
-</html>

example/pjax/res2.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Res</title>
-  <!-- 1. 引入 Artalk.css -->
-  <link rel="stylesheet" href="/dist/Artalk.css">
-</head>
-<body>
-
-<div class="main"> <!-- △ fragment: .main -->
-  <section id="comments">
-    <div id="ArtalkComments"></div>
-  </section>
-
-  <!-- 2. 引入 Artalk.js -->
-  <script src="/dist/Artalk.js"></script>
-  <!-- 3. 配置 Artalk -->
-  <script>
-  window.artalk = new Artalk({
-    el: '#ArtalkComments',
-    placeholder: '来啊，快活啊 ( ゜- ゜)',
-    noComment: '快来成为第一个评论的人吧~',
-    defaultAvatar: 'mp',
-    pageKey: 'pjax-example-page2',
-    serverUrl: 'http://localhost:23366/index.php',
-    readMore: {
-      pageSize: 15,
-      autoLoad: true
-    }
-  });
-  </script>
-
-</div>
-
-<!-- Pjax 配置 -->
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jquery-pjax@2.0.1/jquery.pjax.min.js"></script>
-
-</body>
-</html>

index.html

@@ -33,7 +33,7 @@
 <body>
   <div class="card billboard artalk-fade-in">
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
-    <div class="desc">一款简洁有趣的可拓展评论系统</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>
@@ -52,16 +52,10 @@
     import Artalk from './src/main'
     var artalk = new Artalk({
       el: '#comments',
-      placeholder: '来啊，快活啊 ( ゜- ゜)',
-      defaultAvatar: 'mp',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
       server: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
       site: 'ArtalkDemo',
-      readMore: {
-        pageSize: 15,
-        autoLoad: true
-      },
     });
 
     window.artalk = artalk;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.0.2",
-  "description": "A Fast, Slight & Delightful Comment",
+  "version": "2.1.2",
+  "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
     "comments-widget",
@@ -16,15 +16,15 @@
     "type": "git",
     "url": "https://github.com/ArtalkJS/Artalk.git"
   },
-  "main": "./dist/Artalk.umd.js",
+  "main": "./dist/Artalk.js",
   "unpkg": "./dist/Artalk.iife.js",
   "jsdelivr": "./dist/Artalk.iife.js",
   "module": "./dist/Artalk.es.js",
-  "types": "./dist/types/index.d.ts",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/Artalk.es.js",
-      "require": "./dist/Artalk.umd.js"
+      "require": "./dist/Artalk.js"
     }
   },
   "scripts": {
@@ -38,12 +38,12 @@
     "lint": "eslint --ext .js,.ts src"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^1.4.0",
-    "@types/marked": "0.6.5",
-    "@types/node": "^16.7.5",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.31.1",
-    "autoprefixer": "^10.3.3",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
+    "@types/marked": "^4.0.1",
+    "@types/node": "^16.11.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "autoprefixer": "^10.4.0",
     "eslint": "7.2.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-airbnb-typescript": "^14.0.0",
@@ -53,15 +53,15 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "less": "^4.1.1",
-    "prettier": "^2.3.2",
-    "typescript": "4.3.2",
-    "vite": "^2.5.1",
-    "vite-plugin-dts": "^0.7.0",
-    "vite-tsconfig-paths": "^3.3.14"
+    "less": "^4.1.2",
+    "prettier": "^2.4.1",
+    "typescript": "^4.5.2",
+    "vite": "^2.6.14",
+    "vite-tsconfig-paths": "^3.3.17"
   },
   "dependencies": {
     "hanabi": "^0.4.0",
-    "marked": "0.7.0"
+    "insane": "^2.6.2",
+    "marked": "^4.0.3"
   }
 }

src/Artalk.ts

@@ -1,160 +0,0 @@
-import './style/main.less'
-import Checker from './lib/checker'
-import Editor from './components/Editor'
-import List from './components/List'
-import Sidebar from './components/Sidebar'
-import { GetLayerWrap } from './components/Layer'
-import * as Ui from './lib/ui'
-import * as Utils from './lib/utils'
-import { ArtalkConfig } from '~/types/artalk-config'
-import Context from './Context'
-import emoticons from './assets/emoticons.json'
-import Constant from './Constant'
-
-const defaultOpts: ArtalkConfig = {
-  el: '',
-  placeholder: '来啊，快活啊 ( ゜- ゜)',
-  noComment: '快来成为第一个评论的人吧~',
-  sendBtn: '发送评论',
-  defaultAvatar: 'mp',
-  pageKey: '',
-  server: '',
-  site: '',
-  emoticons,
-  gravatar: {
-    cdn: 'https://sdn.geekzu.org/avatar/'
-  },
-  darkMode: false,
-}
-
-export default class Artalk {
-  public conf: ArtalkConfig
-  public ctx: Context
-  public el: HTMLElement
-  public readonly contextID: number = new Date().getTime() // 实例唯一 ID
-  public checker: Checker
-  public editor: Editor
-  public list: List
-  public sidebar: Sidebar
-  public comments: Comment[] = []
-
-  constructor (conf: ArtalkConfig) {
-    // Version Information
-    console.log(`\n %c `
-      + `Artalk v${ARTALK_VERSION} %c 一款简洁有趣的可拓展评论系统 \n\n%c`
-      + `> https://artalk.js.org\n`
-      + `> https://github.com/ArtalkJS/Artalk\n`,
-      'color: #FFF; background: #1DAAFF; padding:5px 0;', 'color: #FFF; background: #656565; padding:5px 0;', '')
-
-    // Options
-    this.conf = { ...defaultOpts, ...conf }
-    this.conf.server = this.conf.server.replace(/\/$/, '')
-
-    // Default `pageKey` conf
-    if (!this.conf.pageKey) {
-      // TODO 自动获取和 atk_comment query 冲突
-      // eslint-disable-next-line prefer-destructuring
-      this.conf.pageKey = window.location.href.split('#')[0]
-    }
-
-    // Main Element
-    try {
-      const el = document.querySelector<HTMLElement>(this.conf.el)
-      if (el === null) {
-        throw Error(`Sorry, Target element "${this.conf.el}" was not found.`)
-      }
-      this.el = el
-    } catch (e) {
-      console.error(e)
-      throw new Error('Artalk config `el` error')
-    }
-
-    // Create context
-    this.ctx = new Context(this.el, this.conf)
-
-    this.el.classList.add('artalk')
-    this.el.setAttribute('atk-run-id', this.contextID.toString())
-
-    // 若该元素中 artalk 已装载
-    if (this.el.innerHTML.trim() !== '') this.el.innerHTML = ''
-
-    // Components
-    this.initDarkMode()
-
-    this.checker = new Checker(this.ctx)
-
-    this.editor = new Editor(this.ctx)
-    this.list = new List(this.ctx)
-    this.sidebar = new Sidebar(this.ctx)
-
-    this.el.appendChild(this.editor.el)
-    this.el.appendChild(this.list.el)
-    this.el.appendChild(this.sidebar.el)
-
-    // 请求获取评论
-    this.list.reqComments()
-
-    // 锚点快速跳转评论
-    window.addEventListener('hashchange', () => {
-      this.list.checkGoToCommentByUrlHash()
-    })
-
-    // 仅管理员显示控制
-    this.ctx.addEventListener('check-admin-show-el', () => {
-      const items: HTMLElement[] = []
-
-      this.el.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-      // for layer
-      const { wrapEl: layerWrapEl } = GetLayerWrap(this.ctx)
-      if (layerWrapEl)
-        layerWrapEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-      items.forEach((itemEl: HTMLElement) => {
-        if (this.ctx.user.data.isAdmin)
-          itemEl.classList.remove('atk-hide')
-        else
-          itemEl.classList.add('atk-hide')
-      })
-    })
-
-    this.ctx.addEventListener('user-changed', () => {
-      this.ctx.dispatchEvent('check-admin-show-el')
-      this.ctx.dispatchEvent('list-refresh-ui')
-    })
-  }
-
-  /** 暗黑模式 - 初始化 */
-  initDarkMode() {
-    if (this.conf.darkMode) {
-      this.el.classList.add(Constant.DARK_MODE_CLASSNAME)
-    } else {
-      this.el.classList.remove(Constant.DARK_MODE_CLASSNAME)
-    }
-
-    // for Layer
-    const { wrapEl: layerWrapEl } = GetLayerWrap(this.ctx)
-    if (layerWrapEl) {
-      if (this.conf.darkMode) {
-        layerWrapEl.classList.add(Constant.DARK_MODE_CLASSNAME)
-      } else {
-        layerWrapEl.classList.remove(Constant.DARK_MODE_CLASSNAME)
-      }
-    }
-  }
-
-  /** 暗黑模式 - 设定 */
-  setDarkMode(darkMode: boolean) {
-    this.ctx.conf.darkMode = darkMode
-    this.initDarkMode()
-  }
-
-  /** 暗黑模式 - 开启 */
-  openDarkMode() {
-    this.setDarkMode(true)
-  }
-
-  /** 暗黑模式 - 关闭 */
-  closeDarkMode() {
-    this.setDarkMode(false)
-  }
-}

src/Constant.ts

@@ -1,6 +0,0 @@
-const Constant = {
-  DARK_MODE_CLASSNAME: 'atk-dark-mode'
-}
-
-export default Constant
-

src/Context.ts

@@ -1,34 +0,0 @@
-import { ArtalkConfig } from '~/types/artalk-config'
-import User from './lib/user'
-import { EventPayloadMap, Listener, Event } from './Event'
-
-export default class Context {
-  public cid: number // Context 唯一标识
-  public rootEl: HTMLElement
-  public conf: ArtalkConfig
-  public user: User
-
-  private eventList: Event[] = []
-
-  public constructor (rootEl: HTMLElement, conf: ArtalkConfig) {
-    this.cid = +new Date()
-    this.rootEl = rootEl
-    this.conf = conf
-    this.user = new User(this.conf)
-  }
-
-  public addEventListener<K extends keyof EventPayloadMap>(name: K, listener: Listener<EventPayloadMap[K]>): void {
-    this.eventList.push({ name, listener: listener as any })
-  }
-
-  public removeEventListener<K extends keyof EventPayloadMap>(name: K): void {
-    this.eventList = this.eventList.filter((event) => event.name !== name)
-  }
-
-  public dispatchEvent<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]): void {
-    this.eventList
-      .filter((event) => event.name === name)
-      .map((event) => event.listener)
-      .forEach((listener) => listener(payload as any))
-  }
-}

src/Event.d.ts

@@ -1,59 +0,0 @@
-import { ListData, CommentData, NotifyData } from '~/types/artalk-data'
-
-/** EventName to EventPayload Type */
-export interface EventPayloadMap {
-  'list-loading': undefined
-  'list-clear': undefined
-  'list-refresh-ui': undefined
-  'list-import': CommentData[]
-  'list-insert': CommentData
-  'list-comment-del': CommentData
-  'list-reload': undefined
-  'list-update-data': (data: ListData | undefined) => void
-  'sidebar-show'?: SidebarShowPayload
-  'sidebar-hide': undefined
-  'check-admin-show-el': undefined
-  'editor-open-comment': undefined
-  'editor-close-comment': undefined
-  'editor-show-loading': undefined
-  'editor-hide-loading': undefined
-  'editor-notify': NotifyConf
-  'editor-reply': CommentData
-  'user-changed': undefined
-  'unread-update': UnreadUpdatePayload
-  'checker-admin': CheckerConf
-  'checker-captcha': CheckerCaptchaConf
-}
-
-export interface CheckerConf {
-  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
-  onMount?: (dialogEl: HTMLElement) => void
-  onCancel?: () => void
-}
-
-export interface NotifyConf {
-  msg: string
-  type: any
-}
-
-export interface CheckerCaptchaConf extends CheckerConf {
-  imgData?: string
-}
-
-export interface SidebarShowPayload {
-  viewName?: string
-}
-
-export interface UnreadUpdatePayload {
-  notifies: NotifyData[]
-}
-
-// ============================================
-export interface Listener<P> {
-  (payload: P): void
-}
-
-export interface Event<K extends keyof EventPayloadMap = keyof EventPayloadMap> {
-  name: keyof EventPayloadMap
-  listener: Listener<EventPayloadMap[K]>
-}

src/api/index.ts

@@ -0,0 +1,269 @@
+import Context from '../context'
+import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import { Fetch, ToFormData, POST, GET } from './request'
+
+export default class Api {
+  private ctx: Context
+  private baseURL: string
+
+  constructor (ctx: Context) {
+    this.ctx = ctx
+    this.baseURL = ctx.conf.server
+  }
+
+  // ============================
+  //  评论 Comment
+  // ============================
+
+  /** 评论 · 获取 */
+  public get(offset: number, type?: string, flatMode?: boolean, paramsEditor?: (params: any) => void) {
+    const params: any = {
+      page_key: this.ctx.conf.pageKey,
+      site_name: this.ctx.conf.site || '',
+      limit: this.ctx.conf.pagination?.pageSize || 15,
+      offset,
+    }
+
+    if (type) params.type = type
+    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,
+    }
+
+    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 { signal } = ctrl
+
+    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,
+    }).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() },
+    }
+  }
+
+  // ============================
+  //  页面 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) {
+    const params: any = {
+      id,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-fetch`, params)
+    return (d.page as PageData)
+  }
+
+  // ============================
+  //  站点 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)
+  }
+
+  // ============================
+  //  验证码
+  // ============================
+
+  /** 验证码 · 获取 */
+  public async captchaGet() {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
+    return (data.img_data || '') as string
+  }
+
+  /** 验证码 · 检验 */
+  public async captchaCheck(value: string) {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
+    return (data.img_data || '') as string
+  }
+}

src/api/request.ts

@@ -0,0 +1,125 @@
+import Context from '../context'
+
+/** 公共请求函数 */
+export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
+  // JWT
+  if (ctx.user.data.token) {
+    const requestHeaders: HeadersInit = new Headers()
+    requestHeaders.set('Authorization', `Bearer ${ctx.user.data.token}`)
+
+    init.headers = requestHeaders
+  }
+
+  // 请求操作
+  try {
+
+    let resp: Response
+    if ((typeof timeout !== 'number' && ctx.conf.reqTimeout === 0) || timeout === 0) {
+      resp = await fetch(input, init)
+    } else {
+      // 请求超时检测
+      resp = await timeoutPromise(timeout || ctx.conf.reqTimeout || 15000, fetch(input, init))
+    }
+
+    if (!resp.ok && resp.status !== 401) throw new Error(`请求响应 ${resp.status}`)
+
+    // 解析获取响应的 json
+    let json: any = await resp.json()
+
+    // 重新发起请求
+    const recall = (resolve, reject) => {
+      Fetch(ctx, input, init).then(d => {
+        resolve(d)
+      }).catch(err => {
+        reject(err)
+      })
+    }
+
+    // 请求弹出层验证
+    if (json.data && json.data.need_captcha) {
+      // 请求需要验证码
+      json = await (new Promise<any>((resolve, reject) => {
+        ctx.trigger('checker-captcha', {
+          imgData: json.data.img_data,
+          onSuccess: () => {
+            recall(resolve, reject)
+          },
+          onCancel: () => {
+            reject(json)
+          }
+        })
+      }))
+    } else if ((json.data && json.data.need_login) || resp.status === 401) {
+      // 请求需要管理员权限
+      json = await (new Promise<any>((resolve, reject) => {
+        ctx.trigger('checker-admin', {
+          onSuccess: () => {
+            recall(resolve, reject)
+          },
+          onCancel: () => {
+            reject(json)
+          }
+        })
+      }))
+    }
+
+    if (!json.success) throw json // throw 相当于 reject(json)
+
+    return json
+
+  } catch (err) {
+    // 错误处理
+    console.error(err)
+
+    if (err instanceof TypeError)
+      throw new Error(`网络错误`)
+
+    throw err
+  }
+}
+
+/** 公共 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 timeoutPromise<T>(ms: number, promise: Promise<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new Error("请求超时"))
+    }, ms)
+
+    promise.then(
+      (res) => {
+        clearTimeout(timeoutId)
+        resolve(res)
+      },
+      (err) => {
+        clearTimeout(timeoutId)
+        reject(err)
+      }
+    )
+  })
+}

src/artalk.ts

@@ -0,0 +1,160 @@
+import './style/main.less'
+
+import Context from './context'
+import ArtalkConfig from '~/types/artalk-config'
+import defaults from './defaults'
+
+import CheckerLauncher from './lib/checker'
+import Editor from './components/editor'
+import List from './components/list'
+import Sidebar from './components/sidebar'
+
+import { GetLayerWrap } from './components/layer'
+import { EventPayloadMap, Handler } from '~/types/event'
+
+/**
+ * Artalk
+ * @link https://artalk.js.org
+ */
+export default class Artalk {
+  public static readonly defaults: ArtalkConfig = defaults
+
+  public ctx: Context
+  public conf: ArtalkConfig
+  public $root: HTMLElement
+
+  public checkerLauncher: CheckerLauncher
+  public editor: Editor
+  public list: List
+  public sidebar: Sidebar
+
+  constructor (customConf: ArtalkConfig) {
+    // 配置
+    this.conf = { ...Artalk.defaults, ...customConf }
+    this.conf.server = this.conf.server.replace(/\/$/, '')
+
+    // 默认 pageKey
+    if (!this.conf.pageKey) {
+      this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
+    }
+
+    // 装载元素
+    try {
+      const $root = document.querySelector<HTMLElement>(this.conf.el)
+      if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+      this.$root = $root
+    } catch (e) {
+      console.error(e)
+      throw new Error('Please check your Artalk `el` config.')
+    }
+
+    // Context 初始化
+    this.ctx = new Context(this.$root, this.conf)
+
+    // 界面初始化
+    this.$root.classList.add('artalk')
+    this.$root.innerHTML = ''
+    this.initDarkMode()
+
+    // 组件初始化
+    this.checkerLauncher = new CheckerLauncher(this.ctx)
+
+    // 编辑器
+    this.editor = new Editor(this.ctx)
+    this.$root.appendChild(this.editor.$el)
+
+    // 评论列表
+    this.list = new List(this.ctx)
+    this.$root.appendChild(this.list.$el)
+
+    // 侧边栏
+    this.sidebar = new Sidebar(this.ctx)
+    this.$root.appendChild(this.sidebar.$el)
+
+    // 评论获取
+    this.list.reqComments()
+
+    // 事件绑定初始化
+    this.initEventBind()
+  }
+
+  /** 事件绑定 · 初始化 */
+  private initEventBind() {
+    // 锚点快速跳转评论
+    window.addEventListener('hashchange', () => {
+      this.list.checkGoToCommentByUrlHash()
+    })
+
+    // 仅管理员显示控制
+    this.ctx.on('check-admin-show-el', () => {
+      const items: HTMLElement[] = []
+
+      this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      // for layer
+      const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
+      if ($layerWrap)
+        $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      items.forEach(($item: HTMLElement) => {
+        if (this.ctx.user.data.isAdmin)
+          $item.classList.remove('atk-hide')
+        else
+          $item.classList.add('atk-hide')
+      })
+    })
+
+    // 本地用户数据变更
+    this.ctx.on('user-changed', () => {
+      this.ctx.trigger('check-admin-show-el')
+      this.ctx.trigger('list-refresh-ui')
+    })
+  }
+
+  /** 重新加载 */
+  public reload() {
+    this.list.reqComments()
+  }
+
+  /** 暗黑模式 · 初始化 */
+  public initDarkMode() {
+    const darkModeClassName = 'atk-dark-mode'
+
+    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 setDarkMode(darkMode: boolean) {
+    this.ctx.conf.darkMode = darkMode
+    this.initDarkMode()
+  }
+
+  /** 监听事件 */
+  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')
+  }
+}

src/assets/emoticons.json

@@ -1,100 +0,0 @@
-{
-  "颜表情": {
-    "inputType": "emoticon",
-    "container": {
-      "Hi": "|´・ω・)ノ",
-      "开心": "ヾ(≧∇≦*)ゝ",
-      "星星眼": "(☆ω☆)",
-      "掀桌": "（╯‵□′）╯︵┴─┴",
-      "流口水": "￣﹃￣",
-      "捂脸": "(/ω＼)",
-      "给跪": "∠( ᐛ 」∠)＿",
-      "哈？": "(๑•̀ㅁ•́ฅ)",
-      "斜眼": "→_→",
-      "加油": "୧(๑•̀⌄•́๑)૭",
-      "有木有WiFi": "٩(ˊᗜˋ*)و",
-      "前方高能预警": "(ノ°ο°)ノ",
-      "纳尼": "(´இ皿இ｀)",
-      "吓死惹": "⌇●﹏●⌇",
-      "已阅留爪": "(ฅ´ω`ฅ)",
-      "去吧大师球": "(╯°A°)╯︵○○○",
-      "太萌惹": "φ(￣∇￣o)",
-      "咦咦咦": "ヾ(´･ ･｀｡)ノ\"",
-      "气呼呼": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃",
-      "我受到了惊吓": "(ó﹏ò｡)",
-      "什么鬼": "Σ(っ °Д °;)っ",
-      "摸摸头": "( ,,´･ω･)ﾉ\"(´っω･｀｡)",
-      "无奈": "╮(╯▽╰)╭ ",
-      "脸红": "o(*////▽////*)q ",
-      "悲哀": "＞﹏＜",
-      "静静地看着你": "( ๑´•ω•) \"(ㆆᴗㆆ)",
-      "不要哇": "(｡•ˇ‸ˇ•｡)"
-    }
-  },
-  "Emoji": {
-    "inputType": "emoji",
-    "container": [
-      "😀","😃","😄","😁","😆","😅","😂","😊","😉","👀","😌","😍","😘","😋","😜","😝","😎","😏","😒","😟","😕","😖","😫","😩","😠","😲","😵","😳","😱","😨","😢","😭","😷","✋","✌️","👊","👋","👏","👍","👎","❤️","🎉","🚀"
-    ]
-  },
-  "滑稽": {
-    "inputType": "image",
-    "container": {
-      "原味稽": "https://i.loli.net/2019/02/01/5c53d26b7ae13.png",
-      "还是算了": "https://i.loli.net/2020/04/30/riySFlu75fJdG4p.png",
-      "蓝纹稽": "https://i.loli.net/2020/04/30/jyh5IVzpqXsHuvU.jpg",
-      "随稽应变": "https://i.loli.net/2017/02/05/5896e6ec1d528.jpg",
-      "蠕动": "https://i.loli.net/2017/02/05/5896e9712a3c1.gif",
-      "束手无稽": "https://i.loli.net/2020/04/30/dF8sTOpgomj7qf5.jpg",
-      "微笑默叹以为妙绝": "https://i.loli.net/2019/02/01/5c53daa84f24a.png",
-      "喝嘤料": "https://i.loli.net/2019/02/01/5c53d63d8c6af.jpg",
-      "暗中观察": "https://i.loli.net/2019/02/01/5c53dd21a2e7b.jpg",
-      "高兴": "https://i.loli.net/2019/02/01/5c53d1b9e5f38.jpg",
-      "惊稽": "https://i.loli.net/2019/02/01/5c53d1e2ad89f.jpg",
-      "可这和我的帅有什么关系": "https://i.loli.net/2017/02/05/5896ece29a8e0.jpg",
-      "狱稽": "https://i.loli.net/2020/04/30/cUEQrVYGFiDjqhy.jpg",
-      "梆": "https://i.loli.net/2020/04/30/TlAGjm6IvJSMVpq.jpg",
-      "吃鱼摆摆": "https://i.loli.net/2017/02/05/5896ec2cb7f39.gif",
-      "跃跃欲试 3": "https://i.loli.net/2017/02/05/5896ece2ac5a2.gif",
-      "突然滑稽": "https://i.loli.net/2019/02/01/5c53cf2a457f1.jpg",
-      "扶墙怂": "https://i.loli.net/2017/02/05/5896ece2ab57a.jpg",
-      "阔以": "https://i.loli.net/2020/04/30/7EYyq1TcBKa3eQ2.jpg",
-      "不得行": "https://i.loli.net/2020/04/30/KoqBGauX7TEfeyn.jpg",
-      "少儿不宜": "https://i.loli.net/2020/04/30/nt2ZWRozUNjBxAK.jpg",
-      "稽日可期": "https://i.loli.net/2020/04/30/FmfYcoMJesi2Ddq.jpg",
-      "哎": "https://i.loli.net/2020/04/30/ps7PTIANgSErqnU.jpg",
-      "别看丢人": "https://i.loli.net/2019/02/01/5c53d4f89ea29.jpg",
-      "地稽 2": "https://i.loli.net/2019/02/01/5c53dbae85687.jpg",
-      "地稽": "https://i.loli.net/2020/04/30/BnTMX35EPxleVmA.jpg",
-      "老阔有点扣": "https://i.loli.net/2020/04/30/fhDXbA9T1zJPlKk.gif",
-      "啊哈哈": "https://i.loli.net/2019/02/01/5c53dc2947d84.jpg",
-      "无稽可奈": "https://i.loli.net/2020/04/30/UyxTzB2fS3LtH7Q.jpg",
-      "老实巴交": "https://i.loli.net/2020/04/30/7DgSoyqwtYBxchE.jpg",
-      "紧张": "https://i.loli.net/2017/02/05/5896e8a408253.jpg",
-      "摇摆稽": "https://i.loli.net/2019/02/01/5c53d1904dcb2.gif",
-      "又不是不能用": "https://i.loli.net/2019/02/01/5c53ce897ab55.jpg",
-      "一时滑稽": "https://i.loli.net/2019/02/01/5c53d5d28e22c.jpg",
-      "无法接受": "https://i.loli.net/2019/02/01/5c53cee8422fc.jpg",
-      "嘤雄豪稽": "https://i.loli.net/2020/04/30/sbtw6o7iKaM4Nmq.jpg",
-      "相视双稽": "https://i.loli.net/2019/02/01/5c53d5a093149.jpg",
-      "稽皮发麻": "https://i.loli.net/2017/02/05/5896ece2a019f.jpg",
-      "地稽 3": "https://i.loli.net/2019/02/01/5c53dbe510bcf.jpg",
-      "地稽委屈": "https://i.loli.net/2019/02/01/5c53d76e250da.jpg",
-      "地稽抚摸": "https://i.loli.net/2020/04/30/cavZ6nNzMPimLy7.gif",
-      "地稽捶打": "https://i.loli.net/2020/04/30/vFVPynXaHR5sitk.gif",
-      "绝望": "https://i.loli.net/2019/02/01/5c53dc0ba2303.jpg",
-      "气稽败坏": "https://i.loli.net/2019/02/01/5c53d216f3c60.jpg",
-      "当场去世": "https://i.loli.net/2020/04/30/sogxHMTFWbE2lrP.jpg",
-      "喝酒": "https://i.loli.net/2019/02/01/5c53d78c3f4a5.jpg",
-      "老衲摆摊算命": "https://i.loli.net/2017/02/05/5896ece29d8a5.gif",
-      "老哥，稳": "https://i.loli.net/2017/02/05/5896ece29ebb0.jpg",
-      "自闭稽": "https://i.loli.net/2019/02/01/5c53d6603ee24.jpg",
-      "无话可说": "https://i.loli.net/2019/02/01/5c53d6a77b7e4.jpg",
-      "跃跃欲试": "https://i.loli.net/2017/02/05/5896e9710dfd5.jpg",
-      "跃跃欲试 2": "https://i.loli.net/2019/02/01/5c53dcc057350.jpg",
-      "满脑子骚操作": "https://i.loli.net/2020/04/30/xJXcUtO2BryHAsa.gif",
-      "稽之舞": "https://i.loli.net/2019/02/01/5c53de1a4d14d.gif",
-      "将稽就稽": "https://i.loli.net/2020/04/30/KVwf8qCrZts6WOT.gif"
-    }
-  }
-}

src/components/Comment.ts

@@ -1,402 +0,0 @@
-import '../style/comment.less'
-
-import Context from '../Context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import UADetect from '../lib/detect'
-import { CommentData } from '~/types/artalk-data'
-import CommentHTML from './html/comment.html?raw'
-import Api from '../lib/api'
-
-export default class Comment extends Component {
-  public data: CommentData
-
-  public mainEl!: HTMLElement
-  public bodyEl!: HTMLElement
-  public contentEl!: HTMLElement
-  public childrenEl!: HTMLElement|null
-  public actionsEl!: HTMLElement
-
-  public parent: Comment|null
-  public nestedNum: number
-  private readonly maxNestingNum = 3 // 最多嵌套层数
-  public children: Comment[] = []
-
-  public replyTo?: CommentData // 回复对象（flatMode 用）
-
-  public afterRender?: () => void
-
-  private unread = false
-  private openable = false
-  private openURL?: string
-  public openEvt?: () => void
-
-  constructor (ctx: Context, data: CommentData) {
-    super(ctx)
-
-    this.data = { ...data }
-    this.data.date = this.data.date.replace(/-/g, '/') // 解决 Safari 日期解析 NaN 问题
-
-    this.parent = null
-    this.nestedNum = 1 // 现在已嵌套 n 层
-  }
-
-  public renderElem () {
-    this.el = Utils.createElement(CommentHTML)
-    this.mainEl = this.el.querySelector('.atk-comment-main')!
-    this.bodyEl = this.el.querySelector('.atk-body')!
-    this.contentEl = this.bodyEl.querySelector('.atk-content')!
-    this.actionsEl = this.el.querySelector('.atk-comment-actions')!
-    this.childrenEl = null
-
-    // class style
-    if (this.unread) this.el.classList.add('atk-unread')
-    else this.el.classList.remove('atk-unread')
-
-    if (this.openable) {
-      this.el.classList.add('atk-openable')
-    } else {
-      this.el.classList.remove('atk-openable')
-    }
-
-    this.el.addEventListener('click', (evt) => {
-      if (this.openable && this.openURL) {
-        evt.preventDefault()
-        window.open(this.openURL)
-      }
-      if (this.openEvt)
-        this.openEvt()
-    })
-
-    // 填入内容
-    this.el.setAttribute('data-comment-id', `${this.data.id}`)
-    this.el.querySelector('.atk-avatar a')!.setAttribute('href', this.data.link)
-    this.el.querySelector('.atk-avatar img')!.setAttribute('src', this.getGravatarUrl())
-
-    const nickEl = this.el.querySelector<HTMLLinkElement>('.atk-nick > a')!
-    nickEl.innerText = this.data.nick
-    nickEl.href = this.data.link
-
-    const badgeEl = this.el.querySelector<HTMLElement>('.atk-badge')!
-    if (this.data.badge_name) {
-      badgeEl.innerText = this.data.badge_name
-      if (this.data.badge_color)
-        badgeEl.style.backgroundColor = this.data.badge_color
-    } else {
-      badgeEl.remove()
-    }
-
-    const dateEL = this.el.querySelector<HTMLElement>('.atk-date')!
-    dateEL.innerText = this.getDateFormatted()
-    dateEL.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
-    this.el.querySelector<HTMLElement>('.atk-ua.ua-browser')!.innerText = this.getUserUaBrowser()
-    this.el.querySelector<HTMLElement>('.atk-ua.ua-os')!.innerText = this.getUserUaOS()
-
-    // 内容 & 折叠
-    if (!this.data.is_collapsed) {
-      this.contentEl.innerHTML = this.getContentMarked()
-    } else {
-      this.contentEl.classList.add('atk-hide', 'atk-type-collapsed')
-      const collapsedInfoEl = Utils.createElement(`
-      <div class="atk-collapsed">
-        <span class="atk-text">该评论已被系统或管理员折叠</span>
-        <span class="atk-show-btn">查看内容</span>
-      </div>`)
-      this.bodyEl.insertAdjacentElement('beforeend', collapsedInfoEl)
-
-      const contentShowBtn = collapsedInfoEl.querySelector('.atk-show-btn')!
-      contentShowBtn.addEventListener('click', (e) => {
-        if (this.contentEl.classList.contains('atk-hide')) {
-          this.contentEl.innerHTML = this.getContentMarked()
-          this.contentEl.classList.remove('atk-hide')
-          Ui.playFadeInAnim(this.contentEl)
-          contentShowBtn.innerHTML = '收起内容'
-        } else {
-          this.contentEl.innerHTML = ''
-          this.contentEl.classList.add('atk-hide')
-          contentShowBtn.innerHTML = '查看内容'
-        }
-
-        e.stopPropagation() // 防止穿透
-      })
-    }
-
-    // 显示回复的对象
-    if (this.replyTo) {
-      const replyToEl = Utils.createElement(`
-      <div class="atk-reply-to">
-        <div class="atk-meta">回复 <span class="atk-nick"></span>:</div>
-        <div class="atk-content"></div>
-      </div>`)
-      replyToEl.querySelector<HTMLElement>('.atk-nick')!.innerText = `@${this.replyTo.nick}`
-      replyToEl.querySelector<HTMLElement>('.atk-content')!.innerHTML = Utils.marked(this.ctx, this.replyTo.content)
-      this.bodyEl.prepend(replyToEl)
-    }
-
-    // 显示待审核状态
-    if (this.data.is_pending) {
-      const pendingEl = Utils.createElement(`<div class="atk-pending">审核中，仅本人可见。</div>`)
-      this.bodyEl.prepend(pendingEl)
-    }
-
-    this.initActionBtn()
-
-    if (this.afterRender) this.afterRender()
-
-    return this.el
-  }
-
-  private eachComment (commentList: Comment[], action: (comment: Comment, levelList: Comment[]) => boolean|void) {
-    if (commentList.length === 0) return
-    commentList.every((item) => {
-      if (action(item, commentList) === false) return false
-      this.eachComment(item.getChildren(), action)
-      return true
-    })
-  }
-
-  public refreshUI () {
-    const originalEl = this.el
-    const newEl = this.renderElem()
-    originalEl.replaceWith(newEl) // 替换 document 中的的 elem
-    this.playFadeInAnim()
-
-    // 重建子评论元素
-    this.eachComment(this.children, (child) => {
-      child.parent?.getChildrenEl().appendChild(child.renderElem())
-      child.playFadeInAnim()
-    })
-  }
-
-  initActionBtn () {
-    // 赞同按钮
-    const voteBtnUp = Utils.createElement(`<span></span>`)
-    const voteBtnDown = Utils.createElement(`<span></span>`)
-    this.actionsEl.append(voteBtnUp)
-    this.actionsEl.append(voteBtnDown)
-
-    const refreshVote = () => {
-      voteBtnUp.innerText = `赞同 (${this.data.vote_up || 0})`
-      voteBtnDown.innerText = `反对 (${this.data.vote_down || 0})`
-    }
-    refreshVote()
-
-    voteBtnUp.onclick = () => {
-      new Api(this.ctx).vote(this.data.id, "comment_up")
-        .then((num) => {
-          this.data.vote_up = num
-          refreshVote()
-        })
-        .catch((err) => {
-          window.alert(`投票失败：${err.msg || String(err)}`)
-        })
-    }
-    voteBtnDown.onclick = () => {
-      new Api(this.ctx).vote(this.data.id, "comment_down")
-        .then((num) => {
-          this.data.vote_down = num
-          refreshVote()
-        })
-        .catch((err) => {
-          window.alert(`投票失败：${err.msg || String(err)}`)
-        })
-    }
-
-    // 绑定回复按钮事件
-    if (this.data.is_allow_reply) {
-      const replyBtn = Utils.createElement(`<span data-atk-action="comment-reply">回复</span>`)
-      this.actionsEl.append(replyBtn)
-      replyBtn.addEventListener('click', (e) => {
-        this.ctx.dispatchEvent('editor-reply', this.data)
-        e.stopPropagation() // 防止穿透
-      })
-    }
-
-    // 管理员操作按钮
-
-    // 绑定折叠按钮事件
-    const collapseBtn = Utils.createElement(`<span atk-only-admin-show>${this.data.is_collapsed ? '取消折叠' : '折叠'}</span>`)
-    this.actionsEl.append(collapseBtn)
-    collapseBtn.addEventListener('click', (e) => {
-      this.adminEdit('collapsed', collapseBtn)
-      e.stopPropagation() // 防止穿透
-    })
-
-    // 绑定待审核按钮事件
-    const pendingBtn = Utils.createElement(`<span atk-only-admin-show>${this.data.is_pending ? '待审' : '已审'}</span>`)
-    this.actionsEl.append(pendingBtn)
-    pendingBtn.addEventListener('click', (e) => {
-      this.adminEdit('pending', pendingBtn)
-      e.stopPropagation() // 防止穿透
-    })
-
-    // 绑定删除按钮事件
-    const delBtn = Utils.createElement(`<span atk-only-admin-show>删除</span>`)
-    this.actionsEl.append(delBtn)
-    delBtn.addEventListener('click', (e) => {
-      this.adminDelete(delBtn)
-      e.stopPropagation() // 防止穿透
-    })
-  }
-
-  getIsRoot () {
-    return this.parent === null
-  }
-
-  getChildren () {
-    return this.children
-  }
-
-  putChild (childC: Comment) {
-    childC.parent = this
-    childC.nestedNum = this.nestedNum + 1 // 嵌套层数 +1
-    this.children.push(childC)
-
-    this.getChildrenEl().appendChild(childC.getEl())
-    childC.playFadeInAnim()
-  }
-
-  getChildrenEl () {
-    if (this.childrenEl === null) {
-      // console.log(this.nestedNum)
-      if (this.nestedNum < this.maxNestingNum) {
-        this.childrenEl = Utils.createElement('<div class="atk-comment-children"></div>')
-        this.mainEl.appendChild(this.childrenEl)
-      } else if (this.parent) {
-          this.childrenEl = this.parent.getChildrenEl()
-      }
-    }
-    return this.childrenEl
-  }
-
-  getParent () {
-    return this.parent
-  }
-
-  getEl () {
-    return this.el
-  }
-
-  getData () {
-    return this.data
-  }
-
-  getGravatarUrl () {
-    return `${this.ctx.conf.gravatar?.cdn || ''}${this.data.email_encrypted}?d=${encodeURIComponent(this.ctx.conf.defaultAvatar || '')}&s=80`
-  }
-
-  getContentMarked () {
-    return Utils.marked(this.ctx, this.data.content)
-  }
-
-  getDateFormatted () {
-    return Utils.timeAgo(new Date(this.data.date))
-  }
-
-  getUserUaBrowser () {
-    const info = UADetect(this.data.ua)
-    return `${info.browser} ${info.version}`
-  }
-
-  getUserUaOS () {
-    const info = UADetect(this.data.ua)
-    return `${info.os} ${info.osVersion}`
-  }
-
-  /** 渐出动画 */
-  playFadeInAnim () {
-    Ui.playFadeInAnim(this.el)
-  }
-
-  /** 管理员 - 评论折叠 */
-  adminEdit (type: 'collapsed'|'pending', btnElem: HTMLElement) {
-    if (btnElem.classList.contains('atk-in-process')) return // 若正在折叠中
-    const btnTextOrg = btnElem.innerText
-
-    btnElem.classList.add('atk-in-process')
-    btnElem.innerText = '修改中...'
-
-    if (type === 'collapsed') {
-      this.data.is_collapsed = !this.data.is_collapsed
-    } else if (type === 'pending') {
-      this.data.is_pending = !this.data.is_pending
-    }
-
-    new Api(this.ctx).commentEdit(this.data).then((comment) => {
-      btnElem.classList.remove('atk-in-process')
-      this.data = comment
-      this.refreshUI()
-      Ui.playFadeInAnim(this.bodyEl)
-      this.ctx.dispatchEvent('list-refresh-ui')
-    }).catch((err) => {
-      console.error(err)
-      btnElem.classList.add('atk-error')
-      btnElem.innerText = '修改失败'
-      setTimeout(() => {
-        btnElem.innerText = btnTextOrg
-        btnElem.classList.remove('atk-error')
-        btnElem.classList.remove('atk-in-process')
-      }, 2000)
-    })
-  }
-
-  public onDelete?: (comment: Comment) => void
-
-  /** 管理员 - 评论删除 */
-  adminDelete (btnElem: HTMLElement) {
-    if (btnElem.classList.contains('atk-in-process')) return // 若正在删除中
-
-    // 删除确认
-    const btnClicked = Number(btnElem.getAttribute('data-btn-clicked') || 1)
-    if (btnClicked < 2) {
-      if (btnClicked === 1) {
-        const btnTextOrg = btnElem.innerText
-        btnElem.innerText = '确认删除'
-        setTimeout(() => {
-          btnElem.innerText = btnTextOrg
-          btnElem.setAttribute('data-btn-clicked', '')
-        }, 2000)
-        btnElem.setAttribute('data-btn-clicked', String(btnClicked+1))
-      }
-      return
-    }
-    const btnTextOrg = btnElem.innerText
-
-    btnElem.classList.add('atk-in-process')
-    btnElem.innerText = '删除中...'
-    new Api(this.ctx).commentDel(this.data.id, this.data.site_name)
-      .then(() => {
-        btnElem.innerText = btnTextOrg
-        btnElem.classList.remove('atk-in-process')
-        if (this.onDelete) this.onDelete(this)
-      })
-      .catch((e) => {
-        console.error(e)
-        btnElem.classList.add('atk-error')
-        btnElem.innerText = '删除失败'
-        setTimeout(() => {
-          btnElem.innerText = btnTextOrg
-          btnElem.classList.remove('atk-error')
-          btnElem.classList.remove('atk-in-process')
-        }, 2000)
-      })
-  }
-
-  public setUnread (val: boolean) {
-    this.unread = val
-    if (this.unread) this.el.classList.add('atk-unread')
-    else this.el.classList.remove('atk-unread')
-  }
-
-  public setOpenURL (url: string) {
-    if (!url) {
-      this.openable = false
-      this.el.classList.remove('atk-openable')
-    }
-
-    this.openable = true
-    this.openURL = url
-    this.el.classList.add('atk-openable')
-  }
-}

src/components/Layer.ts

@@ -1,138 +0,0 @@
-import Context from '../Context'
-import Component from '../lib/component'
-import Constant from '../Constant'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-
-export function GetLayerWrap (ctx: Context): { wrapEl: HTMLElement, maskEl: HTMLElement } {
-  let wrapEl = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
-  if (!wrapEl) {
-    wrapEl = Utils.createElement(
-      `<div class="atk-layer-wrap" id="ctx-${ctx.cid}" style="display: none;"><div class="atk-layer-mask"></div></div>`
-    )
-    document.body.appendChild(wrapEl)
-  }
-
-  const maskEl = wrapEl.querySelector<HTMLElement>('.atk-layer-mask')!
-
-  // dark mode
-  if (wrapEl) {
-    if (ctx.conf.darkMode) {
-      wrapEl.classList.add(Constant.DARK_MODE_CLASSNAME)
-    } else {
-      wrapEl.classList.remove(Constant.DARK_MODE_CLASSNAME)
-    }
-  }
-
-  return { wrapEl, maskEl }
-}
-
-export default function BuildLayer (ctx: Context, name: string, el?: HTMLElement) {
-  return new Layer(ctx, name, el)
-}
-
-export class Layer extends Component {
-  private name: string
-  private wrapEl: HTMLElement
-  private maskEl: HTMLElement
-
-  private maskClickHideEnable: boolean = true
-
-  constructor (ctx: Context, name: string, el?: HTMLElement) {
-    super(ctx)
-
-    this.name = name
-    const { wrapEl, maskEl } = GetLayerWrap(ctx)
-    this.wrapEl = wrapEl
-    this.maskEl = maskEl
-
-    this.el = this.wrapEl.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.wrapEl.append(this.el)
-  }
-
-  getName () {
-    return this.name
-  }
-
-  getWrapEl () {
-    return this.wrapEl
-  }
-
-  getEl () {
-    return this.el
-  }
-
-  private static hideTimeoutList: number[] = []
-
-  show () {
-    Layer.hideTimeoutList.forEach(item => {
-      clearTimeout(item)
-    })
-    Layer.hideTimeoutList = []
-
-    this.wrapEl.style.display = 'block'
-    this.maskEl.style.display = 'block'
-    this.maskEl.classList.add('atk-fade-in')
-    this.el.style.display = ''
-
-    this.maskEl.onclick = () => {
-      if (this.maskClickHideEnable) this.hide()
-    }
-
-    document.body.style.overflow = 'hidden'
-  }
-
-  hide () {
-    Layer.hideTimeoutList.push(window.setTimeout(() => {
-      this.wrapEl.style.display = 'none'
-      document.body.style.overflow = ''
-    }, 450))
-
-    this.wrapEl.classList.add('atk-fade-out')
-    Layer.hideTimeoutList.push(window.setTimeout(() => {
-      this.wrapEl.style.display = 'none'
-      this.wrapEl.classList.remove('atk-fade-out')
-    }, 200))
-
-    this.el.style.display = 'none'
-  }
-
-  setMaskClickHide (enable: boolean) {
-    this.maskClickHideEnable = enable
-  }
-
-  /** 销毁 - 无动画 */
-  disposeNow () {
-    document.body.style.overflow = ''
-    this.el.remove()
-    // 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.wrapEl.style.display = 'none'
-    }
-  }
-}

src/components/List.ts

@@ -1,162 +0,0 @@
-import '../style/list.less'
-
-import Context from '../Context'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import Api from '../lib/api'
-import ListHTML from './html/list.html?raw'
-import ListLite from './ListLite'
-import { ListData } from '~/types/artalk-data'
-
-export default class List extends ListLite {
-  private closeCommentBtnEl!: HTMLElement
-  private openSidebarBtnEl!: HTMLElement
-  private openAdminPanelBtnEl!: HTMLElement
-  private unreadBadgeEl!: HTMLElement
-
-  constructor (ctx: Context) {
-    super(ctx)
-
-    const el = Utils.createElement(ListHTML)
-    el.querySelector('.atk-list-body')!.append(this.el)
-    this.el = el
-
-    // 操作按钮
-    this.initListActionBtn()
-
-    this.el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
-
-    this.ctx.addEventListener('list-reload', () => (this.reqComments(0))) // 刷新评论
-    this.ctx.addEventListener('list-clear', () => (this.clearComments())) // 清空评论
-    this.ctx.addEventListener('list-refresh-ui', () => (this.refreshUI()))
-    this.ctx.addEventListener('list-import', (data) => (this.importComments(data)))
-    this.ctx.addEventListener('list-insert', (data) => (this.insertComment(data)))
-    this.ctx.addEventListener('list-comment-del', (comment) => (this.deleteComment(comment.id)))
-    this.ctx.addEventListener('list-update-data', (updateData) => { updateData(this.data);this.refreshUI() } )
-    this.ctx.addEventListener('unread-update', (data) => (this.showUnreadBadge(data.notifies?.length || 0)))
-  }
-
-  /** 刷新界面 */
-  public refreshUI () {
-    super.refreshUI()
-
-    this.el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(this.getListCommentCount())
-
-    // 已输入个人信息
-    if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
-      this.openSidebarBtnEl.classList.remove('atk-hide')
-    } else {
-      this.openSidebarBtnEl.classList.add('atk-hide')
-    }
-
-    // 仅管理员显示控制
-    this.ctx.dispatchEvent('check-admin-show-el')
-
-    // 关闭评论
-    if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
-      this.ctx.dispatchEvent('editor-close-comment')
-      this.closeCommentBtnEl.innerHTML = '打开评论'
-    } else {
-      this.ctx.dispatchEvent('editor-open-comment')
-      this.closeCommentBtnEl.innerHTML = '关闭评论'
-    }
-  }
-
-  public onLoad(data: ListData) {
-    super.onLoad(data)
-
-    // 检测锚点跳转
-    this.checkGoToCommentByUrlHash()
-  }
-
-  /** 跳到评论项位置 - 根据 `location.hash` */
-  public async 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.findComment(commentId)
-    if (!comment) { // 若找不到评论
-      if (this.hasMoreComments) { // 阅读更多，并重试
-        await this.readMore()
-      }
-    }
-
-    if (!comment) return
-
-    Ui.scrollIntoView(comment.getEl(), false)
-    setTimeout(() => {
-      comment.getEl().classList.add('atk-flash-once')
-
-      // 已阅 API
-      const notifyKey = Utils.getQueryParam('atk_notify_key')
-      if (notifyKey) {
-        new Api(this.ctx).markRead(notifyKey)
-          .then(() => {
-            this.unread = this.unread.filter(o => o.comment_id !== comment.data.id)
-            this.ctx.dispatchEvent('unread-update', {
-              notifies: this.unread
-            })
-          })
-      }
-    }, 800)
-  }
-
-  private initListActionBtn () {
-    // 侧边栏呼出按钮
-    this.openSidebarBtnEl = this.el.querySelector('[data-action="open-sidebar"]')!
-    this.openSidebarBtnEl.addEventListener('click', () => {
-      this.ctx.dispatchEvent('sidebar-show', { viewName: 'message' })
-    })
-
-    // 控制台呼出
-    this.openAdminPanelBtnEl = this.el.querySelector('[data-action="open-admin-panel"]')!
-    this.openAdminPanelBtnEl.addEventListener('click', () => {
-      this.ctx.dispatchEvent('sidebar-show', { viewName: 'admin' })
-    })
-
-
-    // 关闭评论按钮
-    this.closeCommentBtnEl = this.el.querySelector('[data-action="admin-close-comment"]')!
-    this.closeCommentBtnEl.addEventListener('click', () => {
-      if (!this.data) return
-
-      this.data.page.admin_only = !this.data.page.admin_only
-      this.adminPageEditSave()
-    })
-
-    this.unreadBadgeEl = this.el.querySelector('.atk-unread-badge')!
-  }
-
-  /** 管理员设置页面信息 */
-  public adminPageEditSave () {
-    if (!this.data || !this.data.page) return
-
-    this.ctx.dispatchEvent('editor-show-loading')
-    new Api(this.ctx).pageEdit(this.data.page)
-      .then((page) => {
-        if (this.data)
-          this.data.page = { ...page }
-        this.refreshUI()
-      })
-      .catch(err => {
-        this.ctx.dispatchEvent('editor-notify', { msg: `修改页面数据失败：${err.msg || String(err)}`, type: 'e'})
-      })
-      .finally(() => {
-        this.ctx.dispatchEvent('editor-hide-loading')
-      })
-  }
-
-  public showUnreadBadge (count: number) {
-    if (count > 0) {
-      this.unreadBadgeEl.innerText = `${Number(count || 0)}`
-      this.unreadBadgeEl.style.display = 'block'
-    } else {
-      this.unreadBadgeEl.style.display = 'none'
-    }
-  }
-}

src/components/ListLite.ts

@@ -1,407 +0,0 @@
-import Context from '../Context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import Api from '../lib/api'
-import Comment from './Comment'
-import { ListData, CommentData, NotifyData } from '~/types/artalk-data'
-
-export default class ListLite extends Component {
-  public el: HTMLElement
-  private commentsWrapEl: HTMLElement
-  public comments: Comment[] = []
-
-  public data?: ListData
-  private pageSize: number = 15 // 每次请求获取量
-  private offset: number = 0
-  public type?: 'all'|'mentions'|'mine'|'pending'
-
-  private readMoreEl: HTMLElement
-  private readMoreLoadingEl: HTMLElement
-  private readMoreTextEl: HTMLElement
-
-  public noCommentText: string
-  public renderComment?: (comment: Comment) => void
-  public paramsEditor?: (params: any) => void
-  public onAfterLoad?: (data: ListData) => void
-
-  private isLoading: boolean = false
-  public isFirstLoad = true
-
-  public flatMode = false
-
-  public unread: NotifyData[] = []
-  public unreadHighlight = false
-
-  constructor (ctx: Context) {
-    super(ctx)
-
-    this.el = Utils.createElement(`
-    <div class="atk-list-lite">
-      <div class="atk-list-comments-wrap"></div>
-      <div class="atk-list-read-more" style="display: none;">
-        <div class="atk-loading-icon" style="display: none;"></div>
-        <span class="atk-text">查看更多</span>
-      </div>
-    </div>
-    `)
-    this.commentsWrapEl = this.el.querySelector('.atk-list-comments-wrap')!
-
-    // 查看更多
-    this.pageSize = this.conf.readMore ? (this.conf.readMore.pageSize || this.pageSize) : this.pageSize
-    this.readMoreEl = this.el.querySelector('.atk-list-read-more')!
-    this.readMoreLoadingEl = this.readMoreEl.querySelector('.atk-loading-icon')!
-    this.readMoreTextEl = this.readMoreEl.querySelector('.atk-text')!
-    this.readMoreEl.addEventListener('click', () => {
-      this.readMore()
-    })
-
-    this.noCommentText = this.conf.noComment || '无评论'
-
-    // 评论时间自动更新
-    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)))
-      })
-    }, 30 * 1000) // 30s 更新一次
-
-    this.ctx.addEventListener('unread-update', (data) => (this.updateUnread(data.notifies)))
-  }
-
-  public async reqComments(offset: number = 0) {
-    if (offset === 0) {
-      this.clearComments()
-    }
-
-    // set loading
-    this.isLoading = true
-    if (offset === 0) Ui.showLoading(this.el)
-    else this.readMoreBtnSetLoading(true)
-
-    const hideLoading = () => {
-      // hide loading
-      this.isLoading = false
-      if (offset === 0) Ui.hideLoading(this.el)
-      else this.readMoreBtnSetLoading(false)
-    }
-
-    let listData: ListData
-    try {
-      listData = await new Api(this.ctx).get(offset, this.type, this.paramsEditor)
-    } catch (e: any) {
-      this.onError(e.msg || String(e))
-      throw e
-    } finally {
-      hideLoading()
-    }
-
-    // load data
-    this.offset = offset
-
-    try {
-      this.onLoad(listData)
-
-      if (this.onAfterLoad) {
-        this.onAfterLoad(listData)
-      }
-    } catch (e: any) {
-      this.onError(String(e))
-      throw e
-    } finally {
-      hideLoading()
-    }
-  }
-
-  public onLoad (data: ListData) {
-    this.data = data
-    Ui.setError(this.el, null)
-    this.importComments(data.comments)
-
-    // 查看更多按钮
-    if (this.hasMoreComments) {
-      this.showReadMoreBtn()
-    } else {
-      this.hideReadMoreBtn()
-    }
-
-    // 滚动到底部自动加载
-    if (this.isFirstLoad && this.hasMoreComments) {
-      this.initScrollBottomAutoLoad()
-    }
-
-    this.ctx.dispatchEvent('unread-update', { notifies: data.unread || [] })
-
-    this.isFirstLoad = false
-  }
-
-  public onError (msg: any) {
-    msg = String(msg)
-    console.error(msg)
-    if (this.isFirstLoad) {
-      const errEl = Utils.createElement(`<span>${msg}，无法获取评论列表数据<br/></span>`)
-      const retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
-      retryBtn.onclick = () => {
-        this.reqComments(0)
-      }
-      errEl.appendChild(retryBtn)
-      const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
-      adminBtn.onclick = () => {
-        this.ctx.dispatchEvent('sidebar-show', { viewName: 'admin' })
-      }
-      if (!this.ctx.user.data.isAdmin) {
-        adminBtn.classList.add('atk-hide')
-      }
-      errEl.appendChild(adminBtn)
-      Ui.setError(this.el, errEl)
-    } else {
-      this.readMoreBtnShowErr(`${msg} 获取失败`)
-    }
-  }
-
-  public createComment(data: CommentData) {
-    const comment = new Comment(this.ctx, data)
-    comment.afterRender = () => {
-      if (this.renderComment) this.renderComment(comment)
-    }
-    comment.onDelete = (c) => {
-      this.deleteComment(c)
-      this.refreshUI()
-    }
-
-    return comment
-  }
-
-  /** 导入评论 - 通过请求数据 */
-  public importComments (rawData: CommentData[]) {
-    // 查找并导入所有子评论
-    const queryImportChildren = (parentC: Comment) => {
-      const children = rawData.filter(o => o.rid === parentC.data.id)
-      if (children.length === 0) return
-
-      children.forEach((itemData: CommentData) => {
-        itemData.is_allow_reply = parentC.data.is_allow_reply
-        const childC = this.createComment(itemData)
-        childC.renderElem()
-        parentC.putChild(childC)
-        queryImportChildren(childC) // 递归
-      })
-    }
-
-    // 开始处理 rawData
-    if (!this.flatMode) {
-      rawData.filter((o) => o.rid === 0).forEach((rootCommentData: CommentData) => {
-        if (rootCommentData.is_collapsed) rootCommentData.is_allow_reply = false
-        const rootComment = this.createComment(rootCommentData)
-        rootComment.renderElem()
-        this.comments.push(rootComment) // 将评论导入 comments 总表中
-
-        this.commentsWrapEl.appendChild(rootComment.getEl())
-        rootComment.playFadeInAnim()
-
-        queryImportChildren(rootComment)
-      })
-    } else {
-      rawData.forEach((commentData: CommentData) => {
-        if (commentData.is_collapsed) commentData.is_allow_reply = false
-        const comment = this.createComment(commentData)
-        if (commentData.rid !== 0) {
-          const rComment = rawData.find(o => o.id === commentData.rid)
-          if (rComment) comment.replyTo = rComment
-        }
-        comment.renderElem()
-
-        this.comments.push(comment) // 将评论导入 comments 总表中
-
-        if (commentData.visible) {
-          this.commentsWrapEl.appendChild(comment.getEl())
-          comment.playFadeInAnim()
-        }
-      })
-    }
-
-    this.refreshUI()
-  }
-
-  public insertComment (commentData: CommentData) {
-    const comment = this.createComment(commentData)
-    comment.renderElem()
-
-    if (commentData.rid !== 0) {
-      this.findComment(commentData.rid)?.putChild(comment)
-    } else {
-      this.commentsWrapEl.prepend(comment.getEl())
-      this.comments.unshift(comment)
-    }
-
-    Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
-    comment.playFadeInAnim() // 播放评论渐出动画
-    if (this.data) this.data.total += 1 // 评论数增加 1
-    this.refreshUI() // 更新 list 界面
-  }
-
-  /** 刷新界面 */
-  public refreshUI () {
-    // 评论为空界面
-    const noComment = this.comments.length <= 0
-    let noCommentEl = this.commentsWrapEl.querySelector<HTMLElement>('.atk-list-no-comment')
-
-    if (noComment) {
-      if (!noCommentEl) {
-        noCommentEl = Utils.createElement('<div class="atk-list-no-comment"></div>')
-        this.commentsWrapEl.appendChild(noCommentEl)
-        noCommentEl.innerHTML = this.noCommentText
-      }
-    }
-
-    if (!noComment && noCommentEl)
-      noCommentEl.remove()
-
-    // 仅管理员显示控制
-    this.ctx.dispatchEvent('check-admin-show-el')
-  }
-
-  /** 获取评论总数 (包括子评论) */
-  public getListCommentCount (): number {
-    if (!this.data || !this.data.total) return 0
-    return Number(this.data.total || '0')
-  }
-
-  /** 是否还有更多的评论 */
-  get hasMoreComments (): boolean {
-    if (!this.data) return false
-    return this.data.total_parents > (this.offset + this.pageSize)
-  }
-
-  /** 阅读更多操作 */
-  async readMore () {
-    const offset = this.offset + this.pageSize
-    await this.reqComments(offset)
-  }
-
-  /** 阅读更多按钮 - 显示 */
-  showReadMoreBtn () {
-    this.readMoreEl.style.display = ''
-  }
-
-  /** 阅读更多按钮 - 隐藏 */
-  hideReadMoreBtn () {
-    this.readMoreEl.style.display = 'none'
-  }
-
-  /** 阅读更多按钮 - 显示加载 */
-  readMoreBtnSetLoading (isLoading: boolean) {
-    this.readMoreLoadingEl.style.display = isLoading ? '' : 'none'
-    this.readMoreTextEl.style.display = isLoading ? 'none' : ''
-  }
-
-  /** 阅读更多按钮 - 显示错误 */
-  readMoreBtnShowErr (errMsg: string) {
-    this.readMoreBtnSetLoading(false)
-
-    const readMoreTextOrg = this.readMoreTextEl.innerText
-    this.readMoreTextEl.innerText = errMsg
-    this.readMoreEl.classList.add('atk-err')
-    setTimeout(() => {
-      this.readMoreTextEl.innerText = readMoreTextOrg
-      this.readMoreEl.classList.remove('atk-err')
-    }, 2000) // 2s后错误提示复原
-  }
-
-  /** 初始化滚动到底部自动查看更多（若开启） */
-  initScrollBottomAutoLoad () {
-    if (!this.conf.readMore) return
-    if (!this.conf.readMore.autoLoad) return
-
-    document.addEventListener('scroll', () => {
-      const targetEl = this.el.querySelector<HTMLElement>('.atk-list-comments-wrap > .atk-comment-wrap:nth-last-child(3)') // 获取倒数第3个评论元素
-      if (!targetEl) return
-      if (!this.hasMoreComments) return
-      if (this.isLoading) return
-      if (Ui.isVisible(targetEl)) {
-        // 加载更多
-        this.readMore()
-      }
-    })
-  }
-
-  /** 遍历操作 Comment (包括子评论) */
-  public eachComment (commentList: Comment[], action: (comment: Comment, levelList: Comment[]) => boolean|void) {
-    if (commentList.length === 0) return
-    commentList.every((item) => {
-      if (action(item, commentList) === false) return false
-      this.eachComment(item.getChildren(), action)
-      return true
-    })
-  }
-
-  /** 查找评论项 */
-  public findComment (id: number, src?: Comment[]): Comment|null {
-    if (!src) src = this.comments
-    let comment: Comment|null = null
-    this.eachComment(src, (item) => {
-      if (item.data.id === id) {
-        comment = item
-        return false
-      }
-      return true
-    })
-
-    return comment
-  }
-
-  /** 获取评论总数 */
-  public getCommentCount (): number {
-    let count = 0
-    this.eachComment(this.comments, () => { count++ })
-    return count
-  }
-
-  /** 删除评论 */
-  public deleteComment (comment: number|Comment) {
-    let findComment: Comment|null
-    if (typeof comment === 'number') {
-      findComment = this.findComment(comment)
-      if (!findComment) throw Error(`未找到评论 ${comment}`)
-    } else findComment = comment
-
-    findComment.getEl().remove()
-    this.eachComment(this.comments, (item, levelList) => {
-      if (item === findComment) {
-        levelList.splice(levelList.indexOf(item), 1)
-        return false
-      }
-      return true
-    })
-  }
-
-  /** 清空所有评论 */
-  public clearComments () {
-    this.commentsWrapEl.innerHTML = ''
-    this.data = undefined
-    this.comments = []
-  }
-
-  public updateUnread(notifies: NotifyData[]) {
-    this.unread = notifies
-
-    // 高亮评论
-    if (this.unreadHighlight) {
-      this.eachComment(this.comments, (comment) => {
-        const notify = this.unread.find(o => o.comment_id === comment.data.id)
-        if (notify) {
-          comment.setUnread(true)
-          comment.setOpenURL(notify.read_link)
-          comment.openEvt = () => {
-            this.unread = this.unread.filter(o => o.comment_id !== comment.data.id) // remove
-            this.ctx.dispatchEvent('unread-update', {
-              notifies: this.unread
-            })
-          }
-        } else {
-          comment.setUnread(false)
-        }
-      })
-    }
-  }
-}

src/components/Sidebar.ts

@@ -1,141 +0,0 @@
-import '../style/sidebar.less'
-
-import Context from '../Context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import Comment  from './Comment'
-import SidebarHTML from './html/sidebar.html?raw'
-import BuildLayer, { Layer } from './Layer'
-
-import SidebarView from './sidebar-views/SidebarView'
-import MessageView from './sidebar-views/MessageView'
-import AdminView from './sidebar-views/AdminView'
-
-export default class Sidebar extends Component {
-  public el: HTMLElement
-  public layer?: Layer
-  public actionsEl: HTMLElement
-  public contentEl: HTMLElement
-  public titleWrapEl: HTMLElement
-
-  public view?: SidebarView
-  public action?: string
-  private isFirstShow = true
-
-  public viewInstances: {[name: string]: SidebarView} = {}
-  public registerViews: (typeof SidebarView)[] = [
-    MessageView, AdminView,
-  ]
-
-  constructor (ctx: Context) {
-    super(ctx)
-
-    // initial elements
-    this.el = Utils.createElement(SidebarHTML)
-    this.contentEl = this.el.querySelector('.atk-sidebar-content')!
-    this.titleWrapEl = this.el.querySelector('.atk-sidebar-title-wrap')!
-    this.actionsEl = this.el.querySelector('.atk-sidebar-actions')!
-
-    this.el.querySelector('.atk-sidebar-close')!.addEventListener('click', () => {
-      this.hide()
-    })
-
-    // event
-    this.ctx.addEventListener('sidebar-show', (payload) => (this.show(payload?.viewName)))
-    this.ctx.addEventListener('sidebar-hide', () => (this.hide()))
-
-    // titles
-    this.registerViews.forEach(View => {
-      const viewInstance = new View(this.ctx)
-      this.viewInstances[viewInstance.name] = viewInstance
-      viewInstance.el.classList.add(`atk-sidebar-view-${viewInstance.name}`)
-
-      const titleEl = Utils.createElement(`
-      <span class="atk-title-item" data-name="${viewInstance.name}">${viewInstance.title}</span>
-      `)
-      if (viewInstance.adminOnly) {
-        titleEl.setAttribute('atk-only-admin-show', '')
-        if (!this.ctx.user.data.isAdmin)
-          titleEl.classList.add('atk-hide')
-      }
-      this.titleWrapEl.append(titleEl)
-
-      // title click
-      titleEl.addEventListener('click', () => { this.switchView(viewInstance) })
-    })
-  }
-
-  show (viewName?: string) {
-    this.el.style.transform = '' // 动画清除，防止二次打开失效
-
-    this.layer = BuildLayer(this.ctx, 'sidebar', this.el)
-    this.layer.show()
-    this.contentEl.scrollTo(0, 0)
-
-    setTimeout(() => {
-      this.el.style.transform = 'translate(0, 0)' // 执行动画
-    }, 20)
-
-    if (viewName) {
-      this.switchViewByName(viewName) // 打开指定 view
-    }
-
-    if (this.isFirstShow) {
-      if (!viewName) this.switchViewByName('message') // 打开默认 view
-      this.isFirstShow = false
-    }
-  }
-
-  hide () {
-    this.el.style.transform = ''
-    this.layer?.dispose() // 用完即销毁
-  }
-
-  switchViewByName (viewName: string) {
-    if (!this.viewInstances[viewName]) {
-      console.error(`未找到 view: ${viewName}`)
-      return
-    }
-
-    this.switchView(this.viewInstances[viewName])
-  }
-
-  switchView (view: SidebarView) {
-    this.view = view
-
-    // focus title
-    const titleEl = this.titleWrapEl.querySelector<HTMLElement>(`[data-name=${view.name}]`)!
-    this.titleWrapEl.querySelector<HTMLElement>('.atk-active')!.innerText = view.title
-    this.titleWrapEl.querySelectorAll<HTMLElement>('.atk-title-item').forEach((item) => {
-      if (!item.classList.contains('atk-active'))
-        item.style.display = ''
-    })
-    titleEl.style.display = 'none'
-
-    // init view ui
-    view.init()
-    this.contentEl.innerHTML = ''
-    this.contentEl.append(view.el)
-
-    // actions
-    this.actionsEl.innerHTML = ''
-    Object.entries(view.actions).forEach(([name, label]) => {
-      const actionItemEl = Utils.createElement(`<span class="atk-action-item">${label}</span>`)
-      this.actionsEl.append(actionItemEl)
-
-      if (view.activeAction === name) actionItemEl.classList.add('atk-active')
-
-      // action click
-      actionItemEl.addEventListener('click', () => {
-        view.switch(name)
-        view.activeAction = name
-
-        this.actionsEl.querySelectorAll('.atk-active').forEach((item) => {
-          item.classList.remove('atk-active')
-        })
-        actionItemEl.classList.add('atk-active')
-      })
-    })
-  }
-}

src/components/_component.ts.txt

@@ -0,0 +1,10 @@
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+
+export default class Example extends Component {
+  constructor(ctx: Context) {
+    super(ctx)
+  }
+}

src/components/action-btn.ts

@@ -0,0 +1,169 @@
+import * as Utils from '../lib/utils'
+
+interface ActionBtnConf {
+  /** 按钮文字 (动态/静态) */
+  text: (() => string) | string
+
+  /** 仅管理员可用 */
+  adminOnly?: boolean
+
+  /** 确认操作 */
+  confirm?: boolean
+
+  /** 确认时提示文字 */
+  confirmText?: string
+}
+
+/**
+ * 通用操作按钮
+ */
+export default class ActionBtn {
+  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(conf: ActionBtnConf|string|(() => string)) {
+    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.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 = true, loadingText?: string) {
+    if (this.isLoading === value) return
+    this.isLoading = value
+    if (value) {
+      this.$el.classList.add('atk-btn-loading')
+      this.$el.innerText = loadingText || '加载中...'
+    } 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
+  }
+}

src/components/admin/page-list.ts

@@ -0,0 +1,194 @@
+import '@/style/page-list.less'
+
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+import { PageData } from '~/types/artalk-data'
+import ItemTextEditor from '../item-text-editor'
+import Api from '~/src/api'
+import ActionBtn from '../action-btn'
+
+export default class PageList extends Component {
+  $editor?: HTMLElement
+  $inputer?: HTMLElement
+
+  pages: PageData[] = []
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
+  }
+
+  /** 清空所有 Pages */
+  clearAll() {
+    this.pages = []
+    this.$el.innerHTML = ''
+  }
+
+  /** 导入 Page 数据 */
+  importPages(pages: PageData[]) {
+    this.pages.push(...pages)
+
+    pages.forEach((page) => {
+      const $page = this.renderPage(page)
+      this.$el.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)
+
+    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 new Api(this.ctx).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({
+      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 new Api(this.ctx).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 new Api(this.ctx).pageFetch(page.id)
+      } 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 new Api(this.ctx).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()
+  }
+}

src/components/admin/site-list-floater.ts

@@ -0,0 +1,98 @@
+import '@/style/site-list.less'
+
+import Context from '@/context'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+import { SiteData } from '~/types/artalk-data'
+import Api from '~/src/api'
+
+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 new Api(this.ctx).siteGet()
+    sites.forEach((site) => {
+      renderSiteItem(site.name, site.name.substr(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)
+  }
+}

src/components/admin/site-list.ts

@@ -0,0 +1,289 @@
+import '@/style/site-list.less'
+
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+import { SiteData } from '~/types/artalk-data'
+import ItemTextEditor from '../item-text-editor'
+import Api from '~/src/api'
+
+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) {
+    super(ctx)
+
+    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()
+    }
+  }
+
+  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.substr(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 new Api(this.ctx).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 new Api(this.ctx).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() {
+    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"]')!
+
+    $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 new Api(this.ctx).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()
+  }
+}

src/components/comment.ts

@@ -0,0 +1,462 @@
+import '../style/comment.less'
+
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import UADetect from '../lib/detect'
+import { CommentData } from '~/types/artalk-data'
+import CommentHTML from './html/comment.html?raw'
+import Api from '../api'
+import ActionBtn from './action-btn'
+
+export default class Comment extends Component {
+  public data: CommentData
+
+  public $main!: HTMLElement
+  public $header!: HTMLElement
+  public $body!: HTMLElement
+  public $content!: HTMLElement
+  public $children!: HTMLElement|null
+  public $actions!: HTMLElement
+  public voteBtnUp?: ActionBtn
+  public voteBtnDown?: ActionBtn
+
+  public parent: Comment|null
+  public nestedNum: number
+  private maxNestingNum: number // 最多嵌套层数
+  public children: Comment[] = []
+
+  public replyTo?: CommentData // 回复对象（flatMode 用）
+  public $replyTo?: HTMLElement
+
+  public afterRender?: () => void
+
+  private unread = false
+  private openable = false
+  private openURL?: string
+  public openEvt?: () => void
+
+  constructor(ctx: Context, data: CommentData) {
+    super(ctx)
+
+    // 最大嵌套数
+    this.maxNestingNum = ctx.conf.maxNesting || 3
+
+    this.data = { ...data }
+    this.data.date = this.data.date.replace(/-/g, '/') // 解决 Safari 日期解析 NaN 问题
+
+    this.parent = null
+    this.nestedNum = 1 // 现在已嵌套 n 层
+  }
+
+  /** 渲染 UI */
+  public render() {
+    this.$el = Utils.createElement(CommentHTML)
+    this.$main = this.$el.querySelector('.atk-comment-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-comment-actions')!
+    this.$children = null
+
+    this.$el.setAttribute('data-comment-id', `${this.data.id}`)
+
+    this.renderCheckUnread()
+    this.renderCheckClickable()
+
+    this.renderAvatar()
+    this.renderHeader()
+    this.renderContent()
+    this.renderReplyTo()
+    this.renderPending()
+    this.renderActionBtn()
+
+    if (this.afterRender) this.afterRender()
+
+    return this.$el
+  }
+
+  //#region Renders
+  private renderCheckUnread() {
+    if (this.unread) this.$el.classList.add('atk-unread')
+    else this.$el.classList.remove('atk-unread')
+  }
+
+  private renderCheckClickable() {
+    if (this.openable) {
+      this.$el.classList.add('atk-openable')
+    } else {
+      this.$el.classList.remove('atk-openable')
+    }
+
+    this.$el.addEventListener('click', (evt) => {
+      if (this.openable && this.openURL) {
+        evt.preventDefault()
+        window.open(this.openURL)
+      }
+      if (this.openEvt)
+        this.openEvt()
+    })
+  }
+
+  private renderAvatar() {
+    const $avatar = this.$el.querySelector<HTMLElement>('.atk-avatar')!
+    const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
+    $avatarImg.src = this.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() {
+    const $nick = 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
+      $nick.append($nickA)
+    } else {
+      $nick.innerText = this.data.nick
+    }
+
+    const $badge = this.$el.querySelector<HTMLElement>('.atk-badge')!
+    if (this.data.badge_name) {
+      $badge.innerText = this.data.badge_name
+      if (this.data.badge_color)
+        $badge.style.backgroundColor = this.data.badge_color
+    } else {
+      $badge.remove()
+    }
+
+    const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
+    $date.innerText = this.getDateFormatted()
+    $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
+
+    if (this.conf.uaBadge) {
+      const $uaWrap = Utils.createElement(`<span class="atk-ua-wrap"></span>`)
+      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.getUserUaBrowser()
+      $usOS.innerText = this.getUserUaOS()
+      $uaWrap.append($uaBrowser)
+      $uaWrap.append($usOS)
+      this.$header.append($uaWrap)
+    }
+  }
+
+  private renderContent() {
+    // 内容 & 折叠
+    if (!this.data.is_collapsed) {
+      this.$content.innerHTML = this.getContentMarked()
+      return
+    }
+
+    this.$content.classList.add('atk-hide', 'atk-type-collapsed')
+    const collapsedInfoEl = Utils.createElement(`
+      <div class="atk-collapsed">
+        <span class="atk-text">该评论已被系统或管理员折叠</span>
+        <span class="atk-show-btn">查看内容</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.getContentMarked()
+        this.$content.classList.remove('atk-hide')
+        Ui.playFadeInAnim(this.$content)
+        contentShowBtn.innerHTML = '收起内容'
+      } else {
+        this.$content.innerHTML = ''
+        this.$content.classList.add('atk-hide')
+        contentShowBtn.innerHTML = '查看内容'
+      }
+    })
+  }
+
+  // 回复的对象
+  private renderReplyTo() {
+    if (!this.replyTo) return
+
+    this.$replyTo = Utils.createElement(`
+      <div class="atk-reply-to">
+        <div class="atk-meta">回复 <span class="atk-nick"></span>:</div>
+        <div class="atk-content"></div>
+      </div>`)
+    this.$replyTo.querySelector<HTMLElement>('.atk-nick')!.innerText = `@${this.replyTo.nick}`
+    let replyContent = Utils.marked(this.ctx, this.replyTo.content)
+    if (this.replyTo.is_collapsed) replyContent = '[已折叠]'
+    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">审核中，仅本人可见。</div>`)
+    this.$body.prepend(pendingEl)
+  }
+
+  /** 初始化评论操作按钮 */
+  private renderActionBtn() {
+    // 投票功能
+    if (this.ctx.conf.vote) {
+      // 赞同按钮
+      this.voteBtnUp = new ActionBtn(() => `赞同 (${this.data.vote_up || 0})`).appendTo(this.$actions)
+      this.voteBtnUp.setClick(() => {
+        this.vote('up')
+      })
+
+      // 反对按钮
+      if (this.ctx.conf.voteDown) {
+        this.voteBtnDown = new ActionBtn(() => `反对 (${this.data.vote_down || 0})`).appendTo(this.$actions)
+        this.voteBtnDown.setClick(() => {
+          this.vote('down')
+        })
+      }
+    }
+
+    // 绑定回复按钮事件
+    if (this.data.is_allow_reply) {
+      const replyBtn = Utils.createElement(`<span data-atk-action="comment-reply">回复</span>`)
+      this.$actions.append(replyBtn)
+      replyBtn.addEventListener('click', (e) => {
+        e.stopPropagation() // 防止穿透
+        this.ctx.trigger('editor-reply', this.data)
+      })
+    }
+
+    // 绑定折叠按钮事件
+    const collapseBtn = new ActionBtn({
+      text: () => (this.data.is_collapsed ? '取消折叠' : '折叠'),
+      adminOnly: true
+    })
+    collapseBtn.appendTo(this.$actions)
+    collapseBtn.setClick(() => {
+      this.adminEdit('collapsed', collapseBtn)
+    })
+
+    // 绑定待审核按钮事件
+    const pendingBtn = new ActionBtn({
+      text: () => (this.data.is_pending ? '待审' : '已审'),
+      adminOnly: true
+    })
+    pendingBtn.appendTo(this.$actions)
+    pendingBtn.setClick(() => {
+      this.adminEdit('pending', pendingBtn)
+    })
+
+    // 绑定删除按钮事件
+    const delBtn = new ActionBtn({
+      text: '删除',
+      confirm: true,
+      confirmText: '确认删除',
+      adminOnly: true,
+    })
+    delBtn.appendTo(this.$actions)
+    delBtn.setClick(() => {
+      this.adminDelete(delBtn)
+    })
+  }
+  //#endregion
+
+  /** 刷新评论 UI */
+  public refreshUI() {
+    const originalEl = this.$el
+    const newEl = this.render()
+    originalEl.replaceWith(newEl) // 替换 document 中的的 elem
+    this.playFadeInAnim()
+
+    // 重建子评论元素
+    this.eachComment(this.children, (child) => {
+      child.parent?.getChildrenEl().appendChild(child.render())
+      child.playFadeInAnim()
+    })
+
+    this.ctx.trigger('comments-loaded')
+  }
+
+  /** 遍历评论 */
+  private eachComment(commentList: Comment[], action: (comment: Comment, levelList: Comment[]) => boolean|void) {
+    if (commentList.length === 0) return
+    commentList.every((item) => {
+      if (action(item, commentList) === false) return false
+      this.eachComment(item.getChildren(), action)
+      return true
+    })
+  }
+
+  getIsRoot() {
+    return this.parent === null
+  }
+
+  getChildren() {
+    return this.children
+  }
+
+  putChild(childC: Comment) {
+    childC.parent = this
+    childC.nestedNum = this.nestedNum + 1 // 嵌套层数 +1
+    this.children.push(childC)
+
+    this.getChildrenEl().appendChild(childC.getEl())
+    childC.playFadeInAnim()
+  }
+
+  getChildrenEl() {
+    if (this.$children === null) {
+      // console.log(this.nestedNum)
+      if (this.nestedNum < this.maxNestingNum) {
+        this.$children = Utils.createElement('<div class="atk-comment-children"></div>')
+        this.$main.appendChild(this.$children)
+      } else if (this.parent) {
+          this.$children = this.parent.getChildrenEl()
+      }
+    }
+
+    return this.$children
+  }
+
+  getParent() {
+    return this.parent
+  }
+
+  getParents() {
+    const parents: Comment[] = []
+    const once = (c: Comment) => {
+      if (c.parent) {
+        parents.push(c.parent)
+        once(c.parent)
+      }
+    }
+
+    once(this)
+    return parents
+  }
+
+  getEl() {
+    return this.$el
+  }
+
+  getData() {
+    return this.data
+  }
+
+  getGravatarUrl() {
+    return Utils.getGravatarURL(this.ctx, this.data.email_encrypted)
+  }
+
+  getContentMarked() {
+    return Utils.marked(this.ctx, this.data.content)
+  }
+
+  getDateFormatted() {
+    return Utils.timeAgo(new Date(this.data.date))
+  }
+
+  getUserUaBrowser() {
+    const info = UADetect(this.data.ua)
+    return `${info.browser} ${info.version}`
+  }
+
+  getUserUaOS() {
+    const info = UADetect(this.data.ua)
+    return `${info.os} ${info.osVersion}`
+  }
+
+  /** 渐出动画 */
+  playFadeInAnim() {
+    Ui.playFadeInAnim(this.$el)
+  }
+
+  /** 投票操作 */
+  vote(type: 'up'|'down') {
+    const actionBtn = type === 'up' ? this.voteBtnUp : this.voteBtnDown
+
+    new Api(this.ctx).vote(this.data.id, `comment_${type}`)
+    .then((v) => {
+      this.data.vote_up = v.up
+      this.data.vote_down = v.down
+      this.voteBtnUp?.updateText()
+      this.voteBtnDown?.updateText()
+    })
+    .catch((err) => {
+      actionBtn?.setError(`投票失败`)
+      console.log(err)
+    })
+  }
+
+  /** 管理员 - 评论折叠 */
+  adminEdit(type: 'collapsed'|'pending', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在折叠中
+
+    btnElem.setLoading(true, '修改中...')
+
+    // 克隆并修改当前数据
+    const modify = { ...this.data }
+    if (type === 'collapsed') {
+      modify.is_collapsed = !modify.is_collapsed
+    } else if (type === 'pending') {
+      modify.is_pending = !modify.is_pending
+    }
+
+    new Api(this.ctx).commentEdit(modify).then((comment) => {
+      btnElem.setLoading(false)
+
+      // 刷新当前 Comment UI
+      this.data = comment
+      this.refreshUI()
+      Ui.playFadeInAnim(this.$body)
+
+      // 刷新 List UI
+      this.ctx.trigger('list-refresh-ui')
+    }).catch((err) => {
+      console.error(err)
+      btnElem.setError('修改失败')
+    })
+  }
+
+  public onDelete?: (comment: Comment) => void
+
+  /** 管理员 - 评论删除 */
+  adminDelete(btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在删除中
+
+    btnElem.setLoading(true, '删除中...')
+    new Api(this.ctx).commentDel(this.data.id, this.data.site_name)
+      .then(() => {
+        btnElem.setLoading(false)
+        if (this.onDelete) this.onDelete(this)
+      })
+      .catch((e) => {
+        console.error(e)
+        btnElem.setError('删除失败')
+      })
+  }
+
+  public setUnread(val: boolean) {
+    this.unread = val
+    if (this.unread) this.$el.classList.add('atk-unread')
+    else this.$el.classList.remove('atk-unread')
+  }
+
+  public setOpenURL(url: string) {
+    if (!url) {
+      this.openable = false
+      this.$el.classList.remove('atk-openable')
+    }
+
+    this.openable = true
+    this.openURL = url
+    this.$el.classList.add('atk-openable')
+  }
+}

src/components/dialog.ts

@@ -0,0 +1,63 @@
+import * as Utils from '../lib/utils'
+
+type BtnClickHandler = (btnEl: HTMLElement, dialog: Dialog) => boolean|void
+
+/**
+ * 对话框
+ */
+export default class Dialog {
+  public $el: HTMLElement
+  public $content: HTMLElement
+  public $actions: HTMLElement
+
+  constructor (contentEl: HTMLElement) {
+    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">确定</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">取消</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()
+      }
+    }
+  }
+}

src/components/editor-plugs/EmoticonsPlug.ts

@@ -1,150 +0,0 @@
-import './EmoticonsPlug.less'
-
-import Editor from '../Editor'
-import EditorPlug from './EditorPlug'
-import * as Utils from '~/src/lib/utils'
-
-type EmoticonListType = {
-  [grpName: string]: {
-    inputType: 'emoticon'|'image'
-    container: { [name: string]: string }
-  }
-}
-
-export default class EmoticonsPlug extends EditorPlug {
-  public el!: HTMLElement
-  public emoticons: EmoticonListType
-
-  public listWrapEl!: HTMLElement
-  public typesEl!: HTMLElement
-
-  constructor (public editor: Editor) {
-    super(editor)
-
-    this.emoticons = this.ctx.conf.emoticons
-    this.initEl()
-  }
-
-  initEl () {
-    this.el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
-
-    // 表情列表
-    this.listWrapEl = Utils.createElement(`<div class="atk-emoticons-list-wrap"></div>`)
-    this.el.append(this.listWrapEl)
-
-    Object.entries(this.emoticons).forEach(([key, item]) => {
-      const emoticonsEl = Utils.createElement(`<div class="atk-emoticons-list" style="display: none;"></div>`)
-      this.listWrapEl.append(emoticonsEl)
-      emoticonsEl.setAttribute('data-key', key)
-      emoticonsEl.setAttribute('data-input-type', item.inputType)
-      Object.entries(item.container).forEach(([name, content]) => {
-        const itemEl = Utils.createElement(`<span class="atk-emoticons-item"></span>`)
-        emoticonsEl.append(itemEl)
-        itemEl.setAttribute('title', name)
-        itemEl.setAttribute('data-content', content)
-        if (item.inputType === 'image') {
-          const imgEl = document.createElement('img')
-          imgEl.src = content
-          imgEl.alt = name
-          itemEl.append(imgEl)
-        } else {
-          itemEl.innerText = content
-        }
-      })
-    })
-
-    // 表情分类
-    this.typesEl = Utils.createElement(`<div class="atk-emoticons-types"></div>`)
-    this.el.append(this.typesEl)
-    Object.entries(this.emoticons).forEach(([key, item]) => {
-      const itemEl = Utils.createElement('<span />')
-      this.typesEl.append(itemEl)
-      itemEl.setAttribute('data-key', key)
-      itemEl.innerText = key
-    })
-
-    // 绑定切换分类按钮
-    this.typesEl.querySelectorAll('span').forEach((btn) => {
-      btn.addEventListener('click', (evt) => {
-        const btnEl = evt.currentTarget as HTMLElement
-        const key = btnEl.getAttribute('data-key')
-        if (key) this.openType(key)
-      })
-    })
-
-    // 默认打开第一个分类
-    if (Object.keys(this.emoticons).length > 0)
-      this.openType(Object.keys(this.emoticons)[0])
-
-    // 绑定点击表情
-    this.listWrapEl.querySelectorAll<HTMLElement>('.atk-emoticons-item').forEach((item: HTMLElement) => {
-      item.onclick = (evt) => {
-        const elem = evt.currentTarget as HTMLElement
-        const inputType = elem.closest('.atk-emoticons-list')!.getAttribute('data-input-type')
-
-        const title = elem.getAttribute('title')
-        const content = elem.getAttribute('data-content')
-        if (inputType === 'image') {
-          this.editor.insertContent(`:[${title}]`)
-        } else {
-          this.editor.insertContent(content || '')
-        }
-      }
-    })
-  }
-
-  openType (key: string) {
-    Array.from(this.listWrapEl.children).forEach((item) => {
-      const el = item as HTMLElement
-      if (el.getAttribute('data-key') !== key) {
-        el.style.display = 'none'
-      } else {
-        el.style.display = ''
-      }
-    })
-
-    this.typesEl.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
-    this.typesEl.querySelector(`span[data-key="${key}"]`)?.classList.add('active')
-
-    this.changeListHeight()
-  }
-
-  getName () {
-    return 'emoticons'
-  }
-
-  getBtnHtml () {
-    return '表情'
-  }
-
-  getEl () {
-    return this.el
-  }
-
-  changeListHeight () {
-    /* const listWrapHeight = Utils.getHeight(this.listWrapElem)
-    this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
-  }
-
-  onShow () {
-    // 延迟执行，防止无法读取高度
-    setTimeout(() => {
-      this.changeListHeight()
-    }, 30)
-  }
-
-  onHide () {
-    this.el.parentElement!.style.height = ''
-  }
-
-  public transEmoticonImageText (text: string) {
-    Object.entries(this.emoticons).forEach(([grpName, grp]) => {
-      if (grp.inputType !== 'image') return
-      Object.entries(grp.container).forEach(([name, imgSrc]) => {
-        text = text.split(`:[${name}]`).join(`![${name}](${imgSrc}) `) // replaceAll(...)
-      })
-    })
-
-    return text
-  }
-}

src/components/editor-plugs/PreviewPlug.ts

@@ -1,53 +0,0 @@
-import './PreviewPlug.less'
-
-import Editor from '../Editor'
-import EditorPlug from './EditorPlug'
-import * as Utils from '~/src/lib/utils'
-
-export default class PreviewPlug extends EditorPlug {
-  el!: HTMLElement
-  binded: boolean = false
-
-  constructor (editor: Editor) {
-    super(editor)
-
-    this.initEl()
-  }
-
-  initEl () {
-    this.el = Utils.createElement('<div class="atk-editor-plug-preview"></div>')
-    this.binded = false
-  }
-
-  getName () {
-    return 'preview'
-  }
-
-  getBtnHtml () {
-    return '预览 <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>'
-  }
-
-  getEl () {
-    return this.el
-  }
-
-  onShow () {
-    this.updateContent()
-    if (!this.binded) {
-      const event = () => {
-        this.updateContent()
-      }
-      this.editor.textareaEl.addEventListener('input', event)
-      this.editor.textareaEl.addEventListener('change', event)
-      this.binded = true
-    }
-  }
-
-  onHide () {}
-
-  updateContent () {
-    if (this.el.style.display !== 'none') {
-      this.el.innerHTML = this.editor.getContentMarked()
-    }
-  }
-}

src/components/editor-plugs/_example-plug.ts.txt

@@ -16,13 +16,8 @@ export default class PreviewPlug extends ArtalkContext {
     this.elem = Utils.createElement('<div class="atk-editor-plug-example"></div>')
   }
 
-  getName () {
-    return 'example'
-  }
-
-  getBtnHtml () {
-    return '栗子'
-  }
+  static Name = 'example'
+  static BtnHTML = '栗子'
 
   getEl () {
     return this.elem

src/components/editor-plugs/editor-plug.ts

@@ -1,20 +1,20 @@
-import Context from "~/src/Context"
-import Editor from "../Editor"
+import Context from "~/src/context"
+import Editor from "../editor"
 
 export default abstract class EditorPlug {
   protected editor: Editor
   protected ctx: Context
-  public abstract el: HTMLElement
+  public abstract $el: HTMLElement
 
   constructor (editor: Editor) {
     this.editor = editor
     this.ctx = editor.ctx
   }
 
-  public abstract initEl(): void
+  public static Name: string
+  public static BtnHTML: string
+
   public abstract getEl(): HTMLElement
-  public abstract getName(): string
-  public abstract getBtnHtml(): string
   public abstract onShow(): void
   public abstract onHide(): void
 }

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

@@ -0,0 +1,243 @@
+import './emoticons-plug.less'
+
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+import * as Utils from '~/src/lib/utils'
+import * as Ui from '~/src/lib/ui'
+import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
+
+type OwOFormatType = {
+  [key: string] : {
+    type: 'emoticon'|'emoji'|'image',
+    container: {icon: string, text: string}[]
+  }
+}
+
+export default class EmoticonsPlug extends EditorPlug {
+  public $el!: HTMLElement
+  public emoticons: EmoticonListData = []
+
+  public $listWrap!: HTMLElement
+  public $types!: HTMLElement
+
+  constructor (public editor: Editor) {
+    super(editor)
+
+    this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
+
+    this.init()
+  }
+
+  async init() {
+    // 数据处理
+    Ui.showLoading(this.$el)
+
+    if (typeof this.ctx.conf.emoticons === 'string') {
+      this.emoticons = await this.remoteLoad(this.ctx.conf.emoticons)
+    } else {
+      this.emoticons = this.ctx.conf.emoticons
+    }
+
+    this.checkConvertOwO()
+
+    if (!Array.isArray(this.emoticons)) {
+      Ui.setError(this.$el, "表情包数据必须为 Array 类型")
+      Ui.hideLoading(this.$el)
+      return
+    }
+
+    // 加载子内容
+    await Promise.all(this.emoticons.map(async (grp, index) => {
+      if (typeof grp === "string") {
+        const grpData = await this.remoteLoad(grp)
+        if (grpData) {
+          this.emoticons[index] = grpData
+        }
+      }
+    }))
+
+    Ui.hideLoading(this.$el)
+
+
+
+
+    this.solveNullKey()
+    this.solveSameKey()
+
+    // 初始化元素
+    this.initEmoticonsList()
+  }
+
+  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.$el)
+      Ui.setError(this.$el, `表情加载失败 ${String(err)}`)
+      return []
+    }
+  }
+
+  solveNullKey() {
+    this.emoticons.forEach((grp) => {
+      grp.items.forEach((item, index) => {
+        if (!item.key) item.key = `${grp.name} ${index+1}`
+      })
+    })
+  }
+
+  solveSameKey() {
+    const tmp: {[key: string]: number} = {}
+    this.emoticons.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]}`
+      })
+    })
+  }
+
+  checkConvertOwO() {
+    if (this.isOwOFormat(this.emoticons)) {
+      this.emoticons = this.convertOwO(this.emoticons as any)
+    }
+  }
+
+  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 }
+  }
+
+  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
+  }
+
+  initEmoticonsList () {
+    // 表情列表
+    this.$listWrap = Utils.createElement(`<div class="atk-emoticons-list-wrap"></div>`)
+    this.$el.append(this.$listWrap)
+
+    this.emoticons.forEach((grp, index) => {
+      const emoticonsEl = Utils.createElement(`<div class="atk-emoticons-list" style="display: none;"></div>`)
+      this.$listWrap.append(emoticonsEl)
+      emoticonsEl.setAttribute('data-index', String(index))
+      emoticonsEl.setAttribute('data-grp-name', grp.name)
+      emoticonsEl.setAttribute('data-type', grp.type)
+      grp.items.forEach((item) => {
+        const $item = Utils.createElement(`<span class="atk-emoticons-item"></span>`)
+        emoticonsEl.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 || '')
+          }
+        }
+      })
+    })
+
+    // 表情分类
+    this.$types = Utils.createElement(`<div class="atk-emoticons-types"></div>`)
+    this.$el.append(this.$types)
+    this.emoticons.forEach((grp, index) => {
+      const $item = Utils.createElement('<span />')
+      $item.innerText = grp.name
+      $item.setAttribute('data-index', String(index))
+      $item.onclick = () => (this.openType(index))
+      this.$types.append($item)
+    })
+
+    // 默认打开第一个分类
+    if (this.emoticons.length > 0)
+      this.openType(0)
+  }
+
+  openType (index: number) {
+    Array.from(this.$listWrap.children).forEach((item) => {
+      const el = item as HTMLElement
+      if (el.getAttribute('data-index') !== String(index)) {
+        el.style.display = 'none'
+      } else {
+        el.style.display = ''
+      }
+    })
+
+    this.$types.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
+    this.$types.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
+
+    this.changeListHeight()
+  }
+
+  static Name = 'emoticons'
+  static BtnHTML = '表情'
+
+  getEl () {
+    return this.$el
+  }
+
+  changeListHeight () {
+    /* const listWrapHeight = Utils.getHeight(this.$listWrapem)
+    this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
+  }
+
+  onShow () {
+    // 延迟执行，防止无法读取高度
+    setTimeout(() => {
+      this.changeListHeight()
+    }, 30)
+  }
+
+  onHide () {
+    this.$el.parentElement!.style.height = ''
+  }
+
+  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
+  }
+}

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

@@ -0,0 +1,48 @@
+import './preview-plug.less'
+
+import Editor from '../editor'
+import EditorPlug from './editor-plug'
+import * as Utils from '~/src/lib/utils'
+
+export default class PreviewPlug extends EditorPlug {
+  $el!: HTMLElement
+  binded: boolean = false
+
+  constructor (editor: Editor) {
+    super(editor)
+
+    this.initEl()
+  }
+
+  initEl () {
+    this.$el = Utils.createElement('<div class="atk-editor-plug-preview"></div>')
+    this.binded = false
+  }
+
+  static Name = 'preview'
+  static BtnHTML = '预览 <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>'
+
+  getEl () {
+    return this.$el
+  }
+
+  onShow () {
+    this.updateContent()
+    if (!this.binded) {
+      const event = () => {
+        this.updateContent()
+      }
+      this.editor.$textarea.addEventListener('input', event)
+      this.editor.$textarea.addEventListener('change', event)
+      this.binded = true
+    }
+  }
+
+  onHide () {}
+
+  updateContent () {
+    if (this.$el.style.display !== 'none') {
+      this.$el.innerHTML = this.editor.getContentMarked()
+    }
+  }
+}

src/components/editor.ts

@@ -1,36 +1,34 @@
 import '../style/editor.less'
 
-import Context from '../Context'
+import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import EditorHTML from './html/editor.html?raw'
 
-import EmoticonsPlug from './editor-plugs/EmoticonsPlug'
-import PreviewPlug from './editor-plugs/PreviewPlug'
+import EmoticonsPlug from './editor-plugs/emoticons-plug'
+import PreviewPlug from './editor-plugs/preview-plug'
 import { CommentData } from '~/types/artalk-data'
-import Api from '../lib/api'
+import Api from '../api'
 
 export default class Editor extends Component {
   private readonly LOADABLE_PLUG_LIST = [EmoticonsPlug, PreviewPlug]
   public plugList: { [name: string]: any } = {}
 
-  public el: HTMLElement
-
-  public headerEl: HTMLElement
-  public textareaWrapEl: HTMLElement
-  public textareaEl: HTMLTextAreaElement
-  public closeCommentEl: HTMLTextAreaElement
-  public plugWrapEl: HTMLElement
-  public bottomEl: HTMLElement
-  public bottomPartLeftEl: HTMLElement
-  public plugSwitcherWrapEl: HTMLElement
-  public bottomPartRightEl: HTMLElement
-  public submitBtn: HTMLButtonElement
-  public notifyWrapEl: HTMLElement
+  public $header: HTMLElement
+  public $textareaWrap: HTMLElement
+  public $textarea: HTMLTextAreaElement
+  public $closeComment: HTMLTextAreaElement
+  public $plugWrap: HTMLElement
+  public $bottom: HTMLElement
+  public $bottomPartLeft: HTMLElement
+  public $plugSwitcherWrap: HTMLElement
+  public $bottomPartRight: HTMLElement
+  public $submitBtn: HTMLButtonElement
+  public $notifyWrap: HTMLElement
 
   private replyComment: CommentData|null = null
-  private sendReplyEl: HTMLElement|null = null
+  private $sendReply: HTMLElement|null = null
 
   private get user () {
     return this.ctx.user
@@ -39,19 +37,19 @@ export default class Editor extends Component {
   constructor (ctx: Context) {
     super(ctx)
 
-    this.el = Utils.createElement(EditorHTML)
+    this.$el = Utils.createElement(EditorHTML)
 
-    this.headerEl = this.el.querySelector('.atk-editor-header')!
-    this.textareaWrapEl = this.el.querySelector('.atk-editor-textarea-wrap')!
-    this.textareaEl = this.el.querySelector('.atk-editor-textarea')!
-    this.closeCommentEl = this.el.querySelector('.atk-close-comment')!
-    this.plugWrapEl = this.el.querySelector('.atk-editor-plug-wrap')!
-    this.bottomEl = this.el.querySelector('.atk-editor-bottom')!
-    this.bottomPartLeftEl = this.el.querySelector('.atk-editor-bottom-part.atk-left')!
-    this.plugSwitcherWrapEl = this.el.querySelector('.atk-editor-plug-switcher-wrap')!
-    this.bottomPartRightEl = this.el.querySelector('.atk-editor-bottom-part.atk-right')!
-    this.submitBtn = this.el.querySelector('.atk-send-btn')!
-    this.notifyWrapEl = this.el.querySelector('.atk-editor-notify-wrap')!
+    this.$header = this.$el.querySelector('.atk-editor-header')!
+    this.$textareaWrap = this.$el.querySelector('.atk-editor-textarea-wrap')!
+    this.$textarea = this.$el.querySelector('.atk-editor-textarea')!
+    this.$closeComment = this.$el.querySelector('.atk-close-comment')!
+    this.$plugWrap = this.$el.querySelector('.atk-editor-plug-wrap')!
+    this.$bottom = this.$el.querySelector('.atk-editor-bottom')!
+    this.$bottomPartLeft = this.$el.querySelector('.atk-editor-bottom-part.atk-left')!
+    this.$plugSwitcherWrap = this.$el.querySelector('.atk-editor-plug-switcher-wrap')!
+    this.$bottomPartRight = this.$el.querySelector('.atk-editor-bottom-part.atk-right')!
+    this.$submitBtn = this.$el.querySelector('.atk-send-btn')!
+    this.$notifyWrap = this.$el.querySelector('.atk-editor-notify-wrap')!
 
     this.initLocalStorage()
     this.initHeader()
@@ -60,12 +58,12 @@ export default class Editor extends Component {
     this.initBottomPart()
 
     // 监听事件
-    this.ctx.addEventListener('editor-open-comment', () => (this.openComment()))
-    this.ctx.addEventListener('editor-close-comment', () => (this.closeComment()))
-    this.ctx.addEventListener('editor-reply', (commentData) => (this.setReply(commentData)))
-    this.ctx.addEventListener('editor-show-loading', () => (Ui.showLoading(this.el)))
-    this.ctx.addEventListener('editor-hide-loading', () => (Ui.hideLoading(this.el)))
-    this.ctx.addEventListener('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
+    this.ctx.on('editor-open', () => (this.open()))
+    this.ctx.on('editor-close', () => (this.close()))
+    this.ctx.on('editor-reply', (commentData) => (this.setReply(commentData)))
+    this.ctx.on('editor-show-loading', () => (Ui.showLoading(this.$el)))
+    this.ctx.on('editor-hide-loading', () => (Ui.hideLoading(this.$el)))
+    this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
   }
 
   initLocalStorage () {
@@ -74,7 +72,7 @@ export default class Editor extends Component {
       this.showNotify('已自动恢复', 'i')
       this.setContent(localContent)
     }
-    this.textareaEl.addEventListener('input', () => {
+    this.$textarea.addEventListener('input', () => {
       this.saveContent()
     })
   }
@@ -91,7 +89,7 @@ export default class Editor extends Component {
   }
 
   getInputEl (field: string) {
-    const inputEl = this.headerEl.querySelector<HTMLInputElement>(`[name="${field}"]`)
+    const inputEl = this.$header.querySelector<HTMLInputElement>(`[name="${field}"]`)
     return inputEl
   }
 
@@ -127,7 +125,7 @@ export default class Editor extends Component {
           }
 
           // 未读消息更新
-          this.ctx.dispatchEvent('unread-update', { notifies: data.unread, })
+          this.ctx.trigger('unread-update', { notifies: data.unread, })
 
           // 若用户为管理员，执行登陆操作
           if (this.user.checkHasBasicUserInfo() && !data.is_login && data.user && data.user.is_admin) {
@@ -150,7 +148,7 @@ export default class Editor extends Component {
   }
 
   showLoginDialog () {
-    this.ctx.dispatchEvent('checker-admin', {
+    this.ctx.trigger('checker-admin', {
       onSuccess: () => {
       }
     })
@@ -158,7 +156,7 @@ export default class Editor extends Component {
 
   saveUser () {
     this.user.save()
-    this.ctx.dispatchEvent('user-changed')
+    this.ctx.trigger('user-changed', this.ctx.user.data)
   }
 
   saveContent () {
@@ -167,10 +165,10 @@ export default class Editor extends Component {
 
   initTextarea () {
     // 占位符
-    this.textareaEl.placeholder = this.ctx.conf.placeholder || ''
+    this.$textarea.placeholder = this.ctx.conf.placeholder || ''
 
     // 修复按下 Tab 输入的内容
-    this.textareaEl.addEventListener('keydown', (e) => {
+    this.$textarea.addEventListener('keydown', (e) => {
       const keyCode = e.keyCode || e.which
 
       if (keyCode === 9) {
@@ -180,56 +178,59 @@ export default class Editor extends Component {
     })
 
     // 输入框高度随内容而变化
-    this.textareaEl.addEventListener('input', (evt) => {
+    this.$textarea.addEventListener('input', (evt) => {
       this.adjustTextareaHeight()
     })
   }
 
   adjustTextareaHeight () {
-    const diff = this.textareaEl.offsetHeight - this.textareaEl.clientHeight
-    this.textareaEl.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
-    this.textareaEl.style.height = `${this.textareaEl.scrollHeight + diff}px`
+    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`
   }
 
   openedPlugName: string|null = null
 
   initEditorPlug () {
     this.plugList = {}
-    this.plugWrapEl.innerHTML = ''
-    this.plugWrapEl.style.display = 'none'
+    this.$plugWrap.innerHTML = ''
+    this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
-    this.plugSwitcherWrapEl.innerHTML = ''
+    this.$plugSwitcherWrap.innerHTML = ''
 
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      const plug = new PlugObj(this)
-      this.plugList[plug.getName()] = plug
-
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${plug.getBtnHtml()}</span>`)
-      this.plugSwitcherWrapEl.appendChild(btnElem)
+      const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${PlugObj.BtnHTML}</span>`)
+      this.$plugSwitcherWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
-        this.plugSwitcherWrapEl.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
+        let plug = this.plugList[PlugObj.Name]
+        if (!plug) {
+          plug = new PlugObj(this)
+          this.plugList[PlugObj.Name] = plug
+        }
+
+        this.$plugSwitcherWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
 
         // 若点击已打开的，则收起
-        if (plug.getName() === this.openedPlugName) {
+        if (PlugObj.Name === this.openedPlugName) {
           plug.onHide()
-          this.plugWrapEl.style.display = 'none'
+          this.$plugWrap.style.display = 'none'
           this.openedPlugName = null
           return
         }
 
-        if (this.plugWrapEl.querySelector(`[data-plug-name="${plug.getName()}"]`) === null) {
+        if (this.$plugWrap.querySelector(`[data-plug-name="${PlugObj.Name}"]`) === null) {
           // 需要初始化
           const plugEl = plug.getEl()
-          plugEl.setAttribute('data-plug-name', plug.getName())
+          plugEl.setAttribute('data-plug-name', PlugObj.Name)
           plugEl.style.display = 'none'
-          this.plugWrapEl.appendChild(plugEl)
+          this.$plugWrap.appendChild(plugEl)
         }
 
-        (Array.from(this.plugWrapEl.children) as HTMLElement[]).forEach((plugItemEl: HTMLElement) => {
+        (Array.from(this.$plugWrap.children) as HTMLElement[]).forEach((plugItemEl: HTMLElement) => {
           const plugItemName = plugItemEl.getAttribute('data-plug-name')!
-          if (plugItemName === plug.getName()) {
+          if (plugItemName === PlugObj.Name) {
             plugItemEl.style.display = ''
             this.plugList[plugItemName].onShow()
           } else {
@@ -238,8 +239,8 @@ export default class Editor extends Component {
           }
         })
 
-        this.plugWrapEl.style.display = ''
-        this.openedPlugName = plug.getName()
+        this.$plugWrap.style.display = ''
+        this.openedPlugName = PlugObj.Name
 
         btnElem.classList.add('active')
       })
@@ -248,33 +249,33 @@ export default class Editor extends Component {
 
   /** 关闭编辑器插件 */
   closePlug () {
-    this.plugWrapEl.innerHTML = ''
-    this.plugWrapEl.style.display = 'none'
+    this.$plugWrap.innerHTML = ''
+    this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
   }
 
   insertContent (val: string) {
     if ((document as any).selection) {
-      this.textareaEl.focus();
+      this.$textarea.focus();
       (document as any).selection.createRange().text = val
-      this.textareaEl.focus()
-    } else if (this.textareaEl.selectionStart || this.textareaEl.selectionStart === 0) {
-      const sStart = this.textareaEl.selectionStart
-      const sEnd = this.textareaEl.selectionEnd
-      const sT = this.textareaEl.scrollTop
-      this.setContent(this.textareaEl.value.substring(0, sStart) + val + this.textareaEl.value.substring(sEnd, this.textareaEl.value.length))
-      this.textareaEl.focus()
-      this.textareaEl.selectionStart = sStart + val.length
-      this.textareaEl.selectionEnd = sStart + val.length
-      this.textareaEl.scrollTop = sT
+      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.textareaEl.focus()
-      this.textareaEl.value += val
+      this.$textarea.focus()
+      this.$textarea.value += val
     }
   }
 
   setContent (val: string) {
-    this.textareaEl.value = val
+    this.$textarea.value = val
     this.saveContent()
     if (!!this.plugList && !!this.plugList.preview) {
       this.plugList.preview.updateContent()
@@ -300,7 +301,7 @@ export default class Editor extends Component {
   }
 
   getContentOriginal () {
-    return this.textareaEl.value || '' // Tip: !!"0" === true
+    return this.$textarea.value || '' // Tip: !!"0" === true
   }
 
   getContentMarked () {
@@ -314,7 +315,7 @@ export default class Editor extends Component {
 
   initReply () {
     this.replyComment = null
-    this.sendReplyEl = null
+    this.$sendReply = null
   }
 
   setReply (commentData: CommentData) {
@@ -322,31 +323,31 @@ export default class Editor extends Component {
       this.cancelReply()
     }
 
-    if (this.sendReplyEl === null) {
-      this.sendReplyEl = Utils.createElement('<div class="atk-send-reply-wrap"><div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div></div>');
-      this.sendReplyEl.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
-      this.sendReplyEl.addEventListener('click', () => {
+    if (this.$sendReply === null) {
+      this.$sendReply = Utils.createElement('<div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div>');
+      this.$sendReply.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
+      this.$sendReply.addEventListener('click', () => {
         this.cancelReply()
       })
-      this.textareaWrapEl.prepend(this.sendReplyEl)
+      this.$textareaWrap.append(this.$sendReply)
     }
     this.replyComment = commentData
-    Ui.scrollIntoView(this.el)
-    this.textareaEl.focus()
+    Ui.scrollIntoView(this.$el)
+    this.$textarea.focus()
   }
 
   cancelReply () {
-    if (this.sendReplyEl !== null) {
-      this.sendReplyEl.remove()
-      this.sendReplyEl = null
+    if (this.$sendReply !== null) {
+      this.$sendReply.remove()
+      this.$sendReply = null
     }
     this.replyComment = null
   }
 
   initSubmit () {
-    this.submitBtn.innerText = this.ctx.conf.sendBtn || 'Send'
+    this.$submitBtn.innerText = this.ctx.conf.sendBtn || 'Send'
 
-    this.submitBtn.addEventListener('click', (evt) => {
+    this.$submitBtn.addEventListener('click', (evt) => {
       const btnEl = evt.currentTarget
       this.submit()
     })
@@ -354,11 +355,13 @@ export default class Editor extends Component {
 
   async submit () {
     if (this.getContent().trim() === '') {
-      this.textareaEl.focus()
+      this.$textarea.focus()
       return
     }
 
-    Ui.showLoading(this.el)
+    this.ctx.trigger('editor-submit')
+
+    Ui.showLoading(this.$el)
 
     try {
       const nComment = await new Api(this.ctx).add({
@@ -366,42 +369,53 @@ export default class Editor extends Component {
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,
-        rid: this.replyComment === null ? 0 : this.replyComment.id
+        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
       })
 
-      this.ctx.dispatchEvent('list-insert', nComment)
+      // 回复不同页面的评论
+      if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
+        window.open(`${this.replyComment.page_key}#atk-comment-${nComment.id}`)
+      }
+
+      this.ctx.trigger('list-insert', nComment)
       this.clearEditor() // 清空编辑器
+      this.ctx.trigger('editor-submitted')
     } catch (err: any) {
+      console.error(err)
       this.showNotify(`评论失败，${err.msg || String(err)}`, 'e')
+      return
     } finally {
-      Ui.hideLoading(this.el)
+      Ui.hideLoading(this.$el)
     }
   }
 
   showNotify (msg: string, type) {
-    Ui.showNotify(this.notifyWrapEl, msg, type)
+    Ui.showNotify(this.$notifyWrap, msg, type)
   }
 
   /** 关闭评论 */
-  closeComment () {
-    this.closeCommentEl.style.display = ''
+  close () {
+    this.$closeComment.style.display = ''
 
     if (!this.user.data.isAdmin) {
-      this.textareaEl.style.display = 'none'
+      this.$textarea.style.display = 'none'
       this.closePlug()
-      this.bottomEl.style.display = 'none'
+      this.$bottom.style.display = 'none'
     } else {
       // 管理员一直打开评论
-      this.textareaEl.style.display = ''
-      this.bottomEl.style.display = ''
+      this.$textarea.style.display = ''
+      this.$bottom.style.display = ''
     }
   }
 
   /** 打开评论 */
-  openComment () {
-    this.closeCommentEl.style.display = 'none'
-    this.textareaEl.style.display = ''
-    this.bottomEl.style.display = ''
+  open () {
+    this.$closeComment.style.display = 'none'
+    this.$textarea.style.display = ''
+    this.$bottom.style.display = ''
   }
 }
 

src/components/html/comment.html

@@ -1,18 +1,14 @@
 <div class="atk-comment-wrap" data-comment-id="">
   <div class="atk-comment">
 
-    <div class="atk-avatar">
-      <a target="_blank"><img src=""></a>
-    </div>
+    <div class="atk-avatar"></div>
 
     <div class="atk-comment-main">
 
       <div class="atk-header">
-        <span class="atk-nick"><a target="_blank"></a></span>
+        <span class="atk-nick"></span>
         <span class="atk-badge"></span>
         <span class="atk-date"></span>
-        <span class="atk-ua ua-browser"></span>
-        <span class="atk-ua ua-os"></span>
       </div>
 
       <div class="atk-body">

src/components/html/list.html

@@ -6,7 +6,6 @@
     </div>
     <div class="atk-right-action">
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>
-      <span data-action="open-admin-panel" class="atk-hide atk-on" atk-only-admin-show>控制台</span>
       <span data-action="open-sidebar" class="atk-hide atk-on">
         <span class="atk-unread-badge" style="display: none;"></span>
         通知中心

src/components/html/sidebar.html

@@ -1,8 +1,22 @@
 <div class="atk-sidebar">
   <div class="atk-sidebar-inner">
-    <div class="atk-sidebar-title-wrap"><span class="atk-title-item atk-active"></span></div>
-    <div class="atk-sidebar-close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg></div>
-    <div class="atk-sidebar-actions"></div>
-    <div class="atk-sidebar-content"></div>
+    <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"><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>

src/components/item-text-editor.ts

@@ -0,0 +1,136 @@
+import '../style/item-text-editor.less'
+
+import * as Utils from '../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()
+  }
+}

src/components/layer.ts

@@ -0,0 +1,135 @@
+import Context from '../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
+
+  private bodyStyleOrgOverflow = ''
+  private bodyStyleOrgPaddingRight = ''
+
+  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
+  }
+
+  private static hideTimeoutList: number[] = []
+
+  show () {
+    Layer.hideTimeoutList.forEach(item => {
+      clearTimeout(item)
+    })
+    Layer.hideTimeoutList = []
+
+    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.bodyStyleOrgOverflow = document.body.style.overflow
+    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight
+    document.body.style.overflow = 'hidden'
+
+    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
+  }
+
+  hide () {
+    Layer.hideTimeoutList.push(window.setTimeout(() => {
+      this.$wrap.style.display = 'none'
+      // body style 禁止滚动解除
+      document.body.style.overflow = this.bodyStyleOrgOverflow
+      document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
+    }, 450))
+
+    this.$wrap.classList.add('atk-fade-out')
+    Layer.hideTimeoutList.push(window.setTimeout(() => {
+      this.$wrap.style.display = 'none'
+      this.$wrap.classList.remove('atk-fade-out')
+    }, 200))
+
+    this.$el.style.display = 'none'
+  }
+
+  setMaskClickHide (enable: boolean) {
+    this.maskClickHideEnable = enable
+  }
+
+  /** 销毁 - 无动画 */
+  disposeNow () {
+    document.body.style.overflow = ''
+    this.$el.remove()
+    // 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 }
+}

src/components/list-lite.ts

@@ -0,0 +1,569 @@
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Api from '../api'
+import Comment from './comment'
+import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
+import Pagination from './pagination'
+import ReadMoreBtn from './read-more-btn'
+
+export default class ListLite extends Component {
+  private $parent: HTMLElement
+
+  private $commentsWrap: HTMLElement
+  public comments: Comment[] = []
+
+  public data?: ListData
+  private pageSize: number = 15 // 每次请求获取量
+  private offset: number = 0
+  public type?: 'all'|'mentions'|'mine'|'pending'
+
+  public noCommentText: string
+  public renderComment?: (comment: Comment) => void
+  public paramsEditor?: (params: any) => void
+  public onAfterLoad?: (data: ListData) => void
+
+  private isLoading: boolean = false
+  public isFirstLoad = true
+
+  public flatMode?: boolean
+
+  public pageMode: 'pagination'|'read-more' = 'pagination'
+  public pagination?: Pagination
+  public readMoreBtn?: ReadMoreBtn
+  public autoLoadScrollEvent?: any
+  public autoLoadListenerAt?: HTMLElement
+
+  public unread: NotifyData[] = []
+  public unreadHighlight = false
+
+  constructor (ctx: Context, $parent: HTMLElement) {
+    super(ctx)
+
+    this.$parent = $parent
+    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.pageSize = this.conf.pagination ? (this.conf.pagination.pageSize || this.pageSize) : this.pageSize
+
+    this.noCommentText = this.conf.noComment || '无评论'
+
+    // 评论时间自动更新
+    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)))
+      })
+    }, 30 * 1000) // 30s 更新一次
+
+    this.ctx.on('unread-update', (data) => (this.updateUnread(data.notifies)))
+  }
+
+  public async reqComments(offset: number = 0) {
+    if (offset === 0 && this.pageMode !== 'pagination') { this.clearAllComments() }
+
+    // set loading
+    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('comments-load')
+
+    let listData: ListData
+    try {
+      listData = await new Api(this.ctx).get(offset, this.type, this.flatMode, this.paramsEditor)
+    } catch (e: any) {
+      this.onError(e.msg || String(e))
+      throw e
+    } finally {
+      hideLoading()
+    }
+
+    // version check
+    if (this.ctx.conf.versionCheck) {
+      const needUpdate = this.apiVersionCheck(listData.api_version || {})
+      if (needUpdate) return
+    }
+
+    // load data
+    this.offset = offset
+
+    try {
+      this.onLoad(listData, offset)
+
+      if (this.onAfterLoad) {
+        this.onAfterLoad(listData)
+      }
+    } catch (e: any) {
+      this.onError(String(e))
+      throw e
+    } finally {
+      hideLoading()
+    }
+  }
+
+  public onLoad(data: ListData, offset: number) {
+    Ui.setError(this.$el, null)
+
+    if (this.pageMode === 'pagination') {
+      this.clearAllComments()
+    }
+
+    this.data = data
+    this.importComments(data.comments)
+
+    // onLoad 时初始化
+    if (this.isFirstLoad) {
+      this.onLoadInit()
+    }
+
+    if (this.pageMode === 'pagination') {
+      this.pagination!.update(offset, this.data?.total_parents || 0)
+    }
+    if (this.pageMode === 'read-more') {
+      if (this.hasMoreComments) this.readMoreBtn!.show()
+      else this.readMoreBtn!.hide()
+    }
+
+    this.ctx.trigger('unread-update', { notifies: data.unread || [] })
+
+    this.isFirstLoad = false
+  }
+
+  /** 初始化加载更多 */
+  onLoadInit() {
+    if (this.autoLoadScrollEvent) {
+      const at = this.autoLoadListenerAt || document
+      at.removeEventListener('scroll', this.autoLoadScrollEvent)
+    }
+
+    if (this.pageMode === 'read-more') {
+      // 阅读更多按钮
+      const readMoreBtn = new ReadMoreBtn({
+        pageSize: this.pageSize,
+        total: 0,
+        onClick: async () => {
+          const offset = this.offset + this.pageSize
+          await this.reqComments(offset)
+        },
+      })
+      if (this.readMoreBtn) this.readMoreBtn.$el.replaceWith(readMoreBtn.$el)
+      else this.$el.append(readMoreBtn.$el)
+      this.readMoreBtn = readMoreBtn
+
+      // 滚动到底部自动加载
+      if (this.conf.pagination?.autoLoad) {
+        this.autoLoadScrollEvent = () => {
+          if (this.pageMode !== 'read-more') return
+          if (!this.hasMoreComments) 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.autoLoadListenerAt)) {
+            // 加载更多
+            this.readMoreBtn!.click()
+          }
+        }
+        const at = this.autoLoadListenerAt || document
+        at.addEventListener('scroll', this.autoLoadScrollEvent)
+      }
+    } else if (this.pageMode === 'pagination') {
+      // 分页条
+      const pagination = new Pagination(this.parentCommentsCount, {
+        pageSize: this.pageSize,
+        onChange: async (offset) => {
+          await this.reqComments(offset)
+          // 滚动到第一个评论的位置
+          if (this.$parent) {
+            let topPos = 0
+            if (!this.autoLoadListenerAt && this.$parent) {
+              topPos = Utils.getOffset(this.$parent).top
+            }
+            const at = this.autoLoadListenerAt || window
+            at.scroll({
+              top: topPos,
+              left: 0,
+            })
+          }
+        }
+      })
+      if (this.pagination) this.pagination.$el.replaceWith(pagination.$el)
+      else this.$el.append(pagination.$el)
+      this.pagination = pagination
+    }
+  }
+
+  public onError(msg: any) {
+    msg = String(msg)
+    console.error(msg)
+    if (this.isFirstLoad || this.pageMode === 'pagination') {
+      const errEl = Utils.createElement(`<span>${msg}，无法获取评论列表数据<br/></span>`)
+      const retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
+      retryBtn.onclick = () => {
+        this.reqComments(this.offset)
+      }
+      errEl.appendChild(retryBtn)
+      const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
+      adminBtn.onclick = () => {
+        this.ctx.trigger('sidebar-show')
+      }
+      if (!this.ctx.user.data.isAdmin) {
+        adminBtn.classList.add('atk-hide')
+      }
+      errEl.appendChild(adminBtn)
+      Ui.setError(this.$el, errEl)
+    } else {
+      this.readMoreBtn?.showErr(`获取失败`)
+    }
+  }
+
+  /** 刷新界面 */
+  public refreshUI() {
+    // 评论为空界面
+    const noComment = this.comments.length <= 0
+    let noCommentEl = this.$commentsWrap.querySelector<HTMLElement>('.atk-list-no-comment')
+
+    if (noComment) {
+      if (!noCommentEl) {
+        noCommentEl = Utils.createElement('<div class="atk-list-no-comment"></div>')
+        this.$commentsWrap.appendChild(noCommentEl)
+        noCommentEl.innerHTML = this.noCommentText
+      }
+    }
+
+    if (!noComment && noCommentEl)
+      noCommentEl.remove()
+
+    // 仅管理员显示控制
+    this.ctx.trigger('check-admin-show-el')
+  }
+
+  /** 创建新评论 */
+  public createComment(data: CommentData) {
+    const comment = new Comment(this.ctx, data)
+    comment.afterRender = () => {
+      if (this.renderComment) this.renderComment(comment)
+    }
+    comment.onDelete = (c) => {
+      this.deleteComment(c)
+      this.refreshUI()
+    }
+
+    return comment
+  }
+
+  /** 导入评论 · 通过请求数据 */
+  public importComments(rawData: CommentData[]) {
+    // 查找并导入所有子评论
+    const queryImportChildren = (parentC: Comment) => {
+      const children = rawData.filter(o => o.rid === parentC.data.id)
+      if (children.length === 0) return
+
+      children.forEach((itemData: CommentData) => {
+        itemData.is_allow_reply = parentC.data.is_allow_reply
+        const childC = this.createComment(itemData)
+        childC.render()
+        parentC.putChild(childC)
+        queryImportChildren(childC) // 递归
+      })
+    }
+
+    // 开始处理 rawData
+    if (!this.flatMode) {
+      rawData.filter((o) => o.rid === 0).forEach((rootCommentData: CommentData) => {
+        if (rootCommentData.is_collapsed) rootCommentData.is_allow_reply = false
+        const rootComment = this.createComment(rootCommentData)
+        rootComment.render()
+        this.comments.push(rootComment) // 将评论导入 comments 总表中
+
+        this.$commentsWrap.appendChild(rootComment.getEl())
+        rootComment.playFadeInAnim()
+
+        queryImportChildren(rootComment)
+      })
+    } else {
+      // 平铺模式
+      rawData.forEach((commentData: CommentData) => {
+        this.putCommentFlatMode(commentData, rawData, 'append')
+      })
+    }
+
+    this.eachComment(this.comments, (c) => {
+      if (c.getIsRoot()) this.checkMoreHide(c)
+    })
+
+    this.refreshUI()
+    this.ctx.trigger('comments-loaded')
+  }
+
+  /** 导入评论 · 平铺模式 */
+  private putCommentFlatMode(commentItem: CommentData, comments: CommentData[], insertMode: 'append'|'prepend') {
+    if (commentItem.is_collapsed) commentItem.is_allow_reply = false
+    const comment = this.createComment(commentItem)
+    if (commentItem.rid !== 0) {
+      const rComment = comments.find(o => o.id === commentItem.rid)
+      if (rComment) comment.replyTo = rComment
+    }
+    comment.render()
+
+    // 将评论导入 comments 总表中
+    if (insertMode === 'append') {
+      this.comments.push(comment)
+    } else {
+      this.comments.unshift(comment)
+    }
+
+    if (commentItem.visible) {
+      if (insertMode === 'append') {
+        this.$commentsWrap.appendChild(comment.getEl())
+      } else {
+        this.$commentsWrap.prepend(comment.getEl())
+      }
+      comment.playFadeInAnim()
+    }
+
+    this.checkMoreHide(comment)
+  }
+
+  /** 插入评论 · 首部添加 */
+  public insertComment(commentData: CommentData) {
+    if (!this.flatMode) {
+      const comment = this.createComment(commentData)
+      comment.render()
+
+      if (commentData.rid === 0) {
+        this.$commentsWrap.prepend(comment.getEl())
+        this.comments.unshift(comment)
+        this.checkMoreHide(comment)
+      } else {
+        // 子评论
+        const parent = this.findComment(commentData.rid)
+        if (parent) {
+          parent.putChild(comment)
+          if (parent.$children) this.removeHideMore(parent.$children)
+          this.eachComment(parent.children, (c) => {
+            this.checkMoreHide(c)
+          })
+        }
+      }
+
+      Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
+      comment.playFadeInAnim() // 播放评论渐出动画
+    } else {
+      this.putCommentFlatMode(commentData, this.comments.map(c => c.data), 'prepend')
+    }
+
+    if (this.data) this.data.total += 1 // 评论数增加 1
+    this.refreshUI() // 更新 list 界面
+    this.ctx.trigger('comments-loaded')
+  }
+
+  checkMoreHide(c: Comment) {
+    // 子评论内容过多隐藏
+    this.checkMoreHideEl(c, 'children')
+
+    // 评论内容过多隐藏
+    this.checkMoreHideEl(c, 'content')
+
+    // 平铺模式回复内容
+    if (c.$replyTo) this.checkMoreHideEl(c, 'replyTo')
+  }
+
+  /** 内容过多，折叠显示 */
+  public checkMoreHideEl(comment: Comment, area: 'children'|'content'|'replyTo', allowHeight = 300) {
+    const childrenH = this.ctx.conf.heightLimit?.children
+    const contentH = this.ctx.conf.heightLimit?.content
+
+    if (area === 'children' && (!childrenH)) return
+    if ((area === 'content' || area === 'replyTo') && (!contentH)) return
+
+    // 限高
+    if (area === 'children') allowHeight = childrenH || 300
+    else allowHeight = contentH || 200
+
+    // target 准备
+    let $target!: HTMLElement
+    if (area === 'children') $target = comment.$children!
+    else if (area === 'content') $target = comment.$content!
+    else if (area === 'replyTo') $target = comment.$replyTo!
+    if (!$target) return
+
+    // 阅读更多按钮
+    let $hideMoreOpenBtn = $target.querySelector<HTMLElement>('.atk-more-hide-open-btn')
+
+    const removeHideMore = () => {
+      $target.classList.remove('atk-comment-more-hide')
+      if ($hideMoreOpenBtn) $hideMoreOpenBtn.remove()
+      $target.style.height = ''
+      $target.style.overflow = ''
+    }
+
+    if (Utils.getHeight($target) > allowHeight) {
+      //console.log('内容过多，需要折叠', $target)
+      $target.classList.add('atk-comment-more-hide')
+      $target.style.height = `${allowHeight}px`
+      $target.style.overflow = 'hidden'
+      if (!$hideMoreOpenBtn) {
+        $hideMoreOpenBtn = Utils.createElement(`<div class="atk-more-hide-open-btn">阅读更多</span>`)
+        $hideMoreOpenBtn.onclick = (e) => {
+          e.stopPropagation()
+          removeHideMore()
+          // 阅读更多过后，再检查隐藏
+          if (comment.getIsRoot()) {
+            const children = comment.getChildren()
+            if (children.length > 1) {
+              this.eachComment(children, (c) => {
+                this.checkMoreHideEl(c, 'content', contentH || 200)
+              })
+            }
+          }
+        }
+        $target.append($hideMoreOpenBtn)
+      }
+    }
+  }
+
+  public removeHideMore($target: HTMLElement) {
+    const $hideMoreOpenBtn = $target.querySelector<HTMLElement>('.atk-more-hide-open-btn')
+    $target.classList.remove('atk-comment-more-hide')
+    if ($hideMoreOpenBtn) $hideMoreOpenBtn.remove()
+    $target.style.height = ''
+    $target.style.overflow = ''
+  }
+
+  /** 获取评论总数 (包括子评论) */
+  get commentsCount(): number {
+    return Number(this.data?.total) || 0
+  }
+
+  get parentCommentsCount() {
+    return Number(this.data?.total_parents) || 0
+  }
+
+  /** 是否还有更多的评论 */
+  get hasMoreComments(): boolean {
+    if (!this.data) return false
+    return this.data.total_parents > (this.offset + this.pageSize)
+  }
+
+  /** 遍历操作 Comment (包括子评论) */
+  public eachComment(commentList: Comment[], action: (comment: Comment, levelList: Comment[]) => boolean|void) {
+    if (commentList.length === 0) return
+    commentList.every((item) => {
+      if (action(item, commentList) === false) return false
+      this.eachComment(item.getChildren(), action)
+      return true
+    })
+  }
+
+  /** 查找评论项 */
+  public findComment(id: number, src?: Comment[]): Comment|null {
+    if (!src) src = this.comments
+    let comment: Comment|null = null
+    this.eachComment(src, (item) => {
+      if (item.data.id === id) {
+        comment = item
+        return false
+      }
+      return true
+    })
+
+    return comment
+  }
+
+  /** 获取评论总数 */
+  public getCommentCount(): number {
+    let count = 0
+    this.eachComment(this.comments, () => { count++ })
+    return count
+  }
+
+  /** 删除评论 */
+  public deleteComment(comment: number|Comment) {
+    let findComment: Comment|null
+    if (typeof comment === 'number') {
+      findComment = this.findComment(comment)
+      if (!findComment) throw Error(`未找到评论 ${comment}`)
+    } else findComment = comment
+
+    findComment.getEl().remove()
+    this.eachComment(this.comments, (item, levelList) => {
+      if (item === findComment) {
+        levelList.splice(levelList.indexOf(item), 1)
+        return false
+      }
+      return true
+    })
+
+    this.refreshUI()
+  }
+
+  /** 清空所有评论 */
+  public clearAllComments() {
+    this.$commentsWrap.innerHTML = ''
+    this.data = undefined
+    this.comments = []
+  }
+
+  public updateUnread(notifies: NotifyData[]) {
+    this.unread = notifies
+
+    // 高亮评论
+    if (this.unreadHighlight) {
+      this.eachComment(this.comments, (comment) => {
+        const notify = this.unread.find(o => o.comment_id === comment.data.id)
+        if (notify) {
+          comment.setUnread(true)
+          comment.setOpenURL(notify.read_link)
+          comment.openEvt = () => {
+            this.unread = this.unread.filter(o => o.comment_id !== comment.data.id) // remove
+            this.ctx.trigger('unread-update', {
+              notifies: this.unread
+            })
+          }
+        } else {
+          comment.setUnread(false)
+        }
+      })
+    }
+  }
+
+  public apiVersionCheck(versionData: ApiVersionData): boolean {
+    const needVersion = versionData?.fe_min_version || '0.0.0'
+    const needUpdate = Utils.versionCompare(needVersion, ARTALK_VERSION) === 1
+    if (needUpdate) {
+      // 需要更新
+      const errEl = Utils.createElement(`<div>前端 Artalk 版本已过时，请更新以获得完整体验<br/>`
+      + `若您是站点管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获取帮助`
+      + `<br/><br/>`
+      + `<span style="color: var(--at-color-meta);">前端版本 ${ARTALK_VERSION}，需求版本 >= ${needVersion}</span><br/><br/>`
+      + `</div>`)
+      const ignoreBtn = Utils.createElement('<span style="cursor:pointer;">忽略</span>')
+      ignoreBtn.onclick = () => {
+        Ui.setError(this.ctx, null)
+        this.ctx.conf.versionCheck = false
+        this.reqComments(0)
+      }
+      errEl.append(ignoreBtn)
+      Ui.setError(this.ctx, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+    }
+
+    return needUpdate
+  }
+}

src/components/list.ts

@@ -0,0 +1,172 @@
+import '../style/list.less'
+
+import Context from '../context'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Api from '../api'
+import ListHTML from './html/list.html?raw'
+import ListLite from './list-lite'
+import { ListData } from '~/types/artalk-data'
+
+export default class List extends ListLite {
+  private $closeCommentBtn!: HTMLElement
+  private $openSidebarBtn!: HTMLElement
+  private $unreadBadge!: HTMLElement
+
+  constructor (ctx: Context) {
+    const el = Utils.createElement(ListHTML)
+
+    super(ctx, el)
+
+    // 把 listLite $el 变为子元素
+    el.querySelector('.atk-list-body')!.append(this.$el)
+    this.$el = el
+
+    // 平铺模式
+    let flatMode = false
+    if (this.ctx.conf.flatMode === 'auto') {
+      if (window.matchMedia("(max-width: 768px)").matches)
+        flatMode = true
+    } else if (this.ctx.conf.flatMode === true) {
+      flatMode = true
+    }
+    this.flatMode = flatMode
+
+    // 分页模式
+    this.pageMode = this.conf.pagination?.readMore ? 'read-more' : 'pagination'
+
+    // 操作按钮
+    this.initListActionBtn()
+
+    // 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
+    this.ctx.on('list-reload', () => (this.reqComments(0))) // 刷新评论
+    this.ctx.on('list-refresh-ui', () => (this.refreshUI()))
+    this.ctx.on('list-import', (data) => (this.importComments(data)))
+    this.ctx.on('list-insert', (data) => (this.insertComment(data)))
+    this.ctx.on('list-delete', (comment) => (this.deleteComment(comment.id)))
+    this.ctx.on('list-update', (updateData) => { updateData(this.data);this.refreshUI() } )
+    this.ctx.on('unread-update', (data) => (this.showUnreadBadge(data.notifies?.length || 0)))
+  }
+
+  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.trigger('sidebar-show')
+    })
+
+    // 关闭评论按钮
+    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.$el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(this.commentsCount)
+
+    // 已输入个人信息
+    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.trigger('check-admin-show-el')
+    this.$openSidebarBtn.innerText = (!this.ctx.user.data.isAdmin) ? '通知中心' : '控制中心'
+
+    // 关闭评论
+    if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
+      this.ctx.trigger('editor-close')
+      this.$closeCommentBtn.innerHTML = '打开评论'
+    } else {
+      this.ctx.trigger('editor-open')
+      this.$closeCommentBtn.innerHTML = '关闭评论'
+    }
+  }
+
+  public onLoad(data: ListData, offset: number) {
+    super.onLoad(data, offset)
+
+    // 检测锚点跳转
+    this.checkGoToCommentByUrlHash()
+  }
+
+  /** 跳到评论项位置 - 根据 `location.hash` */
+  public async 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
+
+    // 已阅 API
+    const notifyKey = Utils.getQueryParam('atk_notify_key')
+    if (notifyKey) {
+      new Api(this.ctx).markRead(notifyKey)
+        .then(() => {
+          this.unread = this.unread.filter(o => o.comment_id !== commentId)
+          this.ctx.trigger('unread-update', {
+            notifies: this.unread
+          })
+        })
+    }
+
+    const comment = this.findComment(commentId)
+    // TODO 若找不到评论的情况
+    // if (!comment) { // 若找不到评论
+    //   if (this.hasMoreComments) { // 阅读更多，并重试
+    //     await this.reqComments()
+    //   }
+    // }
+
+    if (!comment) return
+
+    Ui.scrollIntoView(comment.getEl(), false)
+    window.setTimeout(() => {
+      comment.getEl().classList.add('atk-flash-once')
+    }, 800)
+  }
+
+  /** 管理员设置页面信息 */
+  public adminPageEditSave () {
+    if (!this.data || !this.data.page) return
+
+    this.ctx.trigger('editor-show-loading')
+    new Api(this.ctx).pageEdit(this.data.page)
+      .then((page) => {
+        if (this.data)
+          this.data.page = { ...page }
+        this.refreshUI()
+      })
+      .catch(err => {
+        this.ctx.trigger('editor-notify', { msg: `修改页面数据失败：${err.msg || String(err)}`, type: 'e'})
+      })
+      .finally(() => {
+        this.ctx.trigger('editor-hide-loading')
+      })
+  }
+
+  public showUnreadBadge (count: number) {
+    if (count > 0) {
+      this.$unreadBadge.innerText = `${Number(count || 0)}`
+      this.$unreadBadge.style.display = 'block'
+    } else {
+      this.$unreadBadge.style.display = 'none'
+    }
+  }
+}

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 || 15
+  }
+  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" />
+          <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)
+  }
+}

src/components/read-more-btn.ts

@@ -0,0 +1,71 @@
+import * as Utils from '../lib/utils'
+
+export interface ReadMoreBtnConf {
+  /** 每页条数 */
+  pageSize?: number
+
+  /** 数据总数 */
+  total: number
+
+  /** 回调函数 */
+  onClick: () => void
+}
+
+/**
+ * 阅读更多按钮
+ */
+export default class ReadMoreBtn {
+  public conf: ReadMoreBtnConf
+  public $el: HTMLElement
+  private $loading: HTMLElement
+  private $text: HTMLElement
+
+  public constructor(conf: ReadMoreBtnConf) {
+    this.conf = conf
+
+    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">查看更多</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() {
+    this.conf.onClick()
+  }
+
+  /** 显示 */
+  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.$el.classList.remove('atk-err')
+    }, 2000) // 2s后错误提示复原
+  }
+}

src/components/sidebar-view.ts

@@ -0,0 +1,26 @@
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import Comment from './comment'
+
+export default class SidebarView extends Component {
+  static viewName = ''
+  static viewTitle = ''
+  static viewAdminOnly = false
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  protected $parent: HTMLElement
+
+  constructor(ctx: Context, $parent: HTMLElement) {
+    super(ctx)
+
+    this.$parent = $parent
+    this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
+  }
+
+  mount(siteName: string) {}
+
+  switchTab(tab: string, siteName: string): boolean|void {}
+}

src/components/sidebar-views/AdminView.ts

@@ -1,443 +0,0 @@
-import Context from '../../Context'
-import SidebarView from './SidebarView'
-import * as Utils from '../../lib/utils'
-import Comment from '../Comment'
-import ListLite from '../ListLite'
-import { CreateCommentList } from './MessageView'
-import Api from '~/src/lib/api'
-
-export default class AdminView extends SidebarView {
-  name = 'admin'
-  title = '控制台'
-  actions = {
-    comment: '评论',
-    page: '页面',
-    site: '站点',
-    setting: '配置',
-  }
-  activeAction = ''
-  adminOnly = true
-
-  cListInstance?: ListLite
-  get cList () {
-    if (!this.cListInstance) this.cListInstance = CreateCommentList(this.ctx)
-    return this.cListInstance
-  }
-
-  constructor (ctx: Context) {
-    super(ctx)
-
-    this.el = Utils.createElement(`<div class="atk-msg-center"></div>`)
-  }
-
-  init () {
-    this.activeAction = 'comment'
-    this.switch('comment')
-  }
-
-  switch (action: string) {
-    this.el.innerHTML = ''
-
-    if (action === 'comment') {
-      this.initCommentList()
-    } else if (action === 'page') {
-      this.initPageList()
-    } else if (action === 'site') {
-      this.initSiteList()
-    } else if (action === 'setting') {
-      this.initSetting()
-    }
-  }
-
-  /** site 筛选 · 初始化 */
-  async initSiteFilterBar (clickEvt: (item: FilterBarItem) => void) {
-    const sitesData = await new Api(this.ctx).siteGet()
-    const siteItems: FilterBarItem[] = [
-      {name: '__ATK_SITE_ALL', label: '全部站点'}
-    ]
-    if (sitesData) sitesData.forEach((site) => {
-      siteItems.push({ name: site.name, label: site.name })
-    })
-
-    const filterBarEl = BuildFilterBar(siteItems, (item) => clickEvt(item))
-    return filterBarEl
-  }
-
-  /** 评论列表 · 初始化 */
-  async initCommentList() {
-    const el = Utils.createElement('<div class="atk-admin-comment-list"></div>')
-    el.append(this.cList.el) // TODO: 统一 loading 动画
-
-    const reqComments = (type: string, siteName: string) => {
-      if (!this.cList) return
-      this.cList.type = `admin_${type}` as any
-      this.cList.isFirstLoad = true
-      this.cList.paramsEditor = (params) => {
-        params.site_name = siteName
-      }
-      this.cList.reqComments()
-    }
-
-    let loaded = false
-    const curt = { typeName: 'all', siteName: '' }
-
-    // 初始化
-    const typeFilterBarEl = BuildFilterBar([
-      { name: 'all', label: '全部' },
-      { name: 'pending', label: '待审' }
-    ], (item) => {
-      if (!loaded) return
-      curt.typeName = item.name
-      reqComments(curt.typeName, curt.siteName)
-    })
-    el.prepend(typeFilterBarEl)
-
-    // 初始化 site 筛选
-    const siteFilterBarEl  = await this.initSiteFilterBar((item) => {
-      curt.siteName = item.name
-      reqComments(curt.typeName, curt.siteName)
-    })
-    el.prepend(siteFilterBarEl)
-    loaded = true
-
-    this.el.innerHTML = ''
-    this.el.append(el)
-  }
-
-  /** 页面列表 · 初始化 */
-  async initPageList () {
-    const el = Utils.createElement('<div class="atk-admin-page-list"></div>')
-
-    const pListEl = Utils.createElement(`<div class="atk-sidebar-list"></div>`)
-    el.append(pListEl)
-
-    // 初始化 site 筛选
-    const siteFilterBarEl = await this.initSiteFilterBar((item) => {
-      this.reqPages(pListEl, item.name)
-    })
-    el.prepend(siteFilterBarEl)
-
-    this.el.innerHTML = ''
-    this.el.append(el)
-  }
-
-  async reqPages(pListEl: HTMLElement, siteName?: string) {
-    pListEl.innerHTML = ''
-
-    const pages = await new Api(this.ctx).pageGet(siteName)
-    if (!pages) {
-      pListEl.innerHTML = '<div class="atk-sidebar-no-content">无内容</div>'
-      return
-    }
-
-    pages.forEach(page => {
-      const pageItemEl = Utils.createElement(`
-      <div class="atk-item">
-      <div class="atk-title"></div>
-      <div class="atk-sub"></div>
-      <div class="atk-actions">
-        <div class="atk-item" data-action="page-edit-title">修改标题</div>
-        <div class="atk-item" data-action="page-fetch">获取标题</div>
-        <div class="atk-item" data-action="page-edit-key">修改 KEY</div>
-        <div class="atk-item" data-action="page-admin-only"></div>
-        <div class="atk-item" data-action="page-del">删除</div>
-      </div>
-      </div>`)
-      pListEl.append(pageItemEl)
-
-      pageItemEl.setAttribute('data-page-id', String(page.id))
-
-      const titleEl = pageItemEl.querySelector<HTMLElement>('.atk-title')!
-      const keyEl = pageItemEl.querySelector<HTMLElement>('.atk-sub')!
-
-      titleEl.innerText = page.title || page.key
-      keyEl.innerText = page.key
-      titleEl.onclick = () => {
-        window.open(`${page.url}`)
-      }
-      keyEl.onclick = () => {
-        window.open(`${page.url}`)
-      }
-
-      const adminOnlyBtn = pageItemEl.querySelector<HTMLElement>('[data-action="page-admin-only"]')!
-      const renderAdminOnlyBtn = () => {
-        adminOnlyBtn.innerText =  page.admin_only ? '仅管理员可评' : '所有人可评'
-      }
-      renderAdminOnlyBtn()
-      adminOnlyBtn.onclick = (e) => {
-        e.stopPropagation() // 防止穿透
-
-        // TODO: loading ui
-        page.admin_only = !page.admin_only
-        new Api(this.ctx).pageEdit(page)
-        .then((p) => {
-          page = p
-          renderAdminOnlyBtn()
-        })
-      }
-
-      const editTitleBtn = pageItemEl.querySelector<HTMLElement>('[data-action="page-edit-title"]')!
-      editTitleBtn.onclick = () => {
-        const val = window.prompt('修改标题：', page.title)
-        if (val !== null) {
-          page.title = val
-          new Api(this.ctx).pageEdit(page)
-            .then(() => {
-              this.reqPages(pListEl, siteName)
-            })
-            .catch((err) => {
-              window.alert(`修改失败：${err.msg || '未知错误'}`)
-            })
-        }
-      }
-
-      const fetchBtn = pageItemEl.querySelector<HTMLElement>('[data-action="page-fetch"]')!
-      fetchBtn.onclick = () => {
-        const btnOrgTxt = fetchBtn.innerText
-        fetchBtn.innerText = '获取中...'
-        new Api(this.ctx).pageFetch(page.id)
-        .then((p) => {
-          page = p
-          pageItemEl.querySelector<HTMLElement>('.atk-title')!.innerText = p.title
-        })
-        .catch((err) => {
-          window.alert(`获取失败：${err.msg || '未知错误'}`)
-        })
-        .finally(() => {
-          fetchBtn.innerText = btnOrgTxt
-        })
-      }
-
-      const editKeyBtn = pageItemEl.querySelector<HTMLElement>('[data-action="page-edit-key"]')!
-      editKeyBtn.onclick = () => {
-        const val = window.prompt('修改 Key：', page.key)
-        if (val !== null) {
-          page.key = val
-          new Api(this.ctx).pageEdit(page)
-            .then(() => {
-              this.reqPages(pListEl, siteName)
-            })
-            .catch((err) => {
-              window.alert(`修改失败：${err.msg || '未知错误'}`)
-            })
-        }
-      }
-
-      const delBtn = pageItemEl.querySelector<HTMLElement>('[data-action="page-del"]')!
-      delBtn.onclick = () => {
-        const del = () => {
-          new Api(this.ctx).pageDel(page.key, page.site_name)
-          .then(success => {
-            if (success) pageItemEl.remove()
-          })
-        }
-        if (window.confirm(`确认删除页面 "${page.title || page.key}"？将会删除所有相关数据`)) del()
-      }
-    })
-  }
-
-  /** 站点列表 · 初始化 */
-  async initSiteList () {
-    const el = Utils.createElement('<div class="atk-site-list"></div>')
-    // TODO: 可复用，特别是 actions
-    const sListEl = Utils.createElement(`
-    <div class="atk-sidebar-list">
-      <div class="atk-site-add atk-form-inline-wrap">
-        <input type="text" name="siteAdd_name" placeholder="Name..." />
-        <input type="text" name="siteAdd_urls" placeholder="URL..." />
-        <button name="siteAdd_submit">Add</button>
-      </div>
-    </div>
-    `)
-    el.append(sListEl)
-    const siteAddNameEl = sListEl.querySelector<HTMLInputElement>('[name="siteAdd_name"]')!
-    const siteAddUrlsEl = sListEl.querySelector<HTMLInputElement>('[name="siteAdd_urls"]')!
-    sListEl.querySelector<HTMLElement>('[name="siteAdd_submit"]')!.onclick = () => {
-      const name = siteAddNameEl.value.trim()
-      const urls = siteAddUrlsEl.value.trim()
-      if (name === '') {
-        siteAddNameEl.focus()
-        return
-      }
-      new Api(this.ctx).siteAdd(name, urls)
-        .then(() => {
-          this.initSiteList()
-        })
-        .catch((err) => {
-          window.alert(`创建失败：${err.msg || ''}`)
-        })
-    }
-    const sites = await new Api(this.ctx).siteGet()
-    if (!sites) {
-      el.append(Utils.createElement('<div class="atk-sidebar-no-content">无内容</div>'))
-      return
-    }
-    sites.forEach(site => {
-      const siteItemEl = Utils.createElement(`
-      <div class="atk-item">
-      <div class="atk-title"></div>
-      <div class="atk-sub"></div>
-      <div class="atk-actions">
-        <div class="atk-item" data-action="site-rename">重命名</div>
-        <div class="atk-item" data-action="site-edit-urls">修改 URL</div>
-        <div class="atk-item" data-action="site-del">删除</div>
-      </div>
-      </div>`)
-      sListEl.append(siteItemEl)
-
-      siteItemEl.setAttribute('data-site-id', String(site.id))
-
-      const nameEl = siteItemEl.querySelector<HTMLElement>('.atk-title')!
-      const urlsEl = siteItemEl.querySelector<HTMLElement>('.atk-sub')!
-
-      nameEl.innerText = site.name || site.first_url
-      nameEl.onclick = () => {
-        window.open(`${site.first_url}`)
-      }
-
-      if (site.urls) {
-        site.urls.forEach((u) => {
-          const urlItemEl = Utils.createElement('<span style="margin-right: 10px;" />')
-          urlItemEl.innerText = u
-          urlItemEl.onclick = () => {
-            window.open(`${u}`)
-          }
-          urlsEl.append(urlItemEl)
-        })
-      }
-
-      const delBtn = siteItemEl.querySelector<HTMLElement>('[data-action="site-del"]')!
-      delBtn.onclick = () => {
-        const del = () => {
-          new Api(this.ctx).siteDel(site.id, true)
-          .then(success => {
-            if (success) siteItemEl.remove()
-          })
-        }
-        if (window.confirm(`确认删除站点 "${site.name || site.first_url}"？将会删除所有相关数据`))
-          del()
-      }
-
-      const editUrlsBtn = siteItemEl.querySelector<HTMLElement>('[data-action="site-edit-urls"]')!
-      editUrlsBtn.onclick = () => {
-        const val = window.prompt('修改 URL (多个 URL 用逗号隔开):', site.urls_raw)
-        if (val !== null) {
-          new Api(this.ctx).siteEdit(site.id, { name: site.name, urls: val })
-            .then(() => {
-              this.initSiteList()
-            })
-            .catch((err) => {
-              window.alert(`修改失败：${err.msg || '未知错误'}`)
-            })
-        }
-      }
-
-      const renameBtn = siteItemEl.querySelector<HTMLElement>('[data-action="site-rename"]')!
-      renameBtn.onclick = () => {
-        const val = window.prompt('编辑站点名称：', site.name)
-        if (val !== null) {
-          new Api(this.ctx).siteEdit(site.id, { name: val, urls: site.urls_raw })
-            .then(() => {
-              this.initSiteList()
-            })
-            .catch((err) => {
-              window.alert(`修改失败：${err.msg || '未知错误'}`)
-            })
-        }
-      }
-    })
-
-    this.el.innerHTML = ''
-    this.el.append(el)
-  }
-
-  /** 配置页面 · 初始化 */
-  initSetting () {
-    const el = Utils.createElement('<div class="atk-admin-setting"></div>')
-
-    const settingEl = Utils.createElement(`
-    <div class="atk-setting">
-    <div class="atk-group atk-importer atk-form-wrap">
-    <div class="atk-title">导入评论数据</div>
-    <input type="file" name="importer_dataFile" accept="text/plain,.json" />
-    <div class="atk-label">数据类型：</div>
-    <select name="importer_dataType">
-      <option value="artalk_v1">Artalk v1 (PHP 旧版)</option>
-    </select>
-    <div class="atk-label">目标站点名：</div>
-    <input type="text" name="importer_siteName" />
-    <button class="atk-btn" name="importer_submit">导入</button>
-    </div>
-    </div>`)
-    el.append(settingEl)
-
-    const impDataFileEl = settingEl.querySelector<HTMLInputElement>('[name="importer_dataFile"]')!
-    const impSiteNameEl = settingEl.querySelector<HTMLInputElement>('[name="importer_siteName"]')!
-    const impDataTypeEl = settingEl.querySelector<HTMLSelectElement>('[name="importer_dataType"]')!
-    const impSubmitEl = settingEl.querySelector<HTMLButtonElement>('[name="importer_submit"]')!
-    const impSubmitTextOrg = impSubmitEl.innerText
-    impSubmitEl.onclick = () => {
-      const siteName = impSiteNameEl.value.trim()
-      const dataType = impDataTypeEl.value.trim()
-
-      if (!impDataFileEl.files || impDataFileEl.files.length === 0) {
-        window.alert('请打开文件')
-        return
-      }
-      if (dataType === '') {
-        window.alert('请选择数据类型')
-        return
-      }
-
-      const reader = new FileReader()
-      reader.onload = () => {
-        const data = String(reader.result)
-        if (!data) return
-
-        impSubmitEl.innerText = '请稍后...'
-        new Api(this.ctx).importer(data, dataType, siteName)
-        .then(() => {
-          window.alert(`导入成功`)
-        })
-        .catch((err) => {
-          console.error(err)
-          window.alert(`导入失败：${err.msg || '未知错误'}`)
-        })
-        .finally(() => {
-          impSubmitEl.innerText = impSubmitTextOrg
-        })
-      }
-      reader.readAsText(impDataFileEl.files[0]);
-    }
-
-    this.el.innerHTML = ''
-    this.el.append(el)
-  }
-}
-
-/** 通用筛选条 */
-function BuildFilterBar (items: FilterBarItem[], clickEvt: (item: FilterBarItem) => void): HTMLElement {
-  const filterBarEl = Utils.createElement(`<div class="atk-filter-bar"></div>`)
-
-  items.forEach(item => {
-    const itemEl = Utils.createElement(`<span></span>`)
-    filterBarEl.append(itemEl)
-    itemEl.innerText = item.label
-    itemEl.addEventListener('click', () => {
-      clickEvt(item)
-      filterBarEl.querySelectorAll('.atk-active')
-        .forEach(el => el.classList.remove('atk-active')) // 删除其他 active
-      itemEl.classList.add('atk-active')
-    })
-  })
-
-  ;(filterBarEl.firstChild as HTMLElement).click() // 默认打开第一个项目
-
-  return filterBarEl
-}
-
-/** 筛选条中的项目 */
-interface FilterBarItem {
-  name: string
-  label: string
-}

src/components/sidebar-views/MessageView.ts

@@ -1,48 +0,0 @@
-import Context from '../../Context'
-import SidebarView from './SidebarView'
-import * as Utils from '../../lib/utils'
-import ListLite from '../ListLite'
-
-export default class MessageView extends SidebarView {
-  name = 'message'
-  title = '通知中心'
-  actions = {
-    mentions: '提及',
-    all: '全部',
-    mine: '我的',
-    pending: '待审',
-  }
-  activeAction = ''
-
-  list?: ListLite
-  type: string = 'mentions'
-
-  init () {
-    this.list = CreateCommentList(this.ctx)
-    this.el.innerHTML = ''
-    this.el.append(this.list.el)
-
-    this.activeAction = this.type
-    this.switch(this.type)
-  }
-
-  switch (action: string) {
-    if (!this.list) return
-    this.type = action
-    this.list.type = action as any;
-    this.list.isFirstLoad = true
-    this.list.reqComments()
-  }
-}
-
-export function CreateCommentList (ctx: Context) {
-  const list = new ListLite(ctx)
-  list.flatMode = true
-  list.unreadHighlight = true
-  list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
-  list.renderComment = (comment) => {
-    comment.setOpenURL(`${comment.data.page_key}#atk-comment-${comment.data.id}`)
-  }
-
-  return list
-}

src/components/sidebar-views/SidebarView.ts

@@ -1,24 +0,0 @@
-import Context from '../../Context'
-import Component from '../../lib/component'
-import * as Utils from '../../lib/utils'
-import Comment from '../Comment'
-
-export default class SidebarView extends Component {
-  constructor (ctx: Context) {
-    super(ctx)
-
-    this.el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
-  }
-
-  name = ''
-  title = this.name
-  actions: { [name: string]: string } = {}
-  activeAction?: string
-
-  adminOnly = false
-
-  init (): void {}
-
-  switch (action: string): void {}
-}
-

src/components/sidebar-views/comments-view.ts

@@ -0,0 +1,69 @@
+import Context from '../../context'
+import SidebarView from '../sidebar-view'
+import * as Utils from '../../lib/utils'
+import ListLite from '../list-lite'
+
+export default class MessageView extends SidebarView {
+  static viewName = 'comments'
+  static viewTitle = '评论'
+
+  viewTabs: any = {}
+  viewActiveTab = ''
+
+  list!: ListLite
+
+  mount(siteName: string) {
+    // tabs
+    if (this.ctx.user.data.isAdmin) {
+      this.viewTabs = {
+        admin_all: '全部',
+        admin_pending: '待审',
+        all: '个人',
+      }
+      this.viewActiveTab = 'admin_all'
+    } else {
+      this.viewTabs = {
+        mentions: '提及',
+        all: '全部',
+        mine: '我的',
+        pending: '待审',
+      }
+      this.viewActiveTab = 'mentions'
+    }
+
+    this.list = new ListLite(this.ctx, this.$el)
+    this.list.flatMode = true
+    this.list.unreadHighlight = true
+    this.list.autoLoadListenerAt = this.$parent
+    this.list.pageMode = 'pagination'
+    this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
+    this.list.renderComment = (comment) => {
+      comment.setOpenURL(`${comment.data.page_key}#atk-comment-${comment.data.id}`)
+      comment.$actions.querySelector('[data-atk-action="comment-reply"]')?.addEventListener('click', () => {
+        this.ctx.trigger('sidebar-hide')
+      })
+    }
+    this.list.paramsEditor = (params) => {
+      params.site_name = siteName
+    }
+
+    this.$el.innerHTML = ''
+    this.$el.append(this.list.$el)
+
+    this.switchTab(this.viewActiveTab, siteName)
+  }
+
+  switchTab(tab: string, siteName: string): boolean|void {
+    //console.log(tab, siteName)
+    this.viewActiveTab = tab
+    this.list.type = tab as any;
+    this.list.isFirstLoad = true
+    this.list.paramsEditor = (params) => {
+      params.site_name = siteName
+    }
+    this.list.reqComments()
+
+    return true
+  }
+}
+

src/components/sidebar-views/pages-view.ts

@@ -0,0 +1,61 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import * as Ui from '../../lib/ui'
+import PageList from '../admin/page-list'
+import Comment from '../comment'
+import Pagination, { PaginationConf } from '../pagination'
+import SidebarView from '../sidebar-view'
+
+const PAGE_SIZE = 20
+
+export default class PagesView extends SidebarView {
+  static viewName = 'pages'
+  static viewTitle = '页面'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  pageList!: PageList
+  pagination!: Pagination
+
+  mount(siteName: string) {
+    if (!this.pageList) {
+      this.pageList = new PageList(this.ctx)
+      this.$el.append(this.pageList.$el)
+    }
+
+    this.switchTab(this.viewActiveTab, siteName)
+  }
+
+  switchTab(tab: string, siteName: string): boolean|void {
+    this.reqPages(siteName, 0)
+  }
+
+  async reqPages(siteName: string, offset: number) {
+    this.pageList.clearAll()
+    ;(this.$el.parentNode as any)?.scrollTo(0, 0)
+
+    Ui.showLoading(this.$el)
+
+    const data = await new Api(this.ctx).pageGet(siteName, offset, PAGE_SIZE)
+    this.pageList.importPages(data.pages || [])
+
+    Ui.hideLoading(this.$el)
+
+    if (!this.pagination) {
+      this.pagination = new Pagination(data.total, {
+        pageSize: PAGE_SIZE,
+        onChange: (o: number) => {
+          this.reqPages(siteName, o)
+        }
+      })
+
+      this.$el.append(this.pagination.$el)
+    }
+    if (this.pagination && offset === 0)
+      this.pagination.update(offset, data.total)
+  }
+}

src/components/sidebar-views/setting-view.ts

@@ -0,0 +1,21 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class SettingView extends SidebarView {
+  static viewName = 'setting'
+  static viewTitle = '配置'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  mount(siteName: string) {
+  }
+
+  switchTab(tab: string, siteName: string) {}
+}

src/components/sidebar-views/sites-view.ts

@@ -0,0 +1,36 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class SitesView extends SidebarView {
+  static viewName = 'sites'
+  static viewTitle = '站点'
+  static viewAdminOnly = true
+
+  viewTabs = {}
+  viewActiveTab = ''
+
+  siteList!: SiteList
+
+  mount(siteName: string) {
+    if (!this.siteList) {
+      this.siteList = new SiteList(this.ctx)
+      this.$el.append(this.siteList.$el)
+    }
+
+    this.reqSites()
+  }
+
+  switchTab(tab: string, siteName: string) {
+    this.reqSites()
+  }
+
+  async reqSites() {
+    const sites = await new Api(this.ctx).siteGet()
+    this.siteList.loadSites(sites)
+  }
+}

src/components/sidebar-views/transfer-view.ts

@@ -0,0 +1,218 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import * as Ui from '../../lib/ui'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class TransferView extends SidebarView {ß
+  static viewName = 'transfer'
+  static viewTitle = '迁移'
+  static viewAdminOnly = true
+
+  viewTabs = {
+    'import': '导入',
+    'export': '导出',
+  }
+  viewActiveTab = 'import'
+
+  mount(siteName: string) {
+    this.switchTab('import', siteName)
+  }
+
+  switchTab(tab: string, siteName: 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">数据类型</div>
+    <select name="AtkDataType">
+      <option value="artrans">Artrans (数据行囊)</option>
+      <option value="artalk_v1">Artalk v1 (PHP 旧版)</option>
+      <option value="typecho">Typecho</option>
+      <option value="wordpress">WordPress</option>
+      <option value="disqus">Disqus</option>
+      <option value="commento">Commento</option>
+      <option value="valine">Valine</option>
+      <option value="twikoo">Twikoo</option>
+    </select>
+    <div class="atk-label atk-data-file-label">数据文件</div>
+    <input type="file" name="AtkDataFile" accept="text/plain,.json">
+    <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 $dataType = $form.querySelector<HTMLSelectElement>('[name="AtkDataType"]')!
+    const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
+    const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
+    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)
+
+    $dataType.onchange = () => {
+      if (['typecho'].includes($dataType.value)) {
+        $dataFile.style.display = 'none'
+        $dataFileLabel.style.display = 'none'
+      } else {
+        $dataFile.style.display = ''
+        $dataFileLabel.style.display = ''
+      }
+    }
+
+    $submitBtn.onclick = () => {
+      const dataType = $dataType.value.trim()
+      const siteName = $siteName.value.trim()
+      const siteURL = $siteURL.value.trim()
+      const payload = $payload.value.trim()
+
+      if (dataType === '') {
+        setError('请选择数据类型')
+        return
+      }
+
+      // 请求 payload 参数制备
+      let rData: any = {}
+      if (payload) {
+        // JSON 格式检验
+        try {
+          rData = JSON.parse(payload)
+        } catch (err) {
+          setError(`Payload JSON 格式有误：${String(err)}`)
+          return
+        }
+
+        if (rData !instanceof Object) {
+          setError(`Payload 需为 JSON 对象`)
+          return
+        }
+      }
+      if (siteName) rData.t_name = siteName
+      if (siteURL) rData.t_url = siteURL
+
+      // 创建导入会话
+      const createSession = (dataStr?: 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 = ''
+        }
+
+        if (dataStr) rData.json_data = dataStr
+
+        // 创建 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} = {
+          type: dataType,
+          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}/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()
+      }
+
+      const reader = new FileReader()
+      reader.onload = () => {
+        const data = String(reader.result)
+        createSession(data)
+      }
+
+      // 是否已选择文件
+      if ($dataFile.files?.length) {
+        // 先读取文件
+        reader.readAsText($dataFile.files[0])
+      } else {
+        // 直接开始会话
+        createSession()
+      }
+    }
+  }
+
+  async initExport() {
+    Ui.showLoading(this.$el)
+
+    try {
+      const d = await new Api(this.ctx).export()
+      this.download(`artrans-${this.getYmdHisFilename()}.json`, 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)}`
+  }
+}

src/components/sidebar.ts

@@ -0,0 +1,288 @@
+import '../style/sidebar.less'
+
+import MD5 from '../lib/md5'
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Comment  from './comment'
+import SidebarHTML from './html/sidebar.html?raw'
+import Layer from './layer'
+
+import SidebarView from './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 { SiteData } from '~/types/artalk-data'
+import Api from '../api'
+import SiteListFloater from './admin/site-list-floater'
+import SettingView from './sidebar-views/setting-view'
+
+const DEFAULT_VIEW = 'comments'
+const REGISTER_VIEWS: (typeof SidebarView)[] = [
+  CommentsView, PagesView, SitesView, TransferView, // SettingView
+]
+
+export default class Sidebar extends Component {
+  public layer?: Layer
+
+  public $header: HTMLElement
+  public $headerMenu: HTMLElement
+  public $title: HTMLElement
+  public $avatar: HTMLElement
+  public $siteLogo?: HTMLElement
+  public $closeBtn: HTMLElement
+  public $nav: HTMLElement
+  public $curtViewBtn: HTMLElement
+  public $curtViewBtnIcon: HTMLElement
+  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 curtSite?: string
+  public curtView: string = DEFAULT_VIEW
+  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) {
+    super(ctx)
+
+    // 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.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
+
+    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.initViewSwitcher()
+
+    this.$closeBtn.onclick = () => {
+      this.hide()
+    }
+
+    // event
+    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-hide', () => (this.hide()))
+    this.ctx.on('user-changed', () => { this.firstShow = true })
+  }
+
+  /** 初始化 view 切换器 */
+  private initViewSwitcher() {
+    this.$curtViewBtn.onclick = () => {
+      this.toggleViewSwitcher()
+    }
+
+    this.$navViews.innerHTML = ''
+    REGISTER_VIEWS.forEach(view => {
+      const $item = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navViews.append($item)
+      $item.setAttribute('data-name', view.viewName)
+      $item.innerText = view.viewTitle
+      if (view.viewName === this.curtView) {
+        $item.classList.add('atk-active')
+        this.$curtViewBtnText.innerText = view.viewTitle
+      }
+      $item.onclick = () => {
+        // 切换 view
+        this.switchView(view.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
+  }
+
+  private firstShow = true
+
+  /** 显示 */
+  public async show() {
+    this.$el.style.transform = '' // 动画清除，防止二次打开失效
+
+    // 获取 Layer
+    this.layer = new Layer(this.ctx, 'sidebar', this.$el)
+    this.layer.show()
+
+    // viewWrap 滚动条归位
+    this.$viewWrap.scrollTo(0, 0)
+
+    // 执行动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 20)
+
+    // 第一次加载
+    if (this.firstShow) {
+      ///////////////////
+      //// IMPORTANT ////
+      ///////////////////
+
+      // 用户权限检测
+      if (this.isAdmin) {
+        // 是管理员
+        this.$title.innerText = '控制中心'
+        this.$curtViewBtn.style.display = ''
+
+        if (!this.siteSwitcher) {
+          // 初始化站点切换器
+          this.siteSwitcher = new SiteListFloater(this.ctx, {
+            onSwitchSite: (siteName) => { this.switchSite(siteName) },
+            onClickSitesViewBtn: () => { this.switchView('sites') }
+          })
+          this.$viewWrap.before(this.siteSwitcher.$el)
+          this.$avatar.onclick = (evt) => {
+            if (!this.isAdmin) return
+            this.siteSwitcher?.show(evt.target as any)
+          }
+
+        }
+
+        this.curtSite = this.conf.site
+
+        Ui.showLoading(this.$el)
+        try {
+          await this.siteSwitcher!.load(this.curtSite)
+        } catch (err: any) {
+          const $err = Utils.createElement(`<span>加载失败：${err.msg || '网络错误'}<br/></span>`)
+          const $retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
+          $err.appendChild($retryBtn)
+          $retryBtn.onclick = () => { Ui.setError(this.$el, null); this.show() }
+          Ui.setError(this.$el, $err)
+          return
+        } finally { Ui.hideLoading(this.$el) }
+
+        // 站点图像
+        this.$avatar.innerHTML = ''
+        this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
+        this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
+        this.$avatar.append(this.$siteLogo)
+      } else {
+        // 不是管理员
+        this.$title.innerText = '通知中心'
+        this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
+        this.curtSite = this.conf.site // 第一次 show 使用当前站点数据
+
+        // 头像
+        const $avatarImg = document.createElement('img') as HTMLImageElement
+        $avatarImg.src = Utils.getGravatarURL(this.ctx, MD5(this.ctx.user.data.email.toLowerCase()))
+        this.$avatar.innerHTML = ''
+        this.$avatar.append($avatarImg)
+      }
+
+      this.switchView(DEFAULT_VIEW) // 打开默认 view
+      this.firstShow = false
+    }
+  }
+
+  /** 隐藏 */
+  public hide() {
+    // 执行动画
+    this.$el.style.transform = ''
+
+    // 用完即销毁
+    this.layer?.dispose()
+  }
+
+  /** 切换 View */
+  public switchView(viewName: string) {
+    let view = this.viewInstances[viewName]
+    if (!view) {
+      // 初始化 View
+      const View = REGISTER_VIEWS.find(o => o.viewName === viewName)!
+      view = new View(this.ctx, this.$viewWrap)
+      this.viewInstances[viewName] = view
+    }
+
+    // init view
+    view.mount(this.curtSite!)
+
+    this.curtView = viewName
+    this.curtTab = view.viewActiveTab
+
+    // update view indicator
+    this.$curtViewBtnText.innerText = (view.constructor as typeof SidebarView).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.constructor as typeof SidebarView).viewName}`)
+  }
+
+  private loadViewTabs(view: SidebarView) {
+    this.$navTabs.innerHTML = ''
+    Object.entries<string>(view.viewTabs).forEach(([tabName, label]) => {
+      const $tab = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navTabs.append($tab)
+      $tab.innerText = label
+      if (view.viewActiveTab === tabName) $tab.classList.add('atk-active')
+
+      // 切换 tab
+      $tab.onclick = () => {
+        if (view.switchTab(tabName, this.curtSite!) === 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.curtSite = siteName
+    const curtView = this.curtViewInstance
+    curtView?.switchTab(this.curtTab!, siteName)
+    if (this.$siteLogo) this.$siteLogo.innerText = this.curtSite.substr(0, 1)
+  }
+}

src/context.ts

@@ -0,0 +1,42 @@
+import User from './lib/user'
+import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+
+/**
+ * Artalk Context
+ */
+export default class Context {
+  public cid: number // Context 唯一标识
+  public $root: HTMLElement
+  public conf: ArtalkConfig
+  public user: User
+
+  private eventList: Event[] = []
+
+  public constructor (rootEl: HTMLElement, conf: ArtalkConfig) {
+    this.cid = +new Date()
+    this.$root = rootEl
+    this.conf = conf
+    this.user = new User(this.conf)
+
+    this.$root.setAttribute('atk-run-id', this.cid.toString())
+  }
+
+  public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>, scope: EventScopeType = 'internal') {
+    this.eventList.push({ name, handler: handler as any, scope })
+  }
+
+  public off<K extends keyof EventPayloadMap>(name: K, handler?: Handler<EventPayloadMap[K]>, scope: EventScopeType = '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<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K], scope?: EventScopeType) {
+    this.eventList
+      .filter((evt) => evt.name === name && (scope ? (evt.scope === scope) : true))
+      .map((evt) => evt.handler)
+      .forEach((handler) => handler(payload as any))
+  }
+}

src/defaults.ts

@@ -0,0 +1,41 @@
+import ArtalkConfig from "~/types/artalk-config";
+
+const defaults: ArtalkConfig = {
+  el: '',
+  pageKey: '',
+  server: '',
+  site: '',
+
+  placeholder: '键入内容...',
+  noComment: '「此时无声胜有声」',
+  sendBtn: '发送评论',
+  darkMode: false,
+
+  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
+
+  vote: true,
+  voteDown: false,
+  uaBadge: true,
+  flatMode: 'auto',
+  maxNesting: 3,
+  gravatar: {
+    default: 'mp',
+    mirror: 'https://sdn.geekzu.org/avatar/',
+  },
+
+  pagination: {
+    pageSize: 15,
+    readMore: true,
+    autoLoad: true,
+  },
+
+  heightLimit: {
+    content: 300,
+    children: 400,
+  },
+
+  reqTimeout: 15000,
+  versionCheck: true,
+}
+
+export default defaults

src/lib/api.ts

@@ -1,393 +0,0 @@
-import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
-import Context from '../Context'
-
-export default class Api {
-  private ctx: Context
-  private serverURL: string
-
-  constructor (ctx: Context) {
-    this.ctx = ctx
-    this.serverURL = ctx.conf.server
-  }
-
-  public get(offset: number, type?: string, paramsEditor?: (params: any) => void): Promise<ListData> {
-    const params: any = {
-      page_key: this.ctx.conf.pageKey,
-      limit: this.ctx.conf.readMore?.pageSize || 15,
-      offset,
-    }
-
-    if (type) {
-      params.type = type
-    }
-
-    if (this.ctx.user.checkHasBasicUserInfo()) {
-      params.name = this.ctx.user.data.nick
-      params.email = this.ctx.user.data.email
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    if (paramsEditor) paramsEditor(params)
-
-    return CommonFetch(this.ctx, `${this.serverURL}/get`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data as ListData))
-  }
-
-  public add(comment: { nick: string, email: string, link: string, content: string, rid: number }): Promise<CommentData> {
-    const params: any = {
-      name: comment.nick,
-      email: comment.email,
-      link: comment.link,
-      content: comment.content,
-      rid: comment.rid,
-      page_key: this.ctx.conf.pageKey,
-      page_url: this.ctx.conf.pageUrl || '',
-      page_title: this.ctx.conf.pageTitle || '',
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/add`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.comment as CommentData))
-  }
-
-  public login(name: string, email: string, password: string): Promise<string> {
-    const params: any = {
-      name, email, password
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/login`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.token))
-  }
-
-  public userGet(name: string, email: string) {
-    const ctrl = new AbortController()
-    const { signal } = ctrl
-
-    const params: any = {
-      name, email
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    const req = CommonFetch(this.ctx, `${this.serverURL}/user-get`, {
-      method: 'POST',
-      body: getFormData(params),
-      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 vote(targetID: number, type: string) {
-    const params: any = {
-      target_id: targetID,
-      type,
-    }
-
-    if (this.ctx.user.checkHasBasicUserInfo()) {
-      params.name = this.ctx.user.data.nick
-      params.email = this.ctx.user.data.email
-    }
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/vote`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => ((json.data?.vote_num || 0) as number))
-  }
-
-  public markRead(notifyKey: string, readAll = false) {
-    const params: any = {
-      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
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/mark-read`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.success as boolean))
-  }
-
-  public captchaGet(): Promise<string> {
-    return CommonFetch(this.ctx, `${this.serverURL}/captcha/refresh`, {
-      method: 'GET',
-    }).then((json) => {
-      if (!!json.success && !!json.data.img_data) {
-        return json.data.img_data
-      }
-
-      return ''
-    })
-  }
-
-  public captchaCheck(value: string): Promise<string> {
-    return CommonFetch(this.ctx, `${this.serverURL}/captcha/check?${new URLSearchParams({ value })}`, {
-      method: 'GET',
-    }).then((json) => {
-      if (!json.success && !!json.data.img_data) {
-        return json.data.img_data
-      }
-
-      return ''
-    })
-  }
-
-  public commentEdit(data: CommentData) {
-    const params: any = {
-      ...data,
-    }
-
-    if (params.is_collapsed !== undefined) params.is_collapsed = params.is_collapsed ? '1' : '0'
-    if (params.is_pending !== undefined) params.is_pending = params.is_pending ? '1' : '0'
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/comment-edit`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.comment as CommentData))
-  }
-
-  public pageEdit(data: PageData) {
-    const params: any = {
-      id: data.id,
-      key: data.key,
-      title: data.title,
-      admin_only: data.admin_only ? '1' : '0',
-    }
-
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/page-edit`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.page as PageData))
-  }
-
-  public pageFetch(id: number) {
-    const params: any = {
-      id,
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/page-fetch`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.page as PageData))
-  }
-
-  public siteGet(): Promise<SiteData[]> {
-    const params: any = {}
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/site-get`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.sites as SiteData[]))
-  }
-
-  public pageGet(siteName?: string): Promise<PageData[]> {
-    const params: any = {
-      site_name: siteName || ''
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/page-get`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.data.pages as PageData[]))
-  }
-
-  public pageDel(pageKey: string, siteName?: string) {
-    const params: any = {
-      key: String(pageKey),
-      site_name: siteName || '',
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/page-del`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.success as boolean))
-  }
-
-  public siteDel(id: number, delContent = false) {
-    const params: any = {
-      id,
-      del_content: delContent ? '1' : '0'
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/site-del`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.success as boolean))
-  }
-
-  public siteAdd(name: string, urls: string) {
-    const params: any = {
-      name, urls,
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/site-add`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.site as SiteData))
-  }
-
-  public siteEdit(id: number, data: {
-    name: string
-    urls: string
-  }) {
-    const params: any = {
-      id,
-      name: data.name,
-      urls: data.urls,
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/site-edit`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.site as SiteData))
-  }
-
-  public commentDel(commentID: number, siteName?: string) {
-    const params: any = {
-      id: String(commentID),
-      site_name: siteName || '',
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/comment-del`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.success as boolean))
-  }
-
-  public importer(data: string, type: string, siteName: string) {
-    const params: any = {
-      data,
-      type,
-      site_name: siteName || '',
-    }
-
-    return CommonFetch(this.ctx, `${this.serverURL}/admin/importer`, {
-      method: 'POST',
-      body: getFormData(params),
-    }).then((json) => (json.success as boolean))
-  }
-}
-
-/** 公共请求函数 */
-function CommonFetch(ctx: Context, input: RequestInfo, init: RequestInit): Promise<any> {
-  if (ctx.user.data.token) {
-    const requestHeaders: HeadersInit = new Headers();
-    requestHeaders.set('Authorization', `Bearer ${ctx.user.data.token}`);
-
-    init.headers = requestHeaders
-  }
-
-  // 15s timeout
-  return timeoutPromise(15000, fetch(input, init)).then(async (resp) => {
-    if (!resp.ok) {
-        throw new Error(`请求响应 ${resp.status}`)
-    }
-
-    // 解析获取响应的 json
-    let json: any = await resp.json()
-
-    // 重新发起请求
-    const recall = (resolve, reject) => {
-      CommonFetch(ctx, input, init).then(d => {
-        resolve(d)
-      }).catch(err => {
-        reject(err)
-      })
-    }
-
-    if (json.data && json.data.need_captcha) {
-      // 请求需要验证码
-      json = await (new Promise<any>((resolve, reject) => {
-        ctx.dispatchEvent('checker-captcha', {
-          imgData: json.data.img_data,
-          onSuccess: () => {
-            recall(resolve, reject)
-          },
-          onCancel: () => {
-            reject(json)
-          }
-        })
-      }))
-    } else if ((json.data && json.data.need_login) || resp.status === 401) {
-      // 请求需要管理员权限
-      json = await (new Promise<any>((resolve, reject) => {
-        ctx.dispatchEvent('checker-admin', {
-          onSuccess: () => {
-            recall(resolve, reject)
-          },
-          onCancel: () => {
-            reject(json)
-          }
-        })
-      }))
-    }
-
-    if (!json.success)
-      throw json // throw 相当于 reject(json)
-    else
-      return json
-  })
-  .catch(err => {
-    console.error(err)
-
-    if (err instanceof TypeError)
-      throw new Error(`网络错误`)
-
-    throw err
-  })
-}
-
-function getFormData (object: any): FormData {
-  const formData = new FormData()
-  Object.keys(object).forEach(key => formData.append(key, String(object[key])))
-  return formData
-}
-
-/** TODO: 我靠，一个 timeout，都要丑陋的实现 */
-function timeoutPromise<T>(ms: number, promise: Promise<T>): Promise<T> {
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      reject(new Error("请求超时"))
-    }, ms);
-    promise.then(
-      (res) => {
-        clearTimeout(timeoutId);
-        resolve(res);
-      },
-      (err) => {
-        clearTimeout(timeoutId);
-        reject(err);
-      }
-    );
-  })
-}

src/lib/checker.ts

@@ -1,164 +0,0 @@
-import Context from "../Context"
-import * as Utils from "./utils"
-import User from "./user"
-import * as Ui from './ui'
-import BuildLayer from "../components/Layer"
-import Api from "./api"
-import { CheckerCaptchaConf } from '../Event'
-
-interface CheckerConf {
-  el?: HTMLElement
-  body: (that: Checker) => HTMLElement
-  request: (that: Checker, inputVal: string) => Promise<string>
-  onSuccess?: (that: Checker, data: string, inputVal: string, formEl: HTMLElement) => void
-  onError?: (that: Checker, err: any, inputVal: string, formEl: HTMLElement) => void
-}
-
-const AdminChecker = {
-  request: (that, inputVal) => {
-    const data = {
-      name: that.user.data.nick,
-      email: that.user.data.email,
-      password: inputVal
-    }
-
-    return new Api(that.ctx).login(data.name, data.email, data.password)
-  },
-  body: () => Utils.createElement('<span>敲入密码来验证管理员身份：</span>'),
-  onSuccess: (that, userToken, inputVal, formEl) => {
-    that.user.data.isAdmin = true
-    that.user.data.token = userToken
-    that.user.save()
-    that.ctx.dispatchEvent('user-changed')
-    that.ctx.dispatchEvent('list-reload')
-  },
-  onError: (that, err, inputVal, formEl) => {
-
-  }
-
-} as CheckerConf
-
-const CaptchaChecker = {
-  request: (that, inputVal) => (new Api(that.ctx).captchaCheck(inputVal)),
-  body: (that) => {
-    const elem = Utils.createElement(`<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ''}" alt="验证码">敲入验证码继续：</span>`);
-
-    // 刷新验证码
-    elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
-      const imgEl = elem.querySelector('.atk-captcha-img')
-      new Api(that.ctx).captchaGet()
-        .then((imgData) => {
-          imgEl!.setAttribute('src', imgData)
-        })
-        .catch((err) => {
-          console.error('验证码获取失败 ', err)
-        })
-    }
-    return elem
-  },
-  onSuccess: (that, msg, data, inputVal, formEl) => {
-    that.submitCaptchaVal = inputVal
-  },
-  onError: (that, err, inputVal, formEl) => {
-    formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
-  }
-} as CheckerConf
-
-export default class Checker {
-  public ctx: Context
-  public user: User
-
-  public submitCaptchaVal?: string
-  public submitCaptchaImgData?: string
-
-  constructor (ctx: Context) {
-    this.ctx = ctx
-    this.user = ctx.user
-
-    this.ctx.addEventListener('checker-captcha', (conf) => {
-      if (conf.imgData) {
-        this.submitCaptchaImgData = conf.imgData
-      }
-      this.check('captcha', conf)
-    })
-
-    this.ctx.addEventListener('checker-admin', (conf) => {
-      this.check('admin', conf)
-    })
-  }
-
-  public check (name: 'admin'|'captcha', conf: CheckerCaptchaConf) {
-    const checker = {
-      admin: AdminChecker,
-      captcha: CaptchaChecker
-    }[name]
-
-    const layer = BuildLayer(this.ctx, `checker-${new Date().getTime()}`)
-    layer.setMaskClickHide(false)
-    layer.show()
-
-    const formEl = Utils.createElement()
-    formEl.appendChild(checker.body(this))
-
-    const input = Utils.createElement<HTMLInputElement>(`<input id="check" type="${(name === 'admin' ? 'password' : 'text')}" required placeholder="">`)
-    formEl.appendChild(input)
-    setTimeout(() => {
-      input.focus() // 延迟以保证有效
-    }, 80)
-
-    input.onkeyup = (evt) => {
-      if (evt.key === 'Enter' || evt.keyCode === 13) { // 按下回车键
-        evt.preventDefault();
-        (layer.getEl().querySelector<HTMLButtonElement>('button[data-action="confirm"]'))!.click()
-      }
-    }
-
-    let btnRawText: string|undefined
-    const dialogEl = Ui.buildDialog(formEl, (btnElem: HTMLElement) => {
-      const inputVal = input.value.trim()
-      if (!btnRawText) {
-        btnRawText = btnElem.innerText
-      }
-      const btnTextSet = (btnText: string) => {
-        btnElem.innerText = btnText
-        btnElem.classList.add('error')
-      }
-      const btnTextRestore = () => {
-        btnElem.innerText = btnRawText || ''
-        btnElem.classList.remove('error')
-      }
-
-      btnElem.innerText = '加载中...'
-      checker.request(this, inputVal)
-        .then(data => {
-          // 请求成功
-          layer.disposeNow()
-          if (checker.onSuccess) checker.onSuccess(this, data, inputVal, formEl)
-          if (conf.onSuccess) conf.onSuccess(inputVal, dialogEl)
-        })
-        .catch(err => {
-          btnTextSet(String(err.msg || String(err)))
-          if (checker.onError)
-            checker.onError(this, err, inputVal, formEl)
-
-          const tf = setTimeout(() => {
-            btnTextRestore()
-          }, 3000)
-          input.onfocus = () => {
-            btnTextRestore()
-            clearTimeout(tf)
-          }
-        })
-
-      return false
-    }, () => {
-      layer.disposeNow()
-      if (conf.onCancel) conf.onCancel()
-      return false
-    })
-
-    layer.getEl().append(dialogEl)
-
-    if (conf.onMount) conf.onMount(dialogEl) // onMount
-  }
-}

src/lib/checker/admin-checker.ts

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

src/lib/checker/captcha-checker.ts

@@ -0,0 +1,38 @@
+import Api from '@/api'
+import * as Utils from '../utils'
+import { Checker } from '.'
+
+const CaptchaChecker: Checker = {
+  request(that, inputVal) {
+    return new Api(that.ctx).captchaCheck(inputVal)
+  },
+
+  body(that) {
+    const elem = Utils.createElement(
+      `<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ''}" alt="验证码">敲入验证码继续：</span>`
+    );
+
+    // 刷新验证码
+    elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
+      const imgEl = elem.querySelector('.atk-captcha-img')
+      new Api(that.ctx).captchaGet()
+        .then((imgData) => {
+          imgEl!.setAttribute('src', imgData)
+        })
+        .catch((err) => {
+          console.error('验证码获取失败 ', err)
+        })
+    }
+    return elem
+  },
+
+  onSuccess(that, data, inputVal, formEl) {
+    that.submitCaptchaVal = inputVal
+  },
+
+  onError(that, err, inputVal, formEl) {
+    formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
+  }
+}
+
+export default CaptchaChecker

src/lib/checker/index.ts

@@ -0,0 +1,134 @@
+import Context from '@/context'
+import Layer from '@/components/layer'
+import Dialog from '@/components/dialog'
+import * as Utils from '../utils'
+import * as Ui from '../ui'
+import { CheckerPayload } from '~/types/event'
+import CaptchaChecker from './captcha-checker'
+import AdminChecker from './admin-checker'
+
+/**
+ * Checker 发射台
+ */
+export default class CheckerLauncher {
+  public ctx: Context
+
+  public launched: Checker[] = []
+  public submitCaptchaVal?: string
+  public submitCaptchaImgData?: string
+
+  constructor(ctx: Context) {
+    this.ctx = ctx
+
+    this.initEventBind()
+  }
+
+  /** 初始化事件绑定 */
+  public initEventBind() {
+    this.ctx.on('checker-captcha', (conf) => {
+      if (conf.imgData) {
+        this.submitCaptchaImgData = conf.imgData
+      }
+      this.fire(CaptchaChecker, conf)
+    })
+
+    this.ctx.on('checker-admin', (conf) => {
+      this.fire(AdminChecker, conf)
+    })
+  }
+
+  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()
+
+    const formEl = Utils.createElement()
+    formEl.appendChild(checker.body(this))
+
+    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(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 = '加载中...'
+
+      checker
+        .request(this, inputVal)
+        .then((data) => {
+          // 请求成功
+          this.done(checker, layer)
+          if (checker.onSuccess) checker.onSuccess(this, data, inputVal, formEl)
+          if (payload.onSuccess) payload.onSuccess(inputVal, dialog.$el)
+        })
+        .catch((err) => {
+          // 请求失败
+          btnTextSet(String(err.msg || String(err)))
+          if (checker.onError) checker.onError(this, err, inputVal, formEl)
+
+          const tf = setTimeout(() => btnTextRestore(), 3000)
+          input.onfocus = () => {
+            btnTextRestore()
+            clearTimeout(tf)
+          }
+        })
+
+      return false
+    })
+
+    // 取消按钮
+    dialog.setNo(() => {
+      this.done(checker, layer)
+      if (payload.onCancel) payload.onCancel()
+      return false
+    })
+
+    layer.getEl().append(dialog.$el)
+
+    if (payload.onMount) payload.onMount(dialog.$el) // onMount
+  }
+
+  private done(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) => HTMLElement
+  request: (launcher: CheckerLauncher, inputVal: string) => Promise<string>
+  onSuccess?: (launcher: CheckerLauncher, data: string, inputVal: string, formEl: HTMLElement) => void
+  onError?: (launcher: CheckerLauncher, err: any, inputVal: string, formEl: HTMLElement) => void
+}

src/lib/component.ts

@@ -1,8 +1,8 @@
-import { ArtalkConfig } from '~/types/artalk-config'
-import Context from '../Context'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '../context'
 
 export default class Component {
-  public el!: HTMLElement
+  public $el!: HTMLElement
 
   public ctx: Context
   public readonly conf: ArtalkConfig

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

src/lib/ui.ts

@@ -1,45 +1,56 @@
 import * as Utils from './utils'
-import Context from '../Context'
+import Context from '../context'
 
 /** 显示加载 */
 export function showLoading(parentElem: HTMLElement|Context) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
+  if (parentElem instanceof Context) parentElem = parentElem.$root
 
-  let loadingEl = parentElem.querySelector<HTMLElement>('.atk-loading')
-  if (!loadingEl) {
-    loadingEl = Utils.createElement(`
-        <div class="atk-loading" 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>`)
-    parentElem.appendChild(loadingEl)
+  let $loading = parentElem.querySelector<HTMLElement>('.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>`)
+    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)
   }
-  loadingEl.style.display = ''
 }
 
 /** 隐藏加载 */
 export function hideLoading(parentElem: HTMLElement|Context) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
+  if (parentElem instanceof Context) parentElem = parentElem.$root
 
-  const loadingEl = parentElem.querySelector<HTMLElement>('.atk-loading')
-  if (loadingEl) loadingEl.style.display = 'none'
+  const $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
+  if ($loading) $loading.style.display = 'none'
 }
 
 /** 元素是否用户可见 */
-export function isVisible(elem: HTMLElement) {
-  const docViewTop = window.scrollY
-  const docViewBottom = docViewTop + document.documentElement.clientHeight
+export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
+  const viewportHeight = viewport.clientHeight
 
-  const elemTop = Utils.getOffset(elem).top
-  const elemBottom = elemTop + elem.offsetHeight
+  const docViewTop = viewport.scrollTop
+  const docViewBottom = docViewTop + viewportHeight
 
-  return elemBottom <= docViewBottom && elemTop >= docViewTop
+  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) {
-  if (isVisible(elem)) return
   const top =
     Utils.getOffset(elem).top +
     Utils.getHeight(elem) / 2 -
@@ -49,7 +60,7 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
     window.scroll({
       top: top > 0 ? top : 0,
       left: 0,
-      behavior: 'smooth',
+      // behavior: 'smooth',
     })
   } else {
     // 无动画
@@ -57,53 +68,6 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
   }
 }
 
-/** 显示对话框 */
-export function buildDialog (
-  html: HTMLElement,
-  onConfirm?: (btnElem: HTMLElement) => boolean | void,
-  onCancel?: () => boolean | void,
-): HTMLElement {
-  const dialogElem = 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-action">
-      </div>`
-  )
-
-  // 按钮
-  const actionElem = dialogElem.querySelector<HTMLElement>('.atk-layer-dialog-action')!
-  const onclick =
-    (f: (btnElem: HTMLElement) => boolean | void) =>
-    (evt: Event) => {
-      const returnVal = f(evt.currentTarget as HTMLElement)
-      if (returnVal === undefined || returnVal === true) {
-        dialogElem.remove()
-      }
-    }
-
-  if (typeof onConfirm === 'function') {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      '<button data-action="confirm">确定</button>'
-    )
-    btn.onclick = onclick(onConfirm)
-    actionElem.appendChild(btn)
-  }
-
-  if (typeof onCancel === 'function') {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      '<button data-action="cancel">取消</button>'
-    )
-    btn.onclick = onclick(onCancel)
-    actionElem.appendChild(btn)
-  }
-
-  // 内容
-  dialogElem.querySelector('.atk-layer-dialog-content')!.appendChild(html)
-
-  return dialogElem
-}
-
 /** 显示消息 */
 export function showNotify(
   wrapElem: HTMLElement,
@@ -168,8 +132,8 @@ export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
 }
 
 /** 设置全局错误 */
-export function setError(parentElem: HTMLElement|Context, html: string | HTMLElement | null) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
+export function setError(parentElem: HTMLElement|Context, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
+  if (parentElem instanceof Context) parentElem = parentElem.$root
 
   let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
   if (html === null) {
@@ -178,7 +142,7 @@ export function setError(parentElem: HTMLElement|Context, html: string | HTMLEle
   }
   if (!elem) {
     elem = Utils.createElement(
-      '<div class="atk-error-layer"><span class="atk-error-title">Artalk Error</span><span class="atk-error-text"></span></div>'
+      `<div class="atk-error-layer">${title}<span class="atk-error-text"></span></div>`
     )
     parentElem.appendChild(elem)
   }
@@ -193,3 +157,29 @@ export function setError(parentElem: HTMLElement|Context, html: string | HTMLEle
     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)
+}

src/lib/user.ts

@@ -1,13 +1,7 @@
-import { ArtalkConfig } from "~/types/artalk-config"
+import ArtalkConfig, { LocalUser } from "~/types/artalk-config"
 
 export default class User {
-  public data: {
-    nick: string,
-    email: string,
-    link: string,
-    token: string,
-    isAdmin: boolean
-  }
+  public data: LocalUser
 
   constructor (conf: ArtalkConfig) {
     // 从 localStorage 导入

src/lib/utils.ts

@@ -1,37 +1,38 @@
-import libMarked from 'marked'
+import { marked as libMarked } from 'marked'
+import insane from 'insane'
 import hanabi from 'hanabi'
-import Context from '../Context'
+import Context from '../context'
 
-export function createElement<E extends HTMLElement = HTMLElement> (htmlStr: string = ''): E {
+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) {
+export function getHeight(el: HTMLElement) {
   return parseFloat(getComputedStyle(el, null).height.replace('px', ''))
 }
 
-export function htmlEncode (str: string) {
+export function htmlEncode(str: string) {
   const temp = document.createElement('div')
   temp.innerText = str
   const output = temp.innerHTML
   return output
 }
 
-export function htmlDecode (str: string) {
+export function htmlDecode(str: string) {
   const temp = document.createElement('div')
   temp.innerHTML = str
   const output = temp.innerText
   return output
 }
 
-export function getQueryParam (name: string) {
+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) {
+export function getOffset(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   return {
     top: rect.top + window.scrollY,
@@ -39,7 +40,7 @@ export function getOffset (el: HTMLElement) {
   }
 }
 
-export function padWithZeros (vNumber: number, width: number) {
+export function padWithZeros(vNumber: number, width: number) {
   let numAsString = vNumber.toString()
   while (numAsString.length < width) {
     numAsString = `0${numAsString}`
@@ -47,7 +48,7 @@ export function padWithZeros (vNumber: number, width: number) {
   return numAsString
 }
 
-export function dateFormat (date: Date) {
+export function dateFormat(date: Date) {
   const vDay = padWithZeros(date.getDate(), 2)
   const vMonth = padWithZeros(date.getMonth() + 1, 2)
   const vYear = padWithZeros(date.getFullYear(), 2)
@@ -57,7 +58,7 @@ export function dateFormat (date: Date) {
   return `${vYear}-${vMonth}-${vDay}`
 }
 
-export function timeAgo (date: Date) {
+export function timeAgo(date: Date) {
   try {
     const oldTime = date.getTime()
     const currTime = new Date().getTime()
@@ -95,29 +96,47 @@ export function timeAgo (date: Date) {
   }
 }
 
+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));
 }
 
-let markedInstance: any = null
-export function marked (ctx: Context, src: string): string {
+/** 版本号比较（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
+}
+
+let markedInstance: typeof libMarked
+export function marked(ctx: Context, src: string): string {
   if (!markedInstance) {
     const renderer = new libMarked.Renderer()
     const linkRenderer = renderer.link
     renderer.link = (href, title, text) => {
-      const html = linkRenderer.call(renderer, href, title, text)
-      return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ')
+      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+      const html = linkRenderer.call(renderer as any, href, title, text);
+      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
     }
 
     const nMarked = libMarked
-    nMarked.setOptions({
+    libMarked.setOptions({
       renderer,
       highlight: (code) => hanabi(code),
       pedantic: false,
       gfm: true,
-      tables: true,
       breaks: true,
-      sanitize: true, // 净化
       smartLists: true,
       smartypants: true,
       xhtml: false
@@ -126,7 +145,14 @@ export function marked (ctx: Context, src: string): string {
     markedInstance = nMarked
   }
 
-  return markedInstance(src)
+  // 净化
+  src = insane(src, {
+    ...insane.defaults,
+    allowedAttributes: {
+      ...insane.defaults.allowedAttributes,
+      img: ['src', 'atk-emoticon']
+    },
+  })
 
-  return ''
+  return markedInstance.parse(src)
 }

src/main.ts

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

src/style/_color.less

@@ -2,6 +2,7 @@
   * {
     --at-color-font: #2a2e2e;
     --at-color-deep: #2a2e2e;
+    --at-color-sub: #757575;
     --at-color-grey: #999;
     --at-color-meta: #757e91;
     --at-color-border: #eceff2;
@@ -14,13 +15,16 @@
     --at-color-main: #0083ff;
     --at-color-red: #ff5652;
     --at-color-pink: #fa5a57;
-    --at-color-yellow: #ffa928;
+    --at-color-yellow: #ff7c37;
+    --at-color-green: #4caf50;
     --at-color-quote: #687a86;
+    --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255));
   }
 
   &.atk-dark-mode * {
     --at-color-font: #fff;
     --at-color-deep: #e7e7e7;
+    --at-color-sub: #e7e7e7;
     --at-color-grey: #fff;
     --at-color-meta: #fff;
     --at-color-border: #2d3235;
@@ -33,7 +37,9 @@
     --at-color-main: #0083ff;
     --at-color-red: #ff5652;
     --at-color-pink: #fa5a57;
-    --at-color-yellow: #ffa928;
+    --at-color-yellow: #ff7c37;
+    --at-color-green: #4caf50;
     --at-color-quote: #687a86;
+    --at-color-gradient: linear-gradient(180deg, rgba(30, 34, 36, 0), rgba(30, 34, 36, 1));
   }
 }

src/style/_extend.less

@@ -1,6 +1,7 @@
 .atk-slim-scrollbar() {
   &::-webkit-scrollbar {
     width: 4px;
+    height: 4px;
     background: transparent;
   }
 
@@ -17,3 +18,83 @@
     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: @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: @color-meta;
+  }
+
+  .atk-icon-yes {
+    background-color: @color-main;
+  }
+}

src/style/_variables.less

@@ -1,5 +1,6 @@
 @color-font: var(--at-color-font);
 @color-deep: var(--at-color-deep);
+@color-sub: var(--at-color-sub);
 @color-grey: var(--at-color-grey);
 @color-meta: var(--at-color-meta);
 @color-light: var(--at-color-light);
@@ -13,7 +14,9 @@
 @color-red: var(--at-color-red);
 @color-pink: var(--at-color-pink);
 @color-yellow: var(--at-color-yellow);
+@color-green: var(--at-color-green);
 @color-quote: var(--at-color-quote);
+@color-gradient: var(--at-color-gradient);
 
 @font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 @font-size: 14px;

src/style/comment.less

@@ -32,6 +32,10 @@
     &:hover {
       background: @color-bg-grey;
     }
+
+    .atk-comment-more-hide:after {
+      background: transparent !important;
+    }
   }
 
   &:last-child {
@@ -69,10 +73,15 @@
         align-items: center;
 
         .badge() {
+          color: @color-meta;
           background: @color-bg-grey;
           padding: 0 6px;
           line-height: 18px;
           border-radius: 3px;
+
+          &:not(:last-child) {
+            margin-right: 6px;
+          }
         }
 
         & > span {
@@ -84,22 +93,25 @@
             margin-right: 6px;
           }
 
-          &.atk-nick {
+          &.atk-nick, &.atk-nick > a {
             font-size: 14px;
+            color: @color-main;
+            text-decoration: none;
+          }
+        }
 
-            & > a {
-              color: @color-main;
-              text-decoration: none;
-            }
+        .atk-badge {
+          .badge();
+          background: #FF6C00;
+          color: #FFF;
+        }
+
+        .atk-ua-wrap {
+          @media only screen and (max-width: 768px) {
+            display: block;
           }
 
-          &.atk-badge {
-            .badge();
-            background: #FF6C00;
-            color: #FFF;
-          }
-
-          &.atk-ua {
+          .atk-ua {
             .badge();
           }
         }
@@ -132,6 +144,10 @@
           & > *:last-child {
             margin-bottom: 0;
           }
+
+          .atk-more-hide-open-btn {
+            bottom: 5px;
+          }
         }
 
         & > .atk-pending {
@@ -148,6 +164,7 @@
           padding: 5px 15px;
           border-left: 3px solid #eee;
           margin-bottom: 10px;
+          position: relative;
 
           & > .atk-meta {
             font-size: 15px;
@@ -184,19 +201,6 @@
             }
           }
         }
-
-        &.atk-read-more-mask:after {
-          pointer-events: none;
-          position: absolute;
-          z-index: 1;
-          display: block;
-          overflow: hidden;
-          width: 100%;
-          content: " ";
-          bottom: 0;
-          height: 41px;
-          background: linear-gradient(180deg, hsla(0,0%,100%,0), hsla(0,0%,100%,1));
-        }
       }
 
       & > .atk-footer {
@@ -251,15 +255,47 @@
         width: 36px;
         height: 36px;
       }
+
+      & > .atk-comment-main {
+        margin-left: 47px;
+      }
     }
   }
 
   .atk-comment-children {
     .atk-comment-wrap {
       margin-top: 10px;
-      border-left: 1px dashed hsla(0,0%,93%,.5);
+      border-left: 1px dashed var(--at-color-border);
 
       .comment-small-size()
     }
   }
+
+  .atk-comment-more-hide:after {
+    position: absolute;
+    z-index: 1;
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    content: " ";
+    bottom: 0;
+    height: 80px;
+    background: @color-gradient;
+  }
+
+  .atk-more-hide-open-btn {
+    z-index: 10;
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    cursor: pointer;
+    border: 1px solid @color-border;
+    border-radius: @block-radius;
+    background: @color-bg;
+    padding: 1px 20px;
+    font-size: 15px;
+    color: @color-meta;
+    user-select: none;
+  }
 }

src/style/editor.less

@@ -20,6 +20,7 @@
     padding-bottom: 0;
 
     input {
+      font-size: 14px;
       border: 2px solid transparent;
       transition: color .3s ease;
       flex: 1;
@@ -38,6 +39,7 @@
 
   & > .atk-editor-textarea-wrap {
     .atk-editor-textarea {
+      font-size: 15px;
       color: @color-font;
       background-color: @color-bg;
       margin-top: 2px;
@@ -78,21 +80,20 @@
       }
     }
 
-    .atk-send-reply-wrap {
-      position: relative;
-      padding: 0 10px;
-    }
-
     .atk-send-reply {
-      position: relative;
-      display: inline-block;
-      font-size: 14px;
+      z-index: 2;
+      position: absolute;
+      right: 10px;
+      bottom: 40px;
+      max-width: calc(100% - 20px);
       height: 30px;
       line-height: 30px;
+      font-size: 14px;
       background: @color-bg-grey-transl;
       padding: 0 30px 0 10px;
-      z-index: 2;
-      user-select: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       cursor: pointer;
 
       .atk-text {
@@ -186,6 +187,7 @@
       transition: opacity .3s ease-in-out;
       outline: none;
       font-size: @font-size;
+      margin: 0;
 
       &:active {
         opacity: .9;

src/style/item-text-editor.less

@@ -0,0 +1,35 @@
+.atk-item-text-editor-layer {
+  z-index: 999;
+  background: @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 @color-border;
+      outline: none;
+      background: transparent;
+
+      &.atk-invalid {}
+    }
+  }
+
+  .atk-actions {
+    .atk-list-btn-actions();
+
+    .atk-yes-btn.atk-disabled {}
+  }
+}

src/style/list.less

@@ -66,16 +66,23 @@
   }
 
   & > .atk-list-footer {
-    position: relative;
-    overflow: hidden;
+    z-index: 100;
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+
+    @media only screen and (max-width: 768px) {
+      position: relative;
+      margin-top: 10px;
+      text-align: center;
+    }
 
     .atk-copyright {
       display: block;
-      font-size: 13px;
-      float: right;
-      color: @color-main;
-      padding: 0 10px;
-      border-radius: 2px;
+      font-size: 12px;
+      color: @color-meta;
+      padding-right: 15px;
+      margin-top: 5px;
 
       a {
         color: @color-main;
@@ -94,36 +101,49 @@
 }
 
 .atk-list-read-more {
-  margin-bottom: 12px;
-  cursor: pointer;
-  user-select: none;
-  border: 1px solid @color-border;
-  padding: 0 20px;
-  font-size: @font-size;
-  border-radius: @block-radius;
-  display: flex;
-  height: 30px;
-  flex-direction: row;
-  place-content: center;
-  align-items: center;
+  border-top: 1px dashed @color-border;
+  margin-top: 20px;
+  padding-bottom: 20px;
 
-  &.atk-err > .atk-text {
-    color: @color-red !important;
+  @media only screen and (max-width: 768px) {
+    padding-bottom: 10px;
   }
 
-  & > .atk-loading-icon {
-    height: 15px;
-    width: 15px;
-  }
+  .atk-list-read-more-inner {
+    cursor: pointer;
+    user-select: none;
+    padding: 0 15px;
+    font-size: @font-size;
+    border-radius: @block-radius;
+    border: 1px solid transparent;
+    display: flex;
+    height: 30px;
+    flex-direction: row;
+    place-content: center;
+    align-items: center;
+    width: 120px;
+    margin: 0 auto;
+    margin-top: -15px;
+    background: @color-bg;
+    border-color: @color-border;
 
-  & > .atk-text {
-    color: @color-meta;
-  }
+    &.atk-err > .atk-text {
+      color: @color-red !important;
+    }
+
+    & > .atk-loading-icon {
+      height: 15px;
+      width: 15px;
+    }
 
-  &:hover {
-    background-color: @color-border;
     & > .atk-text {
-      color: @color-main;
+      color: @color-meta;
+    }
+
+    &:hover {
+      & > .atk-text {
+        color: @color-main;
+      }
     }
   }
 }

src/style/main.less

@@ -167,6 +167,41 @@
   0% {}
 }
 
+i.atk-icon {
+  width: 20px;
+  height: 20px;
+  background-color: @color-deep;
+  background-size: contain;
+  background-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+.atk-icon-sync {
+  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99133 4.87635C2.22512 7.64257 2.22512 12.1275 4.99133 14.8937C6.04677 15.9491 7.3524 16.6019 8.71732 16.8519' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M14.4179 15.4815L15.0072 14.8922C17.7734 12.126 17.7734 7.64107 15.0072 4.87486C13.9518 3.81942 12.6461 3.16668 11.2812 2.91664' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M6.17106 4.99252L5.58181 4.40327L4.99255 3.81401H6.17106V4.99252Z' fill='%23C4C4C4' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M13.8299 15.0084L14.4192 15.5976L15.0084 16.1869H13.8299V15.0084Z' fill='%23C4C4C4' stroke='%234E5969' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.atk-icon-del {
+  background-color: @color-red !important;
+  mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.29167 5.04166L4.81251 5.04166M4.81251 5.04166L4.81251 18.3333C4.81251 18.5865 5.01771 18.7917 5.27084 18.7917L16.7292 18.7917C16.9823 18.7917 17.1875 18.5865 17.1875 18.3333V5.04166M4.81251 5.04166L7.33334 5.04166M17.1875 5.04166L19.7083 5.04166M17.1875 5.04166L14.6667 5.04166M7.33334 5.04166V3.20833L14.6667 3.20833V5.04166M7.33334 5.04166L14.6667 5.04166' stroke='%23D06565' stroke-width='2'/%3E%3Cpath d='M9.16667 8.25V15.125M12.8333 8.25V15.125' stroke='%23D06565' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.atk-icon-edit {
+  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.70618 4.08515L12.6081 7.06376M1.00041 13.021L11.7376 2L14.6392 4.97861L3.90274 16H1L1.00041 13.021Z' stroke='%234E5969' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.atk-icon-no, .atk-icon-close {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M19.8657 5.13431L12.5 12.5L5.13431 19.8657' stroke='%234E5969'/%3E%3Cpath d='M5.13431 5.13432L12.5 12.5L19.8657 19.8657' stroke='%234E5969'/%3E%3C/svg%3E");
+}
+
+.atk-icon-yes {
+  mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.7071 5.75533L9.92197 17.5404L3.29285 10.9113' stroke='%234E5969'/%3E%3C/svg%3E");
+}
+
+.atk-icon-plus {
+  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.08331 10H17.9166' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M10 2.08334L10 17.9167' stroke='%234E5969' stroke-width='2'/%3E%3C/svg%3E");
+}
+
 /* Layer */
 .atk-error-layer {
   &:extend(.atk-full-layer);
@@ -176,9 +211,29 @@
     color: @color-red;
   }
 
+  .atk-warn-title {
+    color: @color-yellow;
+  }
+
+  .atk-error-title, .atk-warn-title {
+    display: inline-block;
+    padding: 0 15px;
+    margin-bottom: 20px;
+    font-size: 20px;
+    letter-spacing: -0.5px;
+  }
+
   .atk-error-text {
     text-align: center;
     padding: 0 20px;
+
+    * {
+      color: @color-deep;
+    }
+
+    a {
+      color: @color-meta;
+    }
   }
 }
 
@@ -216,7 +271,7 @@
       }
     }
 
-    & > .atk-layer-dialog-action {
+    & > .atk-layer-dialog-actions {
       display: flex;
       flex-direction: row;
 
@@ -296,3 +351,26 @@
     height: 100%;
   }
 }
+
+/* Common Action Btn */
+.atk-common-action-btn {
+  &.atk-btn-confirm {
+    color: @color-yellow !important;
+  }
+
+  &.atk-btn-warn {
+    color: @color-yellow !important;
+  }
+
+  &.atk-btn-error {
+    color: @color-red !important;
+  }
+
+  &.atk-btn-success {
+    color: @color-green !important;
+  }
+}
+
+img[atk-emoticon] {
+  max-height: 60px;
+}

src/style/page-list.less

@@ -0,0 +1,50 @@
+.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 @color-border;
+    }
+  }
+
+  .atk-page-main {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    padding: 20px 30px;
+
+    .atk-title {
+      color: @color-font;
+      font-size: 21px;
+      margin-bottom: 10px;
+    }
+
+    .atk-sub {
+      color: @color-sub;
+      font-size: 14px;
+    }
+  }
+
+  .atk-page-main-actions {
+    .atk-list-text-actions();
+  }
+
+  .atk-page-actions {
+    .atk-list-btn-actions();
+  }
+
+  .atk-page-edit-layer {
+    z-index: 999;
+    background: @color-bg;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}

src/style/pagination.less

@@ -0,0 +1,58 @@
+.atk-pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 0;
+  position: relative;
+
+  & > .atk-btn,
+  & > .atk-input {
+    font-size: 15px;
+    height: 32px;
+    border: 1px solid @color-border;
+    border-radius: 3px;
+    padding: 0 5px;
+    text-align: center;
+    background: @color-bg;
+  }
+
+  & > .atk-btn {
+    user-select: none;
+    width: 70px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: @color-bg-grey;
+    }
+
+    &.atk-disabled {
+      color: @color-sub;
+
+      &:hover {
+        cursor: default;
+        background: initial;
+      }
+    }
+  }
+
+  & > .atk-input {
+    background: transparent;
+    color: @color-font;
+    font-size: 18px;
+    width: 60px;
+    outline: none;
+
+    &:focus {
+      border-color: @color-main;
+    }
+  }
+
+  & > * {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

src/style/sidebar.less

@@ -1,5 +1,8 @@
+@header-height: 60px;
+@nav-height: 40px;
+
 .atk-sidebar {
-  @width: 450px;
+  @width: 430px;
   position: fixed;
   z-index: 99999;
   top: 0;
@@ -18,86 +21,247 @@
 
   .atk-sidebar-inner {
     position: relative;
+  }
 
-    .atk-sidebar-title-wrap {
-      padding: 15px 35px 10px 20px;
+  // Header
+  .atk-sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid @color-border;
 
-      .atk-title-item {
+    .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: @color-meta;
+        text-align: center;
+        line-height: @height;
+        font-size: 13px;
+        color: @color-bg;
+      }
+
+      .atk-site-logo {
         user-select: none;
-        font-size: 17px;
         cursor: pointer;
-        color: var(--at-color-font);
+      }
+    }
 
-        &.atk-active {
-          color: var(--at-color-font) !important;
-          font-size: 23px;
-          cursor: initial;
-        }
+    .atk-menu {
+      flex: auto;
+      text-align: center;
 
-        &:hover {
-          color: var(--at-color-main);
-        }
+      .atk-item {
+        position: relative;
+        color: @color-sub;
+        font-size: 20px;
+        // cursor: pointer;
+        user-select: none;
 
         &:not(:last-child) {
-          margin-right: 25px;
+          margin-right: 20px;
+        }
+
+        &.atk-active {
+          color: @color-font;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background: @color-main;
+            opacity: .4;
+          }
         }
       }
     }
 
     .atk-sidebar-close {
-      position: absolute;
       display: flex;
-      right: 10px;
-      top: 10px;
-      width: 40px;
-      height: 40px;
+      flex-direction: column;
+      width: @header-height;
+      height: @header-height;
       align-items: center;
       place-content: center;
       cursor: pointer;
       user-select: none;
+      margin-left: 10px;
 
-      &:hover {
-        background: rgba(232, 17, 35, 0.9);
-        svg {
-          fill: #fff;
-        }
-      }
-
-      & svg {
-        fill: @color-font;
+      &:hover .atk-icon-close {
+        background-color: rgba(232, 17, 35, 0.9);
       }
     }
   }
 
-  .atk-sidebar-actions {
+  // Nav
+  .atk-sidebar-nav {
     display: flex;
     flex-direction: row;
     border-bottom: 1px solid @color-border;
+    height: @nav-height + 1px;
 
-    .atk-action-item {
+    .akt-curt-view-btn {
       display: flex;
-      flex-grow: 1;
-      scroll-snap-align: start;
-      place-content: center;
-      line-height: 40px;
+      align-items: center;
+      padding: 0 20px;
+      border-right: 1px solid @color-border;
       cursor: pointer;
       user-select: none;
+      height: @nav-height;
+      line-height: @nav-height;
+      white-space: nowrap;
 
       &:hover {
         background: @color-bg-grey;
       }
 
-      &.atk-active {
-        color: @color-main;
-        font-weight: bold;
+      .atk-icon {
+        width: 17px;
+
+        span {
+          position: relative;
+          display: block;
+          width: 14px;
+          height: 1px;
+          margin: 0 auto 4px;
+          background: @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: @color-sub;
+        cursor: pointer;
+        user-select: none;
+        padding: 0 20px;
+        white-space: nowrap;
+
+        &:hover {
+          background: @color-bg-grey;
+        }
+
+        &.atk-active {
+          color: @color-deep;
+        }
       }
     }
   }
 
-  .atk-sidebar-content {
+  .atk-site-list-floater {
+    .atk-slim-scrollbar();
+
+    position: absolute;
+    z-index: 9999;
+    left: 50%;
+    top: 70px;
+    transform: translateX(-50%);
+    pointer-events: all;
+    background: @color-bg;
+    width: 80%;
+    max-height: 40%;
+    margin: 0 auto;
+    border: 1px solid @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: @color-meta;
+          margin: 10px;
+          border-radius: 3px;
+          text-align: center;
+          color: @color-bg;
+          font-size: 12px;
+        }
+
+        .atk-site-name {
+          color: @color-font;
+          font-size: 17px;
+          margin-left: 7px;
+        }
+
+        &.atk-active, &:hover {
+          background: @color-bg-grey;
+        }
+      }
+    }
+  }
+
+  .atk-sidebar-view-wrap {
     position: relative;
     overflow-y: auto;
-    height: calc(100vh - 102px);
+    height: calc(100vh - @header-height - @nav-height - 2px);
+    .atk-slim-scrollbar();
 
     .atk-sidebar-no-content {
       position: absolute;
@@ -114,189 +278,143 @@
     }
   }
 
-  .atk-filter-bar {
-    padding: 0 15px;
-    font-size: 15px;
+  .atk-form {
+    @form-height: 35px;
 
-    & > span {
-      display: inline-block;
-      padding: 3px 13px;
-      cursor: pointer;
-      user-select: none;
-      border-radius: 50px;
+    padding: 20px 30px;
 
-      &:hover {
-        color: #4285f4;
-        background: @color-bg-grey;
-      }
-
-      &.atk-active {
-        background: @color-bg-light;
-        color: @color-light;
-      }
-
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
+    .atk-label {
+      font-size: 16px;
+      margin-bottom: 12px;
+      color: @color-font;
     }
 
-    &:not(:last-child) {
-      padding-top: 8px;
-    }
-  }
-
-  .atk-form-inline-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-
-    input, select, button {
-      display: inline !important;
-      min-width: initial !important;
-
-      @media only screen and (max-width: 768px) {
-        & {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .atk-form-wrap, .atk-form-inline-wrap {
-    input, select {
-      min-width: 200px;
-    }
-
-    input {
+    .atk-desc {
+      font-size: 14px;
+      margin-top: 12px;
+      margin-left: 15px;
+      margin-bottom: 20px;
       display: block;
-      line-height: 30px;
+      color: @color-meta;
+
+      a {
+        opacity: 0.8;
+      }
+    }
+
+    input, textarea {
+      display: block;
+      line-height: @form-height;
       padding: 0 10px;
-      margin: 0 2px;
+      margin: 0;
       border: none;
-      border-bottom: 1px solid @color-border;
+      border-bottom: 2px solid @color-border;
       outline: none;
+      width: 100%;
+      margin-bottom: 25px;
+      background: @color-bg;
 
       &:focus {
-        border-bottom-color: @color-main;
+        border-bottom-color: @color-bg-light;
       }
 
       &[type="file"] {
-        width: 200px;
+        border-radius: 2px;
+        background: transparent;
+        border-bottom: 2px solid @color-border;
         cursor: pointer;
         position: relative;
+        padding: 0 15px;
+        margin-bottom: 30px;
       }
     }
 
+    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: 1px solid @color-border;
-      height: 30px;
-      padding: 0 10px;
+      border-bottom: 2px solid @color-border;
+      margin-bottom: 25px;
+      -webkit-appearance: none;
+      border-radius: 0;
+      background: @color-bg;
     }
 
     button {
       &:hover {
-        color: #fff;
-        background: @color-main;
+        background: @color-bg-light;
       }
 
+      text-align: center;
       color: @color-light;
-      background: @color-bg-light;
-      border: 0;
-      line-height: 30px;
+      background: transparent;
+      border: 2px solid @color-bg-light;
+      line-height: @form-height;
+      letter-spacing: 2em;
+      text-indent: 2em; // center
       cursor: pointer;
       outline: none;
       padding: 0 20px;
-      border-radius: 2px;
+      border-radius: 4px;
       margin: 0 5px;
+      width: 100%;
+    }
+
+    input, select, button {
+      font-size: 15px;
     }
   }
-}
 
-/* Sidebar Common List */
-.atk-sidebar .atk-sidebar-list {
-  & > .atk-item {
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 20px;
-    flex-direction: column;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid @color-border;
-    }
-
-    .atk-title {
-      font-size: 20px;
-      display: block;
+  .atk-log-wrap {
+    .atk-log-back-btn {
+      display: inline-block;
+      padding: 5px 33px;
       cursor: pointer;
-
+      user-select: none;
+      border-right: 1px solid @color-border;
+      border-left: 1px solid transparent;
       &:hover {
-        color: @color-main;
+        background: #f4f4f4;
       }
     }
 
-    .atk-sub {
-      display: block;
-      color: @color-meta;
-      cursor: pointer;
+    .atk-log {}
 
-      &:hover {
-        color: @color-main;
-      }
-    }
-
-    .atk-actions {
-      display: flex;
-      margin-top: 10px;
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      & > .atk-item {
-        font-size: 14px;
-        color: @color-meta;
-        cursor: pointer;
-        user-select: none;
-
-        &:not(:last-child) {
-          margin-right: 10px;
-          padding-right: 10px;
-          border-right: 1px solid @color-border;
-        }
-
-        &:hover {
-          color: @color-main;
-        }
-      }
+    .atk-iframe {
+      width: 100%;
+      height: calc(100vh - 150px);
+      border: 0;
+      background: #f4f4f4;
+      border: 3px solid #eee;
     }
   }
 }
 
-.atk-sidebar .atk-setting {
-  .atk-group {
-    padding: 15px 25px;
+.atk-view-name-pages, .atk-view-name-comments {
+  padding-bottom: 55px;
 
-    &:not(:last-child) {
-      border-bottom: 1px solid @color-border;
-    }
+  .atk-pagination-wrap {
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: @color-bg;
+    border-top: 1px solid @color-border;
   }
 
-  .atk-title {
-    font-size: 20px;
-    margin-bottom: 10px;
-  }
-
-  .atk-label {
-    font-size: 16px;
-    margin-top: 10px;
-    margin-bottom: 2px;
-    color: @color-meta;
-  }
-
-  .atk-btn {
-    padding: 4px 25px;
-    margin-top: 20px;
+  .atk-list-read-more {
+    margin-top: 30px;
+    margin-bottom: -40px;
   }
 }

src/style/site-list.less

@@ -0,0 +1,208 @@
+.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: @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: @color-quote;
+        color: #fff;
+        border-radius: 4px;
+      }
+
+      .atk-site-name {
+        text-align: center;
+        font-size: 15px;
+        color: @color-sub;
+        padding: 0 17px;
+        word-break: break-word;
+      }
+
+      &.atk-active {
+        background-color: @color-bg-grey;
+        border: 1px solid @color-border;
+        margin-top: -1px;
+        border-radius: 0 0 4px 4px;
+
+        .atk-site-name {
+          color: @color-deep;
+        }
+      }
+
+      &:hover {
+        .atk-site-name {
+          color: @color-font;
+        }
+      }
+    }
+  }
+
+  .atk-site-edit, .atk-site-add {
+    position: relative;
+    min-height: 120px;
+    width: 100%;
+    border-top: 1px solid @color-border;
+    border-bottom: 1px solid @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;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            background: @color-main;
+            opacity: .4;
+            left: 0;
+            bottom: 6px;
+          }
+        }
+
+        .atk-site-urls {
+          display: flex;
+          width: 100%;
+          margin-top: 6px;
+          flex-wrap: wrap;
+          min-height: 23px;
+
+          .atk-url-item {
+            background: @color-bg-grey;
+            color: @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: @color-red;
+        }
+      }
+    }
+
+    .atk-main {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      padding: 20px 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;
+    }
+  }
+}

types/artalk-config.d.ts

@@ -1,79 +1,96 @@
-export interface ArtalkConfig {
-  /**
-   * 装载元素
-   */
+export default interface ArtalkConfig {
+  /** 装载元素 */
   el: string
 
-  /**
-   * 评论框占位字符
-   */
+  /** 评论框占位字符 */
   placeholder?: string
 
-  /**
-   * 评论为空时显示字符
-   */
+  /** 评论为空时显示字符 */
   noComment?: string
 
-  /**
-   * 发送按钮文字
-   */
+  /** 发送按钮文字 */
   sendBtn?: string
 
-  /**
-   * 默认头像（URL or Gravatar Type）
-   */
-  defaultAvatar?: string
-
-  /**
-   * 页面唯一标识
-   */
+  /** 页面唯一标识（完整 URL） */
   pageKey: string
 
-  /**
-   * 页面可访问链接
-   */
-  pageUrl?: string
-
-  /**
-   * 页面标题
-   */
+  /** 页面标题 */
   pageTitle?: string
 
-  /**
-   * 服务器地址
-   */
+  /** 服务器地址 */
   server: string
- 
-  /**
-   * 站点名
-   */
+
+  /** 站点名 */
   site?: string
 
-  /**
-   * 表情包
-   */
-  emoticons?: object|any
+  /** 表情包 */
+  emoticons?: any
 
-  /**
-   * 头像
-   */
+  /** Gravatar 头像 */
   gravatar?: {
-    /** CDN 地址 */
-    cdn?: string
+    /** 镜像 */
+    mirror?: string
+    /** 默认头像（URL or Gravatar Type） */
+    default?: string
   }
 
-  /**
-   * 查看更多配置
-   */
-  readMore?: {
+  /** 分页配置 */
+  pagination?: {
     /** 每次请求获取数量 */
     pageSize?: number
+    /** 阅读更多模式 */
+    readMore?: boolean
     /** 滚动到底部自动加载 */
     autoLoad?: boolean
   }
 
-  /**
-   * 暗黑模式
-   */
+  /** 内容限高 */
+  heightLimit: {
+    /** 评论内容限高 */
+    content?: number
+
+    /** 子评论区域限高 */
+    children?: number
+  }
+
+  /** 评论投票按钮 */
+  vote?: boolean
+
+  /** 评论投票反对按钮 */
+  voteDown?: boolean
+
+  /** 暗黑模式 */
   darkMode?: boolean
+
+  /** 请求超时（单位：秒） */
+  reqTimeout?: number
+
+  /** 平铺模式 */
+  flatMode?: boolean|'auto'
+
+  /** 最大嵌套数 */
+  maxNesting?: number
+
+  /** 显示 UA 徽标 */
+  uaBadge?: boolean
+
+  /** 版本检测 */
+  versionCheck?: boolean
+}
+
+export interface LocalUser {
+  /** 昵称 */
+  nick: string
+
+  /** 邮箱 */
+  email: string
+
+  /** 链接 */
+  link: string
+
+  /** TOKEN */
+  token: string
+
+  /** 是否为管理员 */
+  isAdmin: boolean
 }

types/artalk-data.d.ts

@@ -47,9 +47,6 @@ export interface CommentData {
   /** 评论页面 url */
   page_url?: string
 
-  /** 评论页面 title */
-  page_title?: string
-
   /** 是否可见 */
   visible: boolean
 
@@ -76,11 +73,17 @@ export interface ListData {
   /** 页面信息 */
   page: PageData
 
+  /** 站点信息 */
+  site: SiteData
+
+  /** 未读的 Notifies */
   unread: NotifyData[]
 
+  /** 未读计数 */
   unread_count: number
 
-  sites?: SiteData[]
+  /** API 版本 */
+  api_version: ApiVersionData
 }
 
 export interface PageData {
@@ -101,6 +104,12 @@ export interface PageData {
 
   /** 站点名（用于隔离） */
   site_name: string
+
+  /** 赞同数 */
+  vote_up: number
+
+  /** 反对数 */
+  vote_down: number
 }
 
 export interface SiteData {
@@ -144,10 +153,43 @@ export interface UserData {
 }
 
 export interface NotifyData {
+  /** 通知 ID */
   id: number
+
+  /** 用户 ID */
   user_id: number
+
+  /** 评论 ID */
   comment_id: number
+
+  /** 是否已读 */
   is_read: boolean
+
+  /** 是否已发送邮件通知 */
   is_emailed: boolean
+
+  /** 标为已读地址 */
   read_link: string
 }
+
+export type EmoticonGrpData = {
+  name: string,
+  type: 'emoticon'|'image'|'emoji'
+  items: {key: string, val: string}[]
+}
+
+export type EmoticonListData = EmoticonGrpData[]
+
+export interface ApiVersionData {
+  /** API 程序名 */
+  app: string
+
+  /** API 程序版本号 */
+  version: string
+
+  /** API 程序 CommitHash */
+  commit_hash: string
+
+    /** API 程序要求前端最小版本 */
+  fe_min_version: string
+}

types/event.d.ts

@@ -0,0 +1,73 @@
+import { ListData, CommentData, NotifyData } from './artalk-data'
+import { LocalUser } from './artalk-config'
+
+/** EventName to EventPayload Type */
+export interface EventPayloadMap {
+  'comments-load': undefined       // 评论加载时
+  'comments-loaded': undefined     // 评论装载后
+  'editor-submit': undefined       // 编辑器提交时
+  'editor-submitted': undefined    // 编辑器提交后
+  'user-changed': LocalUser        // 本地用户数据变更时
+
+  // List 操作（外部：不建议 listen，仅 trigger）
+  'list-reload': undefined         // 重新加载 List
+  'list-import': CommentData[]     // 评论导入
+  'list-insert': CommentData       // 评论添加
+  'list-delete': CommentData       // 评论删除
+  'list-update': ListUpdatePayload // 更新评论数据
+  'list-refresh-ui': undefined     // 刷新 List UI
+
+  // Sidebar
+  'sidebar-show': undefined           // 侧边栏显示
+  'sidebar-hide': undefined           // 侧边栏隐藏
+
+  // Editor
+  'editor-open': undefined            // 打开评论
+  'editor-close': undefined           // 关闭评论
+  'editor-show-loading': undefined    // 加载显示
+  'editor-hide-loading': undefined    // 加载隐藏
+  'editor-notify': NotifyConf         // 显示提示
+  'editor-reply': CommentData         // 设置回复
+
+  // Notify
+  'unread-update': UnreadUpdatePayload // 未读数据更新
+
+  // Checker
+  'checker-admin': CheckerPayload           // 检查管理员
+  'checker-captcha': CheckerCaptchaPayload  // 检查验证码
+  'check-admin-show-el': undefined          // 检查并更新仅管理员显示的元素
+}
+
+export interface CheckerPayload {
+  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
+  onMount?: (dialogEl: HTMLElement) => void
+  onCancel?: () => void
+}
+
+export interface NotifyConf {
+  msg: string
+  type: any
+}
+
+export interface CheckerCaptchaPayload extends CheckerPayload {
+  imgData?: string
+}
+
+export interface UnreadUpdatePayload {
+  notifies: NotifyData[]
+}
+
+export type ListUpdatePayload = (data: ListData | undefined) => void
+
+// ============================================
+export interface Handler<P> {
+  (payload: P): void
+}
+
+export type EventScopeType = 'internal'|'external'
+
+export interface Event<K extends keyof EventPayloadMap = keyof EventPayloadMap> {
+  name: keyof EventPayloadMap
+  handler: Handler<EventPayloadMap[K]>
+  scope: EventScopeType
+}

types/index.d.ts

@@ -1,8 +1,3 @@
-import { ArtalkConfig } from "./artalk-config"
+import Artalk from '../src/artalk'
 
-declare class Artalk {
-  constructor (conf: ArtalkConfig)
-}
-
-export as namespace Artalk
 export default Artalk

vite.config.ts

@@ -1,18 +1,17 @@
 import { defineConfig } from 'vite'
 import { resolve } from 'path'
-import dts from 'vite-plugin-dts'
 import commonConf from './vite-common.config'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
   build: {
-    target: 'esnext',
+    target: 'es2015',
     outDir: resolve(__dirname, "dist"),
-    minify: true,
+    minify: 'terser',
     lib: {
       entry: resolve(__dirname, 'src/main.ts'),
       name: 'Artalk',
-      fileName: (format) => `Artalk.${format}.js`,
+      fileName: (format) => ((format == "umd") ? 'Artalk.js' : `Artalk.${format}.js`),
       formats: ["es", "umd", "iife"]
     },
     rollupOptions: {
@@ -32,6 +31,6 @@ export default defineConfig({
       }
     }
   },
-  plugins: [dts(), tsconfigPaths()],
+  plugins: [tsconfigPaths()],
   ...commonConf
 })

yarn.lock

@@ -64,10 +64,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@rollup/plugin-dynamic-import-vars@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-dynamic-import-vars/-/plugin-dynamic-import-vars-1.4.0.tgz#f95ffc4d0bfa55fe0113a1b8e03a48e9354d28f6"
-  integrity sha512-oDeBDYJkD+VleSqSmWZo4h7iMHFYgEx/XVnJJZhCGuqkrS9QwOubESyWMqujBuUMeIByv954RvBTFvkAKlLh4A==
+"@rollup/plugin-dynamic-import-vars@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-dynamic-import-vars/-/plugin-dynamic-import-vars-1.4.1.tgz#ef6d042cd826ba05df6975c8a2612700cf0820ce"
+  integrity sha512-izHpMs9w8U8CLwyHTXE55H4ytGVaf2ZtlKIWxKigghw6ZC6Mx6AXCsixSY6JOchuX9BN4ZkeN8egLRTS+BxO+w==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     estree-walker "^2.0.1"
@@ -83,22 +83,12 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@ts-morph/common@~0.10.1":
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/@ts-morph/common/-/common-0.10.1.tgz#be15b9ab13a32bbc1f6a6bd7dc056b2247b272eb"
-  integrity sha512-rKN/VtZUUlW4M+6vjLFSaFc1Z9sK+1hh0832ucPtPkXqOw/mSWE80Lau4z2zTPNTqtxAjfZbvKpQcEwJy0KIEg==
-  dependencies:
-    fast-glob "^3.2.5"
-    minimatch "^3.0.4"
-    mkdirp "^1.0.4"
-    path-browserify "^1.0.1"
-
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/json-schema@^7.0.7":
+"@types/json-schema@^7.0.9":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -108,84 +98,85 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/marked@0.6.5":
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.6.5.tgz#3cf2a56ef615dad24aaf99784ef90a9eba4e29d8"
-  integrity sha512-6kBKf64aVfx93UJrcyEZ+OBM5nGv4RLsI6sR1Ar34bpgvGVRoyTgpxn4ZmtxOM5aDTAaaznYuYUH8bUX3Nk3YA==
+"@types/marked@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.1.tgz#d588a7bbc4d6551c5e75249bc106ffda96ae33c5"
+  integrity sha512-ZigEmCWdNUU7IjZEuQ/iaimYdDHWHfTe3kg8ORfKjyGYd9RWumPoOJRQXB0bO+XLkNwzCthW3wUIQtANaEZ1ag==
 
-"@types/node@^16.7.5":
-  version "16.9.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
-  integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
+"@types/node@^16.11.7":
+  version "16.11.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42"
+  integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw==
 
-"@typescript-eslint/eslint-plugin@^4.29.3":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.1.tgz#e938603a136f01dcabeece069da5fb2e331d4498"
-  integrity sha512-UDqhWmd5i0TvPLmbK5xY3UZB0zEGseF+DHPghZ37Sb83Qd3p8ujhvAtkU4OF46Ka5Pm5kWvFIx0cCTBFKo0alA==
+"@typescript-eslint/eslint-plugin@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.4.0.tgz#05e711a2e7b68342661fde61bccbd1531c19521a"
+  integrity sha512-9/yPSBlwzsetCsGEn9j24D8vGQgJkOTr4oMLas/w886ZtzKIs1iyoqFrwsX2fqYEeUwsdBpC21gcjRGo57u0eg==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.31.1"
-    "@typescript-eslint/scope-manager" "4.31.1"
-    debug "^4.3.1"
+    "@typescript-eslint/experimental-utils" "5.4.0"
+    "@typescript-eslint/scope-manager" "5.4.0"
+    debug "^4.3.2"
     functional-red-black-tree "^1.0.1"
-    regexpp "^3.1.0"
+    ignore "^5.1.8"
+    regexpp "^3.2.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.1.tgz#0c900f832f270b88e13e51753647b02d08371ce5"
-  integrity sha512-NtoPsqmcSsWty0mcL5nTZXMf7Ei0Xr2MT8jWjXMVgRK0/1qeQ2jZzLFUh4QtyJ4+/lPUyMw5cSfeeME+Zrtp9Q==
+"@typescript-eslint/experimental-utils@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.4.0.tgz#238a7418d2da3b24874ba35385eb21cc61d2a65e"
+  integrity sha512-Nz2JDIQUdmIGd6p33A+naQmwfkU5KVTLb/5lTk+tLVTDacZKoGQisj8UCxk7onJcrgjIvr8xWqkYI+DbI3TfXg==
   dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.31.1"
-    "@typescript-eslint/types" "4.31.1"
-    "@typescript-eslint/typescript-estree" "4.31.1"
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.4.0"
+    "@typescript-eslint/types" "5.4.0"
+    "@typescript-eslint/typescript-estree" "5.4.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.1.tgz#8f9a2672033e6f6d33b1c0260eebdc0ddf539064"
-  integrity sha512-dnVZDB6FhpIby6yVbHkwTKkn2ypjVIfAR9nh+kYsA/ZL0JlTsd22BiDjouotisY3Irmd3OW1qlk9EI5R8GrvRQ==
+"@typescript-eslint/parser@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.4.0.tgz#3aa83ce349d66e39b84151f6d5464928044ca9e3"
+  integrity sha512-JoB41EmxiYpaEsRwpZEYAJ9XQURPFer8hpkIW9GiaspVLX8oqbqNM8P4EP8HOZg96yaALiLEVWllA2E8vwsIKw==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.31.1"
-    "@typescript-eslint/types" "4.31.1"
-    "@typescript-eslint/typescript-estree" "4.31.1"
-    debug "^4.3.1"
+    "@typescript-eslint/scope-manager" "5.4.0"
+    "@typescript-eslint/types" "5.4.0"
+    "@typescript-eslint/typescript-estree" "5.4.0"
+    debug "^4.3.2"
 
-"@typescript-eslint/scope-manager@4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.1.tgz#0c21e8501f608d6a25c842fcf59541ef4f1ab561"
-  integrity sha512-N1Uhn6SqNtU2XpFSkD4oA+F0PfKdWHyr4bTX0xTj8NRx1314gBDRL1LUuZd5+L3oP+wo6hCbZpaa1in6SwMcVQ==
+"@typescript-eslint/scope-manager@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.4.0.tgz#aaab08415f4a9cf32b870c7750ae8ba4607126a1"
+  integrity sha512-pRxFjYwoi8R+n+sibjgF9iUiAELU9ihPBtHzocyW8v8D8G8KeQvXTsW7+CBYIyTYsmhtNk50QPGLE3vrvhM5KA==
   dependencies:
-    "@typescript-eslint/types" "4.31.1"
-    "@typescript-eslint/visitor-keys" "4.31.1"
+    "@typescript-eslint/types" "5.4.0"
+    "@typescript-eslint/visitor-keys" "5.4.0"
 
-"@typescript-eslint/types@4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.1.tgz#5f255b695627a13401d2fdba5f7138bc79450d66"
-  integrity sha512-kixltt51ZJGKENNW88IY5MYqTBA8FR0Md8QdGbJD2pKZ+D5IvxjTYDNtJPDxFBiXmka2aJsITdB1BtO1fsgmsQ==
+"@typescript-eslint/types@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.4.0.tgz#b1c130f4b381b77bec19696c6e3366f9781ce8f2"
+  integrity sha512-GjXNpmn+n1LvnttarX+sPD6+S7giO+9LxDIGlRl4wK3a7qMWALOHYuVSZpPTfEIklYjaWuMtfKdeByx0AcaThA==
 
-"@typescript-eslint/typescript-estree@4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.1.tgz#4a04d5232cf1031232b7124a9c0310b577a62d17"
-  integrity sha512-EGHkbsUvjFrvRnusk6yFGqrqMBTue5E5ROnS5puj3laGQPasVUgwhrxfcgkdHNFECHAewpvELE1Gjv0XO3mdWg==
+"@typescript-eslint/typescript-estree@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.4.0.tgz#fe524fb308973c68ebeb7428f3b64499a6ba5fc0"
+  integrity sha512-nhlNoBdhKuwiLMx6GrybPT3SFILm5Gij2YBdPEPFlYNFAXUJWX6QRgvi/lwVoadaQEFsizohs6aFRMqsXI2ewA==
   dependencies:
-    "@typescript-eslint/types" "4.31.1"
-    "@typescript-eslint/visitor-keys" "4.31.1"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
+    "@typescript-eslint/types" "5.4.0"
+    "@typescript-eslint/visitor-keys" "5.4.0"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@4.31.1":
-  version "4.31.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.1.tgz#f2e7a14c7f20c4ae07d7fc3c5878c4441a1da9cc"
-  integrity sha512-PCncP8hEqKw6SOJY+3St4LVtoZpPPn+Zlpm7KW5xnviMhdqcsBty4Lsg4J/VECpJjw1CkROaZhH4B8M1OfnXTQ==
+"@typescript-eslint/visitor-keys@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.4.0.tgz#09bc28efd3621f292fe88c86eef3bf4893364c8c"
+  integrity sha512-PVbax7MeE7tdLfW5SA0fs8NGVVr+buMPrcj+CWYWPXsZCH8qZ1THufDzbXm1xrZ2b2PA1iENJ0sRq5fuUtvsJg==
   dependencies:
-    "@typescript-eslint/types" "4.31.1"
-    eslint-visitor-keys "^2.0.0"
+    "@typescript-eslint/types" "5.4.0"
+    eslint-visitor-keys "^3.0.0"
 
 acorn-jsx@^5.3.1:
   version "5.3.2"
@@ -288,6 +279,11 @@ array.prototype.flatmap@^1.2.4:
     es-abstract "^1.18.0-next.1"
     function-bind "^1.1.1"
 
+assignment@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/assignment/-/assignment-2.0.0.tgz#ffd17b21bf5d6b22e777b989681a815456a3dd3e"
+  integrity sha1-/9F7Ib9dayLnd7mJaBqBVFaj3T4=
+
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -298,16 +294,16 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
-autoprefixer@^10.3.3:
-  version "10.3.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.4.tgz#29efe5d19f51c281953178ddb5b84c5f1ca24c86"
-  integrity sha512-EKjKDXOq7ug+jagLzmnoTRpTT0q1KVzEJqrJd0hCBa7FiG0WbFOBCcJCy2QkW1OckpO3qgttA1aWjVbeIPAecw==
+autoprefixer@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.0.tgz#c3577eb32a1079a440ec253e404eaf1eb21388c8"
+  integrity sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==
   dependencies:
-    browserslist "^4.16.8"
-    caniuse-lite "^1.0.30001252"
-    colorette "^1.3.0"
+    browserslist "^4.17.5"
+    caniuse-lite "^1.0.30001272"
     fraction.js "^4.1.1"
     normalize-range "^0.1.2"
+    picocolors "^1.0.0"
     postcss-value-parser "^4.1.0"
 
 axe-core@^4.0.2:
@@ -340,16 +336,16 @@ braces@^3.0.1:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.16.8:
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.0.tgz#1fcd81ec75b41d6d4994fb0831b92ac18c01649c"
-  integrity sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==
+browserslist@^4.17.5:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f"
+  integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==
   dependencies:
-    caniuse-lite "^1.0.30001254"
-    colorette "^1.3.0"
-    electron-to-chromium "^1.3.830"
+    caniuse-lite "^1.0.30001280"
+    electron-to-chromium "^1.3.896"
     escalade "^3.1.1"
-    node-releases "^1.1.75"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
 
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
@@ -364,10 +360,10 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-caniuse-lite@^1.0.30001252, caniuse-lite@^1.0.30001254:
-  version "1.0.30001257"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz#150aaf649a48bee531104cfeda57f92ce587f6e5"
-  integrity sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==
+caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001280:
+  version "1.0.30001282"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
+  integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -403,11 +399,6 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-code-block-writer@^10.1.1:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-10.1.1.tgz#ad5684ed4bfb2b0783c8b131281ae84ee640a42f"
-  integrity sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -432,11 +423,6 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^1.2.2, colorette@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
-  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
 comment-regex@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565"
@@ -497,7 +483,7 @@ debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.1, debug@^4.3.1:
+debug@^4.0.1, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -545,10 +531,10 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-electron-to-chromium@^1.3.830:
-  version "1.3.838"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.838.tgz#d178b34a268c750c0444ba69e4c94d4c4fb3aa0d"
-  integrity sha512-65O6UJiyohFAdX/nc6KJ0xG/4zOn7XCO03kQNNbCeMRGxlWTLzc6Uyi0tFNQuuGWqySZJi8CD2KXPXySVYmzMA==
+electron-to-chromium@^1.3.896:
+  version "1.3.901"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.901.tgz#ce2c3157d61bce9f42f1e83225c17358ae9f4918"
+  integrity sha512-ToJdV2vzwT2jeAsw8zIggTFllJ4Kxvwghk39AhJEHHlIxor10wsFI3wo69p8nFc0s/ATWBqugPv/k3nW4Y9Mww==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -612,10 +598,113 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.12.17:
-  version "0.12.28"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.28.tgz#84da0d2a0d0dee181281545271e0d65cf6fab1ef"
-  integrity sha512-pZ0FrWZXlvQOATlp14lRSk1N9GkeJ3vLIwOcUoo3ICQn9WNR4rWoNi81pbn6sC1iYUy7QPqNzI3+AEzokwyVcA==
+esbuild-android-arm64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.14.tgz#c85083ece26be3d67e6c720e088968a98409e023"
+  integrity sha512-Q+Xhfp827r+ma8/DJgpMRUbDZfefsk13oePFEXEIJ4gxFbNv5+vyiYXYuKm43/+++EJXpnaYmEnu4hAKbAWYbA==
+
+esbuild-darwin-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.14.tgz#8e4e237ad847cc54a1d3a5caee26a746b9f0b81f"
+  integrity sha512-YmOhRns6QBNSjpVdTahi/yZ8dscx9ai7a6OY6z5ACgOuQuaQ2Qk2qgJ0/siZ6LgD0gJFMV8UINFV5oky5TFNQQ==
+
+esbuild-darwin-arm64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.14.tgz#b3b5ebd40b2cb06ee0f6fb342dd4bdcca54ad273"
+  integrity sha512-Lp00VTli2jqZghSa68fx3fEFCPsO1hK59RMo1PRap5RUjhf55OmaZTZYnCDI0FVlCtt+gBwX5qwFt4lc6tI1xg==
+
+esbuild-freebsd-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.14.tgz#175ecb2fa8141428cf70ea2d5f4c27534bad53e0"
+  integrity sha512-BKosI3jtvTfnmsCW37B1TyxMUjkRWKqopR0CE9AF2ratdpkxdR24Vpe3gLKNyWiZ7BE96/SO5/YfhbPUzY8wKw==
+
+esbuild-freebsd-arm64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.14.tgz#a7d64e41d1fa581f8db7775e5200f18e67d70c4d"
+  integrity sha512-yd2uh0yf+fWv5114+SYTl4/1oDWtr4nN5Op+PGxAkMqHfYfLjFKpcxwCo/QOS/0NWqPVE8O41IYZlFhbEN2B8Q==
+
+esbuild-linux-32@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.14.tgz#14bdd4f6b6cfd35c65c835894651ba335c2117da"
+  integrity sha512-a8rOnS1oWSfkkYWXoD2yXNV4BdbDKA7PNVQ1klqkY9SoSApL7io66w5H44mTLsfyw7G6Z2vLlaLI2nz9MMAowA==
+
+esbuild-linux-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.14.tgz#7fd56851b2982fdd0cd8447ee9858c2c5711708a"
+  integrity sha512-yPZSoMs9W2MC3Dw+6kflKt5FfQm6Dicex9dGIr1OlHRsn3Hm7yGMUTctlkW53KknnZdOdcdd5upxvbxqymczVQ==
+
+esbuild-linux-arm64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.14.tgz#a55634d70679ba509adeafd68eebb9fd1ec5af6c"
+  integrity sha512-Lvo391ln9PzC334e+jJ2S0Rt0cxP47eoH5gFyv/E8HhOnEJTvm7A+RRnMjjHnejELacTTfYgFGQYPjLsi/jObQ==
+
+esbuild-linux-arm@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.14.tgz#bb96a99677e608b31ff61f37564326d38e846ca2"
+  integrity sha512-8chZE4pkKRvJ/M/iwsNQ1KqsRg2RyU5eT/x2flNt/f8F2TVrDreR7I0HEeCR50wLla3B1C3wTIOzQBmjuc6uWg==
+
+esbuild-linux-mips64le@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.14.tgz#6a55362a8fd1e593dea2ecc41877beed8b8184b9"
+  integrity sha512-MZhgxbmrWbpY3TOE029O6l5tokG9+Yoj2hW7vdit/d/VnmneqeGrSHADuDL6qXM8L5jaCiaivb4VhsyVCpdAbQ==
+
+esbuild-linux-ppc64le@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.14.tgz#9e0048587ece0a7f184ab147f20d077098045e7f"
+  integrity sha512-un7KMwS7fX1Un6BjfSZxTT8L5cV/8Uf4SAhM7WYy2XF8o8TI+uRxxD03svZnRNIPsN2J5cl6qV4n7Iwz+yhhVw==
+
+esbuild-netbsd-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.14.tgz#dcab16a4bbcfa16e2e8535dadc5f64fdc891c63b"
+  integrity sha512-5ekKx/YbOmmlTeNxBjh38Uh5TGn5C4uyqN17i67k18pS3J+U2hTVD7rCxcFcRS1AjNWumkVL3jWqYXadFwMS0Q==
+
+esbuild-openbsd-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.14.tgz#3c7453b155ebb68dc34d5aec3bd6505337bdda08"
+  integrity sha512-9bzvwewHjct2Cv5XcVoE1yW5YTW12Sk838EYfA46abgnhxGoFSD1mFcaztp5HHC43AsF+hQxbSFG/RilONARUA==
+
+esbuild-sunos-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.14.tgz#85addf5fef6b5db154a955d4f2e88953359d75ce"
+  integrity sha512-mjMrZB76M6FmoiTvj/RGWilrioR7gVwtFBRVugr9qLarXMIU1W/pQx+ieEOtflrW61xo8w1fcxyHsVVGRvoQ0w==
+
+esbuild-windows-32@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.14.tgz#f77f98f30a5c636c44db2428ecdf9bcbbaedb1a7"
+  integrity sha512-GZa6mrx2rgfbH/5uHg0Rdw50TuOKbdoKCpEBitzmG5tsXBdce+cOL+iFO5joZc6fDVCLW3Y6tjxmSXRk/v20Hg==
+
+esbuild-windows-64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.14.tgz#bc778674c40d65150d12385e0f23eb3a0badbd0d"
+  integrity sha512-Lsgqah24bT7ClHjLp/Pj3A9wxjhIAJyWQcrOV4jqXAFikmrp2CspA8IkJgw7HFjx6QrJuhpcKVbCAe/xw0i2yw==
+
+esbuild-windows-arm64@0.13.14:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.14.tgz#91a8dad35ab2c4dd27cd83860742955b25a354d7"
+  integrity sha512-KP8FHVlWGhM7nzYtURsGnskXb/cBCPTfj0gOKfjKq2tHtYnhDZywsUG57nk7TKhhK0fL11LcejHG3LRW9RF/9A==
+
+esbuild@^0.13.2:
+  version "0.13.14"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.14.tgz#98a3f7f42809abdc2b57c84565d0f713382dc1a5"
+  integrity sha512-xu4D+1ji9x53ocuomcY+KOrwAnWzhBu/wTEjpdgZ8I1c8i5vboYIeigMdzgY1UowYBKa2vZgVgUB32bu7gkxeg==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.14"
+    esbuild-darwin-64 "0.13.14"
+    esbuild-darwin-arm64 "0.13.14"
+    esbuild-freebsd-64 "0.13.14"
+    esbuild-freebsd-arm64 "0.13.14"
+    esbuild-linux-32 "0.13.14"
+    esbuild-linux-64 "0.13.14"
+    esbuild-linux-arm "0.13.14"
+    esbuild-linux-arm64 "0.13.14"
+    esbuild-linux-mips64le "0.13.14"
+    esbuild-linux-ppc64le "0.13.14"
+    esbuild-netbsd-64 "0.13.14"
+    esbuild-openbsd-64 "0.13.14"
+    esbuild-sunos-64 "0.13.14"
+    esbuild-windows-32 "0.13.14"
+    esbuild-windows-64 "0.13.14"
+    esbuild-windows-arm64 "0.13.14"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -774,6 +863,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz#eee4acea891814cda67a7d8812d9647dd0179af2"
+  integrity sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==
+
 eslint@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.2.0.tgz#d41b2e47804b30dbabb093a967fb283d560082e6"
@@ -883,7 +977,7 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.1.1, fast-glob@^3.2.5, fast-glob@^3.2.7:
+fast-glob@^3.1.1:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
   integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
@@ -958,15 +1052,6 @@ fraction.js@^4.1.1:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
   integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
 
-fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1035,7 +1120,7 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-globby@^11.0.1, globby@^11.0.3:
+globby@^11.0.1, globby@^11.0.4:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
   integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
@@ -1052,7 +1137,7 @@ globrex@^0.1.2:
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
   integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.2:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
@@ -1098,6 +1183,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+he@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
+  integrity sha1-LAX/rvkLaOhg8/0rVO9YCYknfuI=
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -1120,6 +1210,11 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+ignore@^5.1.8:
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb"
+  integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==
+
 image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
@@ -1170,6 +1265,14 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+insane@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/insane/-/insane-2.6.2.tgz#c2ab68bb3e006ab451560d1b446917329c0a8120"
+  integrity sha1-wqtouz4AarRRVg0bRGkXMpwKgSA=
+  dependencies:
+    assignment "2.0.0"
+    he "0.5.0"
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -1240,6 +1343,13 @@ is-glob@^4.0.0, is-glob@^4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -1324,15 +1434,6 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
@@ -1353,14 +1454,14 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
-less@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
-  integrity sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==
+less@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.1.2.tgz#6099ee584999750c2624b65f80145f8674e4b4b0"
+  integrity sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==
   dependencies:
     copy-anything "^2.0.1"
     parse-node-version "^1.0.1"
-    tslib "^1.10.0"
+    tslib "^2.3.0"
   optionalDependencies:
     errno "^0.1.1"
     graceful-fs "^4.1.2"
@@ -1430,10 +1531,10 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-marked@0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
-  integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
+marked@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.3.tgz#986760a428d8fd666251ec578429bf9a239a34bc"
+  integrity sha512-vSwKKtw+lCA0uFK/02JT4tBfNxEREpoTg21NoXqcmX0ySBIEyLMYWmt8WPsM61QNFaDBZkggupyNXLsV7uPuRg==
 
 merge2@^1.3.0:
   version "1.4.1"
@@ -1477,11 +1578,6 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -1502,10 +1598,10 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nanoid@^3.1.23:
-  version "3.1.25"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
-  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
+nanoid@^3.1.30:
+  version "3.1.30"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -1521,10 +1617,10 @@ needle@^2.5.2:
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
-node-releases@^1.1.75:
-  version "1.1.75"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
-  integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
 normalize-package-data@^2.3.2:
   version "2.5.0"
@@ -1663,11 +1759,6 @@ parse-node-version@^1.0.1:
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
 
-path-browserify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
-  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
-
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -1700,6 +1791,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -1727,13 +1823,13 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.3.6:
-  version "8.3.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
-  integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
+postcss@^8.3.8:
+  version "8.3.11"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
+  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
   dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
     source-map-js "^0.6.2"
 
 prelude-ls@^1.2.1:
@@ -1741,10 +1837,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.0.tgz#85bdfe0f70c3e777cf13a4ffff39713ca6f64cba"
-  integrity sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==
+prettier@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
+  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
 progress@^2.0.0:
   version "2.0.3"
@@ -1820,7 +1916,7 @@ regexp.prototype.flags@^1.3.1:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-regexpp@^3.1.0:
+regexpp@^3.1.0, regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
@@ -1866,10 +1962,10 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rollup@^2.38.5:
-  version "2.56.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.56.3.tgz#b63edadd9851b0d618a6d0e6af8201955a77aeff"
-  integrity sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==
+rollup@^2.57.0:
+  version "2.60.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.0.tgz#4ee60ab7bdd0356763f87d7099f413e5460fc193"
+  integrity sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2120,14 +2216,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-ts-morph@^11.0.3:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/ts-morph/-/ts-morph-11.0.3.tgz#01a92b3c2b5a48ccdf318ec90864229b8061d056"
-  integrity sha512-ymuPkndv9rzqTLiHWMkVrFXWcN4nBiBGhRP/kTC9F5amAAl7BNLfyrsTzMD1o9A0zishKoF1KQT/0yyFhJnPgA==
-  dependencies:
-    "@ts-morph/common" "~0.10.1"
-    code-block-writer "^10.1.1"
-
 tsconfig-paths@^3.9.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz#954c1fe973da6339c78e06b03ce2e48810b65f36"
@@ -2138,11 +2226,16 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -2167,10 +2260,10 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-typescript@4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
-  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
+typescript@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
+  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
 
 unbox-primitive@^1.0.1:
   version "1.0.1"
@@ -2182,11 +2275,6 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -2207,34 +2295,25 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vite-plugin-dts@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-0.7.0.tgz#5a73d64ee35d74c6efc93d83abb474660e19218a"
-  integrity sha512-L25t5nscMrqvRewl4IARV7fXJTPKny8etIq5LP1WhuVKTBpvkcgAzC3JWK8ZD8MeHUS3qlz7pQ6TSYx7d47m6A==
-  dependencies:
-    fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    ts-morph "^11.0.3"
-
-vite-tsconfig-paths@^3.3.14:
-  version "3.3.14"
-  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.3.14.tgz#4f1e099e04105952dbdef1c70f72fc5ae9047575"
-  integrity sha512-Z501YCOTTwBk+zDq0furrD+O+X/zawKIo8L3eE0GVSr700AvWAArnlUHOzoRJQw0fJLfd+61rD7jkT20Jh8gtA==
+vite-tsconfig-paths@^3.3.17:
+  version "3.3.17"
+  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.3.17.tgz#b1421c4a01e6b446b78cc1dd12d45f302bc3a27b"
+  integrity sha512-wx+rfC53moVLxMBj2EApJZgY6HtvWUFVZ4dBxNGYBxSSqU6UaHdKlcOxrfGDxyTGtYEr9beWCryHn18C4EtZkg==
   dependencies:
     debug "^4.1.1"
     globrex "^0.1.2"
     recrawl-sync "^2.0.3"
     tsconfig-paths "^3.9.0"
 
-vite@^2.5.1:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.7.tgz#e495be9d8bcbf9d30c7141efdccacde746ee0125"
-  integrity sha512-hyUoWmRPhjN1aI+ZSBqDINKdIq7aokHE2ZXiztOg4YlmtpeQtMwMeyxv6X9YxHZmvGzg/js/eATM9Z1nwyakxg==
+vite@^2.6.14:
+  version "2.6.14"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271"
+  integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==
   dependencies:
-    esbuild "^0.12.17"
-    postcss "^8.3.6"
+    esbuild "^0.13.2"
+    postcss "^8.3.8"
     resolve "^1.20.0"
-    rollup "^2.38.5"
+    rollup "^2.57.0"
   optionalDependencies:
     fsevents "~2.3.2"