artalk 2.0.4 → 2.1.1

package/src/style/site-list.less

@@ -0,0 +1,208 @@
+.atk-site-list {
+  & > .atk-header {
+    display: flex;
+    flex-direction: row;
+    padding: 15px 30px;
+    align-items: center;
+
+    .atk-title {
+      flex: auto;
+      padding-right: 10px;
+    }
+
+    .atk-actions {
+      display: flex;
+      flex-direction: row;
+
+      .atk-item {
+        display: flex;
+        height: 30px;
+        width: 30px;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        border-radius: 2px;
+
+        &:hover {
+          background: @color-bg-grey;
+        }
+      }
+    }
+  }
+
+  .atk-site-rows-wrap {
+    position: relative;
+
+    .atk-site-row {
+      display: flex;
+      flex-direction: row;
+      padding: 10px 20px;
+      padding-bottom: 0;
+    }
+
+    .atk-site-item {
+      display: flex;
+      flex-basis: 25%;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 5px;
+      user-select: none;
+      cursor: pointer;
+      border: 1px solid transparent;
+
+      .atk-site-logo {
+        margin: 15px;
+        text-align: center;
+        font-size: 20px;
+        height: 65px;
+        width: 65px;
+        line-height: 65px;
+        background: @color-quote;
+        color: #fff;
+        border-radius: 4px;
+      }
+
+      .atk-site-name {
+        text-align: center;
+        font-size: 15px;
+        color: @color-sub;
+        padding: 0 17px;
+        word-break: break-word;
+      }
+
+      &.atk-active {
+        background-color: @color-bg-grey;
+        border: 1px solid @color-border;
+        margin-top: -1px;
+        border-radius: 0 0 4px 4px;
+
+        .atk-site-name {
+          color: @color-deep;
+        }
+      }
+
+      &:hover {
+        .atk-site-name {
+          color: @color-font;
+        }
+      }
+    }
+  }
+
+  .atk-site-edit, .atk-site-add {
+    position: relative;
+    min-height: 120px;
+    width: 100%;
+    border-top: 1px solid @color-border;
+    border-bottom: 1px solid @color-border;
+    margin-bottom: -10px;
+
+    .atk-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px 30px 0 35px;
+      justify-content: space-between;
+
+      .atk-site-info {
+        .atk-site-name {
+          cursor: pointer;
+          display: inline-block;
+          font-size: 23px;
+          position: relative;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            width: 100%;
+            height: 6px;
+            background: @color-main;
+            opacity: .4;
+            left: 0;
+            bottom: 6px;
+          }
+        }
+
+        .atk-site-urls {
+          display: flex;
+          width: 100%;
+          margin-top: 6px;
+          flex-wrap: wrap;
+          min-height: 23px;
+
+          .atk-url-item {
+            background: @color-bg-grey;
+            color: @color-font;
+            border-radius: 2px;
+            padding: 0 8px;
+            font-size: 13px;
+            margin-bottom: 3px;
+            margin-right: 3px;
+            cursor: pointer;
+
+            &:hover {
+            }
+          }
+        }
+      }
+
+      .atk-close-btn {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover i {
+          background-color: @color-red;
+        }
+      }
+    }
+
+    .atk-main {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      padding: 20px 30px 6px 35px;
+      padding-bottom: 10px;
+
+      .atk-site-text-actions {
+        .atk-list-text-actions();
+        height: 90px;
+        padding: 0;
+        padding-left: 10px;
+
+        .atk-item {
+          margin-bottom: 17px;
+          margin-right: 25px;
+        }
+      }
+
+      .atk-site-btn-actions {
+        .atk-list-btn-actions();
+
+        padding-right: 9px;
+      }
+
+      .atk-item-text-editor-layer {
+        padding: 10px 20px;
+      }
+    }
+  }
+
+  .atk-site-add {
+    position: relative;
+
+    .atk-header {
+      .atk-title {
+        font-size: 20px;
+      }
+    }
+
+    .atk-form {
+      padding: 20px 40px;
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src", "./types"]
+}

package/types/artalk-config.d.ts

@@ -1,79 +1,96 @@
-export interface ArtalkConfig {
-  /**
-   * 装载元素
-   */
+export default interface ArtalkConfig {
+  /** 装载元素 */
   el: string
 
-  /**
-   * 评论框占位字符
-   */
+  /** 评论框占位字符 */
   placeholder?: string
 
-  /**
-   * 评论为空时显示字符
-   */
+  /** 评论为空时显示字符 */
   noComment?: string
 
-  /**
-   * 发送按钮文字
-   */
+  /** 发送按钮文字 */
   sendBtn?: string
 
-  /**
-   * 默认头像（URL or Gravatar Type）
-   */
-  defaultAvatar?: string
-
-  /**
-   * 页面唯一标识
-   */
+  /** 页面唯一标识（完整 URL） */
   pageKey: string
 
-  /**
-   * 页面可访问链接
-   */
-  pageUrl?: string
-
-  /**
-   * 页面标题
-   */
+  /** 页面标题 */
   pageTitle?: string
 
-  /**
-   * 服务器地址
-   */
+  /** 服务器地址 */
   server: string
- 
-  /**
-   * 站点名
-   */
+
+  /** 站点名 */
   site?: string
 
-  /**
-   * 表情包
-   */
+  /** 表情包 */
   emoticons?: object|any
 
-  /**
-   * 头像
-   */
+  /** Gravatar 头像 */
   gravatar?: {
-    /** CDN 地址 */
-    cdn?: string
+    /** 镜像 */
+    mirror?: string
+    /** 默认头像（URL or Gravatar Type） */
+    default?: string
   }
 
-  /**
-   * 查看更多配置
-   */
-  readMore?: {
+  /** 分页配置 */
+  pagination?: {
     /** 每次请求获取数量 */
     pageSize?: number
+    /** 阅读更多模式 */
+    readMore?: boolean
     /** 滚动到底部自动加载 */
     autoLoad?: boolean
   }
 
-  /**
-   * 暗黑模式
-   */
+  /** 内容限高 */
+  heightLimit: {
+    /** 评论内容限高 */
+    content?: number
+
+    /** 子评论区域限高 */
+    children?: number
+  }
+
+  /** 评论投票按钮 */
+  vote?: boolean
+
+  /** 评论投票反对按钮 */
+  voteDown?: boolean
+
+  /** 暗黑模式 */
   darkMode?: boolean
+
+  /** 请求超时（单位：秒） */
+  reqTimeout?: number
+
+  /** 平铺模式 */
+  flatMode?: boolean|'auto'
+
+  /** 最大嵌套数 */
+  maxNesting?: number
+
+  /** 显示 UA 徽标 */
+  uaBadge?: boolean
+
+  /** 版本检测 */
+  versionCheck?: boolean
+}
+
+export interface LocalUser {
+  /** 昵称 */
+  nick: string
+
+  /** 邮箱 */
+  email: string
+
+  /** 链接 */
+  link: string
+
+  /** TOKEN */
+  token: string
+
+  /** 是否为管理员 */
+  isAdmin: boolean
 }

package/types/artalk-data.d.ts

@@ -76,11 +76,17 @@ export interface ListData {
   /** 页面信息 */
   page: PageData
 
+  /** 站点信息 */
+  site: SiteData
+
+  /** 未读的 Notifies */
   unread: NotifyData[]
 
+  /** 未读计数 */
   unread_count: number
 
-  sites?: SiteData[]
+  /** API 版本 */
+  api_version: ApiVersionData
 }
 
 export interface PageData {
@@ -101,6 +107,12 @@ export interface PageData {
 
   /** 站点名（用于隔离） */
   site_name: string
+
+  /** 赞同数 */
+  vote_up: number
+
+  /** 反对数 */
+  vote_down: number
 }
 
 export interface SiteData {
@@ -144,10 +156,35 @@ export interface UserData {
 }
 
 export interface NotifyData {
+  /** 通知 ID */
   id: number
+
+  /** 用户 ID */
   user_id: number
+
+  /** 评论 ID */
   comment_id: number
+
+  /** 是否已读 */
   is_read: boolean
+
+  /** 是否已发送邮件通知 */
   is_emailed: boolean
+
+  /** 标为已读地址 */
   read_link: string
 }
+
+export interface ApiVersionData {
+  /** API 程序名 */
+  app: string
+
+  /** API 程序版本号 */
+  version: string
+
+  /** API 程序 CommitHash */
+  commit_hash: string
+
+    /** API 程序要求前端最小版本 */
+  fe_min_version: string
+}

package/types/event.d.ts

@@ -0,0 +1,73 @@
+import { ListData, CommentData, NotifyData } from './artalk-data'
+import { LocalUser } from './artalk-config'
+
+/** EventName to EventPayload Type */
+export interface EventPayloadMap {
+  'comments-load': undefined       // 评论加载时
+  'comments-loaded': undefined     // 评论装载后
+  'editor-submit': undefined       // 编辑器提交时
+  'editor-submitted': undefined    // 编辑器提交后
+  'user-changed': LocalUser        // 本地用户数据变更时
+
+  // 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': undefined           // 侧边栏显示
+  'sidebar-hide': undefined           // 侧边栏隐藏
+
+  // Editor
+  'editor-open': undefined            // 打开评论
+  'editor-close': undefined           // 关闭评论
+  'editor-show-loading': undefined    // 加载显示
+  'editor-hide-loading': undefined    // 加载隐藏
+  'editor-notify': NotifyConf         // 显示提示
+  'editor-reply': CommentData         // 设置回复
+
+  // 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
+}
+
+export interface UnreadUpdatePayload {
+  notifies: NotifyData[]
+}
+
+export type ListUpdatePayload = (data: ListData | undefined) => void
+
+// ============================================
+export interface Handler<P> {
+  (payload: P): void
+}
+
+export type EventScopeType = 'internal'|'external'
+
+export interface Event<K extends keyof EventPayloadMap = keyof EventPayloadMap> {
+  name: keyof EventPayloadMap
+  handler: Handler<EventPayloadMap[K]>
+  scope: EventScopeType
+}

package/types/index.d.ts

@@ -1,8 +1,3 @@
-import { ArtalkConfig } from "./artalk-config"
+import Artalk from '../src/artalk'
 
-declare class Artalk {
-  constructor (conf: ArtalkConfig)
-}
-
-export as namespace Artalk
 export default Artalk

package/.github/workflows/npm.yml

@@ -1,31 +0,0 @@
-# https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-name: NPM Publish
-
-on:
-  push:
-    tags:
-      - v*
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    # Setup .npmrc file to publish to npm
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '12.x'
-        registry-url: 'https://registry.npmjs.org'
-    - run: yarn
-    - run: yarn build
-    - run: yarn publish --non-interactive
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-    # Setup .npmrc file to publish to GitHub Packages
-    - uses: actions/setup-node@v2
-      with:
-        registry-url: 'https://npm.pkg.github.com'
-    # Publish to GitHub Packages
-    - run: yarn publish --non-interactive
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/pages.yml

@@ -1,30 +0,0 @@
-name: GitHub Pages
-
-on:
-  push:
-    branches:
-      - master
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-    - name: Setup
-      uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-    - name: Install
-      run: yarn install
-    - name: Build
-      run: yarn predeploy
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_branch: gh-pages
-        publish_dir: ./deploy
-        user_name: 'github-actions[bot]'
-        user_email: 'github-actions[bot]@users.noreply.github.com'

package/dist/src/Event.d.ts

@@ -1,59 +0,0 @@
-import { ListData, CommentData, NotifyData } from '~/types/artalk-data'
-
-/** EventName to EventPayload Type */
-export interface EventPayloadMap {
-  'list-loading': undefined
-  'list-clear': undefined
-  'list-refresh-ui': undefined
-  'list-import': CommentData[]
-  'list-insert': CommentData
-  'list-comment-del': CommentData
-  'list-reload': undefined
-  'list-update-data': (data: ListData | undefined) => void
-  'sidebar-show'?: SidebarShowPayload
-  'sidebar-hide': undefined
-  'check-admin-show-el': undefined
-  'editor-open-comment': undefined
-  'editor-close-comment': undefined
-  'editor-show-loading': undefined
-  'editor-hide-loading': undefined
-  'editor-notify': NotifyConf
-  'editor-reply': CommentData
-  'user-changed': undefined
-  'unread-update': UnreadUpdatePayload
-  'checker-admin': CheckerConf
-  'checker-captcha': CheckerCaptchaConf
-}
-
-export interface CheckerConf {
-  onSuccess?: (inputVal: string, dialogEl?: HTMLElement) => void
-  onMount?: (dialogEl: HTMLElement) => void
-  onCancel?: () => void
-}
-
-export interface NotifyConf {
-  msg: string
-  type: any
-}
-
-export interface CheckerCaptchaConf extends CheckerConf {
-  imgData?: string
-}
-
-export interface SidebarShowPayload {
-  viewName?: string
-}
-
-export interface UnreadUpdatePayload {
-  notifies: NotifyData[]
-}
-
-// ============================================
-export interface Listener<P> {
-  (payload: P): void
-}
-
-export interface Event<K extends keyof EventPayloadMap = keyof EventPayloadMap> {
-  name: keyof EventPayloadMap
-  listener: Listener<EventPayloadMap[K]>
-}