+
+ )
+ }
+
+ const renderPreviewArticle = (articleRef?: React.Ref请在 Electron 中运行以使用文件系统功能。
+
+ {closePromptTabId && closePromptTab ? (
+
+ {tabs.map((t) => (
+
+
+
+ )
+}
diff --git a/src/renderer/src/EditorPane.tsx b/src/renderer/src/EditorPane.tsx
new file mode 100644
index 0000000..f369391
--- /dev/null
+++ b/src/renderer/src/EditorPane.tsx
@@ -0,0 +1,370 @@
+import * as React from 'react'
+import { EditorSelection } from '@codemirror/state'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
+import { EditorState } from '@codemirror/state'
+import {
+ EditorView,
+ highlightActiveLine,
+ keymap,
+ lineNumbers,
+ placeholder
+} from '@codemirror/view'
+
+export type MarkdownEditorHandle = {
+ applyAction: (id: string) => void | Promise setClosePromptTabId(null)}
+ >
+
+ ) : null}
+
+ {textPrompt ? (
+ e.stopPropagation()}
+ >
+
+ 关闭标签
++ 「{tabLabel(closePromptTab)}」有未保存的更改，是否保存？ +
+
+
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ textPrompt.resolve(null)
+ setTextPrompt(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {imageInsert ? (
+ e.stopPropagation()}
+ >
+
+ {textPrompt.title}
+ setTextPromptInput(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault() + textPrompt.resolve(textPromptInput) + setTextPrompt(null) + } + if (e.key === 'Escape') { + e.preventDefault() + textPrompt.resolve(null) + setTextPrompt(null) + } + }} + autoFocus + /> +
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ imageInsert.resolve(null)
+ setImageInsert(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {colorPicker ? (
+ e.stopPropagation()}
+ >
+
+ 插入图片
+支持网络地址或本地图片文件（Markdown 中保存为 file:// 链接）。
+ +
+
+
+
+
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ colorPicker.resolve(null)
+ setColorPicker(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {histCtxMenu ? (
+ e.stopPropagation()}
+ >
+
+ 文字颜色
+
+ 取色器
+ setColorHexInput(e.target.value.toLowerCase())}
+ aria-label="色谱"
+ />
+
+
+
+ {COLOR_SWATCH_ROWS.map((row, ri) => (
+
+
+ {row.map((hex) => (
+
+ ))}
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+ ) : null}
+
+ {ctxMenu ? (
+ e.stopPropagation()}
+ >
+
+ {ctxMenu.kind === 'file' ? (
+
+ ) : null}
+
+ ) : null}
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!sidebarHidden ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+
+ {(viewMode === 'edit' || viewMode === 'hybrid') && activeTab ? (
+
+
+
+
+ ) : (
+
+ {renderPreviewArticle(readPreviewArticleRef)}
+
+
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+
+ {viewMode === 'edit' ? (
+ activeTab ? (
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+
+ {viewMode === 'hybrid' ? (
+ activeTab ? (
+
+
+ ) : (
+
+
+
+
+
+
+ {hybridLinePulse ? (
+
+ ) : null}
+ {renderPreviewArticle(hybridPreviewArticleRef)}
+
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+ \n
\n')
+ break
+ case 'footnote':
+ insertLines(view, '[^1]\n\n[^1]: 脚注内容\n')
+ break
+ default:
+ break
+ }
+ } catch (e) {
+ console.error('[MyReader] toolbar action failed', id, e)
+ }
+}
+
+export const EditorPane = React.forwardRef标题
\n内容\n
+
+ )
+}
diff --git a/src/renderer/src/OutlinePanel.tsx b/src/renderer/src/OutlinePanel.tsx
new file mode 100644
index 0000000..cc98e50
--- /dev/null
+++ b/src/renderer/src/OutlinePanel.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react'
+import type { OutlineItem } from './markdown'
+import { buildOutlineTree, collectBranchIds, type OutlineTreeNode } from './outlineTree'
+
+type Props = {
+ items: OutlineItem[]
+ onSelect: (item: OutlineItem) => void
+}
+
+export function OutlinePanel({ items, onSelect }: Props): React.ReactElement {
+ const tree = React.useMemo(() => buildOutlineTree(items), [items])
+ const branchIds = React.useMemo(() => collectBranchIds(tree), [tree])
+ const [collapsed, setCollapsed] = React.useState
+ {BUTTONS.map((b) => (
+
+ ))}
+
+
+ {hasChildren ? (
+
+ ) : (
+
+ )}
+
+
+ {hasChildren && !isCollapsed ? (
+ - {node.children.map(renderNode)}
当前文档没有标题
+ } + + const collapsedCount = collapsed.size + const branchCount = branchIds.length + + return ( +
+
+ )
+}
diff --git a/src/renderer/src/PreviewArticle.tsx b/src/renderer/src/PreviewArticle.tsx
new file mode 100644
index 0000000..b1094d9
--- /dev/null
+++ b/src/renderer/src/PreviewArticle.tsx
@@ -0,0 +1,230 @@
+import * as React from 'react'
+import mermaid from 'mermaid'
+
+let mermaidInited = false
+let mermaidSeq = 0
+
+function ensureMermaid(): void {
+ if (mermaidInited) return
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: 'neutral',
+ securityLevel: 'loose',
+ fontFamily: 'inherit',
+ flowchart: { useMaxWidth: true, htmlLabels: true },
+ sequence: { useMaxWidth: true, wrap: true },
+ er: { useMaxWidth: true },
+ gantt: { useMaxWidth: true }
+ })
+ mermaidInited = true
+}
+
+function mermaidSourceFromWrap(wrap: HTMLElement): string {
+ const enc = wrap.getAttribute('data-mermaid-src')
+ if (enc) {
+ try {
+ return decodeURIComponent(enc)
+ } catch {
+ /* fall through */
+ }
+ }
+ const pre = wrap.querySelector
+
+ 大纲
+ {branchCount > 0 ? (
+
+ {' '}
+ · {branchCount - collapsedCount}/{branchCount} 已展开
+
+ ) : null}
+
+
+
+
+ - {tree.map(renderNode)}
${escapeHtml(msg)}\n\n${escapeHtml(source.slice(0, 2000))}`
+ console.warn("[Huangzhijun's Reader] mermaid render failed", err)
+ }
+ }
+}
+
+function escapeHtml(s: string): string {
+ return s
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+}
+
+function isMarkdownPath(p: string): boolean {
+ return /\.(md|markdown|mdown|mkd)$/i.test(p)
+}
+
+function linkHref(anchor: HTMLAnchorElement): string | null {
+ return anchor.getAttribute('href') ?? anchor.getAttribute('data-md-href')
+}
+
+type Props = {
+ html: string
+ articleRef?: React.Ref${body}${escaped}${langLabel}
`
+}
+
+const purifyOpts: Parameters${highlighted}${md.utils.escapeHtml(raw.slice(0, 8000))}
` + } + } catch (e) { + console.warn('[MyReader] markdown render failed', e) + return `${md.utils.escapeHtml(input.slice(0, 8000))}`
+ }
+}
+
+export type OutlineItem = {
+ level: number
+ text: string
+ displayText: string
+ /** 0-based source line */
+ line: number
+ slug: string
+}
+
+function outlineDisplayText(raw: string): string {
+ let s = raw
+ s = s.replace(/\*\*([^*]+)\*\*/g, '$1')
+ s = s.replace(/\*([^*]+)\*/g, '$1')
+ s = s.replace(/`([^`]+)`/g, '$1')
+ s = s.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+ s = s.replace(/<[^>]+>/g, '')
+ s = s.replace(/\s+/g, ' ').trim()
+ return s
+}
+
+/** 分隔线、纯符号等不应出现在大纲。 */
+export function isValidOutlineHeading(displayText: string, rawLine: string): boolean {
+ const t = displayText.trim()
+ if (!t || t === '(空标题)') return false
+ if (/^[-—–_=~*`#>\s]+$/.test(t)) return false
+ const body = rawLine.replace(/^#{1,6}\s*/, '').trim()
+ if (/^[-—–_=~*\s]+$/.test(body)) return false
+ return true
+}
+
+/** 仅从 ATX `#` 标题提取；`line` 为 0-based。 */
+export function extractOutline(src: string): OutlineItem[] {
+ const input = typeof src === 'string' ? src : ''
+ const lines = input.split(/\r?\n/)
+ const out: OutlineItem[] = []
+ for (let i = 0; i < lines.length; i++) {
+ const raw = lines[i] ?? ''
+ const m = /^(#{1,6})\s+(.+)$/.exec(raw)
+ if (!m) continue
+ const level = m[1]!.length
+ const text = m[2]!.trim()
+ const displayText = outlineDisplayText(text) || '(空标题)'
+ if (!isValidOutlineHeading(displayText, raw)) continue
+ out.push({
+ level,
+ text,
+ displayText,
+ line: i,
+ slug: slugForLine(i)
+ })
+ }
+ return out
+}
+
+export type SourceLineRegion = {
+ line: number
+ lineEnd: number
+ el: HTMLElement
+}
+
+export function collectSourceLineRegions(article: HTMLElement): SourceLineRegion[] {
+ const nodes = article.querySelectorAll