@your-org/ui-base

黑白中性主色 + 渐变强调的 Vue 3 设计系统基础组件库。抽离自实际项目，可跨项目复用。

包含：

• 设计令牌 + 共享类（CSS）：.card / .btn(.btn--primary/.btn--ghost/.btn--danger/.btn--sm) / .field+.field__label(.is-required) / .badge / .filechip / 应用外壳 .app-shell+.app-header+.app-main / .section-title+.section-actions / 通用工具类 .u-*。
• 基础组件：BaseButton / BaseCard / FormField。

安装

npm i @your-org/ui-base
# 或发布到内部仓库后：npm i @your-org/ui-base --registry <内部registry>

使用（全局注册，推荐）

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import UiBase from '@your-org/ui-base'
import '@your-org/ui-base/style.css'   // 必须：设计令牌与共享类

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

之后任意 .vue 直接用，无需 import：

<BaseCard title="用户列表">
  <template #actions>
    <BaseButton variant="primary" size="sm" @click="add">+ 新增</BaseButton>
  </template>
  <FormField label="姓名" required>
    <input v-model="name" placeholder="请输入" />
  </FormField>
</BaseCard>

使用（按需）

import { BaseButton } from '@your-org/ui-base'
import '@your-org/ui-base/style.css'

<BaseButton variant="ghost">取消</BaseButton>

自定义前缀（避免组件名冲突）

app.use(UiBase, { prefix: 'Ui' })   // 注册为 UiBaseButton / UiBaseCard / UiFormField

换肤

只改 node_modules/@your-org/ui-base/dist/ui-base.css 顶部 :root 令牌，或fork 本仓库后改 src/styles/design-system.css 再 npm run build：

• --brand：主色（当前近黑 #111827）
• --gradient / --gradient-soft：强调渐变（当前靛蓝→青）
• --r*：圆角；--sh*：阴影；--gap：间距

开发 / 构建

npm install
npm run build      # 产出 dist/：ui-base.js(ESM) / ui-base.umd.cjs / ui-base.css
npm run dev        # 本地预览（可在此接一个 demo 页调样式）

发布到内部仓库

npm run build
npm publish --registry <内部registry>