artalk 2.6.3 → 2.7.0

package/src/layer/sidebar-layer.ts

@@ -1,14 +1,10 @@
-import Context from '~/types/context'
+import type { ContextApi, SidebarShowPayload } from '~/types'
 import Component from '@/lib/component'
 import * as Utils from '@/lib/utils'
 import * as Ui from '@/lib/ui'
 import SidebarHTML from './sidebar-layer.html?raw'
 import User from '../lib/user'
-import Layer from './layer'
-
-export interface SidebarShowPayload {
-  view?: 'comments'|'sites'|'pages'|'transfer'
-}
+import type { Layer } from './layer'
 
 export default class SidebarLayer extends Component {
   public layer?: Layer
@@ -17,7 +13,7 @@ export default class SidebarLayer extends Component {
   public $iframeWrap: HTMLElement
   public $iframe?: HTMLIFrameElement
 
-  constructor(ctx: Context) {
+  constructor(ctx: ContextApi) {
     super(ctx)
 
     this.$el = Utils.createElement(SidebarHTML)
@@ -40,72 +36,31 @@ export default class SidebarLayer extends Component {
     this.$el.style.transform = '' // 动画清除，防止二次打开失效
 
     // 获取 Layer
-    if (this.layer == null) {
-      this.layer = new Layer(this.ctx, 'sidebar', this.$el)
-      this.layer.afterHide = () => {
-        // 防止评论框被吞
-        if (this.ctx.conf.editorTravel === true) {
-          this.ctx.editorTravelBack()
-        }
-      }
-    }
-    this.layer.show()
-
-    // viewWrap 滚动条归位
-    // this.$viewWrap.scrollTo(0, 0)
+    this.initLayer()
+    this.layer!.show()
 
     // 管理员身份验证 (若身份失效，弹出验证窗口)
-    ;(async () => {
-      const resp = await this.ctx.getApi().user.loginStatus()
-      if (resp.is_admin && !resp.is_login) {
-        this.layer?.hide()
-        this.firstShow = true
-
-        this.ctx.checkAdmin({
-          onSuccess: () => {
-            setTimeout(() => {
-              this.show(conf)
-            }, 500)
-          },
-          onCancel: () => {}
-        })
-      }
-    })()
+    this.authCheck({
+      onSuccess: () => this.show(conf) // retry show after auth check
+    })
 
     // 第一次加载
     if (this.firstShow) {
       this.$iframeWrap.innerHTML = ''
-      this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
-
-      // 准备 Iframe 参数
-      const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
-        : Utils.getURLBasedOnApi(this.ctx, '/sidebar/')
-
-      const query: any = {
-        pageKey: this.conf.pageKey,
-        site: this.conf.site || '',
-        user: JSON.stringify(User.data),
-        time: +new Date()
-      }
-
-      if (conf.view) query.view = conf.view
-      if (this.conf.darkMode) query.darkMode = '1'
-      if (typeof this.conf.locale === 'string') query.locale = this.conf.locale
-
-      const urlParams = new URLSearchParams(query);
-      this.iframeLoad(`${baseURL}?${urlParams.toString()}`)
-
+      this.$iframe = this.createIframe(conf.view)
       this.$iframeWrap.append(this.$iframe)
       this.firstShow = false
     } else {
+      const $iframe = this.$iframe!
+
       // 夜间模式
-      const isIframeSrcDarkMode = this.$iframe!.src.includes('darkMode=1')
+      const isIframeSrcDarkMode = $iframe.src.includes('darkMode=1')
 
       if (this.conf.darkMode && !isIframeSrcDarkMode)
-        this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
+        this.iframeLoad($iframe, `${this.$iframe!.src}&darkMode=1`)
 
       if (!this.conf.darkMode && isIframeSrcDarkMode)
-        this.iframeLoad(this.$iframe!.src.replace('&darkMode=1', ''))
+        this.iframeLoad($iframe, this.$iframe!.src.replace('&darkMode=1', ''))
     }
 
     // 执行滑动显示动画
@@ -115,7 +70,7 @@ export default class SidebarLayer extends Component {
 
     // 清空 unread
     setTimeout(() => {
-      this.ctx.updateNotifies([])
+      this.ctx.getData().updateUnreads([])
     }, 0)
 
     this.ctx.trigger('sidebar-show')
@@ -131,14 +86,69 @@ export default class SidebarLayer extends Component {
     this.ctx.trigger('sidebar-hide')
   }
 
-  private iframeLoad(src: string) {
-    if (!this.$iframe) return
+  // --------------------------------------------------
+
+  private async authCheck(opts: { onSuccess: () => void }) {
+    const resp = await this.ctx.getApi().user.loginStatus()
+    if (resp.is_admin && !resp.is_login) {
+      this.firstShow = true
+
+      this.ctx.checkAdmin({
+        onSuccess: () => {
+          setTimeout(() => {
+            opts.onSuccess()
+          }, 500)
+        },
+        onCancel: () => {
+          this.hide()
+        }
+      })
+    }
+  }
+
+  private initLayer() {
+    if (this.layer) return
+
+    this.layer = this.ctx.get('layerManager').create('sidebar', this.$el)
+    this.layer.setOnAfterHide(() => {
+      // 防止评论框被吞
+      this.ctx.editorResetState()
+    })
+  }
+
+  private createIframe(view?: string) {
+    const $iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
+
+    // 准备 Iframe 参数
+    const baseURL = (import.meta.env.DEV)  ? 'http://localhost:23367/'
+      : Utils.getURLBasedOnApi({
+        base: this.ctx.conf.server,
+        path: '/sidebar/',
+      })
+
+    const query: any = {
+      pageKey: this.conf.pageKey,
+      site: this.conf.site || '',
+      user: JSON.stringify(User.data),
+      time: +new Date()
+    }
+
+    if (view) query.view = view
+    if (this.conf.darkMode) query.darkMode = '1'
+    if (typeof this.conf.locale === 'string') query.locale = this.conf.locale
+
+    const urlParams = new URLSearchParams(query);
+    this.iframeLoad($iframe, `${baseURL}?${urlParams.toString()}`)
+
+    return $iframe
+  }
 
-    this.$iframe.src = src
+  private iframeLoad($iframe: HTMLIFrameElement, src: string) {
+    $iframe.src = src
 
     // 加载动画
     Ui.showLoading(this.$iframeWrap)
-    this.$iframe.onload = () => {
+    $iframe.onload = () => {
       Ui.hideLoading(this.$iframeWrap)
     }
   }

package/src/layer/wrap.ts

@@ -0,0 +1,77 @@
+import * as Utils from '@/lib/utils'
+import { getScrollbarHelper } from './scrollbar-helper'
+
+export class LayerWrap {
+  private $wrap: HTMLElement
+  private $mask: HTMLElement
+  private allowMaskClose: boolean = true
+  private items: HTMLElement[] = []
+
+  constructor() {
+    this.$wrap = Utils.createElement(
+      `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
+    )
+    this.$mask = this.$wrap.querySelector<HTMLElement>('.atk-layer-mask')!
+  }
+
+  createItem(name: string, el?: HTMLElement) {
+    if (!el) {
+      el = document.createElement('div')
+      el.classList.add('atk-layer-item')
+      el.setAttribute('data-layer-name', name)
+      el.style.display = 'none'
+    }
+    this.$wrap.appendChild(el)
+    this.items.push(el)
+    return el
+  }
+
+  getWrap() {
+    return this.$wrap
+  }
+
+  getMask() {
+    return this.$mask
+  }
+
+  setMaskClose(enabled: boolean) {
+    this.allowMaskClose = enabled
+  }
+
+  show() {
+    this.$wrap.style.display = 'block'
+    this.$mask.style.display = 'block'
+    this.$mask.classList.add('atk-fade-in')
+    this.$mask.onclick = () => {
+      if (this.allowMaskClose) this.hide()
+    }
+    getScrollbarHelper().lock()
+  }
+
+  hide(callback?: () => void) {
+    // if wrap contains more than one item, do not hide entire wrap
+    if (this.items.filter(e => e.isConnected && e.style.display !== 'none').length > 1) {
+      callback && callback()
+      return
+    }
+
+    const onAfterHide = () => {
+      this.$wrap.style.display = 'none'
+      this.$wrap.classList.remove('atk-fade-out')
+
+      callback && callback()
+
+      getScrollbarHelper().unlock()
+
+      this.$wrap.onanimationend = null
+    }
+
+    // perform animation
+    this.$wrap.classList.add('atk-fade-out')
+    if (window.getComputedStyle(this.$wrap)['animation-name'] !== 'none') {
+      this.$wrap.onanimationend = () => onAfterHide()
+    } else {
+      onAfterHide()
+    }
+  }
+}

package/src/lib/component.ts

@@ -1,19 +1,12 @@
-import ArtalkConfig from '~/types/artalk-config'
-import Context from '~/types/context'
-import { I18n } from '../i18n'
+import type { ArtalkConfig, ContextApi } from '~/types'
 
 export default abstract class Component {
   public $el!: HTMLElement
-
-  public ctx: Context
   public readonly conf: ArtalkConfig
 
-  public constructor(ctx: Context) {
-    this.ctx = ctx
+  public constructor(
+    public ctx: ContextApi
+  ) {
     this.conf = ctx.conf
   }
-
-  public $t(key: keyof I18n, args: {[key: string]: string} = {}): string {
-    return this.ctx.$t(key, args)
-  }
 }

package/src/lib/detect.ts

@@ -1,7 +1,7 @@
 const win = (window as any) || {}
 const nav = navigator || {}
 
-function Detect (userAgent?: string) {
+function Detect(userAgent?: string) {
   const u = String(userAgent || nav.userAgent)
   const dest = {
     os: '',

package/src/lib/event-manager.ts

@@ -0,0 +1,47 @@
+export type EventHandler<T> = (payload: T) => void
+export interface Event<PayloadMap, K extends keyof PayloadMap = keyof PayloadMap> extends EventOptions {
+  name: K
+  handler: EventHandler<PayloadMap[K]>
+}
+export interface EventOptions {
+  once?: boolean
+}
+
+export interface EventManagerFuncs<PayloadMap> {
+  on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts?: EventOptions): void
+  off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>): void
+  trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]): void
+}
+
+export default class EventManager<PayloadMap> implements EventManagerFuncs<PayloadMap> {
+  private events: Event<PayloadMap>[] = []
+
+  /**
+   * Add an event listener for a specific event name
+   */
+  public on<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>, opts: EventOptions = {}) {
+    this.events.push({ name, handler: handler as EventHandler<PayloadMap[keyof PayloadMap]>, ...opts })
+  }
+
+  /**
+   * Remove an event listener for a specific event name and handler
+   */
+  public off<K extends keyof PayloadMap>(name: K, handler: EventHandler<PayloadMap[K]>) {
+    if (!handler) return // not allow remove all events with same name
+    this.events = this.events.filter((evt) =>
+      !(evt.name === name && evt.handler === handler))
+  }
+
+  /**
+   * Trigger an event with an optional payload
+   */
+  public trigger<K extends keyof PayloadMap>(name: K, payload?: PayloadMap[K]) {
+    this.events
+      .slice(0) // make a copy, in case listeners are removed while iterating
+      .filter((evt) => evt.name === name && typeof evt.handler === 'function')
+      .forEach((evt) => {
+        if (evt.once) this.off(name, evt.handler)
+        evt.handler(payload!)
+      })
+  }
+}

package/src/lib/highlight.ts

@@ -0,0 +1,5 @@
+import hanabi from 'hanabi'
+
+export function renderCode(code: string) {
+  return hanabi(code)
+}

package/src/lib/marked-renderer.ts

@@ -0,0 +1,32 @@
+import { marked as libMarked } from 'marked'
+import { renderCode } from './highlight'
+
+export function getRenderer() {
+  const renderer = new libMarked.Renderer()
+  renderer.link = markedLinkRenderer(renderer, renderer.link)
+  renderer.code = markedCodeRenderer()
+  return renderer
+}
+
+export const markedLinkRenderer = (renderer: any, orgLinkRenderer: Function) => (href: string, title: string, text: string): string => {
+  const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+  const html = orgLinkRenderer.call(renderer, href, title, text);
+  return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
+}
+
+export const markedCodeRenderer = () => (block: string, lang: string | undefined): string => {
+  // 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 = renderCode(block)
+  }
+
+  return `<pre rel="${realLang}">\n`
+    + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
+    + `</pre>`
+}

package/src/lib/marked.ts

@@ -1,133 +1,72 @@
-import { marked as libMarked } from 'marked'
-import insane from 'insane'
-import hanabi from 'hanabi'
-import Context from '~/types/context'
+import { marked as libMarked, MarkedOptions } from 'marked'
 
-let instance: (typeof libMarked)|undefined
+import { sanitize } from './sanitizer'
+import { renderCode } from './highlight'
+import { getRenderer } from './marked-renderer'
 
+type Replacer = (raw: string) => string
 export type TMarked = typeof libMarked
 
+let instance: (typeof libMarked)|undefined
+let replacers: Replacer[] = []
+
+const markedOptions: MarkedOptions = {
+  pedantic: false,
+  gfm: true,
+  breaks: true,
+  smartLists: true,
+  smartypants: true,
+  xhtml: false,
+  sanitize: false,
+  silent: true,
+}
+
 /** Get Marked instance */
 export function getInstance() {
   return instance
 }
 
+export function setReplacers(arr: Replacer[]) {
+  replacers = arr
+}
+
 /** 初始化 marked */
 export function initMarked() {
   try { if (!libMarked.name) return } catch { return }
 
-  const renderer = new libMarked.Renderer()
-  const orgLinkRenderer = renderer.link
-  renderer.link = (href, title, text) => {
-    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-    const html = orgLinkRenderer.call(renderer as any, href, title, text);
-    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,
-    pedantic: false,
-    gfm: true,
-    breaks: true,
-    smartLists: true,
-    smartypants: true,
-    xhtml: false,
-    sanitize: false,
-    silent: true,
+    renderer: getRenderer(),
+    ...markedOptions
   })
 
-  instance = nMarked
+  instance = libMarked
 }
 
 /** 解析 markdown */
-export default function marked(ctx: Context, src: string): string {
+export default function marked(src: string): string {
   let markedContent = getInstance()?.parse(src)
-  if (!markedContent) {
-    // 无 Markdown 模式简单处理
-    markedContent = src
-      // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-      .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${hanabi(code)}</code></pre>`)
-      // .replace(/`([^`]+?)`/g, '<code>$1</code>')
-      .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
-      .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
-      .replace(/\n/g, '<br>')
+  if (!markedContent) { // 无 Markdown 模式简单处理
+    markedContent = simpleMarked(src)
   }
 
-  // @link https://github.com/markedjs/marked/discussions/1232
-  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  let dest = insane(markedContent, {
-    allowedClasses: {},
-    // @refer CVE-2018-8495
-    // @link https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2018-8495
-    // @link https://leucosite.com/Microsoft-Edge-RCE/
-    // @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
-    allowedSchemes: [
-      'http', 'https', 'mailto',
-      'data' // for support base64 encoded image (安全性有待考虑)
-    ],
-    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', 'rel'],
-      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
-    }
-  })
+  let dest = sanitize(markedContent)
 
   // 内容替换器
-  ctx.markedReplacers.forEach((replacer) => {
-    if (typeof replacer === 'function') dest = replacer(dest)
+  replacers.forEach((replacer) => {
+    if (typeof replacer === 'function')
+      dest = replacer(dest)
   })
 
   return dest
 }
+
+function simpleMarked(src: string) {
+  return src
+    // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${renderCode(code)}</code></pre>`)
+    // .replace(/`([^`]+?)`/g, '<code>$1</code>')
+    .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
+    .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
+    .replace(/\n/g, '<br>')
+}

package/src/lib/sanitizer.ts

@@ -0,0 +1,57 @@
+import insane from 'insane'
+
+const insaneOptions = {
+  allowedClasses: {},
+  // @refer CVE-2018-8495
+  // @link https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2018-8495
+  // @link https://leucosite.com/Microsoft-Edge-RCE/
+  // @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
+  allowedSchemes: [
+    'http', 'https', 'mailto',
+    'data' // for support base64 encoded image (安全性有待考虑)
+  ],
+  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', 'rel'],
+    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
+  }
+}
+
+export function sanitize(content: string): string {
+  // @link https://github.com/markedjs/marked/discussions/1232
+  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
+  return insane(content, insaneOptions)
+}

package/src/lib/ui.ts

@@ -1,3 +1,4 @@
+import type { NotifyLevel } from '~/types'
 import * as Utils from './utils'
 
 /** 显示加载 */
@@ -53,29 +54,35 @@ export function isVisible(el: HTMLElement, viewport: HTMLElement = document.docu
 }
 
 /** 滚动到元素中心 */
-export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true) {
-  const top =
-    Utils.getOffset(elem).top +
-    Utils.getHeight(elem) / 2 -
-    document.documentElement.clientHeight / 2
-
-  if (enableAnim) {
-    window.scroll({
-      top: top > 0 ? top : 0,
-      left: 0,
-      // behavior: 'smooth',
-    })
+export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, relativeTo?: HTMLElement) {
+  let top: number
+
+  if (relativeTo) {
+    const containerRect = relativeTo.getBoundingClientRect()
+    const elementRect = elem.getBoundingClientRect()
+    top = elementRect.top - containerRect.top + relativeTo.scrollTop
+    top += Utils.getHeight(relativeTo) / 2 - Utils.getHeight(elem) / 2
   } else {
-    // 无动画
-    window.scroll(0, top > 0 ? top : 0)
+    const rect = elem.getBoundingClientRect()
+    const elemTop = rect.top + window.scrollY
+    top = elemTop - (window.innerHeight / 2 - rect.height / 2)
   }
+
+  const scrollOptions: ScrollToOptions = {
+    top, left: 0,
+    // behavior: enableAnim ? 'smooth' : 'instant',
+    behavior: 'instant'
+  }
+
+  if (relativeTo) relativeTo.scroll(scrollOptions)
+  else window.scroll(scrollOptions)
 }
 
 /** 显示消息 */
 export function showNotify(
   wrapElem: HTMLElement,
   msg: string,
-  type: 's' | 'e' | 'w' | 'i',
+  type: NotifyLevel,
 ) {
   const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
   const timeout = 3000 // 持续显示时间 ms