AI UP LAB / 页面模式Page patterns / v1.2.1

首页、分类与详情模板Home, section & detail patterns

按用户意图选择最小必要结构:发现内容、直接浏览、定向查找或理解用法。Choose the smallest useful structure for discovery, browsing, targeted search, or understanding a resource.

查看示例Explore exampleMarkdown ↓

01 / LIVE SPECIMEN

实际示例Working example

示例 / 可操作的状态标有按钮EXAMPLE / Interactive states have controls

02 / STRUCTURE & RULES

组成与使用规则Anatomy & usage

  1. 01首页:主推与补充 → 最近更新 → 目录 → 入门入口。Home: lead and supporting picks → recent updates → sections → starter guides.
  2. 02分类:标题与简介 → 数量 → 最新列表 → 继续展开。Category: title and description → count → newest entries → progressive reveal.
  3. 03详情:用途 → 来源与日期 → 用法与限制 → 相关资源。Detail: purpose → source and dates → usage and limits → related resources.
  4. 04搜索:查询与筛选 → 结果数量 → 结果 / 空状态。Search: query and filters → count → results or empty state.

必须遵守Required behavior

  • 内容量与用户目标决定是否需要筛选;分类首页不默认继承搜索页复杂度。Content volume and user intent determine filtering; categories do not inherit search complexity by default.
  • 首页精选优先看质量与具体用途,不用最新日期代替推荐理由。Select editorial picks by usefulness, not by treating recency as a recommendation.
  • 不要在示例里伪造用户量、效果提升、评分或核验时间。Do not fabricate user counts, performance gains, ratings, or verification dates.
  • 复用现有详情 URL、收藏键和静态阅读能力。Preserve existing detail URLs, saved keys, and static reading.

推荐做法Do

三个真正值得看的推荐,比十个没有理由的占位模块更有用。Three justified picks are more useful than ten unexplained placeholder modules.

避免做法Avoid

照搬电商价格、优惠券和促销倒计时到 AI 资源目录。Copy prices, coupons, or promotional countdowns into an AI resource directory.

03 / PARAMETERS

参数与状态Parameters & states

参数Parameter取值Value用法Usage
home.featured1 lead + creative rail仅为首页主推与创意轨分配强层级。Reserve strong editorial hierarchy for the homepage lead and creative rail.
category.orderupdatedAt desc / key asc按已有更新日期排序,相同日期保持稳定顺序。Sort by existing update date, then stable key for ties.
detail.evidencesource + context区分来源核对、作者声称与操作实测。Distinguish source checks, author claims, and hands-on testing.

内容充足Enough content

保持精选与最新条目的角色区分,渐进展示长列表。Separate editorial and recent roles; progressively reveal long lists.

内容稀少Sparse content

使用直接列表,不填充无内容的大模块。Use a direct list without large empty modules.

定向查找Targeted search

进入独立搜索页,URL 保留条件便于分享。Use the dedicated search page with shareable URL state.

代码映射与 AI 使用Code mapping & AI use

先读取本项规则,再通过下列映射找到已有实现。调整共用组件时,同步检查依赖项。Read these rules, then locate the existing implementation below. Check dependencies when changing shared components.

实现片段Implementation fragment

组件片段需放入相应 Astro 文件上下文,按代码映射补齐导入。Place component fragments in the corresponding Astro context and complete imports from the code mappings.

import DirectoryListing from "../components/DirectoryListing.astro";

<h1><Loc zh="学习与工作流" en="Learning & workflows" /></h1>
<p><Loc zh="从教程开始实践。" en="Start with a practical guide." /></p>
<DirectoryListing section="learn" />

使用的设计变量Design tokens

--lab-width-content--lab-space-24--lab-space-48

相关规则Related rules

给 AI 的完整规则文本Full rules for AI
# 首页、分类与详情模板 / Home, section & detail patterns

ID: page-patterns
Version: 1.2.1

按用户意图选择最小必要结构:发现内容、直接浏览、定向查找或理解用法。

Choose the smallest useful structure for discovery, browsing, targeted search, or understanding a resource.

