@axewo/fin-ui

Fin UI 组件库 - 包含通用组件和富文本编辑器

安装

pnpm add @axewo/fin-ui

使用方式

方式 1：完整导入

import { createApp } from 'vue'
import FinUI from '@axewo/fin-ui'
import '@axewo/fin-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(FinUI)
app.mount('#app')

方式 2：按需导入（推荐）

使用 unplugin-vue-components 实现自动按需导入：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { FinUIResolver } from '@axewo/fin-ui/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        FinUIResolver({
          // 是否导入样式，默认 true
          importStyle: true,
          // 组件前缀，默认 'Fin'
          prefix: 'Fin',
          // 是否支持短前缀别名（F开头），默认 true
          shortPrefix: true,
        }),
      ],
    }),
  ],
})

配置后，可以在模板中直接使用组件，无需手动导入：

<template>
  <FForm :config="formConfig" />
  <FinCrudTable :config="tableConfig" />
  <FCrudTable :config="tableConfig" />
</template>

组件列表

表单组件

• FForm - 配置化表单
• FTableSelect / FinTableSelect - 表格下拉选择器
• FinDictSelect / FDictSelect - 字典选择器
• FinDictRadio / FDictRadio - 字典单选

表格组件

• FinCrudTable / FCrudTable / FTable - CRUD 表格
• FinEditableTable / FEditableTable - 可编辑表格

操作组件

• FinActionButton / FActionButton - 操作按钮
• FinDialog / FDialog - 对话框

布局组件

• FinPageHeader / FPageHeader - 页面头部
• FPageLayout - 页面布局

工具组件

• FinConfigProvider / FConfigProvider - 配置提供者
• FinCopy / FCopy - 复制组件
• FinAlert / FAlert - 提示组件

Peer Dependencies

需要在项目中安装以下依赖：

pnpm add vue@^3.4.0 element-plus@^2.8.0

许可证

MIT