@hybridh5/c-ui-vue

基于 Vue 3 的组件库，支持统一主题（dark / light）和尺寸（sm / md / lg）。

安装

npm i @hybridh5/c-ui-vue vue

可选依赖：

• 使用 CDatePicker 时建议安装 dayjs

npm i dayjs

组件内部使用了 Font Awesome 图标类名（如 fas fa-times-circle），请在应用中引入图标样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import CUI from '@hybridh5/c-ui-vue'
import '@hybridh5/c-ui-vue/dist/c-ui.css'

createApp(App).use(CUI).mount('#app')

按需引入

import {
	CConfigProvider,
	CButton,
	CInput,
	CSelect,
	type CSelectOption
} from '@hybridh5/c-ui-vue'
import '@hybridh5/c-ui-vue/dist/c-ui.css'

说明：

• 无论全局注册还是按需引入，都需要在应用入口仅引入一次 @hybridh5/c-ui-vue/dist/c-ui.css。
• 组件使用到的 Font Awesome 类需要由业务侧自行提供样式文件。

<template>
	<c-config-provider theme="light" size="md">
		<c-button variant="primary">提交</c-button>
		<c-input v-model="keyword" clearable placeholder="请输入关键词" />
		<c-select v-model="status" :options="options" />
	</c-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CSelectOption } from '@hybridh5/c-ui-vue'

const keyword = ref('')
const status = ref<string | number | boolean | null>('all')
const options: CSelectOption[] = [
	{ label: '全部', value: 'all' },
	{ label: '进行中', value: 'doing' },
	{ label: '已完成', value: 'done' }
]
</script>

配置与注入

• CConfigProvider：推荐业务侧使用，统一向子组件提供 theme / size。
• useConfig：在自定义组件中读取当前配置。

import { useConfig } from '@hybridh5/c-ui-vue'

const config = useConfig()

组件导出

当前包导出以下组件：

• CButton
• CBadge
• CCheckbox
• CConfigProvider
• CDatePicker
• CEmpty
• CInput
• CNumberInput
• CPagination
• CSelect
• CTable
• CTag
• CTooltip

类型与工具导出：

• CSelectOption
• CTableColumn / CTableAction / CTableRow
• CUIConfig
• useConfig

常见事件约定

• 输入类组件支持 v-model（modelValue + update:modelValue）。
• 同时保留 change 事件用于变更通知。
• 建议优先用 v-model 作为状态来源，change 作为副作用触发点。

本地开发

在 monorepo 根目录执行：

npm run build -w @hybridh5/c-ui-vue

如需全仓验证：

npm run build

License

MIT