@moonnoom9527/fang-ui

v0.1.2

Published

18 days ago

fang-ui Vue 3 components based on Element Plus

0High
0Medium
0Low

moonnoom9527

@moonnoom9527/fang-ui

基于 Element Plus 的 Vue 3 组件库。继承 Element Plus 全部能力，同时提供统一 F 前缀命名与品牌风格主题。

特性

零学习成本 — API 与 Element Plus 完全兼容，F 前缀仅改变命名
品牌化主题 — 统一的 CSS 变量体系，开箱即用的 B站风格配色
精选封装 — Button / Input / Select / Table / Dialog 五大核心组件独立增强封装
按需注册 — plugin 自动注册所有 80+ 组件，也可手动按需引入
TypeScript 支持 — 完整类型推导，无需额外声明文件

安装

npm install element-plus @moonnoom9527/fang-ui @moonnoom9527/fang-ui-styles
# 或
pnpm add element-plus @moonnoom9527/fang-ui @moonnoom9527/fang-ui-styles

前提条件：依赖 element-plus 和 @moonnoom9527/fang-ui-styles，请同时安装。

快速开始

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'      // Element Plus 样式
import '@moonnoom9527/fang-ui-styles'                  // 品牌主题样式（必须）
import FangUI from '@moonnoom9527/fang-ui'         // FangUI 插件

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)   // 注册 Element Plus
app.use(FangUI)        // 注册 FangUI（F 前缀组件）

app.mount('#app')

按需引入（推荐）

FangUI 使用 Vue 的全局组件注册机制，安装插件后，模板中可直接使用所有 F 前缀组件，无需单独引入：

<template>
  <!-- 五大核心增强封装 -->
  <FButton type="primary">主要按钮</FButton>
  <FInput v-model="text" placeholder="请输入" />
  <FSelect v-model="value" :options="list" />
  <FTable :data="tableData">
    <FTableColumn prop="name" label="姓名" />
  </FTable>
  <FDialog v-model="visible" title="提示">
    <p>内容</p>
  </FDialog>

  <!-- 其余 80+ 组件，直接使用 F 前缀 -->
  <FTag type="success">标签</FTag>
  <FBadge :value="3">消息</FBadge>
  <FAlert type="warning" show-icon>警告</FAlert>
  <FCard>卡片内容</FCard>
</template>

按组件显式引入（减少打包体积）：

import FangUI, { FButton, FInput } from '@moonnoom9527/fang-ui'

app.use(FangUI, {
  components: [FButton, FInput],   // 只注册这两个
})

主题定制

主题通过 CSS 变量实现，只需在入口处覆盖变量即可：

/* App.vue 或单独的主题文件 */
:root {
  /* 品牌主色（默认 #409eff） */
  --f-color-primary: #00b4d8;

  /* 其他色系 */
  --f-color-success: #52b788;
  --f-color-warning: #f4a261;
  --f-color-danger:  #e63946;
  --f-color-info:    #6c757d;

  /* 圆角 */
  --f-border-radius-base: 8px;

  /* 阴影 */
  --f-box-shadow-base: 0 4px 12px rgba(0, 0, 0, 0.12);
}

变量列表见 @moonnoom9527/fang-ui-styles — 设计变量

组件列表

精选封装（增强）

精选 5 个高频组件独立 .vue 文件封装，带品牌风格与增强样式：

| 组件 | 说明 | 封装内容 | |------|------|---------| | FButton | 按钮 | 品牌色 hover 上浮、朴素按钮、加载状态 | | FInput | 输入框 | 品牌色聚焦高亮 | | FSelect | 选择器 | 品牌色聚焦高亮 | | FTable | 表格 | 品牌色表头、斑马纹、hover 行高亮 | | FDialog | 对话框 | 品牌色标题栏、确定按钮样式 |

基础组件

