@rjgfny/ui

基于 Vue 3 + TypeScript + Ant Design Vue 4 的 ToB 业务组件库（二次封装）。

安装

pnpm add @rjgfny/ui vue ant-design-vue
# 或
npm install @rjgfny/ui vue ant-design-vue

使用 VideoPlayer 时需额外安装（可选 peer）：

pnpm add flv.js hls.js video.js

快速开始

// main.ts
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import '@rjgfny/ui/style.css'

import { CButton, CInput, CTable } from '@rjgfny/ui'
import App from './App.vue'

const app = createApp(App)
app.use(Antd)
app.component('CButton', CButton)
app.component('CInput', CInput)
app.component('CTable', CTable)
app.mount('#app')

或全量注册：

import CompanyUI from '@rjgfny/ui'
app.use(CompanyUI)

组件列表

| 分类 | 组件 | |------|------| | 基础 | CButton CInput CSelect CTable CForm CModal CDatePicker CInputNumber CSwitch CTextarea | | 表单 Schema | SchemaForm / FormBuilder ApiSelect | | 业务 | CrudTable VideoPlayer SearchForm ExportButton | | 反馈 | StatusTag EmptyState |

Schema 表单（对齐 vue-vben-admin）

<script setup lang="ts">
import { SchemaForm, type FormSchema } from '@rjgfny/ui'

const schema: FormSchema[] = [
  { fieldName: 'name', label: '名称', component: 'Input', rules: 'required' },
  {
    fieldName: 'deptId',
    label: '部门',
    component: 'ApiSelect',
    componentProps: { api: getDeptList, labelField: 'name', valueField: 'id' },
    rules: 'selectRequired',
  },
  {
    fieldName: 'remark',
    label: '备注',
    component: 'Textarea',
    dependencies: {
      triggerFields: ['status'],
      if: (values) => values.status === 1,
    },
  },
]
</script>

<template>
  <SchemaForm :schema="schema" :columns="2" @submit="onSubmit" />
</template>

支持：dependencies（if/show/disabled/required/rules/componentProps）、ApiSelect / ApiTreeSelect、栅格 col.span、折叠查询、fieldMappingTime（RangePicker → 起止时间）。

CTable

<CTable
  :columns="columns"
  :data-source="list"
  row-key="id"
  :row-selection="rowSelection"
  :front-pagination="false"
  :pagination="{ current: 1, pageSize: 10, total: 100 }"
  @page-change="onPageChange"
  @selection-change="onSelectionChange"
  @row-click="onRowClick"
/>

• 内置序号列（showIndex / indexTitle）
• 前端/后端分页（frontPagination）
• 统一事件：page-change、selection-change、row-click、expand 等

SearchForm / CrudTable

• SearchForm 内部使用 SchemaForm，自动处理 dateRange → fieldMappingTime
• 查询/重置按钮：actionPlacement（row-end 同行靠右 / new-row 单独一行）、actionAlign、actionColSpan
• CrudTable 从 columns 自动生成查询栏与弹窗表单（search / form 标记），弹窗内为 SchemaForm compact 模式

按需引入（推荐）

<script setup lang="ts">
import { CButton, CTable } from '@rjgfny/ui'
</script>

许可证

MIT