artalk 2.0.4 → 2.1.1

package/src/lib/checker/index.ts

@@ -0,0 +1,134 @@
+import Context from '@/context'
+import Layer from '@/components/layer'
+import Dialog from '@/components/dialog'
+import * as Utils from '../utils'
+import * as Ui from '../ui'
+import { CheckerPayload } from '~/types/event'
+import CaptchaChecker from './captcha-checker'
+import AdminChecker from './admin-checker'
+
+/**
+ * Checker 发射台
+ */
+export default class CheckerLauncher {
+  public ctx: Context
+
+  public launched: Checker[] = []
+  public submitCaptchaVal?: string
+  public submitCaptchaImgData?: string
+
+  constructor(ctx: Context) {
+    this.ctx = ctx
+
+    this.initEventBind()
+  }
+
+  /** 初始化事件绑定 */
+  public initEventBind() {
+    this.ctx.on('checker-captcha', (conf) => {
+      if (conf.imgData) {
+        this.submitCaptchaImgData = conf.imgData
+      }
+      this.fire(CaptchaChecker, conf)
+    })
+
+    this.ctx.on('checker-admin', (conf) => {
+      this.fire(AdminChecker, conf)
+    })
+  }
+
+  public fire(checker: Checker, payload: CheckerPayload) {
+    if (this.launched.includes(checker)) return // 阻止同时 fire 相同的 checker
+    this.launched.push(checker)
+
+    const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`)
+    layer.setMaskClickHide(false)
+    layer.show()
+
+    const formEl = Utils.createElement()
+    formEl.appendChild(checker.body(this))
+
+    const input = Utils.createElement<HTMLInputElement>(
+      `<input id="check" type="${checker.inputType || 'text'}" autocomplete="off" required placeholder="">`
+    )
+    formEl.appendChild(input)
+    setTimeout(() => input.focus(), 80) // 延迟 Focus
+
+    input.onkeyup = (evt) => {
+      if (evt.key === 'Enter' || evt.keyCode === 13) {
+        // 按下回车键
+        evt.preventDefault()
+        layer
+          .getEl()
+          .querySelector<HTMLButtonElement>('button[data-action="confirm"]')!
+          .click()
+      }
+    }
+
+    let btnTextOrg: string | undefined
+    const dialog = new Dialog(formEl)
+
+    // 确认按钮
+    dialog.setYes((btnEl) => {
+      const inputVal = input.value.trim()
+      if (!btnTextOrg) btnTextOrg = btnEl.innerText
+      const btnTextSet = (btnText: string) => {
+        btnEl.innerText = btnText
+        btnEl.classList.add('error')
+      }
+      const btnTextRestore = () => {
+        btnEl.innerText = btnTextOrg || ''
+        btnEl.classList.remove('error')
+      }
+
+      btnEl.innerText = '加载中...'
+
+      checker
+        .request(this, inputVal)
+        .then((data) => {
+          // 请求成功
+          this.done(checker, layer)
+          if (checker.onSuccess) checker.onSuccess(this, data, inputVal, formEl)
+          if (payload.onSuccess) payload.onSuccess(inputVal, dialog.$el)
+        })
+        .catch((err) => {
+          // 请求失败
+          btnTextSet(String(err.msg || String(err)))
+          if (checker.onError) checker.onError(this, err, inputVal, formEl)
+
+          const tf = setTimeout(() => btnTextRestore(), 3000)
+          input.onfocus = () => {
+            btnTextRestore()
+            clearTimeout(tf)
+          }
+        })
+
+      return false
+    })
+
+    // 取消按钮
+    dialog.setNo(() => {
+      this.done(checker, layer)
+      if (payload.onCancel) payload.onCancel()
+      return false
+    })
+
+    layer.getEl().append(dialog.$el)
+
+    if (payload.onMount) payload.onMount(dialog.$el) // onMount
+  }
+
+  private done(checker: Checker, layer: Layer) {
+    layer.disposeNow()
+    this.launched = this.launched.filter(c => c !== checker)
+  }
+}
+
+export interface Checker {
+  el?: HTMLElement
+  inputType?: 'password' | 'text'
+  body: (launcher: CheckerLauncher) => HTMLElement
+  request: (launcher: CheckerLauncher, inputVal: string) => Promise<string>
+  onSuccess?: (launcher: CheckerLauncher, data: string, inputVal: string, formEl: HTMLElement) => void
+  onError?: (launcher: CheckerLauncher, err: any, inputVal: string, formEl: HTMLElement) => void
+}

package/src/lib/component.ts

@@ -1,8 +1,8 @@
-import { ArtalkConfig } from '~/types/artalk-config'
-import Context from '../Context'
+import ArtalkConfig from '~/types/artalk-config'
+import Context from '../context'
 
 export default class Component {
-  public el!: HTMLElement
+  public $el!: HTMLElement
 
   public ctx: Context
   public readonly conf: ArtalkConfig

package/src/lib/md5.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+
+// https://stackoverflow.com/questions/14733374/how-to-generate-an-md5-file-hash-in-javascript-node-js#answer-33486055
+var MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
+
+export default MD5

package/src/lib/ui.ts

@@ -1,45 +1,56 @@
 import * as Utils from './utils'
-import Context from '../Context'
+import Context from '../context'
 
 /** 显示加载 */
 export function showLoading(parentElem: HTMLElement|Context) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
-
-  let loadingEl = parentElem.querySelector<HTMLElement>('.atk-loading')
-  if (!loadingEl) {
-    loadingEl = Utils.createElement(`
-        <div class="atk-loading" style="display: none;">
-          <div class="atk-loading-spinner">
-          <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
-          </div>
-          </div>`)
-    parentElem.appendChild(loadingEl)
+  if (parentElem instanceof Context) parentElem = parentElem.$root
+
+  let $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
+  if (!$loading) {
+    $loading = Utils.createElement(
+    `<div class="atk-loading atk-fade-in" style="display: none;">
+      <div class="atk-loading-spinner">
+        <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
+      </div>
+    </div>`)
+    parentElem.appendChild($loading)
+  }
+  $loading.style.display = ''
+
+  // spinner 延迟显示，若加载等待时间太短，没必要显示（闪一下即可）
+  const $spinner = $loading.querySelector<HTMLElement>('.atk-loading-spinner')
+  if ($spinner) {
+    $spinner.style.display = 'none'
+    window.setTimeout(() => {
+      $spinner.style.display = ''
+    }, 500)
   }
-  loadingEl.style.display = ''
 }
 
 /** 隐藏加载 */
 export function hideLoading(parentElem: HTMLElement|Context) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
+  if (parentElem instanceof Context) parentElem = parentElem.$root
 
-  const loadingEl = parentElem.querySelector<HTMLElement>('.atk-loading')
-  if (loadingEl) loadingEl.style.display = 'none'
+  const $loading = parentElem.querySelector<HTMLElement>('.atk-loading')
+  if ($loading) $loading.style.display = 'none'
 }
 
 /** 元素是否用户可见 */
-export function isVisible(elem: HTMLElement) {
-  const docViewTop = window.scrollY
-  const docViewBottom = docViewTop + document.documentElement.clientHeight
+export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
+  const viewportHeight = viewport.clientHeight
+
+  const docViewTop = viewport.scrollTop
+  const docViewBottom = docViewTop + viewportHeight
 
-  const elemTop = Utils.getOffset(elem).top
-  const elemBottom = elemTop + elem.offsetHeight
+  const rect = el.getBoundingClientRect()
+  const elemTop = rect.top + docViewTop
+  const elemBottom = elemTop + rect.height
 
-  return elemBottom <= docViewBottom && elemTop >= docViewTop
+  return (elemBottom <= docViewBottom) //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
 }
 
 /** 滚动到元素中心 */
 export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
-  if (isVisible(elem)) return
   const top =
     Utils.getOffset(elem).top +
     Utils.getHeight(elem) / 2 -
@@ -49,7 +60,7 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
     window.scroll({
       top: top > 0 ? top : 0,
       left: 0,
-      behavior: 'smooth',
+      // behavior: 'smooth',
     })
   } else {
     // 无动画
@@ -57,53 +68,6 @@ export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
   }
 }
 
-/** 显示对话框 */
-export function buildDialog (
-  html: HTMLElement,
-  onConfirm?: (btnElem: HTMLElement) => boolean | void,
-  onCancel?: () => boolean | void,
-): HTMLElement {
-  const dialogElem = Utils.createElement(
-    `<div class="atk-layer-dialog-wrap">
-      <div class="atk-layer-dialog">
-      <div class="atk-layer-dialog-content"></div>
-      <div class="atk-layer-dialog-action">
-      </div>`
-  )
-
-  // 按钮
-  const actionElem = dialogElem.querySelector<HTMLElement>('.atk-layer-dialog-action')!
-  const onclick =
-    (f: (btnElem: HTMLElement) => boolean | void) =>
-    (evt: Event) => {
-      const returnVal = f(evt.currentTarget as HTMLElement)
-      if (returnVal === undefined || returnVal === true) {
-        dialogElem.remove()
-      }
-    }
-
-  if (typeof onConfirm === 'function') {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      '<button data-action="confirm">确定</button>'
-    )
-    btn.onclick = onclick(onConfirm)
-    actionElem.appendChild(btn)
-  }
-
-  if (typeof onCancel === 'function') {
-    const btn = Utils.createElement<HTMLButtonElement>(
-      '<button data-action="cancel">取消</button>'
-    )
-    btn.onclick = onclick(onCancel)
-    actionElem.appendChild(btn)
-  }
-
-  // 内容
-  dialogElem.querySelector('.atk-layer-dialog-content')!.appendChild(html)
-
-  return dialogElem
-}
-
 /** 显示消息 */
 export function showNotify(
   wrapElem: HTMLElement,
@@ -168,8 +132,8 @@ export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
 }
 
 /** 设置全局错误 */
-export function setError(parentElem: HTMLElement|Context, html: string | HTMLElement | null) {
-  if (parentElem instanceof Context) parentElem = parentElem.rootEl
+export function setError(parentElem: HTMLElement|Context, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
+  if (parentElem instanceof Context) parentElem = parentElem.$root
 
   let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
   if (html === null) {
@@ -178,7 +142,7 @@ export function setError(parentElem: HTMLElement|Context, html: string | HTMLEle
   }
   if (!elem) {
     elem = Utils.createElement(
-      '<div class="atk-error-layer"><span class="atk-error-title">Artalk Error</span><span class="atk-error-text"></span></div>'
+      `<div class="atk-error-layer">${title}<span class="atk-error-text"></span></div>`
     )
     parentElem.appendChild(elem)
   }
@@ -193,3 +157,29 @@ export function setError(parentElem: HTMLElement|Context, html: string | HTMLEle
     errorTextEl.innerText = html
   }
 }
+
+export function getScrollBarWidth() {
+  const inner = document.createElement('p')
+  inner.style.width = '100%'
+  inner.style.height = '200px'
+
+  const outer = document.createElement('div')
+  outer.style.position = 'absolute'
+  outer.style.top = '0px'
+  outer.style.left = '0px'
+  outer.style.visibility = 'hidden'
+  outer.style.width = '200px'
+  outer.style.height = '150px'
+  outer.style.overflow = 'hidden'
+  outer.appendChild(inner)
+
+  document.body.appendChild(outer)
+  const w1 = inner.offsetWidth
+  outer.style.overflow = 'scroll'
+  let w2 = inner.offsetWidth
+  if (w1 === w2) w2 = outer.clientWidth
+
+  document.body.removeChild(outer)
+
+  return (w1 - w2)
+}

package/src/lib/user.ts

@@ -1,13 +1,7 @@
-import { ArtalkConfig } from "~/types/artalk-config"
+import ArtalkConfig, { LocalUser } from "~/types/artalk-config"
 
 export default class User {
-  public data: {
-    nick: string,
-    email: string,
-    link: string,
-    token: string,
-    isAdmin: boolean
-  }
+  public data: LocalUser
 
   constructor (conf: ArtalkConfig) {
     // 从 localStorage 导入

package/src/lib/utils.ts

@@ -1,37 +1,37 @@
 import libMarked from 'marked'
 import hanabi from 'hanabi'
-import Context from '../Context'
+import Context from '../context'
 
-export function createElement<E extends HTMLElement = HTMLElement> (htmlStr: string = ''): E {
+export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
   const div = document.createElement('div')
   div.innerHTML = htmlStr.trim()
   return (div.firstElementChild || div) as E
 }
 
-export function getHeight (el: HTMLElement) {
+export function getHeight(el: HTMLElement) {
   return parseFloat(getComputedStyle(el, null).height.replace('px', ''))
 }
 
-export function htmlEncode (str: string) {
+export function htmlEncode(str: string) {
   const temp = document.createElement('div')
   temp.innerText = str
   const output = temp.innerHTML
   return output
 }
 
-export function htmlDecode (str: string) {
+export function htmlDecode(str: string) {
   const temp = document.createElement('div')
   temp.innerHTML = str
   const output = temp.innerText
   return output
 }
 
-export function getQueryParam (name: string) {
+export function getQueryParam(name: string) {
   const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
   return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
 }
 
-export function getOffset (el: HTMLElement) {
+export function getOffset(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   return {
     top: rect.top + window.scrollY,
@@ -39,7 +39,7 @@ export function getOffset (el: HTMLElement) {
   }
 }
 
-export function padWithZeros (vNumber: number, width: number) {
+export function padWithZeros(vNumber: number, width: number) {
   let numAsString = vNumber.toString()
   while (numAsString.length < width) {
     numAsString = `0${numAsString}`
@@ -47,7 +47,7 @@ export function padWithZeros (vNumber: number, width: number) {
   return numAsString
 }
 
-export function dateFormat (date: Date) {
+export function dateFormat(date: Date) {
   const vDay = padWithZeros(date.getDate(), 2)
   const vMonth = padWithZeros(date.getMonth() + 1, 2)
   const vYear = padWithZeros(date.getFullYear(), 2)
@@ -57,7 +57,7 @@ export function dateFormat (date: Date) {
   return `${vYear}-${vMonth}-${vDay}`
 }
 
-export function timeAgo (date: Date) {
+export function timeAgo(date: Date) {
   try {
     const oldTime = date.getTime()
     const currTime = new Date().getTime()
@@ -95,12 +95,31 @@ export function timeAgo (date: Date) {
   }
 }
 
+export function getGravatarURL(ctx: Context, emailMD5: string) {
+  return `${(ctx.conf.gravatar?.mirror || '').replace(/\/$/, '')}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar?.default || '')}&s=80`
+}
+
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+/** 版本号比较（a < b :-1 | 0 | b < a :1） */
+export function versionCompare(a: string, b: string) {
+  const pa = a.split('.')
+  const pb = b.split('.')
+  for (let i = 0; i < 3; i++) {
+      const na = Number(pa[i])
+      const nb = Number(pb[i])
+      if (na > nb) return 1
+      if (nb > na) return -1
+      if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
+      if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
+  }
+  return 0
+}
+
 let markedInstance: any = null
-export function marked (ctx: Context, src: string): string {
+export function marked(ctx: Context, src: string): string {
   if (!markedInstance) {
     const renderer = new libMarked.Renderer()
     const linkRenderer = renderer.link

package/src/main.ts

@@ -1,3 +1,3 @@
-import Artalk from "./Artalk"
+import Artalk from './artalk'
 
 export default Artalk

package/src/style/_color.less

@@ -2,6 +2,7 @@
   * {
     --at-color-font: #2a2e2e;
     --at-color-deep: #2a2e2e;
+    --at-color-sub: #757575;
     --at-color-grey: #999;
     --at-color-meta: #757e91;
     --at-color-border: #eceff2;
@@ -14,13 +15,16 @@
     --at-color-main: #0083ff;
     --at-color-red: #ff5652;
     --at-color-pink: #fa5a57;
-    --at-color-yellow: #ffa928;
+    --at-color-yellow: #ff7c37;
+    --at-color-green: #4caf50;
     --at-color-quote: #687a86;
+    --at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255));
   }
 
   &.atk-dark-mode * {
     --at-color-font: #fff;
     --at-color-deep: #e7e7e7;
+    --at-color-sub: #e7e7e7;
     --at-color-grey: #fff;
     --at-color-meta: #fff;
     --at-color-border: #2d3235;
@@ -33,7 +37,9 @@
     --at-color-main: #0083ff;
     --at-color-red: #ff5652;
     --at-color-pink: #fa5a57;
-    --at-color-yellow: #ffa928;
+    --at-color-yellow: #ff7c37;
+    --at-color-green: #4caf50;
     --at-color-quote: #687a86;
+    --at-color-gradient: linear-gradient(180deg, rgba(30, 34, 36, 0), rgba(30, 34, 36, 1));
   }
 }

package/src/style/_extend.less

@@ -1,6 +1,7 @@
 .atk-slim-scrollbar() {
   &::-webkit-scrollbar {
     width: 4px;
+    height: 4px;
     background: transparent;
   }
 
@@ -17,3 +18,83 @@
     background: rgba(41,47,53,.77);
   }
 }
+
+.atk-list-text-actions() {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  padding: 0 35px;
+  padding-top: 10px;
+  padding-bottom: 0;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .atk-item {
+    position: relative;
+    font-size: 17px;
+    max-width: 5em;
+    display: inline-flex;
+    margin-right: 15px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    user-select: none;
+
+    &.atk-green:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(50, 199, 134, 0.39);
+    }
+
+    &.atk-yellow:after {
+      position: absolute;
+      content: ' ';
+      height: 5px;
+      width: 100%;
+      left: 0;
+      bottom: 5px;
+      background: rgba(255, 203, 0, 39%);
+    }
+  }
+}
+
+.atk-list-btn-actions() {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20px;
+
+  .atk-item {
+    &:hover {
+      background: @color-bg-grey;
+    }
+
+    &:not(:last-child) {
+      margin-right: 15px;
+    }
+
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    width: 35px;
+    height: 35px;
+    border-radius: 2px;
+    align-items: center;
+    justify-content: center;
+
+    &.atk-item-close {
+      margin-left: 10px;
+    }
+  }
+
+  .atk-icon {
+    background-color: @color-meta;
+  }
+
+  .atk-icon-yes {
+    background-color: @color-main;
+  }
+}

package/src/style/_variables.less

@@ -1,5 +1,6 @@
 @color-font: var(--at-color-font);
 @color-deep: var(--at-color-deep);
+@color-sub: var(--at-color-sub);
 @color-grey: var(--at-color-grey);
 @color-meta: var(--at-color-meta);
 @color-light: var(--at-color-light);
@@ -13,7 +14,9 @@
 @color-red: var(--at-color-red);
 @color-pink: var(--at-color-pink);
 @color-yellow: var(--at-color-yellow);
+@color-green: var(--at-color-green);
 @color-quote: var(--at-color-quote);
+@color-gradient: var(--at-color-gradient);
 
 @font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 @font-size: 14px;