artalk 2.1.9 → 2.2.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "artalk",
-  "version": "2.1.9",
-  "license": "GPL-3.0",
+  "version": "2.2.0",
+  "backendMinVersion": "2.1.1",
+  "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",

package/src/api/index.ts

@@ -117,6 +117,12 @@ export default class Api {
     }
   }
 
+  /** 用户 · 登录状态 */
+  public async loginStatus() {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/login-status`)
+    return (data || { is_login: false }) as { is_login: boolean }
+  }
+
   // ============================
   //  页面 Page
   // ============================
@@ -302,4 +308,10 @@ export default class Api {
     const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
     return (data.img_data || '') as string
   }
+
+  /** 验证码 · 状态 */
+  public async captchaStatus() {
+    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/status`)
+    return (data || { is_pass: false }) as { is_pass: boolean }
+  }
 }

package/src/api/request.ts

@@ -43,6 +43,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
       json = await (new Promise<any>((resolve, reject) => {
         ctx.trigger('checker-captcha', {
           imgData: json.data.img_data,
+          iframe: json.data.iframe,
           onSuccess: () => {
             recall(resolve, reject)
           },

package/src/components/layer.ts

@@ -65,12 +65,7 @@ export default class Layer extends Component {
     }
 
     // body style 禁止滚动 + 防抖
-    this.bodyStyleOrgOverflow = document.body.style.overflow
-    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight
-    document.body.style.overflow = 'hidden'
-
-    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
-    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
+    this.pageBodyScrollBarHide()
   }
 
   hide () {
@@ -81,8 +76,7 @@ export default class Layer extends Component {
     this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
       // body style 禁止滚动解除
-      document.body.style.overflow = this.bodyStyleOrgOverflow
-      document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
+      this.pageBodyScrollBarShow()
       this.checkCleanLayer()
     }, 450)
     this.newActionTimer(() => {
@@ -95,6 +89,22 @@ export default class Layer extends Component {
     this.maskClickHideEnable = enable
   }
 
+  // 页面滚动条隐藏
+  pageBodyScrollBarHide() {
+    this.bodyStyleOrgOverflow = document.body.style.overflow
+    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight
+    document.body.style.overflow = 'hidden'
+
+    const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
+    document.body.style.paddingRight = `${Ui.getScrollBarWidth() + bpr || 0}px`
+  }
+
+  // 页面滚动条显示
+  pageBodyScrollBarShow() {
+    document.body.style.overflow = this.bodyStyleOrgOverflow
+    document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
+  }
+
   // Timers
   private static actionTimers: {act: Function, tid: number}[] = []
 
@@ -120,6 +130,7 @@ export default class Layer extends Component {
   disposeNow () {
     document.body.style.overflow = ''
     this.$el.remove()
+    this.pageBodyScrollBarShow()
     // this.$el dispose
     this.checkCleanLayer()
   }

package/src/components/list-lite.ts

@@ -7,6 +7,7 @@ import Comment from './comment'
 import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
+import { backendMinVersion } from '../../package.json'
 
 export default class ListLite extends Component {
   protected $commentsWrap: HTMLElement
@@ -117,7 +118,9 @@ export default class ListLite extends Component {
     this.data = data
 
     // 版本检测
-    if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version)) return
+    const feMinVersion = data.api_version?.fe_min_version || '0.0.0'
+    if (this.ctx.conf.versionCheck && this.versionCheck('前端', feMinVersion, ARTALK_VERSION)) return
+    if (this.ctx.conf.versionCheck && this.versionCheck('后端', backendMinVersion, data.api_version?.version)) return
 
     // 图片上传功能
     if (data.conf && typeof data.conf.img_upload === "boolean") {
@@ -472,26 +475,25 @@ export default class ListLite extends Component {
     }
   }
 
-  /** 前端版本检测 */
-  public versionCheck(versionData: ApiVersionData): boolean {
-    const needVersion = versionData?.fe_min_version || '0.0.0'
-    const needUpdate = Utils.versionCompare(needVersion, ARTALK_VERSION) === 1
+  /** 版本检测 */
+  public versionCheck(name: '前端'|'后端', needVersion: string, curtVersion: string): boolean {
+    const needUpdate = Utils.versionCompare(needVersion, curtVersion) === 1
     if (needUpdate) {
       // 需要更新
-      const errEl = Utils.createElement(`<div>前端 Artalk 版本已过时，请更新以获得完整体验<br/>`
-      + `若您是站点管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获取帮助`
+      const errEl = Utils.createElement(`<div>Artalk ${name}版本已过时，请更新以获得完整体验<br/>`
+      + `如果你是管理员，请前往 “<a href="https://artalk.js.org/" target="_blank">官方文档</a>” 获得帮助`
       + `<br/><br/>`
-      + `<span style="color: var(--at-color-meta);">前端版本 ${ARTALK_VERSION}，需求版本 >= ${needVersion}</span><br/><br/>`
+      + `<span style="color: var(--at-color-meta);">当前${name}版本 ${curtVersion}，需求版本 >= ${needVersion}</span><br/><br/>`
       + `</div>`)
       const ignoreBtn = Utils.createElement('<span style="cursor:pointer;">忽略</span>')
       ignoreBtn.onclick = () => {
-        Ui.setError(this.ctx, null)
+        Ui.setError(this.$el.parentElement!, null)
         this.ctx.conf.versionCheck = false
         this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)
-      Ui.setError(this.ctx, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
+      Ui.setError(this.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
     }
 
     return needUpdate

package/src/components/sidebar-layer.ts

@@ -6,6 +6,7 @@ import * as Utils from '@/lib/utils'
 import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
 import Layer from './layer'
+import Api from '../api'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -60,6 +61,26 @@ export default class SidebarLayer extends Component {
 
     // 第一次加载
     if (this.firstShow) {
+      // 管理员身份验证
+      if (this.ctx.user.data.isAdmin) {
+        const resp = await new Api(this.ctx).loginStatus()
+        if (!resp.is_login) {
+          await (new Promise<any>((resolve, reject) => {
+            this.ctx.trigger('checker-admin', {
+              onSuccess: () => {
+                resolve(null)
+                setTimeout(() => {
+                  this.show()
+                }, 500)
+              },
+              onCancel: () => {
+                this.layer?.hide()
+              }
+            })
+          }))
+        }
+      }
+
       this.$iframeWrap.innerHTML = ''
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 

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

@@ -5,7 +5,7 @@ import { Checker } from '.'
 const AdminChecker: Checker = {
   inputType: 'password',
 
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     const data = {
       name: that.ctx.user.data.nick,
       email: that.ctx.user.data.email,
@@ -15,11 +15,11 @@ const AdminChecker: Checker = {
     return new Api(that.ctx).login(data.name, data.email, data.password)
   },
 
-  body() {
+  body(that, ctx) {
     return Utils.createElement('<span>敲入密码来验证管理员身份：</span>')
   },
 
-  onSuccess(that, userToken, inputVal, formEl) {
+  onSuccess(that, ctx, userToken, inputVal, formEl) {
     that.ctx.user.data.isAdmin = true
     that.ctx.user.data.token = userToken
     that.ctx.user.save()
@@ -27,7 +27,7 @@ const AdminChecker: Checker = {
     that.ctx.trigger('list-reload')
   },
 
-  onError(that, err, inputVal, formEl) {}
+  onError(that, ctx, err, inputVal, formEl) {}
 }
 
 export default AdminChecker

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

@@ -1,15 +1,61 @@
 import Api from '@/api'
 import * as Utils from '../utils'
+import * as Ui from '../ui'
 import { Checker } from '.'
 
 const CaptchaChecker: Checker = {
-  request(that, inputVal) {
+  request(that, ctx, inputVal) {
     return new Api(that.ctx).captchaCheck(inputVal)
   },
 
-  body(that) {
+  body(that, ctx) {
+    // Iframe 验证方式
+    if (that.captchaConf.iframe) {
+      const $iframeWrap = Utils.createElement(`<div class="atk-checker-iframe-wrap"></div>`)
+      const $iframe = Utils.createElement<HTMLIFrameElement>(`<iframe class="atk-fade-in"></iframe>`)
+      $iframe.style.display = 'none'
+      Ui.showLoading($iframeWrap, { transparentBg: true })
+      $iframe.src = `${that.ctx.conf.server}/captcha/get`
+      $iframe.onload = () => {
+        $iframe.style.display = ''
+        Ui.hideLoading($iframeWrap)
+      }
+      $iframeWrap.append($iframe)
+
+      const $closeBtn = Utils.createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`)
+      $iframeWrap.append($closeBtn)
+
+      ctx.hideInteractInput()
+
+      // 轮询状态
+      let stop = false // 打断
+      const sleep = (ms: number) => new Promise((resolve) => { window.setTimeout(() => { resolve(null) }, ms) })
+      ;(async function queryStatus() {
+        await sleep(1000)
+        if (stop) return
+        let isPass = false
+        try {
+          const resp = await new Api(that.ctx).captchaStatus()
+          isPass = resp.is_pass
+        } catch { isPass = false }
+        if (isPass) {
+          ctx.triggerSuccess()
+        } else {
+          queryStatus()
+        }
+      })()
+
+      $closeBtn.onclick = () => {
+        stop = true
+        ctx.cancel()
+      }
+
+      return $iframeWrap
+    }
+
+    // 图片验证方式
     const elem = Utils.createElement(
-      `<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ''}" alt="验证码">敲入验证码继续：</span>`
+      `<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ''}" alt="验证码">敲入验证码继续：</span>`
     );
 
     // 刷新验证码
@@ -26,11 +72,11 @@ const CaptchaChecker: Checker = {
     return elem
   },
 
-  onSuccess(that, data, inputVal, formEl) {
-    that.submitCaptchaVal = inputVal
+  onSuccess(that, ctx, data, inputVal, formEl) {
+    that.captchaConf.val = inputVal
   },
 
-  onError(that, err, inputVal, formEl) {
+  onError(that, ctx, err, inputVal, formEl) {
     formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
   }
 }

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/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,28 +1,12 @@
 {
+  "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/*"]
-    },
-    "types": ["vite/client"]
+    }
   },
   "include": ["./src", "./types"]
 }

package/types/event.d.ts

@@ -55,6 +55,7 @@ export interface NotifyConf {
 
 export interface CheckerCaptchaPayload extends CheckerPayload {
   imgData?: string
+  iframe?: string
 }
 
 export interface UnreadUpdatePayload {