@somecat/epub-reader 0.1.1 → 0.1.4

package/dist/vue.cjs

@@ -3,503 +3,7 @@
 var vue = require('vue');
 require('foliate-js/view.js');
 
-// src/styles/epub-reader.cssText.ts
-var epubReaderCssText = `
-:root {
-  --epub-reader-panel-bg: #ffffff;
-  --epub-reader-panel-fg: #1f2937;
-  --epub-reader-border: rgba(0, 0, 0, 0.12);
-  --epub-reader-accent: #2563eb;
-  --epub-reader-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  --epub-reader-radius: 10px;
-  --epub-reader-bottom-bar-height: 40px;
-}
-
-.epub-reader-icon {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.epub-reader[data-theme='dark'] {
-  --epub-reader-panel-bg: #141414;
-  --epub-reader-panel-fg: #e5e7eb;
-  --epub-reader-border: rgba(255, 255, 255, 0.14);
-  --epub-reader-accent: #60a5fa;
-  --epub-reader-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-}
-
-.epub-reader {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  outline: none;
-  overflow: hidden;
-}
-
-.epub-reader__viewer {
-  width: 100%;
-  height: calc(100% - var(--epub-reader-bottom-bar-height));
-  background: var(--epub-reader-panel-bg);
-  transition: background-color 0.2s ease;
-}
-
-.epub-reader__toolbar {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.epub-reader[data-layout='wide'] .epub-reader__toolbar {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.epub-reader__panel {
-  width: 88px;
-  padding: 8px;
-  border: 1px solid var(--epub-reader-border);
-  border-radius: var(--epub-reader-radius);
-  background: color-mix(in srgb, var(--epub-reader-panel-bg) 92%, transparent);
-  color: var(--epub-reader-panel-fg);
-  box-shadow: var(--epub-reader-shadow);
-  backdrop-filter: blur(10px);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-items: stretch;
-}
-
-.epub-reader__btn {
-  appearance: none;
-  border: 1px solid var(--epub-reader-border);
-  background: transparent;
-  color: inherit;
-  padding: 6px 8px;
-  border-radius: 8px;
-  font-size: 12px;
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-}
-
-.epub-reader__btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.epub-reader__btn:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--epub-reader-accent) 60%, var(--epub-reader-border));
-}
-
-.epub-reader__divider {
-  height: 1px;
-  background: var(--epub-reader-border);
-  margin: 2px 0;
-}
-
-.epub-reader__font {
-  text-align: center;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--epub-reader-accent);
-  padding: 2px 0;
-}
-
-.epub-reader__overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 20;
-}
-
-.epub-reader__drawer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 320px;
-  background: var(--epub-reader-panel-bg);
-  color: var(--epub-reader-panel-fg);
-  border-right: 1px solid var(--epub-reader-border);
-  transform: translateX(-100%);
-  transition: transform 0.2s ease;
-  z-index: 30;
-  display: flex;
-  flex-direction: column;
-}
-
-.epub-reader__drawer.right {
-  left: auto;
-  right: 0;
-  border-right: none;
-  border-left: 1px solid var(--epub-reader-border);
-  transform: translateX(100%);
-}
-
-.epub-reader__drawer.is-open {
-  transform: translateX(0);
-}
-
-.epub-reader__drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 12px;
-  border-bottom: 1px solid var(--epub-reader-border);
-}
-
-.epub-reader__drawer-title {
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.epub-reader__drawer-body {
-  padding: 12px;
-  overflow: auto;
-  flex: 1;
-}
-
-.epub-reader__empty {
-  padding: 20px 8px;
-  opacity: 0.7;
-  text-align: center;
-  font-size: 12px;
-}
-
-.epub-reader__toc-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.epub-reader__toc-item {
-  margin: 0;
-}
-
-.epub-reader__toc-btn {
-  width: 100%;
-  text-align: left;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--epub-reader-border);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.epub-reader__toc-btn:hover {
-  border-color: color-mix(in srgb, var(--epub-reader-accent) 60%, var(--epub-reader-border));
-}
-
-.epub-reader__toc-details {
-  border-radius: 8px;
-}
-
-.epub-reader__toc-summary {
-  padding: 8px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  border: 1px solid var(--epub-reader-border);
-  user-select: none;
-}
-
-.epub-reader__toc-details[open] > .epub-reader__toc-summary {
-  border-color: color-mix(in srgb, var(--epub-reader-accent) 60%, var(--epub-reader-border));
-}
-
-.epub-reader__toc-details > .epub-reader__toc-list {
-  padding-left: 12px;
-  margin-top: 6px;
-}
-
-.epub-reader__field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.epub-reader__input {
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--epub-reader-border);
-  background: transparent;
-  color: inherit;
-  outline: none;
-}
-
-.epub-reader__checks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 10px 0;
-  font-size: 12px;
-}
-
-.epub-reader__check {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  user-select: none;
-}
-
-.epub-reader__meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 12px;
-  opacity: 0.9;
-  margin: 6px 0 10px;
-}
-
-.epub-reader__link {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--epub-reader-accent);
-  cursor: pointer;
-  padding: 0;
-}
-
-.epub-reader__search-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.epub-reader__search-item {
-  margin: 0;
-}
-
-.epub-reader__search-btn {
-  width: 100%;
-  text-align: left;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid var(--epub-reader-border);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.epub-reader__search-btn:hover {
-  border-color: color-mix(in srgb, var(--epub-reader-accent) 60%, var(--epub-reader-border));
-}
-
-.epub-reader__search-label {
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-.epub-reader__search-excerpt {
-  font-size: 12px;
-  line-height: 1.4;
-  word-break: break-word;
-}
-
-.epub-reader__bottom {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: var(--epub-reader-bottom-bar-height);
-  border-top: 1px solid var(--epub-reader-border);
-  background: color-mix(in srgb, var(--epub-reader-panel-bg) 92%, transparent);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 0 12px;
-  z-index: 10;
-  backdrop-filter: blur(10px);
-}
-
-.epub-reader__bottom-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.epub-reader__status {
-  font-size: 12px;
-  opacity: 0.8;
-  white-space: nowrap;
-}
-
-.epub-reader__section {
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 280px;
-}
-
-.epub-reader__bottom-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 260px;
-}
-
-.epub-reader__range {
-  width: 260px;
-}
-
-.epub-reader__percent {
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  min-width: 42px;
-  text-align: right;
-}
-
-.epub-reader[data-layout='mobile'] .epub-reader__viewer {
-  height: 100%;
-  touch-action: pan-x;
-}
-
-.epub-reader[data-layout='mobile'] .epub-reader__toolbar,
-.epub-reader[data-layout='mobile'] .epub-reader__bottom,
-.epub-reader[data-layout='mobile'] .epub-reader__drawer,
-.epub-reader[data-layout='mobile'] .epub-reader__overlay {
-  display: none;
-}
-
-.epub-reader__mbar {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  bottom: 0;
-  z-index: 15;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px;
-  border: 1px solid var(--epub-reader-border);
-  border-radius: calc(var(--epub-reader-radius) + 6px);
-  background: color-mix(in srgb, var(--epub-reader-panel-bg) 92%, transparent);
-  color: var(--epub-reader-panel-fg);
-  box-shadow: var(--epub-reader-shadow);
-  backdrop-filter: blur(10px);
-  transform: translateY(calc(100% + 10px));
-  transition: transform 0.2s ease;
-}
-
-.epub-reader__mbar.is-visible {
-  transform: translateY(-4px);
-}
-
-.epub-reader__mbar .epub-reader__btn {
-  flex: 1 1 0;
-  text-align: center;
-  padding: 10px 8px;
-  font-size: 13px;
-}
-
-.epub-reader__moverlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 20;
-}
-
-.epub-reader__msheet {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 60%;
-  max-height: calc(100% - 70px);
-  background: var(--epub-reader-panel-bg);
-  color: var(--epub-reader-panel-fg);
-  border-top: 1px solid var(--epub-reader-border);
-  border-top-left-radius: calc(var(--epub-reader-radius) + 10px);
-  border-top-right-radius: calc(var(--epub-reader-radius) + 10px);
-  transform: translateY(100%);
-  transition: transform 0.25s ease;
-  z-index: 30;
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.epub-reader__msheet.is-open {
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.epub-reader__msheet-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 12px 12px 10px;
-  border-bottom: 1px solid var(--epub-reader-border);
-}
-
-.epub-reader__msheet-title {
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.epub-reader__msheet-body {
-  padding: 12px;
-  overflow: auto;
-  flex: 1;
-}
-
-.epub-reader__mprogress {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 10px;
-}
-
-.epub-reader__mprogress .epub-reader__range {
-  width: 100%;
-}
-
-.epub-reader__mprogress-percent {
-  text-align: center;
-  font-weight: 800;
-  color: var(--epub-reader-accent);
-}
-
-.epub-reader__mfont {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-`;
-
-// src/styles/ensureStyle.ts
-var STYLE_ELEMENT_ID = "somecat-epub-reader-style";
-var ensureEpubReaderStyle = () => {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ELEMENT_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ELEMENT_ID;
-  style.textContent = epubReaderCssText;
-  (document.head ?? document.documentElement).append(style);
-};
+// src/vue/EBookReaderVue.ts
 var getContentCSS = (fontSize, isDark, extraCSS) => `
 @namespace epub "http://www.idpf.org/2007/ops";
 html {
@@ -723,7 +227,8 @@ var icons = {
   minus: '<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
   x: '<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
   type: '<path d="M4 7V4h16v3M9 20h6M12 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  settings: '<path fill="currentColor" fill-rule="evenodd" d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/>'
 };
 
 // unplugin-vue:/plugin-vue/export-helper
@@ -964,7 +469,7 @@ function _sfc_render3(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [vue.createElementVNode("div", _hoisted_22, [vue.createElementVNode(
     "span",
     _hoisted_32,
-    vue.toDisplayString($props.status === "error" ? $props.errorText || "\u9519\u8BEF" : $props.status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "\u5C31\u7EEA"),
+    vue.toDisplayString($props.status === "error" ? $props.errorText || "\u9519\u8BEF" : $props.status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : ""),
     1
     /* TEXT */
   ), $props.sectionLabel ? (vue.openBlock(), vue.createElementBlock(
@@ -1338,6 +843,9 @@ function _sfc_render7(_ctx, _cache, $props, $setup, $data, $options) {
   ])], 10, _hoisted_17);
 }
 var SearchDrawer_default = /* @__PURE__ */ export_helper_default(_sfc_main7, [["render", _sfc_render7], ["__file", "D:\\Project\\Demo\\EBook\\plugin\\ebook-reader\\src\\vue\\components\\SearchDrawer.vue"]]);
+var fontThumbSize = 34;
+var fontMin = 10;
+var fontMax = 40;
 var _sfc_main8 = /* @__PURE__ */ vue.defineComponent({
   __name: "MobileUI",
   props: {
@@ -1426,19 +934,144 @@ var _sfc_main8 = /* @__PURE__ */ vue.defineComponent({
           return "\u641C\u7D22";
         case "progress":
           return "\u8FDB\u5EA6";
-        case "theme":
-          return "\u660E\u6697";
-        case "font":
-          return "\u5B57\u53F7";
+        case "settings":
+          return "\u8BBE\u7F6E";
         default:
           return "";
       }
     });
+    const clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
+    const displayedFontSize = vue.computed(() => clamp2(Math.round(props.fontSize / 5), 10, 40));
+    const fontSliderValue = vue.ref(displayedFontSize.value);
+    const fontSliderWrapRef = vue.ref(null);
+    const fontSliderWidth = vue.ref(0);
+    const isFontDragging = vue.ref(false);
+    let fontRo = null;
+    let fontDebounceTimer = null;
+    vue.watch(displayedFontSize, (v) => {
+      fontSliderValue.value = v;
+    });
+    const teardownFontResize = () => {
+      if (fontRo) {
+        fontRo.disconnect();
+        fontRo = null;
+      }
+    };
+    const setupFontResize = async () => {
+      await vue.nextTick();
+      const el = fontSliderWrapRef.value;
+      if (!el) return;
+      const update = () => {
+        fontSliderWidth.value = el.getBoundingClientRect().width;
+      };
+      update();
+      teardownFontResize();
+      fontRo = new ResizeObserver(() => update());
+      fontRo.observe(el);
+    };
+    vue.watch(() => props.activePanel, (p) => {
+      if (p === "settings") void setupFontResize();
+      else teardownFontResize();
+    }, { immediate: true });
+    vue.onBeforeUnmount(() => teardownFontResize());
+    const fontProgressPercent = vue.computed(() => (fontSliderValue.value - fontMin) / (fontMax - fontMin) * 100);
+    const fontThumbLeft = vue.computed(() => {
+      if (!fontSliderWidth.value) return 0;
+      const percent = (fontSliderValue.value - fontMin) / (fontMax - fontMin);
+      const half = fontThumbSize / 2;
+      return Math.min(fontSliderWidth.value - half, Math.max(half, half + percent * (fontSliderWidth.value - fontThumbSize)));
+    });
+    const flushFontSize = () => {
+      if (fontDebounceTimer) {
+        clearTimeout(fontDebounceTimer);
+        fontDebounceTimer = null;
+      }
+      emit("changeFontSize", fontSliderValue.value * 5);
+    };
+    const scheduleFontSize = (next) => {
+      if (fontDebounceTimer) clearTimeout(fontDebounceTimer);
+      fontDebounceTimer = window.setTimeout(() => {
+        fontDebounceTimer = null;
+        emit("changeFontSize", next * 5);
+      }, 80);
+    };
+    const handleFontSliderInput = (e) => {
+      const next = Number(e.target.value);
+      fontSliderValue.value = next;
+      scheduleFontSize(next);
+    };
+    vue.onBeforeUnmount(() => {
+      if (fontDebounceTimer) clearTimeout(fontDebounceTimer);
+    });
     const updateSearchOption = (key, value) => {
       emit("update:searchOptions", { [key]: value });
     };
     const tooltip = vue.ref(null);
     let timer = null;
+    const ignoreToggle = vue.ref(false);
+    const markIgnoreToggle = () => {
+      ignoreToggle.value = true;
+      window.setTimeout(() => {
+        ignoreToggle.value = false;
+      }, 350);
+    };
+    const clearTooltip = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      tooltip.value = null;
+    };
+    const closePanelSafe = () => {
+      emit("closePanel");
+      clearTooltip();
+      const el = document.activeElement;
+      if (el && el instanceof HTMLElement) el.blur();
+    };
+    const togglePanelSafe = (panel) => {
+      if (ignoreToggle.value) return;
+      emit("togglePanel", panel);
+    };
+    const sheetRef = vue.ref(null);
+    const dragRef = {
+      startY: 0,
+      currentY: 0,
+      isDragging: false
+    };
+    const handleHeaderTouchStart = (e) => {
+      clearTooltip();
+      dragRef.startY = e.touches[0].clientY;
+      dragRef.isDragging = true;
+      if (sheetRef.value) {
+        sheetRef.value.style.transition = "none";
+      }
+    };
+    const handleHeaderTouchMove = (e) => {
+      if (!dragRef.isDragging) return;
+      e.preventDefault();
+      const deltaY = e.touches[0].clientY - dragRef.startY;
+      if (deltaY > 0 && sheetRef.value) {
+        sheetRef.value.style.transform = `translateY(${deltaY}px)`;
+        dragRef.currentY = deltaY;
+      }
+    };
+    const handleHeaderTouchEnd = () => {
+      if (!dragRef.isDragging) return;
+      dragRef.isDragging = false;
+      if (sheetRef.value) {
+        sheetRef.value.style.transition = "";
+        if (dragRef.currentY > 80) {
+          markIgnoreToggle();
+          closePanelSafe();
+          setTimeout(() => {
+            if (sheetRef.value) sheetRef.value.style.transform = "";
+          }, 300);
+        } else {
+          sheetRef.value.style.transform = "";
+        }
+      }
+      dragRef.currentY = 0;
+    };
     const handleTouchStart = (e, text) => {
       const target = e.currentTarget;
       const rect = target.getBoundingClientRect();
@@ -1450,16 +1083,40 @@ var _sfc_main8 = /* @__PURE__ */ vue.defineComponent({
       }, 500);
     };
     const handleTouchEnd = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      tooltip.value = null;
+      clearTooltip();
     };
     const __returned__ = {
       props,
       emit,
       mobileTitle,
+      clamp: clamp2,
+      displayedFontSize,
+      fontSliderValue,
+      fontSliderWrapRef,
+      fontSliderWidth,
+      isFontDragging,
+      fontThumbSize,
+      fontMin,
+      fontMax,
+      get fontRo() {
+        return fontRo;
+      },
+      set fontRo(v) {
+        fontRo = v;
+      },
+      get fontDebounceTimer() {
+        return fontDebounceTimer;
+      },
+      set fontDebounceTimer(v) {
+        fontDebounceTimer = v;
+      },
+      teardownFontResize,
+      setupFontResize,
+      fontProgressPercent,
+      fontThumbLeft,
+      flushFontSize,
+      scheduleFontSize,
+      handleFontSliderInput,
       updateSearchOption,
       tooltip,
       get timer() {
@@ -1468,6 +1125,16 @@ var _sfc_main8 = /* @__PURE__ */ vue.defineComponent({
       set timer(v) {
         timer = v;
       },
+      ignoreToggle,
+      markIgnoreToggle,
+      clearTooltip,
+      closePanelSafe,
+      togglePanelSafe,
+      sheetRef,
+      dragRef,
+      handleHeaderTouchStart,
+      handleHeaderTouchMove,
+      handleHeaderTouchEnd,
       handleTouchStart,
       handleTouchEnd,
       TocTree: TocTree_default,
@@ -1481,13 +1148,16 @@ var _sfc_main8 = /* @__PURE__ */ vue.defineComponent({
     return __returned__;
   }
 });
-var _hoisted_18 = ["aria-pressed"];
+var _hoisted_18 = { class: "epub-reader__mbar-left" };
 var _hoisted_27 = ["aria-pressed"];
 var _hoisted_37 = ["aria-pressed"];
 var _hoisted_47 = ["aria-pressed"];
 var _hoisted_53 = ["aria-pressed"];
-var _hoisted_63 = ["aria-hidden"];
-var _hoisted_73 = { class: "epub-reader__msheet-header" };
+var _hoisted_63 = {
+  key: 1,
+  class: "epub-reader__mbar-right"
+};
+var _hoisted_73 = ["aria-hidden"];
 var _hoisted_82 = { class: "epub-reader__msheet-title" };
 var _hoisted_92 = { class: "epub-reader__msheet-body" };
 var _hoisted_102 = {
@@ -1517,10 +1187,16 @@ var _hoisted_272 = { class: "epub-reader__mprogress" };
 var _hoisted_28 = ["value"];
 var _hoisted_29 = { class: "epub-reader__mprogress-percent" };
 var _hoisted_30 = {
-  key: 4,
-  class: "epub-reader__mfont"
+  key: 3,
+  class: "epub-reader__msettings"
 };
-var _hoisted_31 = { class: "epub-reader__font" };
+var _hoisted_31 = { class: "epub-reader__mfont-range" };
+var _hoisted_322 = ["value"];
+var _hoisted_332 = [
+  "aria-pressed",
+  "aria-label",
+  "title"
+];
 function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", null, [
     vue.createElementVNode(
@@ -1551,56 +1227,49 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
           5
           /* TEXT, STYLE */
         )) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          "aria-pressed": $props.activePanel === "menu",
-          onClick: _cache[0] || (_cache[0] = ($event) => $setup.emit("togglePanel", "menu")),
-          onTouchstart: _cache[1] || (_cache[1] = (e) => $setup.handleTouchStart(e, "\u76EE\u5F55")),
-          onTouchend: $setup.handleTouchEnd,
-          onTouchcancel: $setup.handleTouchEnd,
-          title: "\u76EE\u5F55"
-        }, [vue.createVNode($setup["SvgIcon"], { name: "list" })], 40, _hoisted_18),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          "aria-pressed": $props.activePanel === "search",
-          onClick: _cache[2] || (_cache[2] = ($event) => $setup.emit("togglePanel", "search")),
-          onTouchstart: _cache[3] || (_cache[3] = (e) => $setup.handleTouchStart(e, "\u641C\u7D22")),
-          onTouchend: $setup.handleTouchEnd,
-          onTouchcancel: $setup.handleTouchEnd,
-          title: "\u641C\u7D22"
-        }, [vue.createVNode($setup["SvgIcon"], { name: "search" })], 40, _hoisted_27),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          "aria-pressed": $props.activePanel === "progress",
-          onClick: _cache[4] || (_cache[4] = ($event) => $setup.emit("togglePanel", "progress")),
-          onTouchstart: _cache[5] || (_cache[5] = (e) => $setup.handleTouchStart(e, "\u8FDB\u5EA6")),
-          onTouchend: $setup.handleTouchEnd,
-          onTouchcancel: $setup.handleTouchEnd,
-          title: "\u8FDB\u5EA6"
-        }, [vue.createVNode($setup["SvgIcon"], { name: "sliders" })], 40, _hoisted_37),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          "aria-pressed": $props.activePanel === "theme",
-          onClick: _cache[6] || (_cache[6] = ($event) => $setup.emit("togglePanel", "theme")),
-          onTouchstart: _cache[7] || (_cache[7] = (e) => $setup.handleTouchStart(e, "\u660E\u6697")),
-          onTouchend: $setup.handleTouchEnd,
-          onTouchcancel: $setup.handleTouchEnd,
-          title: "\u660E\u6697"
-        }, [vue.createVNode($setup["SvgIcon"], { name: "sun" })], 40, _hoisted_47),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          "aria-pressed": $props.activePanel === "font",
-          onClick: _cache[8] || (_cache[8] = ($event) => $setup.emit("togglePanel", "font")),
-          onTouchstart: _cache[9] || (_cache[9] = (e) => $setup.handleTouchStart(e, "\u5B57\u53F7")),
-          onTouchend: $setup.handleTouchEnd,
-          onTouchcancel: $setup.handleTouchEnd,
-          title: "\u5B57\u53F7"
-        }, [vue.createVNode($setup["SvgIcon"], { name: "type" })], 40, _hoisted_53)
+        vue.createElementVNode("div", _hoisted_18, [
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "epub-reader__btn",
+            "aria-pressed": $props.activePanel === "menu",
+            onClick: _cache[0] || (_cache[0] = ($event) => $setup.togglePanelSafe("menu")),
+            onTouchstart: _cache[1] || (_cache[1] = (e) => $setup.handleTouchStart(e, "\u76EE\u5F55")),
+            onTouchend: $setup.handleTouchEnd,
+            onTouchcancel: $setup.handleTouchEnd,
+            title: "\u76EE\u5F55"
+          }, [vue.createVNode($setup["SvgIcon"], { name: "list" })], 40, _hoisted_27),
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "epub-reader__btn",
+            "aria-pressed": $props.activePanel === "search",
+            onClick: _cache[2] || (_cache[2] = ($event) => $setup.togglePanelSafe("search")),
+            onTouchstart: _cache[3] || (_cache[3] = (e) => $setup.handleTouchStart(e, "\u641C\u7D22")),
+            onTouchend: $setup.handleTouchEnd,
+            onTouchcancel: $setup.handleTouchEnd,
+            title: "\u641C\u7D22"
+          }, [vue.createVNode($setup["SvgIcon"], { name: "search" })], 40, _hoisted_37),
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "epub-reader__btn",
+            "aria-pressed": $props.activePanel === "progress",
+            onClick: _cache[4] || (_cache[4] = ($event) => $setup.togglePanelSafe("progress")),
+            onTouchstart: _cache[5] || (_cache[5] = (e) => $setup.handleTouchStart(e, "\u8FDB\u5EA6")),
+            onTouchend: $setup.handleTouchEnd,
+            onTouchcancel: $setup.handleTouchEnd,
+            title: "\u8FDB\u5EA6"
+          }, [vue.createVNode($setup["SvgIcon"], { name: "sliders" })], 40, _hoisted_47),
+          vue.createElementVNode("button", {
+            type: "button",
+            class: "epub-reader__btn",
+            "aria-pressed": $props.activePanel === "settings",
+            onClick: _cache[6] || (_cache[6] = ($event) => $setup.togglePanelSafe("settings")),
+            onTouchstart: _cache[7] || (_cache[7] = (e) => $setup.handleTouchStart(e, "\u8BBE\u7F6E")),
+            onTouchend: $setup.handleTouchEnd,
+            onTouchcancel: $setup.handleTouchEnd,
+            title: "\u8BBE\u7F6E"
+          }, [vue.createVNode($setup["SvgIcon"], { name: "settings" })], 40, _hoisted_53)
+        ]),
+        _ctx.$slots.toolbarRight ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_63, [vue.renderSlot(_ctx.$slots, "toolbarRight")])) : vue.createCommentVNode("v-if", true)
       ],
       2
       /* CLASS */
@@ -1608,31 +1277,43 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
     $props.activePanel ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "epub-reader__moverlay",
-      onClick: _cache[10] || (_cache[10] = ($event) => $setup.emit("closePanel"))
+      onClick: $setup.closePanelSafe
     })) : vue.createCommentVNode("v-if", true),
     vue.createElementVNode("div", {
+      ref: "sheetRef",
       class: vue.normalizeClass(["epub-reader__msheet", { "is-open": $props.activePanel }]),
       "aria-hidden": !$props.activePanel
-    }, [vue.createElementVNode("div", _hoisted_73, [vue.createElementVNode(
+    }, [vue.createElementVNode(
       "div",
-      _hoisted_82,
-      vue.toDisplayString($setup.mobileTitle),
-      1
-      /* TEXT */
-    ), vue.createElementVNode("button", {
-      type: "button",
-      class: "epub-reader__btn",
-      onClick: _cache[11] || (_cache[11] = ($event) => $setup.emit("closePanel"))
-    }, [vue.createVNode($setup["SvgIcon"], { name: "x" })])]), vue.createElementVNode("div", _hoisted_92, [
+      {
+        class: "epub-reader__msheet-header",
+        onTouchstart: $setup.handleHeaderTouchStart,
+        onTouchmove: $setup.handleHeaderTouchMove,
+        onTouchend: $setup.handleHeaderTouchEnd
+      },
+      [vue.createElementVNode(
+        "div",
+        _hoisted_82,
+        vue.toDisplayString($setup.mobileTitle),
+        1
+        /* TEXT */
+      ), vue.createElementVNode("button", {
+        type: "button",
+        class: "epub-reader__btn",
+        onClick: $setup.closePanelSafe
+      }, [vue.createVNode($setup["SvgIcon"], { name: "x" })])],
+      32
+      /* NEED_HYDRATION */
+    ), vue.createElementVNode("div", _hoisted_92, [
       $props.activePanel === "menu" ? (vue.openBlock(), vue.createElementBlock(
         vue.Fragment,
         { key: 0 },
         [$props.toc.length ? (vue.openBlock(), vue.createBlock($setup["TocTree"], {
           key: 0,
           items: $props.toc,
-          onSelect: _cache[12] || (_cache[12] = (href) => {
+          onSelect: _cache[8] || (_cache[8] = (href) => {
             $setup.emit("tocSelect", href);
-            $setup.emit("closePanel");
+            $setup.closePanelSafe();
           })
         }, null, 8, ["items"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_102, "\u672A\u627E\u5230\u76EE\u5F55"))],
         64
@@ -1647,24 +1328,24 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
             placeholder: "\u8F93\u5165\u5173\u952E\u8BCD",
             value: $props.searchQuery,
             disabled: $props.status !== "ready",
-            onInput: _cache[13] || (_cache[13] = (e) => {
+            onInput: _cache[9] || (_cache[9] = (e) => {
               const v = e.target.value;
               $setup.emit("update:searchQuery", v);
               if (!v.trim()) $setup.emit("search", "");
             }),
-            onKeydown: _cache[14] || (_cache[14] = vue.withKeys(($event) => $setup.emit("search", $props.searchQuery), ["enter"]))
+            onKeydown: _cache[10] || (_cache[10] = vue.withKeys(($event) => $setup.emit("search", $props.searchQuery), ["enter"]))
           }, null, 40, _hoisted_123), vue.createElementVNode("button", {
             type: "button",
             class: "epub-reader__btn",
             disabled: $props.status !== "ready",
-            onClick: _cache[15] || (_cache[15] = ($event) => $setup.emit("search", $props.searchQuery))
+            onClick: _cache[11] || (_cache[11] = ($event) => $setup.emit("search", $props.searchQuery))
           }, " \u641C\u7D22 ", 8, _hoisted_133)]),
           vue.createElementVNode("div", _hoisted_143, [
             vue.createElementVNode("label", _hoisted_153, [vue.createElementVNode("input", {
               type: "checkbox",
               checked: Boolean($props.searchOptions.matchCase),
-              onChange: _cache[16] || (_cache[16] = (e) => $setup.updateSearchOption("matchCase", e.target.checked))
-            }, null, 40, _hoisted_163), _cache[27] || (_cache[27] = vue.createTextVNode(
+              onChange: _cache[12] || (_cache[12] = (e) => $setup.updateSearchOption("matchCase", e.target.checked))
+            }, null, 40, _hoisted_163), _cache[26] || (_cache[26] = vue.createTextVNode(
               " \u533A\u5206\u5927\u5C0F\u5199 ",
               -1
               /* CACHED */
@@ -1672,8 +1353,8 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("label", _hoisted_172, [vue.createElementVNode("input", {
               type: "checkbox",
               checked: Boolean($props.searchOptions.wholeWords),
-              onChange: _cache[17] || (_cache[17] = (e) => $setup.updateSearchOption("wholeWords", e.target.checked))
-            }, null, 40, _hoisted_182), _cache[28] || (_cache[28] = vue.createTextVNode(
+              onChange: _cache[13] || (_cache[13] = (e) => $setup.updateSearchOption("wholeWords", e.target.checked))
+            }, null, 40, _hoisted_182), _cache[27] || (_cache[27] = vue.createTextVNode(
               " \u5168\u8BCD\u5339\u914D ",
               -1
               /* CACHED */
@@ -1681,8 +1362,8 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("label", _hoisted_19, [vue.createElementVNode("input", {
               type: "checkbox",
               checked: Boolean($props.searchOptions.matchDiacritics),
-              onChange: _cache[18] || (_cache[18] = (e) => $setup.updateSearchOption("matchDiacritics", e.target.checked))
-            }, null, 40, _hoisted_20), _cache[29] || (_cache[29] = vue.createTextVNode(
+              onChange: _cache[14] || (_cache[14] = (e) => $setup.updateSearchOption("matchDiacritics", e.target.checked))
+            }, null, 40, _hoisted_20), _cache[28] || (_cache[28] = vue.createTextVNode(
               " \u533A\u5206\u53D8\u97F3 ",
               -1
               /* CACHED */
@@ -1701,13 +1382,13 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
               key: 1,
               type: "button",
               class: "epub-reader__link",
-              onClick: _cache[19] || (_cache[19] = ($event) => $setup.emit("cancelSearch"))
+              onClick: _cache[15] || (_cache[15] = ($event) => $setup.emit("cancelSearch"))
             }, " \u53D6\u6D88 ")) : vue.createCommentVNode("v-if", true)
           ]),
           $props.searchResults.length ? (vue.openBlock(), vue.createBlock($setup["SearchResultList"], {
             key: 0,
             results: $props.searchResults,
-            onSelect: _cache[20] || (_cache[20] = (cfi) => $setup.emit("searchResultSelect", cfi))
+            onSelect: _cache[16] || (_cache[16] = (cfi) => $setup.emit("searchResultSelect", cfi))
           }, null, 8, ["results"])) : (vue.openBlock(), vue.createElementBlock(
             "div",
             _hoisted_232,
@@ -1725,7 +1406,7 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
         [vue.createElementVNode("div", _hoisted_242, [vue.createElementVNode(
           "span",
           _hoisted_252,
-          vue.toDisplayString($props.status === "error" ? $props.errorText || "\u9519\u8BEF" : $props.status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "\u5C31\u7EEA"),
+          vue.toDisplayString($props.status === "error" ? $props.errorText || "\u9519\u8BEF" : $props.status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : ""),
           1
           /* TEXT */
         ), $props.sectionLabel ? (vue.openBlock(), vue.createElementBlock(
@@ -1741,12 +1422,12 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
           max: 100,
           step: 1,
           value: $props.displayedPercent,
-          onInput: _cache[21] || (_cache[21] = (e) => {
+          onInput: _cache[17] || (_cache[17] = (e) => {
             $setup.emit("seekStart");
             $setup.emit("seekChange", Number(e.target.value));
           }),
-          onPointerup: _cache[22] || (_cache[22] = (e) => $setup.emit("seekEnd", Number(e.target.value))),
-          onKeyup: _cache[23] || (_cache[23] = vue.withKeys((e) => $setup.emit("seekCommit", Number(e.target.value)), ["enter"]))
+          onPointerup: _cache[18] || (_cache[18] = (e) => $setup.emit("seekEnd", Number(e.target.value))),
+          onKeyup: _cache[19] || (_cache[19] = vue.withKeys((e) => $setup.emit("seekCommit", Number(e.target.value)), ["enter"]))
         }, null, 40, _hoisted_28), vue.createElementVNode(
           "div",
           _hoisted_29,
@@ -1757,38 +1438,77 @@ function _sfc_render8(_ctx, _cache, $props, $setup, $data, $options) {
         64
         /* STABLE_FRAGMENT */
       )) : vue.createCommentVNode("v-if", true),
-      $props.activePanel === "theme" ? (vue.openBlock(), vue.createElementBlock(
-        "button",
-        {
-          key: 3,
-          type: "button",
-          class: "epub-reader__btn",
-          onClick: _cache[24] || (_cache[24] = ($event) => $setup.emit("toggleDarkMode", !$props.darkMode))
-        },
-        vue.toDisplayString($props.darkMode ? "\u5207\u6362\u5230\u4EAE\u8272" : "\u5207\u6362\u5230\u6697\u9ED1"),
-        1
-        /* TEXT */
-      )) : vue.createCommentVNode("v-if", true),
-      $props.activePanel === "font" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          onClick: _cache[25] || (_cache[25] = ($event) => $setup.emit("changeFontSize", $props.fontSize - 10))
-        }, " A- "),
+      $props.activePanel === "settings" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [vue.createElementVNode("div", _hoisted_31, [
+        _cache[29] || (_cache[29] = vue.createElementVNode(
+          "div",
+          { class: "epub-reader__mfont-a is-small" },
+          "A",
+          -1
+          /* CACHED */
+        )),
         vue.createElementVNode(
           "div",
-          _hoisted_31,
-          vue.toDisplayString($props.fontSize) + "%",
-          1
-          /* TEXT */
+          {
+            ref: "fontSliderWrapRef",
+            class: vue.normalizeClass(["epub-reader__mfont-slider", { "is-dragging": $setup.isFontDragging }])
+          },
+          [vue.createElementVNode("input", {
+            class: "epub-reader__range",
+            type: "range",
+            min: $setup.fontMin,
+            max: $setup.fontMax,
+            step: 1,
+            value: $setup.fontSliderValue,
+            style: vue.normalizeStyle({ background: `linear-gradient(to right, var(--epub-reader-range-fill) 0%, var(--epub-reader-range-fill) ${$setup.fontProgressPercent}%, var(--epub-reader-range-track) ${$setup.fontProgressPercent}%, var(--epub-reader-range-track) 100%)` }),
+            "aria-label": "\u5B57\u53F7",
+            onInput: $setup.handleFontSliderInput,
+            onPointerdown: _cache[20] || (_cache[20] = ($event) => $setup.isFontDragging = true),
+            onPointerup: _cache[21] || (_cache[21] = () => {
+              $setup.isFontDragging = false;
+              $setup.flushFontSize();
+            }),
+            onPointercancel: _cache[22] || (_cache[22] = () => {
+              $setup.isFontDragging = false;
+              $setup.flushFontSize();
+            }),
+            onTouchstart: _cache[23] || (_cache[23] = ($event) => $setup.isFontDragging = true),
+            onTouchend: _cache[24] || (_cache[24] = () => {
+              $setup.isFontDragging = false;
+              $setup.flushFontSize();
+            })
+          }, null, 44, _hoisted_322), vue.createElementVNode(
+            "div",
+            {
+              class: "epub-reader__mfont-thumb",
+              style: vue.normalizeStyle({
+                left: `${$setup.fontThumbLeft}px`,
+                width: `${$setup.fontThumbSize}px`,
+                height: `${$setup.fontThumbSize}px`
+              })
+            },
+            vue.toDisplayString($setup.fontSliderValue),
+            5
+            /* TEXT, STYLE */
+          )],
+          2
+          /* CLASS */
         ),
-        vue.createElementVNode("button", {
-          type: "button",
-          class: "epub-reader__btn",
-          onClick: _cache[26] || (_cache[26] = ($event) => $setup.emit("changeFontSize", $props.fontSize + 10))
-        }, " A+ ")
-      ])) : vue.createCommentVNode("v-if", true)
-    ])], 10, _hoisted_63)
+        _cache[30] || (_cache[30] = vue.createElementVNode(
+          "div",
+          { class: "epub-reader__mfont-a is-big" },
+          "A",
+          -1
+          /* CACHED */
+        ))
+      ]), vue.createElementVNode("button", {
+        type: "button",
+        class: "epub-reader__btn",
+        "aria-pressed": $props.darkMode,
+        "aria-label": $props.darkMode ? "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5F00\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u4EAE\u8272" : "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5173\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u6697\u9ED1",
+        title: $props.darkMode ? "\u5207\u6362\u5230\u4EAE\u8272" : "\u5207\u6362\u5230\u6697\u9ED1",
+        onClick: _cache[25] || (_cache[25] = ($event) => $setup.emit("toggleDarkMode", !$props.darkMode))
+      }, [vue.createVNode($setup["SvgIcon"], { name: $props.darkMode ? "sun" : "moon" }, null, 8, ["name"])], 8, _hoisted_332)])) : vue.createCommentVNode("v-if", true)
+    ])], 10, _hoisted_73)
   ]);
 }
 var MobileUI_default = /* @__PURE__ */ export_helper_default(_sfc_main8, [["render", _sfc_render8], ["__file", "D:\\Project\\Demo\\EBook\\plugin\\ebook-reader\\src\\vue\\components\\MobileUI.vue"]]);
@@ -1840,7 +1560,7 @@ var EBookReaderVue = vue.defineComponent({
   name: "EBookReaderVue",
   props: EBookReaderVuePropsDef,
   emits: ["ready", "error", "progress", "fontSizeChange", "darkModeChange", "update:fontSize", "update:darkMode"],
-  setup(props, { emit, expose }) {
+  setup(props, { emit, expose, slots }) {
     const instance = vue.getCurrentInstance();
     const isPropProvided = (key) => {
       const vnodeProps = instance?.vnode.props;
@@ -1852,11 +1572,13 @@ var EBookReaderVue = vue.defineComponent({
     const reader = vue.ref(null);
     const status = vue.ref("idle");
     const errorText = vue.ref("");
+    const downloadLoading = vue.ref(null);
     const toc = vue.ref([]);
     const tocOpen = vue.ref(false);
     const searchOpen = vue.ref(false);
     const progressInfo = vue.ref(null);
     const isSeeking = vue.ref(false);
+    const isDragging = vue.ref(false);
     const seekPercent = vue.ref(0);
     const layout = vue.ref("default");
     const mobileBarVisible = vue.ref(false);
@@ -1919,6 +1641,7 @@ var EBookReaderVue = vue.defineComponent({
       if (!reader.value) return;
       openController?.abort();
       openController = null;
+      downloadLoading.value = null;
       if (props.file) {
         await openFile(props.file);
         return;
@@ -1927,6 +1650,7 @@ var EBookReaderVue = vue.defineComponent({
       if (!nextUrl) return;
       const controller = new AbortController();
       openController = controller;
+      downloadLoading.value = "download";
       status.value = "opening";
       errorText.value = "";
       toc.value = [];
@@ -1939,12 +1663,16 @@ var EBookReaderVue = vue.defineComponent({
       try {
         const downloaded = await downloadEpubAsFile(nextUrl, controller.signal);
         if (controller.signal.aborted) return;
+        if (openController !== controller) return;
+        downloadLoading.value = "open";
         await openFile(downloaded);
       } catch (e) {
         if (e?.name === "AbortError") return;
         status.value = "error";
         errorText.value = e?.message ? String(e.message) : "\u4E0B\u8F7D\u5931\u8D25";
         emit("error", e);
+      } finally {
+        if (openController === controller) downloadLoading.value = null;
       }
     };
     const runSearch = async (query) => {
@@ -2067,6 +1795,9 @@ var EBookReaderVue = vue.defineComponent({
           onError: (e) => emit("error", e),
           onProgress: (info) => {
             progressInfo.value = info;
+            if (!isDragging.value) {
+              isSeeking.value = false;
+            }
             emit("progress", info);
           },
           onToc: (items) => toc.value = items,
@@ -2101,6 +1832,7 @@ var EBookReaderVue = vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       openController?.abort();
+      downloadLoading.value = null;
       const root = rootEl.value;
       if (root) {
         root.removeEventListener("keydown", keydownHandler);
@@ -2152,8 +1884,13 @@ var EBookReaderVue = vue.defineComponent({
       const sectionLabel = progressInfo.value?.tocItem?.label ?? "";
       const isMobile = layout.value === "mobile";
       const viewer = vue.h("div", { class: "epub-reader__viewer", ref: viewerHost });
+      const loading = downloadLoading.value ? vue.h("div", { class: "epub-reader__loading", role: "status", "aria-live": "polite" }, [
+        vue.h("div", { class: "epub-reader__spinner", "aria-hidden": "true" }),
+        vue.h("div", { class: "epub-reader__loading-text" }, downloadLoading.value === "download" ? "\u4E0B\u8F7D\u4E2D\u2026" : "\u52A0\u8F7D\u4E2D\u2026")
+      ]) : null;
       const children = isMobile ? [
         viewer,
+        loading,
         vue.h(MobileUI_default, {
           barVisible: mobileBarVisible.value,
           activePanel: mobilePanel.value,
@@ -2181,21 +1918,27 @@ var EBookReaderVue = vue.defineComponent({
           onSearchResultSelect: (cfi) => {
             if (cfi) reader.value?.goTo(cfi);
           },
-          onSeekStart: () => isSeeking.value = true,
+          onSeekStart: () => {
+            isSeeking.value = true;
+            isDragging.value = true;
+          },
           onSeekChange: (v) => seekPercent.value = v,
           onSeekEnd: (v) => {
-            isSeeking.value = false;
+            isDragging.value = false;
             reader.value?.goToFraction(v / 100);
           },
           onSeekCommit: (v) => {
-            isSeeking.value = false;
+            isDragging.value = false;
             reader.value?.goToFraction(v / 100);
           },
           onToggleDarkMode: setDarkModeInternal,
           onChangeFontSize: setFontSizeInternal
+        }, {
+          toolbarRight: () => slots.mobileToolbarRight?.()
         })
       ] : [
         viewer,
+        loading,
         vue.h(DesktopToolbar_default, {
           darkMode: darkMode(),
           fontSize: fontSize(),
@@ -2239,14 +1982,17 @@ var EBookReaderVue = vue.defineComponent({
           errorText: errorText.value,
           sectionLabel,
           displayedPercent: displayed,
-          onSeekStart: () => isSeeking.value = true,
+          onSeekStart: () => {
+            isSeeking.value = true;
+            isDragging.value = true;
+          },
           onSeekChange: (v) => seekPercent.value = v,
           onSeekEnd: (v) => {
-            isSeeking.value = false;
+            isDragging.value = false;
             reader.value?.goToFraction(v / 100);
           },
           onSeekCommit: (v) => {
-            isSeeking.value = false;
+            isDragging.value = false;
             reader.value?.goToFraction(v / 100);
           }
         })
@@ -2258,6 +2004,7 @@ var EBookReaderVue = vue.defineComponent({
           class: "epub-reader",
           "data-theme": darkMode() ? "dark" : "light",
           "data-layout": layout.value,
+          "aria-busy": downloadLoading.value != null,
           tabindex: 0
         },
         children
@@ -2266,9 +2013,6 @@ var EBookReaderVue = vue.defineComponent({
   }
 });
 
-// src/vue/index.ts
-ensureEpubReaderStyle();
-
 exports.EBookReaderVue = EBookReaderVue;
 //# sourceMappingURL=vue.cjs.map
 //# sourceMappingURL=vue.cjs.map