@fx/components 组件包
UI 框架无关的通用组件库,不绑定任何第三方 UI 框架,可跨业务项目复用。
设计思路
@fx/components 定位为框架无关的通用组件层:
- 每个组件不依赖任何第三方 UI 框架
- 样式 token 统一走
@fx/styles(--color-*、--fw-*、--shadow-*),不引用任何框架的 CSS 变量 - 类名通过
useNamespace自动生成 BEM 命名(fx-{block}前缀)
使用方式
vue
<script setup lang="ts">
import { FxBtn, FxCard } from '@fx/components'
</script>
<template>
<FxCard header="示例">
<FxBtn type="primary">按钮</FxBtn>
</FxCard>
</template>样式约定
| 方面 | 约定 |
|---|---|
| 类名前缀 | fx-(如 fx-card、fx-card__header) |
| 状态类 | is-{state}(如 is-disabled、is-checked) |
| 样式 token | @fx/styles CSS 变量(禁止引用任何框架的 CSS 变量) |
| 脚本类名 | useNamespace BEM 生成(禁止手写 fx-xxx 字符串) |
