artalk 2.1.7 → 2.2.0

package/src/lib/checker/index.ts

@@ -14,8 +14,7 @@ export default class CheckerLauncher {
   public ctx: Context
 
   public launched: Checker[] = []
-  public submitCaptchaVal?: string
-  public submitCaptchaImgData?: string
+  public captchaConf: { val?: string, imgData?: string, iframe?: string } = {}
 
   constructor(ctx: Context) {
     this.ctx = ctx
@@ -26,9 +25,9 @@ export default class CheckerLauncher {
   /** 初始化事件绑定 */
   public initEventBind() {
     this.ctx.on('checker-captcha', (conf) => {
-      if (conf.imgData) {
-        this.submitCaptchaImgData = conf.imgData
-      }
+      if (conf.imgData) this.captchaConf.imgData = conf.imgData
+      if (conf.iframe) this.captchaConf.iframe = conf.iframe
+
       this.fire(CaptchaChecker, conf)
     })
 
@@ -41,20 +40,42 @@ export default class CheckerLauncher {
     if (this.launched.includes(checker)) return // 阻止同时 fire 相同的 checker
     this.launched.push(checker)
 
+    // 创建层
     const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`)
     layer.setMaskClickHide(false)
     layer.show()
 
+    // Checker 的上下文
+    let hideInteractInput = false
+    const checkerCtx: CheckerCtx = {
+      getLayer: () => layer,
+      hideInteractInput: () => {
+        hideInteractInput = true
+      },
+      triggerSuccess: () => {
+        this.close(checker, layer)
+        if (checker.onSuccess) checker.onSuccess(this, checkerCtx, "", "", formEl)
+        if (payload.onSuccess) payload.onSuccess("", dialog.$el)
+      },
+      cancel: () => {
+        this.close(checker, layer)
+        if (payload.onCancel) payload.onCancel()
+      }
+    }
+
+    // 创建表单
     const formEl = Utils.createElement()
-    formEl.appendChild(checker.body(this))
+    formEl.appendChild(checker.body(this, checkerCtx))
 
-    const input = Utils.createElement<HTMLInputElement>(
+    // 输入框
+    const $input = Utils.createElement<HTMLInputElement>(
       `<input id="check" type="${checker.inputType || 'text'}" autocomplete="off" required placeholder="">`
     )
-    formEl.appendChild(input)
-    setTimeout(() => input.focus(), 80) // 延迟 Focus
+    formEl.appendChild($input)
+    setTimeout(() => $input.focus(), 80) // 延迟 Focus
 
-    input.onkeyup = (evt) => {
+    // 绑定键盘事件
+    $input.onkeyup = (evt) => {
       if (evt.key === 'Enter' || evt.keyCode === 13) {
         // 按下回车键
         evt.preventDefault()
@@ -70,7 +91,9 @@ export default class CheckerLauncher {
 
     // 确认按钮
     dialog.setYes((btnEl) => {
-      const inputVal = input.value.trim()
+      const inputVal = $input.value.trim()
+
+      // 按钮操作
       if (!btnTextOrg) btnTextOrg = btnEl.innerText
       const btnTextSet = (btnText: string) => {
         btnEl.innerText = btnText
@@ -83,21 +106,25 @@ export default class CheckerLauncher {
 
       btnEl.innerText = '加载中...'
 
+      // 发送请求
       checker
-        .request(this, inputVal)
+        .request(this, checkerCtx, inputVal)
         .then((data) => {
           // 请求成功
-          this.done(checker, layer)
-          if (checker.onSuccess) checker.onSuccess(this, data, inputVal, formEl)
+          this.close(checker, layer)
+
+          if (checker.onSuccess) checker.onSuccess(this, checkerCtx, data, inputVal, formEl)
           if (payload.onSuccess) payload.onSuccess(inputVal, dialog.$el)
         })
         .catch((err) => {
           // 请求失败
           btnTextSet(String(err.msg || String(err)))
-          if (checker.onError) checker.onError(this, err, inputVal, formEl)
 
+          if (checker.onError) checker.onError(this, checkerCtx, err, inputVal, formEl)
+
+          // 错误显示 3s 后恢复按钮
           const tf = setTimeout(() => btnTextRestore(), 3000)
-          input.onfocus = () => {
+          $input.onfocus = () => {
             btnTextRestore()
             clearTimeout(tf)
           }
@@ -108,17 +135,25 @@ export default class CheckerLauncher {
 
     // 取消按钮
     dialog.setNo(() => {
-      this.done(checker, layer)
+      this.close(checker, layer)
       if (payload.onCancel) payload.onCancel()
       return false
     })
 
+    if (hideInteractInput) {
+      $input.style.display = 'none'
+      dialog.$el.querySelector<HTMLElement>('.atk-layer-dialog-actions')!.style.display = 'none'
+    }
+
+    // 层装载 dialog 元素
     layer.getEl().append(dialog.$el)
 
-    if (payload.onMount) payload.onMount(dialog.$el) // onMount
+    // onMount 回调
+    if (payload.onMount) payload.onMount(dialog.$el)
   }
 
-  private done(checker: Checker, layer: Layer) {
+  // 关闭 checker 对话框
+  private close(checker: Checker, layer: Layer) {
     layer.disposeNow()
     this.launched = this.launched.filter(c => c !== checker)
   }
@@ -127,8 +162,15 @@ export default class CheckerLauncher {
 export interface Checker {
   el?: HTMLElement
   inputType?: 'password' | 'text'
-  body: (launcher: CheckerLauncher) => HTMLElement
-  request: (launcher: CheckerLauncher, inputVal: string) => Promise<string>
-  onSuccess?: (launcher: CheckerLauncher, data: string, inputVal: string, formEl: HTMLElement) => void
-  onError?: (launcher: CheckerLauncher, err: any, inputVal: string, formEl: HTMLElement) => void
+  body: (launcher: CheckerLauncher, ctx: CheckerCtx) => HTMLElement
+  request: (launcher: CheckerLauncher, ctx: CheckerCtx, inputVal: string) => Promise<string>
+  onSuccess?: (launcher: CheckerLauncher, ctx: CheckerCtx, data: string, inputVal: string, formEl: HTMLElement) => void
+  onError?: (launcher: CheckerLauncher, ctx: CheckerCtx, err: any, inputVal: string, formEl: HTMLElement) => void
+}
+
+export interface CheckerCtx {
+  getLayer(): Layer
+  hideInteractInput(): void
+  triggerSuccess(): void
+  cancel(): void
 }

package/src/lib/ui.ts

@@ -2,7 +2,7 @@ import * as Utils from './utils'
 import Context from '../context'
 
 /** 显示加载 */
-export function showLoading(parentElem: HTMLElement|Context) {
+export function showLoading(parentElem: HTMLElement|Context, conf?: { transparentBg?: boolean }) {
   if (parentElem instanceof Context) parentElem = parentElem.$root
 
   let $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
@@ -13,6 +13,7 @@ export function showLoading(parentElem: HTMLElement|Context) {
         <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
       </div>
     </div>`)
+    if (conf?.transparentBg) $loading.style.background = 'transparent'
     parentElem.appendChild($loading)
   }
   $loading.style.display = ''

package/src/lib/utils.ts

@@ -140,43 +140,44 @@ export function versionCompare(a: string, b: string) {
   return 0
 }
 
-let markedInstance: typeof libMarked
-export function marked(ctx: Context, src: string): string {
-  if (!markedInstance) {
-    const renderer = new libMarked.Renderer()
-    const linkRenderer = renderer.link
-    renderer.link = (href, title, text) => {
-      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer as any, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-    }
-
-    // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-    const nMarked = libMarked
-    libMarked.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane(html, {
-        ...insane.defaults,
-        allowedAttributes: {
-          ...insane.defaults.allowedAttributes,
-          img: ['src', 'atk-emoticon']
-        },
-      }),
-      silent: true,
-    })
-
-    markedInstance = nMarked
+/** 初始化 marked */
+export function initMarked(ctx: Context) {
+  const renderer = new libMarked.Renderer()
+  const linkRenderer = renderer.link
+  renderer.link = (href, title, text) => {
+    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = linkRenderer.call(renderer as any, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
-  return markedInstance.parse(src)
+  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
+  const nMarked = libMarked
+  libMarked.setOptions({
+    renderer,
+    highlight: (code) => hanabi(code),
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: true,
+    sanitizer: (html) => insane(html, {
+      ...insane.defaults,
+      allowedAttributes: {
+        ...insane.defaults.allowedAttributes,
+        img: ['src', 'atk-emoticon']
+      },
+    }),
+    silent: true,
+  })
+
+  ctx.markedInstance = nMarked
+}
+
+/** 解析 markdown */
+export function marked(ctx: Context, src: string): string {
+  return ctx.markedInstance.parse(src)
 }
 
 /** 获取修正后的 UserAgent */
@@ -203,3 +204,23 @@ export async function getCorrectUserAgent() {
 
   return uaRaw
 }
+
+/** 是否为完整的 URL */
+export function isValidURL(urlRaw: string) {
+  // @link https://www.rfc-editor.org/rfc/rfc3986
+  let url: URL
+  try {
+    url = new URL(urlRaw)
+  } catch (_) { return false }
+  return url.protocol === "http:" || url.protocol === "https:"
+}
+
+/** 获取基于 conf.server 的 URL */
+export function getURLBasedOnApi(ctx: Context, path: string) {
+  return `${ctx.conf.server.replace(/\/api\/?$/, '')}/${path.replace(/^\//, '')}`
+}
+
+/** 获取基于某个 baseURL 的 URL */
+export function getURLBasedOn(baseURL: string, path: string) {
+  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
+}

package/src/style/comment.less

@@ -212,6 +212,8 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
+        margin-bottom: -15px;
 
         & > span {
           color: var(--at-color-meta);
@@ -220,6 +222,7 @@
           display: inline-flex;
           cursor: pointer;
           user-select: none;
+          margin-bottom: 15px;
 
           &.atk-error, &.atk-error:hover {
             color: var(--at-color-red);

package/src/style/list.less

@@ -19,9 +19,9 @@
       .atk-arrow-down-icon {
         cursor: pointer;
         vertical-align: middle;
-        border-top: 6px solid var(--at-color-grey);
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
+        border-top: 5px solid var(--at-color-grey);
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
         margin-top: -1px;
         margin-left: 0.4rem;
         display: inline-block;
@@ -127,7 +127,10 @@
   & > .atk-list-body {
     min-height: 150px;
 
-    & > .atk-list-comments-wrap {
+    .atk-list-comments-wrap {
+      .atk-main-editor {
+        margin-top: -1px;
+      }
     }
   }
 

package/src/style/main.less

@@ -303,6 +303,41 @@ i.atk-icon {
         }
       }
     }
+
+    .atk-checker-iframe-wrap {
+      position: fixed;
+      z-index: 999998;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      width: 100vw;
+
+      & > iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+
+      .atk-close-btn {
+        z-index: 999999;
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        display: flex;
+        flex-direction: column;
+        width: 50px;
+        height: 50px;
+        align-items: center;
+        place-content: center;
+        cursor: pointer;
+        user-select: none;
+        margin-left: 10px;
+
+        &:hover .atk-icon-close {
+          background-color: rgba(232, 17, 35, 0.9);
+        }
+      }
+    }
   }
 }
 

package/tsconfig.json

@@ -1,23 +1,8 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "lib": ["esnext", "dom"],
-    "moduleResolution": "node",
-    "strict": true,
-    "sourceMap": true,
-    "experimentalDecorators": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]

package/types/artalk-config.d.ts

@@ -80,6 +80,12 @@ export default interface ArtalkConfig {
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 
+  /** 评论列表排序功能 (显示 Dropdown) */
+  listSort?: boolean
+
+  /** 图片上传功能 */
+  imgUpload?: boolean
+
   /** 版本检测 */
   versionCheck?: boolean
 }

package/types/artalk-data.d.ts

@@ -87,6 +87,9 @@ export interface ListData {
 
   /** API 版本 */
   api_version: ApiVersionData
+
+  /** 后端配置 */
+  conf: any // TODO
 }
 
 export interface PageData {

package/types/event.d.ts

@@ -8,6 +8,7 @@ export interface EventPayloadMap {
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
+  'conf-updated': undefined        // Artalk 配置变更时
 
   // List 操作（外部：不建议 listen，仅 trigger）
   'list-reload': undefined         // 重新加载 List
@@ -54,6 +55,7 @@ export interface NotifyConf {
 
 export interface CheckerCaptchaPayload extends CheckerPayload {
   imgData?: string
+  iframe?: string
 }
 
 export interface UnreadUpdatePayload {

package/types/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />