企业官网建设流程全解析

• UI组件
• 前端

Separator（分隔线）是界面中最常用的视觉元素之一，用于在内容区块之间建立清晰的分隔关系。在 shadcn-vue 中，Separator 是对 reka-ui 同名原语的封装组件，通过极简的 API 同时实现"视觉分隔"（一条可见的分隔线）与"语义分隔"（对辅助技术隐藏的装饰性占位）。本文将基于仓库内 Separator 官方文档 与 new-york-v4 风格源码，完整讲解其安装流程、源码实现原理、属性默认值，以及水平/垂直分隔的实战用法。

组件简介

根据文档 frontmatter 中的描述，Separator 的作用是"Visually or semantically separates content."（在视觉或语义上分隔内容）。这意味着它有两种定位：

• 视觉分隔：默认渲染为一条 1px 的实线，将相邻内容块隔开；
• 语义分隔：当decorative为true时，组件对屏幕阅读器等辅助技术完全隐藏，仅充当布局占位，不产生多余的语义信息。

在 shadcn-vue 的组件体系中，Separator 属于基础 UI 组件，被大量复用于侧边栏、对话框、下拉菜单、命令面板、表单分组等场景，用于区分不同信息区域。

安装

文档提供了两种安装方式，分别适用于 CLI 用户与需要完全掌控源码的用户。

方式一：CLI 安装（推荐）

在项目根目录执行：

npx shadcn-vue@latest add separator

CLI 会自动完成以下工作：解析当前项目的组件风格与颜色配置、安装依赖、将组件源码写入components/ui/separator目录，并更新全局导出。

方式二：手动安装

手动安装共三步：

第一步，安装核心依赖：

npm install reka-ui

从 registry 元数据 separator.json 可以看到，该组件实际声明了两个依赖：reka-ui（提供底层的Separator原语）与@vueuse/core（提供reactiveOmit等响应式工具函数）。因此严格来说手动安装时应同时安装：

npm install reka-ui @vueuse/core

第二步，将 Separator.vue 与 index.ts 复制到项目src/components/ui/separator/目录下。

第三步，更新源码中的导入路径，使其指向你自己的lib/utils（提供cn工具函数）与别名配置（默认@/指向src）。

源码解析：一个 29 行的精致封装

Separator.vue的完整源码非常精简，其核心逻辑可以用一张调用链概括：shadcn-vue 封装 → reka-ui 原语 → 原生 DOM 元素。下面逐段分析。

<script setup lang="ts"> import type { SeparatorProps } from "reka-ui" import type { HTMLAttributes } from "vue" import { reactiveOmit } from "@vueuse/core" import { Separator } from "reka-ui" import { cn } from "@/lib/utils" const props = withDefaults(defineProps< SeparatorProps & { class?: HTMLAttributes["class"] } >(), { orientation: "horizontal", decorative: true, }) const delegatedProps = reactiveOmit(props, "class") </script> <template> <Separator >export { default as Separator } from "./Separator.vue"

此外，仓库在 bases 目录 中维护了一份更基础的版本，其垂直分隔样式使用self-stretch（拉伸撑满父容器）替代 new-york-v4 风格的h-full，可作为理解两种风格差异的参考。

用法：水平分隔与垂直分隔

文档中的 Usage 示例同时演示了 Separator 的两种典型形态，也是 SeparatorDemo.vue 的实际渲染内容：

<script setup lang="ts"> import { Separator } from '@/components/ui/separator' </script> <template> <div> <div class="space-y-1"> <h4 class="text-sm font-medium leading-none"> Radix Primitives </h4> <p class="text-sm text-muted-foreground"> An open-source UI component library. </p> </div> <Separator class="my-4" /> <div class="flex h-5 items-center space-x-4 text-sm"> <div>Blog</div> <Separator orientation="vertical" /> <div>Docs</div> <Separator orientation="vertical" /> <div>Source</div> </div> </div> </template>

水平分隔：标题与正文之间的留白分隔

第一种场景中，<Separator class="my-4" />被放置在标题区与导航区之间：

• 未传orientation，使用默认的"horizontal"；
• class="my-4"通过样式合并通道追加垂直外边距，在分隔线上、下各留出1rem间距；
• 分隔线本身高度仅 1px、宽度占满容器，形成一条标准的水平细线。

垂直分隔：flex 布局中的导航项分隔

第二种场景展示了垂直分隔的经典用法：在flex h-5 items-center space-x-4的行内布局中，用<Separator orientation="vertical" />将 Blog / Docs / Source 三个导航项逐一隔开：

• 容器固定高度h-5，垂直分隔线通过h-full撑满容器高度；
• 宽度仅 1px，与相邻内容靠space-x-4保持间距；
• 多个Separator可自由组合，形成清晰、等距的分隔节奏。

常见组合场景

• 对话框 / 抽屉（Dialog / Sheet）：在表单区域与操作按钮区之间放置水平 Separator，强化主次层级；
• 下拉菜单 / 命令面板：菜单中常用带间距的分隔线划分分组，如 ComboboxWithGroupsAndSeparator.vue 所示；
• 侧边导航：在导航区块之间插入垂直或水平分隔线，提高可扫读性。

多风格主题支持

该组件随仓库的 8 套 reka 风格（reka-luma / reka-lyra / reka-maia / reka-mira / reka-nova / reka-rhea / reka-sera / reka-vega）以及 default、new-york、new-york-v4 三套经典风格分别发布了独立的 registry 条目，见 public/r/styles 目录。各风格的实现思路一致，仅在类名细节（如垂直方向使用self-stretch还是h-full）上略有差异。使用 CLI 安装时会根据项目的风格配置自动选择对应版本，无需手动干预。

总结

shadcn-vue 的 Separator 是一个"小而精"的封装范本：29 行源码完成类型安全、属性透传、方向响应式样式与语义化控制。安装只需一条命令，使用只需一个标签，却能同时胜任视觉分隔与语义分隔两种职责。理解其reactiveOmit+data-orientation的架构模式后，你可以轻松地为其他 reka-ui 原语编写类似的高质量封装。

• UI组件
• 前端