grove-vineyard

Grove Vineyard 技能

何时激活

在以下情况下激活此技能：

• 为 Grove 产品创建 /vineyard 路由
• 为现有 Vineyard 页面添加功能或演示
• 用户提到“vineyard”、“展示页面”或“工具演示页面”
• 为工具实现功能卡片、路线图或演示容器

什么是 Vineyard？

每个 Grove 产品都会在其子域上实现一个 /vineyard 路由，以一致的方式探索每个工具的功能、查看可运行的演示并了解路线图。

amber.grove.place/vineyard      → Storage showcase
ivy.grove.place/vineyard        → Email client showcase
foliage.grove.place/vineyard    → Theming showcase
meadow.grove.place/vineyard     → Social layer showcase
heartwood.grove.place/vineyard  → Auth showcase
forage.grove.place/vineyard     → Domain discovery showcase

软件包

Vineyard 位于 Lattice monorepo 的 libs/vineyard 中，并通过引擎重新导出。无需单独安装，它是 Lattice 的一部分。

import { VineyardLayout, FeatureCard, StatusBadge, ... } from '@autumnsgrove/lattice/vineyard';

可用组件

组件	用途
VineyardLayout	完整页面包装器——主视觉区域、状态徽章、理念引言、相关工具页脚
FeatureCard	展示功能，包含图标、状态、描述和可选的演示插槽
StatusBadge	状态标签：ready、preview、demo、coming-soon、in-development
DemoContainer	交互式演示的包装器，并显示模拟数据指示器
CodeExample	代码块，包含语言标签、文件名和复制到剪贴板功能
TierGate	基于等级的访问控制，提供模糊预览和升级提示
RoadmapSection	可视化时间线：已完成／进行中／计划中
AuthButton	Better Auth 登录／登出按钮
UserMenu	用户个人资料菜单，包含头像和电子邮箱

类型

type VineyardStatus = "ready" | "preview" | "demo" | "coming-soon" | "in-development";
type GroveTool =
	| "amber"
	| "ivy"
	| "foliage"
	| "meadow"
	| "rings"
	| "trails"
	| "heartwood"
	| "forage";
type GroveTier = "seedling" | "sapling" | "oak" | "grove";

最简实现

创建 src/routes/vineyard/+page.svelte：

<script lang="ts">
	import {
		VineyardLayout,
		FeatureCard,
		RoadmapSection,
		DemoContainer,
	} from "@autumnsgrove/lattice/vineyard";
</script>

<VineyardLayout tool="amber" tagline="Your files, preserved" status="preview">
	
	<div class="feature-grid">
		<FeatureCard
			title="Storage Overview"
			description="See usage across posts and media"
			status="ready"
			icon="HardDrive"
		/>

		<FeatureCard
			title="File Browser"
			description="Browse and manage uploaded files"
			status="ready"
			icon="FolderOpen"
		/>

		<FeatureCard
			title="Export Your Data"
			description="Download everything in one click"
			status="coming-soon"
			icon="Download"
		/>
	</div>

	
	<RoadmapSection
		built={["Core storage view", "Usage breakdown", "File browser"]}
		inProgress={["Export functionality"]}
		planned={["Bulk delete", "Storage alerts", "External backup"]}
	/>
</VineyardLayout>

<style>
	.feature-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 1.5rem;
		margin-bottom: 3rem;
	}
</style>

组件详情

VineyardLayout

自动处理完整的页面结构：

• 主视觉区域：工具名称（根据 tool 属性首字母大写）、标语、状态徽章、理念引言
• 内容：在带内边距的最大宽度容器中渲染子元素
• 页脚：“配合使用效果更佳”区域，链接到相关工具的 Vineyard 页面

<VineyardLayout tool="ivy" tagline="Messages that grow on you" status="in-development">
	
</VineyardLayout>

理念引言和相关工具映射均已内置，无需配置。

FeatureCard

图标可以是任何有效的 @lucide/svelte 图标名称字符串：

<FeatureCard
	title="Theme Picker"
	description="Choose from curated seasonal themes"
	status="ready"
	icon="Palette"
