diff --git a/manifest.json b/manifest.json index daced5b..7cd8fed 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "note-to-red", "name": "Note to RED", - "version": "1.0.17", + "version": "1.0.18", "minAppVersion": "0.15.0", "description": "Convert Markdown notes to RED (Xiaohongshu) style images", "author": "Yeban", diff --git a/src/settings/SettingTab.ts b/src/settings/SettingTab.ts index 40b39de..dfdb294 100644 --- a/src/settings/SettingTab.ts +++ b/src/settings/SettingTab.ts @@ -58,10 +58,27 @@ export class RedSettingTab extends PluginSettingTab { } private renderBasicSettings(containerEl: HTMLElement): void { - // 标题级别设置 - new Setting(containerEl) + // 排版管理区域 + const typographySection = containerEl.createDiv('red-settings-subsection'); + const typographyHeader = typographySection.createDiv('red-settings-subsection-header'); + const typographyToggle = typographyHeader.createSpan('red-settings-subsection-toggle'); + setIcon(typographyToggle, 'chevron-right'); + + typographyHeader.createEl('h3', { text: '排版管理' }); + + const typographyContent = typographySection.createDiv('red-settings-subsection-content'); + + // 折叠/展开逻辑 + typographyHeader.addEventListener('click', () => { + const isExpanded = !typographySection.hasClass('is-expanded'); + typographySection.toggleClass('is-expanded', isExpanded); + setIcon(typographyToggle, isExpanded ? 'chevron-down' : 'chevron-right'); + }); + + // 内容分割标题级别设置 + new Setting(typographyContent) .setName('内容分割标题级别') - .setDesc('选择用于分割内容生成图片的标题级别\n• 一级标题(#): 每个一级标题及其下方内容生成一张图片\n• 二级标题(##): 每个二级标题及其下方内容生成一张图片') + .setDesc('选择用于分割内容生成图片的标题级别:') .addDropdown(dropdown => dropdown .addOption('h1', '一级标题(#) - 按大章节分割') .addOption('h2', '二级标题(##) - 按小章节分割') diff --git a/src/settings/settings.ts b/src/settings/settings.ts index c4b4648..71d3830 100644 --- a/src/settings/settings.ts +++ b/src/settings/settings.ts @@ -45,7 +45,7 @@ export const DEFAULT_SETTINGS: RedSettings = { userId: '@Yeban', showTime: true, timeFormat: 'zh-CN', - headingLevel: 'h1', // 默认使用一级标题 + headingLevel: 'h2', // 默认使用二级标题 footerLeftText: '夜半过后,光明便启程', footerRightText: '欢迎关注公众号:夜半', customFonts: [ diff --git a/src/styles/settings/settings.css b/src/styles/settings/settings.css index 04d26db..903dd9e 100644 --- a/src/styles/settings/settings.css +++ b/src/styles/settings/settings.css @@ -244,7 +244,7 @@ /* 设置子区域折叠样式 */ .red-settings .red-settings-subsection { - margin: 0 12px; + margin: 0 12px 12px 12px; border: 1px solid var(--background-modifier-border); border-radius: 8px; overflow-y: auto; diff --git a/src/view.ts b/src/view.ts index 99d4c99..785695d 100644 --- a/src/view.ts +++ b/src/view.ts @@ -316,12 +316,12 @@ export class RedView extends ItemView { attr: { 'aria-label': '使用指南' } }); setIcon(helpButton, 'help'); - + const headingLevel = this.settingsManager.getSettings().headingLevel || 'h1'; parent.createEl('div', { cls: 'red-help-tooltip', text: `使用指南: - 1. 核心用法:用一级标题(#)分割内容,每个标题生成一张小红书配图 - 2. 内容分页:在一级标题下使用 --- 可将内容分割为多页,每页都会带上标题 + 1. 核心用法:用${headingLevel === 'h1' ? '一级标题(#)' : '二级标题(##)'}来分割内容,每个标题生成一张小红书配图 + 2. 内容分页:在${headingLevel === 'h1' ? '一级标题(#)' : '二级标题(##)'}下使用 --- 可将内容分割为多页,每页都会带上标题 3. 首图制作:单独调整首节字号至20-24px,使用【下载当前页】导出 4. 长文优化:内容较多的章节可调小字号至14-16px后单独导出 5. 批量操作:保持统一字号时,用【导出全部页】批量生成