artalk 2.2.12 → 2.3.0

package/src/style/comment.less

@@ -1,7 +1,7 @@
 .atk-comment-wrap {
   overflow: hidden;
   position: relative;
-  border-bottom: 1px solid var(--at-color-border);
+  border-bottom: 1px solid transparent;
 
   &.atk-flash-once {
     animation: atkFlashOnce 1s ease-in-out 0s;
@@ -49,15 +49,15 @@
     float: left;
 
     img {
-      width: 48px;
-      height: 48px;
+      width: 50px;
+      height: 50px;
       border-radius: 3px;
     }
   }
 
   & > .atk-main {
     display: block;
-    margin-left: 62px;
+    margin-left: 63px;
 
     & > .atk-header {
       line-height: 1;
@@ -71,6 +71,8 @@
 
       .atk-item {
         display: flex;
+        align-items: center;
+        margin-top: 2px;
         margin-bottom: 2px;
         color: var(--at-color-meta);
 
@@ -107,10 +109,11 @@
       }
 
       .badge() {
+        display: inline-block;
         color: var(--at-color-meta);
         background: var(--at-color-bg-grey);
-        padding: 0 6px;
-        line-height: 18px;
+        padding: 0px 6px;
+        line-height: 17px;
         border-radius: 3px;
 
         &:not(:last-child) {
@@ -118,6 +121,10 @@
         }
       }
 
+      .atk-badge-wrap > *:last-child {
+        margin-right: 6px;
+      }
+
       .atk-badge {
         .badge();
         color: #fff;
@@ -136,6 +143,7 @@
       .atk-ua-wrap {
         @media only screen and (max-width: 768px) {
           display: block;
+          margin-top: 5px;
         }
       }
     }
@@ -253,7 +261,6 @@
           &:not(:first-child):not(.atk-hide) {
             margin-left: 8px;
             padding-left: 8px;
-            border-left: 1px solid var(--at-color-border);
           }
 
           &:hover {
@@ -291,6 +298,10 @@
     font-size: 15px;
     color: var(--at-color-meta);
     user-select: none;
+
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
   }
 
   // 避免重复显示按钮
@@ -303,15 +314,14 @@
 .atk-comment-children {
   & > .atk-comment-wrap {
     margin-top: 10px;
-    border-left: 1px dashed var(--at-color-border);
+    border-left: 1px dashed transparent;
     border-bottom-color: transparent;
     &:not(:last-child) {
       margin-bottom: 5px;
     }
 
     & > .atk-comment {
-      padding-top: 4px;
-      padding-bottom: 4px;
+      padding: 4px 0;
 
       & > .atk-avatar img {
         width: 36px;
@@ -320,6 +330,9 @@
 
       & > .atk-main {
         margin-left: 47px;
+
+        & > .atk-body > .atk-content {
+        }
       }
     }
   }

package/src/style/editor.less

@@ -6,7 +6,7 @@
   background: var(--at-color-bg);
   border: 1px solid var(--at-color-border);
   border-radius: @block-radius;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 
   @media only screen and (max-width: 768px) {
     margin-bottom: 7px;
@@ -15,7 +15,7 @@
   & > .atk-header {
     display: flex;
     flex-direction: row;
-    padding: calc(@editor-padding / 2) @editor-padding 0;
+    padding: 10px 14px 0;
 
     input {
       flex: 1;
@@ -46,9 +46,9 @@
       border: 2px solid transparent;
       border-radius: calc(@block-radius / 2);
       width: 100%;
-      min-height: 130px;
+      min-height: 120px;
       margin-top: 2px;
-      padding: @editor-padding calc(10px + 5px);
+      padding: 10px 20px;
       resize: none;
       word-wrap: break-word;
       outline: none;
@@ -67,7 +67,7 @@
     & > .atk-send-reply {
       z-index: 2;
       position: absolute;
-      right: 10px;
+      right: 7px;
       bottom: 8px;
       max-width: calc(100% - 20px);
       height: 30px;
@@ -79,6 +79,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
+      border-radius: @block-radius;
 
       .atk-text {
       }
@@ -100,7 +101,7 @@
     }
   }
 
-  & > .atk-plug-wrap {
+  & > .atk-plug-panel-wrap {
     position: relative;
     height: 180px;
     width: 100%;
@@ -114,8 +115,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-top: 1px solid var(--at-color-border);
-    padding: 0 0 0 calc(@editor-padding - 5px);
+    padding: 5px 5px 5px 10px;
 
     & > .atk-item {
       display: flex;
@@ -129,9 +129,14 @@
       color: var(--at-color-grey);
       font-size: @font-size;
       user-select: none;
+      border-radius: @block-radius;
 
       &:not(:last-child) {
-        border-right: 1px solid var(--at-color-border);
+        margin-right: 2px;
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
       }
 
       &.active {
@@ -164,6 +169,7 @@
       cursor: pointer;
       transition: opacity 0.3s ease-in-out;
       outline: none;
+      border-radius: @block-radius;
 
       &:active {
         opacity: 0.9;
@@ -175,7 +181,7 @@
     z-index: 9;
     position: absolute;
     right: -2px;
-    bottom: 36px;
+    bottom: 40px;
     width: 225px;
     opacity: 0.83;
   }

package/src/style/list.less

@@ -4,8 +4,7 @@
   & > .atk-list-header {
     display: flex;
     flex-direction: row;
-    padding: 10px 10px 5px 10px;
-    border-bottom: 1px solid var(--at-color-border);
+    padding: 10px 17px 10px 17px;
 
     .atk-text {
       display: inline-block;
@@ -103,7 +102,6 @@
         &:not(:last-child):not(.atk-hide) {
           margin-right: 10px;
           padding-right: 10px;
-          border-right: 1px solid var(--at-color-border);
         }
 
         .atk-unread-badge {
@@ -129,7 +127,6 @@
 
     .atk-list-comments-wrap {
       .atk-main-editor {
-        margin-top: -1px;
       }
     }
   }
@@ -171,8 +168,8 @@
 
 .atk-list-read-more {
   border-top: 1px dashed var(--at-color-border);
-  margin-top: 20px;
-  padding-bottom: 20px;
+  margin-top: 28px;
+  padding-bottom: 25px;
 
   @media only screen and (max-width: 768px) {
     padding-bottom: 10px;
@@ -210,8 +207,8 @@
     }
 
     &:hover {
+      background: var(--at-color-bg-grey);
       & > .atk-text {
-        color: var(--at-color-main);
       }
     }
   }

package/src/style/main.less

@@ -28,7 +28,9 @@
   code {
     font-family: @codeFont;
     margin: 0 .3em;
-    padding: .1em .2em;
+    padding: 0 .5em;
+    display: inline-block;
+    font-size: .9em;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
     border-radius: @block-radius;

package/src/style/pagination.less

@@ -8,7 +8,7 @@
   & > .atk-btn,
   & > .atk-input {
     font-size: 15px;
-    height: 32px;
+    height: 30px;
     border: 1px solid var(--at-color-border);
     border-radius: 3px;
     padding: 0 5px;

package/test/ArtalkLite.html

@@ -0,0 +1,15 @@
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<link rel="stylesheet" href="../dist/ArtalkLite.css">
+<script src="../dist/ArtalkLite.js"></script>
+
+<div id="comments"></div>
+
+<script>
+    var artalk = new Artalk({
+      el: '#comments',
+      pageKey: 'https://artalk.js.org/',
+      pageTitle: 'Artalk Home',
+      server: 'http://localhost:23366',
+      site: 'ArtalkDocs',
+    });
+</script>

package/types/artalk-config.d.ts

@@ -1,3 +1,5 @@
+import { I18n } from '~/src/i18n'
+
 export default interface ArtalkConfig {
   /** 装载元素 */
   el: string|HTMLElement
@@ -6,96 +8,112 @@ export default interface ArtalkConfig {
   pageKey: string
 
   /** 页面标题 */
-  pageTitle?: string
+  pageTitle: string
 
   /** 服务器地址 */
   server: string
 
   /** 站点名 */
-  site?: string
+  site: string
 
   /** 评论框占位字符 */
-  placeholder?: string
+  placeholder: string
 
   /** 评论为空时显示字符 */
-  noComment?: string
+  noComment: string
 
   /** 发送按钮文字 */
-  sendBtn?: string
+  sendBtn: string
 
   /** 评论框旅行（显示在待回复评论后面） */
-  editorTravel?: boolean
+  editorTravel: boolean
 
   /** 表情包 */
-  emoticons?: object|any[]|string|false
+  emoticons: object|any[]|string|false
 
   /** Gravatar 头像 */
-  gravatar?: {
+  gravatar: {
     /** 镜像 */
-    mirror?: string
+    mirror: string
     /** 默认头像（URL or Gravatar Type） */
-    default?: string
+    default: string
   }
 
   /** 分页配置 */
-  pagination?: {
+  pagination: {
     /** 每次请求获取数量 */
-    pageSize?: number
+    pageSize: number
     /** 阅读更多模式 */
-    readMore?: boolean
+    readMore: boolean
     /** 滚动到底部自动加载 */
-    autoLoad?: boolean
+    autoLoad: boolean
   }
 
   /** 内容限高 */
-  heightLimit?: {
+  heightLimit: {
     /** 评论内容限高 */
-    content?: number
+    content: number
 
     /** 子评论区域限高 */
-    children?: number
+    children: number
   }
 
   /** 评论投票按钮 */
-  vote?: boolean
+  vote: boolean
 
   /** 评论投票反对按钮 */
-  voteDown?: boolean
+  voteDown: boolean
+
+  /** 评论预览功能 */
+  preview: boolean
+
+  /** 评论数绑定元素 Selector */
+  countEl: string
 
-  /** PV 元素 Selector */
-  pvEl?: string
+  /** PV 数绑定元素 Selector */
+  pvEl: string
 
   /** 暗黑模式 */
-  darkMode?: boolean|'auto'
+  darkMode: boolean|'auto'
 
   /** 请求超时（单位：秒） */
-  reqTimeout?: number
+  reqTimeout: number
 
   /** 平铺模式 */
-  flatMode?: boolean|'auto'
+  flatMode: boolean|'auto'
 
   /** 嵌套模式 · 最大层数 */
-  nestMax?: number
+  nestMax: number
 
   /** 嵌套模式 · 排序方式 */
-  nestSort?: 'DATE_ASC'|'DATE_DESC'
+  nestSort: 'DATE_ASC'|'DATE_DESC'
 
   /** 显示 UA 徽标 */
-  uaBadge?: boolean
+  uaBadge: boolean
 
   /** 评论列表排序功能 (显示 Dropdown) */
-  listSort?: boolean
+  listSort: boolean
 
   /** 图片上传功能 */
-  imgUpload?: boolean
+  imgUpload: boolean
+
+  /** 图片上传器 */
+  imgUploader?: (file: File) => Promise<{ img_url: string }>
 
   /** 版本检测 */
-  versionCheck?: boolean
+  versionCheck: boolean
+
+  /** 应用后端配置 */
+  useBackendConf: boolean
 
-  /** 复用后端配置 */
-  useBackendConf?: boolean
+  /** 语言本地化 */
+  locale: I18n|string
 }
 
+/**
+ * 本地持久化用户数据
+ * @note 始终保持一层结构，不支持多层结构
+ */
 export interface LocalUser {
   /** 昵称 */
   nick: string

package/types/context.d.ts

@@ -0,0 +1,128 @@
+import { marked as libMarked } from 'marked'
+import ArtalkConfig from './artalk-config'
+import { CommentData, NotifyData } from './artalk-data'
+import { EventPayloadMap, Event, EventScopeType, Handler } from './event'
+import { internal as internalLocales, I18n } from '../src/i18n'
+import Api from '../src/api'
+import User from '../src/lib/user'
+import Editor from '../src/editor'
+import Comment from '../src/comment'
+import ListLite from '../src/list/list-lite'
+import SidebarLayer, { SidebarShowPayload } from '../src/layer/sidebar-layer'
+import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+
+/**
+ * Context 接口
+ *
+ * (面向接口的编程)
+ */
+export default interface ContextApi {
+  /** Context 唯一标识 */
+  cid: number
+
+  /** Artalk 根元素对象 */
+  $root: HTMLElement
+
+  /** 配置对象 */
+  conf: ArtalkConfig
+
+  /** 用户对象 */
+  user: User
+
+  /** marked 依赖对象 */
+  markedInstance?: typeof libMarked
+
+  /** marked 内容替换器 */
+  markedReplacers: ((raw: string) => string)[]
+
+  /* 设置持有的同事类 (中介者模式) */
+  setApi(api: Api): void
+  setEditor(editor: Editor): void
+  setList(list: ListLite): void
+  setSidebarLayer(list: SidebarLayer): void
+  setCheckerLauncher(checkerLauncher: CheckerLauncher): void
+
+  /** 获取 API 以供 HTTP 请求 */
+  getApi(): Api
+
+  /** 获取评论实例对象列表 */
+  getCommentList(): Comment[]
+
+  /** 获取评论数据列表 */
+  getCommentDataList(): CommentData[]
+
+  /** 查找评论 */
+  findComment(id: number): Comment|undefined
+
+  /** 删除评论 */
+  deleteComment(comment: number|Comment): void
+
+  /** 清空评论 */
+  clearAllComments(): void
+
+  /** 插入评论 */
+  insertComment(commentData: CommentData): void
+
+  /** 评论回复 */
+  replyComment(commentData: CommentData, $comment: HTMLElement, scroll?: boolean): void
+
+  /** 取消回复评论 */
+  cancelReplyComment(): void
+
+  /** 更新通知数据 */
+  updateNotifies(notifies: NotifyData[]): void
+
+  /** 列表 - 重新加载数据 */
+  listReload(): void
+
+  /** 列表 - UI 更新 */
+  listRefreshUI(): void
+
+  /** 显示侧边栏 */
+  showSidebar(payload?: SidebarShowPayload): void
+
+  /** 隐藏侧边栏 */
+  hideSidebar(): void
+
+  /** 编辑器 - 关闭评论 */
+  editorClose(): void
+
+  /** 编辑器 - 打开评论 */
+  editorOpen(): void
+
+  /** 编辑器 - 显示加载 */
+  editorShowLoading(): void
+
+  /** 编辑器 - 隐藏加载 */
+  editorHideLoading(): void
+
+  /** 编辑器 - 显示提示消息 */
+  editorShowNotify(msg: string, type: "i" | "s" | "w" | "e"): void
+
+  /** 评论框 - 位置移动 */
+  editorTravel($el: HTMLElement): void
+
+  /** 评论框 - 位置回归 */
+  editorTravelBack(): void
+
+  /** 验证码检测 */
+  checkCaptcha(payload: CheckerCaptchaPayload): void
+
+  /** 管理员检测 */
+  checkAdmin(payload: CheckerPayload): void
+
+  /** 管理员显示元素可见性更新 */
+  checkAdminShowEl(): void
+
+  /** 订阅注册 */
+  on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>, scope?: EventScopeType): void
+
+  /** 订阅取消 */
+  off<K extends keyof EventPayloadMap>(name: K, handler?: Handler<EventPayloadMap[K]>, scope?: EventScopeType): void
+
+  /** 订阅发布 */
+  trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K], scope?: EventScopeType): void
+
+  /** i18n 翻译 */
+  $t(key: keyof I18n, args?: {[key: string]: string}): string
+}

package/types/event.d.ts

@@ -1,77 +1,17 @@
-import { ListData, CommentData, NotifyData } from './artalk-data'
+import { CommentData } from './artalk-data'
 import { LocalUser } from './artalk-config'
 
 /** EventName to EventPayload Type */
 export interface EventPayloadMap {
-  'comments-load': undefined       // 评论加载时
-  'comments-loaded': undefined     // 评论装载后
+  'list-load': undefined           // 评论加载时
+  'list-loaded': undefined         // 评论装载后
+  'list-inserted': CommentData     // 评论插入后
   'editor-submit': undefined       // 编辑器提交时
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
   'conf-updated': undefined        // Artalk 配置变更时
-
-  // List 操作（外部：不建议 listen，仅 trigger）
-  'list-reload': undefined         // 重新加载 List
-  'list-import': CommentData[]     // 评论导入
-  'list-insert': CommentData       // 评论添加
-  'list-delete': CommentData       // 评论删除
-  'list-update': ListUpdatePayload // 更新评论数据
-  'list-refresh-ui': undefined     // 刷新 List UI
-
-  // Sidebar
-  'sidebar-show': SidebarShowPayload  // 侧边栏显示
-  'sidebar-hide': undefined           // 侧边栏隐藏
-
-  // Editor
-  'editor-open': undefined            // 打开评论
-  'editor-close': undefined           // 关闭评论
-  'editor-show-loading': undefined    // 加载显示
-  'editor-hide-loading': undefined    // 加载隐藏
-  'editor-notify': NotifyConf         // 显示提示
-  'editor-reply': EditorReplyPayload  // 设置回复
-  'editor-reply-cancel': undefined    // 取消回复
-  'editor-travel': HTMLElement
-  'editor-travel-back': undefined
-
-  // Notify
-  'unread-update': UnreadUpdatePayload // 未读数据更新
-
-  // Checker
-  'checker-admin': CheckerPayload           // 检查管理员
-  'checker-captcha': CheckerCaptchaPayload  // 检查验证码
-  'check-admin-show-el': undefined          // 检查并更新仅管理员显示的元素
-}
-
-export interface CheckerPayload {
-  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
-  onMount?: (dialogEl: HTMLElement) => void
-  onCancel?: () => void
-}
-
-export interface NotifyConf {
-  msg: string
-  type: any
-}
-
-export interface CheckerCaptchaPayload extends CheckerPayload {
-  imgData?: string
-  iframe?: string
-}
-
-export interface UnreadUpdatePayload {
-  notifies: NotifyData[]
-}
-
-export type ListUpdatePayload = (data: ListData | undefined) => void
-
-export interface EditorReplyPayload {
-  data: CommentData
-  $el: HTMLElement
-  scroll?: boolean
-}
-
-export interface SidebarShowPayload {
-  view?: 'comments'|'sites'|'pages'|'transfer'|string
+  'sidebar-show': undefined        // 侧边栏显示
+  'sidebar-hide': undefined        // 侧边栏隐藏
 }
 
 // ============================================

package/types/global.d.ts

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

package/{vite-common.config.ts → vite-base.config.ts}

@@ -1,9 +1,10 @@
-import { UserConfigExport } from 'vite'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
 import { version } from './package.json'
 
-export default {
+export default defineConfig({
   define: {
-    ARTALK_VERSION: JSON.stringify(version)
+    ARTALK_VERSION: JSON.stringify(version),
   },
   css: {
     preprocessorOptions: {
@@ -12,4 +13,5 @@ export default {
      },
     },
   },
-} as UserConfigExport
+  plugins: [tsconfigPaths()],
+})

package/vite-demo.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import { resolve } from 'path'
-import commonConf from './vite-common.config'
-import tsconfigPaths from 'vite-tsconfig-paths'
+import baseConf from './vite-base.config'
 
 export default defineConfig({
   build: {
@@ -9,6 +8,5 @@ export default defineConfig({
     outDir: resolve(__dirname, "deploy"),
     rollupOptions: {}
   },
-  plugins: [tsconfigPaths()],
-  ...commonConf
+  ...baseConf
 })