artalk 2.2.12 → 2.3.0

package/src/{components → list}/list-lite.ts

@@ -1,25 +1,22 @@
-import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
-import Context from '../context'
+import { ListData, CommentData, NotifyData } from '~/types/artalk-data'
+import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
-import Comment from './comment'
-import Pagination from './pagination'
-import ReadMoreBtn from './read-more-btn'
+import Comment from '../comment'
+import Pagination from '../components/pagination'
+import ReadMoreBtn from '../components/read-more-btn'
 import * as ListNest from './list-nest'
 import { backendMinVersion } from '../../package.json'
 
 export default class ListLite extends Component {
   protected $commentsWrap: HTMLElement
 
-  protected commentList: Comment[] = [] // Note: 无层级结构 + 无须排列
-  protected get commentDataList() { return this.commentList.map(c => c.data) }
-
   protected data?: ListData
   protected isLoading: boolean = false
 
-  public noCommentText = '无内容' // 无评论时显示
+  public noCommentText: string // 无评论时显示
 
   /** 平铺模式 */
   public flatMode = false
@@ -56,7 +53,7 @@ export default class ListLite extends Component {
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
     // 评论为空时显示字符
-    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
+    this.noCommentText = ctx.conf.noComment || ctx.$t('noComment')
 
     // 嵌套排序方式
     this.nestSortBy = this.ctx.conf.nestSort || 'DATE_ASC'
@@ -65,12 +62,21 @@ export default class ListLite extends Component {
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
         const date = el.getAttribute('data-atk-comment-date')
-        el.innerText = Utils.timeAgo(new Date(Number(date)))
+        el.innerText = Utils.timeAgo(new Date(Number(date)), this.ctx)
       })
     }, 30 * 1000) // 30s 更新一次
+  }
+
+  public getData() {
+    return this.data
+  }
 
-    // 事件监听
-    this.ctx.on('unread-update', (data) => (this.updateUnread(data.notifies)))
+  public clearData() {
+    this.data = undefined
+  }
+
+  public getCommentsWrapEl() {
+    return this.$commentsWrap
   }
 
   /** 评论获取 */