| 组件 | 说明 | |------|------| | FAlert | 警告提示 | | FAvatar | 头像 | | FBacktop | 返回顶部 | | FBadge | 徽标 | | FCalendar | 日历 | | FCard | 卡片 | | FCarousel | 轮播图 | | FCascader | 级联选择器 | | FCheckbox | 多选框 | | FColorPicker | 颜色选择器 | | FDatePicker | 日期选择器 | | FDescriptions | 描述列表 | | FDivider | 分割线 | | FEmpty | 空状态 | | FForm | 表单 | | FFormItem | 表单项 | | FIcon | 图标 | | FImage | 图片 | | FImageViewer | 图片预览 | | FInputNumber | 数字输入框 | | FLink | 链接 | | FPagination | 分页 | | FPopconfirm | 气泡确认框 | | FPopover | 气泡卡片 | | FProgress | 进度条 | | FRadio | 单选框 | | FRate | 评分 | | FResult | 结果页 | | FScrollbar | 滚动条 | | FSkeleton | 骨架屏 | | FSlider | 滑动条 | | FSpace | 间距 | | FSteps | 步骤条 | | FSwitch | 开关 | | FTabs | 标签页 | | FTag | 标签 | | FTimeline | 时间线 | | FTooltip | 文字提示 | | FTransfer | 穿梭框 | | FTree | 树形控件 | | FTreeSelect | 树形选择器 | | FUpload | 上传 |

布局组件

| 组件 | 说明 | |------|------| | FContainer | 容器 | | FAside | 侧边栏 | | FMain | 主区域 | | FHeader | 顶部栏 | | FFooter | 底部栏 | | FRow | 栅格行 | | FCol | 栅格列 |

导航组件

| 组件 | 说明 | |------|------| | FBreadcrumb | 面包屑 | | FDropdown | 下拉菜单 | | FMenu | 导航菜单 | | FPageHeader | 页面头部 | | FTour | 分步引导 |

反馈组件

| 组件 | 说明 | |------|------| | FConfigProvider | 全局配置 | | FDrawer | 抽屉 | | FLoading | 加载 | | FMessage | 消息提示 | | FMessageBox | 消息对话框 | | FNotification | 通知 |

组件文档

其余 Element Plus 组件（FAlert / FTag / FBadge 等）的 Props、Events、Slots 与 Element Plus 完全一致。详细文档请参考 Element Plus 官方文档。

FButton

品牌风格按钮，继承 el-button 全部能力，额外提供 hover 上浮、品牌色系等增强样式。

引入

import { FButton } from '@moonnoom9527/fang-ui'
// 或在模板中直接使用（插件已全局注册）

基本用法

<FButton type="primary">主要按钮</FButton>
<FButton type="success">成功按钮</FButton>
<FButton type="warning">警告按钮</FButton>
<FButton type="danger">危险按钮</FButton>
<FButton type="info">信息按钮</FButton>
<FButton>默认按钮</FButton>

Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | type | 按钮类型 | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'default' | 'default' | | size | 尺寸 | 'large' \| 'default' \| 'small' | 'default' | | plain | 朴素按钮 | boolean | false | | round | 圆角按钮 | boolean | false | | circle | 圆形按钮（图标场景） | boolean | false | | loading | 加载状态 | boolean | false | | disabled | 禁用 | boolean | false | | native-type | 原生 type 属性 | 'button' \| 'submit' \| 'reset' | 'button' |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | click | 点击按钮时触发 | (evt: MouseEvent) |

Slots

| 插槽名 | 说明 | |--------|------| | default | 按钮内容 |

FInput

品牌风格输入框，继承 el-input 全部能力，额外提供品牌色聚焦样式。

基本用法

<FInput v-model="text" placeholder="请输入内容" clearable />
<FInput v-model="text" type="textarea" :rows="3" placeholder="多行文本" />
<FInput v-model="text" size="large" placeholder="大号输入框" />

Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | v-model | 绑定值 | string \| number | — | | type | 类型 | 'text' \| 'textarea' \| 'password' \| ... | 'text' | | size | 尺寸 | 'large' \| 'default' \| 'small' | 'default' | | placeholder | 占位文本 | string | — | | clearable | 显示清除按钮 | boolean | true | | disabled | 禁用 | boolean | false | | prefix-icon | 输入框头部图标 | Component | — | | suffix-icon | 输入框尾部图标 | Component | — |

其余 Attributes 继承自 el-input，参见 Element Plus Input 文档。

FSelect

品牌风格选择器，继承 el-select 全部能力。

基本用法

<FSelect v-model="value" placeholder="请选择">
  <el-option label="Vue" value="vue" />
  <el-option label="React" value="react" />
  <el-option label="Angular" value="angular" />
</FSelect>

Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | v-model | 绑定值 | string \| number \| unknown[] | — | | size | 尺寸 | 'large' \| 'default' \| 'small' | 'default' | | placeholder | 占位文本 | string | '请选择' | | clearable | 显示清除按钮 | boolean | true | | filterable | 可搜索 | boolean | false | | multiple | 多选模式 | boolean | false | | disabled | 禁用 | boolean | false |

