Spaces:

aimdeepcafe
/

phone

Running

App Files Files Community

aimdeepcafe commited on Aug 3, 2025

Commit

8943cea

verified ·

1 Parent(s): fa698e7

Update book.html

Browse files

Files changed (1) hide show

book.html +33 -13

book.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>爱小说</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <script>
@@ -26,9 +26,11 @@
       :root {
         --reading-font: 'Inter'; --reading-font-size: 1.125rem; --reading-line-height: 1.75; --reading-letter-spacing: 0.025em;
         --reading-bg-color: theme('colors.light.card'); --reading-text-color: theme('colors.light.text');
       }
       :root.dark {
         --reading-bg-color: theme('colors.dark.card'); --reading-text-color: theme('colors.dark.text');
       }
     }
     @layer components {
@@ -42,6 +44,7 @@
       .scrollbar-hide::-webkit-scrollbar { display: none; }
       .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
       .tab-button.active { @apply bg-primary text-white; }
     }
   </style>
 </head>
@@ -55,6 +58,8 @@
         <button id="regenerate-chapter-btn" class="btn-secondary" title="重新生成"><i class="fa fa-refresh mr-2"></i>重写</button>
         <button id="continue-story-btn" class="btn-primary" title="继续故事"><i class="fa fa-play mr-2"></i>继续创作</button>
         <span class="text-slate-300 dark:text-slate-600 mx-1">|</span>
         <button id="open-story-preset-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="故事设定"><i class="fa fa-file-text-o"></i></button>
         <button id="open-model-settings-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="模型设置"><i class="fa fa-cogs"></i></button>
         <button id="theme-toggle-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa fa-moon-o"></i></button>
@@ -68,6 +73,9 @@
       <a href="#" id="custom-prompt-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-magic fa-fw mr-3"></i>自定义情节</a>
       <a href="#" id="regenerate-chapter-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-refresh fa-fw mr-3"></i>重新生成</a>
       <div class="my-1 h-px bg-slate-200 dark:bg-slate-700"></div>
       <a href="#" id="open-story-preset-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-file-text-o fa-fw mr-3"></i>故事设定</a>
       <a href="#" id="open-model-settings-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-cogs fa-fw mr-3"></i>模型设置</a>
       <div class="my-1 h-px bg-slate-200 dark:bg-slate-700"></div>
@@ -118,11 +126,12 @@
     </div>
   </main>
-  <div id="reading-settings-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-md max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">阅读设置</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 space-y-5 overflow-y-auto"><div><h4 class="text-md font-medium mb-3 text-light-text dark:text-dark-text"><i class="fa fa-font mr-2 text-primary"></i>字体样式</h4><div class="space-y-4"><div><label for="font-size-slider" class="block text-sm font-medium mb-1 text-light-subtext dark:text-dark-subtext">字体大小: <span id="font-size-value">18px</span></label><input type="range" id="font-size-slider" min="12" max="32" step="1" value="18" class="w-full"></div><div><label for="line-height-slider" class="block text-sm font-medium mb-1 text-light-subtext dark:text-dark-subtext">行间距: <span id="line-height-value">1.75</span></label><input type="range" id="line-height-slider" min="1.2" max="2.5" step="0.05" value="1.75" class="w-full"></div></div></div><div><h4 class="text-md font-medium mb-3 text-light-text dark:text-dark-text"><i class="fa fa-upload mr-2 text-primary"></i>自定义字体</h4><input type="file" id="font-upload-input" accept=".ttf,.otf,.woff,.woff2" class="block w-full text-sm text-light-subtext file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-primary hover:file:bg-sky-200 cursor-pointer dark:file:bg-sky-900/50 dark:hover:file:bg-sky-900"></div></div></div></div>
   <div id="custom-prompt-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-lg dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">自定义生成</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5"><textarea id="custom-prompt-input" class="input-base h-40" placeholder="请输入你希望接下来发生的情节..."></textarea><div class="mt-4 flex justify-end"><button id="submit-custom-prompt-btn" class="btn-primary">生成</button></div></div></div></div>
   <div id="edit-chapter-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">编辑章节</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 flex-grow flex flex-col"><input type="text" id="edit-chapter-title-input" class="input-base mb-4" placeholder="章节标题"><textarea id="edit-chapter-content-input" class="input-base flex-grow w-full resize-none" style="min-height: 300px;"></textarea><div class="mt-4 flex justify-between items-center"><button id="delete-chapter-btn" class="btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 flex items-center"><i class="fa fa-trash mr-2"></i>删除章节</button><div><button id="save-edit-btn" class="btn-primary">保存</button></div></div></div></div></div>
   <div id="model-settings-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">模型设置</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 space-y-5 overflow-y-auto"><div class="space-y-4"><h2 class="text-lg font-semibold flex items-center text-sky-600 dark:text-sky-500 -mb-2"><i class="fa fa-plug mr-2"></i>API 配置</h2><div><label for="api-type-select" class="block text-sm font-medium mb-1">API 类型</label><select id="api-type-select" class="input-base"><option value="openai">OpenAI</option><option value="gemini">Gemini</option></select></div><div><label for="api-url-input" class="block text-sm font-medium mb-1">API 地址</label><input type="url" id="api-url-input" class="input-base" placeholder="https://api.openai.com/v1/chat/completions"></div><div><label class="block text-sm font-medium mb-1">API Key 配置</label><div id="api-key-display" class="hidden p-3 border rounded-md bg-slate-100 dark:bg-slate-900/50 dark:border-slate-700"><div class="flex justify-between items-center"><ul id="masked-keys-list" class="space-y-1 text-sm font-mono text-light-subtext dark:text-dark-subtext"></ul><button id="edit-api-keys-btn" class="text-sm text-primary hover:underline">编辑</button></div></div><textarea id="api-key-input" rows="3" class="input-base font-mono text-sm" placeholder="可输入多个Key，用逗号或换行分隔..."></textarea><p class="mt-1 text-xs text-amber-600 dark:text-amber-500"><i class="fa fa-warning mr-1"></i>注意：API密钥将经过混淆后保存在您的浏览器本地。</p></div><button type="button" id="connect-api-btn" class="btn-primary w-full flex items-center justify-center"><i class="fa fa-link mr-2"></i>连接模型</button><div id="api-status" class="hidden text-sm py-2 px-3 rounded-md text-center"></div></div><div class="space-y-4 pt-5 border-t dark:border-slate-700"><h2 class="text-lg font-semibold -mb-2 flex items-center text-sky-600 dark:text-sky-500"><i class="fa fa-sliders mr-2"></i>生成参数</h2><div><label for="model-select" class="block text-sm font-medium mb-1">选择模型</label><select id="model-select" class="input-base" disabled><option value="">请先连接API</option></select></div><div><label for="context-memory-slider" class="block text-sm font-medium mb-1">上下文记忆: <span id="context-memory-value">3</span> 章</label><input type="range" id="context-memory-slider" min="0" max="20" value="3" class="w-full"></div><div><label for="temperature-slider" class="block text-sm font-medium mb-1">创意温度: <span id="temperature-value">0.7</span></label><input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.1" value="0.7" class="w-full"></div></div></div></div></div>
   <div id="story-preset-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">故事预设</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 flex-grow flex flex-col overflow-hidden"><div class="flex-shrink-0 mb-4 flex justify-between items-center"><div id="preset-tabs-container" class="flex space-x-0 border border-slate-200 dark:border-slate-700 rounded-lg p-1"></div><button id="add-preset-btn" title="新增预设" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 md:btn-secondary flex items-center"><i class="fa fa-plus md:mr-2"></i><span class="hidden md:inline">新增</span></button></div><div id="preset-list-container" class="flex-grow overflow-y-auto space-y-2 pr-2"></div><div class="flex-shrink-0 mt-4 pt-4 border-t dark:border-slate-700 flex justify-center"><button id="generate-from-presets-btn" class="btn-primary flex items-center"><i class="fa fa-magic mr-2"></i>根据选择生成故事</button></div></div></div></div>
   <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
   <script>
