artalk 2.0.4 → 2.1.1

package/src/components/sidebar-views/transfer-view.ts

@@ -0,0 +1,218 @@
+import Api from '~/src/api'
+import Context from '../../context'
+import Component from '../../lib/component'
+import * as Utils from '../../lib/utils'
+import * as Ui from '../../lib/ui'
+import SiteList from '../admin/site-list'
+import Comment from '../comment'
+import SidebarView from '../sidebar-view'
+
+export default class TransferView extends SidebarView {ß
+  static viewName = 'transfer'
+  static viewTitle = '迁移'
+  static viewAdminOnly = true
+
+  viewTabs = {
+    'import': '导入',
+    'export': '导出',
+  }
+  viewActiveTab = 'import'
+
+  mount(siteName: string) {
+    this.switchTab('import', siteName)
+  }
+
+  switchTab(tab: string, siteName: string) {
+    if (tab === 'import') {
+      this.initImport()
+    } else if (tab === 'export') {
+      // if (window.confirm(`开始导出？`))
+      this.initExport()
+      return false
+    }
+    return true
+  }
+
+  initImport() {
+    this.$el.innerHTML =
+    `<div class="atk-log-wrap" style="display: none;">
+      <div class="atk-log-back-btn">返回</div>
+      <div class="atk-log"></div>
+    </div>
+    <div class="atk-form">
+    <div class="atk-label">数据类型</div>
+    <select name="AtkDataType">
+      <option value="artrans">Artrans (数据行囊)</option>
+      <option value="artalk_v1">Artalk v1 (PHP 旧版)</option>
+      <option value="typecho">Typecho</option>
+      <option value="wordpress">WordPress</option>
+      <option value="disqus">Disqus</option>
+      <option value="commento">Commento</option>
+      <option value="valine">Valine</option>
+      <option value="twikoo">Twikoo</option>
+    </select>
+    <div class="atk-label atk-data-file-label">数据文件</div>
+    <input type="file" name="AtkDataFile" accept="text/plain,.json">
+    <div class="atk-label">目标站点名</div>
+    <input type="text" name="AtkSiteName" placeholder="输入内容..." autocomplete="off">
+    <div class="atk-label">目标站点 URL</div>
+    <input type="text" name="AtkSiteURL" placeholder="输入内容..." autocomplete="off">
+    <div class="atk-label">启动参数（可选）</div>
+    <textarea name="AtkPayload"></textarea>
+    <span class="atk-desc">启动参数查阅：“<a href="https://artalk.js.org/guide/transfer.html" target="_blank">文档 · 数据搬家</a>”</span>
+    <button class="atk-btn" name="AtkSubmit">导入</button>
+    </div>`
+
+    const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
+    const $dataType = $form.querySelector<HTMLSelectElement>('[name="AtkDataType"]')!
+    const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
+    const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
+    const $siteName = $form.querySelector<HTMLInputElement>('[name="AtkSiteName"]')!
+    const $siteURL = $form.querySelector<HTMLInputElement>('[name="AtkSiteURL"]')!
+    const $payload = $form.querySelector<HTMLTextAreaElement>('[name="AtkPayload"]')!
+    const $submitBtn = $form.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
+    const setError = (msg: string) => window.alert(msg)
+
+    $dataType.onchange = () => {
+      if (['typecho'].includes($dataType.value)) {
+        $dataFile.style.display = 'none'
+        $dataFileLabel.style.display = 'none'
+      } else {
+        $dataFile.style.display = ''
+        $dataFileLabel.style.display = ''
+      }
+    }
+
+    $submitBtn.onclick = () => {
+      const dataType = $dataType.value.trim()
+      const siteName = $siteName.value.trim()
+      const siteURL = $siteURL.value.trim()
+      const payload = $payload.value.trim()
+
+      if (dataType === '') {
+        setError('请选择数据类型')
+        return
+      }
+
+      // 请求 payload 参数制备
+      let rData: any = {}
+      if (payload) {
+        // JSON 格式检验
+        try {
+          rData = JSON.parse(payload)
+        } catch (err) {
+          setError(`Payload JSON 格式有误：${String(err)}`)
+          return
+        }
+
+        if (rData !instanceof Object) {
+          setError(`Payload 需为 JSON 对象`)
+          return
+        }
+      }
+      if (siteName) rData.t_name = siteName
+      if (siteURL) rData.t_url = siteURL
+
+      // 创建导入会话
+      const createSession = (dataStr?: string) => {
+        const $logWrap = this.$el.querySelector<HTMLElement>('.atk-log-wrap')!
+        const $log = $logWrap.querySelector<HTMLElement>('.atk-log')!
+        const $backBtn = this.$el.querySelector<HTMLElement>('.atk-log-back-btn')!
+
+        $logWrap.style.display = ''
+        $form.style.display = 'none'
+
+        $backBtn.onclick = () => {
+          $logWrap.style.display = 'none'
+          $form.style.display = ''
+        }
+
+        if (dataStr) rData.json_data = dataStr
+
+        // 创建 iframe
+        const frameName = `f_${+new Date()}`
+        const $frame = document.createElement('iframe')
+        $frame.className = 'atk-iframe'
+        $frame.name = frameName
+        $log.innerHTML = ''
+        $log.append($frame)
+
+        const formParams: {[k: string]: string} = {
+          type: dataType,
+          payload: JSON.stringify(rData),
+          token: this.ctx.user.data.token || '',
+        }
+
+        // 创建临时表单，初始化 iframe
+        const $formTmp = document.createElement('form')
+        $formTmp.style.display = 'none'
+        $formTmp.setAttribute('method', 'post')
+        $formTmp.setAttribute('action', `${this.ctx.conf.server}/admin/import`)
+        $formTmp.setAttribute("target", frameName)
+
+        Object.entries(formParams).forEach(([key, val]) => {
+          const $inputTmp = document.createElement('input')
+          $inputTmp.setAttribute('type', 'hidden')
+          $inputTmp.setAttribute('name', key)
+          $inputTmp.value = val
+          $formTmp.appendChild($inputTmp)
+        })
+
+        $logWrap.append($formTmp)
+        $formTmp.submit()
+        $formTmp.remove()
+      }
+
+      const reader = new FileReader()
+      reader.onload = () => {
+        const data = String(reader.result)
+        createSession(data)
+      }
+
+      // 是否已选择文件
+      if ($dataFile.files?.length) {
+        // 先读取文件
+        reader.readAsText($dataFile.files[0])
+      } else {
+        // 直接开始会话
+        createSession()
+      }
+    }
+  }
+
+  async initExport() {
+    Ui.showLoading(this.$el)
+
+    try {
+      const d = await new Api(this.ctx).export()
+      this.download(`artrans-${this.getYmdHisFilename()}.json`, d)
+    } catch (err: any) {
+      console.log(err)
+      window.alert(`${String(err)}`)
+      return
+    } finally { Ui.hideLoading(this.$el) }
+  }
+
+  download(filename: string, text: string) {
+    const el = document.createElement('a')
+    el.setAttribute('href', `data:text/json;charset=utf-8,${encodeURIComponent(text)}`);
+    el.setAttribute('download', filename)
+    el.style.display = 'none'
+    document.body.appendChild(el)
+    el.click()
+    document.body.removeChild(el)
+  }
+
+  getYmdHisFilename() {
+    const date = new Date()
+
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+    const seconds = date.getSeconds()
+
+    return `${year}${month}${day}-${hours}${Utils.padWithZeros(minutes, 2)}${Utils.padWithZeros(seconds, 2)}`
+  }
+}

