artalk 2.1.0 → 2.1.4

package/src/style/sidebar.less

@@ -9,7 +9,7 @@
   right: 0;
   width: @width;
   height: 100%;
-  background: @color-bg;
+  background: var(--at-color-bg);
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   transform: translate(@width, 0px);
 
@@ -28,7 +28,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 1px solid @color-border;
+    border-bottom: 1px solid var(--at-color-border);
 
     .atk-avatar {
       display: flex;
@@ -42,11 +42,11 @@
         height: @height;
         width: @header-height - 30px;
         border-radius: 2px;
-        background: @color-meta;
+        background: var(--at-color-meta);
         text-align: center;
         line-height: @height;
         font-size: 13px;
-        color: @color-bg;
+        color: var(--at-color-bg);
       }
 
       .atk-site-logo {
@@ -61,7 +61,7 @@
 
       .atk-item {
         position: relative;
-        color: @color-sub;
+        color: var(--at-color-sub);
         font-size: 20px;
         // cursor: pointer;
         user-select: none;
@@ -71,7 +71,7 @@
         }
 
         &.atk-active {
-          color: @color-font;
+          color: var(--at-color-font);
 
           &:after {
             content: ' ';
@@ -80,7 +80,7 @@
             left: 0;
             width: 100%;
             height: 6px;
-            background: @color-main;
+            background: var(--at-color-main);
             opacity: .4;
           }
         }
@@ -108,14 +108,14 @@
   .atk-sidebar-nav {
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid @color-border;
+    border-bottom: 1px solid var(--at-color-border);
     height: @nav-height + 1px;
 
     .akt-curt-view-btn {
       display: flex;
       align-items: center;
       padding: 0 20px;
-      border-right: 1px solid @color-border;
+      border-right: 1px solid var(--at-color-border);
       cursor: pointer;
       user-select: none;
       height: @nav-height;
@@ -123,7 +123,7 @@
       white-space: nowrap;
 
       &:hover {
-        background: @color-bg-grey;
+        background: var(--at-color-bg-grey);
       }
 
       .atk-icon {
@@ -135,7 +135,7 @@
           width: 14px;
           height: 1px;
           margin: 0 auto 4px;
-          background: @color-deep;
+          background: var(--at-color-deep);
           transform-origin: 20px;
 
           &:last-child {
@@ -185,18 +185,18 @@
       .atk-tab-item {
         line-height: @nav-height;
         height: @nav-height;
-        color: @color-sub;
+        color: var(--at-color-sub);
         cursor: pointer;
         user-select: none;
         padding: 0 20px;
         white-space: nowrap;
 
         &:hover {
-          background: @color-bg-grey;
+          background: var(--at-color-bg-grey);
         }
 
         &.atk-active {
-          color: @color-deep;
+          color: var(--at-color-deep);
         }
       }
     }
@@ -211,11 +211,11 @@
     top: 70px;
     transform: translateX(-50%);
     pointer-events: all;
-    background: @color-bg;
+    background: var(--at-color-bg);
     width: 80%;
     max-height: 40%;
     margin: 0 auto;
-    border: 1px solid @color-border;
+    border: 1px solid var(--at-color-border);
     border-radius: 4px;
     overflow-y: auto;
 
@@ -236,22 +236,22 @@
           width: 20px;
           height: 20px;
           line-height: 20px;
-          background: @color-meta;
+          background: var(--at-color-meta);
           margin: 10px;
           border-radius: 3px;
           text-align: center;
-          color: @color-bg;
+          color: var(--at-color-bg);
           font-size: 12px;
         }
 
         .atk-site-name {
-          color: @color-font;
+          color: var(--at-color-font);
           font-size: 17px;
           margin-left: 7px;
         }
 
         &.atk-active, &:hover {
-          background: @color-bg-grey;
+          background: var(--at-color-bg-grey);
         }
       }
     }
@@ -269,7 +269,7 @@
       right: 0;
       top: 0;
       font-size: 35px;
-      color: @color-meta;
+      color: var(--at-color-meta);
       pointer-events: none;
       height: 100%;
       display: flex;
@@ -286,7 +286,7 @@
     .atk-label {
       font-size: 16px;
       margin-bottom: 12px;
-      color: @color-font;
+      color: var(--at-color-font);
     }
 
     .atk-desc {
@@ -295,7 +295,7 @@
       margin-left: 15px;
       margin-bottom: 20px;
       display: block;
-      color: @color-meta;
+      color: var(--at-color-meta);
 
       a {
         opacity: 0.8;
@@ -308,20 +308,20 @@
       padding: 0 10px;
       margin: 0;
       border: none;
-      border-bottom: 2px solid @color-border;
+      border-bottom: 2px solid var(--at-color-border);
       outline: none;
       width: 100%;
       margin-bottom: 25px;
-      background: @color-bg;
+      background: var(--at-color-bg);
 
       &:focus {
-        border-bottom-color: @color-bg-light;
+        border-bottom-color: var(--at-color-bg-light);
       }
 
       &[type="file"] {
         border-radius: 2px;
         background: transparent;
-        border-bottom: 2px solid @color-border;
+        border-bottom: 2px solid var(--at-color-border);
         cursor: pointer;
         position: relative;
         padding: 0 15px;
@@ -343,22 +343,22 @@
       padding: 5px 10px;
       width: 100%;
       border: none;
-      border-bottom: 2px solid @color-border;
+      border-bottom: 2px solid var(--at-color-border);
       margin-bottom: 25px;
       -webkit-appearance: none;
       border-radius: 0;
-      background: @color-bg;
+      background: var(--at-color-bg);
     }
 
     button {
       &:hover {
-        background: @color-bg-light;
+        background: var(--at-color-bg-light);
       }
 
       text-align: center;
-      color: @color-light;
+      color: var(--at-color-light);
       background: transparent;
-      border: 2px solid @color-bg-light;
+      border: 2px solid var(--at-color-bg-light);
       line-height: @form-height;
       letter-spacing: 2em;
       text-indent: 2em; // center
@@ -381,7 +381,7 @@
       padding: 5px 33px;
       cursor: pointer;
       user-select: none;
-      border-right: 1px solid @color-border;
+      border-right: 1px solid var(--at-color-border);
       border-left: 1px solid transparent;
       &:hover {
         background: #f4f4f4;
@@ -409,8 +409,8 @@
     width: 100%;
     bottom: 0;
     left: 0;
-    background: @color-bg;
-    border-top: 1px solid @color-border;
+    background: var(--at-color-bg);
+    border-top: 1px solid var(--at-color-border);
   }
 
   .atk-list-read-more {

package/src/style/site-list.less

@@ -25,7 +25,7 @@
         border-radius: 2px;
 
         &:hover {
-          background: @color-bg-grey;
+          background: var(--at-color-bg-grey);
         }
       }
     }
@@ -58,7 +58,7 @@
         height: 65px;
         width: 65px;
         line-height: 65px;
-        background: @color-quote;
+        background: #687a86;
         color: #fff;
         border-radius: 4px;
       }
@@ -66,25 +66,25 @@
       .atk-site-name {
         text-align: center;
         font-size: 15px;
-        color: @color-sub;
+        color: var(--at-color-sub);
         padding: 0 17px;
         word-break: break-word;
       }
 
       &.atk-active {
-        background-color: @color-bg-grey;
-        border: 1px solid @color-border;
+        background-color: var(--at-color-bg-grey);
+        border: 1px solid var(--at-color-border);
         margin-top: -1px;
         border-radius: 0 0 4px 4px;
 
         .atk-site-name {
-          color: @color-deep;
+          color: var(--at-color-deep);
         }
       }
 
       &:hover {
         .atk-site-name {
-          color: @color-font;
+          color: var(--at-color-font);
         }
       }
     }
@@ -94,8 +94,8 @@
     position: relative;
     min-height: 120px;
     width: 100%;
-    border-top: 1px solid @color-border;
-    border-bottom: 1px solid @color-border;
+    border-top: 1px solid var(--at-color-border);
+    border-bottom: 1px solid var(--at-color-border);
     margin-bottom: -10px;
 
     .atk-header {
@@ -117,7 +117,7 @@
             position: absolute;
             width: 100%;
             height: 6px;
-            background: @color-main;
+            background: var(--at-color-main);
             opacity: .4;
             left: 0;
             bottom: 6px;
@@ -132,8 +132,8 @@
           min-height: 23px;
 
           .atk-url-item {
-            background: @color-bg-grey;
-            color: @color-font;
+            background: var(--at-color-bg-grey);
+            color: var(--at-color-font);
             border-radius: 2px;
             padding: 0 8px;
             font-size: 13px;
@@ -156,7 +156,7 @@
         cursor: pointer;
 
         &:hover i {
-          background-color: @color-red;
+          background-color: var(--at-color-red);
         }
       }
     }

package/types/artalk-config.d.ts

@@ -2,15 +2,6 @@ export default interface ArtalkConfig {
   /** 装载元素 */
   el: string
 
-  /** 评论框占位字符 */
-  placeholder?: string
-
-  /** 评论为空时显示字符 */
-  noComment?: string
-
-  /** 发送按钮文字 */
-  sendBtn?: string
-
   /** 页面唯一标识（完整 URL） */
   pageKey: string
 
@@ -23,8 +14,20 @@ export default interface ArtalkConfig {
   /** 站点名 */
   site?: string
 
+  /** 评论框占位字符 */
+  placeholder?: string
+
+  /** 评论为空时显示字符 */
+  noComment?: string
+
+  /** 发送按钮文字 */
+  sendBtn?: string
+
+  /** 评论框旅行（显示在待回复评论后面） */
+  editorTravel?: boolean
+
   /** 表情包 */
-  emoticons?: object|any
+  emoticons?: any
 
   /** Gravatar 头像 */
   gravatar?: {

package/types/artalk-data.d.ts

@@ -47,9 +47,6 @@ export interface CommentData {
   /** 评论页面 url */
   page_url?: string
 
-  /** 评论页面 title */
-  page_title?: string
-
   /** 是否可见 */
   visible: boolean
 
@@ -67,8 +64,8 @@ export interface ListData {
   /** 评论数据 */
   comments: CommentData[]
 
-  /** 父级评论总数 */
-  total_parents: number
+  /** 根评论总数 */
+  total_roots: number
 
   /** 评论总数（包括所有子评论） */
   total: number
@@ -175,6 +172,14 @@ export interface NotifyData {
   read_link: string
 }
 
+export type EmoticonGrpData = {
+  name: string,
+  type: 'emoticon'|'image'|'emoji'
+  items: {key: string, val: string}[]
+}
+
+export type EmoticonListData = EmoticonGrpData[]
+
 export interface ApiVersionData {
   /** API 程序名 */
   app: string

package/types/event.d.ts

@@ -27,7 +27,10 @@ export interface EventPayloadMap {
   'editor-show-loading': undefined    // 加载显示
   'editor-hide-loading': undefined    // 加载隐藏
   'editor-notify': NotifyConf         // 显示提示
-  'editor-reply': CommentData         // 设置回复
+  'editor-reply': EditorReplyPayload  // 设置回复
+  'editor-reply-cancel': undefined    // 取消回复
+  'editor-travel': HTMLElement
+  'editor-travel-back': undefined
 
   // Notify
   'unread-update': UnreadUpdatePayload // 未读数据更新
@@ -59,6 +62,12 @@ export interface UnreadUpdatePayload {
 
 export type ListUpdatePayload = (data: ListData | undefined) => void
 
+export interface EditorReplyPayload {
+  data: CommentData
+  $el: HTMLElement
+  scroll?: boolean
+}
+
 // ============================================
 export interface Handler<P> {
   (payload: P): void

package/src/assets/emoticons.json

@@ -1,100 +0,0 @@
-{
-  "颜表情": {
-    "inputType": "emoticon",
-    "container": {
-      "Hi": "|´・ω・)ノ",
-      "开心": "ヾ(≧∇≦*)ゝ",
-      "星星眼": "(☆ω☆)",
-      "掀桌": "（╯‵□′）╯︵┴─┴",
-      "流口水": "￣﹃￣",
-      "捂脸": "(/ω＼)",
-      "给跪": "∠( ᐛ 」∠)＿",
-      "哈？": "(๑•̀ㅁ•́ฅ)",
-      "斜眼": "→_→",
-      "加油": "୧(๑•̀⌄•́๑)૭",
-      "有木有WiFi": "٩(ˊᗜˋ*)و",
-      "前方高能预警": "(ノ°ο°)ノ",
-      "纳尼": "(´இ皿இ｀)",
-      "吓死惹": "⌇●﹏●⌇",
-      "已阅留爪": "(ฅ´ω`ฅ)",
-      "去吧大师球": "(╯°A°)╯︵○○○",
-      "太萌惹": "φ(￣∇￣o)",
-      "咦咦咦": "ヾ(´･ ･｀｡)ノ\"",
-      "气呼呼": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃",
-      "我受到了惊吓": "(ó﹏ò｡)",
-      "什么鬼": "Σ(っ °Д °;)っ",
-      "摸摸头": "( ,,´･ω･)ﾉ\"(´っω･｀｡)",
-      "无奈": "╮(╯▽╰)╭ ",
-      "脸红": "o(*////▽////*)q ",
-      "悲哀": "＞﹏＜",
-      "静静地看着你": "( ๑´•ω•) \"(ㆆᴗㆆ)",
-      "不要哇": "(｡•ˇ‸ˇ•｡)"
-    }
-  },
-  "Emoji": {
-    "inputType": "emoji",
-    "container": [
-      "😀","😃","😄","😁","😆","😅","😂","😊","😉","👀","😌","😍","😘","😋","😜","😝","😎","😏","😒","😟","😕","😖","😫","😩","😠","😲","😵","😳","😱","😨","😢","😭","😷","✋","✌️","👊","👋","👏","👍","👎","❤️","🎉","🚀"
-    ]
-  },
-  "滑稽": {
-    "inputType": "image",
-    "container": {
-      "原味稽": "https://i.loli.net/2019/02/01/5c53d26b7ae13.png",
-      "还是算了": "https://i.loli.net/2020/04/30/riySFlu75fJdG4p.png",
-      "蓝纹稽": "https://i.loli.net/2020/04/30/jyh5IVzpqXsHuvU.jpg",
-      "随稽应变": "https://i.loli.net/2017/02/05/5896e6ec1d528.jpg",
-      "蠕动": "https://i.loli.net/2017/02/05/5896e9712a3c1.gif",
-      "束手无稽": "https://i.loli.net/2020/04/30/dF8sTOpgomj7qf5.jpg",
-      "微笑默叹以为妙绝": "https://i.loli.net/2019/02/01/5c53daa84f24a.png",
-      "喝嘤料": "https://i.loli.net/2019/02/01/5c53d63d8c6af.jpg",
-      "暗中观察": "https://i.loli.net/2019/02/01/5c53dd21a2e7b.jpg",
-      "高兴": "https://i.loli.net/2019/02/01/5c53d1b9e5f38.jpg",
-      "惊稽": "https://i.loli.net/2019/02/01/5c53d1e2ad89f.jpg",
-      "可这和我的帅有什么关系": "https://i.loli.net/2017/02/05/5896ece29a8e0.jpg",
-      "狱稽": "https://i.loli.net/2020/04/30/cUEQrVYGFiDjqhy.jpg",
-      "梆": "https://i.loli.net/2020/04/30/TlAGjm6IvJSMVpq.jpg",
-      "吃鱼摆摆": "https://i.loli.net/2017/02/05/5896ec2cb7f39.gif",
-      "跃跃欲试 3": "https://i.loli.net/2017/02/05/5896ece2ac5a2.gif",
-      "突然滑稽": "https://i.loli.net/2019/02/01/5c53cf2a457f1.jpg",
-      "扶墙怂": "https://i.loli.net/2017/02/05/5896ece2ab57a.jpg",
-      "阔以": "https://i.loli.net/2020/04/30/7EYyq1TcBKa3eQ2.jpg",
-      "不得行": "https://i.loli.net/2020/04/30/KoqBGauX7TEfeyn.jpg",
-      "少儿不宜": "https://i.loli.net/2020/04/30/nt2ZWRozUNjBxAK.jpg",
-      "稽日可期": "https://i.loli.net/2020/04/30/FmfYcoMJesi2Ddq.jpg",
-      "哎": "https://i.loli.net/2020/04/30/ps7PTIANgSErqnU.jpg",
-      "别看丢人": "https://i.loli.net/2019/02/01/5c53d4f89ea29.jpg",
-      "地稽 2": "https://i.loli.net/2019/02/01/5c53dbae85687.jpg",
-      "地稽": "https://i.loli.net/2020/04/30/BnTMX35EPxleVmA.jpg",
-      "老阔有点扣": "https://i.loli.net/2020/04/30/fhDXbA9T1zJPlKk.gif",
-      "啊哈哈": "https://i.loli.net/2019/02/01/5c53dc2947d84.jpg",
-      "无稽可奈": "https://i.loli.net/2020/04/30/UyxTzB2fS3LtH7Q.jpg",
-      "老实巴交": "https://i.loli.net/2020/04/30/7DgSoyqwtYBxchE.jpg",
-      "紧张": "https://i.loli.net/2017/02/05/5896e8a408253.jpg",
-      "摇摆稽": "https://i.loli.net/2019/02/01/5c53d1904dcb2.gif",
-      "又不是不能用": "https://i.loli.net/2019/02/01/5c53ce897ab55.jpg",
-      "一时滑稽": "https://i.loli.net/2019/02/01/5c53d5d28e22c.jpg",
-      "无法接受": "https://i.loli.net/2019/02/01/5c53cee8422fc.jpg",
-      "嘤雄豪稽": "https://i.loli.net/2020/04/30/sbtw6o7iKaM4Nmq.jpg",
-      "相视双稽": "https://i.loli.net/2019/02/01/5c53d5a093149.jpg",
-      "稽皮发麻": "https://i.loli.net/2017/02/05/5896ece2a019f.jpg",
-      "地稽 3": "https://i.loli.net/2019/02/01/5c53dbe510bcf.jpg",
-      "地稽委屈": "https://i.loli.net/2019/02/01/5c53d76e250da.jpg",
-      "地稽抚摸": "https://i.loli.net/2020/04/30/cavZ6nNzMPimLy7.gif",
-      "地稽捶打": "https://i.loli.net/2020/04/30/vFVPynXaHR5sitk.gif",
-      "绝望": "https://i.loli.net/2019/02/01/5c53dc0ba2303.jpg",
-      "气稽败坏": "https://i.loli.net/2019/02/01/5c53d216f3c60.jpg",
-      "当场去世": "https://i.loli.net/2020/04/30/sogxHMTFWbE2lrP.jpg",
-      "喝酒": "https://i.loli.net/2019/02/01/5c53d78c3f4a5.jpg",
-      "老衲摆摊算命": "https://i.loli.net/2017/02/05/5896ece29d8a5.gif",
-      "老哥，稳": "https://i.loli.net/2017/02/05/5896ece29ebb0.jpg",
-      "自闭稽": "https://i.loli.net/2019/02/01/5c53d6603ee24.jpg",
-      "无话可说": "https://i.loli.net/2019/02/01/5c53d6a77b7e4.jpg",
-      "跃跃欲试": "https://i.loli.net/2017/02/05/5896e9710dfd5.jpg",
-      "跃跃欲试 2": "https://i.loli.net/2019/02/01/5c53dcc057350.jpg",
-      "满脑子骚操作": "https://i.loli.net/2020/04/30/xJXcUtO2BryHAsa.gif",
-      "稽之舞": "https://i.loli.net/2019/02/01/5c53de1a4d14d.gif",
-      "将稽就稽": "https://i.loli.net/2020/04/30/KVwf8qCrZts6WOT.gif"
-    }
-  }
-}