YC Designer

基于 Vue 3.5 + TypeScript 5 + Vite 6 的可视化设计器组件库，支持拖拽式布局设计和表单设计。

特性

• 📦 基于 Vue 3.5.x 和 TypeScript 5
• 🔨 支持多种布局组件（栅格、网格、标签页、卡片等）
• 📝 表单联动与条件显示
• 🎨 支持多种选项数据来源（静态、字典、远程）
• 📱 同时支持移动端和PC端
• 📊 支持报表管理功能

安装

# npm
npm install yc-designer

# yarn
yarn add yc-designer

# pnpm
pnpm add yc-designer

使用方法

全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import YcDesigner from 'yc-designer'
import 'yc-designer/dist/style.css'

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

按需引入

<script setup lang="ts">
import { GridLayout, FormDesigner } from 'yc-designer'
import 'yc-designer/dist/style.css'
</script>

<template>
  <GridLayout :columns="2" :gap="20">
    <FormDesigner 
      title="用户信息表单"
      :fields="formFields"
      :columns="1"
      v-model="formData"
      @submit="handleSubmit"
    />
  </GridLayout>
</template>

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

// 表单字段定义
const formFields = [
  {
    name: 'username',
    label: '用户名',
    type: 'text',
    required: true,
    placeholder: '请输入用户名'
  },
  {
    name: 'gender',
    label: '性别',
    type: 'radio',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    name: 'interests',
    label: '兴趣爱好',
    type: 'checkbox',
    options: [
      { label: '阅读', value: 'reading' },
      { label: '游泳', value: 'swimming' },
      { label: '编程', value: 'coding' }
    ],
    // 当性别为男时显示
    displayCondition: "gender === 'male'"
  }
]

// 表单数据
const formData = reactive({})

// 表单提交处理
const handleSubmit = (data) => {
  console.log('表单数据:', data)
}
</script>

组件文档

GridLayout 栅格布局

栅格布局组件，基于CSS Grid实现，用于页面布局。

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | columns | number | 12 | 列数 | | rows | number | 1 | 行数 | | gap | number | string | 10 | 单元格间距 | | columnWidth | string | '1fr' | 列宽 | | rowHeight | string | 'auto' | 行高 | | areas | string[] | - | 区域定义 |

FormDesigner 表单设计器

表单设计器组件，用于创建和渲染表单。

属性

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | title | string | '表单设计器' | 表单标题 | | fields | FormField[] | [] | 表单字段定义 | | layout | 'horizontal' | 'vertical' | 'inline' | 'horizontal' | 表单布局 | | labelWidth | string | number | '120px' | 标签宽度 | | modelValue | Record<string, any> | {} | 表单数据 | | columns | number | 1 | 分栏数 |

事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | update:modelValue | 表单数据变更 | formData: Record<string, any> | | submit | 表单提交 | formData: Record<string, any> | | reset | 表单重置 | - |

开发与发布

开发

# 安装依赖
pnpm install

# 开发模式
pnpm run dev

# 构建库
pnpm run build:lib

发布

发布前请确保已登录相应的 npm 账号：

# 登录国际 npm (npmjs.org)
pnpm run login:npm

# 登录国内镜像 (npmmirror.com)
pnpm run login:cnpm

# 发布到国际 npm
pnpm run publish

# 发布到国内镜像
pnpm run publish:cn

许可证

MIT