快速开始

安装

组件库以 workspace 包形式提供：

{
  "dependencies": {
    "@cargoplus/ui": "workspace:*"
  }
}

peer 依赖：vue ^3.4、element-plus ^2.7（需宿主项目安装）。

引入

import { createApp } from "vue";
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import "element-plus/dist/index.css";
import CargoUI from "@cargoplus/ui";
import "@cargoplus/ui/style.css";
import App from "./App.vue";

createApp(App).use(ElementPlus, { locale: zhCn }).use(CargoUI).mount("#app");

app.use(CargoUI) 会全局注册全部 Cp* 组件，并为函数式 API 注入应用上下文。

函数式 API

showSelectDialog() 对齐旧版 SelectDialog.show(options, fnOk) 习惯，await 返回选中行数组（取消返回空数组）：

import { showSelectDialog } from "@cargoplus/ui";

const rows = await showSelectDialog({
  title: "选择港口（多选）",
  data: PORTS,
  multiple: true,
  searchInResult: true,
});

文档站维护

本站的组件 API 表格由源码 JSDoc 注释自动生成，改组件时只需维护源码注释：

npm run docs:gen     # 重新生成 docs/api/*.md（API 表格）
npm run docs:dev     # 生成 + 启动文档站开发预览
npm run docs:build   # 生成 + 构建静态站点（docs/.vitepress/dist）

不要手改

docs/api/*.md 是生成产物，直接编辑会在下次 docs:gen 时被覆盖。 组件页面（docs/components/*.md）的说明文字和演示示例则正常手写维护。