artalk 2.0.4 → 2.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.0.4",
-  "description": "A Fast, Slight & Delightful Comment",
+  "version": "2.1.1",
+  "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
     "comments-widget",
@@ -20,7 +20,7 @@
   "unpkg": "./dist/Artalk.iife.js",
   "jsdelivr": "./dist/Artalk.iife.js",
   "module": "./dist/Artalk.es.js",
-  "types": "./dist/types/index.d.ts",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/Artalk.es.js",
@@ -57,7 +57,6 @@
     "prettier": "^2.3.2",
     "typescript": "4.3.2",
     "vite": "^2.5.1",
-    "vite-plugin-dts": "^0.7.0",
     "vite-tsconfig-paths": "^3.3.14"
   },
   "dependencies": {

package/src/api/index.ts

@@ -0,0 +1,269 @@
+import Context from '../context'
+import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import { Fetch, ToFormData, POST, GET } from './request'
+
+export default class Api {
+  private ctx: Context
+  private baseURL: string
+
+  constructor (ctx: Context) {
+    this.ctx = ctx
+    this.baseURL = ctx.conf.server
+  }
+
+  // ============================
+  //  评论 Comment
+  // ============================
+
+  /** 评论 · 获取 */
+  public get(offset: number, type?: string, flatMode?: boolean, paramsEditor?: (params: any) => void) {
+    const params: any = {
+      page_key: this.ctx.conf.pageKey,
+      site_name: this.ctx.conf.site || '',
+      limit: this.ctx.conf.pagination?.pageSize || 15,
+      offset,
+    }
+
+    if (type) params.type = type
+    if (flatMode) params.flat_mode = flatMode // 平铺模式
+    if (this.ctx.user.checkHasBasicUserInfo()) {
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    if (paramsEditor) paramsEditor(params)
+
+    return POST<ListData>(this.ctx, `${this.baseURL}/get`, params)
+  }
+
+  /** 评论 · 创建 */
+  public async add(comment: { nick: string, email: string, link: string, content: string, rid: number }) {
+    const params: any = {
+      name: comment.nick,
+      email: comment.email,
+      link: comment.link,
+      content: comment.content,
+      rid: comment.rid,
+      page_key: this.ctx.conf.pageKey,
+      page_title: this.ctx.conf.pageTitle || '',
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const data = await POST<any>(this.ctx, `${this.baseURL}/add`, params)
+    return (data.comment as CommentData)
+  }
+
+  /** 评论 · 修改 */
+  public async commentEdit(data: CommentData) {
+    const params: any = {
+      ...data,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/comment-edit`, params)
+    return (d.comment as CommentData)
+  }
+
+  /** 评论 · 删除 */
+  public commentDel(commentID: number, siteName?: string) {
+    const params: any = {
+      id: String(commentID),
+      site_name: siteName || '',
+    }
+
+    return POST(this.ctx, `${this.baseURL}/admin/comment-del`, params)
+  }
+
+  // ============================
+  //  用户 User
+  // ============================
+
+  /** 用户 · 登录 */
+  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 POST<any>(this.ctx, `${this.baseURL}/login`, params)
+    return (data.token as string)
+  }
+
+  /** 用户 · 获取  */
+  public userGet(name: string, email: string) {
+    const ctrl = new AbortController()
+    const { signal } = ctrl
+
+    const params: any = {
+      name, email, site_name: (this.ctx.conf.site || '')
+    }
+
+    const req = Fetch(this.ctx, `${this.baseURL}/user-get`, {
+      method: 'POST',
+      body: ToFormData(params),
+      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() },
+    }
+  }
+
+  // ============================
+  //  页面 Page
+  // ============================
+
+  /** 页面 · 获取 */
+  public async pageGet(siteName?: string, offset?: number, limit?: number) {
+    const params: any = {
+      site_name: siteName || '',
+      offset: offset || 0,
+      limit: limit || 15,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/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 POST<any>(this.ctx, `${this.baseURL}/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 POST(this.ctx, `${this.baseURL}/admin/page-del`, params)
+  }
+
+  /** 页面 · 数据更新 */
+  public async pageFetch(id: number) {
+    const params: any = {
+      id,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-fetch`, params)
+    return (d.page as PageData)
+  }
+
+  // ============================
+  //  站点 Site
+  // ============================
+
+  /** 站点 · 获取 */
+  public async siteGet() {
+    const params: any = {}
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/admin/site-get`, params)
+    return (d.sites as SiteData[])
+  }
+
+  /** 站点 · 创建 */
+  public async siteAdd(name: string, urls: string) {
+    const params: any = {
+      name, urls,
+    }
+
+    const d = await POST<any>(this.ctx, `${this.baseURL}/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 POST<any>(this.ctx, `${this.baseURL}/admin/site-edit`, params)
+    return (d.site as SiteData)
+  }
+
+  /** 站点 · 删除 */
+  public siteDel(id: number, delContent = false) {
+    const params: any = { id, del_content: delContent }
+
+    return POST(this.ctx, `${this.baseURL}/admin/site-del`, params)
+  }
+
+  /** 导出 */
+  public async export() {
+    const d = await Fetch(this.ctx, `${this.baseURL}/admin/export`, { method: 'POST' }, 0)
+    return (d.data?.data || '' as string)
+  }
+
+  // ============================
+  //  杂项
+  // ============================
+
+  /** 投票 */
+  public async vote(targetID: number, type: string) {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      target_id: targetID,
+      type,
+    }
+
+    if (this.ctx.user.checkHasBasicUserInfo()) {
+      params.name = this.ctx.user.data.nick
+      params.email = this.ctx.user.data.email
+    }
+
+    const data = await POST<any>(this.ctx, `${this.baseURL}/vote`, params)
+    return (data as {up: number, down: number})
+  }
+
+  /** 已读标记 */
+  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 POST(this.ctx, `${this.baseURL}/mark-read`, params)
+  }
+
+  // ============================
+  //  验证码
+  // ============================
+
+  /** 验证码 · 获取 */
+  public async captchaGet() {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
+    return (data.img_data || '') as string
+  }
+
+  /** 验证码 · 检验 */
+  public async captchaCheck(value: string) {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
+    return (data.img_data || '') as string
+  }
+}

package/src/api/request.ts

@@ -0,0 +1,125 @@
+import Context from '../context'
+
+/** 公共请求函数 */
+export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
+  // JWT
+  if (ctx.user.data.token) {
+    const requestHeaders: HeadersInit = new Headers()
+    requestHeaders.set('Authorization', `Bearer ${ctx.user.data.token}`)
+
+    init.headers = requestHeaders
+  }
+
+  // 请求操作
+  try {
+
+    let resp: Response
+    if ((typeof timeout !== 'number' && ctx.conf.reqTimeout === 0) || timeout === 0) {
+      resp = await fetch(input, init)
+    } else {
+      // 请求超时检测
+      resp = await timeoutPromise(timeout || ctx.conf.reqTimeout || 15000, fetch(input, init))
+    }
+
+    if (!resp.ok && resp.status !== 401) throw new Error(`请求响应 ${resp.status}`)
+
+    // 解析获取响应的 json
+    let json: any = await resp.json()
+
+    // 重新发起请求
+    const recall = (resolve, reject) => {
+      Fetch(ctx, input, init).then(d => {
+        resolve(d)
+      }).catch(err => {
+        reject(err)
+      })
+    }
+
+    // 请求弹出层验证
+    if (json.data && json.data.need_captcha) {
+      // 请求需要验证码
+      json = await (new Promise<any>((resolve, reject) => {
+        ctx.trigger('checker-captcha', {
+          imgData: json.data.img_data,
+          onSuccess: () => {
+            recall(resolve, reject)
+          },
+          onCancel: () => {
+            reject(json)
+          }
+        })
+      }))
+    } else if ((json.data && json.data.need_login) || resp.status === 401) {
+      // 请求需要管理员权限
+      json = await (new Promise<any>((resolve, reject) => {
+        ctx.trigger('checker-admin', {
+          onSuccess: () => {
+            recall(resolve, reject)
+          },
+          onCancel: () => {
+            reject(json)
+          }
+        })
+      }))
+    }
+
+    if (!json.success) throw json // throw 相当于 reject(json)
+
+    return json
+
+  } catch (err) {
+    // 错误处理
+    console.error(err)
+
+    if (err instanceof TypeError)
+      throw new Error(`网络错误`)
+
+    throw err
+  }
+}
+
+/** 公共 POST 请求 */
+export async function POST<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+  const init: RequestInit = {
+    method: 'POST',
+  }
+  if (data) 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)
+}
+
+/** 对象转 FormData */
+export function ToFormData(object: {[key: string]: any}): FormData {
+  const formData = new FormData()
+  Object.keys(object).forEach(key => formData.append(key, String(object[key])))
+  return formData
+}
+
+/** 我靠，fetch 一个 timeout，都要丑陋的实现 */
+function timeoutPromise<T>(ms: number, promise: Promise<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new Error("请求超时"))
+    }, ms)
+
+    promise.then(
+      (res) => {
+        clearTimeout(timeoutId)
+        resolve(res)
+      },
+      (err) => {
+        clearTimeout(timeoutId)
+        reject(err)
+      }
+    )
+  })
+}

package/src/artalk.ts

@@ -0,0 +1,153 @@
+import './style/main.less'
+
+import Context from './context'
+import ArtalkConfig from '~/types/artalk-config'
+import defaultConf from './default-conf'
+
+import CheckerLauncher from './lib/checker'
+import Editor from './components/editor'
+import List from './components/list'
+import Sidebar from './components/sidebar'
+
+import { GetLayerWrap } from './components/layer'
+import { EventPayloadMap, Handler } from '~/types/event'
+
+/**
+ * Artalk
+ * @link https://artalk.js.org
+ */
+export default class Artalk {
+  public ctx: Context
+  public conf: ArtalkConfig
+  public $root: HTMLElement
+
+  public checkerLauncher: CheckerLauncher
+  public editor: Editor
+  public list: List
+  public sidebar: Sidebar
+
+  constructor (customConf: ArtalkConfig) {
+    // 配置
+    this.conf = { ...defaultConf, ...customConf }
+    this.conf.server = this.conf.server.replace(/\/$/, '')
+
+    // 默认 pageKey
+    if (!this.conf.pageKey) {
+      this.conf.pageKey = `${window.location.protocol}//'${window.location.host}/${window.location.pathname}`
+    }
+
+    // 装载元素
+    try {
+      const $root = document.querySelector<HTMLElement>(this.conf.el)
+      if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+      this.$root = $root
+    } catch (e) {
+      console.error(e)
+      throw new Error('Please check your Artalk `el` config.')
+    }
+
+    // Context 初始化
+    this.ctx = new Context(this.$root, this.conf)
+
+    // 界面初始化
+    this.$root.classList.add('artalk')
+    this.$root.innerHTML = ''
+    this.initDarkMode()
+
+    // 组件初始化
+    this.checkerLauncher = new CheckerLauncher(this.ctx)
+
+    // 编辑器
+    this.editor = new Editor(this.ctx)
+    this.$root.appendChild(this.editor.$el)
+
+    // 评论列表
+    this.list = new List(this.ctx)
+    this.$root.appendChild(this.list.$el)
+
+    // 侧边栏
+    this.sidebar = new Sidebar(this.ctx)
+    this.$root.appendChild(this.sidebar.$el)
+
+    // 评论获取
+    this.list.reqComments()
+
+    // 事件绑定初始化
+    this.initEventBind()
+  }
+
+  /** 事件绑定 · 初始化 */
+  private initEventBind() {
+    // 锚点快速跳转评论
+    window.addEventListener('hashchange', () => {
+      this.list.checkGoToCommentByUrlHash()
+    })
+
+    // 仅管理员显示控制
+    this.ctx.on('check-admin-show-el', () => {
+      const items: HTMLElement[] = []
+
+      this.$root.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      // for layer
+      const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
+      if ($layerWrap)
+        $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      items.forEach(($item: HTMLElement) => {
+        if (this.ctx.user.data.isAdmin)
+          $item.classList.remove('atk-hide')
+        else
+          $item.classList.add('atk-hide')
+      })
+    })
+
+    // 本地用户数据变更
+    this.ctx.on('user-changed', () => {
+      this.ctx.trigger('check-admin-show-el')
+      this.ctx.trigger('list-refresh-ui')
+    })
+  }
+
+  /** 暗黑模式 · 初始化 */
+  public initDarkMode() {
+    const darkModeClassName = 'atk-dark-mode'
+
+    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 setDarkMode(darkMode: boolean) {
+    this.ctx.conf.darkMode = darkMode
+    this.initDarkMode()
+  }
+
+  /** 监听事件 */
+  public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.ctx.on(name, handler, 'external')
+  }
+
+  /** 解除监听事件 */
+  public off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
+    this.ctx.off(name, handler, 'external')
+  }
+
+  /** 触发事件 */
+  public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
+    this.ctx.trigger(name, payload, 'external')
+  }
+}

package/src/components/_component.ts.txt

@@ -0,0 +1,10 @@
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import * as Ui from '@/lib/ui'
+
+export default class Example extends Component {
+  constructor(ctx: Context) {
+    super(ctx)
+  }
+}