@@ -153,7 +162,8 @@
             regenerateChapterBtnMobile: $('#regenerate-chapter-btn-mobile'), openStoryPresetBtnMobile: $('#open-story-preset-btn-mobile'),
             openModelSettingsBtnMobile: $('#open-model-settings-btn-mobile'), themeToggleBtnMobile: $('#theme-toggle-btn-mobile'), themeToggleIcon: $('#theme-toggle-btn').querySelector('i'),
             fontSizeSlider: $('#font-size-slider'), fontSizeValue: $('#font-size-value'), lineHeightSlider: $('#line-height-slider'), lineHeightValue: $('#line-height-value'),
-            fontUploadInput: $('#font-upload-input'),
             customPromptInput: $('#custom-prompt-input'), submitCustomPromptBtn: $('#submit-custom-prompt-btn'), editChapterTitleInput: $('#edit-chapter-title-input'),
             editChapterContentInput: $('#edit-chapter-content-input'), saveEditBtn: $('#save-edit-btn'), deleteChapterBtn: $('#delete-chapter-btn'),
             apiTypeSelect: $('#api-type-select'), apiUrlInput: $('#api-url-input'), apiKeyInput: $('#api-key-input'), apiKeyDisplay: $('#api-key-display'),
@@ -161,10 +171,11 @@
             modelSelect: $('#model-select'), contextMemorySlider: $('#context-memory-slider'), contextMemoryValue: $('#context-memory-value'),
             temperatureSlider: $('#temperature-slider'), temperatureValue: $('#temperature-value'), presetTabsContainer: $('#preset-tabs-container'),
             addPresetBtn: $('#add-preset-btn'), presetListContainer: $('#preset-list-container'), generateFromPresetsBtn: $('#generate-from-presets-btn'),
         };
-        const saveState = () => { const stateToSave = { story, currentChapterIndex, apiConfig: { ...apiConfig, keys: apiConfig.keys.map(key => btoa(key)) }, modelSettings: { model: elements.modelSelect.value, contextMemory: elements.contextMemorySlider.value, temperature: elements.temperatureSlider.value }, readingSettings: { fontSize: elements.fontSizeSlider.value, lineHeight: elements.lineHeightSlider.value }}; localStorage.setItem(LS_KEYS.STATE, JSON.stringify(stateToSave));};
-        const loadState = () => { const savedState = localStorage.getItem(LS_KEYS.STATE); if (!savedState) return; try { const state = JSON.parse(savedState); story = state.story || []; currentChapterIndex = state.currentChapterIndex ?? -1; if (state.apiConfig) { apiConfig = { ...state.apiConfig, keys: (state.apiConfig.keys || []).map(key => { try { return atob(key) } catch { return '' } }).filter(Boolean) }; elements.apiTypeSelect.value = apiConfig.type || 'openai'; elements.apiUrlInput.value = apiConfig.url || ''; } if (state.modelSettings) { localStorage.setItem('aiNovelLastModel', state.modelSettings.model || ''); elements.contextMemorySlider.value = state.modelSettings.contextMemory || 3; elements.temperatureSlider.value = state.modelSettings.temperature || 0.7; } if (state.readingSettings) { elements.fontSizeSlider.value = state.readingSettings.fontSize || 18; elements.lineHeightSlider.value = state.readingSettings.lineHeight || 1.75; }} catch (e) { console.error("Failed to load state:", e); localStorage.removeItem(LS_KEYS.STATE); }};
         const savePresets = () => localStorage.setItem(LS_KEYS.PRESETS, JSON.stringify({ data: presetData, selected: selectedPresets, expanded: Array.from(expandedPresets) }));
         const loadPresets = () => { const raw = localStorage.getItem(LS_KEYS.PRESETS); Object.keys(PRESET_CATEGORIES).forEach(key => { presetData[key] = []; selectedPresets[key] = []; }); if (raw) { try { const p = JSON.parse(raw); if (p.data) presetData = p.data; if (p.selected) selectedPresets = p.selected; if (p.expanded) expandedPresets = new Set(p.expanded) } catch (e) { console.error("Failed to load presets:", e); } }};
         const getNextApiKey = () => { if (!apiConfig.isConnected || !apiConfig.keys.length) return null; const key = apiConfig.keys[apiConfig.currentKeyIndex]; apiConfig.currentKeyIndex = (apiConfig.currentKeyIndex + 1) % apiConfig.keys.length; saveState(); return key; };
