官网和应用的分水岭在于：应用强调密度，官网强调呼吸。把行高放宽、把标题做成细字重展示体，界面的气质立刻就不一样了。
一句话说不清的，不配做组件
粒度过细会让组合成本爆炸，过粗又失去灵活性。我们给自己立的规矩是：能被一句话描述清楚的，才配成为一个组件。
安静优雅不是没有设计，而是设计完成之后，退到了内容的后面。
剩下的部分，都是在这条原则之下的反复权衡——这也是这篇文章想讲清楚的事。
组件设计
组件粒度、插槽设计与令牌边界——一次开源组件库 API 设计的完整复盘。
案例：个人博客
内容站的结构比官网更简单：一栏文章流 + 一点关于作者的信息，剩下的交给排版。 本案例演示分类筛选的文章列表、热榜轮播、作者名片与订阅框如何拼成一个完整的博客首页。 品牌与文章均为虚构，源码就在本页，可以直接拷走改内容。
用到的组件：EvNavbar · EvTabs · EvArticleCard · EvSection · EvCarousel · EvQuote · EvProfileCard · EvTimeline · EvNewsletter · EvFooter
搭建要点
- 博客不需要 Hero：一句 motto + 一句更新频率，比首屏大图更符合内容站的气质。
EvSection的gap="0"让标题区与文章流贴在一起。 - 分类筛选 =
EvTabs+computed：Tab 只负责切换状态，列表交给computed过滤；右侧的「N 篇」计数让筛选结果可预期。 EvArticleCard用tag="a"让整卡可点：封面缺省时用图标占位底，不用为占位图发愁；hoverable默认开启上浮。- 热榜用
EvQuote塞进EvCarousel：读者原话比阅读量数字更有说服力，autoplay挂 5 秒并自动悬停暂停。 - 关于区左右分栏：
EvProfileCard讲人，EvTimeline+EvNewsletter讲更新与订阅，一张 soft 底卡收拢。
关键代码
筛选逻辑全部在一个 computed 里，模板只负责渲染：
vue
<script setup>
import { ref, computed } from 'vue'
const categories = ['全部', '前端', '设计', '随想']
const active = ref('全部')
const filtered = computed(() =>
active.value === '全部'
? posts
: posts.filter((p) => p.category === active.value)
)
</script>
<template>
<EvTabs v-model="active" :items="categories.map((c) => ({ label: c, value: c }))" />
<EvArticleCard
v-for="p in filtered"
:key="p.title"
tag="a"
:title="p.title"
:excerpt="p.excerpt"
:date="p.date"
:tags="p.tags"
:icon="p.icon"
/>
</template>热榜轮播：items 是普通数组，幻灯内容交给作用域插槽：
vue
<EvCarousel :items="hot" :autoplay="5000">
<template #item="{ item }">
<EvQuote :quote="item.quote" :author="item.author" :role="item.role" />
</template>
</EvCarousel>