artalk 2.1.8 → 2.2.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "artalk",
-  "version": "2.1.8",
-  "license": "GPL-3.0",
+  "version": "2.2.1",
+  "backendMinVersion": "2.1.1",
+  "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
     "comment-system",
@@ -22,16 +23,6 @@
   "jsdelivr": "./dist/Artalk.iife.js",
   "module": "./dist/Artalk.es.js",
   "types": "./types/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "yarn lint && vite build",
-    "build:demo": "vite build --config vite-demo.config.ts",
-    "serve": "vite preview",
-    "deploy": "gh-pages -d deploy",
-    "predeploy": "yarn run build && yarn run build:demo && yarn run copy:deploy",
-    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
-    "lint": "eslint --ext .js,.ts src"
-  },
   "devDependencies": {
     "@types/marked": "^4.0.3"
   },
@@ -39,5 +30,15 @@
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
     "marked": "^4.0.14"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm lint && vite build",
+    "build:demo": "vite build --config vite-demo.config.ts",
+    "serve": "vite preview",
+    "deploy": "gh-pages -d deploy",
+    "predeploy": "pnpm build && pnpm build:demo && pnpm copy:deploy",
+    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
+    "lint": "eslint --ext .js,.ts src"
   }
-}
+}

package/src/api/index.ts

@@ -117,6 +117,12 @@ export default class Api {
     }
   }
 
+  /** 用户 · 登录状态 */
+  public async loginStatus() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/login-status`)
+    return (data || { is_login: false }) as { is_login: boolean }
+  }
+
   // ============================
   //  页面 Page
   // ============================
@@ -293,13 +299,19 @@ export default class Api {
 
   /** 验证码 · 获取 */
   public async captchaGet() {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
+    const data = await POST<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 })
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
     return (data.img_data || '') as string
   }
+
+  /** 验证码 · 状态 */
+  public async captchaStatus() {
+    const data = await POST<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/artalk.ts

@@ -12,6 +12,7 @@ import SidebarLayer from './components/sidebar-layer'
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
+import * as Utils from './lib/utils'
 
 /**
  * Artalk
@@ -59,6 +60,7 @@ export default class Artalk {
 
     // 组件初始化
     this.checkerLauncher = new CheckerLauncher(this.ctx)
+    Utils.initMarked(this.ctx) // 初始化 marked
 
     // 编辑器
     this.editor = new Editor(this.ctx)
@@ -80,6 +82,13 @@ export default class Artalk {
 
     // 其他
     this.initPV()
+
+    // 插件初始化
+    Artalk.Plugins.forEach(plugin => {
+      if (typeof plugin === 'function') {
+        plugin(this.ctx)
+      }
+    })
   }
 
   /** 事件绑定 · 初始化 */
@@ -180,4 +189,12 @@ export default class Artalk {
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
+
+  /** Plugins */
+  protected static Plugins: ((ctx: Context) => void)[] = []
+
+  /** Enable Plugin */
+  public static Use(plugin: ((ctx: Context) => void)) {
+    this.Plugins.push(plugin)
+  }
 }

package/src/components/editor.ts

@@ -247,7 +247,7 @@ export default class Editor extends Component {
       })
     })
 
-    this.initImgUploadBtn()
+    this.initImgUpload()
   }
 
   /** 关闭编辑器插件 */
@@ -260,11 +260,12 @@ export default class Editor extends Component {
   /** 允许的图片格式 */
   allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
 
-  /** 初始化图片上传按钮 */
-  initImgUploadBtn() {
+  /** 初始化图片上传功能 */
+  initImgUpload() {
     this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
     this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
 
+    // 按钮点击
     this.$imgUploadBtn.onclick = () => {
       // 选择图片
       const $input = document.createElement('input')
@@ -280,6 +281,17 @@ export default class Editor extends Component {
       $input.click() // 显示选择图片对话框
     }
 
+    // 统一从 FileList 获取文件并上传图片方法
+    const uploadFromFileList = (files?: FileList) => {
+      if (!files) return
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        this.uploadImg(file)
+      }
+    }
+
+    // 拖拽图片
     // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
     // 阻止浏览器的默认释放行为
     this.$textarea.addEventListener('dragover', (evt) => {
@@ -288,12 +300,19 @@ export default class Editor extends Component {
     })
 
     this.$textarea.addEventListener('drop', (evt) => {
-      if (evt.dataTransfer?.files) {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
         evt.preventDefault()
-        for (let i = 0; i < evt.dataTransfer.files.length; i++) {
-          const file = evt.dataTransfer.files[i]
-          this.uploadImg(file)
-        }
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
       }
     })
   }
@@ -312,8 +331,18 @@ export default class Editor extends Component {
     const fileExt = /[^.]+$/.exec(file.name)
     if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
 
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.showNotify('填入你的名字邮箱才能上传哦', 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.$textarea.value.trim() === '') insertPrefix = ''
+
     // 插入占位加载文字
-    const uploadPlaceholderTxt = `\n![](Uploading ${file.name}...)`
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
     this.insertContent(uploadPlaceholderTxt)
 
     // 上传图片
@@ -326,20 +355,16 @@ export default class Editor extends Component {
     }
     if (!!resp && resp.img_url) {
       let imgURL = resp.img_url as string
-      if (imgURL.startsWith('.') || (imgURL.startsWith('/') && !imgURL.startsWith('//'))) {
-        // 若为相对路径，加上 artalk server
-        imgURL = `${this.ctx.conf.server.replace(/\/api\/?$/, '')}/${imgURL.replace(/^\//, '')}`
-      }
+
+      // 若为相对路径，加上 artalk server
+      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
 
       // 上传成功插入图片
-      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, `\n![](${imgURL})`)
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
     } else {
       // 上传失败删除加载文字
-      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, '')
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ''))
     }
