artalk 2.2.12 → 2.3.2

package/dist/Artalk.es.js

@@ -42,9 +42,146 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 var main = "";
+var en = {
+  placeholder: "Leave a comment",
+  noComment: "No Comment",
+  send: "Send",
+  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",
+  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",
+  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.",
+  delete: "Delete",
+  deleteConfirm: "Confirm",
+  pin: "Pin",
+  unpin: "Unpin",
+  seconds: "seconds ago",
+  minutes: "minutes ago",
+  hours: "hours ago",
+  days: "days ago",
+  now: "just now",
+  adminCheck: "Enter admin password:",
+  captchaCheck: "Enter the CAPTCHA to continue:",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  msgCenter: "Messages",
+  ctrlCenter: "Admin",
+  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"
+};
+const zhCN = {
+  placeholder: "\u952E\u5165\u5185\u5BB9...",
+  noComment: "\u300C\u6B64\u65F6\u65E0\u58F0\u80DC\u6709\u58F0\u300D",
+  send: "\u53D1\u9001\u8BC4\u8BBA",
+  nick: "\u6635\u79F0",
+  email: "\u90AE\u4EF6",
+  link: "\u7F51\u5740",
+  emoticon: "\u8868\u60C5",
+  preview: "\u9884\u89C8",
+  image: "\u56FE\u7247",
+  uploadFail: "\u4E0A\u4F20\u5931\u8D25",
+  commentFail: "\u8BC4\u8BBA\u5931\u8D25",
+  restoredMsg: "\u5185\u5BB9\u5DF2\u81EA\u52A8\u6062\u590D",
+  onlyAdminCanReply: "\u4EC5\u7BA1\u7406\u5458\u53EF\u8BC4\u8BBA",
+  uploadLoginMsg: "\u586B\u5165\u4F60\u7684\u540D\u5B57\u90AE\u7BB1\u624D\u80FD\u4E0A\u4F20\u54E6",
+  counter: "{count} \u6761\u8BC4\u8BBA",
+  sortLatest: "\u6700\u65B0",
+  sortOldest: "\u6700\u65E9",
+  sortBest: "\u6700\u70ED",
+  sortAuthor: "\u4F5C\u8005",
+  openComment: "\u6253\u5F00\u8BC4\u8BBA",
+  closeComment: "\u5173\u95ED\u8BC4\u8BBA",
+  listLoadFailMsg: "\u65E0\u6CD5\u83B7\u53D6\u8BC4\u8BBA\u5217\u8868\u6570\u636E",
+  listRetry: "\u70B9\u51FB\u91CD\u65B0\u83B7\u53D6",
+  loadMore: "\u52A0\u8F7D\u66F4\u591A",
+  admin: "\u7BA1\u7406\u5458",
+  reply: "\u56DE\u590D",
+  voteUp: "\u8D5E\u540C",
+  voteDown: "\u53CD\u5BF9",
+  voteFail: "\u6295\u7968\u5931\u8D25",
+  readMore: "\u9605\u8BFB\u66F4\u591A",
+  actionConfirm: "\u786E\u8BA4\u64CD\u4F5C",
+  collapse: "\u6298\u53E0",
+  collapsed: "\u5DF2\u6298\u53E0",
+  collapsedMsg: "\u8BE5\u8BC4\u8BBA\u5DF2\u88AB\u7CFB\u7EDF\u6216\u7BA1\u7406\u5458\u6298\u53E0",
+  expand: "\u53D6\u6D88\u6298\u53E0",
+  approved: "\u5DF2\u5BA1",
+  pending: "\u5F85\u5BA1",
+  pendingMsg: "\u5BA1\u6838\u4E2D\uFF0C\u4EC5\u672C\u4EBA\u53EF\u89C1\u3002",
+  delete: "\u5220\u9664",
+  deleteConfirm: "\u786E\u8BA4\u5220\u9664",
+  pin: "\u7F6E\u9876",
+  unpin: "\u53D6\u6D88\u7F6E\u9876",
+  seconds: "\u79D2\u524D",
+  minutes: "\u5206\u949F\u524D",
+  hours: "\u5C0F\u65F6\u524D",
+  days: "\u5929\u524D",
+  now: "\u521A\u521A",
+  adminCheck: "\u952E\u5165\u5BC6\u7801\u6765\u9A8C\u8BC1\u7BA1\u7406\u5458\u8EAB\u4EFD\uFF1A",
+  captchaCheck: "\u952E\u5165\u9A8C\u8BC1\u7801\u7EE7\u7EED\uFF1A",
+  confirm: "\u786E\u8BA4",
+  cancel: "\u53D6\u6D88",
+  msgCenter: "\u901A\u77E5\u4E2D\u5FC3",
+  ctrlCenter: "\u63A7\u5236\u4E2D\u5FC3",
+  frontend: "\u524D\u7AEF",
+  backend: "\u540E\u7AEF",
+  loading: "\u52A0\u8F7D\u4E2D",
+  loadFail: "\u52A0\u8F7D\u5931\u8D25",
+  editing: "\u4FEE\u6539\u4E2D",
+  editFail: "\u4FEE\u6539\u5931\u8D25",
+  deleting: "\u5220\u9664\u4E2D",
+  deleteFail: "\u5220\u9664\u5931\u8D25",
+  reqGot: "\u8BF7\u6C42\u54CD\u5E94",
+  reqAborted: "\u8BF7\u6C42\u8D85\u65F6\u6216\u610F\u5916\u7EC8\u6B62"
+};
+const internal = {
+  "en": en,
+  "en-US": en,
+  "zh-CN": zhCN
+};
 class User {
-  constructor(conf) {
+  constructor(ctx) {
+    __publicField(this, "ctx");
     __publicField(this, "data");
+    this.ctx = ctx;
     const localUser = JSON.parse(window.localStorage.getItem("ArtalkUser") || "{}");
     this.data = {
       nick: localUser.nick || "",
@@ -54,79 +191,23 @@ class User {
       isAdmin: localUser.isAdmin || false
     };
   }
-  save() {
+  update(obj = {}) {
+    Object.entries(obj).forEach(([key, value]) => {
+      this.data[key] = value;
+    });
     window.localStorage.setItem("ArtalkUser", JSON.stringify(this.data));
+    this.ctx.trigger("user-changed", this.ctx.user.data);
   }
-  checkHasBasicUserInfo() {
-    return !!this.data.nick && !!this.data.email;
-  }
-}
-class Context {
-  constructor(rootEl, conf) {
-    __publicField(this, "cid");
-    __publicField(this, "$root");
-    __publicField(this, "conf");
-    __publicField(this, "user");
-    __publicField(this, "eventList", []);
-    __publicField(this, "markedInstance");
-    __publicField(this, "markedReplacers", []);
-    this.cid = +new Date();
-    this.$root = rootEl;
-    this.conf = conf;
-    this.user = new User(this.conf);
-    this.$root.setAttribute("atk-run-id", this.cid.toString());
-  }
-  on(name, handler, scope = "internal") {
-    this.eventList.push({ name, handler, scope });
-  }
-  off(name, handler, scope = "internal") {
-    this.eventList = this.eventList.filter((evt) => {
-      if (handler)
-        return !(evt.name === name && evt.handler === handler && evt.scope === scope);
-      return !(evt.name === name && evt.scope === scope);
+  logout() {
+    this.update({
+      token: "",
+      isAdmin: false
     });
   }
-  trigger(name, payload, scope) {
-    this.eventList.filter((evt) => evt.name === name && (scope ? evt.scope === scope : true)).map((evt) => evt.handler).forEach((handler) => handler(payload));
+  checkHasBasicUserInfo() {
+    return !!this.data.nick && !!this.data.email;
   }
 }
-const defaults$3 = {
-  el: "",
-  pageKey: "",
-  server: "",
-  site: "",
-  placeholder: "\u952E\u5165\u5185\u5BB9...",
-  noComment: "\u300C\u6B64\u65F6\u65E0\u58F0\u80DC\u6709\u58F0\u300D",
-  sendBtn: "\u53D1\u9001\u8BC4\u8BBA",
-  darkMode: "auto",
-  editorTravel: true,
-  flatMode: "auto",
-  nestMax: 2,
-  nestSort: "DATE_ASC",
-  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
-  vote: true,
-  voteDown: false,
-  uaBadge: true,
-  listSort: true,
-  pvEl: "#ArtalkPV",
-  gravatar: {
-    default: "mp",
-    mirror: "https://sdn.geekzu.org/avatar/"
-  },
-  pagination: {
-    pageSize: 20,
-    readMore: true,
-    autoLoad: true
-  },
-  heightLimit: {
-    content: 300,
-    children: 400
-  },
-  imgUpload: true,
-  reqTimeout: 15e3,
-  versionCheck: true,
-  useBackendConf: false
-};
 class Component {
   constructor(ctx) {
     __publicField(this, "$el");
@@ -135,6 +216,9 @@ class Component {
     this.ctx = ctx;
     this.conf = ctx.conf;
   }
+  $t(key, args = {}) {
+    return this.ctx.$t(key, args);
+  }
 }
 function getDefaults() {
   return {
@@ -159,9 +243,9 @@ function getDefaults() {
     xhtml: false
   };
 }
-let defaults$2 = getDefaults();
+let defaults$3 = getDefaults();
 function changeDefaults(newDefaults) {
-  defaults$2 = newDefaults;
+  defaults$3 = newDefaults;
 }
 const escapeTest = /[&<>"']/;
 const escapeReplace = /[&<>"']/g;
@@ -384,15 +468,14 @@ function outputLink(cap, link, raw, lexer) {
     };
     lexer.state.inLink = false;
     return token;
-  } else {
-    return {
-      type: "image",
-      raw,
-      href,
-      title,
-      text: escape(text)
-    };
   }
+  return {
+    type: "image",
+    raw,
+    href,
+    title,
+    text: escape(text)
+  };
 }
 function indentCodeCompensation(raw, text) {
   const matchIndentToCode = raw.match(/^(\s+)(?:```)/);
@@ -414,7 +497,7 @@ function indentCodeCompensation(raw, text) {
 }
 class Tokenizer {
   constructor(options) {
-    this.options = options || defaults$2;
+    this.options = options || defaults$3;
   }
   space(src) {
     const cap = this.rules.block.newline.exec(src);
@@ -541,7 +624,8 @@ class Tokenizer {
           endEarly = true;
         }
         if (!endEarly) {
-          const nextBulletRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:[*+-]|\\d{1,9}[.)])`);
+          const nextBulletRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:[*+-]|\\d{1,9}[.)])((?: [^\\n]*)?(?:\\n|$))`);
+          const hrRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`);
           while (src) {
             rawLine = src.split("\n", 1)[0];
             line = rawLine;
@@ -551,6 +635,9 @@ class Tokenizer {
             if (nextBulletRegex.test(line)) {
               break;
             }
+            if (hrRegex.test(src)) {
+              break;
+            }
             if (line.search(/[^ ]/) >= indent || !line.trim()) {
               itemContents += "\n" + line.slice(indent);
             } else if (!blankLine) {
@@ -686,14 +773,14 @@ class Tokenizer {
         l = item.header.length;
         for (j = 0; j < l; j++) {
           item.header[j].tokens = [];
-          this.lexer.inlineTokens(item.header[j].text, item.header[j].tokens);
+          this.lexer.inline(item.header[j].text, item.header[j].tokens);
         }
         l = item.rows.length;
         for (j = 0; j < l; j++) {
           row = item.rows[j];
           for (k = 0; k < row.length; k++) {
             row[k].tokens = [];
-            this.lexer.inlineTokens(row[k].text, row[k].tokens);
+            this.lexer.inline(row[k].text, row[k].tokens);
           }
         }
         return item;
@@ -1129,7 +1216,7 @@ class Lexer {
   constructor(options) {
     this.tokens = [];
     this.tokens.links = /* @__PURE__ */ Object.create(null);
-    this.options = options || defaults$2;
+    this.options = options || defaults$3;
     this.options.tokenizer = this.options.tokenizer || new Tokenizer();
     this.tokenizer = this.options.tokenizer;
     this.tokenizer.options = this.options;
@@ -1477,7 +1564,7 @@ class Lexer {
 }
 class Renderer {
   constructor(options) {
-    this.options = options || defaults$2;
+    this.options = options || defaults$3;
   }
   code(code, infostring, escaped) {
     const lang = (infostring || "").match(/\S*/)[0];
@@ -1647,7 +1734,7 @@ class Slugger {
 }
 class Parser {
   constructor(options) {
-    this.options = options || defaults$2;
+    this.options = options || defaults$3;
     this.options.renderer = this.options.renderer || new Renderer();
     this.renderer = this.options.renderer;
     this.renderer.options = this.options;
@@ -1938,7 +2025,7 @@ marked$1.options = marked$1.setOptions = function(opt) {
   return marked$1;
 };
 marked$1.getDefaults = getDefaults;
-marked$1.defaults = defaults$2;
+marked$1.defaults = defaults$3;
 marked$1.use = function(...args) {
   const opts = merge({}, ...args);
   const extensions = marked$1.defaults.extensions || { renderers: {}, childTokens: {} };
@@ -2100,6 +2187,11 @@ marked$1.lexer = Lexer.lex;
 marked$1.Tokenizer = Tokenizer;
 marked$1.Slugger = Slugger;
 marked$1.parse = marked$1;
+marked$1.options;
+marked$1.setOptions;
+marked$1.use;
+marked$1.walkTokens;
+marked$1.parseInline;
 Parser.parse;
 Lexer.lex;
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -2421,7 +2513,7 @@ function sanitizer$1(buffer, options) {
   }
 }
 var sanitizer_1 = sanitizer$1;
-var defaults$1 = {
+var defaults$2 = {
   allowedAttributes: {
     a: ["href", "name", "target", "title", "aria-label"],
     iframe: ["allowfullscreen", "frameborder", "src"],
@@ -2477,19 +2569,19 @@ var defaults$1 = {
   ],
   filter: null
 };
-var defaults_1 = defaults$1;
+var defaults_1 = defaults$2;
 var assign = assignment_1;
 var parser = parser_1;
 var sanitizer = sanitizer_1;
-var defaults = defaults_1;
+var defaults$1 = defaults_1;
 function insane(html, options, strict) {
   var buffer = [];
-  var configuration = strict === true ? options : assign({}, defaults, options);
+  var configuration = strict === true ? options : assign({}, defaults$1, options);
   var handler = sanitizer(buffer, configuration);
   parser(html, handler);
   return buffer.join("");
 }
-insane.defaults = defaults;
+insane.defaults = defaults$1;
 var insane_1 = insane;
 var hanabi$1 = { exports: {} };
 (function(module, exports) {
@@ -2586,7 +2678,7 @@ function dateFormat(date) {
   const vYear = padWithZeros(date.getFullYear(), 2);
   return `${vYear}-${vMonth}-${vDay}`;
 }
-function timeAgo(date) {
+function timeAgo(date, ctx) {
   try {
     const oldTime = date.getTime();
     const currTime = new Date().getTime();
@@ -2601,16 +2693,16 @@ function timeAgo(date) {
         if (minutes === 0) {
           const leave3 = leave2 % (60 * 1e3);
           const seconds = Math.round(leave3 / 1e3);
-          return `${seconds} \u79D2\u524D`;
+          return `${seconds} ${ctx.$t("seconds")}`;
         }
-        return `${minutes} \u5206\u949F\u524D`;
+        return `${minutes} ${ctx.$t("minutes")}`;
       }
-      return `${hours} \u5C0F\u65F6\u524D`;
+      return `${hours} ${ctx.$t("hours")}`;
     }
     if (days < 0)
-      return "\u521A\u521A";
+      return ctx.$t("now");
     if (days < 8) {
-      return `${days} \u5929\u524D`;
+      return `${days} ${ctx.$t("days")}`;
     }
     return dateFormat(date);
   } catch (error) {
@@ -2640,8 +2732,7 @@ function onImagesLoaded($container, event) {
   }
 }
 function getGravatarURL(ctx, emailMD5) {
-  var _a, _b;
-  return `${(((_a = ctx.conf.gravatar) == null ? void 0 : _a.mirror) || "").replace(/\/$/, "")}/${emailMD5}?d=${encodeURIComponent(((_b = ctx.conf.gravatar) == null ? void 0 : _b.default) || "")}&s=80`;
+  return `${ctx.conf.gravatar.mirror.replace(/\/$/, "")}/${emailMD5}?d=${encodeURIComponent(ctx.conf.gravatar.default)}&s=80`;
 }
 function versionCompare(a, b) {
   const pa = a.split(".");
@@ -2661,6 +2752,12 @@ function versionCompare(a, b) {
   return 0;
 }
 function initMarked(ctx) {
+  try {
+    if (!marked$1.name)
+      return;
+  } catch (e) {
+    return;
+  }
   const renderer = new marked$1.Renderer();
   const orgLinkRenderer = renderer.link;
   renderer.link = (href, title, text) => {
@@ -2697,7 +2794,12 @@ function initMarked(ctx) {
   ctx.markedInstance = nMarked;
 }
 function marked(ctx, src) {
-  let dest = insane_1(ctx.markedInstance.parse(src), {
+  var _a;
+  let markedContent = (_a = ctx.markedInstance) == null ? void 0 : _a.parse(src);
+  if (!markedContent) {
+    markedContent = src.replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${hanabi(code)}</code></pre>`).replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`).replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`).replace(/\n/g, "<br>");
+  }
+  let dest = insane_1(markedContent, {
     allowedClasses: {},
     allowedSchemes: ["http", "https", "mailto"],
     allowedTags: [
@@ -2837,9 +2939,7 @@ function mergeDeep(target, source) {
   return target;
 }
 function showLoading(parentElem, conf) {
-  if (parentElem instanceof Context)
-    parentElem = parentElem.$root;
-  let $loading = parentElem.querySelector(".atk-loading");
+  let $loading = parentElem.querySelector(":scope > .atk-loading");
   if (!$loading) {
     $loading = createElement(`<div class="atk-loading atk-fade-in" style="display: none;">
       <div class="atk-loading-spinner">
@@ -2860,9 +2960,7 @@ function showLoading(parentElem, conf) {
   }
 }
 function hideLoading(parentElem) {
-  if (parentElem instanceof Context)
-    parentElem = parentElem.$root;
-  const $loading = parentElem.querySelector(".atk-loading");
+  const $loading = parentElem.querySelector(":scope > .atk-loading");
   if ($loading)
     $loading.style.display = "none";
 }
@@ -2924,8 +3022,6 @@ function playFadeInAnim(elem, after) {
   playFadeAnim(elem, after, "in");
 }
 function setError(parentElem, html, title = '<span class="atk-error-title">Artalk Error</span>') {
-  if (parentElem instanceof Context)
-    parentElem = parentElem.$root;
   let elem = parentElem.querySelector(".atk-error-layer");
   if (html === null) {
     if (elem !== null)
@@ -3084,43 +3180,6 @@ function GetLayerWrap(ctx) {
   const $mask = $wrap.querySelector(".atk-layer-mask");
   return { $wrap, $mask };
 }
-class Dialog {
-  constructor(contentEl) {
-    __publicField(this, "$el");
-    __publicField(this, "$content");
-    __publicField(this, "$actions");
-    this.$el = createElement(`<div class="atk-layer-dialog-wrap">
-        <div class="atk-layer-dialog">
-          <div class="atk-layer-dialog-content"></div>
-          <div class="atk-layer-dialog-actions"></div>
-        </div>
-      </div>`);
-    this.$actions = this.$el.querySelector(".atk-layer-dialog-actions");
-    this.$content = this.$el.querySelector(".atk-layer-dialog-content");
-    this.$content.appendChild(contentEl);
-    return this;
-  }
-  setYes(handler) {
-    const btn = createElement('<button data-action="confirm">\u786E\u5B9A</button>');
-    btn.onclick = this.onBtnClick(handler);
-    this.$actions.appendChild(btn);
-    return this;
-  }
-  setNo(handler) {
-    const btn = createElement('<button data-action="cancel">\u53D6\u6D88</button>');
-    btn.onclick = this.onBtnClick(handler);
-    this.$actions.appendChild(btn);
-    return this;
-  }
-  onBtnClick(handler) {
-    return (evt) => {
-      const re = handler(evt.currentTarget, this);
-      if (re === void 0 || re === true) {
-        this.$el.remove();
-      }
-    };
-  }
-}
 function Fetch(ctx, input, init, timeout) {
   return __async(this, null, function* () {
     var _a, _b;
@@ -3129,12 +3188,12 @@ function Fetch(ctx, input, init, timeout) {
       headers.set("Authorization", `Bearer ${ctx.user.data.token}`);
       init.headers = headers;
     }
-    const resp = yield timeoutFetch(input, timeout || ctx.conf.reqTimeout || 15e3, init);
+    const resp = yield timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15e3, init);
     const respHttpCode = resp.status;
     const noAccessCodes = [401, 400];
     const isNoAccess = noAccessCodes.includes(respHttpCode);
     if (!resp.ok && !isNoAccess)
-      throw new Error(`\u8BF7\u6C42\u54CD\u5E94 ${respHttpCode}`);
+      throw new Error(`${ctx.$t("reqGot")} ${respHttpCode}`);
     let json = yield resp.json();
     const recall = (resolve, reject) => {
       Fetch(ctx, input, init).then((d) => {
@@ -3145,7 +3204,7 @@ function Fetch(ctx, input, init, timeout) {
     };
     if ((_a = json.data) == null ? void 0 : _a.need_captcha) {
       json = yield new Promise((resolve, reject) => {
-        ctx.trigger("checker-captcha", {
+        ctx.checkCaptcha({
           imgData: json.data.img_data,
           iframe: json.data.iframe,
           onSuccess: () => {
@@ -3158,7 +3217,7 @@ function Fetch(ctx, input, init, timeout) {
       });
     } else if (((_b = json.data) == null ? void 0 : _b.need_login) || isNoAccess) {
       json = yield new Promise((resolve, reject) => {
-        ctx.trigger("checker-admin", {
+        ctx.checkAdmin({
           onSuccess: () => {
             recall(resolve, reject);
           },
@@ -3189,7 +3248,7 @@ function ToFormData(object) {
   Object.keys(object).forEach((key) => formData.append(key, String(object[key])));
   return formData;
 }
-function timeoutFetch(url, ms, opts) {
+function timeoutFetch(ctx, url, ms, opts) {
   var _a;
   const controller = new AbortController();
   (_a = opts.signal) == null ? void 0 : _a.addEventListener("abort", () => controller.abort());
@@ -3201,7 +3260,7 @@ function timeoutFetch(url, ms, opts) {
     });
   }
   promise = promise.catch((err) => {
-    throw (err || {}).name === "AbortError" ? new Error("\u8BF7\u6C42\u8D85\u65F6\u6216\u610F\u5916\u7EC8\u6B62") : err;
+    throw (err || {}).name === "AbortError" ? new Error(ctx.$t("reqAborted")) : err;
   });
   return promise;
 }
@@ -3798,6 +3857,20 @@ class Api {
       return p.pv;
     });
   }
+  stat(type, pageKeys, limit) {
+    return __async(this, null, function* () {
+      const params = {
+        type,
+        site_name: this.ctx.conf.site || ""
+      };
+      if (pageKeys)
+        params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(",") : pageKeys;
+      if (limit)
+        params.limit = limit;
+      const data = yield POST(this.ctx, `${this.baseURL}/stat`, params);
+      return data;
+    });
+  }
   imgUpload(file) {
     return __async(this, null, function* () {
       const params = {
@@ -3859,136 +3932,374 @@ class Api {
     return POST(this.ctx, `${this.baseURL}/admin/cache-warm`, params);
   }
 }
-const CaptchaChecker = {
-  request(that, ctx, inputVal) {
-    return new Api(that.ctx).captchaCheck(inputVal);
-  },
-  body(that, ctx) {
-    if (that.captchaConf.iframe) {
-      const $iframeWrap = createElement(`<div class="atk-checker-iframe-wrap"></div>`);
-      const $iframe = createElement(`<iframe class="atk-fade-in"></iframe>`);
-      $iframe.style.display = "none";
-      showLoading($iframeWrap, { transparentBg: true });
-      $iframe.src = `${that.ctx.conf.server}/api/captcha/get?t=${+new Date()}`;
-      $iframe.onload = () => {
-        $iframe.style.display = "";
-        hideLoading($iframeWrap);
-      };
-      $iframeWrap.append($iframe);
-      const $closeBtn = createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`);
-      $iframeWrap.append($closeBtn);
-      ctx.hideInteractInput();
-      let stop = false;
-      const sleep = (ms) => new Promise((resolve) => {
-        window.setTimeout(() => {
-          resolve(null);
-        }, ms);
-      });
-      (function queryStatus() {
-        return __async(this, null, function* () {
-          yield sleep(1e3);
-          if (stop)
-            return;
-          let isPass = false;
-          try {
-            const resp = yield new Api(that.ctx).captchaStatus();
-            isPass = resp.is_pass;
-          } catch (e) {
-            isPass = false;
-          }
-          if (isPass) {
-            ctx.triggerSuccess();
-          } else {
-            queryStatus();
-          }
-        });
-      })();
-      $closeBtn.onclick = () => {
-        stop = true;
-        ctx.cancel();
-      };
-      return $iframeWrap;
-    }
-    const elem = createElement(`<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ""}" alt="\u9A8C\u8BC1\u7801">\u6572\u5165\u9A8C\u8BC1\u7801\u7EE7\u7EED\uFF1A</span>`);
-    elem.querySelector(".atk-captcha-img").onclick = () => {
-      const imgEl = elem.querySelector(".atk-captcha-img");
-      new Api(that.ctx).captchaGet().then((imgData) => {
-        imgEl.setAttribute("src", imgData);
-      }).catch((err) => {
-        console.error("\u9A8C\u8BC1\u7801\u83B7\u53D6\u5931\u8D25 ", err);
-      });
-    };
-    return elem;
-  },
-  onSuccess(that, ctx, data, inputVal, formEl) {
-    that.captchaConf.val = inputVal;
-  },
-  onError(that, ctx, err, inputVal, formEl) {
-    formEl.querySelector(".atk-captcha-img").click();
+class Context {
+  constructor(conf, $root) {
+    __publicField(this, "api");
+    __publicField(this, "editor");
+    __publicField(this, "list");
+    __publicField(this, "sidebarLayer");
+    __publicField(this, "checkerLauncher");
+    __publicField(this, "cid");
+    __publicField(this, "conf");
+    __publicField(this, "user");
+    __publicField(this, "$root");
+    __publicField(this, "markedInstance");
+    __publicField(this, "markedReplacers", []);
+    __publicField(this, "commentList", []);
+    __publicField(this, "eventList", []);
+    this.cid = +new Date();
+    this.conf = conf;
+    this.user = new User(this);
+    this.$root = $root || document.createElement("div");
+    this.$root.setAttribute("atk-run-id", this.cid.toString());
+    this.$root.classList.add("artalk");
+    this.$root.innerHTML = "";
+    this.api = new Api(this);
   }
-};
-const AdminChecker = {
-  inputType: "password",
-  request(that, ctx, inputVal) {
-    const data = {
-      name: that.ctx.user.data.nick,
-      email: that.ctx.user.data.email,
-      password: inputVal
-    };
-    return new Api(that.ctx).login(data.name, data.email, data.password);
-  },
-  body(that, ctx) {
-    return createElement("<span>\u6572\u5165\u5BC6\u7801\u6765\u9A8C\u8BC1\u7BA1\u7406\u5458\u8EAB\u4EFD\uFF1A</span>");
-  },
-  onSuccess(that, ctx, userToken, inputVal, formEl) {
-    that.ctx.user.data.isAdmin = true;
-    that.ctx.user.data.token = userToken;
-    that.ctx.user.save();
-    that.ctx.trigger("user-changed", that.ctx.user.data);
-    that.ctx.trigger("list-reload");
-  },
-  onError(that, ctx, err, inputVal, formEl) {
+  setApi(api) {
+    this.api = api;
   }
-};
-class CheckerLauncher {
-  constructor(ctx) {
-    __publicField(this, "ctx");
-    __publicField(this, "launched", []);
-    __publicField(this, "captchaConf", {});
-    this.ctx = ctx;
-    this.initEventBind();
+  setEditor(editor2) {
+    this.editor = editor2;
   }
-  initEventBind() {
-    this.ctx.on("checker-captcha", (conf) => {
-      if (conf.imgData)
-        this.captchaConf.imgData = conf.imgData;
-      if (conf.iframe)
-        this.captchaConf.iframe = conf.iframe;
-      this.fire(CaptchaChecker, conf);
-    });
-    this.ctx.on("checker-admin", (conf) => {
-      this.fire(AdminChecker, conf);
-    });
+  setList(list2) {
+    this.list = list2;
   }
-  fire(checker, payload) {
-    if (this.launched.includes(checker))
-      return;
-    this.launched.push(checker);
-    const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`);
-    layer.setMaskClickHide(false);
-    layer.show();
-    let hideInteractInput = false;
-    const checkerCtx = {
-      getLayer: () => layer,
-      hideInteractInput: () => {
-        hideInteractInput = true;
-      },
-      triggerSuccess: () => {
-        this.close(checker, layer);
-        if (checker.onSuccess)
-          checker.onSuccess(this, checkerCtx, "", "", formEl);
-        if (payload.onSuccess)
-          payload.onSuccess("", dialog.$el);
+  setSidebarLayer(sidebarLayer2) {
+    this.sidebarLayer = sidebarLayer2;
+  }
+  setCheckerLauncher(checkerLauncher) {
+    this.checkerLauncher = checkerLauncher;
+  }
+  getApi() {
+    return this.api;
+  }
+  getCommentList() {
+    return this.commentList;
+  }
+  getCommentDataList() {
+    return this.commentList.map((c) => c.getData());
+  }
+  findComment(id) {
+    return this.commentList.find((c) => c.getData().id === id);
+  }
+  deleteComment(_comment) {
+    let comment2;
+    if (typeof _comment === "number") {
+      const findComment = this.findComment(_comment);
+      if (!findComment)
+        throw Error(`Comment ${_comment} cannot be found`);
+      comment2 = findComment;
+    } else
+      comment2 = _comment;
+    comment2.getEl().remove();
+    this.commentList.splice(this.commentList.indexOf(comment2), 1);
+    const listData = this.list.getData();
+    if (listData)
+      listData.total -= 1;
+    this.list.refreshUI();
+  }
+  clearAllComments() {
+    this.list.getCommentsWrapEl().innerHTML = "";
+    this.list.clearData();
+    this.commentList = [];
+  }
+  insertComment(commentData) {
+    this.list.insertComment(commentData);
+  }
+  replyComment(commentData, $comment, scroll) {
+    this.editor.setReply(commentData, $comment, scroll);
+  }
+  cancelReplyComment() {
+    this.editor.cancelReply();
+  }
+  updateNotifies(notifies) {
+    this.list.updateUnread(notifies);
+  }
+  listReload() {
+    this.list.reload();
+  }
+  listRefreshUI() {
+    this.list.refreshUI();
+  }
+  editorOpen() {
+    this.editor.open();
+  }
+  editorClose() {
+    this.editor.close();
+  }
+  editorShowLoading() {
+    this.editor.showLoading();
+  }
+  editorHideLoading() {
+    this.editor.hideLoading();
+  }
+  editorShowNotify(msg, type) {
+    this.editor.showNotify(msg, type);
+  }
+  editorTravel($el) {
+    this.editor.travel($el);
+  }
+  editorTravelBack() {
+    this.editor.travelBack();
+  }
+  showSidebar(payload) {
+    this.sidebarLayer.show(payload);
+  }
+  hideSidebar() {
+    this.sidebarLayer.hide();
+  }
+  checkAdmin(payload) {
+    this.checkerLauncher.checkAdmin(payload);
+  }
+  checkCaptcha(payload) {
+    this.checkerLauncher.checkCaptcha(payload);
+  }
+  checkAdminShowEl() {
+    const items = [];
+    this.$root.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
+    const { $wrap: $layerWrap } = GetLayerWrap(this);
+    if ($layerWrap)
+      $layerWrap.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
+    const $sidebarEl = document.querySelector(".atk-sidebar");
+    if ($sidebarEl)
+      $sidebarEl.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
+    items.forEach(($item) => {
+      if (this.user.data.isAdmin)
+        $item.classList.remove("atk-hide");
+      else
+        $item.classList.add("atk-hide");
+    });
+  }
+  on(name, handler, scope = "internal") {
+    this.eventList.push({ name, handler, scope });
+  }
+  off(name, handler, scope = "internal") {
+    this.eventList = this.eventList.filter((evt) => {
+      if (handler)
+        return !(evt.name === name && evt.handler === handler && evt.scope === scope);
+      return !(evt.name === name && evt.scope === scope);
+    });
+  }
+  trigger(name, payload, scope) {
+    this.eventList.filter((evt) => evt.name === name && (scope ? evt.scope === scope : true)).map((evt) => evt.handler).forEach((handler) => handler(payload));
+  }
+  $t(key, args = {}) {
+    let locales = this.conf.locale;
+    if (typeof locales === "string") {
+      locales = internal[locales];
+    }
+    let str = (locales == null ? void 0 : locales[key]) || key;
+    str = str.replace(/\{\s*(\w+?)\s*\}/g, (_, token) => args[token] || "");
+    return str;
+  }
+}
+const defaults = {
+  el: "",
+  pageKey: "",
+  pageTitle: "",
+  server: "",
+  site: "",
+  placeholder: "",
+  noComment: "",
+  sendBtn: "",
+  darkMode: false,
+  editorTravel: true,
+  flatMode: "auto",
+  nestMax: 2,
+  nestSort: "DATE_ASC",
+  emoticons: "https://cdn.jsdelivr.net/gh/ArtalkJS/Emoticons/grps/default.json",
+  vote: true,
+  voteDown: false,
+  uaBadge: true,
+  listSort: true,
+  preview: true,
+  countEl: "#ArtalkCount",
+  pvEl: "#ArtalkPV",
+  gravatar: {
+    default: "mp",
+    mirror: "https://sdn.geekzu.org/avatar/"
+  },
+  pagination: {
+    pageSize: 20,
+    readMore: true,
+    autoLoad: true
+  },
+  heightLimit: {
+    content: 300,
+    children: 400
+  },
+  imgUpload: true,
+  reqTimeout: 15e3,
+  versionCheck: true,
+  useBackendConf: false,
+  locale: "zh-CN"
+};
+class Dialog {
+  constructor(ctx, contentEl) {
+    __publicField(this, "ctx");
+    __publicField(this, "$el");
+    __publicField(this, "$content");
+    __publicField(this, "$actions");
+    this.ctx = ctx;
+    this.$el = createElement(`<div class="atk-layer-dialog-wrap">
+        <div class="atk-layer-dialog">
+          <div class="atk-layer-dialog-content"></div>
+          <div class="atk-layer-dialog-actions"></div>
+        </div>
+      </div>`);
+    this.$actions = this.$el.querySelector(".atk-layer-dialog-actions");
+    this.$content = this.$el.querySelector(".atk-layer-dialog-content");
+    this.$content.appendChild(contentEl);
+    return this;
+  }
+  setYes(handler) {
+    const btn = createElement(`<button data-action="confirm">${this.ctx.$t("confirm")}</button>`);
+    btn.onclick = this.onBtnClick(handler);
+    this.$actions.appendChild(btn);
+    return this;
+  }
+  setNo(handler) {
+    const btn = createElement(`<button data-action="cancel">${this.ctx.$t("cancel")}</button>`);
+    btn.onclick = this.onBtnClick(handler);
+    this.$actions.appendChild(btn);
+    return this;
+  }
+  onBtnClick(handler) {
+    return (evt) => {
+      const re = handler(evt.currentTarget, this);
+      if (re === void 0 || re === true) {
+        this.$el.remove();
+      }
+    };
+  }
+}
+const CaptchaChecker = {
+  request(that, ctx, inputVal) {
+    return that.ctx.getApi().captchaCheck(inputVal);
+  },
+  body(that, ctx) {
+    if (that.captchaConf.iframe) {
+      const $iframeWrap = createElement(`<div class="atk-checker-iframe-wrap"></div>`);
+      const $iframe = createElement(`<iframe class="atk-fade-in"></iframe>`);
+      $iframe.style.display = "none";
+      showLoading($iframeWrap, { transparentBg: true });
+      $iframe.src = `${that.ctx.conf.server}/api/captcha/get?t=${+new Date()}`;
+      $iframe.onload = () => {
+        $iframe.style.display = "";
+        hideLoading($iframeWrap);
+      };
+      $iframeWrap.append($iframe);
+      const $closeBtn = createElement(`<div class="atk-close-btn"><i class="atk-icon atk-icon-close"></i></div>`);
+      $iframeWrap.append($closeBtn);
+      ctx.hideInteractInput();
+      let stop = false;
+      const sleep = (ms) => new Promise((resolve) => {
+        window.setTimeout(() => {
+          resolve(null);
+        }, ms);
+      });
+      (function queryStatus() {
+        return __async(this, null, function* () {
+          yield sleep(1e3);
+          if (stop)
+            return;
+          let isPass = false;
+          try {
+            const resp = yield that.ctx.getApi().captchaStatus();
+            isPass = resp.is_pass;
+          } catch (e) {
+            isPass = false;
+          }
+          if (isPass) {
+            ctx.triggerSuccess();
+          } else {
+            queryStatus();
+          }
+        });
+      })();
+      $closeBtn.onclick = () => {
+        stop = true;
+        ctx.cancel();
+      };
+      return $iframeWrap;
+    }
+    const elem = createElement(`<span><img class="atk-captcha-img" src="${that.captchaConf.imgData || ""}">${that.ctx.$t("captchaCheck")}</span>`);
+    elem.querySelector(".atk-captcha-img").onclick = () => {
+      const imgEl = elem.querySelector(".atk-captcha-img");
+      that.ctx.getApi().captchaGet().then((imgData) => {
+        imgEl.setAttribute("src", imgData);
+      }).catch((err) => {
+        console.error("Failed to get captcha image ", err);
+      });
+    };
+    return elem;
+  },
+  onSuccess(that, ctx, data, inputVal, formEl) {
+    that.captchaConf.val = inputVal;
+  },
+  onError(that, ctx, err, inputVal, formEl) {
+    formEl.querySelector(".atk-captcha-img").click();
+  }
+};
+const AdminChecker = {
+  inputType: "password",
+  request(that, ctx, inputVal) {
+    const data = {
+      name: that.ctx.user.data.nick,
+      email: that.ctx.user.data.email,
+      password: inputVal
+    };
+    return that.ctx.getApi().login(data.name, data.email, data.password);
+  },
+  body(that, ctx) {
+    return createElement(`<span>${that.ctx.$t("adminCheck")}</span>`);
+  },
+  onSuccess(that, ctx, userToken, inputVal, formEl) {
+    that.ctx.user.update({
+      isAdmin: true,
+      token: userToken
+    });
+    that.ctx.trigger("user-changed", that.ctx.user.data);
+    that.ctx.listReload();
+  },
+  onError(that, ctx, err, inputVal, formEl) {
+  }
+};
+class CheckerLauncher {
+  constructor(ctx) {
+    __publicField(this, "ctx");
+    __publicField(this, "launched", []);
+    __publicField(this, "captchaConf", {});
+    this.ctx = ctx;
+  }
+  checkCaptcha(payload) {
+    this.captchaConf.imgData = payload.imgData;
+    this.captchaConf.iframe = payload.iframe;
+    this.fire(CaptchaChecker, payload);
+  }
+  checkAdmin(payload) {
+    this.fire(AdminChecker, payload);
+  }
+  fire(checker, payload) {
+    if (this.launched.includes(checker))
+      return;
+    this.launched.push(checker);
+    const layer = new Layer(this.ctx, `checker-${new Date().getTime()}`);
+    layer.setMaskClickHide(false);
+    layer.show();
+    let hideInteractInput = false;
+    const checkerCtx = {
+      getLayer: () => layer,
+      hideInteractInput: () => {
+        hideInteractInput = true;
+      },
+      triggerSuccess: () => {
+        this.close(checker, layer);
+        if (checker.onSuccess)
+          checker.onSuccess(this, checkerCtx, "", "", formEl);
+        if (payload.onSuccess)
+          payload.onSuccess("", dialog.$el);
       },
       cancel: () => {
         this.close(checker, layer);
@@ -4008,7 +4319,7 @@ class CheckerLauncher {
       }
     };
     let btnTextOrg;
-    const dialog = new Dialog(formEl);
+    const dialog = new Dialog(this.ctx, formEl);
     dialog.setYes((btnEl) => {
       const inputVal = $input.value.trim();
       if (!btnTextOrg)
@@ -4021,7 +4332,7 @@ class CheckerLauncher {
         btnEl.innerText = btnTextOrg || "";
         btnEl.classList.remove("error");
       };
-      btnEl.innerText = "\u52A0\u8F7D\u4E2D...";
+      btnEl.innerText = `${this.ctx.$t("loading")}...`;
       checker.request(this, checkerCtx, inputVal).then((data) => {
         this.close(checker, layer);
         if (checker.onSuccess)
@@ -4060,30 +4371,68 @@ class CheckerLauncher {
   }
 }
 var editor = "";
-var EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-header">\n    <input name="nick" placeholder="\u6635\u79F0" class="atk-nick" type="text" required="required">\n    <input name="email" placeholder="\u90AE\u7BB1" class="atk-email" type="email" required="required">\n    <input name="link" placeholder="\u7F51\u5740 (https://)" class="atk-link" type="url">\n  </div>\n  <div class="atk-textarea-wrap">\n    <textarea class="atk-textarea" placeholder=""></textarea>\n  </div>\n  <div class="atk-plug-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';
+var 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';
 var emoticonsPlug = "";
 class EditorPlug {
   constructor(editor2) {
     __publicField(this, "editor");
-    __publicField(this, "ctx");
+    __publicField(this, "$panel");
+    __publicField(this, "$btn");
+    __publicField(this, "onHeaderInput");
     this.editor = editor2;
-    this.ctx = editor2.ctx;
+  }
+  get ctx() {
+    return this.editor.ctx;
+  }
+  registerPanel(html = "<div></div>") {
+    this.$panel = createElement(html);
+    return this.$panel;
+  }
+  registerBtn(html) {
+    this.$btn = createElement(`<span class="atk-plug-btn" data-plug-name="${this.constructor.name}">${html}</span>`);
+    return this.$btn;
+  }
+  registerHeaderInputEvt(action) {
+    this.onHeaderInput = action;
+  }
+  getPanel() {
+    return this.$panel;
+  }
+  getBtn() {
+    return this.$btn;
   }
 }
 __publicField(EditorPlug, "Name");
-__publicField(EditorPlug, "BtnHTML");
 class EmoticonsPlug extends EditorPlug {
   constructor(editor2) {
     super(editor2);
-    __publicField(this, "$el");
     __publicField(this, "emoticons", []);
+    __publicField(this, "loadingTask", null);
     __publicField(this, "$grpWrap");
     __publicField(this, "$grpSwitcher");
-    __publicField(this, "loadingTask", null);
     __publicField(this, "isListLoaded", false);
     __publicField(this, "isImgLoaded", false);
     this.editor = editor2;
-    this.$el = createElement(`<div class="atk-editor-plug-emoticons"></div>`);
+    this.registerPanel(`<div class="atk-editor-plug-emoticons"></div>`);
+    this.registerBtn(this.ctx.$t("emoticon"));
+    window.setTimeout(() => {
+      this.loadEmoticonsData();
+    }, 1e3);
+  }
+  onPanelShow() {
+    (() => __async(this, null, function* () {
+      yield this.loadEmoticonsData();
+      if (!this.isImgLoaded) {
+        this.initEmoticonsList();
+        this.isImgLoaded = true;
+      }
+      setTimeout(() => {
+        this.changeListHeight();
+      }, 30);
+    }))();
+  }
+  onPanelHide() {
+    this.$panel.parentElement.style.height = "";
   }
   loadEmoticonsData() {
     return __async(this, null, function* () {
@@ -4094,9 +4443,9 @@ class EmoticonsPlug extends EditorPlug {
         return;
       }
       this.loadingTask = (() => __async(this, null, function* () {
-        showLoading(this.$el);
+        showLoading(this.$panel);
         this.emoticons = yield this.handleData(this.ctx.conf.emoticons);
-        hideLoading(this.$el);
+        hideLoading(this.$panel);
         this.loadingTask = null;
         this.isListLoaded = true;
       }))();
@@ -4109,8 +4458,8 @@ class EmoticonsPlug extends EditorPlug {
         data = [data];
       }
       if (!Array.isArray(data)) {
-        setError(this.$el, "\u8868\u60C5\u5305\u6570\u636E\u5FC5\u987B\u4E3A Array/Object/String \u7C7B\u578B");
-        hideLoading(this.$el);
+        setError(this.$panel, "\u8868\u60C5\u5305\u6570\u636E\u5FC5\u987B\u4E3A Array/Object/String \u7C7B\u578B");
+        hideLoading(this.$panel);
         return [];
       }
       const pushGrp = (grp) => {
@@ -4163,8 +4512,8 @@ class EmoticonsPlug extends EditorPlug {
         const json = yield resp.json();
         return json;
       } catch (err) {
-        hideLoading(this.$el);
-        setError(this.$el, `\u8868\u60C5\u52A0\u8F7D\u5931\u8D25 ${String(err)}`);
+        hideLoading(this.$panel);
+        setError(this.$panel, `\u8868\u60C5\u52A0\u8F7D\u5931\u8D25 ${String(err)}`);
         return [];
       }
     });
@@ -4218,7 +4567,7 @@ class EmoticonsPlug extends EditorPlug {
   }
   initEmoticonsList() {
     this.$grpWrap = createElement(`<div class="atk-grp-wrap"></div>`);
-    this.$el.append(this.$grpWrap);
+    this.$panel.append(this.$grpWrap);
     this.emoticons.forEach((grp, index) => {
       const $grp = createElement(`<div class="atk-grp" style="display: none;"></div>`);
       this.$grpWrap.append($grp);
@@ -4247,15 +4596,17 @@ class EmoticonsPlug extends EditorPlug {
         };
       });
     });
-    this.$grpSwitcher = createElement(`<div class="atk-grp-switcher"></div>`);
-    this.$el.append(this.$grpSwitcher);
-    this.emoticons.forEach((grp, index) => {
-      const $item = createElement("<span />");
-      $item.innerText = grp.name;
-      $item.setAttribute("data-index", String(index));
-      $item.onclick = () => this.openGrp(index);
-      this.$grpSwitcher.append($item);
-    });
+    if (this.emoticons.length > 1) {
+      this.$grpSwitcher = createElement(`<div class="atk-grp-switcher"></div>`);
+      this.$panel.append(this.$grpSwitcher);
+      this.emoticons.forEach((grp, index) => {
+        const $item = createElement("<span />");
+        $item.innerText = grp.name;
+        $item.setAttribute("data-index", String(index));
+        $item.onclick = () => this.openGrp(index);
+        this.$grpSwitcher.append($item);
+      });
+    }
     if (this.emoticons.length > 0)
       this.openGrp(0);
   }
@@ -4273,26 +4624,8 @@ class EmoticonsPlug extends EditorPlug {
     (_a = this.$grpSwitcher.querySelector(`span[data-index="${index}"]`)) == null ? void 0 : _a.classList.add("active");
     this.changeListHeight();
   }
-  getEl() {
-    return this.$el;
-  }
   changeListHeight() {
   }
-  onShow() {
-    (() => __async(this, null, function* () {
-      yield this.loadEmoticonsData();
-      if (!this.isImgLoaded) {
-        this.initEmoticonsList();
-        this.isImgLoaded = true;
-      }
-      setTimeout(() => {
-        this.changeListHeight();
-      }, 30);
-    }))();
-  }
-  onHide() {
-    this.$el.parentElement.style.height = "";
-  }
   transEmoticonImageText(text) {
     if (!this.emoticons || !Array.isArray(this.emoticons))
       return text;
@@ -4307,262 +4640,18 @@ class EmoticonsPlug extends EditorPlug {
   }
 }
 __publicField(EmoticonsPlug, "Name", "emoticons");
-__publicField(EmoticonsPlug, "BtnHTML", "\u8868\u60C5");
-var previewPlug = "";
-class PreviewPlug extends EditorPlug {
+class UploadPlug extends EditorPlug {
   constructor(editor2) {
     super(editor2);
-    __publicField(this, "$el");
-    __publicField(this, "binded", false);
-    this.initEl();
-  }
-  initEl() {
-    this.$el = createElement('<div class="atk-editor-plug-preview"></div>');
-    this.binded = false;
-  }
-  getEl() {
-    return this.$el;
-  }
-  onShow() {
-    this.updateContent();
-    if (!this.binded) {
-      const event = () => {
-        this.updateContent();
-      };
-      this.editor.$textarea.addEventListener("input", event);
-      this.editor.$textarea.addEventListener("change", event);
-      this.binded = true;
-    }
-  }
-  onHide() {
-  }
-  updateContent() {
-    if (this.$el.style.display !== "none") {
-      this.$el.innerHTML = this.editor.getContentMarked();
-    }
-  }
-}
-__publicField(PreviewPlug, "Name", "preview");
-__publicField(PreviewPlug, "BtnHTML", '\u9884\u89C8 <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>');
-class Editor extends Component {
-  constructor(ctx) {
-    super(ctx);
-    __publicField(this, "LOADABLE_PLUG_LIST", [EmoticonsPlug, PreviewPlug]);
-    __publicField(this, "plugList", {});
-    __publicField(this, "$header");
-    __publicField(this, "$textareaWrap");
-    __publicField(this, "$textarea");
-    __publicField(this, "$plugWrap");
-    __publicField(this, "$bottom");
-    __publicField(this, "$plugBtnWrap");
-    __publicField(this, "$imgUploadBtn");
     __publicField(this, "$imgUploadInput");
-    __publicField(this, "$submitBtn");
-    __publicField(this, "$notifyWrap");
-    __publicField(this, "replyComment", null);
-    __publicField(this, "$sendReply", null);
-    __publicField(this, "isTraveling", false);
-    __publicField(this, "queryUserInfo", {
-      timeout: null,
-      abortFunc: null
-    });
-    __publicField(this, "openedPlugName", null);
     __publicField(this, "allowImgExts", ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"]);
-    this.$el = createElement(EditorHTML);
-    this.$header = this.$el.querySelector(".atk-header");
-    this.$textareaWrap = this.$el.querySelector(".atk-textarea-wrap");
-    this.$textarea = this.$el.querySelector(".atk-textarea");
-    this.$plugWrap = this.$el.querySelector(".atk-plug-wrap");
-    this.$bottom = this.$el.querySelector(".atk-bottom");
-    this.$plugBtnWrap = this.$el.querySelector(".atk-plug-btn-wrap");
-    this.$submitBtn = this.$el.querySelector(".atk-send-btn");
-    this.$notifyWrap = this.$el.querySelector(".atk-notify-wrap");
-    this.initLocalStorage();
-    this.initHeader();
-    this.initTextarea();
-    this.initEditorPlug();
-    this.initBottomPart();
-    this.ctx.on("editor-open", () => this.open());
-    this.ctx.on("editor-close", () => this.close());
-    this.ctx.on("editor-reply", (p) => this.setReply(p.data, p.$el, p.scroll));
-    this.ctx.on("editor-reply-cancel", () => this.cancelReply());
-    this.ctx.on("editor-show-loading", () => showLoading(this.$el));
-    this.ctx.on("editor-hide-loading", () => hideLoading(this.$el));
-    this.ctx.on("editor-notify", (f) => this.showNotify(f.msg, f.type));
-    this.ctx.on("editor-travel", ($el) => this.travel($el));
-    this.ctx.on("editor-travel-back", () => this.travelBack());
-    this.ctx.on("conf-updated", () => this.refreshUploadBtn());
-  }
-  get user() {
-    return this.ctx.user;
-  }
-  initLocalStorage() {
-    const localContent = window.localStorage.getItem("ArtalkContent") || "";
-    if (localContent.trim() !== "") {
-      this.showNotify("\u5DF2\u81EA\u52A8\u6062\u590D", "i");
-      this.setContent(localContent);
-    }
-    this.$textarea.addEventListener("input", () => {
-      this.saveContent();
-    });
-  }
-  initHeader() {
-    Object.keys(this.user.data).forEach((field) => {
-      const inputEl = this.getInputEl(field);
-      if (inputEl && inputEl instanceof HTMLInputElement) {
-        inputEl.value = this.user.data[field] || "";
-        inputEl.addEventListener("input", () => this.onHeaderInput(field, inputEl));
-      }
-    });
-    const $linkInput = this.getInputEl("link");
-    if ($linkInput) {
-      $linkInput.addEventListener("change", () => {
-        const link = $linkInput.value.trim();
-        if (!!link && !/^(http|https):\/\//.test(link)) {
-          $linkInput.value = `https://${link}`;
-          this.user.data.link = $linkInput.value;
-          this.saveUser();
-        }
-      });
-    }
-  }
-  getInputEl(field) {
-    const inputEl = this.$header.querySelector(`[name="${field}"]`);
-    return inputEl;
-  }
-  onHeaderInput(field, inputEl) {
-    this.user.data[field] = inputEl.value.trim();
-    if (field === "nick" || field === "email") {
-      this.user.data.token = "";
-      this.user.data.isAdmin = false;
-      if (this.queryUserInfo.timeout !== null)
-        window.clearTimeout(this.queryUserInfo.timeout);
-      if (this.queryUserInfo.abortFunc !== null)
-        this.queryUserInfo.abortFunc();
-      this.queryUserInfo.timeout = window.setTimeout(() => {
-        this.queryUserInfo.timeout = null;
-        const { req, abort } = new Api(this.ctx).userGet(this.user.data.nick, this.user.data.email);
-        this.queryUserInfo.abortFunc = abort;
-        req.then((data) => {
-          if (!data.is_login) {
-            this.user.data.token = "";
-            this.user.data.isAdmin = false;
-          }
-          this.ctx.trigger("unread-update", { notifies: data.unread });
-          if (this.user.checkHasBasicUserInfo() && !data.is_login && data.user && data.user.is_admin) {
-            this.showLoginDialog();
-          }
-          if (data.user && data.user.link) {
-            this.user.data.link = data.user.link;
-            this.getInputEl("link").value = data.user.link;
-          }
-        }).catch(() => {
-        }).finally(() => {
-          this.queryUserInfo.abortFunc = null;
-        });
-      }, 400);
-    }
-    this.saveUser();
-  }
-  showLoginDialog() {
-    this.ctx.trigger("checker-admin", {
-      onSuccess: () => {
-      }
-    });
-  }
-  saveUser() {
-    this.user.save();
-    this.ctx.trigger("user-changed", this.ctx.user.data);
-  }
-  saveContent() {
-    window.localStorage.setItem("ArtalkContent", this.getContentOriginal().trim());
-  }
-  initTextarea() {
-    this.$textarea.placeholder = this.ctx.conf.placeholder || "";
-    this.$textarea.addEventListener("keydown", (e) => {
-      const keyCode = e.keyCode || e.which;
-      if (keyCode === 9) {
-        e.preventDefault();
-        this.insertContent("	");
-      }
-    });
-    this.$textarea.addEventListener("input", (evt) => {
-      this.adjustTextareaHeight();
-    });
-  }
-  adjustTextareaHeight() {
-    const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight;
-    this.$textarea.style.height = "0px";
-    this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`;
-  }
-  initEditorPlug() {
-    this.plugList = {};
-    this.$plugWrap.innerHTML = "";
-    this.$plugWrap.style.display = "none";
-    this.openedPlugName = null;
-    this.$plugBtnWrap.innerHTML = "";
-    this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      if (PlugObj.Name === "emoticons" && !this.conf.emoticons)
-        return;
-      const btnElem = createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`);
-      this.$plugBtnWrap.appendChild(btnElem);
-      btnElem.addEventListener("click", () => {
-        let plug = this.plugList[PlugObj.Name];
-        if (!plug) {
-          plug = new PlugObj(this);
-          this.plugList[PlugObj.Name] = plug;
-        }
-        this.$plugBtnWrap.querySelectorAll(".active").forEach((item) => item.classList.remove("active"));
-        if (PlugObj.Name === this.openedPlugName) {
-          plug.onHide();
-          this.$plugWrap.style.display = "none";
-          this.openedPlugName = null;
-          return;
-        }
-        if (this.$plugWrap.querySelector(`[data-plug-name="${PlugObj.Name}"]`) === null) {
-          const plugEl = plug.getEl();
-          plugEl.setAttribute("data-plug-name", PlugObj.Name);
-          plugEl.style.display = "none";
-          this.$plugWrap.appendChild(plugEl);
-        }
-        Array.from(this.$plugWrap.children).forEach((plugItemEl) => {
-          const plugItemName = plugItemEl.getAttribute("data-plug-name");
-          if (plugItemName === PlugObj.Name) {
-            plugItemEl.style.display = "";
-            this.plugList[plugItemName].onShow();
-          } else {
-            plugItemEl.style.display = "none";
-            this.plugList[plugItemName].onHide();
-          }
-        });
-        this.$plugWrap.style.display = "";
-        this.openedPlugName = PlugObj.Name;
-        btnElem.classList.add("active");
-      });
-    });
-    if (this.conf.emoticons) {
-      const emoPlug = new EmoticonsPlug(this);
-      this.plugList[EmoticonsPlug.Name] = emoPlug;
-      window.setTimeout(() => {
-        emoPlug.loadEmoticonsData();
-      }, 1e3);
-    }
-    this.initImgUpload();
-  }
-  closePlug() {
-    this.$plugWrap.innerHTML = "";
-    this.$plugWrap.style.display = "none";
-    this.openedPlugName = null;
-  }
-  initImgUpload() {
-    this.$imgUploadBtn = createElement(`<span class="atk-plug-btn">\u56FE\u7247</span>`);
-    this.$plugBtnWrap.querySelector('[data-plug-name="preview"]').before(this.$imgUploadBtn);
     this.$imgUploadInput = document.createElement("input");
     this.$imgUploadInput.type = "file";
     this.$imgUploadInput.style.display = "none";
     this.$imgUploadInput.accept = this.allowImgExts.map((o) => `.${o}`).join(",");
-    this.$imgUploadBtn.after(this.$imgUploadInput);
-    this.$imgUploadBtn.onclick = () => {
+    const $btn = this.registerBtn(`${this.ctx.$t("image")}`);
+    $btn.after(this.$imgUploadInput);
+    $btn.onclick = () => {
       const $input = this.$imgUploadInput;
       $input.onchange = () => {
         (() => __async(this, null, function* () {
@@ -4574,6 +4663,12 @@ class Editor extends Component {
       };
       $input.click();
     };
+    this.ctx.on("conf-updated", () => {
+      if (!this.ctx.conf.imgUpload) {
+        this.getBtn().setAttribute("atk-only-admin-show", "");
+        this.ctx.checkAdminShowEl();
+      }
+    });
     const uploadFromFileList = (files) => {
       if (!files)
         return;
@@ -4582,11 +4677,11 @@ class Editor extends Component {
         this.uploadImg(file);
       }
     };
-    this.$textarea.addEventListener("dragover", (evt) => {
+    this.editor.$textarea.addEventListener("dragover", (evt) => {
       evt.stopPropagation();
       evt.preventDefault();
     });
-    this.$textarea.addEventListener("drop", (evt) => {
+    this.editor.$textarea.addEventListener("drop", (evt) => {
       var _a;
       const files = (_a = evt.dataTransfer) == null ? void 0 : _a.files;
       if (files == null ? void 0 : files.length) {
@@ -4594,7 +4689,7 @@ class Editor extends Component {
         uploadFromFileList(files);
       }
     });
-    this.$textarea.addEventListener("paste", (evt) => {
+    this.editor.$textarea.addEventListener("paste", (evt) => {
       var _a;
       const files = (_a = evt.clipboardData) == null ? void 0 : _a.files;
       if (files == null ? void 0 : files.length) {
@@ -4603,45 +4698,242 @@ class Editor extends Component {
       }
     });
   }
-  refreshUploadBtn() {
-    if (!this.$imgUploadBtn)
-      return;
-    if (!this.ctx.conf.imgUpload) {
-      this.$imgUploadBtn.setAttribute("atk-only-admin-show", "");
-      this.ctx.trigger("check-admin-show-el");
-    }
-  }
   uploadImg(file) {
     return __async(this, null, function* () {
       const fileExt = /[^.]+$/.exec(file.name);
       if (!fileExt || !this.allowImgExts.includes(fileExt[0]))
         return;
       if (!this.ctx.user.checkHasBasicUserInfo()) {
-        this.showNotify("\u586B\u5165\u4F60\u7684\u540D\u5B57\u90AE\u7BB1\u624D\u80FD\u4E0A\u4F20\u54E6", "w");
+        this.editor.showNotify(this.ctx.$t("uploadLoginMsg"), "w");
         return;
       }
       let insertPrefix = "\n";
-      if (this.$textarea.value.trim() === "")
+      if (this.editor.$textarea.value.trim() === "")
         insertPrefix = "";
       const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`;
-      this.insertContent(uploadPlaceholderTxt);
+      this.editor.insertContent(uploadPlaceholderTxt);
       let resp;
       try {
-        resp = yield new Api(this.ctx).imgUpload(file);
+        if (!this.ctx.conf.imgUploader) {
+          resp = yield this.ctx.getApi().imgUpload(file);
+        } else {
+          resp = { img_url: yield this.ctx.conf.imgUploader(file) };
+        }
       } catch (err) {
         console.error(err);
-        this.showNotify(`\u56FE\u7247\u4E0A\u4F20\u5931\u8D25\uFF0C${err.msg}`, "e");
+        this.editor.showNotify(`${this.ctx.$t("uploadFail")}\uFF0C${err.msg}`, "e");
       }
       if (!!resp && resp.img_url) {
         let imgURL = resp.img_url;
         if (!isValidURL(imgURL))
           imgURL = getURLBasedOnApi(this.ctx, imgURL);
-        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`));
+        this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`));
       } else {
-        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ""));
+        this.editor.setContent(this.editor.$textarea.value.replace(uploadPlaceholderTxt, ""));
       }
     });
   }
+}
+__publicField(UploadPlug, "Name", "upload");
+var previewPlug = "";
+class PreviewPlug extends EditorPlug {
+  constructor(editor2) {
+    super(editor2);
+    __publicField(this, "isBind", false);
+    this.registerPanel(`<div class="atk-editor-plug-preview"></div>`);
+    let btnText = this.editor.$t("preview");
+    if (this.ctx.markedInstance)
+      btnText += ` <i title="Markdown is supported"><svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></i>`;
+    this.registerBtn(btnText);
+  }
+  onPanelShow() {
+    this.updateContent();
+    if (!this.isBind) {
+      const event = () => {
+        this.updateContent();
+      };
+      this.editor.$textarea.addEventListener("input", event);
+      this.editor.$textarea.addEventListener("change", event);
+      this.isBind = true;
+    }
+  }
+  updateContent() {
+    if (this.$panel.style.display !== "none") {
+      this.$panel.innerHTML = this.editor.getContentMarked();
+    }
+  }
+}
+__publicField(PreviewPlug, "Name", "preview");
+class HeaderInputPlug extends EditorPlug {
+  constructor(editor2) {
+    super(editor2);
+    __publicField(this, "queryUserInfo", {
+      timeout: null,
+      abortFunc: null
+    });
+    this.registerHeaderInputEvt((key, $input) => {
+      if (key === "nick" || key === "email") {
+        this.fetchUserInfo();
+      }
+    });
+    this.editor.$link.addEventListener("change", () => {
+      const link = this.editor.$link.value.trim();
+      if (!!link && !/^(http|https):\/\//.test(link)) {
+        this.editor.$link.value = `https://${link}`;
+        this.ctx.user.update({ link: this.editor.$link.value });
+      }
+    });
+  }
+  fetchUserInfo() {
+    this.ctx.user.logout();
+    if (this.queryUserInfo.timeout)
+      window.clearTimeout(this.queryUserInfo.timeout);
+    if (this.queryUserInfo.abortFunc)
+      this.queryUserInfo.abortFunc();
+    this.queryUserInfo.timeout = window.setTimeout(() => {
+      this.queryUserInfo.timeout = null;
+      const { req, abort } = this.ctx.getApi().userGet(this.ctx.user.data.nick, this.ctx.user.data.email);
+      this.queryUserInfo.abortFunc = abort;
+      req.then((data) => {
+        var _a;
+        if (!data.is_login) {
+          this.ctx.user.logout();
+        }
+        this.ctx.updateNotifies(data.unread);
+        if (this.ctx.user.checkHasBasicUserInfo() && !data.is_login && ((_a = data.user) == null ? void 0 : _a.is_admin)) {
+          this.showLoginDialog();
+        }
+        if (data.user && data.user.link) {
+          this.editor.$link.value = data.user.link;
+          this.ctx.user.update({ link: data.user.link });
+        }
+      }).catch(() => {
+      }).finally(() => {
+        this.queryUserInfo.abortFunc = null;
+      });
+    }, 400);
+  }
+  showLoginDialog() {
+    this.ctx.checkAdmin({
+      onSuccess: () => {
+      }
+    });
+  }
+}
+__publicField(HeaderInputPlug, "Name", "headerInput");
+class Editor extends Component {
+  constructor(ctx) {
+    super(ctx);
+    __publicField(this, "$header");
+    __publicField(this, "$nick");
+    __publicField(this, "$email");
+    __publicField(this, "$link");
+    __publicField(this, "$textareaWrap");
+    __publicField(this, "$textarea");
+    __publicField(this, "$bottom");
+    __publicField(this, "$submitBtn");
+    __publicField(this, "$notifyWrap");
+    __publicField(this, "replyComment", null);
+    __publicField(this, "$sendReply", null);
+    __publicField(this, "isTraveling", false);
+    __publicField(this, "ENABLED_PLUGS", [EmoticonsPlug, UploadPlug, PreviewPlug, HeaderInputPlug]);
+    __publicField(this, "plugList", {});
+    __publicField(this, "openedPlugName", null);
+    __publicField(this, "$plugPanelWrap");
+    __publicField(this, "$plugBtnWrap");
+    this.$el = createElement(EditorHTML);
+    this.$header = this.$el.querySelector(".atk-header");
+    this.$nick = this.$header.querySelector('[name="nick"]');
+    this.$email = this.$header.querySelector('[name="email"]');
+    this.$link = this.$header.querySelector('[name="link"]');
+    this.$textareaWrap = this.$el.querySelector(".atk-textarea-wrap");
+    this.$textarea = this.$el.querySelector(".atk-textarea");
+    this.$bottom = this.$el.querySelector(".atk-bottom");
+    this.$submitBtn = this.$el.querySelector(".atk-send-btn");
+    this.$notifyWrap = this.$el.querySelector(".atk-notify-wrap");
+    this.$plugBtnWrap = this.$el.querySelector(".atk-plug-btn-wrap");
+    this.$plugPanelWrap = this.$el.querySelector(".atk-plug-panel-wrap");
+    this.initLocalStorage();
+    this.initHeader();
+    this.initTextarea();
+    this.initPlugs();
+    this.initSubmitBtn();
+    this.ctx.on("conf-updated", () => {
+    });
+  }
+  get user() {
+    return this.ctx.user;
+  }
+  get $inputs() {
+    return { nick: this.$nick, email: this.$email, link: this.$link };
+  }
+  initLocalStorage() {
+    const localContent = window.localStorage.getItem("ArtalkContent") || "";
+    if (localContent.trim() !== "") {
+      this.showNotify(this.$t("restoredMsg"), "i");
+      this.setContent(localContent);
+    }
+    this.$textarea.addEventListener("input", () => this.saveToLocalStorage());
+  }
+  saveToLocalStorage() {
+    window.localStorage.setItem("ArtalkContent", this.getContentOriginal().trim());
+  }
+  initHeader() {
+    Object.entries(this.$inputs).forEach(([key, $input]) => {
+      $input.value = this.user.data[key] || "";
+      $input.addEventListener("input", () => this.onHeaderInput(key, $input));
+      $input.placeholder = `${this.$t(key)}`;
+    });
+  }
+  onHeaderInput(key, $input) {
+    this.user.update({
+      [key]: $input.value.trim()
+    });
+    Object.entries(this.plugList).forEach(([plugName, plug]) => {
+      if (plug.onHeaderInput)
+        plug.onHeaderInput(key, $input);
+    });
+  }
+  initTextarea() {
+    this.$textarea.placeholder = this.ctx.conf.placeholder || this.$t("placeholder");
+    this.$textarea.addEventListener("keydown", (e) => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode === 9) {
+        e.preventDefault();
+        this.insertContent("	");
+      }
+    });
+    this.$textarea.addEventListener("input", () => {
+      this.adjustTextareaHeight();
+    });
+  }
+  initSubmitBtn() {
+    this.$submitBtn.innerText = this.ctx.conf.sendBtn || this.$t("send");
+    this.$submitBtn.addEventListener("click", () => this.submit());
+  }
+  getFinalContent() {
+    let content = this.getContentOriginal();
+    if (this.plugList.emoticons) {
+      content = this.plugList.emoticons.transEmoticonImageText(content);
+    }
+    return content;
+  }
+  getContentOriginal() {
+    return this.$textarea.value || "";
+  }
+  getContentMarked() {
+    return marked(this.ctx, this.getFinalContent());
+  }
+  setContent(val) {
+    this.$textarea.value = val;
+    this.saveToLocalStorage();
+    if (this.plugList.preview) {
+      this.plugList.preview.updateContent();
+    }
+    window.setTimeout(() => {
+      this.adjustTextareaHeight();
+    }, 80);
+  }
   insertContent(val) {
     if (document.selection) {
       this.$textarea.focus();
@@ -4661,48 +4953,21 @@ class Editor extends Component {
       this.$textarea.value += val;
     }
   }
-  setContent(val) {
-    this.$textarea.value = val;
-    this.saveContent();
-    if (!!this.plugList && !!this.plugList.preview) {
-      this.plugList.preview.updateContent();
-    }
-    window.setTimeout(() => {
-      this.adjustTextareaHeight();
-    }, 80);
-  }
   clearEditor() {
     this.setContent("");
     this.cancelReply();
   }
-  getFinalContent() {
-    let content = this.getContentOriginal();
-    if (this.plugList && this.plugList.emoticons) {
-      const emoticonsPlug2 = this.plugList.emoticons;
-      content = emoticonsPlug2.transEmoticonImageText(content);
-    }
-    return content;
-  }
-  getContentOriginal() {
-    return this.$textarea.value || "";
-  }
-  getContentMarked() {
-    return marked(this.ctx, this.getFinalContent());
-  }
-  initBottomPart() {
-    this.initReply();
-    this.initSubmit();
-  }
-  initReply() {
-    this.replyComment = null;
-    this.$sendReply = null;
+  adjustTextareaHeight() {
+    const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight;
+    this.$textarea.style.height = "0px";
+    this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`;
   }
   setReply(commentData, $comment, scroll = true) {
     if (this.replyComment !== null) {
       this.cancelReply();
     }
     if (this.$sendReply === null) {
-      this.$sendReply = createElement('<div class="atk-send-reply">\u56DE\u590D <span class="atk-text"></span><span class="atk-cancel" title="\u53D6\u6D88 AT">\xD7</span></div>');
+      this.$sendReply = createElement(`<div class="atk-send-reply">${this.$t("reply")} <span class="atk-text"></span><span class="atk-cancel">\xD7</span></div>`);
       this.$sendReply.querySelector(".atk-text").innerText = `@${commentData.nick}`;
       this.$sendReply.addEventListener("click", () => {
         this.cancelReply();
@@ -4727,12 +4992,14 @@ class Editor extends Component {
       this.travelBack();
     }
   }
-  initSubmit() {
-    this.$submitBtn.innerText = this.ctx.conf.sendBtn || "Send";
-    this.$submitBtn.addEventListener("click", (evt) => {
-      evt.currentTarget;
-      this.submit();
-    });
+  showNotify(msg, type) {
+    showNotify(this.$notifyWrap, msg, type);
+  }
+  showLoading() {
+    showLoading(this.$el);
+  }
+  hideLoading() {
+    hideLoading(this.$el);
   }
   submit() {
     return __async(this, null, function* () {
@@ -4741,9 +5008,9 @@ class Editor extends Component {
         return;
       }
       this.ctx.trigger("editor-submit");
-      showLoading(this.$el);
+      this.showLoading();
       try {
-        const nComment = yield new Api(this.ctx).add({
+        const nComment = yield this.ctx.getApi().add({
           content: this.getFinalContent(),
           nick: this.user.data.nick,
           email: this.user.data.email,
@@ -4756,27 +5023,24 @@ class Editor extends Component {
         if (this.replyComment !== null && this.replyComment.page_key !== this.ctx.conf.pageKey) {
           window.open(`${this.replyComment.page_url}#atk-comment-${nComment.id}`);
         }
-        this.ctx.trigger("list-insert", nComment);
+        this.ctx.insertComment(nComment);
         this.clearEditor();
         this.ctx.trigger("editor-submitted");
       } catch (err) {
         console.error(err);
-        this.showNotify(`\u8BC4\u8BBA\u5931\u8D25\uFF0C${err.msg || String(err)}`, "e");
+        this.showNotify(`${this.$t("commentFail")}\uFF0C${err.msg || String(err)}`, "e");
         return;
       } finally {
-        hideLoading(this.$el);
+        this.hideLoading();
       }
     });
   }
-  showNotify(msg, type) {
-    showNotify(this.$notifyWrap, msg, type);
-  }
   close() {
     if (!this.$textareaWrap.querySelector(".atk-comment-closed"))
-      this.$textareaWrap.prepend(createElement('<div class="atk-comment-closed">\u4EC5\u7BA1\u7406\u5458\u53EF\u8BC4\u8BBA</div>'));
+      this.$textareaWrap.prepend(createElement(`<div class="atk-comment-closed">${this.$t("onlyAdminCanReply")}</div>`));
     if (!this.user.data.isAdmin) {
       this.$textarea.style.display = "none";
-      this.closePlug();
+      this.closePlugPanel();
       this.$bottom.style.display = "none";
     } else {
       this.$textarea.style.display = "";
@@ -4808,12 +5072,76 @@ class Editor extends Component {
     if (this.replyComment !== null)
       this.cancelReply();
   }
-  initRemoteEmoticons() {
+  initPlugs() {
+    this.plugList = {};
+    this.$plugPanelWrap.innerHTML = "";
+    this.$plugPanelWrap.style.display = "none";
+    this.openedPlugName = null;
+    this.$plugBtnWrap.innerHTML = "";
+    const disabledPlugs = [];
+    if (!this.conf.emoticons)
+      disabledPlugs.push("emoticons");
+    if (!this.conf.preview)
+      disabledPlugs.push("preview");
+    this.ENABLED_PLUGS.forEach((Plug) => {
+      const plugName = Plug.Name;
+      if (disabledPlugs.includes(plugName))
+        return;
+      const plug = new Plug(this);
+      this.plugList[plugName] = plug;
+      const $btn = plug.getBtn();
+      if ($btn) {
+        this.$plugBtnWrap.appendChild($btn);
+        $btn.onclick = $btn.onclick || (() => {
+          this.$plugBtnWrap.querySelectorAll(".active").forEach((item) => item.classList.remove("active"));
+          if (plugName === this.openedPlugName) {
+            this.closePlugPanel();
+            return;
+          }
+          this.openPlugPanel(plugName);
+          $btn.classList.add("active");
+        });
+        const $panel = plug.getPanel();
+        if ($panel) {
+          $panel.setAttribute("data-plug-name", plugName);
+          $panel.style.display = "none";
+          this.$plugPanelWrap.appendChild($panel);
+        }
+      }
+    });
+  }
+  openPlugPanel(plugName) {
+    Object.entries(this.plugList).forEach(([aPlugName, plug]) => {
+      const plugPanel = plug.getPanel();
+      if (!plugPanel)
+        return;
+      if (aPlugName === plugName) {
+        plugPanel.style.display = "";
+        if (plug.onPanelShow)
+          plug.onPanelShow();
+      } else {
+        plugPanel.style.display = "none";
+        if (plug.onPanelHide)
+          plug.onPanelHide();
+      }
+    });
+    this.$plugPanelWrap.style.display = "";
+    this.openedPlugName = plugName;
+  }
+  closePlugPanel() {
+    if (!this.openedPlugName)
+      return;
+    const plug = this.plugList[this.openedPlugName];
+    if (!plug)
+      return;
+    if (plug.onPanelHide)
+      plug.onPanelHide();
+    this.$plugPanelWrap.style.display = "none";
+    this.openedPlugName = null;
   }
 }
 var list = "";
-var ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text">\n        <span class="atk-comment-count-num">0</span>\n        \u6761\u8BC4\u8BBA\n      </div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>\u5173\u95ED\u8BC4\u8BBA</span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none;"></span>\n        <div class="atk-text">\u901A\u77E5\u4E2D\u5FC3</div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body"></div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
-var comment = "";
+var ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text"></div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none;"></span>\n        <div class="atk-text"></div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body"></div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
 const win = window || {};
 const nav = navigator || {};
 function Detect(userAgent) {
@@ -5004,9 +5332,10 @@ function Detect(userAgent) {
   }
   return dest;
 }
-var CommentHTML = '<div class="atk-comment-wrap">\n  <div class="atk-comment">\n    <div class="atk-avatar"></div>\n    <div class="atk-main">\n      <div class="atk-header">\n        <span class="atk-item atk-nick"></span>\n        <span class="atk-item atk-badge"></span>\n        <span class="atk-item atk-date"></span>\n      </div>\n      <div class="atk-body">\n        <div class="atk-content"></div>\n      </div>\n      <div class="atk-footer">\n        <div class="atk-actions"></div>\n      </div>\n    </div>\n  </div>\n</div>\n';
+var comment = "";
 class ActionBtn {
-  constructor(conf) {
+  constructor(ctx, conf) {
+    __publicField(this, "ctx");
     __publicField(this, "conf");
     __publicField(this, "$el");
     __publicField(this, "isLoading", false);
@@ -5014,6 +5343,7 @@ class ActionBtn {
     __publicField(this, "msgRecTimerFunc");
     __publicField(this, "isConfirming", false);
     __publicField(this, "confirmRecTimer");
+    this.ctx = ctx;
     this.$el = createElement(`<span class="atk-common-action-btn"></span>`);
     this.conf = typeof conf !== "object" ? { text: conf } : conf;
     this.$el.innerText = this.getText();
@@ -5045,7 +5375,7 @@ class ActionBtn {
         if (!this.isConfirming) {
           this.isConfirming = true;
           this.$el.classList.add("atk-btn-confirm");
-          this.$el.innerText = this.conf.confirmText || "\u786E\u8BA4\u64CD\u4F5C";
+          this.$el.innerText = this.conf.confirmText || this.ctx.$t("actionConfirm");
           this.confirmRecTimer = window.setTimeout(() => confirmRestore(), 5e3);
           return;
         }
@@ -5073,7 +5403,7 @@ class ActionBtn {
     this.isLoading = value;
     if (value) {
       this.$el.classList.add("atk-btn-loading");
-      this.$el.innerText = loadingText || "\u52A0\u8F7D\u4E2D...";
+      this.$el.innerText = loadingText || `${this.ctx.$t("loading")}...`;
     } else {
       this.$el.classList.remove("atk-btn-loading");
       this.$el.innerText = this.getText();
@@ -5121,40 +5451,33 @@ class ActionBtn {
     this.msgRecTimerFunc = void 0;
   }
 }
-class Comment extends Component {
-  constructor(ctx, data) {
-    super(ctx);
-    __publicField(this, "data");
+var CommentHTML = '<div class="atk-comment-wrap">\n  <div class="atk-comment">\n    <div class="atk-avatar"></div>\n    <div class="atk-main">\n      <div class="atk-header">\n        <span class="atk-item atk-nick"></span>\n        <span class="atk-badge-wrap"></span>\n        <span class="atk-item atk-date"></span>\n      </div>\n      <div class="atk-body">\n        <div class="atk-content"></div>\n      </div>\n      <div class="atk-footer">\n        <div class="atk-actions"></div>\n      </div>\n    </div>\n  </div>\n</div>\n';
+class CommentRender {
+  constructor(comment2) {
+    __publicField(this, "comment");
+    __publicField(this, "$el");
     __publicField(this, "$main");
     __publicField(this, "$header");
     __publicField(this, "$headerNick");
-    __publicField(this, "$headerBadge");
+    __publicField(this, "$headerBadgeWrap");
     __publicField(this, "$body");
     __publicField(this, "$content");
-    __publicField(this, "$children");
+    __publicField(this, "$childrenWrap");
     __publicField(this, "$actions");
     __publicField(this, "voteBtnUp");
     __publicField(this, "voteBtnDown");
-    __publicField(this, "parent");
-    __publicField(this, "nestCurt");
-    __publicField(this, "nestMax");
-    __publicField(this, "children", []);
-    __publicField(this, "flatMode", false);
-    __publicField(this, "replyTo");
     __publicField(this, "$replyTo");
     __publicField(this, "$replyAt");
-    __publicField(this, "afterRender");
-    __publicField(this, "unread", false);
-    __publicField(this, "openable", false);
-    __publicField(this, "openURL");
-    __publicField(this, "openEvt");
-    __publicField(this, "onReplyBtnClick");
-    __publicField(this, "onDelete");
-    this.nestMax = ctx.conf.nestMax || 3;
-    this.data = __spreadValues({}, data);
-    this.data.date = this.data.date.replace(/-/g, "/");
-    this.parent = null;
-    this.nestCurt = 1;
+    this.comment = comment2;
+  }
+  get ctx() {
+    return this.comment.ctx;
+  }
+  get data() {
+    return this.comment.getData();
+  }
+  get cConf() {
+    return this.comment.getConf();
   }
   render() {
     this.$el = createElement(CommentHTML);
@@ -5163,10 +5486,7 @@ class Comment extends Component {
     this.$body = this.$el.querySelector(".atk-body");
     this.$content = this.$body.querySelector(".atk-content");
     this.$actions = this.$el.querySelector(".atk-actions");
-    this.$children = null;
     this.$el.setAttribute("data-comment-id", `${this.data.id}`);
-    this.renderCheckUnread();
-    this.renderCheckClickable();
     this.renderAvatar();
     this.renderHeader();
     this.renderContent();
@@ -5174,35 +5494,13 @@ class Comment extends Component {
     this.renderReplyTo();
     this.renderPending();
     this.renderActionBtn();
-    if (this.afterRender)
-      this.afterRender();
+    this.recoveryChildrenWrap();
     return this.$el;
   }
-  renderCheckUnread() {
-    if (this.unread)
-      this.$el.classList.add("atk-unread");
-    else
-      this.$el.classList.remove("atk-unread");
-  }
-  renderCheckClickable() {
-    if (this.openable) {
-      this.$el.classList.add("atk-openable");
-    } else {
-      this.$el.classList.remove("atk-openable");
-    }
-    this.$el.addEventListener("click", (evt) => {
-      if (this.openable && this.openURL) {
-        evt.preventDefault();
-        window.open(this.openURL);
-      }
-      if (this.openEvt)
-        this.openEvt();
-    });
-  }
   renderAvatar() {
     const $avatar = this.$el.querySelector(".atk-avatar");
     const $avatarImg = createElement("<img />");
-    $avatarImg.src = this.getGravatarUrl();
+    $avatarImg.src = this.comment.getGravatarURL();
     if (this.data.link) {
       const $avatarA = createElement('<a target="_blank" rel="noreferrer noopener nofollow"></a>');
       $avatarA.href = this.data.link;
@@ -5222,197 +5520,415 @@ class Comment extends Component {
     } else {
       this.$headerNick.innerText = this.data.nick;
     }
-    this.$headerBadge = this.$el.querySelector(".atk-badge");
-    if (this.data.badge_name) {
-      this.$headerBadge.innerText = this.data.badge_name;
-      if (this.data.badge_color)
-        this.$headerBadge.style.backgroundColor = this.data.badge_color;
-    } else {
-      this.$headerBadge.remove();
-      this.$headerBadge = void 0;
+    this.$headerBadgeWrap = this.$el.querySelector(".atk-badge-wrap");
+    this.$headerBadgeWrap.innerHTML = "";
+    const badgeText = this.data.badge_name;
+    const badgeColor = this.data.badge_color;
+    if (badgeText) {
+      const $badge = createElement(`<span class="atk-badge"></span>`);
+      $badge.innerText = badgeText.replace("\u7BA1\u7406\u5458", this.ctx.$t("admin"));
+      $badge.style.backgroundColor = badgeColor || "";
+      this.$headerBadgeWrap.append($badge);
     }
     if (this.data.is_pinned) {
-      const $pinnedBadge = createElement(`<span class="atk-item atk-pinned-badge">\u7F6E\u9876</span>`);
-      this.$headerNick.insertAdjacentElement("afterend", $pinnedBadge);
+      const $pinnedBadge = createElement(`<span class="atk-pinned-badge">${this.ctx.$t("pin")}</span>`);
+      this.$headerBadgeWrap.append($pinnedBadge);
     }
     const $date = this.$el.querySelector(".atk-date");
-    $date.innerText = this.getDateFormatted();
+    $date.innerText = this.comment.getDateFormatted();
     $date.setAttribute("data-atk-comment-date", String(+new Date(this.data.date)));
-    if (this.conf.uaBadge) {
-      const $uaWrap = createElement(`<span class="atk-ua-wrap"></span>`);
+    if (this.ctx.conf.uaBadge) {
+      let $uaWrap = this.$header.querySelector("atk-ua-wrap");
+      if (!$uaWrap) {
+        $uaWrap = createElement(`<span class="atk-ua-wrap"></span>`);
+        this.$header.append($uaWrap);
+      }
+      $uaWrap.innerHTML = "";
       const $uaBrowser = createElement(`<span class="atk-ua ua-browser"></span>`);
       const $usOS = createElement(`<span class="atk-ua ua-os"></span>`);
-      $uaBrowser.innerText = this.getUserUaBrowser();
-      $usOS.innerText = this.getUserUaOS();
+      $uaBrowser.innerText = this.comment.getUserUaBrowser();
+      $usOS.innerText = this.comment.getUserUaOS();
       $uaWrap.append($uaBrowser);
       $uaWrap.append($usOS);
-      this.$header.append($uaWrap);
     }
   }
   renderContent() {
     if (!this.data.is_collapsed) {
-      this.$content.innerHTML = this.getContentMarked();
+      this.$content.innerHTML = this.comment.getContentMarked();
+      this.$content.classList.remove("atk-hide", "atk-collapsed");
       return;
     }
     this.$content.classList.add("atk-hide", "atk-type-collapsed");
     const collapsedInfoEl = createElement(`
       <div class="atk-collapsed">
-        <span class="atk-text">\u8BE5\u8BC4\u8BBA\u5DF2\u88AB\u7CFB\u7EDF\u6216\u7BA1\u7406\u5458\u6298\u53E0</span>
-        <span class="atk-show-btn">\u67E5\u770B\u5185\u5BB9</span>
+        <span class="atk-text">${this.ctx.$t("collapsedMsg")}</span>
+        <span class="atk-show-btn">${this.ctx.$t("expand")}</span>
       </div>`);
     this.$body.insertAdjacentElement("beforeend", collapsedInfoEl);
     const contentShowBtn = collapsedInfoEl.querySelector(".atk-show-btn");
     contentShowBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       if (this.$content.classList.contains("atk-hide")) {
-        this.$content.innerHTML = this.getContentMarked();
+        this.$content.innerHTML = this.comment.getContentMarked();
         this.$content.classList.remove("atk-hide");
         playFadeInAnim(this.$content);
-        contentShowBtn.innerHTML = "\u6536\u8D77\u5185\u5BB9";
+        contentShowBtn.innerHTML = this.ctx.$t("collapse");
       } else {
         this.$content.innerHTML = "";
         this.$content.classList.add("atk-hide");
-        contentShowBtn.innerHTML = "\u67E5\u770B\u5185\u5BB9";
+        contentShowBtn.innerHTML = this.ctx.$t("expand");
       }
     });
   }
   renderReplyAt() {
-    if (this.flatMode || this.data.rid === 0)
-      return;
-    if (this.$replyAt)
+    if (this.cConf.isFlatMode || this.data.rid === 0)
       return;
-    if (!this.replyTo)
+    if (!this.cConf.replyTo)
       return;
     this.$replyAt = createElement(`<span class="atk-item atk-reply-at"><span class="atk-arrow"></span><span class="atk-nick"></span></span>`);
-    this.$replyAt.querySelector(".atk-nick").innerText = `${this.replyTo.nick}`;
+    this.$replyAt.querySelector(".atk-nick").innerText = `${this.cConf.replyTo.nick}`;
     this.$replyAt.onclick = () => {
-      this.goToReplyComment();
+      this.comment.getActions().goToReplyComment();
     };
-    const $after = this.$headerBadge || this.$headerNick;
-    $after.insertAdjacentElement("afterend", this.$replyAt);
+    this.$headerBadgeWrap.insertAdjacentElement("afterend", this.$replyAt);
   }
   renderReplyTo() {
-    if (!this.flatMode)
+    if (!this.cConf.isFlatMode)
       return;
-    if (!this.replyTo)
+    if (!this.cConf.replyTo)
       return;
     this.$replyTo = createElement(`
       <div class="atk-reply-to">
-        <div class="atk-meta">\u56DE\u590D <span class="atk-nick"></span>:</div>
+        <div class="atk-meta">${this.ctx.$t("reply")} <span class="atk-nick"></span>:</div>
         <div class="atk-content"></div>
       </div>`);
     const $nick = this.$replyTo.querySelector(".atk-nick");
-    $nick.innerText = `@${this.replyTo.nick}`;
+    $nick.innerText = `@${this.cConf.replyTo.nick}`;
     $nick.onclick = () => {
-      this.goToReplyComment();
+      this.comment.getActions().goToReplyComment();
     };
-    let replyContent = marked(this.ctx, this.replyTo.content);
-    if (this.replyTo.is_collapsed)
-      replyContent = "[\u5DF2\u6298\u53E0]";
+    let replyContent = marked(this.ctx, this.cConf.replyTo.content);
+    if (this.cConf.replyTo.is_collapsed)
+      replyContent = `[${this.ctx.$t("collapsed")}]`;
     this.$replyTo.querySelector(".atk-content").innerHTML = replyContent;
     this.$body.prepend(this.$replyTo);
   }
-  goToReplyComment() {
-    const origHash = window.location.hash;
-    const modifyHash = `#atk-comment-${this.data.rid}`;
-    window.location.hash = modifyHash;
-    if (modifyHash === origHash)
-      window.dispatchEvent(new Event("hashchange"));
-  }
   renderPending() {
     if (!this.data.is_pending)
       return;
-    const pendingEl = createElement(`<div class="atk-pending">\u5BA1\u6838\u4E2D\uFF0C\u4EC5\u672C\u4EBA\u53EF\u89C1\u3002</div>`);
+    const pendingEl = createElement(`<div class="atk-pending">${this.ctx.$t("pendingMsg")}</div>`);
     this.$body.prepend(pendingEl);
   }
   renderActionBtn() {
     if (this.ctx.conf.vote) {
-      this.voteBtnUp = new ActionBtn(() => `\u8D5E\u540C (${this.data.vote_up || 0})`).appendTo(this.$actions);
+      this.voteBtnUp = new ActionBtn(this.ctx, () => `${this.ctx.$t("voteUp")} (${this.data.vote_up || 0})`).appendTo(this.$actions);
       this.voteBtnUp.setClick(() => {
-        this.vote("up");
+        this.comment.getActions().vote("up");
       });
       if (this.ctx.conf.voteDown) {
-        this.voteBtnDown = new ActionBtn(() => `\u53CD\u5BF9 (${this.data.vote_down || 0})`).appendTo(this.$actions);
+        this.voteBtnDown = new ActionBtn(this.ctx, () => `${this.ctx.$t("voteDown")} (${this.data.vote_down || 0})`).appendTo(this.$actions);
         this.voteBtnDown.setClick(() => {
-          this.vote("down");
+          this.comment.getActions().vote("down");
         });
       }
     }
     if (this.data.is_allow_reply) {
-      const replyBtn = createElement(`<span>\u56DE\u590D</span>`);
+      const replyBtn = createElement(`<span>${this.ctx.$t("reply")}</span>`);
       this.$actions.append(replyBtn);
       replyBtn.addEventListener("click", (e) => {
         e.stopPropagation();
-        if (!this.onReplyBtnClick) {
-          this.ctx.trigger("editor-reply", { data: this.data, $el: this.$el });
+        if (!this.cConf.onReplyBtnClick) {
+          this.ctx.replyComment(this.data, this.$el);
         } else {
-          this.onReplyBtnClick();
+          this.cConf.onReplyBtnClick();
         }
       });
     }
-    const collapseBtn = new ActionBtn({
-      text: () => this.data.is_collapsed ? "\u53D6\u6D88\u6298\u53E0" : "\u6298\u53E0",
+    const collapseBtn = new ActionBtn(this.ctx, {
+      text: () => this.data.is_collapsed ? this.ctx.$t("expand") : this.ctx.$t("collapse"),
       adminOnly: true
     });
     collapseBtn.appendTo(this.$actions);
     collapseBtn.setClick(() => {
-      this.adminEdit("collapsed", collapseBtn);
+      this.comment.getActions().adminEdit("collapsed", collapseBtn);
     });
-    const pendingBtn = new ActionBtn({
-      text: () => this.data.is_pending ? "\u5F85\u5BA1" : "\u5DF2\u5BA1",
+    const pendingBtn = new ActionBtn(this.ctx, {
+      text: () => this.data.is_pending ? this.ctx.$t("pending") : this.ctx.$t("approved"),
       adminOnly: true
     });
     pendingBtn.appendTo(this.$actions);
     pendingBtn.setClick(() => {
-      this.adminEdit("pending", pendingBtn);
+      this.comment.getActions().adminEdit("pending", pendingBtn);
     });
-    const delBtn = new ActionBtn({
-      text: "\u5220\u9664",
+    const delBtn = new ActionBtn(this.ctx, {
+      text: this.ctx.$t("delete"),
       confirm: true,
-      confirmText: "\u786E\u8BA4\u5220\u9664",
+      confirmText: this.ctx.$t("deleteConfirm"),
       adminOnly: true
     });
     delBtn.appendTo(this.$actions);
     delBtn.setClick(() => {
-      this.adminDelete(delBtn);
+      this.comment.getActions().adminDelete(delBtn);
     });
-    const pinnedBtn = new ActionBtn({
-      text: () => this.data.is_pinned ? "\u53D6\u6D88\u7F6E\u9876" : "\u7F6E\u9876",
+    const pinnedBtn = new ActionBtn(this.ctx, {
+      text: () => this.data.is_pinned ? this.ctx.$t("unpin") : this.ctx.$t("pin"),
       adminOnly: true
     });
     pinnedBtn.appendTo(this.$actions);
     pinnedBtn.setClick(() => {
-      this.adminEdit("pinned", pendingBtn);
+      this.comment.getActions().adminEdit("pinned", pendingBtn);
+    });
+  }
+  checkHeightLimit() {
+    this.checkHeightLimitArea("content");
+    this.checkHeightLimitArea("children");
+  }
+  checkHeightLimitArea(area) {
+    const childrenMaxH = this.ctx.conf.heightLimit.children;
+    const contentMaxH = this.ctx.conf.heightLimit.content;
+    if (area === "children" && !childrenMaxH)
+      return;
+    if (area === "content" && !contentMaxH)
+      return;
+    let maxHeight;
+    if (area === "children")
+      maxHeight = childrenMaxH;
+    if (area === "content")
+      maxHeight = contentMaxH;
+    const checkEl = ($el) => {
+      if (!$el)
+        return;
+      if (getHeight($el) > maxHeight) {
+        this.heightLimitAdd($el, maxHeight);
+      }
+    };
+    if (area === "children") {
+      checkEl(this.$childrenWrap);
+    } else if (area === "content") {
+      checkEl(this.$content);
+      checkEl(this.$replyTo);
+      onImagesLoaded(this.$content, () => {
+        checkEl(this.$content);
+      });
+      if (this.$replyTo) {
+        onImagesLoaded(this.$replyTo, () => {
+          checkEl(this.$replyTo);
+        });
+      }
+    }
+  }
+  heightLimitRemove($el) {
+    if (!$el)
+      return;
+    if (!$el.classList.contains("atk-height-limit"))
+      return;
+    $el.classList.remove("atk-height-limit");
+    Array.from($el.children).forEach((e) => {
+      if (e.classList.contains("atk-height-limit-btn"))
+        e.remove();
+    });
+    $el.style.height = "";
+    $el.style.overflow = "";
+  }
+  heightLimitRemoveForChildren() {
+    if (!this.$childrenWrap)
+      return;
+    this.heightLimitRemove(this.$childrenWrap);
+  }
+  heightLimitAdd($el, maxHeight) {
+    if (!$el)
+      return;
+    if ($el.classList.contains("atk-height-limit"))
+      return;
+    $el.classList.add("atk-height-limit");
+    $el.style.height = `${maxHeight}px`;
+    $el.style.overflow = "hidden";
+    const $hideMoreOpenBtn = createElement(`<div class="atk-height-limit-btn">${this.ctx.$t("readMore")}</span>`);
+    $hideMoreOpenBtn.onclick = (e) => {
+      e.stopPropagation();
+      this.heightLimitRemove($el);
+      const children = this.comment.getChildren();
+      if (children.length === 1)
+        children[0].getRender().heightLimitRemove(children[0].getRender().$content);
+    };
+    $el.append($hideMoreOpenBtn);
+  }
+  playFadeAnim() {
+    playFadeInAnim(this.comment.getRender().$el);
+  }
+  playFadeAnimForBody() {
+    playFadeInAnim(this.comment.getRender().$body);
+  }
+  getChildrenWrap() {
+    return this.$childrenWrap;
+  }
+  renderChildrenWrap() {
+    if (!this.$childrenWrap) {
+      this.$childrenWrap = createElement('<div class="atk-comment-children"></div>');
+      this.$main.append(this.$childrenWrap);
+    }
+    return this.$childrenWrap;
+  }
+  recoveryChildrenWrap() {
+    if (this.$childrenWrap) {
+      this.$main.append(this.$childrenWrap);
+    }
+  }
+  setUnread(val) {
+    if (val)
+      this.$el.classList.add("atk-unread");
+    else
+      this.$el.classList.remove("atk-unread");
+  }
+  setOpenable(val) {
+    if (val)
+      this.$el.classList.add("atk-openable");
+    else
+      this.$el.classList.remove("atk-openable");
+  }
+  setOpenURL(url) {
+    this.setOpenable(true);
+    this.$el.onclick = (evt) => {
+      evt.preventDefault();
+      window.open(url);
+      if (this.cConf.openEvt)
+        this.cConf.openEvt();
+    };
+  }
+  setOpenAction(action) {
+    this.setOpenable(true);
+    this.$el.onclick = (evt) => {
+      evt.preventDefault();
+      action();
+    };
+  }
+}
+class CommentActions {
+  constructor(comment2) {
+    __publicField(this, "comment");
+    this.comment = comment2;
+  }
+  get ctx() {
+    return this.comment.ctx;
+  }
+  get data() {
+    return this.comment.getData();
+  }
+  get cConf() {
+    return this.comment.getConf();
+  }
+  vote(type) {
+    const actionBtn = type === "up" ? this.comment.getRender().voteBtnUp : this.comment.getRender().voteBtnDown;
+    this.ctx.getApi().vote(this.data.id, `comment_${type}`).then((v) => {
+      var _a, _b;
+      this.data.vote_up = v.up;
+      this.data.vote_down = v.down;
+      (_a = this.comment.getRender().voteBtnUp) == null ? void 0 : _a.updateText();
+      (_b = this.comment.getRender().voteBtnDown) == null ? void 0 : _b.updateText();
+    }).catch((err) => {
+      actionBtn == null ? void 0 : actionBtn.setError(this.ctx.$t("voteFail"));
+      console.log(err);
+    });
+  }
+  adminEdit(type, btnElem) {
+    if (btnElem.isLoading)
+      return;
+    btnElem.setLoading(true, `${this.ctx.$t("editing")}...`);
+    const modify = __spreadValues({}, this.data);
+    if (type === "collapsed") {
+      modify.is_collapsed = !modify.is_collapsed;
+    } else if (type === "pending") {
+      modify.is_pending = !modify.is_pending;
+    } else if (type === "pinned") {
+      modify.is_pinned = !modify.is_pinned;
+    }
+    this.ctx.getApi().commentEdit(modify).then((data) => {
+      btnElem.setLoading(false);
+      this.comment.setData(data);
+      this.ctx.listRefreshUI();
+    }).catch((err) => {
+      console.error(err);
+      btnElem.setError(this.ctx.$t("editFail"));
+    });
+  }
+  adminDelete(btnElem) {
+    if (btnElem.isLoading)
+      return;
+    btnElem.setLoading(true, `${this.ctx.$t("deleting")}...`);
+    this.ctx.getApi().commentDel(this.data.id, this.data.site_name).then(() => {
+      btnElem.setLoading(false);
+      if (this.cConf.onDelete)
+        this.cConf.onDelete(this.comment);
+    }).catch((e) => {
+      console.error(e);
+      btnElem.setError(this.ctx.$t("deleteFail"));
     });
   }
-  refreshUI() {
-    const originalEl = this.$el;
-    const newEl = this.render();
-    originalEl.replaceWith(newEl);
-    this.playFadeInAnim();
-    this.eachComment(this.children, (child) => {
-      var _a;
-      (_a = child.parent) == null ? void 0 : _a.getChildrenEl().appendChild(child.render());
-      child.playFadeInAnim();
-    });
-    this.ctx.trigger("comments-loaded");
+  goToReplyComment() {
+    const origHash = window.location.hash;
+    const modifyHash = `#atk-comment-${this.data.rid}`;
+    window.location.hash = modifyHash;
+    if (modifyHash === origHash)
+      window.dispatchEvent(new Event("hashchange"));
+  }
+}
+class Comment extends Component {
+  constructor(ctx, data, conf) {
+    super(ctx);
+    __publicField(this, "renderInstance");
+    __publicField(this, "actionInstance");
+    __publicField(this, "data");
+    __publicField(this, "cConf");
+    __publicField(this, "parent");
+    __publicField(this, "children", []);
+    __publicField(this, "nestCurt");
+    __publicField(this, "nestMax");
+    this.nestMax = ctx.conf.nestMax || 3;
+    this.cConf = conf;
+    this.data = __spreadValues({}, data);
+    this.data.date = this.data.date.replace(/-/g, "/");
+    this.parent = null;
+    this.nestCurt = 1;
+    this.actionInstance = new CommentActions(this);
+    this.renderInstance = new CommentRender(this);
+  }
+  render() {
+    const newEl = this.renderInstance.render();
+    if (this.$el)
+      this.$el.replaceWith(newEl);
+    this.$el = newEl;
+    if (this.cConf.afterRender)
+      this.cConf.afterRender();
   }
-  eachComment(commentList, action) {
-    if (commentList.length === 0)
-      return;
-    commentList.every((item) => {
-      if (action(item, commentList) === false)
-        return false;
-      this.eachComment(item.getChildren(), action);
-      return true;
-    });
+  getActions() {
+    return this.actionInstance;
   }
-  getIsRoot() {
-    return this.data.rid === 0;
+  getRender() {
+    return this.renderInstance;
+  }
+  getData() {
+    return this.data;
+  }
+  setData(data) {
+    this.data = data;
+    this.render();
+    this.getRender().playFadeAnimForBody();
+  }
+  getParent() {
+    return this.parent;
   }
   getChildren() {
     return this.children;
   }
+  getNestCurt() {
+    return this.nestCurt;
+  }
+  getIsRoot() {
+    return this.data.rid === 0;
+  }
+  getID() {
+    return this.data.id;
+  }
   putChild(childC, insertMode = "append") {
     childC.parent = this;
     childC.nestCurt = this.nestCurt + 1;
@@ -5422,22 +5938,19 @@ class Comment extends Component {
       $children.append(childC.getEl());
     else if (insertMode === "prepend")
       $children.prepend(childC.getEl());
-    childC.playFadeInAnim();
-    childC.checkHeightLimitArea("content");
+    childC.getRender().playFadeAnim();
+    childC.getRender().checkHeightLimitArea("content");
   }
   getChildrenEl() {
-    if (!this.$children) {
+    let $children = this.getRender().getChildrenWrap();
+    if (!$children) {
       if (this.nestCurt < this.nestMax) {
-        this.$children = createElement('<div class="atk-comment-children"></div>');
-        this.$main.append(this.$children);
-      } else if (this.parent) {
-        this.$children = this.parent.getChildrenEl();
+        $children = this.getRender().renderChildrenWrap();
+      } else {
+        $children = this.parent.getChildrenEl();
       }
     }
-    return this.$children;
-  }
-  getParent() {
-    return this.parent;
+    return $children;
   }
   getParents() {
     const parents = [];
@@ -5453,17 +5966,14 @@ class Comment extends Component {
   getEl() {
     return this.$el;
   }
-  getData() {
-    return this.data;
-  }
-  getGravatarUrl() {
+  getGravatarURL() {
     return getGravatarURL(this.ctx, this.data.email_encrypted);
   }
   getContentMarked() {
     return marked(this.ctx, this.data.content);
   }
   getDateFormatted() {
-    return timeAgo(new Date(this.data.date));
+    return timeAgo(new Date(this.data.date), this.ctx);
   }
   getUserUaBrowser() {
     const info = Detect(this.data.ua);
@@ -5473,143 +5983,8 @@ class Comment extends Component {
     const info = Detect(this.data.ua);
     return `${info.os} ${info.osVersion}`;
   }
-  playFadeInAnim() {
-    playFadeInAnim(this.$el);
-  }
-  vote(type) {
-    const actionBtn = type === "up" ? this.voteBtnUp : this.voteBtnDown;
-    new Api(this.ctx).vote(this.data.id, `comment_${type}`).then((v) => {
-      var _a, _b;
-      this.data.vote_up = v.up;
-      this.data.vote_down = v.down;
-      (_a = this.voteBtnUp) == null ? void 0 : _a.updateText();
-      (_b = this.voteBtnDown) == null ? void 0 : _b.updateText();
-    }).catch((err) => {
-      actionBtn == null ? void 0 : actionBtn.setError(`\u6295\u7968\u5931\u8D25`);
-      console.log(err);
-    });
-  }
-  adminEdit(type, btnElem) {
-    if (btnElem.isLoading)
-      return;
-    btnElem.setLoading(true, "\u4FEE\u6539\u4E2D...");
-    const modify = __spreadValues({}, this.data);
-    if (type === "collapsed") {
-      modify.is_collapsed = !modify.is_collapsed;
-    } else if (type === "pending") {
-      modify.is_pending = !modify.is_pending;
-    } else if (type === "pinned") {
-      modify.is_pinned = !modify.is_pinned;
-    }
-    new Api(this.ctx).commentEdit(modify).then((comment2) => {
-      btnElem.setLoading(false);
-      this.data = comment2;
-      this.refreshUI();
-      playFadeInAnim(this.$body);
-      this.ctx.trigger("list-refresh-ui");
-    }).catch((err) => {
-      console.error(err);
-      btnElem.setError("\u4FEE\u6539\u5931\u8D25");
-    });
-  }
-  adminDelete(btnElem) {
-    if (btnElem.isLoading)
-      return;
-    btnElem.setLoading(true, "\u5220\u9664\u4E2D...");
-    new Api(this.ctx).commentDel(this.data.id, this.data.site_name).then(() => {
-      btnElem.setLoading(false);
-      if (this.onDelete)
-        this.onDelete(this);
-    }).catch((e) => {
-      console.error(e);
-      btnElem.setError("\u5220\u9664\u5931\u8D25");
-    });
-  }
-  setUnread(val) {
-    this.unread = val;
-    if (this.unread)
-      this.$el.classList.add("atk-unread");
-    else
-      this.$el.classList.remove("atk-unread");
-  }
-  setOpenURL(url) {
-    if (!url) {
-      this.openable = false;
-      this.$el.classList.remove("atk-openable");
-    }
-    this.openable = true;
-    this.openURL = url;
-    this.$el.classList.add("atk-openable");
-  }
-  checkHeightLimit() {
-    this.checkHeightLimitArea("content");
-    this.checkHeightLimitArea("children");
-  }
-  checkHeightLimitArea(area) {
-    var _a, _b;
-    const childrenMaxH = (_a = this.ctx.conf.heightLimit) == null ? void 0 : _a.children;
-    const contentMaxH = (_b = this.ctx.conf.heightLimit) == null ? void 0 : _b.content;
-    if (area === "children" && !childrenMaxH)
-      return;
-    if (area === "content" && !contentMaxH)
-      return;
-    let maxHeight;
-    if (area === "children")
-      maxHeight = childrenMaxH;
-    if (area === "content")
-      maxHeight = contentMaxH;
-    const checkEl = ($el) => {
-      if (!$el)
-        return;
-      if (getHeight($el) > maxHeight) {
-        this.heightLimitAdd($el, maxHeight);
-      }
-    };
-    if (area === "children") {
-      checkEl(this.$children);
-    } else if (area === "content") {
-      checkEl(this.$content);
-      checkEl(this.$replyTo);
-      onImagesLoaded(this.$content, () => {
-        checkEl(this.$content);
-      });
-      if (this.$replyTo) {
-        onImagesLoaded(this.$replyTo, () => {
-          checkEl(this.$replyTo);
-        });
-      }
-    }
-  }
-  heightLimitRemove($el) {
-    if (!$el)
-      return;
-    if (!$el.classList.contains("atk-height-limit"))
-      return;
-    $el.classList.remove("atk-height-limit");
-    Array.from($el.children).forEach((e) => {
-      if (e.classList.contains("atk-height-limit-btn"))
-        e.remove();
-    });
-    $el.style.height = "";
-    $el.style.overflow = "";
-  }
-  heightLimitAdd($el, maxHeight) {
-    if (!$el)
-      return;
-    if ($el.classList.contains("atk-height-limit"))
-      return;
-    $el.classList.add("atk-height-limit");
-    $el.style.height = `${maxHeight}px`;
-    $el.style.overflow = "hidden";
-    const $hideMoreOpenBtn = createElement(`<div class="atk-height-limit-btn">\u9605\u8BFB\u66F4\u591A</span>`);
-    $hideMoreOpenBtn.onclick = (e) => {
-      e.stopPropagation();
-      this.heightLimitRemove($el);
-      const children = this.getChildren();
-      if (children.length === 1)
-        children[0].heightLimitRemove(children[0].$content);
-    };
-    $el.append($hideMoreOpenBtn);
+  getConf() {
+    return this.cConf;
   }
 }
 var pagination = "";
@@ -5755,11 +6130,13 @@ class ReadMoreBtn {
     __publicField(this, "$text");
     __publicField(this, "offset", 0);
     __publicField(this, "total", 0);
+    __publicField(this, "origText", "Load More");
     this.conf = conf;
+    this.origText = this.conf.text || this.origText;
     this.$el = createElement(`<div class="atk-list-read-more" style="display: none;">
       <div class="atk-list-read-more-inner">
         <div class="atk-loading-icon" style="display: none;"></div>
-        <span class="atk-text">\u52A0\u8F7D\u66F4\u591A</span>
+        <span class="atk-text">${this.origText}</span>
       </div>
     </div>`);
     this.$loading = this.$el.querySelector(".atk-loading-icon");
@@ -5791,7 +6168,7 @@ class ReadMoreBtn {
     this.$text.innerText = errMsg;
     this.$el.classList.add("atk-err");
     window.setTimeout(() => {
-      this.$text.innerText = "\u67E5\u770B\u66F4\u591A";
+      this.$text.innerText = this.origText;
       this.$el.classList.remove("atk-err");
     }, 2e3);
   }
@@ -5858,15 +6235,14 @@ function makeNestCommentNodeList(srcData, sortBy = "DATE_DESC", nestMax = 2) {
   })(nodeList);
   return nodeList;
 }
-const backendMinVersion = "2.1.6";
+const backendMinVersion = "2.1.7";
 class ListLite extends Component {
   constructor(ctx) {
     super(ctx);
     __publicField(this, "$commentsWrap");
-    __publicField(this, "commentList", []);
     __publicField(this, "data");
     __publicField(this, "isLoading", false);
-    __publicField(this, "noCommentText", "\u65E0\u5185\u5BB9");
+    __publicField(this, "noCommentText");
     __publicField(this, "flatMode", false);
     __publicField(this, "nestSortBy");
     __publicField(this, "pageMode", "pagination");
@@ -5885,19 +6261,23 @@ class ListLite extends Component {
       <div class="atk-list-comments-wrap"></div>
     </div>`);
     this.$commentsWrap = this.$el.querySelector(".atk-list-comments-wrap");
-    if (ctx.conf.noComment)
-      this.noCommentText = ctx.conf.noComment;
+    this.noCommentText = ctx.conf.noComment || ctx.$t("noComment");
     this.nestSortBy = this.ctx.conf.nestSort || "DATE_ASC";
     window.setInterval(() => {
       this.$el.querySelectorAll("[data-atk-comment-date]").forEach((el) => {
         const date = el.getAttribute("data-atk-comment-date");
-        el.innerText = timeAgo(new Date(Number(date)));
+        el.innerText = timeAgo(new Date(Number(date)), this.ctx);
       });
     }, 30 * 1e3);
-    this.ctx.on("unread-update", (data) => this.updateUnread(data.notifies));
   }
-  get commentDataList() {
-    return this.commentList.map((c) => c.data);
+  getData() {
+    return this.data;
+  }
+  clearData() {
+    this.data = void 0;
+  }
+  getCommentsWrapEl() {
+    return this.$commentsWrap;
   }
   fetchComments(offset) {
     return __async(this, null, function* () {
@@ -5922,13 +6302,13 @@ class ListLite extends Component {
           this.pagination.setLoading(false);
       };
       showLoading$1();
-      this.ctx.trigger("comments-load");
+      this.ctx.trigger("list-load");
       if (this.pageMode === "read-more" && offset === 0) {
-        this.clearAllComments();
+        this.ctx.clearAllComments();
       }
       let listData;
       try {
-        listData = yield new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor);
+        listData = yield this.ctx.getApi().get(offset, this.pageSize, this.flatMode, this.paramsEditor);
       } catch (e) {
         this.onError(e.msg || String(e), offset, e.data);
         throw e;
@@ -5949,13 +6329,13 @@ class ListLite extends Component {
   onLoad(data, offset) {
     var _a, _b;
     if (this.pageMode === "pagination") {
-      this.clearAllComments();
+      this.ctx.clearAllComments();
     }
     this.data = data;
     const feMinVersion = ((_a = data.api_version) == null ? void 0 : _a.fe_min_version) || "0.0.0";
-    if (this.ctx.conf.versionCheck && this.versionCheck("\u524D\u7AEF", feMinVersion, "2.2.12"))
+    if (this.ctx.conf.versionCheck && this.versionCheck("frontend", feMinVersion, "2.3.2"))
       return;
-    if (this.ctx.conf.versionCheck && this.versionCheck("\u540E\u7AEF", backendMinVersion, (_b = data.api_version) == null ? void 0 : _b.version))
+    if (this.ctx.conf.versionCheck && this.versionCheck("backend", backendMinVersion, (_b = data.api_version) == null ? void 0 : _b.version))
       return;
     if (data.conf && typeof data.conf.img_upload === "boolean") {
       this.ctx.conf.imgUpload = data.conf.img_upload;
@@ -5963,8 +6343,8 @@ class ListLite extends Component {
     this.importComments(data.comments);
     this.refreshPagination(offset, this.flatMode ? data.total : data.total_roots);
     this.refreshUI();
-    this.ctx.trigger("unread-update", { notifies: data.unread || [] });
-    this.ctx.trigger("comments-loaded");
+    this.ctx.updateNotifies(data.unread || []);
+    this.ctx.trigger("list-loaded");
     this.ctx.trigger("conf-updated");
     if (this.onAfterLoad)
       this.onAfterLoad(data);
@@ -5982,16 +6362,16 @@ class ListLite extends Component {
       this.readMoreBtn.update(offset, total);
   }
   initPagination() {
-    var _a;
     if (this.pageMode === "read-more") {
       this.readMoreBtn = new ReadMoreBtn({
         pageSize: this.pageSize,
         onClick: (o) => __async(this, null, function* () {
           yield this.fetchComments(o);
-        })
+        }),
+        text: this.ctx.$t("loadMore")
       });
       this.$el.append(this.readMoreBtn.$el);
-      if ((_a = this.conf.pagination) == null ? void 0 : _a.autoLoad) {
+      if (this.conf.pagination.autoLoad) {
         const at = this.scrollListenerAt || document;
         if (this.autoLoadScrollEvent)
           at.removeEventListener("scroll", this.autoLoadScrollEvent);
@@ -6019,7 +6399,7 @@ class ListLite extends Component {
         pageSize: this.pageSize,
         onChange: (o) => __async(this, null, function* () {
           if (this.ctx.conf.editorTravel === true) {
-            this.ctx.trigger("editor-travel-back");
+            this.ctx.editorTravelBack();
           }
           yield this.fetchComments(o);
           if (this.repositionAt) {
@@ -6039,11 +6419,11 @@ class ListLite extends Component {
     msg = String(msg);
     console.error(msg);
     if (offset !== 0 && this.pageMode === "read-more") {
-      (_a = this.readMoreBtn) == null ? void 0 : _a.showErr(`\u83B7\u53D6\u5931\u8D25`);
+      (_a = this.readMoreBtn) == null ? void 0 : _a.showErr(this.$t("loadFail"));
       return;
     }
-    const $err = createElement(`<span>${msg}\uFF0C\u65E0\u6CD5\u83B7\u53D6\u8BC4\u8BBA\u5217\u8868\u6570\u636E<br/></span>`);
-    const $retryBtn = createElement('<span style="cursor:pointer;">\u70B9\u51FB\u91CD\u65B0\u83B7\u53D6</span>');
+    const $err = createElement(`<span>${msg}\uFF0C${this.$t("listLoadFailMsg")}<br/></span>`);
+    const $retryBtn = createElement(`<span style="cursor:pointer;">${this.$t("listRetry")}</span>`);
     $retryBtn.onclick = () => this.fetchComments(0);
     $err.appendChild($retryBtn);
     const adminBtn = createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">\u6253\u5F00\u63A7\u5236\u53F0</span></span>');
@@ -6058,13 +6438,13 @@ class ListLite extends Component {
       };
       sidebarView = `sites|${JSON.stringify(viewLoadParam)}`;
     }
-    adminBtn.onclick = () => this.ctx.trigger("sidebar-show", {
+    adminBtn.onclick = () => this.ctx.showSidebar({
       view: sidebarView
     });
     setError(this.$el, $err);
   }
   refreshUI() {
-    const isNoComment = this.commentList.length <= 0;
+    const isNoComment = this.ctx.getCommentList().length <= 0;
     let $noComment = this.$commentsWrap.querySelector(".atk-list-no-comment");
     if (isNoComment) {
       if (!$noComment) {
@@ -6075,24 +6455,28 @@ class ListLite extends Component {
     } else {
       $noComment == null ? void 0 : $noComment.remove();
     }
-    this.ctx.trigger("check-admin-show-el");
+    this.ctx.checkAdminShowEl();
+  }
+  reload() {
+    this.fetchComments(0);
   }
   createComment(cData, ctxData) {
     if (!ctxData)
-      ctxData = this.commentDataList;
-    const comment2 = new Comment(this.ctx, cData);
-    comment2.flatMode = this.flatMode;
-    comment2.afterRender = () => {
-      if (this.renderComment)
-        this.renderComment(comment2);
-    };
-    comment2.onDelete = (c) => {
-      this.deleteComment(c);
-      this.refreshUI();
-    };
-    comment2.replyTo = cData.rid ? ctxData.find((c) => c.id === cData.rid) : void 0;
+      ctxData = this.ctx.getCommentDataList();
+    const comment2 = new Comment(this.ctx, cData, {
+      isFlatMode: this.flatMode,
+      afterRender: () => {
+        if (this.renderComment)
+          this.renderComment(comment2);
+      },
+      onDelete: (c) => {
+        this.ctx.deleteComment(c);
+        this.refreshUI();
+      },
+      replyTo: cData.rid ? ctxData.find((c) => c.id === cData.rid) : void 0
+    });
     comment2.render();
-    this.commentList.push(comment2);
+    this.ctx.getCommentList().push(comment2);
     return comment2;
   }
   importComments(srcData) {
@@ -6109,7 +6493,7 @@ class ListLite extends Component {
     rootNodes.forEach((rootNode) => {
       const rootC = this.createComment(rootNode.comment, srcData);
       this.$commentsWrap.appendChild(rootC.getEl());
-      rootC.playFadeInAnim();
+      rootC.getRender().playFadeAnim();
       const that = this;
       (function loadChildren(parentC, parentNode) {
         parentNode.children.forEach((node) => {
@@ -6119,7 +6503,7 @@ class ListLite extends Component {
           loadChildren(childC, node);
         });
       })(rootC, rootNode);
-      rootC.checkHeightLimit();
+      rootC.getRender().checkHeightLimit();
     });
   }
   putCommentFlatMode(cData, ctxData, insertMode) {
@@ -6131,9 +6515,9 @@ class ListLite extends Component {
         this.$commentsWrap.append(comment2.getEl());
       if (insertMode === "prepend")
         this.$commentsWrap.prepend(comment2.getEl());
-      comment2.playFadeInAnim();
+      comment2.getRender().playFadeAnim();
     }
-    comment2.checkHeightLimit();
+    comment2.getRender().checkHeightLimit();
     return comment2;
   }
   insertComment(commentData) {
@@ -6142,66 +6526,41 @@ class ListLite extends Component {
       if (commentData.rid === 0) {
         this.$commentsWrap.prepend(comment2.getEl());
       } else {
-        const parent = this.findComment(commentData.rid);
+        const parent = this.ctx.findComment(commentData.rid);
         if (parent) {
           parent.putChild(comment2, this.nestSortBy === "DATE_ASC" ? "append" : "prepend");
           comment2.getParents().forEach((p) => {
-            if (p.$children)
-              p.heightLimitRemove(p.$children);
+            p.getRender().heightLimitRemoveForChildren();
           });
         }
       }
-      comment2.checkHeightLimit();
+      comment2.getRender().checkHeightLimit();
       scrollIntoView(comment2.getEl());
-      comment2.playFadeInAnim();
+      comment2.getRender().playFadeAnim();
     } else {
-      const comment2 = this.putCommentFlatMode(commentData, this.commentDataList, "prepend");
+      const comment2 = this.putCommentFlatMode(commentData, this.ctx.getCommentDataList(), "prepend");
       scrollIntoView(comment2.getEl());
     }
     if (this.data)
       this.data.total += 1;
     this.refreshUI();
-    this.ctx.trigger("comments-loaded");
-  }
-  findComment(id) {
-    return this.commentList.find((c) => c.data.id === id);
-  }
-  deleteComment(_comment) {
-    let comment2;
-    if (typeof _comment === "number") {
-      const findComment = this.findComment(_comment);
-      if (!findComment)
-        throw Error(`\u672A\u627E\u5230\u8BC4\u8BBA ${_comment}`);
-      comment2 = findComment;
-    } else
-      comment2 = _comment;
-    comment2.getEl().remove();
-    this.commentList.splice(this.commentList.indexOf(comment2), 1);
-    if (this.data)
-      this.data.total -= 1;
-    this.refreshUI();
-  }
-  clearAllComments() {
-    this.$commentsWrap.innerHTML = "";
-    this.data = void 0;
-    this.commentList = [];
+    this.ctx.trigger("list-loaded");
+    this.ctx.trigger("list-inserted", commentData);
   }
   updateUnread(notifies) {
     this.unread = notifies;
     if (this.unreadHighlight === true) {
-      this.commentList.forEach((comment2) => {
-        const notify = this.unread.find((o) => o.comment_id === comment2.data.id);
+      this.ctx.getCommentList().forEach((comment2) => {
+        const notify = this.unread.find((o) => o.comment_id === comment2.getID());
         if (notify) {
-          comment2.setUnread(true);
-          comment2.setOpenURL(notify.read_link);
-          comment2.openEvt = () => {
-            this.unread = this.unread.filter((o) => o.comment_id !== comment2.data.id);
-            this.ctx.trigger("unread-update", {
-              notifies: this.unread
-            });
-          };
+          comment2.getRender().setUnread(true);
+          comment2.getRender().setOpenAction(() => {
+            window.open(notify.read_link);
+            this.unread = this.unread.filter((o) => o.comment_id !== comment2.getID());
+            this.ctx.updateNotifies(this.unread);
+          });
         } else {
-          comment2.setUnread(false);
+          comment2.getRender().setUnread(false);
         }
       });
     }
@@ -6209,7 +6568,7 @@ class ListLite extends Component {
   versionCheck(name, needVersion, curtVersion) {
     const needUpdate = versionCompare(needVersion, curtVersion) === 1;
     if (needUpdate) {
-      const errEl = createElement(`<div>Artalk ${name}\u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u5982\u679C\u4F60\u662F\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u5F97\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u5F53\u524D${name}\u7248\u672C ${curtVersion}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
+      const errEl = createElement(`<div>Artalk ${this.$t(name)}\u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u5982\u679C\u4F60\u662F\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u5F97\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u5F53\u524D${this.$t(name)}\u7248\u672C ${curtVersion}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
       const ignoreBtn = createElement('<span style="cursor:pointer;">\u5FFD\u7565</span>');
       ignoreBtn.onclick = () => {
         setError(this.$el.parentElement, null);
@@ -6225,55 +6584,46 @@ class ListLite extends Component {
 }
 class List extends ListLite {
   constructor(ctx) {
-    var _a, _b;
     const el = createElement(ListHTML);
     super(ctx);
     __publicField(this, "$closeCommentBtn");
     __publicField(this, "$openSidebarBtn");
     __publicField(this, "$unreadBadge");
     __publicField(this, "$commentCount");
+    __publicField(this, "$commentCountNum");
     __publicField(this, "$dropdownWrap");
     __publicField(this, "goToCommentFounded", false);
     __publicField(this, "goToCommentDelay", true);
     el.querySelector(".atk-list-body").append(this.$el);
     this.$el = el;
-    let flatMode = false;
-    if (this.ctx.conf.flatMode === "auto") {
+    if (this.ctx.conf.flatMode === true) {
+      this.flatMode = true;
+    } else if (this.conf.nestMax && this.conf.nestMax <= 1) {
+      this.flatMode = true;
+    } else if (this.ctx.conf.flatMode === "auto") {
       if (window.matchMedia("(max-width: 768px)").matches)
-        flatMode = true;
-    } else if (this.ctx.conf.flatMode === true) {
-      flatMode = true;
+        this.flatMode = true;
     }
-    this.flatMode = flatMode;
-    this.pageMode = ((_a = this.conf.pagination) == null ? void 0 : _a.readMore) ? "read-more" : "pagination";
-    this.pageSize = ((_b = this.conf.pagination) == null ? void 0 : _b.pageSize) || 20;
+    this.pageMode = this.conf.pagination.readMore ? "read-more" : "pagination";
+    this.pageSize = this.conf.pagination.pageSize || 20;
     this.repositionAt = this.$el;
     this.initListActionBtn();
     this.$commentCount = this.$el.querySelector(".atk-comment-count");
+    this.$commentCount.innerHTML = this.$t("counter", {
+      count: '<span class="atk-comment-count-num">0</span>'
+    });
+    this.$commentCountNum = this.$commentCount.querySelector(".atk-comment-count-num");
     if (this.ctx.conf.listSort) {
       this.initDropdown();
     }
-    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.2.12"}">Artalk</a>`;
-    this.ctx.on("list-reload", () => this.fetchComments(0));
-    this.ctx.on("list-refresh-ui", () => this.refreshUI());
-    this.ctx.on("list-import", (data) => this.importComments(data));
-    this.ctx.on("list-insert", (data) => this.insertComment(data));
-    this.ctx.on("list-delete", (comment2) => this.deleteComment(comment2.id));
-    this.ctx.on("list-update", (updateData) => {
-      updateData(this.data);
-      this.refreshUI();
-    });
-    this.ctx.on("unread-update", (data) => {
-      var _a2;
-      return this.showUnreadBadge(((_a2 = data.notifies) == null ? void 0 : _a2.length) || 0);
-    });
+    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.3.2"}">Artalk</a>`;
   }
   initListActionBtn() {
     this.$openSidebarBtn = this.$el.querySelector('[data-action="open-sidebar"]');
     this.$closeCommentBtn = this.$el.querySelector('[data-action="admin-close-comment"]');
     this.$unreadBadge = this.$el.querySelector(".atk-unread-badge");
     this.$openSidebarBtn.addEventListener("click", () => {
-      this.ctx.trigger("sidebar-show");
+      this.ctx.showSidebar();
     });
     this.$closeCommentBtn.addEventListener("click", () => {
       if (!this.data)
@@ -6285,20 +6635,20 @@ class List extends ListLite {
   refreshUI() {
     var _a;
     super.refreshUI();
-    this.$el.querySelector(".atk-comment-count-num").innerText = String(Number((_a = this.data) == null ? void 0 : _a.total) || 0);
+    this.$commentCountNum.innerText = String(Number((_a = this.data) == null ? void 0 : _a.total) || 0);
     if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
       this.$openSidebarBtn.classList.remove("atk-hide");
     } else {
       this.$openSidebarBtn.classList.add("atk-hide");
     }
-    this.ctx.trigger("check-admin-show-el");
-    this.$openSidebarBtn.querySelector(".atk-text").innerText = !this.ctx.user.data.isAdmin ? "\u901A\u77E5\u4E2D\u5FC3" : "\u63A7\u5236\u4E2D\u5FC3";
+    this.ctx.checkAdminShowEl();
+    this.$openSidebarBtn.querySelector(".atk-text").innerText = !this.ctx.user.data.isAdmin ? this.$t("msgCenter") : this.$t("ctrlCenter");
     if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
-      this.ctx.trigger("editor-close");
-      this.$closeCommentBtn.innerHTML = "\u6253\u5F00\u8BC4\u8BBA";
+      this.ctx.editorClose();
+      this.$closeCommentBtn.innerHTML = this.$t("openComment");
     } else {
-      this.ctx.trigger("editor-open");
-      this.$closeCommentBtn.innerHTML = "\u5173\u95ED\u8BC4\u8BBA";
+      this.ctx.editorOpen();
+      this.$closeCommentBtn.innerHTML = this.$t("closeComment");
     }
   }
   onLoad(data, offset) {
@@ -6306,7 +6656,7 @@ class List extends ListLite {
     if (!this.goToCommentFounded)
       this.checkGoToCommentByUrlHash();
     if (this.ctx.conf.editorTravel === true) {
-      this.ctx.trigger("editor-travel-back");
+      this.ctx.editorTravelBack();
     }
   }
   checkGoToCommentByUrlHash() {
@@ -6319,7 +6669,7 @@ class List extends ListLite {
     }
     if (!commentId)
       return;
-    const comment2 = this.findComment(commentId);
+    const comment2 = this.ctx.findComment(commentId);
     if (!comment2) {
       if (this.readMoreBtn)
         this.readMoreBtn.click();
@@ -6329,16 +6679,13 @@ class List extends ListLite {
     }
     const notifyKey = getQueryParam("atk_notify_key");
     if (notifyKey) {
-      new Api(this.ctx).markRead(notifyKey).then(() => {
+      this.ctx.getApi().markRead(notifyKey).then(() => {
         this.unread = this.unread.filter((o) => o.comment_id !== commentId);
-        this.ctx.trigger("unread-update", {
-          notifies: this.unread
-        });
+        this.updateUnread(this.unread);
       });
     }
     comment2.getParents().forEach((p) => {
-      if (p.$children)
-        p.heightLimitRemove(p.$children);
+      p.getRender().heightLimitRemoveForChildren();
     });
     const goTo = () => {
       scrollIntoView(comment2.getEl(), false);
@@ -6356,15 +6703,15 @@ class List extends ListLite {
   adminPageEditSave() {
     if (!this.data || !this.data.page)
       return;
-    this.ctx.trigger("editor-show-loading");
-    new Api(this.ctx).pageEdit(this.data.page).then((page) => {
+    this.ctx.editorShowLoading();
+    this.ctx.getApi().pageEdit(this.data.page).then((page) => {
       if (this.data)
         this.data.page = __spreadValues({}, page);
       this.refreshUI();
     }).catch((err) => {
-      this.ctx.trigger("editor-notify", { msg: `\u4FEE\u6539\u9875\u9762\u6570\u636E\u5931\u8D25\uFF1A${err.msg || String(err)}`, type: "e" });
+      this.ctx.editorShowNotify(`${this.$t("editFail")}: ${err.msg || String(err)}`, "e");
     }).finally(() => {
-      this.ctx.trigger("editor-hide-loading");
+      this.ctx.editorHideLoading();
     });
   }
   showUnreadBadge(count) {
@@ -6386,22 +6733,22 @@ class List extends ListLite {
       this.fetchComments(0);
     };
     const dropdownList = [
-      ["\u6700\u65B0", () => {
+      [this.$t("sortLatest"), () => {
         reloadUseParamsEditor((p) => {
           p.sort_by = "date_desc";
         });
       }],
-      ["\u6700\u70ED", () => {
+      [this.$t("sortBest"), () => {
         reloadUseParamsEditor((p) => {
           p.sort_by = "vote";
         });
       }],
-      ["\u6700\u65E9", () => {
+      [this.$t("sortOldest"), () => {
         reloadUseParamsEditor((p) => {
           p.sort_by = "date_asc";
         });
       }],
-      ["\u4F5C\u8005", () => {
+      [this.$t("sortAuthor"), () => {
         reloadUseParamsEditor((p) => {
           p.view_only_admin = true;
         });
@@ -6436,6 +6783,10 @@ class List extends ListLite {
     });
     this.$dropdownWrap.append($dropdown);
   }
+  updateUnread(notifies) {
+    super.updateUnread(notifies);
+    this.showUnreadBadge((notifies == null ? void 0 : notifies.length) || 0);
+  }
 }
 var sidebarLayer = "";
 var SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
@@ -6448,7 +6799,6 @@ class SidebarLayer extends Component {
     __publicField(this, "$iframeWrap");
     __publicField(this, "$iframe");
     __publicField(this, "firstShow", true);
-    __publicField(this, "loadingTimer", null);
     this.$el = createElement(SidebarHTML);
     this.$header = this.$el.querySelector(".atk-sidebar-header");
     this.$closeBtn = this.$header.querySelector(".atk-sidebar-close");
@@ -6456,20 +6806,18 @@ class SidebarLayer extends Component {
     this.$closeBtn.onclick = () => {
       this.hide();
     };
-    this.ctx.on("sidebar-show", (conf) => this.show(conf || {}));
-    this.ctx.on("sidebar-hide", () => this.hide());
     this.ctx.on("user-changed", () => {
       this.firstShow = true;
     });
   }
-  show(conf) {
-    return __async(this, null, function* () {
+  show() {
+    return __async(this, arguments, function* (conf = {}) {
       this.$el.style.transform = "";
       if (this.layer == null) {
         this.layer = new Layer(this.ctx, "sidebar", this.$el);
         this.layer.afterHide = () => {
           if (this.ctx.conf.editorTravel === true) {
-            this.ctx.trigger("editor-travel-back");
+            this.ctx.editorTravelBack();
           }
         };
       }
@@ -6479,11 +6827,11 @@ class SidebarLayer extends Component {
       }, 20);
       (() => __async(this, null, function* () {
         var _a;
-        const resp = yield new Api(this.ctx).loginStatus();
+        const resp = yield this.ctx.getApi().loginStatus();
         if (resp.is_admin && !resp.is_login) {
           (_a = this.layer) == null ? void 0 : _a.hide();
           this.firstShow = true;
-          this.ctx.trigger("checker-admin", {
+          this.ctx.checkAdmin({
             onSuccess: () => {
               setTimeout(() => {
                 this.show(conf);
@@ -6494,7 +6842,7 @@ class SidebarLayer extends Component {
           });
         }
       }))();
-      this.ctx.trigger("unread-update", { notifies: [] });
+      this.ctx.updateNotifies([]);
       if (this.firstShow) {
         this.$iframeWrap.innerHTML = "";
         this.$iframe = createElement("<iframe></iframe>");
@@ -6520,12 +6868,14 @@ class SidebarLayer extends Component {
         if (!this.conf.darkMode && isIframeSrcDarkMode)
           this.iframeLoad(this.$iframe.src.replace("&darkMode=1", ""));
       }
+      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");
   }
   iframeLoad(src) {
     if (!this.$iframe)
@@ -6536,94 +6886,112 @@ class SidebarLayer extends Component {
       hideLoading(this.$iframeWrap);
     };
   }
-  checkReqStatus(url) {
-    return __async(this, null, function* () {
-      if (this.loadingTimer !== null)
-        window.clearTimeout(this.loadingTimer);
-      this.loadingTimer = window.setTimeout(() => __async(this, null, function* () {
-        try {
-          yield fetch(url);
-        } catch (err) {
-          console.log(err);
-          const $errAlert = createElement(`<div class="atk-err-alert">  <div class="atk-title">\u4FA7\u8FB9\u680F\u4F3C\u4E4E\u6253\u5F00\u5931\u8D25</div>  <div class="atk-text"><span id="AtkReload">\u91CD\u65B0\u52A0\u8F7D</span> / <span id="AtkCancel">\u53D6\u6D88</span></div></div>`);
-          const $reloadBtn = $errAlert.querySelector("#AtkReload");
-          const $cancelBtn = $errAlert.querySelector("#AtkCancel");
-          $reloadBtn.onclick = () => {
-            this.iframeLoad(url);
-            $errAlert.remove();
-          };
-          $cancelBtn.onclick = () => {
-            $errAlert.remove();
-          };
-          this.$iframeWrap.append($errAlert);
-        }
-      }), 2e3);
+}
+const PvCountWidget = (ctx) => {
+  initCountWidget({ ctx, pvAdd: true });
+};
+function initCountWidget(p) {
+  return __async(this, null, function* () {
+    const countEl = p.ctx.conf.countEl;
+    if (countEl && document.querySelector(countEl)) {
+      handleStatCount(p, { api: "page_comment", countEl });
+    }
+    const curtPagePvNum = p.pvAdd ? yield p.ctx.getApi().pv() : void 0;
+    const pvEl = p.ctx.conf.pvEl;
+    if (pvEl && document.querySelector(pvEl)) {
+      handleStatCount(p, {
+        api: "page_pv",
+        countEl: pvEl,
+        curtPageCount: curtPagePvNum
+      });
+    }
+  });
+}
+function handleStatCount(p, args) {
+  return __async(this, null, function* () {
+    let pageCounts = {};
+    const curtPageKey = p.ctx.conf.pageKey;
+    if (args.curtPageCount)
+      pageCounts[curtPageKey] = args.curtPageCount;
+    let queryPageKeys = Array.from(document.querySelectorAll(args.countEl)).map((e) => e.getAttribute("data-page-key") || curtPageKey).filter((pageKey) => pageCounts[pageKey] === void 0);
+    queryPageKeys = [...new Set(queryPageKeys)];
+    if (queryPageKeys.length > 0) {
+      const counts = yield p.ctx.getApi().stat(args.api, queryPageKeys);
+      pageCounts = __spreadValues(__spreadValues({}, pageCounts), counts);
+    }
+    document.querySelectorAll(args.countEl).forEach((el) => {
+      const pageKey = el.getAttribute("data-page-key") || curtPageKey;
+      el.innerHTML = `${Number(pageCounts[pageKey] || 0)}`;
     });
-  }
+  });
 }
 const _Artalk = class {
   constructor(customConf) {
-    __publicField(this, "ctx");
     __publicField(this, "conf");
+    __publicField(this, "ctx");
     __publicField(this, "$root");
     __publicField(this, "checkerLauncher");
     __publicField(this, "editor");
     __publicField(this, "list");
     __publicField(this, "sidebarLayer");
-    this.conf = mergeDeep(_Artalk.defaults, customConf);
-    this.conf.server = this.conf.server.replace(/\/$/, "").replace(/\/api\/?$/, "");
-    if (!this.conf.pageKey) {
-      this.conf.pageKey = `${window.location.pathname}`;
-    }
-    if (!this.conf.pageTitle) {
-      this.conf.pageTitle = `${document.title}`;
-    }
-    if (this.conf.nestMax && this.conf.nestMax <= 1) {
-      this.conf.flatMode = true;
-    }
-    if (!!this.conf.el && this.conf.el instanceof HTMLElement) {
+    this.conf = _Artalk.HandelBaseConf(customConf);
+    if (this.conf.el instanceof HTMLElement)
       this.$root = this.conf.el;
-    } else {
-      try {
-        const $root = document.querySelector(this.conf.el);
-        if (!$root)
-          throw Error(`Sorry, target element "${this.conf.el}" was not found.`);
-        this.$root = $root;
-      } catch (e) {
-        console.error(e);
-        throw new Error("Please check your Artalk `el` config.");
-      }
-    }
-    this.ctx = new Context(this.$root, this.conf);
-    this.$root.classList.add("artalk");
-    this.$root.innerHTML = "";
-    if (this.conf.useBackendConf) {
-      return (() => __async(this, null, function* () {
-        yield this.loadConfRemote();
-        this.initCore();
-        return this;
-      }))();
-    }
-    this.initCore();
+    this.ctx = new Context(this.conf, this.$root);
+    if (this.conf.useBackendConf)
+      return this.loadConfRemoteAndInitComponents();
+    this.initComponents();
   }
-  initCore() {
+  initComponents() {
+    this.initLocale();
     this.initLayer();
     this.initDarkMode();
-    this.checkerLauncher = new CheckerLauncher(this.ctx);
     initMarked(this.ctx);
+    this.checkerLauncher = new CheckerLauncher(this.ctx);
+    this.ctx.setCheckerLauncher(this.checkerLauncher);
     this.editor = new Editor(this.ctx);
+    this.ctx.setEditor(this.editor);
     this.$root.appendChild(this.editor.$el);
     this.list = new List(this.ctx);
+    this.ctx.setList(this.list);
     this.$root.appendChild(this.list.$el);
     this.sidebarLayer = new SidebarLayer(this.ctx);
+    this.ctx.setSidebarLayer(this.sidebarLayer);
     this.$root.appendChild(this.sidebarLayer.$el);
     this.list.fetchComments(0);
     this.initEventBind();
-    this.initPV();
     _Artalk.Plugins.forEach((plugin) => {
-      if (typeof plugin === "function") {
+      if (typeof plugin === "function")
         plugin(this.ctx);
+    });
+  }
+  static HandelBaseConf(customConf) {
+    const conf = mergeDeep(_Artalk.defaults, customConf);
+    if (typeof conf.el === "string" && !!conf.el) {
+      try {
+        const findEl = document.querySelector(conf.el);
+        if (!findEl)
+          throw Error(`Target element "${conf.el}" was not found.`);
+        conf.el = findEl;
+      } catch (e) {
+        console.error(e);
+        throw new Error("Please check your Artalk `el` config.");
       }
+    }
+    conf.server = conf.server.replace(/\/$/, "").replace(/\/api\/?$/, "");
+    if (!conf.pageKey) {
+      conf.pageKey = `${window.location.pathname}`;
+    }
+    if (!conf.pageTitle) {
+      conf.pageTitle = `${document.title}`;
+    }
+    return conf;
+  }
+  loadConfRemoteAndInitComponents() {
+    return __async(this, null, function* () {
+      yield this.loadConfRemote();
+      this.initComponents();
+      return this;
     });
   }
   loadConfRemote() {
@@ -6631,9 +6999,9 @@ const _Artalk = class {
       showLoading(this.$root);
       let backendConf = {};
       try {
-        backendConf = yield new Api(this.ctx).conf();
+        backendConf = yield this.ctx.getApi().conf();
       } catch (err) {
-        console.error("\u914D\u7F6E\u8FDC\u7A0B\u83B7\u53D6\u5931\u8D25", err);
+        console.error("Load config from remote err", err);
       }
       this.ctx.conf = mergeDeep(this.ctx.conf, backendConf);
       hideLoading(this.$root);
@@ -6644,29 +7012,22 @@ const _Artalk = class {
       this.list.goToCommentDelay = false;
       this.list.checkGoToCommentByUrlHash();
     });
-    this.ctx.on("check-admin-show-el", () => {
-      const items = [];
-      this.$root.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
-      const { $wrap: $layerWrap } = GetLayerWrap(this.ctx);
-      if ($layerWrap)
-        $layerWrap.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
-      const $sidebarEl = document.querySelector(".atk-sidebar");
-      if ($sidebarEl)
-        $sidebarEl.querySelectorAll(`[atk-only-admin-show]`).forEach((item) => items.push(item));
-      items.forEach(($item) => {
-        if (this.ctx.user.data.isAdmin)
-          $item.classList.remove("atk-hide");
-        else
-          $item.classList.add("atk-hide");
-      });
-    });
     this.ctx.on("user-changed", () => {
-      this.ctx.trigger("check-admin-show-el");
-      this.ctx.trigger("list-refresh-ui");
+      this.ctx.checkAdminShowEl();
+      this.ctx.listRefreshUI();
     });
   }
-  reload() {
-    this.list.fetchComments(0);
+  initLocale() {
+    if (typeof this.conf.locale === "string") {
+      if (this.conf.locale === "auto") {
+        this.conf.locale = navigator.languages ? navigator.languages[0] : navigator.language;
+      }
+      this.conf.locale = this.conf.locale.replace(/^([a-zA-Z]+)(-[a-zA-Z]+)?$/, (_, p1, p2) => p1.toLowerCase() + (p2 || "").toUpperCase());
+      if (!internal[this.conf.locale]) {
+        console.log(`Locale "${this.conf.locale}" not found.`);
+        this.conf.locale = "en";
+      }
+    }
   }
   initLayer() {
     Layer.BodyOrgOverflow = document.body.style.overflow;
@@ -6701,17 +7062,6 @@ const _Artalk = class {
       }
     }
   }
-  initPV() {
-    return __async(this, null, function* () {
-      const pvNum = yield new Api(this.ctx).pv();
-      if (Number.isNaN(Number(pvNum)))
-        return;
-      if (!this.conf.pvEl || !document.querySelector(this.conf.pvEl))
-        return;
-      const $pv = document.querySelector(this.conf.pvEl);
-      $pv.innerText = String(pvNum);
-    });
-  }
   on(name, handler) {
     this.ctx.on(name, handler, "external");
   }
@@ -6721,11 +7071,21 @@ const _Artalk = class {
   trigger(name, payload) {
     this.ctx.trigger(name, payload, "external");
   }
+  reload() {
+    this.ctx.listReload();
+  }
   static Use(plugin) {
     this.Plugins.push(plugin);
   }
+  static LoadCountWidget(customConf) {
+    const conf = this.HandelBaseConf(customConf);
+    const ctx = new Context(conf);
+    initCountWidget({ ctx, pvAdd: false });
+  }
 };
 let Artalk = _Artalk;
-__publicField(Artalk, "defaults", defaults$3);
-__publicField(Artalk, "Plugins", []);
+__publicField(Artalk, "defaults", defaults);
+__publicField(Artalk, "Plugins", [
+  PvCountWidget
+]);
 export { Artalk as default };