artalk 2.3.3 → 2.4.0

package/src/api/page.ts

@@ -0,0 +1,85 @@
+import { PageData, CommentData } from '~/types/artalk-data'
+import ApiBase from './api-base'
+
+/**
+ * 页面 API
+ */
+export default class PageApi extends ApiBase {
+  /** 页面 · 获取 */
+  public async pageGet(siteName?: string, offset?: number, limit?: number) {
+    const params: any = {
+      site_name: siteName || '',
+      offset: offset || 0,
+      limit: limit || 15,
+    }
+
+    const d = await this.POST<any>('/admin/page-get', params)
+    return (d as { pages: PageData[], total: number })
+  }
+
+  /** 页面 · 修改 */
+  public async pageEdit(data: PageData) {
+    const params: any = {
+      id: data.id,
+      key: data.key,
+      title: data.title,
+      admin_only: data.admin_only,
+      site_name: data.site_name || this.ctx.conf.site,
+    }
+
+    const d = await this.POST<any>('/admin/page-edit', params)
+    return (d.page as PageData)
+  }
+
+  /** 页面 · 删除 */
+  public pageDel(pageKey: string, siteName?: string) {
+    const params: any = {
+      key: String(pageKey),
+      site_name: siteName || '',
+    }
+
+    return this.POST('/admin/page-del', params)
+  }
+
+  /** 页面 · 数据更新 */
+  public async pageFetch(id?: number, siteName?: string, getStatus?: boolean) {
+    const params: any = {}
+    if (id) params.id = id
+    if (siteName) params.site_name = siteName
+    if (getStatus) params.get_status = getStatus
+
+    const d = await this.POST<any>('/admin/page-fetch', params)
+    return (d as any)
+  }
+
+  /** PV */
+  public async pv() {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      page_key: this.ctx.conf.pageKey || '',
+      page_title: this.ctx.conf.pageTitle || ''
+    }
+
+    const p = await this.POST<any>('/pv', params)
+    return p.pv as number
+  }
+
+  /** 统计 */
+  public async stat(
+    type: 'latest_comments'|'latest_pages'|'pv_most_pages'|'comment_most_pages'|
+          'page_pv'|'site_pv'|'page_comment'|'site_comment',
+    pageKeys?: string|string[],
+    limit?: number
+  ) {
+    const params: any = {
+      type,
+      site_name: this.ctx.conf.site || '',
+    }
+
+    if (pageKeys) params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(',') : pageKeys
+    if (limit) params.limit = limit
+
+    const data = await this.POST<PageData[]|CommentData[]|object|number>(`/stat`, params)
+    return data
+  }
+}

package/src/api/request.ts

@@ -9,6 +9,9 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
     init.headers = headers
   }
 
+  // 跨域请求携带 cookie (无需)
+  // init.credentials = 'include'
+
   // 请求操作
   const resp = await timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15000, init)
 
