artalk 2.1.0 → 2.1.4

package/src/components/editor-plugs/emoticons-plug.ts

@@ -3,126 +3,242 @@ import './emoticons-plug.less'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
 import * as Utils from '~/src/lib/utils'
+import * as Ui from '~/src/lib/ui'
+import { EmoticonListData, EmoticonGrpData } from '~/types/artalk-data'
 
-type EmoticonListType = {
-  [grpName: string]: {
-    inputType: 'emoticon'|'image'
-    container: { [name: string]: string }
+type OwOFormatType = {
+  [key: string] : {
+    type: 'emoticon'|'emoji'|'image',
+    container: {icon: string, text: string}[]
   }
 }
 
 export default class EmoticonsPlug extends EditorPlug {
   public $el!: HTMLElement
-  public emoticons: EmoticonListType
+  public emoticons: EmoticonListData = []
 
-  public listWrapEl!: HTMLElement
-  public typesEl!: HTMLElement
+  public $grpWrap!: HTMLElement
+  public $grpSwitcher!: HTMLElement
 
   constructor (public editor: Editor) {
     super(editor)
 
-    this.emoticons = this.ctx.conf.emoticons
-    this.initEl()
+    this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
+
+    this.init()
   }
 
-  initEl () {
-    this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
+  async init() {
+    // 数据处理
+    Ui.showLoading(this.$el)
+    this.emoticons = await this.handleData(this.ctx.conf.emoticons)
+    Ui.hideLoading(this.$el)
 
-    // 表情列表
-    this.listWrapEl = Utils.createElement(`<div class="atk-emoticons-list-wrap"></div>`)
-    this.$el.append(this.listWrapEl)
-
-    Object.entries(this.emoticons).forEach(([key, item]) => {
-      const emoticonsEl = Utils.createElement(`<div class="atk-emoticons-list" style="display: none;"></div>`)
-      this.listWrapEl.append(emoticonsEl)
-      emoticonsEl.setAttribute('data-key', key)
-      emoticonsEl.setAttribute('data-input-type', item.inputType)
-      Object.entries(item.container).forEach(([name, content]) => {
-        const itemEl = Utils.createElement(`<span class="atk-emoticons-item"></span>`)
-        emoticonsEl.append(itemEl)
-        itemEl.setAttribute('title', name)
-        itemEl.setAttribute('data-content', content)
-        if (item.inputType === 'image') {
-          const imgEl = document.createElement('img')
-          imgEl.src = content
-          imgEl.alt = name
-          itemEl.append(imgEl)
-        } else {
-          itemEl.innerText = content
+    // 初始化元素
+    this.initEmoticonsList()
+  }
+
+  async handleData(data: any): Promise<any[]> {
+    if (!Array.isArray(data) && ['object', 'string'].includes(typeof data)) {
+      data = [data]
+    }
+
+    if (!Array.isArray(data)) {
+      Ui.setError(this.$el, "表情包数据必须为 Array/Object/String 类型")
+      Ui.hideLoading(this.$el)
+      return []
+    }
+
+    const pushGrp = (grp: EmoticonGrpData) => {
+      if (typeof grp !== 'object') return
+      if (grp.name && data.find(o => o.name === grp.name)) return
+      data.push(grp)
+    }
+
+    // 加载子内容
+    const remoteLoad = async (d: any[]) => {
+      await Promise.all(d.map(async (grp, index) => {
+        if (typeof grp === 'object' && !Array.isArray(grp)) {
+          pushGrp(grp)
+        } else if (Array.isArray(grp)) {
+          await remoteLoad(grp)
+        } else if (typeof grp === "string") {
+          const grpData = await this.remoteLoad(grp)
+
+          if (Array.isArray(grpData)) await remoteLoad(grpData)
+          else if (typeof grpData === 'object') pushGrp(grpData)
         }
+      }))
+    }
+    await remoteLoad(data)
+
+    // 处理数组数据
+    data.forEach((item: any) => {
+      if (this.isOwOFormat(item)) {
+        const c = this.convertOwO(item)
+        c.forEach((grp) => { pushGrp(grp) })
+      } else if (Array.isArray(item)) {
+        item.forEach((grp) => { pushGrp(grp) })
+      }
+    })
+
+    // 剔除非法数据
+    data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
+
+    console.log(data)
+
+    this.solveNullKey(data)
+    this.solveSameKey(data)
+
+    return data
+  }
+
+  /** 远程加载 */
+  async remoteLoad(url: string): Promise<any> {
+    if (!url) return []
+
+    try {
+      const resp = await fetch(url)
+      const json = await resp.json()
+      return json
+    } catch (err) {
+      Ui.hideLoading(this.$el)
+      Ui.setError(this.$el, `表情加载失败 ${String(err)}`)
+      return []
+    }
+  }
+
+  /** 避免表情 item.key 为 null 的情况 */
+  solveNullKey(data: EmoticonGrpData[]) {
+    data.forEach((grp) => {
+      grp.items.forEach((item, index) => {
+        if (!item.key) item.key = `${grp.name} ${index+1}`
       })
     })
+  }
 
-    // 表情分类
-    this.typesEl = Utils.createElement(`<div class="atk-emoticons-types"></div>`)
-    this.$el.append(this.typesEl)
-    Object.entries(this.emoticons).forEach(([key, item]) => {
-      const itemEl = Utils.createElement('<span />')
-      this.typesEl.append(itemEl)
-      itemEl.setAttribute('data-key', key)
-      itemEl.innerText = key
+  /** 避免相同 item.key */
+  solveSameKey(data: EmoticonGrpData[]) {
+    const tmp: {[key: string]: number} = {}
+    data.forEach((grp) => {
+      grp.items.forEach(item => {
+        if (!item.key || String(item.key).trim() === "") return
+        if (!tmp[item.key]) tmp[item.key] = 1
+        else tmp[item.key]++
+
+        if (tmp[item.key] > 1) item.key = `${item.key} ${tmp[item.key]}`
+      })
     })
+  }
 
-    // 绑定切换分类按钮
-    this.typesEl.querySelectorAll('span').forEach((btn) => {
-      btn.addEventListener('click', (evt) => {
-        const btnEl = evt.currentTarget as HTMLElement
-        const key = btnEl.getAttribute('data-key')
-        if (key) this.openType(key)
+  /** 判断是否为 OwO 格式 */
+  isOwOFormat(data: any) {
+    try {
+      return (typeof data === 'object') && !!Object.values(data).length
+        && Array.isArray(Object.keys(Object.values<any>(data)[0].container))
+        && Object.keys(Object.values<any>(data)[0].container[0]).includes('icon')
+    } catch { return false }
+  }
+
+  /** 转换 OwO 格式数据 */
+  convertOwO(owoData: OwOFormatType): EmoticonListData {
+    const dest: EmoticonListData = []
+    Object.entries(owoData).forEach(([grpName, grp]) => {
+      const nGrp: EmoticonGrpData = { name: grpName, type: grp.type, items: [] }
+      grp.container.forEach((item, index) => {
+        // 图片标签提取 src 属性值
+        const iconStr = item.icon
+        if (/<(img|IMG)/.test(iconStr)) {
+          const find = /src=["'](.*?)["']/.exec(iconStr)
+          if (find && find.length > 1) item.icon = find[1]
+        }
+        nGrp.items.push({ key: item.text || `${grpName} ${index+1}`, val: item.icon })
       })
+      dest.push(nGrp)
     })
+    return dest
+  }
 
-    // 默认打开第一个分类
-    if (Object.keys(this.emoticons).length > 0)
-      this.openType(Object.keys(this.emoticons)[0])
-
-    // 绑定点击表情
-    this.listWrapEl.querySelectorAll<HTMLElement>('.atk-emoticons-item').forEach((item: HTMLElement) => {
-      item.onclick = (evt) => {
-        const elem = evt.currentTarget as HTMLElement
-        const inputType = elem.closest('.atk-emoticons-list')!.getAttribute('data-input-type')
-
-        const title = elem.getAttribute('title')
-        const content = elem.getAttribute('data-content')
-        if (inputType === 'image') {
-          this.editor.insertContent(`:[${title}]`)
+  /** 初始化表情列表界面 */
+  initEmoticonsList () {
+    // 表情列表
+    this.$grpWrap = Utils.createElement(`<div class="atk-grp-wrap"></div>`)
+    this.$el.append(this.$grpWrap)
+
+    this.emoticons.forEach((grp, index) => {
+      const $grp = Utils.createElement(`<div class="atk-grp" style="display: none;"></div>`)
+      this.$grpWrap.append($grp)
+      $grp.setAttribute('data-index', String(index))
+      $grp.setAttribute('data-grp-name', grp.name)
+      $grp.setAttribute('data-type', grp.type)
+      grp.items.forEach((item) => {
+        const $item = Utils.createElement(`<span class="atk-item"></span>`)
+        $grp.append($item)
+
+        if (!!item.key && !(new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key)))
+          $item.setAttribute('title', item.key)
+
+        if (grp.type === 'image') {
+          const imgEl = document.createElement('img')
+          imgEl.src = item.val
+          imgEl.alt = item.key
+          $item.append(imgEl)
         } else {
-          this.editor.insertContent(content || '')
+          $item.innerText = item.val
         }
-      }
+
+        $item.onclick = () => {
+          if (grp.type === 'image') {
+            this.editor.insertContent(`:[${item.key}]`)
+          } else {
+            this.editor.insertContent(item.val || '')
+          }
+        }
+      })
+    })
+
+    // 表情分类
+    this.$grpSwitcher = Utils.createElement(`<div class="atk-grp-switcher"></div>`)
+    this.$el.append(this.$grpSwitcher)
+    this.emoticons.forEach((grp, index) => {
+      const $item = Utils.createElement('<span />')
+      $item.innerText = grp.name
+      $item.setAttribute('data-index', String(index))
+      $item.onclick = () => (this.openGrp(index))
+      this.$grpSwitcher.append($item)
     })
+
+    // 默认打开第一个分类
+    if (this.emoticons.length > 0)
+      this.openGrp(0)
   }
 
-  openType (key: string) {
-    Array.from(this.listWrapEl.children).forEach((item) => {
+  /** 打开一个表情组 */
+  openGrp (index: number) {
+    Array.from(this.$grpWrap.children).forEach((item) => {
       const el = item as HTMLElement
-      if (el.getAttribute('data-key') !== key) {
+      if (el.getAttribute('data-index') !== String(index)) {
         el.style.display = 'none'
       } else {
         el.style.display = ''
       }
     })
 
-    this.typesEl.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
-    this.typesEl.querySelector(`span[data-key="${key}"]`)?.classList.add('active')
+    this.$grpSwitcher.querySelectorAll('span.active').forEach(item => item.classList.remove('active'))
+    this.$grpSwitcher.querySelector(`span[data-index="${index}"]`)?.classList.add('active')
 
     this.changeListHeight()
   }
 
-  getName () {
-    return 'emoticons'
-  }
-
-  getBtnHtml () {
-    return '表情'
-  }
+  static Name = 'emoticons'
+  static BtnHTML = '表情'
 
   getEl () {
     return this.$el
   }
 
   changeListHeight () {
-    /* const listWrapHeight = Utils.getHeight(this.listWrapElem)
+    /* const listWrapHeight = Utils.getHeight(this.$grpWrapem)
     this.editor.plugWrapEl.style.height = `${listWrapHeight > 150 ? listWrapHeight : 150}px` */
   }
 
@@ -137,11 +253,15 @@ export default class EmoticonsPlug extends EditorPlug {
     this.$el.parentElement!.style.height = ''
   }
 
+  /** 处理评论 content 中的表情内容 */
   public transEmoticonImageText (text: string) {
-    Object.entries(this.emoticons).forEach(([grpName, grp]) => {
-      if (grp.inputType !== 'image') return
-      Object.entries(grp.container).forEach(([name, imgSrc]) => {
-        text = text.split(`:[${name}]`).join(`![${name}](${imgSrc}) `) // replaceAll(...)
+    if (!this.emoticons || !Array.isArray(this.emoticons))
+      return text
+
+    this.emoticons.forEach((grp) => {
+      if (grp.type !== 'image') return
+      Object.entries(grp.items).forEach(([index, item]) => {
+        text = text.split(`:[${item.key}]`).join(`<img src="${item.val}" atk-emoticon="${item.key}">`) // replaceAll(...)
       })
     })
 

package/src/components/editor-plugs/preview-plug.less

@@ -3,5 +3,5 @@
   overflow-x: hidden;
   height: 100%;
   width: 100%;
-  padding: @block-padding 10px + 5px;
+  padding: 10px (10px + 5px);
 }

package/src/components/editor-plugs/preview-plug.ts

@@ -19,13 +19,8 @@ export default class PreviewPlug extends EditorPlug {
     this.binded = false
   }
 
-  getName () {
-    return 'preview'
-  }
-
-  getBtnHtml () {
-    return '预览 <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>'
-  }
+  static Name = 'preview'
+  static BtnHTML = '预览 <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>'
 
   getEl () {
     return this.$el

package/src/components/editor.ts

@@ -18,18 +18,17 @@ export default class Editor extends Component {
   public $header: HTMLElement
   public $textareaWrap: HTMLElement
   public $textarea: HTMLTextAreaElement
-  public $closeComment: HTMLTextAreaElement
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
-  public $bottomPartLeft: HTMLElement
-  public $plugSwitcherWrap: HTMLElement
-  public $bottomPartRight: HTMLElement
+  public $plugBtnWrap: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
   private replyComment: CommentData|null = null
   private $sendReply: HTMLElement|null = null
 
+  private isTraveling = false
+
   private get user () {
     return this.ctx.user
   }
@@ -39,17 +38,14 @@ export default class Editor extends Component {
 
     this.$el = Utils.createElement(EditorHTML)
 
-    this.$header = this.$el.querySelector('.atk-editor-header')!
-    this.$textareaWrap = this.$el.querySelector('.atk-editor-textarea-wrap')!
-    this.$textarea = this.$el.querySelector('.atk-editor-textarea')!
-    this.$closeComment = this.$el.querySelector('.atk-close-comment')!
-    this.$plugWrap = this.$el.querySelector('.atk-editor-plug-wrap')!
-    this.$bottom = this.$el.querySelector('.atk-editor-bottom')!
-    this.$bottomPartLeft = this.$el.querySelector('.atk-editor-bottom-part.atk-left')!
-    this.$plugSwitcherWrap = this.$el.querySelector('.atk-editor-plug-switcher-wrap')!
-    this.$bottomPartRight = this.$el.querySelector('.atk-editor-bottom-part.atk-right')!
+    this.$header = this.$el.querySelector('.atk-header')!
+    this.$textareaWrap = this.$el.querySelector('.atk-textarea-wrap')!
+    this.$textarea = this.$el.querySelector('.atk-textarea')!
+    this.$plugWrap = this.$el.querySelector('.atk-plug-wrap')!
+    this.$bottom = this.$el.querySelector('.atk-bottom')!
+    this.$plugBtnWrap = this.$el.querySelector('.atk-plug-btn-wrap')!
     this.$submitBtn = this.$el.querySelector('.atk-send-btn')!
-    this.$notifyWrap = this.$el.querySelector('.atk-editor-notify-wrap')!
+    this.$notifyWrap = this.$el.querySelector('.atk-notify-wrap')!
 
     this.initLocalStorage()
     this.initHeader()
@@ -60,10 +56,13 @@ export default class Editor extends Component {
     // 监听事件
     this.ctx.on('editor-open', () => (this.open()))
     this.ctx.on('editor-close', () => (this.close()))
-    this.ctx.on('editor-reply', (commentData) => (this.setReply(commentData)))
+    this.ctx.on('editor-reply', (p) => (this.setReply(p.data, p.$el, p.scroll)))
+    this.ctx.on('editor-reply-cancel', () => (this.cancelReply()))
     this.ctx.on('editor-show-loading', () => (Ui.showLoading(this.$el)))
     this.ctx.on('editor-hide-loading', () => (Ui.hideLoading(this.$el)))
     this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
+    this.ctx.on('editor-travel', ($el) => (this.travel($el)))
+    this.ctx.on('editor-travel-back', () => (this.travelBack()))
   }
 
   initLocalStorage () {
@@ -196,38 +195,41 @@ export default class Editor extends Component {
     this.$plugWrap.innerHTML = ''
     this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
-    this.$plugSwitcherWrap.innerHTML = ''
+    this.$plugBtnWrap.innerHTML = ''
 
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      const plug = new PlugObj(this)
-      this.plugList[plug.getName()] = plug
-
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${plug.getBtnHtml()}</span>`)
-      this.$plugSwitcherWrap.appendChild(btnElem)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      this.$plugBtnWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
-        this.$plugSwitcherWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
+        let plug = this.plugList[PlugObj.Name]
+        if (!plug) {
+          plug = new PlugObj(this)
+          this.plugList[PlugObj.Name] = plug
+        }
+
+        this.$plugBtnWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
 
         // 若点击已打开的，则收起
-        if (plug.getName() === this.openedPlugName) {
+        if (PlugObj.Name === this.openedPlugName) {
           plug.onHide()
           this.$plugWrap.style.display = 'none'
           this.openedPlugName = null
           return
         }
 
-        if (this.$plugWrap.querySelector(`[data-plug-name="${plug.getName()}"]`) === null) {
+        if (this.$plugWrap.querySelector(`[data-plug-name="${PlugObj.Name}"]`) === null) {
           // 需要初始化
           const plugEl = plug.getEl()
-          plugEl.setAttribute('data-plug-name', plug.getName())
+          plugEl.setAttribute('data-plug-name', PlugObj.Name)
           plugEl.style.display = 'none'
           this.$plugWrap.appendChild(plugEl)
         }
 
         (Array.from(this.$plugWrap.children) as HTMLElement[]).forEach((plugItemEl: HTMLElement) => {
           const plugItemName = plugItemEl.getAttribute('data-plug-name')!
-          if (plugItemName === plug.getName()) {
+          if (plugItemName === PlugObj.Name) {
             plugItemEl.style.display = ''
             this.plugList[plugItemName].onShow()
           } else {
@@ -237,7 +239,7 @@ export default class Editor extends Component {
         })
 
         this.$plugWrap.style.display = ''
-        this.openedPlugName = plug.getName()
+        this.openedPlugName = PlugObj.Name
 
         btnElem.classList.add('active')
       })
@@ -315,21 +317,27 @@ export default class Editor extends Component {
     this.$sendReply = null
   }
 
-  setReply (commentData: CommentData) {
+  setReply (commentData: CommentData, $comment: HTMLElement, scroll = true) {
     if (this.replyComment !== null) {
       this.cancelReply()
     }
 
     if (this.$sendReply === null) {
-      this.$sendReply = Utils.createElement('<div class="atk-send-reply-wrap"><div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div></div>');
+      this.$sendReply = Utils.createElement('<div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div>');
       this.$sendReply.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
       this.$sendReply.addEventListener('click', () => {
         this.cancelReply()
       })
-      this.$textareaWrap.prepend(this.$sendReply)
+      this.$textareaWrap.append(this.$sendReply)
     }
     this.replyComment = commentData
-    Ui.scrollIntoView(this.$el)
+
+    if (this.ctx.conf.editorTravel === true) {
+      this.travel($comment)
+    }
+
+    if (scroll) Ui.scrollIntoView(this.$el)
+
     this.$textarea.focus()
   }
 
@@ -339,6 +347,10 @@ export default class Editor extends Component {
       this.$sendReply = null
     }
     this.replyComment = null
+
+    if (this.ctx.conf.editorTravel === true) {
+      this.travelBack()
+    }
   }
 
   initSubmit () {
@@ -366,15 +378,24 @@ export default class Editor extends Component {
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,
-        rid: this.replyComment === null ? 0 : this.replyComment.id
+        rid: (this.replyComment === null) ? 0 : this.replyComment.id,
+        page_key: (this.replyComment === null) ? this.ctx.conf.pageKey : this.replyComment.page_key,
+        page_title: (this.replyComment === null) ? this.ctx.conf.pageTitle : undefined,
+        site_name: (this.replyComment === null) ? this.ctx.conf.site : this.replyComment.site_name
       })
 
+      // 回复不同页面的评论
+      if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
+        window.open(`${this.replyComment.page_key}#atk-comment-${nComment.id}`)
+      }
+
       this.ctx.trigger('list-insert', nComment)
       this.clearEditor() // 清空编辑器
       this.ctx.trigger('editor-submitted')
     } catch (err: any) {
       console.error(err)
       this.showNotify(`评论失败，${err.msg || String(err)}`, 'e')
+      return
     } finally {
       Ui.hideLoading(this.$el)
     }
@@ -386,7 +407,8 @@ export default class Editor extends Component {
 
   /** 关闭评论 */
   close () {
-    this.$closeComment.style.display = ''
+    if (!this.$textareaWrap.querySelector('.atk-comment-closed'))
+      this.$textareaWrap.prepend(Utils.createElement('<div class="atk-comment-closed">仅管理员可评论</div>'))
 
     if (!this.user.data.isAdmin) {
       this.$textarea.style.display = 'none'
@@ -401,9 +423,28 @@ export default class Editor extends Component {
 
   /** 打开评论 */
   open () {
-    this.$closeComment.style.display = 'none'
+    this.$textareaWrap.querySelector('.atk-comment-closed')?.remove()
     this.$textarea.style.display = ''
     this.$bottom.style.display = ''
   }
+
+  travel ($afterEl: HTMLElement) {
+    if (this.isTraveling) return
+    this.isTraveling = true
+    this.$el.after(Utils.createElement('<div class="atk-editor-travel-placeholder"></div>'))
+
+    const $travelPlace = Utils.createElement('<div></div>')
+    $afterEl.after($travelPlace)
+    $travelPlace.replaceWith(this.$el)
+  }
+
+  travelBack () {
+    if (!this.isTraveling) return
+    this.isTraveling = false
+    this.ctx.$root.querySelector('.atk-editor-travel-placeholder')?.replaceWith(this.$el)
+
+    // 取消回复
+    if (this.replyComment !== null) this.cancelReply()
+  }
 }
 

package/src/components/html/comment.html

@@ -1,25 +1,18 @@
-<div class="atk-comment-wrap" data-comment-id="">
+<div class="atk-comment-wrap">
   <div class="atk-comment">
-
     <div class="atk-avatar"></div>
-
-    <div class="atk-comment-main">
-
+    <div class="atk-main">
       <div class="atk-header">
-        <span class="atk-nick"></span>
-        <span class="atk-badge"></span>
-        <span class="atk-date"></span>
+        <span class="atk-item atk-nick"></span>
+        <span class="atk-item atk-badge"></span>
+        <span class="atk-item atk-date"></span>
       </div>
-
       <div class="atk-body">
         <div class="atk-content"></div>
       </div>
-
       <div class="atk-footer">
-        <div class="atk-comment-actions"></div>
+        <div class="atk-actions"></div>
       </div>
-
     </div>
-
   </div>
 </div>

package/src/components/html/editor.html

@@ -1,19 +1,18 @@
-<div class="atk-editor">
-  <div class="atk-editor-header">
+<div class="atk-main-editor">
+  <div class="atk-header">
     <input name="nick" placeholder="昵称" class="atk-nick" type="text" required="required">
     <input name="email" placeholder="邮箱" class="atk-email" type="email" required="required">
     <input name="link" placeholder="网址 (https://)" class="atk-link" type="url">
   </div>
-  <div class="atk-editor-textarea-wrap">
-    <div class="atk-close-comment" style="display: none;"><span>仅管理员可评论</span></div>
-    <textarea id="atk-editor-textarea" class="atk-editor-textarea" placeholder=""></textarea>
+  <div class="atk-textarea-wrap">
+    <textarea class="atk-textarea" placeholder=""></textarea>
   </div>
-  <div class="atk-editor-plug-wrap" style="display: none;"></div>
-  <div class="atk-editor-bottom">
-    <div class="atk-editor-bottom-part atk-left atk-editor-plug-switcher-wrap"></div>
-    <div class="atk-editor-bottom-part atk-right">
+  <div class="atk-plug-wrap" style="display: none;"></div>
+  <div class="atk-bottom">
+    <div class="atk-item atk-plug-btn-wrap"></div>
+    <div class="atk-item">
       <button type="button" class="atk-send-btn"></button>
     </div>
   </div>
-  <div class="atk-editor-notify-wrap"></div>
+  <div class="atk-notify-wrap"></div>
 </div>