feat: enhance components and layouts for improved accessibility and navigation

README.md

@@ -57,7 +57,9 @@ src/
 
 - 文档位于 `src/content/docs/{series}/`，其中 `index.md` 是系列入口。
 - 访谈位于 `src/content/interviews/`，单篇 Markdown 对应一个详情页。
-- 三类内容统一公开日期和阅读时间；动态通过日期和精选状态组织。
+- 三类内容统一公开日期和阅读时间，并通过 `tone: light | mid | dark` 配置单篇视觉色调；文档、访谈和动态均可将任意多篇内容设置为 `featured: true`，集合页会将它们组成精选展板，未指定时自动突出一篇内容。
+- 精选展板是否自动翻页及翻页间隔统一在 `src/data/site.ts` 的 `featuredCarouselConfig` 中按栏目配置。
+- 访谈使用 `affiliation` 记录系所；设置 `anonymous: true` 时隐藏姓名，未提供系所则显示“系所信息保密”。
 - 内容字段由 `src/content.config.ts` 校验。
 - 默认语言为简体中文；当前不配置多语言路由。
 

docs/components.md

@@ -18,7 +18,11 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 
 ### `SiteFooter.astro`
 
-全站页脚，组合站点标记、公共导航、组织说明与版权信息。它没有 Props，导航和版权数据来自 `src/data/site.ts`。
+全站页脚，组合组织标识、Slogan、板块导航、纯图标形式的 GitHub、微信公众号、小红书、哔哩哔哩和知乎链接，以及版权声明和备案信息。它没有 Props，所有内容均来自 `src/data/site.ts` 的 `siteNav` 与 `footerConfig`；更换媒体地址或备案号时不需要修改组件。标准品牌 SVG 下载自 Simple Icons，并保存在 `public/icons/social/`。
+
+### `ScrollToTop.astro`
+
+全站右下角的返回顶部按钮。滚动距离超过视口高度的约一半后显示，点击后平滑返回页面顶部；减少动态效果偏好开启时改为立即返回。组件由 `BaseLayout` 统一挂载，不需要页面单独引用。
 
 ## UI components
 
@@ -42,12 +46,12 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 
 ### `PageIntro.astro`
 
-集合页顶部的栏目名称、主标题、导语和编号。通常由 `CollectionLayout` 调用，不在页面中重复组合。
+集合页顶部的栏目名称、主标题、导语和中性站点标识。通常由 `CollectionLayout` 调用，不在页面中重复组合。
 
 - `eyebrow: string`：栏目名称。
 - `title: string`：页面主标题。
 - `description: string`：页面导语。
-- `index?: string`：栏目编号，默认 `01`。
+- `marker: string`：右上角不参与正文语义的英文栏目标识。
 
 ### `SectionHeading.astro`
 
@@ -58,28 +62,102 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 - `noteHref?: string`：存在时将说明渲染为链接。
 - `className?: string`：附加样式类。
 
+### `ArrowRight.astro`
+
+`ActionLink` 图标插槽共用的右箭头，避免在页面中内联重复 SVG。
+
+- `wide?: boolean`：使用宽幅（32×24）版本，用于关于页 CTA；默认标准（24×24）版本。
+- 使用时添加 `slot="icon"` 传入 `ActionLink`。
+
 ## Content components
 
