v2.2.10

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

README.md

@@ -6,6 +6,7 @@
 
 [![](https://img.shields.io/npm/v/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
 [![](https://img.shields.io/npm/dt/artalk.svg?style=flat-square)](https://www.npmjs.com/package/artalk)
+[![](https://badgen.net/bundlephobia/minzip/artalk?style=flat-square)](https://bundlephobia.com/package/artalk)
 [![](https://img.shields.io/github/last-commit/ArtalkJS/Artalk/master.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/commits/master)
 [![](https://img.shields.io/github/issues-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/issues)
 [![](https://img.shields.io/github/issues-pr-raw/ArtalkJS/Artalk.svg?style=flat-square)](https://github.com/ArtalkJS/Artalk/pulls)
@@ -20,7 +21,7 @@
 
 ---
 
-- 轻量级 (~30kB gzipped)
+- 轻量级 (~30kB)
 - 自托管 (数据安全)
 - 易上手 (防秃顶)
 - Golang 后端 (易部署 / 跨平台)
@@ -122,12 +123,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 +157,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] 邮件异步队列发送

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

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

packages/artalk-sidebar/src/main.ts

@@ -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'
 
   // 初始化用户数据

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

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

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

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

packages/artalk/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <title>Artalk DEMO</title>
@@ -16,7 +16,8 @@
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
+    .desc { font-size:12px;color:#697182 }
+    body.dark-mode .desc { color:#848da3 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
     @media only screen and (max-width: 768px) {
@@ -26,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"
@@ -45,11 +46,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 +67,7 @@
       pageTitle: 'Artalk Home',
       server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
+      //useBackendConf: true,
     });
 
     window.artalk = artalk;

packages/artalk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.7",
-  "backendMinVersion": "2.1.2",
+  "version": "2.2.10",
+  "backendMinVersion": "2.1.4",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

packages/artalk/src/api/index.ts

@@ -1,4 +1,5 @@
 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'
@@ -294,7 +295,22 @@ 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
+      }
+    }
+
+    return conf
   }
 
   // ============================

packages/artalk/src/artalk.ts

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

packages/artalk/src/components/comment.ts

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

packages/artalk/src/components/editor.ts

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

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

@@ -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 = 'DATE_DESC'
+
   /** 分页 */
   public pageMode: 'pagination'|'read-more' = 'pagination'
   public pageSize: number = 20 // 每次请求获取量
@@ -265,7 +271,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 +289,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 +302,9 @@ export default class ListLite extends Component {
       this.refreshUI()
     }
 
+    // 子评论查找回复对象
+    comment.replyTo = (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+
     return comment
   }
 
@@ -303,31 +315,16 @@ 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)
+    const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.nestSortBy, this.conf.nestMax)
+    rootNodes.forEach((rootNode: ListNest.CommentNode) => {
+      const rootC = this.createComment(rootNode.comment, srcData)
       rootC.render()
 
       // 显示并播放渐入动画
@@ -335,10 +332,25 @@ export default class ListLite extends Component {
       rootC.playFadeInAnim()
 
       // 评论放入 comments 总表中
-      this.comments.push(rootC)
+      this.commentList.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)
+          childC.render()
+
+          // 插入到父评论中
+          parentC.putChild(childC)
+
+          that.commentList.push(childC)
+
+          // 递归加载子评论
+          loadChildren(childC, node)
+        })
+      })(rootC, rootNode)
 
       // 限高检测
       rootC.checkHeightLimit()
@@ -346,18 +358,13 @@ 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
-    }
+    const comment = this.createComment(cData, ctxData)
     comment.render()
 
     // 将评论导入 comments 总表中
-    if (insertMode === 'append') this.comments.push(comment)
-    if (insertMode === 'prepend') this.comments.unshift(comment)
+    this.commentList.push(comment)
 
     // 可见评论添加到界面
     // 注：不可见评论用于显示 “引用内容”
@@ -378,17 +385,18 @@ export default class ListLite extends Component {
     if (!this.flatMode) {
       // 嵌套模式
       const comment = this.createComment(commentData)
-      comment.render()
 
       if (commentData.rid === 0) {
         // root评论 新增
+        comment.render()
         this.$commentsWrap.prepend(comment.getEl())
-        this.comments.unshift(comment)
+        this.commentList.push(comment)
       } else {
         // 子评论 新增
         const parent = this.findComment(commentData.rid)
         if (parent) {
-          parent.putChild(comment)
+          comment.render()
+          parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
 
           // 若父评论存在 “子评论部分” 限高，取消限高
           comment.getParents().forEach((p) => {
@@ -403,7 +411,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 +423,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 +449,7 @@ export default class ListLite extends Component {
   public clearAllComments() {
     this.$commentsWrap.innerHTML = ''
     this.data = undefined
-    this.comments = []
+    this.commentList = []
   }
 
   /** 更新未读数据 */
@@ -475,7 +458,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)

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

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

packages/artalk/src/components/list.ts

@@ -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
   }
 
   /** 管理员设置页面信息 */

packages/artalk/src/components/pagination.ts

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

packages/artalk/src/defaults.ts

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

packages/artalk/src/lib/utils.ts

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

packages/artalk/src/style/_color.less

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

packages/artalk/src/style/comment.less

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

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

@@ -74,8 +74,8 @@ export default interface ArtalkConfig {
   /** 平铺模式 */
   flatMode?: boolean|'auto'
 
-  /** 最大嵌套数 */
-  maxNesting?: number
+  /** 嵌套模式 · 最大层数 */
+  nestMax?: number
 
   /** 显示 UA 徽标 */
   uaBadge?: boolean
@@ -88,6 +88,9 @@ export default interface ArtalkConfig {
 
   /** 版本检测 */
   versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }
 
 export interface LocalUser {