v2.2.7

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

.github/workflows/npm.yml

@@ -66,6 +66,7 @@ jobs:
       - name: Update CDN links
         run: |
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/ArtalkCDN.json
+          perl -pi -e 's#"Artalk"(\W+)?:(\W+)?".*?"#"Artalk": "${{ steps.get_version.outputs.VERSION }}"#g' docs/code/ArtalkVersion.json
           sed -i 's#artalk@.[^/]*#artalk@${{ steps.get_version.outputs.VERSION }}#g' docs/code/quick-start/cdn.html
 
       - uses: stefanzweifel/git-auto-commit-action@v4

README.md

@@ -125,8 +125,14 @@ docker-compose up -d
 ## TODOs 
 
 - [x] [Golang 后端](https://github.com/ArtalkJS/ArtalkGo)
-- [x] 多站点支持
 - [x] 多数据库支持
+  - [x] SQLite
+  - [X] MySQL
+- [x] 多缓存支持
+  - [x] In-memory (内建缓存)
+  - [x] Redis
+  - [x] Memcache
+- [x] 多站点支持
 - [x] 评论获取分页
 - [x] 评论点赞投票
 - [x] 浏览量统计

package.json

@@ -10,23 +10,23 @@
     "build:all": "pnpm build && pnpm build:sidebar"
   },
   "devDependencies": {
-    "@rollup/plugin-dynamic-import-vars": "^1.4.1",
-    "@types/node": "^16.11.7",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "autoprefixer": "^10.4.0",
-    "eslint": "^8.2.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.3",
+    "@types/node": "^16.11.27",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "autoprefixer": "^10.4.4",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-airbnb-typescript": "^16.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-config-airbnb-typescript": "^16.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
     "less": "^4.1.2",
-    "postcss": "^8.1.0",
-    "prettier": "^2.4.1",
-    "rollup": "^2.59.0",
-    "typescript": "^4.5.2",
-    "vite": "^2.6.14",
-    "vite-tsconfig-paths": "^3.3.17"
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "rollup": "^2.70.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-tsconfig-paths": "^3.4.1"
   }
 }

packages/artalk-sidebar/index.html

@@ -16,17 +16,16 @@
     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'
 
-    window.referer = p.get('referer')
-
     InitSidebar({
       el: '#ArtalkSidebar',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : '../',
       pageKey,
       site,
       darkMode,
-    }, user)
+    }, user, view)
   </script>
 </body>
 </html>

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

@@ -22,10 +22,79 @@ export default class PageList extends Component {
     this.$el = Utils.createElement(`<div class="atk-page-list"></div>`)
   }
 
