artalk 2.2.3 → 2.2.4

package/index.html

@@ -32,6 +32,13 @@
   <!--<link rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/arta.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>-->
+
+  <!-- For mobile testing -->
+  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+  <script>
+    // VConsole will be exported to `window.VConsole` by default.
+    var vConsole = new window.VConsole();
+  </script>
 </head>
 <body>
   <div class="card billboard atk-fade-in">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.3",
-  "backendMinVersion": "2.1.1",
+  "version": "2.2.4",
+  "backendMinVersion": "2.1.2",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/api/index.ts

@@ -119,8 +119,11 @@ 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 }
+    const data = await POST<any>(this.ctx, `${this.baseURL}/login-status`, {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email
+    })
+    return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
   }
 
   // ============================
@@ -164,13 +167,14 @@ export default class Api {
   }
 
   /** 页面 · 数据更新 */
-  public async pageFetch(id: number) {
-    const params: any = {
-      id,
-    }
+  public async pageFetch(id?: number, siteName?: string, getStatus?: boolean) {
+    const params: any = {}
+    if (id) params.id = id
+    if (siteName) params.site_name = siteName
+    if (getStatus) params.get_status = getStatus
 
     const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-fetch`, params)
-    return (d.page as PageData)
+    return (d as any)
   }
 
   // ============================

package/src/artalk.ts

@@ -9,7 +9,7 @@ import Editor from './components/editor'
 import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
-import { GetLayerWrap } from './components/layer'
+import Layer, { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
 import * as Utils from './lib/utils'
@@ -37,6 +37,7 @@ export default class Artalk {
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
+      // @link http://bl.ocks.org/abernier/3070589
       this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
     }
 
@@ -56,6 +57,7 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
+    this.initLayer()
     this.initDarkMode()
 
     // 组件初始化
@@ -133,6 +135,13 @@ export default class Artalk {
     this.list.fetchComments(0)
   }
 
+  /** Layer 初始化 */
+  initLayer() {
+    // 记录页面原始 Styles
+    Layer.BodyOrgOverflow = document.body.style.overflow
+    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  }
+
   /** 暗黑模式 · 初始化 */
   public initDarkMode() {
     const darkModeClassName = 'atk-dark-mode'
@@ -163,14 +172,15 @@ export default class Artalk {
 
   /** PV */
   public async initPV() {
+    const pvNum = await new Api(this.ctx).pv()
+    if (Number.isNaN(Number(pvNum)))
+      return
+
     if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
       return
 
     const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
     // $pv.innerText = '-' // 默认占位符
-    const pvNum = await new Api(this.ctx).pv()
-    if (Number.isNaN(Number(pvNum)))
-      return
 
     $pv.innerText = String(pvNum)
   }

package/src/components/editor.ts

@@ -22,6 +22,7 @@ export default class Editor extends Component {
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
   public $imgUploadBtn?: HTMLElement
+  public $imgUploadInput?: HTMLInputElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -265,12 +266,16 @@ export default class Editor extends Component {
     this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
     this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
 
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+    this.$imgUploadBtn.after(this.$imgUploadInput)
+
     // 按钮点击
     this.$imgUploadBtn.onclick = () => {
       // 选择图片
-      const $input = document.createElement('input')
-      $input.type = 'file'
-      $input.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+      const $input = this.$imgUploadInput!
       $input.onchange = () => {
         (async () => { // 解决阻塞 UI 问题
           if (!$input.files || $input.files.length === 0) return
@@ -501,7 +506,7 @@ export default class Editor extends Component {
 
       // 回复不同页面的评论
       if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
-        window.open(`${this.replyComment.page_key}#atk-comment-${nComment.id}`)
+        window.open(`${this.replyComment.page_url}#atk-comment-${nComment.id}`)
       }
 
       this.ctx.trigger('list-insert', nComment)

package/src/components/layer.ts

@@ -10,8 +10,8 @@ export default class Layer extends Component {
 
   private maskClickHideEnable: boolean = true
 
-  private bodyStyleOrgOverflow = ''
-  private bodyStyleOrgPaddingRight = ''
+  public static BodyOrgOverflow: string
+  public static BodyOrgPaddingRight: string
 
   public afterHide?: Function
 
@@ -73,10 +73,11 @@ export default class Layer extends Component {
     this.$wrap.classList.add('atk-fade-out')
     this.$el.style.display = 'none'
 
+    // body style 禁止滚动解除
+    this.pageBodyScrollBarShow()
+
     this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
-      // body style 禁止滚动解除
-      this.pageBodyScrollBarShow()
       this.checkCleanLayer()
     }, 450)
     this.newActionTimer(() => {
@@ -91,8 +92,6 @@ export default class Layer extends Component {
 
   // 页面滚动条隐藏
   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)
@@ -101,8 +100,8 @@ export default class Layer extends Component {
 
   // 页面滚动条显示
   pageBodyScrollBarShow() {
-    document.body.style.overflow = this.bodyStyleOrgOverflow
-    document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
+    document.body.style.overflow = Layer.BodyOrgOverflow
+    document.body.style.paddingRight = Layer.BodyOrgPaddingRight
   }
 
   // Timers
@@ -128,7 +127,6 @@ export default class Layer extends Component {
 
   /** 销毁 - 无动画 */
   disposeNow () {
-    document.body.style.overflow = ''
     this.$el.remove()
     this.pageBodyScrollBarShow()
     // this.$el dispose

package/src/components/list-lite.ts

@@ -91,7 +91,7 @@ export default class ListLite extends Component {
     try {
       listData = await new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor)
     } catch (e: any) {
-      this.onError(e.msg || String(e), offset)
+      this.onError(e.msg || String(e), offset, e.data)
       throw e
     } finally {
       hideLoading()
@@ -219,7 +219,7 @@ export default class ListLite extends Component {
   }
 
   /** 错误处理 */
-  protected onError(msg: any, offset: number) {
+  protected onError(msg: any, offset: number, errData?: any) {
     msg = String(msg)
     console.error(msg)
 
@@ -237,9 +237,24 @@ export default class ListLite extends Component {
     $err.appendChild($retryBtn)
 
     const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
-    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show'))
-    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
     $err.appendChild(adminBtn)
+    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
+
+    let sidebarView = ''
+
+    // 找不到站点错误，打开侧边栏并填入创建站点表单
+    if (errData?.err_no_site) {
+      const viewLoadParam = {
+        create_name: this.ctx.conf.site,
+        create_urls: `${window.location.protocol}//${window.location.host}`
+      }
+      // TODO 真的是飞鸽传书啊
+      sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
+    }
+
+    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show', {
+      view: sidebarView
+    }))
 
     Ui.setError(this.$el, $err)
   }

package/src/components/sidebar-layer.ts

@@ -7,6 +7,7 @@ import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
 import Layer from './layer'
 import Api from '../api'
+import { SidebarShowPayload } from '~/types/event'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -28,7 +29,7 @@ export default class SidebarLayer extends Component {
     }
 
     // event
-    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-show', (conf) => (this.show(conf || {})))
     this.ctx.on('sidebar-hide', () => (this.hide()))
     this.ctx.on('user-changed', () => { this.firstShow = true })
   }
@@ -36,7 +37,7 @@ export default class SidebarLayer extends Component {
   private firstShow = true
 
   /** 显示 */
-  public async show() {
+  public async show(conf: SidebarShowPayload) {
     this.$el.style.transform = '' // 动画清除，防止二次打开失效
 
     // 获取 Layer
@@ -59,54 +60,60 @@ export default class SidebarLayer extends Component {
       this.$el.style.transform = 'translate(0, 0)'
     }, 20)
 
-    // 第一次加载
-    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()
-              }
-            })
-          }))
-        }
+    // 管理员身份验证 (若身份失效，弹出验证窗口)
+    ;(async () => {
+      const resp = await new Api(this.ctx).loginStatus()
+      if (resp.is_admin && !resp.is_login) {
+        this.layer?.hide()
+        this.firstShow = true
+
+        this.ctx.trigger('checker-admin', {
+          onSuccess: () => {
+            setTimeout(() => {
+              this.show(conf)
+            }, 500)
+          },
+          onCancel: () => {}
+        })
       }
+    })()
+
+    // 清空 unread
+    this.ctx.trigger('unread-update', { notifies: [] })
 
