artalk 2.2.9 → 2.2.12

package/index.html

@@ -38,7 +38,9 @@
   <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
   <script>
     // VConsole will be exported to `window.VConsole` by default.
-    var vConsole = new window.VConsole();
+    if (navigator.userAgentData.mobile) {
+      var vConsole = new window.VConsole();
+    }
   </script>
 </head>
 <body>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.9",
-  "backendMinVersion": "2.1.4",
+  "version": "2.2.12",
+  "backendMinVersion": "2.1.6",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -29,7 +29,8 @@
   "dependencies": {
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
-    "marked": "^4.0.14"
+    "marked": "^4.0.14",
+    "abortcontroller-polyfill": "^1.7.3"
   },
   "scripts": {
     "dev": "vite",

package/src/api/index.ts

@@ -3,6 +3,7 @@ import ArtalkConfig from '~/types/artalk-config'
 import Context from '../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,
@@ -307,6 +306,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

@@ -4,81 +4,55 @@ import Context from '../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(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(`请求响应 ${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.trigger('checker-captcha', {
+        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.trigger('checker-admin', {
+        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(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('请求超时或意外终止') : err
   })
+  return promise
 }

package/src/artalk.ts

@@ -47,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
@@ -181,8 +186,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 {
@@ -200,13 +220,6 @@ 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()

package/src/components/comment.ts

@@ -16,6 +16,7 @@ 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
@@ -132,13 +133,14 @@ export default class Comment extends Component {
       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) {
@@ -204,7 +206,8 @@ export default class Comment extends Component {
     this.$replyAt.querySelector<HTMLElement>('.atk-nick')!.innerText = `${this.replyTo.nick}`
     this.$replyAt.onclick = () => { this.goToReplyComment() }
 
-    this.$headerNick.insertAdjacentElement('afterend', this.$replyAt)
+    const $after = this.$headerBadge || this.$headerNick
+    $after.insertAdjacentElement('afterend', this.$replyAt)
   }
 
   // 回复的对象

package/src/components/editor.ts

@@ -153,6 +153,7 @@ export default class Editor extends Component {
             this.getInputEl('link')!.value = data.user.link
           }
         })
+        .catch(() => {})
         .finally(() => {
           this.queryUserInfo.abortFunc = null // 清理
         })
@@ -213,22 +214,14 @@ export default class Editor extends Component {
     this.openedPlugName = null
     this.$plugBtnWrap.innerHTML = ''
 
-    // 依次实例化 plug
+    // 初始化 plug 按钮
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
+      if (PlugObj.Name === 'emoticons' && !this.conf.emoticons) return
+
       // 切换按钮
       const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
       this.$plugBtnWrap.appendChild(btnElem)
 
-      // 表情包插件预加载
-      if (PlugObj.Name === 'emoticons') {
-        const emoPlug = new PlugObj(this) as EmoticonsPlug
-        this.plugList[PlugObj.Name] = emoPlug
-
-        window.setTimeout(() => {
-          emoPlug.loadEmoticonsData()
-        }, 1000) // 延迟 1s 加载
-      }
-
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
         if (!plug) {
@@ -272,6 +265,16 @@ export default class Editor extends Component {
       })
     })
 
+    // 表情包插件预加载
+    if (this.conf.emoticons) {
+      const emoPlug = new EmoticonsPlug(this)
+      this.plugList[EmoticonsPlug.Name] = emoPlug
+
+      window.setTimeout(() => {
+        emoPlug.loadEmoticonsData()
+      }, 1000) // 延迟 1s 加载
+    }
+
     this.initImgUpload()
   }
 

package/src/components/list-lite.ts