-
-    // 更新内容保存到 localStorage
-    this.saveContent()
   }
 
   insertContent (val: string) {
@@ -376,7 +401,8 @@ export default class Editor extends Component {
     this.cancelReply()
   }
 
-  getContent () {
+  /** 获取最终用于 submit 的数据 */
+  getFinalContent () {
     let content = this.getContentOriginal()
 
     // 表情包处理
@@ -393,7 +419,7 @@ export default class Editor extends Component {
   }
 
   getContentMarked () {
-    return Utils.marked(this.ctx, this.getContent())
+    return Utils.marked(this.ctx, this.getFinalContent())
   }
 
   initBottomPart () {
@@ -452,7 +478,7 @@ export default class Editor extends Component {
   }
 
   async submit () {
-    if (this.getContent().trim() === '') {
+    if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
       return
     }
@@ -463,7 +489,7 @@ export default class Editor extends Component {
 
     try {
       const nComment = await new Api(this.ctx).add({
-        content: this.getContent(),
+        content: this.getFinalContent(),
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,

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/list.ts

@@ -42,9 +42,12 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
-    // 下拉选择层
     this.$commentCount = this.$el.querySelector('.atk-comment-count')!
-    this.initDropdown()
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (this.ctx.conf.listSort) {
+      this.initDropdown()
+    }
 
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`

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,18 +61,39 @@ 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>')
 
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
-        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
+        : Utils.getURLBasedOnApi(this.ctx, 'sidebar/')
       const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
 
-      // 测试是否能访问
+      const location = window.location
       this.iframeLoad(`${baseURL}`
         + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
         + `&site=${encodeURIComponent(this.conf.site || '')}`
         + `&user=${userData}`
+        + `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
         + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
 
       this.$iframeWrap.append(this.$iframe)

package/src/context.ts

@@ -1,3 +1,4 @@
+import { marked as libMarked } from 'marked'
 import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
@@ -39,4 +40,6 @@ export default class Context {
       .map((evt) => evt.handler)
       .forEach((handler) => handler(payload as any))
   }
+
+  public markedInstance!: typeof libMarked
 }

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,

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() // 刷新验证码
   }
 }