artalk 2.2.11 → 2.3.1

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,20 +49,20 @@
     float: left;
 
     img {
-      width: 48px;
-      height: 48px;
-      border-radius: 3px;
+      width: 50px;
+      height: 50px;
+      border-radius: (@block-radius / 2);
     }
   }
 
   & > .atk-main {
     display: block;
-    margin-left: 62px;
+    margin-left: 63px;
 
     & > .atk-header {
       line-height: 1;
       font-size: 13px;
-      margin-bottom: 3px;
+      margin-bottom: .5em;
       overflow: hidden;
       position: relative;
       display: flex;
@@ -71,6 +71,8 @@
 
       .atk-item {
         display: flex;
+        align-items: center;
+        margin-top: 2px;
         margin-bottom: 2px;
         color: var(--at-color-meta);
 
@@ -107,17 +109,22 @@
       }
 
       .badge() {
+        display: inline-block;
         color: var(--at-color-meta);
         background: var(--at-color-bg-grey);
-        padding: 0 6px;
-        line-height: 18px;
-        border-radius: 3px;
+        padding: 0px 6px;
+        line-height: 17px;
+        border-radius: (@block-radius / 2);
 
         &:not(:last-child) {
           margin-right: 6px;
         }
       }
 
+      .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;
@@ -23,7 +23,7 @@
       font-size: 14px;
       background: transparent;
       border: 2px solid transparent;
-      border-radius: calc(@block-radius / 2);
+      border-radius: (@block-radius / 2);
       padding: 6px 5px;
       resize: none;
       outline: none;
@@ -44,11 +44,11 @@
       font-size: 15px;
       background-color: var(--at-color-bg);
       border: 2px solid transparent;
-      border-radius: calc(@block-radius / 2);
+      border-radius: (@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;
@@ -61,15 +61,16 @@
       background-color: var(--at-color-bg);
       border-top: 1px solid var(--at-color-border);
       padding: 5px 15px;
+      margin-top: 10px;
       // background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
     }
 
     & > .atk-send-reply {
       z-index: 2;
       position: absolute;
-      right: 10px;
-      bottom: 8px;
-      max-width: calc(100% - 20px);
+      right: 7px;
+      bottom: 2px;
+      max-width: (100% - 20px);
       height: 30px;
       line-height: 30px;
       font-size: 14px;
@@ -79,6 +80,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
+      border-radius: (@block-radius / 2);
 
       .atk-text {
       }
@@ -100,7 +102,7 @@
     }
   }
 
-  & > .atk-plug-wrap {
+  & > .atk-plug-panel-wrap {
     position: relative;
     height: 180px;
     width: 100%;
@@ -114,8 +116,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;
@@ -125,13 +126,19 @@
 
     .atk-plug-btn {
       padding: 0 8px;
+      line-height: 24px;
       cursor: pointer;
       color: var(--at-color-grey);
       font-size: @font-size;
       user-select: none;
+      border-radius: (@block-radius / 2);
 
       &:not(:last-child) {
-        border-right: 1px solid var(--at-color-border);
+        margin-right: 2px;
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
       }
 
       &.active {
@@ -164,6 +171,7 @@
       cursor: pointer;
       transition: opacity 0.3s ease-in-out;
       outline: none;
+      border-radius: (@block-radius / 2);
 
       &:active {
         opacity: 0.9;
@@ -175,7 +183,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;
@@ -23,7 +22,7 @@
         border-left: 3px solid transparent;
         border-right: 3px solid transparent;
         margin-top: -1px;
-        margin-left: 0.4rem;
+        margin-left: 0.8rem;
         display: inline-block;
       }
 
@@ -47,7 +46,7 @@
         padding: 0.6rem 0;
         border: 1px solid var(--at-color-border);
         text-align: center;
-        border-radius: 0.25rem;
+        border-radius: @block-radius;
         white-space: nowrap;
         margin: 0;
         list-style: none;
@@ -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

@@ -7,9 +7,7 @@
 }
 
 .artalk, .atk-layer-wrap {
-  line-height: @line-height;
   color: var(--at-color-font);
-  font-family: @font-family;
   word-wrap: break-word;
   word-break: break-all;
 
@@ -28,7 +26,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;
@@ -62,6 +62,7 @@
     padding: 10px 20px 10px 20px;
     background: var(--at-color-bg-grey);
     border-left: 4px solid #687a86;
+    color: var(--at-color-font);
   }
 
   p:first-child {
@@ -309,10 +310,10 @@ i.atk-icon {
 
       input {
         width: 100%;
-        line-height: calc(@formInputHeight + 4px);
+        line-height: (@formInputHeight + 4px);
         background-color: var(--at-color-bg);
         border: 1px solid var(--at-color-border);
-        border-radius: calc(@block-radius / 2);
+        border-radius: (@block-radius / 2);
         outline: none;
         padding: 0 6px;
         display: block;
@@ -333,7 +334,7 @@ i.atk-icon {
         border: 1px solid var(--at-color-main);
         background: transparent;
         color: var(--at-color-main);
-        border-radius: calc(@block-radius / 2);
+        border-radius: (@block-radius / 2);
         padding: 0 15px;
         line-height: @formInputHeight;
         outline: none;
@@ -403,10 +404,10 @@ i.atk-icon {
   overflow: hidden;
   background-color: #2c2c2c;
   color: #FFF;
-  border-radius: 2px;
+  border-radius: (@block-radius / 2);
   cursor: pointer;
   font-size: 14px;
-  padding: 4px 15px;
+  padding: 5px 15px;
 
   &:not(:last-child) {
     margin-bottom: 3px;

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/ArtalkCount.html

@@ -0,0 +1,16 @@
+<script src="../dist/Artalk.js"></script>
+
+<div class="pv" data-page-key="https://artalk.js.org/">0</div>
+<div class="pv" data-page-key="https://artalk.js.org/guide/intro.html">0</div>
+
+<div class="count" data-page-key="https://artalk.js.org/">0</div>
+<div class="count" data-page-key="https://artalk.js.org/guide/intro.html">0</div>
+
+<script>
+  var artalk = Artalk.LoadCountWidget({
+    server: 'http://localhost:23366',
+    site: 'ArtalkDocs',
+    pvEl: '.pv',
+    countEl: ".count",
+  });
+</script>

package/test/ArtalkI18n.html

@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="../dist/Artalk.css">
+<script src="../dist/Artalk.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',
+    locale: 'auto',
+  });
+</script>

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?: any
+  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
+  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