快速开始

安装

npm install castor3-ui-element element-plus vue

全量注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Castor3UI from 'castor3-ui-element'
import 'castor3-ui-element/style.css'

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

暗黑模式

组件直接使用 Element Plus CSS 变量，跟随 document.documentElement 上的 dark class，不需要给每个组件单独传主题属性：

import 'element-plus/theme-chalk/dark/css-vars.css'

document.documentElement.classList.toggle('dark', isDark)

如果应用已经通过 Element Plus 或现有主题系统引入暗色变量，只需要切换 dark class。

按需使用

<script setup lang="ts">
import { reactive } from 'vue'
import { CaCommonForm, type FormField } from 'castor3-ui-element'

const model = reactive({ name: '' })
const fields: FormField[] = [
  {
    type: 'input',
    label: '名称',
    dataField: 'name',
    rules: [{ required: true, message: '请输入名称' }]
  }
]
</script>

<template>
  <CaCommonForm :model="model" :fields="fields" />
</template>

工具链

当前基线使用 Vue 3.5、Element Plus 2.14、Vite 8 和 TypeScript 5.9。TypeScript 7 暂未启用，因为当前 vue-tsc 尚未兼容 TS 7 的编译器导出变化。