artalk 2.4.2 → 2.4.4

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)

package/src/list/list.ts

@@ -23,20 +23,7 @@ export default class List extends ListLite {
     el.querySelector('.atk-list-body')!.append(this.$el)
     this.$el = el
 
-    // 平铺模式
-    if (this.ctx.conf.flatMode === true) {
-      this.flatMode = true // 遵循配置总是开启平铺模式
-    } else if (this.conf.nestMax && this.conf.nestMax <= 1) {
-      this.flatMode = true // 嵌套层数值无效时，强制开启平铺模式
-    } else if (this.ctx.conf.flatMode === 'auto') {
-      // 自动判断启用平铺模式
-      if (window.matchMedia("(max-width: 768px)").matches)
-        this.flatMode = true
-    }
-
     // 分页模式
-    this.pageMode = this.conf.pagination.readMore ? 'read-more' : 'pagination'
-    this.pageSize = this.conf.pagination.pageSize || 20
     this.repositionAt = this.$el
 
     // 操作按钮
@@ -48,11 +35,6 @@ export default class List extends ListLite {
     })
     this.$commentCountNum = this.$commentCount.querySelector('.atk-comment-count-num')!
 
-    // 评论列表排序 Dropdown 下拉选择层
-    if (this.ctx.conf.listSort) {
-      this.initDropdown()
-    }
-
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
 
@@ -104,6 +86,11 @@ export default class List extends ListLite {
       this.ctx.editorOpen()
       this.$closeCommentBtn.innerHTML = this.$t('closeComment')
     }
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (this.ctx.conf.listSort) {
+      this.initDropdown()
+    }
   }
 
   protected onLoad(data: ListData, offset: number) {
@@ -197,8 +184,13 @@ export default class List extends ListLite {
     }
   }
 
+  private dropdownLoaded = false
+
   /** 初始化选择下拉层 */
   protected initDropdown() {
+    if (this.dropdownLoaded) return
+    this.dropdownLoaded = true
+
     this.$dropdownWrap = this.$commentCount
     this.$commentCount.classList.add('atk-dropdown-wrap')
 

package/types/artalk-config.d.ts

@@ -1,4 +1,5 @@
 import { I18n } from '~/src/i18n'
+import { CommentData } from './artalk-data'
 
 export default interface ArtalkConfig {
   /** 装载元素 */
@@ -39,6 +40,9 @@ export default interface ArtalkConfig {
     default: string
   }
 
+  /** 头像链接生成器 */
+  avatarURLBuilder?: (comment: CommentData) => string,
+
   /** 分页配置 */
   pagination: {
     /** 每次请求获取数量 */
@@ -103,7 +107,7 @@ export default interface ArtalkConfig {
   /** 版本检测 */
   versionCheck: boolean
 
-  /** 应用后端配置 */
+  /** 引用后端配置 */
   useBackendConf: boolean
 
   /** 语言本地化 */

package/types/artalk-data.d.ts

@@ -159,6 +159,29 @@ export interface UserData {
 
   /** 是否属于管理员 */
   is_admin: boolean
+
+  /** 所属站点名 */
+  site_names: string[]
+
+  /** 所属站点名 (字符串) */
+  site_names_raw: string,
+
+  /** 是否允许接收邮件通知 */
+  receive_email: boolean
+}
+
+export interface UserDataForAdmin extends UserData {
+  /** 最后一次操作 IP */
+  last_ip: string
+
+  /** 最后一次操作 UA */
+  last_ua: string
+
+  /** 是否存在于配置文件中 */
+  is_in_conf: boolean
+
+  /** 评论数 */
+  comment_count: number
 }
 
 export interface NotifyData {

package/types/context.d.ts

@@ -143,4 +143,7 @@ export default interface ContextApi {
 
   /** 设置暗黑模式 */
   setDarkMode(darkMode: boolean): void
+
+  /** 更新配置 */
+  updateConf(conf: Partial<ArtalkConfig>): void
 }

package/types/event.d.ts

@@ -9,7 +9,7 @@ export interface EventPayloadMap {
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
-  'conf-updated': undefined        // Artalk 配置变更时
+  'conf-loaded': undefined         // Artalk 配置变更时
   'sidebar-show': undefined        // 侧边栏显示
   'sidebar-hide': undefined        // 侧边栏隐藏
 }