@yd-design/vue

@yd-design/vue

yd-design 的 Vue 3 组件库 —— 基于 ant-design-vue 4.x 的薄封装， 主题由 @yd-design/tokens 统一驱动。组件名与属性名和 @yd-design/react 完全对齐。

安装

npm i @yd-design/vue ant-design-vue
# vue >= 3.4（peer）

接入

// main.ts
import '@yd-design/tokens/css';
import '@yd-design/vue/style.css';

<!-- App.vue：根节点包一层 Provider -->
<script setup lang="ts">
import { YdConfigProvider } from '@yd-design/vue';
</script>

<template>
  <YdConfigProvider theme="system">
    <!-- 你的应用 -->
  </YdConfigProvider>
</template>

YdConfigProvider 的 theme 取 'light' | 'dark' | 'system'，默认 system； 它把令牌喂给 a-config-provider，并把解析后的主题写到 data-yd-design-theme 上 供 CSS 变量切肤。

只给某个子树换肤用 YdThemeProvider：

<YdThemeProvider theme="dark">
  <SideMenu />
</YdThemeProvider>

读取 / 切换当前主题：

import { useTheme } from '@yd-design/vue';

const { resolved, preference, setPreference } = useTheme();

组件内部按需 import ant-design-vue 的原语（不做全局注册），因此你不需要 app.use(Antd)，也不会污染全局组件名。

组件

与 React 侧一一对应，Yd 前缀、属性名一致（onSelect ↔ @select 这类事件绑定差异除外）。

YdTopNav 的右侧区域用插槽传入（React 侧为 actions / user 属性）：

<YdTopNav title="yd-design" :items="items" :selected-key="key" @select="(k) => (key = k)">
  <template #actions><YdTopNavBell :count="3" /></template>
  <template #user><YdTopNavUser name="张三" /></template>
</YdTopNav>

本地真实渲染画廊：npm run dev:vue（默认 5180）。

License

MIT