+### `CollectionIndex.astro`
+
+文档、访谈、动态三个集合索引页共用的页面骨架。它组合 `CollectionLayout`、`FeaturedContentCarousel`、`SectionHeading` 与 `PaginatedContentList`，三个索引页只负责查询和规范化数据后传入。
+
+- `section: 'docs' | 'interviews' | 'news'`：栏目标识，用于读取文案配置、轮播配置和分页数据分片。
+- `featured: ContentListItem[]`：精选内容。
+- `listing: ContentListItem[]`：完整列表数据。
+- 各栏目文案（标题、导语、标识、列表标题等）集中维护在 `src/data/sections.ts` 的 `collectionSections`，轮播自动翻页配置仍在 `src/data/site.ts` 的 `featuredCarouselConfig`。
+
+### `ContentVisual.astro`
+
+按 `ContentListItem` 的 `visual` 字段选择并渲染对应的视觉组件（`DocumentArt`、`InterviewArt` 或 `NewsArt`），让 `FeaturedContentCarousel` 与 `PaginatedContentList` 不必各自维护类型映射。
+
+- `visual: 'documents' | 'interviews' | 'news'`：视觉类型。
+- `tone?: 'light' | 'mid' | 'dark'`：视觉明度，默认 `mid`。
+- `large?: boolean`：大幅展示尺寸。
+
+### `FeaturedContentCarousel.astro`
+
+文档、动态与访谈集合页共用的精选滚动展板。它接收所有 `featured: true` 的内容，以 `FeaturedContentCard` 为单张展板，提供循环前后翻页、动态圆点索引和可选的自动翻页；仅有一篇精选时自动隐藏全部控制项。
+
+- `items: ContentListItem[]`：已经规范化和排序的精选内容，可以包含多篇。
+- `autoplay?: boolean`：是否自动翻页，默认关闭。
+- `interval?: number`：自动翻页间隔，单位为毫秒；为保证阅读时间，组件最低采用 3000 毫秒。
+- `label?: string`：轮播区域的无障碍名称。
+- 自动翻页由 `src/data/site.ts` 的 `featuredCarouselConfig` 分栏目配置，不在界面中展示额外的播放控制；鼠标悬停、键盘焦点进入或页面进入后台时会暂时停止计时。
+- 首尾使用无障碍隐藏的克隆展板衔接，点击同一方向的翻页按钮时始终保持一致的运动方向。
+- 系统开启“减少动态效果”时不启用自动翻页，并将滑动过渡降至最低。
+
+### `FeaturedContentCard.astro`
+
+文档、动态与访谈集合页共用的单张精选内容卡片，也是 `FeaturedContentCarousel` 的基础展板。组件统一双栏布局、日期与阅读时间、标题、简介和 Hover 状态，不绑定内容类型或具体视觉图案。
+
+- `href: string`：内容详情页地址。
+- `title: string`：内容标题。
+- `summary?: string`：可选简介；访谈等不需要简介的内容可以省略。
+- `publishedAt: Date`：发布日期。
+- `readTime: string`：阅读时间。
+- `visual` 命名插槽：左侧的 `DocumentArt`、`InterviewArt` 或 `NewsArt`。
+- `footer` 命名插槽：可选的类型专属补充信息，例如访谈嘉宾与所属机构。
+
+### `ContentListCard.astro`
+
+文档、动态与访谈目录共用的横向内容卡片。组件统一视觉图、元信息、标题和简介的结构，并在窄屏下自动切换为纵向排列。访谈目录将访谈篇章标题作为标题、“受访者姓名＋所属机构”作为简介，保持组件本身与内容类型解耦。
+
+- `href: string`：内容详情页地址。
+- `title: string`：内容标题。
+- `summary?: string`：可选简介。
+- `publishedAt: Date`：发布日期。
+- `readTime: string`：阅读时间。
+- `visual` 命名插槽：内容类型对应的抽象视觉组件。
+
+### `PaginatedContentList.astro`
+
+文档、访谈与动态目录共用的页内分页列表。Astro 在首屏静态渲染前六项，其余页面由构建期生成的静态 JSON 分片提供；用户通过动态小点索引和前后箭头切换固定大小的目录页，列表内容会被替换而不是持续追加。栏目 URL 始终保持不变，也不引入前端框架运行时。
+
+- `items: ContentListItem[]`：已经规范化和排序的列表数据。
+- `section: 'docs' | 'interviews' | 'news'`：用于定位对应的静态数据分片。
+- `className?: string`：附加到实际列表容器的样式类。
+- 分页大小统一由 `src/utils/contentListing.ts` 的 `LIST_PAGE_SIZE` 控制。
+- 总页数超过九页时，索引只保留首尾页和当前页附近的分页点，其余范围使用省略标识隐藏。
+
 ### `NewsArt.astro`
 
