@yeepay/yee-boss-ui

运营后台平台公共 UI、主题和轻量列表页基础能力。

当前范围

当前提供：

• light/dark 语义化 Theme Tokens。
• --yee-* 全量公共 CSS Variables。
• Ant Design Vue Theme Token 映射。
• PlatformConfigProvider。
• usePlatformTheme 只读主题上下文。
• YeePage 页面容器。
• YeeForm Schema 查询表单。
• useYeeGrid 与 gridApi/formApi。
• YeeDescriptions 配置驱动的详情展示。
• YeeEllipsisText 单行/多行省略文本与按需完整提示。
• YeeFileUpload 业务无关的文件选择与上传生命周期。
• YeeModal 统一的 Modal / Drawer 容器。
• YeeSelect 带完整文案提示的选择器。
• Tailwind CSS 语义主题 preset。

不提供主题切换器、业务组件或对 Ant Design Vue 基础组件的机械封装，也不依赖任何 @vben-* 包。

安装

pnpm add @yeepay/yee-boss-ui ant-design-vue vue vxe-table vxe-pc-ui

使用

<script setup lang="ts">
import {
  PlatformConfigProvider,
  type PlatformTheme,
} from '@yeepay/yee-boss-ui'
import '@yeepay/yee-boss-ui/style.css'

const theme: PlatformTheme = {
  mode: 'light',
}
</script>

<template>
  <PlatformConfigProvider :theme="theme">
    <RouterView />
  </PlatformConfigProvider>
</template>

Portal 负责决定当前主题并通过 Runtime Context 传给子应用；组件库只负责映射和消费。语言与 locale 继续由应用国际化层负责。

只需要公共主题、不使用组件时，可以只引入：

import '@yeepay/yee-boss-ui/theme.css'

theme.css 在 :root 提供 light 默认值，并同时支持 html.dark 和 [data-theme="dark"]。Portal 需要在根节点同步主题标识；子应用不自行维护另一套主题变量。

所有公共变量统一使用 --yee-*，例如：

.custom-card {
  color: var(--yee-card-foreground);
  background: var(--yee-card);
  border: 1px solid var(--yee-border);
  border-radius: var(--yee-radius);
}

--yee-radius、--yee-radius-lg 与 --yee-radius-sm 默认分别为 4px、8px 与 2px。公共组件使用基础圆角，Ant Design Vue 映射按对应尺寸消费这组语义化变量；需要特殊圆角时由 Portal 通过 theme.tokens 显式覆盖。

Tailwind CSS

// tailwind.config.mjs
import bossUiTailwindPreset from '@yeepay/yee-boss-ui/tailwind-preset'

export default {
  presets: [bossUiTailwindPreset],
  content: ['./index.html', './src/**/*.{vue,ts}'],
}

业务页面可以直接使用 bg-background、bg-background-deep、bg-card、bg-accent、text-foreground、text-muted-foreground 和 border-border，底层统一映射到 --yee-*。

通用业务组件

YeeEllipsisText

通过 line 和 maxWidth 控制单行或多行省略；tooltipWhenEllipsis 开启后，仅在文本实际被截断时显示 Tooltip。expand 支持鼠标、Enter 和 Space 展开/收起，并通过 expandChange 通知状态变化。

<YeeEllipsisText
  :line="2"
  :max-width="360"
  expand
  tooltip-when-ellipsis
  @expand-change="handleExpandChange"
>
  {{ remark }}
  <template #tooltip>
    完整备注：{{ remark }}
  </template>
</YeeEllipsisText>

placement 支持 top、right、bottom、left；ellipsisThreshold 默认是 3px。还可使用 tooltipMaxWidth、tooltipOverlayStyle、tooltipBackgroundColor、tooltipColor 和 tooltipFontSize 调整提示内容。默认背景、文字和字号消费 Yee 的 popover、popoverForeground 与 fontSize Theme Tokens；未使用 PlatformConfigProvider 时回退到对应的 --yee-* CSS Variables。

YeeDescriptions

配置项使用稳定的 name 时，可通过 content-${name} 覆盖内容。copyable 仅复制展示值，info 用于补充说明。

<YeeDescriptions
  bordered
  :items="[
    { label: '订单号', name: 'orderNo', value: orderNo, copyable: true },
    { label: '状态', name: 'status', value: status },
  ]"
/>

YeeFileUpload

组件不接受上传 URL，也不依赖业务请求客户端。自动上传由 customRequest 完成；手动模式监听 file-select，完成后调用组件实例的 addResult(uid, { url, name? }) 或 addError(uid)。

<YeeFileUpload
  v-model:file-list="fileList"
  :custom-request="uploadFile"
  @file-removed="removeFile"
/>

YeeModal

使用标准 v-model:open。Modal 默认在 header 右侧显示全屏切换按钮，可通过 v-model:fullscreen 控制状态，或通过 :fullscreen-button="false" 隐藏。type="drawer" 适合长详情或复杂表单，不显示全屏按钮；confirm 只通知父组件，不会主动关闭，便于父组件在异步提交成功后再更新 open。

<YeeModal
  v-model:fullscreen="fullscreen"
  v-model:open="open"
  title="提交确认"
  @confirm="submit"
/>

YeeSelect

YeeSelect 保持 Ant Design Vue Select 的透传能力，并针对当前选中项和默认 option 提供完整文案提示。

<YeeSelect v-model:value="status" :options="statusOptions" />

YeePage 与 VXE Grid

<script setup lang="ts">
import type {
  YeeFormOptions,
  YeeGridOptions,
} from '@yeepay/yee-boss-ui'
import {
  YeePage,
  useYeeGrid,
} from '@yeepay/yee-boss-ui'

interface OrderItem {
  orderNo: string
}

interface QueryValues {
  orderNo?: string
}

const formOptions: YeeFormOptions<QueryValues> = {
  schema: [
    {
      component: 'Input',
      componentProps: { allowClear: true },
      fieldName: 'orderNo',
      label: '订单号',
    },
  ],
}

const gridOptions: YeeGridOptions<OrderItem, QueryValues> = {
  columns: [{ field: 'orderNo', title: '订单号' }],
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return getOrderPage({
          ...formValues,
          pageNo: page.currentPage,
          pageSize: page.pageSize,
        })
      },
    },
  },
}

const [YeeGrid, gridApi] = useYeeGrid({
  formOptions,
  gridOptions,
})

defineExpose({ reload: gridApi.reload })
</script>

<template>
  <yee-page auto-content-height>
    <yee-grid table-title="订单明细" />
  </yee-page>
</template>

组件的 TypeScript 导出使用 YeeForm、YeeGrid、YeePage，Vue 模板标签对应 yee-form、yee-grid、yee-page。新代码统一使用 useYeeGrid，不提供旧命名兼容别名。查询接口统一返回 { items, total }。

开发

pnpm install
pnpm check
pnpm pack --dry-run

组件演示

本地演示入口覆盖当前公共组件与 light/dark 主题切换：

pnpm example

执行 pnpm build:example 可验证演示入口的生产构建。示例仅用于本地开发，不会打入 npm 包。