feat(content): 网站卡片按 card_mode + 去 emoji 图标(内联SVG)

- Content.jsx 大/小图由 card_mode 决定,播放角标改内联SVG
- ContentDetail 动作条(点赞/转发/收藏/写留言)与留言区 emoji 全换内联SVG(Ic)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pine
2026-08-27 15:49:16 +08:00
parent 928be684eb
commit 14e52d7f73
2 changed files with 17 additions and 8 deletions
+2 -2
View File
@@ -29,7 +29,7 @@ export default function Content() {
<section className="section" style={{ marginTop: 8 }}>
{!loaded ? <p className="pf-muted">加载中</p> : items.length === 0
? <p className="pf-muted">暂无{CONTENT_CATS.find((c) => c.key === cat)?.label}内容</p>
: items.map((it, i) => <NewsCard key={it.id} it={it} big={i % 3 === 0} />)}
: items.map((it) => <NewsCard key={it.id} it={it} big={it.card_mode === 'big'} />)}
</section>
</ContentTemplate>
);
@@ -48,7 +48,7 @@ function NewsCard({ it, big }) {
{big && (
<div style={{ position: 'relative', aspectRatio: '16/9', background: `linear-gradient(135deg, ${m}, ${m}cc)` }}>
{img ? <img src={img} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
{it.video ? <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,.9)', color: '#111', display: 'grid', placeItems: 'center' }}></div> : null}
{it.video ? <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,.9)', display: 'grid', placeItems: 'center' }}><svg width="20" height="20" viewBox="0 0 24 24" fill="#111"><path d="M5 3l14 9-14 9V3z"/></svg></div> : null}
</div>
)}
<div style={{ padding: big ? '14px 16px 6px' : 0 }}>
+15 -6
View File
@@ -65,11 +65,11 @@ export default function ContentDetail() {
{/* 动作条 */}
<div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 24, paddingTop: 14, borderTop: '1px solid #222' }}>
<span className="pf-muted">👍 0{like ? ' · 已赞' : ''}</span>
<button type="button" className="action-btn" onClick={() => setLike(v => !v)}>👍 点赞</button>
<button type="button" className="action-btn" onClick={copyLink}> 转发</button>
<button type="button" className="action-btn" onClick={() => setFav(v => !v)}>{fav ? ' 已藏' : ' 收藏'}</button>
<button type="button" className="action-btn" onClick={() => document.querySelector('.cmt-input')?.scrollIntoView({ behavior: 'smooth' })}> 写留言</button>
<span className="pf-muted">{like ? '· 已赞' : ''}{like ? '' : '点赞 ' + 0}</span>
<button type="button" className="action-btn" onClick={() => setLike(v => !v)}><Ic icon="thumb" /> 点赞</button>
<button type="button" className="action-btn" onClick={copyLink}><Ic icon="share" /> 转发</button>
<button type="button" className="action-btn" onClick={() => setFav(v => !v)}><Ic icon="heart" />{fav ? ' 已藏' : ' 收藏'}</button>
<button type="button" className="action-btn" onClick={() => document.querySelector('.cmt-input')?.scrollIntoView({ behavior: 'smooth' })}><Ic icon="comment" /> 写留言</button>
</div>
{/* 阅读 + 留言 */}
@@ -80,7 +80,6 @@ export default function ContentDetail() {
<div className="cmt-input" style={{ display: 'flex', gap: 8 }}>
<input className="pf-input" style={{ flex: 1, background: '#17171b', border: '1px solid #2a2a2d', borderRadius: 8, padding: '8px 12px', color: '#eaeaea' }}
placeholder="写留言…" value={draft} onChange={(e) => setDraft(e.target.value)} />
<span style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#9b9b9b' }}>😊 🖼</span>
<Button variant="cta" disabled={sending || !draft.trim()} onClick={send}>发送</Button>
</div>
) : (
@@ -103,3 +102,13 @@ export default function ContentDetail() {
</ContentTemplate>
);
}
const ICONS = {
thumb: 'M4 10v11H2V10h2zM6 21h11a2 2 0 0 0 2-1.7l1.4-7A2 2 0 0 0 18.4 10H13l1-4.6A2 2 0 0 0 12 3l-1 2.6C10.4 8 9 10 6 10z',
share: 'M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13',
heart: 'M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z',
comment: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
};
function Ic({ icon }) {
return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9b9b9b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: '-2px' }}><path d={ICONS[icon]} /></svg>;
}