其余 Attributes 继承自 el-select，参见 Element Plus Select 文档。

FTable

品牌风格数据表格，继承 el-table 全部能力，额外提供品牌色表头、斑马纹、hover 高亮样式。

基本用法

<FTable :data="tableData" stripe>
  <FTableColumn prop="name" label="姓名" />
  <FTableColumn prop="age" label="年龄" sortable />
  <FTableColumn prop="address" label="地址" />
</FTable>

const tableData = [
  { name: '张三', age: 25, address: '北京市朝阳区' },
  { name: '李四', age: 30, address: '上海市浦东新区' },
]

Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | data | 表格数据 | Record<string, unknown>[] | [] | | stripe | 斑马纹 | boolean | true | | border | 边框 | boolean | false | | size | 尺寸 | 'large' \| 'default' \| 'small' | 'default' |

FTableColumn Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | prop | 字段名 | string | — | | label | 列标题 | string | — | | width | 列宽度 | string \| number | — | | min-width | 最小宽度 | string \| number | — | | sortable | 是否可排序 | boolean | false | | fixed | 固定列 | 'left' \| 'right' | — |

其余 Attributes 继承自 el-table / el-table-column，参见 Element Plus Table 文档。

FDialog

品牌风格对话框，继承 el-dialog 全部能力，额外提供品牌色标题栏与底部按钮样式。

基本用法

<FDialog v-model="visible" title="编辑" width="500px">
  <p>对话框内容</p>
  <template #footer>
    <FButton @click="visible = false">取消</FButton>
    <FButton type="primary" @click="visible = false">确定</FButton>
  </template>
</FDialog>

Attributes

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | v-model | 绑定值（显隐控制） | boolean | false | | title | 标题 | string | '提示' | | width | 宽度 | string \| number | '50%' | | top | 距顶部距离 | string | '15vh' | | close-on-click-modal | 点击遮罩关闭 | boolean | false | | destroy-on-close | 关闭时销毁内容 | boolean | false | | show-close | 显示关闭按钮 | boolean | true |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | confirm | 点击确定按钮时触发 | — | | cancel | 点击取消按钮时触发 | — |

Slots

| 插槽名 | 说明 | |--------|------| | default | 对话框主体内容 | | footer | 对话框底部（默认有取消/确定按钮） |

与 Element Plus 的关系

| 维度 | Element Plus | @moonnoom9527/fang-ui | |------|-------------|--------------| | 组件命名 | el-button | f-button | | Props / Events | 完全一致 | 完全一致 | | Slots | 完全一致 | 完全一致 | | 样式 | Element Plus 默认蓝 | fang-ui 品牌色 | | 主题系统 | --el- 前缀变量 | --f- 前缀变量 + 映射回 --el- |

F 前缀和 El 前缀可以混用，插件同时注册两种命名：

<!-- 等价 -->
<el-button type="primary">El 前缀</el-button>
<f-button type="primary">F 前缀</f-button>

按需导入样式

如果只需要品牌主题变量（不需要完整 @moonnoom9527/fang-ui-styles）：

// 只需品牌变量
import '@moonnoom9527/fang-ui-styles/src/fang-vars.css'

// 或只需 EP 变量覆盖
import '@moonnoom9527/fang-ui-styles/src/element-plus-overrides.css'

项目结构

@moonnoom9527/fang-ui/
├── src/
│   ├── index.ts          # 主入口（导出插件 + components）
│   ├── plugin.ts         # Vue 插件（动态注册所有 F 前缀组件）
│   ├── components/
│   │   ├── index.ts      # 组件导出桶
│   │   ├── f-button/     # FButton 增强封装
│   │   ├── f-input/      # FInput 增强封装
│   │   ├── f-select/     # FSelect 增强封装
│   │   ├── f-table/      # FTable 增强封装
│   │   └── f-dialog/     # FDialog 增强封装
│   └── index.d.ts        # .vue 类型声明
└── package.json

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@moonnoom9527/fang-ui

特性

安装

快速开始

完整引入

按需引入（推荐）

主题定制

组件列表

精选封装（增强）

基础组件

布局组件

导航组件

反馈组件

组件文档

FButton

引入

基本用法

Attributes

Events

Slots

FInput

基本用法

Attributes

FSelect

基本用法

Attributes

FTable

基本用法

Attributes

FTableColumn Attributes

FDialog

基本用法

Attributes

Events

Slots

与 Element Plus 的关系

按需导入样式

项目结构

License