@@ -173,7 +184,7 @@
         const generateChapter = async (userPrompt, isRegeneration = false) => { if (!apiConfig.isConnected) return alert('请先在模型设置中连接API。'); const apiKey = getNextApiKey(); if (!apiKey) { toggleLoading(false); return alert('API已连接，但未配置密钥。请重新配置。'); } toggleLoading(true); const contextMemory = parseInt(elements.contextMemorySlider.value, 10), temperature = parseFloat(elements.temperatureSlider.value), model = elements.modelSelect.value; const promptData = buildFullPrompt(userPrompt, contextMemory, isRegeneration); let endpoint = apiConfig.url, payload, headers; if (apiConfig.type === 'openai') { payload = { model, temperature, messages: promptData.messages }; headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }; } else { payload = { generationConfig: { temperature }, contents: [{ role: 'user', parts: [{ text: promptData.fullPrompt }] }] }; endpoint = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`; headers = { 'Content-Type': 'application/json' }; } try { const data = await fetchFromApi(endpoint, { method: 'POST', headers, body: JSON.stringify(payload) }); const newContent = (apiConfig.type === 'openai' ? data.choices?.[0]?.message?.content : data.candidates?.[0]?.content?.parts?.[0]?.text)?.trim(); if (!newContent) throw new Error('API返回内容为空。'); if (isRegeneration) { story[currentChapterIndex].content = newContent; story[currentChapterIndex].customPrompt = userPrompt; } else { const newIndex = story.length; story.push({ title: `第 ${newIndex + 1} 章`, content: newContent, customPrompt: userPrompt }); currentChapterIndex = newIndex; } renderChapter(currentChapterIndex); } catch (error) { console.error('生成失败:', error); alert(`生成失败: ${error.message}`); toggleLoading(false); }};
         const buildFullPrompt = (userPrompt, contextMemory, isRegeneration) => { const presetsPrompt = generatePromptFromSelectedPresets(); const formatPreset = presetData.format?.find(p => selectedPresets.format?.includes(p.id)); const formatInstructions = formatPreset ? formatPreset.desc : "Use Markdown format. Chapter title as H1."; const systemContent = `You are a talented novelist. Create the story based on the following settings and requirements.\n\n### Story Presets\n${presetsPrompt}\n\n### Output Format\n${formatInstructions}`; const contextStory = isRegeneration ? story.slice(0, currentChapterIndex) : story; const contextChapters = contextMemory > 0 ? contextStory.slice(-contextMemory) : []; let fullPrompt = `${systemContent}\n\n`; if(contextChapters.length > 0) fullPrompt += "### Previous Chapters (for context)\n" + contextChapters.map(c => `# ${c.title}\n${c.content}`).join('\n\n') + '\n\n'; fullPrompt += `### Current Task\n${userPrompt}`; let messages = [{ role: 'system', content: systemContent }]; if(contextChapters.length > 0) { messages.push({ role: 'user', content: "Here is the context from previous chapters:\n\n" + contextChapters.map(c => `# ${c.title}\n${c.content}`).join('\n\n') }); messages.push({ role: 'assistant', content: 'Understood. I have the context. What should I write next?' }); } messages.push({ role: 'user', content: `### Current Task\n${userPrompt}` }); return { fullPrompt, messages }; };
         const handleApiTypeChange = () => { const type = elements.apiTypeSelect.value, urlInput = elements.apiUrlInput; if (type === 'gemini') { urlInput.value = 'https://generativelanguage.googleapis.com'; urlInput.readOnly = true; urlInput.classList.add('bg-slate-100', 'dark:bg-slate-700/50', 'cursor-not-allowed'); } else { urlInput.readOnly = false; urlInput.classList.remove('bg-slate-100', 'dark:bg-slate-700/50', 'cursor-not-allowed'); urlInput.placeholder = 'https://api.openai.com/v1/chat/completions'; urlInput.value = (apiConfig.type === 'openai' && apiConfig.url) ? apiConfig.url : ''; }};
-        const renderChapter = (index) => { toggleLoading(false); if (index < 0 || index >= story.length) return showWelcomeScreen(); hideWelcomeScreen(); currentChapterIndex = index; const chapter = story[index]; let contentHtml = mdConverter.makeHtml(chapter.content); const tempDiv = document.createElement('div'); tempDiv.innerHTML = contentHtml; const h1 = tempDiv.querySelector('h1'); if (h1) { chapter.title = h1.textContent.trim(); h1.remove(); contentHtml = tempDiv.innerHTML; } elements.chapterTitleDisplay.textContent = chapter.title; chapterPages = paginateContent(contentHtml, 2500); currentPageIndex = 0; renderCurrentPage(); elements.readingArea.scrollTop = 0; updateUI(); saveState(); };
         const renderCurrentPage = () => { elements.contentArea.innerHTML = chapterPages[currentPageIndex] || ''; updatePaginationUI(); };
         const updateUI = () => { const hasStory = story.length > 0; elements.chapterInfo.textContent = hasStory ? `第 ${currentChapterIndex + 1} / ${story.length} 章` : '无内容'; elements.prevChapterBtn.disabled = !hasStory || currentChapterIndex === 0; elements.nextChapterBtn.disabled = !hasStory || currentChapterIndex === story.length - 1; [elements.continueStoryBtn, elements.regenerateChapterBtn, elements.editChapterBtn, elements.exportChapterBtn, elements.exportAllBtn, elements.openers.customPrompt, elements.continueStoryBtnMobile, elements.customPromptBtnMobile, elements.regenerateChapterBtnMobile].forEach(btn => { btn.disabled = !hasStory; }); elements.wordCount.textContent = hasStory ? (story[currentChapterIndex].content.match(/[\u4e00-\u9fa5\w]+/g) || []).join('').length : 0; elements.contextMemoryValue.textContent = elements.contextMemorySlider.value; elements.temperatureValue.textContent = elements.temperatureSlider.value; elements.fontSizeValue.textContent = `${elements.fontSizeSlider.value}px`; elements.lineHeightValue.textContent = elements.lineHeightSlider.value; };
         const updatePaginationUI = () => { if (chapterPages.length > 1) { elements.paginationControls.classList.remove('hidden'); elements.pageInfo.textContent = `${currentPageIndex + 1} / ${chapterPages.length}`; elements.prevPageBtn.disabled = currentPageIndex === 0; elements.nextPageBtn.disabled = currentPageIndex >= chapterPages.length - 1; } else { elements.paginationControls.classList.add('hidden'); }};
@@ -185,11 +196,13 @@
         const renderApiKeyDisplay = () => { const hasKeys = apiConfig.keys && apiConfig.keys.length > 0; elements.apiKeyInput.classList.toggle('hidden', hasKeys); elements.apiKeyDisplay.classList.toggle('hidden', !hasKeys); if (hasKeys) { elements.maskedKeysList.innerHTML = apiConfig.keys.map((key, index) => `<li>Key ${index + 1}: ${maskApiKey(key)}</li>`).join(''); }};
         const restoreApiConnectionUI = () => { if (apiConfig.isConnected && apiConfig.models && apiConfig.models.length > 0) { elements.modelSelect.innerHTML = ''; apiConfig.models.forEach(modelId => { elements.modelSelect.add(new Option(modelId, modelId)); }); const lastModel = localStorage.getItem('aiNovelLastModel'); if (lastModel && apiConfig.models.includes(lastModel)) elements.modelSelect.value = lastModel; elements.modelSelect.disabled = false; const successMessage = `已连接! 找到 ${apiConfig.models.length} 个模型。${apiConfig.keys.length > 1 ? `正在轮换 ${apiConfig.keys.length} 个Key。` : ''}`; updateApiStatus(successMessage, 'success'); }};
         const toggleModal = (modalName, show) => { if(elements.modals[modalName]) elements.modals[modalName].classList.toggle('hidden', !show); };
-        const applyReadingSettings = () => { const root = document.documentElement; root.style.setProperty('--reading-font-size', `${elements.fontSizeSlider.value}px`); root.style.setProperty('--reading-line-height', elements.lineHeightSlider.value); updateUI(); saveState(); };
         const paginateContent = (htmlContent, limit) => { const pages = []; const tempDiv = document.createElement('div'); tempDiv.innerHTML = htmlContent; const nodes = Array.from(tempDiv.childNodes); if (nodes.length === 0) return [htmlContent]; let currentPageHtml = ''; for (const node of nodes) { if (currentPageHtml && (currentPageHtml.length + (node.textContent || '').length) > limit) { pages.push(currentPageHtml); currentPageHtml = ''; } currentPageHtml += node.outerHTML || node.textContent; } if (currentPageHtml) pages.push(currentPageHtml); return pages; };
-        const downloadAsTxt = (filename, text) => { const blob = new Blob(['\uFEFF' + text], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); };
         const renderPresetTabs = () => { const isMobile = window.innerWidth < 768; elements.presetTabsContainer.innerHTML = Object.entries(PRESET_CATEGORIES).map(([key, {name, icon}]) => { const content = isMobile ? `<i class="fa ${icon} fa-fw"></i>` : name; return `<button data-tab="${key}" title="${name}" class="tab-button px-3 py-1.5 text-sm rounded-md transition-colors ${activePresetTab === key ? 'active' : ''}">${content}</button>`}).join('');};
-        const renderPresetList = () => { const list = presetData[activePresetTab] || []; const categoryName = PRESET_CATEGORIES[activePresetTab].name; elements.presetListContainer.innerHTML = list.length === 0 ? `<p class="text-center text-light-subtext py-4">暂无 ${categoryName} 预设</p>` : list.map(item => { const isExpanded = expandedPresets.has(item.id); return `<div class="bg-slate-100 dark:bg-slate-900/50 rounded-lg"><div class="p-2 flex items-center justify-between ${selectedPresets[activePresetTab]?.includes(item.id) ? 'bg-sky-100/50 dark:bg-sky-900/20' : ''}"><div class="flex items-center flex-grow min-w-0" data-action="toggle-select" data-id="${item.id}"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-primary flex-shrink-0" ${selectedPresets[activePresetTab]?.includes(item.id) ? 'checked' : ''}><div class="ml-3 flex-grow cursor-pointer min-w-0" data-action="toggle-expand" data-id="${item.id}"><p class="font-semibold text-light-text dark:text-dark-text truncate">${item.name}</p><div class="grid ${isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} transition-[grid-template-rows] duration-300 ease-in-out"><div class="overflow-hidden"><p class="text-xs text-light-subtext mt-1 pt-1 border-t border-slate-200 dark:border-slate-700">${item.desc.replace(/\n/g, '<br>')}</p></div></div></div></div><div class="flex items-center space-x-1 ml-2 flex-shrink-0"><button data-action="edit-preset" data-id="${item.id}" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa fa-edit text-sm"></i></button><button data-action="delete-preset" data-id="${item.id}" class="p-2 rounded-full hover:bg-red-100 dark:hover:bg-red-800/50"><i class="fa fa-trash text-sm text-red-500"></i></button></div></div></div>`}).join(''); };
         const showPresetEditor = (itemToEdit = null) => { const isEditing = !!itemToEdit; const modalId = 'dynamic-preset-editor'; $(`#${modalId}`)?.remove(); const modal = document.createElement('div'); modal.id = modalId; modal.className = 'fixed inset-0 bg-black/60 z-[60] flex items-center justify-center p-4'; modal.innerHTML = `<div class="bg-light-card dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md"><div class="p-4 border-b dark:border-slate-700"><h3 class='text-lg font-semibold text-light-text dark:text-dark-text'>${isEditing ? '编辑' : '新增'} ${PRESET_CATEGORIES[activePresetTab].name} 预设</h3></div><div class="p-5 space-y-4"><input id='preset-edit-name' class='input-base' placeholder='名称' value='${itemToEdit?.name || ''}'/><textarea id='preset-edit-desc' class='input-base h-24' placeholder='描述'>${itemToEdit?.desc || ''}</textarea></div><div class='p-4 flex justify-end space-x-2 border-t dark:border-slate-700'><button id='preset-edit-cancel' class='btn-secondary'>取消</button><button id='preset-edit-save' class='btn-primary'>保存</button></div></div>`; document.body.appendChild(modal); modal.querySelector('#preset-edit-cancel').onclick = () => modal.remove(); modal.querySelector('#preset-edit-save').onclick = () => { const name = modal.querySelector('#preset-edit-name').value.trim(); const desc = modal.querySelector('#preset-edit-desc').value.trim(); if (!name) return alert('名称不能为空。'); if (isEditing) { itemToEdit.name = name; itemToEdit.desc = desc; } else { presetData[activePresetTab].push({ id: `p_${Date.now()}`, name, desc }); } savePresets(); renderPresetList(); modal.remove(); }; };
         const generatePromptFromSelectedPresets = () => { let prompt = ""; Object.entries(selectedPresets).forEach(([category, ids]) => { if (ids.length === 0) return; prompt += `### ${PRESET_CATEGORIES[category].name}\n`; ids.forEach(id => { const item = presetData[category].find(p => p.id === id); if (item) prompt += `- ${item.name}: ${item.desc}\n`; }); prompt += '\n'; }); return prompt || "无预设，请自由发挥。"; };
@@ -203,10 +216,12 @@
             elements.nextChapterBtn.addEventListener('click', () => renderChapter(currentChapterIndex + 1));
             elements.prevPageBtn.addEventListener('click', () => { if (currentPageIndex > 0) renderCurrentPage(--currentPageIndex); });
             elements.nextPageBtn.addEventListener('click', () => { if (currentPageIndex < chapterPages.length - 1) renderCurrentPage(++currentPageIndex); });
-            [elements.fontSizeSlider, elements.lineHeightSlider].forEach(el => el.addEventListener('input', applyReadingSettings));
-            elements.fontUploadInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { const style = document.createElement('style'); style.textContent = `@font-face { font-family: 'CustomFont'; src: url('${event.target.result}'); }`; document.head.appendChild(style); document.documentElement.style.setProperty('--reading-font', `'CustomFont'`); }; reader.readAsDataURL(file); });
-            elements.exportChapterBtn.addEventListener('click', () => { if(currentChapterIndex < 0) return; downloadAsTxt(`${story[currentChapterIndex].title}.txt`, story[currentChapterIndex].content); });
-            elements.exportAllBtn.addEventListener('click', () => { if(!story.length) return; downloadAsTxt('Full Story.txt', story.map(c => `# ${c.title}\n\n${c.content}`).join('\n\n---\n\n')); });
             elements.submitCustomPromptBtn.addEventListener('click', () => { const prompt = elements.customPromptInput.value.trim(); if (prompt) { generateChapter(prompt); toggleModal('customPrompt', false); elements.customPromptInput.value = ''; } });
             elements.openers.editChapter.addEventListener('click', () => { if(currentChapterIndex < 0) return; const chapter = story[currentChapterIndex]; elements.editChapterTitleInput.value = chapter.title; elements.editChapterContentInput.value = chapter.content; });
             elements.saveEditBtn.addEventListener('click', () => { story[currentChapterIndex].title = elements.editChapterTitleInput.value.trim(); story[currentChapterIndex].content = elements.editChapterContentInput.value.trim(); renderChapter(currentChapterIndex); toggleModal('editChapter', false); });
