update at 2025-10-16 18:10:27

src/xiaohongshu/xhs-preview.ts

@@ -37,6 +37,8 @@ export class XiaohongshuPreview {
     templateSelect!: HTMLSelectElement;
     fontSizeInput!: HTMLInputElement;
     previewWidthSelect!: HTMLSelectElement;
+    themeSelect!: HTMLSelectElement;
+    highlightSelect!: HTMLSelectElement;
     
     pageContainer!: HTMLDivElement;
     pageNumberInput!: HTMLInputElement;
@@ -132,6 +134,54 @@ export class XiaohongshuPreview {
         const increaseBtn = fontSizeGroup.createEl('button', { text: '＋', cls: 'font-size-btn' });
         increaseBtn.onclick = () => this.changeFontSize(1);
 
+        // 主题选择器
+        const themeCard = this.createGridCard(board, 'xhs-area-theme');
+        const themeLabel = themeCard.createDiv({ cls: 'xhs-label', text: '主题' });
+        this.themeSelect = themeCard.createEl('select', { cls: 'xhs-select' });
+        this.themeSelect.onchange = async () => {
+            // 更新全局设置
+            this.settings.defaultStyle = this.themeSelect.value;
+            this.applyThemeCSS();
+            await this.repaginateAndRender();
+            // 保存设置
+            const plugin = (this.app as any)?.plugins?.getPlugin?.('note2any');
+            if (plugin?.saveSettings) {
+                await plugin.saveSettings();
+            }
+        };
+
+        // 填充主题选项
+        for (let theme of this.assetsManager.themes) {
+            const option = this.themeSelect.createEl('option');
+            option.value = theme.className;
+            option.text = theme.name;
+            option.selected = theme.className === this.settings.defaultStyle;
+        }
+
+        // 高亮选择器
+        const highlightCard = this.createGridCard(board, 'xhs-area-highlight');
+        const highlightLabel = highlightCard.createDiv({ cls: 'xhs-label', text: '代码高亮' });
+        this.highlightSelect = highlightCard.createEl('select', { cls: 'xhs-select' });
+        this.highlightSelect.onchange = async () => {
+            // 更新全局设置
+            this.settings.defaultHighlight = this.highlightSelect.value;
+            this.applyThemeCSS();
+            await this.repaginateAndRender();
+            // 保存设置
+            const plugin = (this.app as any)?.plugins?.getPlugin?.('note2any');
+            if (plugin?.saveSettings) {
+                await plugin.saveSettings();
+            }
+        };
+
+        // 填充高亮选项
+        for (let highlight of this.assetsManager.highlights) {
+            const option = this.highlightSelect.createEl('option');
+            option.value = highlight.url;
+            option.text = highlight.name;
+            option.selected = highlight.url === this.settings.defaultHighlight;
+        }
+
         const contentWrapper = board.createDiv({ cls: 'xhs-area-content' });
         this.pageContainer = contentWrapper.createDiv({ cls: 'xhs-page-container' });
 
@@ -547,4 +597,17 @@ export class XiaohongshuPreview {
             document.body.removeChild(tempContainer);
         }
     }
+
+    /**
+     * 更新主题和高亮选择器的值
+     */
+    updateStyleAndHighlight(theme: string, highlight: string): void {
+        if (this.themeSelect) {
+            this.themeSelect.value = theme;
+        }
+        if (this.highlightSelect) {
+            this.highlightSelect.value = highlight;
+        }
+        this.applyThemeCSS();
+    }
 }