@@ -25,7 +25,7 @@ export default class ListLite extends Component {
   public flatMode = false
 
   /** 嵌套模式 */
-  public nestSortBy: ListNest.SortByType = 'DATE_DESC'
+  public nestSortBy!: ListNest.SortByType
 
   /** 分页 */
   public pageMode: 'pagination'|'read-more' = 'pagination'
@@ -58,6 +58,9 @@ export default class ListLite extends Component {
     // 评论为空时显示字符
     if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
 
+    // 嵌套排序方式
+    this.nestSortBy = this.ctx.conf.nestSort || 'DATE_ASC'
+
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -305,6 +308,12 @@ export default class ListLite extends Component {
     // 子评论查找回复对象
     comment.replyTo = (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
 
+    // 渲染元素
+    comment.render()
+
+    // 放入 comment 总表中
+    this.commentList.push(comment)
+
     return comment
   }
 
@@ -325,28 +334,21 @@ export default class ListLite extends Component {
     const rootNodes = ListNest.makeNestCommentNodeList(srcData, this.nestSortBy, this.conf.nestMax)
     rootNodes.forEach((rootNode: ListNest.CommentNode) => {
       const rootC = this.createComment(rootNode.comment, srcData)
-      rootC.render()
 
       // 显示并播放渐入动画
       this.$commentsWrap.appendChild(rootC.getEl())
       rootC.playFadeInAnim()
 
-      // 评论放入 comments 总表中
-      this.commentList.push(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)
         })
@@ -361,10 +363,6 @@ export default class ListLite extends Component {
   private putCommentFlatMode(cData: CommentData, ctxData: CommentData[], insertMode: 'append'|'prepend') {
     if (cData.is_collapsed) cData.is_allow_reply = false
     const comment = this.createComment(cData, ctxData)
-    comment.render()
-
-    // 将评论导入 comments 总表中
-    this.commentList.push(comment)
 
     // 可见评论添加到界面
     // 注：不可见评论用于显示 “引用内容”
@@ -388,14 +386,11 @@ export default class ListLite extends Component {
 
       if (commentData.rid === 0) {
         // root评论 新增
-        comment.render()
         this.$commentsWrap.prepend(comment.getEl())
-        this.commentList.push(comment)
       } else {
         // 子评论 新增
         const parent = this.findComment(commentData.rid)
         if (parent) {
-          comment.render()
           parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
 
           // 若父评论存在 “子评论部分” 限高，取消限高

package/src/defaults.ts

@@ -9,9 +9,13 @@ const defaults: ArtalkConfig = {
   placeholder: '键入内容...',
   noComment: '「此时无声胜有声」',
   sendBtn: '发送评论',
-  darkMode: false,
+  darkMode: 'auto',
   editorTravel: true,
 
+  flatMode: 'auto',
+  nestMax: 2,
+  nestSort: 'DATE_ASC',
+
   emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
 
   vote: true,
@@ -19,8 +23,6 @@ const defaults: ArtalkConfig = {
   uaBadge: true,
   listSort: true,
   pvEl: '#ArtalkPV',
-  flatMode: 'auto',
-  nestMax: 3,
 
   gravatar: {
     default: 'mp',

package/types/artalk-config.d.ts

@@ -27,7 +27,7 @@ export default interface ArtalkConfig {
   editorTravel?: boolean
 
   /** 表情包 */
-  emoticons?: any
+  emoticons?: object|any[]|string|false
 
   /** Gravatar 头像 */
   gravatar?: {
@@ -66,7 +66,7 @@ export default interface ArtalkConfig {
   pvEl?: string
 
   /** 暗黑模式 */
-  darkMode?: boolean
+  darkMode?: boolean|'auto'
 
   /** 请求超时（单位：秒） */
   reqTimeout?: number
@@ -77,6 +77,9 @@ export default interface ArtalkConfig {
   /** 嵌套模式 · 最大层数 */
   nestMax?: number
 
+  /** 嵌套模式 · 排序方式 */
+  nestSort?: 'DATE_ASC'|'DATE_DESC'
+
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 

package/vite.config.ts

@@ -15,18 +15,12 @@ export default defineConfig({
       formats: ["es", "umd", "iife"]
     },
     rollupOptions: {
-      // 确保外部化处理那些你不想打包进库的依赖
-      external: ['vue'],
       output: {
         assetFileNames: assetInfo => {
           if (/\.css$/.test(assetInfo.name)) {
             return 'Artalk.css'
           }
           return "[name].[ext]"
-        },
-        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
-        globals: {
-          vue: 'Vue'
         }
       }
     }