@@ -233,6 +248,11 @@
             const updateThemeIcon = (isDark) => { const iconClass = isDark ? 'fa-sun-o' : 'fa-moon-o'; if(elements.themeToggleIcon) elements.themeToggleIcon.className = `fa ${iconClass}`; if(elements.themeToggleBtnMobile) elements.themeToggleBtnMobile.querySelector('i').className = `fa ${iconClass} fa-fw mr-3`; };
             elements.themeToggleBtn.addEventListener('click', () => { const isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem(LS_KEYS.THEME, isDark ? 'dark' : 'light'); updateThemeIcon(isDark); });
             window.addEventListener('resize', renderPresetTabs);
         }
         function initializeApp() {

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>爱小说 (重构版)</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <script>
       :root {
         --reading-font: 'Inter'; --reading-font-size: 1.125rem; --reading-line-height: 1.75; --reading-letter-spacing: 0.025em;
         --reading-bg-color: theme('colors.light.card'); --reading-text-color: theme('colors.light.text');
+        --dialogue-highlight-color: theme('colors.light.text'); --dialogue-highlight-weight: normal;
       }
       :root.dark {
         --reading-bg-color: theme('colors.dark.card'); --reading-text-color: theme('colors.dark.text');
+        --dialogue-highlight-color: theme('colors.dark.text');
       }
     }
     @layer components {
       .scrollbar-hide::-webkit-scrollbar { display: none; }
       .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
       .tab-button.active { @apply bg-primary text-white; }
+      .dialogue-highlight { color: var(--dialogue-highlight-color); font-weight: var(--dialogue-highlight-weight); }
     }
   </style>
 </head>
         <button id="regenerate-chapter-btn" class="btn-secondary" title="重新生成"><i class="fa fa-refresh mr-2"></i>重写</button>
         <button id="continue-story-btn" class="btn-primary" title="继续故事"><i class="fa fa-play mr-2"></i>继续创作</button>
         <span class="text-slate-300 dark:text-slate-600 mx-1">|</span>
+        <button id="import-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="导入数据"><i class="fa fa-cloud-upload"></i></button>
+        <button id="export-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="导出数据"><i class="fa fa-cloud-download"></i></button>
         <button id="open-story-preset-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="故事设定"><i class="fa fa-file-text-o"></i></button>
         <button id="open-model-settings-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700" title="模型设置"><i class="fa fa-cogs"></i></button>
         <button id="theme-toggle-btn" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa fa-moon-o"></i></button>
       <a href="#" id="custom-prompt-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-magic fa-fw mr-3"></i>自定义情节</a>
       <a href="#" id="regenerate-chapter-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-refresh fa-fw mr-3"></i>重新生成</a>
       <div class="my-1 h-px bg-slate-200 dark:bg-slate-700"></div>
+      <a href="#" id="import-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-cloud-upload fa-fw mr-3"></i>导入数据</a>
+      <a href="#" id="export-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-cloud-download fa-fw mr-3"></i>导出数据</a>
+      <div class="my-1 h-px bg-slate-200 dark:bg-slate-700"></div>
       <a href="#" id="open-story-preset-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-file-text-o fa-fw mr-3"></i>故事设定</a>
       <a href="#" id="open-model-settings-btn-mobile" class="flex items-center w-full px-3 py-2 text-sm rounded-md hover:bg-slate-100 dark:hover:bg-slate-700"><i class="fa fa-cogs fa-fw mr-3"></i>模型设置</a>
       <div class="my-1 h-px bg-slate-200 dark:bg-slate-700"></div>
     </div>
   </main>