@@ -93,15 +99,15 @@ export default class ListLite extends Component {
     showLoading()
 
     // 事件通知（开始加载评论）
-    this.ctx.trigger('comments-load')
+    this.ctx.trigger('list-load')
 
     // 清空评论（加载按钮）
-    if (this.pageMode === 'read-more' && offset === 0) { this.clearAllComments() }
+    if (this.pageMode === 'read-more' && offset === 0) { this.ctx.clearAllComments() }
 
     // 请求评论数据
     let listData: ListData
     try {
-      listData = await new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor)
+      listData = await this.ctx.getApi().get(offset, this.pageSize, this.flatMode, this.paramsEditor)
     } catch (e: any) {
       this.onError(e.msg || String(e), offset, e.data)
       throw e
@@ -125,14 +131,14 @@ export default class ListLite extends Component {
 
   protected onLoad(data: ListData, offset: number) {
     // 清空评论（分页条）
-    if (this.pageMode === 'pagination') { this.clearAllComments() }
+    if (this.pageMode === 'pagination') { this.ctx.clearAllComments() }
 
     this.data = data
 
     // 版本检测
     const feMinVersion = data.api_version?.fe_min_version || '0.0.0'
-    if (this.ctx.conf.versionCheck && this.versionCheck('前端', feMinVersion, ARTALK_VERSION)) return
-    if (this.ctx.conf.versionCheck && this.versionCheck('后端', backendMinVersion, data.api_version?.version)) return
+    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") {
@@ -148,8 +154,8 @@ export default class ListLite extends Component {
     // 加载后事件
     this.refreshUI()
 
-    this.ctx.trigger('unread-update', { notifies: data.unread || [] })
-    this.ctx.trigger('comments-loaded')
+    this.ctx.updateNotifies(data.unread || [])
+    this.ctx.trigger('list-loaded')
     this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
@@ -179,11 +185,12 @@ export default class ListLite extends Component {
         onClick: async (o) => {
           await this.fetchComments(o)
         },
+        text: this.ctx.$t('loadMore'),
       })
       this.$el.append(this.readMoreBtn.$el)
 
       // 滚动到底部自动加载
-      if (this.conf.pagination?.autoLoad) {
+      if (this.conf.pagination.autoLoad) {
         // 添加滚动事件监听
         const at = this.scrollListenerAt || document
         if (this.autoLoadScrollEvent) at.removeEventListener('scroll', this.autoLoadScrollEvent) // 解除原有
@@ -210,7 +217,7 @@ export default class ListLite extends Component {
         pageSize: this.pageSize,
         onChange: async (o) => {
           if (this.ctx.conf.editorTravel === true) {
-            this.ctx.trigger('editor-travel-back') // 防止评论框被吞
+            this.ctx.editorTravelBack() // 防止评论框被吞
           }
 
           await this.fetchComments(o)
@@ -237,14 +244,14 @@ export default class ListLite extends Component {
 
     // 加载更多按钮显示错误
     if (offset !== 0 && this.pageMode === 'read-more') {
-      this.readMoreBtn?.showErr(`获取失败`)
+      this.readMoreBtn?.showErr(this.$t('loadFail'))
       return
     }
 
     // 显示错误对话框
-    const $err = Utils.createElement(`<span>${msg}，无法获取评论列表数据<br/></span>`)
+    const $err = Utils.createElement(`<span>${msg}，${this.$t('listLoadFailMsg')}<br/></span>`)
 
-    const $retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
+    const $retryBtn = Utils.createElement(`<span style="cursor:pointer;">${this.$t('listRetry')}</span>`)
     $retryBtn.onclick = () => (this.fetchComments(0))
     $err.appendChild($retryBtn)
 
@@ -264,9 +271,9 @@ export default class ListLite extends Component {
       sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
     }
 
-    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show', {
-      view: sidebarView
-    }))
+    adminBtn.onclick = () => this.ctx.showSidebar({
+      view: sidebarView as any
+    })
 
     Ui.setError(this.$el, $err)
   }
@@ -274,7 +281,7 @@ export default class ListLite extends Component {
   /** 刷新界面 */
   public refreshUI() {
     // 无评论
-    const isNoComment = this.commentList.length <= 0
+    const isNoComment = this.ctx.getCommentList().length <= 0
     let $noComment = this.$commentsWrap.querySelector<HTMLElement>('.atk-list-no-comment')
 
     if (isNoComment) {
@@ -288,31 +295,35 @@ export default class ListLite extends Component {
     }
 
     // 仅管理员显示控制
-    this.ctx.trigger('check-admin-show-el')
+    this.ctx.checkAdminShowEl()
+  }
+
+  /** 重新加载列表 */
+  public reload() {
+    this.fetchComments(0)
   }
 
   /** 创建新评论 */
   protected createComment(cData: CommentData, ctxData?: CommentData[]) {
-    if (!ctxData) ctxData = this.commentDataList
-
-    const comment = new Comment(this.ctx, cData)
-    comment.flatMode = this.flatMode
-    comment.afterRender = () => {
-      if (this.renderComment) this.renderComment(comment)
-    }
-    comment.onDelete = (c) => {
-      this.deleteComment(c)
-      this.refreshUI()
-    }
-
-    // 子评论查找回复对象
-    comment.replyTo = (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+    if (!ctxData) ctxData = this.ctx.getCommentDataList()
+
+    const comment = new Comment(this.ctx, cData, {
+      isFlatMode: this.flatMode,
+      afterRender: () => {
+        if (this.renderComment) this.renderComment(comment)
+      },
+      onDelete: (c: Comment) => {
+        this.ctx.deleteComment(c)
+        this.refreshUI()
+      },
+      replyTo: (cData.rid ? ctxData.find(c => c.id === cData.rid) : undefined)
+    })
 
     // 渲染元素
     comment.render()
 
     // 放入 comment 总表中
-    this.commentList.push(comment)
+    this.ctx.getCommentList().push(comment)
 
     return comment
   }
@@ -337,7 +348,7 @@ export default class ListLite extends Component {
 
       // 显示并播放渐入动画
       this.$commentsWrap.appendChild(rootC.getEl())
-      rootC.playFadeInAnim()
+      rootC.getRender().playFadeAnim()
 
       // 加载子评论
       const that = this
@@ -355,7 +366,7 @@ export default class ListLite extends Component {
       })(rootC, rootNode)
 
       // 限高检测
-      rootC.checkHeightLimit()
+      rootC.getRender().checkHeightLimit()
     })
   }
 
@@ -369,11 +380,11 @@ export default class ListLite extends Component {
     if (cData.visible) {
       if (insertMode === 'append') this.$commentsWrap.append(comment.getEl())
       if (insertMode === 'prepend') this.$commentsWrap.prepend(comment.getEl())
-      comment.playFadeInAnim()
+      comment.getRender().playFadeAnim()
     }
 
     // 平铺评论插入后 · 内容限高检测
-    comment.checkHeightLimit()
+    comment.getRender().checkHeightLimit()
 
     return comment
   }
@@ -389,24 +400,24 @@ export default class ListLite extends Component {
         this.$commentsWrap.prepend(comment.getEl())
       } else {
         // 子评论 新增
-        const parent = this.findComment(commentData.rid)
+        const parent = this.ctx.findComment(commentData.rid)
         if (parent) {
           parent.putChild(comment, (this.nestSortBy === 'DATE_ASC' ? 'append' : 'prepend'))
 
           // 若父评论存在 “子评论部分” 限高，取消限高
           comment.getParents().forEach((p) => {
-            if (p.$children) p.heightLimitRemove(p.$children)
+            p.getRender().heightLimitRemoveForChildren()
           })
         }
       }
 
-      comment.checkHeightLimit()
+      comment.getRender().checkHeightLimit()
 
       Ui.scrollIntoView(comment.getEl()) // 滚动到可以见
-      comment.playFadeInAnim() // 播放评论渐出动画
+      comment.getRender().playFadeAnim() // 播放评论渐出动画
     } else {
       // 平铺模式
-      const comment = this.putCommentFlatMode(commentData, this.commentDataList, 'prepend')
+      const comment = this.putCommentFlatMode(commentData, this.ctx.getCommentDataList(), 'prepend')
       Ui.scrollIntoView(comment.getEl()) // 滚动到可见
     }
 
@@ -415,36 +426,8 @@ export default class ListLite extends Component {
 
     // 评论新增后
     this.refreshUI()
-    this.ctx.trigger('comments-loaded')
-  }
-
-  /** 查找评论项 */
-  protected findComment(id: number): Comment|undefined {
-    return this.commentList.find(c => c.data.id === id)
-  }
-
-  /** 删除评论 */
-  public deleteComment(_comment: number|Comment) {
-    let comment: Comment
-    if (typeof _comment === 'number') {
-      const findComment = this.findComment(_comment)
-      if (!findComment) throw Error(`未找到评论 ${_comment}`)
-      comment = findComment
-    } else comment = _comment
-
-    comment.getEl().remove()
-    this.commentList.splice(this.commentList.indexOf(comment), 1)
-
-    if (this.data) this.data.total -= 1 // 评论数减 1
-
-    this.refreshUI()
-  }
-
-  /** 清空所有评论 */
-  public clearAllComments() {
-    this.$commentsWrap.innerHTML = ''
-    this.data = undefined
-    this.commentList = []
+    this.ctx.trigger('list-loaded')
+    this.ctx.trigger('list-inserted', commentData)
   }
 
   /** 更新未读数据 */
@@ -453,33 +436,31 @@ export default class ListLite extends Component {
 
     // 高亮评论
     if (this.unreadHighlight === true) {
-      this.commentList.forEach((comment) => {
-        const notify = this.unread.find(o => o.comment_id === comment.data.id)
+      this.ctx.getCommentList().forEach((comment) => {
+        const notify = this.unread.find(o => o.comment_id === comment.getID())
         if (notify) {
-          comment.setUnread(true)
-          comment.setOpenURL(notify.read_link)
-          comment.openEvt = () => {
-            this.unread = this.unread.filter(o => o.comment_id !== comment.data.id) // remove
-            this.ctx.trigger('unread-update', {
-              notifies: this.unread
-            })
-          }
+          comment.getRender().setUnread(true)
+          comment.getRender().setOpenAction(() => {
+            window.open(notify.read_link)
+            this.unread = this.unread.filter(o => o.comment_id !== comment.getID()) // remove
+            this.ctx.updateNotifies(this.unread)
+          })
         } else {
-          comment.setUnread(false)
+          comment.getRender().setUnread(false)
         }
       })
     }
   }
 
   /** 版本检测 */
-  public versionCheck(name: '前端'|'后端', needVersion: string, curtVersion: string): boolean {
+  public versionCheck(name: 'frontend'|'backend', needVersion: string, curtVersion: string): boolean {
     const needUpdate = Utils.versionCompare(needVersion, curtVersion) === 1
     if (needUpdate) {
       // 需要更新
-      const errEl = Utils.createElement(`<div>Artalk ${name}版本已过时，请更新以获得完整体验<br/>`
+      const errEl = Utils.createElement(`<div>Artalk ${this.$t(name)}版本已过时，请更新以获得完整体验<br/>`
       + `如果你是管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获得帮助`
       + `<br/><br/>`
-      + `<span style="color: var(--at-color-meta);">当前${name}版本 ${curtVersion}，需求版本 >= ${needVersion}</span><br/><br/>`
+      + `<span style="color: var(--at-color-meta);">当前${this.$t(name)}版本 ${curtVersion}，需求版本 >= ${needVersion}</span><br/><br/>`
       + `</div>`)
       const ignoreBtn = Utils.createElement('<span style="cursor:pointer;">忽略</span>')
       ignoreBtn.onclick = () => {

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

@@ -1,16 +1,13 @@
 <div class="atk-list">
   <div class="atk-list-header">
     <div class="atk-comment-count">
-      <div class="atk-text">
-        <span class="atk-comment-count-num">0</span>
-        条评论
-      </div>
+      <div class="atk-text"></div>
     </div>
     <div class="atk-right-action">
-      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>
+      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>
       <span data-action="open-sidebar" class="atk-hide atk-on">
         <span class="atk-unread-badge" style="display: none;"></span>
-        <div class="atk-text">通知中心</div>
+        <div class="atk-text"></div>
       </span>
     </div>
   </div>

package/src/{components → list}/list.ts

@@ -1,11 +1,11 @@
 import '../style/list.less'
 
-import { ListData } from '~/types/artalk-data'
-import Context from '../context'
+import { ListData, NotifyData } from '~/types/artalk-data'
+import Context from '~/types/context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
-import ListHTML from './html/list.html?raw'
+import ListHTML from './list.html?raw'
 import ListLite from './list-lite'
 
 export default class List extends ListLite {
@@ -13,6 +13,7 @@ export default class List extends ListLite {
   private $openSidebarBtn!: HTMLElement
   private $unreadBadge!: HTMLElement
   private $commentCount!: HTMLElement
+  private $commentCountNum!: HTMLElement
   private $dropdownWrap?: HTMLElement
 
   constructor (ctx: Context) {
@@ -35,14 +36,18 @@ export default class List extends ListLite {
     this.flatMode = flatMode
 
     // 分页模式
-    this.pageMode = this.conf.pagination?.readMore ? 'read-more' : 'pagination'
-    this.pageSize = this.conf.pagination?.pageSize || 20
+    this.pageMode = this.conf.pagination.readMore ? 'read-more' : 'pagination'
+    this.pageSize = this.conf.pagination.pageSize || 20
     this.repositionAt = this.$el
 
     // 操作按钮
     this.initListActionBtn()
 
     this.$commentCount = this.$el.querySelector('.atk-comment-count')!
+    this.$commentCount.innerHTML = this.$t('counter', {
+      count: '<span class="atk-comment-count-num">0</span>',
+    })
+    this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
 
     // 评论列表排序 Dropdown 下拉选择层
     if (this.ctx.conf.listSort) {
@@ -53,13 +58,6 @@ export default class List extends ListLite {
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
 
     // event listen
-    this.ctx.on('list-reload', () => (this.fetchComments(0))) // 刷新评论
-    this.ctx.on('list-refresh-ui', () => (this.refreshUI()))
-    this.ctx.on('list-import', (data) => (this.importComments(data)))
-    this.ctx.on('list-insert', (data) => (this.insertComment(data)))
-    this.ctx.on('list-delete', (comment) => (this.deleteComment(comment.id)))
-    this.ctx.on('list-update', (updateData) => { updateData(this.data);this.refreshUI() } )
-    this.ctx.on('unread-update', (data) => (this.showUnreadBadge(data.notifies?.length || 0)))
   }
 
   private initListActionBtn() {
@@ -69,7 +67,7 @@ export default class List extends ListLite {
     this.$unreadBadge = this.$el.querySelector('.atk-unread-badge')!
 
     this.$openSidebarBtn.addEventListener('click', () => {
-      this.ctx.trigger('sidebar-show')
+      this.ctx.showSidebar()
     })
 
     // 关闭评论按钮
@@ -85,7 +83,7 @@ export default class List extends ListLite {
   public refreshUI() {
     super.refreshUI()
 
-    this.$el.querySelector<HTMLElement>('.atk-comment-count-num')!.innerText = String(Number(this.data?.total) || 0)
+    this.$commentCountNum.innerText = String(Number(this.data?.total) || 0)
 
     // 已输入个人信息
     if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
@@ -95,16 +93,17 @@ export default class List extends ListLite {
     }
 
     // 仅管理员显示控制
-    this.ctx.trigger('check-admin-show-el')
-    this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!.innerText = (!this.ctx.user.data.isAdmin) ? '通知中心' : '控制中心'
+    this.ctx.checkAdminShowEl()
+    this.$openSidebarBtn.querySelector<HTMLElement>('.atk-text')!
+      .innerText = (!this.ctx.user.data.isAdmin) ? this.$t('msgCenter') : this.$t('ctrlCenter')
 
     // 关闭评论
     if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
-      this.ctx.trigger('editor-close')
-      this.$closeCommentBtn.innerHTML = '打开评论'
+      this.ctx.editorClose()
+      this.$closeCommentBtn.innerHTML = this.$t('openComment')
     } else {
-      this.ctx.trigger('editor-open')
-      this.$closeCommentBtn.innerHTML = '关闭评论'
+      this.ctx.editorOpen()
+      this.$closeCommentBtn.innerHTML = this.$t('closeComment')
     }
   }
 
@@ -116,7 +115,7 @@ export default class List extends ListLite {
 
     // 防止评论框被吞
     if (this.ctx.conf.editorTravel === true) {
-      this.ctx.trigger('editor-travel-back')
+      this.ctx.editorTravelBack()
     }
   }
 
@@ -133,7 +132,7 @@ export default class List extends ListLite {
     }
     if (!commentId) return
 
-    const comment = this.findComment(commentId)
+    const comment = this.ctx.findComment(commentId)
     if (!comment) { // 若找不到评论
       // 自动翻页
       if (this.readMoreBtn) this.readMoreBtn.click()
@@ -144,18 +143,16 @@ export default class List extends ListLite {
     // 已阅 API
     const notifyKey = Utils.getQueryParam('atk_notify_key')
     if (notifyKey) {
-      new Api(this.ctx).markRead(notifyKey)
+      this.ctx.getApi().markRead(notifyKey)
         .then(() => {
           this.unread = this.unread.filter(o => o.comment_id !== commentId)
-          this.ctx.trigger('unread-update', {
-            notifies: this.unread
-          })
+          this.updateUnread(this.unread)
         })
     }
 
     // 若父评论存在 “子评论部分” 限高，取消限高
     comment.getParents().forEach((p) => {
-      if (p.$children) p.heightLimitRemove(p.$children)
+      p.getRender().heightLimitRemoveForChildren()
     })
 
     const goTo = () => {
@@ -177,18 +174,18 @@ export default class List extends ListLite {
   public adminPageEditSave () {
     if (!this.data || !this.data.page) return
 
-    this.ctx.trigger('editor-show-loading')
-    new Api(this.ctx).pageEdit(this.data.page)
+    this.ctx.editorShowLoading()
+    this.ctx.getApi().pageEdit(this.data.page)
       .then((page) => {
         if (this.data)
           this.data.page = { ...page }
         this.refreshUI()
       })
       .catch(err => {
-        this.ctx.trigger('editor-notify', { msg: `修改页面数据失败：${err.msg || String(err)}`, type: 'e'})
+        this.ctx.editorShowNotify(`${this.$t('editFail')}: ${err.msg || String(err)}`, 'e')
       })
       .finally(() => {
-        this.ctx.trigger('editor-hide-loading')
+        this.ctx.editorHideLoading()
       })
   }
 
@@ -216,10 +213,10 @@ export default class List extends ListLite {
 
     // 下拉列表
     const dropdownList = [
-      ['最新', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
-      ['最热', () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
-      ['最早', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
-      ['作者', () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+      [this.$t('sortLatest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+      [this.$t('sortBest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+      [this.$t('sortOldest'), () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+      [this.$t('sortAuthor'), () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
     ]
 
     // 列表项点击事件
@@ -254,4 +251,9 @@ export default class List extends ListLite {
 
     this.$dropdownWrap.append($dropdown)
   }
+
+  public updateUnread(notifies: NotifyData[]): void {
+    super.updateUnread(notifies)
+    this.showUnreadBadge(notifies?.length || 0)
+  }
 }