-动态列表和文章头部使用的抽象地学视觉。
+动态列表和文章头部使用的圆形玻璃面、涟漪纹理与倾斜星环视觉，左上角固定显示 `GEO / NEWS`。
 
 - `tone?: 'light' | 'mid' | 'dark'`：视觉明度，默认 `mid`。
-- `index?: string`：图内编号或短标签。
 - `large?: boolean`：文章头图尺寸。
 
-### `PortraitArt.astro`
+### `InterviewArt.astro`
 
-访谈列表和文章头部使用的人物抽象视觉。
+访谈列表和文章头部使用的三角形玻璃面与斜向细线纹理视觉，左上角固定显示 `GEO / INTERVIEWS`。
 
-- `initials: string`：受访者姓名缩写。
 - `tone?: 'light' | 'mid' | 'dark'`：视觉明度，默认 `mid`。
-- `issue?: string`：期号或精选标签。
 - `large?: boolean`：大幅展示尺寸。
 
+### `DocumentArt.astro`
+
+文档目录和阅读页使用的方形玻璃面与细密网格纹理视觉，左上角固定显示 `GEO / DOCUMENTS`。
+
+- `tone?: 'light' | 'mid' | 'dark'`：视觉明度，默认 `mid`。
+- `large?: boolean`：精选区或文章头图尺寸。
+
 ## 组件约定
 
 - Props 使用 `interface Props` 定义。
 - 通用组件不绑定具体路由、作者或正文。
+- 集合页优先组合 `FeaturedContentCarousel`、`ContentListCard` 与对应的视觉组件；类型独有信息通过命名插槽传入。
 - 内容数据中的视觉变体只使用 `light`、`mid`、`dark`，具体颜色由全局样式控制。
 - 重复出现的展示结构优先抽成组件，不在页面中复制。

docs/layouts.md

@@ -22,32 +22,31 @@
 - `eyebrow: string`：栏目名称。
 - `heading: string`：页面主标题。
 - `intro: string`：页面导语。
-- `index: string`：栏目编号。
+- `marker: string`：页面介绍区右上角的英文栏目标识。
 - 默认插槽：集合页内容。
 
 ## `EditorialArticleLayout.astro`
 
-单篇访谈和单篇动态共用的长文章布局。通过 `variant` 调整两类内容的头部、视觉区、侧栏和正文宽度。
+单篇访谈和单篇动态共用的编辑内容布局。两类内容共享元信息、标题、导语与横贯页面的低高度视觉图；`interview` 在正文旁保留人物侧栏，`news` 则使用无侧栏的居中 Markdown 正文列。
 
 - `title: string`、`description: string`：文章标题和摘要。
-- `backHref: string`、`backLabel: string`：返回目录链接。
 - `variant: 'interview' | 'news'`：文章类型。
 - `eyebrow?: string`：未提供 `meta` 插槽时的备用信息。
 - `meta` 插槽：日期和阅读时间。
-- `visual` 插槽：`NewsArt`、`PortraitArt` 或真实图片。
-- `aside` 插槽：受访者简介或精简文章信息。
+- `visual` 插槽：`NewsArt`、`InterviewArt` 或真实图片。
+- `aside` 插槽：访谈页面的受访者简介；动态页面不使用。
 - 默认插槽：Markdown 正文。
 
 ## `DocumentReaderLayout.astro`
 
-文档系列的阅读布局，统一处理返回栏、系列导航、阅读进度、文章信息、正文、下一章节和页内目录。
+文档系列的阅读布局，统一处理精简的系列导航、文章信息、正文、前后翻页和页内目录。
 
 - `title: string`、`description?: string`：当前文档信息。
 - `publishedAt: Date`、`readTime: string`：公开元信息。
 - `seriesTitle: string`：系列名称。
