feat: 富文本编辑
This commit is contained in:
@@ -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>`;
|
||||
|
||||
|
||||
71
resources/views/guides/page.blade.php
Normal file
71
resources/views/guides/page.blade.php
Normal 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>
|
||||
Reference in New Issue
Block a user