artalk 2.2.10 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.10",
-  "backendMinVersion": "2.1.4",
+  "version": "2.3.0",
+  "backendMinVersion": "2.1.7",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -24,16 +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,8 +1,9 @@
 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'
 
 export default class Api {
   private ctx: Context
@@ -95,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 || '')
     }
@@ -104,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,
@@ -275,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 = {
@@ -307,6 +325,8 @@ export default class Api {
       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
       }
     }
 

package/src/api/request.ts

@@ -1,84 +1,58 @@
-import Context from '../context'
+import Context from '~/types/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(ctx, 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(`${ctx.$t('reqGot')} ${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(e => { reject(e) })
+  }
 
-    // 重新发起请求
-    const recall = (resolve, reject) => {
-      Fetch(ctx, input, init).then(d => {
-        resolve(d)
-      }).catch(err => {
-        reject(err)
+  // 请求弹出层验证
+  if (json.data?.need_captcha) {
+    // 请求需要验证码
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.checkCaptcha({
+        imgData: json.data.img_data,
+        iframe: json.data.iframe,
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
       })
-    }
-
-    // 请求弹出层验证
-    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)
+    }))
+  } else if (json.data?.need_login || isNoAccess) {
+    // 请求需要管理员权限
+    json = await (new Promise<any>((resolve, reject) => {
+      ctx.checkAdmin({
+        onSuccess: () => { recall(resolve, reject) },
+        onCancel: () => { reject(json) }
+      })
+    }))
+  }
 
-    if (err instanceof TypeError)
-      throw new Error(`网络错误`)
+  if (!json.success) throw json // throw 相当于 reject(json)
 
-    throw err
-  }
+  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(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 })
+  if (ms > 0) {
+    const timer = setTimeout(() => controller.abort(), ms)
+    promise.finally(() => { clearTimeout(timer) })
+  }
+  promise = promise.catch((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()
     })
   }
 
@@ -186,8 +180,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 {
@@ -205,26 +214,43 @@ 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()
-    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">