Zan Components

基于 Vue 3 + Element Plus 封装的业务组件库。提供了树形选择、表格选择、动态表单等多种高级业务组件。

安装

由于本组件库依赖于 element-plus 和 vue，请确保您的项目中已安装这些对等依赖（Peer Dependencies）。

# 使用 npm 安装
npm install @xiongxiangfei/zan-components

# 或使用 pnpm
pnpm add @xiongxiangfei/zan-components

快速开始

在您的项目入口文件（如 main.ts 或 main.js）中完整引入组件库和样式文件。

1. 全局引入

import { createApp } from 'vue'
import App from './App.vue'

// 引入 Element Plus 及样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 引入 Zan Components 及样式
import ZanComponents from '@xiongxiangfei/zan-components'
import '@xiongxiangfei/zan-components/dist/style.css'

const app = createApp(App)

// 注册 Element Plus (推荐配置中文)
app.use(ElementPlus, { locale: zhCn })

// 注册 Zan Components
app.use(ZanComponents)

app.mount('#app')

2. 在组件中使用

由于组件已全局注册，您可以在任何 .vue 文件中直接使用标签，无需单独 import 组件：

<template>
  <div class="my-page">
    <!-- 使用表格选择器组件 -->
    <LinkTableSelect
      v-model="selectedValue"
      :api="fetchDataApi"
      :columns="tableColumns"
      title="选择用户"
    />
    
    <!-- 使用动态表单组件 -->
    <SchemaForm :schemas="formSchemas" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectedValue = ref('')

// 配置列和请求接口等
const tableColumns = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' }
]

const fetchDataApi = (params) => {
  // 返回 Promise 数据...
}

const formSchemas = [
  // 表单配置...
]
</script>

包含的组件

目前组件库提供以下核心业务组件：

• LinkTable - 增强型数据表格
• LinkTableSelect - 表格下拉选择器
• Tree / LinkTree - 增强型树形控件
• LinkTreeTableSelect - 树形结构与表格结合的复杂选择器
• Cascader / LinkCascader - 级联选择器
• SchemaForm - 基于 JSON Schema 驱动的动态表单

本地开发与贡献

如果您想在本地运行或修改该组件库：

# 安装依赖
npm install

# 启动本地测试环境
npm run dev

# 构建打包产物
npm run build