artalk 2.1.5 → 2.1.8

package/index.html

@@ -31,9 +31,9 @@
   </style>
 </head>
 <body>
-  <div class="card billboard artalk-fade-in">
+  <div class="card billboard atk-fade-in">
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
-    <div class="desc">一款简洁的自托管评论系统</div>
+    <div class="desc">一款简洁的自托管评论系统 <span id="ArtalkPV"></span></div>
     <div class="social">
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
       <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
@@ -42,11 +42,11 @@
       <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
-  <div class="card artalk-fade-in">
+  <div class="card atk-fade-in">
     <div id="comments"></div>
   </div>
-  <div class="float-btn to-night artalk-fade-in">Blink</div>
-  <div class="float-btn to-top artalk-fade-in" style="display: none;">TOP</div>
+  <div class="float-btn to-night atk-fade-in">Blink</div>
+  <div class="float-btn to-top atk-fade-in" style="display: none;">TOP</div>
 
   <script type="module">
     import Artalk from './src/main'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.5",
+  "version": "2.1.8",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/api/index.ts

@@ -252,6 +252,41 @@ export default class Api {
     return POST(this.ctx, `${this.baseURL}/mark-read`, params)
   }
 
+  /** PV */
+  public async pv() {
+    const params: any = {
+      site_name: this.ctx.conf.site || '',
+      page_key: this.ctx.conf.pageKey || '',
+      page_title: this.ctx.conf.pageTitle || ''
+    }
+
+    const p = await POST<any>(this.ctx, `${this.baseURL}/pv`, params)
+    return p.pv as number
+  }
+
+  /** 图片上传 */
+  public async imgUpload(file: File) {
+    const params: any = {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email,
+      page_key: this.ctx.conf.pageKey,
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const form = ToFormData(params)
+    form.set('file', file)
+
+    const init: RequestInit = {
+      method: 'POST',
+      body: form
+    }
+
+    const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
+    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+
+  }
+
   // ============================
   //  验证码
   // ============================

package/src/artalk.ts

@@ -11,6 +11,7 @@ import SidebarLayer from './components/sidebar-layer'
 
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
+import Api from './api'
 
 /**
  * Artalk
@@ -76,6 +77,9 @@ export default class Artalk {
 
     // 事件绑定初始化
     this.initEventBind()
+
+    // 其他
+    this.initPV()
   }
 
   /** 事件绑定 · 初始化 */
@@ -93,8 +97,12 @@ export default class Artalk {
 
       // for layer
       const { $wrap: $layerWrap } = GetLayerWrap(this.ctx)
-      if ($layerWrap)
-        $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+      if ($layerWrap) $layerWrap.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
+
+      // for sidebar
+      // TODO: 这个其实应该写在 packages/artalk-sidebar 里面的
+      const $sidebarEl = document.querySelector<HTMLElement>('.atk-sidebar')
+      if ($sidebarEl) $sidebarEl.querySelectorAll<HTMLElement>(`[atk-only-admin-show]`).forEach(item => items.push(item))
 
       items.forEach(($item: HTMLElement) => {
         if (this.ctx.user.data.isAdmin)
@@ -140,9 +148,24 @@ export default class Artalk {
   /** 暗黑模式 · 设定 */
   public setDarkMode(darkMode: boolean) {
     this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
     this.initDarkMode()
   }
 
+  /** PV */
+  public async initPV() {
+    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)
+  }
+
   /** 监听事件 */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')

package/src/components/comment.ts

@@ -136,6 +136,11 @@ export default class Comment extends Component {
       $badge.remove()
     }
 
+    if (this.data.is_pinned) {
+      const $pinnedBadge = Utils.createElement(`<span class="atk-item atk-pinned-badge">置顶</span>`) // 置顶徽章
+      $nick.insertAdjacentElement('afterend', $pinnedBadge)
+    }
+
     const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
     $date.innerText = this.getDateFormatted()
     $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
@@ -272,6 +277,16 @@ export default class Comment extends Component {
     delBtn.setClick(() => {
       this.adminDelete(delBtn)
     })
+
+    // 绑定置顶按钮事件
+    const pinnedBtn = new ActionBtn({
+      text: () => (this.data.is_pinned ? '取消置顶' : '置顶'),
+      adminOnly: true
+    })
+    pinnedBtn.appendTo(this.$actions)
+    pinnedBtn.setClick(() => {
+      this.adminEdit('pinned', pendingBtn)
+    })
   }
   //#endregion
 
@@ -404,9 +419,9 @@ export default class Comment extends Component {
     })
   }
 
-  /** 管理员 - 评论折叠 */
-  adminEdit(type: 'collapsed'|'pending', btnElem: ActionBtn) {
-    if (btnElem.isLoading) return // 若正在折叠中
+  /** 管理员 - 评论状态修改 */
+  adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在修改中
 
     btnElem.setLoading(true, '修改中...')
 
@@ -416,6 +431,8 @@ export default class Comment extends Component {
       modify.is_collapsed = !modify.is_collapsed
     } else if (type === 'pending') {
       modify.is_pending = !modify.is_pending
+    } else if (type === 'pinned') {
+      modify.is_pinned = !modify.is_pinned
     }
 
     new Api(this.ctx).commentEdit(modify).then((comment) => {

package/src/components/editor.ts

@@ -21,6 +21,7 @@ export default class Editor extends Component {
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
+  public $imgUploadBtn?: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -63,6 +64,7 @@ export default class Editor extends Component {
     this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
     this.ctx.on('editor-travel', ($el) => (this.travel($el)))
     this.ctx.on('editor-travel-back', () => (this.travelBack()))
+    this.ctx.on('conf-updated', () => (this.refreshUploadBtn()))
   }
 
   initLocalStorage () {
@@ -200,7 +202,7 @@ export default class Editor extends Component {
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
       this.$plugBtnWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
@@ -244,6 +246,8 @@ export default class Editor extends Component {
         btnElem.classList.add('active')
       })
     })
+
+    this.initImgUploadBtn()
   }
 
   /** 关闭编辑器插件 */
@@ -253,6 +257,91 @@ export default class Editor extends Component {
     this.openedPlugName = null
   }
 
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  /** 初始化图片上传按钮 */
+  initImgUploadBtn() {
+    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')
+      $input.type = 'file'
+      $input.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+      $input.onchange = () => {
+        (async () => { // 解决阻塞 UI 问题
+          if (!$input.files || $input.files.length === 0) return
+          const file = $input.files[0]
+          this.uploadImg(file)
+        })()
+      }
+      $input.click() // 显示选择图片对话框
+    }
+
+    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+    // 阻止浏览器的默认释放行为
+    this.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.$textarea.addEventListener('drop', (evt) => {
+      if (evt.dataTransfer?.files) {
+        evt.preventDefault()
+        for (let i = 0; i < evt.dataTransfer.files.length; i++) {
+          const file = evt.dataTransfer.files[i]
+          this.uploadImg(file)
+        }
+      }
+    })
+  }
+
+  /** 刷新图片上传按钮 */
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn) return
+
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute('atk-only-admin-show', '')
+      this.ctx.trigger('check-admin-show-el')
+    }
+  }
+
+  async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `\n![](Uploading ${file.name}...)`
+    this.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      resp = await new Api(this.ctx).imgUpload(file)
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`图片上传失败，${err.msg}`, 'e')
+    }
+    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(/^\//, '')}`
+      }
+
+      // 上传成功插入图片
+      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, `\n![](${imgURL})`)
+    } else {
+      // 上传失败删除加载文字
+      this.$textarea.value = this.$textarea.value.replace(uploadPlaceholderTxt, '')
+    }
+
+    // 更新内容保存到 localStorage
+    this.saveContent()
+  }
+
   insertContent (val: string) {
     if ((document as any).selection) {
       this.$textarea.focus();

package/src/components/html/list.html

@@ -1,8 +1,10 @@
 <div class="atk-list">
   <div class="atk-list-header">
     <div class="atk-comment-count">
-      <span class="atk-comment-count-num">0</span>
-      条评论
+      <div class="atk-text">
+        <span class="atk-comment-count-num">0</span>
+        条评论
+      </div>
     </div>
     <div class="atk-right-action">
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>

package/src/components/list-lite.ts

@@ -119,6 +119,11 @@ export default class ListLite extends Component {
     // 版本检测
     if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version)) return
 
+    // 图片上传功能
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload
+    }
+
     // 导入数据
     this.importComments(data.comments)
 