+  <div id="reading-settings-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-md max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">阅读设置</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 space-y-5 overflow-y-auto"><div><h4 class="text-md font-medium mb-3 text-light-text dark:text-dark-text"><i class="fa fa-font mr-2 text-primary"></i>字体样式</h4><div class="space-y-4"><div><label for="font-size-slider" class="block text-sm font-medium mb-1 text-light-subtext dark:text-dark-subtext">字体大小: <span id="font-size-value">18px</span></label><input type="range" id="font-size-slider" min="12" max="32" step="1" value="18" class="w-full"></div><div><label for="line-height-slider" class="block text-sm font-medium mb-1 text-light-subtext dark:text-dark-subtext">行间距: <span id="line-height-value">1.75</span></label><input type="range" id="line-height-slider" min="1.2" max="2.5" step="0.05" value="1.75" class="w-full"></div></div></div><div><h4 class="text-md font-medium mb-3 text-light-text dark:text-dark-text"><i class="fa fa-upload mr-2 text-primary"></i>自定义字体</h4><div class="space-y-2"><p class="text-xs text-light-subtext">从本地上传字体文件:</p><input type="file" id="font-upload-input" accept=".ttf,.otf,.woff,.woff2" class="block w-full text-sm text-light-subtext file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-primary hover:file:bg-sky-200 cursor-pointer dark:file:bg-sky-900/50 dark:hover:file:bg-sky-900"><p class="text-xs text-light-subtext pt-2">或从URL加载字体:</p><div class="flex space-x-2"><input type="url" id="font-url-input" class="input-base" placeholder="https://.../font.woff2"><button id="apply-font-url-btn" class="btn-secondary flex-shrink-0">应用</button></div></div></div><div><h4 class="text-md font-medium mb-3 text-light-text dark:text-dark-text"><i class="fa fa-comments-o mr-2 text-primary"></i>对话高亮</h4><div class="space-y-3"><label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" id="dialogue-highlight-toggle" class="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:bg-slate-700 dark:border-slate-600"><span class="text-sm font-medium">开启对话高亮</span></label><div id="dialogue-options" class="hidden pl-7 space-y-3 pt-2"><label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" id="dialogue-bold-toggle" class="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:bg-slate-700 dark:border-slate-600"><span class="text-sm font-medium">对话内容加粗</span></label><div class="flex items-center space-x-3"><label for="dialogue-color-picker" class="text-sm font-medium text-light-subtext dark:text-dark-subtext">对话文字颜色:</label><input type="color" id="dialogue-color-picker" value="#334155" class="w-10 h-8 p-1 border rounded-md cursor-pointer dark:bg-slate-700 dark:border-slate-600"><button id="reset-dialogue-color-btn" class="text-xs text-light-subtext hover:text-primary">重置</button></div></div></div></div></div></div></div>
   <div id="custom-prompt-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-lg dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">自定义生成</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5"><textarea id="custom-prompt-input" class="input-base h-40" placeholder="请输入你希望接下来发生的情节..."></textarea><div class="mt-4 flex justify-end"><button id="submit-custom-prompt-btn" class="btn-primary">生成</button></div></div></div></div>
   <div id="edit-chapter-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">编辑章节</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 flex-grow flex flex-col"><input type="text" id="edit-chapter-title-input" class="input-base mb-4" placeholder="章节标题"><textarea id="edit-chapter-content-input" class="input-base flex-grow w-full resize-none" style="min-height: 300px;"></textarea><div class="mt-4 flex justify-between items-center"><button id="delete-chapter-btn" class="btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 flex items-center"><i class="fa fa-trash mr-2"></i>删除章节</button><div><button id="save-edit-btn" class="btn-primary">保存</button></div></div></div></div></div>
   <div id="model-settings-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">模型设置</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 space-y-5 overflow-y-auto"><div class="space-y-4"><h2 class="text-lg font-semibold flex items-center text-sky-600 dark:text-sky-500 -mb-2"><i class="fa fa-plug mr-2"></i>API 配置</h2><div><label for="api-type-select" class="block text-sm font-medium mb-1">API 类型</label><select id="api-type-select" class="input-base"><option value="openai">OpenAI</option><option value="gemini">Gemini</option></select></div><div><label for="api-url-input" class="block text-sm font-medium mb-1">API 地址</label><input type="url" id="api-url-input" class="input-base" placeholder="https://api.openai.com/v1/chat/completions"></div><div><label class="block text-sm font-medium mb-1">API Key 配置</label><div id="api-key-display" class="hidden p-3 border rounded-md bg-slate-100 dark:bg-slate-900/50 dark:border-slate-700"><div class="flex justify-between items-center"><ul id="masked-keys-list" class="space-y-1 text-sm font-mono text-light-subtext dark:text-dark-subtext"></ul><button id="edit-api-keys-btn" class="text-sm text-primary hover:underline">编辑</button></div></div><textarea id="api-key-input" rows="3" class="input-base font-mono text-sm" placeholder="可输入多个Key，用逗号或换行分隔..."></textarea><p class="mt-1 text-xs text-amber-600 dark:text-amber-500"><i class="fa fa-warning mr-1"></i>注意：API密钥将经过混淆后保存在您的浏览器本地。</p></div><button type="button" id="connect-api-btn" class="btn-primary w-full flex items-center justify-center"><i class="fa fa-link mr-2"></i>连接模型</button><div id="api-status" class="hidden text-sm py-2 px-3 rounded-md text-center"></div></div><div class="space-y-4 pt-5 border-t dark:border-slate-700"><h2 class="text-lg font-semibold -mb-2 flex items-center text-sky-600 dark:text-sky-500"><i class="fa fa-sliders mr-2"></i>生成参数</h2><div><label for="model-select" class="block text-sm font-medium mb-1">选择模型</label><select id="model-select" class="input-base" disabled><option value="">请先连接API</option></select></div><div><label for="context-memory-slider" class="block text-sm font-medium mb-1">上下文记忆: <span id="context-memory-value">3</span> 章</label><input type="range" id="context-memory-slider" min="0" max="20" value="3" class="w-full"></div><div><label for="temperature-slider" class="block text-sm font-medium mb-1">创意温度: <span id="temperature-value">0.7</span></label><input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.1" value="0.7" class="w-full"></div></div></div></div></div>
   <div id="story-preset-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden p-4"><div class="bg-light-card rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col dark:bg-dark-card"><div class="p-4 border-b flex justify-between items-center dark:border-slate-700"><h3 class="text-lg font-semibold text-sky-600 dark:text-sky-500">故事预设</h3><button class="close-modal-btn p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 -mr-2"><i class="fa fa-times text-light-subtext"></i></button></div><div class="p-5 flex-grow flex flex-col overflow-hidden"><div class="flex-shrink-0 mb-4 flex justify-between items-center"><div id="preset-tabs-container" class="flex space-x-0 border border-slate-200 dark:border-slate-700 rounded-lg p-1"></div><button id="add-preset-btn" title="新增预设" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 md:btn-secondary flex items-center"><i class="fa fa-plus md:mr-2"></i><span class="hidden md:inline">新增</span></button></div><div id="preset-list-container" class="flex-grow overflow-y-auto space-y-2 pr-2"></div><div class="flex-shrink-0 mt-4 pt-4 border-t dark:border-slate-700 flex justify-center"><button id="generate-from-presets-btn" class="btn-primary flex items-center"><i class="fa fa-magic mr-2"></i>根据选择生成故事</button></div></div></div></div>
+  <input type="file" id="import-file-input" class="hidden" accept=".json">
   <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
   <script>
             regenerateChapterBtnMobile: $('#regenerate-chapter-btn-mobile'), openStoryPresetBtnMobile: $('#open-story-preset-btn-mobile'),
             openModelSettingsBtnMobile: $('#open-model-settings-btn-mobile'), themeToggleBtnMobile: $('#theme-toggle-btn-mobile'), themeToggleIcon: $('#theme-toggle-btn').querySelector('i'),
             fontSizeSlider: $('#font-size-slider'), fontSizeValue: $('#font-size-value'), lineHeightSlider: $('#line-height-slider'), lineHeightValue: $('#line-height-value'),
