artalk 2.4.2 → 2.4.4

package/dist/src/api/index.d.ts

@@ -19,7 +19,7 @@ declare const ApiComponents: {
 };
 declare class Api {
     protected ctx: Context;
-    baseURL: string;
+    get baseURL(): string;
     constructor(ctx: Context);
 }
 declare type TC = typeof ApiComponents;

package/dist/src/api/system.d.ts

@@ -10,4 +10,11 @@ export default class SystemApi extends ApiBase {
     getSettings(): Promise<string>;
     /** 保存配置数据 */
     saveSettings(yamlStr: string): Promise<boolean>;
+    /** 获取 API 版本信息 */
+    version(): Promise<{
+        app: string;
+        version: string;
+        commit_hash: string;
+        fe_min_version: string;
+    }>;
 }

package/dist/src/api/user.d.ts

@@ -1,11 +1,14 @@
-import { UserData, NotifyData } from '../../types/artalk-data';
+import { UserData, NotifyData, UserDataForAdmin } from '../../types/artalk-data';
 import ApiBase from './api-base';
 /**
  * 用户 API
  */
 export default class UserApi extends ApiBase {
     /** 用户 · 登录 */
-    login(name: string, email: string, password: string): Promise<string>;
+    login(name: string, email: string, password: string): Promise<{
+        token: string;
+        user: UserData;
+    }>;
     /** 用户 · 获取  */
     userGet(name: string, email: string): {
         req: Promise<{
@@ -25,4 +28,15 @@ export default class UserApi extends ApiBase {
     logout(): Promise<unknown>;
     /** 已读标记 */
     markRead(notifyKey: string, readAll?: boolean): Promise<unknown>;
+    /** 用户 · 列表 */
+    userList(offset?: number, limit?: number, type?: 'all' | 'admin' | 'in_conf'): Promise<{
+        users: UserDataForAdmin[];
+        total: number;
+    }>;
+    /** 用户 · 新增 */
+    userAdd(user: Partial<UserDataForAdmin>, password?: string): Promise<UserDataForAdmin>;
+    /** 用户 · 修改 */
+    userEdit(user: Partial<UserDataForAdmin>, password?: string): Promise<UserDataForAdmin>;
+    /** 用户 · 删除 */
+    userDel(userID: number): Promise<unknown>;
 }

package/dist/src/artalk.d.ts

@@ -25,18 +25,12 @@ export default class Artalk {
     private initComponents;
     /** 基本配置初始化 */
     static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig;
-    /** 初始化组件根据远程加载的配置 */
-    private loadConfRemoteAndInitComponents;
-    /** 远程加载配置 */
-    private loadConfRemote;
     /** 事件绑定初始化 */
     private initEventBind;
     /** 语言初始化 */
     private initLocale;
     /** Layer 初始化 */
     private initLayer;
-    /** 暗黑模式初始化 */
-    private initDarkMode;
     /** 监听事件 */
     on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>): void;
     /** 解除监听事件 */

package/dist/src/context.d.ts

@@ -69,4 +69,8 @@ export default class Context implements ContextApi {
         [key: string]: string;
     }): string;
     setDarkMode(darkMode: boolean): void;
+    private darkModeMedia;
+    private darkModeAutoFunc?;
+    private refreshDarkModeConf;
+    updateConf(conf: Partial<ArtalkConfig>): void;
 }

package/dist/src/list/list-lite.d.ts

@@ -9,14 +9,23 @@ export default class ListLite extends Component {
     protected $commentsWrap: HTMLElement;
     protected data?: ListData;
     protected isLoading: boolean;
-    noCommentText: string;
+    noCommentText?: string;
+    /** 嵌套模式下的排序方式 */
+    private _nestSortBy?;
+    get nestSortBy(): ListNest.SortByType;
+    set nestSortBy(val: ListNest.SortByType);
     /** 平铺模式 */
-    flatMode: boolean;
-    /** 嵌套模式 */
-    nestSortBy: ListNest.SortByType;
-    /** 分页 */
-    pageMode: 'pagination' | 'read-more';
-    pageSize: number;
+    private _flatMode?;
+    get flatMode(): boolean;
+    set flatMode(val: boolean);
+    /** 分页方式 */
+    _pageMode?: 'pagination' | 'read-more';
+    get pageMode(): 'pagination' | 'read-more';
+    set pageMode(val: 'pagination' | 'read-more');
+    /** 每页数量 (每次请求获取量) */
+    private _pageSize?;
+    get pageSize(): number;
+    set pageSize(val: number);
     scrollListenerAt?: HTMLElement;
     repositionAt?: HTMLElement;
     protected pagination?: Pagination;
@@ -35,6 +44,7 @@ export default class ListLite extends Component {
     setLoading(val: boolean, isFirstLoad?: boolean): void;
     /** 评论获取 */
     fetchComments(offset: number): Promise<void>;
+    private confLoaded;
     protected onLoad(data: ListData, offset: number): void;
     /** 分页模式 */
     private refreshPagination;

package/dist/src/list/list.d.ts

@@ -20,6 +20,7 @@ export default class List extends ListLite {
     /** 管理员设置页面信息 */
     adminPageEditSave(): void;
     showUnreadBadge(count: number): void;
+    private dropdownLoaded;
     /** 初始化选择下拉层 */
     protected initDropdown(): void;
     updateUnread(notifies: NotifyData[]): void;

package/dist/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/dist/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/dist/types/context.d.ts

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

package/dist/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        // 侧边栏隐藏
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.4.2",
-  "backendMinVersion": "2.2.0",
+  "version": "2.4.4",
+  "backendMinVersion": "2.3.0",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -30,7 +30,7 @@
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
     "marked": "^4.0.19",
-    "abortcontroller-polyfill": "^1.7.3"
+    "abortcontroller-polyfill": "^1.7.5"
   },
   "scripts": {
     "dev": "vite",

package/src/api/index.ts

@@ -18,11 +18,12 @@ const ApiComponents = {
 
 class Api {
   protected ctx: Context
-  public baseURL: string
+  public get baseURL() {
+    return `${this.ctx.conf.server}/api`
+  }
 
   constructor (ctx: Context) {
     this.ctx = ctx
-    this.baseURL = `${ctx.conf.server}/api`
 
     Object.entries(ApiComponents).forEach(([key, ApiComponent]) => {
       this[key] = new ApiComponent(this, this.ctx)

package/src/api/system.ts

@@ -36,4 +36,11 @@ export default class SystemApi extends ApiBase {
     })
     return data
   }
+
+  /** 获取 API 版本信息 */
+  public async version() {
+    const resp = await fetch(`${this.api.baseURL}/version`, { method: 'POST' })
+    const data = await resp.json()
+    return data as { app: string, version: string, commit_hash: string, fe_min_version: string }
+  }
 }

package/src/api/user.ts

@@ -1,4 +1,4 @@
-import { UserData, NotifyData } from '~/types/artalk-data'
+import { UserData, NotifyData, UserDataForAdmin } from '~/types/artalk-data'
 import ApiBase from './api-base'
 import { ToFormData } from './request'
 
@@ -15,7 +15,7 @@ export default class UserApi extends ApiBase {
     if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
 
     const data = await this.POST<any>('/login', params)
-    return (data.token as string)
+    return data as { token: string, user: UserData }
   }
 
   /** 用户 · 获取  */
@@ -72,4 +72,61 @@ export default class UserApi extends ApiBase {
 
     return this.POST(`/mark-read`, params)
   }
+
+  /** 用户 · 列表 */
+  public async userList(offset?: number, limit?: number, type?: 'all'|'admin'|'in_conf') {
+    const params: any = {
+      offset: offset || 0,
+      limit: limit || 15,
+    }
+
+    if (type) params.type = type
+
+    const d = await this.POST<any>('/admin/user-get', params)
+    return (d as { users: UserDataForAdmin[], total: number })
+  }
+
+  /** 用户 · 新增 */
+  public async userAdd(user: Partial<UserDataForAdmin>, password?: string) {
+    const params: any = {
+      name: user.name || '',
+      email: user.email || '',
+      password: password || '',
+      link: user.link || '',
+      is_admin: user.is_admin || false,
+      site_names: user.site_names_raw || '',
+      receive_email: user.receive_email || true,
+      badge_name: user.badge_name || '',
+      badge_color: user.badge_color || '',
+    }
+
+    const d = await this.POST<any>('/admin/user-add', params)
+    return (d.user as UserDataForAdmin)
+  }
+
+  /** 用户 · 修改 */
+  public async userEdit(user: Partial<UserDataForAdmin>, password?: string) {
+    const params: any = {
+      id: user.id,
+      name: user.name || '',
+      email: user.email || '',
+      password: password || '',
+      link: user.link || '',
+      is_admin: user.is_admin || false,
+      site_names: user.site_names_raw || '',
+      receive_email: user.receive_email || true,
+      badge_name: user.badge_name || '',
+      badge_color: user.badge_color || '',
+    }
+
+    const d = await this.POST<any>('/admin/user-edit', params)
+    return (d.user as UserDataForAdmin)
+  }
+
+  /** 用户 · 删除 */
+  public userDel(userID: number) {
+    return this.POST('/admin/user-del', {
+      id: String(userID)
+    })
+  }
 }

package/src/artalk.ts

@@ -48,9 +48,6 @@ export default class Artalk {
     /* 初始化 Context */
     this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    // @ts-ignore 远程加载引用后端的配置
-    if (this.conf.useBackendConf) return this.loadConfRemoteAndInitComponents()
-
     /* 初始化组件 */
     this.initComponents()
   }
@@ -59,7 +56,6 @@ export default class Artalk {
   private initComponents() {
     this.initLocale()
     this.initLayer()
-    this.initDarkMode()
     Utils.initMarked(this.ctx)
 
     const Components: { [name: string]: () => void } = {
@@ -91,7 +87,6 @@ export default class Artalk {
       sidebarLayer: () => {
         const sidebarLayer = new SidebarLayer(this.ctx)
         this.ctx.setSidebarLayer(sidebarLayer)
-        this.$root.appendChild(sidebarLayer.$el)
       },
 
       // 默认事件绑定
@@ -148,24 +143,6 @@ export default class Artalk {
     return conf
   }
 
-  /** 初始化组件根据远程加载的配置 */
-  private async loadConfRemoteAndInitComponents() {
-    await this.loadConfRemote()
-    this.initComponents()
-    return this
-  }
-
-  /** 远程加载配置 */
-  private async loadConfRemote() {
-    Ui.showLoading(this.$root)
-    let backendConf = {}
-    try {
-      backendConf = await this.ctx.getApi().system.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() {
     // 锚点快速跳转评论
@@ -194,18 +171,6 @@ export default class Artalk {
     Layer.BodyOrgPaddingRight = document.body.style.paddingRight
   }
 
-  /** 暗黑模式初始化 */
-  private 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 on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')

package/src/comment/render.ts

@@ -58,7 +58,8 @@ export default class CommentRender {
   private renderAvatar() {
     const $avatar = this.$el.querySelector<HTMLElement>('.atk-avatar')!
     const $avatarImg = Utils.createElement<HTMLImageElement>('<img />')
-    $avatarImg.src = this.comment.getGravatarURL()
+    const avatarURLBuilder = this.ctx.conf.avatarURLBuilder
+    $avatarImg.src = avatarURLBuilder ? avatarURLBuilder(this.data) : this.comment.getGravatarURL()
     if (this.data.link) {
       const $avatarA = Utils.createElement<HTMLLinkElement>('<a target="_blank" rel="noreferrer noopener nofollow"></a>')
       $avatarA.href = Utils.isValidURL(this.data.link) ? this.data.link : `https://${this.data.link}`

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()
+    })
   }
 
   /* 设置持有的同事类 */
@@ -261,16 +266,39 @@ export default class Context implements ContextApi {
     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() {
@@ -433,6 +433,7 @@ export default class Editor extends Component {
     this.$plugBtnWrap.innerHTML = ''
 
     const disabledPlugs: string[] = []
+    if (!this.conf.imgUpload) disabledPlugs.push('upload')
     if (!this.conf.emoticons) disabledPlugs.push('emoticons')
     if (!this.conf.preview) disabledPlugs.push('preview')
 

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/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',