v2.2.12

Signed-off-by: qwqcode <qwqcode@gmail.com>
chore(docs): Update README.md
2022-05-04 23:30:37 +08:00 · 2022-05-04 23:15:37 +08:00 · 2022-05-04 23:13:03 +08:00 · 2022-05-04 22:29:00 +08:00 · 2022-05-04 22:06:59 +08:00 · 2022-05-04 21:58:50 +08:00
26 changed files with 639 additions and 320 deletions
@@ -1,6 +1,7 @@
 module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
+  env: { "browser": true} ,
  parserOptions: {
    project: ['./packages/*/tsconfig.json'],
    tsconfigRootDir: __dirname,
@@ -11,6 +12,7 @@ module.exports = {
    'prettier',
    'plugin:import/recommended',
    'plugin:import/typescript',
+    "plugin:compat/recommended",
  ],
  plugins: ['@typescript-eslint', 'import'],
  rules: {
@@ -35,5 +37,8 @@ module.exports = {
        "project": [__dirname + "/packages/*/tsconfig.json"]
      },
    },
+    'polyfills': [
+      'AbortController'
+    ]
  },
 }
@@ -4,13 +4,7 @@

 # Artalk

-[![](https://img.shields.io/npm/v/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
-[![](https://img.shields.io/npm/dt/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
-[![](https://img.shields.io/github/last-commit/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master)
-[![](https://img.shields.io/github/issues-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/issues)
-[![](https://img.shields.io/github/issues-pr-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/pulls)
-[![](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://img.shields.io/npm/v/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk) [![](https://img.shields.io/npm/dt/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk) [![](https://badgen.net/bundlephobia/minzip/artalk?style=flat-square)](https://bundlephobia.com/package/artalk) [![](https://img.shields.io/github/last-commit/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master) [![](https://img.shields.io/github/issues-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/issues) [![](https://img.shields.io/github/issues-pr-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/pulls) [![](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)

 > 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.

@@ -20,7 +14,7 @@

 ---

- 轻量级 (~30kB gzipped)
+- 轻量级 (~30kB)
 - 自托管 (数据安全)
 - 易上手 (防秃顶)
 - Golang 后端 (易部署 / 跨平台)
@@ -122,12 +116,18 @@ services:
 docker-compose up -d
 ```

+## Supporters
+
+[![Stargazers repo roster for @ArtalkJS/Artalk](https://reporoster.com/stars/ArtalkJS/Artalk)](https://github.com/ArtalkJS/Artalk/stargazers)
+
 ## TODOs 

 - [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
 - [x] 多数据库支持
  - [x] SQLite
-  - [X] MySQL
+  - [x] MySQL
+  - [x] Postgres
+  - [x] SQLServer
 - [x] 多缓存支持
  - [x] In-memory (内建缓存)
  - [x] Redis
@@ -150,15 +150,16 @@ docker-compose up -d
  - [x] 站点 (增/删/改)
  - [x] 数据分页
  - [ ] 配置 (GUI)
- [x] 数据导入 ([Artransfer](https://github.com/ArtalkJS/Artransfer))
+- [x] 数据导入 ([Artransfer](https://artalk.js.org/guide/transfer.html))
  - [x] Artrans
-  - [x] Artalk v1 (PHP)
  - [x] WordPress
-  - [x] Typecho
+  - [x] Typecho ([插件](https://github.com/ArtalkJS/Artrans-Typecho) / [Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
  - [x] Valine
  - [x] Disqus
  - [x] Commento
+  - [x] Waline ([Artransfer-CLI](https://github.com/ArtalkJS/Artransfer-CLI))
  - [x] Twikoo
+  - [x] Artalk v1 (PHP)
 - [x] 数据导出
 - [ ] 数据备份同步
 - [x] 邮件异步队列发送
@@ -20,6 +20,7 @@
    "eslint-config-airbnb-typescript": "^16.2.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-compat": "^4.0.2",
    "eslint-plugin-import": "^2.26.0",
    "less": "^4.1.2",
    "postcss": "^8.4.12",
@@ -28,5 +29,8 @@
    "typescript": "^4.6.3",
    "vite": "^2.9.5",
    "vite-tsconfig-paths": "^3.4.1"
-  }
+  },
+  "browserslist": [
+    "supports es6 and supports es6-class and supports es6-generators and supports es6-module-dynamic-import and supports es6-module and supports es6-number and supports es6-string-includes"
+  ]
 }
@@ -11,6 +11,7 @@ import { SidebarCtx } from '../main'
 import ItemTextEditor from '../lib/item-text-editor'

 export default class PageList extends Component {
+  $pageList!: HTMLElement
  $editor?: HTMLElement
  $inputer?: HTMLElement

@@ -19,7 +20,7 @@ export default class PageList extends Component {
  constructor(ctx: Context, sidebar: SidebarCtx) {
    super(ctx, sidebar)

-    this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
+    this.$el = Utils.createElement(`<div class="atk-page-list-wrap"></div>`)
  }

  /** 初始化 PageList (清空列表) */
@@ -30,7 +31,11 @@ export default class PageList extends Component {
    <span class="atk-update-all-title-btn"><i class="atk-icon atk-icon-sync"></i> <span class="atk-text">更新标题</span></span>
    <span class="atk-cache-flush-all-btn"><span class="atk-text">缓存清除</span></span>
    <span class="atk-cache-warm-up-btn"><span class="atk-text">缓存预热</span></span>
-    </div>`
+    </div>
+    <div class="atk-page-list"></div>
+    `
+
+    this.$pageList = this.$el.querySelector('.atk-page-list')!

    // 缓存操作按钮
    const $cacheFlushBtn = this.$el.querySelector<HTMLElement>('.atk-cache-flush-all-btn')!
@@ -103,7 +108,7 @@ export default class PageList extends Component {

    pages.forEach((page) => {
      const $page = this.renderPage(page)
-      this.$el.append($page)
+      this.$pageList.append($page)
    })
  }

@@ -5,7 +5,8 @@ import SidebarRoot from './sidebar-root'

 export default async function InitSidebar(conf: ArtalkConfig, user: LocalUser, view?: string) {
  // 初始化 Artalk 主程序
-  const artalk = new Artalk(conf)
+  conf.useBackendConf = true
+  const artalk = await (new Artalk(conf))
  artalk.$root.style.display = 'none'

  // 初始化用户数据
@@ -42,17 +42,16 @@ export default class MessageView extends SidebarView {
      const pageURL = comment.data.page_url
      comment.setOpenURL(`${pageURL}#atk-comment-${comment.data.id}`)
      comment.onReplyBtnClick = () => {
-        if (this.ctx.conf.editorTravel === true) {
-          this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: false})
-        } else {
-          this.ctx.trigger('sidebar-hide')
-          this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: true})
-        }
+        this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: true})
      }
    }
    this.list.paramsEditor = (params) => {
      params.site_name = this.sidebar.curtSite
    }
+    this.ctx.on('list-insert', (data) => {
+      this.list.insertComment(data)
+      ;(this.$el.parentNode as any)?.scrollTo(0, 0)
+    })

    this.$el.innerHTML = ''
    this.$el.append(this.list.$el)
@@ -18,6 +18,7 @@ export default class PagesView extends SidebarView {
  viewTabs = {}
  viewActiveTab = ''

+  isFirstLoad = true
  pageList!: PageList
  pagination!: Pagination

@@ -35,17 +36,20 @@ export default class PagesView extends SidebarView {
  }

  async reqPages(offset: number) {
-    this.pageList.initPageList()
+    if (this.isFirstLoad) this.pageList.initPageList()
    ;(this.$el.parentNode as any)?.scrollTo(0, 0)

-    Ui.showLoading(this.$el)
+    if (this.isFirstLoad) Ui.showLoading(this.$el)
+    else this.pagination.setLoading(true)

    const data = await new Api(this.ctx).pageGet(this.sidebar.curtSite, offset, PAGE_SIZE)
+    this.pageList.$pageList!.innerHTML = ''
    this.pageList.importPages(data.pages || [])

-    Ui.hideLoading(this.$el)
+    if (this.isFirstLoad) Ui.hideLoading(this.$el)
+    else this.pagination.setLoading(false)

-    if (!this.pagination) {
+    if (this.isFirstLoad) {
      this.pagination = new Pagination(data.total, {
        pageSize: PAGE_SIZE,
        onChange: (o: number) => {
@@ -54,8 +58,9 @@ export default class PagesView extends SidebarView {
      })

      this.$el.append(this.pagination.$el)
+      this.isFirstLoad = false
+    } else {
+      if (offset === 0) this.pagination.update(offset, data.total)
    }
-    if (this.pagination && offset === 0)
-      this.pagination.update(offset, data.total)
  }
 }
@@ -1,3 +1,31 @@
+.atk-page-list-wrap {
+  .atk-header-action-bar {
+    display: block;
+    overflow: hidden;
+    padding: 10px 15px 0 15px;
+
+    & > span {
+      display: inline-block;
+      padding: 2px 10px;
+      cursor: pointer;
+      font-size: 13px;
+
+      i {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+        background-color: var(--at-color-meta);
+        margin-right: 4px;
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+}
+
 .atk-page-list {
  .atk-page-item {
    display: flex;
@@ -35,32 +63,6 @@
    .atk-list-text-actions();
  }

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

    window.artalk = artalk;
@@ -1,7 +1,7 @@
 {
  "name": "artalk",
-  "version": "2.2.7",
-  "backendMinVersion": "2.1.2",
+  "version": "2.2.12",
+  "backendMinVersion": "2.1.6",
  "license": "LGPL-3.0",
  "description": "A Selfhosted Comment System",
  "keywords": [
@@ -39,6 +39,7 @@
  "dependencies": {
    "hanabi": "^0.4.0",
    "insane": "^2.6.2",
-    "marked": "^4.0.14"
+    "marked": "^4.0.14",
+    "abortcontroller-polyfill": "^1.7.3"
  }
 }
@@ -1,7 +1,9 @@
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
 import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'

 export default class Api {
  private ctx: Context
@@ -94,8 +96,6 @@ export default class Api {
  /** 用户 · 获取  */
  public userGet(name: string, email: string) {
    const ctrl = new AbortController()
-    const { signal } = ctrl
-
    const params: any = {
      name, email, site_name: (this.ctx.conf.site || '')
    }
@@ -103,7 +103,7 @@ export default class Api {
    const req = Fetch(this.ctx, `${this.baseURL}/user-get`, {
      method: 'POST',
      body: ToFormData(params),
-      signal,
+      signal: ctrl.signal,
    }).then((json) => ({
      user: json.data.user as UserData|null,
      is_login: json.data.is_login as boolean,
@@ -294,7 +294,24 @@ export default class Api {

    const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+  }

+  /** 获取配置 */
+  public async conf() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/conf`)
+    const conf = (data.frontend_conf || {}) as ArtalkConfig
+
+    // Patch: `emoticons` config string to json
+    if (conf.emoticons && typeof conf.emoticons === "string") {
+      conf.emoticons = conf.emoticons.trim()
+      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+        conf.emoticons = JSON.parse(conf.emoticons) // pase json
+      } else if (conf.emoticons === "false") {
+        conf.emoticons = false
+      }
+    }
+
+    return conf
  }

  // ============================
@@ -4,81 +4,55 @@ 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
+    const headers = new Headers(init.headers) // 保留原有 headers
+    headers.set('Authorization', `Bearer ${ctx.user.data.token}`)
+    init.headers = headers
  }

  // 请求操作
-  try {
+  const resp = await timeoutFetch(input, timeout || ctx.conf.reqTimeout || 15000, init)

-    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))
-    }
+  const respHttpCode = resp.status
+  const noAccessCodes = [401, 400]
+  const isNoAccess = noAccessCodes.includes(respHttpCode)

-    const noAccessCodes = [401, 400]
+  if (!resp.ok && !isNoAccess)
+    throw new Error(`请求响应 ${respHttpCode}`)

-    if (!resp.ok && !noAccessCodes.includes(resp.status)) throw new Error(`请求响应 ${resp.status}`)
+  // 解析获取响应的 json
+  let json: any = await resp.json()

-    // 解析获取响应的 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,
-          iframe: json.data.iframe,
-          onSuccess: () => {
-            recall(resolve, reject)
-          },
-          onCancel: () => {
-            reject(json)
-          }
-        })
-      }))
-    } else if ((json.data && json.data.need_login) || noAccessCodes.includes(resp.status)) {
-      // 请求需要管理员权限
-      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
+  // 重新发起请求
+  const recall = (resolve, reject) => {
+    Fetch(ctx, input, init)
+      .then(d => { resolve(d) })
+      .catch(e => { reject(e) })
  }
+
+  // 请求弹出层验证
+  if (json.data?.need_captcha) {
+    // 请求需要验证码
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.trigger('checker-captcha', {
+        imgData: json.data.img_data,
+        iframe: json.data.iframe,
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
+      })
+    }))
+  } else if (json.data?.need_login || isNoAccess) {
+    // 请求需要管理员权限
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.trigger('checker-admin', {
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
+      })
+    }))
+  }
+
+  if (!json.success) throw json // throw 相当于 reject(json)
+
+  return json
 }

 /** 公共 POST 请求 */
@@ -108,21 +82,16 @@ export function ToFormData(object: {[key: string]: any}): 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)
-      }
-    )
+function timeoutFetch(url: RequestInfo, ms: number, opts: RequestInit) {
+  const controller = new AbortController()
+  opts.signal?.addEventListener('abort', () => controller.abort()) // 保留原有 signal 功能
+  let promise = fetch(url, { ...opts, signal: controller.signal })
+  if (ms > 0) {
+    const timer = setTimeout(() => controller.abort(), ms)
+    promise.finally(() => { clearTimeout(timer) })
+  }
+  promise = promise.catch((err) => {
+    throw ((err || {}).name === 'AbortError') ? new Error('请求超时或意外终止') : err
  })
+  return promise
 }
@@ -13,6 +13,7 @@ import SidebarLayer from './components/sidebar-layer'
 import Layer, { GetLayerWrap } from './components/layer'
 import Api from './api'
 import * as Utils from './lib/utils'
+import * as Ui from './lib/ui'

 /**
 * Artalk
@@ -21,18 +22,18 @@ import * as Utils from './lib/utils'
 export default class Artalk {
  public static readonly defaults: ArtalkConfig = defaults

-  public ctx: Context
-  public conf: ArtalkConfig
-  public $root: HTMLElement
+  public ctx!: Context
+  public conf!: ArtalkConfig
+  public $root!: HTMLElement

-  public checkerLauncher: CheckerLauncher
-  public editor: Editor
-  public list: List
-  public sidebarLayer: SidebarLayer
+  public checkerLauncher!: CheckerLauncher
+  public editor!: Editor
+  public list!: List
+  public sidebarLayer!: SidebarLayer

  constructor (customConf: ArtalkConfig) {
    // 配置
-    this.conf = { ...Artalk.defaults, ...customConf }
+    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')

    // 默认 pageKey
@@ -46,6 +47,11 @@ export default class Artalk {
      this.conf.pageTitle = `${document.title}`
    }

+    // 列表显示模式
+    if (this.conf.nestMax && this.conf.nestMax <= 1) {
+      this.conf.flatMode = true
+    }
+
    // 装载元素
    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
      this.$root = this.conf.el
@@ -66,10 +72,25 @@ export default class Artalk {
    // 界面初始化
    this.$root.classList.add('artalk')
    this.$root.innerHTML = ''
+
+    // 初始化组件
+    if (this.conf.useBackendConf) {
+      // 复用后端的配置
+      // @ts-ignore
+      return (async () => {
+        await this.loadConfRemote()
+        this.initCore()
+        return this // Promise<Artalk>
+      })()
+    }
+
+    this.initCore()
+  }
+
+  private initCore() {
+    // 组件初始化
    this.initLayer()
    this.initDarkMode()
-
-    // 组件初始化
    this.checkerLauncher = new CheckerLauncher(this.ctx)
    Utils.initMarked(this.ctx) // 初始化 marked

@@ -102,10 +123,22 @@ export default class Artalk {
    })
  }

+  /** 获取远程配置 */
+  private async loadConfRemote() {
+    Ui.showLoading(this.$root)
+    let backendConf = {}
+    try {
+      backendConf = await (new Api(this.ctx)).conf()
+    } catch (err) { console.error("配置远程获取失败", err) }
+    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
+    Ui.hideLoading(this.$root)
+  }
+
  /** 事件绑定 · 初始化 */
  private initEventBind() {
    // 锚点快速跳转评论
    window.addEventListener('hashchange', () => {
+      this.list.goToCommentDelay = false
      this.list.checkGoToCommentByUrlHash()
    })

@@ -153,8 +186,23 @@ export default class Artalk {

  /** 暗黑模式 · 初始化 */
  public initDarkMode() {
+    if (this.conf.darkMode === 'auto') {
+      // 自动切换暗黑模式，事件监听
+      const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+      darkModeMedia.addEventListener('change', (e) => { this.setDarkMode(e.matches) })
+      this.setDarkMode(darkModeMedia.matches)
+    } else {
+      this.setDarkMode(this.conf.darkMode || false)
+    }
+  }
+
+  /** 暗黑模式 · 设定 */
+  public setDarkMode(darkMode: boolean) {
    const darkModeClassName = 'atk-dark-mode'

+    this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
+
    if (this.conf.darkMode) {
      this.$root.classList.add(darkModeClassName)
    } else {
@@ -172,13 +220,6 @@ export default class Artalk {
    }
  }

-  /** 暗黑模式 · 设定 */
-  public setDarkMode(darkMode: boolean) {
-    this.ctx.conf.darkMode = darkMode
-    this.ctx.trigger('conf-updated')
-    this.initDarkMode()
-  }
-
  /** PV */
  public async initPV() {
    const pvNum = await new Api(this.ctx).pv()
@@ -15,6 +15,8 @@ export default class Comment extends Component {

  public $main!: HTMLElement
  public $header!: HTMLElement
+  public $headerNick!: HTMLElement
+  public $headerBadge?: HTMLElement
  public $body!: HTMLElement
  public $content!: HTMLElement
  public $children!: HTMLElement|null
@@ -23,12 +25,15 @@ export default class Comment extends Component {
  public voteBtnDown?: ActionBtn

  public parent: Comment|null
-  public nestedNum: number
-  private maxNestingNum: number // 最多嵌套层数
-  public children: Comment[] = []
+  public nestCurt: number
+  private nestMax: number // 最大嵌套层数
+  private children: Comment[] = []

-  public replyTo?: CommentData // 回复对象（flatMode 用）
-  public $replyTo?: HTMLElement
+  public flatMode: boolean = false
+  public replyTo?: CommentData // 回复对象
+
+  public $replyTo?: HTMLElement // 回复评论内容 (平铺下显示)
+  public $replyAt?: HTMLElement // 回复 AT（层级嵌套下显示）

  public afterRender?: () => void

@@ -43,13 +48,13 @@ export default class Comment extends Component {
    super(ctx)

    // 最大嵌套数
-    this.maxNestingNum = ctx.conf.maxNesting || 3
+    this.nestMax = ctx.conf.nestMax || 3

    this.data = { ...data }
    this.data.date = this.data.date.replace(/-/g, '/') // 解决 Safari 日期解析 NaN 问题

    this.parent = null
-    this.nestedNum = 1 // 现在已嵌套 n 层
+    this.nestCurt = 1 // 现在已嵌套 n 层
  }

  /** 渲染 UI */
@@ -70,6 +75,7 @@ export default class Comment extends Component {
    this.renderAvatar()
    this.renderHeader()
    this.renderContent()
+    this.renderReplyAt()
    this.renderReplyTo()
    this.renderPending()
    this.renderActionBtn()
@@ -117,28 +123,29 @@ export default class Comment extends Component {
  }

  private renderHeader() {
-    const $nick = this.$el.querySelector<HTMLElement>('.atk-nick')!
+    this.$headerNick = this.$el.querySelector<HTMLElement>('.atk-nick')!
    if (this.data.link) {
      const $nickA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
      $nickA.innerText = this.data.nick
      $nickA.href = this.data.link
-      $nick.append($nickA)
+      this.$headerNick.append($nickA)
    } else {
-      $nick.innerText = this.data.nick
+      this.$headerNick.innerText = this.data.nick
    }

-    const $badge = this.$el.querySelector<HTMLElement>('.atk-badge')!
+    this.$headerBadge = this.$el.querySelector<HTMLElement>('.atk-badge')!
    if (this.data.badge_name) {
-      $badge.innerText = this.data.badge_name
+      this.$headerBadge.innerText = this.data.badge_name
      if (this.data.badge_color)
-        $badge.style.backgroundColor = this.data.badge_color
+      this.$headerBadge.style.backgroundColor = this.data.badge_color
    } else {
-      $badge.remove()
+      this.$headerBadge.remove()
+      this.$headerBadge = undefined
    }

    if (this.data.is_pinned) {
      const $pinnedBadge = Utils.createElement(`<span class="atk-item atk-pinned-badge">置顶</span>`) // 置顶徽章
-      $nick.insertAdjacentElement('afterend', $pinnedBadge)
+      this.$headerNick.insertAdjacentElement('afterend', $pinnedBadge)
    }

    const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
@@ -189,8 +196,23 @@ export default class Comment extends Component {
    })
  }

+  // 层级嵌套模式显示 At
+  private renderReplyAt() {
+    if (this.flatMode || this.data.rid === 0) return // not 平铺模式 或 根评论
+    if (this.$replyAt) return // not 关闭显示 或 已经显示
+    if (!this.replyTo) return
+
+    this.$replyAt = Utils.createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`)
+    this.$replyAt.querySelector<HTMLElement>('.atk-nick')!.innerText = `${this.replyTo.nick}`
+    this.$replyAt.onclick = () => { this.goToReplyComment() }
+
+    const $after = this.$headerBadge || this.$headerNick
+    $after.insertAdjacentElement('afterend', this.$replyAt)
+  }
+
  // 回复的对象
  private renderReplyTo() {
+    if (!this.flatMode) return // 仅平铺模式显示
    if (!this.replyTo) return

    this.$replyTo = Utils.createElement(`
@@ -198,13 +220,23 @@ export default class Comment extends Component {
        <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}`
+    const $nick = this.$replyTo.querySelector<HTMLElement>('.atk-nick')!
+    $nick.innerText = `@${this.replyTo.nick}`
+    $nick.onclick = () => { this.goToReplyComment() }
    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)
  }

+  public goToReplyComment() {
+    const origHash = window.location.hash
+    const modifyHash = `#atk-comment-${this.data.rid}`
+
+    window.location.hash = modifyHash
+    if (modifyHash === origHash) window.dispatchEvent(new Event('hashchange')) // 强制触发事件
+  }
+
  // 待审核状态
  private renderPending() {
    if (!this.data.is_pending) return
@@ -324,30 +356,33 @@ export default class Comment extends Component {
    return this.children
  }

-  putChild(childC: Comment) {
+  putChild(childC: Comment, insertMode: 'append'|'prepend' = 'append') {
    childC.parent = this
-    childC.nestedNum = this.nestedNum + 1 // 嵌套层数 +1
+    childC.nestCurt = this.nestCurt + 1 // 嵌套层数 +1
    this.children.push(childC)

-    this.getChildrenEl().appendChild(childC.getEl())
+    const $children = this.getChildrenEl()
+    if (insertMode === 'append') $children.append(childC.getEl())
+    else if (insertMode === 'prepend') $children.prepend(childC.getEl())
+
    childC.playFadeInAnim()

    // 内容限高
    childC.checkHeightLimitArea('content')
  }

-  getChildrenEl() {
-    if (this.$children === null) {
-      // console.log(this.nestedNum)
-      if (this.nestedNum < this.maxNestingNum) {
+  getChildrenEl(): HTMLElement {
+    if (!this.$children) {
+      // console.log(this.nestCurt)
+      if (this.nestCurt < this.nestMax) {
        this.$children = Utils.createElement('<div class="atk-comment-children"></div>')
-        this.$main.appendChild(this.$children)
+        this.$main.append(this.$children)
      } else if (this.parent) {
          this.$children = this.parent.getChildrenEl()
      }
    }

-    return this.$children
+    return this.$children!
  }

  getParent() {
@@ -85,9 +85,22 @@ export default class Editor extends Component {
      if (inputEl && inputEl instanceof HTMLInputElement) {
        inputEl.value = this.user.data[field] || ''
        // 绑定事件
-        inputEl.addEventListener('input', () => this.onHeaderInputChanged(field, inputEl))
+        inputEl.addEventListener('input', () => this.onHeaderInput(field, inputEl))
      }
    })
+
+    // Link URL 自动补全协议
+    const $linkInput = this.getInputEl('link')
+    if ($linkInput) {
+      $linkInput.addEventListener('change', () => {
+        const link = $linkInput.value.trim()
+        if (!!link && !/^(http|https):\/\//.test(link)) {
+          $linkInput.value = `https://${link}`
+          this.user.data.link = $linkInput.value
+          this.saveUser()
+        }
+      })
+    }
  }

  getInputEl (field: string) {
@@ -101,7 +114,7 @@ export default class Editor extends Component {
  }

  /** header 输入框内容变化事件 */
-  onHeaderInputChanged (field: string, inputEl: HTMLInputElement) {
+  onHeaderInput(field: string, inputEl: HTMLInputElement) {
    this.user.data[field] = inputEl.value.trim()

    // 若修改的是 nick or email
@@ -140,6 +153,7 @@ export default class Editor extends Component {
            this.getInputEl('link')!.value = data.user.link
          }
        })
+        .catch(() => {})
        .finally(() => {
          this.queryUserInfo.abortFunc = null // 清理
        })
@@ -200,22 +214,14 @@ export default class Editor extends Component {
    this.openedPlugName = null
    this.$plugBtnWrap.innerHTML = ''

-    // 依次实例化 plug
+    // 初始化 plug 按钮
    this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
+      if (PlugObj.Name === 'emoticons' && !this.conf.emoticons) return
+
      // 切换按钮
      const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
      this.$plugBtnWrap.appendChild(btnElem)

-      // 表情包插件预加载
-      if (PlugObj.Name === 'emoticons') {
-        const emoPlug = new PlugObj(this) as EmoticonsPlug
-        this.plugList[PlugObj.Name] = emoPlug
-
-        window.setTimeout(() => {
-          emoPlug.loadEmoticonsData()
-        }, 1000) // 延迟 1s 加载
-      }
-
      btnElem.addEventListener('click', () => {
        let plug = this.plugList[PlugObj.Name]
        if (!plug) {
@@ -259,6 +265,16 @@ export default class Editor extends Component {
      })
    })

+    // 表情包插件预加载
+    if (this.conf.emoticons) {
+      const emoPlug = new EmoticonsPlug(this)
+      this.plugList[EmoticonsPlug.Name] = emoPlug
+
+      window.setTimeout(() => {
+        emoPlug.loadEmoticonsData()
+      }, 1000) // 延迟 1s 加载
+    }
+
    this.initImgUpload()
  }

@@ -7,11 +7,14 @@ import Api from '../api'
 import Comment from './comment'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
+import * as ListNest from './list-nest'
 import { backendMinVersion } from '../../package.json'

 export default class ListLite extends Component {
  protected $commentsWrap: HTMLElement
-  protected comments: Comment[] = []
+
+  protected commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
+  protected get commentDataList() { return this.commentList.map(c => c.data) }

  protected data?: ListData
  protected isLoading: boolean = false
@@ -21,6 +24,9 @@ export default class ListLite extends Component {
  /** 平铺模式 */
  public flatMode = false

+  /** 嵌套模式 */
+  public nestSortBy!: ListNest.SortByType
+
  /** 分页 */
  public pageMode: 'pagination'|'read-more' = 'pagination'
  public pageSize: number = 20 // 每次请求获取量
@@ -52,6 +58,9 @@ export default class ListLite extends Component {
    // 评论为空时显示字符
    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment

+    // 嵌套排序方式
+    this.nestSortBy = this.ctx.conf.nestSort || 'DATE_ASC'
+
    // 评论时间自动更新
    window.setInterval(() => {
      this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -265,7 +274,7 @@ export default class ListLite extends Component {
  /** 刷新界面 */
  public refreshUI() {
    // 无评论
-    const isNoComment = this.comments.length <= 0
+    const isNoComment = this.commentList.length <= 0
    let $noComment = this.$commentsWrap.querySelector<HTMLElement>('.atk-list-no-comment')

    if (isNoComment) {
@@ -283,8 +292,11 @@ export default class ListLite extends Component {
  }

  /** 创建新评论 */
-  protected createComment(data: CommentData) {
-    const comment = new Comment(this.ctx, data)
+  protected createComment(cData: CommentData, ctxData?: CommentData[]) {
+    if (!ctxData) ctxData = this.commentDataList
+
+    const comment = new Comment(this.ctx, cData)
+    comment.flatMode = this.flatMode
    comment.afterRender = () => {
      if (this.renderComment) this.renderComment(comment)
    }
@@ -293,6 +305,15 @@ export default class ListLite extends Component {
      this.refreshUI()
    }

+    // 子评论查找回复对象
+    comment.replyTo = (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+
+    // 渲染元素
+    comment.render()
+
+    // 放入 comment 总表中
+    this.commentList.push(comment)
+
    return comment
  }

@@ -303,42 +324,35 @@ export default class ListLite extends Component {
        this.putCommentFlatMode(commentData, srcData, 'append')
      })
    } else {
-      this.importCommentsNesting(srcData)
+      this.importCommentsNest(srcData)
    }
  }

  // 导入评论 · 嵌套模式
-  private importCommentsNesting(srcData: CommentData[]) {
-    // 查找并导入所有子评论
-    const loadChildren = (parentC: Comment) => {
-      const children = srcData.filter(o => o.rid === parentC.data.id)
-      children.forEach((childData: CommentData) => {
-        const childC = this.createComment(childData)
-        childC.render()
-
-        // 插入到父评论中
-        parentC.putChild(childC)
-
-        // 递归加载子评论
-        loadChildren(childC)
-      })
-    }
-
+  private importCommentsNest(srcData: CommentData[]) {
    // 遍历 root 评论
-    const rootComments = srcData.filter((o) => o.rid === 0)
-    rootComments.forEach((rootData: CommentData) => {
-      const rootC = this.createComment(rootData)
-      rootC.render()
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.nestSortBy, this.conf.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.createComment(rootNode.comment, srcData)

      // 显示并播放渐入动画
      this.$commentsWrap.appendChild(rootC.getEl())
      rootC.playFadeInAnim()

-      // 评论放入 comments 总表中
-      this.comments.push(rootC)
-
      // 加载子评论
-      loadChildren(rootC)
+      const that = this
+      ;(function loadChildren(parentC: Comment, parentNode: ListNest.CommentNode) {
+        parentNode.children.forEach((node: ListNest.CommentNode) => {
+          const childD = node.comment
+          const childC = that.createComment(childD, srcData)
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      })(rootC, rootNode)

      // 限高检测
      rootC.checkHeightLimit()
@@ -346,18 +360,9 @@ export default class ListLite extends Component {
  }

  /** 导入评论 · 平铺模式 */
-  private putCommentFlatMode(cData: CommentData, srcData: CommentData[], insertMode: 'append'|'prepend') {
+  private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
    if (cData.is_collapsed) cData.is_allow_reply = false
-    const comment = this.createComment(cData)
-    if (cData.rid !== 0) {
-      const rComment = srcData.find(o => o.id === cData.rid)
-      if (rComment) comment.replyTo = rComment
-    }
-    comment.render()
-
-    // 将评论导入 comments 总表中
-    if (insertMode === 'append') this.comments.push(comment)
-    if (insertMode === 'prepend') this.comments.unshift(comment)
+    const comment = this.createComment(cData, ctxData)

    // 可见评论添加到界面
    // 注：不可见评论用于显示 “引用内容”
@@ -378,17 +383,15 @@ export default class ListLite extends Component {
    if (!this.flatMode) {
      // 嵌套模式
      const comment = this.createComment(commentData)
-      comment.render()

      if (commentData.rid === 0) {
        // root评论 新增
        this.$commentsWrap.prepend(comment.getEl())
-        this.comments.unshift(comment)
      } else {
        // 子评论 新增
        const parent = this.findComment(commentData.rid)
        if (parent) {
-          parent.putChild(comment)
+          parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))

          // 若父评论存在 “子评论部分” 限高，取消限高
          comment.getParents().forEach((p) => {
@@ -403,7 +406,7 @@ export default class ListLite extends Component {
      comment.playFadeInAnim() // 播放评论渐出动画
    } else {
      // 平铺模式
-      const comment = this.putCommentFlatMode(commentData, this.comments.map(c => c.data), 'prepend')
+      const comment = this.putCommentFlatMode(commentData, this.commentDataList, 'prepend')
      Ui.scrollIntoView(comment.getEl()) // 滚动到可见
    }

@@ -415,47 +418,22 @@ export default class ListLite extends Component {
    this.ctx.trigger('comments-loaded')
  }

-  /** 遍历操作 Comment (包括子评论) */
-  protected 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
-    })
-  }
-
  /** 查找评论项 */
-  protected 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
+  protected findComment(id: number): Comment|undefined {
+    return this.commentList.find(c => c.data.id === id)
  }

  /** 删除评论 */
-  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
+  public deleteComment(_comment: number|Comment) {
+    let comment: Comment
+    if (typeof _comment === 'number') {
+      const findComment = this.findComment(_comment)
+      if (!findComment) throw Error(`未找到评论 ${_comment}`)
+      comment = findComment
+    } else comment = _comment

-    findComment.getEl().remove()
-    this.eachComment(this.comments, (item, levelList) => {
-      if (item === findComment) {
-        levelList.splice(levelList.indexOf(item), 1)
-        return false
-      }
-      return true
-    })
+    comment.getEl().remove()
+    this.commentList.splice(this.commentList.indexOf(comment), 1)

    if (this.data) this.data.total -= 1 // 评论数减 1

@@ -466,7 +444,7 @@ export default class ListLite extends Component {
  public clearAllComments() {
    this.$commentsWrap.innerHTML = ''
    this.data = undefined
-    this.comments = []
+    this.commentList = []
  }

  /** 更新未读数据 */
@@ -475,7 +453,7 @@ export default class ListLite extends Component {

    // 高亮评论
    if (this.unreadHighlight === true) {
-      this.eachComment(this.comments, (comment) => {
+      this.commentList.forEach((comment) => {
        const notify = this.unread.find(o => o.comment_id === comment.data.id)
        if (notify) {
          comment.setUnread(true)
@@ -0,0 +1,66 @@
+import { CommentData } from '~/types/artalk-data'
+
+export type CommentNode = {
+  id: number
+  comment: CommentData
+  children: CommentNode[]
+  parent?: CommentNode
+  level: number
+}
+
+export type SortByType = 'DATE_DESC'|'DATE_ASC'|'SRC_INDEX'|'VOTE_UP_DESC'
+
+// 构建树状结构列表
+export function makeNestCommentNodeList(srcData: CommentData[], sortBy: SortByType = 'DATE_DESC', nestMax = 2) {
+  const nodeList: CommentNode[] = []
+
+  const roots = srcData.filter((o) => o.rid === 0)
+  roots.forEach((root: CommentData) => {
+    const rootNode: CommentNode = {
+      id: root.id,
+      comment: root,
+      children: [],
+      level: 1,
+    }
+
+    rootNode.parent = rootNode
+    nodeList.push(rootNode)
+
+    ;(function loadChildren(parentNode: CommentNode) {
+      const children = srcData.filter((o) => o.rid === parentNode.id)
+      if (children.length === 0) return
+      if (parentNode.level >= nestMax) parentNode = parentNode.parent!
+      children.forEach((child: CommentData) => {
+        const childNode: CommentNode = {
+          id: child.id,
+          comment: child,
+          children: [],
+          parent: parentNode,
+          level: parentNode.level + 1,
+        }
+
+        parentNode.children.push(childNode)
+        loadChildren(childNode)
+      })
+    })(rootNode)
+  })
+
+  // 排序
+  const sortFunc = (a: CommentNode, b: CommentNode): number => {
+    let v = a.id - b.id
+    if (sortBy === 'DATE_ASC') v = +new Date(a.comment.date) - +new Date(b.comment.date)
+    else if (sortBy === 'DATE_DESC') v = +new Date(b.comment.date) - +new Date(a.comment.date)
+    else if (sortBy === 'SRC_INDEX') v = srcData.indexOf(a.comment) - srcData.indexOf(b.comment)
+    else if (sortBy === 'VOTE_UP_DESC') v = b.comment.vote_up - a.comment.vote_up
+    return v
+  }
+
+  (function sortLevels(nodes: CommentNode[]) {
+    nodes.forEach((node) => {
+      node.children = node.children.sort(sortFunc)
+      sortLevels(node.children)
+    })
+  })(nodeList)
+
+  return nodeList
+}
@@ -112,11 +112,19 @@ export default class List extends ListLite {
    super.onLoad(data, offset)

    // 检测锚点跳转
-    this.checkGoToCommentByUrlHash()
+    if (!this.goToCommentFounded) this.checkGoToCommentByUrlHash()
+
+    // 防止评论框被吞
+    if (this.ctx.conf.editorTravel === true) {
+      this.ctx.trigger('editor-travel-back')
+    }
  }

+  private goToCommentFounded = false
+  public goToCommentDelay = true
+
  /** 跳到评论项位置 - 根据 `location.hash` */
-  public async checkGoToCommentByUrlHash () {
+  public checkGoToCommentByUrlHash() {
    let commentId = Number(Utils.getQueryParam('atk_comment')) // same as backend GetReplyLink()
    if (!commentId) {
      const match = window.location.hash.match(/#atk-comment-([0-9]+)/)
@@ -125,6 +133,14 @@ export default class List extends ListLite {
    }
    if (!commentId) return

+    const comment = this.findComment(commentId)
+    if (!comment) { // 若找不到评论
+      // 自动翻页
+      if (this.readMoreBtn) this.readMoreBtn.click()
+      else if (this.pagination) this.pagination.next()
+      return
+    }
+
    // 已阅 API
    const notifyKey = Utils.getQueryParam('atk_notify_key')
    if (notifyKey) {
@@ -137,20 +153,24 @@ export default class List extends ListLite {
        })
    }

-    const comment = this.findComment(commentId)
-    // TODO 若找不到评论的情况
-    // if (!comment) { // 若找不到评论
-    //   if (this.hasMoreComments) { // 阅读更多，并重试
-    //     await this.fetchComments()
-    //   }
-    // }
+    // 若父评论存在 “子评论部分” 限高，取消限高
+    comment.getParents().forEach((p) => {
+      if (p.$children) p.heightLimitRemove(p.$children)
+    })

-    if (!comment) return
+    const goTo = () => {
+      Ui.scrollIntoView(comment.getEl(), false)

-    Ui.scrollIntoView(comment.getEl(), false)
-    window.setTimeout(() => {
-      comment.getEl().classList.add('atk-flash-once')
-    }, 800)
+      comment.getEl().classList.remove('atk-flash-once')
+      window.setTimeout(() => {
+        comment.getEl().classList.add('atk-flash-once')
+      }, 150)
+    }
+
+    if (!this.goToCommentDelay) goTo()
+    else window.setTimeout(() => goTo(), 350)
+
+    this.goToCommentFounded = true
  }

  /** 管理员设置页面信息 */
@@ -38,7 +38,7 @@ export default class Pagination {
      `<div class="atk-pagination-wrap">
        <div class="atk-pagination">
          <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" />
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
          <div class="atk-btn atk-btn-next">Next</div>
        </div>
      </div>`)
@@ -9,9 +9,13 @@ const defaults: ArtalkConfig = {
  placeholder: '键入内容...',
  noComment: '「此时无声胜有声」',
  sendBtn: '发送评论',
-  darkMode: false,
+  darkMode: 'auto',
  editorTravel: true,

+  flatMode: 'auto',
+  nestMax: 2,
+  nestSort: 'DATE_ASC',
+
  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",

  vote: true,
@@ -19,8 +23,7 @@ const defaults: ArtalkConfig = {
  uaBadge: true,
  listSort: true,
  pvEl: '#ArtalkPV',
-  flatMode: 'auto',
-  maxNesting: 3,
+
  gravatar: {
    default: 'mp',
    mirror: 'https://sdn.geekzu.org/avatar/',
@@ -40,6 +43,7 @@ const defaults: ArtalkConfig = {
  imgUpload: true,
  reqTimeout: 15000,
  versionCheck: true,
+  useBackendConf: false,
 }

 export default defaults
@@ -293,3 +293,33 @@ export function getURLBasedOnApi(ctx: Context, path: string) {
 export function getURLBasedOn(baseURL: string, path: string) {
  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
 }
+
+/**
+ * Performs a deep merge of `source` into `target`.
+ * Mutates `target` only but not its objects and arrays.
+ *
+ * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
+ * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
+ */
+export function mergeDeep(target: any, source: any) {
+  const isObject = (obj: any) => obj && typeof obj === 'object'
+
+  if (!isObject(target) || !isObject(source)) {
+    return source
+  }
+
+  Object.keys(source).forEach(key => {
+    const targetValue = target[key]
+    const sourceValue = source[key]
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue)
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = mergeDeep({ ...targetValue}, sourceValue)
+    } else {
+      target[key] = sourceValue
+    }
+  })
+
+  return target
+}
@@ -2,8 +2,8 @@
  --at-color-font: #2a2e2e;
  --at-color-deep: #2a2e2e;
  --at-color-sub: #757575;
-  --at-color-grey: #999;
-  --at-color-meta: #757e91;
+  --at-color-grey: #747474;
+  --at-color-meta: #697182;
  --at-color-border: #eceff2;
  --at-color-light: #4285f4;
  --at-color-bg: #FFF;
@@ -83,6 +83,27 @@
          color: var(--at-color-main);
          text-decoration: none;
        }
+
+        &.atk-reply-at {
+          margin-left: 2px;
+
+          & > .atk-arrow:before {
+            content: '';
+            vertical-align: middle;
+            transform: rotate(90deg);
+            border-bottom: 4px solid var(--at-color-grey);
+            border-left: 3px solid transparent;
+            border-right: 3px solid transparent;
+            display: inline-block;
+            margin-top: -1px;
+          }
+
+          & > .atk-nick {
+            color: var(--at-color-main);
+            cursor: pointer;
+            margin-left: 6px;
+          }
+        }
      }

      .badge() {
@@ -27,7 +27,7 @@ export default interface ArtalkConfig {
  editorTravel?: boolean

  /** 表情包 */
-  emoticons?: any
+  emoticons?: object|any[]|string|false

  /** Gravatar 头像 */
  gravatar?: {
@@ -66,7 +66,7 @@ export default interface ArtalkConfig {
  pvEl?: string

  /** 暗黑模式 */
-  darkMode?: boolean
+  darkMode?: boolean|'auto'

  /** 请求超时（单位：秒） */
  reqTimeout?: number
@@ -74,8 +74,11 @@ export default interface ArtalkConfig {
  /** 平铺模式 */
  flatMode?: boolean|'auto'

-  /** 最大嵌套数 */
-  maxNesting?: number
+  /** 嵌套模式 · 最大层数 */
+  nestMax?: number
+
+  /** 嵌套模式 · 排序方式 */
+  nestSort?: 'DATE_ASC'|'DATE_DESC'

  /** 显示 UA 徽标 */
  uaBadge?: boolean
@@ -88,6 +91,9 @@ export default interface ArtalkConfig {

  /** 版本检测 */
  versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }

 export interface LocalUser {
@@ -15,18 +15,12 @@ export default defineConfig({
      formats: ["es", "umd", "iife"]
    },
    rollupOptions: {
-      // 确保外部化处理那些你不想打包进库的依赖
-      external: ['vue'],
      output: {
        assetFileNames: assetInfo => {
          if (/\.css$/.test(assetInfo.name)) {
            return 'Artalk.css'
          }
          return "[name].[ext]"
-        },
-        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
-        globals: {
-          vue: 'Vue'
        }
      }
    }
@@ -14,6 +14,7 @@ importers:
      eslint-config-airbnb-typescript: ^16.2.0
      eslint-config-prettier: ^8.5.0
      eslint-import-resolver-typescript: ^2.7.1
+      eslint-plugin-compat: ^4.0.2
      eslint-plugin-import: ^2.26.0
      less: ^4.1.2
      postcss: ^8.4.12
@@ -33,6 +34,7 @@ importers:
      eslint-config-airbnb-typescript: 16.2.0_k36of5ozdjqjlufoyxmfufql74
      eslint-config-prettier: 8.5.0_eslint@8.13.0
      eslint-import-resolver-typescript: 2.7.1_exn47ogp5s3uddv5u4jgmsv6g4
+      eslint-plugin-compat: 4.0.2_eslint@8.13.0
      eslint-plugin-import: 2.26.0_eslint@8.13.0
      less: 4.1.2
      postcss: 8.4.12
@@ -45,10 +47,12 @@ importers:
  packages/artalk:
    specifiers:
      '@types/marked': ^4.0.3
+      abortcontroller-polyfill: ^1.7.3
      hanabi: ^0.4.0
      insane: ^2.6.2
      marked: ^4.0.14
    dependencies:
+      abortcontroller-polyfill: 1.7.3
      hanabi: 0.4.0
      insane: 2.6.2
      marked: 4.0.14
@@ -110,6 +114,14 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@mdn/browser-compat-data/3.3.14:
+    resolution: {integrity: sha512-n2RC9d6XatVbWFdHLimzzUJxJ1KY8LdjqrW6YvGPiRmsHkhOUx74/Ct10x5Yo7bC/Jvqx7cDEW8IMPv/+vwEzA==}
+    dev: true
+
+  /@mdn/browser-compat-data/4.1.19:
+    resolution: {integrity: sha512-zDrdjvX2dwunW4HOGwpibLHvfnDRQOJ89bGnkQ7TXZ7H7JSehbg2Gf0zNbML+R/03QItZ7EI6QHloOJ2znFSdA==}
+    dev: true
+
  /@nodelib/fs.scandir/2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@@ -298,6 +310,10 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

+  /abortcontroller-polyfill/1.7.3:
+    resolution: {integrity: sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==}
+    dev: false
+
  /acorn-jsx/5.3.2_acorn@8.7.0:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@@ -367,6 +383,12 @@ packages:
    resolution: {integrity: sha1-/9F7Ib9dayLnd7mJaBqBVFaj3T4=}
    dev: false

+  /ast-metadata-inferer/0.7.0:
+    resolution: {integrity: sha512-OkMLzd8xelb3gmnp6ToFvvsHLtS6CbagTkFQvQ+ZYFe3/AIl9iKikNR9G7pY3GfOR/2Xc222hwBjzI7HLkE76Q==}
+    dependencies:
+      '@mdn/browser-compat-data': 3.3.14
+    dev: true
+
  /autoprefixer/10.4.4_postcss@8.4.12:
    resolution: {integrity: sha512-Tm8JxsB286VweiZ5F0anmbyGiNI3v3wGv3mz9W+cxEDYB/6jbnj6GM9H9mK3wIL8ftgl+C07Lcwb8PG5PCCPzA==}
    engines: {node: ^10 || ^12 || >=14}
@@ -472,6 +494,11 @@ packages:
      is-what: 3.14.1
    dev: true

+  /core-js/3.22.4:
+    resolution: {integrity: sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w==}
+    requiresBuild: true
+    dev: true
+
  /cross-spawn/7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@@ -882,6 +909,23 @@ packages:
      find-up: 2.1.0
    dev: true

+  /eslint-plugin-compat/4.0.2_eslint@8.13.0:
+    resolution: {integrity: sha512-xqvoO54CLTVaEYGMzhu35Wzwk/As7rCvz/2dqwnFiWi0OJccEtGIn+5qq3zqIu9nboXlpdBN579fZcItC73Ycg==}
+    engines: {node: '>=9.x'}
+    peerDependencies:
+      eslint: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@mdn/browser-compat-data': 4.1.19
+      ast-metadata-inferer: 0.7.0
+      browserslist: 4.20.2
+      caniuse-lite: 1.0.30001332
+      core-js: 3.22.4
+      eslint: 8.13.0
+      find-up: 5.0.0
+      lodash.memoize: 4.1.2
+      semver: 7.3.5
+    dev: true
+
  /eslint-plugin-import/2.26.0_eslint@8.13.0:
    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
    engines: {node: '>=4'}
@@ -1076,6 +1120,14 @@ packages:
      locate-path: 2.0.0
    dev: true

+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
  /flat-cache/3.0.4:
    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
    engines: {node: ^10.12.0 || >=12.0.0}
@@ -1458,6 +1510,17 @@ packages:
      path-exists: 3.0.0
    dev: true

+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash.memoize/4.1.2:
+    resolution: {integrity: sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=}
+    dev: true
+
  /lodash.merge/4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: true
@@ -1627,6 +1690,13 @@ packages:
      p-try: 1.0.0
    dev: true

+  /p-limit/3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
  /p-locate/2.0.0:
    resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
    engines: {node: '>=4'}
@@ -1634,6 +1704,13 @@ packages:
      p-limit: 1.3.0
    dev: true

+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
  /p-try/1.0.0:
    resolution: {integrity: sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=}
    engines: {node: '>=4'}
@@ -1656,6 +1733,11 @@ packages:
    engines: {node: '>=4'}
    dev: true

+  /path-exists/4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
  /path-is-absolute/1.0.1:
    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
    engines: {node: '>=0.10.0'}
@@ -1803,6 +1885,14 @@ packages:
    hasBin: true
    dev: true

+  /semver/7.3.5:
+    resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
  /semver/7.3.7:
    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
    engines: {node: '>=10'}
@@ -2039,3 +2129,8 @@ packages:
  /yallist/4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: true
+
+  /yocto-queue/0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
Author	SHA1	Message	Date
qwqcode	25552f7994	v2.2.12 Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 23:30:37 +08:00
qwqcode	a1de9c2138	chore(docs): Update README.md Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 23:15:37 +08:00
qwqcode	182f631936	feat(conf): Support setting emoticons to false to disable Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 23:13:03 +08:00
qwqcode	c2698b4edb	feat(darkMode): Auto switch DarkMode by listening 'prefers-color-scheme: dark' Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 22:29:00 +08:00
qwqcode	0e9498009b	chore(list-lite): Combine all render method calls into one Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 22:06:59 +08:00
qwqcode	a37992c381	fix(list): Reply a newly created comment cannot be found Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 21:58:50 +08:00
qwqcode	088d97784f	chore(AbortController): Add polyfill and perform real abort when timeout Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-04 21:38:29 +08:00
qwqcode	e2de49ad79	Merge pull request #136 from ArtalkJS/chore/browsers chore: add browser compatibility lint	2022-05-04 16:50:52 +08:00
Percy Ma	0c66798762	chore: add browser compatibility lint	2022-05-04 14:47:51 +08:00
qwqcode	f0ea373b47	fix(sidebar): No interact after reply a comment in sidebar Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 17:41:12 +08:00
qwqcode	6f1f48c18f	v2.2.11 Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 17:13:10 +08:00
qwqcode	91a0406d44	feat(conf): Add nestSort option Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 17:12:55 +08:00
qwqcode	e58ae853cf	v2.2.10 Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 17:01:33 +08:00
qwqcode	7d679359d3	fix(at): Show AT after user badge	2022-05-01 17:00:41 +08:00
qwqcode	0b645e66e5	chore(defaults): Modify nestMax=2 as default. Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 16:47:43 +08:00
qwqcode	07c5e8fd03	v2.2.9 Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 16:28:50 +08:00
qwqcode	a5341c61df	feat: Improve nest mode & goto comment Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 16:26:41 +08:00
qwqcode	77f492475f	feat(comment): Child comments display @at on nesting mode. Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-05-01 01:02:53 +08:00
qwqcode	667fc66397	feat(editor): Auto add the url protocol of a link input. Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-26 17:02:26 +08:00
qwqcode	e270dbc951	chore(docs): Add Supporters	2022-04-25 21:32:55 +08:00
qwqcode	ddef66bba2	v2.2.8 Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-25 19:04:51 +08:00
qwqcode	7c4b40d626	feat(conf): Support control Frontend Conf by Backend. Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-25 14:31:37 +08:00
qwqcode	35df0c14ae	chore(docs): Add Artransfer-CLI in README.md Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-24 22:07:43 +08:00
Percy Ma	a9e0b1288a	perf(a11y): improve color contrast and add aria-label	2022-04-24 00:55:04 +08:00
qwqcode	848d7d4894	Merge pull request #121 from ArtalkJS/docs/readme docs(readme): add live minzipped size badge	2022-04-24 00:45:34 +08:00
qwqcode	0d96759e97	docs(readme): Add some words Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-24 00:44:09 +08:00
qwqcode	53d83b5aac	chore(docs): Update README.md Signed-off-by: qwqcode <qwqcode@gmail.com>	2022-04-24 00:29:15 +08:00
Percy Ma	f21e987ab0	docs(readme): add live minzipped size badge	2022-04-23 21:34:39 +08:00