@flyto/farco

基于 Arco Design Vue 的业务组件库，提供更贴近业务的统一约定层。

特性

• 基于 Arco Design Vue 二次封装
• 统一交互和默认行为
• 提升配置化能力
• 保留底层扩展性

安装

npm

npm install @flyto/farco

pnpm

pnpm add @flyto/farco

依赖

本包依赖以下运行时环境，请确保已安装：

npm install vue vue-router @arco-design/web-vue

完整引入

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'

import Farco from '@flyto/farco'
import '@flyto/farco/style.css'

const router = createRouter({
  history: createWebHistory(),
  routes: [],
})

const app = createApp(App)

app.use(ArcoVue)
app.use(Farco, {
  router,
  icons: {
    iconfont: h('span'),
    arco: {},
  },
})

app.use(router)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import { FButton, FInput, FSelect, FTable } from '@flyto/farco'
import '@flyto/farco/style.css'

const app = createApp({})
app.component('FButton', FButton)
app.component('FInput', FInput)
app.component('FSelect', FSelect)
app.component('FTable', FTable)

组件列表

基础组件

| 组件 | 说明 | | --------- | ---------------------------------- | | FButton | 按钮，支持 tooltip、icon、自定义色 | | FIcon | 图标，统一 iconfont 与 Arco Icon | | FLink | 链接，支持路由跳转 | | FSkeleton | 骨架屏 | | FText | 文本，支持省略、展开 |

表单组件

| 组件 | 说明 | | --------- | ---------- | | FCheckbox | 复选框组 | | FDate | 日期选择 | | FForm | 配置化表单 | | FFormItem | 表单项 | | FInput | 输入框 | | FMlInput | 多行输入 | | FRadio | 单选框组 | | FRange | 区间输入 | | FSearch | 搜索选择 | | FSelect | 选择器 | | FSwitch | 开关 | | FTextarea | 文本域 |

数据与交互

| 组件 | 说明 | | ---------- | -------- | | FPopChoice | 弹窗选择 | | FQueryList | 查询列表 | | FTable | 表格 |

业务工具函数

import { utils } from '@flyto/farco'

utils.formatListToMenus(list)

| 函数 | 说明 | | --------------------- | ------------------------------------ | | utils.formatListToMenus | 格式化服务端权限数据为 Arco 菜单结构 |

相关类型

| 类型 | 说明 | | ---------------- | ------------------------ | | ArcoAppMenu | Arco 框架菜单结构 | | AuthFunction | 服务端返回的权限数据结构 | | ServerEntityBase | 服务端返回数据的基础字段 |

构建

pnpm build

License

MIT