@@ -60,19 +63,20 @@ export async function POST<T>(ctx: Context, url: string, data?: {[key: string]:
   const init: RequestInit = {
     method: 'POST',
   }
-  if (data) init.body = ToFormData(data)
+  data = { site_name: ctx.conf.site || '', ...(data || {}) } // 总是携带 site_name
+  init.body = ToFormData(data)
 
   const json = await Fetch(ctx, url, init)
   return ((json.data || {}) as T)
 }
 
-/** 公共 GET 请求 */
-export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
-  const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
-    method: 'GET',
-  })
-  return ((json.data || {}) as T)
-}
+/** 公共 GET 请求 (无 GET 方式 API) */
+// export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+//   const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
+//     method: 'GET',
+//   })
+//   return ((json.data || {}) as T)
+// }
 
 /** 对象转 FormData */
 export function ToFormData(object: {[key: string]: any}): FormData {

package/src/api/site.ts

@@ -0,0 +1,51 @@
+import { SiteData } from '~/types/artalk-data'
+import ApiBase from './api-base'
+
+/**
+ * 站点 API
+ */
+export default class SiteApi extends ApiBase {
+  /** 站点 · 获取 */
+  public async siteGet() {
+    const params: any = {}
+
+    const d = await this.POST<any>('/admin/site-get', params)
+    return (d.sites as SiteData[])
+  }
+
+  /** 站点 · 创建 */
+  public async siteAdd(name: string, urls: string) {
+    const params: any = {
+      name, urls,
+      site_name: '' // 全局保留字段，当前站点名
+    }
+
+    const d = await this.POST<any>('/admin/site-add', params)
+    return (d.site as SiteData)
+  }
+
+  /** 站点 · 修改 */
+  public async siteEdit(data: SiteData) {
+    const params: any = {
+      id: data.id,
+      name: data.name || '',
+      urls: data.urls || '',
+    }
+
+    const d = await this.POST<any>('/admin/site-edit', params)
+    return (d.site as SiteData)
+  }
+
+  /** 站点 · 删除 */
+  public siteDel(id: number, delContent = false) {
+    const params: any = { id, del_content: delContent }
+
+    return this.POST('/admin/site-del', params)
+  }
+
+  /** 导出 */
+  public async export() {
+    const d = await this.Fetch(`/admin/export`, { method: 'POST' }, 0)
+    return (d.data?.data || '' as string)
+  }
+}

package/src/api/system.ts

@@ -0,0 +1,39 @@
+import ArtalkConfig from '~/types/artalk-config'
+import ApiBase from './api-base'
+
+/**
+ * 系统 API
+ */
+export default class SystemApi extends ApiBase {
+  /** 获取配置 */
+  public async conf() {
+    const data = await this.POST<any>(`/conf`)
+    const conf = (data.frontend_conf || {}) as ArtalkConfig
+
+    // Patch: `emoticons` config string to json
+    if (conf.emoticons && typeof conf.emoticons === "string") {
+      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
+      }
+    }
+
+    return conf
+  }
+
+  /** 获取配置数据 */
+  public async getSettings() {
+    const data = await this.POST<string>('/admin/setting-get')
+    return data
+  }
+
+  /** 保存配置数据 */
+  public async saveSettings(yamlStr: string) {
+    const data = await this.POST<boolean>('/admin/setting-save', {
+      data: yamlStr,
+    })
+    return data
+  }
+}

package/src/api/upload.ts

@@ -0,0 +1,29 @@
+import { ToFormData } from './request'
+import ApiBase from './api-base'
+
+/**
+ * 上传 API
+ */
+export default class UploadApi extends ApiBase {
+  /** 图片上传 */
+  public async imgUpload(file: File) {
+    const params: any = {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email,
+      page_key: this.ctx.conf.pageKey,
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const form = ToFormData(params)
+    form.set('file', file)
+
+    const init: RequestInit = {
+      method: 'POST',
+      body: form
+    }
+
+    const json = await this.Fetch('/img-upload', init)
+    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+  }
+}

package/src/api/user.ts

@@ -0,0 +1,75 @@
+import { UserData, NotifyData } from '~/types/artalk-data'
+import ApiBase from './api-base'
+import { ToFormData } from './request'
+
+/**
+ * 用户 API
+ */
+export default class UserApi extends ApiBase {
+  /** 用户 · 登录 */
+  public async login(name: string, email: string, password: string) {
+    const params: any = {
+      name, email, password
+    }
+
+    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)
+  }
+
+  /** 用户 · 获取  */
+  public userGet(name: string, email: string) {
+    const ctrl = new AbortController()
+    const params: any = {
+      name, email, site_name: (this.ctx.conf.site || '')
+    }
+
+    const req = this.Fetch(`/user-get`, {
+      method: 'POST',
+      body: ToFormData(params),
+      signal: ctrl.signal,
+    }).then((json) => ({
+      user: json.data.user as UserData|null,
+      is_login: json.data.is_login as boolean,
+      unread: (json.data.unread || []) as NotifyData[],
+      unread_count: json.data.unread_count || 0,
+    }))
+
+    return {
+      req,
+      abort: () => { ctrl.abort() },
+    }
+  }
+
+  /** 用户 · 登录状态 */
+  public async loginStatus() {
+    const data = await this.POST<any>('/login-status', {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email
+    })
+    return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
+  }
+
+  /** 用户 · 注销 */
+  public async logout() {
+    return this.POST('/logout')
+  }
+
+  /** 已读标记 */
+  public markRead(notifyKey: string, readAll = false) {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      notify_key: notifyKey,
+    }
+
+    if (readAll) {
+      delete params.notify_key
+      params.read_all = true
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    return this.POST(`/mark-read`, params)
+  }
+}

package/src/artalk.ts

@@ -6,14 +6,13 @@ import ArtalkPlug from '~/types/plug'
 import Context from '~/types/context'
 import ConcreteContext from './context'
 import defaults from './defaults'
