@robot-admin/naive-ui-components

项目定位

Naive UI Components 是从 Robot Admin 提炼的 Vue 3 业务组件库，以 @robot-admin/naive-ui-components 独立发布。基于 Naive UI，将配置表单、数据表格、编辑器、流程与文件媒体等常见场景统一为 C_* 组件及配套组合函数，也可独立接入其他 Vue 3 项目。

组件库负责界面与交互；业务接口、身份权限、上传服务和第三方平台配置由应用接入。当前仓库版本 0.15.0，版本变化见 CHANGELOG。

能力地图

查看 全部 55 个组件与依赖，或在 Robot Admin 中体验组件场景。Cron 预览只计算时间，公式只进行本地试算；生产人机验证需接入服务端校验，详见使用指南。

快速开始

安装

在已有 Vue 3 项目中安装组件库及必需的 peer 依赖：

bun add @robot-admin/naive-ui-components
bun add vue@^3.5.0 naive-ui@^2.35.0

也可使用项目现有的 npm 或 pnpm。仅在对应场景安装可选 peer：

用配置创建一个表单

以下示例可放入 App.vue，使用独立组件入口和对应样式，无需全局注册：

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    C_Form,
    defineFormOptions,
    useCForm,
  } from '@robot-admin/naive-ui-components/C_Form'
  import '@robot-admin/naive-ui-components/C_Form/style.css'

  interface Contact {
    name: string
    email: string
  }

  const result = ref('')
  const { formRef, bindings } = useCForm<Contact>({
    initialValues: { name: '', email: '' },
    options: defineFormOptions<Contact>([
      { type: 'input', prop: 'name', label: '姓名', required: true },
      { type: 'input', prop: 'email', label: '邮箱' },
    ]),
    config: {
      labelPlacement: 'top',
      onSubmit: ({ model }) => {
        result.value = `已通过校验：${model.name}`
      },
    },
  })
</script>

<template>
  <C_Form
    ref="formRef"
    v-bind="bindings"
  />
  <p v-if="result">{{ result }}</p>
</template>

表单内置提交、重置与校验流程。实际保存时，将异步请求放入 config.onSubmit 并等待完成；@submit 用于完成通知。表单布局、验证规则、弹窗与远程表格示例见使用指南。

按需加载与样式

选择导入方式

自动导入

安装 unplugin-vue-components 后，在 Vite 配置中加入 Resolver：

bun add -d unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { RobotNaiveUiResolver } from '@robot-admin/naive-ui-components/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [RobotNaiveUiResolver({ importStyle: true })],
    }),
  ],
})

Resolver 默认解析到组件子路径；importStyle 默认是 false，需显式开启自动样式。true 与 'full' 均加载完整组件样式；'base' 为 C_Form / C_Table 排除内置富文本编辑器样式，其他组件仍使用完整样式。只有不使用内置富文本字段时才选择基础样式。

每个组件样式入口包含其组合组件所需样式。手动导入时可选 C_Form/base.css、C_Table/base.css；完整样式也提供 full.css 别名。重型编辑器、流程、地图和媒体组件建议随业务路由加载。完整策略与全量注册示例见导入指南。

本轮最小消费构建中，基础表单与展示表格的首屏 JS gzip 分别下降 36.1% 和 34.6%；包含 Vue 与 Naive UI，测量范围及自动体积门禁见消费体积记录。

根入口聚合导航组件，运行时也需要 vue-router。不使用路由的项目请选择组件子路径，无需因此补装无关可选 peer。

文档导航

本轮依赖审计的两项上游告警见 2026-10-18 扫描记录；2026-10-06 记录保留为历史档案。当前依赖状态以实际运行 bun run check:audit 的结果为准。

本地开发

维护本仓库需要 Node.js ≥20.19.0、Bun ≥1.3.14；仓库固定包管理器 bun@1.3.14，CI 按 .node-version 与冻结锁文件安装。

git clone https://github.com/ChenyCHENYU/naive-ui-components.git
cd naive-ui-components
bun install --frozen-lockfile
bun run dev

dev 监听组件库与共享 SCSS 的构建变化。交互演示由 Robot Admin 消费组件库提供。

bun run verify       # Lint、类型、逻辑与组件测试、导出、构建与使用侧类型
bun run check:audit  # 单独运行依赖安全审计，CI 在 verify 前执行

各项检查与发布步骤见开发与构建，CI 定义见 ci.yml。

Robot 生态

许可证

MIT License · Made by CHENY