代码初始化
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
out
|
||||
release
|
||||
dist
|
||||
.DS_Store
|
||||
*.log
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
Generated
+9
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="openjdk-24" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/MyReader.iml" filepath="$PROJECT_DIR$/.idea/MyReader.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@@ -0,0 +1,57 @@
|
||||
# Huangzhijun's Reader
|
||||
|
||||
本地 Markdown 阅读与编辑（Electron + Vite + React + CodeMirror 6）。侧重「长文阅读体验」与「轻量编辑」：多标签、会话恢复、侧栏文件树与大纲、阅读/编辑/分栏三模式、外观与行距可调。
|
||||
|
||||
## 设计思路
|
||||
|
||||
1. **进程与数据**
|
||||
主进程负责文件系统对话框、读写目录、路径解析与窗口生命周期；预加载脚本通过 `contextBridge` 暴露受限 API，渲染进程不开启 `nodeIntegration`，在隔离前提下使用本地文件能力。
|
||||
|
||||
2. **渲染与 Markdown**
|
||||
使用 `markdown-it` + 插件（表格、Mermaid 围栏等）生成 HTML，再经 DOMPurify 白名单消毒后注入预览。相对路径图片在渲染阶段结合当前文件路径解析为 `file://` URL；开发环境下页面为 `http(s)` 源时，通过主窗口 **`webSecurity: false`** 允许从页面加载本地 `file://` 图片（典型 Electron 本地阅读器权衡）。
|
||||
|
||||
3. **阅读体验**
|
||||
背景与字体通过 `html` 上的 `data-bg` / `data-font` 切换 CSS 变量，预览区单独使用 `--preview-bg`、`--font-preview` 等，与侧栏/工具栏解耦。阅读行距使用 `--preview-line-height`，与字体选择独立。Mermaid 图在源码中写入 `data-mermaid-src`，便于分栏宽度变化后恢复文本并重绘。
|
||||
|
||||
4. **分栏同步**
|
||||
编辑器与预览共享文档字符串；预览 DOM 为块级元素打上源行号，用于大纲跳转与分栏滚动对齐。
|
||||
|
||||
5. **持久化**
|
||||
标签内容与未保存状态、当前背景/字体等写入 `localStorage`（会话键 `myreader-session-v1`）；打开过的 Markdown 路径记入「历史」列表，与真实文件删除无关。
|
||||
|
||||
## 使用步骤（简述）
|
||||
|
||||
1. **安装依赖**：在项目根目录执行 `npm install`。
|
||||
2. **开发运行**：`npm run dev`，在 Electron 窗口内使用。
|
||||
3. **打开文档**：工具栏「打开」、侧栏「打开文件夹」后点击 `.md` 文件，或从历史记录点选。
|
||||
4. **视图**：工具栏「视图」或使用 `Ctrl+E` 在 **编辑 / 阅读 / 分栏** 间切换。
|
||||
5. **外观**：工具栏右侧 **阅读行距**、**字体**、**背景**（含「Kindle 纸感」等）按需调整。
|
||||
6. **图片**：编辑模式下用工具栏插入本地图片；保存路径为 `file://` 或相对路径时，阅读/分栏预览会按上文规则解析显示。
|
||||
7. **图表**：在 Markdown 中使用 ` ```mermaid ` 围栏编写 Mermaid 语法即可在预览中渲染。
|
||||
8. **构建与打包**：`npm run build` 输出到 `out/`；`npm run dist` 构建并生成 Windows 安装包至 `release/`。
|
||||
|
||||
## 脚本
|
||||
|
||||
| 命令 | 说明 |
|
||||
|------|------|
|
||||
| `npm run dev` | 开发调试 |
|
||||
| `npm run build` | 构建到 `out/` |
|
||||
| `npm run typecheck` | TypeScript 检查 |
|
||||
| `npm run dist` | 构建并打 Windows 安装包（`release/`） |
|
||||
|
||||
## 快捷键（与应用菜单一致）
|
||||
|
||||
- `Ctrl+O` 打开，`Ctrl+S` 保存，`Ctrl+Shift+S` 另存为
|
||||
- `Ctrl+T` 新标签，`Ctrl+W` 关闭标签
|
||||
- `Ctrl+Tab` / `Ctrl+Shift+Tab` 切换标签
|
||||
- `Ctrl+E`：在 **编辑 / 阅读 / 分栏** 三种视图间循环切换
|
||||
|
||||
侧栏可隐藏、可拖动右边缘调整宽度；阅读模式下可拖动预览区右缘调整正文最大宽度。编辑、分栏模式下顶部有 **Markdown 格式工具栏**。侧栏文件列表 **右键**：重命名（文件/文件夹）、删除（仅文件）。
|
||||
|
||||
## 技术栈摘要
|
||||
|
||||
Electron 35、electron-vite、React 19、CodeMirror 6、markdown-it、highlight.js、DOMPurify、mermaid。
|
||||
|
||||
---
|
||||
|
||||
仓库 npm 包名仍为 `myreader`；安装后显示名与窗口标题为 **Huangzhijun's Reader**。
|
||||
@@ -0,0 +1,29 @@
|
||||
import { resolve } from 'node:path'
|
||||
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
main: {
|
||||
plugins: [externalizeDepsPlugin()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
index: resolve(__dirname, 'electron/main.ts')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
preload: {
|
||||
plugins: [externalizeDepsPlugin()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
index: resolve(__dirname, 'electron/preload.ts')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
renderer: {
|
||||
plugins: [react()]
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
export type DirEntry = {
|
||||
name: string
|
||||
path: string
|
||||
kind: 'file' | 'dir'
|
||||
}
|
||||
|
||||
export type ListDirResult = {
|
||||
entries: DirEntry[]
|
||||
error?: string
|
||||
}
|
||||
|
||||
export type OpenFileResult = {
|
||||
canceled: boolean
|
||||
path?: string
|
||||
content?: string
|
||||
}
|
||||
|
||||
export type SaveDialogResult = {
|
||||
canceled: boolean
|
||||
path?: string
|
||||
}
|
||||
|
||||
export type OpenFolderResult = {
|
||||
canceled: boolean
|
||||
path?: string
|
||||
}
|
||||
|
||||
/** `url` 为可写入 Markdown 的 `file://` 绝对地址（已编码）。 */
|
||||
export type OpenImageResult = {
|
||||
canceled: boolean
|
||||
url?: string
|
||||
path?: string
|
||||
}
|
||||
@@ -0,0 +1,368 @@
|
||||
import { existsSync } from 'node:fs'
|
||||
import { readdir, rename, readFile, writeFile, unlink } from 'node:fs/promises'
|
||||
import { dirname, join, resolve, normalize, isAbsolute } from 'node:path'
|
||||
import { pathToFileURL, fileURLToPath } from 'node:url'
|
||||
import {
|
||||
app,
|
||||
BrowserWindow,
|
||||
dialog,
|
||||
ipcMain,
|
||||
Menu,
|
||||
nativeImage,
|
||||
shell,
|
||||
type MenuItemConstructorOptions,
|
||||
type NativeImage
|
||||
} from 'electron'
|
||||
import type {
|
||||
DirEntry,
|
||||
ListDirResult,
|
||||
OpenFileResult,
|
||||
OpenFolderResult,
|
||||
OpenImageResult,
|
||||
SaveDialogResult
|
||||
} from './ipc-types.js'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = dirname(__filename)
|
||||
|
||||
const MD_EXT = new Set(['.md', '.markdown', '.mdown', '.mkd'])
|
||||
|
||||
function getPreloadPath(): string {
|
||||
const fromMainDir = join(__dirname, '..', 'preload')
|
||||
const fromAppRoot = join(app.getAppPath(), 'out', 'preload')
|
||||
const candidates = ['index.mjs', 'index.cjs', 'index.js']
|
||||
for (const base of [fromMainDir, fromAppRoot]) {
|
||||
for (const name of candidates) {
|
||||
const p = resolve(base, name)
|
||||
if (existsSync(p)) return p
|
||||
}
|
||||
}
|
||||
return resolve(fromAppRoot, 'index.mjs')
|
||||
}
|
||||
|
||||
function getRendererIndexHtml(): string {
|
||||
const fromMain = join(__dirname, '..', 'renderer', 'index.html')
|
||||
if (existsSync(fromMain)) return fromMain
|
||||
return join(app.getAppPath(), 'out', 'renderer', 'index.html')
|
||||
}
|
||||
|
||||
function resolveAppIconPath(): string | undefined {
|
||||
const candidates = [
|
||||
join(__dirname, '../../resources/app-icon.png'),
|
||||
join(app.getAppPath(), 'resources', 'app-icon.png'),
|
||||
join(process.cwd(), 'resources', 'app-icon.png')
|
||||
]
|
||||
for (const p of candidates) {
|
||||
if (existsSync(p)) return p
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
function isMarkdownFile(name: string): boolean {
|
||||
const lower = name.toLowerCase()
|
||||
const dot = lower.lastIndexOf('.')
|
||||
if (dot < 0) return false
|
||||
return MD_EXT.has(lower.slice(dot))
|
||||
}
|
||||
|
||||
/** 将 Markdown 内链（相对/绝对/file://）解析为本地绝对路径；外链原样返回。 */
|
||||
function resolveMarkdownLinkHref(baseFilePath: string, href: string): string {
|
||||
let raw = href.trim()
|
||||
const hashIdx = raw.indexOf('#')
|
||||
if (hashIdx >= 0) raw = raw.slice(0, hashIdx)
|
||||
const queryIdx = raw.indexOf('?')
|
||||
if (queryIdx >= 0) raw = raw.slice(0, queryIdx)
|
||||
raw = raw.trim()
|
||||
if (!raw) return ''
|
||||
if (/^https?:\/\//i.test(raw) || /^mailto:/i.test(raw) || /^tel:/i.test(raw)) return raw
|
||||
if (raw.startsWith('file://')) {
|
||||
try {
|
||||
return normalize(fileURLToPath(raw))
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
let decoded = raw
|
||||
try {
|
||||
decoded = decodeURIComponent(raw)
|
||||
} catch {
|
||||
decoded = raw
|
||||
}
|
||||
if (isAbsolute(decoded)) return normalize(decoded)
|
||||
return normalize(resolve(dirname(baseFilePath), decoded))
|
||||
}
|
||||
|
||||
ipcMain.handle(
|
||||
'myreader:resolve-relative-path',
|
||||
(_evt, baseFilePath: string, href: string): string => {
|
||||
if (typeof baseFilePath !== 'string' || typeof href !== 'string') return ''
|
||||
if (!baseFilePath.trim()) return ''
|
||||
return resolveMarkdownLinkHref(baseFilePath, href)
|
||||
}
|
||||
)
|
||||
|
||||
ipcMain.handle('myreader:open-external', async (_evt, url: string): Promise<void> => {
|
||||
if (typeof url !== 'string') return
|
||||
const u = url.trim()
|
||||
if (/^https?:\/\//i.test(u) || /^mailto:/i.test(u) || /^tel:/i.test(u)) {
|
||||
await shell.openExternal(u)
|
||||
}
|
||||
})
|
||||
|
||||
async function listDirectoryImpl(dirPath: string): Promise<ListDirResult> {
|
||||
const normalized = normalize(dirPath)
|
||||
try {
|
||||
const dirents = await readdir(normalized, { withFileTypes: true })
|
||||
const entries: DirEntry[] = []
|
||||
for (const d of dirents) {
|
||||
if (d.name.startsWith('.')) continue
|
||||
const full = join(normalized, d.name)
|
||||
if (d.isDirectory()) {
|
||||
entries.push({ name: d.name, path: full, kind: 'dir' })
|
||||
} else if (d.isFile() && isMarkdownFile(d.name)) {
|
||||
entries.push({ name: d.name, path: full, kind: 'file' })
|
||||
}
|
||||
}
|
||||
entries.sort((a, b) => {
|
||||
if (a.kind !== b.kind) return a.kind === 'dir' ? -1 : 1
|
||||
return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
|
||||
})
|
||||
return { entries }
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e)
|
||||
return { entries: [], error: msg }
|
||||
}
|
||||
}
|
||||
|
||||
function sendMenu(win: BrowserWindow | null, action: string): void {
|
||||
const w = win ?? BrowserWindow.getFocusedWindow()
|
||||
w?.webContents.send('myreader:menu', action)
|
||||
}
|
||||
|
||||
function buildMenu(): Menu {
|
||||
const template: MenuItemConstructorOptions[] = [
|
||||
{
|
||||
label: '文件',
|
||||
submenu: [
|
||||
{ label: '新建标签', accelerator: 'CmdOrCtrl+T', click: () => sendMenu(null, 'tab-new') },
|
||||
{ label: '打开…', accelerator: 'CmdOrCtrl+O', click: () => sendMenu(null, 'file-open') },
|
||||
{ label: '保存', accelerator: 'CmdOrCtrl+S', click: () => sendMenu(null, 'file-save') },
|
||||
{ label: '另存为…', accelerator: 'CmdOrCtrl+Shift+S', click: () => sendMenu(null, 'file-save-as') },
|
||||
{ type: 'separator' },
|
||||
{ label: '关闭标签', accelerator: 'CmdOrCtrl+W', click: () => sendMenu(null, 'tab-close') },
|
||||
{ type: 'separator' },
|
||||
{ label: '退出', accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Alt+F4', role: 'quit' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
submenu: [
|
||||
{ label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' },
|
||||
{ label: '重做', accelerator: process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Y', role: 'redo' },
|
||||
{ type: 'separator' },
|
||||
{ label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },
|
||||
{ label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },
|
||||
{ label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' },
|
||||
{ label: '全选', accelerator: 'CmdOrCtrl+A', role: 'selectAll' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '视图',
|
||||
submenu: [
|
||||
{ label: '切换视图模式', accelerator: 'CmdOrCtrl+E', click: () => sendMenu(null, 'toggle-read') },
|
||||
{ label: '下一个标签', accelerator: 'Ctrl+Tab', click: () => sendMenu(null, 'tab-next') },
|
||||
{ label: '上一个标签', accelerator: 'Ctrl+Shift+Tab', click: () => sendMenu(null, 'tab-prev') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '帮助',
|
||||
submenu: [{ label: "关于 Huangzhijun's Reader", click: () => sendMenu(null, 'help-about') }]
|
||||
}
|
||||
]
|
||||
return Menu.buildFromTemplate(template)
|
||||
}
|
||||
|
||||
function createWindow(): BrowserWindow {
|
||||
const preloadPath = getPreloadPath()
|
||||
const iconPath = resolveAppIconPath()
|
||||
let icon: NativeImage | undefined
|
||||
if (iconPath) {
|
||||
try {
|
||||
icon = nativeImage.createFromPath(iconPath)
|
||||
if (icon.isEmpty()) icon = undefined
|
||||
} catch {
|
||||
icon = undefined
|
||||
}
|
||||
}
|
||||
const win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
minWidth: 800,
|
||||
minHeight: 560,
|
||||
title: "Huangzhijun's Reader",
|
||||
...(icon ? { icon } : {}),
|
||||
webPreferences: {
|
||||
preload: preloadPath,
|
||||
contextIsolation: true,
|
||||
sandbox: false,
|
||||
nodeIntegration: false,
|
||||
webSecurity: false
|
||||
}
|
||||
})
|
||||
|
||||
win.on('close', (e) => {
|
||||
const w = win as BrowserWindow & { __myreaderForceClose?: boolean }
|
||||
if (w.__myreaderForceClose) return
|
||||
e.preventDefault()
|
||||
win.webContents.send('myreader:request-close')
|
||||
})
|
||||
|
||||
if (process.env.ELECTRON_RENDERER_URL) {
|
||||
void win.loadURL(process.env.ELECTRON_RENDERER_URL)
|
||||
} else {
|
||||
void win.loadFile(getRendererIndexHtml())
|
||||
}
|
||||
return win
|
||||
}
|
||||
|
||||
ipcMain.handle('myreader:open-file-dialog', async (): Promise<OpenFileResult> => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
const { canceled, filePaths } = win
|
||||
? await dialog.showOpenDialog(win, {
|
||||
properties: ['openFile'],
|
||||
filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd', 'txt'] }]
|
||||
})
|
||||
: await dialog.showOpenDialog({
|
||||
properties: ['openFile'],
|
||||
filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd', 'txt'] }]
|
||||
})
|
||||
if (canceled || !filePaths?.[0]) return { canceled: true }
|
||||
const path = filePaths[0]
|
||||
const content = await readFile(path, 'utf8')
|
||||
return { canceled: false, path, content }
|
||||
})
|
||||
|
||||
ipcMain.handle('myreader:open-folder-dialog', async (): Promise<OpenFolderResult> => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
const opts = { properties: ['openDirectory' as const] }
|
||||
const { canceled, filePaths } = win
|
||||
? await dialog.showOpenDialog(win, opts)
|
||||
: await dialog.showOpenDialog(opts)
|
||||
if (canceled || !filePaths?.[0]) return { canceled: true }
|
||||
return { canceled: false, path: filePaths[0] }
|
||||
})
|
||||
|
||||
ipcMain.handle('myreader:open-image-dialog', async (event): Promise<OpenImageResult> => {
|
||||
const win =
|
||||
BrowserWindow.fromWebContents(event.sender) ?? BrowserWindow.getFocusedWindow()
|
||||
const opts = {
|
||||
properties: ['openFile' as const],
|
||||
filters: [
|
||||
{
|
||||
name: '图片',
|
||||
extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif']
|
||||
}
|
||||
]
|
||||
}
|
||||
if (win) {
|
||||
win.focus()
|
||||
win.show()
|
||||
}
|
||||
const { canceled, filePaths } = win
|
||||
? await dialog.showOpenDialog(win, opts)
|
||||
: await dialog.showOpenDialog(opts)
|
||||
if (canceled || !filePaths?.[0]) return { canceled: true }
|
||||
const path = filePaths[0]
|
||||
return { canceled: false, path, url: pathToFileURL(path).href }
|
||||
})
|
||||
|
||||
ipcMain.handle(
|
||||
'myreader:save-dialog',
|
||||
async (_evt, defaultPath?: string): Promise<SaveDialogResult> => {
|
||||
const win = BrowserWindow.getFocusedWindow()
|
||||
const { canceled, filePath } = win
|
||||
? await dialog.showSaveDialog(win, {
|
||||
defaultPath,
|
||||
filters: [{ name: 'Markdown', extensions: ['md'] }]
|
||||
})
|
||||
: await dialog.showSaveDialog({
|
||||
defaultPath,
|
||||
filters: [{ name: 'Markdown', extensions: ['md'] }]
|
||||
})
|
||||
if (canceled || !filePath) return { canceled: true }
|
||||
return { canceled: false, path: filePath }
|
||||
}
|
||||
)
|
||||
|
||||
ipcMain.handle('myreader:read-file', async (_evt, filePath: string): Promise<string> => {
|
||||
return readFile(filePath, 'utf8')
|
||||
})
|
||||
|
||||
ipcMain.handle(
|
||||
'myreader:write-file',
|
||||
async (_evt, filePath: string, content: string): Promise<void> => {
|
||||
await writeFile(filePath, content, 'utf8')
|
||||
}
|
||||
)
|
||||
|
||||
ipcMain.handle('myreader:list-directory', async (_evt, dirPath: string): Promise<ListDirResult> => {
|
||||
return listDirectoryImpl(dirPath)
|
||||
})
|
||||
|
||||
ipcMain.handle('myreader:parent-directory', (_evt, dirPath: string): string => {
|
||||
return dirname(dirPath)
|
||||
})
|
||||
|
||||
ipcMain.handle('myreader:default-directory', async (): Promise<string> => {
|
||||
return app.getPath('documents')
|
||||
})
|
||||
|
||||
ipcMain.handle('myreader:delete-file', async (_evt, filePath: string): Promise<void> => {
|
||||
if (typeof filePath !== 'string' || filePath.length === 0) {
|
||||
throw new Error('Invalid path')
|
||||
}
|
||||
await unlink(filePath)
|
||||
})
|
||||
|
||||
ipcMain.handle(
|
||||
'myreader:rename-path',
|
||||
async (_evt, oldPath: string, newName: string): Promise<{ newPath: string }> => {
|
||||
if (typeof oldPath !== 'string' || typeof newName !== 'string') {
|
||||
throw new Error('Invalid arguments')
|
||||
}
|
||||
const clean = newName.replace(/[/\\]/g, '').trim()
|
||||
if (!clean) {
|
||||
throw new Error('Empty name')
|
||||
}
|
||||
const parent = dirname(oldPath)
|
||||
const newPath = join(parent, clean)
|
||||
if (normalize(newPath) === normalize(oldPath)) {
|
||||
return { newPath: oldPath }
|
||||
}
|
||||
await rename(oldPath, newPath)
|
||||
return { newPath }
|
||||
}
|
||||
)
|
||||
|
||||
ipcMain.on('myreader:allow-close', (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if (!win) return
|
||||
;(win as BrowserWindow & { __myreaderForceClose?: boolean }).__myreaderForceClose = true
|
||||
win.close()
|
||||
})
|
||||
|
||||
app.whenReady().then(() => {
|
||||
Menu.setApplicationMenu(buildMenu())
|
||||
createWindow()
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,74 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
import type {
|
||||
ListDirResult,
|
||||
OpenFileResult,
|
||||
OpenFolderResult,
|
||||
OpenImageResult,
|
||||
SaveDialogResult
|
||||
} from './ipc-types.js'
|
||||
|
||||
export interface MyReaderApi {
|
||||
openFileDialog: () => Promise<OpenFileResult>
|
||||
openFolderDialog: () => Promise<OpenFolderResult>
|
||||
openImageDialog: () => Promise<OpenImageResult>
|
||||
saveFileDialog: (defaultPath?: string) => Promise<SaveDialogResult>
|
||||
readFile: (filePath: string) => Promise<string>
|
||||
writeFile: (filePath: string, content: string) => Promise<void>
|
||||
listDirectory: (dirPath: string) => Promise<ListDirResult>
|
||||
parentDirectory: (dirPath: string) => Promise<string>
|
||||
/** 相对当前 Markdown 文件解析内链 href → 绝对路径（外链原样返回） */
|
||||
resolveRelativePath: (baseFilePath: string, href: string) => Promise<string>
|
||||
openExternal: (url: string) => Promise<void>
|
||||
defaultDirectory: () => Promise<string>
|
||||
deleteFile: (filePath: string) => Promise<void>
|
||||
renamePath: (oldPath: string, newName: string) => Promise<{ newPath: string }>
|
||||
allowClose: () => void
|
||||
onRequestClose: (handler: () => void) => () => void
|
||||
onMenuAction: (handler: (action: string) => void) => () => void
|
||||
}
|
||||
|
||||
const api: MyReaderApi = {
|
||||
openFileDialog: () => ipcRenderer.invoke('myreader:open-file-dialog'),
|
||||
openFolderDialog: () => ipcRenderer.invoke('myreader:open-folder-dialog'),
|
||||
openImageDialog: () => ipcRenderer.invoke('myreader:open-image-dialog'),
|
||||
saveFileDialog: (defaultPath?: string) => ipcRenderer.invoke('myreader:save-dialog', defaultPath),
|
||||
readFile: (filePath: string) => ipcRenderer.invoke('myreader:read-file', filePath),
|
||||
writeFile: (filePath: string, content: string) =>
|
||||
ipcRenderer.invoke('myreader:write-file', filePath, content),
|
||||
listDirectory: (dirPath: string) => ipcRenderer.invoke('myreader:list-directory', dirPath),
|
||||
parentDirectory: (dirPath: string) => ipcRenderer.invoke('myreader:parent-directory', dirPath),
|
||||
resolveRelativePath: (baseFilePath: string, href: string) =>
|
||||
ipcRenderer.invoke('myreader:resolve-relative-path', baseFilePath, href),
|
||||
openExternal: (url: string) => ipcRenderer.invoke('myreader:open-external', url),
|
||||
defaultDirectory: () => ipcRenderer.invoke('myreader:default-directory'),
|
||||
deleteFile: (filePath: string) => ipcRenderer.invoke('myreader:delete-file', filePath),
|
||||
renamePath: (oldPath: string, newName: string) =>
|
||||
ipcRenderer.invoke('myreader:rename-path', oldPath, newName),
|
||||
allowClose: () => {
|
||||
ipcRenderer.send('myreader:allow-close')
|
||||
},
|
||||
onRequestClose: (handler: () => void) => {
|
||||
const listener = (): void => {
|
||||
handler()
|
||||
}
|
||||
ipcRenderer.on('myreader:request-close', listener)
|
||||
return () => {
|
||||
ipcRenderer.removeListener('myreader:request-close', listener)
|
||||
}
|
||||
},
|
||||
onMenuAction: (handler: (action: string) => void) => {
|
||||
const listener = (_e: unknown, action: string): void => {
|
||||
handler(action)
|
||||
}
|
||||
ipcRenderer.on('myreader:menu', listener)
|
||||
return () => {
|
||||
ipcRenderer.removeListener('myreader:menu', listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
contextBridge.exposeInMainWorld('myreader', api)
|
||||
} catch (e) {
|
||||
console.error('[MyReader] preload contextBridge failed', e)
|
||||
}
|
||||
Generated
+7231
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"name": "myreader",
|
||||
"productName": "Huangzhijun's Reader",
|
||||
"version": "0.1.0",
|
||||
"description": "Huangzhijun's Reader — local Markdown reader and editor (Electron + React)",
|
||||
"main": "./out/main/index.js",
|
||||
"type": "module",
|
||||
"config": {
|
||||
"electron_mirror": "https://npmmirror.com/mirrors/electron/"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "electron-vite dev",
|
||||
"build": "electron-vite build",
|
||||
"preview": "electron-vite preview",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"dist": "npm run build && electron-builder --win"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.8.0",
|
||||
"@codemirror/lang-markdown": "^6.3.2",
|
||||
"@codemirror/language": "^6.11.0",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/view": "^6.36.4",
|
||||
"dompurify": "^3.2.5",
|
||||
"highlight.js": "^11.11.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-multimd-table": "^4.2.3",
|
||||
"mermaid": "^11.15.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.15.3",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"electron": "^35.1.5",
|
||||
"electron-builder": "^26.0.12",
|
||||
"electron-vite": "^3.1.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.4"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.myreader.app",
|
||||
"productName": "Huangzhijun's Reader",
|
||||
"asar": true,
|
||||
"directories": {
|
||||
"output": "release"
|
||||
},
|
||||
"files": [
|
||||
"out/**/*",
|
||||
"package.json",
|
||||
"resources/**/*"
|
||||
],
|
||||
"electronDownload": {
|
||||
"mirror": "https://npmmirror.com/mirrors/electron/"
|
||||
},
|
||||
"win": {
|
||||
"icon": "resources/app-icon.png",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"x64"
|
||||
]
|
||||
}
|
||||
],
|
||||
"artifactName": "${productName}-${version}-${arch}.${ext}"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"shortcutName": "Huangzhijun's Reader",
|
||||
"perMachine": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Huangzhijun's Reader</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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<void>
|
||||
}
|
||||
|
||||
type Props = {
|
||||
mountKey: string
|
||||
value: string
|
||||
onChange: (next: string) => void
|
||||
gotoLine?: { line: number; seq: number } | null
|
||||
showLineNumbers?: boolean
|
||||
/** In Electron, `window.prompt` is unreliable; use an in-app prompt from the host. */
|
||||
requestText?: (title: string, defaultValue: string) => Promise<string | null>
|
||||
onViewReady?: (view: EditorView | null) => void
|
||||
/** 分栏：根据光标所在行在编辑器可滚动内容中的垂直比例，对齐阅读区提示条。 */
|
||||
onHybridCursorLine?: (line: number) => void
|
||||
requestImageDetails?: () => Promise<{ url: string; alt: string } | null>
|
||||
requestColor?: () => Promise<string | null>
|
||||
}
|
||||
|
||||
function getMainSelection(view: EditorView): { from: number; to: number } {
|
||||
const r = view.state.selection.main
|
||||
return { from: r.from, to: r.to }
|
||||
}
|
||||
|
||||
function wrap(view: EditorView, left: string, right: string): void {
|
||||
const { from, to } = getMainSelection(view)
|
||||
const sel = view.state.sliceDoc(from, to)
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: left + sel + right },
|
||||
selection: EditorSelection.range(from + left.length, from + left.length + sel.length)
|
||||
})
|
||||
view.focus()
|
||||
}
|
||||
|
||||
function insertAtCursor(view: EditorView, text: string): void {
|
||||
const { from, to } = getMainSelection(view)
|
||||
view.dispatch({
|
||||
changes: { from, to, insert: text },
|
||||
selection: EditorSelection.cursor(from + text.length)
|
||||
})
|
||||
view.focus()
|
||||
}
|
||||
|
||||
function insertLines(view: EditorView, text: string): void {
|
||||
insertAtCursor(view, text)
|
||||
}
|
||||
|
||||
function linePrefixOnMainLine(view: EditorView, prefix: string): void {
|
||||
const pos = view.state.selection.main.head
|
||||
const line = view.state.doc.lineAt(pos)
|
||||
const lineText = line.text
|
||||
const hashes = /^#+\s/.exec(lineText)?.[0] ?? ''
|
||||
let rest = lineText
|
||||
if (hashes) rest = lineText.slice(hashes.length)
|
||||
const newLine = prefix + rest
|
||||
view.dispatch({
|
||||
changes: { from: line.from, to: line.to, insert: newLine },
|
||||
selection: EditorSelection.cursor(line.from + newLine.length)
|
||||
})
|
||||
view.focus()
|
||||
}
|
||||
|
||||
function escapeMarkdownLinkFragment(s: string): string {
|
||||
return s.replace(/\\/g, '\\\\').replace(/\[/g, '\\[').replace(/\]/g, '\\]')
|
||||
}
|
||||
|
||||
function sanitizeInlineColor(c: string): string {
|
||||
const t = c.trim()
|
||||
if (/^#[0-9a-fA-F]{3}$/.test(t)) {
|
||||
const r = t[1]!
|
||||
const g = t[2]!
|
||||
const b = t[3]!
|
||||
return `#${r}${r}${g}${g}${b}${b}`
|
||||
}
|
||||
if (/^#[0-9a-fA-F]{6}$/.test(t) || /^#[0-9a-fA-F]{8}$/.test(t)) return t.toLowerCase()
|
||||
if (/^rgba?\(\s*[\d.\s%,]+\s*\)$/.test(t)) return t
|
||||
if (/^hsla?\(\s*[\d.\s%,deg]+\s*\)$/.test(t)) return t
|
||||
if (/^[\w-]{1,40}$/.test(t)) return t
|
||||
return '#333333'
|
||||
}
|
||||
|
||||
function sanitizeLinkUrl(url: string): string {
|
||||
const t = url.trim() || 'https://'
|
||||
if (/^file:/i.test(t)) return `<${t.replace(/[<>]/g, '')}>`
|
||||
return t.replace(/\)/g, '%29')
|
||||
}
|
||||
|
||||
type ActionDeps = {
|
||||
requestText: (title: string, def: string) => Promise<string | null>
|
||||
requestImageDetails?: () => Promise<{ url: string; alt: string } | null>
|
||||
requestColor?: () => Promise<string | null>
|
||||
}
|
||||
|
||||
async function applyMarkdownAction(view: EditorView, id: string, deps: ActionDeps): Promise<void> {
|
||||
const { requestText, requestImageDetails, requestColor } = deps
|
||||
try {
|
||||
switch (id) {
|
||||
case 'bold':
|
||||
wrap(view, '**', '**')
|
||||
break
|
||||
case 'italic':
|
||||
wrap(view, '*', '*')
|
||||
break
|
||||
case 'strike':
|
||||
wrap(view, '~~', '~~')
|
||||
break
|
||||
case 'code':
|
||||
wrap(view, '`', '`')
|
||||
break
|
||||
case 'codeBlock':
|
||||
insertLines(view, '\n```\n\n```\n')
|
||||
break
|
||||
case 'link': {
|
||||
const url = await requestText('链接地址', 'https://')
|
||||
if (url === null) return
|
||||
const { from, to } = getMainSelection(view)
|
||||
const rawLabel = view.state.sliceDoc(from, to) || '链接文字'
|
||||
const label = escapeMarkdownLinkFragment(rawLabel)
|
||||
const insert = `[${label}](${sanitizeLinkUrl(url)})`
|
||||
view.dispatch({
|
||||
changes: { from, to, insert },
|
||||
selection: EditorSelection.cursor(from + insert.length)
|
||||
})
|
||||
view.focus()
|
||||
break
|
||||
}
|
||||
case 'image': {
|
||||
if (requestImageDetails) {
|
||||
const det = await requestImageDetails()
|
||||
if (!det?.url?.trim()) return
|
||||
const alt = (det.alt ?? '图片').trim() || '图片'
|
||||
insertAtCursor(
|
||||
view,
|
||||
`)})`
|
||||
)
|
||||
break
|
||||
}
|
||||
const url = await requestText('图片地址', 'https://')
|
||||
if (url === null) return
|
||||
const rawAlt = await requestText('替代文字', '图片')
|
||||
if (rawAlt === null) return
|
||||
const alt = escapeMarkdownLinkFragment(rawAlt || '图片')
|
||||
insertAtCursor(view, `})`)
|
||||
break
|
||||
}
|
||||
case 'h1':
|
||||
linePrefixOnMainLine(view, '# ')
|
||||
break
|
||||
case 'h2':
|
||||
linePrefixOnMainLine(view, '## ')
|
||||
break
|
||||
case 'h3':
|
||||
linePrefixOnMainLine(view, '### ')
|
||||
break
|
||||
case 'h4':
|
||||
linePrefixOnMainLine(view, '#### ')
|
||||
break
|
||||
case 'h5':
|
||||
linePrefixOnMainLine(view, '##### ')
|
||||
break
|
||||
case 'h6':
|
||||
linePrefixOnMainLine(view, '###### ')
|
||||
break
|
||||
case 'ul':
|
||||
linePrefixOnMainLine(view, '- ')
|
||||
break
|
||||
case 'ol':
|
||||
linePrefixOnMainLine(view, '1. ')
|
||||
break
|
||||
case 'task':
|
||||
linePrefixOnMainLine(view, '- [ ] ')
|
||||
break
|
||||
case 'quote':
|
||||
linePrefixOnMainLine(view, '> ')
|
||||
break
|
||||
case 'hr':
|
||||
insertLines(view, '\n---\n')
|
||||
break
|
||||
case 'table':
|
||||
insertLines(
|
||||
view,
|
||||
'\n| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n| | | |\n'
|
||||
)
|
||||
break
|
||||
case 'mark':
|
||||
wrap(view, '<mark>', '</mark>')
|
||||
break
|
||||
case 'color': {
|
||||
if (requestColor) {
|
||||
const c = await requestColor()
|
||||
if (c === null || !c.trim()) return
|
||||
const color = sanitizeInlineColor(c)
|
||||
wrap(view, `<span style="color:${color}">`, '</span>')
|
||||
break
|
||||
}
|
||||
const c = await requestText('颜色（如 #e11 或 red）', '#dc2626')
|
||||
if (c === null || !c.trim()) return
|
||||
const color = sanitizeInlineColor(c)
|
||||
wrap(view, `<span style="color:${color}">`, '</span>')
|
||||
break
|
||||
}
|
||||
case 'sup':
|
||||
wrap(view, '<sup>', '</sup>')
|
||||
break
|
||||
case 'sub':
|
||||
wrap(view, '<sub>', '</sub>')
|
||||
break
|
||||
case 'kbd':
|
||||
wrap(view, '<kbd>', '</kbd>')
|
||||
break
|
||||
case 'details':
|
||||
insertLines(view, '\n<details>\n<summary>标题</summary>\n内容\n</details>\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<MarkdownEditorHandle, Props>(
|
||||
function EditorPane(
|
||||
{
|
||||
mountKey,
|
||||
value,
|
||||
onChange,
|
||||
gotoLine,
|
||||
showLineNumbers = true,
|
||||
requestText,
|
||||
onViewReady,
|
||||
onHybridCursorLine,
|
||||
requestImageDetails,
|
||||
requestColor
|
||||
}: Props,
|
||||
ref
|
||||
): React.ReactElement {
|
||||
const hostRef = React.useRef<HTMLDivElement | null>(null)
|
||||
const viewRef = React.useRef<EditorView | null>(null)
|
||||
const onChangeRef = React.useRef(onChange)
|
||||
onChangeRef.current = onChange
|
||||
|
||||
const requestTextRef = React.useRef(requestText)
|
||||
requestTextRef.current = requestText
|
||||
|
||||
const onViewReadyRef = React.useRef(onViewReady)
|
||||
onViewReadyRef.current = onViewReady
|
||||
|
||||
const onHybridCursorLineRef = React.useRef(onHybridCursorLine)
|
||||
onHybridCursorLineRef.current = onHybridCursorLine
|
||||
|
||||
const requestImageDetailsRef = React.useRef(requestImageDetails)
|
||||
requestImageDetailsRef.current = requestImageDetails
|
||||
|
||||
const requestColorRef = React.useRef(requestColor)
|
||||
requestColorRef.current = requestColor
|
||||
|
||||
React.useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
applyAction: async (id: string) => {
|
||||
const view = viewRef.current
|
||||
if (!view) return
|
||||
const rt =
|
||||
requestTextRef.current ??
|
||||
((title: string, def: string) =>
|
||||
Promise.resolve<string | null>(window.prompt(title, def)))
|
||||
await applyMarkdownAction(view, id, {
|
||||
requestText: rt,
|
||||
requestImageDetails: requestImageDetailsRef.current,
|
||||
requestColor: requestColorRef.current
|
||||
})
|
||||
}
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
const host = hostRef.current
|
||||
if (!host) return
|
||||
host.replaceChildren()
|
||||
|
||||
const view = new EditorView({
|
||||
parent: host,
|
||||
state: EditorState.create({
|
||||
doc: value,
|
||||
extensions: [
|
||||
history(),
|
||||
markdown(),
|
||||
...(showLineNumbers ? [lineNumbers()] : []),
|
||||
highlightActiveLine(),
|
||||
keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
|
||||
placeholder('在此编辑 Markdown…'),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.updateListener.of((u) => {
|
||||
if (u.docChanged) {
|
||||
onChangeRef.current(u.state.doc.toString())
|
||||
}
|
||||
}),
|
||||
EditorView.updateListener.of((u) => {
|
||||
if (!onHybridCursorLineRef.current) return
|
||||
if (!u.selectionSet && !u.focusChanged && !u.docChanged) return
|
||||
const pos = u.state.selection.main.head
|
||||
const line = u.state.doc.lineAt(pos)
|
||||
onHybridCursorLineRef.current(line.number - 1)
|
||||
}),
|
||||
EditorView.theme({
|
||||
'&': {
|
||||
height: '100%',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'var(--font-ui, system-ui, sans-serif)'
|
||||
},
|
||||
'.cm-scroller': { fontFamily: 'inherit' },
|
||||
'.cm-content': { paddingBlock: '12px' }
|
||||
})
|
||||
]
|
||||
})
|
||||
})
|
||||
viewRef.current = view
|
||||
onViewReadyRef.current?.(view)
|
||||
return () => {
|
||||
onViewReadyRef.current?.(null)
|
||||
view.destroy()
|
||||
viewRef.current = null
|
||||
host.replaceChildren()
|
||||
}
|
||||
}, [mountKey, showLineNumbers])
|
||||
|
||||
React.useEffect(() => {
|
||||
const view = viewRef.current
|
||||
if (!view) return
|
||||
const cur = view.state.doc.toString()
|
||||
if (cur !== value) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: cur.length, insert: value },
|
||||
selection: { anchor: 0 },
|
||||
scrollIntoView: true
|
||||
})
|
||||
}
|
||||
}, [value, mountKey])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!gotoLine) return
|
||||
const view = viewRef.current
|
||||
if (!view) return
|
||||
const lineNo = gotoLine.line + 1
|
||||
if (lineNo < 1 || lineNo > view.state.doc.lines) return
|
||||
const line = view.state.doc.line(lineNo)
|
||||
view.dispatch({ selection: { anchor: line.from }, scrollIntoView: true })
|
||||
}, [gotoLine])
|
||||
|
||||
return <div className="editor-host" ref={hostRef} />
|
||||
}
|
||||
)
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react'
|
||||
import type { MarkdownEditorHandle } from './EditorPane'
|
||||
|
||||
const BUTTONS: { id: string; label: string }[] = [
|
||||
{ id: 'h1', label: 'H1' },
|
||||
{ id: 'h2', label: 'H2' },
|
||||
{ id: 'h3', label: 'H3' },
|
||||
{ id: 'h4', label: 'H4' },
|
||||
{ id: 'h5', label: 'H5' },
|
||||
{ id: 'h6', label: 'H6' },
|
||||
{ id: 'bold', label: '加粗' },
|
||||
{ id: 'italic', label: '斜体' },
|
||||
{ id: 'strike', label: '删除线' },
|
||||
{ id: 'code', label: '行内代码' },
|
||||
{ id: 'codeBlock', label: '代码块' },
|
||||
{ id: 'link', label: '链接' },
|
||||
{ id: 'image', label: '图片' },
|
||||
{ id: 'ul', label: '无序列表' },
|
||||
{ id: 'ol', label: '有序列表' },
|
||||
{ id: 'task', label: '任务' },
|
||||
{ id: 'quote', label: '引用' },
|
||||
{ id: 'hr', label: '分隔线' },
|
||||
{ id: 'table', label: '表格' },
|
||||
{ id: 'mark', label: '高亮' },
|
||||
{ id: 'color', label: '颜色' },
|
||||
{ id: 'sup', label: '上标' },
|
||||
{ id: 'sub', label: '下标' },
|
||||
{ id: 'kbd', label: '按键' },
|
||||
{ id: 'details', label: '折叠' },
|
||||
{ id: 'footnote', label: '脚注' }
|
||||
]
|
||||
|
||||
type Props = {
|
||||
editorRef: React.RefObject<MarkdownEditorHandle | null>
|
||||
}
|
||||
|
||||
export function MarkdownFormatToolbar({ editorRef }: Props): React.ReactElement {
|
||||
return (
|
||||
<div className="md-format-wrap">
|
||||
<div className="md-format-bar">
|
||||
{BUTTONS.map((b) => (
|
||||
<button
|
||||
key={b.id}
|
||||
type="button"
|
||||
title={b.label}
|
||||
onClick={() => void editorRef.current?.applyAction(b.id)}
|
||||
>
|
||||
{b.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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<Set<string>>(() => new Set())
|
||||
|
||||
React.useEffect(() => {
|
||||
setCollapsed(new Set())
|
||||
}, [items])
|
||||
|
||||
const toggleBranch = React.useCallback((id: string): void => {
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const expandAll = React.useCallback((): void => {
|
||||
setCollapsed(new Set())
|
||||
}, [])
|
||||
|
||||
const collapseAll = React.useCallback((): void => {
|
||||
setCollapsed(new Set(branchIds))
|
||||
}, [branchIds])
|
||||
|
||||
const renderNode = (node: OutlineTreeNode): React.ReactElement => {
|
||||
const hasChildren = node.children.length > 0
|
||||
const isCollapsed = collapsed.has(node.id)
|
||||
|
||||
return (
|
||||
<li key={node.id} className="outline-tree-node">
|
||||
<div className="outline-tree-row">
|
||||
{hasChildren ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`outline-fold-btn${isCollapsed ? ' is-collapsed' : ''}`}
|
||||
aria-expanded={!isCollapsed}
|
||||
aria-label={isCollapsed ? '展开子标题' : '收起子标题'}
|
||||
title={isCollapsed ? '展开' : '收起'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
toggleBranch(node.id)
|
||||
}}
|
||||
>
|
||||
{isCollapsed ? '▸' : '▾'}
|
||||
</button>
|
||||
) : (
|
||||
<span className="outline-fold-spacer" aria-hidden />
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={`outline-tree-title outline-tree-title--h${node.level}`}
|
||||
title={node.text || node.displayText}
|
||||
onClick={() => onSelect(node)}
|
||||
>
|
||||
{node.displayText}
|
||||
</button>
|
||||
</div>
|
||||
{hasChildren && !isCollapsed ? (
|
||||
<ul className="outline-tree">{node.children.map(renderNode)}</ul>
|
||||
) : null}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return <p className="outline-empty">当前文档没有标题</p>
|
||||
}
|
||||
|
||||
const collapsedCount = collapsed.size
|
||||
const branchCount = branchIds.length
|
||||
|
||||
return (
|
||||
<div className="outline-panel-wrap">
|
||||
<div className="outline-toolbar">
|
||||
<span className="outline-toolbar-title">
|
||||
大纲
|
||||
{branchCount > 0 ? (
|
||||
<span className="outline-toolbar-meta">
|
||||
{' '}
|
||||
· {branchCount - collapsedCount}/{branchCount} 已展开
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<button type="button" className="outline-toolbar-btn" onClick={expandAll} disabled={collapsedCount === 0}>
|
||||
全部展开
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="outline-toolbar-btn"
|
||||
onClick={collapseAll}
|
||||
disabled={branchCount === 0 || collapsedCount === branchCount}
|
||||
>
|
||||
全部收起
|
||||
</button>
|
||||
</div>
|
||||
<ul className="outline-tree outline-tree--root">{tree.map(renderNode)}</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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<HTMLElement>('pre.mermaid')
|
||||
return pre?.textContent ?? ''
|
||||
}
|
||||
|
||||
async function renderMermaidIn(root: HTMLElement, isStale: () => boolean): Promise<void> {
|
||||
const wraps = root.querySelectorAll<HTMLElement>('.md-diagram-wrap')
|
||||
if (wraps.length === 0) return
|
||||
|
||||
ensureMermaid()
|
||||
|
||||
for (const wrap of wraps) {
|
||||
if (isStale()) return
|
||||
|
||||
const source = mermaidSourceFromWrap(wrap).trim()
|
||||
if (!source) continue
|
||||
|
||||
delete wrap.dataset.mermaidRendered
|
||||
|
||||
let host = wrap.querySelector<HTMLElement>('.mermaid-render-host')
|
||||
const pre = wrap.querySelector<HTMLElement>('pre.mermaid')
|
||||
if (pre) {
|
||||
host = document.createElement('div')
|
||||
host.className = 'mermaid-render-host'
|
||||
pre.replaceWith(host)
|
||||
} else if (!host) {
|
||||
host = document.createElement('div')
|
||||
host.className = 'mermaid-render-host'
|
||||
wrap.appendChild(host)
|
||||
}
|
||||
|
||||
host.innerHTML = '<div class="mermaid-placeholder" aria-hidden></div>'
|
||||
host.removeAttribute('data-mermaid-error')
|
||||
|
||||
const id = `mr-mmd-${++mermaidSeq}`
|
||||
try {
|
||||
const { svg, bindFunctions } = await mermaid.render(id, source)
|
||||
if (isStale()) return
|
||||
if (!root.isConnected || !wrap.isConnected) return
|
||||
host.innerHTML = svg
|
||||
bindFunctions?.(host)
|
||||
wrap.dataset.mermaidRendered = '1'
|
||||
} catch (err) {
|
||||
if (isStale()) return
|
||||
const msg = err instanceof Error ? err.message : String(err)
|
||||
host.setAttribute('data-mermaid-error', msg)
|
||||
host.innerHTML = `<pre class="mermaid-error">${escapeHtml(msg)}\n\n${escapeHtml(source.slice(0, 2000))}</pre>`
|
||||
console.warn("[Huangzhijun's Reader] mermaid render failed", err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
return s
|
||||
.replace(/&/g, '&')
|
||||
.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<HTMLElement>
|
||||
baseFilePath?: string | null
|
||||
resolveRelativePath?: (baseFilePath: string, href: string) => Promise<string>
|
||||
onOpenMarkdown?: (absolutePath: string, anchorId?: string) => void | Promise<void>
|
||||
onOpenExternal?: (url: string) => void | Promise<void>
|
||||
}
|
||||
|
||||
export function PreviewArticle({
|
||||
html,
|
||||
articleRef,
|
||||
baseFilePath,
|
||||
resolveRelativePath,
|
||||
onOpenMarkdown,
|
||||
onOpenExternal
|
||||
}: Props): React.ReactElement {
|
||||
const innerRef = React.useRef<HTMLElement | null>(null)
|
||||
const renderGenRef = React.useRef(0)
|
||||
const baseFilePathRef = React.useRef(baseFilePath)
|
||||
baseFilePathRef.current = baseFilePath
|
||||
const resolveRef = React.useRef(resolveRelativePath)
|
||||
resolveRef.current = resolveRelativePath
|
||||
const openMdRef = React.useRef(onOpenMarkdown)
|
||||
openMdRef.current = onOpenMarkdown
|
||||
const openExtRef = React.useRef(onOpenExternal)
|
||||
openExtRef.current = onOpenExternal
|
||||
|
||||
const setRef = React.useCallback(
|
||||
(el: HTMLElement | null) => {
|
||||
innerRef.current = el
|
||||
if (typeof articleRef === 'function') articleRef(el)
|
||||
else if (articleRef && typeof articleRef === 'object' && 'current' in articleRef) {
|
||||
;(articleRef as React.MutableRefObject<HTMLElement | null>).current = el
|
||||
}
|
||||
},
|
||||
[articleRef]
|
||||
)
|
||||
|
||||
const scrollToAnchor = React.useCallback((root: HTMLElement, anchorId: string): void => {
|
||||
const id = decodeURIComponent(anchorId)
|
||||
if (!id) return
|
||||
let el: Element | null = null
|
||||
try {
|
||||
el = root.querySelector(`#${CSS.escape(id)}`)
|
||||
} catch {
|
||||
el = root.querySelector(`#${id}`)
|
||||
}
|
||||
if (!el) el = document.getElementById(id)
|
||||
el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, [])
|
||||
|
||||
const handleClickCapture = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
|
||||
if (e.defaultPrevented || e.button !== 0) return
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
|
||||
|
||||
const root = innerRef.current
|
||||
if (!root) return
|
||||
|
||||
const anchor = (e.target as Element | null)?.closest('a')
|
||||
if (!anchor || !root.contains(anchor)) return
|
||||
|
||||
const href = linkHref(anchor)
|
||||
if (!href) return
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
void (async () => {
|
||||
if (href.startsWith('#')) {
|
||||
scrollToAnchor(root, href.slice(1))
|
||||
return
|
||||
}
|
||||
|
||||
const hashIdx = href.indexOf('#')
|
||||
const pathPart = (hashIdx >= 0 ? href.slice(0, hashIdx) : href).trim()
|
||||
const anchorId = hashIdx >= 0 ? href.slice(hashIdx + 1) : ''
|
||||
if (!pathPart) {
|
||||
if (anchorId) scrollToAnchor(root, anchorId)
|
||||
return
|
||||
}
|
||||
|
||||
if (/^https?:\/\//i.test(pathPart) || /^mailto:/i.test(pathPart) || /^tel:/i.test(pathPart)) {
|
||||
await openExtRef.current?.(pathPart)
|
||||
return
|
||||
}
|
||||
|
||||
const base = baseFilePathRef.current
|
||||
if (!base) {
|
||||
window.alert('请先保存当前文件，再打开文内相对链接。')
|
||||
return
|
||||
}
|
||||
|
||||
const resolve = resolveRef.current
|
||||
if (!resolve) return
|
||||
|
||||
const resolved = await resolve(base, pathPart)
|
||||
if (!resolved) return
|
||||
|
||||
if (/^https?:\/\//i.test(resolved) || /^mailto:/i.test(resolved) || /^tel:/i.test(resolved)) {
|
||||
await openExtRef.current?.(resolved)
|
||||
return
|
||||
}
|
||||
|
||||
if (isMarkdownPath(resolved)) {
|
||||
await openMdRef.current?.(resolved, anchorId || undefined)
|
||||
return
|
||||
}
|
||||
|
||||
window.alert(`暂不支持打开该类型链接：${resolved}`)
|
||||
})()
|
||||
}, [scrollToAnchor])
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
const root = innerRef.current
|
||||
if (!root) return
|
||||
|
||||
const gen = ++renderGenRef.current
|
||||
root.innerHTML = html
|
||||
|
||||
void renderMermaidIn(root, () => gen !== renderGenRef.current).catch((err) => {
|
||||
console.warn("[Huangzhijun's Reader] mermaid batch failed", err)
|
||||
})
|
||||
|
||||
return () => {
|
||||
renderGenRef.current += 1
|
||||
}
|
||||
}, [html])
|
||||
|
||||
return (
|
||||
<article ref={setRef} className="preview" onClickCapture={handleClickCapture} />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,493 @@
|
||||
/* 背景（12）：颜色变量，挂到 document.documentElement data-bg */
|
||||
:root[data-bg='0'] {
|
||||
--app-bg: #f3f4f6;
|
||||
--panel-bg: #e5e7eb;
|
||||
--text: #111827;
|
||||
--muted: #6b7280;
|
||||
--border: #d1d5db;
|
||||
--accent: #2563eb;
|
||||
--btn-bg: #ffffff;
|
||||
--hover: rgba(0, 0, 0, 0.06);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #111827;
|
||||
--preview-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
|
||||
--code-bg: #f9fafb;
|
||||
}
|
||||
:root[data-bg='1'] {
|
||||
--app-bg: #f4ecd8;
|
||||
--panel-bg: #e8dfc8;
|
||||
--text: #3e3428;
|
||||
--muted: #7a6a58;
|
||||
--border: #d2c7b2;
|
||||
--accent: #8b4513;
|
||||
--btn-bg: #fffaf0;
|
||||
--hover: rgba(62, 52, 40, 0.08);
|
||||
--preview-bg: #fffaf0;
|
||||
--preview-text: #3e3428;
|
||||
--preview-shadow: 0 8px 24px rgba(62, 52, 40, 0.12);
|
||||
--code-bg: #f0e6d6;
|
||||
}
|
||||
:root[data-bg='2'] {
|
||||
--app-bg: #0f172a;
|
||||
--panel-bg: #111c33;
|
||||
--text: #e5e7eb;
|
||||
--muted: #94a3b8;
|
||||
--border: #1e293b;
|
||||
--accent: #38bdf8;
|
||||
--btn-bg: #1e293b;
|
||||
--hover: rgba(148, 163, 184, 0.12);
|
||||
--preview-bg: #111827;
|
||||
--preview-text: #e5e7eb;
|
||||
--preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||||
--code-bg: #0b1224;
|
||||
}
|
||||
:root[data-bg='3'] {
|
||||
--app-bg: #102216;
|
||||
--panel-bg: #143220;
|
||||
--text: #e7f7ec;
|
||||
--muted: #8fb39a;
|
||||
--border: #1f3b2a;
|
||||
--accent: #4ade80;
|
||||
--btn-bg: #163527;
|
||||
--hover: rgba(74, 222, 128, 0.12);
|
||||
--preview-bg: #132a1f;
|
||||
--preview-text: #e7f7ec;
|
||||
--preview-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
|
||||
--code-bg: #0d1f16;
|
||||
}
|
||||
:root[data-bg='4'] {
|
||||
--app-bg: linear-gradient(160deg, #e0f2fe 0%, #eef2ff 45%, #fdf4ff 100%);
|
||||
--panel-bg: rgba(255, 255, 255, 0.72);
|
||||
--text: #0f172a;
|
||||
--muted: #475569;
|
||||
--border: #cbd5f5;
|
||||
--accent: #4f46e5;
|
||||
--btn-bg: rgba(255, 255, 255, 0.9);
|
||||
--hover: rgba(79, 70, 229, 0.1);
|
||||
--preview-bg: rgba(255, 255, 255, 0.92);
|
||||
--preview-text: #0f172a;
|
||||
--preview-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
|
||||
--code-bg: #f8fafc;
|
||||
}
|
||||
:root[data-bg='5'] {
|
||||
--app-bg: #fafafa;
|
||||
--panel-bg: #ffffff;
|
||||
--text: #111111;
|
||||
--muted: #737373;
|
||||
--border: #e5e5e5;
|
||||
--accent: #db2777;
|
||||
--btn-bg: #ffffff;
|
||||
--hover: rgba(219, 39, 119, 0.08);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #111111;
|
||||
--preview-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||||
--code-bg: #f5f5f5;
|
||||
}
|
||||
:root[data-bg='6'] {
|
||||
--app-bg: #121212;
|
||||
--panel-bg: #1a1a1a;
|
||||
--text: #fafafa;
|
||||
--muted: #a3a3a3;
|
||||
--border: #262626;
|
||||
--accent: #f97316;
|
||||
--btn-bg: #171717;
|
||||
--hover: rgba(249, 115, 22, 0.15);
|
||||
--preview-bg: #0a0a0a;
|
||||
--preview-text: #fafafa;
|
||||
--preview-shadow: 0 0 0 1px #262626;
|
||||
--code-bg: #000000;
|
||||
}
|
||||
:root[data-bg='7'] {
|
||||
--app-bg: #f5f3ff;
|
||||
--panel-bg: #ede9fe;
|
||||
--text: #312e81;
|
||||
--muted: #6d28d9;
|
||||
--border: #ddd6fe;
|
||||
--accent: #7c3aed;
|
||||
--btn-bg: #ffffff;
|
||||
--hover: rgba(124, 58, 237, 0.1);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #312e81;
|
||||
--preview-shadow: 0 10px 32px rgba(49, 46, 129, 0.12);
|
||||
--code-bg: #f5f3ff;
|
||||
}
|
||||
:root[data-bg='8'] {
|
||||
--app-bg: #1c1917;
|
||||
--panel-bg: #292524;
|
||||
--text: #fafaf9;
|
||||
--muted: #a8a29e;
|
||||
--border: #44403c;
|
||||
--accent: #fbbf24;
|
||||
--btn-bg: #292524;
|
||||
--hover: rgba(251, 191, 36, 0.12);
|
||||
--preview-bg: #1c1917;
|
||||
--preview-text: #fafaf9;
|
||||
--preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
|
||||
--code-bg: #0c0a09;
|
||||
}
|
||||
:root[data-bg='9'] {
|
||||
--app-bg: #1a1033;
|
||||
--panel-bg: #221547;
|
||||
--text: #f3e8ff;
|
||||
--muted: #c4b5fd;
|
||||
--border: #3b2a6b;
|
||||
--accent: #a78bfa;
|
||||
--btn-bg: #2a185f;
|
||||
--hover: rgba(167, 139, 250, 0.15);
|
||||
--preview-bg: #120c24;
|
||||
--preview-text: #f3e8ff;
|
||||
--preview-shadow: 0 14px 48px rgba(0, 0, 0, 0.55);
|
||||
--code-bg: #0f0820;
|
||||
}
|
||||
:root[data-bg='10'] {
|
||||
--app-bg: #e8f4fc;
|
||||
--panel-bg: #d7eaf8;
|
||||
--text: #0c4a6e;
|
||||
--muted: #0369a1;
|
||||
--border: #bae6fd;
|
||||
--accent: #0284c7;
|
||||
--btn-bg: #f0f9ff;
|
||||
--hover: rgba(2, 132, 199, 0.12);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #0c4a6e;
|
||||
--preview-shadow: 0 10px 28px rgba(12, 74, 110, 0.1);
|
||||
--code-bg: #e0f2fe;
|
||||
}
|
||||
:root[data-bg='11'] {
|
||||
--app-bg: #fdf2f4;
|
||||
--panel-bg: #fce7eb;
|
||||
--text: #881337;
|
||||
--muted: #9f1239;
|
||||
--border: #fbcfe8;
|
||||
--accent: #db2777;
|
||||
--btn-bg: #fff1f2;
|
||||
--hover: rgba(219, 39, 119, 0.1);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #881337;
|
||||
--preview-shadow: 0 10px 28px rgba(136, 19, 55, 0.08);
|
||||
--code-bg: #ffe4e6;
|
||||
}
|
||||
:root[data-bg='12'] {
|
||||
--app-bg: #18181b;
|
||||
--panel-bg: #27272a;
|
||||
--text: #fafafa;
|
||||
--muted: #a1a1aa;
|
||||
--border: #3f3f46;
|
||||
--accent: #22d3ee;
|
||||
--btn-bg: #27272a;
|
||||
--hover: rgba(34, 211, 238, 0.12);
|
||||
--preview-bg: #18181b;
|
||||
--preview-text: #fafafa;
|
||||
--preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
--code-bg: #09090b;
|
||||
}
|
||||
:root[data-bg='13'] {
|
||||
--app-bg: #ecfeff;
|
||||
--panel-bg: #cffafe;
|
||||
--text: #0e7490;
|
||||
--muted: #0891b2;
|
||||
--border: #a5f3fc;
|
||||
--accent: #0d9488;
|
||||
--btn-bg: #f0fdfa;
|
||||
--hover: rgba(13, 148, 136, 0.12);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #134e4a;
|
||||
--preview-shadow: 0 10px 28px rgba(8, 145, 178, 0.1);
|
||||
--code-bg: #ccfbf1;
|
||||
}
|
||||
:root[data-bg='14'] {
|
||||
--app-bg: #faf5f0;
|
||||
--panel-bg: #ede4d8;
|
||||
--text: #422006;
|
||||
--muted: #92400e;
|
||||
--border: #d6c4b0;
|
||||
--accent: #b45309;
|
||||
--btn-bg: #fffbeb;
|
||||
--hover: rgba(180, 83, 9, 0.1);
|
||||
--preview-bg: #fffbeb;
|
||||
--preview-text: #422006;
|
||||
--preview-shadow: 0 10px 28px rgba(66, 32, 6, 0.08);
|
||||
--code-bg: #fef3c7;
|
||||
}
|
||||
:root[data-bg='15'] {
|
||||
--app-bg: #f0fdfa;
|
||||
--panel-bg: #ccfbf1;
|
||||
--text: #115e59;
|
||||
--muted: #0f766e;
|
||||
--border: #99f6e4;
|
||||
--accent: #0d9488;
|
||||
--btn-bg: #ecfdf5;
|
||||
--hover: rgba(13, 148, 136, 0.12);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #134e4a;
|
||||
--preview-shadow: 0 10px 28px rgba(17, 94, 89, 0.08);
|
||||
--code-bg: #d1fae5;
|
||||
}
|
||||
:root[data-bg='16'] {
|
||||
--app-bg: #f5f3ff;
|
||||
--panel-bg: #ede9fe;
|
||||
--text: #4c1d95;
|
||||
--muted: #6d28d9;
|
||||
--border: #ddd6fe;
|
||||
--accent: #7c3aed;
|
||||
--btn-bg: #faf5ff;
|
||||
--hover: rgba(124, 58, 237, 0.1);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #4c1d95;
|
||||
--preview-shadow: 0 10px 28px rgba(76, 29, 149, 0.08);
|
||||
--code-bg: #ede9fe;
|
||||
}
|
||||
:root[data-bg='17'] {
|
||||
--app-bg: #faf8f5;
|
||||
--panel-bg: #f3efe8;
|
||||
--text: #44403c;
|
||||
--muted: #78716c;
|
||||
--border: #e7e5e4;
|
||||
--accent: #d97706;
|
||||
--btn-bg: #ffffff;
|
||||
--hover: rgba(217, 119, 6, 0.1);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #44403c;
|
||||
--preview-shadow: 0 10px 28px rgba(68, 64, 60, 0.08);
|
||||
--code-bg: #f5f5f4;
|
||||
}
|
||||
:root[data-bg='18'] {
|
||||
--app-bg: #1c1917;
|
||||
--panel-bg: #292524;
|
||||
--text: #fafaf9;
|
||||
--muted: #a8a29e;
|
||||
--border: #44403c;
|
||||
--accent: #eab308;
|
||||
--btn-bg: #292524;
|
||||
--hover: rgba(234, 179, 8, 0.12);
|
||||
--preview-bg: #1c1917;
|
||||
--preview-text: #fafaf9;
|
||||
--preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||||
--code-bg: #0c0a09;
|
||||
}
|
||||
:root[data-bg='19'] {
|
||||
--app-bg: #fdf4f8;
|
||||
--panel-bg: #fce7f3;
|
||||
--text: #831843;
|
||||
--muted: #be185d;
|
||||
--border: #fbcfe8;
|
||||
--accent: #db2777;
|
||||
--btn-bg: #fff1f2;
|
||||
--hover: rgba(219, 39, 119, 0.1);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #831843;
|
||||
--preview-shadow: 0 10px 28px rgba(131, 24, 67, 0.08);
|
||||
--code-bg: #ffe4e6;
|
||||
}
|
||||
:root[data-bg='20'] {
|
||||
--app-bg: #f1f5f9;
|
||||
--panel-bg: #e2e8f0;
|
||||
--text: #1e293b;
|
||||
--muted: #64748b;
|
||||
--border: #cbd5e1;
|
||||
--accent: #475569;
|
||||
--btn-bg: #ffffff;
|
||||
--hover: rgba(71, 85, 105, 0.12);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #1e293b;
|
||||
--preview-shadow: 0 10px 28px rgba(30, 41, 59, 0.1);
|
||||
--code-bg: #f8fafc;
|
||||
}
|
||||
:root[data-bg='21'] {
|
||||
--app-bg: #ecfdf5;
|
||||
--panel-bg: #d1fae5;
|
||||
--text: #14532d;
|
||||
--muted: #166534;
|
||||
--border: #bbf7d0;
|
||||
--accent: #15803d;
|
||||
--btn-bg: #f0fdf4;
|
||||
--hover: rgba(21, 128, 61, 0.12);
|
||||
--preview-bg: #ffffff;
|
||||
--preview-text: #14532d;
|
||||
--preview-shadow: 0 10px 28px rgba(20, 83, 45, 0.08);
|
||||
--code-bg: #dcfce7;
|
||||
}
|
||||
|
||||
/* Kindle 风格：暖灰纸面 + 轻微颗粒感（纯 CSS） */
|
||||
:root[data-bg='22'] {
|
||||
--app-bg: #e8e2d8;
|
||||
--panel-bg: rgba(245, 241, 234, 0.94);
|
||||
--text: #2d2a26;
|
||||
--muted: #6b6560;
|
||||
--border: #c9c2b8;
|
||||
--accent: #c2410c;
|
||||
--btn-bg: #faf6ef;
|
||||
--hover: rgba(194, 65, 12, 0.08);
|
||||
--preview-bg: #f7f3eb;
|
||||
--preview-text: #1f1c18;
|
||||
--preview-shadow: 0 10px 28px rgba(45, 42, 38, 0.1);
|
||||
--code-bg: #ede8df;
|
||||
}
|
||||
|
||||
/* 字体：仅字体栈 */
|
||||
:root[data-font='0'] {
|
||||
--font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-editor: ui-monospace, Menlo, Consolas, monospace;
|
||||
--font-preview: Georgia, 'Times New Roman', 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='1'] {
|
||||
--font-ui: Georgia, 'Times New Roman', serif;
|
||||
--font-editor: Consolas, 'Courier New', monospace;
|
||||
--font-preview: 'Palatino Linotype', Palatino, 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='2'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
--font-preview: 'Source Serif 4', Cambria, Georgia, serif;
|
||||
}
|
||||
:root[data-font='3'] {
|
||||
--font-ui: 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||||
--font-editor: 'Sarasa Mono SC', Consolas, monospace;
|
||||
--font-preview: 'Songti SC', SimSun, 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='4'] {
|
||||
--font-ui: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
--font-editor: 'IBM Plex Mono', Consolas, monospace;
|
||||
--font-preview: 'IBM Plex Serif', Georgia, serif;
|
||||
}
|
||||
:root[data-font='5'] {
|
||||
--font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-editor: Menlo, Monaco, Consolas, monospace;
|
||||
--font-preview: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
:root[data-font='6'] {
|
||||
--font-ui: Verdana, Geneva, sans-serif;
|
||||
--font-editor: 'Lucida Console', monospace;
|
||||
--font-preview: Georgia, Cambria, serif;
|
||||
}
|
||||
:root[data-font='7'] {
|
||||
--font-ui: 'Trebuchet MS', sans-serif;
|
||||
--font-editor: 'Courier New', Courier, monospace;
|
||||
--font-preview: 'Book Antiqua', Palatino, serif;
|
||||
}
|
||||
:root[data-font='8'] {
|
||||
--font-ui: 'Segoe UI', system-ui, sans-serif;
|
||||
--font-editor: 'Cascadia Code', 'Cascadia Mono', Consolas, monospace;
|
||||
--font-preview: Constantia, 'Times New Roman', serif;
|
||||
}
|
||||
:root[data-font='9'] {
|
||||
--font-ui: 'Segoe UI Variable', 'Segoe UI', sans-serif;
|
||||
--font-editor: 'Cascadia Mono', Consolas, monospace;
|
||||
--font-preview: 'Sitka Text', Georgia, serif;
|
||||
}
|
||||
:root[data-font='10'] {
|
||||
--font-ui: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||||
--font-editor: 'Noto Sans Mono CJK SC', 'Sarasa Mono SC', Consolas, monospace;
|
||||
--font-preview: 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
|
||||
}
|
||||
:root[data-font='11'] {
|
||||
--font-ui: 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-editor: ui-monospace, monospace;
|
||||
--font-preview: 'STKaiti', KaiTi, 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='12'] {
|
||||
--font-ui: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-editor: 'Menlo', 'Monaco', Consolas, monospace;
|
||||
--font-preview: 'Songti SC', SimSun, 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='13'] {
|
||||
--font-ui: 'Hiragino Sans GB', 'PingFang SC', sans-serif;
|
||||
--font-editor: 'SF Mono', Menlo, Consolas, monospace;
|
||||
--font-preview: 'Hiragino Mincho ProN', 'Songti SC', serif;
|
||||
}
|
||||
:root[data-font='14'] {
|
||||
--font-ui: 'LXGW WenKai', 'KaiTi', 'Microsoft YaHei', sans-serif;
|
||||
--font-editor: 'JetBrains Mono', Consolas, monospace;
|
||||
--font-preview: 'LXGW WenKai', 'KaiTi', 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='15'] {
|
||||
--font-ui: 'HarmonyOS Sans', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-editor: 'HarmonyOS Sans Mono', Consolas, monospace;
|
||||
--font-preview: 'HarmonyOS Serif', 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='16'] {
|
||||
--font-ui: 'OPPO Sans', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-editor: 'OPPO Sans Mono', Consolas, monospace;
|
||||
--font-preview: 'Source Han Serif SC', SimSun, serif;
|
||||
}
|
||||
:root[data-font='17'] {
|
||||
--font-ui: 'MiSans', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--font-editor: 'MiSans Mono', Consolas, monospace;
|
||||
--font-preview: 'Noto Serif SC', 'Source Han Serif SC', serif;
|
||||
}
|
||||
:root[data-font='18'] {
|
||||
--font-ui: 'Alibaba PuHuiTi', 'Microsoft YaHei', sans-serif;
|
||||
--font-editor: 'JetBrains Mono', Consolas, monospace;
|
||||
--font-preview: 'Alibaba PuHuiTi', 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='19'] {
|
||||
--font-ui: 'Smiley Sans', 'Microsoft YaHei', sans-serif;
|
||||
--font-editor: 'JetBrains Mono', Consolas, monospace;
|
||||
--font-preview: 'Smiley Sans', 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='20'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'Maple Mono', 'Cascadia Code', Consolas, monospace;
|
||||
--font-preview: 'Source Serif 4', Georgia, serif;
|
||||
}
|
||||
:root[data-font='21'] {
|
||||
--font-ui: 'Fira Sans', system-ui, sans-serif;
|
||||
--font-editor: 'Fira Code', 'Fira Mono', Consolas, monospace;
|
||||
--font-preview: 'Fira Sans', Georgia, serif;
|
||||
}
|
||||
:root[data-font='22'] {
|
||||
--font-ui: 'Roboto', system-ui, sans-serif;
|
||||
--font-editor: 'Roboto Mono', Consolas, monospace;
|
||||
--font-preview: 'Roboto Slab', Georgia, serif;
|
||||
}
|
||||
:root[data-font='23'] {
|
||||
--font-ui: 'Open Sans', system-ui, sans-serif;
|
||||
--font-editor: 'Source Code Pro', Consolas, monospace;
|
||||
--font-preview: 'Merriweather', Georgia, serif;
|
||||
}
|
||||
:root[data-font='24'] {
|
||||
--font-ui: 'Lato', system-ui, sans-serif;
|
||||
--font-editor: 'Ubuntu Mono', Consolas, monospace;
|
||||
--font-preview: 'Lora', Georgia, serif;
|
||||
}
|
||||
:root[data-font='25'] {
|
||||
--font-ui: 'Montserrat', system-ui, sans-serif;
|
||||
--font-editor: 'Space Mono', Consolas, monospace;
|
||||
--font-preview: 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
:root[data-font='26'] {
|
||||
--font-ui: 'Merriweather Sans', system-ui, sans-serif;
|
||||
--font-editor: 'Inconsolata', Consolas, monospace;
|
||||
--font-preview: 'Merriweather', Georgia, serif;
|
||||
}
|
||||
:root[data-font='27'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'Source Code Pro', monospace;
|
||||
--font-preview: 'Crimson Text', 'Times New Roman', serif;
|
||||
}
|
||||
:root[data-font='28'] {
|
||||
--font-ui: 'Literata', Georgia, serif;
|
||||
--font-editor: 'IBM Plex Mono', Consolas, monospace;
|
||||
--font-preview: 'Literata', Georgia, serif;
|
||||
}
|
||||
:root[data-font='29'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'Inconsolata', 'Consolas', monospace;
|
||||
--font-preview: Georgia, 'Noto Serif SC', serif;
|
||||
}
|
||||
:root[data-font='30'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'Anonymous Pro', 'Courier New', monospace;
|
||||
--font-preview: 'Palatino Linotype', Palatino, serif;
|
||||
}
|
||||
:root[data-font='31'] {
|
||||
--font-ui: system-ui, sans-serif;
|
||||
--font-editor: 'Fantasque Sans Mono', Consolas, monospace;
|
||||
--font-preview: 'Charter', 'Noto Serif SC', serif;
|
||||
}
|
||||
|
||||
:root[data-bg='4'] .toolbar,
|
||||
:root[data-bg='4'] .tab-bar,
|
||||
:root[data-bg='4'] .sidebar {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/** 背景 id 0–22，对应 `appearance-styles.css` 中 `:root[data-bg]`。 */
|
||||
export const BACKGROUNDS: { id: string; name: string }[] = [
|
||||
{ id: '0', name: '云雾灰' },
|
||||
{ id: '1', name: '羊皮纸' },
|
||||
{ id: '2', name: '深海蓝' },
|
||||
{ id: '3', name: '森绿' },
|
||||
{ id: '4', name: '极光渐变' },
|
||||
{ id: '5', name: '极简粉' },
|
||||
{ id: '6', name: '暗夜橙' },
|
||||
{ id: '7', name: '薰衣草' },
|
||||
{ id: '8', name: '暖石褐' },
|
||||
{ id: '9', name: '星夜紫' },
|
||||
{ id: '10', name: '霜青' },
|
||||
{ id: '11', name: '玫瑰灰' },
|
||||
{ id: '12', name: '石墨黑' },
|
||||
{ id: '13', name: '薄荷冰' },
|
||||
{ id: '14', name: '焦糖拿铁' },
|
||||
{ id: '15', name: '青瓷' },
|
||||
{ id: '16', name: '暮光紫灰' },
|
||||
{ id: '17', name: '沙岸米' },
|
||||
{ id: '18', name: '松烟墨' },
|
||||
{ id: '19', name: '樱粉雾' },
|
||||
{ id: '20', name: '钢蓝灰' },
|
||||
{ id: '21', name: '苔痕绿' },
|
||||
{ id: '22', name: 'Kindle 纸感' }
|
||||
]
|
||||
|
||||
/** 字体 id 0–31，对应 `:root[data-font]`。 */
|
||||
export const FONTS: { id: string; name: string }[] = [
|
||||
{ id: '0', name: '系统默认' },
|
||||
{ id: '1', name: '衬线阅读' },
|
||||
{ id: '2', name: '等宽代码' },
|
||||
{ id: '3', name: '人文宋黑' },
|
||||
{ id: '4', name: 'IBM Plex' },
|
||||
{ id: '5', name: 'Helvetica 系' },
|
||||
{ id: '6', name: 'Georgia 系' },
|
||||
{ id: '7', name: 'Verdana 系' },
|
||||
{ id: '8', name: 'Courier 打字机' },
|
||||
{ id: '9', name: 'Segoe UI 系' },
|
||||
{ id: '10', name: '思源黑体优先' },
|
||||
{ id: '11', name: '圆体休闲' },
|
||||
{ id: '12', name: '苹方优先' },
|
||||
{ id: '13', name: '冬青黑体' },
|
||||
{ id: '14', name: '霞鹜文楷' },
|
||||
{ id: '15', name: 'HarmonyOS Sans' },
|
||||
{ id: '16', name: 'OPPO Sans' },
|
||||
{ id: '17', name: '小米兰亭' },
|
||||
{ id: '18', name: '阿里巴巴普惠' },
|
||||
{ id: '19', name: '得意黑' },
|
||||
{ id: '20', name: 'Maple Mono' },
|
||||
{ id: '21', name: 'Fira Sans + Mono' },
|
||||
{ id: '22', name: 'Roboto 系' },
|
||||
{ id: '23', name: 'Open Sans 系' },
|
||||
{ id: '24', name: 'Lato 系' },
|
||||
{ id: '25', name: 'Montserrat 系' },
|
||||
{ id: '26', name: 'Merriweather 阅读' },
|
||||
{ id: '27', name: 'Crimson Text' },
|
||||
{ id: '28', name: 'Literata 阅读' },
|
||||
{ id: '29', name: 'Inconsolata 等宽' },
|
||||
{ id: '30', name: 'Anonymous Pro' },
|
||||
{ id: '31', name: 'Fantasque Sans Mono' }
|
||||
]
|
||||
|
||||
export type ViewMode = 'edit' | 'read' | 'hybrid'
|
||||
|
||||
export function validBackgroundId(s: string | null): string | null {
|
||||
if (s === null) return null
|
||||
return /^([0-9]|1[0-9]|2[0-2])$/.test(s) ? s : null
|
||||
}
|
||||
|
||||
export function validFontId(s: string | null): string | null {
|
||||
if (s === null) return null
|
||||
return /^([0-9]|[12][0-9]|3[01])$/.test(s) ? s : null
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/** 颜色选择器预设（按行分组展示） */
|
||||
export const COLOR_SWATCH_ROWS: string[][] = [
|
||||
['#000000', '#1c1917', '#292524', '#44403c', '#57534e', '#78716c', '#a8a29e', '#d6d3d1'],
|
||||
['#450a0a', '#7f1d1d', '#b91c1c', '#dc2626', '#f87171', '#fecaca', '#fee2e2', '#fef2f2'],
|
||||
['#431407', '#9a3412', '#c2410c', '#ea580c', '#fb923c', '#fed7aa', '#ffedd5', '#fff7ed'],
|
||||
['#422006', '#a16207', '#ca8a04', '#eab308', '#fde047', '#fef9c3', '#fefce8', '#fefce8'],
|
||||
['#14532d', '#166534', '#15803d', '#22c55e', '#86efac', '#bbf7d0', '#dcfce7', '#f0fdf4'],
|
||||
['#134e4a', '#0f766e', '#0d9488', '#14b8a6', '#5eead4', '#ccfbf1', '#ecfdf5', '#f0fdfa'],
|
||||
['#1e3a8a', '#1d4ed8', '#2563eb', '#3b82f6', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff'],
|
||||
['#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#c4b5fd', '#ddd6fe', '#ede9fe', '#f5f3ff']
|
||||
]
|
||||
Vendored
+36
@@ -0,0 +1,36 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
import type {
|
||||
ListDirResult,
|
||||
OpenFileResult,
|
||||
OpenFolderResult,
|
||||
OpenImageResult,
|
||||
SaveDialogResult
|
||||
} from '../../../electron/ipc-types'
|
||||
|
||||
export interface MyReaderApi {
|
||||
openFileDialog: () => Promise<OpenFileResult>
|
||||
openFolderDialog: () => Promise<OpenFolderResult>
|
||||
openImageDialog: () => Promise<OpenImageResult>
|
||||
saveFileDialog: (defaultPath?: string) => Promise<SaveDialogResult>
|
||||
readFile: (filePath: string) => Promise<string>
|
||||
writeFile: (filePath: string, content: string) => Promise<void>
|
||||
listDirectory: (dirPath: string) => Promise<ListDirResult>
|
||||
parentDirectory: (dirPath: string) => Promise<string>
|
||||
resolveRelativePath: (baseFilePath: string, href: string) => Promise<string>
|
||||
openExternal: (url: string) => Promise<void>
|
||||
defaultDirectory: () => Promise<string>
|
||||
deleteFile: (filePath: string) => Promise<void>
|
||||
renamePath: (oldPath: string, newName: string) => Promise<{ newPath: string }>
|
||||
allowClose: () => void
|
||||
onRequestClose: (handler: () => void) => () => void
|
||||
onMenuAction: (handler: (action: string) => void) => () => void
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
myreader?: MyReaderApi
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
@@ -0,0 +1,35 @@
|
||||
const HISTORY_KEY = 'myreader-file-history-v1'
|
||||
const MAX_ITEMS = 80
|
||||
|
||||
export function loadFileHistory(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(HISTORY_KEY)
|
||||
if (!raw) return []
|
||||
const data = JSON.parse(raw) as { paths?: unknown }
|
||||
if (!Array.isArray(data.paths)) return []
|
||||
return data.paths.filter((p): p is string => typeof p === 'string' && p.length > 0)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export function saveFileHistory(paths: string[]): void {
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify({ v: 1, paths }))
|
||||
}
|
||||
|
||||
export function addFileHistory(paths: string[], filePath: string): string[] {
|
||||
const next = [filePath, ...paths.filter((p) => p !== filePath)].slice(0, MAX_ITEMS)
|
||||
saveFileHistory(next)
|
||||
return next
|
||||
}
|
||||
|
||||
export function removeFileHistory(paths: string[], filePath: string): string[] {
|
||||
const next = paths.filter((p) => p !== filePath)
|
||||
saveFileHistory(next)
|
||||
return next
|
||||
}
|
||||
|
||||
export function historyFileName(path: string): string {
|
||||
const parts = path.split(/[/\\]/)
|
||||
return parts[parts.length - 1] || path
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App'
|
||||
import { validBackgroundId, validFontId } from './appearance'
|
||||
import './appearance-styles.css'
|
||||
import './index.css'
|
||||
|
||||
{
|
||||
const bg =
|
||||
localStorage.getItem('myreader-bg-id') ??
|
||||
localStorage.getItem('myreader-theme') ??
|
||||
localStorage.getItem('myreader-bg') ??
|
||||
'1'
|
||||
const font = localStorage.getItem('myreader-font-id') ?? '0'
|
||||
const line = localStorage.getItem('myreader-preview-line-height')
|
||||
const lineN = line ? Number.parseFloat(line) : NaN
|
||||
const lineH = Number.isFinite(lineN) ? String(Math.min(3, Math.max(1, lineN))) : '1.5'
|
||||
document.documentElement.dataset.bg = validBackgroundId(bg) ?? '1'
|
||||
document.documentElement.dataset.font = validFontId(font) ?? '0'
|
||||
document.documentElement.style.setProperty('--preview-line-height', lineH)
|
||||
}
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
@@ -0,0 +1,406 @@
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import multimdTable from 'markdown-it-multimd-table'
|
||||
import hljs from 'highlight.js'
|
||||
import DOMPurify from 'dompurify'
|
||||
import { absolutePathToFileUrl, resolvePathFromBaseFile } from './pathLite'
|
||||
import 'highlight.js/styles/github.min.css'
|
||||
|
||||
const MERMAID_LANG = new Set(['mermaid', 'flowchart', 'sequencediagram', 'sequence'])
|
||||
const MERMAID_START =
|
||||
/^\s*(sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|gantt|pie|gitGraph|journey|flowchart\s|graph\s|mindmap|timeline|quadrantChart|xychart-beta|block-beta)/i
|
||||
|
||||
function isMermaidFence(lang: string, content: string): boolean {
|
||||
const l = lang.toLowerCase()
|
||||
if (MERMAID_LANG.has(l)) return true
|
||||
if (!lang.trim() && MERMAID_START.test(content)) return true
|
||||
return false
|
||||
}
|
||||
|
||||
function highlightCodeBlock(content: string, lang: string): string {
|
||||
const trimmed = (lang || '').trim()
|
||||
if (trimmed && hljs.getLanguage(trimmed)) {
|
||||
try {
|
||||
return hljs.highlight(content, { language: trimmed, ignoreIllegals: true }).value
|
||||
} catch {
|
||||
/* fall through */
|
||||
}
|
||||
}
|
||||
if (trimmed) {
|
||||
try {
|
||||
return hljs.highlightAuto(content).value
|
||||
} catch {
|
||||
/* fall through */
|
||||
}
|
||||
}
|
||||
return md.utils.escapeHtml(content)
|
||||
}
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight: function (this: MarkdownIt, str: string, lang: string) {
|
||||
const body = highlightCodeBlock(str.replace(/\n$/, ''), lang)
|
||||
return `<pre class="hljs"><code>${body}</code></pre>`
|
||||
}
|
||||
})
|
||||
|
||||
md.use(multimdTable, { multiline: true, rowspan: true, headerless: false })
|
||||
|
||||
/** 允许本地 file:// 图片与链接（markdown-it 默认禁止 file: 协议）。 */
|
||||
const defaultValidateLink = md.validateLink.bind(md)
|
||||
md.validateLink = (url: string): boolean => {
|
||||
if (/^file:/i.test(url)) return true
|
||||
return defaultValidateLink(url)
|
||||
}
|
||||
|
||||
/** 禁用 Setext 标题，避免 `---` 等被当成 h2。 */
|
||||
md.disable(['lheading'])
|
||||
|
||||
function setBlockSourceLines(token: { map?: [number, number] | null; attrSet: (n: string, v: string) => void }): void {
|
||||
if (!token.map) return
|
||||
const start = token.map[0]
|
||||
const end = Math.max(start, token.map[1] - 1)
|
||||
token.attrSet('data-source-line', String(start))
|
||||
token.attrSet('data-source-line-end', String(end))
|
||||
}
|
||||
|
||||
const defaultHeadingOpen =
|
||||
md.renderer.rules.heading_open ??
|
||||
function (tokens, idx, options, _env, self) {
|
||||
return self.renderToken(tokens, idx, options)
|
||||
}
|
||||
|
||||
md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
|
||||
const token = tokens[idx]
|
||||
setBlockSourceLines(token)
|
||||
token.attrSet('id', slugForLine(token.map ? token.map[0] : 0))
|
||||
return defaultHeadingOpen(tokens, idx, options, env, self)
|
||||
}
|
||||
|
||||
function wrapBlockOpenRule(ruleName: 'paragraph_open' | 'list_item_open' | 'blockquote_open'): void {
|
||||
const prev = md.renderer.rules[ruleName]
|
||||
md.renderer.rules[ruleName] = (tokens, idx, options, env, self) => {
|
||||
setBlockSourceLines(tokens[idx]!)
|
||||
if (prev) return prev(tokens, idx, options, env, self)
|
||||
return self.renderToken(tokens, idx, options)
|
||||
}
|
||||
}
|
||||
|
||||
wrapBlockOpenRule('paragraph_open')
|
||||
wrapBlockOpenRule('list_item_open')
|
||||
wrapBlockOpenRule('blockquote_open')
|
||||
|
||||
const defaultTableOpen = md.renderer.rules.table_open
|
||||
const defaultTableClose = md.renderer.rules.table_close
|
||||
|
||||
md.renderer.rules.table_open = (tokens, idx, options, env, self) => {
|
||||
setBlockSourceLines(tokens[idx]!)
|
||||
const inner = defaultTableOpen
|
||||
? defaultTableOpen(tokens, idx, options, env, self)
|
||||
: '<table>'
|
||||
return `<div class="md-table-wrap">${inner}`
|
||||
}
|
||||
|
||||
md.renderer.rules.table_close = (tokens, idx, options, env, self) => {
|
||||
const inner = defaultTableClose
|
||||
? defaultTableClose(tokens, idx, options, env, self)
|
||||
: '</table>'
|
||||
return `${inner}</div>`
|
||||
}
|
||||
|
||||
function normalizeImageSrc(src: string, baseFilePath: string | null | undefined): string {
|
||||
const s = src.trim()
|
||||
if (!s) return s
|
||||
if (/^file:\/\//i.test(s)) return s
|
||||
if (/^https?:\/\//i.test(s) || /^data:/i.test(s)) return s
|
||||
if (baseFilePath?.trim()) {
|
||||
try {
|
||||
let pathPart = s
|
||||
if (pathPart.startsWith('file:')) {
|
||||
pathPart = pathPart.replace(/^file:\/*/i, '')
|
||||
try {
|
||||
pathPart = decodeURIComponent(pathPart)
|
||||
} catch {
|
||||
/* keep */
|
||||
}
|
||||
}
|
||||
const abs = resolvePathFromBaseFile(baseFilePath, pathPart)
|
||||
return absolutePathToFileUrl(abs)
|
||||
} catch {
|
||||
/* keep */
|
||||
}
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
const defaultImage = md.renderer.rules.image!
|
||||
md.renderer.rules.image = (tokens, idx, options, env, self) => {
|
||||
const token = tokens[idx]!
|
||||
const src = token.attrGet('src')
|
||||
const base = (env as { baseFilePath?: string | null }).baseFilePath
|
||||
if (src) {
|
||||
token.attrSet('src', normalizeImageSrc(src, base))
|
||||
}
|
||||
const html = defaultImage(tokens, idx, options, env, self)
|
||||
return html.replace(/<img /i, '<img loading="lazy" decoding="async" ')
|
||||
}
|
||||
|
||||
const defaultFence = md.renderer.rules.fence
|
||||
md.renderer.rules.fence = (tokens, idx, options, env, self) => {
|
||||
const token = tokens[idx]
|
||||
if (!token.map) {
|
||||
return defaultFence ? defaultFence(tokens, idx, options, env, self) : ''
|
||||
}
|
||||
const lang = (token.info || '').trim()
|
||||
const raw = token.content.replace(/\n$/, '')
|
||||
const codeEndLine = Math.max(token.map[0], token.map[1] - 1)
|
||||
|
||||
if (isMermaidFence(lang, raw)) {
|
||||
const trimmed = raw.trim()
|
||||
const escaped = md.utils.escapeHtml(trimmed)
|
||||
const dataSrc = md.utils.escapeHtml(encodeURIComponent(trimmed))
|
||||
return `<div class="md-diagram-wrap" data-source-line="${token.map[0]}" data-source-line-end="${codeEndLine}" data-mermaid-src="${dataSrc}"><pre class="mermaid">${escaped}</pre></div>`
|
||||
}
|
||||
|
||||
const highlighted = highlightCodeBlock(raw, lang)
|
||||
const langLabel = lang
|
||||
? `<span class="md-code-lang">${md.utils.escapeHtml(lang.split(/\s+/)[0] ?? lang)}</span>`
|
||||
: ''
|
||||
return `<div class="md-code-wrap" data-source-line="${token.map[0]}" data-source-line-end="${codeEndLine}">${langLabel}<pre class="hljs"><code>${highlighted}</code></pre></div>`
|
||||
}
|
||||
|
||||
const purifyOpts: Parameters<typeof DOMPurify.sanitize>[1] = {
|
||||
USE_PROFILES: { html: true },
|
||||
ADD_TAGS: ['span', 'mark', 'kbd', 'sup', 'sub', 'details', 'summary', 'font', 'div'],
|
||||
ADD_ATTR: [
|
||||
'style',
|
||||
'color',
|
||||
'open',
|
||||
'data-source-line',
|
||||
'data-source-line-end',
|
||||
'id',
|
||||
'class',
|
||||
'href',
|
||||
'data-md-href',
|
||||
'src',
|
||||
'alt',
|
||||
'width',
|
||||
'height',
|
||||
'loading',
|
||||
'decoding',
|
||||
'data-mermaid-src'
|
||||
],
|
||||
ALLOWED_URI_REGEXP:
|
||||
/^(?:(?:https?|mailto|tel|data|file):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
|
||||
}
|
||||
|
||||
const defaultLinkOpen = md.renderer.rules.link_open
|
||||
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
||||
const token = tokens[idx]!
|
||||
const href = token.attrGet('href') ?? ''
|
||||
if (href && !/^https?:\/\//i.test(href) && !href.startsWith('#') && !href.startsWith('mailto:')) {
|
||||
token.attrSet('class', 'md-internal-link')
|
||||
token.attrSet('data-md-href', href)
|
||||
}
|
||||
if (defaultLinkOpen) return defaultLinkOpen(tokens, idx, options, env, self)
|
||||
return self.renderToken(tokens, idx, options)
|
||||
}
|
||||
|
||||
export function slugForLine(line: number): string {
|
||||
return `mr-line-${line}`
|
||||
}
|
||||
|
||||
export type RenderMarkdownEnv = {
|
||||
baseFilePath?: string | null
|
||||
}
|
||||
|
||||
export function renderMarkdown(src: string, env?: RenderMarkdownEnv): string {
|
||||
const input = typeof src === 'string' ? src : ''
|
||||
const renderEnv = env ?? {}
|
||||
try {
|
||||
const raw = md.render(input, renderEnv)
|
||||
try {
|
||||
return DOMPurify.sanitize(raw, purifyOpts)
|
||||
} catch (e) {
|
||||
console.warn('[MyReader] DOMPurify failed', e)
|
||||
return `<p>${md.utils.escapeHtml(raw.slice(0, 8000))}</p>`
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[MyReader] markdown render failed', e)
|
||||
return `<pre>${md.utils.escapeHtml(input.slice(0, 8000))}</pre>`
|
||||
}
|
||||
}
|
||||
|
||||
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<HTMLElement>('[data-source-line]')
|
||||
const regions: SourceLineRegion[] = []
|
||||
for (const el of nodes) {
|
||||
const start = Number(el.getAttribute('data-source-line'))
|
||||
if (!Number.isFinite(start)) continue
|
||||
const endRaw = el.getAttribute('data-source-line-end')
|
||||
const end = endRaw !== null && Number.isFinite(Number(endRaw)) ? Number(endRaw) : start
|
||||
regions.push({ line: start, lineEnd: Math.max(start, end), el })
|
||||
}
|
||||
regions.sort((a, b) => a.line - b.line)
|
||||
return regions
|
||||
}
|
||||
|
||||
/** 阅读区中与源行号对应的元素（用于高亮闪烁）。 */
|
||||
export function findPreviewAnchorForLine(
|
||||
article: HTMLElement,
|
||||
line: number
|
||||
): HTMLElement | null {
|
||||
return finestElementForLine(article, line) ?? article.querySelector<HTMLElement>(`#${slugForLine(line)}`)
|
||||
}
|
||||
|
||||
function finestElementForLine(article: HTMLElement, line: number): HTMLElement | null {
|
||||
const nodes = article.querySelectorAll<HTMLElement>(`[data-source-line="${line}"]`)
|
||||
for (const el of nodes) {
|
||||
const start = Number(el.getAttribute('data-source-line'))
|
||||
if (start !== line) continue
|
||||
const endRaw = el.getAttribute('data-source-line-end')
|
||||
const end = endRaw !== null && Number.isFinite(Number(endRaw)) ? Number(endRaw) : start
|
||||
if (end > start) continue
|
||||
return el
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* 分栏阅读区：计算源行在 shell 内的垂直中心（px）。
|
||||
* `line` 为 0-based 源行号。
|
||||
*/
|
||||
export function previewLineCenterInShell(
|
||||
article: HTMLElement,
|
||||
shell: HTMLElement,
|
||||
line: number,
|
||||
totalSourceLines: number
|
||||
): number | null {
|
||||
const shellRect = shell.getBoundingClientRect()
|
||||
|
||||
const exact = finestElementForLine(article, line)
|
||||
if (exact) {
|
||||
const r = exact.getBoundingClientRect()
|
||||
return r.top - shellRect.top + r.height / 2
|
||||
}
|
||||
|
||||
const regions = collectSourceLineRegions(article)
|
||||
if (regions.length === 0) {
|
||||
const h = article.offsetHeight || 1
|
||||
return ((line + 0.5) / Math.max(1, totalSourceLines)) * h
|
||||
}
|
||||
|
||||
let region = regions[0]!
|
||||
for (const r of regions) {
|
||||
if (r.line <= line) region = r
|
||||
else break
|
||||
}
|
||||
|
||||
if (line >= region.line && line <= region.lineEnd) {
|
||||
const span = Math.max(1, region.lineEnd - region.line + 1)
|
||||
const offset = Math.max(0, Math.min(line - region.line, span - 1))
|
||||
const frac = (offset + 0.5) / span
|
||||
const blockRect = region.el.getBoundingClientRect()
|
||||
return blockRect.top - shellRect.top + frac * blockRect.height
|
||||
}
|
||||
|
||||
const blockRect = region.el.getBoundingClientRect()
|
||||
return blockRect.top - shellRect.top + blockRect.height / 2
|
||||
}
|
||||
|
||||
export function scrollPreviewToSourceLine(
|
||||
scrollEl: HTMLElement,
|
||||
article: HTMLElement,
|
||||
line: number,
|
||||
behavior: ScrollBehavior = 'smooth',
|
||||
totalSourceLines?: number
|
||||
): HTMLElement | null {
|
||||
const total = totalSourceLines ?? article.querySelectorAll('[data-source-line]').length
|
||||
const shell = article.closest('.preview-shell') ?? article.parentElement
|
||||
const anchor = findPreviewAnchorForLine(article, line)
|
||||
if (!anchor && !shell) return null
|
||||
|
||||
const scrollRect = scrollEl.getBoundingClientRect()
|
||||
let top: number
|
||||
if (anchor) {
|
||||
const anchorRect = anchor.getBoundingClientRect()
|
||||
top = anchorRect.top - scrollRect.top + scrollEl.scrollTop - 20
|
||||
anchor.classList.add('preview-anchor-flash')
|
||||
window.setTimeout(() => anchor.classList.remove('preview-anchor-flash'), 1600)
|
||||
} else if (shell instanceof HTMLElement) {
|
||||
const center = previewLineCenterInShell(article, shell, line, total)
|
||||
top = (center ?? 0) - 40
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
scrollEl.scrollTo({ top: Math.max(0, top), behavior })
|
||||
return anchor
|
||||
}
|
||||
|
||||
/** @deprecated 使用 previewLineCenterInShell */
|
||||
export function anchorCenterInShell(anchor: HTMLElement, shell: HTMLElement): number {
|
||||
const shellRect = shell.getBoundingClientRect()
|
||||
const r = anchor.getBoundingClientRect()
|
||||
return r.top - shellRect.top + r.height / 2
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import type { OutlineItem } from './markdown'
|
||||
|
||||
export type OutlineTreeNode = OutlineItem & {
|
||||
id: string
|
||||
children: OutlineTreeNode[]
|
||||
}
|
||||
|
||||
export function buildOutlineTree(items: OutlineItem[]): OutlineTreeNode[] {
|
||||
const root: OutlineTreeNode[] = []
|
||||
const stack: OutlineTreeNode[] = []
|
||||
for (const item of items) {
|
||||
const node: OutlineTreeNode = {
|
||||
...item,
|
||||
id: `o-${item.line}`,
|
||||
children: []
|
||||
}
|
||||
while (stack.length > 0 && stack[stack.length - 1]!.level >= node.level) {
|
||||
stack.pop()
|
||||
}
|
||||
if (stack.length === 0) root.push(node)
|
||||
else stack[stack.length - 1]!.children.push(node)
|
||||
stack.push(node)
|
||||
}
|
||||
return root
|
||||
}
|
||||
|
||||
export function collectBranchIds(nodes: OutlineTreeNode[]): string[] {
|
||||
const ids: string[] = []
|
||||
const walk = (list: OutlineTreeNode[]): void => {
|
||||
for (const n of list) {
|
||||
if (n.children.length > 0) {
|
||||
ids.push(n.id)
|
||||
walk(n.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
walk(nodes)
|
||||
return ids
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/** 轻量路径工具，供渲染进程 Markdown 使用（避免依赖 node:path 打包问题）。 */
|
||||
|
||||
export function dirnamePath(filePath: string): string {
|
||||
const n = filePath.replace(/\\/g, '/')
|
||||
const i = n.lastIndexOf('/')
|
||||
if (i < 0) return '.'
|
||||
const d = n.slice(0, i)
|
||||
if (/^[A-Za-z]:$/.test(d)) return `${d}/`
|
||||
return d || '/'
|
||||
}
|
||||
|
||||
/** 去掉 . /.. 的段落归一化（不含盘符）。 */
|
||||
export function normalizeDotSegments(pathWithoutDrive: string): string {
|
||||
const segs = pathWithoutDrive.split('/').filter((s) => s && s !== '.')
|
||||
const st: string[] = []
|
||||
for (const s of segs) {
|
||||
if (s === '..') st.pop()
|
||||
else st.push(s)
|
||||
}
|
||||
return st.join('/')
|
||||
}
|
||||
|
||||
/** 将相对 href 解析为绝对本地路径（正斜杠）。 */
|
||||
export function resolvePathFromBaseFile(baseFilePath: string, href: string): string {
|
||||
let h = href.trim().replace(/\\/g, '/')
|
||||
const q = h.indexOf('?')
|
||||
if (q >= 0) h = h.slice(0, q)
|
||||
const hash = h.indexOf('#')
|
||||
if (hash >= 0) h = h.slice(0, hash)
|
||||
|
||||
const baseNorm = baseFilePath.replace(/\\/g, '/')
|
||||
const winBase = baseNorm.match(/^([A-Za-z]:)\/(.*)$/)
|
||||
|
||||
if (/^[A-Za-z]:\//i.test(h)) {
|
||||
const m = h.match(/^([A-Za-z]:\/)(.*)$/)!
|
||||
return `${m[1]}${normalizeDotSegments(m[2] ?? '')}`
|
||||
}
|
||||
|
||||
if (h.startsWith('/')) {
|
||||
if (winBase) {
|
||||
return `${winBase[1]}/${normalizeDotSegments(h.slice(1))}`
|
||||
}
|
||||
return `/${normalizeDotSegments(h.slice(1))}`
|
||||
}
|
||||
|
||||
const dir = dirnamePath(baseNorm)
|
||||
const joined = dir.endsWith('/') ? `${dir}${h}` : `${dir}/${h}`
|
||||
|
||||
if (winBase) {
|
||||
const m = joined.match(/^([A-Za-z]:\/)(.*)$/)
|
||||
if (m) return `${m[1]}${normalizeDotSegments(m[2] ?? '')}`
|
||||
}
|
||||
if (joined.startsWith('/')) return `/${normalizeDotSegments(joined.slice(1))}`
|
||||
return normalizeDotSegments(joined)
|
||||
}
|
||||
|
||||
/** 绝对路径 → file:// URL（Windows / Unix）。 */
|
||||
export function absolutePathToFileUrl(absPath: string): string {
|
||||
const norm = absPath.replace(/\\/g, '/').trim()
|
||||
if (!norm) return ''
|
||||
if (/^[A-Za-z]:\//.test(norm)) {
|
||||
return `file:///${encodeURI(norm)}`
|
||||
}
|
||||
const withLead = norm.startsWith('/') ? norm : `/${norm}`
|
||||
return `file://${encodeURI(withLead)}`
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"useDefineForClassFields": true,
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": [
|
||||
"electron/**/*.ts",
|
||||
"src/renderer/**/*.ts",
|
||||
"src/renderer/**/*.tsx",
|
||||
"src/renderer/index.html"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2022"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["electron.vite.config.ts"]
|
||||
}
|
||||
Reference in New Issue
Block a user