v2.2.4

Signed-off-by: qwqcode <qwqcode@gmail.com>

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   ],
   plugins: ['@typescript-eslint', 'import'],
   rules: {
+    'no-alert': 'off',
     'no-unused-vars': 'off',
     'no-plusplus': 0,
     'no-param-reassign': 0,

README.md

@@ -14,7 +14,9 @@
 
 > 🌌 一款简洁的自托管评论系统 | A Selfhosted Comment System.
 
-前往：[“**官方文档**”](https://artalk.js.org)
+可参考：[“官方文档”](https://artalk.js.org)
+
+最新版：[“Releases”](https://github.com/ArtalkJS/ArtalkGo/releases)
 
 ---
 
@@ -52,8 +54,8 @@
 - 数据备份：防止评论数据丢失
 - 数据迁移：在不同评论系统之间来回切换
 - 一页多评：一页多个评论区（似乎没啥用
-- Markdown 语法默认支持
-- 支持 Latex：需引入 Artalk 的 Katex 插件
+- Markdown：语法默认支持
+- 支持 Latex：引入 Artalk 的 Katex 插件
 - [Vite](https://github.com/vitejs/vite)：开发者的极致体验
 
 ## 食用方针
@@ -69,13 +71,140 @@ import Artalk from 'artalk'
 
 new Artalk({
   el:        '#Comments',
-  pageKey:   '<页面链接>',
-  pageTitle: '<页面标题>',
-  server:    '<后端地址>',
-  site:      '<站点名称>',
+  pageKey:   'http://your_domain/post/1', // 页面链接
+  pageTitle: '关于如何引入 Artalk 这档子事', // 页面标题
+  server:    'http://localhost:8080/api', // 后端地址
+  site:      'Artalk 的博客 (你的站点名)',
 })
 ```
 
+### Docker
+
+```sh
+# 为 Artalk 创建一个目录
+mkdir Artalk
+cd Artalk
+
+# 下载配置文件模版
+curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
+
+docker run -d \
+  --name artalk \
+  -p 0.0.0.0:8080:23366 \
+  -v $(pwd)/conf.yml:/conf.yml \
+  -v $(pwd)/data:/data \
+  artalk/artalk-go
+```
+
+### Docker Compose
+
+```sh
+mkdir Artalk
+cd Artalk
+
+vim docker-compose.yaml
+```
+
+```yaml
+version: "3.5"
+services:
+  artalk:
+    container_name: artalk
+    image: artalk/artalk-go
+    ports:
+      - 8080:23366
+    volumes:
+      - ./conf.yml:/conf.yml
+      - ./data:/data
+```
+
+```sh
+docker-compose up -d
+```
+
+## TODOs 
+
+- [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
+- [x] 多站点支持
+- [x] 多数据库支持
+- [x] 评论获取分页
+- [x] 评论点赞投票
+- [x] 浏览量统计
+- [x] 评论分页加载
+- [x] 评论置顶 / 精华
+- [x] 评论排序 (热度 / 时间)
+- [x] 通知中心
+  - [x] 提及
+  - [x] 全部
+  - [x] 我的
+  - [x] 待审
+- [x] 管理员控制台
+  - [x] 评论 (增/删/改)
+  - [x] 页面 (增/删/改)
+  - [x] 站点 (增/删/改)
+  - [x] 数据分页
+  - [ ] 配置 (GUI)
+- [x] 数据导入 ([Artransfer](https://github.com/ArtalkJS/Artransfer))
+  - [x] Artrans
+  - [x] Artalk v1 (PHP)
+  - [x] WordPress
+  - [x] Typecho
+  - [x] Valine
+  - [x] Disqus
+  - [x] Commento
+  - [x] Twikoo
+- [x] 数据导出
+- [ ] 数据备份同步
+- [x] 邮件异步队列发送
+- [ ] 邮件队列持久化
+- [x] 邮件多种发送方式
+  - [x] SMTP
+  - [x] 阿里云邮件
+  - [x] 系统调用 sendmail
+- [x] 邮件多模板自定义
+- [x] 用户已读标记
+- [x] 验证码
+  - [x] 图片验证码
+  - [x] [极验](https://www.geetest.com/)滑动验证码
+- [x] 反垃圾
+  - [x] [Akismet](https://akismet.com/)
+  - [x] [阿里云内容安全](https://help.aliyun.com/document_detail/28417.html)
+  - [x] [腾讯云内容安全](https://cloud.tencent.com/document/product/1124/64508)
+  - [x] 关键字过滤
+- [x] 评论通知管理员 ([notify](https://github.com/nikoksr/notify))
+  - [x] Telegram Bot
+  - [x] 飞书 WebHook Bot
+  - [x] 钉钉
+  - [x] Bark
+  - [x] Slack
+  - [x] LINE
+  - [ ] 自定义 HTTP 回调
+- [ ] 命令行管理
+- [ ] 博客邮件订阅
+- [x] 用户鉴权机制
+- [x] 跨域非法请求阻止
+- [x] 全局验证码操作次数限制
+- [x] JWT 登陆状态验证
+- [x] 时区自定义
+- [x] 只看作者功能
+- [ ] AT 提及 (@)
+- [ ] 评论提及 (#)
+- [ ] 表情包统一管理
+  - [ ] 导入表情包
+  - [ ] 表情包图片地址控制
+- [x] 图片上传
+- [x] 图片上传到图床 ([upgit](https://github.com/pluveto/upgit))
+- [ ] 图片管理
+- [ ] 附件上传 / 管理
+- [ ] 评论标签分类系统
+- [ ] 主题样式更换
+- [ ] 规范化 API
+- [ ] 扩展中心
+- [ ] 开放用户注册
+- [ ] 接入第三方登录
+- [ ] 国际化 (i18n)
+- [x] 一键升级
+
 ## 特别致谢
 
 感谢社区提供的帮助与反馈，若有好的建议与意见欢迎前往 [ISSUES](https://github.com/ArtalkJS/Artalk/issues) 随时告知。

packages/artalk-sidebar/index.html

@@ -9,6 +9,23 @@
 <body>
   <div id="ArtalkSidebar"></div>
 
-  <script type="module" src="./src/index.ts"></script>
+  <script type="module">
+    import InitSidebar from './src/main'
+
+    const p        = new URLSearchParams(document.location.search)
+    const pageKey  = p.get('pageKey') || ''
+    const site     = p.get('site') || ''
+    const user     = JSON.parse(p.get('user') || '{}')
+    const view     = p.get('view') || ''
+    const darkMode = p.get('darkMode') === '1'
+
+    InitSidebar({
+      el: '#ArtalkSidebar',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
+      pageKey,
+      site,
+      darkMode,
+    }, user, view)
+  </script>
 </body>
 </html>

packages/artalk-sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artalkjs/artalk-sidebar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "LGPL-3.0",
   "description": "The sidebar of artalk",
   "repository": {
@@ -10,11 +10,6 @@
   },
   "homepage": "https://artalk.js.org",
   "bugs": "https://github.com/ArtalkJS/Artalk/issue",
-  "main": "./dist/ArtalkSidebar.js",
-  "unpkg": "./dist/ArtalkSidebar.iife.js",
-  "jsdelivr": "./dist/ArtalkSidebar.iife.js",
-  "module": "./dist/ArtalkSidebar.es.js",
-  "types": "./types/index.d.ts",
   "scripts": {
     "dev": "vite --port 23367",
     "build": "pnpm -F artalk build && pnpm lint && vite build",

packages/artalk-sidebar/src/admin/page-list.ts

@@ -1,13 +1,14 @@
 import '../style/page-list.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { PageData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
 import ActionBtn from 'artalk/src/components/action-btn'
-import ItemTextEditor from '../item-text-editor'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
 
 export default class PageList extends Component {
   $editor?: HTMLElement
@@ -15,16 +16,79 @@ export default class PageList extends Component {
 
   pages: PageData[] = []
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
   }
 
-  /** 清空所有 Pages */
-  clearAll() {
+  /** 初始化 PageList (清空列表) */
+  initPageList() {
     this.pages = []
-    this.$el.innerHTML = ''
+
+    // 更新全部页面标题按钮
+    ;(async () => {
+      this.$el.innerHTML = `<div class="atk-header-action-bar">
+      <span class="atk-update-all-title-btn">
+        <i class="atk-icon atk-icon-sync"></i> <span class="atk-text">更新标题</span>
+      </span>
+      </div>`
+
+      const $updateAllTitleBtn = this.$el.querySelector<HTMLElement>('.atk-update-all-title-btn')!
+      const $updateAllTitleIcon = $updateAllTitleBtn.querySelector<HTMLElement>('i')!
+      const $updateAllTitleText = $updateAllTitleBtn.querySelector<HTMLElement>('.atk-text')!
+      const btnTextOrg = $updateAllTitleText.innerText
+
+      const done = () => {
+        $updateAllTitleText.innerText = '更新完毕'
+        $updateAllTitleIcon.classList.remove('atk-rotate')
+        window.setTimeout(() => {
+          $updateAllTitleText.innerText = btnTextOrg
+        }, 1500)
+      }
+      const checkStatus = async () => {
+        const status = await new Api(this.ctx).pageFetch(undefined, undefined, true)
+        return status
+      }
+      const startWatchdog = () => {
+        $updateAllTitleIcon.classList.add('atk-rotate')
+
+        // 不完美的轮询更新状态
+        const timerID = window.setInterval(async () => {
+          const d = await new Api(this.ctx).pageFetch(undefined, undefined, true)
+
+          if (d.is_progress === false) {
+            clearInterval(timerID)
+            done()
+            return
+          }
+
+          $updateAllTitleText.innerText = d.msg
+        }, 1000)
+      }
+
+      // 图标恢复
+      const status = await checkStatus()
+      if (status.is_progress === true) {
+        startWatchdog()
+        $updateAllTitleText.innerText = status.msg
+      }
+
+      // 点击发起任务
+      $updateAllTitleBtn.onclick = async () => {
+        if ($updateAllTitleIcon.classList.contains('atk-rotate')) return
+        startWatchdog()
+        $updateAllTitleText.innerText = '开始更新...'
+
+        // 发起任务
+        try {
+          await new Api(this.ctx).pageFetch(undefined, this.sidebar.curtSite)
+        } catch (err: any) {
+          alert(err.msg)
+          done()
+        }
+      }
+    })()
   }
 
   /** 导入 Page 数据 */
@@ -61,6 +125,9 @@ export default class PageList extends Component {
     $sub.innerText = page.url || page.key
     $editBtn.onclick = () => this.showEditor(page, $page)
 
+    $title.onclick = () => { if (page.url) window.open(page.url) }
+    $sub.onclick = () => { if (page.url) window.open(page.url) }
+
     return $page
   }
 
@@ -157,7 +224,7 @@ export default class PageList extends Component {
       showLoading()
       let p: PageData
       try {
-        p = await new Api(this.ctx).pageFetch(page.id)
+        p = (await new Api(this.ctx).pageFetch(page.id)).page
       } catch (err: any) {
         showError(`同步失败：${err.msg || '未知错误'}`)
         console.log(err)

packages/artalk-sidebar/src/admin/site-list.ts

@@ -1,12 +1,13 @@
 import '../style/site-list.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import { SiteData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
-import ItemTextEditor from '../item-text-editor'
+import Component from '../sidebar-component'
+import { SidebarCtx } from '../main'
+import ItemTextEditor from '../lib/item-text-editor'
 
 export default class SiteList extends Component {
   sites: SiteData[] = []
@@ -21,8 +22,8 @@ export default class SiteList extends Component {
 
   $add?: HTMLElement
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     this.$el = Utils.createElement(
     `<div class="atk-site-list">
@@ -49,6 +50,11 @@ export default class SiteList extends Component {
       this.closeEditor()
       this.showAdd()
     }
+
+    // TODO 这个太 magic 了
+    this.ctx.on('sidebar-sites-create-form', (p: any) => {
+      this.showAdd(p.create_name, p.create_urls)
+    })
   }
 
   public loadSites(sites: SiteData[]) {
@@ -230,7 +236,8 @@ export default class SiteList extends Component {
     this.activeSite = ''
   }
 
-  public showAdd() {
+  public showAdd(defaultName?: string, defaultUrls?: string) {
+    console.log(defaultName, defaultUrls)
     this.closeAdd()
 
     this.$add = Utils.createElement(`
@@ -256,6 +263,9 @@ export default class SiteList extends Component {
     const $siteUrls = this.$add.querySelector<HTMLInputElement>('[name="AtkSiteUrls"]')!
     const $submitBtn = this.$add.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
 
+    if (defaultName) $siteName.value = defaultName
+    if (defaultUrls) $siteUrls.value = defaultUrls
+
     $submitBtn.onclick = async () => {
       const siteName = $siteName.value.trim()
       const siteUrls = $siteUrls.value.trim()

packages/artalk-sidebar/src/artalk-sidebar.ts

@@ -1,31 +0,0 @@
-import Artalk from 'artalk'
-import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
-import 'artalk/dist/Artalk.css'
-import Sidebar from './sidebar'
-
-class ArtalkSidebar extends Artalk {
-  constructor(customConf: ArtalkConfig, user: LocalUser) {
-    super(customConf)
-
-    this.$root.style.display = 'none'
-
-    user = user || {}
-    this.ctx.user.data = {
-      ...this.ctx.user.data,
-      ...user
-    }
-    this.ctx.user.save()
-
-    const sidebar = new Sidebar(this.ctx)
-    document.body.appendChild(sidebar.$el)
-
-    if (customConf.darkMode) {
-      sidebar.$el.classList.add('atk-dark-mode')
-    }
-
-    sidebar.show()
-    console.log('hello artalk-sidebar')
-  }
-}
-
-export default ArtalkSidebar

packages/artalk-sidebar/src/index.ts

@@ -1,16 +0,0 @@
-import ArtalkSidebar from './artalk-sidebar'
-
-const searchParams = new URLSearchParams(document.location.search)
-const pageKey = searchParams.get('pageKey') || ''
-const site = searchParams.get('site') || ''
-const user = JSON.parse(searchParams.get('user') || '{}')
-const darkMode = searchParams.get('darkMode') === '1'
-;(window as any).referer = searchParams.get('referer')
-
-const artalkSidebar = new ArtalkSidebar({
-  el: '#ArtalkSidebar',
-  server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
-  pageKey,
-  site,
-  darkMode,
-}, user)

packages/artalk-sidebar/src/lib/item-text-editor.ts

@@ -1,4 +1,4 @@
-import './style/item-text-editor.less'
+import '../style/item-text-editor.less'
 
 import * as Utils from 'artalk/src/lib/utils'
 

packages/artalk-sidebar/src/main.ts

@@ -0,0 +1,56 @@
+import Artalk from 'artalk'
+import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
+import 'artalk/dist/Artalk.css'
+import SidebarRoot from './sidebar-root'
+
+export default async function InitSidebar(conf: ArtalkConfig, user: LocalUser, view?: string) {
+  // 初始化 Artalk 主程序
+  const artalk = new Artalk(conf)
+  artalk.$root.style.display = 'none'
+
+  // 初始化用户数据
+  user = user || {}
+  artalk.ctx.user.data = {
+    ...artalk.ctx.user.data,
+    ...user
+  }
+  artalk.ctx.user.save()
+
+  // 初始化 Sidebar
+  const sidebarCtx = new SidebarCtx()
+  sidebarCtx.curtSite = conf.site!
+
+  const sidebar = new SidebarRoot(artalk.ctx, sidebarCtx)
+
+  // 装载元素
+  document.body.appendChild(sidebar.$el)
+
+  // 暗黑模式
+  if (conf.darkMode) sidebar.$el.classList.add('atk-dark-mode')
+
+  // 初始化侧边栏
+  await sidebar.init()
+
+  // 打开 View
+  let viewName = SidebarRoot.DEFAULT_VIEW
+  let viewParams = {}
+  if (view) {
+    const splitted = view.split('|')
+    if (splitted[0]) viewName = splitted[0]
+    if (splitted[1]) viewParams = JSON.parse(splitted[1])
+  }
+
+  sidebar.switchView(viewName)
+
+  if (viewName === 'sites') {
+    // TODO 炮打翻山...
+    artalk.ctx.trigger('sidebar-sites-create-form', viewParams)
+  }
+
+  console.log('hello artalk-sidebar')
+}
+
+export class SidebarCtx {
+  reload!: () => void
+  curtSite!: string
+}

packages/artalk-sidebar/src/sidebar-component.ts

@@ -0,0 +1,13 @@
+import ArtalkComponent from 'artalk/src/lib/component'
+import Context from 'artalk/src/context'
+import { SidebarCtx } from './main'
+
+export default class Component extends ArtalkComponent {
+  sidebar: SidebarCtx
+
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx)
+
+    this.sidebar = sidebar
+  }
+}

packages/artalk-sidebar/src/sidebar-root.ts

@@ -1,13 +1,14 @@
 import './style/sidebar.less'
 
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment  from 'artalk/src/components/comment'
 import { SiteData } from 'artalk/types/artalk-data'
 import Api from 'artalk/src/api'
 
+import Component from './sidebar-component'
+import { SidebarCtx } from './main'
 import SidebarHTML from './sidebar.html?raw'
 
 import SidebarView from './sidebar-view'
@@ -20,18 +21,18 @@ import SettingView from './sidebar-views/setting-view'
 
 import MD5 from './lib/md5'
 
-const DEFAULT_VIEW = 'comments'
 const REGISTER_VIEWS: (typeof SidebarView)[] = [
   CommentsView, PagesView, SitesView, TransferView, // SettingView
 ]
 
-export default class Sidebar extends Component {
+export default class SidebarRoot extends Component {
+  public static DEFAULT_VIEW = 'comments'
+
   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
@@ -42,8 +43,7 @@ export default class Sidebar extends Component {
   public siteSwitcher?: SiteListFloater
 
   private get isAdmin() { return this.ctx.user.data.isAdmin }
-  public curtSite?: string
-  public curtView: string = DEFAULT_VIEW
+  public curtView?: string
   public get curtViewInstance() {
     return this.curtView ? this.viewInstances[this.curtView] : undefined
   }
@@ -53,8 +53,8 @@ export default class Sidebar extends Component {
 
   private viewSwitcherShow = false
 
-  constructor(ctx: Context) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx) {
+    super(ctx, sidebar)
 
     // initial elements
     this.$el = Utils.createElement(SidebarHTML)
@@ -62,7 +62,6 @@ export default class Sidebar extends Component {
     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')!
@@ -76,14 +75,10 @@ export default class Sidebar extends Component {
     // init UI
     this.initViewSwitcher()
 
-    this.$closeBtn.onclick = () => {
-      this.hide()
+    // 重载操作
+    this.sidebar.reload = () => {
+      this.init()
     }
-
-    // event
-    this.ctx.on('sidebar-show', () => (this.show()))
-    this.ctx.on('sidebar-hide', () => (this.hide()))
-    this.ctx.on('user-changed', () => { this.firstShow = true })
   }
 
   /** 初始化 view 切换器 */
@@ -130,89 +125,89 @@ export default class Sidebar extends Component {
     this.viewSwitcherShow = !this.viewSwitcherShow
   }
 
-  private firstShow = true
-
-  /** 显示 */
-  public async show() {
-    // 第一次加载
-    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)
-          }
+  /** 初始化 */
+  public async init() {
+     // 用户权限检测
+     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
-    }
-  }
+      Ui.showLoading(this.$el)
+      try {
+        await this.siteSwitcher!.load(this.sidebar.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.init()
+        }
+        Ui.setError(this.$el, $err)
+        return
+      } finally {
+        Ui.hideLoading(this.$el)
+      }
 
-  public async hide() {
-    console.log("hide")
+      // 站点图像
+      this.$avatar.innerHTML = ''
+      this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
+      this.$siteLogo.innerText = (this.sidebar.curtSite || '').substring(0, 1)
+      this.$avatar.append(this.$siteLogo)
+    } else {
+      // 不是管理员
+      this.$title.innerText = '通知中心'
+      this.$curtViewBtn.style.display = 'none' // 隐藏 view 切换器
+      this.sidebar.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)
+    }
   }
 
   /** 切换 View */
   public switchView(viewName: string) {
+    if (!REGISTER_VIEWS.find(o => o.viewName === viewName))
+      throw new Error(`Sidebar View "${viewName}" not found`)
+
     let view = this.viewInstances[viewName]
     if (!view) {
       // 初始化 View
       const View = REGISTER_VIEWS.find(o => o.viewName === viewName)!
-      view = new View(this.ctx, this.$viewWrap)
+      view = new View(this.ctx, this.sidebar, this.$viewWrap)
       this.viewInstances[viewName] = view
     }
 
     // init view
-    view.mount(this.curtSite!)
+    view.mount()
 
     this.curtView = viewName
     this.curtTab = view.viewActiveTab
@@ -250,7 +245,7 @@ export default class Sidebar extends Component {
 
       // 切换 tab
       $tab.onclick = () => {
-        if (view.switchTab(tabName, this.curtSite!) === false) { return }
+        if (view.switchTab(tabName) === false) { return }
         this.$navTabs.querySelectorAll('.atk-active').forEach(e => e.classList.remove('atk-active'))
         $tab.classList.add('atk-active')
         this.curtTab = tabName
@@ -260,9 +255,9 @@ export default class Sidebar extends Component {
 
   /** 切换站点 */
   private switchSite(siteName: string) {
-    this.curtSite = siteName
+    this.sidebar.curtSite = siteName
     const curtView = this.curtViewInstance
-    curtView?.switchTab(this.curtTab!, siteName)
-    if (this.$siteLogo) this.$siteLogo.innerText = this.curtSite.substr(0, 1)
+    curtView?.switchTab(this.curtTab!)
+    if (this.$siteLogo) this.$siteLogo.innerText = this.sidebar.curtSite.substring(0, 1)
   }
 }

packages/artalk-sidebar/src/sidebar-view.ts

@@ -1,7 +1,8 @@
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
+import Component from './sidebar-component'
+import { SidebarCtx } from './main'
 
 export default class SidebarView extends Component {
   static viewName = ''
@@ -13,14 +14,14 @@ export default class SidebarView extends Component {
 
   protected $parent: HTMLElement
 
-  constructor(ctx: Context, $parent: HTMLElement) {
-    super(ctx)
+  constructor(ctx: Context, sidebar: SidebarCtx, $parent: HTMLElement) {
+    super(ctx, sidebar)
 
     this.$parent = $parent
     this.$el = Utils.createElement(`<div class="atk-sidebar-view"></div>`)
   }
 
-  mount(siteName: string) {}
+  mount() {}
 
-  switchTab(tab: string, siteName: string): boolean|void {}
+  switchTab(tab: string): boolean|void {}
 }

packages/artalk-sidebar/src/sidebar-views/comments-view.ts

@@ -13,7 +13,7 @@ export default class MessageView extends SidebarView {
 
   list!: ListLite
 
-  mount(siteName: string) {
+  mount() {
     // tabs
     if (this.ctx.user.data.isAdmin) {
       this.viewTabs = {
@@ -39,9 +39,8 @@ export default class MessageView extends SidebarView {
     this.list.pageMode = 'pagination'
     this.list.noCommentText = '<div class="atk-sidebar-no-content">无内容</div>'
     this.list.renderComment = (comment) => {
-      let pageKey = comment.data.page_key
-      if (!Utils.isValidURL(pageKey)) pageKey = Utils.getURLBasedOn((window as any).referer || '', pageKey)
-      comment.setOpenURL(`${pageKey}#atk-comment-${comment.data.id}`)
+      const pageURL = comment.data.page_url
+      comment.setOpenURL(`${pageURL}#atk-comment-${comment.data.id}`)
       comment.onReplyBtnClick = () => {
         if (this.ctx.conf.editorTravel === true) {
           this.ctx.trigger('editor-reply', {data: comment.data, $el: comment.$el, scroll: false})
@@ -52,21 +51,21 @@ export default class MessageView extends SidebarView {
       }
     }
     this.list.paramsEditor = (params) => {
-      params.site_name = siteName
+      params.site_name = this.sidebar.curtSite
     }
 
     this.$el.innerHTML = ''
     this.$el.append(this.list.$el)
 
-    this.switchTab(this.viewActiveTab, siteName)
+    this.switchTab(this.viewActiveTab)
   }
 
-  switchTab(tab: string, siteName: string): boolean|void {
+  switchTab(tab: string): boolean|void {
     //console.log(tab, siteName)
     this.viewActiveTab = tab
     this.list.paramsEditor = (params) => {
       params.type = tab as any
-      params.site_name = siteName
+      params.site_name = this.sidebar.curtSite
     }
     this.list.fetchComments(0)
 

packages/artalk-sidebar/src/sidebar-views/pages-view.ts

@@ -1,13 +1,12 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment from 'artalk/src/components/comment'
 import Pagination, { PaginationConf } from 'artalk/src/components/pagination'
 
-import PageList from '../admin/page-list'
 import SidebarView from '../sidebar-view'
+import PageList from '../admin/page-list'
 
 const PAGE_SIZE = 20
 
@@ -22,26 +21,26 @@ export default class PagesView extends SidebarView {
   pageList!: PageList
   pagination!: Pagination
 
-  mount(siteName: string) {
+  mount() {
     if (!this.pageList) {
-      this.pageList = new PageList(this.ctx)
+      this.pageList = new PageList(this.ctx, this.sidebar)
       this.$el.append(this.pageList.$el)
     }
 
-    this.switchTab(this.viewActiveTab, siteName)
+    this.switchTab(this.viewActiveTab)
   }
 
-  switchTab(tab: string, siteName: string): boolean|void {
-    this.reqPages(siteName, 0)
+  switchTab(tab: string): boolean|void {
+    this.reqPages(0)
   }
 
-  async reqPages(siteName: string, offset: number) {
-    this.pageList.clearAll()
+  async reqPages(offset: number) {
+    this.pageList.initPageList()
     ;(this.$el.parentNode as any)?.scrollTo(0, 0)
 
     Ui.showLoading(this.$el)
 
-    const data = await new Api(this.ctx).pageGet(siteName, offset, PAGE_SIZE)
+    const data = await new Api(this.ctx).pageGet(this.sidebar.curtSite, offset, PAGE_SIZE)
     this.pageList.importPages(data.pages || [])
 
     Ui.hideLoading(this.$el)
@@ -50,7 +49,7 @@ export default class PagesView extends SidebarView {
       this.pagination = new Pagination(data.total, {
         pageSize: PAGE_SIZE,
         onChange: (o: number) => {
-          this.reqPages(siteName, o)
+          this.reqPages(o)
         }
       })
 

packages/artalk-sidebar/src/sidebar-views/setting-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
 
@@ -15,8 +14,8 @@ export default class SettingView extends SidebarView {
   viewTabs = {}
   viewActiveTab = ''
 
-  mount(siteName: string) {
+  mount() {
   }
 
-  switchTab(tab: string, siteName: string) {}
+  switchTab(tab: string) {}
 }

packages/artalk-sidebar/src/sidebar-views/sites-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import Comment from 'artalk/src/components/comment'
 
@@ -17,16 +16,16 @@ export default class SitesView extends SidebarView {
 
   siteList!: SiteList
 
-  mount(siteName: string) {
+  mount() {
     if (!this.siteList) {
-      this.siteList = new SiteList(this.ctx)
+      this.siteList = new SiteList(this.ctx, this.sidebar)
       this.$el.append(this.siteList.$el)
     }
 
     this.reqSites()
   }
 
-  switchTab(tab: string, siteName: string) {
+  switchTab(tab: string) {
     this.reqSites()
   }
 

packages/artalk-sidebar/src/sidebar-views/transfer-view.ts

@@ -1,6 +1,5 @@
 import Api from 'artalk/src/api'
 import Context from 'artalk/src/context'
-import Component from 'artalk/src/lib/component'
 import * as Utils from 'artalk/src/lib/utils'
 import * as Ui from 'artalk/src/lib/ui'
 import Comment from 'artalk/src/components/comment'
@@ -8,7 +7,7 @@ import Comment from 'artalk/src/components/comment'
 import SiteList from '../admin/site-list'
 import SidebarView from '../sidebar-view'
 
-export default class TransferView extends SidebarView {ß
+export default class TransferView extends SidebarView {
   static viewName = 'transfer'
   static viewTitle = '迁移'
   static viewAdminOnly = true
@@ -19,11 +18,11 @@ export default class TransferView extends SidebarView {ß
   }
   viewActiveTab = 'import'
 
-  mount(siteName: string) {
-    this.switchTab('import', siteName)
+  mount() {
+    this.switchTab('import')
   }
 
-  switchTab(tab: string, siteName: string) {
+  switchTab(tab: string) {
     if (tab === 'import') {
       this.initImport()
     } else if (tab === 'export') {
@@ -42,8 +41,18 @@ export default class TransferView extends SidebarView {ß
     </div>
     <div class="atk-form">
     <div class="atk-label atk-data-file-label">Artrans 数据文件</div>
-    <input type="file" name="AtkDataFile" accept="text/plain,.json,.artrans">
-    <span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
+    <div class="atk-file-upload-group">
+      <div class="atk-file-input-wrap atk-fade-in">
+        <input type="file" name="AtkDataFile" accept=".artrans">
+        <span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
+      </div>
+      <div class="atk-uploading-wrap atk-fade-in">
+        <div class="atk-progress">
+          <div class="atk-bar"></div>
+        </div>
+        <div class="atk-status">上传中 <span class="atk-curt">0%</span>... <span class="atk-abort">取消</span></div>
+      </div>
+    </div>
     <div class="atk-label">目标站点名</div>
     <input type="text" name="AtkSiteName" placeholder="输入内容..." autocomplete="off">
     <div class="atk-label">目标站点 URL</div>
@@ -55,16 +64,139 @@ export default class TransferView extends SidebarView {ß
     </div>`
 
     const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
-    const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
-    const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
+
+    const $fileWrap = $form.querySelector<HTMLElement>('.atk-file-input-wrap')!
+    const $file = $fileWrap.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
+    const $fileDesc = $fileWrap.querySelector<HTMLElement>('.atk-desc')!
+    const fileDescOrgHTML = $fileDesc.innerHTML
+    const restoreFileInput = () => {
+      $fileDesc.innerHTML = fileDescOrgHTML
+      $file.value = ''
+    }
+
+    // 文件上传
+    const $uploadingWrap = $form.querySelector<HTMLElement>('.atk-uploading-wrap')!
+    const $uploadProgress = $uploadingWrap.querySelector<HTMLElement>('.atk-progress')!
+    const $uploadProgressBar = $uploadProgress.querySelector<HTMLElement>('.atk-bar')!
+    const $uploadStatus = $uploadingWrap.querySelector<HTMLElement>('.atk-status')!
+    const $uploadStatusCurt = $uploadStatus.querySelector<HTMLElement>('.atk-curt')!
+    const $uploadAbortBtn = $uploadStatus.querySelector<HTMLElement>('.atk-abort')!
+
     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)
 
+    const showUploading = () => {
+      $fileWrap.style.display = 'none'
+      $uploadingWrap.style.display = ''
+      setUploading(0)
+    }
+
+    const hideUploading = () => {
+      $fileWrap.style.display = ''
+      $uploadingWrap.style.display = 'none'
+    }
+
+    const setUploading = (progress: number) => {
+      $uploadProgressBar.style.width = `${progress}%`
+      $uploadStatusCurt.innerText = `${progress}%`
+    }
+
+    let UploadedFilename: string = ''
+
+    hideUploading()
+
+    const startUploadFile = async () => {
+      UploadedFilename = ''
+
+      const xhr = new XMLHttpRequest()
+
+      // 进度条
+      xhr.upload.addEventListener('progress', (evt) => {
+        if (evt.loaded === evt.total) {
+          // 上传完毕
+          setUploading(100)
+          return
+        }
+
+        const fileSize = $file.files![0].size
+        if (evt.loaded <= fileSize) {
+          // 正在上传
+          const percent = Math.round(evt.loaded / fileSize * 100)
+          setUploading(percent)
+        }
+      })
+
+      // 创建上传参数
+      const formData = new FormData()
+      formData.append('file', $file.files![0])
+      formData.append('token', this.ctx.user.data.token)
+
+      // 开始上传
+      xhr.open('post', `${this.ctx.conf.server}/admin/import-upload`)
+      xhr.timeout = 2*60*1000 // 2min
+      xhr.send(formData)
+
+      // 上传成功事件
+      xhr.onload = () => {
+        const setErr = (msg: string): void => {
+          restoreFileInput()
+          hideUploading()
+          alert(`文件上传失败，${msg}`)
+        }
+
+        if (xhr.status !== 200) {
+          setErr(`响应状态码：${xhr.status}`)
+          return
+        }
+
+        let json: any
+        try {
+          json = JSON.parse(xhr.response)
+        } catch (err) {
+          console.error(err)
+          setErr(`JSON 解析失败：${err}`)
+          return
+        }
+
+        if (!json.success || !json.data.filename) {
+          setErr(`响应：${xhr.response}`)
+          return
+        }
+
+        $fileDesc.innerHTML = '文件已成功上传，可以开始导入'
+        UploadedFilename = json.data.filename
+        hideUploading()
+      }
+
+      // 中止上传
+      $uploadAbortBtn.onclick = () => {
+        xhr.abort()
+        restoreFileInput()
+        hideUploading()
+      }
+    }
+
+    // 文件上传操作
+    $file.onchange = () => {
+      if (!$file.files || $file.files.length === 0) return
+
+      showUploading()
+      setTimeout(async () => {
+        await startUploadFile()
+        hideUploading()
+      }, 80)
+    }
+
+    // 开始导入按钮
     $submitBtn.onclick = () => {
-      const dataType = 'artrans'
+      if (!UploadedFilename) {
+        setError(`请先上传 Artrans 数据文件`)
+        return
+      }
+
       const siteName = $siteName.value.trim()
       const siteURL = $siteURL.value.trim()
       const payload = $payload.value.trim()
@@ -80,7 +212,7 @@ export default class TransferView extends SidebarView {ß
           return
         }
 
-        if (rData !instanceof Object) {
+        if (typeof rData !== 'object' || Array.isArray(rData)) {
           setError(`Payload 需为 JSON 对象`)
           return
         }
@@ -89,7 +221,7 @@ export default class TransferView extends SidebarView {ß
       if (siteURL) rData.t_url = siteURL
 
       // 创建导入会话
-      const createSession = (dataStr?: string) => {
+      const createSession = (filename?: 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')!
@@ -100,9 +232,12 @@ export default class TransferView extends SidebarView {ß
         $backBtn.onclick = () => {
           $logWrap.style.display = 'none'
           $form.style.display = ''
+          restoreFileInput()
+          UploadedFilename = ''
+          this.sidebar.reload()
         }
 
-        if (dataStr) rData.json_data = dataStr
+        if (filename) rData.json_file = filename
 
         // 创建 iframe
         const frameName = `f_${+new Date()}`
@@ -113,7 +248,6 @@ export default class TransferView extends SidebarView {ß
         $log.append($frame)
 
         const formParams: {[k: string]: string} = {
-          type: dataType,
           payload: JSON.stringify(rData),
           token: this.ctx.user.data.token || '',
         }
@@ -138,20 +272,8 @@ export default class TransferView extends SidebarView {ß
         $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()
-      }
+      // 直接开始会话
+      createSession(UploadedFilename)
     }
   }
 
@@ -160,7 +282,7 @@ export default class TransferView extends SidebarView {ß
 
     try {
       const d = await new Api(this.ctx).export()
-      this.download(`artrans-${this.getYmdHisFilename()}.json`, d)
+      this.download(`backup-${this.getYmdHisFilename()}.artrans`, d)
     } catch (err: any) {
       console.log(err)
       window.alert(`${String(err)}`)

packages/artalk-sidebar/src/style/page-list.less

@@ -21,11 +21,13 @@
       color: var(--at-color-font);
       font-size: 21px;
       margin-bottom: 10px;
+      cursor: pointer;
     }
 
     .atk-sub {
       color: var(--at-color-sub);
       font-size: 14px;
+      cursor: pointer;
     }
   }
 
@@ -33,6 +35,32 @@
     .atk-list-text-actions();
   }
 
+  .atk-header-action-bar {
+    display: block;
+    overflow: hidden;
+    padding: 10px 15px 0 15px;
+
+    & > span {
+      display: inline-block;
+      padding: 2px 10px;
+      cursor: pointer;
+      font-size: 13px;
+
+      i {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+        background-color: var(--at-color-meta);
+        margin-right: 4px;
+      }
+
+      &:hover {
+        background: var(--at-color-bg-grey);
+      }
+    }
+  }
+
   .atk-page-actions {
     .atk-list-btn-actions();
   }

packages/artalk-sidebar/src/style/sidebar.less

@@ -317,13 +317,14 @@
       }
 
       &[type="file"] {
-        border-radius: 2px;
         background: transparent;
         border: 2px solid var(--at-color-border);
         cursor: pointer;
         position: relative;
-        padding: 0 15px;
-        margin-bottom: 20px;
+        padding: 6px 15px;
+        line-height: 0;
+        margin-bottom: 17px;
+        border-radius: 50px;
 
         &:hover {
           background: var(--at-color-bg-light);
@@ -336,11 +337,16 @@
         color: #000;
         border: 0;
         border-right: 2px solid #eee;
-        padding: 0 20px 0 5px;
+        border-left: 0;
+        border-top: 0;
+        border-bottom: 0;
+        padding: 0 20px 0 10px;
         line-height: 25px;
         margin-right: 15px;
         cursor: pointer;
         transition: .2s ease;
+        -webkit-appearance: none;
+        border-radius: 0;
       }
     }
 
@@ -380,14 +386,59 @@
       cursor: pointer;
       outline: none;
       padding: 0 20px;
-      border-radius: 4px;
+      border-radius: 50px;
       margin: 0 5px;
       width: 100%;
+      user-select: none;
     }
 
     input, select, button {
       font-size: 15px;
     }
+
+    .atk-file-upload-group {
+      height: 100px;
+      overflow: hidden;
+    }
+
+    .atk-uploading-wrap {
+      .atk-progress {
+        width: 100%;
+        height: 12px;
+        display: block;
+        overflow: hidden;
+        background: #eee;
+        border-radius: 100px;
+        margin-bottom: 7px;
+        margin-top: 20px;
+
+        .atk-bar {
+          transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+          background: var(--at-color-main);
+          height: 100%;
+          width: 0%;
+          opacity: 0.7;
+        }
+      }
+
+      .atk-status {
+        color: var(--at-color-meta);
+        font-size: 14px;
+
+        .atk-curt {
+          color: var(--at-color-main)
+        }
+
+        .atk-abort {
+          cursor: pointer;
+          float: right;
+
+          &:hover {
+            color: var(--at-color-main);
+          }
+        }
+      }
+    }
   }
 
   .atk-log-wrap {

packages/artalk-sidebar/src/style/site-list.less

@@ -111,6 +111,7 @@
           display: inline-block;
           font-size: 23px;
           position: relative;
+          line-height: 1.6em;
 
           &:after {
             content: ' ';
@@ -130,6 +131,7 @@
           margin-top: 6px;
           flex-wrap: wrap;
           min-height: 23px;
+          margin-bottom: 15px;
 
           .atk-url-item {
             background: var(--at-color-bg-grey);
@@ -165,7 +167,7 @@
       position: relative;
       display: flex;
       flex-direction: row;
-      padding: 20px 30px 6px 35px;
+      padding: 0 30px 6px 35px;
       padding-bottom: 10px;
 
       .atk-site-text-actions {

packages/artalk-sidebar/types/index.d.ts

@@ -1,3 +1,3 @@
-import ArtalkSidebar from '../src/artalk-sidebar'
+import ArtalkSidebar from '../src/main'
 
 export default ArtalkSidebar

packages/artalk-sidebar/vite.config.ts

@@ -13,29 +13,7 @@ export default defineConfig({
   build: {
     target: 'es2015',
     outDir: resolve(__dirname, "dist"),
-    minify: 'terser',
-    // lib: {
-    //   entry: resolve(__dirname, 'src/main.ts'),
-    //   name: 'ArtalkSidebar',
-    //   fileName: (format) => ((format == "umd") ? 'ArtalkSidebar.js' : `ArtalkSidebar.${format}.js`),
-    //   formats: ["es", "umd", "iife"]
-    // },
-    rollupOptions: {
-      // 确保外部化处理那些你不想打包进库的依赖
-      // external: ['artalk'],
-      output: {
-        assetFileNames: assetInfo => {
-          if (/\.css$/.test(assetInfo.name)) {
-            return 'ArtalkSidebar.css'
-          }
-          return "[name].[ext]"
-        },
-        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
-        globals: {
-          artalk: 'Artalk'
-        }
-      }
-    }
+    minify: 'terser'
   },
   plugins: [tsconfigPaths()],
   css: {

packages/artalk/index.html

@@ -29,6 +29,16 @@
     body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
     .to-top { right: 25px; }
   </style>
+  <!--<link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/arta.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>-->
+
+  <!-- For mobile testing -->
+  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
+  <script>
+    // VConsole will be exported to `window.VConsole` by default.
+    var vConsole = new window.VConsole();
+  </script>
 </head>
 <body>
   <div class="card billboard atk-fade-in">

packages/artalk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.0",
-  "backendMinVersion": "2.1.1",
+  "version": "2.2.4",
+  "backendMinVersion": "2.1.2",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

packages/artalk/src/api/index.ts

@@ -119,8 +119,11 @@ export default class Api {
 
   /** 用户 · 登录状态 */
   public async loginStatus() {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/login-status`)
-    return (data || { is_login: false }) as { is_login: boolean }
+    const data = await POST<any>(this.ctx, `${this.baseURL}/login-status`, {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email
+    })
+    return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
   }
 
   // ============================
@@ -164,13 +167,14 @@ export default class Api {
   }
 
   /** 页面 · 数据更新 */
-  public async pageFetch(id: number) {
-    const params: any = {
-      id,
-    }
+  public async pageFetch(id?: number, siteName?: string, getStatus?: boolean) {
+    const params: any = {}
+    if (id) params.id = id
+    if (siteName) params.site_name = siteName
+    if (getStatus) params.get_status = getStatus
 
     const d = await POST<any>(this.ctx, `${this.baseURL}/admin/page-fetch`, params)
-    return (d.page as PageData)
+    return (d as any)
   }
 
   // ============================
@@ -299,19 +303,19 @@ export default class Api {
 
   /** 验证码 · 获取 */
   public async captchaGet() {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/refresh`)
     return (data.img_data || '') as string
   }
 
   /** 验证码 · 检验 */
   public async captchaCheck(value: string) {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/check`, { value })
     return (data.img_data || '') as string
   }
 
   /** 验证码 · 状态 */
   public async captchaStatus() {
-    const data = await GET<any>(this.ctx, `${this.baseURL}/captcha/status`)
+    const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/status`)
     return (data || { is_pass: false }) as { is_pass: boolean }
   }
 }

packages/artalk/src/artalk.ts

@@ -9,7 +9,7 @@ import Editor from './components/editor'
 import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
-import { GetLayerWrap } from './components/layer'
+import Layer, { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
 import * as Utils from './lib/utils'
@@ -37,6 +37,7 @@ export default class Artalk {
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
+      // @link http://bl.ocks.org/abernier/3070589
       this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
     }
 
@@ -56,6 +57,7 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
+    this.initLayer()
     this.initDarkMode()
 
     // 组件初始化
@@ -133,6 +135,13 @@ export default class Artalk {
     this.list.fetchComments(0)
   }
 
+  /** Layer 初始化 */
+  initLayer() {
+    // 记录页面原始 Styles
+    Layer.BodyOrgOverflow = document.body.style.overflow
+    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  }
+
   /** 暗黑模式 · 初始化 */
   public initDarkMode() {
     const darkModeClassName = 'atk-dark-mode'
@@ -163,14 +172,15 @@ export default class Artalk {
 
   /** PV */
   public async initPV() {
+    const pvNum = await new Api(this.ctx).pv()
+    if (Number.isNaN(Number(pvNum)))
+      return
+
     if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
       return
 
     const $pv = document.querySelector<HTMLElement>(this.conf.pvEl)!
     // $pv.innerText = '-' // 默认占位符
-    const pvNum = await new Api(this.ctx).pv()
-    if (Number.isNaN(Number(pvNum)))
-      return
 
     $pv.innerText = String(pvNum)
   }

packages/artalk/src/components/comment.ts

@@ -317,7 +317,7 @@ export default class Comment extends Component {
   }
 
   getIsRoot() {
-    return this.parent === null
+    return this.data.rid === 0
   }
 
   getChildren() {

packages/artalk/src/components/editor.ts

@@ -22,6 +22,7 @@ export default class Editor extends Component {
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
   public $imgUploadBtn?: HTMLElement
+  public $imgUploadInput?: HTMLInputElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -265,12 +266,16 @@ export default class Editor extends Component {
     this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
     this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
 
+    this.$imgUploadInput = document.createElement('input')
+    this.$imgUploadInput.type = 'file'
+    this.$imgUploadInput.style.display = 'none'
+    this.$imgUploadInput.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+    this.$imgUploadBtn.after(this.$imgUploadInput)
+
     // 按钮点击
     this.$imgUploadBtn.onclick = () => {
       // 选择图片
-      const $input = document.createElement('input')
-      $input.type = 'file'
-      $input.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+      const $input = this.$imgUploadInput!
       $input.onchange = () => {
         (async () => { // 解决阻塞 UI 问题
           if (!$input.files || $input.files.length === 0) return
@@ -501,7 +506,7 @@ export default class Editor extends Component {
 
       // 回复不同页面的评论
       if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
-        window.open(`${this.replyComment.page_key}#atk-comment-${nComment.id}`)
+        window.open(`${this.replyComment.page_url}#atk-comment-${nComment.id}`)
       }
 
       this.ctx.trigger('list-insert', nComment)
@@ -551,6 +556,8 @@ export default class Editor extends Component {
     const $travelPlace = Utils.createElement('<div></div>')
     $afterEl.after($travelPlace)
     $travelPlace.replaceWith(this.$el)
+
+    this.$el.classList.add('atk-fade-in') // 添加渐入动画
   }
 
   travelBack () {

packages/artalk/src/components/layer.ts

@@ -10,8 +10,8 @@ export default class Layer extends Component {
 
   private maskClickHideEnable: boolean = true
 
-  private bodyStyleOrgOverflow = ''
-  private bodyStyleOrgPaddingRight = ''
+  public static BodyOrgOverflow: string
+  public static BodyOrgPaddingRight: string
 
   public afterHide?: Function
 
@@ -73,10 +73,11 @@ export default class Layer extends Component {
     this.$wrap.classList.add('atk-fade-out')
     this.$el.style.display = 'none'
 
+    // body style 禁止滚动解除
+    this.pageBodyScrollBarShow()
+
     this.newActionTimer(() => {
       this.$wrap.style.display = 'none'
-      // body style 禁止滚动解除
-      this.pageBodyScrollBarShow()
       this.checkCleanLayer()
     }, 450)
     this.newActionTimer(() => {
@@ -91,8 +92,6 @@ export default class Layer extends Component {
 
   // 页面滚动条隐藏
   pageBodyScrollBarHide() {
-    this.bodyStyleOrgOverflow = document.body.style.overflow
-    this.bodyStyleOrgPaddingRight = document.body.style.paddingRight
     document.body.style.overflow = 'hidden'
 
     const bpr = parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right'), 10)
@@ -101,8 +100,8 @@ export default class Layer extends Component {
 
   // 页面滚动条显示
   pageBodyScrollBarShow() {
-    document.body.style.overflow = this.bodyStyleOrgOverflow
-    document.body.style.paddingRight = this.bodyStyleOrgPaddingRight
+    document.body.style.overflow = Layer.BodyOrgOverflow
+    document.body.style.paddingRight = Layer.BodyOrgPaddingRight
   }
 
   // Timers
@@ -128,7 +127,6 @@ export default class Layer extends Component {
 
   /** 销毁 - 无动画 */
   disposeNow () {
-    document.body.style.overflow = ''
     this.$el.remove()
     this.pageBodyScrollBarShow()
     // this.$el dispose

packages/artalk/src/components/list-lite.ts

@@ -91,7 +91,7 @@ export default class ListLite extends Component {
     try {
       listData = await new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor)
     } catch (e: any) {
-      this.onError(e.msg || String(e), offset)
+      this.onError(e.msg || String(e), offset, e.data)
       throw e
     } finally {
       hideLoading()
@@ -219,7 +219,7 @@ export default class ListLite extends Component {
   }
 
   /** 错误处理 */
-  protected onError(msg: any, offset: number) {
+  protected onError(msg: any, offset: number, errData?: any) {
     msg = String(msg)
     console.error(msg)
 
@@ -237,9 +237,24 @@ export default class ListLite extends Component {
     $err.appendChild($retryBtn)
 
     const adminBtn = Utils.createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">打开控制台</span></span>')
-    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show'))
-    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
     $err.appendChild(adminBtn)
+    if (!this.ctx.user.data.isAdmin) adminBtn.classList.add('atk-hide')
+
+    let sidebarView = ''
+
+    // 找不到站点错误，打开侧边栏并填入创建站点表单
+    if (errData?.err_no_site) {
+      const viewLoadParam = {
+        create_name: this.ctx.conf.site,
+        create_urls: `${window.location.protocol}//${window.location.host}`
+      }
+      // TODO 真的是飞鸽传书啊
+      sidebarView = `sites|${JSON.stringify(viewLoadParam)}`
+    }
+
+    adminBtn.onclick = () => (this.ctx.trigger('sidebar-show', {
+      view: sidebarView
+    }))
 
     Ui.setError(this.$el, $err)
   }

packages/artalk/src/components/sidebar-layer.ts

@@ -7,6 +7,7 @@ import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
 import Layer from './layer'
 import Api from '../api'
+import { SidebarShowPayload } from '~/types/event'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -28,7 +29,7 @@ export default class SidebarLayer extends Component {
     }
 
     // event
-    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-show', (conf) => (this.show(conf || {})))
     this.ctx.on('sidebar-hide', () => (this.hide()))
     this.ctx.on('user-changed', () => { this.firstShow = true })
   }
@@ -36,7 +37,7 @@ export default class SidebarLayer extends Component {
   private firstShow = true
 
   /** 显示 */
-  public async show() {
+  public async show(conf: SidebarShowPayload) {
     this.$el.style.transform = '' // 动画清除，防止二次打开失效
 
     // 获取 Layer
@@ -59,53 +60,60 @@ export default class SidebarLayer extends Component {
       this.$el.style.transform = 'translate(0, 0)'
     }, 20)
 
+    // 管理员身份验证 (若身份失效，弹出验证窗口)
+    ;(async () => {
+      const resp = await new Api(this.ctx).loginStatus()
+      if (resp.is_admin && !resp.is_login) {
+        this.layer?.hide()
+        this.firstShow = true
+
+        this.ctx.trigger('checker-admin', {
+          onSuccess: () => {
+            setTimeout(() => {
+              this.show(conf)
+            }, 500)
+          },
+          onCancel: () => {}
+        })
+      }
+    })()
+
+    // 清空 unread
+    this.ctx.trigger('unread-update', { notifies: [] })
+
     // 第一次加载
     if (this.firstShow) {
-      // 管理员身份验证
-      if (this.ctx.user.data.isAdmin) {
-        const resp = await new Api(this.ctx).loginStatus()
-        if (!resp.is_login) {
-          await (new Promise<any>((resolve, reject) => {
-            this.ctx.trigger('checker-admin', {
-              onSuccess: () => {
-                resolve(null)
-                setTimeout(() => {
-                  this.show()
-                }, 500)
-              },
-              onCancel: () => {
-                this.layer?.hide()
-              }
-            })
-          }))
-        }
-      }
-
       this.$iframeWrap.innerHTML = ''
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
+      // 准备 Iframe 参数
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
         : Utils.getURLBasedOnApi(this.ctx, 'sidebar/')
-      const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
 
-      const location = window.location
-      this.iframeLoad(`${baseURL}`
-        + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
-        + `&site=${encodeURIComponent(this.conf.site || '')}`
-        + `&user=${userData}`
-        + `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
-        + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
+      const query: any = {
+        pageKey: this.conf.pageKey,
+        site: this.conf.site || '',
+        user: JSON.stringify(this.ctx.user.data),
+        time: +new Date()
+      }
+
+      if (conf.view) query.view = conf.view
+      if (this.conf.darkMode) query.darkMode = '1'
+
+      const urlParams = new URLSearchParams(query);
+      this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
 
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
       // 暗黑模式
-      if (this.conf.darkMode && !this.$iframe!.src.match(/darkMode=1$/)) {
+      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+
+      if (this.conf.darkMode && !isIframeSrcDarkMode)
         this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
-      }
-      if (!this.conf.darkMode && this.$iframe!.src.match(/darkMode=1$/)) {
-        this.iframeLoad(this.$iframe!.src.replace(/&darkMode=1$/, ''))
-      }
+
+      if (!this.conf.darkMode && isIframeSrcDarkMode)
+        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
     }
   }
 

packages/artalk/src/lib/checker/captcha-checker.ts

@@ -15,7 +15,7 @@ const CaptchaChecker: Checker = {
       const $iframe = Utils.createElement<HTMLIFrameElement>(`<iframe class="atk-fade-in"></iframe>`)
       $iframe.style.display = 'none'
       Ui.showLoading($iframeWrap, { transparentBg: true })
-      $iframe.src = `${that.ctx.conf.server}/captcha/get`
+      $iframe.src = `${that.ctx.conf.server}/captcha/get?t=${+new Date()}`
       $iframe.onload = () => {
         $iframe.style.display = ''
         Ui.hideLoading($iframeWrap)

packages/artalk/src/lib/utils.ts

@@ -150,25 +150,34 @@ export function initMarked(ctx: Context) {
     return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
+  renderer.code = (block, lang) => {
+    // Colorize the block only if the language is known to highlight.js
+    const realLang = (!lang ? 'plaintext' : lang)
+    let colorized = block
+    if ((window as any).hljs) {
+      if (realLang && (window as any).hljs.getLanguage(realLang)) {
+        colorized = (window as any).hljs.highlight(realLang, block).value
+      }
+    } else {
+      colorized = hanabi(block)
+    }
+
+    return `<pre rel="${realLang}">\n`
+      + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
+      + `</pre>`
+  }
+
   // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
   const nMarked = libMarked
   libMarked.setOptions({
     renderer,
-    highlight: (code) => hanabi(code),
     pedantic: false,
     gfm: true,
     breaks: true,
     smartLists: true,
     smartypants: true,
     xhtml: false,
-    sanitize: true,
-    sanitizer: (html) => insane(html, {
-      ...insane.defaults,
-      allowedAttributes: {
-        ...insane.defaults.allowedAttributes,
-        img: ['src', 'atk-emoticon']
-      },
-    }),
+    sanitize: false,
     silent: true,
   })
 
@@ -177,7 +186,49 @@ export function initMarked(ctx: Context) {
 
 /** 解析 markdown */
 export function marked(ctx: Context, src: string): string {
-  return ctx.markedInstance.parse(src)
+  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
+  return insane(ctx.markedInstance.parse(src), {
+    allowedClasses: {},
+    allowedSchemes: ['http', 'https', 'mailto'],
+    allowedTags: [
+      'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
+      'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
+      'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
+    ],
+    allowedAttributes: {
+      '*': ['title', 'accesskey'],
+      a: ['href', 'name', 'target', 'aria-label'],
+      img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
+      // for code highlight
+      code: ['class'],
+      span: ['class', 'style'],
+    },
+    filter: node => {
+      // allow hljs style
+      const allowed = [
+        [ 'code', /^hljs\W+language-(.*)$/ ],
+        [ 'span', /^(hljs-.*)$/ ]
+      ]
+      allowed.forEach(([ tag, reg ]) => {
+        if (
+          node.tag === tag
+          && !!node.attrs.class
+          && !(reg as RegExp).test(node.attrs.class)
+        ) {
+          delete node.attrs.class
+        }
+      })
+
+      // allow <span> set color sty
+      if (node.tag === 'span' && !!node.attrs.style
+          && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
+        delete node.attrs.style
+      }
+
+      return true
+    }
+  })
 }
 
 /** 获取修正后的 UserAgent */

packages/artalk/src/style/comment.less

@@ -167,6 +167,7 @@
         border-left: 3px solid #eee;
         margin-bottom: 10px;
         position: relative;
+        margin-top: 10px;
 
         .atk-meta {
           font-size: 15px;

packages/artalk/src/style/main.less

@@ -7,28 +7,48 @@
 }
 
 .artalk, .atk-layer-wrap {
+  line-height: @line-height;
+  color: var(--at-color-font);
+  font-family: @font-family;
+  word-wrap: break-word;
+  word-break: break-all;
+
   * {
     box-sizing: border-box;
-    line-height: @line-height;
+  }
+
+  input, textarea, button, optgroup, select {
+    font-family: inherit;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
+
+  code {
+    font-family: @codeFont;
+    margin: 0 .3em;
+    padding: .1em .2em;
+    background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    font-family: @font-family;
-    word-wrap: break-word;
-    word-break: break-all;
+    border-radius: @block-radius;
   }
 
   pre {
-    padding: 10px;
+    margin: 10px 0 0 0;
+    padding: 0;
+    line-height: 0;
+  }
+
+  pre code {
+    * { font-family: @codeFont; }
     line-height: @line-height;
+    display: block;
+    padding: 10px 15px;
+    white-space: pre-wrap;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    padding: 10px 15px;
-    border-radius: @block-radius;
     margin: 0;
-    font-family: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
-
-    code {
-      white-space: pre-wrap;
-    }
   }
 
   a {
@@ -55,6 +75,28 @@
   img {
     max-width: 100%;
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1.5em;
+    font-size: .96em
+  }
+
+  td, th {
+    text-align: left;
+    padding: 4px 8px 4px 10px;
+    border: 1px solid var(--at-color-border)
+  }
+
+  td {
+    vertical-align: top
+  }
+
+  tr:nth-child(even) {
+    background-color: var(--at-color-bg-grey);
+  }
 }
 
 .atk-hide {
@@ -156,6 +198,9 @@
 .atk-fade-out {
   animation: atkFadeOut both .2s;
 }
+.atk-rotate {
+  animation: atkRotate 2s linear infinite;
+}
 
 @keyframes atkFadeIn {
   0% { opacity: 0 }
@@ -167,6 +212,11 @@
   0% {}
 }
 
+@keyframes atkRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 i.atk-icon {
   width: 20px;
   height: 20px;
@@ -175,6 +225,7 @@ i.atk-icon {
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
   mask-position: center;
+  mask-size: contain;
 }
 
 .atk-icon-sync {

packages/artalk/types/event.d.ts

@@ -19,7 +19,7 @@ export interface EventPayloadMap {
   'list-refresh-ui': undefined     // 刷新 List UI
 
   // Sidebar
-  'sidebar-show': undefined           // 侧边栏显示
+  'sidebar-show': SidebarShowPayload  // 侧边栏显示
   'sidebar-hide': undefined           // 侧边栏隐藏
 
   // Editor
@@ -70,6 +70,10 @@ export interface EditorReplyPayload {
   scroll?: boolean
 }
 
+export interface SidebarShowPayload {
+  view?: 'comments'|'sites'|'pages'|'transfer'|string
+}
+
 // ============================================
 export interface Handler<P> {
   (payload: P): void