artalk 2.4.1 → 2.4.3

package/src/context.ts

@@ -4,6 +4,7 @@ import { CommentData, NotifyData } from '~/types/artalk-data'
 import { Event } from '~/types/event'
 import getI18n, { I18n } from './i18n'
 import User from './lib/user'
+import * as Utils from './lib/utils'
 import ContextApi from '../types/context'
 import Editor from './editor'
 import Comment from './comment'
@@ -49,6 +50,10 @@ export default class Context implements ContextApi {
     this.$root.innerHTML = ''
 
     this.api = new Api(this)
+
+    this.on('conf-loaded', () => {
+      this.refreshDarkModeConf()
+    })
   }
 
   /* 设置持有的同事类 */
@@ -258,19 +263,44 @@ export default class Context implements ContextApi {
   }
 
   public setDarkMode(darkMode: boolean): void {
+    if (this.conf.darkMode === darkMode) return
+
     const darkModeClassName = 'atk-dark-mode'
 
     this.conf.darkMode = darkMode
-    this.trigger('conf-updated')
 
-    if (this.conf.darkMode) this.$root.classList.add(darkModeClassName)
+    if (darkMode) this.$root.classList.add(darkModeClassName)
     else this.$root.classList.remove(darkModeClassName)
 
     // for Layer
     const { $wrap: $layerWrap } = GetLayerWrap(this)
     if ($layerWrap) {
-      if (this.conf.darkMode) $layerWrap.classList.add(darkModeClassName)
+      if (darkMode) $layerWrap.classList.add(darkModeClassName)
       else $layerWrap.classList.remove(darkModeClassName)
     }
   }
+
+  private darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
+  private darkModeAutoFunc?: (evt: MediaQueryListEvent) => void
+  private refreshDarkModeConf(): void {
+    if (this.conf.darkMode === 'auto') {
+      // 自动切换暗黑模式，事件监听
+      this.setDarkMode(this.darkModeMedia.matches)
+      if (!this.darkModeAutoFunc) {
+        this.darkModeAutoFunc = (evt) => { this.setDarkMode(evt.matches) }
+        this.darkModeMedia.addEventListener('change', this.darkModeAutoFunc)
+      }
+    } else {
+      if (this.darkModeAutoFunc) {
+        // 解除事件监听绑定
+        this.darkModeMedia.removeEventListener('change', this.darkModeAutoFunc)
+      }
+      this.setDarkMode(this.conf.darkMode || false)
+    }
+  }
+
+  public updateConf(conf: Partial<ArtalkConfig>): void {
+    this.conf = Utils.mergeDeep(this.conf, conf)
+    this.trigger('conf-loaded')
+  }
 }

package/src/defaults.ts

