artalk 2.2.12 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.12",
-  "backendMinVersion": "2.1.6",
+  "version": "2.3.0",
+  "backendMinVersion": "2.1.7",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -24,17 +24,18 @@
   "module": "./dist/Artalk.es.js",
   "types": "./types/index.d.ts",
   "devDependencies": {
-    "@types/marked": "^4.0.3"
+    "@types/marked": "4.0.3"
   },
   "dependencies": {
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
-    "marked": "^4.0.14",
+    "marked": "^4.0.16",
     "abortcontroller-polyfill": "^1.7.3"
   },
   "scripts": {
     "dev": "vite",
-    "build": "pnpm lint && vite build",
+    "build": "pnpm lint && vite build && pnpm build:lite",
+    "build:lite": "vite build --config vite-lite.config.ts",
     "build:demo": "vite build --config vite-demo.config.ts",
     "serve": "vite preview",
     "deploy": "gh-pages -d deploy",

package/src/api/index.ts

@@ -1,6 +1,6 @@
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
 import ArtalkConfig from '~/types/artalk-config'
-import Context from '../context'
+import Context from '~/types/context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
@@ -274,6 +274,25 @@ export default class Api {
     return p.pv as number
   }
 
+  /** 统计 */
+  public async stat(
+    type: 'latest_comments'|'latest_pages'|'pv_most_pages'|'comment_most_pages'|
+          'page_pv'|'site_pv'|'page_comment'|'site_comment',
+    pageKeys?: string|string[],
+    limit?: number
+  ) {
+    const params: any = {
+      type,
+      site_name: this.ctx.conf.site || '',
+    }
+
+    if (pageKeys) params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(',') : pageKeys
+    if (limit) params.limit = limit
+
+    const data = await POST<PageData[]|CommentData[]|object|number>(this.ctx, `${this.baseURL}/stat`, params)
+    return data
+  }
+
   /** 图片上传 */
   public async imgUpload(file: File) {
     const params: any = {

package/src/api/request.ts

@@ -1,4 +1,4 @@
-import Context from '../context'
+import Context from '~/types/context'
 
 /** 公共请求函数 */
 export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
@@ -10,14 +10,14 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   }
 
   // 请求操作
-  const resp = await timeoutFetch(input, timeout || ctx.conf.reqTimeout || 15000, init)
+  const resp = await timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15000, init)
 
   const respHttpCode = resp.status
   const noAccessCodes = [401, 400]
   const isNoAccess = noAccessCodes.includes(respHttpCode)
 
   if (!resp.ok && !isNoAccess)
-    throw new Error(`请求响应 ${respHttpCode}`)
+    throw new Error(`${ctx.$t('reqGot')} ${respHttpCode}`)
 
   // 解析获取响应的 json
   let json: any = await resp.json()
@@ -33,7 +33,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   if (json.data?.need_captcha) {
     // 请求需要验证码
     json = await (new Promise<any>((resolve, reject) => {
-      ctx.trigger('checker-captcha', {
+      ctx.checkCaptcha({
         imgData: json.data.img_data,
         iframe: json.data.iframe,
         onSuccess: () => { recall(resolve, reject) },
@@ -43,7 +43,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   } else if (json.data?.need_login || isNoAccess) {
     // 请求需要管理员权限
     json = await (new Promise<any>((resolve, reject) => {
-      ctx.trigger('checker-admin', {
+      ctx.checkAdmin({
         onSuccess: () => { recall(resolve, reject) },
         onCancel: () => { reject(json) }
       })
@@ -82,7 +82,7 @@ export function ToFormData(object: {[key: string]: any}): FormData {
 }
 
 /** 我靠，fetch 一个 timeout，都要丑陋的实现 */
-function timeoutFetch(url: RequestInfo, ms: number, opts: RequestInit) {
+function timeoutFetch(ctx: Context, url: RequestInfo, ms: number, opts: RequestInit) {
   const controller = new AbortController()
   opts.signal?.addEventListener('abort', () => controller.abort()) // 保留原有 signal 功能
   let promise = fetch(url, { ...opts, signal: controller.signal })
@@ -91,7 +91,7 @@ function timeoutFetch(url: RequestInfo, ms: number, opts: RequestInit) {
     promise.finally(() => { clearTimeout(timer) })
   }
   promise = promise.catch((err) => {
-    throw ((err || {}).name === 'AbortError') ? new Error('请求超时或意外终止') : err
+    throw ((err || {}).name === 'AbortError') ? new Error(ctx.$t('reqAborted')) : err
   })
   return promise
 }

package/src/artalk.ts

@@ -2,22 +2,24 @@ import './style/main.less'
 
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Handler } from '~/types/event'
-import Context from './context'
+import Context from '~/types/context'
+import ConcreteContext from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
-import Editor from './components/editor'
-import List from './components/list'
-import SidebarLayer from './components/sidebar-layer'
+import Editor from './editor'
+import List from './list'
+import SidebarLayer from './layer/sidebar-layer'
 
-import Layer, { GetLayerWrap } from './components/layer'
+import Layer, { GetLayerWrap } from './layer'
 import Api from './api'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
 
 /**
  * Artalk
- * @link https://artalk.js.org
+ *
+ * @website https://artalk.js.org
  */
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
@@ -26,12 +28,13 @@ export default class Artalk {
   public conf!: ArtalkConfig
   public $root!: HTMLElement
 
+  public api!: Api
   public checkerLauncher!: CheckerLauncher
   public editor!: Editor
   public list!: List
   public sidebarLayer!: SidebarLayer
 
-  constructor (customConf: ArtalkConfig) {
+  constructor(customConf: Partial<ArtalkConfig>) {
     // 配置
     this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
     this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
@@ -53,12 +56,14 @@ export default class Artalk {
     }
 
     // 装载元素
-    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
+    this.conf.el = this.conf.el || document.createElement('div') // 允许 this.conf.el 为空
+
+    if (this.conf.el instanceof HTMLElement) {
       this.$root = this.conf.el
     } else {
       try {
         const $root = document.querySelector<HTMLElement>(this.conf.el)
-        if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+        if (!$root) throw Error(`Target element "${this.conf.el}" was not found.`)
         this.$root = $root
       } catch (e) {
         console.error(e)
@@ -67,7 +72,11 @@ export default class Artalk {
     }
 
     // Context 初始化
-    this.ctx = new Context(this.$root, this.conf)
+    this.ctx = new ConcreteContext(this.$root, this.conf)
+
+    // API 初始化
+    this.api = new Api(this.ctx)
+    this.ctx.setApi(this.api)
 
     // 界面初始化
     this.$root.classList.add('artalk')
@@ -88,22 +97,30 @@ export default class Artalk {
   }
 
   private initCore() {
-    // 组件初始化
+    /* 组件初始化 */
     this.initLayer()
     this.initDarkMode()
+
+    // CheckerLauncher
     this.checkerLauncher = new CheckerLauncher(this.ctx)
-    Utils.initMarked(this.ctx) // 初始化 marked
+    this.ctx.setCheckerLauncher(this.checkerLauncher)
+
+    // 初始化 marked
+    Utils.initMarked(this.ctx)
 
     // 编辑器
     this.editor = new Editor(this.ctx)
+    this.ctx.setEditor(this.editor)
     this.$root.appendChild(this.editor.$el)
 
     // 评论列表
     this.list = new List(this.ctx)
+    this.ctx.setList(this.list)
     this.$root.appendChild(this.list.$el)
 
     // 侧边栏
     this.sidebarLayer = new SidebarLayer(this.ctx)
+    this.ctx.setSidebarLayer(this.sidebarLayer)
     this.$root.appendChild(this.sidebarLayer.$el)
 
     // 评论获取
@@ -113,7 +130,7 @@ export default class Artalk {
     this.initEventBind()
 
     // 其他
-    this.initPV()
+    this.initCountAndPV()
 
     // 插件初始化
     Artalk.Plugins.forEach(plugin => {
@@ -128,8 +145,8 @@ export default class Artalk {
     Ui.showLoading(this.$root)
     let backendConf = {}
     try {
-      backendConf = await (new Api(this.ctx)).conf()
-    } catch (err) { console.error("配置远程获取失败", err) }
+      backendConf = await this.ctx.getApi().conf()
+    } catch (err) { console.error("Load config from remote err", err) }
     this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
     Ui.hideLoading(this.$root)
   }
@@ -142,33 +159,10 @@ export default class Artalk {
       this.list.checkGoToCommentByUrlHash()
     })
 
-    // 仅管理员显示控制
-    this.ctx.on('check-admin-show-el', () => {
-      const items: HTMLElement[] = []
-
-      this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-      // for layer
-      const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
-      if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-      // for sidebar
-      // TODO: 这个其实应该写在 packages/artalk-sidebar 里面的
-      const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
-      if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
-
-      items.forEach(($item: HTMLElement) => {
-        if (this.ctx.user.data.isAdmin)
-          $item.classList.remove('atk-hide')
-        else
-          $item.classList.add('atk-hide')
-      })
-    })
-
     // 本地用户数据变更
     this.ctx.on('user-changed', () => {
-      this.ctx.trigger('check-admin-show-el')
-      this.ctx.trigger('list-refresh-ui')
+      this.ctx.checkAdminShowEl()
+      this.ctx.listRefreshUI()
     })
   }
 
@@ -220,19 +214,43 @@ export default class Artalk {
     }
   }
 
-  /** PV */
-  public async initPV() {
-    const pvNum = await new Api(this.ctx).pv()
-    if (Number.isNaN(Number(pvNum)))
-      return
+  /** 初始化评论数和 PV 数量展示元素 */
+  public async initCountAndPV() {
+    // 评论数
+    const countEl = this.conf.countEl
+    if (countEl && document.querySelector(countEl)) {
+      this.handleStatCount({ api: 'page_comment', countEl })
+    }
 
-    if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
-      return
+    // PV
+    const curtPagePvNum = await this.ctx.getApi().pv()
+    const pvEl = this.conf.pvEl
+    if (pvEl && document.querySelector(pvEl)) {
+      this.handleStatCount({ api: 'page_pv', countEl: pvEl, curtPageCount: curtPagePvNum })
+    }
+  }
 
-    const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
-    // $pv.innerText = '-' // 默认占位符
+  private async handleStatCount(args: { api: 'page_pv'|'page_comment', countEl: string, curtPageCount?: number }) {
+    let pageCounts: {[key: string]: number} = {}
+
+    // 当前页面的统计数
+    const curtPageKey = this.ctx.conf.pageKey
+    if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
+
+    // 查询其他页面的统计数
+    let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
+      .map(e => e.getAttribute('data-page-key') || curtPageKey)
+      .filter(pageKey => pageCounts[pageKey] === undefined)
+    queryPageKeys = [...new Set(queryPageKeys)] // 去重
+    if (queryPageKeys.length > 0) {
+      const counts: any = await this.ctx.getApi().stat(args.api, queryPageKeys)
+      pageCounts = { ...pageCounts, ...counts }
+    }
 
-    $pv.innerText = String(pvNum)
+    document.querySelectorAll(args.countEl).forEach((el) => {
+      const pageKey = el.getAttribute('data-page-key') || curtPageKey
+      el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
+    })
   }
 
   /** 监听事件 */

package/src/comment/actions.ts

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

package/src/{components/html → comment}/comment.html

@@ -4,7 +4,7 @@
     <div class="atk-main">
       <div class="atk-header">
         <span class="atk-item atk-nick"></span>
-        <span class="atk-item atk-badge"></span>
+        <span class="atk-badge-wrap"></span>
         <span class="atk-item atk-date"></span>
       </div>
       <div class="atk-body">

package/src/comment/comment.ts

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

package/src/comment/index.ts

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