artalk 2.4.4 → 2.5.1

package/src/style/{comment.less → comment.scss}

@@ -51,7 +51,7 @@
     img {
       width: 50px;
       height: 50px;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
     }
   }
 
@@ -60,7 +60,7 @@
     margin-left: 63px;
 
     & > .atk-header {
-      line-height: 1;
+      line-height: 1.5;
       font-size: 13px;
       margin-bottom: .5em;
       overflow: hidden;
@@ -108,13 +108,13 @@
         }
       }
 
-      .badge() {
+      .badge {
         display: inline-block;
         color: var(--at-color-meta);
         background: var(--at-color-bg-grey);
         padding: 0px 6px;
         line-height: 17px;
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
 
         &:not(:last-child) {
           margin-right: 6px;
@@ -126,24 +126,27 @@
       }
 
       .atk-badge {
-        .badge();
+        @extend .badge;
         color: #fff;
       }
 
+      .atk-region-badge {
+        @extend .badge;
+      }
+
       .atk-pinned-badge {
-        .badge();
+        @extend .badge;
         color: #fff;
         background: #f44336;
       }
 
       .atk-ua {
-        .badge()
+        @extend .badge;
       }
 
       .atk-ua-wrap {
         @media only screen and (max-width: 768px) {
           display: block;
-          margin-top: 5px;
         }
       }
     }
@@ -164,7 +167,7 @@
           border: 3px solid var(--at-color-bg-grey);
           border-bottom: 0;
           padding: 5px 10px;
-          border-radius: @block-radius @block-radius 0 0;
+          border-radius: $block-radius $block-radius 0 0;
           margin-bottom: -5px;
         }
 
