@cst-ui/cst-buttons

CST 项目主题按钮组件库，基于 Vue 3 和 Element Plus 封装。

这个包的目标是：其他子系统只需要通过 npm 安装并引入这个包，就可以直接使用 CST 统一主题按钮，不需要再复制主系统的样式文件。

安装

pnpm add @cst-ui/cst-buttons

全局注册

在子系统入口文件中注册组件并引入样式：

import { createApp } from 'vue'
import App from './App.vue'
import CstButtons from '@cst-ui/cst-buttons'
import '@cst-ui/cst-buttons/style.css'

const app = createApp(App)

app.use(CstButtons)
app.mount('#app')

组件列表

<CstButton />
<CstAddButton />
<CstTextAddButton />
<CstMoveButton />
<CstEditButton />
<CstManageButton />
<CstDeleteButton />
<CstSubmitButton />
<CstCancelButton />
<CstBackTopButton />

使用示例

固定语义按钮直接使用对应组件：

<CstAddButton />
<CstDeleteButton />
<CstSubmitButton>保存</CstSubmitButton>
<CstCancelButton>取消</CstCancelButton>

不在固定语义里的按钮，统一使用 CstButton：

<CstButton icon="Refresh">刷新</CstButton>
<CstButton secondary icon="Upload">导入</CstButton>
<CstButton icon="Download" :loading="exporting">导出</CstButton>

子系统接入原则

子系统不要再依赖主系统的 src/style.css。

如果子系统需要 CST 主题按钮，只需要依赖本包：

import CstButtons from '@cst-ui/cst-buttons'
import '@cst-ui/cst-buttons/style.css'

语义明确的按钮使用 CstAddButton、CstDeleteButton 等组件；其他普通按钮使用 CstButton。

依赖说明

vue 和 element-plus 是 peer dependency，需要由使用方项目提供。

本包自带 CST 按钮主题样式，使用方不需要额外复制主系统按钮样式。