package/src/components/sidebar.ts

@@ -0,0 +1,288 @@
+import '../style/sidebar.less'
+
+import MD5 from '../lib/md5'
+import Context from '../context'
+import Component from '../lib/component'
+import * as Utils from '../lib/utils'
+import * as Ui from '../lib/ui'
+import Comment  from './comment'
+import SidebarHTML from './html/sidebar.html?raw'
+import Layer from './layer'
+
+import SidebarView from './sidebar-view'
+import CommentsView from './sidebar-views/comments-view'
+import PagesView from './sidebar-views/pages-view'
+import SitesView from './sidebar-views/sites-view'
+import TransferView from './sidebar-views/transfer-view'
+import { SiteData } from '~/types/artalk-data'
+import Api from '../api'
+import SiteListFloater from './admin/site-list-floater'
+import SettingView from './sidebar-views/setting-view'
+
+const DEFAULT_VIEW = 'comments'
+const REGISTER_VIEWS: (typeof SidebarView)[] = [
+  CommentsView, PagesView, SitesView, TransferView, // SettingView
+]
+
+export default class Sidebar extends Component {
+  public layer?: Layer
+
+  public $header: HTMLElement
+  public $headerMenu: HTMLElement
+  public $title: HTMLElement
+  public $avatar: HTMLElement
+  public $siteLogo?: HTMLElement
+  public $closeBtn: HTMLElement
+  public $nav: HTMLElement
+  public $curtViewBtn: HTMLElement
+  public $curtViewBtnIcon: HTMLElement
+  public $curtViewBtnText: HTMLElement
+  public $navTabs: HTMLElement
+  public $navViews: HTMLElement
+  public $viewWrap: HTMLElement
+  public siteSwitcher?: SiteListFloater
+
+  private get isAdmin() { return this.ctx.user.data.isAdmin }
+  public curtSite?: string
+  public curtView: string = DEFAULT_VIEW
+  public get curtViewInstance() {
+    return this.curtView ? this.viewInstances[this.curtView] : undefined
+  }
+  public curtTab?: string
+
+  public viewInstances: {[name: string]: SidebarView} = {}
+
+  private viewSwitcherShow = false
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    // initial elements
+    this.$el = Utils.createElement(SidebarHTML)
+    this.$header = this.$el.querySelector('.atk-sidebar-header')!
+    this.$headerMenu = this.$header.querySelector('.atk-menu')!
+    this.$title = this.$header.querySelector('.atk-sidebar-title')!
+    this.$avatar = this.$header.querySelector('.atk-avatar')!
+    this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
+
+    this.$nav = this.$el.querySelector('.atk-sidebar-nav')!
+    this.$curtViewBtn = this.$nav.querySelector('.akt-curt-view-btn')!
+    this.$curtViewBtnIcon = this.$curtViewBtn.querySelector('.atk-icon')!
+    this.$curtViewBtnText = this.$curtViewBtn.querySelector('.atk-text')!
+    this.$navTabs = this.$nav.querySelector('.atk-tabs')!
+    this.$navViews = this.$nav.querySelector('.atk-views')!
+
+    this.$viewWrap = this.$el.querySelector('.atk-sidebar-view-wrap')!
+
+    // init UI
+    this.initViewSwitcher()
+
+    this.$closeBtn.onclick = () => {
+      this.hide()
+    }
+
+    // event
+    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-hide', () => (this.hide()))
+    this.ctx.on('user-changed', () => { this.firstShow = true })
+  }
+
+  /** 初始化 view 切换器 */
+  private initViewSwitcher() {
+    this.$curtViewBtn.onclick = () => {
+      this.toggleViewSwitcher()
+    }
+
+    this.$navViews.innerHTML = ''
+    REGISTER_VIEWS.forEach(view => {
+      const $item = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navViews.append($item)
+      $item.setAttribute('data-name', view.viewName)
+      $item.innerText = view.viewTitle
+      if (view.viewName === this.curtView) {
+        $item.classList.add('atk-active')
+        this.$curtViewBtnText.innerText = view.viewTitle
+      }
+      $item.onclick = () => {
+        // 切换 view
+        this.switchView(view.viewName)
+
+        this.toggleViewSwitcher()
+      }
+    })
+  }
+
+  /** 显示/隐藏 view 切换器 */
+  private toggleViewSwitcher() {
+    if (!this.viewSwitcherShow) {
+      // 显示
+      this.$navViews.style.display = ''
+      this.$navTabs.style.display = 'none'
+      this.$curtViewBtnIcon.classList.add('atk-arrow')
+      // this.$curtViewBtnText.style.display = 'none'
+    } else {
+      // 隐藏
+      this.$navViews.style.display = 'none'
+      this.$navTabs.style.display = ''
+      this.$curtViewBtnIcon.classList.remove('atk-arrow')
+      // this.$curtViewBtnText.style.display = ''
+    }
+
+    this.viewSwitcherShow = !this.viewSwitcherShow
+  }
+
+  private firstShow = true
+
+  /** 显示 */
+  public async show() {
+    this.$el.style.transform = '' // 动画清除，防止二次打开失效
+
+    // 获取 Layer
+    this.layer = new Layer(this.ctx, 'sidebar', this.$el)
+    this.layer.show()
+
+    // viewWrap 滚动条归位
+    this.$viewWrap.scrollTo(0, 0)
+
+    // 执行动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 20)
+
+    // 第一次加载
+    if (this.firstShow) {
+      ///////////////////
+      //// IMPORTANT ////
+      ///////////////////
+
+      // 用户权限检测
+      if (this.isAdmin) {
+        // 是管理员
+        this.$title.innerText = '控制中心'
+        this.$curtViewBtn.style.display = ''
+
+        if (!this.siteSwitcher) {
+          // 初始化站点切换器
+          this.siteSwitcher = new SiteListFloater(this.ctx, {
+            onSwitchSite: (siteName) => { this.switchSite(siteName) },
+            onClickSitesViewBtn: () => { this.switchView('sites') }
+          })
+          this.$viewWrap.before(this.siteSwitcher.$el)
+          this.$avatar.onclick = (evt) => {
+            if (!this.isAdmin) return
+            this.siteSwitcher?.show(evt.target as any)
+          }
+
+        }
+
+        this.curtSite = this.conf.site
+
+        Ui.showLoading(this.$el)
+        try {
+          await this.siteSwitcher!.load(this.curtSite)
+        } catch (err: any) {
+          const $err = Utils.createElement(`<span>加载失败：${err.msg || '网络错误'}<br/></span>`)
+          const $retryBtn = Utils.createElement('<span style="cursor:pointer;">点击重新获取</span>')
+          $err.appendChild($retryBtn)
+          $retryBtn.onclick = () => { Ui.setError(this.$el, null); this.show() }
+          Ui.setError(this.$el, $err)
+          return
+        } finally { Ui.hideLoading(this.$el) }
+
+        // 站点图像
+        this.$avatar.innerHTML = ''
+        this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
+        this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
+        this.$avatar.append(this.$siteLogo)
+      } else {
+        // 不是管理员
+        this.$title.innerText = '通知中心'
+        this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
+        this.curtSite = this.conf.site // 第一次 show 使用当前站点数据
+
+        // 头像
+        const $avatarImg = document.createElement('img') as HTMLImageElement
+        $avatarImg.src = Utils.getGravatarURL(this.ctx, MD5(this.ctx.user.data.email.toLowerCase()))
+        this.$avatar.innerHTML = ''
+        this.$avatar.append($avatarImg)
+      }
+
+      this.switchView(DEFAULT_VIEW) // 打开默认 view
+      this.firstShow = false
+    }
+  }
+
+  /** 隐藏 */
+  public hide() {
+    // 执行动画
+    this.$el.style.transform = ''
+
+    // 用完即销毁
+    this.layer?.dispose()
+  }
+
+  /** 切换 View */
+  public switchView(viewName: string) {
+    let view = this.viewInstances[viewName]
+    if (!view) {
+      // 初始化 View
+      const View = REGISTER_VIEWS.find(o => o.viewName === viewName)!
+      view = new View(this.ctx, this.$viewWrap)
+      this.viewInstances[viewName] = view
+    }
+
+    // init view
+    view.mount(this.curtSite!)
+
+    this.curtView = viewName
+    this.curtTab = view.viewActiveTab
+
+    // update view indicator
+    this.$curtViewBtnText.innerText = (view.constructor as typeof SidebarView).viewTitle
+    this.$navViews.querySelectorAll('.atk-tab-item').forEach((e) => {
+      if (e.getAttribute('data-name') === viewName) {
+        e.classList.add('atk-active')
+      } else {
+        e.classList.remove('atk-active')
+      }
+    })
+
+    // update tabs
+    this.loadViewTabs(view)
+
+    // load element
+    this.$viewWrap.innerHTML = ''
+    this.$viewWrap.append(view.$el)
+    this.$viewWrap.classList.forEach((c) => {
+      if (c.startsWith('atk-view-name-'))
+        this.$viewWrap.classList.remove(c)
+    })
+    this.$viewWrap.classList.add(`atk-view-name-${(view.constructor as typeof SidebarView).viewName}`)
+  }
+
+  private loadViewTabs(view: SidebarView) {
+    this.$navTabs.innerHTML = ''
+    Object.entries<string>(view.viewTabs).forEach(([tabName, label]) => {
+      const $tab = Utils.createElement(`<div class="atk-tab-item"></div>`)
+      this.$navTabs.append($tab)
+      $tab.innerText = label
+      if (view.viewActiveTab === tabName) $tab.classList.add('atk-active')
+
+      // 切换 tab
+      $tab.onclick = () => {
+        if (view.switchTab(tabName, this.curtSite!) === false) { return }
+        this.$navTabs.querySelectorAll('.atk-active').forEach(e => e.classList.remove('atk-active'))
+        $tab.classList.add('atk-active')
+        this.curtTab = tabName
+      }
+    })
+  }
+
+  /** 切换站点 */
+  private switchSite(siteName: string) {
+    this.curtSite = siteName
+    const curtView = this.curtViewInstance
+    curtView?.switchTab(this.curtTab!, siteName)
+    if (this.$siteLogo) this.$siteLogo.innerText = this.curtSite.substr(0, 1)
+  }
+}

