john
e2ad3bf62b
- 新增 public share widget 与 workspace relative path 解析 - 增强 publications/chat-plaza 发布链路与缩略图 demo - 补充 schema、cover 检查脚本与回归测试 Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
3.5 KiB
HTML
73 lines
3.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>MindSpace 缩略图 · 方案 A 对比</title>
|
||
<style>
|
||
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f4f0e7; color: #18211d; }
|
||
body { margin: 0; padding: 24px; max-width: 960px; }
|
||
h1 { margin: 0 0 8px; font-size: 28px; }
|
||
.lead { margin: 0 0 24px; color: #5f6963; line-height: 1.6; }
|
||
.compare { display: grid; gap: 28px; }
|
||
.sample { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(24,33,29,0.08); }
|
||
.sample h2 { margin: 0 0 8px; font-size: 20px; }
|
||
.hint { margin: 0 0 16px; font-size: 13px; color: #6d7771; }
|
||
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
|
||
.thumb { display: grid; gap: 8px; }
|
||
.thumb img { width: 100%; max-width: 270px; border-radius: 12px; box-shadow: 0 8px 24px rgba(24,33,29,0.12); }
|
||
.thumb span { font-size: 12px; line-height: 1.5; }
|
||
.thumb span.bad { color: #b45309; }
|
||
.thumb span.good { color: #2f6f57; }
|
||
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin-top: 18px; }
|
||
.feed-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(24,33,29,0.07); }
|
||
.feed-cover { aspect-ratio: 3 / 4; background: #ece7df; }
|
||
.feed-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.feed-body { padding: 10px 12px 12px; }
|
||
.feed-body h3 { margin: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||
.feed-body p { margin: 6px 0 0; font-size: 12px; color: #939c97; }
|
||
code { background: #f0ebe3; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>方案 A：mindspace-cover 对比 Demo</h1>
|
||
<p class="lead">
|
||
页面生成时在 <code><head></code> 写入 <code>mindspace-cover</code> 元数据并引用 hero 主图，
|
||
缩略图会从「纯色渐变」升级为「照片封面 + 标题」。
|
||
交付前可跑 <code>npm run check:mindspace-cover</code> 自检。
|
||
</p>
|
||
<div class="compare">
|
||
<section class="sample">
|
||
<h2>越南旅游指南</h2>
|
||
<p class="hint">左侧：未写 mindspace-cover（退化为纯色渐变） · 右侧：方案 A（完整元数据 + hero 主图）</p>
|
||
<div class="pair">
|
||
<div class="thumb">
|
||
<img src="./vietnam-guide-bad-feed.svg" alt="缺 cover" />
|
||
<span class="bad">❌ 缺 mindspace-cover · 无图 · tag=旅行</span>
|
||
</div>
|
||
<div class="thumb">
|
||
<img src="./vietnam-guide-good-feed.svg" alt="方案 A" />
|
||
<span class="good">✅ 方案 A · 照片封面 · tag=旅行</span>
|
||
</div>
|
||
</div>
|
||
<div class="feed-grid">
|
||
|
||
<article class="feed-card">
|
||
<div class="feed-cover"><img src="./vietnam-guide-bad-feed.svg" alt="越南旅游指南 预览图" /></div>
|
||
<div class="feed-body">
|
||
<h3>越南旅游指南</h3>
|
||
<p>缺 cover · 信息流效果</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feed-card">
|
||
<div class="feed-cover"><img src="./vietnam-guide-good-feed.svg" alt="越南旅游指南 预览图" /></div>
|
||
<div class="feed-body">
|
||
<h3>越南旅游指南</h3>
|
||
<p>方案 A · 信息流效果</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section></div>
|
||
</body>
|
||
</html> |