UseLineTitle - 线条标题
组件介绍
UseLineTitle 是基于 Vue3 + TypeScript 自研的通用线条标题组件，旨在为中后台系统等前端场景提供统一、灵活、可定制的标题展示方案。围绕标题的视觉样式与交互体验进行深度封装，支持左侧、底部、两侧环绕三种线条布局样式，可通过配置项灵活调整字体、线条、间距等视觉属性，无需重复编写标题样式相关的 HTML 与 CSS 代码，大幅降低标题模块的开发成本，同时保证全系统标题视觉风格的一致性。
核心亮点
- 多样式线条布局灵活切换：支持 left（左侧线条）、bottom（底部线条）、between（两侧环绕线条）三种线条位置布局，通过 linePosition 配置项一键切换，覆盖绝大多数标题视觉设计场景，无需为不同布局编写多套样式代码。
- 精细化视觉属性配置：针对字体（fontSize、color）、线条（lineColor、lineWidth、lineHeight）、间距（marginBottom）等维度提供独立配置项，每个属性均设置合理默认值，同时支持自定义覆盖，满足不同页面的视觉个性化需求。
- 样式与逻辑解耦封装：将标题的 DOM 结构、样式逻辑（如不同线条布局的边框 / 伪元素样式）完全封装在组件内部，外部仅需传入核心配置项即可渲染，无需关注底层样式实现细节。
- TypeScript 类型校验：通过 props 校验（包括枚举值校验）确保传入的配置项符合预期，如 linePosition 仅允许传入指定的三个值，避免因配置错误导致的样式异常，提升开发阶段的错误识别效率。
- 全局样式变量适配：线条颜色默认适配全局主题色变量（var (--theme-color)），可无缝融入项目的主题体系，无需手动调整颜色值即可保持与全局样式的统一。
解决痛点
- 标题线条样式重复开发，视觉不统一
- 痛点：原生开发中，每个带线条的标题都需编写独立的 CSS 样式（如边框、伪元素、间距），不同页面开发者实现方式不同，导致线条粗细、颜色、位置、间距等视觉表现不一致，影响整体页面美观度，且重复编写样式代码效率低。
- 解决方案：组件封装了所有线条标题的核心样式逻辑，通过 lineWidth、lineColor、linePosition 等配置项统一管控视觉样式，默认值保证全局标题风格一致，个性化需求仅需修改配置项，减少 90% 以上的重复样式代码，且样式调整可全局统一生效。
- 不同线条布局适配成本高
- 痛点：左侧线条、底部线条、两侧环绕线条三种布局的 DOM 结构和样式逻辑差异大（如两侧环绕需通过伪元素实现左右线条），原生开发需为每种布局编写不同的 HTML 结构和 CSS 代码，适配新布局时需重新开发，成本高且易出错。
- 解决方案：组件内置三种布局的完整 DOM 结构和样式逻辑，通过 linePosition 配置项即可切换布局，外部无需修改任何模板代码，布局切换成本几乎为 0，适配不同设计稿仅需调整配置参数。
- 样式属性与业务代码耦合
- 痛点：原生开发中，标题的字体大小、颜色、间距等样式属性直接写在业务页面的 style 或 class 中，与业务逻辑代码耦合，后期调整样式需在业务代码中逐个修改，维护成本高，且易误改业务逻辑。
- 解决方案：组件将所有样式属性封装为独立 props 配置项，业务页面仅需通过属性绑定传入参数（如 :fontSize="20px"），样式与业务代码完全解耦，样式调整仅需修改配置项，无需触碰业务逻辑，维护更安全高效。
- 主题色适配繁琐
- 痛点：原生标题线条颜色需手动写入具体色值，当项目全局主题色变更时，需逐个修改所有标题的线条颜色代码，操作繁琐且易遗漏，无法实现主题色的统一适配。
- 解决方案：组件线条颜色默认绑定全局主题色变量（var (--theme-color)），项目主题色变更时无需修改组件使用代码，自动适配新主题色；同时支持通过 lineColor 配置项自定义颜色，兼顾全局统一与个性化需求。
- 无类型校验导致配置错误
- 痛点：原生开发中传入的样式属性（如线条位置写错）无校验机制，运行时才会出现样式异常，排查问题需逐个检查样式代码，效率低。
- 解决方案：组件通过 props 校验（如 linePosition 的 validator 函数）限制配置项的合法值，开发阶段传入非法值时会直接给出警告，提前暴露配置错误，大幅降低线上样式问题的排查成本。
- 标题 DOM 结构不规范
- 痛点：不同页面的标题 DOM 结构混乱（如有的用 div、有的用 h3，嵌套层级不一致），既影响页面语义化，也导致样式复用困难，且不利于后期的可访问性优化。
- 解决方案：组件内置标准化的 DOM 结构（外层容器 + 内容容器），保证所有标题模块的 DOM 层级、语义化一致，同时 scoped 样式避免样式污染，既提升页面结构规范性，也降低样式冲突风险。