## Anatomy
- 首页:主推与补充 → 最近更新 → 目录 → 入门入口。
  Home: lead and supporting picks → recent updates → sections → starter guides.
- 分类:标题与简介 → 数量 → 最新列表 → 继续展开。
  Category: title and description → count → newest entries → progressive reveal.
- 详情:用途 → 来源与日期 → 用法与限制 → 相关资源。
  Detail: purpose → source and dates → usage and limits → related resources.
- 搜索:查询与筛选 → 结果数量 → 结果 / 空状态。
  Search: query and filters → count → results or empty state.

## Parameters
- home.featured: 1 lead + creative rail
  仅为首页主推与创意轨分配强层级。
  Reserve strong editorial hierarchy for the homepage lead and creative rail.
- category.order: updatedAt desc / key asc
  按已有更新日期排序,相同日期保持稳定顺序。
  Sort by existing update date, then stable key for ties.
- detail.evidence: source + context
  区分来源核对、作者声称与操作实测。
  Distinguish source checks, author claims, and hands-on testing.

## Rules
- 内容量与用户目标决定是否需要筛选;分类首页不默认继承搜索页复杂度。
  Content volume and user intent determine filtering; categories do not inherit search complexity by default.
- 首页精选优先看质量与具体用途,不用最新日期代替推荐理由。
  Select editorial picks by usefulness, not by treating recency as a recommendation.
- 不要在示例里伪造用户量、效果提升、评分或核验时间。
  Do not fabricate user counts, performance gains, ratings, or verification dates.
- 复用现有详情 URL、收藏键和静态阅读能力。
  Preserve existing detail URLs, saved keys, and static reading.

## States
- 内容充足 / Enough content: 保持精选与最新条目的角色区分,渐进展示长列表。
  Separate editorial and recent roles; progressively reveal long lists.
- 内容稀少 / Sparse content: 使用直接列表,不填充无内容的大模块。
  Use a direct list without large empty modules.
- 定向查找 / Targeted search: 进入独立搜索页,URL 保留条件便于分享。
  Use the dedicated search page with shareable URL state.

## Do / Avoid
- Do: 三个真正值得看的推荐,比十个没有理由的占位模块更有用。 / Three justified picks are more useful than ten unexplained placeholder modules.
- Avoid: 照搬电商价格、优惠券和促销倒计时到 AI 资源目录。 / Copy prices, coupons, or promotional countdowns into an AI resource directory.

## Code mapping
- src/components/HomeShell.astro: 编辑精选首页 / Editorial homepage
- src/pages/[section].astro: 分类页 / Category page
- src/pages/search.astro: 独立搜索页 / Dedicated search page

## Dependencies
resource-cards, navigation, feedback, layout

## Acceptance
- 首屏直接回答“这里有什么、下一步做什么”。
  The viewport answers what is here and what to do next.
- 每个模块都有真实内容来源与明确目的。
  Each module has a real content source and purpose.
- 页面稀疏、空结果和长列表都有合理结构。
  Sparse, empty-result, and long-list pages have appropriate structures.

## Implementation example
```
import DirectoryListing from "../components/DirectoryListing.astro";

<h1><Loc zh="学习与工作流" en="Learning & workflows" /></h1>
<p><Loc zh="从教程开始实践。" en="Start with a practical guide." /></p>
<DirectoryListing section="learn" />
```

## Reference
Method reference: https://tmall-design.com/#case/feed
Rules, parameters, examples, and branding in this file are specific to AI UP LAB.
按任务整理 AI 工作说明 →Assemble a task-specific brief →

交付前检查Before delivery

  • 首屏直接回答“这里有什么、下一步做什么”。The viewport answers what is here and what to do next.
  • 每个模块都有真实内容来源与明确目的。Each module has a real content source and purpose.
  • 页面稀疏、空结果和长列表都有合理结构。Sparse, empty-result, and long-list pages have appropriate structures.

方法参考与适用边界Reference & scope

参考 Tmall Design 将规则、映射与代码关联的组织方法。本页参数、示例和品牌资产为 AI UP LAB 自身规范。Inspired by Tmall Design’s organization of rules, mappings, and code. Parameters, examples, and brand assets here are specific to AI UP LAB.

Tmall Design ↗