artalk 2.2.12 → 2.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.12",
-  "backendMinVersion": "2.1.6",
+  "version": "2.3.2",
+  "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,28 +2,32 @@ import './style/main.less'
 
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Handler } from '~/types/event'
-import Context from './context'
+import ArtalkPlug from '~/types/plug'
+import Context from '~/types/context'
+import ConcreteContext from './context'
 import defaults from './defaults'
+import { internal as internalLocales } from './i18n'
 
 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 Api from './api'
+import Layer, { GetLayerWrap } from './layer'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
+import * as Stat from './lib/stat'
 
 /**
  * Artalk
- * @link https://artalk.js.org
+ *
+ * @website https://artalk.js.org
  */
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
 
-  public ctx!: Context
   public conf!: ArtalkConfig
+  public ctx!: Context
   public $root!: HTMLElement
 
   public checkerLauncher!: CheckerLauncher
@@ -31,79 +35,49 @@ export default class Artalk {
   public list!: List
   public sidebarLayer!: SidebarLayer
 
-  constructor (customConf: ArtalkConfig) {
-    // 配置
-    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
-    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+  protected static Plugins: ArtalkPlug[] = [
+    Stat.PvCountWidget
+  ]
 
-    // 默认 pageKey
-    if (!this.conf.pageKey) {
-      // @link http://bl.ocks.org/abernier/3070589
-      this.conf.pageKey = `${window.location.pathname}`
-    }
+  constructor(customConf: Partial<ArtalkConfig>) {
+    /* 初始化基本配置 */
+    this.conf = Artalk.HandelBaseConf(customConf)
+    if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
 
-    // 默认 pageTitle
-    if (!this.conf.pageTitle) {
-      this.conf.pageTitle = `${document.title}`
-    }
+    /* 初始化 Context */
+    this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    // 列表显示模式
-    if (this.conf.nestMax && this.conf.nestMax <= 1) {
-      this.conf.flatMode = true
-    }
+    // @ts-ignore 远程加载引用后端的配置
+    if (this.conf.useBackendConf) return this.loadConfRemoteAndInitComponents()
 
-    // 装载元素
-    if (!!this.conf.el && 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.`)
-        this.$root = $root
-      } catch (e) {
-        console.error(e)
-        throw new Error('Please check your Artalk `el` config.')
-      }
-    }
-
-    // Context 初始化
-    this.ctx = new Context(this.$root, this.conf)
-
-    // 界面初始化
-    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()
+    /* 初始化组件 */
+    this.initComponents()
   }
 
-  private initCore() {
-    // 组件初始化
+  /** 组件初始化 */
+  private initComponents() {
+    this.initLocale()
     this.initLayer()
     this.initDarkMode()
+    Utils.initMarked(this.ctx)
+
+    // CheckerLauncher
     this.checkerLauncher = new CheckerLauncher(this.ctx)
-    Utils.initMarked(this.ctx) // 初始化 marked
+    this.ctx.setCheckerLauncher(this.checkerLauncher)
 
     // 编辑器
     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)
 
     // 评论获取
@@ -112,29 +86,66 @@ export default class Artalk {
     // 事件绑定初始化
     this.initEventBind()
 
-    // 其他
-    this.initPV()
-
     // 插件初始化
     Artalk.Plugins.forEach(plugin => {
-      if (typeof plugin === 'function') {
+      if (typeof plugin === 'function')
         plugin(this.ctx)
-      }
     })
   }
 
-  /** 获取远程配置 */
+  /** 基本配置初始化 */
+  private static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+    // 合并默认配置
+    const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
+
+    // 绑定元素
+    if (typeof conf.el === 'string' && !!conf.el) {
+      try {
+        const findEl = document.querySelector<HTMLElement>(conf.el)
+        if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
+        conf.el = findEl
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
+    }
+
+    // 服务器配置
+    conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
+
+    // 默认 pageKey
+    if (!conf.pageKey) {
+      // @link http://bl.ocks.org/abernier/3070589
+      conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!conf.pageTitle) {
+      conf.pageTitle = `${document.title}`
+    }
+
+    return conf
+  }
+
+  /** 初始化组件根据远程加载的配置 */
+  private async loadConfRemoteAndInitComponents() {
+    await this.loadConfRemote()
+    this.initComponents()
+    return this
+  }
+
+  /** 远程加载配置 */
   private async loadConfRemote() {
     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)
   }
 
-  /** 事件绑定 · 初始化 */
+  /** 事件绑定初始化 */
   private initEventBind() {
     // 锚点快速跳转评论
     window.addEventListener('hashchange', () => {
@@ -142,50 +153,41 @@ 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()
     })
   }
 
-  /** 重新加载 */
-  public reload() {
-    this.list.fetchComments(0)
+  /** 语言初始化 */
+  private initLocale() {
+    if (typeof this.conf.locale === 'string') {
+      if (this.conf.locale === 'auto') { // 自动切换
+        this.conf.locale = ((navigator.languages) ? navigator.languages[0] : navigator.language)
+      }
+
+      this.conf.locale = this.conf.locale.replace(
+        /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+        (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+      )
+
+      if (!internalLocales[this.conf.locale]) { // 语言不存在时，使用 en
+        console.log(`Locale "${this.conf.locale}" not found.`)
+        this.conf.locale = 'en'
+      }
+    }
   }
 
   /** Layer 初始化 */
-  initLayer() {
+  private initLayer() {
     // 记录页面原始 Styles
     Layer.BodyOrgOverflow = document.body.style.overflow
     Layer.BodyOrgPaddingRight = document.body.style.paddingRight
   }
 
-  /** 暗黑模式 · 初始化 */
-  public initDarkMode() {
+  /** 暗黑模式初始化 */
+  private initDarkMode() {
     if (this.conf.darkMode === 'auto') {
       // 自动切换暗黑模式，事件监听
       const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
@@ -196,7 +198,7 @@ export default class Artalk {
     }
   }
 
-  /** 暗黑模式 · 设定 */
+  /** 设置暗黑模式 */
   public setDarkMode(darkMode: boolean) {
     const darkModeClassName = 'atk-dark-mode'
 
@@ -220,21 +222,6 @@ export default class Artalk {
     }
   }
 
-  /** PV */
-  public async initPV() {
-    const pvNum = await new Api(this.ctx).pv()
-    if (Number.isNaN(Number(pvNum)))
-      return
-
-    if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
-      return
-
-    const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
-    // $pv.innerText = '-' // 默认占位符
-
-    $pv.innerText = String(pvNum)
-  }
-
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
@@ -250,11 +237,20 @@ export default class Artalk {
     this.ctx.trigger(name, payload, 'external')
   }
 
-  /** Plugins */
-  protected static Plugins: ((ctx: Context) => void)[] = []
+  /** 重新加载 */
+  public reload() {
+    this.ctx.listReload()
+  }
 
-  /** Enable Plugin */
-  public static Use(plugin: ((ctx: Context) => void)) {
+  /** Use Plugin */
+  public static Use(plugin: ArtalkPlug) {
     this.Plugins.push(plugin)
   }
+
+  /** 装载数量统计元素 */
+  public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
+    const conf = this.HandelBaseConf(customConf)
+    const ctx = new ConcreteContext(conf)
+    Stat.initCountWidget({ ctx, pvAdd: false })
+  }
 }

package/src/comment/actions.ts

@@ -0,0 +1,86 @@
+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">