重构：Wails v3 迁移 + 前端目录规范化 + Sidebar滚动优化
- web/ → frontend/ 目录重命名（Wails v3 标准结构） - main.go: Middleware 修复 custom.js 404 + DevTools 延迟启动 - Sidebar: 收藏夹内部独立滚动 + 帮助区块固定底部 - useFavorites.ts: longPressTimer const→let 修复 TypeError - App.vue: Arco Tabs padding-top 覆盖 - build: config.yml / Taskfile.yml 对齐官方模板，devtools build tag - 新增 v3 bindings、vite.config.js、跨平台构建配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
251
frontend/src/utils/markedExtensions.ts
Normal file
251
frontend/src/utils/markedExtensions.ts
Normal file
@@ -0,0 +1,251 @@
|
||||
import { marked } from 'marked'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/lib/common'
|
||||
// 按需导入 common 包不包含的语言
|
||||
import 'highlight.js/lib/languages/powershell'
|
||||
import 'highlight.js/lib/languages/dos'
|
||||
import 'highlight.js/lib/languages/autohotkey'
|
||||
import 'highlight.js/lib/languages/latex'
|
||||
import 'highlight.js/lib/languages/dockerfile'
|
||||
import 'highlight.js/lib/languages/cmake'
|
||||
import 'highlight.js/lib/languages/scala'
|
||||
import 'highlight.js/lib/languages/dart'
|
||||
import { getHljsLanguage } from './languageMap'
|
||||
|
||||
let mermaidInstance: typeof import('mermaid').default | null = null
|
||||
let mermaidTheme: string | null = null
|
||||
|
||||
// 检测当前是否为暗色主题
|
||||
function isDarkTheme(): boolean {
|
||||
if (typeof document === 'undefined') return false
|
||||
return document.body.getAttribute('arco-theme')?.includes('dark') ?? false
|
||||
}
|
||||
|
||||
async function loadMermaid() {
|
||||
const currentTheme = isDarkTheme() ? 'dark' : 'default'
|
||||
|
||||
if (mermaidInstance && mermaidTheme === currentTheme) {
|
||||
return mermaidInstance
|
||||
}
|
||||
|
||||
if (!mermaidInstance) {
|
||||
const m = await import('mermaid')
|
||||
mermaidInstance = m.default
|
||||
}
|
||||
mermaidInstance.initialize({
|
||||
startOnLoad: false,
|
||||
theme: currentTheme,
|
||||
securityLevel: 'strict',
|
||||
themeVariables: Object.assign({
|
||||
primaryColor: '#165DFF',
|
||||
primaryTextColor: '#ffffff',
|
||||
primaryBorderColor: '#4080FF'
|
||||
}, currentTheme === 'dark' ? {
|
||||
lineColor: '#4E5969',
|
||||
secondaryColor: '#0E42D2',
|
||||
tertiaryColor: '#0FC6C2',
|
||||
mainBkg: '#17171A',
|
||||
nodeBorder: '#165DFF',
|
||||
clusterBkg: '#232324',
|
||||
titleColor: '#FFFFFF',
|
||||
edgeLabelBackground: '#232324'
|
||||
} : {
|
||||
lineColor: '#86909C',
|
||||
secondaryColor: '#E8F3FF',
|
||||
tertiaryColor: '#722ED1',
|
||||
mainBkg: '#F2F3F5',
|
||||
nodeBorder: '#165DFF',
|
||||
clusterBkg: '#F7F8FA',
|
||||
titleColor: '#1D2129',
|
||||
edgeLabelBackground: '#F2F3F5'
|
||||
})
|
||||
})
|
||||
mermaidTheme = currentTheme
|
||||
return mermaidInstance
|
||||
}
|
||||
|
||||
const renderer = new marked.Renderer()
|
||||
|
||||
renderer.code = function(token: any) {
|
||||
if (token.lang === 'mermaid') {
|
||||
return `<pre class="mermaid">${token.text}</pre>`
|
||||
}
|
||||
|
||||
const lang = getHljsLanguage(token.lang)
|
||||
|
||||
let highlighted: string
|
||||
try {
|
||||
highlighted = hljs.highlight(token.text, { language: lang }).value
|
||||
} catch {
|
||||
highlighted = token.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
return `<pre><code class="hljs language-${lang}" data-theme="auto">${highlighted}</code></pre>`
|
||||
}
|
||||
|
||||
renderer.heading = function(token: any) {
|
||||
const raw = token.raw || ''
|
||||
const depth = token.depth || 1
|
||||
const text = token.text || ''
|
||||
|
||||
const id = raw
|
||||
.toLowerCase()
|
||||
.replace(/[^\u4e00-\u9fa5a-z0-9\s-]/g, '')
|
||||
.trim()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-+|-+$/g, '') || `heading-${Math.random().toString(36).slice(2, 11)}`
|
||||
|
||||
return `<h${depth} id="${id}" class="heading">
|
||||
${text}<a href="#${id}" class="heading-anchor" aria-hidden="true" title="跳转到此标题">#</a>
|
||||
</h${depth}>`
|
||||
}
|
||||
|
||||
// ========== 图片相对路径转换支持 ==========
|
||||
// 当前 Markdown 文件所在目录（由调用方在渲染前设置）
|
||||
let _currentFileDir: string = ''
|
||||
// 文件服务器 Base URL（由调用方在渲染前设置）
|
||||
let _fileServerBase: string = 'http://localhost:8073/localfs'
|
||||
|
||||
/**
|
||||
* 设置当前 Markdown 文件所在目录（用于图片相对路径→文件服务器 URL 转换）
|
||||
* @param dir 文件所在目录的绝对路径，如 "D:/docs" 或 "/"（根目录）
|
||||
*/
|
||||
export function setCurrentFileDir(dir: string): void {
|
||||
_currentFileDir = dir
|
||||
}
|
||||
|
||||
/** 获取当前设置的文件目录 */
|
||||
export function getCurrentFileDir(): string {
|
||||
return _currentFileDir
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置文件服务器 Base URL（用于图片相对路径转换）
|
||||
* @param base 完整的 base URL 前缀，如 "http://localhost:8073/localfs" 或 "https://host:port/api/v1/proxy/localfs"
|
||||
*/
|
||||
export function setFileServerBase(base: string): void {
|
||||
_fileServerBase = base
|
||||
}
|
||||
|
||||
/**
|
||||
* 将相对路径图片 src 解析为文件服务器 URL
|
||||
* - 绝对路径（Windows: D:/...、Unix: /usr/...）、网络URL、data URI → 不转换
|
||||
* - 相对路径 → 基于当前文件目录解析为绝对路径，再编码为文件服务器 URL
|
||||
*/
|
||||
function resolveImageUrl(src: string, fileServerBase: string): string {
|
||||
if (!src) return src
|
||||
// 不转换：绝对路径（Windows 盘符）、网络协议、锚点、data URI
|
||||
if (/^(?:[a-zA-Z]:[/\\]|\/(?:[^/]|$)|https?:|ftp:|data:|#)/i.test(src)) return src
|
||||
|
||||
// 解析相对路径（处理 ../ 和 ./）
|
||||
const dir = _currentFileDir || '/'
|
||||
const sep = dir.includes('\\') ? '\\' : '/'
|
||||
let resolved = normalizeRelativePath(dir, src, sep)
|
||||
|
||||
// 编码路径（保留 / 分隔符）
|
||||
const encoded = encodeURIComponent(resolved).replace(/%2F/gi, '/').replace(/%5C/gi, '\\')
|
||||
return `${fileServerBase}/${encoded}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 规范化相对路径，处理 .. 和 . 段
|
||||
*/
|
||||
function normalizeRelativePath(base: string, relative: string, sep: string): string {
|
||||
// 确保基础路径不以分隔符结尾
|
||||
let baseNormalized = base.replace(/[\\/]+$/, '')
|
||||
if (!baseNormalized) baseNormalized = sep === '/' ? '/' : 'C:\\'
|
||||
|
||||
const baseParts = baseNormalized.split(sep).filter(Boolean)
|
||||
const relParts = relative.split(/[\\/]/).filter(Boolean)
|
||||
|
||||
for (const part of relParts) {
|
||||
if (part === '..') {
|
||||
baseParts.pop() // 向上一级
|
||||
} else if (part !== '.') {
|
||||
baseParts.push(part)
|
||||
}
|
||||
}
|
||||
|
||||
// 重建路径：Windows 绝对路径保留盘符前缀
|
||||
if (/^[a-zA-Z]:$/i.test(baseNormalized.split(sep)[0] || '')) {
|
||||
return baseParts.join(sep)
|
||||
}
|
||||
// Unix 风格：以 / 开头
|
||||
return sep + baseParts.join(sep)
|
||||
}
|
||||
|
||||
// 判断是否为本地文件链接（相对路径或本地绝对路径）
|
||||
const isLocalFileLink = (href: string): boolean => {
|
||||
if (!href) return false
|
||||
if (/^(https?|ftp|mailto|tel|data):/i.test(href)) return false
|
||||
if (href.startsWith('#')) return false
|
||||
return true
|
||||
}
|
||||
|
||||
// 自定义图片渲染器 - 转换相对路径为文件服务器 URL
|
||||
renderer.image = function(token: any) {
|
||||
const src = token.href || ''
|
||||
const title = token.title || ''
|
||||
const alt = token.text || ''
|
||||
const titleAttr = title ? ` title="${title}"` : ''
|
||||
|
||||
// 判断是否需要转换（仅处理相对路径，且当前目录已设置）
|
||||
if (_currentFileDir && !/^(?:[a-zA-Z]:[/\\]|\/(?:[^/]|$)|https?:|ftp:|data:|#)/i.test(src)) {
|
||||
const resolvedSrc = resolveImageUrl(src, _fileServerBase)
|
||||
return `<img src="${resolvedSrc}" alt="${alt}"${titleAttr}>`
|
||||
}
|
||||
|
||||
// 默认渲染（绝对路径 / 网络 URL / data URI / 未设置目录时原样输出）
|
||||
return `<img src="${src}" alt="${alt}"${titleAttr}>`
|
||||
}
|
||||
|
||||
// 自定义链接渲染器 - 支持本地文件链接
|
||||
renderer.link = function(token: any) {
|
||||
const href = token.href || ''
|
||||
const text = this.parser.parseInline(token.tokens) || token.text || ''
|
||||
const title = token.title || ''
|
||||
const titleAttr = title ? ` title="${title}"` : ''
|
||||
|
||||
if (href.startsWith('#')) {
|
||||
return `<a href="${href}${titleAttr}">${text}</a>`
|
||||
}
|
||||
|
||||
if (isLocalFileLink(href)) {
|
||||
return `<a href="javascript:void(0)" data-local-link="${href}" class="local-file-link"${titleAttr}>${text}</a>`
|
||||
}
|
||||
|
||||
return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`
|
||||
}
|
||||
|
||||
marked.use({ renderer, breaks: true, gfm: true, async: false })
|
||||
|
||||
export { marked }
|
||||
|
||||
export async function renderMermaidDiagrams() {
|
||||
const mermaid = await loadMermaid()
|
||||
if (mermaid) {
|
||||
// 渲染前保存原始源码（textContent 在 SVG 渲染后会变成 CSS 垃圾）
|
||||
document.querySelectorAll('.mermaid:not([data-mermaid-src])').forEach(pre => {
|
||||
;(pre as HTMLElement).setAttribute('data-mermaid-src', pre.textContent || '')
|
||||
})
|
||||
await mermaid.run()
|
||||
}
|
||||
}
|
||||
|
||||
/** 清除已渲染内容并重新渲染（用于主题切换后刷新） */
|
||||
export async function rerenderMermaidDiagrams(container?: HTMLElement | null) {
|
||||
// 强制重新加载（清除缓存，让下次 loadMermaid 重新初始化新主题）
|
||||
mermaidInstance = null
|
||||
mermaidTheme = null
|
||||
|
||||
const target = container || document
|
||||
target.querySelectorAll('.mermaid').forEach(pre => {
|
||||
const el = pre as HTMLElement
|
||||
if (el.getAttribute('data-processed')) {
|
||||
// 从保存的原始源码恢复，而非 textContent（SVG 的 textContent 是 CSS 垃圾）
|
||||
el.innerHTML = el.getAttribute('data-mermaid-src') || ''
|
||||
el.removeAttribute('data-processed')
|
||||
}
|
||||
})
|
||||
await renderMermaidDiagrams()
|
||||
}
|
||||
Reference in New Issue
Block a user