+            fontUploadInput: $('#font-upload-input'), fontUrlInput: $('#font-url-input'), applyFontUrlBtn: $('#apply-font-url-btn'),
+            dialogueHighlightToggle: $('#dialogue-highlight-toggle'), dialogueOptions: $('#dialogue-options'), dialogueBoldToggle: $('#dialogue-bold-toggle'), dialogueColorPicker: $('#dialogue-color-picker'), resetDialogueColorBtn: $('#reset-dialogue-color-btn'),
             customPromptInput: $('#custom-prompt-input'), submitCustomPromptBtn: $('#submit-custom-prompt-btn'), editChapterTitleInput: $('#edit-chapter-title-input'),
             editChapterContentInput: $('#edit-chapter-content-input'), saveEditBtn: $('#save-edit-btn'), deleteChapterBtn: $('#delete-chapter-btn'),
             apiTypeSelect: $('#api-type-select'), apiUrlInput: $('#api-url-input'), apiKeyInput: $('#api-key-input'), apiKeyDisplay: $('#api-key-display'),
             modelSelect: $('#model-select'), contextMemorySlider: $('#context-memory-slider'), contextMemoryValue: $('#context-memory-value'),
             temperatureSlider: $('#temperature-slider'), temperatureValue: $('#temperature-value'), presetTabsContainer: $('#preset-tabs-container'),
             addPresetBtn: $('#add-preset-btn'), presetListContainer: $('#preset-list-container'), generateFromPresetsBtn: $('#generate-from-presets-btn'),
+            importBtn: $('#import-btn'), exportBtn: $('#export-btn'), importBtnMobile: $('#import-btn-mobile'), exportBtnMobile: $('#export-btn-mobile'), importFileInput: $('#import-file-input'),
         };