@@ -29,7 +29,7 @@ const defaults: ArtalkConfig = {
 
   gravatar: {
     default: 'mp',
-    mirror: 'https://sdn.geekzu.org/avatar/',
+    mirror: 'https://cravatar.cn/avatar/',
   },
 
   pagination: {
@@ -46,7 +46,7 @@ const defaults: ArtalkConfig = {
   imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
-  useBackendConf: false,
+  useBackendConf: true,
 
   locale: 'zh-CN',
 }

package/src/editor/editor.ts

@@ -68,15 +68,15 @@ export default class Editor extends Component {
     this.$plugBtnWrap = this.$el.querySelector('.atk-plug-btn-wrap')!
     this.$plugPanelWrap = this.$el.querySelector('.atk-plug-panel-wrap')!
 
-    // 执行初始化
-    this.initLocalStorage()
-    this.initHeader()
-    this.initTextarea()
-    this.initPlugs()
-    this.initSubmitBtn()
-
     // 监听事件
-    this.ctx.on('conf-updated', () => {})
+    this.ctx.on('conf-loaded', () => {
+      // 执行初始化
+      this.initLocalStorage()
+      this.initHeader()
+      this.initTextarea()
+      this.initSubmitBtn()
+      this.initPlugs()
+    })
   }
 
   private initLocalStorage() {

package/src/editor/plugs/upload-plug.ts

@@ -33,7 +33,7 @@ export default class UploadPlug extends EditorPlug {
       $input.click() // 显示选择图片对话框
     }
 
-    this.ctx.on('conf-updated', () => {
+    this.ctx.on('conf-loaded', () => {
       if (!this.ctx.conf.imgUpload) {
         this.getBtn()!.setAttribute('atk-only-admin-show', '')
         this.ctx.checkAdminShowEl()

package/src/i18n/index.ts

@@ -12,92 +12,13 @@ export const internal = {
   'zh-CN': zhCN,
 }
 
-export const external = {
-  'jp-JP': {},
-  'zh-TW': {
-    /* Editor */
-    placeholder: '鍵入內容...',
-    noComment: '「此時無聲勝有聲」',
-    send: '發送評論',
-    save: '保存評論',
-    nick: '昵稱',
-    email: '郵箱',
-    link: '網址',
-    emoticon: '表情',
-    preview: '預覽',
-    image: '圖片',
-    uploadFail: '上傳失敗',
-    commentFail: '評論失敗',
-    restoredMsg: '內容已自動恢復',
-    onlyAdminCanReply: '僅管理員可評論',
-    uploadLoginMsg: '填入你的名字郵箱才能上傳哦',
+const GLOBAL_LOCALES_KEY = "ArtalkI18n";
 
-    /* List */
-    counter: '{count} 條評論',
-    sortLatest: '最新',
-    sortOldest: '最早',
-    sortBest: '最熱',
-    sortAuthor: '作者',
-    openComment: '打開評論',
-    closeComment: '關閉評論',
-    listLoadFailMsg: '無法獲取評論列表數據',
-    listRetry: '點擊重新獲取',
-    loadMore: '加載更多',
-
-    /* Comment */
-    admin: '管理員',
-    reply: '回覆',
-    voteUp: '贊同',
-    voteDown: '反對',
-    voteFail: '投票失敗',
-    readMore: '閱讀更多',
-    actionConfirm: '確認操作',
-    collapse: '摺疊',
-    collapsed: '已摺疊',
-    collapsedMsg: '該評論已被系統或管理員摺疊',
-    expand: '展開',
-    approved: '已審',
-    pending: '待審',
-    pendingMsg: '審核中，僅本人可見。',
-    edit: '編輯',
-    editCancel: '取消編輯',
-    delete: '刪除',
-    deleteConfirm: '確認刪除',
-    pin: '置頂',
-    unpin: '取消置頂',
-
-    /* Time */
-    seconds: '秒前',
-    minutes: '分鐘前',
-    hours: '小時前',
-    days: '天前',
-    now: '剛剛',
-
-    /* Checker */
-    adminCheck: '鍵入密碼來驗證管理員身份：',
-    captchaCheck: '鍵入驗證碼繼續：',
-    confirm: '確認',
-    cancel: '取消',
-
-    /* Sidebar */
-    msgCenter: '通知中心',
-    ctrlCenter: '控制中心',
-
-    /* General */
-    frontend: '前端',
-    backend: '後端',
-    loading: '加載中',
-    loadFail: '加載失敗',
-    editing: '修改中',
-    editFail: '修改失敗',
-    deleting: '刪除中',
-    deleteFail: '刪除失敗',
-    reqGot: '請求響應',
-    reqAborted: '請求超時或意外終止',
-  },
-  'fr-FR': {},
-  'de-DE': {},
-  'bn-IN': {},
+export function defineLocaleExternal(lang: string, locale: I18n, aliases?: string[]) {
+  if (!window[GLOBAL_LOCALES_KEY]) window[GLOBAL_LOCALES_KEY] = {}
+  window[GLOBAL_LOCALES_KEY][lang] = locale
+  if (aliases) aliases.forEach(l => { window[GLOBAL_LOCALES_KEY][l] = locale })
+  return locale
 }
 
 /**
@@ -110,12 +31,19 @@ function getLocaleSet(lang: string): I18n {
     (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
   )
 
-  // case not found
-  if (!internal[lang]) {
-    return internal.en // use `en` by default
+  // internal finding
+  if (internal[lang]) {
+    return internal[lang]
+  }
+
+  // external finding
+  if (window[GLOBAL_LOCALES_KEY] && window[GLOBAL_LOCALES_KEY][lang]) {
+    return window[GLOBAL_LOCALES_KEY][lang]
   }
 
-  return internal[lang]
+  // case when not found:
+  // use `en` by default
+  return internal.en
 }
 
 /**
@@ -132,5 +60,5 @@ function getI18n(locale: I18n|string, key: keyof I18n, args: {[key: string]: str
   return str
 }
 
-export { getLocaleSet, getI18n }
+export { getLocaleSet }
 export default getI18n

package/src/i18n/jp.ts

@@ -0,0 +1,83 @@
+import { defineLocaleExternal } from '.'
+
+export default defineLocaleExternal('jp', {
+  /* エディタ */
+  placeholder: 'コメントを残す',
+  noComment: 'コメントなし',
+  send: '送信',
+  save: '保存',
+  nick: 'ニックネーム',
+  email: 'メール',
+  link: 'ウェブサイト',
+  emoticon: '絵文字',
+  preview: 'プレビュー',
+  image: '画像',
+  uploadFail: 'アップロードに失敗しました',
+  commentFail: 'コメントに失敗しました',
+  restoredMsg: 'コンテンツが復元されました',
+  onlyAdminCanReply: '管理者のみが返信できます',
+  uploadLoginMsg: 'アップロードするには、名前とメールアドレスを入力してください',
+
+  /* リスト */
+  counter: '{count} コメント',
+  sortLatest: '最新のもの',
+  sortOldest: '最も古い',
+  sortBest: 'ベスト',
+  sortAuthor: '著者',
+  openComment: 'コメントを開く',
+  closeComment: 'コメントを閉じる',
+  listLoadFailMsg: 'コメントの読み込みに失敗しました',
+  listRetry: 'クリックで再試行',
+  loadMore: 'もっと読み込む',
+
+  /* コメント */
+  admin: '管理者',
+  reply: '返信',
+  voteUp: 'アップ',
+  voteDown: 'ダウン',
+  voteFail: '投票に失敗しました',
+  readMore: '続きを読む',
+  actionConfirm: '確認',
+  collapse: '折りたたむ',
+  collapsed: '折りたたまれた',
+  collapsedMsg: 'このコメントは折りたたまれました',
+  expand: '展開',
+  approved: '承認されました',
+  pending: '保留中',
+  pendingMsg: '保留中、コメント投稿者にのみ表示されます',
+  edit: '編集',
+  editCancel: '編集をキャンセル',
+  delete: '削除',
+  deleteConfirm: '確認',
+  pin: 'ピン',
+  unpin: 'ピン外し',
+
+  /* 時間 */
+  seconds: '秒前',
+  minutes: '分前',
+  hours: '時間前',
+  days: '数日前',
+  now: 'たった今',
+
+  /* チェッカー */
+  adminCheck: '管理者パスワードを入力してください:',
+  captchaCheck: '続けるにはCAPTCHAを入力してください:',
+  confirm: '確認',
+  cancel: '取消',
+
+  /* サイドバー */
+  msgCenter: 'メッセージ',
+  ctrlCenter: 'コンソール',
+
+  /* 一般 */
+  frontend: 'フロントエンド',
+  backend: 'バックエンド',
+  loading: '読み込み中',
+  loadFail: '読み込みに失敗しました',
+  editing: '編集中',
+  editFail: '編集に失敗しました',
+  deleting: '削除中',
+  deleteFail: '削除に失敗しました',
+  reqGot: 'リクエストを取得しました',
+  reqAborted: 'リクエストがタイムアウトしたか、予期せず終了した',
+}, ['jp-JP'])

package/src/i18n/zh-TW.ts

@@ -0,0 +1,83 @@
+import { defineLocaleExternal } from '.'
+
+export default defineLocaleExternal('zh-TW', {
+  /* Editor */
+  placeholder: '鍵入內容...',
+  noComment: '「此時無聲勝有聲」',
+  send: '發送評論',
+  save: '保存評論',
+  nick: '昵稱',
+  email: '郵箱',
+  link: '網址',
+  emoticon: '表情',
+  preview: '預覽',
+  image: '圖片',
+  uploadFail: '上傳失敗',
+  commentFail: '評論失敗',
+  restoredMsg: '內容已自動恢復',
+  onlyAdminCanReply: '僅管理員可評論',
+  uploadLoginMsg: '填入你的名字郵箱才能上傳哦',
+
+  /* List */
+  counter: '{count} 條評論',
+  sortLatest: '最新',
+  sortOldest: '最早',
+  sortBest: '最熱',
+  sortAuthor: '作者',
+  openComment: '打開評論',
+  closeComment: '關閉評論',
+  listLoadFailMsg: '無法獲取評論列表數據',
+  listRetry: '點擊重新獲取',
+  loadMore: '加載更多',
+
+  /* Comment */
+  admin: '管理員',
+  reply: '回覆',
+  voteUp: '贊同',
+  voteDown: '反對',
+  voteFail: '投票失敗',
+  readMore: '閱讀更多',
+  actionConfirm: '確認操作',
+  collapse: '摺疊',
+  collapsed: '已摺疊',
+  collapsedMsg: '該評論已被系統或管理員摺疊',
+  expand: '展開',
+  approved: '已審',
+  pending: '待審',
+  pendingMsg: '審核中，僅本人可見。',
+  edit: '編輯',
+  editCancel: '取消編輯',
+  delete: '刪除',
+  deleteConfirm: '確認刪除',
+  pin: '置頂',
+  unpin: '取消置頂',
+
+  /* Time */
+  seconds: '秒前',
+  minutes: '分鐘前',
+  hours: '小時前',
+  days: '天前',
+  now: '剛剛',
+
+  /* Checker */
+  adminCheck: '鍵入密碼來驗證管理員身份：',
+  captchaCheck: '鍵入驗證碼繼續：',
+  confirm: '確認',
+  cancel: '取消',
+
+  /* Sidebar */
+  msgCenter: '通知中心',
+  ctrlCenter: '控制中心',
+
+  /* General */
+  frontend: '前端',
+  backend: '後端',
+  loading: '加載中',
+  loadFail: '加載失敗',
+  editing: '修改中',
+  editFail: '修改失敗',
+  deleting: '刪除中',
+  deleteFail: '刪除失敗',
+  reqGot: '請求響應',
+  reqAborted: '請求超時或意外終止',
+})

package/src/layer/sidebar-layer.ts

@@ -53,11 +53,6 @@ export default class SidebarLayer extends Component {
     // viewWrap 滚动条归位
     // this.$viewWrap.scrollTo(0, 0)
 
-    // 执行动画
-    setTimeout(() => {
-      this.$el.style.transform = 'translate(0, 0)'
-    }, 20)
-
     // 管理员身份验证 (若身份失效，弹出验证窗口)
     ;(async () => {
       const resp = await this.ctx.getApi().user.loginStatus()
@@ -76,9 +71,6 @@ export default class SidebarLayer extends Component {
       }
     })()
 
-    // 清空 unread
-    this.ctx.updateNotifies([])
-
     // 第一次加载
     if (this.firstShow) {
       this.$iframeWrap.innerHTML = ''
@@ -114,6 +106,16 @@ export default class SidebarLayer extends Component {
         this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
     }
 
+    // 执行滑动显示动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 100)
+
+    // 清空 unread
+    setTimeout(() => {
+      this.ctx.updateNotifies([])
+    }, 0)
+
     this.ctx.trigger('sidebar-show')
   }
 

package/src/lib/checker/admin-checker.ts

@@ -11,7 +11,10 @@ const AdminChecker: Checker = {
       password: inputVal
     }
 
-    return that.ctx.getApi().user.login(data.name, data.email, data.password)
+    return (async () => {
+      const resp = await that.ctx.getApi().user.login(data.name, data.email, data.password)
+      return resp.token
+    })()
   },
 
   body(that, ctx) {

package/src/lib/checker/captcha-checker.ts

@@ -77,6 +77,7 @@ const CaptchaChecker: Checker = {
 
   onError(that, ctx, err, inputVal, formEl) {
     formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
+    formEl.querySelector<HTMLInputElement>('input[type="text"]')!.value = '' // 清空输入框输入
   }
 }
 

package/src/lib/stat.ts

@@ -9,7 +9,15 @@ export interface CountConf {
 }
 
 export const PvCountWidget: ArtalkPlug = (ctx: ContextApi) => {
-  initCountWidget({ ctx, pvAdd: true })
+  if (!ctx.conf.useBackendConf) {
+    // 不使用后端配置，在 Artalk 实例被创建后，立刻初始化
+    initCountWidget({ ctx, pvAdd: true })
+  } else {
+    // 若使用后端配置，需待配置成功获取后 (来自后端设定的 pvEl 等)，再初始化
+    ctx.on('list-loaded', () => {
+      initCountWidget({ ctx, pvAdd: true })
+    })
+  }
 }
 
 /** 初始化评论数和 PV 数量展示元素 */

package/src/lib/utils.ts

@@ -204,7 +204,14 @@ export function marked(ctx: Context, src: string): string {
   // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
   let dest = insane(markedContent, {
     allowedClasses: {},
-    allowedSchemes: ['http', 'https', 'mailto'],
+    // @refer CVE-2018-8495
+    // @link https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2018-8495
+    // @link https://leucosite.com/Microsoft-Edge-RCE/
+    // @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
+    allowedSchemes: [
+      'http', 'https', 'mailto',
+      'data' // for support base64 encoded image (安全性有待考虑)
+    ],
     allowedTags: [
       'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
       'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',

package/src/list/list-lite.ts

@@ -15,17 +15,56 @@ export default class ListLite extends Component {
   protected data?: ListData
   protected isLoading: boolean = false
 
-  public noCommentText: string // 无评论时显示
+  public noCommentText?: string // 无评论时显示
+
+  /** 嵌套模式下的排序方式 */
+  private _nestSortBy?: ListNest.SortByType
+  public get nestSortBy() {
+    if (this._nestSortBy !== undefined) return this._nestSortBy
+    return this.ctx.conf.nestSort || 'DATE_ASC'
+  }
+  public set nestSortBy(val: ListNest.SortByType) {
+    this._nestSortBy = val
+  }
 
   /** 平铺模式 */
-  public flatMode = false
+  private _flatMode?:boolean
+  public get flatMode() {
+    if (this._flatMode !== undefined)
+      return this._flatMode
+
+    // 配置开启平铺模式
+    if (this.ctx.conf.flatMode === true || Number(this.ctx.conf.nestMax) <= 1)
+      return true
 
-  /** 嵌套模式 */
-  public nestSortBy!: ListNest.SortByType
+    // 自动判断启用平铺模式
+    if (this.ctx.conf.flatMode === 'auto' && window.matchMedia("(max-width: 768px)").matches)
+      return true
+
+    return false
+  }
+  public set flatMode(val: boolean) {
+    this._flatMode = val
+  }
+
+  /** 分页方式 */
+  public _pageMode?: 'pagination'|'read-more'
+  public get pageMode() {
+    return this._pageMode || (this.conf.pagination.readMore ? 'read-more' : 'pagination')
+  }
+  public set pageMode(val: 'pagination'|'read-more') {
+    this._pageMode = val
+  }
+
+  /** 每页数量 (每次请求获取量) */
+  private _pageSize?: number
+  public get pageSize() {
+    return this._pageSize || this.conf.pagination.pageSize
+  }
+  public set pageSize(val: number) {
+    this._pageSize = val
+  }
 
-  /** 分页 */
-  public pageMode: 'pagination'|'read-more' = 'pagination'
-  public pageSize: number = 20 // 每次请求获取量
   public scrollListenerAt?: HTMLElement // 监听指定元素上的滚动
   public repositionAt?: HTMLElement // 翻页归位到指定元素
 
@@ -51,12 +90,6 @@ export default class ListLite extends Component {
     </div>`)
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
-    // 评论为空时显示字符
-    this.noCommentText = ctx.conf.noComment || ctx.$t('noComment')
-
-    // 嵌套排序方式
-    this.nestSortBy = this.ctx.conf.nestSort || 'DATE_ASC'
-
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -64,6 +97,10 @@ export default class ListLite extends Component {
         el.innerText = Utils.timeAgo(new Date(Number(date)), this.ctx)
       })
     }, 30 * 1000) // 30s 更新一次
+
+    // 事件监听
+    this.ctx.on('conf-loaded', () => {
+    })
   }
 
   public getData() {
@@ -99,8 +136,8 @@ export default class ListLite extends Component {
     // 事件通知（开始加载评论）
     this.ctx.trigger('list-load')
 
-    // 清空评论（加载按钮）
-    if (isFirstLoad && this.pageMode === 'read-more') {
+    // 清空评论（按钮加载更多的第一页、每次加载分页页面）
+    if ((this.pageMode === 'read-more' && isFirstLoad) || this.pageMode === 'pagination') {
       this.ctx.clearAllComments()
     }
 
@@ -130,22 +167,25 @@ export default class ListLite extends Component {
     }
   }
 
-  protected onLoad(data: ListData, offset: number) {
-    // 清空评论（分页条）
-    if (this.pageMode === 'pagination') { this.ctx.clearAllComments() }
+  private confLoaded = false
 
+  protected onLoad(data: ListData, offset: number) {
     this.data = data
 
+    // 装载后端提供的配置
+    if (!this.confLoaded) {
+      if (this.conf.useBackendConf)
+        this.ctx.updateConf(data.conf.frontend_conf)
+      else
+        this.ctx.updateConf({})
+      this.confLoaded = true
+    }
+
     // 版本检测
     const feMinVersion = data.api_version?.fe_min_version || '0.0.0'
     if (this.ctx.conf.versionCheck && this.versionCheck('frontend', feMinVersion, ARTALK_VERSION)) return
     if (this.ctx.conf.versionCheck && this.versionCheck('backend', backendMinVersion, data.api_version?.version)) return
 
-    // 图片上传功能
-    if (data.conf && typeof data.conf.img_upload === "boolean") {
-      this.ctx.conf.imgUpload = data.conf.img_upload
-    }
-
     // 导入数据
     this.importComments(data.comments)
 
@@ -157,7 +197,6 @@ export default class ListLite extends Component {
 
     this.ctx.updateNotifies(data.unread || [])
     this.ctx.trigger('list-loaded')
-    this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
   }
@@ -238,6 +277,10 @@ export default class ListLite extends Component {
 
   /** 错误处理 */
   protected onError(msg: any, offset: number, errData?: any) {
+    if (!this.confLoaded) {
+      this.ctx.updateConf({})
+    }
+
     msg = String(msg)
     console.error(msg)
 
@@ -286,7 +329,7 @@ export default class ListLite extends Component {
     if (isNoComment) {
       if (!$noComment) {
         $noComment = Utils.createElement('<div class="atk-list-no-comment"></div>')
-        $noComment.innerHTML = this.noCommentText
+        $noComment.innerHTML = this.noCommentText || this.ctx.conf.noComment || this.ctx.$t('noComment')
         this.$commentsWrap.appendChild($noComment)
       }
     } else {
@@ -473,7 +516,6 @@ export default class ListLite extends Component {
       ignoreBtn.onclick = () => {
         Ui.setError(this.$el.parentElement!, null)
         this.ctx.conf.versionCheck = false
-        this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)