artalk 2.7.3 → 2.8.0

package/dist/ArtalkLite.mjs

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -42,174 +54,1217 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { marked as marked$1 } from "marked";
-function createElement(htmlStr = "") {
-  const div = document.createElement("div");
-  div.innerHTML = htmlStr.trim();
-  return div.firstElementChild || div;
-}
-function getHeight(el) {
-  return parseFloat(getComputedStyle(el, null).height.replace("px", ""));
-}
-function htmlEncode(str) {
-  const temp = document.createElement("div");
-  temp.innerText = str;
-  const output = temp.innerHTML;
-  return output;
-}
-function getQueryParam(name) {
-  const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-  return match && decodeURIComponent(match[1].replace(/\+/g, " "));
-}
-function getOffset(el, relativeTo) {
-  const getOffsetRecursive = (element) => {
-    const rect = element.getBoundingClientRect();
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    return {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft
-    };
-  };
-  const elOffset = getOffsetRecursive(el);
-  if (!relativeTo)
-    return elOffset;
-  const relativeToOffset = getOffsetRecursive(relativeTo);
-  return {
-    top: elOffset.top - relativeToOffset.top,
-    left: elOffset.left - relativeToOffset.left
-  };
-}
-function padWithZeros(vNumber, width) {
-  let numAsString = vNumber.toString();
-  while (numAsString.length < width) {
-    numAsString = `0${numAsString}`;
-  }
-  return numAsString;
-}
-function dateFormat(date) {
-  const vDay = padWithZeros(date.getDate(), 2);
-  const vMonth = padWithZeros(date.getMonth() + 1, 2);
-  const vYear = padWithZeros(date.getFullYear(), 2);
-  return `${vYear}-${vMonth}-${vDay}`;
-}
-function timeAgo(date, $t = (n) => n) {
-  try {
-    const oldTime = date.getTime();
-    const currTime = (/* @__PURE__ */ new Date()).getTime();
-    const diffValue = currTime - oldTime;
-    const days = Math.floor(diffValue / (24 * 3600 * 1e3));
-    if (days === 0) {
-      const leave1 = diffValue % (24 * 3600 * 1e3);
-      const hours = Math.floor(leave1 / (3600 * 1e3));
-      if (hours === 0) {
-        const leave2 = leave1 % (3600 * 1e3);
-        const minutes = Math.floor(leave2 / (60 * 1e3));
-        if (minutes === 0) {
-          const leave3 = leave2 % (60 * 1e3);
-          const seconds = Math.round(leave3 / 1e3);
-          if (seconds < 10)
-            return $t("now");
-          return `${seconds} ${$t("seconds")}`;
+class HttpClient {
+  constructor(apiConfig = {}) {
+    __publicField(this, "baseUrl", "/api/v2");
+    __publicField(this, "securityData", null);
+    __publicField(this, "securityWorker");
+    __publicField(this, "abortControllers", /* @__PURE__ */ new Map());
+    __publicField(this, "customFetch", (...fetchParams) => fetch(...fetchParams));
+    __publicField(this, "baseApiParams", {
+      credentials: "same-origin",
+      headers: {},
+      redirect: "follow",
+      referrerPolicy: "no-referrer"
+    });
+    __publicField(this, "setSecurityData", (data) => {
+      this.securityData = data;
+    });
+    __publicField(this, "contentFormatters", {
+      [
+        "application/json"
+        /* Json */
+      ]: (input) => input !== null && (typeof input === "object" || typeof input === "string") ? JSON.stringify(input) : input,
+      [
+        "text/plain"
+        /* Text */
+      ]: (input) => input !== null && typeof input !== "string" ? JSON.stringify(input) : input,
+      [
+        "multipart/form-data"
+        /* FormData */
+      ]: (input) => Object.keys(input || {}).reduce((formData, key) => {
+        const property = input[key];
+        formData.append(
+          key,
+          property instanceof Blob ? property : typeof property === "object" && property !== null ? JSON.stringify(property) : `${property}`
+        );
+        return formData;
+      }, new FormData()),
+      [
+        "application/x-www-form-urlencoded"
+        /* UrlEncoded */
+      ]: (input) => this.toQueryString(input)
+    });
+    __publicField(this, "createAbortSignal", (cancelToken) => {
+      if (this.abortControllers.has(cancelToken)) {
+        const abortController2 = this.abortControllers.get(cancelToken);
+        if (abortController2) {
+          return abortController2.signal;
         }
-        return `${minutes} ${$t("minutes")}`;
+        return void 0;
       }
-      return `${hours} ${$t("hours")}`;
-    }
-    if (days < 0)
-      return $t("now");
-    if (days < 8) {
-      return `${days} ${$t("days")}`;
-    }
-    return dateFormat(date);
-  } catch (error) {
-    console.error(error);
-    return " - ";
+      const abortController = new AbortController();
+      this.abortControllers.set(cancelToken, abortController);
+      return abortController.signal;
+    });
+    __publicField(this, "abortRequest", (cancelToken) => {
+      const abortController = this.abortControllers.get(cancelToken);
+      if (abortController) {
+        abortController.abort();
+        this.abortControllers.delete(cancelToken);
+      }
+    });
+    __publicField(this, "request", (_a) => __async(this, null, function* () {
+      var _b = _a, {
+        body,
+        secure,
+        path,
+        type,
+        query,
+        format,
+        baseUrl,
+        cancelToken
+      } = _b, params = __objRest(_b, [
+        "body",
+        "secure",
+        "path",
+        "type",
+        "query",
+        "format",
+        "baseUrl",
+        "cancelToken"
+      ]);
+      const secureParams = (typeof secure === "boolean" ? secure : this.baseApiParams.secure) && this.securityWorker && (yield this.securityWorker(this.securityData)) || {};
+      const requestParams = this.mergeRequestParams(params, secureParams);
+      const queryString = query && this.toQueryString(query);
+      const payloadFormatter = this.contentFormatters[
+        type || "application/json"
+        /* Json */
+      ];
+      const responseFormat = format || requestParams.format;
+      return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, __spreadProps(__spreadValues({}, requestParams), {
+        headers: __spreadValues(__spreadValues({}, requestParams.headers || {}), type && type !== "multipart/form-data" ? { "Content-Type": type } : {}),
+        signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
+        body: typeof body === "undefined" || body === null ? null : payloadFormatter(body)
+      })).then((response) => __async(this, null, function* () {
+        const r = response;
+        r.data = null;
+        r.error = null;
+        const data = !responseFormat ? r : yield response[responseFormat]().then((data2) => {
+          if (r.ok) {
+            r.data = data2;
+          } else {
+            r.error = data2;
+          }
+          return r;
+        }).catch((e) => {
+          r.error = e;
+          return r;
+        });
+        if (cancelToken) {
+          this.abortControllers.delete(cancelToken);
+        }
+        if (!response.ok)
+          throw data;
+        return data;
+      }));
+    }));
+    Object.assign(this, apiConfig);
   }
-}
-function onImagesLoaded($container, event) {
-  if (!$container)
-    return;
-  const images = $container.getElementsByTagName("img");
-  if (!images.length)
-    return;
-  let loaded = images.length;
-  for (let i = 0; i < images.length; i++) {
-    if (images[i].complete) {
-      loaded--;
-    } else {
-      images[i].addEventListener("load", () => {
-        loaded--;
-        if (loaded === 0)
-          event();
-      });
-    }
-    if (loaded === 0)
-      event();
+  encodeQueryParam(key, value) {
+    const encodedKey = encodeURIComponent(key);
+    return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
   }
-}
-function getGravatarURL(opts) {
-  return `${opts.mirror.replace(/\/$/, "")}/${opts.emailMD5}?${opts.params.replace(/^\?/, "")}`;
-}
-function versionCompare(a, b) {
-  const pa = a.split(".");
-  const pb = b.split(".");
-  for (let i = 0; i < 3; i++) {
-    const na = Number(pa[i]);
-    const nb = Number(pb[i]);
-    if (na > nb)
-      return 1;
-    if (nb > na)
-      return -1;
-    if (!Number.isNaN(na) && Number.isNaN(nb))
-      return 1;
-    if (Number.isNaN(na) && !Number.isNaN(nb))
-      return -1;
+  addQueryParam(query, key) {
+    return this.encodeQueryParam(key, query[key]);
   }
-  return 0;
-}
-function getCorrectUserAgent() {
-  return __async(this, null, function* () {
-    const uaRaw = navigator.userAgent;
-    if (!navigator.userAgentData || !navigator.userAgentData.getHighEntropyValues) {
-      return uaRaw;
-    }
-    const uaData = navigator.userAgentData;
-    let uaGot = null;
-    try {
-      uaGot = yield uaData.getHighEntropyValues(["platformVersion"]);
-    } catch (err) {
-      console.error(err);
-      return uaRaw;
-    }
-    const majorPlatformVersion = Number(uaGot.platformVersion.split(".")[0]);
-    if (uaData.platform === "Windows") {
-      if (majorPlatformVersion >= 13) {
-        return uaRaw.replace(/Windows NT 10.0/, "Windows NT 11.0");
-      }
-    }
-    if (uaData.platform === "macOS") {
-      if (majorPlatformVersion >= 11) {
-        return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, "_")}`);
-      }
-    }
-    return uaRaw;
-  });
-}
-function isValidURL(urlRaw) {
-  let url;
-  try {
-    url = new URL(urlRaw);
-  } catch (_) {
-    return false;
+  addArrayQueryParam(query, key) {
+    const value = query[key];
+    return value.map((v) => this.encodeQueryParam(key, v)).join("&");
+  }
+  toQueryString(rawQuery) {
+    const query = rawQuery || {};
+    const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
+    return keys.map((key) => Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)).join("&");
+  }
+  addQueryParams(rawQuery) {
+    const queryString = this.toQueryString(rawQuery);
+    return queryString ? `?${queryString}` : "";
+  }
+  mergeRequestParams(params1, params2) {
+    return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, this.baseApiParams), params1), params2 || {}), {
+      headers: __spreadValues(__spreadValues(__spreadValues({}, this.baseApiParams.headers || {}), params1.headers || {}), params2 && params2.headers || {})
+    });
   }
-  return url.protocol === "http:" || url.protocol === "https:";
-}
-function getURLBasedOnApi(opts) {
-  return getURLBasedOn(opts.base, opts.path);
-}
-function getURLBasedOn(baseURL, path) {
-  return `${baseURL.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
 }
+/**
+ * @title Artalk API
+ * @version 2.0
+ * @license MIT (https://github.com/ArtalkJS/Artalk/blob/master/LICENSE)
+ * @baseUrl /api/v2
+ * @contact API Support <artalkjs@gmail.com> (https://artalk.js.org)
+ *
+ * Artalk is a modern comment system based on Golang.
+ */
+let Api$1 = class Api extends HttpClient {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "cache", {
+      /**
+       * @description Flush all cache on the server
+       *
+       * @tags Cache
+       * @name FlushCache
+       * @summary Flush Cache
+       * @request POST:/cache/flush
+       * @secure
+       * @response `200` `(HandlerMap & {
+          msg?: string,
+      
+      })` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       */
+      flushCache: (params = {}) => this.request(__spreadValues({
+        path: `/cache/flush`,
+        method: "POST",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Cache warming helps you to pre-load the cache to improve the performance of the first request
+       *
+       * @tags Cache
+       * @name WarmUpCache
+       * @summary Warm-Up Cache
+       * @request POST:/cache/warm_up
+       * @secure
+       * @response `200` `(HandlerMap & {
+          msg?: string,
+      
+      })` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       */
+      warmUpCache: (params = {}) => this.request(__spreadValues({
+        path: `/cache/warm_up`,
+        method: "POST",
+        secure: true,
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "captcha", {
+      /**
+       * @description Get a base64 encoded captcha image or a HTML page to verify for user
+       *
+       * @tags Captcha
+       * @name GetCaptcha
+       * @summary Get Captcha
+       * @request GET:/captcha
+       * @response `200` `HandlerResponseCaptchaGet` OK
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getCaptcha: (params = {}) => this.request(__spreadValues({
+        path: `/captcha`,
+        method: "GET",
+        format: "json"
+      }, params)),
+      /**
+       * @description Get the status of the user's captcha verification
+       *
+       * @tags Captcha
+       * @name GetCaptchaStatus
+       * @summary Get Captcha Status
+       * @request GET:/captcha/status
+       * @response `200` `HandlerResponseCaptchaStatus` OK
+       */
+      getCaptchaStatus: (params = {}) => this.request(__spreadValues({
+        path: `/captcha/status`,
+        method: "GET",
+        format: "json"
+      }, params)),
+      /**
+       * @description Verify user enters correct captcha code
+       *
+       * @tags Captcha
+       * @name VerifyCaptcha
+       * @summary Verify Captcha
+       * @request POST:/captcha/verify
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          img_data?: string,
+      
+      })` Forbidden
+       */
+      verifyCaptcha: (data, params = {}) => this.request(__spreadValues({
+        path: `/captcha/verify`,
+        method: "POST",
+        body: data,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "comments", {
+      /**
+       * @description Get a list of comments by some conditions
+       *
+       * @tags Comment
+       * @name GetComments
+       * @summary Get Comment List
+       * @request GET:/comments
+       * @secure
+       * @response `200` `HandlerResponseCommentList` OK
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getComments: (query, params = {}) => this.request(__spreadValues({
+        path: `/comments`,
+        method: "GET",
+        query,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Create a new comment
+       *
+       * @tags Comment
+       * @name CreateComment
+       * @summary Create Comment
+       * @request POST:/comments
+       * @secure
+       * @response `200` `HandlerResponseCommentCreate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      createComment: (comment, params = {}) => this.request(__spreadValues({
+        path: `/comments`,
+        method: "POST",
+        body: comment,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Update a specific comment
+       *
+       * @tags Comment
+       * @name UpdateComment
+       * @summary Update Comment
+       * @request PUT:/comments/{id}
+       * @secure
+       * @response `200` `HandlerResponseCommentUpdate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      updateComment: (id, comment, params = {}) => this.request(__spreadValues({
+        path: `/comments/${id}`,
+        method: "PUT",
+        body: comment,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Delete a specific comment
+       *
+       * @tags Comment
+       * @name DeleteComment
+       * @summary Delete Comment
+       * @request DELETE:/comments/{id}
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      deleteComment: (id, params = {}) => this.request(__spreadValues({
+        path: `/comments/${id}`,
+        method: "DELETE",
+        secure: true,
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "conf", {
+      /**
+       * @description Get System Configs for UI
+       *
+       * @tags System
+       * @name Conf
+       * @summary Get System Configs
+       * @request GET:/conf
+       * @response `200` `CommonConfData` OK
+       */
+      conf: (params = {}) => this.request(__spreadValues({
+        path: `/conf`,
+        method: "GET",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "notifies", {
+      /**
+       * @description Get a list of notifies for user
+       *
+       * @tags Notify
+       * @name GetNotifies
+       * @summary Get Notifies
+       * @request GET:/notifies
+       * @response `200` `HandlerResponseNotifyList` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getNotifies: (query, params = {}) => this.request(__spreadValues({
+        path: `/notifies`,
+        method: "GET",
+        query,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Mark all notifies as read for user
+       *
+       * @tags Notify
+       * @name MarkAllNotifyRead
+       * @summary Mark All Notifies as Read
+       * @request POST:/notifies/read
+       * @response `200` `HandlerMap` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      markAllNotifyRead: (options, params = {}) => this.request(__spreadValues({
+        path: `/notifies/read`,
+        method: "POST",
+        body: options,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Mark specific notification as read for user
+       *
+       * @tags Notify
+       * @name MarkNotifyRead
+       * @summary Mark Notify as Read
+       * @request POST:/notifies/{comment_id}/{notify_key}
+       * @response `200` `HandlerMap` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      markNotifyRead: (commentId, notifyKey, params = {}) => this.request(__spreadValues({
+        path: `/notifies/${commentId}/${notifyKey}`,
+        method: "POST",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "pages", {
+      /**
+       * @description Get a list of pages by some conditions
+       *
+       * @tags Page
+       * @name GetPages
+       * @summary Get Page List
+       * @request GET:/pages
+       * @secure
+       * @response `200` `HandlerResponsePageList` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       */
+      getPages: (query, params = {}) => this.request(__spreadValues({
+        path: `/pages`,
+        method: "GET",
+        query,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Fetch the data of all pages
+       *
+       * @tags Page
+       * @name FetchAllPages
+       * @summary Fetch All Pages Data
+       * @request POST:/pages/fetch
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      fetchAllPages: (options, params = {}) => this.request(__spreadValues({
+        path: `/pages/fetch`,
+        method: "POST",
+        body: options,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Get the status of the task of fetching all pages
+       *
+       * @tags Page
+       * @name GetPageFetchStatus
+       * @summary Get Pages Fetch Status
+       * @request GET:/pages/fetch/status
+       * @secure
+       * @response `200` `HandlerResponsePageFetchStatus` OK
+       */
+      getPageFetchStatus: (params = {}) => this.request(__spreadValues({
+        path: `/pages/fetch/status`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Increase and get the number of page views
+       *
+       * @tags Page
+       * @name LogPv
+       * @summary Increase Page Views (PV)
+       * @request POST:/pages/pv
+       * @response `200` `HandlerResponsePagePV` OK
+       */
+      logPv: (page, params = {}) => this.request(__spreadValues({
+        path: `/pages/pv`,
+        method: "POST",
+        body: page,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Update a specific page
+       *
+       * @tags Page
+       * @name UpdatePage
+       * @summary Update Page
+       * @request PUT:/pages/{id}
+       * @secure
+       * @response `200` `HandlerResponsePageUpdate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      updatePage: (id, page, params = {}) => this.request(__spreadValues({
+        path: `/pages/${id}`,
+        method: "PUT",
+        body: page,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Delete a specific page
+       *
+       * @tags Page
+       * @name DeletePage
+       * @summary Delete Page
+       * @request DELETE:/pages/{id}
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      deletePage: (id, params = {}) => this.request(__spreadValues({
+        path: `/pages/${id}`,
+        method: "DELETE",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Fetch the data of a specific page
+       *
+       * @tags Page
+       * @name FetchPage
+       * @summary Fetch Page Data
+       * @request POST:/pages/{id}/fetch
+       * @secure
+       * @response `200` `HandlerResponsePageFetch` OK
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      fetchPage: (id, params = {}) => this.request(__spreadValues({
+        path: `/pages/${id}/fetch`,
+        method: "POST",
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "sendEmail", {
+      /**
+       * @description Send an email to test the email sender
+       *
+       * @tags System
+       * @name SendEmail
+       * @summary Send Email
+       * @request POST:/send_email
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `HandlerMap` Internal Server Error
+       */
+      sendEmail: (email, params = {}) => this.request(__spreadValues({
+        path: `/send_email`,
+        method: "POST",
+        body: email,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "settings", {
+      /**
+       * @description Get settings from app config file
+       *
+       * @tags System
+       * @name GetSettings
+       * @summary Get Settings
+       * @request GET:/settings
+       * @secure
+       * @response `200` `HandlerResponseSettingGet` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getSettings: (params = {}) => this.request(__spreadValues({
+        path: `/settings`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Apply settings and restart the server
+       *
+       * @tags System
+       * @name ApplySettings
+       * @summary Save and apply Settings
+       * @request PUT:/settings
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      applySettings: (settings, params = {}) => this.request(__spreadValues({
+        path: `/settings`,
+        method: "PUT",
+        body: settings,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Get config templates in different languages for rendering the settings page in the frontend
+       *
+       * @tags System
+       * @name GetSettingsTemplate
+       * @summary Get Settings Template
+       * @request GET:/settings/template/{locale}
+       * @secure
+       * @response `200` `HandlerResponseSettingTemplate` OK
+       */
+      getSettingsTemplate: (locale, params = {}) => this.request(__spreadValues({
+        path: `/settings/template/${locale}`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "sites", {
+      /**
+       * @description Get a list of sites by some conditions
+       *
+       * @tags Site
+       * @name GetSites
+       * @summary Get Site List
+       * @request GET:/sites
+       * @secure
+       * @response `200` `HandlerResponseSiteList` OK
+       */
+      getSites: (params = {}) => this.request(__spreadValues({
+        path: `/sites`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Create a new site
+       *
+       * @tags Site
+       * @name CreateSite
+       * @summary Create Site
+       * @request POST:/sites
+       * @secure
+       * @response `200` `HandlerResponseSiteCreate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      createSite: (site, params = {}) => this.request(__spreadValues({
+        path: `/sites`,
+        method: "POST",
+        body: site,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Update a specific site
+       *
+       * @tags Site
+       * @name UpdateSite
+       * @summary Update Site
+       * @request PUT:/sites/{id}
+       * @secure
+       * @response `200` `HandlerResponseSiteUpdate` OK
+       */
+      updateSite: (id, site, params = {}) => this.request(__spreadValues({
+        path: `/sites/${id}`,
+        method: "PUT",
+        body: site,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Delete a specific site
+       *
+       * @tags Site
+       * @name DeleteSite
+       * @summary Site Delete
+       * @request DELETE:/sites/{id}
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      deleteSite: (id, params = {}) => this.request(__spreadValues({
+        path: `/sites/${id}`,
+        method: "DELETE",
+        secure: true,
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "stats", {
+      /**
+       * @description Get the statistics of various data analysis
+       *
+       * @tags Statistic
+       * @name GetStats
+       * @summary Statistic
+       * @request GET:/stats/{type}
+       * @response `200` `CommonJSONResult` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      getStats: (type, query, params = {}) => this.request(__spreadValues({
+        path: `/stats/${type}`,
+        method: "GET",
+        query,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "transfer", {
+      /**
+       * @description Export data from Artalk
+       *
+       * @tags Transfer
+       * @name ExportArtrans
+       * @summary Export Artrans
+       * @request GET:/transfer/export
+       * @secure
+       * @response `200` `HandlerResponseTransferExport` OK
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      exportArtrans: (params = {}) => this.request(__spreadValues({
+        path: `/transfer/export`,
+        method: "GET",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Import data to Artalk
+       *
+       * @tags Transfer
+       * @name ImportArtrans
+       * @summary Import Artrans
+       * @request POST:/transfer/import
+       * @secure
+       * @response `200` `string` OK
+       */
+      importArtrans: (data, params = {}) => this.request(__spreadValues({
+        path: `/transfer/import`,
+        method: "POST",
+        body: data,
+        secure: true,
+        type: "application/json"
+      }, params)),
+      /**
+       * @description Upload a file to prepare to import
+       *
+       * @tags Transfer
+       * @name UploadArtrans
+       * @summary Upload Artrans
+       * @request POST:/transfer/upload
+       * @secure
+       * @response `200` `(HandlerResponseTransferUpload & {
+          filename?: string,
+      
+      })` OK
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      uploadArtrans: (data, params = {}) => this.request(__spreadValues({
+        path: `/transfer/upload`,
+        method: "POST",
+        body: data,
+        secure: true,
+        type: "multipart/form-data",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "upload", {
+      /**
+       * @description Upload file from this endpoint
+       *
+       * @tags Upload
+       * @name Upload
+       * @summary Upload
+       * @request POST:/upload
+       * @secure
+       * @response `200` `HandlerResponseUpload` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      upload: (data, params = {}) => this.request(__spreadValues({
+        path: `/upload`,
+        method: "POST",
+        body: data,
+        secure: true,
+        type: "multipart/form-data",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "user", {
+      /**
+       * @description Get user info to prepare for login or check current user status
+       *
+       * @tags Account
+       * @name GetUser
+       * @summary Get User Info
+       * @request GET:/user
+       * @secure
+       * @response `200` `HandlerResponseUserInfo` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       */
+      getUser: (query, params = {}) => this.request(__spreadValues({
+        path: `/user`,
+        method: "GET",
+        query,
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Login user by name or email
+       *
+       * @tags Account
+       * @name Login
+       * @summary Get Access Token
+       * @request POST:/user/access_token
+       * @response `200` `HandlerResponseUserLogin` OK
+       * @response `400` `(HandlerMap & {
+          " data"?: {
+          need_name_select?: (string)[],
+      
+      },
+          msg?: string,
+      
+      })` Multiple users with the same email address are matched
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      login: (user, params = {}) => this.request(__spreadValues({
+        path: `/user/access_token`,
+        method: "POST",
+        body: user,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Get user login status by header Authorization
+       *
+       * @tags Account
+       * @name GetUserStatus
+       * @summary Get Login Status
+       * @request GET:/user/status
+       * @secure
+       * @response `200` `HandlerResponseUserStatus` OK
+       */
+      getUserStatus: (query, params = {}) => this.request(__spreadValues({
+        path: `/user/status`,
+        method: "GET",
+        query,
+        secure: true,
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "users", {
+      /**
+       * @description Create a new user
+       *
+       * @tags User
+       * @name CreateUser
+       * @summary Create User
+       * @request POST:/users
+       * @secure
+       * @response `200` `HandlerResponseUserCreate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      createUser: (user, params = {}) => this.request(__spreadValues({
+        path: `/users`,
+        method: "POST",
+        body: user,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Update a specific user
+       *
+       * @tags User
+       * @name UpdateUser
+       * @summary Update User
+       * @request PUT:/users/{id}
+       * @secure
+       * @response `200` `HandlerResponseUserUpdate` OK
+       * @response `400` `(HandlerMap & {
+          msg?: string,
+      
+      })` Bad Request
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      updateUser: (id, user, params = {}) => this.request(__spreadValues({
+        path: `/users/${id}`,
+        method: "PUT",
+        body: user,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params)),
+      /**
+       * @description Delete a specific user
+       *
+       * @tags User
+       * @name DeleteUser
+       * @summary Delete User
+       * @request DELETE:/users/{id}
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      deleteUser: (id, params = {}) => this.request(__spreadValues({
+        path: `/users/${id}`,
+        method: "DELETE",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Get a list of users by some conditions
+       *
+       * @tags User
+       * @name GetUsers
+       * @summary Get User List
+       * @request GET:/users/{type}
+       * @secure
+       * @response `200` `HandlerResponseAdminUserList` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       */
+      getUsers: (type, query, params = {}) => this.request(__spreadValues({
+        path: `/users/${type}`,
+        method: "GET",
+        query,
+        secure: true,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "version", {
+      /**
+       * @description Get the version of Artalk
+       *
+       * @tags System
+       * @name GetVersion
+       * @summary Get Version Info
+       * @request GET:/version
+       * @response `200` `CommonApiVersionData` OK
+       */
+      getVersion: (params = {}) => this.request(__spreadValues({
+        path: `/version`,
+        method: "GET",
+        format: "json"
+      }, params))
+    });
+    __publicField(this, "votes", {
+      /**
+       * @description Sync the number of votes in the `comments` or `pages` data tables to keep them the same as the `votes` table
+       *
+       * @tags Vote
+       * @name SyncVotes
+       * @summary Sync Vote Data
+       * @request POST:/votes/sync
+       * @secure
+       * @response `200` `HandlerMap` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       */
+      syncVotes: (params = {}) => this.request(__spreadValues({
+        path: `/votes/sync`,
+        method: "POST",
+        secure: true,
+        format: "json"
+      }, params)),
+      /**
+       * @description Vote for a specific comment or page
+       *
+       * @tags Vote
+       * @name Vote
+       * @summary Vote
+       * @request POST:/votes/{type}/{target_id}
+       * @response `200` `HandlerResponseVote` OK
+       * @response `403` `(HandlerMap & {
+          msg?: string,
+      
+      })` Forbidden
+       * @response `404` `(HandlerMap & {
+          msg?: string,
+      
+      })` Not Found
+       * @response `500` `(HandlerMap & {
+          msg?: string,
+      
+      })` Internal Server Error
+       */
+      vote: (type, targetId, vote, params = {}) => this.request(__spreadValues({
+        path: `/votes/${type}/${targetId}`,
+        method: "POST",
+        body: vote,
+        type: "application/json",
+        format: "json"
+      }, params))
+    });
+  }
+};
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -610,746 +1665,91 @@ function getDefaultExportFromCjs(x) {
     });
   })(typeof self !== "undefined" ? self : commonjsGlobal);
 });
-const en = {
-  /* Editor */
-  placeholder: "Leave a comment",
-  noComment: "No Comment",
-  send: "Send",
-  save: "Save",
-  nick: "Nickname",
-  email: "Email",
-  link: "Website",
-  emoticon: "Emoji",
-  preview: "Preview",
-  image: "Image",
-  uploadFail: "Upload Failed",
-  commentFail: "Failed to comment",
-  restoredMsg: "Content has been restored",
-  onlyAdminCanReply: "Only admin can reply",
-  uploadLoginMsg: "Please fill in your name and email to upload",
-  /* List */
-  counter: "{count} Comments",
-  sortLatest: "Latest",
-  sortOldest: "Oldest",
-  sortBest: "Best",
-  sortAuthor: "Author",
-  openComment: "Open Comment",
-  closeComment: "Close Comment",
-  listLoadFailMsg: "Failed to load comments",
-  listRetry: "Click to retry",
-  loadMore: "Load More",
-  /* Comment */
-  admin: "Admin",
-  reply: "Reply",
-  voteUp: "Up",
-  voteDown: "Down",
-  voteFail: "Vote Failed",
-  readMore: "Read More",
-  actionConfirm: "Confirm",
-  collapse: "Collapse",
-  collapsed: "Collapsed",
-  collapsedMsg: "This comment has been collapsed",
-  expand: "Expand",
-  approved: "Approved",
-  pending: "Pending",
-  pendingMsg: "Pending, visible only to commenter.",
-  edit: "Edit",
-  editCancel: "Cancel Edit",
-  delete: "Delete",
-  deleteConfirm: "Confirm",
-  pin: "Pin",
-  unpin: "Unpin",
-  /* Time */
-  seconds: "seconds ago",
-  minutes: "minutes ago",
-  hours: "hours ago",
-  days: "days ago",
-  now: "just now",
-  /* Checker */
-  adminCheck: "Enter admin password:",
-  captchaCheck: "Enter the CAPTCHA to continue:",
-  confirm: "Confirm",
-  cancel: "Cancel",
-  /* Sidebar */
-  msgCenter: "Messages",
-  ctrlCenter: "Admin",
-  /* General */
-  frontend: "Frontend",
-  backend: "Backend",
-  loading: "Loading",
-  loadFail: "Load Failed",
-  editing: "Editing",
-  editFail: "Edit Failed",
-  deleting: "Deleting",
-  deleteFail: "Delete Failed",
-  reqGot: "Request got",
-  reqAborted: "Request timed out or terminated unexpectedly",
-  updateMsg: "Please update Artalk {name} to get the full experience",
-  currentVersion: "Current Version",
-  ignore: "Ignore",
-  open: "Open"
-};
-const zhCN = {
-  /* Editor */
-  placeholder: "键入内容...",
-  noComment: "「此时无声胜有声」",
-  send: "发送评论",
-  save: "保存评论",
-  nick: "昵称",
-  email: "邮箱",
-  link: "网址",
-  emoticon: "表情",
-  preview: "预览",
-  image: "图片",
-  uploadFail: "上传失败",
-  commentFail: "评论失败",
-  restoredMsg: "内容已自动恢复",
-  onlyAdminCanReply: "仅管理员可评论",
-  uploadLoginMsg: "填入你的名字邮箱才能上传哦",
-  /* List */
-  counter: "{count} 条评论",
-  sortLatest: "最新",
-  sortOldest: "最早",
-  sortBest: "最热",
-  sortAuthor: "作者",
-  openComment: "打开评论",
-  closeComment: "关闭评论",
-  listLoadFailMsg: "无法获取评论列表数据",
-  listRetry: "点击重新获取",
-  loadMore: "加载更多",
-  /* Comment */
-  admin: "管理员",
-  reply: "回复",
-  voteUp: "赞同",
-  voteDown: "反对",
-  voteFail: "投票失败",
-  readMore: "阅读更多",
-  actionConfirm: "确认操作",
-  collapse: "折叠",
-  collapsed: "已折叠",
-  collapsedMsg: "该评论已被系统或管理员折叠",
-  expand: "展开",
-  approved: "已审",
-  pending: "待审",
-  pendingMsg: "审核中，仅本人可见。",
-  edit: "编辑",
-  editCancel: "取消编辑",
-  delete: "删除",
-  deleteConfirm: "确认删除",
-  pin: "置顶",
-  unpin: "取消置顶",
-  /* Time */
-  seconds: "秒前",
-  minutes: "分钟前",
-  hours: "小时前",
-  days: "天前",
-  now: "刚刚",
-  /* Checker */
-  adminCheck: "键入密码来验证管理员身份：",
-  captchaCheck: "键入验证码继续：",
-  confirm: "确认",
-  cancel: "取消",
-  /* Sidebar */
-  msgCenter: "通知中心",
-  ctrlCenter: "控制中心",
-  /* General */
-  frontend: "前端",
-  backend: "后端",
-  loading: "加载中",
-  loadFail: "加载失败",
-  editing: "修改中",
-  editFail: "修改失败",
-  deleting: "删除中",
-  deleteFail: "删除失败",
-  reqGot: "请求响应",
-  reqAborted: "请求超时或意外终止",
-  updateMsg: "请更新 Artalk {name} 以获得完整体验",
-  currentVersion: "当前版本",
-  ignore: "忽略",
-  open: "打开"
-};
-const GLOBAL_LOCALES_KEY = "ArtalkI18n";
-const internal = {
-  "en": en,
-  "en-US": en,
-  "zh-CN": zhCN
-};
-function findLocaleSet(lang) {
-  lang = lang.replace(
-    /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
-    (_, p1, p2) => p1.toLowerCase() + (p2 || "").toUpperCase()
-  );
-  if (internal[lang]) {
-    return internal[lang];
-  }
-  if (window[GLOBAL_LOCALES_KEY] && window[GLOBAL_LOCALES_KEY][lang]) {
-    return window[GLOBAL_LOCALES_KEY][lang];
-  }
-  return internal.en;
-}
-let LocaleConf = "en";
-let LocaleDict = findLocaleSet(LocaleConf);
-function setLocale(locale) {
-  if (locale === LocaleConf)
-    return;
-  LocaleConf = locale;
-  LocaleDict = typeof locale === "string" ? findLocaleSet(locale) : locale;
-}
-function t(key, args = {}) {
-  let str = (LocaleDict == null ? void 0 : LocaleDict[key]) || key;
-  str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || "");
-  return str;
-}
-function Fetch$1(opts, input, init2, timeout) {
-  return __async(this, null, function* () {
-    var _a, _b;
-    if (opts.apiToken) {
-      const headers = new Headers(init2.headers);
-      headers.set("Authorization", `Bearer ${opts.apiToken}`);
-      init2.headers = headers;
+const Fetch$1 = (opts, input, init2) => __async(void 0, null, function* () {
+  const apiToken = opts.getApiToken && opts.getApiToken();
+  const headers = new Headers(__spreadValues({
+    "Authorization": apiToken ? `Bearer ${apiToken}` : ""
+  }, init2 == null ? void 0 : init2.headers));
+  if (!headers.get("Authorization"))
+    headers.delete("Authorization");
+  const resp = yield fetch(input, __spreadProps(__spreadValues({}, init2), {
+    headers
+  }));
+  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);
     }
-    const resp = yield timeoutFetch(input, timeout || opts.timeout || 15e3, init2);
-    const respHttpCode = resp.status;
-    const noAccessCodes = [401, 400];
-    const isNoAccess = noAccessCodes.includes(respHttpCode);
-    if (!resp.ok && !isNoAccess)
-      throw new Error(`${t("reqGot")} ${respHttpCode}`);
-    let json = yield resp.json();
-    const recall = (resolve, reject) => {
-      Fetch$1(opts, input, init2).then((d) => {
-        resolve(d);
-      }).catch((e) => {
-        reject(e);
-      });
-    };
-    if ((_a = json.data) == null ? void 0 : _a.need_captcha) {
-      json = yield new Promise((resolve, reject) => {
-        opts.onNeedCheckCaptcha && opts.onNeedCheckCaptcha({
-          data: { imgData: json.data.img_data, iframe: json.data.iframe },
-          recall: () => {
-            recall(resolve, reject);
-          },
-          reject: () => {
-            reject(json);
-          }
-        });
-      });
-    } else if (((_b = json.data) == null ? void 0 : _b.need_login) || isNoAccess) {
-      json = yield new Promise((resolve, reject) => {
-        opts.onNeedCheckAdmin && opts.onNeedCheckAdmin({
-          recall: () => {
-            recall(resolve, reject);
-          },
-          reject: () => {
-            reject(json);
-          }
-        });
-      });
+    if (json.need_login) {
+      opts.onNeedCheckAdmin && (yield opts.onNeedCheckAdmin({}));
+      return Fetch$1(opts, input, init2);
     }
-    if (!json.success)
-      throw json;
-    return json;
-  });
-}
-function POST(opts, url, data) {
-  return __async(this, null, function* () {
-    const init2 = {
-      method: "POST"
-    };
-    data = __spreadValues({ site_name: opts.siteName || "" }, data || {});
-    init2.body = ToFormData(data);
-    const json = yield Fetch$1(opts, url, init2);
-    return json.data || {};
-  });
-}
-function ToFormData(object) {
-  const formData = new FormData();
-  Object.keys(object).forEach((key) => formData.append(key, String(object[key])));
-  return formData;
-}
-function timeoutFetch(url, ms, opts) {
-  var _a;
-  const controller = new AbortController();
-  (_a = opts.signal) == null ? void 0 : _a.addEventListener("abort", () => controller.abort());
-  let promise = fetch(url, __spreadProps(__spreadValues({}, opts), { signal: controller.signal }));
-  if (ms > 0) {
-    const timer = setTimeout(() => controller.abort(), ms);
-    promise.finally(() => {
-      clearTimeout(timer);
-    });
+    throw createError(resp.status, json);
   }
-  promise = promise.catch((err) => {
-    throw (err || {}).name === "AbortError" ? new Error(t("reqAborted")) : err;
-  });
-  return promise;
-}
-class ApiBase {
-  constructor(options) {
-    this.options = options;
-  }
-  POST(path, data) {
-    return __async(this, null, function* () {
-      return POST(this.options, this.options.baseURL + path, data);
-    });
+  return resp;
+});
+class FetchException extends Error {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "code", 0);
+    __publicField(this, "message", "fetch error");
+    __publicField(this, "data");
   }
-  Fetch(path, init2, timeout) {
-    return __async(this, null, function* () {
-      return Fetch$1(this.options, this.options.baseURL + path, init2, timeout);
+}
+function createError(code, data) {
+  const err = new FetchException();
+  err.message = data.msg || data.message || "fetch error";
+  err.code = code;
+  err.data = data;
+  console.error(err);
+  return err;
+}
+class Api2 extends Api$1 {
+  constructor(opts) {
+    super({
+      baseUrl: opts.baseURL,
+      customFetch: (input, init2) => Fetch$1(opts, input, init2)
     });
+    __publicField(this, "_opts");
+    this._opts = opts;
   }
   /**
-   * Carry user info to request params
+   * Get user info as params for request
    *
-   * @param params Request params
    * @returns Request params with user info
    */
-  withUserInfo(params) {
-    const user = this.options.userInfo;
-    if (user == null ? void 0 : user.name)
-      params.name = user.name;
-    if (user == null ? void 0 : user.email)
-      params.email = user.email;
-    return params;
-  }
-}
-class CommentApi extends ApiBase {
-  /** 评论 · 获取 */
-  get(offset, pageSize, flatMode, paramsEditor) {
-    const params = {
-      page_key: this.options.pageKey,
-      site_name: this.options.siteName,
-      limit: pageSize,
-      offset
-    };
-    if (flatMode)
-      params.flat_mode = flatMode;
-    this.withUserInfo(params);
-    if (paramsEditor)
-      paramsEditor(params);
-    return this.POST("/get", params);
-  }
-  /** 评论 · 创建 */
-  add(comment) {
-    return __async(this, null, function* () {
-      const params = {
-        name: comment.nick,
-        email: comment.email,
-        link: comment.link,
-        content: comment.content,
-        rid: comment.rid,
-        page_key: comment.page_key,
-        ua: yield getCorrectUserAgent()
-        // 需要后端支持，获取修正后的 UA
-      };
-      if (comment.page_title)
-        params.page_title = comment.page_title;
-      if (comment.site_name)
-        params.site_name = comment.site_name;
-      const data = yield this.POST("/add", params);
-      return data.comment;
-    });
-  }
-  /** 评论 · 修改 */
-  commentEdit(data) {
-    return __async(this, null, function* () {
-      const params = __spreadValues({}, data);
-      const d = yield this.POST("/admin/comment-edit", params);
-      return d.comment;
-    });
-  }
-  /** 评论 · 删除 */
-  commentDel(commentID, siteName) {
-    const params = {
-      id: String(commentID),
-      site_name: siteName || ""
-    };
-    return this.POST("/admin/comment-del", params);
-  }
-  /** 投票 */
-  vote(targetID, type) {
-    return __async(this, null, function* () {
-      const params = {
-        target_id: targetID,
-        type
-      };
-      this.withUserInfo(params);
-      const data = yield this.POST("/vote", params);
-      return data;
-    });
+  getUserFields() {
+    const user = this._opts.userInfo;
+    if (!(user == null ? void 0 : user.name) || !(user == null ? void 0 : user.email))
+      return void 0;
+    return { name: user.name, email: user.email };
   }
 }
-class PageApi extends ApiBase {
-  /** 页面 · 获取 */
-  pageGet(siteName, offset, limit) {
-    return __async(this, null, function* () {
-      const params = {
-        site_name: siteName || "",
-        offset: offset || 0,
-        limit: limit || 15
-      };
-      const d = yield this.POST("/admin/page-get", params);
-      return d;
-    });
-  }
-  /** 页面 · 修改 */
-  pageEdit(data) {
-    return __async(this, null, function* () {
-      const params = {
-        id: data.id,
-        key: data.key,
-        title: data.title,
-        admin_only: data.admin_only,
-        site_name: data.site_name || this.options.siteName
-      };
-      const d = yield this.POST("/admin/page-edit", params);
-      return d.page;
-    });
-  }
-  /** 页面 · 删除 */
-  pageDel(pageKey, siteName) {
-    const params = {
-      key: String(pageKey),
-      site_name: siteName || ""
-    };
-    return this.POST("/admin/page-del", params);
-  }
-  /** 页面 · 数据更新 */
-  pageFetch(id, siteName, getStatus) {
-    return __async(this, null, function* () {
-      const params = {};
-      if (id)
-        params.id = id;
-      if (siteName)
-        params.site_name = siteName;
-      if (getStatus)
-        params.get_status = getStatus;
-      const d = yield this.POST("/admin/page-fetch", params);
-      return d;
-    });
-  }
-  /** PV */
-  pv() {
-    return __async(this, null, function* () {
-      const params = {
-        page_key: this.options.pageKey || "",
-        page_title: this.options.pageTitle || ""
-      };
-      const p = yield this.POST("/pv", params);
-      return p.pv;
-    });
-  }
-  /** 统计 */
-  stat(type, pageKeys, limit) {
-    return __async(this, null, function* () {
-      const params = {
-        type
-      };
-      if (pageKeys)
-        params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(",") : pageKeys;
-      if (limit)
-        params.limit = limit;
-      const data = yield this.POST(`/stat`, params);
-      return data;
-    });
-  }
+var escapes = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var unescapes = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'"
+};
+var rescaped = /(&amp;|&lt;|&gt;|&quot;|&#39;)/g;
+var runescaped = /[&<>"']/g;
+function escapeHtmlChar(match) {
+  return escapes[match];
 }
-class SiteApi extends ApiBase {
-  /** 站点 · 获取 */
-  siteGet() {
-    return __async(this, null, function* () {
-      const params = {};
-      const d = yield this.POST("/admin/site-get", params);
-      return d.sites;
-    });
-  }
-  /** 站点 · 创建 */
-  siteAdd(name, urls) {
-    return __async(this, null, function* () {
-      const params = {
-        name,
-        urls,
-        site_name: ""
-        // 全局保留字段，当前站点名
-      };
-      const d = yield this.POST("/admin/site-add", params);
-      return d.site;
-    });
-  }
-  /** 站点 · 修改 */
-  siteEdit(data) {
-    return __async(this, null, function* () {
-      const params = {
-        id: data.id,
-        name: data.name || "",
-        urls: data.urls || ""
-      };
-      const d = yield this.POST("/admin/site-edit", params);
-      return d.site;
-    });
-  }
-  /** 站点 · 删除 */
-  siteDel(id, delContent = false) {
-    const params = { id, del_content: delContent };
-    return this.POST("/admin/site-del", params);
-  }
-  /** 导出 */
-  export() {
-    return __async(this, null, function* () {
-      var _a;
-      const d = yield this.Fetch(`/admin/export`, { method: "POST" }, 0);
-      return ((_a = d.data) == null ? void 0 : _a.data) || "";
-    });
-  }
-}
-class UserApi extends ApiBase {
-  /** 用户 · 登录 */
-  login(name, email, password) {
-    return __async(this, null, function* () {
-      const params = {
-        name,
-        email,
-        password
-      };
-      const data = yield this.POST("/login", params);
-      return data;
-    });
-  }
-  /** 用户 · 获取  */
-  userGet(name, email) {
-    const ctrl = new AbortController();
-    const params = {
-      name,
-      email
-    };
-    const req = this.Fetch(`/user-get`, {
-      method: "POST",
-      body: ToFormData(params),
-      signal: ctrl.signal
-    }).then((json) => ({
-      user: json.data.user,
-      is_login: json.data.is_login,
-      unread: json.data.unread || [],
-      unread_count: json.data.unread_count || 0
-    }));
-    return {
-      req,
-      abort: () => {
-        ctrl.abort();
-      }
-    };
-  }
-  /** 用户 · 登录状态 */
-  loginStatus() {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/login-status", this.withUserInfo({}));
-      return data || { is_login: false, is_admin: false };
-    });
-  }
-  /** 用户 · 注销 */
-  logout() {
-    return __async(this, null, function* () {
-      return this.POST("/logout");
-    });
-  }
-  /** 已读标记 */
-  markRead(commentID, notifyKey, readAll = false) {
-    const params = {
-      comment_id: commentID,
-      notify_key: notifyKey
-    };
-    if (readAll) {
-      delete params.comment_id;
-      delete params.notify_key;
-      params.read_all = true;
-      this.withUserInfo(params);
-    }
-    return this.POST(`/mark-read`, params);
-  }
-  /** 用户 · 列表 */
-  userList(offset, limit, type) {
-    return __async(this, null, function* () {
-      const params = {
-        offset: offset || 0,
-        limit: limit || 15
-      };
-      if (type)
-        params.type = type;
-      const d = yield this.POST("/admin/user-get", params);
-      return d;
-    });
-  }
-  /** 用户 · 新增 */
-  userAdd(user, password) {
-    return __async(this, null, function* () {
-      const params = {
-        name: user.name || "",
-        email: user.email || "",
-        password: password || "",
-        link: user.link || "",
-        is_admin: user.is_admin || false,
-        site_names: user.site_names_raw || "",
-        receive_email: user.receive_email || true,
-        badge_name: user.badge_name || "",
-        badge_color: user.badge_color || ""
-      };
-      const d = yield this.POST("/admin/user-add", params);
-      return d.user;
-    });
-  }
-  /** 用户 · 修改 */
-  userEdit(user, password) {
-    return __async(this, null, function* () {
-      const params = {
-        id: user.id,
-        name: user.name || "",
-        email: user.email || "",
-        password: password || "",
-        link: user.link || "",
-        is_admin: user.is_admin || false,
-        site_names: user.site_names_raw || "",
-        receive_email: user.receive_email || true,
-        badge_name: user.badge_name || "",
-        badge_color: user.badge_color || ""
-      };
-      const d = yield this.POST("/admin/user-edit", params);
-      return d.user;
-    });
-  }
-  /** 用户 · 删除 */
-  userDel(userID) {
-    return this.POST("/admin/user-del", {
-      id: String(userID)
-    });
-  }
-}
-class SystemApi extends ApiBase {
-  /** 获取配置 */
-  conf() {
-    return __async(this, null, function* () {
-      const data = yield this.POST(`/conf`);
-      return {
-        frontend_conf: data.frontend_conf,
-        version: data.version
-      };
-    });
-  }
-  /** 获取配置数据 */
-  getSettings() {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/admin/setting-get");
-      return data;
-    });
-  }
-  /** 保存配置数据 */
-  saveSettings(yamlStr) {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/admin/setting-save", {
-        data: yamlStr
-      });
-      return data;
-    });
-  }
-  /** 获取 API 版本信息 */
-  version() {
-    return __async(this, null, function* () {
-      const resp = yield fetch(`${this.options.baseURL}/version`, { method: "POST" });
-      const data = yield resp.json();
-      return data;
-    });
-  }
-}
-class CaptchaApi extends ApiBase {
-  /** 验证码 · 获取 */
-  captchaGet() {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/captcha/refresh");
-      return data.img_data || "";
-    });
-  }
-  /** 验证码 · 检验 */
-  captchaCheck(value) {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/captcha/check", { value });
-      return data.img_data || "";
-    });
-  }
-  /** 验证码 · 状态 */
-  captchaStatus() {
-    return __async(this, null, function* () {
-      const data = yield this.POST("/captcha/status");
-      return data || { is_pass: false };
-    });
-  }
-}
-class AdminApi extends ApiBase {
-  /** 缓存清除 */
-  cacheFlushAll() {
-    const params = { flush_all: true };
-    return this.POST("/admin/cache-flush", params);
-  }
-  /** 缓存预热 */
-  cacheWarmUp() {
-    const params = {};
-    return this.POST("/admin/cache-warm", params);
-  }
-}
-class UploadApi extends ApiBase {
-  /** 图片上传 */
-  imgUpload(file) {
-    return __async(this, null, function* () {
-      const params = {
-        page_key: this.options.pageKey
-      };
-      this.withUserInfo(params);
-      const form = ToFormData(params);
-      form.set("file", file);
-      const init2 = {
-        method: "POST",
-        body: form
-      };
-      const json = yield this.Fetch("/img-upload", init2);
-      return json.data || {};
-    });
-  }
-}
-const ApiComponents = {
-  comment: CommentApi,
-  page: PageApi,
-  site: SiteApi,
-  user: UserApi,
-  system: SystemApi,
-  captcha: CaptchaApi,
-  admin: AdminApi,
-  upload: UploadApi
-};
-class Api {
-  constructor(opts) {
-    Object.entries(ApiComponents).forEach(([key, ApiComponent]) => {
-      this[key] = new ApiComponent(opts);
-    });
-  }
-}
-var escapes = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;"
-};
-var unescapes = {
-  "&amp;": "&",
-  "&lt;": "<",
-  "&gt;": ">",
-  "&quot;": '"',
-  "&#39;": "'"
-};
-var rescaped = /(&amp;|&lt;|&gt;|&quot;|&#39;)/g;
-var runescaped = /[&<>"']/g;
-function escapeHtmlChar(match) {
-  return escapes[match];
-}
-function unescapeHtmlChar(match) {
-  return unescapes[match];
+function unescapeHtmlChar(match) {
+  return unescapes[match];
 }
 function escapeHtml(text) {
   return text == null ? "" : String(text).replace(runescaped, escapeHtmlChar);
@@ -1894,14 +2294,9 @@ const markedCodeRenderer = () => (block, lang) => {
 let instance;
 let replacers = [];
 const markedOptions = {
-  pedantic: false,
   gfm: true,
   breaks: true,
-  smartLists: true,
-  smartypants: true,
-  xhtml: false,
-  sanitize: false,
-  silent: true
+  async: false
 };
 function getInstance() {
   return instance;
@@ -1963,7 +2358,7 @@ class DataManager {
     __publicField(this, "listLastFetch");
     __publicField(this, "comments", []);
     // Note: 无层级结构 + 无须排列
-    __publicField(this, "unreads", []);
+    __publicField(this, "notifies", []);
     __publicField(this, "page");
     this.events = events;
   }
@@ -2022,26 +2417,386 @@ class DataManager {
     this.events.trigger("comment-deleted", comment);
     this.events.trigger("list-loaded", this.comments);
   }
-  // -------------------------------------------------------------------
-  //  Unreads
-  // -------------------------------------------------------------------
-  getUnreads() {
-    return this.unreads;
+  // -------------------------------------------------------------------
+  //  Notifies
+  // -------------------------------------------------------------------
+  getNotifies() {
+    return this.notifies;
+  }
+  updateNotifies(notifies) {
+    this.notifies = notifies;
+    this.events.trigger("notifies-updated", this.notifies);
+  }
+  // -------------------------------------------------------------------
+  // Page
+  // -------------------------------------------------------------------
+  getPage() {
+    return this.page;
+  }
+  updatePage(pageData) {
+    this.page = pageData;
+    this.events.trigger("page-loaded", pageData);
+  }
+}
+const en = {
+  /* Editor */
+  placeholder: "Leave a comment",
+  noComment: "No Comment",
+  send: "Send",
+  save: "Save",
+  nick: "Nickname",
+  email: "Email",
+  link: "Website",
+  emoticon: "Emoji",
+  preview: "Preview",
+  image: "Image",
+  uploadFail: "Upload Failed",
+  commentFail: "Failed to comment",
+  restoredMsg: "Content has been restored",
+  onlyAdminCanReply: "Only admin can reply",
+  uploadLoginMsg: "Please fill in your name and email to upload",
+  /* List */
+  counter: "{count} Comments",
+  sortLatest: "Latest",
+  sortOldest: "Oldest",
+  sortBest: "Best",
+  sortAuthor: "Author",
+  openComment: "Open Comment",
+  closeComment: "Close Comment",
+  listLoadFailMsg: "Failed to load comments",
+  listRetry: "Retry",
+  loadMore: "Load More",
+  /* Comment */
+  admin: "Admin",
+  reply: "Reply",
+  voteUp: "Up",
+  voteDown: "Down",
+  voteFail: "Vote Failed",
+  readMore: "Read More",
+  actionConfirm: "Confirm",
+  collapse: "Collapse",
+  collapsed: "Collapsed",
+  collapsedMsg: "This comment has been collapsed",
+  expand: "Expand",
+  approved: "Approved",
+  pending: "Pending",
+  pendingMsg: "Pending, visible only to commenter.",
+  edit: "Edit",
+  editCancel: "Cancel Edit",
+  delete: "Delete",
+  deleteConfirm: "Confirm",
+  pin: "Pin",
+  unpin: "Unpin",
+  /* Time */
+  seconds: "seconds ago",
+  minutes: "minutes ago",
+  hours: "hours ago",
+  days: "days ago",
+  now: "just now",
+  /* Checker */
+  adminCheck: "Enter admin password:",
+  captchaCheck: "Enter the CAPTCHA to continue:",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  /* Sidebar */
+  msgCenter: "Messages",
+  ctrlCenter: "Admin",
+  /* General */
+  frontend: "Frontend",
+  backend: "Backend",
+  loading: "Loading",
+  loadFail: "Load Failed",
+  editing: "Editing",
+  editFail: "Edit Failed",
+  deleting: "Deleting",
+  deleteFail: "Delete Failed",
+  reqGot: "Request got",
+  reqAborted: "Request timed out or terminated unexpectedly",
+  updateMsg: "Please update Artalk {name} to get the full experience",
+  currentVersion: "Current Version",
+  ignore: "Ignore",
+  open: "Open",
+  openName: "Open {name}"
+};
+const zhCN = {
+  /* Editor */
+  placeholder: "键入内容...",
+  noComment: "「此时无声胜有声」",
+  send: "发送评论",
+  save: "保存评论",
+  nick: "昵称",
+  email: "邮箱",
+  link: "网址",
+  emoticon: "表情",
+  preview: "预览",
+  image: "图片",
+  uploadFail: "上传失败",
+  commentFail: "评论失败",
+  restoredMsg: "内容已自动恢复",
+  onlyAdminCanReply: "仅管理员可评论",
+  uploadLoginMsg: "填入你的名字邮箱才能上传哦",
+  /* List */
+  counter: "{count} 条评论",
+  sortLatest: "最新",
+  sortOldest: "最早",
+  sortBest: "最热",
+  sortAuthor: "作者",
+  openComment: "打开评论",
+  closeComment: "关闭评论",
+  listLoadFailMsg: "无法获取评论列表数据",
+  listRetry: "点击重新获取",
+  loadMore: "加载更多",
+  /* Comment */
+  admin: "管理员",
+  reply: "回复",
+  voteUp: "赞同",
+  voteDown: "反对",
+  voteFail: "投票失败",
+  readMore: "阅读更多",
+  actionConfirm: "确认操作",
+  collapse: "折叠",
+  collapsed: "已折叠",
+  collapsedMsg: "该评论已被系统或管理员折叠",
+  expand: "展开",
+  approved: "已审",
+  pending: "待审",
+  pendingMsg: "审核中，仅本人可见。",
+  edit: "编辑",
+  editCancel: "取消编辑",
+  delete: "删除",
+  deleteConfirm: "确认删除",
+  pin: "置顶",
+  unpin: "取消置顶",
+  /* Time */
+  seconds: "秒前",
+  minutes: "分钟前",
+  hours: "小时前",
+  days: "天前",
+  now: "刚刚",
+  /* Checker */
+  adminCheck: "键入密码来验证管理员身份：",
+  captchaCheck: "键入验证码继续：",
+  confirm: "确认",
+  cancel: "取消",
+  /* Sidebar */
+  msgCenter: "通知中心",
+  ctrlCenter: "控制中心",
+  /* General */
+  frontend: "前端",
+  backend: "后端",
+  loading: "加载中",
+  loadFail: "加载失败",
+  editing: "修改中",
+  editFail: "修改失败",
+  deleting: "删除中",
+  deleteFail: "删除失败",
+  reqGot: "请求响应",
+  reqAborted: "请求超时或意外终止",
+  updateMsg: "请更新 Artalk {name} 以获得完整体验",
+  currentVersion: "当前版本",
+  ignore: "忽略",
+  open: "打开",
+  openName: "打开{name}"
+};
+const GLOBAL_LOCALES_KEY = "ArtalkI18n";
+function createElement(htmlStr = "") {
+  const div = document.createElement("div");
+  div.innerHTML = htmlStr.trim();
+  return div.firstElementChild || div;
+}
+function getHeight(el) {
+  return parseFloat(getComputedStyle(el, null).height.replace("px", ""));
+}
+function htmlEncode(str) {
+  const temp = document.createElement("div");
+  temp.innerText = str;
+  const output = temp.innerHTML;
+  return output;
+}
+function getQueryParam(name) {
+  const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
+  return match && decodeURIComponent(match[1].replace(/\+/g, " "));
+}
+function getOffset(el, relativeTo) {
+  const getOffsetRecursive = (element) => {
+    const rect = element.getBoundingClientRect();
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft
+    };
+  };
+  const elOffset = getOffsetRecursive(el);
+  if (!relativeTo)
+    return elOffset;
+  const relativeToOffset = getOffsetRecursive(relativeTo);
+  return {
+    top: elOffset.top - relativeToOffset.top,
+    left: elOffset.left - relativeToOffset.left
+  };
+}
+function padWithZeros(vNumber, width) {
+  let numAsString = vNumber.toString();
+  while (numAsString.length < width) {
+    numAsString = `0${numAsString}`;
+  }
+  return numAsString;
+}
+function dateFormat(date) {
+  const vDay = padWithZeros(date.getDate(), 2);
+  const vMonth = padWithZeros(date.getMonth() + 1, 2);
+  const vYear = padWithZeros(date.getFullYear(), 2);
+  return `${vYear}-${vMonth}-${vDay}`;
+}
+function timeAgo(date, $t = (n) => n) {
+  try {
+    const oldTime = date.getTime();
+    const currTime = (/* @__PURE__ */ new Date()).getTime();
+    const diffValue = currTime - oldTime;
+    const days = Math.floor(diffValue / (24 * 3600 * 1e3));
+    if (days === 0) {
+      const leave1 = diffValue % (24 * 3600 * 1e3);
+      const hours = Math.floor(leave1 / (3600 * 1e3));
+      if (hours === 0) {
+        const leave2 = leave1 % (3600 * 1e3);
+        const minutes = Math.floor(leave2 / (60 * 1e3));
+        if (minutes === 0) {
+          const leave3 = leave2 % (60 * 1e3);
+          const seconds = Math.round(leave3 / 1e3);
+          if (seconds < 10)
+            return $t("now");
+          return `${seconds} ${$t("seconds")}`;
+        }
+        return `${minutes} ${$t("minutes")}`;
+      }
+      return `${hours} ${$t("hours")}`;
+    }
+    if (days < 0)
+      return $t("now");
+    if (days < 8) {
+      return `${days} ${$t("days")}`;
+    }
+    return dateFormat(date);
+  } catch (error) {
+    console.error(error);
+    return " - ";
+  }
+}
+function onImagesLoaded($container, event) {
+  if (!$container)
+    return;
+  const images = $container.getElementsByTagName("img");
+  if (!images.length)
+    return;
+  let loaded = images.length;
+  for (let i = 0; i < images.length; i++) {
+    if (images[i].complete) {
+      loaded--;
+    } else {
+      images[i].addEventListener("load", () => {
+        loaded--;
+        if (loaded === 0)
+          event();
+      });
+    }
+    if (loaded === 0)
+      event();
+  }
+}
+function getGravatarURL(opts) {
+  return `${opts.mirror.replace(/\/$/, "")}/${opts.emailMD5}?${opts.params.replace(/^\?/, "")}`;
+}
+function versionCompare(a, b) {
+  const pa = a.split(".");
+  const pb = b.split(".");
+  for (let i = 0; i < 3; i++) {
+    const na = Number(pa[i]);
+    const nb = Number(pb[i]);
+    if (na > nb)
+      return 1;
+    if (nb > na)
+      return -1;
+    if (!Number.isNaN(na) && Number.isNaN(nb))
+      return 1;
+    if (Number.isNaN(na) && !Number.isNaN(nb))
+      return -1;
   }
-  updateUnreads(unread) {
-    this.unreads = unread;
-    this.events.trigger("unreads-updated", this.unreads);
+  return 0;
+}
+function getCorrectUserAgent() {
+  return __async(this, null, function* () {
+    const uaRaw = navigator.userAgent;
+    if (!navigator.userAgentData || !navigator.userAgentData.getHighEntropyValues) {
+      return uaRaw;
+    }
+    const uaData = navigator.userAgentData;
+    let uaGot = null;
+    try {
+      uaGot = yield uaData.getHighEntropyValues(["platformVersion"]);
+    } catch (err) {
+      console.error(err);
+      return uaRaw;
+    }
+    const majorPlatformVersion = Number(uaGot.platformVersion.split(".")[0]);
+    if (uaData.platform === "Windows") {
+      if (majorPlatformVersion >= 13) {
+        return uaRaw.replace(/Windows NT 10.0/, "Windows NT 11.0");
+      }
+    }
+    if (uaData.platform === "macOS") {
+      if (majorPlatformVersion >= 11) {
+        return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, "_")}`);
+      }
+    }
+    return uaRaw;
+  });
+}
+function isValidURL(urlRaw) {
+  let url;
+  try {
+    url = new URL(urlRaw);
+  } catch (_) {
+    return false;
   }
-  // -------------------------------------------------------------------
-  // Page
-  // -------------------------------------------------------------------
-  getPage() {
-    return this.page;
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+function getURLBasedOnApi(opts) {
+  return getURLBasedOn(opts.base, opts.path);
+}
+function getURLBasedOn(baseURL, path) {
+  return `${baseURL.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
+}
+const internal = {
+  "en": en,
+  "en-US": en,
+  "zh-CN": zhCN
+};
+function findLocaleSet(lang) {
+  lang = lang.replace(
+    /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
+    (_, p1, p2) => p1.toLowerCase() + (p2 || "").toUpperCase()
+  );
+  if (internal[lang]) {
+    return internal[lang];
   }
-  updatePage(pageData) {
-    this.page = pageData;
-    this.events.trigger("page-loaded", pageData);
+  if (window[GLOBAL_LOCALES_KEY] && window[GLOBAL_LOCALES_KEY][lang]) {
+    return window[GLOBAL_LOCALES_KEY][lang];
   }
+  return internal.en;
+}
+let LocaleConf = "en";
+let LocaleDict = findLocaleSet(LocaleConf);
+function setLocale(locale) {
+  if (locale === LocaleConf)
+    return;
+  LocaleConf = locale;
+  LocaleDict = typeof locale === "string" ? findLocaleSet(locale) : locale;
+}
+function t(key, args = {}) {
+  let str = (LocaleDict == null ? void 0 : LocaleDict[key]) || key;
+  str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || "");
+  return htmlEncode(str);
 }
 class EventManager {
   constructor() {
@@ -2112,7 +2867,7 @@ const defaults = {
   reqTimeout: 15e3,
   versionCheck: true,
   useBackendConf: true,
-  locale: "zh-CN"
+  locale: "en"
 };
 function handelCustomConf(customConf, full = false) {
   const conf = full ? mergeDeep(defaults, customConf) : customConf;
@@ -2166,40 +2921,53 @@ function handleConfFormServer(conf) {
 }
 function convertApiOptions(conf, ctx) {
   return {
-    baseURL: `${conf.server}/api`,
+    baseURL: `${conf.server}/api/v2`,
     siteName: conf.site || "",
     pageKey: conf.pageKey || "",
     pageTitle: conf.pageTitle || "",
     timeout: conf.reqTimeout,
-    apiToken: ctx == null ? void 0 : ctx.get("user").getData().token,
+    getApiToken: () => ctx == null ? void 0 : ctx.get("user").getData().token,
     userInfo: (ctx == null ? void 0 : ctx.get("user").checkHasBasicUserInfo()) ? {
       name: ctx == null ? void 0 : ctx.get("user").getData().nick,
       email: ctx == null ? void 0 : ctx.get("user").getData().email
     } : void 0,
-    onNeedCheckAdmin(payload) {
-      ctx == null ? void 0 : ctx.checkAdmin({
-        onSuccess: () => {
-          payload.recall();
-        },
-        onCancel: () => {
-          payload.reject();
-        }
-      });
+    onNeedCheckAdmin: (payload) => {
+      if (!ctx)
+        throw new Error("`ctx` is required when `onNeedCheckAdmin` is called.");
+      return ctx.checkAdmin({});
     },
-    onNeedCheckCaptcha(payload) {
-      ctx == null ? void 0 : ctx.checkCaptcha({
+    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,
-        onSuccess: () => {
-          payload.recall();
-        },
-        onCancel: () => {
-          payload.reject();
-        }
+        iframe: payload.data.iframe
       });
     }
   };
 }
+function watchConf(ctx, keys, effect) {
+  const deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+  const val = () => {
+    const conf = ctx.getConf();
+    const res = {};
+    keys.forEach((key) => {
+      res[key] = conf[key];
+    });
+    return res;
+  };
+  let lastVal = null;
+  const handler = () => {
+    const newVal = val();
+    const isDiff = lastVal == null || !deepEqual(lastVal, newVal);
+    if (isDiff) {
+      lastVal = newVal;
+      effect(newVal);
+    }
+  };
+  ctx.on("mounted", handler);
+  ctx.on("updated", handler);
+}
 class Context {
   constructor(conf) {
     /* 运行参数 */
@@ -2208,11 +2976,17 @@ class Context {
     __publicField(this, "$root");
     /* Event Manager */
     __publicField(this, "events", new EventManager());
+    __publicField(this, "mounted", false);
+    __publicField(this, "getCommentList", this.getCommentNodes);
+    __publicField(this, "getCommentDataList", this.getComments);
     this.conf = conf;
     this.$root = conf.el;
     this.$root.classList.add("artalk");
     this.$root.innerHTML = "";
     this.data = new DataManager(this.events);
+    this.on("mounted", () => {
+      this.mounted = true;
+    });
   }
   inject(depName, obj) {
     this[depName] = obj;
@@ -2221,7 +2995,7 @@ class Context {
     return this[depName];
   }
   getApi() {
-    return new Api(convertApiOptions(this.conf, this));
+    return new Api2(convertApiOptions(this.conf, this));
   }
   getData() {
     return this.data;
@@ -2238,10 +3012,17 @@ class Context {
   reload() {
     this.data.fetchComments({ offset: 0 });
   }
+  /* List */
   listGotoFirst() {
     this.events.trigger("list-goto-first");
   }
-  /* 编辑器 */
+  getCommentNodes() {
+    return this.list.getCommentNodes();
+  }
+  getComments() {
+    return this.data.getComments();
+  }
+  /* Editor */
   editorShowLoading() {
     this.editor.showLoading();
   }
@@ -2254,19 +3035,19 @@ class Context {
   editorResetState() {
     this.editor.resetState();
   }
-  /* 侧边栏 */
+  /* Sidebar */
   showSidebar(payload) {
     this.sidebarLayer.show(payload);
   }
   hideSidebar() {
     this.sidebarLayer.hide();
   }
-  /* 权限检测 */
+  /* Checker */
   checkAdmin(payload) {
-    this.checkerLauncher.checkAdmin(payload);
+    return this.checkerLauncher.checkAdmin(payload);
   }
   checkCaptcha(payload) {
-    this.checkerLauncher.checkCaptcha(payload);
+    return this.checkerLauncher.checkCaptcha(payload);
   }
   /* Events */
   on(name, handler) {
@@ -2283,12 +3064,11 @@ class Context {
     return t(key, args);
   }
   setDarkMode(darkMode) {
-    this.conf.darkMode = darkMode;
-    this.events.trigger("dark-mode-changed", darkMode);
+    this.updateConf({ darkMode });
   }
   updateConf(nConf) {
     this.conf = mergeDeep(this.conf, handelCustomConf(nConf, false));
-    this.events.trigger("conf-loaded", this.conf);
+    this.mounted && this.events.trigger("updated", this.conf);
   }
   getConf() {
     return this.conf;
@@ -2299,6 +3079,9 @@ class Context {
   getMarked() {
     return getInstance();
   }
+  watchConf(keys, effect) {
+    watchConf(this, keys, effect);
+  }
 }
 class Dialog {
   constructor(contentEl) {
@@ -2491,8 +3274,8 @@ function imgBody(checker) {
   );
   elem.querySelector(".atk-captcha-img").onclick = () => {
     const imgEl = elem.querySelector(".atk-captcha-img");
-    checker.getApi().captcha.captchaGet().then((imgData) => {
-      imgEl.setAttribute("src", imgData);
+    checker.getApi().captcha.getCaptcha().then((res) => {
+      imgEl.setAttribute("src", res.data.img_data);
     }).catch((err) => {
       console.error("Failed to get captcha image ", err);
     });
@@ -2504,7 +3287,7 @@ function iframeBody(checker) {
   const $iframe = createElement(`<iframe class="atk-fade-in" referrerpolicy="strict-origin-when-cross-origin"></iframe>`);
   $iframe.style.display = "none";
   showLoading($iframeWrap, { transparentBg: true });
-  $iframe.src = `${checker.getOpts().getIframeURLBase() || ""}/api/captcha/get?t=${+/* @__PURE__ */ new Date()}`;
+  $iframe.src = checker.getOpts().getCaptchaIframeURL();
   $iframe.onload = () => {
     $iframe.style.display = "";
     hideLoading($iframeWrap);
@@ -2526,8 +3309,8 @@ function iframeBody(checker) {
         return;
       let isPass = false;
       try {
-        const resp = yield checker.getApi().captcha.captchaStatus();
-        isPass = resp.is_pass;
+        const resp = yield checker.getApi().captcha.getCaptchaStatus();
+        isPass = resp.data.is_pass;
       } catch (e) {
         isPass = false;
       }
@@ -2546,7 +3329,9 @@ function iframeBody(checker) {
 }
 const CaptchaChecker = {
   request(checker, inputVal) {
-    return checker.getApi().captcha.captchaCheck(inputVal);
+    return checker.getApi().captcha.verifyCaptcha({
+      value: inputVal
+    });
   },
   body(checker) {
     if (checker.get("iframe"))
@@ -2564,45 +3349,61 @@ const CaptchaChecker = {
 const AdminChecker = {
   inputType: "password",
   request(checker, inputVal) {
-    const data = {
-      name: checker.getUser().getData().nick,
-      email: checker.getUser().getData().email,
-      password: inputVal
-    };
-    return (() => __async(this, null, function* () {
-      const resp = yield checker.getApi().user.login(data.name, data.email, data.password);
-      return resp.token;
-    }))();
+    return __async(this, null, function* () {
+      return (yield checker.getApi().user.login({
+        name: checker.getUser().getData().nick,
+        email: checker.getUser().getData().email,
+        password: inputVal
+      })).data;
+    });
   },
   body(checker) {
     return createElement(`<span>${t("adminCheck")}</span>`);
   },
-  onSuccess(checker, userToken, inputVal, formEl) {
+  onSuccess(checker, res, inputVal, formEl) {
     checker.getUser().update({
       isAdmin: true,
-      token: userToken
+      token: res.token
     });
     checker.getOpts().onReload();
   },
   onError(checker, err, inputVal, formEl) {
   }
 };
+function wrapPromise(fn) {
+  return (payload) => new Promise((resolve, reject) => {
+    const cancelFn = payload.onCancel;
+    payload.onCancel = () => {
+      cancelFn && cancelFn();
+      reject(new Error("user canceled the checker"));
+    };
+    const successFn = payload.onSuccess;
+    payload.onSuccess = () => {
+      successFn && successFn();
+      resolve();
+    };
+    fn(payload);
+  });
+}
 class CheckerLauncher {
   constructor(opts) {
+    __publicField(this, "checkCaptcha", wrapPromise((p) => {
+      this.fire(CaptchaChecker, p, (ctx) => {
+        ctx.set("img_data", p.imgData);
+        ctx.set("iframe", p.iframe);
+      });
+    }));
+    __publicField(this, "checkAdmin", wrapPromise((p) => {
+      this.fire(AdminChecker, p);
+    }));
     this.opts = opts;
   }
-  checkCaptcha(payload) {
-    this.fire(CaptchaChecker, payload, (ctx) => {
-      ctx.set("img_data", payload.imgData);
-      ctx.set("iframe", payload.iframe);
-    });
-  }
-  checkAdmin(payload) {
-    this.fire(AdminChecker, payload);
-  }
   fire(checker, payload, postFire) {
     const layer = this.opts.getCtx().get("layerManager").create(`checker-${(/* @__PURE__ */ new Date()).getTime()}`);
     layer.show();
+    const close = () => {
+      layer.destroy();
+    };
     const checkerStore = {};
     let hideInteractInput = false;
     const checkerCtx = {
@@ -2617,14 +3418,14 @@ class CheckerLauncher {
         hideInteractInput = true;
       },
       triggerSuccess: () => {
-        this.close(checker, layer);
+        close();
         if (checker.onSuccess)
           checker.onSuccess(checkerCtx, "", "", formEl);
         if (payload.onSuccess)
-          payload.onSuccess("", dialog.$el);
+          payload.onSuccess();
       },
       cancel: () => {
-        this.close(checker, layer);
+        close();
         if (payload.onCancel)
           payload.onCancel();
       }
@@ -2660,11 +3461,11 @@ class CheckerLauncher {
       };
       btnEl.innerText = `${t("loading")}...`;
       checker.request(checkerCtx, inputVal).then((data) => {
-        this.close(checker, layer);
+        close();
         if (checker.onSuccess)
           checker.onSuccess(checkerCtx, data, inputVal, formEl);
         if (payload.onSuccess)
-          payload.onSuccess(inputVal, dialog.$el);
+          payload.onSuccess();
       }).catch((err) => {
         btnTextSet(String(err.msg || String(err)));
         if (checker.onError)
@@ -2678,7 +3479,7 @@ class CheckerLauncher {
       return false;
     });
     dialog.setNo(() => {
-      this.close(checker, layer);
+      close();
       if (payload.onCancel)
         payload.onCancel();
       return false;
@@ -2691,17 +3492,14 @@ class CheckerLauncher {
     if (payload.onMount)
       payload.onMount(dialog.$el);
   }
-  // 关闭 checker 对话框
-  close(checker, layer) {
-    layer.destroy();
-  }
 }
 class Component {
   constructor(ctx) {
     __publicField(this, "$el");
-    __publicField(this, "conf");
     this.ctx = ctx;
-    this.conf = ctx.conf;
+  }
+  get conf() {
+    return this.ctx.conf;
   }
 }
 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';
@@ -2924,7 +3722,10 @@ class SidebarLayer extends Component {
     __publicField(this, "$closeBtn");
     __publicField(this, "$iframeWrap");
     __publicField(this, "$iframe");
-    __publicField(this, "firstShow", true);
+    /** Refresh iFrame on show */
+    __publicField(this, "refreshOnShow", true);
+    /** Animation timer */
+    __publicField(this, "animTimer");
     this.$el = createElement(SidebarHTML);
     this.$header = this.$el.querySelector(".atk-sidebar-header");
     this.$closeBtn = this.$header.querySelector(".atk-sidebar-close");
@@ -2933,7 +3734,7 @@ class SidebarLayer extends Component {
       this.hide();
     };
     this.ctx.on("user-changed", () => {
-      this.firstShow = true;
+      this.refreshOnShow = true;
     });
   }
   /** 显示 */
@@ -2942,45 +3743,43 @@ class SidebarLayer extends Component {
       this.$el.style.transform = "";
       this.initLayer();
       this.layer.show();
-      this.authCheck({
-        onSuccess: () => this.show(conf)
-        // retry show after auth check
-      });
-      if (this.firstShow) {
+      if (this.refreshOnShow) {
+        this.refreshOnShow = false;
         this.$iframeWrap.innerHTML = "";
         this.$iframe = this.createIframe(conf.view);
         this.$iframeWrap.append(this.$iframe);
-        this.firstShow = false;
       } else {
         const $iframe = this.$iframe;
-        const isIframeSrcDarkMode = $iframe.src.includes("darkMode=1");
-        if (this.conf.darkMode && !isIframeSrcDarkMode)
-          this.iframeLoad($iframe, `${this.$iframe.src}&darkMode=1`);
-        if (!this.conf.darkMode && isIframeSrcDarkMode)
-          this.iframeLoad($iframe, this.$iframe.src.replace("&darkMode=1", ""));
+        const iFrameSrc = $iframe.src;
+        if (this.conf.darkMode !== iFrameSrc.includes("darkMode=1")) {
+          this.iframeLoad($iframe, this.conf.darkMode ? iFrameSrc.concat("&darkMode=1") : iFrameSrc.replace("&darkMode=1", ""));
+        }
       }
-      setTimeout(() => {
+      this.authCheck({
+        onSuccess: () => this.show(conf)
+        // retry show after auth check
+      });
+      this.animTimer = setTimeout(() => {
+        this.animTimer = void 0;
         this.$el.style.transform = "translate(0, 0)";
+        setTimeout(() => {
+          this.ctx.getData().updateNotifies([]);
+        }, 0);
+        this.ctx.trigger("sidebar-show");
       }, 100);
-      setTimeout(() => {
-        this.ctx.getData().updateUnreads([]);
-      }, 0);
-      this.ctx.trigger("sidebar-show");
     });
   }
   /** 隐藏 */
   hide() {
     var _a;
-    this.$el.style.transform = "";
     (_a = this.layer) == null ? void 0 : _a.hide();
-    this.ctx.trigger("sidebar-hide");
   }
   // --------------------------------------------------
   authCheck(opts) {
     return __async(this, null, function* () {
-      const resp = yield this.ctx.getApi().user.loginStatus();
-      if (resp.is_admin && !resp.is_login) {
-        this.firstShow = true;
+      const data = (yield this.ctx.getApi().user.getUserStatus(__spreadValues({}, this.ctx.getApi().getUserFields()))).data;
+      if (data.is_admin && !data.is_login) {
+        this.refreshOnShow = true;
         this.ctx.checkAdmin({
           onSuccess: () => {
             setTimeout(() => {
@@ -2991,6 +3790,7 @@ class SidebarLayer extends Component {
             this.hide();
           }
         });
+        this.hide();
       }
     });
   }
@@ -3000,6 +3800,9 @@ class SidebarLayer extends Component {
     this.layer = this.ctx.get("layerManager").create("sidebar", this.$el);
     this.layer.setOnAfterHide(() => {
       this.ctx.editorResetState();
+      this.animTimer && clearTimeout(this.animTimer);
+      this.$el.style.transform = "";
+      this.ctx.trigger("sidebar-hide");
     });
   }
   createIframe(view) {
@@ -3018,8 +3821,6 @@ class SidebarLayer extends Component {
       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;
@@ -3562,7 +4363,7 @@ function renderReplyTo(r) {
   };
   let replyContent = marked(r.cConf.replyTo.content);
   if (r.cConf.replyTo.is_collapsed)
-    replyContent = `[${htmlEncode(r.ctx.$t("collapsed"))}]`;
+    replyContent = `[${r.ctx.$t("collapsed")}]`;
   r.$replyTo.querySelector(".atk-content").innerHTML = replyContent;
   r.$body.prepend(r.$replyTo);
 }
@@ -3963,10 +4764,10 @@ class CommentActions {
   /** 投票操作 */
   vote(type) {
     const actionBtn = type === "up" ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown;
-    this.ctx.getApi().comment.vote(this.data.id, `comment_${type}`).then((v) => {
+    this.ctx.getApi().votes.vote(`comment_${type}`, this.data.id, __spreadValues({}, this.ctx.getApi().getUserFields())).then((res) => {
       var _a, _b;
-      this.data.vote_up = v.up;
-      this.data.vote_down = v.down;
+      this.data.vote_up = res.data.up;
+      this.data.vote_down = res.data.down;
       (_a = this.comment.getRender().voteBtnUp) == null ? void 0 : _a.updateText();
       (_b = this.comment.getRender().voteBtnDown) == null ? void 0 : _b.updateText();
     }).catch((err) => {
@@ -3987,9 +4788,9 @@ class CommentActions {
     } else if (type === "pinned") {
       modify.is_pinned = !modify.is_pinned;
     }
-    this.ctx.getApi().comment.commentEdit(modify).then((data) => {
+    this.ctx.getApi().comments.updateComment(this.data.id, __spreadValues({}, modify)).then((res) => {
       btnElem.setLoading(false);
-      this.comment.setData(data);
+      this.comment.setData(res.data);
     }).catch((err) => {
       console.error(err);
       btnElem.setError(this.ctx.$t("editFail"));
@@ -4000,7 +4801,7 @@ class CommentActions {
     if (btnElem.isLoading)
       return;
     btnElem.setLoading(true, `${this.ctx.$t("deleting")}...`);
-    this.ctx.getApi().comment.commentDel(this.data.id, this.data.site_name).then(() => {
+    this.ctx.getApi().comments.deleteComment(this.data.id).then(() => {
       btnElem.setLoading(false);
       if (this.cConf.onDelete)
         this.cConf.onDelete(this.comment);
@@ -4018,7 +4819,7 @@ class CommentActions {
       window.dispatchEvent(new Event("hashchange"));
   }
 }
-class Comment extends Component {
+class CommentNode extends Component {
   // 最大嵌套层数
   constructor(ctx, data, conf) {
     super(ctx);
@@ -4159,7 +4960,7 @@ class Comment extends Component {
 }
 function createComment(ctx, comment, ctxComments) {
   var _a;
-  const instance2 = new Comment(ctx, comment, {
+  const instance2 = new CommentNode(ctx, comment, {
     isFlatMode: (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.params.flatMode,
     afterRender: () => {
       ctx.trigger("comment-rendered", instance2);
@@ -4307,9 +5108,13 @@ class Pagination {
     this.$el = createElement(
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
-          <div class="atk-btn atk-btn-prev">Prev</div>
+          <div class="atk-btn atk-btn-prev" aria-label="Previous page">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"></path></svg>
+          </div>
           <input type="text" class="atk-input" aria-label="Enter the number of page" />
-          <div class="atk-btn atk-btn-next">Next</div>
+          <div class="atk-btn atk-btn-next" aria-label="Next page">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path></svg>
+          </div>
         </div>
       </div>`
     );
@@ -4482,12 +5287,12 @@ function getPageDataByLastData(ctx) {
     return r;
   r.offset = last.params.offset;
   if (last.data)
-    r.total = last.params.flatMode ? last.data.total : last.data.total_roots;
+    r.total = last.params.flatMode ? last.data.count : last.data.roots_count;
   return r;
 }
 const initListPaginatorFunc = (ctx) => {
   let paginator = null;
-  ctx.on("conf-loaded", (conf) => {
+  ctx.watchConf(["pagination", "locale"], (conf) => {
     const list = ctx.get("list");
     if (paginator)
       paginator.dispose();
@@ -4511,7 +5316,7 @@ const initListPaginatorFunc = (ctx) => {
       ctx.getData().clearComments();
     }
   });
-  ctx.on("list-error", () => {
+  ctx.on("list-failed", () => {
     var _a;
     (_a = paginator == null ? void 0 : paginator.showErr) == null ? void 0 : _a.call(paginator, t("loadFail"));
   });
@@ -4600,11 +5405,48 @@ function getScrollbarHelper() {
     }
   };
 }
+class Layer {
+  constructor($el, opts) {
+    __publicField(this, "allowMaskClose", true);
+    __publicField(this, "onAfterHide");
+    this.$el = $el;
+    this.opts = opts;
+  }
+  setOnAfterHide(func) {
+    this.onAfterHide = func;
+  }
+  setAllowMaskClose(allow) {
+    this.allowMaskClose = allow;
+  }
+  getAllowMaskClose() {
+    return this.allowMaskClose;
+  }
+  getEl() {
+    return this.$el;
+  }
+  show() {
+    this.opts.onShow();
+    this.$el.style.display = "";
+  }
+  hide() {
+    return __async(this, null, function* () {
+      this.opts.onHide();
+      this.$el.style.display = "none";
+      this.onAfterHide && this.onAfterHide();
+    });
+  }
+  destroy() {
+    return __async(this, null, function* () {
+      this.opts.onHide();
+      this.$el.remove();
+      this.onAfterHide && this.onAfterHide();
+    });
+  }
+}
 class LayerWrap {
   constructor() {
     __publicField(this, "$wrap");
     __publicField(this, "$mask");
-    __publicField(this, "allowMaskClose", true);
     __publicField(this, "items", []);
     this.$wrap = createElement(
       `<div class="atk-layer-wrap" style="display: none;"><div class="atk-layer-mask"></div></div>`
@@ -4612,14 +5454,24 @@ class LayerWrap {
     this.$mask = this.$wrap.querySelector(".atk-layer-mask");
   }
   createItem(name, el) {
-    if (!el) {
-      el = document.createElement("div");
-      el.classList.add("atk-layer-item");
-      el.setAttribute("data-layer-name", name);
-      el.style.display = "none";
-    }
+    el = el || this.createItemElement(name);
+    el.setAttribute("data-layer-name", name);
+    this.$wrap.appendChild(el);
+    const layer = new Layer(el, {
+      onHide: () => this.hideWrap(el),
+      onShow: () => this.showWrap()
+    });
+    this.getMask().addEventListener("click", () => {
+      layer.getAllowMaskClose() && layer.hide();
+    });
+    this.items.push(layer);
+    return layer;
+  }
+  createItemElement(name) {
+    const el = document.createElement("div");
+    el.classList.add("atk-layer-item");
+    el.style.display = "none";
     this.$wrap.appendChild(el);
-    this.items.push(el);
     return el;
   }
   getWrap() {
@@ -4628,78 +5480,36 @@ class LayerWrap {
   getMask() {
     return this.$mask;
   }
-  setMaskClose(enabled) {
-    this.allowMaskClose = enabled;
-  }
-  show() {
+  showWrap() {
     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) {
-    if (this.items.filter((e) => e.isConnected && e.style.display !== "none").length > 1) {
-      callback && callback();
+  hideWrap($el) {
+    if (this.items.map((l) => l.getEl()).filter((e) => e !== $el && e.isConnected && e.style.display !== "none").length > 0) {
       return;
     }
-    const onAfterHide = () => {
+    const onHide = () => {
       this.$wrap.style.display = "none";
       this.$wrap.classList.remove("atk-fade-out");
-      callback && callback();
       getScrollbarHelper().unlock();
       this.$wrap.onanimationend = null;
     };
     this.$wrap.classList.add("atk-fade-out");
     if (window.getComputedStyle(this.$wrap)["animation-name"] !== "none") {
-      this.$wrap.onanimationend = () => onAfterHide();
+      this.$wrap.onanimationend = () => onHide();
     } else {
-      onAfterHide();
+      onHide();
     }
   }
 }
-class Layer {
-  constructor(wrap, name, el) {
-    __publicField(this, "$el");
-    __publicField(this, "wrap");
-    __publicField(this, "onAfterHide");
-    this.wrap = wrap;
-    this.$el = this.wrap.createItem(name, el);
-  }
-  setOnAfterHide(func) {
-    this.onAfterHide = func;
-  }
-  getEl() {
-    return this.$el;
-  }
-  show() {
-    this.$el.style.display = "";
-    this.wrap.show();
-  }
-  hide() {
-    this.wrap.hide(() => {
-      this.$el.style.display = "none";
-      this.onAfterHide && this.onAfterHide();
-    });
-  }
-  destroy() {
-    this.wrap.hide(() => {
-      this.$el.remove();
-      this.onAfterHide && this.onAfterHide();
-    });
-  }
-}
 class LayerManager {
   constructor(ctx) {
     __publicField(this, "wrap");
-    __publicField(this, "ctx");
-    this.ctx = ctx;
     this.wrap = new LayerWrap();
     document.body.appendChild(this.wrap.getWrap());
-    ctx.on("destroy", () => {
+    ctx.on("unmounted", () => {
       this.wrap.getWrap().remove();
     });
     getScrollbarHelper().init();
@@ -4708,8 +5518,7 @@ class LayerManager {
     return this.wrap.getWrap();
   }
   create(name, el) {
-    const layer = new Layer(this.wrap, name, el);
-    return layer;
+    return this.wrap.createItem(name, el);
   }
 }
 const LOCAL_USER_KEY = "ArtalkUser";
@@ -4729,7 +5538,7 @@ class User {
   getData() {
     return this.data;
   }
-  /** 保存用户到 localStorage 中 */
+  /** Update user data and save to localStorage */
   update(obj = {}) {
     Object.entries(obj).forEach(([key, value]) => {
       this.data[key] = value;
@@ -4748,7 +5557,7 @@ class User {
       isAdmin: false
     });
   }
-  /** 是否已填写基本用户信息 */
+  /** Check if user has filled basic data */
   checkHasBasicUserInfo() {
     return !!this.data.nick && !!this.data.email;
   }
@@ -4757,8 +5566,8 @@ const services = {
   // I18n
   i18n(ctx) {
     setLocale(ctx.conf.locale);
-    ctx.on("conf-loaded", () => {
-      setLocale(ctx.conf.locale);
+    ctx.watchConf(["locale"], (conf) => {
+      setLocale(conf.locale);
     });
   },
   // User Store
@@ -4779,8 +5588,9 @@ const services = {
     const checkerLauncher = new CheckerLauncher({
       getCtx: () => ctx,
       getApi: () => ctx.getApi(),
-      getIframeURLBase: () => ctx.conf.server,
-      onReload: () => ctx.reload()
+      onReload: () => ctx.reload(),
+      // make sure suffix with a slash, because it will be used as a base url when call `fetch`
+      getCaptchaIframeURL: () => `${ctx.conf.server}/api/v2/captcha/?t=${+/* @__PURE__ */ new Date()}`
     });
     return checkerLauncher;
   },
@@ -4811,39 +5621,41 @@ const services = {
   }
 };
 function showErrorDialog(opts) {
-  const errEl = createElement(`<span>${opts.errMsg}，${t("listLoadFailMsg")}<br/></span>`);
+  const errEl = createElement(`<span><span class="error-message"></span><br/><br/></span>`);
+  errEl.querySelector(".error-message").innerText = `${t("listLoadFailMsg")}
+${opts.errMsg}`;
   if (opts.retryFn) {
     const $retryBtn = createElement(`<span style="cursor:pointer;">${t("listRetry")}</span>`);
     $retryBtn.onclick = () => opts.retryFn && opts.retryFn();
     errEl.appendChild($retryBtn);
   }
   if (opts.onOpenSidebar) {
-    const $openSidebar = createElement(`<span atk-only-admin-show> | <span style="cursor:pointer;">${t("open") + t("ctrlCenter")}</span></span>`);
+    const $openSidebar = createElement(`<span atk-only-admin-show> | <span style="cursor:pointer;">${t("openName", { name: t("ctrlCenter") })}</span></span>`);
     errEl.appendChild($openSidebar);
     $openSidebar.onclick = () => opts.onOpenSidebar && opts.onOpenSidebar();
   }
   setError(opts.$err, errEl);
 }
 const ConfRemoter = (ctx) => {
-  ctx.on("inited", () => {
-    if (ctx.conf.immediateFetch === false)
-      return;
-    ctx.trigger("conf-fetch");
+  ctx.on("created", () => {
+    if (ctx.conf.immediateFetch !== false)
+      ctx.trigger("conf-fetch");
   });
   ctx.on("conf-fetch", () => {
     loadConf(ctx);
   });
 };
 function loadConf(ctx) {
-  ctx.getApi().system.conf().then((data) => {
+  ctx.getApi().conf.conf().then((res) => {
+    var _a;
     let conf = {
-      apiVersion: data.version.version
+      apiVersion: (_a = res.data.version) == null ? void 0 : _a.version
       // version info
     };
     if (ctx.conf.useBackendConf) {
-      if (!data.frontend_conf)
+      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(data.frontend_conf));
+      conf = __spreadValues(__spreadValues({}, conf), handleConfFormServer(res.data.frontend_conf));
     }
     ctx.conf.remoteConfModifier && ctx.conf.remoteConfModifier(conf);
     ctx.updateConf(conf);
@@ -4865,7 +5677,10 @@ function loadConf(ctx) {
       }) : 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;
@@ -4875,7 +5690,7 @@ function loadConf(ctx) {
 }
 const Markdown = (ctx) => {
   initMarked();
-  ctx.on("conf-loaded", (conf) => {
+  ctx.on("updated", (conf) => {
     if (conf.markedReplacers)
       setReplacers(conf.markedReplacers);
   });
@@ -4963,23 +5778,27 @@ class SubmitAddPreset {
   }
   reqAdd() {
     return __async(this, null, function* () {
-      const nComment = yield this.kit.useApi().comment.add(__spreadValues({}, this.getSubmitAddParams()));
+      const nComment = (yield this.kit.useApi().comments.createComment(__spreadValues({}, yield this.getSubmitAddParams()))).data;
       return nComment;
     });
   }
   getSubmitAddParams() {
-    const { nick, email, link } = this.kit.useUser().getData();
-    const conf = this.kit.useConf();
-    return {
-      content: this.kit.useEditor().getContentFinal(),
-      nick,
-      email,
-      link,
-      rid: 0,
-      page_key: conf.pageKey,
-      page_title: conf.pageTitle,
-      site_name: conf.site
-    };
+    return __async(this, null, function* () {
+      const { nick, email, link } = this.kit.useUser().getData();
+      const conf = this.kit.useConf();
+      return {
+        content: this.kit.useEditor().getContentFinal(),
+        name: nick,
+        email,
+        link,
+        rid: 0,
+        page_key: conf.pageKey,
+        page_title: conf.pageTitle,
+        site_name: conf.site,
+        ua: yield getCorrectUserAgent()
+        // Get the corrected UA
+      };
+    });
   }
   postSubmitAdd(commentNew) {
     this.kit.useGlobalCtx().getData().insertComment(commentNew);
@@ -5024,7 +5843,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.msg || String(err)}`, "e");
         return;
       } finally {
         this.kit.useEditor().hideLoading();
@@ -5055,12 +5874,12 @@ class StateReply extends EditorPlug {
         req: () => __async(this, null, function* () {
           if (!this.comment)
             throw new Error("reply comment cannot be empty");
-          const nComment = yield this.kit.useApi().comment.add(__spreadProps(__spreadValues({}, defaultPreset.getSubmitAddParams()), {
+          const nComment = (yield this.kit.useApi().comments.createComment(__spreadProps(__spreadValues({}, yield defaultPreset.getSubmitAddParams()), {
             rid: this.comment.id,
             page_key: this.comment.page_key,
             page_title: void 0,
             site_name: this.comment.site_name
-          }));
+          }))).data;
           return nComment;
         }),
         post: (nComment) => {
@@ -5127,8 +5946,9 @@ class StateEdit extends EditorPlug {
             email: this.kit.useUI().$email.value,
             link: this.kit.useUI().$link.value
           };
-          const nComment = yield this.kit.useApi().comment.commentEdit(__spreadValues(__spreadValues({}, this.comment), saveData));
-          return nComment;
+          const comment = this.comment;
+          const nComment = yield this.kit.useApi().comments.updateComment(comment.id, __spreadValues(__spreadValues({}, comment), saveData));
+          return nComment.data;
         }),
         post: (nComment) => {
           this.kit.useGlobalCtx().getData().updateComment(nComment);
@@ -5276,12 +6096,12 @@ class HeaderUser extends EditorPlug {
       this.query.abortFn();
     this.query.timer = window.setTimeout(() => {
       this.query.timer = null;
-      const { req, abort } = this.kit.useApi().user.userGet(
-        this.kit.useUser().getData().nick,
-        this.kit.useUser().getData().email
-      );
-      this.query.abortFn = abort;
-      req.then((data) => this.onUserInfoFetched(data)).catch((err) => {
+      const api = this.kit.useApi();
+      const CANCEL_TOKEN = "getUserCancelToken";
+      this.query.abortFn = () => api.abortRequest(CANCEL_TOKEN);
+      api.user.getUser(__spreadValues({}, api.getUserFields()), {
+        cancelToken: CANCEL_TOKEN
+      }).then((res) => this.onUserInfoFetched(res.data)).catch((err) => {
       }).finally(() => {
         this.query.abortFn = null;
       });
@@ -5296,7 +6116,7 @@ class HeaderUser extends EditorPlug {
     var _a;
     if (!data.is_login)
       this.kit.useUser().logout();
-    this.kit.useGlobalCtx().getData().updateUnreads(data.unread);
+    this.kit.useGlobalCtx().getData().updateNotifies(data.notifies);
     if (this.kit.useUser().checkHasBasicUserInfo() && !data.is_login && ((_a = data.user) == null ? void 0 : _a.is_admin)) {
       this.kit.useGlobalCtx().checkAdmin({
         onSuccess: () => {
@@ -5390,7 +6210,7 @@ class Emoticons extends EditorPlug {
         data = [data];
       }
       if (!Array.isArray(data)) {
-        setError(this.$panel, "表情包数据必须为 Array/Object/String 类型");
+        setError(this.$panel, `[${t("emoticon")}] Data must be of Array/Object/String type`);
         hideLoading(this.$panel);
         return [];
       }
@@ -5447,7 +6267,7 @@ class Emoticons extends EditorPlug {
       } catch (err) {
         hideLoading(this.$panel);
         console.error("[Emoticons] Load Failed:", err);
-        setError(this.$panel, `${t("emoticon")}${t("loadFail")} ${String(err)}`);
+        setError(this.$panel, `[${t("emoticon")}] ${t("loadFail")}: ${String(err)}`);
         return [];
       }
     });
@@ -5669,16 +6489,16 @@ class Upload extends EditorPlug {
       try {
         const customUploaderFn = this.kit.useConf().imgUploader;
         if (!customUploaderFn) {
-          resp = yield this.kit.useApi().upload.imgUpload(file);
+          resp = (yield this.kit.useApi().upload.upload({ file })).data;
         } else {
-          resp = { img_url: yield customUploaderFn(file) };
+          resp = { public_url: yield customUploaderFn(file) };
         }
       } catch (err) {
         console.error(err);
-        this.kit.useEditor().showNotify(`${t("uploadFail")}，${err.msg}`, "e");
+        this.kit.useEditor().showNotify(`${t("uploadFail")}: ${err.msg}`, "e");
       }
-      if (!!resp && resp.img_url) {
-        let imgURL = resp.img_url;
+      if (!!resp && resp.public_url) {
+        let imgURL = resp.public_url;
         if (!isValidURL(imgURL))
           imgURL = getURLBasedOnApi({
             base: this.kit.useConf().server,
@@ -5719,7 +6539,7 @@ class Preview extends EditorPlug {
     this.$panel.innerHTML = this.kit.useEditor().getContentMarked();
   }
 }
-const ENABLED_PLUGS = [
+const EDITOR_PLUGS = [
   // Core
   LocalStorage,
   HeaderEvent,
@@ -5737,13 +6557,13 @@ const ENABLED_PLUGS = [
   Upload,
   Preview
 ];
-function getDisabledPlugByConf(conf) {
-  return [
-    { k: Upload, v: conf.imgUpload },
-    { k: Emoticons, v: conf.emoticons },
-    { k: Preview, v: conf.preview },
-    { k: Mover, v: conf.editorTravel }
-  ].filter((n) => !n.v).flatMap((n) => n.k);
+function getEnabledPlugs(conf) {
+  const confRefs = /* @__PURE__ */ new Map();
+  confRefs.set(Upload, conf.imgUpload);
+  confRefs.set(Emoticons, conf.emoticons);
+  confRefs.set(Preview, conf.preview);
+  confRefs.set(Mover, conf.editorTravel);
+  return EDITOR_PLUGS.filter((p) => !confRefs.has(p) || !!confRefs.get(p));
 }
 class PlugKit {
   constructor(plugs) {
@@ -5806,11 +6626,16 @@ class PlugManager {
     __publicField(this, "events", new EventManager());
     this.editor = editor;
     let confLoaded = false;
-    this.editor.ctx.on("conf-loaded", () => {
+    this.editor.ctx.watchConf([
+      "imgUpload",
+      "emoticons",
+      "preview",
+      "editorTravel",
+      "locale"
+    ], (conf) => {
       confLoaded && this.getEvents().trigger("unmounted");
       this.clear();
-      const DISABLED = getDisabledPlugByConf(this.editor.ctx.conf);
-      ENABLED_PLUGS.filter((p) => !DISABLED.includes(p)).forEach((Plug) => {
+      getEnabledPlugs(conf).forEach((Plug) => {
         const kit = new PlugKit(this);
         this.plugs.push(new Plug(kit));
       });
@@ -5836,6 +6661,9 @@ 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 */
@@ -5900,7 +6728,7 @@ class PlugManager {
 }
 const WithEditor = (ctx) => {
   let $closeCommentBtn;
-  ctx.on("inited", () => {
+  ctx.on("mounted", () => {
     const list = ctx.get("list");
     $closeCommentBtn = list.$el.querySelector('[data-action="admin-close-comment"]');
     $closeCommentBtn.addEventListener("click", () => {
@@ -5928,8 +6756,8 @@ const WithEditor = (ctx) => {
 };
 function adminPageEditSave(ctx, page) {
   ctx.editorShowLoading();
-  ctx.getApi().page.pageEdit(page).then((respPage) => {
-    ctx.getData().updatePage(respPage);
+  ctx.getApi().pages.updatePage(page.id, page).then(({ data }) => {
+    ctx.getData().updatePage(data);
   }).catch((err) => {
     ctx.editorShowNotify(`${t("editFail")}: ${err.msg || String(err)}`, "e");
   }).finally(() => {
@@ -5939,13 +6767,13 @@ function adminPageEditSave(ctx, page) {
 const Unread = (ctx) => {
   ctx.on("comment-rendered", (comment) => {
     if (ctx.conf.listUnreadHighlight === true) {
-      const unreads = ctx.getData().getUnreads();
-      const notify = unreads.find((o) => o.comment_id === comment.getID());
+      const notifies = ctx.getData().getNotifies();
+      const notify = notifies.find((o) => o.comment_id === comment.getID());
       if (notify) {
         comment.getRender().setUnread(true);
         comment.getRender().setOpenAction(() => {
           window.open(notify.read_link);
-          ctx.getData().updateUnreads(unreads.filter((o) => o.comment_id !== comment.getID()));
+          ctx.getData().updateNotifies(notifies.filter((o) => o.comment_id !== comment.getID()));
         });
       } else {
         comment.getRender().setUnread(false);
@@ -5955,8 +6783,8 @@ const Unread = (ctx) => {
   ctx.on("list-goto", (commentID) => {
     const notifyKey = getQueryParam("atk_notify_key");
     if (notifyKey) {
-      ctx.getApi().user.markRead(commentID, notifyKey).then(() => {
-        ctx.getData().updateUnreads(ctx.getData().getUnreads().filter((o) => o.comment_id !== commentID));
+      ctx.getApi().notifies.markNotifyRead(commentID, notifyKey).then(() => {
+        ctx.getData().updateNotifies(ctx.getData().getNotifies().filter((o) => o.comment_id !== commentID));
       });
     }
   });
@@ -5968,7 +6796,7 @@ const Count = (ctx) => {
     const $count = list.$el.querySelector(".atk-comment-count .atk-text");
     if (!$count)
       return;
-    const text = htmlEncode(t("counter", { count: `${Number((_b = (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.data) == null ? void 0 : _b.total) || 0}` }));
+    const text = htmlEncode(t("counter", { count: `${Number((_b = (_a = ctx.getData().getListLastFetch()) == null ? void 0 : _a.data) == null ? void 0 : _b.count) || 0}` }));
     $count.innerHTML = text.replace(/(\d+)/, '<span class="atk-comment-count-num">$1</span>');
   };
   ctx.on("list-loaded", () => {
@@ -5977,12 +6805,12 @@ const Count = (ctx) => {
   ctx.on("comment-inserted", () => {
     const last = ctx.getData().getListLastFetch();
     if (last == null ? void 0 : last.data)
-      last.data.total += 1;
+      last.data.count += 1;
   });
   ctx.on("comment-deleted", () => {
     const last = ctx.getData().getListLastFetch();
     if (last == null ? void 0 : last.data)
-      last.data.total -= 1;
+      last.data.count -= 1;
   });
 };
 const SidebarBtn = (ctx) => {
@@ -6000,7 +6828,7 @@ const SidebarBtn = (ctx) => {
       $openSidebarBtn.classList.add("atk-hide");
     }
   };
-  ctx.on("conf-loaded", () => {
+  ctx.watchConf(["locale"], (conf) => {
     const list = ctx.get("list");
     $openSidebarBtn = list.$el.querySelector('[data-action="open-sidebar"]');
     if (!$openSidebarBtn)
@@ -6026,12 +6854,12 @@ const UnreadBadge = (ctx) => {
       $unreadBadge.style.display = "none";
     }
   };
-  ctx.on("conf-loaded", () => {
+  ctx.on("mounted", () => {
     const list = ctx.get("list");
     $unreadBadge = list.$el.querySelector(".atk-unread-badge");
   });
-  ctx.on("unreads-updated", (unreads) => {
-    showUnreadBadge(unreads.length || 0);
+  ctx.on("notifies-updated", (notifies) => {
+    showUnreadBadge(notifies.length || 0);
   });
 };
 const Goto = (ctx) => {
@@ -6047,11 +6875,11 @@ const Goto = (ctx) => {
     delayGoto = false;
     check2();
   };
-  ctx.on("inited", () => {
+  ctx.on("mounted", () => {
     window.addEventListener("hashchange", hashChangeHandler);
     ctx.on("list-loaded", check2);
   });
-  ctx.on("destroy", () => {
+  ctx.on("unmounted", () => {
     window.removeEventListener("hashchange", hashChangeHandler);
     ctx.off("list-loaded", check2);
   });
@@ -6089,9 +6917,9 @@ function extractCommentID() {
   }
   return commentId || null;
 }
-const version = "2.7.3";
+const version = "2.8.0";
 const Copyright = (ctx) => {
-  ctx.on("conf-loaded", () => {
+  ctx.on("mounted", () => {
     const list = ctx.get("list");
     const $copyright = list.$el.querySelector(".atk-copyright");
     if (!$copyright)
@@ -6100,7 +6928,14 @@ const Copyright = (ctx) => {
   });
 };
 const NoComment = (ctx) => {
+  let isFetching = false;
+  ctx.on("list-fetch", (params) => {
+    isFetching = true;
+  });
   ctx.on("list-loaded", (comments) => {
+    if (!isFetching)
+      return;
+    isFetching = false;
     const list = ctx.get("list");
     const isNoComment = comments.length <= 0;
     let $noComment = list.getCommentsWrapEl().querySelector(".atk-list-no-comment");
@@ -6147,12 +6982,12 @@ const Dropdown = (ctx) => {
       ]
     });
   };
-  ctx.on("conf-loaded", () => {
+  ctx.watchConf(["listSort", "locale"], (conf) => {
     const list = ctx.get("list");
     const $count = list.$el.querySelector(".atk-comment-count");
     if (!$count)
       return;
-    if (ctx.conf.listSort) {
+    if (conf.listSort) {
       initDropdown($count);
     } else {
       removeDropdown({
@@ -6205,7 +7040,7 @@ function removeDropdown(conf) {
 }
 const TimeTicking = (ctx) => {
   let timer = null;
-  ctx.on("inited", () => {
+  ctx.on("mounted", () => {
     timer = window.setInterval(() => {
       const list = ctx.get("list");
       list.$el.querySelectorAll("[data-atk-comment-date]").forEach((el) => {
@@ -6214,7 +7049,7 @@ const TimeTicking = (ctx) => {
       });
     }, 30 * 1e3);
   });
-  ctx.on("destroy", () => {
+  ctx.on("unmounted", () => {
     timer && window.clearInterval(timer);
   });
 };
@@ -6223,7 +7058,7 @@ const ErrorDialog = (ctx) => {
     const list = ctx.get("list");
     setError(list.$el, null);
   });
-  ctx.on("list-error", (err) => {
+  ctx.on("list-failed", (err) => {
     showErrorDialog({
       $err: ctx.get("list").$el,
       errMsg: err.msg,
@@ -6259,11 +7094,19 @@ const Fetch = (ctx) => {
     ctx.getData().setListLastFetch({
       params
     });
-    ctx.getApi().comment.get(params.offset, params.limit, params.flatMode, params.paramsModifier).then((data) => {
+    const reqParams = {
+      limit: params.limit,
+      offset: params.offset,
+      flat_mode: params.flatMode,
+      page_key: ctx.getConf().pageKey,
+      site_name: ctx.getConf().site
+    };
+    if (params.paramsModifier)
+      params.paramsModifier(reqParams);
+    ctx.getApi().comments.getComments(__spreadValues(__spreadValues({}, reqParams), ctx.getApi().getUserFields())).then(({ data }) => {
       ctx.getData().setListLastFetch({ params, data });
       ctx.getData().loadComments(data.comments);
       ctx.getData().updatePage(data.page);
-      ctx.getData().updateUnreads(data.unread || []);
       params.onSuccess && params.onSuccess(data);
       ctx.trigger("list-fetched", { params, data });
     }).catch((e) => {
@@ -6272,7 +7115,7 @@ const Fetch = (ctx) => {
         data: e.data
       };
       params.onError && params.onError(error);
-      ctx.trigger("list-error", error);
+      ctx.trigger("list-failed", error);
       ctx.trigger("list-fetched", { params, error });
       throw e;
     }).finally(() => {
@@ -6281,15 +7124,19 @@ const Fetch = (ctx) => {
   });
 };
 const ReachBottom = (ctx) => {
-  const scrollEvtAt = document;
   let observer = null;
   const setupObserver = ($target) => {
+    const scrollEvtAt = ctx.conf.scrollRelativeTo && ctx.conf.scrollRelativeTo() || null;
     observer = new IntersectionObserver(([entries]) => {
       if (entries.isIntersecting) {
         clearObserver();
         ctx.trigger("list-reach-bottom");
       }
     }, {
+      threshold: 0.9,
+      // when the target is 90% visible
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
+      // If the root is null, then the bounds of the actual document viewport are used.
       root: scrollEvtAt
     });
     observer.observe($target);
@@ -6301,7 +7148,8 @@ const ReachBottom = (ctx) => {
   ctx.on("list-loaded", () => {
     clearObserver();
     const list = ctx.get("list");
-    const $target = list.getCommentsWrapEl().querySelector(".atk-comment-wrap:nth-last-child(3)");
+    const children = list.getCommentsWrapEl().childNodes;
+    const $target = children.length > 2 ? children[children.length - 2] : null;
     if (!$target)
       return;
     if (!("IntersectionObserver" in window)) {
@@ -6310,7 +7158,7 @@ const ReachBottom = (ctx) => {
     }
     setupObserver($target);
   });
-  ctx.on("destroy", () => {
+  ctx.on("unmounted", () => {
     clearObserver();
   });
 };
@@ -6323,10 +7171,10 @@ const GotoFirst = (ctx) => {
       left: 0
     });
   };
-  ctx.on("inited", () => {
+  ctx.on("mounted", () => {
     ctx.on("list-goto-first", handler);
   });
-  ctx.on("destroy", () => {
+  ctx.on("unmounted", () => {
     ctx.off("list-goto-first", handler);
   });
 };
@@ -6347,14 +7195,32 @@ const ListPlugins = [
   ReachBottom,
   GotoFirst
 ];
+const Notifies = (ctx) => {
+  ctx.on("list-fetch", (params) => {
+    if (params.offset !== 0)
+      return;
+    const user = ctx.getApi().getUserFields();
+    if (!user)
+      return;
+    ctx.getApi().notifies.getNotifies(user).then((res) => {
+      ctx.getData().updateNotifies(res.data.notifies);
+    });
+  });
+};
 const PvCountWidget = (ctx) => {
-  ctx.on("conf-loaded", () => {
+  ctx.watchConf([
+    "site",
+    "pageKey",
+    "countEl",
+    "pvEl"
+  ], (conf) => {
     initCountWidget({
       getApi: () => ctx.getApi(),
-      pageKey: ctx.conf.pageKey,
-      countEl: ctx.conf.countEl,
-      pvEl: ctx.conf.pvEl,
-      pvAdd: true
+      siteName: conf.site,
+      pageKey: conf.pageKey,
+      countEl: conf.countEl,
+      pvEl: conf.pvEl,
+      pvAdd: typeof ctx.conf.pvAdd === "boolean" ? ctx.conf.pvAdd : true
     });
   });
 };
@@ -6364,7 +7230,11 @@ function initCountWidget(opt) {
       refreshStatCount(opt, { query: "page_comment", numEl: opt.countEl });
     }
     const initialData = opt.pvAdd ? {
-      [opt.pageKey]: yield opt.getApi().page.pv()
+      [opt.pageKey]: (yield opt.getApi().pages.logPv({
+        page_key: opt.pageKey,
+        page_title: opt.pageKey,
+        site_name: opt.siteName
+      })).data.pv
       // pv+1 and get pv count
     } : void 0;
     if (opt.pvEl && document.querySelector(opt.pvEl)) {
@@ -6382,7 +7252,10 @@ function refreshStatCount(opt, args) {
     let queryPageKeys = Array.from(document.querySelectorAll(args.numEl)).map((e) => e.getAttribute("data-page-key") || opt.pageKey).filter((k) => typeof data[k] !== "number");
     queryPageKeys = [...new Set(queryPageKeys)];
     if (queryPageKeys.length > 0) {
-      const res = yield opt.getApi().page.stat(args.query, queryPageKeys);
+      const res = (yield opt.getApi().stats.getStats(args.query, {
+        page_keys: queryPageKeys.join(","),
+        site_name: opt.siteName
+      })).data.data;
       data = __spreadValues(__spreadValues({}, data), res);
     }
     applyCountData(args.numEl, data, data[opt.pageKey]);
@@ -6397,10 +7270,10 @@ function applyCountData(selector, data, defaultCount) {
 }
 let IgnoreVersionCheck = false;
 const VersionCheck = (ctx) => {
-  ctx.on("conf-loaded", () => {
+  ctx.watchConf(["apiVersion", "versionCheck"], (conf) => {
     const list = ctx.get("list");
-    if (ctx.conf.apiVersion && ctx.conf.versionCheck && !IgnoreVersionCheck)
-      versionCheck(list, version, ctx.conf.apiVersion);
+    if (conf.apiVersion && conf.versionCheck && !IgnoreVersionCheck)
+      versionCheck(list, version, conf.apiVersion);
   });
 };
 function versionCheck(list, feVer, beVer) {
@@ -6480,10 +7353,9 @@ const DarkMode = (ctx) => {
       updateClassnames($els, darkMode);
     }
   };
-  ctx.on("inited", () => sync(ctx.conf.darkMode));
-  ctx.on("conf-loaded", (conf) => sync(conf.darkMode));
-  ctx.on("dark-mode-changed", (darkMode) => sync(darkMode));
-  ctx.on("destroy", () => {
+  ctx.watchConf(["darkMode"], (conf) => sync(conf.darkMode));
+  ctx.on("created", () => sync(ctx.conf.darkMode));
+  ctx.on("unmounted", () => {
     darkModeAutoHandler && (darkModeMedia == null ? void 0 : darkModeMedia.removeEventListener("change", darkModeAutoHandler));
     darkModeAutoHandler = void 0;
   });
@@ -6494,6 +7366,7 @@ const DefaultPlugins = [
   EditorKit,
   AdminOnlyElem,
   ...ListPlugins,
+  Notifies,
   PvCountWidget,
   VersionCheck,
   DarkMode
@@ -6515,7 +7388,7 @@ class Artalk {
       if (typeof plugin === "function")
         plugin(this.ctx);
     });
-    this.ctx.trigger("inited");
+    this.ctx.trigger("created");
   }
   /** Get the config of Artalk */
   getConf() {
@@ -6536,7 +7409,7 @@ class Artalk {
   }
   /** Destroy instance of Artalk */
   destroy() {
-    this.ctx.trigger("destroy");
+    this.ctx.trigger("unmounted");
     this.ctx.$root.remove();
   }
   /** Add an event listener */
@@ -6572,7 +7445,8 @@ class Artalk {
   static loadCountWidget(c) {
     const conf = handelCustomConf(c, true);
     initCountWidget({
-      getApi: () => new Api(convertApiOptions(conf)),
+      getApi: () => new Api2(convertApiOptions(conf)),
+      siteName: conf.site,
       pageKey: conf.pageKey,
       countEl: conf.countEl,
       pvEl: conf.pvEl,