+    // 第一次加载
+    if (this.firstShow) {
       this.$iframeWrap.innerHTML = ''
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
+      // 准备 Iframe 参数
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
         : 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}`
-        + `&time=${+new Date()}`
-        + `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
-        + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
+      const query: any = {
+        pageKey: this.conf.pageKey,
+        site: this.conf.site || '',
+        user: JSON.stringify(this.ctx.user.data),
+        time: +new Date()
+      }
+
+      if (conf.view) query.view = conf.view
+      if (this.conf.darkMode) query.darkMode = '1'
+
+      const urlParams = new URLSearchParams(query);
+      this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
 
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
       // 暗黑模式
-      if (this.conf.darkMode && !this.$iframe!.src.match(/darkMode=1$/)) {
+      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+
+      if (this.conf.darkMode && !isIframeSrcDarkMode)
         this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
-      }
-      if (!this.conf.darkMode && this.$iframe!.src.match(/darkMode=1$/)) {
-        this.iframeLoad(this.$iframe!.src.replace(/&darkMode=1$/, ''))
-      }
+
+      if (!this.conf.darkMode && isIframeSrcDarkMode)
+        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
     }
   }
 

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

@@ -15,7 +15,7 @@ const CaptchaChecker: Checker = {
       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.src = `${that.ctx.conf.server}/captcha/get?t=${+new Date()}`
       $iframe.onload = () => {
         $iframe.style.display = ''
         Ui.hideLoading($iframeWrap)

package/src/style/comment.less

@@ -167,6 +167,7 @@
         border-left: 3px solid #eee;
         margin-bottom: 10px;
         position: relative;
+        margin-top: 10px;
 
         .atk-meta {
           font-size: 15px;

package/src/style/main.less

@@ -19,9 +19,11 @@
 
   input, textarea, button, optgroup, select {
     font-family: inherit;
+    color: inherit;
+    font-size: inherit;
   }
 
-  @codeFont: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
+  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
 
   code {
     font-family: @codeFont;
@@ -33,8 +35,8 @@
   }
 
   pre {
-    margin-top: 10px;
-    margin-bottom: 0;
+    margin: 10px 0 0 0;
+    padding: 0;
     line-height: 0;
   }
 
@@ -196,6 +198,9 @@
 .atk-fade-out {
   animation: atkFadeOut both .2s;
 }
+.atk-rotate {
+  animation: atkRotate 2s linear infinite;
+}
 
 @keyframes atkFadeIn {
   0% { opacity: 0 }
@@ -207,6 +212,11 @@
   0% {}
 }
 
+@keyframes atkRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 i.atk-icon {
   width: 20px;
   height: 20px;
@@ -215,6 +225,7 @@ i.atk-icon {
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
   mask-position: center;
+  mask-size: contain;
 }
 
 .atk-icon-sync {

package/types/event.d.ts

@@ -19,7 +19,7 @@ export interface EventPayloadMap {
   'list-refresh-ui': undefined     // 刷新 List UI
 
   // Sidebar
-  'sidebar-show': undefined           // 侧边栏显示
+  'sidebar-show': SidebarShowPayload  // 侧边栏显示
   'sidebar-hide': undefined           // 侧边栏隐藏
 
   // Editor
@@ -70,6 +70,10 @@ export interface EditorReplyPayload {
   scroll?: boolean
 }
 
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'|string
+}
+
 // ============================================
 export interface Handler<P> {
   (payload: P): void