package/src/context.ts

@@ -0,0 +1,42 @@
+import User from './lib/user'
+import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+
+/**
+ * Artalk Context
+ */
+export default class Context {
+  public cid: number // Context 唯一标识
+  public $root: HTMLElement
+  public conf: ArtalkConfig
+  public user: User
+
+  private eventList: Event[] = []
+
+  public constructor (rootEl: HTMLElement, conf: ArtalkConfig) {
+    this.cid = +new Date()
+    this.$root = rootEl
+    this.conf = conf
+    this.user = new User(this.conf)
+
+    this.$root.setAttribute('atk-run-id', this.cid.toString())
+  }
+
+  public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>, scope: EventScopeType = 'internal') {
+    this.eventList.push({ name, handler: handler as any, scope })
+  }
+
+  public off<K extends keyof EventPayloadMap>(name: K, handler?: Handler<EventPayloadMap[K]>, scope: EventScopeType = 'internal') {
+    this.eventList = this.eventList.filter((evt) => {
+      if (handler) return !(evt.name === name && evt.handler === handler && evt.scope === scope)
+      return !(evt.name === name && evt.scope === scope) // 删除全部相同 name event
+    })
+  }
+
+  public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K], scope?: EventScopeType) {
+    this.eventList
+      .filter((evt) => evt.name === name && (scope ? (evt.scope === scope) : true))
+      .map((evt) => evt.handler)
+      .forEach((handler) => handler(payload as any))
+  }
+}