@@ -130,6 +135,7 @@ export default class ListLite extends Component {
 
     this.ctx.trigger('unread-update', { notifies: data.unread || [] })
     this.ctx.trigger('comments-loaded')
+    this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
   }
@@ -481,6 +487,7 @@ export default class ListLite extends Component {
       ignoreBtn.onclick = () => {
         Ui.setError(this.ctx, null)
         this.ctx.conf.versionCheck = false
+        this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)

package/src/components/list.ts

@@ -12,6 +12,8 @@ export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
   private $openSidebarBtn!: HTMLElement
   private $unreadBadge!: HTMLElement
+  private $commentCount!: HTMLElement
+  private $dropdownWrap?: HTMLElement
 
   constructor (ctx: Context) {
     const el = Utils.createElement(ListHTML)
@@ -40,6 +42,10 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
+    // 下拉选择层
+    this.$commentCount = this.$el.querySelector('.atk-comment-count')!
+    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>`
 
@@ -171,4 +177,58 @@ export default class List extends ListLite {
       this.$unreadBadge.style.display = 'none'
     }
   }
+
+  /** 初始化选择下拉层 */
+  protected initDropdown() {
+    this.$dropdownWrap = this.$commentCount
+    this.$commentCount.classList.add('atk-dropdown-wrap')
+
+    // 插入图标
+    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+    const reloadUseParamsEditor = (func: (p: any) => void) => {
+      this.paramsEditor = (p) => { func(p) }
+      this.fetchComments(0)
+    }
+
+    // 下拉列表
+    const dropdownList = [
+      ['最新', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+      ['最热', () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+      ['最早', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+      ['作者', () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+    ]
+
+    // 列表项点击事件
+    let curtActive = 0 // 当前选中
+    const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
+      action()
+
+      // set active
+      curtActive = i
+      $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+      $item.classList.add('active')
+
+      // 关闭层 (临时消失，取消 :hover)
+      $dropdown.style.display = 'none'
+      setTimeout(() => { $dropdown.style.display = '' }, 80)
+    }
+
+    // 生成列表元素
+    const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
+    dropdownList.forEach((item, i) => {
+      const name = item[0] as string
+      const action = item[1] as Function
+
+      const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
+      const $link = $item.querySelector<HTMLElement>('span')!
+      $link.innerText = name
+      $link.onclick = () => { onItemClick(i, $item, name, action) }
+      $dropdown.append($item)
+
+      if (i === curtActive) $item.classList.add('active') // 默认选中项
+    })
+
+    this.$dropdownWrap.append($dropdown)
+  }
 }

package/src/components/sidebar-layer.ts

@@ -106,7 +106,7 @@ export default class SidebarLayer extends Component {
       Ui.hideLoading(this.$iframeWrap)
     }
 
-    this.checkReqStatus(src)
+    // this.checkReqStatus(src) // 判不准，删了，没啥用
   }
 
   loadingTimer: number|null = null

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,
   gravatar: {
@@ -35,6 +36,7 @@ const defaults: ArtalkConfig = {
     children: 400,
   },
 
+  imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
 }

package/src/style/comment.less

@@ -102,6 +102,12 @@
         color: #fff;
       }
 
+      .atk-pinned-badge {
+        .badge();
+        color: #fff;
+        background: #f44336;
+      }
+
       .atk-ua {
         .badge()
       }

package/src/style/list.less

@@ -7,6 +7,72 @@
     padding: 10px 10px 5px 10px;
     border-bottom: 1px solid var(--at-color-border);
 
+    .atk-text {
+      display: inline-block;
+    }
+
+    /* 下拉选择层 */
+    .atk-dropdown-wrap {
+      position: relative;
+      cursor: pointer;
+
+      .atk-arrow-down-icon {
+        cursor: pointer;
+        vertical-align: middle;
+        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;
+      }
+
+      &:hover {
+        .atk-dropdown {
+          display: block;
+        }
+      }
+
+      .atk-dropdown {
+        z-index: 888;
+        display: none;
+        height: auto !important;
+        max-height: calc(100vh - 2.7rem);
+        overflow-y: auto;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 100%;
+        background-color: var(--at-color-bg);
+        padding: 0.6rem 0;
+        border: 1px solid var(--at-color-border);
+        text-align: center;
+        border-radius: 0.25rem;
+        white-space: nowrap;
+        margin: 0;
+        list-style: none;
+      }
+
+      .atk-dropdown-item {
+        span, a {
+          display: block;
+          line-height: 2rem;
+          position: relative;
+          border-bottom: none;
+          font-weight: 400;
+          padding: 0 1.5rem;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+
+        &.active span, a {
+          color: var(--at-color-main);
+        }
+      }
+    }
+
     .atk-comment-count {
       font-size: 15px;
 

package/src/style/main.less

@@ -248,7 +248,7 @@ i.atk-icon {
     & > .atk-layer-dialog-content {
       .atk-captcha-img {
         cursor: pointer;
-        width: 100px;
+        width: 170px;
         height: auto;
         margin-right: 10px;
         padding-right: 10px;

package/src/style/sidebar-layer.less

@@ -32,6 +32,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    z-index: 99999;
 
     .atk-sidebar-close {
       display: flex;

package/types/artalk-config.d.ts

@@ -62,6 +62,9 @@ export default interface ArtalkConfig {
   /** 评论投票反对按钮 */
   voteDown?: boolean
 
+  /** PV 元素 Selector */
+  pvEl?: string
+
   /** 暗黑模式 */
   darkMode?: boolean
 
@@ -77,6 +80,9 @@ export default interface ArtalkConfig {
   /** 显示 UA 徽标 */
   uaBadge?: boolean
 
+  /** 图片上传功能 */
+  imgUpload?: boolean
+
   /** 版本检测 */
   versionCheck?: boolean
 }

package/types/artalk-data.d.ts

@@ -29,6 +29,9 @@ export interface CommentData {
   /** 是否待审 */
   is_pending?: boolean
 
+  /** 是否置顶 */
+  is_pinned?: boolean
+
   /** 是否为管理员 */
   is_admin?: boolean
 
@@ -84,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