@@ -193,7 +196,7 @@
 
       & > .atk-reply-to {
         padding: 5px 15px;
-        border-left: 3px solid #eee;
+        border-left: 3px solid var(--at-color-border);
         margin-bottom: 10px;
         position: relative;
         margin-top: 10px;
@@ -217,7 +220,7 @@
         padding: 10px 18px;
         display: block;
         background: var(--at-color-bg-grey);
-        border-radius: @block-radius;
+        border-radius: $block-radius;
 
         .atk-text {
           color: var(--at-color-meta);
@@ -291,7 +294,7 @@
     transform: translateX(-50%);
     cursor: pointer;
     border: 1px solid var(--at-color-border);
-    border-radius: @block-radius;
+    border-radius: $block-radius;
     background: var(--at-color-bg);
     padding: 1px 20px;
     font-size: 15px;
@@ -307,6 +310,27 @@
   .atk-height-limit .atk-height-limit .atk-height-limit-btn {
     display: none;
   }
+
+  // 限高可滚动
+  .atk-height-limit-scroll {
+    // @extend .atk-slim-scrollbar;
+    margin-top: 10px;
+    overflow-y: auto;
+    $cBorder: var(--at-color-border);
+    $cOverwrite: var(--at-color-bg);
+    background:
+      /* Shadow covers */
+      linear-gradient($cOverwrite 1px, transparent 1px calc(100% - 1px)) center top,
+      linear-gradient(transparent calc(100% - 1px), $cOverwrite calc(100% - 1px) 1px) center bottom,
+      /* Shadows */
+      linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
+      linear-gradient(transparent calc(100% - 1px), $cBorder calc(100% - 1px) 1px) center bottom;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
+    /* Opera doesn't support this in the shorthand */
+    background-attachment: local, local, scroll, scroll;
+  }
 }
 
 /** 子评论区域 **/

package/src/style/{editor.less → editor.scss}

@@ -1,11 +1,11 @@
 .atk-main-editor {
-  @editor-padding: 10px;
+  $editor-padding: 10px;
   z-index: 5;
   position: relative;
   overflow: hidden;
   background: var(--at-color-bg);
   border: 1px solid var(--at-color-border);
-  border-radius: @block-radius;
+  border-radius: $block-radius;
   margin-bottom: 10px;
 
   @media only screen and (max-width: 768px) {
@@ -23,7 +23,7 @@
       font-size: 14px;
       background: transparent;
       border: 2px solid transparent;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
       padding: 6px 5px;
       resize: none;
       outline: none;
@@ -44,7 +44,7 @@
       font-size: 15px;
       background-color: var(--at-color-bg);
       border: 2px solid transparent;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
       width: 100%;
       min-height: 120px;
       margin-top: 2px;
@@ -70,7 +70,7 @@
       position: absolute;
       right: 7px;
       bottom: 2px;
-      max-width: (100% - 20px);
+      max-width: calc(100% - 20px);
       height: 30px;
       line-height: 30px;
       font-size: 14px;
@@ -80,7 +80,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       .atk-text {
       }
@@ -129,9 +129,9 @@
       line-height: 24px;
       cursor: pointer;
       color: var(--at-color-grey);
-      font-size: @font-size;
+      font-size: $font-size;
       user-select: none;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       &:not(:last-child) {
         margin-right: 2px;
@@ -163,15 +163,15 @@
     .atk-send-btn {
       background: var(--at-color-main);
       color: #fff;
-      font-size: @font-size;
+      font-size: $font-size;
       border: none;
-      padding: 0 30px;
       margin: 0;
       height: 30px;
+      width: 8em;
       cursor: pointer;
       transition: opacity 0.3s ease-in-out;
       outline: none;
-      border-radius: (@block-radius / 2);
+      border-radius: calc($block-radius / 2);
 
       &:active {
         opacity: 0.9;

package/src/style/{list.less → list.scss}

@@ -46,7 +46,7 @@
         padding: 0.6rem 0;
         border: 1px solid var(--at-color-border);
         text-align: center;
-        border-radius: @block-radius;
+        border-radius: $block-radius;
         white-space: nowrap;
         margin: 0;
         list-style: none;
@@ -159,11 +159,13 @@
 }
 
 .atk-list-no-comment {
-  text-align: center;
   height: 150px;
-  line-height: 150px;
-  display: block;
+  display: flex;
   font-size: 19px;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  text-align: center;
 }
 
 .atk-list-read-more {
@@ -175,12 +177,16 @@
     padding-bottom: 10px;
   }
 
+  &.atk-err .atk-text {
+    color: var(--at-color-red) !important;
+  }
+
   .atk-list-read-more-inner {
     cursor: pointer;
     user-select: none;
     padding: 0 15px;
-    font-size: @font-size;
-    border-radius: @block-radius;
+    font-size: $font-size;
+    border-radius: $block-radius;
     border: 1px solid transparent;
     display: flex;
     height: 30px;
@@ -193,10 +199,6 @@
     background: var(--at-color-bg);
     border-color: var(--at-color-border);
 
-    &.atk-err > .atk-text {
-      color: var(--at-color-red) !important;
-    }
-
     & > .atk-loading-icon {
       height: 15px;
       width: 15px;

package/src/style/{main.less → main.scss}

@@ -1,9 +1,9 @@
-@import "./_color.less";
-@import './comment.less';
-@import './list.less';
-@import './pagination.less';
-@import './editor.less';
-@import './sidebar-layer.less';
+@import "./_color.scss";
+@import './comment.scss';
+@import './list.scss';
+@import './pagination.scss';
+@import './editor.scss';
+@import './sidebar-layer.scss';
 
 .artalk {
   position: relative;
@@ -14,7 +14,7 @@
 .artalk, .atk-layer-wrap {
   color: var(--at-color-font);
   word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
 
   * {
     box-sizing: border-box;
@@ -26,17 +26,18 @@
     font-size: inherit;
   }
 
-  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
+  $codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
 
   code {
-    font-family: @codeFont;
-    margin: 0 .3em;
-    padding: 0 .5em;
+    font-family: $codeFont;
+    margin: 0 .05em;
+    padding: 0 .4em;
     display: inline-block;
+    vertical-align: middle;
     font-size: .9em;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    border-radius: @block-radius;
+    border-radius: 2px;
   }
 
   pre {
@@ -46,8 +47,8 @@
   }
 
   pre code {
-    * { font-family: @codeFont; }
-    line-height: @line-height;
+    * { font-family: $codeFont; }
+    line-height: $line-height;
     display: block;
     padding: 10px 15px;
     white-space: pre-wrap;
@@ -142,8 +143,8 @@
 
 /* Loading */
 .atk-loading {
+  @extend .atk-full-layer;
   z-index: 11;
-  &:extend(.atk-full-layer);
 }
 
 .atk-loading-spinner {
@@ -278,7 +279,7 @@ i.atk-icon {
 
 /* Layer */
 .atk-error-layer {
-  &:extend(.atk-full-layer);
+  @extend .atk-full-layer;
   background-color: var(--at-color-bg-transl);
 
   .atk-error-title {
@@ -312,8 +313,8 @@ i.atk-icon {
 }
 
 .atk-layer-dialog-wrap {
-  @formInputHeight: 30px;
-  &:extend(.atk-full-layer);
+  $formInputHeight: 30px;
+  @extend .atk-full-layer;
   background-color: var(--at-color-bg-transl);
 
   & > .atk-layer-dialog {
@@ -332,10 +333,10 @@ i.atk-icon {
 
       input {
         width: 100%;
-        line-height: (@formInputHeight + 4px);
+        line-height: calc($formInputHeight + 4px);
         background-color: var(--at-color-bg);
         border: 1px solid var(--at-color-border);
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
         outline: none;
         padding: 0 6px;
         display: block;
@@ -356,9 +357,9 @@ i.atk-icon {
         border: 1px solid var(--at-color-main);
         background: transparent;
         color: var(--at-color-main);
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
         padding: 0 15px;
-        line-height: @formInputHeight;
+        line-height: $formInputHeight;
         outline: none;
 
         &:active {
@@ -426,7 +427,7 @@ i.atk-icon {
   overflow: hidden;
   background-color: #2c2c2c;
   color: #FFF;
-  border-radius: (@block-radius / 2);
+  border-radius: calc($block-radius / 2);
   cursor: pointer;
   font-size: 14px;
   padding: 5px 15px;

package/src/style/{sidebar-layer.less → sidebar-layer.scss}

@@ -1,19 +1,19 @@
-@header-height: 60px;
-@nav-height: 40px;
+$header-height: 60px;
+$nav-height: 40px;
 
 .atk-sidebar-layer {
-  @width: 430px;
+  $width: 430px;
   position: fixed;
   z-index: 99999;
   top: 0;
   right: 0;
-  width: @width;
+  width: $width;
   height: 100%;
   background: var(--at-color-bg);
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  transform: translate(@width, 0px);
+  transform: translate($width, 0px);
 
-  @media only screen and (max-width: @width) {
+  @media only screen and (max-width: $width) {
     & {
       width: 100%;
     }
@@ -37,8 +37,8 @@
     .atk-sidebar-close {
       display: flex;
       flex-direction: column;
-      width: @header-height;
-      height: @header-height;
+      width: $header-height;
+      height: $header-height;
       align-items: center;
       place-content: center;
       cursor: pointer;

package/types/artalk-config.d.ts

@@ -26,7 +26,7 @@ export default interface ArtalkConfig {
   /** 发送按钮文字 */
   sendBtn: string
 
-  /** 评论框旅行（显示在待回复评论后面） */
+  /** 评论框穿梭（显示在待回复评论后面） */
   editorTravel: boolean
 
   /** 表情包 */
@@ -60,6 +60,9 @@ export default interface ArtalkConfig {
 
     /** 子评论区域限高 */
     children: number
+
+    /** 滚动限高 */
+    scrollable: boolean
   }
 
   /** 评论投票按钮 */
@@ -77,7 +80,7 @@ export default interface ArtalkConfig {
   /** PV 数绑定元素 Selector */
   pvEl: string
 
-  /** 暗黑模式 */
+  /** 夜间模式 */
   darkMode: boolean|'auto'
 
   /** 请求超时（单位：秒） */

package/types/artalk-data.d.ts

@@ -44,6 +44,9 @@ export interface CommentData {
   /** 徽章颜色 */
   badge_color?: string
 
+  /** IP 归属地 */
+  ip_region?: string
+
   /** 是否允许回复 */
   is_allow_reply?: boolean
 
@@ -221,7 +224,4 @@ export interface ApiVersionData {
 
   /** API 程序 CommitHash */
   commit_hash: string
-
-    /** API 程序要求前端最小版本 */
-  fe_min_version: string
 }

package/types/context.d.ts

@@ -1,15 +1,14 @@
-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'
+import { SidebarShowPayload } from '../src/layer/sidebar-layer'
+import { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+import type { TMarked } from '../src/lib/marked'
+import type { TInjectedServices } from '../src/service'
 
 /**
  * Context 接口
@@ -17,31 +16,25 @@ import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/l
  * (面向接口的编程)
  */
 export default interface ContextApi {
-  /** Context 唯一标识 */
-  cid: number
-
   /** Artalk 根元素对象 */
   $root: HTMLElement
 
+  /** 依赖注入函数 */
+  inject<K extends keyof TInjectedServices>(depName: K, obj: TInjectedServices[K]): void
+
+  /** 获取依赖对象 */
+  get<K extends keyof TInjectedServices>(depName: K): TInjectedServices[K]
+
   /** 配置对象 */
+  // TODO 修改为 getConf() 和 setConf()
   conf: ArtalkConfig
 
-  /** 用户对象 */
-  user: User
-
   /** marked 依赖对象 */
-  markedInstance?: typeof libMarked
+  getMarkedInstance(): TMarked | undefined
 
   /** 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
 
@@ -141,7 +134,7 @@ export default interface ContextApi {
   /** i18n 翻译 */
   $t(key: keyof I18n, args?: {[key: string]: string}): string
 
-  /** 设置暗黑模式 */
+  /** 设置夜间模式 */
   setDarkMode(darkMode: boolean): void
 
   /** 更新配置 */

package/types/global.d.ts

@@ -0,0 +1 @@
+declare const ARTALK_LITE: boolean

package/CNAME

@@ -1 +0,0 @@
-artalk.js.org