企业官网建设流程全解析

• 前端
• AI 技能

FaDivider 是 fantastic-admin 组件库@fantastic-admin/components中提供的带文字内容的分割线组件，支持文字位置调整。本文以 divider 的官方 README 为主体，结合组件源码、自动导入机制与示例应用中的真实用法，完整讲解该组件的 Props、Slot、使用场景、实现原理与注意事项，帮助你在章节分隔、表单分组、内容分区等场景中正确、高效地使用它。

组件定位与使用场景

FaDivider 解决的是"页面内容需要视觉分隔，且分隔处需要承载文字说明"这一常见诉求。它既可以是普通的分割线，也可以在线条中间（或起始、末尾位置）渲染自定义文字内容。

官方文档明确列出了以下典型使用场景：

• 章节分隔：长文档、长页面中区分不同章节
• 内容区域分割：将一个页面/面板划分为多个独立的视觉区域
• 表单分组标题：在长表单中为不同分组添加标题式分隔
• 列表分隔：区分不同类型的列表条目
• 页面内容分区：管理后台中常见的"登录方式""系统信息"等区块标题

在示例应用中也能看到真实用例，例如 AppAccountForm/login.vue 使用<FaDivider>演示账号一键登录</FaDivider>分隔登录表单与演示账号区，AppSystemInfo/index.vue 在系统信息区块之间多次使用带文字的分割线做分区标题。

Props 详解

根据 README，组件共暴露两个 Props：

position：控制文字位置

• 不传position时，文字默认居中显示（两侧线条等长）
• 传position="start"时，文字靠起始（左），左侧线条收缩、右侧线条伸展
• 传position="end"时，文字靠末尾（右），右侧线条收缩、左侧线条伸展

class：扩展样式

class的类型为HTMLAttributes['class']，支持传入任意合法 class。它最终会通过cn()工具（clsx+tailwind-merge的组合）与内置类合并，因此你可以用 Tailwind 类覆盖默认样式。cn()的实现见 packages/components/src/utils.ts：twMerge会智能合并冲突的 Tailwind 类，确保你传入的类优先生效。

Slots

defaultslot 是可选的。传入内容时，组件会自动在文字两侧生成线条并保持gap-4的间距；不传内容时，组件退化为一条完整的分割线。

完整使用示例

基础用法：无文字分割线与带文字分割线

参考 基础示例，实际使用时组件由框架自动导入，无需手动引入：

<script setup lang="ts"> // 组件实际使用时无需手动导入，框架会自动导入 import FaDivider from '../index.vue' </script> <template> <div> <div class="text-sm text-muted-foreground"> 上方内容 </div> <!-- 不带文字：一条完整分割线 --> <FaDivider /> <div class="text-sm text-muted-foreground"> 下方内容 </div> <!-- 带文字：文字居中，两侧线条自动填充 --> <FaDivider> 分割文字 </FaDivider> </div> </template>

文字位置示例

参考 位置示例，通过position切换文字所在位置：

<template> <div> <!-- 默认居中 --> <FaDivider> center </FaDivider> <!-- 文字靠左，左侧线条收缩 --> <FaDivider position="start"> start </FaDivider> <!-- 文字靠右，右侧线条收缩 --> <FaDivider position="end"> end </FaDivider> </div> </template>

两个示例均被注册在 示例索引 中，并最终通过示例应用的分割线演示页 divider.vue 展示：页面使用FaPageHeader展示标题，再用FaPageMain逐条渲染每个示例及对应源码。

源码实现解析

组件核心实现位于 index.vue，整体思路是：用一个容器 div 承载"左侧线条 + slot 内容 + 右侧线条"三部分，两侧线条通过伪元素before/after实现，无需额外子节点。

<script setup lang="ts"> import type { HTMLAttributes, VNode } from 'vue' import { cn } from '#utils' defineOptions({ name: 'BuiltInDivider', }) const props = defineProps<{ position?: 'start' | 'end' class?: HTMLAttributes['class'] }>() const slots = defineSlots<{ default?: () => VNode }>() </script> <template> <div :class="cn('my-4 w-full flex-center whitespace-nowrap text-sm font-500 after:(h-px w-full min-w-4 bg-border content-empty) before:(h-px w-full min-w-4 bg-border content-empty)', { 'before:(flex-basis-0)': position === 'start', 'after:(flex-basis-0)': position === 'end', 'gap-4': !!slots.default, }, props.class)" > <slot /> </div> </template>

几个关键实现细节：

• 基础布局：my-4 w-full flex-center whitespace-nowrap—— 上下边距1rem（my-4）、占满宽度、flex 居中布局、内容不换行；文字样式为text-sm font-500（小字号、500 字重）。
• 伪元素线条：before/after均设置为h-px（1px 高）、w-full min-w-4（宽度可伸缩但有最小宽度1rem）、bg-border（使用主题边框色）与content-empty。两条伪元素本身没有内容，通过content-empty置空。
• 位置控制：position === 'start'时给before添加flex-basis-0，使左侧线条收缩到最小宽度；position === 'end'时给after添加flex-basis-0，使右侧线条收缩。未指定时两侧 flex-basis 均为内容自适应，文字自然居中。
• 间距自适应：gap-4仅在存在defaultslot（!!slots.default）时生效，保证文字与线条之间始终保留合理间距；无文字时组件就只是两条伪元素拼接成的一条完整分割线。
• 类合并：所有内置类与用户传入的props.class一并交给cn()合并，tailwind-merge会正确处理类冲突。

组件内部通过defineOptions({ name: 'BuiltInDivider' })声明组件名，便于 Vue DevTools 调试与 keep-alive 等机制使用。

注册与自动导入机制

FaDivider 并非只能手动 import 使用，它在组件库中已接入完整的自动导入链路：

1. 组件导出 使用export { default as Divider } from './index.vue'导出单文件组件；
2. 组件库总入口 将其以FaDivider别名统一导出：export { Divider as FaDivider } from './basic/divider'；
3. resolver.ts 将FaDivider列入BASIC_COMPONENT_NAMES，配合unplugin-vue-components的组件解析器（前缀Fa）实现模板中的按需自动导入，同时通过ComponentsType提供类型声明。

因此在实际业务页面（如 AppSystemInfo/index.vue）中可以直接写<FaDivider>而不需要任何 import 语句，TypeScript 与构建期都能正确解析。

注意事项

1. 文字居中：默认情况下文字居中显示，未指定position时两侧线条对称自动填充。
2. 自动布局：文字两侧的线条会自动填充剩余空间，无需手动设置宽度；线条最小宽度为1rem（min-w-4），避免文字贴近边缘时线条完全消失。
3. 无文字时：不提供 slot 内容时，组件显示为一条完整的分割线（由两条伪元素无缝拼合）。
4. 间距：默认上下边距为1rem（my-4），如需调整可通过classProp 传入my-*等 Tailwind 类覆盖。
5. 文字样式：内置文字样式为text-sm font-500，如需更醒目的标题，可在 slot 内自行嵌套标题元素或传入自定义 class。

小结

FaDivider 是一个"小而精"的分割线组件：通过两个伪元素与一个 slot，优雅地实现了带文字、可调位置的分割线，并借助cn()与自动导入机制深度融入组件库生态。无论是做表单分组标题、内容区域分区还是章节分隔，你都可以直接使用<FaDivider>并借助position、class两个 Props 与defaultslot 快速完成排版。

• 前端
• AI 技能