package/src/default-conf.ts

@@ -0,0 +1,42 @@
+import ArtalkConfig from "~/types/artalk-config";
+import emoticons from './assets/emoticons.json'
+
+const defaultConf: ArtalkConfig = {
+  el: '',
+  pageKey: '',
+  server: '',
+  site: '',
+
+  placeholder: '键入内容...',
+  noComment: '「此时无声胜有声」',
+  sendBtn: '发送评论',
+  darkMode: false,
+
+  emoticons,
+
+  vote: true,
+  voteDown: false,
+  uaBadge: true,
+  flatMode: 'auto',
+  maxNesting: 3,
+  gravatar: {
+    default: 'mp',
+    mirror: 'https://sdn.geekzu.org/avatar/',
+  },
+
+  pagination: {
+    pageSize: 15,
+    readMore: true,
+    autoLoad: true,
+  },
+
+  heightLimit: {
+    content: 200,
+    children: 300,
+  },
+
+  reqTimeout: 15000,
+  versionCheck: true,
+}
+
+export default defaultConf

package/src/lib/checker/admin-checker.ts

@@ -0,0 +1,33 @@
+import Api from '@/api'
+import * as Utils from '../utils'
+import { Checker } from '.'
+
+const AdminChecker: Checker = {
+  inputType: 'password',
+
+  request(that, inputVal) {
+    const data = {
+      name: that.ctx.user.data.nick,
+      email: that.ctx.user.data.email,
+      password: inputVal
+    }
+
+    return new Api(that.ctx).login(data.name, data.email, data.password)
+  },
+
+  body() {
+    return Utils.createElement('<span>敲入密码来验证管理员身份：</span>')
+  },
+
+  onSuccess(that, userToken, inputVal, formEl) {
+    that.ctx.user.data.isAdmin = true
+    that.ctx.user.data.token = userToken
+    that.ctx.user.save()
+    that.ctx.trigger('user-changed', that.ctx.user.data)
+    that.ctx.trigger('list-reload')
+  },
+
+  onError(that, err, inputVal, formEl) {}
+}
+
+export default AdminChecker

