artalk 2.2.12 → 2.3.2

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

@@ -1,4 +1,4 @@
-import Context from '../context'
+import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
@@ -40,19 +40,19 @@ export default class Layer extends Component {
     this.$wrap.append(this.$el)
   }
 
-  getName () {
+  getName() {
     return this.name
   }
 
-  getWrapEl () {
+  getWrapEl() {
     return this.$wrap
   }
 
-  getEl () {
+  getEl() {
     return this.$el
   }
 
-  show () {
+  show() {
     this.fireAllActionTimer()
 
     this.$wrap.style.display = 'block'
@@ -126,7 +126,7 @@ export default class Layer extends Component {
   }
 
   /** 销毁 - 无动画 */
-  disposeNow () {
+  disposeNow() {
     this.$el.remove()
     this.pageBodyScrollBarShow()
     // this.$el dispose
@@ -134,21 +134,21 @@ export default class Layer extends Component {
   }
 
   /** 销毁 */
-  dispose () {
+  dispose() {
     this.hide()
     this.$el.remove()
     // this.$el dispose
     this.checkCleanLayer()
   }
 
-  checkCleanLayer () {
+  checkCleanLayer() {
     if (this.getWrapEl().querySelectorAll('.atk-layer-item').length === 0) {
       this.$wrap.style.display = 'none'
     }
   }
 }
 
-export function GetLayerWrap (ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
+export function GetLayerWrap(ctx: Context): { $wrap: HTMLElement, $mask: HTMLElement } {
   let $wrap = document.querySelector<HTMLElement>(`.atk-layer-wrap#ctx-${ctx.cid}`)
   if (!$wrap) {
     $wrap = Utils.createElement(

package/src/{components → layer}/sidebar-layer.ts

@@ -1,13 +1,15 @@
 import '../style/sidebar-layer.less'
 
-import Context from '@/context'
+import Context from '~/types/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
 import * as Ui from '@/lib/ui'
-import { SidebarShowPayload } from '~/types/event'
-import SidebarHTML from './html/sidebar-layer.html?raw'
+import SidebarHTML from './sidebar-layer.html?raw'
 import Layer from './layer'
-import Api from '../api'
+
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'
+}
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -29,15 +31,13 @@ export default class SidebarLayer extends Component {
     }
 
     // event
-    this.ctx.on('sidebar-show', (conf) => (this.show(conf || {})))
-    this.ctx.on('sidebar-hide', () => (this.hide()))
     this.ctx.on('user-changed', () => { this.firstShow = true })
   }
 
   private firstShow = true
 
   /** 显示 */
-  public async show(conf: SidebarShowPayload) {
+  public async show(conf: SidebarShowPayload = {}) {
     this.$el.style.transform = '' // 动画清除，防止二次打开失效
 
     // 获取 Layer
@@ -46,7 +46,7 @@ export default class SidebarLayer extends Component {
       this.layer.afterHide = () => {
         // 防止评论框被吞
         if (this.ctx.conf.editorTravel === true) {
-          this.ctx.trigger('editor-travel-back')
+          this.ctx.editorTravelBack()
         }
       }
     }
@@ -62,12 +62,12 @@ export default class SidebarLayer extends Component {
 
     // 管理员身份验证 (若身份失效，弹出验证窗口)
     ;(async () => {
-      const resp = await new Api(this.ctx).loginStatus()
+      const resp = await this.ctx.getApi().loginStatus()
       if (resp.is_admin && !resp.is_login) {
         this.layer?.hide()
         this.firstShow = true
 
-        this.ctx.trigger('checker-admin', {
+        this.ctx.checkAdmin({
           onSuccess: () => {
             setTimeout(() => {
               this.show(conf)
@@ -79,7 +79,7 @@ export default class SidebarLayer extends Component {
     })()
 
     // 清空 unread
-    this.ctx.trigger('unread-update', { notifies: [] })
+    this.ctx.updateNotifies([])
 
     // 第一次加载
     if (this.firstShow) {
@@ -87,7 +87,7 @@ export default class SidebarLayer extends Component {
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
       // 准备 Iframe 参数
-      const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
+      const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
         : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
 
       const query: any = {
@@ -115,6 +115,8 @@ export default class SidebarLayer extends Component {
       if (!this.conf.darkMode && isIframeSrcDarkMode)
         this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
     }
+
+    this.ctx.trigger('sidebar-show')
   }
 
   /** 隐藏 */
@@ -123,9 +125,11 @@ export default class SidebarLayer extends Component {
     this.$el.style.transform = ''
 
     this.layer?.hide()
+
+    this.ctx.trigger('sidebar-hide')
   }
 
-  public iframeLoad(src: string) {
+  private iframeLoad(src: string) {
     if (!this.$iframe) return
 
     this.$iframe.src = src
@@ -135,39 +139,5 @@ export default class SidebarLayer extends Component {
     this.$iframe.onload = () => {
       Ui.hideLoading(this.$iframeWrap)
     }
-
-    // this.checkReqStatus(src) // 判不准，删了，没啥用
-  }
-
-  loadingTimer: number|null = null
-
-  // 测试可访问性 (由于 iframe 测不准，需要额外请求)
-  public async checkReqStatus(url: string) {
-    if (this.loadingTimer !== null) window.clearTimeout(this.loadingTimer)
-
-    this.loadingTimer = window.setTimeout(async () => {
-      try {
-        await fetch(url)
-      } catch (err) {
-        console.log(err)
-        // 请求失败，显示错误提示
-        const $errAlert = Utils.createElement(
-          `<div class="atk-err-alert">` +
-          `  <div class="atk-title">侧边栏似乎打开失败</div>` +
-          `  <div class="atk-text"><span id="AtkReload">重新加载</span> / <span id="AtkCancel">取消</span></div>` +
-          `</div>`
-        )
-        const $reloadBtn = $errAlert.querySelector<HTMLElement>('#AtkReload')!
-        const $cancelBtn = $errAlert.querySelector<HTMLElement>('#AtkCancel')!
-        $reloadBtn.onclick = () => {
-          this.iframeLoad(url)
-          $errAlert.remove()
-        }
-        $cancelBtn.onclick = () => { // 提供取消按钮，防止误判
-          $errAlert.remove()
-        }
-        this.$iframeWrap.append($errAlert)
-      }
-    }, 2000) // 2s 后开始检测
   }
 }

package/src/lib/checker/admin-checker.ts

@@ -1,4 +1,3 @@
-import Api from '@/api'
 import * as Utils from '../utils'
 import { Checker } from '.'
 
@@ -12,19 +11,20 @@ const AdminChecker: Checker = {
       password: inputVal
     }
 
-    return new Api(that.ctx).login(data.name, data.email, data.password)
+    return that.ctx.getApi().login(data.name, data.email, data.password)
   },
 
   body(that, ctx) {
-    return Utils.createElement('<span>敲入密码来验证管理员身份：</span>')
+    return Utils.createElement(`<span>${that.ctx.$t('adminCheck')}</span>`)
   },
 
   onSuccess(that, ctx, userToken, inputVal, formEl) {
-    that.ctx.user.data.isAdmin = true
-    that.ctx.user.data.token = userToken
-    that.ctx.user.save()
+    that.ctx.user.update({
+      isAdmin: true,
+      token: userToken
+    })
     that.ctx.trigger('user-changed', that.ctx.user.data)
-    that.ctx.trigger('list-reload')
+    that.ctx.listReload()
   },
 
   onError(that, ctx, err, inputVal, formEl) {}

package/src/lib/checker/captcha-checker.ts

@@ -1,11 +1,10 @@
-import Api from '@/api'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
 import { Checker } from '.'
 
 const CaptchaChecker: Checker = {
   request(that, ctx, inputVal) {
-    return new Api(that.ctx).captchaCheck(inputVal)
+    return that.ctx.getApi().captchaCheck(inputVal)
   },
 
   body(that, ctx) {
@@ -35,7 +34,7 @@ const CaptchaChecker: Checker = {
         if (stop) return
         let isPass = false
         try {
-          const resp = await new Api(that.ctx).captchaStatus()
+          const resp = await that.ctx.getApi().captchaStatus()
           isPass = resp.is_pass
         } catch { isPass = false }
         if (isPass) {
@@ -55,18 +54,18 @@ const CaptchaChecker: Checker = {
 
     // 图片验证方式
     const elem = Utils.createElement(
-      `<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ''}" alt="验证码">敲入验证码继续：</span>`
+      `<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ''}">${that.ctx.$t('captchaCheck')}</span>`
     );
 
     // 刷新验证码
     elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
       const imgEl = elem.querySelector('.atk-captcha-img')
-      new Api(that.ctx).captchaGet()
+      that.ctx.getApi().captchaGet()
         .then((imgData) => {
           imgEl!.setAttribute('src', imgData)
         })
         .catch((err) => {
-          console.error('验证码获取失败 ', err)
+          console.error('Failed to get captcha image ', err)
         })
     }
     return elem

package/src/lib/checker/index.ts

@@ -1,12 +1,22 @@
-import Context from '@/context'
-import Layer from '@/components/layer'
+import Context from '~/types/context'
 import Dialog from '@/components/dialog'
-import { CheckerPayload } from '~/types/event'
+import Layer from '@/layer'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
 import CaptchaChecker from './captcha-checker'
 import AdminChecker from './admin-checker'
 
+export interface CheckerCaptchaPayload extends CheckerPayload {
+  imgData?: string
+  iframe?: string
+}
+
+export interface CheckerPayload {
+  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
+  onMount?: (dialogEl: HTMLElement) => void
+  onCancel?: () => void
+}
+
 /**
  * Checker 发射台
  */
@@ -18,22 +28,17 @@ export default class CheckerLauncher {
 
   constructor(ctx: Context) {
     this.ctx = ctx
-
-    this.initEventBind()
   }
 
-  /** 初始化事件绑定 */
-  public initEventBind() {
-    this.ctx.on('checker-captcha', (conf) => {
-      if (conf.imgData) this.captchaConf.imgData = conf.imgData
-      if (conf.iframe) this.captchaConf.iframe = conf.iframe
+  public checkCaptcha(payload: CheckerCaptchaPayload) {
+    this.captchaConf.imgData = payload.imgData
+    this.captchaConf.iframe = payload.iframe
 
-      this.fire(CaptchaChecker, conf)
-    })
+    this.fire(CaptchaChecker, payload)
+  }
 
-    this.ctx.on('checker-admin', (conf) => {
-      this.fire(AdminChecker, conf)
-    })
+  public checkAdmin(payload: CheckerPayload) {
+    this.fire(AdminChecker, payload)
   }
 
   public fire(checker: Checker, payload: CheckerPayload) {
@@ -87,7 +92,7 @@ export default class CheckerLauncher {
     }
 
     let btnTextOrg: string | undefined
-    const dialog = new Dialog(formEl)
+    const dialog = new Dialog(this.ctx, formEl)
 
     // 确认按钮
     dialog.setYes((btnEl) => {
@@ -104,7 +109,7 @@ export default class CheckerLauncher {
         btnEl.classList.remove('error')
       }
 
-      btnEl.innerText = '加载中...'
+      btnEl.innerText = `${this.ctx.$t('loading')}...`
 
       // 发送请求
       checker

package/src/lib/component.ts

@@ -1,7 +1,8 @@
 import ArtalkConfig from '~/types/artalk-config'
-import Context from '../context'
+import Context from '~/types/context'
+import { I18n } from '../i18n'
 
-export default class Component {
+export default abstract class Component {
   public $el!: HTMLElement
 
   public ctx: Context
@@ -11,4 +12,8 @@ export default class Component {
     this.ctx = ctx
     this.conf = ctx.conf
   }
+
+  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
+    return this.ctx.$t(key, args)
+  }
 }

package/src/lib/stat.ts

@@ -0,0 +1,63 @@
+import ContextApi from '~/types/context'
+import ArtalkPlug from '~/types/plug'
+
+export interface CountConf {
+  ctx: ContextApi
+
+  /** 是否增加当前页面 PV 数 */
+  pvAdd?: boolean
+}
+
+export const PvCountWidget: ArtalkPlug = (ctx: ContextApi) => {
+  initCountWidget({ ctx, pvAdd: true })
+}
+
+/** 初始化评论数和 PV 数量展示元素 */
+export async function initCountWidget(p: CountConf) {
+  // 评论数
+  const countEl = p.ctx.conf.countEl
+  if (countEl && document.querySelector(countEl)) {
+    handleStatCount(p, { api: 'page_comment', countEl })
+  }
+
+  // PV
+  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().pv() : undefined
+  const pvEl = p.ctx.conf.pvEl
+  if (pvEl && document.querySelector(pvEl)) {
+    handleStatCount(p, {
+      api: 'page_pv',
+      countEl: pvEl,
+      curtPageCount: curtPagePvNum,
+    })
+  }
+}
+
+export async function handleStatCount(
+  p: CountConf,
+  args: {
+    api: 'page_pv' | 'page_comment'
+    countEl: string
+    curtPageCount?: number
+  }
+) {
+  let pageCounts: { [key: string]: number } = {}
+
+  // 当前页面的统计数
+  const curtPageKey = p.ctx.conf.pageKey
+  if (args.curtPageCount) pageCounts[curtPageKey] = args.curtPageCount
+
+  // 查询其他页面的统计数
+  let queryPageKeys = Array.from(document.querySelectorAll(args.countEl))
+    .map((e) => e.getAttribute('data-page-key') || curtPageKey)
+    .filter((pageKey) => pageCounts[pageKey] === undefined)
+  queryPageKeys = [...new Set(queryPageKeys)] // 去重
+  if (queryPageKeys.length > 0) {
+    const counts: any = await p.ctx.getApi().stat(args.api, queryPageKeys)
+    pageCounts = { ...pageCounts, ...counts }
+  }
+
+  document.querySelectorAll(args.countEl).forEach((el) => {
+    const pageKey = el.getAttribute('data-page-key') || curtPageKey
+    el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`
+  })
+}

package/src/lib/ui.ts

@@ -1,11 +1,9 @@
 import * as Utils from './utils'
-import Context from '../context'
 
 /** 显示加载 */
-export function showLoading(parentElem: HTMLElement|Context, conf?: { transparentBg?: boolean }) {
-  if (parentElem instanceof Context) parentElem = parentElem.$root
-
-  let $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
+export function showLoading(parentElem: HTMLElement, conf?: { transparentBg?: boolean }) {
+  // Use :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
+  let $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
   if (!$loading) {
     $loading = Utils.createElement(
     `<div class="atk-loading atk-fade-in" style="display: none;">
@@ -29,10 +27,8 @@ export function showLoading(parentElem: HTMLElement|Context, conf?: { transparen
 }
 
 /** 隐藏加载 */
-export function hideLoading(parentElem: HTMLElement|Context) {
-  if (parentElem instanceof Context) parentElem = parentElem.$root
-
-  const $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
+export function hideLoading(parentElem: HTMLElement) {
+  const $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
   if ($loading) $loading.style.display = 'none'
 }
 
@@ -133,9 +129,7 @@ export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
 }
 
 /** 设置全局错误 */
-export function setError(parentElem: HTMLElement|Context, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
-  if (parentElem instanceof Context) parentElem = parentElem.$root
-
+export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
   let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
   if (html === null) {
     if (elem !== null) elem.remove()

package/src/lib/user.ts

@@ -1,9 +1,13 @@
 import ArtalkConfig, { LocalUser } from "~/types/artalk-config"
+import Context from '~/types/context'
 
 export default class User {
+  public ctx: Context
   public data: LocalUser
 
-  constructor (conf: ArtalkConfig) {
+  public constructor(ctx: Context) {
+    this.ctx = ctx
+
     // 从 localStorage 导入
     const localUser = JSON.parse(window.localStorage.getItem('ArtalkUser') || '{}')
     this.data = {
@@ -16,12 +20,25 @@ export default class User {
   }
 
   /** 保存用户到 localStorage 中 */
-  public save () {
+  public update(obj: Partial<LocalUser> = {}) {
+    Object.entries(obj).forEach(([key, value]) => {
+      this.data[key] = value
+    })
+
     window.localStorage.setItem('ArtalkUser', JSON.stringify(this.data))
+    this.ctx.trigger('user-changed', this.ctx.user.data)
+  }
+
+  /** 注销，清除用户登录状态 */
+  public logout() {
+    this.update({
+      token: '',
+      isAdmin: false
+    })
   }
 
   /** 是否已填写基本用户信息 */
-  public checkHasBasicUserInfo () {
+  public checkHasBasicUserInfo() {
     return !!this.data.nick && !!this.data.email
   }
 }

package/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { marked as libMarked } from 'marked'
 import insane from 'insane'
 import hanabi from 'hanabi'
-import Context from '../context'
+import Context from '~/types/context'
 
 export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
   const div = document.createElement('div')
@@ -58,7 +58,7 @@ export function dateFormat(date: Date) {
   return `${vYear}-${vMonth}-${vDay}`
 }
 
-export function timeAgo(date: Date) {
+export function timeAgo(date: Date, ctx: Context) {
   try {
     const oldTime = date.getTime()
     const currTime = new Date().getTime()
@@ -77,16 +77,16 @@ export function timeAgo(date: Date) {
           // 计算相差秒数
           const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
           const seconds = Math.round(leave3 / 1000)
-          return `${seconds} 秒前`
+          return `${seconds} ${ctx.$t('seconds')}`
         }
-        return `${minutes} 分钟前`
+        return `${minutes} ${ctx.$t('minutes')}`
       }
-      return `${hours} 小时前`
+      return `${hours} ${ctx.$t('hours')}`
     }
-    if (days < 0) return '刚刚'
+    if (days < 0) return ctx.$t('now')
 
     if (days < 8) {
-      return `${days} 天前`
+      return `${days} ${ctx.$t('days')}`
     }
 
     return dateFormat(date)
@@ -118,7 +118,7 @@ export function onImagesLoaded($container: HTMLElement, event: Function) {
 }
 
 export function getGravatarURL(ctx: Context, emailMD5: string) {
-  return `${(ctx.conf.gravatar?.mirror || '').replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar?.default || '')}&s=80`
+  return `${(ctx.conf.gravatar.mirror).replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar.default)}&s=80`
 }
 
 export function sleep(ms: number) {
@@ -142,6 +142,8 @@ export function versionCompare(a: string, b: string) {
 
 /** 初始化 marked */
 export function initMarked(ctx: Context) {
+  try { if (!libMarked.name) return } catch { return }
+
   const renderer = new libMarked.Renderer()
   const orgLinkRenderer = renderer.link
   renderer.link = (href, title, text) => {
@@ -186,9 +188,21 @@ export function initMarked(ctx: Context) {
 
 /** 解析 markdown */
 export function marked(ctx: Context, src: string): string {
+  let markedContent = ctx.markedInstance?.parse(src)
+  if (!markedContent) {
+    // 无 Markdown 模式简单处理
+    markedContent = src
+      // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${hanabi(code)}</code></pre>`)
+      // .replace(/`([^`]+?)`/g, '<code>$1</code>')
+      .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
+      .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
+      .replace(/\n/g, '<br>')
+  }
+
   // @link https://github.com/markedjs/marked/discussions/1232
   // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  let dest = insane(ctx.markedInstance.parse(src), {
+  let dest = insane(markedContent, {
     allowedClasses: {},
     allowedSchemes: ['http', 'https', 'mailto'],
     allowedTags: [

package/src/list/index.ts

@@ -0,0 +1,3 @@
+import List from './list'
+
+export default List