john
e2ad3bf62b
- 新增 public share widget 与 workspace relative path 解析 - 增强 publications/chat-plaza 发布链路与缩略图 demo - 补充 schema、cover 检查脚本与回归测试 Co-authored-by: Cursor <cursoragent@cursor.com>
332 lines
13 KiB
JavaScript
332 lines
13 KiB
JavaScript
import { appendPlazaEmbedQuery } from './plaza-embed.mjs';
|
|
import { resolvePlazaCoverUrl } from './plaza-posts.mjs';
|
|
|
|
function plazaError(message, code) {
|
|
return Object.assign(new Error(message), { code });
|
|
}
|
|
|
|
export function escapePublicHtml(value) {
|
|
return String(value ?? '')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
export async function loadPlazaPublicPost(pool, postId, { devPreview = false } = {}) {
|
|
const [rows] = await pool.query(
|
|
`SELECT pp.id, pp.title, pp.summary, pp.status, pp.cover_url,
|
|
pr.public_url, pr.status AS publication_status
|
|
FROM plaza_posts pp
|
|
JOIN h5_publish_records pr ON pr.id = pp.publication_id
|
|
WHERE pp.id = ? AND pp.status != 'hidden'
|
|
LIMIT 1`,
|
|
[postId],
|
|
);
|
|
const row = rows[0];
|
|
if (!row) throw plazaError('帖子不存在或已隐藏', 'POST_NOT_FOUND');
|
|
if (row.publication_status !== 'online') {
|
|
throw plazaError('关联发布未上线', 'PUBLICATION_NOT_ONLINE');
|
|
}
|
|
if (row.status !== 'published') {
|
|
const allowPreview = devPreview && row.status === 'pending_review';
|
|
if (!allowPreview) throw plazaError('帖子不存在或已隐藏', 'POST_NOT_FOUND');
|
|
}
|
|
return row;
|
|
}
|
|
|
|
export function buildPublicationUrl(publicUrl, portalBase) {
|
|
const value = String(publicUrl ?? '').trim();
|
|
if (!value) return null;
|
|
if (/^https?:\/\//i.test(value)) return value;
|
|
const base = String(portalBase ?? '').replace(/\/$/, '');
|
|
if (value.startsWith('/')) return `${base}${value}`;
|
|
return `${base}/${value.replace(/^\/+/, '')}`;
|
|
}
|
|
|
|
export function renderPlazaPostRedirectHtml(post, targetUrl, { preview = false } = {}) {
|
|
const title = escapePublicHtml(post.title);
|
|
const summary = escapePublicHtml(post.summary);
|
|
const iframeUrl = appendPlazaEmbedQuery(targetUrl);
|
|
const safeTarget = escapePublicHtml(targetUrl);
|
|
const safeIframeUrl = escapePublicHtml(iframeUrl);
|
|
const previewNote = preview
|
|
? '<p class="preview">开发预览：该帖子尚未审核通过，仅本地可见。</p>'
|
|
: '';
|
|
|
|
return `<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>${title}</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: #f6f3eb;
|
|
color: #17221d;
|
|
font: 16px/1.7 ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.post-shell {
|
|
width: min(1180px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 24px 0 48px;
|
|
}
|
|
.post-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.post-back {
|
|
color: #405048;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
.post-open {
|
|
color: #8f6b2f;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
main {
|
|
width: 100%;
|
|
padding: 28px;
|
|
border-radius: 24px;
|
|
background: rgba(255, 253, 247, 0.92);
|
|
border: 1px solid rgba(23, 34, 29, 0.08);
|
|
box-shadow: 0 20px 60px rgba(45, 53, 47, 0.08);
|
|
}
|
|
h1 { margin: 0 0 12px; font-size: 28px; line-height: 1.15; }
|
|
p { margin: 0 0 12px; color: #56615b; }
|
|
a { color: #8f6b2f; }
|
|
.preview {
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(143, 107, 47, 0.08);
|
|
color: #6f5528;
|
|
}
|
|
.post-frame {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
border: 0;
|
|
border-radius: 18px;
|
|
background: #fff;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.post-shell {
|
|
width: min(100%, calc(100% - 20px));
|
|
padding: 14px 0 24px;
|
|
}
|
|
.post-topbar {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
main {
|
|
padding: 18px;
|
|
border-radius: 18px;
|
|
}
|
|
.post-frame {
|
|
border-radius: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="post-shell">
|
|
<div class="post-topbar">
|
|
<a class="post-back" href="/plaza">返回广场</a>
|
|
<a class="post-open" href="${safeTarget}">单独打开原页面</a>
|
|
</div>
|
|
<main>
|
|
<h1>${title}</h1>
|
|
${summary ? `<p>${summary}</p>` : ''}
|
|
${previewNote}
|
|
<iframe class="post-frame" title="${title}" src="${safeIframeUrl}" sandbox="allow-scripts"></iframe>
|
|
<p><a href="${safeTarget}">若页面未正常加载，可点击这里直接打开</a></p>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var frame = document.querySelector('.post-frame');
|
|
if (!frame) return;
|
|
var appliedHeight = 420;
|
|
function applyHeight(height) {
|
|
var next = Math.max(Number(height) || 0, 420);
|
|
if (
|
|
appliedHeight > 420 &&
|
|
next > appliedHeight &&
|
|
frame.offsetHeight > 420 &&
|
|
next <= frame.offsetHeight + 24
|
|
) {
|
|
return appliedHeight;
|
|
}
|
|
appliedHeight = Math.max(next, window.innerHeight, 420);
|
|
frame.style.height = appliedHeight + 'px';
|
|
return appliedHeight;
|
|
}
|
|
function measureFrameDocument() {
|
|
try {
|
|
var doc = frame.contentDocument;
|
|
var body = doc && doc.body;
|
|
if (!body) return 0;
|
|
var scrollTop = (doc.documentElement && doc.documentElement.scrollTop) || body.scrollTop || 0;
|
|
var measured = 0;
|
|
var blocks = body.querySelectorAll('.hero,.section,.quote-section,.footer,main,article');
|
|
for (var i = 0; i < blocks.length; i += 1) {
|
|
var el = blocks[i];
|
|
var rect = el.getBoundingClientRect();
|
|
measured = Math.max(measured, rect.bottom + scrollTop, el.offsetTop + el.offsetHeight);
|
|
}
|
|
for (var j = 0; j < body.children.length; j += 1) {
|
|
var child = body.children[j];
|
|
var childRect = child.getBoundingClientRect();
|
|
measured = Math.max(measured, childRect.bottom + scrollTop, child.offsetTop + child.offsetHeight);
|
|
}
|
|
return Math.ceil(Math.max(measured, 420));
|
|
} catch (error) {
|
|
return 0;
|
|
}
|
|
}
|
|
function syncFrameHeight() {
|
|
applyHeight(measureFrameDocument() || frame.offsetHeight || window.innerHeight);
|
|
}
|
|
frame.addEventListener('load', function () {
|
|
syncFrameHeight();
|
|
[120, 400, 1000, 2000].forEach(function (delay) {
|
|
window.setTimeout(syncFrameHeight, delay);
|
|
});
|
|
});
|
|
window.addEventListener('message', function (event) {
|
|
if (event.source && event.source !== frame.contentWindow) return;
|
|
if (!event || !event.data || event.data.type !== 'plaza:embed-section') return;
|
|
if (event.data.height) applyHeight(event.data.height);
|
|
});
|
|
window.addEventListener('resize', function () {
|
|
syncFrameHeight();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
export function attachPlazaPublicRoutes(app, { pool, portalBase, devPreview = false }) {
|
|
app.get('/plaza/p/:postId', async (req, res) => {
|
|
if (!pool) return res.status(503).send('Plaza 未启用');
|
|
try {
|
|
const post = await loadPlazaPublicPost(pool, req.params.postId, { devPreview });
|
|
const targetUrl = buildPublicationUrl(post.public_url, portalBase);
|
|
if (!targetUrl) return res.status(404).send('内容链接不存在');
|
|
res.set('Content-Type', 'text/html; charset=utf-8');
|
|
res.set('Cache-Control', post.status === 'published' ? 'public, max-age=60' : 'private, no-store');
|
|
return res.send(
|
|
renderPlazaPostRedirectHtml(post, targetUrl, {
|
|
preview: devPreview && post.status === 'pending_review',
|
|
}),
|
|
);
|
|
} catch (error) {
|
|
if (error?.code === 'POST_NOT_FOUND') return res.status(404).send('帖子不存在或已隐藏');
|
|
if (error?.code === 'PUBLICATION_NOT_ONLINE') return res.status(404).send('关联发布未上线');
|
|
return res.status(500).send('页面加载失败');
|
|
}
|
|
});
|
|
|
|
app.get(['/plaza', '/plaza/'], async (_req, res) => {
|
|
if (!pool) return res.status(503).send('Plaza 未启用');
|
|
try {
|
|
const [categoryRows] = await pool.query(
|
|
`SELECT slug, name, icon FROM plaza_categories WHERE is_active = 1 ORDER BY sort_order ASC`,
|
|
);
|
|
const [postRows] = await pool.query(
|
|
`SELECT pp.id, pp.title, pp.summary, pp.cover_url, pp.published_at,
|
|
pr.public_url AS public_url,
|
|
c.name AS category_name, c.slug AS category_slug, c.icon AS category_icon,
|
|
u.slug AS user_slug, u.display_name AS user_display_name
|
|
FROM plaza_posts pp
|
|
JOIN plaza_categories c ON c.id = pp.category_id
|
|
JOIN h5_publish_records pr ON pr.id = pp.publication_id
|
|
JOIN h5_users u ON u.id = pp.user_id
|
|
WHERE pp.status = 'published'
|
|
ORDER BY pp.hot_score DESC, pp.id DESC
|
|
LIMIT 24`,
|
|
);
|
|
|
|
const cards = postRows
|
|
.map((post) => {
|
|
const title = escapePublicHtml(post.title);
|
|
const summary = escapePublicHtml(post.summary);
|
|
const author = escapePublicHtml(post.user_display_name || post.user_slug);
|
|
const category = escapePublicHtml(`${post.category_icon ?? ''} ${post.category_name ?? ''}`.trim());
|
|
const coverUrl = escapePublicHtml(resolvePlazaCoverUrl(post.cover_url, post.public_url));
|
|
const href = `/plaza/p/${encodeURIComponent(post.id)}`;
|
|
return `<a class="card" href="${href}">
|
|
<div class="card-cover">
|
|
<img src="${coverUrl}" alt="${title} 封面预览" loading="lazy" />
|
|
</div>
|
|
<div class="card-top"><span>${category}</span><span>${author}</span></div>
|
|
<h2>${title}</h2>
|
|
${summary ? `<p>${summary}</p>` : ''}
|
|
</a>`;
|
|
})
|
|
.join('');
|
|
|
|
const categoryLinks = categoryRows
|
|
.map(
|
|
(category) =>
|
|
`<a href="/plaza/?category=${encodeURIComponent(category.slug)}">${escapePublicHtml(`${category.icon ?? ''} ${category.name}`.trim())}</a>`,
|
|
)
|
|
.join('');
|
|
|
|
res.set('Content-Type', 'text/html; charset=utf-8');
|
|
res.set('Cache-Control', 'public, max-age=30');
|
|
return res.send(`<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>TKMind 发现广场</title>
|
|
<style>
|
|
body { margin: 0; background: #f6f3eb; color: #17221d; font: 16px/1.7 ui-sans-serif, system-ui, sans-serif; }
|
|
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 72px; }
|
|
.hero { padding-bottom: 28px; border-bottom: 1px solid rgba(23, 34, 29, .12); }
|
|
.eyebrow { margin: 0 0 12px; color: #8f6b2f; font: 700 12px/1.4 ui-sans-serif, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
|
|
h1 { margin: 0; font-size: clamp(36px, 7vw, 72px); line-height: .98; letter-spacing: -.05em; }
|
|
.lead { max-width: 720px; margin: 16px 0 0; color: #56615b; }
|
|
.categories { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
|
|
.categories a { text-decoration: none; color: #405048; border: 1px solid rgba(23,34,29,.12); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.6); }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 32px; }
|
|
.card { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 22px; border-radius: 24px; text-decoration: none; color: inherit; background: rgba(255,253,247,.92); border: 1px solid rgba(23,34,29,.08); box-shadow: 0 20px 60px rgba(45,53,47,.08); }
|
|
.card-cover { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 18px; background: linear-gradient(160deg, #f3eee6 0%, #e7efe9 100%); }
|
|
.card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
.card:hover { transform: translateY(-2px); }
|
|
.card-top, .card-foot { display: flex; justify-content: space-between; gap: 12px; font: 600 12px/1.4 ui-sans-serif, sans-serif; color: #6a746f; text-transform: uppercase; letter-spacing: .08em; }
|
|
.card h2 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
|
|
.card p { margin: 0; color: #56615b; font-size: 15px; }
|
|
.empty { margin-top: 32px; padding: 28px; border-radius: 24px; background: rgba(255,253,247,.76); border: 1px dashed rgba(23,34,29,.18); color: #56615b; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="hero">
|
|
<p class="eyebrow">TKMind Plaza</p>
|
|
<h1>发现广场</h1>
|
|
<p class="lead">浏览公开发布的 MindSpace 作品。点击卡片进入帖子详情页。</p>
|
|
${categoryLinks ? `<div class="categories">${categoryLinks}</div>` : ''}
|
|
</section>
|
|
${
|
|
cards
|
|
? `<section class="grid">${cards}</section>`
|
|
: '<section class="empty">广场还没有已发布的帖子。发布到 Plaza 并通过审核后会出现在这里。</section>'
|
|
}
|
|
</main>
|
|
</body>
|
|
</html>`);
|
|
} catch {
|
|
return res.status(500).send('广场首页加载失败');
|
|
}
|
|
});
|
|
}
|