资源卡片与收藏Resource cards & favorites

# 资源卡片与收藏 / Resource cards & favorites

ID: resource-cards
Version: 1.2.1

把预览、用途、来源与下一步放在一个可扫描的单元里，帮助读者从发现进入详情。

Combine preview, purpose, source, and next action in a scannable unit that leads readers into a resource.

## Anatomy
- 可选预览 → 目录标签 → 标题 → 短简介 → 来源域名。
  Optional preview → section → title → short description → source host.
- 主链接包裹内容区域，收藏按钮作为相邻独立控件。
  The primary link wraps the content; the favorite button is a separate sibling.
- 稳定键由来源库与原始 id 组成，不能用当前列表位置替代。
  Stable keys combine source library and original ID, never list position.

## Parameters
- card.radius: 8px
  统一卡片边界，悬停仅强调边线。
  Consistent card edge; hover emphasizes the border only.
- card.title: 17px / mobile 15px
  桌面纵向卡片 / 手机紧凑卡片。
  Desktop vertical / compact mobile card.
- card.thumbnail: 16:10 / mobile 100×90px
  桌面封面比例与当前手机缩略图规格。
  Desktop cover ratio and current mobile thumbnail size.
- favorite.key: library:id
  与详情页和收藏页共用同一个稳定键。
  Share the stable key with detail and saved pages.

## Rules
- 短简介写具体用途，不重复长标题，也不把宣传语当事实。
  Describe a concrete purpose without repeating the title or presenting promotion as fact.
- 长标题可换行；优先保证产品名和用途可读。
  Wrap long titles and preserve readable product names and purpose.
- 无图条目仍然展示完整正文；不要补一个无关图片。
  Text-only entries retain full copy; do not fill the gap with unrelated imagery.
- 收藏不触发卡片导航；刷新与详情页之间保持同一状态。
  Saving must not navigate; preserve the state across refresh and detail views.

## States
- 有图 / 无图 / With / without image: 两者都能独立传达用途与来源，图像不决定是否可阅读。
  Both communicate purpose and source independently of imagery.
- 未收藏 / 已收藏 / Unsaved / saved: 图标、可读标签与 aria-pressed 同步；重复点击可以撤销。
  Synchronize icon, label, and aria-pressed; clicking again reverses it.
- 数据陈旧 / Stale data: 以真实核验日期和说明表达状态，不自动伪装成“已验证”。
  Use real review dates and explanations; never invent a verified badge.

## Do / Avoid
- Do: “CSS Bed：切换 HTML 的 CSS 主题”，附 cssbed.com 来源。 / CSS Bed: switch CSS themes for HTML, with the cssbed.com source.
- Avoid: “最强神器，效率暴涨 100 倍”，没有来源或使用条件。 / The ultimate tool: 100× faster, with no source or requirements.

## Code mapping
- src/components/DirectoryCard.astro: 卡片结构与链接 / Card anatomy and links
- src/components/FavButton.astro: 收藏按钮 / Favorite control
- src/lib/directory.ts: 统一内容对象 / Unified resource objects

## Dependencies
foundations, layout, buttons

## Acceptance
- 无图、长中文标题和长英文域名均不溢出。
  Missing images, long Chinese titles, and long hosts do not overflow.
- 收藏与详情跳转可以分别用键盘触发。
  Keyboard users can save and navigate independently.
- 来源库 id 与旧收藏键保持兼容。
  Source IDs remain compatible with existing saved keys.

## Implementation example
```
import DirectoryCard from "../components/DirectoryCard.astro";
import { entries } from "../lib/directory";
const entry = entries.find(item => item.key === "html:css-bed");

{entry && <DirectoryCard entry={entry} />}
```

## Reference
Method reference: https://tmall-design.com/#style/component/product-card
Rules, parameters, examples, and branding in this file are specific to AI UP LAB.