+        const saveState = () => { const stateToSave = { story, currentChapterIndex, apiConfig: { ...apiConfig, keys: apiConfig.keys.map(key => btoa(key)) }, modelSettings: { model: elements.modelSelect.value, contextMemory: elements.contextMemorySlider.value, temperature: elements.temperatureSlider.value }, readingSettings: { fontSize: elements.fontSizeSlider.value, lineHeight: elements.lineHeightSlider.value, dialogueHighlight: elements.dialogueHighlightToggle.checked, dialogueBold: elements.dialogueBoldToggle.checked, dialogueColor: elements.dialogueColorPicker.value, fontUrl: elements.fontUrlInput.value }}; localStorage.setItem(LS_KEYS.STATE, JSON.stringify(stateToSave));};
+        const loadState = () => { const savedState = localStorage.getItem(LS_KEYS.STATE); if (!savedState) return; try { const state = JSON.parse(savedState); story = state.story || []; currentChapterIndex = state.currentChapterIndex ?? -1; if (state.apiConfig) { apiConfig = { ...state.apiConfig, keys: (state.apiConfig.keys || []).map(key => { try { return atob(key) } catch { return '' } }).filter(Boolean) }; elements.apiTypeSelect.value = apiConfig.type || 'openai'; elements.apiUrlInput.value = apiConfig.url || ''; } if (state.modelSettings) { localStorage.setItem('aiNovelLastModel', state.modelSettings.model || ''); elements.contextMemorySlider.value = state.modelSettings.contextMemory || 3; elements.temperatureSlider.value = state.modelSettings.temperature || 0.7; } if (state.readingSettings) { elements.fontSizeSlider.value = state.readingSettings.fontSize || 18; elements.lineHeightSlider.value = state.readingSettings.lineHeight || 1.75; elements.dialogueHighlightToggle.checked = state.readingSettings.dialogueHighlight || false; elements.dialogueBoldToggle.checked = state.readingSettings.dialogueBold || false; elements.dialogueColorPicker.value = state.readingSettings.dialogueColor || (document.documentElement.classList.contains('dark') ? '#cbd5e1' : '#334155'); if(state.readingSettings.fontUrl) { elements.fontUrlInput.value = state.readingSettings.fontUrl; applyFontFromUrl(state.readingSettings.fontUrl); } }} catch (e) { console.error("Failed to load state:", e); localStorage.removeItem(LS_KEYS.STATE); }};
         const savePresets = () => localStorage.setItem(LS_KEYS.PRESETS, JSON.stringify({ data: presetData, selected: selectedPresets, expanded: Array.from(expandedPresets) }));
         const loadPresets = () => { const raw = localStorage.getItem(LS_KEYS.PRESETS); Object.keys(PRESET_CATEGORIES).forEach(key => { presetData[key] = []; selectedPresets[key] = []; }); if (raw) { try { const p = JSON.parse(raw); if (p.data) presetData = p.data; if (p.selected) selectedPresets = p.selected; if (p.expanded) expandedPresets = new Set(p.expanded) } catch (e) { console.error("Failed to load presets:", e); } }};
         const getNextApiKey = () => { if (!apiConfig.isConnected || !apiConfig.keys.length) return null; const key = apiConfig.keys[apiConfig.currentKeyIndex]; apiConfig.currentKeyIndex = (apiConfig.currentKeyIndex + 1) % apiConfig.keys.length; saveState(); return key; };
         const generateChapter = async (userPrompt, isRegeneration = false) => { if (!apiConfig.isConnected) return alert('请先在模型设置中连接API。'); const apiKey = getNextApiKey(); if (!apiKey) { toggleLoading(false); return alert('API已连接，但未配置密钥。请重新配置。'); } toggleLoading(true); const contextMemory = parseInt(elements.contextMemorySlider.value, 10), temperature = parseFloat(elements.temperatureSlider.value), model = elements.modelSelect.value; const promptData = buildFullPrompt(userPrompt, contextMemory, isRegeneration); let endpoint = apiConfig.url, payload, headers; if (apiConfig.type === 'openai') { payload = { model, temperature, messages: promptData.messages }; headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }; } else { payload = { generationConfig: { temperature }, contents: [{ role: 'user', parts: [{ text: promptData.fullPrompt }] }] }; endpoint = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`; headers = { 'Content-Type': 'application/json' }; } try { const data = await fetchFromApi(endpoint, { method: 'POST', headers, body: JSON.stringify(payload) }); const newContent = (apiConfig.type === 'openai' ? data.choices?.[0]?.message?.content : data.candidates?.[0]?.content?.parts?.[0]?.text)?.trim(); if (!newContent) throw new Error('API返回内容为空。'); if (isRegeneration) { story[currentChapterIndex].content = newContent; story[currentChapterIndex].customPrompt = userPrompt; } else { const newIndex = story.length; story.push({ title: `第 ${newIndex + 1} 章`, content: newContent, customPrompt: userPrompt }); currentChapterIndex = newIndex; } renderChapter(currentChapterIndex); } catch (error) { console.error('生成失败:', error); alert(`生成失败: ${error.message}`); toggleLoading(false); }};
         const buildFullPrompt = (userPrompt, contextMemory, isRegeneration) => { const presetsPrompt = generatePromptFromSelectedPresets(); const formatPreset = presetData.format?.find(p => selectedPresets.format?.includes(p.id)); const formatInstructions = formatPreset ? formatPreset.desc : "Use Markdown format. Chapter title as H1."; const systemContent = `You are a talented novelist. Create the story based on the following settings and requirements.\n\n### Story Presets\n${presetsPrompt}\n\n### Output Format\n${formatInstructions}`; const contextStory = isRegeneration ? story.slice(0, currentChapterIndex) : story; const contextChapters = contextMemory > 0 ? contextStory.slice(-contextMemory) : []; let fullPrompt = `${systemContent}\n\n`; if(contextChapters.length > 0) fullPrompt += "### Previous Chapters (for context)\n" + contextChapters.map(c => `# ${c.title}\n${c.content}`).join('\n\n') + '\n\n'; fullPrompt += `### Current Task\n${userPrompt}`; let messages = [{ role: 'system', content: systemContent }]; if(contextChapters.length > 0) { messages.push({ role: 'user', content: "Here is the context from previous chapters:\n\n" + contextChapters.map(c => `# ${c.title}\n${c.content}`).join('\n\n') }); messages.push({ role: 'assistant', content: 'Understood. I have the context. What should I write next?' }); } messages.push({ role: 'user', content: `### Current Task\n${userPrompt}` }); return { fullPrompt, messages }; };
         const handleApiTypeChange = () => { const type = elements.apiTypeSelect.value, urlInput = elements.apiUrlInput; if (type === 'gemini') { urlInput.value = 'https://generativelanguage.googleapis.com'; urlInput.readOnly = true; urlInput.classList.add('bg-slate-100', 'dark:bg-slate-700/50', 'cursor-not-allowed'); } else { urlInput.readOnly = false; urlInput.classList.remove('bg-slate-100', 'dark:bg-slate-700/50', 'cursor-not-allowed'); urlInput.placeholder = 'https://api.openai.com/v1/chat/completions'; urlInput.value = (apiConfig.type === 'openai' && apiConfig.url) ? apiConfig.url : ''; }};
+        const renderChapter = (index) => { toggleLoading(false); if (index < 0 || index >= story.length) return showWelcomeScreen(); hideWelcomeScreen(); currentChapterIndex = index; const chapter = story[index]; let contentHtml = mdConverter.makeHtml(chapter.content); if (elements.dialogueHighlightToggle.checked) { contentHtml = highlightDialogue(contentHtml); } const tempDiv = document.createElement('div'); tempDiv.innerHTML = contentHtml; const h1 = tempDiv.querySelector('h1'); if (h1) { chapter.title = h1.textContent.trim(); h1.remove(); contentHtml = tempDiv.innerHTML; } elements.chapterTitleDisplay.textContent = chapter.title; chapterPages = paginateContent(contentHtml, 2500); currentPageIndex = 0; renderCurrentPage(); elements.readingArea.scrollTop = 0; updateUI(); saveState(); };
         const renderCurrentPage = () => { elements.contentArea.innerHTML = chapterPages[currentPageIndex] || ''; updatePaginationUI(); };
         const updateUI = () => { const hasStory = story.length > 0; elements.chapterInfo.textContent = hasStory ? `第 ${currentChapterIndex + 1} / ${story.length} 章` : '无内容'; elements.prevChapterBtn.disabled = !hasStory || currentChapterIndex === 0; elements.nextChapterBtn.disabled = !hasStory || currentChapterIndex === story.length - 1; [elements.continueStoryBtn, elements.regenerateChapterBtn, elements.editChapterBtn, elements.exportChapterBtn, elements.exportAllBtn, elements.openers.customPrompt, elements.continueStoryBtnMobile, elements.customPromptBtnMobile, elements.regenerateChapterBtnMobile].forEach(btn => { btn.disabled = !hasStory; }); elements.wordCount.textContent = hasStory ? (story[currentChapterIndex].content.match(/[\u4e00-\u9fa5\w]+/g) || []).join('').length : 0; elements.contextMemoryValue.textContent = elements.contextMemorySlider.value; elements.temperatureValue.textContent = elements.temperatureSlider.value; elements.fontSizeValue.textContent = `${elements.fontSizeSlider.value}px`; elements.lineHeightValue.textContent = elements.lineHeightSlider.value; };
         const updatePaginationUI = () => { if (chapterPages.length > 1) { elements.paginationControls.classList.remove('hidden'); elements.pageInfo.textContent = `${currentPageIndex + 1} / ${chapterPages.length}`; elements.prevPageBtn.disabled = currentPageIndex === 0; elements.nextPageBtn.disabled = currentPageIndex >= chapterPages.length - 1; } else { elements.paginationControls.classList.add('hidden'); }};
         const renderApiKeyDisplay = () => { const hasKeys = apiConfig.keys && apiConfig.keys.length > 0; elements.apiKeyInput.classList.toggle('hidden', hasKeys); elements.apiKeyDisplay.classList.toggle('hidden', !hasKeys); if (hasKeys) { elements.maskedKeysList.innerHTML = apiConfig.keys.map((key, index) => `<li>Key ${index + 1}: ${maskApiKey(key)}</li>`).join(''); }};
         const restoreApiConnectionUI = () => { if (apiConfig.isConnected && apiConfig.models && apiConfig.models.length > 0) { elements.modelSelect.innerHTML = ''; apiConfig.models.forEach(modelId => { elements.modelSelect.add(new Option(modelId, modelId)); }); const lastModel = localStorage.getItem('aiNovelLastModel'); if (lastModel && apiConfig.models.includes(lastModel)) elements.modelSelect.value = lastModel; elements.modelSelect.disabled = false; const successMessage = `已连接! 找到 ${apiConfig.models.length} 个模型。${apiConfig.keys.length > 1 ? `正在轮换 ${apiConfig.keys.length} 个Key。` : ''}`; updateApiStatus(successMessage, 'success'); }};
         const toggleModal = (modalName, show) => { if(elements.modals[modalName]) elements.modals[modalName].classList.toggle('hidden', !show); };
+        const applyReadingSettings = () => { const root = document.documentElement; root.style.setProperty('--reading-font-size', `${elements.fontSizeSlider.value}px`); root.style.setProperty('--reading-line-height', elements.lineHeightSlider.value); root.style.setProperty('--dialogue-highlight-weight', elements.dialogueBoldToggle.checked ? 'bold' : 'normal'); root.style.setProperty('--dialogue-highlight-color', elements.dialogueColorPicker.value); elements.dialogueOptions.classList.toggle('hidden', !elements.dialogueHighlightToggle.checked); updateUI(); saveState(); renderChapter(currentChapterIndex); };
+        const applyFontFromUrl = (url) => { if(!url) return; const fontName = 'CustomOnlineFont'; const styleId = 'custom-font-style'; $(`#${styleId}`)?.remove(); const style = document.createElement('style'); style.id = styleId; style.textContent = `@font-face { font-family: '${fontName}'; src: url('${url}'); }`; document.head.appendChild(style); document.documentElement.style.setProperty('--reading-font', `'${fontName}'`);};
+        const highlightDialogue = (text) => text.replace(/(“[^”]+”|‘[^’]+’|"[^"]+"|\'[^\']+\'|「[^」]+」|『[^』]+』)/g, `<span class="dialogue-highlight">$1</span>`);
         const paginateContent = (htmlContent, limit) => { const pages = []; const tempDiv = document.createElement('div'); tempDiv.innerHTML = htmlContent; const nodes = Array.from(tempDiv.childNodes); if (nodes.length === 0) return [htmlContent]; let currentPageHtml = ''; for (const node of nodes) { if (currentPageHtml && (currentPageHtml.length + (node.textContent || '').length) > limit) { pages.push(currentPageHtml); currentPageHtml = ''; } currentPageHtml += node.outerHTML || node.textContent; } if (currentPageHtml) pages.push(currentPageHtml); return pages; };
+        const downloadFile = (filename, content, mimeType) => { const blob = new Blob([content], { type: mimeType }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); };
         const renderPresetTabs = () => { const isMobile = window.innerWidth < 768; elements.presetTabsContainer.innerHTML = Object.entries(PRESET_CATEGORIES).map(([key, {name, icon}]) => { const content = isMobile ? `<i class="fa ${icon} fa-fw"></i>` : name; return `<button data-tab="${key}" title="${name}" class="tab-button px-3 py-1.5 text-sm rounded-md transition-colors ${activePresetTab === key ? 'active' : ''}">${content}</button>`}).join('');};
+        const renderPresetList = () => { const list = presetData[activePresetTab] || []; const categoryName = PRESET_CATEGORIES[activePresetTab].name; elements.presetListContainer.innerHTML = list.length === 0 ? `<p class="text-center text-light-subtext py-4">暂无 ${categoryName} 预设</p>` : list.map(item => { const isExpanded = expandedPresets.has(item.id); return `<div class="bg-slate-100 dark:bg-slate-900/50 rounded-lg"><div class="p-2 flex items-start justify-between ${selectedPresets[activePresetTab]?.includes(item.id) ? 'bg-sky-100/50 dark:bg-sky-900/20' : ''}"><div class="flex items-center flex-grow min-w-0" data-action="toggle-select" data-id="${item.id}"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-primary flex-shrink-0" ${selectedPresets[activePresetTab]?.includes(item.id) ? 'checked' : ''}><div class="ml-3 flex-grow cursor-pointer min-w-0" data-action="toggle-expand" data-id="${item.id}"><p class="font-semibold text-light-text dark:text-dark-text truncate">${item.name}</p><div class="grid ${isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} transition-[grid-template-rows] duration-300 ease-in-out"><div class="overflow-hidden"><p class="text-xs text-light-subtext mt-1 pt-1 border-t border-slate-200 dark:border-slate-700">${item.desc.replace(/\n/g, '<br>')}</p></div></div></div></div><div class="flex items-center space-x-1 ml-2 flex-shrink-0"><button data-action="edit-preset" data-id="${item.id}" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa fa-edit text-sm"></i></button><button data-action="delete-preset" data-id="${item.id}" class="p-2 rounded-full hover:bg-red-100 dark:hover:bg-red-800/50"><i class="fa fa-trash text-sm text-red-500"></i></button></div></div></div>`}).join(''); };
         const showPresetEditor = (itemToEdit = null) => { const isEditing = !!itemToEdit; const modalId = 'dynamic-preset-editor'; $(`#${modalId}`)?.remove(); const modal = document.createElement('div'); modal.id = modalId; modal.className = 'fixed inset-0 bg-black/60 z-[60] flex items-center justify-center p-4'; modal.innerHTML = `<div class="bg-light-card dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md"><div class="p-4 border-b dark:border-slate-700"><h3 class='text-lg font-semibold text-light-text dark:text-dark-text'>${isEditing ? '编辑' : '新增'} ${PRESET_CATEGORIES[activePresetTab].name} 预设</h3></div><div class="p-5 space-y-4"><input id='preset-edit-name' class='input-base' placeholder='名称' value='${itemToEdit?.name || ''}'/><textarea id='preset-edit-desc' class='input-base h-24' placeholder='描述'>${itemToEdit?.desc || ''}</textarea></div><div class='p-4 flex justify-end space-x-2 border-t dark:border-slate-700'><button id='preset-edit-cancel' class='btn-secondary'>取消</button><button id='preset-edit-save' class='btn-primary'>保存</button></div></div>`; document.body.appendChild(modal); modal.querySelector('#preset-edit-cancel').onclick = () => modal.remove(); modal.querySelector('#preset-edit-save').onclick = () => { const name = modal.querySelector('#preset-edit-name').value.trim(); const desc = modal.querySelector('#preset-edit-desc').value.trim(); if (!name) return alert('名称不能为空。'); if (isEditing) { itemToEdit.name = name; itemToEdit.desc = desc; } else { presetData[activePresetTab].push({ id: `p_${Date.now()}`, name, desc }); } savePresets(); renderPresetList(); modal.remove(); }; };
         const generatePromptFromSelectedPresets = () => { let prompt = ""; Object.entries(selectedPresets).forEach(([category, ids]) => { if (ids.length === 0) return; prompt += `### ${PRESET_CATEGORIES[category].name}\n`; ids.forEach(id => { const item = presetData[category].find(p => p.id === id); if (item) prompt += `- ${item.name}: ${item.desc}\n`; }); prompt += '\n'; }); return prompt || "无预设，请自由发挥。"; };
             elements.nextChapterBtn.addEventListener('click', () => renderChapter(currentChapterIndex + 1));
             elements.prevPageBtn.addEventListener('click', () => { if (currentPageIndex > 0) renderCurrentPage(--currentPageIndex); });
             elements.nextPageBtn.addEventListener('click', () => { if (currentPageIndex < chapterPages.length - 1) renderCurrentPage(++currentPageIndex); });
+            [elements.fontSizeSlider, elements.lineHeightSlider, elements.dialogueHighlightToggle, elements.dialogueBoldToggle, elements.dialogueColorPicker].forEach(el => el.addEventListener('input', applyReadingSettings));
+            elements.resetDialogueColorBtn.addEventListener('click', () => { elements.dialogueColorPicker.value = document.documentElement.classList.contains('dark') ? '#cbd5e1' : '#334155'; applyReadingSettings(); });
+            elements.fontUploadInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => applyFontFromUrl(event.target.result); reader.readAsDataURL(file); });
+            elements.applyFontUrlBtn.addEventListener('click', () => { const url = elements.fontUrlInput.value.trim(); if (url) { applyFontFromUrl(url); saveState();} });
+            elements.exportChapterBtn.addEventListener('click', () => { if(currentChapterIndex < 0) return; downloadFile(`${story[currentChapterIndex].title}.txt`, story[currentChapterIndex].content, 'text/plain;charset=utf-8'); });
+            elements.exportAllBtn.addEventListener('click', () => { if(!story.length) return; downloadFile('Full Story.txt', story.map(c => `# ${c.title}\n\n${c.content}`).join('\n\n---\n\n'), 'text/plain;charset=utf-8'); });
             elements.submitCustomPromptBtn.addEventListener('click', () => { const prompt = elements.customPromptInput.value.trim(); if (prompt) { generateChapter(prompt); toggleModal('customPrompt', false); elements.customPromptInput.value = ''; } });
             elements.openers.editChapter.addEventListener('click', () => { if(currentChapterIndex < 0) return; const chapter = story[currentChapterIndex]; elements.editChapterTitleInput.value = chapter.title; elements.editChapterContentInput.value = chapter.content; });
             elements.saveEditBtn.addEventListener('click', () => { story[currentChapterIndex].title = elements.editChapterTitleInput.value.trim(); story[currentChapterIndex].content = elements.editChapterContentInput.value.trim(); renderChapter(currentChapterIndex); toggleModal('editChapter', false); });
             const updateThemeIcon = (isDark) => { const iconClass = isDark ? 'fa-sun-o' : 'fa-moon-o'; if(elements.themeToggleIcon) elements.themeToggleIcon.className = `fa ${iconClass}`; if(elements.themeToggleBtnMobile) elements.themeToggleBtnMobile.querySelector('i').className = `fa ${iconClass} fa-fw mr-3`; };
             elements.themeToggleBtn.addEventListener('click', () => { const isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem(LS_KEYS.THEME, isDark ? 'dark' : 'light'); updateThemeIcon(isDark); });
             window.addEventListener('resize', renderPresetTabs);
+            elements.exportBtn.addEventListener('click', () => { const backupData = { state: localStorage.getItem(LS_KEYS.STATE), presets: localStorage.getItem(LS_KEYS.PRESETS) }; const timestamp = new Date().toISOString().slice(0, 10); downloadFile(`ainovel_backup_${timestamp}.json`, JSON.stringify(backupData), 'application/json'); });
+            elements.importBtn.addEventListener('click', () => elements.importFileInput.click());
+            elements.importFileInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { try { const data = JSON.parse(event.target.result); if (data.state && data.presets) { if (confirm('导入将覆盖当前所有故事和设置，确定继续吗？')) { localStorage.setItem(LS_KEYS.STATE, data.state); localStorage.setItem(LS_KEYS.PRESETS, data.presets); alert('导入成功！页面将自动刷新。'); window.location.reload(); } } else { alert('文件格式无效！'); } } catch (err) { alert('导入失败，文件解析错误！'); } finally { elements.importFileInput.value = ''; }}; reader.readAsText(file); });
+            elements.exportBtnMobile.addEventListener('click', createMobileButtonHandler(elements.exportBtn));
+            elements.importBtnMobile.addEventListener('click', createMobileButtonHandler(elements.importBtn));
         }
         function initializeApp() {