update at 2025-10-09 14:46:24

src/xiaohongshu/xhs-preview.ts

@@ -37,7 +37,8 @@ export class XiaohongshuPreview {
     pageContainer!: HTMLDivElement;
     bottomToolbar!: HTMLDivElement;
     pageNavigation!: HTMLDivElement;
-    pageNumberDisplay!: HTMLSpanElement;
+    pageNumberInput!: HTMLInputElement;
+    pageTotalLabel!: HTMLSpanElement;
     styleEl: HTMLStyleElement | null = null; // 主题样式注入节点
     currentThemeClass: string = '';
     
@@ -167,7 +168,27 @@ export class XiaohongshuPreview {
         const prevBtn = this.pageNavigation.createEl('button', { text: '‹', cls: 'xhs-nav-btn' });
         prevBtn.onclick = () => this.previousPage();
         
-        this.pageNumberDisplay = this.pageNavigation.createEl('span', { text: '1/1', cls: 'xhs-page-number' });
+        const indicator = this.pageNavigation.createDiv({ cls: 'xhs-page-indicator' });
+        this.pageNumberInput = indicator.createEl('input', {
+            cls: 'xhs-page-number-input',
+            attr: { type: 'text', value: '1', inputmode: 'numeric', 'aria-label': '当前页码' }
+        }) as HTMLInputElement;
+        this.pageNumberInput.onfocus = () => this.pageNumberInput.select();
+        this.pageNumberInput.onkeydown = (evt: KeyboardEvent) => {
+            if (evt.key === 'Enter') {
+                evt.preventDefault();
+                this.handlePageNumberInput();
+            }
+        };
+        this.pageNumberInput.oninput = () => {
+            const sanitized = this.pageNumberInput.value.replace(/\D/g, '');
+            if (sanitized !== this.pageNumberInput.value) {
+                this.pageNumberInput.value = sanitized;
+            }
+        };
+        this.pageNumberInput.onblur = () => this.handlePageNumberInput();
+
+        this.pageTotalLabel = indicator.createEl('span', { cls: 'xhs-page-number-total', text: '/1' });
         
         const nextBtn = this.pageNavigation.createEl('button', { text: '›', cls: 'xhs-nav-btn' });
         nextBtn.onclick = () => this.nextPage();
@@ -199,15 +220,21 @@ export class XiaohongshuPreview {
         const tempContainer = document.createElement('div');
         tempContainer.innerHTML = articleHTML;
         tempContainer.style.width = `${this.settings.sliceImageWidth}px`;
+        tempContainer.classList.add('note-to-mp');
+        if (this.currentThemeClass) {
+            tempContainer.classList.add(this.currentThemeClass);
+        }
+        tempContainer.style.fontSize = `${this.currentFontSize}px`;
         document.body.appendChild(tempContainer);
         
         try {
+            // 在分页前先应用主题与高亮，确保测量使用正确样式
+            this.applyThemeCSS();
             this.pages = await paginateArticle(tempContainer, this.settings);
             new Notice(`分页完成：共 ${this.pages.length} 页`);
             
             this.currentPageIndex = 0;
             // 初次渲染时应用当前主题
-            this.applyThemeCSS();
             this.renderCurrentPage();
         } finally {
             document.body.removeChild(tempContainer);
@@ -239,7 +266,47 @@ export class XiaohongshuPreview {
         this.applyFontSettings(pageElement);
         
         // 更新页码显示
-        this.pageNumberDisplay.innerText = `${this.currentPageIndex + 1}/${this.pages.length}`;
+        this.updatePageNumberDisplay();
+    }
+
+    private updatePageNumberDisplay(): void {
+        if (!this.pageNumberInput || !this.pageTotalLabel) return;
+        const total = this.pages.length;
+        if (total === 0) {
+            this.pageNumberInput.value = '0';
+            this.pageTotalLabel.innerText = '/0';
+            return;
+        }
+        const current = Math.min(this.currentPageIndex + 1, total);
+        this.pageNumberInput.value = String(current);
+        this.pageTotalLabel.innerText = `/${total}`;
+    }
+
+    private handlePageNumberInput(): void {
+        if (!this.pageNumberInput) return;
+        const total = this.pages.length;
+        if (total === 0) {
+            this.pageNumberInput.value = '0';
+            if (this.pageTotalLabel) this.pageTotalLabel.innerText = '/0';
+            return;
+        }
+        const raw = this.pageNumberInput.value.trim();
+        if (raw.length === 0) {
+            this.updatePageNumberDisplay();
+            return;
+        }
+        const parsed = parseInt(raw, 10);
+        if (!Number.isFinite(parsed)) {
+            this.updatePageNumberDisplay();
+            return;
+        }
+        const target = Math.min(Math.max(parsed, 1), total) - 1;
+        if (target !== this.currentPageIndex) {
+            this.currentPageIndex = target;
+            this.renderCurrentPage();
+        } else {
+            this.updatePageNumberDisplay();
+        }
     }
     
     /**
@@ -453,7 +520,8 @@ export class XiaohongshuPreview {
         this.pageContainer = null as any;
         this.bottomToolbar = null as any;
         this.pageNavigation = null as any;
-        this.pageNumberDisplay = null as any;
+        this.pageNumberInput = null as any;
+        this.pageTotalLabel = null as any;
         this.pages = [];
         this.currentFile = null;
         this.styleEl = null;