package/src/lib/checker/captcha-checker.ts

@@ -0,0 +1,38 @@
+import Api from '@/api'
+import * as Utils from '../utils'
+import { Checker } from '.'
+
+const CaptchaChecker: Checker = {
+  request(that, inputVal) {
+    return new Api(that.ctx).captchaCheck(inputVal)
+  },
+
+  body(that) {
+    const elem = Utils.createElement(
+      `<span><img class="atk-captcha-img" src="${that.submitCaptchaImgData || ''}" alt="验证码">敲入验证码继续：</span>`
+    );
+
+    // 刷新验证码
+    elem.querySelector<HTMLElement>('.atk-captcha-img')!.onclick = () => {
+      const imgEl = elem.querySelector('.atk-captcha-img')
+      new Api(that.ctx).captchaGet()
+        .then((imgData) => {
+          imgEl!.setAttribute('src', imgData)
+        })
+        .catch((err) => {
+          console.error('验证码获取失败 ', err)
+        })
+    }
+    return elem
+  },
+
+  onSuccess(that, data, inputVal, formEl) {
+    that.submitCaptchaVal = inputVal
+  },
+
+  onError(that, err, inputVal, formEl) {
+    formEl.querySelector<HTMLElement>('.atk-captcha-img')!.click() // 刷新验证码
+  }
+}
+
+export default CaptchaChecker