-import { internal as internalLocales } from './i18n'
 
 import CheckerLauncher from './lib/checker'
 import Editor from './editor'
 import List from './list'
 import SidebarLayer from './layer/sidebar-layer'
 
-import Layer, { GetLayerWrap } from './layer'
+import Layer from './layer'
 import * as Utils from './lib/utils'
 import * as Ui from './lib/ui'
 import * as Stat from './lib/stat'
@@ -30,14 +29,14 @@ export default class Artalk {
   public ctx!: Context
   public $root!: HTMLElement
 
-  public checkerLauncher!: CheckerLauncher
-  public editor!: Editor
-  public list!: List
-  public sidebarLayer!: SidebarLayer
+  /** Plugins (in global scope)  */
+  protected static Plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
 
-  protected static Plugins: ArtalkPlug[] = [
-    Stat.PvCountWidget
-  ]
+  /** Plugins (in a instance scope) */
+  protected instancePlugins: ArtalkPlug[] = []
+
+  /** 禁用的组件 */
+  public static DisabledComponents: string[] = []
 
   constructor(customConf: Partial<ArtalkConfig>) {
     /* 初始化基本配置 */
@@ -61,32 +60,52 @@ export default class Artalk {
     this.initDarkMode()
     Utils.initMarked(this.ctx)
 
-    // CheckerLauncher
-    this.checkerLauncher = new CheckerLauncher(this.ctx)
-    this.ctx.setCheckerLauncher(this.checkerLauncher)
-
-    // 编辑器
-    this.editor = new Editor(this.ctx)
-    this.ctx.setEditor(this.editor)
-    this.$root.appendChild(this.editor.$el)
-
-    // 评论列表
-    this.list = new List(this.ctx)
-    this.ctx.setList(this.list)
-    this.$root.appendChild(this.list.$el)
-
-    // 侧边栏
-    this.sidebarLayer = new SidebarLayer(this.ctx)
-    this.ctx.setSidebarLayer(this.sidebarLayer)
-    this.$root.appendChild(this.sidebarLayer.$el)
+    const Components: { [name: string]: () => void } = {
+      // CheckerLauncher
+      checkerLauncher: () => {
+        const checkerLauncher = new CheckerLauncher(this.ctx)
+        this.ctx.setCheckerLauncher(checkerLauncher)
+      },
+
+      // 编辑器
+      editor: () => {
+        const editor = new Editor(this.ctx)
+        this.ctx.setEditor(editor)
+        this.$root.appendChild(editor.$el)
+      },
+
+      // 评论列表
+      list: () => {
+        // 评论列表
+        const list = new List(this.ctx)
+        this.ctx.setList(list)
+        this.$root.appendChild(list.$el)
+
+        // 评论获取
+        list.fetchComments(0)
+      },
+
+      // 侧边栏 Layer
+      sidebarLayer: () => {
+        const sidebarLayer = new SidebarLayer(this.ctx)
+        this.ctx.setSidebarLayer(sidebarLayer)
+        this.$root.appendChild(sidebarLayer.$el)
+      },
+
+      // 默认事件绑定
+      eventsDefault: () => {
+        this.initEventBind()
+      }
+    }
 
-    // 评论获取
-    this.list.fetchComments(0)
+    // 组件初始化
+    Object.entries(Components).forEach(([name, initComponent]) => {
+      if (Artalk.DisabledComponents.includes(name)) return
 
-    // 事件绑定初始化
-    this.initEventBind()
+      initComponent()
+    })
 
-    // 插件初始化
+    // 插件初始化 (global scope)
     Artalk.Plugins.forEach(plugin => {
       if (typeof plugin === 'function')
         plugin(this.ctx)
@@ -94,7 +113,7 @@ export default class Artalk {
   }
 
   /** 基本配置初始化 */
-  private static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
+  public static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
     // 合并默认配置
     const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
 
@@ -139,7 +158,7 @@ export default class Artalk {
     Ui.showLoading(this.$root)
     let backendConf = {}
     try {
-      backendConf = await this.ctx.getApi().conf()
+      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)
@@ -149,8 +168,7 @@ export default class Artalk {
   private initEventBind() {
     // 锚点快速跳转评论
     window.addEventListener('hashchange', () => {
-      this.list.goToCommentDelay = false
-      this.list.checkGoToCommentByUrlHash()
+      this.ctx.listHashGotoCheck()
     })
 
     // 本地用户数据变更
@@ -162,20 +180,8 @@ export default class Artalk {
 
   /** 语言初始化 */
   private initLocale() {
-    if (typeof this.conf.locale === 'string') {
-      if (this.conf.locale === 'auto') { // 自动切换
-        this.conf.locale = ((navigator.languages) ? navigator.languages[0] : navigator.language)
-      }
-
-      this.conf.locale = this.conf.locale.replace(
-        /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
-        (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
-      )
-
-      if (!internalLocales[this.conf.locale]) { // 语言不存在时，使用 en
-        console.log(`Locale "${this.conf.locale}" not found.`)
-        this.conf.locale = 'en'
-      }
+    if (this.conf.locale === 'auto') { // 自适应语言
+      this.conf.locale = navigator.language
     }
   }
 
@@ -198,30 +204,6 @@ export default class Artalk {
     }
   }
 
-  /** 设置暗黑模式 */
-  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 {
-      this.$root.classList.remove(darkModeClassName)
-    }
-
-    // for Layer
-    const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
-    if ($layerWrap) {
-      if (this.conf.darkMode) {
-        $layerWrap.classList.add(darkModeClassName)
-      } else {
-        $layerWrap.classList.remove(darkModeClassName)
-      }
-    }
-  }
-
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
@@ -242,11 +224,28 @@ export default class Artalk {
     this.ctx.listReload()
   }
 
-  /** Use Plugin */
-  public static Use(plugin: ArtalkPlug) {
+  /** 设置暗黑模式 */
+  public setDarkMode(darkMode: boolean) {
+    this.ctx.setDarkMode(darkMode)
+  }
+
+  /** Use Plugin (specific instance) */
+  public use(plugin: ArtalkPlug) {
+    this.instancePlugins.push(plugin)
+    if (typeof plugin === 'function') plugin(this.ctx)
+  }
+
+  /** Use Plugin (static method for global scope) */
+  public static use(plugin: ArtalkPlug) {
     this.Plugins.push(plugin)
   }
 
+  /** @deprecated Please replace it with lowercase function name `use(...)`. */
+  public static Use(plugin: ArtalkPlug) {
+    this.use(plugin)
+    console.warn('`Use(...)` is deprecated, replace it with lowercase `use(...)`.')
+  }
+
   /** 装载数量统计元素 */
   public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
     const conf = this.HandelBaseConf(customConf)

package/src/comment/actions.ts

@@ -16,7 +16,7 @@ export default class CommentActions {
   public vote(type: 'up'|'down') {
     const actionBtn = (type === 'up') ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown
 
-    this.ctx.getApi().vote(this.data.id, `comment_${type}`)
+    this.ctx.getApi().comment.vote(this.data.id, `comment_${type}`)
     .then((v) => {
       this.data.vote_up = v.up
       this.data.vote_down = v.down
@@ -45,7 +45,7 @@ export default class CommentActions {
       modify.is_pinned = !modify.is_pinned
     }
 
-    this.ctx.getApi().commentEdit(modify).then((data) => {
+    this.ctx.getApi().comment.commentEdit(modify).then((data) => {
       btnElem.setLoading(false)
 
       // 刷新当前 Comment UI
@@ -64,7 +64,7 @@ export default class CommentActions {
     if (btnElem.isLoading) return // 若正在删除中
 
     btnElem.setLoading(true, `${this.ctx.$t('deleting')}...`)
-    this.ctx.getApi().commentDel(this.data.id, this.data.site_name)
+    this.ctx.getApi().comment.commentDel(this.data.id, this.data.site_name)
       .then(() => {
         btnElem.setLoading(false)
         if (this.cConf.onDelete) this.cConf.onDelete(this.comment)

package/src/comment/comment.ts

@@ -172,16 +172,13 @@ export default class Comment extends Component {
     return Utils.timeAgo(new Date(this.data.date), this.ctx)
   }
 
-  /** 获取用户 UserAgent 浏览器 */
-  public getUserUaBrowser() {
+  /** 获取用户 UserAgent 信息 */
+  public getUserUA() {
     const info = UADetect(this.data.ua)
-    return `${info.browser} ${info.version}`
-  }
-
-  /** 获取用户 UserAgent 系统 */
-  public getUserUaOS() {
-    const info = UADetect(this.data.ua)
-    return `${info.os} ${info.osVersion}`
+    return {
+      browser: `${info.browser} ${info.version}`,
+      os: `${info.os} ${info.osVersion}`
+    }
   }
 
   /** 获取配置 */