artalk 2.2.6 → 2.2.9

package/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;

package/package.json

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

package/src/api/index.ts

@@ -1,5 +1,6 @@
-import Context from '../context'
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 
@@ -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
   }
 
   // ============================
@@ -318,4 +334,20 @@ export default class Api {
     const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/status`)
     return (data || { is_pass: false }) as { is_pass: boolean }
   }
+
+  // ============================
+  //  管理员缓存操作
+  // ============================
+
+  /** 缓存清除 */
+  public cacheFlushAll() {
+    const params: any = { flush_all: true }
+    return POST(this.ctx, `${this.baseURL}/admin/cache-flush`, params)
+  }
+
+  /** 缓存预热 */
+  public cacheWarmUp() {
+    const params: any = {}
+    return POST(this.ctx, `${this.baseURL}/admin/cache-warm`, params)
+  }
 }

package/src/artalk.ts

@@ -1,7 +1,8 @@
 import './style/main.less'
 
-import Context from './context'
 import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Handler } from '~/types/event'
+import Context from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
@@ -10,9 +11,9 @@ import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
 import Layer, { GetLayerWrap } from './components/layer'
-import { EventPayloadMap, Handler } from '~/types/event'
 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
@@ -66,10 +67,25 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
-    this.initLayer()
-    this.initDarkMode()
 
+    // 初始化组件
+    if (this.conf.useBackendConf) {
+      // 复用后端的配置
+      // @ts-ignore
+      return (async () => {
+        await this.loadConfRemote()
+        this.initCore()
+        return this // Promise<Artalk>
+      })()
+    }
+
+    this.initCore()
+  }
+
+  private initCore() {
     // 组件初始化
+    this.initLayer()
+    this.initDarkMode()
     this.checkerLauncher = new CheckerLauncher(this.ctx)
     Utils.initMarked(this.ctx) // 初始化 marked
 
@@ -102,10 +118,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()
     })
 

package/src/components/comment.ts

@@ -1,11 +1,11 @@
 import '../style/comment.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import UADetect from '../lib/detect'
-import { CommentData } from '~/types/artalk-data'
 import CommentHTML from './html/comment.html?raw'
 import Api from '../api'
 import ActionBtn from './action-btn'
@@ -15,6 +15,7 @@ export default class Comment extends Component {
 
   public $main!: HTMLElement
   public $header!: HTMLElement
+  public $headerNick!: HTMLElement
   public $body!: HTMLElement
   public $content!: HTMLElement
   public $children!: HTMLElement|null
@@ -23,12 +24,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 flatMode: boolean = false
+  public replyTo?: CommentData // 回复对象
 
-  public replyTo?: CommentData // 回复对象（flatMode 用）
-  public $replyTo?: HTMLElement
+  public $replyTo?: HTMLElement // 回复评论内容 (平铺下显示)
+  public $replyAt?: HTMLElement // 回复 AT（层级嵌套下显示）
 
   public afterRender?: () => void
 
@@ -43,13 +47,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 +74,7 @@ export default class Comment extends Component {
     this.renderAvatar()
     this.renderHeader()
     this.renderContent()
+    this.renderReplyAt()
     this.renderReplyTo()
     this.renderPending()
     this.renderActionBtn()
@@ -117,14 +122,14 @@ 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')!
@@ -138,7 +143,7 @@ export default class Comment extends Component {
 
     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 +194,22 @@ 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() }
+
+    this.$headerNick.insertAdjacentElement('afterend', this.$replyAt)
+  }
+
   // 回复的对象
   private renderReplyTo() {
+    if (!this.flatMode) return // 仅平铺模式显示
     if (!this.replyTo) return
 
     this.$replyTo = Utils.createElement(`
@@ -198,13 +217,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 +353,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() {

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

@@ -1,10 +1,10 @@
 import './emoticons-plug.less'
 
-import Editor from '../editor'
-import EditorPlug from './editor-plug'
 import * as Utils from '~/src/lib/utils'
 import * as Ui from '~/src/lib/ui'
 import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
+import EditorPlug from './editor-plug'
+import Editor from '../editor'
 
 type OwOFormatType = {
   [key: string] : {

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

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

package/src/components/editor.ts

@@ -1,5 +1,6 @@
 import '../style/editor.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
@@ -8,7 +9,6 @@ import EditorHTML from './html/editor.html?raw'
 
 import EmoticonsPlug from './editor-plugs/emoticons-plug'
 import PreviewPlug from './editor-plugs/preview-plug'
-import { CommentData } from '~/types/artalk-data'
 import Api from '../api'
 
 export default class Editor extends Component {
@@ -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