>
	{#snippet demo()}
		
		<ThemePicker themes={sampleThemes} />
	{/snippet}
</FeatureCard>

DemoContainer

为交互式演示添加页眉、描述和可选的“模拟数据”指示器：

<DemoContainer title="Email Composer" description="Try the rich text editor" mockData={true}>
	<RichTextEditor value={sampleDraft} />
</DemoContainer>

当 mockData={true} 时：

• 在页眉中显示蓝色的“模拟数据”标签
• 在演示内容周围添加蓝色虚线边框

CodeExample

支持复制到剪贴板，并显示语言／文件名标签的代码块：

<CodeExample language="typescript" filename="src/routes/+layout.svelte">
	{`import { initAmber } from '@autumnsgrove/amber';

const storage = initAmber({
  tenant: 'my-site',
  tier: 'sapling'
});`}
</CodeExample>

TierGate

仅当用户满足等级要求时才显示内容，否则显示模糊预览和升级提示：

<TierGate required="oak" current={userTier} showPreview={true}>
	<AdvancedStoragePanel />

	{#snippet fallback()}
		
		<p>Upgrade to Oak for advanced storage features</p>
	{/snippet}
</TierGate>

等级层次：seedling < sapling < oak < grove

RoadmapSection

三列（桌面端）／堆叠（移动端）时间线：

<RoadmapSection
	built={["Feature A", "Feature B"]}
	inProgress={["Feature C"]}
	planned={["Feature D", "Feature E"]}
/>

• 已完成的项目显示绿色圆点
• 进行中的项目显示脉动橙色圆点
• 计划中的项目显示空心灰色圆圈

身份验证

<script>
	import { AuthButton, UserMenu, getSession } from "@autumnsgrove/lattice/vineyard";
	import { onMount } from "svelte";

	let user = $state(null);

	onMount(async () => {
		const session = await getSession();
		user = session.user;
	});
</script>

{#if user}
	<UserMenu showAvatar={true} showEmail={true} />
{:else}
	<AuthButton provider="google" signInText="Sign in to explore" />
{/if}

状态徽章含义

状态	外观	适用情况
ready	绿色实心标签	功能已完成且稳定
preview	琥珀色虚线边框	功能可用，但 API 可能会变更
demo	蓝色实心标签	交互式示例，不使用真实数据
coming-soon	灰色低调标签	已设计但尚未构建
in-development	橙色脉动标签	当前正在积极开发

设计系统

Vineyard 组件采用 Grove 内置的美学风格：

• 颜色：在石色中性色上使用琥珀色调（#f59e0b、#d97706）
• 玻璃效果：半透明背景搭配 backdrop-blur
• 字体排印：Lexend 字体（由 VineyardLayout 加载）
• 交互：卡片悬停时上浮，并带有平滑过渡效果

无需额外的样式框架——组件自带作用域 CSS。

内容策略

适用于已就绪的工具

• 使用真实或逼真模拟数据的可运行演示
• 所有状态均为“ready”的完整功能卡片
• 完整的代码示例和 API 参考
• 入门指南

适用于预览版／开发中的工具

• 混合使用“ready”和“coming-soon”状态的功能卡片
• 使用 mockData={true} 的演示容器
• 展示进度的路线图部分
• 为尚未开放的功能使用 TierGate

适用于即将推出的工具

• 最简 vineyard：VineyardLayout + 理念说明 + 路线图
• 所有功能卡片均标记为“coming-soon”
• 暂不需要交互式演示

Grove 术语

当 vineyard 页面引用 Grove 主题术语（工具名称、功能名称、用户角色）时，请使用 GroveTerm 组件，以遵循用户的 Grove Mode 设置。新访客默认看到标准术语。

import {(GroveTerm, GroveText)} from '@autumnsgrove/lattice/ui'; import groveTermManifest from '$lib/data/grove-term-manifest.json';


<GroveText
	content="Manage your [[bloom|posts]] and [[garden|blog]] appearance."
	manifest={groveTermManifest}
/>


<p>Customize how your <GroveTerm term="garden" manifest={groveTermManifest} /> looks.</p>

检查清单

发布 vineyard 页面之前：

• VineyardLayout 配置了正确的 tool、tagline 和 status
• 至少包含 3 个状态合适的 FeatureCard 组件
• RoadmapSection 中的 built/inProgress/planned 数组如实反映进度
• 至少包含一个交互式演示（即使使用模拟数据）
• 在移动设备上可正常使用（功能网格具有响应式布局）
• 图标使用有效的 @lucide/svelte 名称
• 状态徽章准确反映功能状态
• Grove 术语使用 GroveTerm 组件（而非硬编码）