-- `currentIndex: number`：当前章节位置。
 - `navigation`：系列章节导航数组。
 - `headings`：Astro 渲染得到的正文标题数组。
+- `previous?`：上一篇文档入口；不存在时不渲染。
 - `next?`：下一章节入口。
 - `visual` 插槽：可选的系列视觉。
 - 默认插槽：Markdown 正文。

docs/visual-style.md

@@ -12,9 +12,23 @@ GeoGenesis 使用克制的地球科学编辑风格：大面积采用石灰岩暖
 
 颜色用于表达层级和状态，不用于无意义装饰。
 
+## 样式文件组织
+
+全局样式位于 `src/styles/`，`global.css` 只负责按固定顺序导入各模块，不直接书写规则：
+
+- `tokens.css`：明暗主题的设计令牌。
+- `base.css`：元素重置、`shell`、`eyebrow` 等通用原子类和减少动态效果处理。
+- `layout/`：页头 `site-header.css` 与页脚 `site-footer.css`。
+- `ui/`：按钮 `buttons.css`、元信息行与栏目标题 `meta.css`、页首介绍 `page-intro.css`。
+- `content/`：内容卡片 `cards.css`、轮播 `carousel.css`、分页 `pagination.css`、三套内容视觉 `visuals.css`、长文排版 `prose.css`。
+- `pages/`：首页 `home.css`、集合索引 `collections.css`、文档阅读 `doc-reader.css`、文章页 `articles.css`、关于页 `about.css`。
+- `responsive/`：按断点集中的响应式覆盖（`1000.css`、`760.css`、`430.css`），始终在最后导入。
+
+导入顺序即层叠顺序：基础样式在前、页面样式在后、断点覆盖最后。新增样式时先归入对应模块，断点覆盖写入对应断点文件；不要在 `global.css` 中直接添加规则。
+
 ## 设计令牌
 
-令牌位于 `src/styles/global.css`。
+令牌位于 `src/styles/tokens.css`。
 
 | 令牌 | 用途 |
 | --- | --- |
@@ -39,7 +53,7 @@ GeoGenesis 使用克制的地球科学编辑风格：大面积采用石灰岩暖
 
 ## 内容视觉
 
-`PortraitArt`、`NewsArt` 和文档系列视觉使用 `light`、`mid`、`dark` 三档明度。实际色彩由全局样式控制，使内容数据不与某一版主题耦合。
+`DocumentArt`、`InterviewArt` 和 `NewsArt` 共享低饱和渐变与半透明玻璃质感，分别以方形加网格、三角形加斜线、圆形加涟漪与星环形成类别差异，并统一支持 `light`、`mid`、`dark` 三档色调。主几何形保持固定比例并越出画框，只展示约 70%，以适应不同比例的视觉容器。图片区域仅在左上角保留 `GEO / 类别` 标识，实际色彩由内容字段控制。
 
 首页地球图片保留低饱和自然色；页脚、深色卡片和关于页 CTA 使用接近黑色的深岩绿。长文阅读区始终保持中性背景，避免颜色干扰阅读。
 
@@ -48,4 +62,6 @@ GeoGenesis 使用克制的地球科学编辑风格：大面积采用石灰岩暖
 - 当前导航使用主题色文字，不添加圆点或粗下划线。
 - 主要按钮使用深海岩绿，悬停时仅轻微改变明度。
 - 正文链接、键盘焦点和阅读进度使用主题色。
+- 明暗切换使用无边框单图标按钮，只通过轻微底色和图标淡入淡出反馈状态。
+- 中文长篇正文以 18px 为桌面阅读基准，卡片摘要保持在 15–16px；装饰坐标等极小信息不低于 11px。
 - 动效保持轻微，并遵循 `prefers-reduced-motion`。