artalk 2.8.1 → 2.8.3

package/dist/ArtalkLite.mjs

@@ -468,6 +468,21 @@ let Api$1 = class Api extends HttpClient {
         path: `/conf`,
         method: "GET",
         format: "json"
+      }, params)),
+      /**
+       * @description Get Domain Info
+       *
+       * @tags System
+       * @name GetDomain
+       * @summary Get Domain Info
+       * @request GET:/conf/domain
+       * @response `200` `HandlerResponseConfDomain` OK
+       */
+      getDomain: (query, params = {}) => this.request(__spreadValues({
+        path: `/conf/domain`,
+        method: "GET",
+        query,
+        format: "json"
       }, params))
     });
     __publicField(this, "notifies", {
@@ -1036,7 +1051,7 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Get user info to prepare for login or check current user status
        *
-       * @tags Account
+       * @tags Auth
        * @name GetUser
        * @summary Get User Info
        * @request GET:/user
@@ -1057,23 +1072,23 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Login user by name or email
        *
-       * @tags Account
+       * @tags Auth
        * @name Login
        * @summary Get Access Token
        * @request POST:/user/access_token
        * @response `200` `HandlerResponseUserLogin` OK
        * @response `400` `(HandlerMap & {
-          " data"?: {
+          data?: {
           need_name_select?: (string)[],
       
       },
           msg?: string,
       
       })` Multiple users with the same email address are matched
-       * @response `403` `(HandlerMap & {
+       * @response `401` `(HandlerMap & {
           msg?: string,
       
-      })` Forbidden
+      })` Unauthorized
        * @response `500` `(HandlerMap & {
           msg?: string,
       
@@ -1089,7 +1104,7 @@ let Api$1 = class Api extends HttpClient {
       /**
        * @description Get user login status by header Authorization
        *
-       * @tags Account
+       * @tags Auth
        * @name GetUserStatus
        * @summary Get Login Status
        * @request GET:/user/status
@@ -1701,16 +1716,16 @@ const Fetch$1 = (opts, input, init2) => __async(void 0, null, function* () {
   if (!resp.ok) {
     const json = (yield resp.json().catch(() => {
     })) || {};
-    if (json.need_captcha) {
-      opts.onNeedCheckCaptcha && (yield opts.onNeedCheckCaptcha({
-        data: { imgData: json.img_data, iframe: json.iframe }
-      }));
-      return Fetch$1(opts, input, init2);
-    }
-    if (json.need_login) {
-      opts.onNeedCheckAdmin && (yield opts.onNeedCheckAdmin({}));
+    let retry = false;
+    opts.handlers && (yield opts.handlers.get().reduce((promise, item) => __async(void 0, null, function* () {
+      yield promise;
+      if (json[item.action] === true) {
+        yield item.handler(json);
+        retry = true;
+      }
+    }), Promise.resolve()));
+    if (retry)
       return Fetch$1(opts, input, init2);
-    }
     throw createError(resp.status, json);
   }
   return resp;
@@ -1731,6 +1746,15 @@ function createError(code, data) {
   console.error(err);
   return err;
 }
+function createApiHandlers() {
+  const handlers = [];
+  return {
+    add: (action, handler) => {
+      handlers.push({ action, handler });
+    },
+    get: () => handlers
+  };
+}
 class Api2 extends Api$1 {
   constructor(opts) {
     super({
@@ -2472,7 +2496,7 @@ const en = {
   link: "Website",
   emoticon: "Emoji",
   preview: "Preview",
-  image: "Image",
+  uploadImage: "Upload Image",
   uploadFail: "Upload Failed",
   commentFail: "Failed to comment",
   restoredMsg: "Content has been restored",
@@ -2524,6 +2548,7 @@ const en = {
   /* Sidebar */
   msgCenter: "Messages",
   ctrlCenter: "Admin",
+  emailVerified: "Email has been verified",
   /* General */
   frontend: "Frontend",
   backend: "Backend",
@@ -2545,14 +2570,14 @@ const zhCN = {
   /* Editor */
   placeholder: "键入内容...",
   noComment: "「此时无声胜有声」",
-  send: "发送评论",
-  save: "保存评论",
+  send: "发送",
+  save: "保存",
   nick: "昵称",
   email: "邮箱",
   link: "网址",
   emoticon: "表情",
   preview: "预览",
-  image: "图片",
+  uploadImage: "上传图片",
   uploadFail: "上传失败",
   commentFail: "评论失败",
   restoredMsg: "内容已自动恢复",
@@ -2604,6 +2629,7 @@ const zhCN = {
   /* Sidebar */
   msgCenter: "通知中心",
   ctrlCenter: "控制中心",
+  emailVerified: "邮箱已验证",
   /* General */
   frontend: "前端",
   backend: "后端",
@@ -2954,21 +2980,15 @@ function convertApiOptions(conf, ctx) {
       name: ctx == null ? void 0 : ctx.get("user").getData().nick,
       email: ctx == null ? void 0 : ctx.get("user").getData().email
     } : void 0,
-    onNeedCheckAdmin: (payload) => {
-      if (!ctx)
-        throw new Error("`ctx` is required when `onNeedCheckAdmin` is called.");
-      return ctx.checkAdmin({});
-    },
-    onNeedCheckCaptcha: (payload) => {
-      if (!ctx)
-        throw new Error("`ctx` is required when `onNeedCheckCaptcha` is called.");
-      return ctx.checkCaptcha({
-        imgData: payload.data.imgData,
-        iframe: payload.data.iframe
-      });
-    }
+    handlers: ctx == null ? void 0 : ctx.getApiHandlers()
   };
 }
+function createNewApiHandlers(ctx) {
+  const h = createApiHandlers();
+  h.add("need_captcha", (res) => ctx.checkCaptcha(res));
+  h.add("need_login", () => ctx.checkAdmin({}));
+  return h;
+}
 function watchConf(ctx, keys, effect) {
   const deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
   const val = () => {
@@ -3000,6 +3020,7 @@ class Context {
     /* Event Manager */
     __publicField(this, "events", new EventManager());
     __publicField(this, "mounted", false);
+    __publicField(this, "apiHandlers", null);
     __publicField(this, "getCommentList", this.getCommentNodes);
     __publicField(this, "getCommentDataList", this.getComments);
     this.conf = conf;
@@ -3020,6 +3041,11 @@ class Context {
   getApi() {
     return new Api2(convertApiOptions(this.conf, this));
   }
+  getApiHandlers() {
+    if (!this.apiHandlers)
+      this.apiHandlers = createNewApiHandlers(this);
+    return this.apiHandlers;
+  }
   getData() {
     return this.data;
   }
@@ -3412,7 +3438,7 @@ class CheckerLauncher {
   constructor(opts) {
     __publicField(this, "checkCaptcha", wrapPromise((p) => {
       this.fire(CaptchaChecker, p, (ctx) => {
-        ctx.set("img_data", p.imgData);
+        ctx.set("img_data", p.img_data);
         ctx.set("iframe", p.iframe);
       });
     }));
@@ -3490,7 +3516,7 @@ class CheckerLauncher {
         if (payload.onSuccess)
           payload.onSuccess();
       }).catch((err) => {
-        btnTextSet(String(err.msg || String(err)));
+        btnTextSet(String(err.message || String(err)));
         if (checker.onError)
           checker.onError(checkerCtx, err, inputVal, formEl);
         const tf = setTimeout(() => btnTextRestore(), 3e3);
@@ -3528,7 +3554,7 @@ class Component {
     return this.$el;
   }
 }
-const EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-header">\n    <input name="nick" class="atk-nick" type="text" required="required">\n    <input name="email" class="atk-email" type="email" required="required">\n    <input name="link" class="atk-link" type="url">\n  </div>\n  <div class="atk-textarea-wrap">\n    <textarea class="atk-textarea"></textarea>\n  </div>\n  <div class="atk-plug-panel-wrap" style="display: none;"></div>\n  <div class="atk-bottom">\n    <div class="atk-item atk-plug-btn-wrap"></div>\n    <div class="atk-item">\n      <button type="button" class="atk-send-btn"></button>\n    </div>\n  </div>\n  <div class="atk-notify-wrap"></div>\n</div>\n';
+const EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-header">\n    <input name="nick" class="atk-nick" type="text" required="required">\n    <input name="email" class="atk-email" type="email" required="required">\n    <input name="link" class="atk-link" type="url">\n  </div>\n  <div class="atk-textarea-wrap">\n    <textarea class="atk-textarea"></textarea>\n  </div>\n  <div class="atk-plug-panel-wrap" style="display: none;"></div>\n  <div class="atk-bottom">\n    <div class="atk-item atk-bottom-left">\n      <span class="atk-state-wrap"></span>\n      <span class="atk-plug-btn-wrap"></span>\n    </div>\n    <div class="atk-item">\n      <button type="button" class="atk-send-btn"></button>\n    </div>\n  </div>\n  <div class="atk-notify-wrap"></div>\n</div>\n';
 const Sel = {
   $header: ".atk-header",
   $nick: '.atk-header [name="nick"]',
@@ -3539,6 +3565,8 @@ const Sel = {
   $bottom: ".atk-bottom",
   $submitBtn: ".atk-send-btn",
   $notifyWrap: ".atk-notify-wrap",
+  $bottomLeft: ".atk-bottom-left",
+  $stateWrap: ".atk-state-wrap",
   $plugBtnWrap: ".atk-plug-btn-wrap",
   $plugPanelWrap: ".atk-plug-panel-wrap"
 };
@@ -3736,10 +3764,15 @@ class Editor extends Component {
     hideLoading(this.ui.$el);
   }
   submit() {
-    this.ctx.trigger("editor-submit");
+    const next = () => this.ctx.trigger("editor-submit");
+    if (this.ctx.conf.beforeSubmit) {
+      this.ctx.conf.beforeSubmit(this, next);
+    } else {
+      next();
+    }
   }
 }
-const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
+const SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close-slim"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
 class SidebarLayer extends Component {
   constructor(ctx) {
     super(ctx);
@@ -4294,6 +4327,9 @@ function renderVerifyBadge(ctx) {
     $badge.innerText = badgeText.replace("管理员", t("admin"));
     $badge.style.backgroundColor = badgeColor || "";
     ctx.$headerBadgeWrap.append($badge);
+  } else if (ctx.data.is_verified) {
+    const $verifiedBadge = createElement(`<span class="atk-verified-icon" title="${t("emailVerified")}"></span>`);
+    ctx.$headerBadgeWrap.append($verifiedBadge);
   }
   if (ctx.data.is_pinned) {
     const $pinnedBadge = createElement(`<span class="atk-pinned-badge">${t("pin")}</span>`);
@@ -5548,18 +5584,8 @@ class LayerWrap {
     if (this.items.map((l) => l.getEl()).filter((e) => e !== $el && e.isConnected && e.style.display !== "none").length > 0) {
       return;
     }
-    const onHide = () => {
-      this.$wrap.style.display = "none";
-      this.$wrap.classList.remove("atk-fade-out");
-      getScrollbarHelper().unlock();
-      this.$wrap.onanimationend = null;
-    };
-    this.$wrap.classList.add("atk-fade-out");
-    if (window.getComputedStyle(this.$wrap)["animation-name"] !== "none") {
-      this.$wrap.onanimationend = () => onHide();
-    } else {
-      onHide();
-    }
+    this.$wrap.style.display = "none";
+    getScrollbarHelper().unlock();
   }
 }
 class LayerManager {
@@ -5678,6 +5704,70 @@ const services = {
     return void 0;
   }
 };
+const PvCountWidget = (ctx) => {
+  ctx.watchConf([
+    "site",
+    "pageKey",
+    "pageTitle",
+    "countEl",
+    "pvEl"
+  ], (conf) => {
+    initCountWidget({
+      getApi: () => ctx.getApi(),
+      siteName: conf.site,
+      pageKey: conf.pageKey,
+      pageTitle: conf.pageTitle,
+      countEl: conf.countEl,
+      pvEl: conf.pvEl,
+      pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
+    });
+  });
+};
+function initCountWidget(opt) {
+  return __async(this, null, function* () {
+    if (opt.countEl && document.querySelector(opt.countEl)) {
+      refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
+    }
+    const initialData = opt.pvAdd && opt.pageKey ? {
+      [opt.pageKey]: (yield opt.getApi().pages.logPv({
+        page_key: opt.pageKey,
+        page_title: opt.pageTitle,
+        site_name: opt.siteName
+      })).data.pv
+      // pv+1 and get pv count
+    } : void 0;
+    if (opt.pvEl && document.querySelector(opt.pvEl)) {
+      refreshStatCount(opt, {
+        query: "page_pv",
+        numEl: opt.pvEl,
+        data: initialData
+      });
+    }
+  });
+}
+function refreshStatCount(opt, args) {
+  return __async(this, null, function* () {
+    let data = args.data || {};
+    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => k && typeof data[k] !== "number");
+    queryPageKeys = [...new Set(queryPageKeys)];
+    if (queryPageKeys.length > 0) {
+      const res = (yield opt.getApi().stats.getStats(args.query, {
+        page_keys: queryPageKeys.join(","),
+        site_name: opt.siteName
+      })).data.data;
+      data = __spreadValues(__spreadValues({}, data), res);
+    }
+    const defaultCount = opt.pageKey ? data[opt.pageKey] : 0;
+    applyCountData(args.numEl, data, defaultCount);
+  });
+}
+function applyCountData(selector, data, defaultCount) {
+  document.querySelectorAll(selector).forEach((el) => {
+    const pageKey = el.getAttribute("data-page-key");
+    const count = Number(pageKey ? data[pageKey] : defaultCount);
+    el.innerHTML = `${count}`;
+  });
+}
 function showErrorDialog(opts) {
   const errEl = createElement(`<span><span class="error-message"></span><br/><br/></span>`);
   errEl.querySelector(".error-message").innerText = `${t("listLoadFailMsg")}
@@ -5694,58 +5784,6 @@ ${opts.errMsg}`;
   }
   setError(opts.$err, errEl);
 }
-const ConfRemoter = (ctx) => {
-  ctx.on("created", () => {
-    if (ctx.conf.immediateFetch !== false)
-      ctx.trigger("conf-fetch");
-  });
-  ctx.on("conf-fetch", () => {
-    loadConf(ctx);
-  });
-};
-function loadConf(ctx) {
-  ctx.getApi().conf.conf().then((res) => {
-    var _a;
-    let conf = {
-      apiVersion: (_a = res.data.version) == null ? void 0 : _a.version
-      // version info
-    };
-    if (ctx.conf.useBackendConf) {
-      if (!res.data.frontend_conf)
-        throw new Error("The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled");
-      conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(res.data.frontend_conf));
-    }
-    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
-    ctx.updateConf(conf);
-  }).catch((err) => {
-    var _a;
-    ctx.updateConf({});
-    let sidebarOpenView = "";
-    if ((_a = err.data) == null ? void 0 : _a.err_no_site) {
-      const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` };
-      sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`;
-    }
-    showErrorDialog({
-      $err: ctx.get("list").$el,
-      errMsg: err.msg || String(err),
-      errData: err.data,
-      retryFn: () => loadConf(ctx),
-      onOpenSidebar: ctx.get("user").getData().isAdmin ? () => ctx.showSidebar({
-        view: sidebarOpenView
-      }) : void 0
-      // only show open sidebar button when user is admin
-    });
-    console.error(err);
-    throw err;
-  }).then(() => {
-    ctx.trigger("mounted");
-  }).then(() => {
-    if (ctx.conf.remoteConfModifier)
-      return;
-    ctx.fetch({ offset: 0 });
-  }).catch(() => {
-  });
-}
 const Markdown = (ctx) => {
   initMarked();
   ctx.on("updated", (conf) => {
@@ -5901,7 +5939,7 @@ class Submit extends EditorPlug {
           this.defaultPreset.postSubmitAdd(nComment);
       } catch (err) {
         console.error(err);
-        this.kit.useEditor().showNotify(`${t("commentFail")}: ${err.msg || String(err)}`, "e");
+        this.kit.useEditor().showNotify(`${t("commentFail")}: ${err.message || String(err)}`, "e");
         return;
       } finally {
         this.kit.useEditor().hideLoading();
@@ -5952,15 +5990,16 @@ class StateReply extends EditorPlug {
   }
   setReply(commentData) {
     const ui = this.kit.useUI();
-    if (!ui.$sendReply) {
-      ui.$sendReply = createElement(
-        `<div class="atk-send-reply">${t("reply")} <span class="atk-text"></span><span class="atk-cancel">×</span></div>`
+    if (!ui.$sendReplyBtn) {
+      const $btn = createElement(
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("reply")} <span class="atk-text"></span></span><span class="atk-cancel atk-icon-close atk-icon"></span></span>`
       );