-  /** 清空所有 Pages */
-  clearAll() {
+  /** 初始化 PageList (清空列表) */
+  initPageList() {
     this.pages = []
-    this.$el.innerHTML = ''
+
+    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>
+    <span class="atk-cache-flush-all-btn"><span class="atk-text">缓存清除</span></span>
+    <span class="atk-cache-warm-up-btn"><span class="atk-text">缓存预热</span></span>
+    </div>`
+
+    // 缓存操作按钮
+    const $cacheFlushBtn = this.$el.querySelector<HTMLElement>('.atk-cache-flush-all-btn')!
+    $cacheFlushBtn.onclick = () => { new Api(this.ctx).cacheFlushAll().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+    const $cacheWarmBtn = this.$el.querySelector<HTMLElement>('.atk-cache-warm-up-btn')!
+    $cacheWarmBtn.onclick = () => { new Api(this.ctx).cacheWarmUp().then((d: any) => alert(d.msg)).catch(() => alert('操作失败')) }
+
+    // 更新全部页面标题按钮
+    ;(async () => {
+      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 数据 */
@@ -62,6 +131,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
   }
 
@@ -158,7 +230,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-floater.ts

@@ -52,7 +52,7 @@ export default class SiteListFloater {
 
     const sites = await new Api(this.ctx).siteGet()
     sites.forEach((site) => {
-      renderSiteItem(site.name, site.name.substr(0, 1))
+      renderSiteItem(site.name, site.name.substring(0, 1))
     })
 
     renderSiteItem('站点管理', '+', '', () => { this.conf.onClickSitesViewBtn();this.hide() })

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

@@ -50,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[]) {
@@ -87,7 +92,7 @@ export default class SiteList extends Component {
     const $siteName = $site.querySelector<HTMLElement>('.atk-site-name')!
     const setActive = () => { $site.classList.add('atk-active') }
 
-    $siteLogo.innerText = site.name.substr(0, 1)
+    $siteLogo.innerText = site.name.substring(0, 1)
     $siteName.innerText = site.name
 
     // click
@@ -231,7 +236,7 @@ export default class SiteList extends Component {
     this.activeSite = ''
   }
 
-  public showAdd() {
+  public showAdd(defaultName?: string, defaultUrls?: string) {
     this.closeAdd()
 
     this.$add = Utils.createElement(`
@@ -257,6 +262,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/main.ts

@@ -3,11 +3,12 @@ import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
 import 'artalk/dist/Artalk.css'
 import SidebarRoot from './sidebar-root'
 
-export default function InitSidebar(conf: ArtalkConfig, user: LocalUser) {
+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,
@@ -15,17 +16,41 @@ export default function InitSidebar(conf: ArtalkConfig, user: LocalUser) {
   }
   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')
 
-  sidebar.init()
+  // 初始化侧边栏
+  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-root.ts

@@ -21,12 +21,13 @@ 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 SidebarRoot extends Component {
+  public static DEFAULT_VIEW = 'comments'
+
   public $header: HTMLElement
   public $headerMenu: HTMLElement
   public $title: HTMLElement
@@ -42,8 +43,7 @@ export default class SidebarRoot 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
   }
@@ -150,11 +150,9 @@ export default class SidebarRoot extends Component {
         }
       }
 
-      this.curtSite = this.conf.site
-
       Ui.showLoading(this.$el)
       try {
-        await this.siteSwitcher!.load(this.curtSite)
+        await this.siteSwitcher!.load(this.sidebar.curtSite)
       } catch (err: any) {
         const $err = Utils.createElement(
           `<span>加载失败：${err.msg || '网络错误'}<br/></span>`
@@ -176,13 +174,13 @@ export default class SidebarRoot extends Component {
       // 站点图像
       this.$avatar.innerHTML = ''
       this.$siteLogo = Utils.createElement('<div class="atk-site-logo"></div>')
-      this.$siteLogo.innerText = (this.curtSite || '').substr(0, 1)
+      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.curtSite = this.conf.site // 第一次 show 使用当前站点数据
+      this.sidebar.curtSite = this.conf.site // 第一次 show 使用当前站点数据
 
       // 头像
       const $avatarImg = document.createElement('img') as HTMLImageElement
@@ -193,12 +191,13 @@ export default class SidebarRoot extends Component {
       this.$avatar.innerHTML = ''
       this.$avatar.append($avatarImg)
     }
-
-    this.switchView(DEFAULT_VIEW) // 打开默认 view
   }
 
   /** 切换 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
@@ -208,7 +207,7 @@ export default class SidebarRoot extends Component {
     }
 
     // init view
-    view.mount(this.curtSite!)
+    view.mount()
 
     this.curtView = viewName
     this.curtTab = view.viewActiveTab
@@ -246,7 +245,7 @@ export default class SidebarRoot 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
@@ -256,9 +255,9 @@ export default class SidebarRoot 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

@@ -21,7 +21,7 @@ export default class SidebarView extends Component {
     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

@@ -5,8 +5,8 @@ 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
 
@@ -21,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.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)
@@ -49,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

@@ -14,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

@@ -16,7 +16,7 @@ export default class SitesView extends SidebarView {
 
   siteList!: SiteList
 
-  mount(siteName: string) {
+  mount() {
     if (!this.siteList) {
       this.siteList = new SiteList(this.ctx, this.sidebar)
       this.$el.append(this.siteList.$el)
@@ -25,7 +25,7 @@ export default class SitesView extends SidebarView {
     this.reqSites()
   }
 
-  switchTab(tab: string, siteName: string) {
+  switchTab(tab: string) {
     this.reqSites()
   }
 

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

@@ -18,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') {
@@ -108,11 +108,7 @@ export default class TransferView extends SidebarView {
 
     hideUploading()
 
-    // 文件上传操作
-    $file.onchange = () => {
-      if (!$file.files || $file.files.length < 0) return
-
-      showUploading()
+    const startUploadFile = async () => {
       UploadedFilename = ''
 
       const xhr = new XMLHttpRequest()
@@ -135,11 +131,11 @@ export default class TransferView extends SidebarView {
 
       // 创建上传参数
       const formData = new FormData()
-      formData.append('file', $file.files[0])
+      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.open('post', `${this.ctx.conf.server}/api/admin/import-upload`)
       xhr.timeout = 2*60*1000 // 2min
       xhr.send(formData)
 
@@ -183,6 +179,17 @@ export default class TransferView extends SidebarView {
       }
     }
 
+    // 文件上传操作
+    $file.onchange = () => {
+      if (!$file.files || $file.files.length === 0) return
+
+      showUploading()
+      setTimeout(async () => {
+        await startUploadFile()
+        hideUploading()
+      }, 80)
+    }
+
     // 开始导入按钮
     $submitBtn.onclick = () => {
       if (!UploadedFilename) {
@@ -249,7 +256,7 @@ export default class TransferView extends SidebarView {
         const $formTmp = document.createElement('form')
         $formTmp.style.display = 'none'
         $formTmp.setAttribute('method', 'post')
-        $formTmp.setAttribute('action', `${this.ctx.conf.server}/admin/import`)
+        $formTmp.setAttribute('action', `${this.ctx.conf.server}/api/admin/import`)
         $formTmp.setAttribute("target", frameName)
 
         Object.entries(formParams).forEach(([key, val]) => {

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

@@ -321,7 +321,8 @@
         border: 2px solid var(--at-color-border);
         cursor: pointer;
         position: relative;
-        padding: 0 15px;
+        padding: 6px 15px;
+        line-height: 0;
         margin-bottom: 17px;
         border-radius: 50px;
 

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/index.html

@@ -32,6 +32,13 @@
   <!--<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">
@@ -57,7 +64,7 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
     });
 

packages/artalk/package.json

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

packages/artalk/src/api/index.ts

@@ -1,5 +1,5 @@
-import Context from '../context'
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
 
@@ -9,7 +9,7 @@ export default class Api {
 
   constructor (ctx: Context) {
     this.ctx = ctx
-    this.baseURL = ctx.conf.server
+    this.baseURL = `${ctx.conf.server}/api`
   }
 
   // ============================
@@ -45,7 +45,7 @@ export default class Api {
       content: comment.content,
       rid: comment.rid,
       page_key: comment.page_key,
-      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA (针对 Win11)
+      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA
     }
 
     if (comment.page_title) params.page_title = comment.page_title
@@ -119,8 +119,11 @@ export default class Api {
 
   /** 用户 · 登录状态 */
   public async loginStatus() {
-    const data = await POST<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)
   }
 
   // ============================
@@ -314,4 +318,20 @@ export default class Api {
     const data = await POST<any>(this.ctx, `${this.baseURL}/captcha/status`)
     return (data || { is_pass: false }) as { is_pass: boolean }
   }
+
+  // ============================
+  //  管理员缓存操作
+  // ============================
+
+  /** 缓存清除 */
+  public cacheFlushAll() {
+    const params: any = { flush_all: true }
+    return POST(this.ctx, `${this.baseURL}/admin/cache-flush`, params)
+  }
+
+  /** 缓存预热 */
+  public cacheWarmUp() {
+    const params: any = {}
+    return POST(this.ctx, `${this.baseURL}/admin/cache-warm`, params)
+  }
 }

packages/artalk/src/artalk.ts

@@ -1,7 +1,8 @@
 import './style/main.less'
 
-import Context from './context'
 import ArtalkConfig from '~/types/artalk-config'
+import { EventPayloadMap, Handler } from '~/types/event'
+import Context from './context'
 import defaults from './defaults'
 
 import CheckerLauncher from './lib/checker'
@@ -9,8 +10,7 @@ import Editor from './components/editor'
 import List from './components/list'
 import SidebarLayer from './components/sidebar-layer'
 
-import { GetLayerWrap } from './components/layer'
-import { EventPayloadMap, Handler } from '~/types/event'
+import Layer, { GetLayerWrap } from './components/layer'
 import Api from './api'
 import * as Utils from './lib/utils'
 
@@ -33,21 +33,31 @@ export default class Artalk {
   constructor (customConf: ArtalkConfig) {
     // 配置
     this.conf = { ...Artalk.defaults, ...customConf }
-    this.conf.server = this.conf.server.replace(/\/$/, '')
+    this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
 
     // 默认 pageKey
     if (!this.conf.pageKey) {
-      this.conf.pageKey = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
+      // @link http://bl.ocks.org/abernier/3070589
+      this.conf.pageKey = `${window.location.pathname}`
+    }
+
+    // 默认 pageTitle
+    if (!this.conf.pageTitle) {
+      this.conf.pageTitle = `${document.title}`
     }
 
     // 装载元素
-    try {
-      const $root = document.querySelector<HTMLElement>(this.conf.el)
-      if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
-      this.$root = $root
-    } catch (e) {
-      console.error(e)
-      throw new Error('Please check your Artalk `el` config.')
+    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
+      this.$root = this.conf.el
+    } else {
+      try {
+        const $root = document.querySelector<HTMLElement>(this.conf.el)
+        if (!$root) throw Error(`Sorry, target element "${this.conf.el}" was not found.`)
+        this.$root = $root
+      } catch (e) {
+        console.error(e)
+        throw new Error('Please check your Artalk `el` config.')
+      }
     }
 
     // Context 初始化
@@ -56,6 +66,7 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
+    this.initLayer()
     this.initDarkMode()
 
     // 组件初始化
@@ -133,6 +144,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 +181,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

@@ -1,11 +1,11 @@
 import '../style/comment.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import UADetect from '../lib/detect'
-import { CommentData } from '~/types/artalk-data'
 import CommentHTML from './html/comment.html?raw'
 import Api from '../api'
 import ActionBtn from './action-btn'

packages/artalk/src/components/editor-plugs/emoticons-plug.ts

@@ -1,10 +1,10 @@
 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'
+import EditorPlug from './editor-plug'
+import Editor from '../editor'
 
 type OwOFormatType = {
   [key: string] : {
@@ -20,22 +20,33 @@ export default class EmoticonsPlug extends EditorPlug {
   public $grpWrap!: HTMLElement
   public $grpSwitcher!: HTMLElement
 
+  public loadingTask: Promise<void>|null = null
+
   constructor (public editor: Editor) {
     super(editor)
 
     this.$el = Utils.createElement(`<div class="atk-editor-plug-emoticons"></div>`)
-
-    this.init()
   }
 
-  async init() {
-    // 数据处理
-    Ui.showLoading(this.$el)
-    this.emoticons = await this.handleData(this.ctx.conf.emoticons)
-    Ui.hideLoading(this.$el)
+  isListLoaded = false
+  isImgLoaded = false
 
-    // 初始化元素
-    this.initEmoticonsList()
+  async loadEmoticonsData() {
+    if (this.isListLoaded) return
+    if (this.loadingTask !== null) {
+      await this.loadingTask
+      return
+    }
+
+    // 数据处理
+    this.loadingTask = (async () => {
+      Ui.showLoading(this.$el)
+      this.emoticons = await this.handleData(this.ctx.conf.emoticons)
+      Ui.hideLoading(this.$el)
+      this.loadingTask = null
+      this.isListLoaded = true
+    })()
+    await this.loadingTask
   }
 
   async handleData(data: any): Promise<any[]> {
@@ -85,7 +96,7 @@ export default class EmoticonsPlug extends EditorPlug {
     // 剔除非法数据
     data = data.filter((item: any) => (typeof item === 'object' && !Array.isArray(item) && !!item && !!item.name))
 
-    console.log(data)
+    // console.log(data)
 
     this.solveNullKey(data)
     this.solveSameKey(data)
@@ -243,10 +254,20 @@ export default class EmoticonsPlug extends EditorPlug {
   }
 
   onShow () {
-    // 延迟执行，防止无法读取高度
-    setTimeout(() => {
-      this.changeListHeight()
-    }, 30)
+    ;(async () => {
+      await this.loadEmoticonsData()
+
+      // 初始化元素
+      if (!this.isImgLoaded) {
+        this.initEmoticonsList()
+        this.isImgLoaded = true
+      }
+
+      // 延迟执行，防止无法读取高度
+      setTimeout(() => {
+        this.changeListHeight()
+      }, 30)
+    })()
   }
 
   onHide () {

packages/artalk/src/components/editor-plugs/preview-plug.ts

@@ -1,8 +1,8 @@
 import './preview-plug.less'
 
+import * as Utils from '~/src/lib/utils'
 import Editor from '../editor'
 import EditorPlug from './editor-plug'
-import * as Utils from '~/src/lib/utils'
 
 export default class PreviewPlug extends EditorPlug {
   $el!: HTMLElement

packages/artalk/src/components/editor.ts

@@ -1,5 +1,6 @@
 import '../style/editor.less'
 
+import { CommentData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
@@ -8,7 +9,6 @@ import EditorHTML from './html/editor.html?raw'
 
 import EmoticonsPlug from './editor-plugs/emoticons-plug'
 import PreviewPlug from './editor-plugs/preview-plug'
-import { CommentData } from '~/types/artalk-data'
 import Api from '../api'
 
 export default class Editor extends Component {
@@ -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
 
@@ -204,6 +205,17 @@ export default class Editor extends Component {
       // 切换按钮
       const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
       this.$plugBtnWrap.appendChild(btnElem)
+
+      // 表情包插件预加载
+      if (PlugObj.Name === 'emoticons') {
+        const emoPlug = new PlugObj(this) as EmoticonsPlug
+        this.plugList[PlugObj.Name] = emoPlug
+
+        window.setTimeout(() => {
+          emoPlug.loadEmoticonsData()
+        }, 1000) // 延迟 1s 加载
+      }
+
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
         if (!plug) {
@@ -265,12 +277,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
@@ -393,7 +409,11 @@ export default class Editor extends Component {
     if (!!this.plugList && !!this.plugList.preview) {
       this.plugList.preview.updateContent()
     }
-    this.adjustTextareaHeight()
+
+    // 延迟执行防止无效
+    window.setTimeout(() => {
+      this.adjustTextareaHeight()
+    }, 80)
   }
 
   clearEditor () {
@@ -501,7 +521,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)
@@ -563,5 +583,9 @@ export default class Editor extends Component {
     // 取消回复
     if (this.replyComment !== null) this.cancelReply()
   }
+
+  initRemoteEmoticons () {
+
+  }
 }
 

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

@@ -1,10 +1,10 @@
+import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import Comment from './comment'
-import { ListData, CommentData, NotifyData, ApiVersionData } from '~/types/artalk-data'
 import Pagination from './pagination'
 import ReadMoreBtn from './read-more-btn'
 import { backendMinVersion } from '../../package.json'
@@ -49,6 +49,9 @@ export default class ListLite extends Component {
     </div>`)
     this.$commentsWrap = this.$el.querySelector('.atk-list-comments-wrap')!
 
+    // 评论为空时显示字符
+    if (ctx.conf.noComment) this.noCommentText = ctx.conf.noComment
+
     // 评论时间自动更新
     window.setInterval(() => {
       this.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
@@ -91,7 +94,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 +222,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 +240,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/list.ts

@@ -1,12 +1,12 @@
 import '../style/list.less'
 
+import { ListData } from '~/types/artalk-data'
 import Context from '../context'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import Api from '../api'
 import ListHTML from './html/list.html?raw'
 import ListLite from './list-lite'
-import { ListData } from '~/types/artalk-data'
 
 export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement

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

@@ -3,8 +3,9 @@ import '../style/sidebar-layer.less'
 import Context from '@/context'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
-import SidebarHTML from './html/sidebar-layer.html?raw'
 import * as Ui from '@/lib/ui'
+import { SidebarShowPayload } from '~/types/event'
+import SidebarHTML from './html/sidebar-layer.html?raw'
 import Layer from './layer'
 import Api from '../api'
 
@@ -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,54 +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))
+        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
 
-      const location = window.location
-      this.iframeLoad(`${baseURL}`
-        + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
-        + `&site=${encodeURIComponent(this.conf.site || '')}`
-        + `&user=${userData}`
-        + `&time=${+new Date()}`
-        + `&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/context.ts

@@ -1,7 +1,7 @@
 import { marked as libMarked } from 'marked'
-import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
+import User from './lib/user'
 
 /**
  * Artalk Context
@@ -42,4 +42,5 @@ export default class Context {
   }
 
   public markedInstance!: typeof libMarked
+  public markedReplacers: ((raw: string) => string)[] = []
 }

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}/api/captcha/get?t=${+new Date()}`
       $iframe.onload = () => {
         $iframe.style.display = ''
         Ui.hideLoading($iframeWrap)

packages/artalk/src/lib/checker/index.ts

@@ -1,9 +1,9 @@
 import Context from '@/context'
 import Layer from '@/components/layer'
 import Dialog from '@/components/dialog'
+import { CheckerPayload } from '~/types/event'
 import * as Utils from '../utils'
 import * as Ui from '../ui'
-import { CheckerPayload } from '~/types/event'
 import CaptchaChecker from './captcha-checker'
 import AdminChecker from './admin-checker'
 

packages/artalk/src/lib/detect.js

@@ -1,263 +0,0 @@
-/* eslint-disable */
-var win = window || {}
-var nav = navigator || {}
-function Detect (userAgent) {
-  var u = userAgent || nav.userAgent
-  var _this = this
-
-  var match = {
-    // 内核
-    Trident: u.indexOf('Trident') > -1 || u.indexOf('NET CLR') > -1,
-    Presto: u.indexOf('Presto') > -1,
-    WebKit: u.indexOf('AppleWebKit') > -1,
-    Gecko: u.indexOf('Gecko/') > -1,
-    // 浏览器
-    Safari: u.indexOf('Safari') > -1,
-    Chrome: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1,
-    IE: u.indexOf('MSIE') > -1 || u.indexOf('Trident') > -1,
-    Edge: u.indexOf('Edge') > -1,
-    Firefox: u.indexOf('Firefox') > -1 || u.indexOf('FxiOS') > -1,
-    'Firefox Focus': u.indexOf('Focus') > -1,
-    Chromium: u.indexOf('Chromium') > -1,
-    Opera: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1,
-    Vivaldi: u.indexOf('Vivaldi') > -1,
-    Yandex: u.indexOf('YaBrowser') > -1,
-    Kindle: u.indexOf('Kindle') > -1 || u.indexOf('Silk/') > -1,
-    360: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1,
-    UC: u.indexOf('UC') > -1 || u.indexOf(' UBrowser') > -1,
-    QQBrowser: u.indexOf('QQBrowser') > -1,
-    QQ: u.indexOf('QQ/') > -1,
-    Baidu: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1,
-    Maxthon: u.indexOf('Maxthon') > -1,
-    Sogou: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1,
-    LBBROWSER: u.indexOf('LBBROWSER') > -1,
-    '2345Explorer': u.indexOf('2345Explorer') > -1,
-    TheWorld: u.indexOf('TheWorld') > -1,
-    XiaoMi: u.indexOf('MiuiBrowser') > -1,
-    Quark: u.indexOf('Quark') > -1,
-    Qiyu: u.indexOf('Qiyu') > -1,
-    Wechat: u.indexOf('MicroMessenger') > -1,
-    Taobao: u.indexOf('AliApp(TB') > -1,
-    Alipay: u.indexOf('AliApp(AP') > -1,
-    Weibo: u.indexOf('Weibo') > -1,
-    Douban: u.indexOf('com.douban.frodo') > -1,
-    Suning: u.indexOf('SNEBUY-APP') > -1,
-    iQiYi: u.indexOf('IqiyiApp') > -1,
-    // 系统或平台
-    Windows: u.indexOf('Windows') > -1,
-    Linux: u.indexOf('Linux') > -1 || u.indexOf('X11') > -1,
-    'Mac OS': u.indexOf('Macintosh') > -1,
-    Android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
-    Ubuntu: u.indexOf('Ubuntu') > -1,
-    FreeBSD: u.indexOf('FreeBSD') > -1,
-    Debian: u.indexOf('Debian') > -1,
-    'Windows Phone': u.indexOf('IEMobile') > -1 || u.indexOf('Windows Phone') > -1,
-    BlackBerry: u.indexOf('BlackBerry') > -1 || u.indexOf('RIM') > -1,
-    MeeGo: u.indexOf('MeeGo') > -1,
-    Symbian: u.indexOf('Symbian') > -1,
-    iOS: u.indexOf('like Mac OS X') > -1,
-    'Chrome OS': u.indexOf('CrOS') > -1,
-    WebOS: u.indexOf('hpwOS') > -1,
-    // 设备
-    Mobile: u.indexOf('Mobi') > -1 || u.indexOf('iPh') > -1 || u.indexOf('480') > -1,
-    Tablet: u.indexOf('Tablet') > -1 || u.indexOf('Pad') > -1 || u.indexOf('Nexus 7') > -1
-  }
-  // 修正
-  if (match.Mobile) {
-    match.Mobile = !(u.indexOf('iPad') > -1)
-  } else if (win.showModalDialog && win.chrome) {
-    match['360'] = true
-  }
-  // 基本信息
-  var hash = {
-    engine: ['WebKit', 'Trident', 'Gecko', 'Presto'],
-    browser: ['Safari', 'Chrome', 'Edge', 'IE', 'Firefox', 'Firefox Focus', 'Chromium', 'Opera', 'Vivaldi', 'Yandex', 'Kindle', '360', 'UC', 'QQBrowser', 'QQ', 'Baidu', 'Maxthon', 'Sogou', 'LBBROWSER', '2345Explorer', 'TheWorld', 'XiaoMi', 'Quark', 'Qiyu', 'Wechat', 'Taobao', 'Alipay', 'Weibo', 'Douban', 'Suning', 'iQiYi'],
-    os: ['Windows', 'Linux', 'Mac OS', 'Android', 'Ubuntu', 'FreeBSD', 'Debian', 'iOS', 'Windows Phone', 'BlackBerry', 'MeeGo', 'Symbian', 'Chrome OS', 'WebOS'],
-    device: ['Mobile', 'Tablet']
-  }
-  _this.device = 'PC'
-  _this.language = (function () {
-    var g = (nav.browserLanguage || nav.language)
-    var arr = g.split('-')
-    if (arr[1]) {
-      arr[1] = arr[1].toUpperCase()
-    }
-    return arr.join('_')
-  })()
-  for (var s in hash) {
-    for (var i = 0; i < hash[s].length; i++) {
-      var value = hash[s][i]
-      if (match[value]) {
-        _this[s] = value
-      }
-    }
-  }
-  // 系统版本信息
-  var osVersion = {
-    Windows: function () {
-      var v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1')
-      var hash = {
-        6.4: '10',
-        6.3: '8.1',
-        6.2: '8',
-        6.1: '7',
-        '6.0': 'Vista',
-        5.2: 'XP',
-        5.1: 'XP',
-        '5.0': '2000',
-        '10.0': '10',
-        '11.0': '11' // 自定的，不是微软官方的判断方法
-      }
-      return hash[v] || v
-    },
-    Android: function () {
-      return u.replace(/^.*Android ([\d.]+);.*$/, '$1')
-    },
-    iOS: function () {
-      return u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.')
-    },
-    Debian: function () {
-      return u.replace(/^.*Debian\/([\d.]+).*$/, '$1')
-    },
-    'Windows Phone': function () {
-      return u.replace(/^.*Windows Phone( OS)? ([\d.]+);.*$/, '$2')
-    },
-    'Mac OS': function () {
-      return u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.')
-    },
-    WebOS: function () {
-      return u.replace(/^.*hpwOS\/([\d.]+);.*$/, '$1')
-    }
-  }
-  _this.osVersion = ''
-  if (osVersion[_this.os]) {
-    _this.osVersion = osVersion[_this.os]()
-    if (_this.osVersion === u) {
-      _this.osVersion = ''
-    }
-  }
-  // 浏览器版本信息
-  var version = {
-    Safari: function () {
-      return u.replace(/^.*Version\/([\d.]+).*$/, '$1')
-    },
-    Chrome: function () {
-      return u.replace(/^.*Chrome\/([\d.]+).*$/, '$1').replace(/^.*CriOS\/([\d.]+).*$/, '$1')
-    },
-    IE: function () {
-      return u.replace(/^.*MSIE ([\d.]+).*$/, '$1').replace(/^.*rv:([\d.]+).*$/, '$1')
-    },
-    Edge: function () {
-      return u.replace(/^.*Edge\/([\d.]+).*$/, '$1')
-    },
-    Firefox: function () {
-      return u.replace(/^.*Firefox\/([\d.]+).*$/, '$1').replace(/^.*FxiOS\/([\d.]+).*$/, '$1')
-    },
-    'Firefox Focus': function () {
-      return u.replace(/^.*Focus\/([\d.]+).*$/, '$1')
-    },
-    Chromium: function () {
-      return u.replace(/^.*Chromium\/([\d.]+).*$/, '$1')
-    },
-    Opera: function () {
-      return u.replace(/^.*Opera\/([\d.]+).*$/, '$1').replace(/^.*OPR\/([\d.]+).*$/, '$1')
-    },
-    Vivaldi: function () {
-      return u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1')
-    },
-    Yandex: function () {
-      return u.replace(/^.*YaBrowser\/([\d.]+).*$/, '$1')
-    },
-    Kindle: function () {
-      return u.replace(/^.*Version\/([\d.]+).*$/, '$1')
-    },
-    Maxthon: function () {
-      return u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1')
-    },
-    QQBrowser: function () {
-      return u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1')
-    },
-    QQ: function () {
-      return u.replace(/^.*QQ\/([\d.]+).*$/, '$1')
-    },
-    Baidu: function () {
-      return u.replace(/^.*BIDUBrowser[\s/]([\d.]+).*$/, '$1')
-    },
-    UC: function () {
-      return u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1')
-    },
-    Sogou: function () {
-      return u.replace(/^.*SE ([\d.X]+).*$/, '$1').replace(/^.*SogouMobileBrowser\/([\d.]+).*$/, '$1')
-    },
-    '2345Explorer': function () {
-      return u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1')
-    },
-    TheWorld: function () {
-      return u.replace(/^.*TheWorld ([\d.]+).*$/, '$1')
-    },
-    XiaoMi: function () {
-      return u.replace(/^.*MiuiBrowser\/([\d.]+).*$/, '$1')
-    },
-    Quark: function () {
-      return u.replace(/^.*Quark\/([\d.]+).*$/, '$1')
-    },
-    Qiyu: function () {
-      return u.replace(/^.*Qiyu\/([\d.]+).*$/, '$1')
-    },
-    Wechat: function () {
-      return u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1')
-    },
-    Taobao: function () {
-      return u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1')
-    },
-    Alipay: function () {
-      return u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1')
-    },
-    Weibo: function () {
-      return u.replace(/^.*weibo__([\d.]+).*$/, '$1')
-    },
-    Douban: function () {
-      return u.replace(/^.*com.douban.frodo\/([\d.]+).*$/, '$1')
-    },
-    Suning: function () {
-      return u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1')
-    },
-    iQiYi: function () {
-      return u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1')
-    }
-  }
-  _this.version = ''
-  if (version[_this.browser]) {
-    _this.version = version[_this.browser]()
-    if (_this.version === u) {
-      _this.version = ''
-    }
-  }
-
-  // 简化版本号
-  /* if (_this.osVersion.indexOf('.')) {
-    _this.osVersion = _this.osVersion.substring(0, _this.osVersion.indexOf('.'))
-  } */
-  if (_this.version.indexOf('.')) {
-    _this.version = _this.version.substring(0, _this.version.indexOf('.'))
-  }
-
-  // 修正
-  if (_this.browser === 'Edge') {
-    _this.engine = 'EdgeHTML'
-  } else if (_this.browser === 'Chrome' && parseInt(_this.version) > 27) {
-    _this.engine = 'Blink'
-  } else if (_this.browser === 'Opera' && parseInt(_this.version) > 12) {
-    _this.engine = 'Blink'
-  } else if (_this.browser === 'Yandex') {
-    _this.engine = 'Blink'
-  } else if (_this.browser === undefined) {
-    _this.browser = 'Unknow App'
-  }
-};
-
-function detectFactory (u) {
-  return new Detect(u)
-}
-
-export default detectFactory

packages/artalk/src/lib/detect.ts

@@ -0,0 +1,222 @@
+const win = (window as any) || {}
+const nav = navigator || {}
+
+function Detect (userAgent?: string) {
+  const u = String(userAgent || nav.userAgent)
+  const dest = {
+    os: '',
+    osVersion: '',
+    engine: '',
+    browser: '',
+    device: '',
+    language: '',
+    version: ''
+  }
+
+  // 内核
+  const engineMatch = {
+    Trident: u.includes('Trident') || u.includes('NET CLR'),
+    Presto: u.includes('Presto'),
+    WebKit: u.includes('AppleWebKit'),
+    Gecko: u.includes('Gecko/')
+  }
+
+  // 浏览器
+  const browserMatch = {
+    Safari: u.includes('Safari'),
+    Chrome: u.includes('Chrome') || u.includes('CriOS'),
+    IE: u.includes('MSIE') || u.includes('Trident'),
+    Edge: u.includes('Edge') || u.includes('Edg'),
+    Firefox: u.includes('Firefox') || u.includes('FxiOS'),
+    'Firefox Focus': u.includes('Focus'),
+    Chromium: u.includes('Chromium'),
+    Opera: u.includes('Opera') || u.includes('OPR'),
+    Vivaldi: u.includes('Vivaldi'),
+    Yandex: u.includes('YaBrowser'),
+    Kindle: u.includes('Kindle') || u.includes('Silk/'),
+    360: u.includes('360EE') || u.includes('360SE'),
+    UC: u.includes('UC') || u.includes(' UBrowser'),
+    QQBrowser: u.includes('QQBrowser'),
+    QQ: u.includes('QQ/'),
+    Baidu: u.includes('Baidu') || u.includes('BIDUBrowser'),
+    Maxthon: u.includes('Maxthon'),
+    Sogou: u.includes('MetaSr') || u.includes('Sogou'),
+    LBBROWSER: u.includes('LBBROWSER'),
+    '2345Explorer': u.includes('2345Explorer'),
+    TheWorld: u.includes('TheWorld'),
+    MIUI: u.includes('MiuiBrowser'),
+    Quark: u.includes('Quark'),
+    Qiyu: u.includes('Qiyu'),
+    Wechat: u.includes('MicroMessenger'),
+    Taobao: u.includes('AliApp(TB'),
+    Alipay: u.includes('AliApp(AP'),
+    Weibo: u.includes('Weibo'),
+    Douban: u.includes('com.douban.frodo'),
+    Suning: u.includes('SNEBUY-APP'),
+    iQiYi: u.includes('IqiyiApp'),
+  }
+
+  // 系统或平台
+  const osMatch = {
+    Windows: u.includes('Windows'),
+    Linux: u.includes('Linux') || u.includes('X11'),
+    'macOS': u.includes('Macintosh'),
+    Android: u.includes('Android') || u.includes('Adr'),
+    Ubuntu: u.includes('Ubuntu'),
+    FreeBSD: u.includes('FreeBSD'),
+    Debian: u.includes('Debian'),
+    'Windows Phone': u.includes('IEMobile') || u.includes('Windows Phone'),
+    BlackBerry: u.includes('BlackBerry') || u.includes('RIM'),
+    MeeGo: u.includes('MeeGo'),
+    Symbian: u.includes('Symbian'),
+    iOS: u.includes('like Mac OS X'),
+    'Chrome OS': u.includes('CrOS'),
+    WebOS: u.includes('hpwOS'),
+  }
+
+  // 设备
+  const deviceMatch = {
+    Mobile: u.includes('Mobi') || u.includes('iPh') || u.includes('480'),
+    Tablet: u.includes('Tablet') || u.includes('Pad') || u.includes('Nexus 7')
+  }
+
+  // 修正
+  if (deviceMatch.Mobile) {
+    deviceMatch.Mobile = !(u.includes('iPad'))
+  } else if (browserMatch.Chrome && u.includes('Edg')) {
+    // Chrome 内核的 Edge
+    browserMatch.Chrome = false
+    browserMatch.Edge = true
+  } else if (win.showModalDialog && win.chrome) {
+    browserMatch.Chrome = false
+    browserMatch['360'] = true
+  }
+
+  // 默认设备
+  dest.device = 'PC'
+
+  // 语言
+  dest.language = (() => {
+    const g = ((nav as any).browserLanguage || nav.language)
+    const arr = g.split('-')
+    if (arr[1]) arr[1] = arr[1].toUpperCase()
+    return arr.join('_')
+  })()
+
+  // 应用判断数据
+  const hash = {
+    engine: engineMatch,
+    browser: browserMatch,
+    os: osMatch,
+    device: deviceMatch,
+  }
+  Object.entries(hash).forEach(([type, match]) => {
+    Object.entries(match).forEach(([name, result]) => {
+      if (result === true) dest[type] = name
+    })
+  })
+
+  // 系统版本信息
+  const osVersion = {
+    Windows: () => {
+      const v = u.replace(/^.*Windows NT ([\d.]+);.*$/, '$1')
+      const wvHash = {
+        '6.4': '10',
+        '6.3': '8.1',
+        '6.2': '8',
+        '6.1': '7',
+        '6.0': 'Vista',
+        '5.2': 'XP',
+        '5.1': 'XP',
+        '5.0': '2000',
+        '10.0': '10',
+        '11.0': '11' // 自定的，不是微软官方的判断方法
+      }
+      return wvHash[v] || v
+    },
+    Android: () => u.replace(/^.*Android ([\d.]+);.*$/, '$1'),
+    iOS: () => u.replace(/^.*OS ([\d_]+) like.*$/, '$1').replace(/_/g, '.'),
+    Debian: () => u.replace(/^.*Debian\/([\d.]+).*$/, '$1'),
+    'Windows Phone': () => u.replace(/^.*Windows Phone( OS)? ([\d.]+);.*$/, '$2'),
+    'macOS': () => u.replace(/^.*Mac OS X ([\d_]+).*$/, '$1').replace(/_/g, '.'),
+    WebOS: () => u.replace(/^.*hpwOS\/([\d.]+);.*$/, '$1')
+  }
+
+  dest.osVersion = ''
+  if (osVersion[dest.os]) {
+    dest.osVersion = osVersion[dest.os]()
+    if (dest.osVersion === u) {
+      dest.osVersion = ''
+    }
+  }
+
+  // 浏览器版本信息
+  const version = {
+    Safari: () => u.replace(/^.*Version\/([\d.]+).*$/, '$1'),
+    Chrome: () => u.replace(/^.*Chrome\/([\d.]+).*$/, '$1').replace(/^.*CriOS\/([\d.]+).*$/, '$1'),
+    IE: () => u.replace(/^.*MSIE ([\d.]+).*$/, '$1').replace(/^.*rv:([\d.]+).*$/, '$1'),
+    Edge: () => u.replace(/^.*(Edge|Edg|Edg[A-Z]{1})\/([\d.]+).*$/, '$2'),
+    Firefox: () => u.replace(/^.*Firefox\/([\d.]+).*$/, '$1').replace(/^.*FxiOS\/([\d.]+).*$/, '$1'),
+    'Firefox Focus': () => u.replace(/^.*Focus\/([\d.]+).*$/, '$1'),
+    Chromium: () => u.replace(/^.*Chromium\/([\d.]+).*$/, '$1'),
+    Opera: () => u.replace(/^.*Opera\/([\d.]+).*$/, '$1').replace(/^.*OPR\/([\d.]+).*$/, '$1'),
+    Vivaldi: () => u.replace(/^.*Vivaldi\/([\d.]+).*$/, '$1'),
+    Yandex: () => u.replace(/^.*YaBrowser\/([\d.]+).*$/, '$1'),
+    Kindle: () => u.replace(/^.*Version\/([\d.]+).*$/, '$1'),
+    Maxthon: () => u.replace(/^.*Maxthon\/([\d.]+).*$/, '$1'),
+    QQBrowser: () => u.replace(/^.*QQBrowser\/([\d.]+).*$/, '$1'),
+    QQ: () => u.replace(/^.*QQ\/([\d.]+).*$/, '$1'),
+    Baidu: () => u.replace(/^.*BIDUBrowser[\s/]([\d.]+).*$/, '$1'),
+    UC: () => u.replace(/^.*UC?Browser\/([\d.]+).*$/, '$1'),
+    Sogou: () => u.replace(/^.*SE ([\d.X]+).*$/, '$1').replace(/^.*SogouMobileBrowser\/([\d.]+).*$/, '$1'),
+    '2345Explorer': () => u.replace(/^.*2345Explorer\/([\d.]+).*$/, '$1'),
+    TheWorld: () => u.replace(/^.*TheWorld ([\d.]+).*$/, '$1'),
+    MIUI: () => u.replace(/^.*MiuiBrowser\/([\d.]+).*$/, '$1'),
+    Quark: () => u.replace(/^.*Quark\/([\d.]+).*$/, '$1'),
+    Qiyu: () => u.replace(/^.*Qiyu\/([\d.]+).*$/, '$1'),
+    Wechat: () => u.replace(/^.*MicroMessenger\/([\d.]+).*$/, '$1'),
+    Taobao: () => u.replace(/^.*AliApp\(TB\/([\d.]+).*$/, '$1'),
+    Alipay: () => u.replace(/^.*AliApp\(AP\/([\d.]+).*$/, '$1'),
+    Weibo: () => u.replace(/^.*weibo__([\d.]+).*$/, '$1'),
+    Douban: () => u.replace(/^.*com.douban.frodo\/([\d.]+).*$/, '$1'),
+    Suning: () => u.replace(/^.*SNEBUY-APP([\d.]+).*$/, '$1'),
+    iQiYi: () => u.replace(/^.*IqiyiVersion\/([\d.]+).*$/, '$1'),
+  }
+
+  dest.version = ''
+  if (version[dest.browser]) {
+    dest.version = version[dest.browser]()
+    if (dest.version === u) {
+      dest.version = ''
+    }
+  }
+
+  // 简化版本号
+  /* if (_this.osVersion.indexOf('.')) {
+    _this.osVersion = _this.osVersion.substring(0, _this.osVersion.indexOf('.'))
+  } */
+  if (dest.version.indexOf('.')) {
+    dest.version = dest.version.substring(0, dest.version.indexOf('.'))
+  }
+
+  // 修正
+  if (dest.os === 'iOS' && u.includes('iPad')) {
+    dest.os = 'iPadOS'
+  } else if (dest.browser === 'Edge' && !u.includes('Edg')) {
+    dest.engine = 'EdgeHTML'
+  } else if (dest.browser === 'MIUI') {
+    dest.os = 'Android'
+  } else if (dest.browser === 'Chrome' && Number(dest.version) > 27) {
+    dest.engine = 'Blink'
+  } else if (dest.browser === 'Opera' && Number(dest.version) > 12) {
+    dest.engine = 'Blink'
+  } else if (dest.browser === 'Yandex') {
+    dest.engine = 'Blink'
+  } else if (dest.browser === undefined) {
+    dest.browser = 'Unknow App'
+  }
+
+  return dest
+}
+
+export default Detect

packages/artalk/src/lib/utils.ts

@@ -143,10 +143,10 @@ export function versionCompare(a: string, b: string) {
 /** 初始化 marked */
 export function initMarked(ctx: Context) {
   const renderer = new libMarked.Renderer()
-  const linkRenderer = renderer.link
+  const orgLinkRenderer = renderer.link
   renderer.link = (href, title, text) => {
     const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-    const html = linkRenderer.call(renderer as any, href, title, text);
+    const html = orgLinkRenderer.call(renderer as any, href, title, text);
     return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
@@ -186,8 +186,9 @@ export function initMarked(ctx: Context) {
 
 /** 解析 markdown */
 export function marked(ctx: Context, src: string): string {
+  // @link https://github.com/markedjs/marked/discussions/1232
   // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  return insane(ctx.markedInstance.parse(src), {
+  let dest = insane(ctx.markedInstance.parse(src), {
     allowedClasses: {},
     allowedSchemes: ['http', 'https', 'mailto'],
     allowedTags: [
@@ -198,7 +199,7 @@ export function marked(ctx: Context, src: string): string {
     ],
     allowedAttributes: {
       '*': ['title', 'accesskey'],
-      a: ['href', 'name', 'target', 'aria-label'],
+      a: ['href', 'name', 'target', 'aria-label', 'rel'],
       img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
       // for code highlight
       code: ['class'],
@@ -229,28 +230,45 @@ export function marked(ctx: Context, src: string): string {
       return true
     }
   })
+
+  // 内容替换器
+  ctx.markedReplacers.forEach((replacer) => {
+    if (typeof replacer === 'function') dest = replacer(dest)
+  })
+
+  return dest
 }
 
 /** 获取修正后的 UserAgent */
 export async function getCorrectUserAgent() {
   const uaRaw = navigator.userAgent
-  const uaData = (navigator as any).userAgentData // @link https://web.dev/migrate-to-ua-ch/
-  if (!uaData || !uaData.getHighEntropyValues) {
+  if (!(navigator as any).userAgentData || !(navigator as any).userAgentData.getHighEntropyValues) {
     return uaRaw
   }
 
-  // microsoft f******k you!!!!!
-  // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+  // @link https://web.dev/migrate-to-ua-ch/
+  // @link https://web.dev/user-agent-client-hints/
+  const uaData = (navigator as any).userAgentData
   let uaGot: any = null
   try {
     uaGot = await uaData.getHighEntropyValues(["platformVersion"])
   } catch (err) { console.error(err); return uaRaw }
-
-  if (uaData.platform !== "Windows") { return uaRaw }
   const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
-  if (majorPlatformVersion >= 13) {
-    // Win11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
-    return uaRaw.replace(/Windows\W+NT\W+10.0/, 'Windows NT 11.0')
+
+  if (uaData.platform === "Windows") {
+    if (majorPlatformVersion >= 13) { // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+      // @date 2022-4-29
+      // Win 11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
+      return uaRaw.replace(/Windows NT 10.0/, 'Windows NT 11.0')
+    }
+  }
+  if (uaData.platform === "macOS") {
+    if (majorPlatformVersion >= 11) { // 11 => BigSur
+      // @date 2022-4-29
+      // (Intel Chip) macOS 12.3 样本："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
+      // (Arm Chip) macOS 样本："Mozilla/5.0 (Macintosh; ARM Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
+      return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`)
+    }
   }
 
   return uaRaw
@@ -268,7 +286,7 @@ export function isValidURL(urlRaw: string) {
 
 /** 获取基于 conf.server 的 URL */
 export function getURLBasedOnApi(ctx: Context, path: string) {
-  return `${ctx.conf.server.replace(/\/api\/?$/, '')}/${path.replace(/^\//, '')}`
+  return getURLBasedOn(ctx.conf.server, path)
 }
 
 /** 获取基于某个 baseURL 的 URL */

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

@@ -19,9 +19,11 @@
 
   input, textarea, button, optgroup, select {
     font-family: inherit;
+    color: inherit;
+    font-size: inherit;
   }
 
-  @codeFont: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
+  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
 
   code {
     font-family: @codeFont;
@@ -33,8 +35,8 @@
   }
 
   pre {
-    margin-top: 10px;
-    margin-bottom: 0;
+    margin: 10px 0 0 0;
+    padding: 0;
     line-height: 0;
   }
 
@@ -196,6 +198,9 @@
 .atk-fade-out {
   animation: atkFadeOut both .2s;
 }
+.atk-rotate {
+  animation: atkRotate 2s linear infinite;
+}
 
 @keyframes atkFadeIn {
   0% { opacity: 0 }
@@ -207,6 +212,11 @@
   0% {}
 }
 
+@keyframes atkRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 i.atk-icon {
   width: 20px;
   height: 20px;
@@ -215,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/artalk-config.d.ts

@@ -1,6 +1,6 @@
 export default interface ArtalkConfig {
   /** 装载元素 */
-  el: string
+  el: string|HTMLElement
 
   /** 页面唯一标识（完整 URL） */
   pageKey: string

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

packages/plugin-katex/README.md

@@ -1,41 +1,3 @@
 # @artalkjs/plugin-katex
 
-食用方法
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-
-  <!-- 引入 katex -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css">
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"></script>
-
-  <!-- 引入 Artalk -->
-  <link href="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/artalk/dist/Artalk.js"></script>
-
-  <!-- 引入 @artalkjs/plugin-katex -->
-  <script defer src="https://cdn.jsdelivr.net/npm/@artalkjs/plugin-katex/dist/artalk-plugin-katex.js"></script>
-</head>
-<body>
-  
-<!-- Artalk -->
-<div id="Comments"></div>
-<script>
-  new Artalk({
-    el:        '#Comments',
-    pageKey:   '<页面链接>',
-    pageTitle: '<页面标题>',
-    server:    '<后端地址>',
-    site:      '<站点名称>',
-  })
-</script>
-
-</body>
-</html>
-```
+食用方法参考：[官方文档](https://artalk.js.org/guide/frontend/latex.html)

packages/plugin-katex/index.d.ts

@@ -1 +0,0 @@
-import './main'

packages/plugin-katex/index.html

@@ -20,7 +20,7 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
     });
   </script>

packages/plugin-katex/main.ts

@@ -3,52 +3,61 @@
 import Artalk from 'artalk'
 import katex from 'katex'
 
+// @link https://github.com/markedjs/marked/issues/1538#issuecomment-575838181
 Artalk.Use((ctx) => {
-  const renderer: any = {}
+  let i = 0
+  const nextID = () => `__atk_katext_id_${i++}__`
+  const mathExpressions: { [key: string]: { type: 'block' | 'inline', expression: string } } = {}
 
-  function renderMathsExpression(expr) {
-    if (expr[0] === '$' && expr[expr.length - 1] === '$') {
-      let displayStyle = false
-      expr = expr.substr(1, expr.length - 2)
-      if (expr[0] === '$' && expr[expr.length - 1] === '$') {
-        displayStyle = true
-        expr = expr.substr(1, expr.length - 2)
-      }
-      let html: any = null
-      try {
-        html = katex.renderToString(expr)
-      } catch (e) {
-        console.error(e)
-      }
-      if (displayStyle && html) {
-        html = html.replace(/class="katex"/g, 'class="katex katex-block" style="display: block;"')
-      }
-      return html
-    }
+  function replaceMathWithIds(text: string) {
+    // Allowing newlines inside of `$$...$$`
+    text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_match, expression) => {
+      const id = nextID()
+      mathExpressions[id] = { type: 'block', expression }
+      return id
+    })
 
-    return null
-  }
-
-  renderer.paragraph = (text) => {
-    const blockRegex = /\$\$[^$]*\$\$/g
-    const inlineRegex = /\$[^$]*\$/g
-    const blockExprArray = text.match(blockRegex)
-    const inlineExprArray = text.match(inlineRegex)
-
-    for (const i in blockExprArray) {
-      const expr = blockExprArray[i]
-      const result = renderMathsExpression(expr)
-      text = text.replace(expr, result)
-    }
-
-    for (const i in inlineExprArray) {
-      const expr = inlineExprArray[i]
-      const result = renderMathsExpression(expr)
-      text = text.replace(expr, result)
-    }
+    // Not allowing newlines or space inside of `$...$`
+    text = text.replace(/\$([^\n]+?)\$/g, (_match, expression) => {
+      const id = nextID()
+      mathExpressions[id] = { type: 'inline', expression }
+      return id
+    })
 
     return text
   }
 
-  ctx.markedInstance.use({ renderer });
+  // Marked render
+  const renderer = new ctx.markedInstance.Renderer() as any
+
+  const orgListitem = renderer.listitem
+  const orgParagraph = renderer.paragraph
+  const orgTablecell = renderer.tablecell
+  const orgCodespan = renderer.codespan
+  const orgText = renderer.text
+
+  renderer.listitem = (text: string, task: boolean, checked: boolean) => orgListitem(replaceMathWithIds(text), task, checked)
+  renderer.paragraph = (text: string) => orgParagraph(replaceMathWithIds(text))
+  renderer.tablecell = (content: string, flags: any) => orgTablecell(replaceMathWithIds(content), flags)
+  renderer.codespan = (code: string) => orgCodespan(replaceMathWithIds(code))
+  renderer.text = (text: string) => orgText(replaceMathWithIds(text)) // Inline level, maybe unneded
+
+  ctx.markedReplacers.push((text) => {
+    text = text.replace(/(__atk_katext_id_\d+__)/g, (_match, capture) => {
+      const v = mathExpressions[capture]
+      const type = v.type
+      let expression = v.expression
+
+      // replace <br/> tag to \n
+      expression = expression.replace(/<br\s*\/?>/mg, "\n")
+
+      return katex.renderToString(expression, { displayMode: type === 'block' })
+    })
+
+    return text
+  })
+
+  ctx.markedInstance.use({
+    renderer
+  })
 })

packages/plugin-katex/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artalkjs/plugin-katex",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "LGPL-3.0",
   "description": "The katex plugin of artalk",
   "repository": {
@@ -14,7 +14,6 @@
   "unpkg": "./dist/artalk-plugin-katex.iife.js",
   "jsdelivr": "./dist/artalk-plugin-katex.iife.js",
   "module": "./dist/artalk-plugin-katex.es.js",
-  "types": "./index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

packages/plugin-katex/vite.config.ts

@@ -18,9 +18,6 @@ export default defineConfig({
       // 确保外部化处理那些你不想打包进库的依赖
       external: ['artalk', 'katex'],
       output: {
-        assetFileNames: assetInfo => {
-          return "[name].[ext]"
-        },
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
           artalk: 'Artalk',