artalk 2.3.3 → 2.4.0

package/src/i18n/index.ts

@@ -3,7 +3,7 @@ import zhCN from './zh-CN'
 
 export type I18n = typeof en
 
-// @note the Key name is followed by `ISO 639`
+// @note the key of language is followed by `ISO 639`
 // https://en.wikipedia.org/wiki/ISO_639
 // https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
 export const internal = {
@@ -14,8 +14,123 @@ export const internal = {
 
 export const external = {
   'jp-JP': {},
-  'zh-TW': {},
+  'zh-TW': {
+    /* Editor */
+    placeholder: '鍵入內容...',
+    noComment: '「此時無聲勝有聲」',
+    send: '發送評論',
+    save: '保存評論',
+    nick: '昵稱',
+    email: '郵箱',
+    link: '網址',
+    emoticon: '表情',
+    preview: '預覽',
+    image: '圖片',
+    uploadFail: '上傳失敗',
+    commentFail: '評論失敗',
+    restoredMsg: '內容已自動恢復',
+    onlyAdminCanReply: '僅管理員可評論',
+    uploadLoginMsg: '填入你的名字郵箱才能上傳哦',
+
+    /* List */
+    counter: '{count} 條評論',
+    sortLatest: '最新',
+    sortOldest: '最早',
+    sortBest: '最熱',
+    sortAuthor: '作者',
+    openComment: '打開評論',
+    closeComment: '關閉評論',
+    listLoadFailMsg: '無法獲取評論列表數據',
+    listRetry: '點擊重新獲取',
+    loadMore: '加載更多',
+
+    /* Comment */
+    admin: '管理員',
+    reply: '回覆',
+    voteUp: '贊同',
+    voteDown: '反對',
+    voteFail: '投票失敗',
+    readMore: '閱讀更多',
+    actionConfirm: '確認操作',
+    collapse: '摺疊',
+    collapsed: '已摺疊',
+    collapsedMsg: '該評論已被系統或管理員摺疊',
+    expand: '展開',
+    approved: '已審',
+    pending: '待審',
+    pendingMsg: '審核中，僅本人可見。',
+    edit: '編輯',
+    editCancel: '取消編輯',
+    delete: '刪除',
+    deleteConfirm: '確認刪除',
+    pin: '置頂',
+    unpin: '取消置頂',
+
+    /* Time */
+    seconds: '秒前',
+    minutes: '分鐘前',
+    hours: '小時前',
+    days: '天前',
+    now: '剛剛',
+
+    /* Checker */
+    adminCheck: '鍵入密碼來驗證管理員身份：',
+    captchaCheck: '鍵入驗證碼繼續：',
+    confirm: '確認',
+    cancel: '取消',
+
+    /* Sidebar */
+    msgCenter: '通知中心',
+    ctrlCenter: '控制中心',
+
+    /* General */
+    frontend: '前端',
+    backend: '後端',
+    loading: '加載中',
+    loadFail: '加載失敗',
+    editing: '修改中',
+    editFail: '修改失敗',
+    deleting: '刪除中',
+    deleteFail: '刪除失敗',
+    reqGot: '請求響應',
+    reqAborted: '請求超時或意外終止',
+  },
   'fr-FR': {},
   'de-DE': {},
   'bn-IN': {},
 }
+
+/**
+ * get a locale object by language name
+ */
+function getLocaleSet(lang: string): I18n {
+  // normalize a key of language to `ISO 639`
+  lang = lang.replace(
+    /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+    (_, p1: string, p2: string) => (p1.toLowerCase() + (p2 || '').toUpperCase())
+  )
+
+  // case not found
+  if (!internal[lang]) {
+    return internal.en // use `en` by default
+  }
+
+  return internal[lang]
+}
+
+/**
+ * get a i18n message by key
+ */
+function getI18n(locale: I18n|string, key: keyof I18n, args: {[key: string]: string} = {}) {
+  if (typeof locale === 'string') {
+    locale = getLocaleSet(locale)
+  }
+
+  let str = locale?.[key] || key
+  str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || '')
+
+  return str
+}
+
+export { getLocaleSet, getI18n }
+export default getI18n

package/src/i18n/zh-CN.ts

@@ -5,6 +5,7 @@ const zhCN: I18n = {
   placeholder: '键入内容...',
   noComment: '「此时无声胜有声」',
   send: '发送评论',
+  save: '保存评论',
   nick: '昵称',
   email: '邮箱',
   link: '网址',
@@ -40,10 +41,12 @@ const zhCN: I18n = {
   collapse: '折叠',
   collapsed: '已折叠',
   collapsedMsg: '该评论已被系统或管理员折叠',
-  expand: '取消折叠',
+  expand: '展开',
   approved: '已审',
   pending: '待审',
   pendingMsg: '审核中，仅本人可见。',
+  edit: '编辑',
+  editCancel: '取消编辑',
   delete: '删除',
   deleteConfirm: '确认删除',
   pin: '置顶',

package/src/layer/sidebar-layer.ts

@@ -1,5 +1,3 @@
-import '../style/sidebar-layer.less'
-
 import Context from '~/types/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
@@ -62,7 +60,7 @@ export default class SidebarLayer extends Component {
 
     // 管理员身份验证 (若身份失效，弹出验证窗口)
     ;(async () => {
-      const resp = await this.ctx.getApi().loginStatus()
+      const resp = await this.ctx.getApi().user.loginStatus()
       if (resp.is_admin && !resp.is_login) {
         this.layer?.hide()
         this.firstShow = true

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

@@ -11,7 +11,7 @@ const AdminChecker: Checker = {
       password: inputVal
     }
 
-    return that.ctx.getApi().login(data.name, data.email, data.password)
+    return that.ctx.getApi().user.login(data.name, data.email, data.password)
   },
 
   body(that, ctx) {

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

@@ -4,7 +4,7 @@ import { Checker } from '.'
 
 const CaptchaChecker: Checker = {
   request(that, ctx, inputVal) {
-    return that.ctx.getApi().captchaCheck(inputVal)
+    return that.ctx.getApi().captcha.captchaCheck(inputVal)
   },
 
   body(that, ctx) {
@@ -34,7 +34,7 @@ const CaptchaChecker: Checker = {
         if (stop) return
         let isPass = false
         try {
-          const resp = await that.ctx.getApi().captchaStatus()
+          const resp = await that.ctx.getApi().captcha.captchaStatus()
           isPass = resp.is_pass
         } catch { isPass = false }
         if (isPass) {
@@ -60,7 +60,7 @@ const CaptchaChecker: Checker = {
     // 刷新验证码
     elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
       const imgEl = elem.querySelector('.atk-captcha-img')
-      that.ctx.getApi().captchaGet()
+      that.ctx.getApi().captcha.captchaGet()
         .then((imgData) => {
           imgEl!.setAttribute('src', imgData)
         })

package/src/lib/stat.ts

@@ -21,7 +21,7 @@ export async function initCountWidget(p: CountConf) {
   }
 
   // PV
-  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().pv() : undefined
+  const curtPagePvNum = p.pvAdd ? await p.ctx.getApi().page.pv() : undefined
   const pvEl = p.ctx.conf.pvEl
   if (pvEl && document.querySelector(pvEl)) {
     handleStatCount(p, {
@@ -52,7 +52,7 @@ export async function handleStatCount(
     .filter((pageKey) => pageCounts[pageKey] === undefined)
   queryPageKeys = [...new Set(queryPageKeys)] // 去重
   if (queryPageKeys.length > 0) {
-    const counts: any = await p.ctx.getApi().stat(args.api, queryPageKeys)
+    const counts: any = await p.ctx.getApi().page.stat(args.api, queryPageKeys)
     pageCounts = { ...pageCounts, ...counts }
   }
 

package/src/lib/ui.ts

@@ -32,6 +32,12 @@ export function hideLoading(parentElem: HTMLElement) {
   if ($loading) $loading.style.display = 'none'
 }
 
+/** 元素加载动画 */
+export function setLoading(val: boolean, parentElem: HTMLElement) {
+  if (val) showLoading(parentElem)
+  else hideLoading(parentElem)
+}
+
 /** 元素是否用户可见 */
 export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
   const viewportHeight = viewport.clientHeight

package/src/list/list-lite.ts

@@ -7,7 +7,7 @@ import Comment from '../comment'
 import Pagination from '../components/pagination'
 import ReadMoreBtn from '../components/read-more-btn'
 import * as ListNest from './list-nest'
-import { backendMinVersion } from '../../package.json'
+import { backendMinVersion, version as ARTALK_VERSION } from '../../package.json'
 
 export default class ListLite extends Component {
   protected $commentsWrap: HTMLElement
@@ -78,40 +78,42 @@ export default class ListLite extends Component {
     return this.$commentsWrap
   }
 
+  /** 加载动画 */
+  public setLoading(val: boolean, isFirstLoad: boolean = false) {
+    this.isLoading = val
+    if (isFirstLoad) Ui.setLoading(val, this.$el)
+    else if (this.pageMode === 'read-more') this.readMoreBtn!.setLoading(val)
+    else if (this.pageMode === 'pagination') this.pagination!.setLoading(val)
+  }
+
   /** 评论获取 */
   public async fetchComments(offset: number) {
     if (this.isLoading) return
 
+    const isFirstLoad = (offset === 0)
+    const setLoading = (val: boolean) => this.setLoading(val, isFirstLoad)
+
     // 加载动画
-    const showLoading = () => {
-      this.isLoading = true
-      if (offset === 0) Ui.showLoading(this.$el)
-      else if (this.pageMode === 'read-more') this.readMoreBtn!.setLoading(true)
-      else if (this.pageMode === 'pagination') this.pagination!.setLoading(true)
-    }
-    const hideLoading = () => {
-      this.isLoading = false
-      if (offset === 0) Ui.hideLoading(this.$el)
-      else if (this.pageMode === 'read-more') this.readMoreBtn!.setLoading(false)
-      else if (this.pageMode === 'pagination') this.pagination!.setLoading(false)
-    }
-    showLoading()
+    setLoading(true)
 
     // 事件通知（开始加载评论）
     this.ctx.trigger('list-load')
 
     // 清空评论（加载按钮）
-    if (this.pageMode === 'read-more' && offset === 0) { this.ctx.clearAllComments() }
+    if (isFirstLoad && this.pageMode === 'read-more') {
+      this.ctx.clearAllComments()
+    }
 
     // 请求评论数据
     let listData: ListData
     try {
-      listData = await this.ctx.getApi().get(offset, this.pageSize, this.flatMode, this.paramsEditor)
+      listData = await this.ctx.getApi().comment
+        .get(offset, this.pageSize, this.flatMode, this.paramsEditor)
     } catch (e: any) {
       this.onError(e.msg || String(e), offset, e.data)
       throw e
     } finally {
-      hideLoading()
+      setLoading(false)
     }
 
     // 清除原有错误
@@ -124,7 +126,7 @@ export default class ListLite extends Component {
       this.onError(String(e), offset)
       throw e
     } finally {
-      hideLoading()
+      setLoading(false)
     }
   }
 
@@ -194,15 +196,13 @@ export default class ListLite extends Component {
         const at = this.scrollListenerAt || document
         if (this.autoLoadScrollEvent) at.removeEventListener('scroll', this.autoLoadScrollEvent) // 解除原有
         this.autoLoadScrollEvent = () => {
-          if (this.pageMode !== 'read-more') return
-          if (!this.readMoreBtn) return
-
-          if (!this.readMoreBtn.hasMore) return
-          if (this.isLoading) return
+          if (this.pageMode !== 'read-more'
+            || !this.readMoreBtn?.hasMore
+            || this.isLoading
+          ) return
 
           const $target = this.$el.querySelector<HTMLElement>('.atk-list-comments-wrap > .atk-comment-wrap:nth-last-child(3)') // 获取倒数第3个评论元素
-          if (!$target) return
-          if (Ui.isVisible($target, this.scrollListenerAt)) {
+          if ($target && Ui.isVisible($target, this.scrollListenerAt)) {
             this.readMoreBtn.click() // 自动点击加载更多按钮
           }
         }
@@ -429,6 +429,14 @@ export default class ListLite extends Component {
     this.ctx.trigger('list-inserted', commentData)
   }
 
+  /** 更新评论 */
+  public updateComment(commentData: CommentData) {
+    const comment = this.ctx.findComment(commentData.id)
+    if (comment) {
+      comment.setData(commentData)
+    }
+  }
+
   /** 更新未读数据 */
   public updateUnread(notifies: NotifyData[]) {
     this.unread = notifies

package/src/list/list.ts

@@ -1,7 +1,6 @@
-import '../style/list.less'
-
 import { ListData, NotifyData } from '~/types/artalk-data'
 import Context from '~/types/context'
+import { version as ARTALK_VERSION } from '../../package.json'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import ListHTML from './list.html?raw'
@@ -143,7 +142,7 @@ export default class List extends ListLite {
     // 已阅 API
     const notifyKey = Utils.getQueryParam('atk_notify_key')
     if (notifyKey) {
-      this.ctx.getApi().markRead(notifyKey)
+      this.ctx.getApi().user.markRead(notifyKey)
         .then(() => {
           this.unread = this.unread.filter(o => o.comment_id !== commentId)
           this.updateUnread(this.unread)
@@ -175,7 +174,7 @@ export default class List extends ListLite {
     if (!this.data || !this.data.page) return
 
     this.ctx.editorShowLoading()
-    this.ctx.getApi().pageEdit(this.data.page)
+    this.ctx.getApi().page.pageEdit(this.data.page)
       .then((page) => {
         if (this.data)
           this.data.page = { ...page }

package/src/main.ts

@@ -1,3 +1,6 @@
 import Artalk from './artalk'
+import ListLite from './list/list-lite'
 
 export default Artalk
+
+export { ListLite }

package/src/style/comment.less

@@ -258,9 +258,8 @@
             color: var(--at-color-red);
           }
 
-          &:not(:first-child):not(.atk-hide) {
-            margin-left: 8px;
-            padding-left: 8px;
+          &:not(:last-child):not(.atk-hide) {
+            margin-right: 16px;
           }
 
           &:hover {

package/src/style/main.less

@@ -1,4 +1,9 @@
 @import "./_color.less";
+@import './comment.less';
+@import './list.less';
+@import './pagination.less';
+@import './editor.less';
+@import './sidebar-layer.less';
 
 .artalk {
   position: relative;
@@ -460,4 +465,5 @@ i.atk-icon {
 
 img[atk-emoticon] {
   max-height: 60px;
+  display: initial;
 }

package/test/CSRF.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSRF Test</title>
+
+  <!-- 解除注释来测试当 referer 为空时的行为 -->
+  <!-- <meta name="referrer" content="never"> -->
+</head>
+<body>
+
+  <form action="http://localhost:23366/api/add" method="post">
+    <input type="text" name="name" value="admin">
+    <input type="text" name="email" value="test@example.com">
+    <input type="text" name="link" value="">
+    <input type="text" name="content" value="CSRF Success">
+    <input type="text" name="rid" value="0">
+    <input type="text" name="page_key" value="https://artalk.js.org/">
+    <input type="text" name="site_name" value="ArtalkDocs">
+    <button type="submit">Fire!</button>
+  </form>
+
+</body>
+</html>

package/types/artalk-data.d.ts

@@ -8,6 +8,9 @@ export interface CommentData {
   /** 用户昵称 */
   nick: string
 
+  /** 用户邮箱 (该字段仅管理员可见) */
+  email?: string
+
   /** 用户邮箱（已加密） */
   email_encrypted: string
 

package/types/context.d.ts

@@ -38,7 +38,7 @@ export default interface ContextApi {
   /* 设置持有的同事类 (中介者模式) */
   setApi(api: Api): void
   setEditor(editor: Editor): void
-  setList(list: ListLite): void
+  setList(list?: ListLite): void
   setSidebarLayer(list: SidebarLayer): void
   setCheckerLauncher(checkerLauncher: CheckerLauncher): void
 
@@ -63,21 +63,36 @@ export default interface ContextApi {
   /** 插入评论 */
   insertComment(commentData: CommentData): void
 
+  /** 更新评论 */
+  updateComment(commentData: CommentData): void
+
   /** 评论回复 */
   replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void
 
   /** 取消回复评论 */
   cancelReplyComment(): void
 
+  /** 编辑评论 */
+  editComment(commentData: CommentData, $comment: HTMLElement): void
+
+  /** 取消编辑评论 */
+  cancelEditComment(): void
+
   /** 更新通知数据 */
   updateNotifies(notifies: NotifyData[]): void
 
   /** 列表 - 重新加载数据 */
   listReload(): void
 
+  /** 列表 - 重新加载数据 (别名) */
+  reload(): void
+
   /** 列表 - UI 更新 */
   listRefreshUI(): void
 
+  /** 列表 - HashGoto 功能检测 */
+  listHashGotoCheck(): void
+
   /** 显示侧边栏 */
   showSidebar(payload?: SidebarShowPayload): void
 
@@ -125,4 +140,7 @@ export default interface ContextApi {
 
   /** i18n 翻译 */
   $t(key: keyof I18n, args?: {[key: string]: string}): string
+
+  /** 设置暗黑模式 */
+  setDarkMode(darkMode: boolean): void
 }

package/types/global.d.ts

@@ -1,2 +0,0 @@
-declare const ARTALK_VERSION: string
-declare const ARTALK_LITE: boolean

package/vite-base.config.ts

@@ -1,11 +1,9 @@
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import { version } from './package.json'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
 
 export default defineConfig({
-  define: {
-    ARTALK_VERSION: JSON.stringify(version),
-  },
   css: {
     preprocessorOptions: {
       less: {
@@ -13,5 +11,11 @@ export default defineConfig({
      },
     },
   },
-  plugins: [tsconfigPaths()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      '~': resolve(__dirname),
+    }
+  },
+  plugins: [tsconfigPaths(), dts()],
 })

package/vite.config.ts

@@ -17,7 +17,11 @@ export default Utils.mergeDeep(baseConf, defineConfig({
     },
     rollupOptions: {
       output: {
-        assetFileNames: (assetInfo) => (/\.css$/.test(assetInfo.name) ? "Artalk.css" : "[name].[ext]")
+        assetFileNames: (assetInfo) => (/\.css$/.test(assetInfo.name || '') ? "Artalk.css" : "[name].[ext]"),
+
+        // Entry module "src/main.ts" is using named and default exports together.
+        // Consumers of your bundle will have to use `Artalk["default"]` to access the default export
+        exports: 'named'
       }
     }
   },

package/types/index.d.ts

@@ -1,3 +0,0 @@
-import Artalk from '../src/artalk'
-
-export default Artalk