diff --git a/worker.js b/worker.js index 861cbf1..f08841d 100644 --- a/worker.js +++ b/worker.js @@ -110,7 +110,7 @@ const styles = ` --markdown-link-hover: #0550ae; --markdown-code-bg: #f6f8fa; --markdown-code-text: #24292e; - --markdown-code-block-bg: #f8f9fa; + --markdown-code-block-bg: #f6f8fa; --markdown-blockquote-bg: #f8f9fa; --markdown-blockquote-text: #6a737d; --markdown-blockquote-border: #3498db; @@ -137,7 +137,7 @@ const styles = ` --secondary-text: #aaa; --admin-panel-bg: #242424; --markdown-preview-bg: #2d2d2d; - --markdown-code-bg: #363636; + --markdown-code-bg: #2d333b; --markdown-blockquote-bg: #363636; --markdown-blockquote-border: #5dade2; --btn-secondary-bg: #4a4a4a; @@ -397,6 +397,11 @@ body { border: 1px solid var(--border-color); border-radius: 4px; line-height: 1.6; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-all; + white-space: pre-wrap; /* 保留换行符并自动换行 */ + max-width: 100%; /* 限制最大宽度 */ } .content input[type="checkbox"] { @@ -440,6 +445,8 @@ body { align-items: flex-start; margin: 0.5em 0; line-height: 1.6; + margin: 1em 0; /* 增加列表项间距 */ + display: block; /* 改为块级显示 */ } .content li label { @@ -452,6 +459,9 @@ body { .content p { margin: 1em 0; line-height: 1.6; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-all; } .expiry-info { @@ -1161,6 +1171,7 @@ body { font-weight: 600; color: #2c3e50; display: inline; + white-space: normal; /* 允许正常换行 */ } /* 代码块样式 */ @@ -1169,7 +1180,11 @@ body { padding: 1.5em; background: var(--markdown-code-bg); border-radius: 6px; - overflow-x: auto; + overflow-x: auto; /* 允许横向滚动 */ + white-space: pre-wrap; /* 允许自动换行 */ + word-wrap: break-word; /* 允许长单词换行 */ + word-break: break-all; /* 允许在任意字符处换行 */ + max-width: 100%; /* 限制最大宽度 */ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.9em; line-height: 1.6; @@ -1184,7 +1199,10 @@ body { border-radius: 0; color: inherit; font-size: 1em; - white-space: pre; + white-space: inherit; /* 继承父元素的 white-space 属性 */ + word-wrap: inherit; /* 继承父元素的 word-wrap 属性 */ + word-break: inherit; /* 继承父元素的 word-break 属性 */ + overflow-wrap: inherit; /* 继承父元素的 overflow-wrap 属性 */ } /* 标题样式 */ @@ -2673,7 +2691,7 @@ createApp({ const deleteTarget = ref(null); const isRefreshing = ref(false); // 添加刷新状态 const customId = ref(''); // 添加自定义ID输入框的值 - // 在 setup() 函数中添加新的状态变量 + // 添加新的状态变量 const allowTextUpload = ref(false); // 控制文本上传 const allowFileUpload = ref(false); // 控制文件上传 @@ -2682,6 +2700,8 @@ createApp({ const passwordTarget = ref(null); const newPassword = ref(''); const passwordError = ref(''); + // 添加自动保存的状态和方法 + const lastSavedContent = ref(''); // 添加最后保存的内容 // 在 setup() 函数中添加新的状态 const storageInfo = ref({ @@ -2928,28 +2948,26 @@ createApp({ // 检查是否为暗色主题 const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark'; - if (isDarkTheme) { - // 暗色主题样式 - previewContainer.style.background = 'var(--markdown-bg)'; - previewContainer.style.color = 'var(--markdown-text)'; - } - - // 代码高亮 - 两种主题都需要 - previewContainer.querySelectorAll('pre code').forEach((block) => { - hljs.highlightBlock(block); - const pre = block.parentElement; - if (pre) { - pre.style.background = isDarkTheme ? - 'var(--markdown-code-block-bg)' : - 'var(--markdown-code-bg)'; - } - if (isDarkTheme) { - block.style.color = 'var(--markdown-code-text)'; + // 设置预览容器的基本样式 + previewContainer.style.background = isDarkTheme ? 'var(--markdown-bg)' : 'var(--markdown-preview-bg)'; + previewContainer.style.color = isDarkTheme ? 'var(--markdown-text)' : 'var(--text-color)'; + + // 代码块样式处理 + previewContainer.querySelectorAll('pre').forEach(pre => { + // 直接设置 pre 元素的背景色 + pre.style.background = isDarkTheme ? 'var(--markdown-code-block-bg)' : 'var(--markdown-code-bg)'; + + // 处理内部的 code 元素 + const code = pre.querySelector('code'); + if (code) { + hljs.highlightBlock(code); + code.style.color = isDarkTheme ? 'var(--markdown-code-text)' : 'var(--text-color)'; + code.style.background = 'transparent'; // 确保 code 元素背景是透明的 } }); + // 其他 Markdown 元素的样式 if (isDarkTheme) { - // 其他暗色主题特定样式 previewContainer.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => { heading.style.color = 'var(--markdown-heading-text)'; }); @@ -2971,8 +2989,8 @@ createApp({ }); }); } - - // 渲染数学公式 - 两种主题都需要 + + // 渲染数学公式 renderMathInElement(previewContainer, { delimiters: [ {left: "$$", right: "$$", display: true}, @@ -3290,6 +3308,10 @@ createApp({ if (isAdmin.value) { await fetchShares(); } + + // 成功提交后清除保存的内容 + localStorage.removeItem('autosaved_content'); + lastSavedContent.value = ''; } catch (err) { error.value = err.message; } @@ -3841,6 +3863,65 @@ createApp({ } }; + // 在 setup() 函数中添加一个新的 computed 属性 + const themeIcon = computed(() => { + if (currentTheme.value === 'auto') return '🌗'; + return currentTheme.value === 'dark' ? '🌙' : '☀️'; + }); + + // 在 setup() 函数中添加一个计算属性来处理 GitHub 图标 + const githubIconSvg = computed(() => ({ + __html: '' + })); + + // 添加自动保存方法 + const autoSave = () => { + if (content.value && content.value !== lastSavedContent.value) { + try { + localStorage.setItem('autosaved_content', content.value); + lastSavedContent.value = content.value; + console.log('Content auto-saved:', new Date().toLocaleString()); + } catch (e) { + console.error('Auto-save failed:', e); + } + } + }; + + // 在组件挂载时检查是否有自动保存的内容 + onMounted(() => { + // 检查是否有保存的内容 + const savedContent = localStorage.getItem('autosaved_content'); + if (savedContent) { + // 如果有保存的内容，提示用户是否恢复 + if (confirm('发现未保存的内容，是否恢复？')) { + content.value = savedContent; + } + // 无论是否恢复，都清除保存的内容 + localStorage.removeItem('autosaved_content'); + } + + // 添加页面关闭前的保存事件 + window.addEventListener('beforeunload', saveContent); + }); + + // 在组件卸载时清理事件监听 + onUnmounted(() => { + window.removeEventListener('beforeunload', saveContent); + }); + + // 添加保存方法 + const saveContent = () => { + if (content.value && content.value !== lastSavedContent.value) { + try { + localStorage.setItem('autosaved_content', content.value); + lastSavedContent.value = content.value; + console.log('Content saved:', new Date().toLocaleString()); + } catch (e) { + console.error('Save failed:', e); + } + } + }; + return { activeTab, content, @@ -3922,6 +4003,10 @@ createApp({ currentQRUrl, showQR, downloadQR, + themeIcon, + githubIconSvg, + lastSavedContent, + saveContent, }; }, @@ -3931,18 +4016,16 @@ createApp({ - - - + title="Visit GitHub" + v-html="githubIconSvg.__html">
@@ -4834,6 +4917,12 @@ createApp({ }); }); + // 在 shareAppScript 中添加 themeIcon 计算属性 + const themeIcon = computed(() => { + if (currentTheme.value === 'auto') return '🌗'; + return currentTheme.value === 'dark' ? '🌙' : '☀️'; + }); + return { content, isMarkdown, @@ -4855,9 +4944,10 @@ createApp({ cancelEdit, editMarkdown, editPreview, - copyContent, // 添加这行 + copyContent, currentTheme, // 添加暗色主题相关变量 toggleTheme, + themeIcon, // 添加这行 }; } }).mount('#app'); @@ -4886,10 +4976,8 @@ const html = ` - - - + title="Visit GitHub" + v-html="githubIconSvg.__html">