feat: 富文本编辑

This commit is contained in:
2026-04-16 16:20:52 +08:00
parent 295cf12899
commit 6acd0ccad0
8 changed files with 150 additions and 40 deletions

View File

@@ -88,17 +88,20 @@
padding-top: 6px;
}
.df-node-actions button {
.df-node-actions button,
.df-node-actions a {
font-size: 11px;
color: #6b7280;
cursor: pointer;
background: none;
border: none;
padding: 2px 0;
text-decoration: none;
transition: color 0.15s;
}
.df-node-actions button:hover {
.df-node-actions button:hover,
.df-node-actions a:hover {
color: #3b82f6;
}
@@ -256,11 +259,12 @@
const html = `
<div class="df-node-content">
<div class="df-node-header">${node.title}</div>
<div class="df-node-url">${node.html_url}</div>
<div class="df-node-url">${node.uri}</div>
${node.is_entry ? '<div><span class="df-node-badge">入口</span></div>' : ''}
<div class="df-node-actions">
<button onclick="event.stopPropagation(); Livewire.find('${@js($this->getId())}').mountAction('editPage', { id: ${node.id} })">编辑</button>
<button class="btn-danger" onclick="event.stopPropagation(); Livewire.find('${@js($this->getId())}').mountAction('deletePage', { id: ${node.id} })">删除</button>
<a href="${node.uri}" target="_blank" rel="noopener" onclick="event.stopPropagation()">预览</a>
</div>
</div>`;

View File

@@ -0,0 +1,71 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $page->title }}</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
color: #1f2937;
background: #f8fafc;
line-height: 1.7;
font-size: 16px;
}
article {
max-width: 820px;
margin: 0 auto;
padding: 40px 28px 80px;
}
article h1 { font-size: 28px; margin: 28px 0 16px; }
article h2 { font-size: 22px; margin: 24px 0 12px; }
article h3 { font-size: 18px; margin: 20px 0 10px; }
article p { margin: 12px 0; }
article ul, article ol { padding-left: 28px; margin: 12px 0; }
article li { margin: 4px 0; }
article img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
article a { color: #2563eb; text-decoration: underline; }
article blockquote {
border-left: 4px solid #cbd5e1;
background: #f1f5f9;
padding: 8px 16px;
margin: 12px 0;
color: #475569;
}
article code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.92em;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
article pre {
background: #0f172a;
color: #e2e8f0;
padding: 12px 16px;
border-radius: 8px;
overflow-x: auto;
}
article pre code { background: transparent; padding: 0; color: inherit; }
article table {
border-collapse: collapse;
width: 100%;
margin: 12px 0;
}
article th, article td {
border: 1px solid #e2e8f0;
padding: 8px 12px;
text-align: left;
}
article th { background: #f1f5f9; }
</style>
</head>
<body>
<article>
<h1>{{ $page->title }}</h1>
{!! $page->content !!}
</article>
</body>
</html>