-      ui.$sendReply.querySelector(".atk-text").innerText = `@${commentData.nick}`;
-      ui.$sendReply.addEventListener("click", () => {
+      $btn.querySelector(".atk-text").innerText = `@${commentData.nick}`;
+      $btn.addEventListener("click", () => {
         this.kit.useEditor().resetState();
       });
-      ui.$textareaWrap.append(ui.$sendReply);
+      ui.$stateWrap.append($btn);
+      ui.$sendReplyBtn = $btn;
     }
     this.comment = commentData;
     ui.$textarea.focus();
@@ -5969,9 +6008,9 @@ class StateReply extends EditorPlug {
     if (!this.comment)
       return;
     const ui = this.kit.useUI();
-    if (ui.$sendReply) {
-      ui.$sendReply.remove();
-      ui.$sendReply = void 0;
+    if (ui.$sendReplyBtn) {
+      ui.$sendReplyBtn.remove();
+      ui.$sendReplyBtn = void 0;
     }
     this.comment = void 0;
   }
@@ -6018,12 +6057,12 @@ class StateEdit extends EditorPlug {
     const ui = this.kit.useUI();
     if (!ui.$editCancelBtn) {
       const $btn = createElement(
-        `<div class="atk-send-reply">${t("editCancel")} <span class="atk-cancel">×</span></div>`
+        `<span class="atk-state-btn"><span class="atk-text-wrap">${t("editCancel")}</span><span class="atk-cancel atk-icon-close atk-icon"></span></span>`
       );
       $btn.onclick = () => {
         this.kit.useEditor().resetState();
       };
-      ui.$textareaWrap.append($btn);
+      ui.$stateWrap.append($btn);
       ui.$editCancelBtn = $btn;
     }
     this.comment = comment;
@@ -6220,7 +6259,7 @@ class Emoticons extends EditorPlug {
     __publicField(this, "isImgLoaded", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-emoticons"></div>`);
-      this.useBtn(t("emoticon"));
+      this.useBtn(`<i aria-label="${t("emoticon")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m4.26829 5.29294c0-.94317.45893-1.7074 1.02439-1.7074.56547 0 1.02439.76423 1.02439 1.7074s-.45892 1.7074-1.02439 1.7074c-.56546 0-1.02439-.76423-1.02439-1.7074zm4.43903 1.7074c.56546 0 1.02439-.76423 1.02439-1.7074s-.45893-1.7074-1.02439-1.7074c-.56547 0-1.02439.76423-1.02439 1.7074s.45892 1.7074 1.02439 1.7074zm-1.70732 2.73184c-1.51883 0-2.06312-1.52095-2.08361-1.58173l-1.29551.43231c.03414.10244.868 2.51604 3.3798 2.51604 2.51181 0 3.34502-2.41291 3.37982-2.51604l-1.29484-.43573c-.02254.06488-.56683 1.58583-2.08498 1.58583zm7-2.73252c0 3.86004-3.1401 7.00034-7 7.00034s-7-3.1396-7-6.99966c0-3.86009 3.1401-7.00034 7-7.00034s7 3.14025 7 7.00034zm-1.3659 0c0-3.10679-2.5275-5.63442-5.6341-5.63442-3.10663 0-5.63415 2.52832-5.63415 5.6351 0 3.10676 2.52752 5.63446 5.63415 5.63446 3.1066 0 5.6341-2.5277 5.6341-5.63446z"/></svg></i>`);
     });
     this.kit.useUnmounted(() => {
     });
@@ -6471,7 +6510,7 @@ class Upload extends EditorPlug {
     this.$imgUploadInput.type = "file";
     this.$imgUploadInput.style.display = "none";
     this.$imgUploadInput.accept = AllowImgExts.map((o) => `.${o}`).join(",");
-    const $btn = this.useBtn(`${t("image")}`);
+    const $btn = this.useBtn(`<i aria-label="${t("uploadImage")}"><svg fill="currentColor" aria-hidden="true" height="14" viewBox="0 0 14 14" width="14"><path d="m0 1.94444c0-1.074107.870333-1.94444 1.94444-1.94444h10.11116c1.0741 0 1.9444.870333 1.9444 1.94444v10.11116c0 1.0741-.8703 1.9444-1.9444 1.9444h-10.11116c-1.074107 0-1.94444-.8703-1.94444-1.9444zm1.94444-.38888c-.21466 0-.38888.17422-.38888.38888v7.06689l2.33333-2.33333 2.33333 2.33333 3.88888-3.88889 2.3333 2.33334v-5.51134c0-.21466-.1742-.38888-.3888-.38888zm10.49996 8.09977-2.3333-2.33333-3.88888 3.8889-2.33333-2.33334-2.33333 2.33334v.8447c0 .2146.17422.3888.38888.3888h10.11116c.2146 0 .3888-.1742.3888-.3888zm-7.1944-6.54422c-.75133 0-1.36111.60978-1.36111 1.36111 0 .75134.60978 1.36111 1.36111 1.36111s1.36111-.60977 1.36111-1.36111c0-.75133-.60978-1.36111-1.36111-1.36111z"/></svg></i>`);
     $btn.after(this.$imgUploadInput);
     $btn.onclick = () => {
       const $input = this.$imgUploadInput;
@@ -6553,7 +6592,7 @@ class Upload extends EditorPlug {
         }
       } catch (err) {
         console.error(err);
-        this.kit.useEditor().showNotify(`${t("uploadFail")}: ${err.msg}`, "e");
+        this.kit.useEditor().showNotify(`${t("uploadFail")}: ${err.message}`, "e");
       }
       if (!!resp && resp.public_url) {
         let imgURL = resp.public_url;
@@ -6575,10 +6614,7 @@ class Preview extends EditorPlug {
     __publicField(this, "isPlugPanelShow", false);
     this.kit.useMounted(() => {
       this.usePanel(`<div class="atk-editor-plug-preview"></div>`);
-      let btnText = t("preview");
-      if (getInstance())
-        btnText += ` <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`;
-      this.useBtn(btnText);
+      this.useBtn(`<i aria-label="${t("preview")}"><svg fill="currentColor" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`);
     });
     this.kit.useUnmounted(() => {
     });
@@ -6719,9 +6755,6 @@ class PlugManager {
     this.editor.getUI().$plugPanelWrap.innerHTML = "";
     this.editor.getUI().$plugPanelWrap.style.display = "none";
     this.editor.getUI().$plugBtnWrap.innerHTML = "";
-    this.editor.getUI().$el.addEventListener("click", (e) => {
-      e.stopPropagation();
-    });
     this.plugs.forEach((plug) => this.loadPluginItem(plug));
   }
   /** Load the plug btn and plug panel on editor ui */
@@ -6817,7 +6850,7 @@ function adminPageEditSave(ctx, page) {
   ctx.getApi().pages.updatePage(page.id, page).then(({ data }) => {
     ctx.getData().updatePage(data);
   }).catch((err) => {
-    ctx.editorShowNotify(`${t("editFail")}: ${err.msg || String(err)}`, "e");
+    ctx.editorShowNotify(`${t("editFail")}: ${err.message || String(err)}`, "e");
   }).finally(() => {
     ctx.editorHideLoading();
   });
@@ -6963,7 +6996,7 @@ const GotoFocus = (ctx) => {
     comment.focus();
   }));
 };
-const version = "2.8.1";
+const version = "2.8.3";
 const Copyright = (ctx) => {
   ctx.on("mounted", () => {
     const list = ctx.get("list");
@@ -7247,70 +7280,6 @@ const Notifies = (ctx) => {
     });
   });
 };
-const PvCountWidget = (ctx) => {
-  ctx.watchConf([
-    "site",
-    "pageKey",
-    "pageTitle",
-    "countEl",
-    "pvEl"
-  ], (conf) => {
-    initCountWidget({
-      getApi: () => ctx.getApi(),
-      siteName: conf.site,
-      pageKey: conf.pageKey,
-      pageTitle: conf.pageTitle,
-      countEl: conf.countEl,
-      pvEl: conf.pvEl,
-      pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
-    });
-  });
-};
-function initCountWidget(opt) {
-  return __async(this, null, function* () {
-    if (opt.countEl && document.querySelector(opt.countEl)) {
-      refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
-    }
-    const initialData = opt.pvAdd && opt.pageKey ? {
-      [opt.pageKey]: (yield opt.getApi().pages.logPv({
-        page_key: opt.pageKey,
-        page_title: opt.pageTitle,
-        site_name: opt.siteName
-      })).data.pv
-      // pv+1 and get pv count
-    } : void 0;
-    if (opt.pvEl && document.querySelector(opt.pvEl)) {
-      refreshStatCount(opt, {
-        query: "page_pv",
-        numEl: opt.pvEl,
-        data: initialData
-      });
-    }
-  });
-}
-function refreshStatCount(opt, args) {
-  return __async(this, null, function* () {
-    let data = args.data || {};
-    let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => k && typeof data[k] !== "number");
-    queryPageKeys = [...new Set(queryPageKeys)];
-    if (queryPageKeys.length > 0) {
-      const res = (yield opt.getApi().stats.getStats(args.query, {
-        page_keys: queryPageKeys.join(","),
-        site_name: opt.siteName
-      })).data.data;
-      data = __spreadValues(__spreadValues({}, data), res);
-    }
-    const defaultCount = opt.pageKey ? data[opt.pageKey] : 0;
-    applyCountData(args.numEl, data, defaultCount);
-  });
-}
-function applyCountData(selector, data, defaultCount) {
-  document.querySelectorAll(selector).forEach((el) => {
-    const pageKey = el.getAttribute("data-page-key");
-    const count = Number(pageKey ? data[pageKey] : defaultCount);
-    el.innerHTML = `${count}`;
-  });
-}
 let IgnoreVersionCheck = false;
 const VersionCheck = (ctx) => {
   ctx.watchConf(["apiVersion", "versionCheck"], (conf) => {
@@ -7404,7 +7373,6 @@ const DarkMode = (ctx) => {
   });
 };
 const DefaultPlugins = [
-  ConfRemoter,
   Markdown,
   EditorKit,
   AdminOnlyElem,
@@ -7415,23 +7383,98 @@ const DefaultPlugins = [
   DarkMode
 ];
 const GlobalPlugins = [...DefaultPlugins];
+function load(ctx) {
+  return __async(this, null, function* () {
+    var _a;
+    const loadedPlugins = [];
+    const loadPlugins = (plugins) => {
+      plugins.forEach((plugin) => {
+        if (typeof plugin === "function" && !loadedPlugins.includes(plugin)) {
+          plugin(ctx);
+          loadedPlugins.push(plugin);
+        }
+      });
+    };
+    loadPlugins(GlobalPlugins);
+    const { data } = yield ctx.getApi().conf.conf().catch((err) => {
+      onLoadErr(ctx, err);
+      throw err;
+    });
+    let conf = {
+      apiVersion: (_a = data.version) == null ? void 0 : _a.version
+      // version info
+    };
+    if (ctx.conf.useBackendConf) {
+      if (!data.frontend_conf)
+        throw new Error("The remote backend does not respond to the frontend conf, but `useBackendConf` conf is enabled");
+      conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(data.frontend_conf));
+    }
+    ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
+    conf.pluginURLs && (yield loadNetworkPlugins(conf.pluginURLs, ctx.conf.server).then((plugins) => {
+      loadPlugins(plugins);
+    }).catch((err) => {
+      console.error("Failed to load plugin", err);
+    }));
+    ctx.trigger("created");
+    ctx.updateConf(conf);
+    ctx.trigger("mounted");
+    if (!ctx.conf.remoteConfModifier) {
+      ctx.fetch({ offset: 0 });
+    }
+  });
+}
+function loadNetworkPlugins(scripts, apiBase) {
+  return __async(this, null, function* () {
+    if (!scripts || !Array.isArray(scripts))
+      return [];
+    const tasks = [];
+    scripts.forEach((url) => {
+      if (!/^(http|https):\/\//.test(url))
+        url = `${apiBase.replace(/\/$/, "")}/${url.replace(/^\//, "")}`;
+      tasks.push(new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${url}"]`)) {
+          resolve();
+          return;
+        }
+        const script = document.createElement("script");
+        script.src = url;
+        document.head.appendChild(script);
+        script.onload = () => resolve();
+        script.onerror = (err) => reject(err);
+      }));
+    });
+    yield Promise.all(tasks);
+    return Object.values(window.ArtalkPlugins || {});
+  });
+}
+function onLoadErr(ctx, err) {
+  var _a;
+  let sidebarOpenView = "";
+  if ((_a = err.data) == null ? void 0 : _a.err_no_site) {
+    const viewLoadParam = { create_name: ctx.conf.site, create_urls: `${window.location.protocol}//${window.location.host}` };
+    sidebarOpenView = `sites|${JSON.stringify(viewLoadParam)}`;
+  }
+  showErrorDialog({
+    $err: ctx.get("list").$el,
+    errMsg: err.msg || String(err),
+    errData: err.data,
+    retryFn: () => load(ctx),
+    onOpenSidebar: ctx.get("user").getData().isAdmin ? () => ctx.showSidebar({
+      view: sidebarOpenView
+    }) : void 0
+    // only show open sidebar button when user is admin
+  });
+}
 class Artalk {
   constructor(conf) {
     __publicField(this, "ctx");
-    /** Plugins */
-    __publicField(this, "plugins", [...GlobalPlugins]);
     const handledConf = handelCustomConf(conf, true);
     this.ctx = new Context(handledConf);
     Object.entries(services).forEach(([name, initService]) => {
       const obj = initService(this.ctx);
-      if (obj)
-        this.ctx.inject(name, obj);
-    });
-    this.plugins.forEach((plugin) => {
-      if (typeof plugin === "function")
-        plugin(this.ctx);
+      obj && this.ctx.inject(name, obj);
     });
-    this.ctx.trigger("created");
+    load(this.ctx);
   }
   /** Get the config of Artalk */
   getConf() {