@sunyard-szyy-ui/components

Vue 3 组件库 - sunyard-szyy-ui 的核心组件包

📦 安装

# 推荐使用主包
npm install sunyard-szyy-ui

# 或者单独安装（不推荐）
npm install @sunyard-szyy-ui/components

📚 包说明

@sunyard-szyy-ui/components 提供基础组件与扩展组件源码导出，推荐业务项目优先通过主包 sunyard-szyy-ui 使用。

特性：

• ✅ 基于 Vue 3 + TypeScript
• ✅ 支持按需导入与 Tree-shaking
• ✅ 样式与类型定义随组件一起分发
• ✅ 与 @sunyard-szyy-ui/adapter、theme-chalk 配套使用

使用示例：

<template>
  <div style="display: flex; gap: 12px;">
    <SyInput v-model="keyword" placeholder="请输入关键词" />
    <SyButton type="primary">提交</SyButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SyButton, SyInput } from '@sunyard-szyy-ui/components';

const keyword = ref('');
</script>

🎯 使用方式

方式一：从主包导入（推荐）

import { SyButton, SyInput } from 'sunyard-szyy-ui';

方式二：从组件包导入

import { SyButton, SyInput } from '@sunyard-szyy-ui/components';

方式三：按需导入

import { SyInput } from '@sunyard-szyy-ui/components/input';

🎨 样式导入

组件依赖 Element Plus 和主题样式：

// 全量引入
import 'element-plus/dist/index.css';
import 'sunyard-szyy-ui/theme-chalk/index.css';

// 按需引入（推荐）
// 使用 unplugin-vue-components 自动导入

📖 API 文档

详细的 API 文档请查看 docs/core/components/ 目录下各组件页面。

🔧 开发

# 安装依赖
pnpm install

# 类型检查
pnpm typecheck

# 构建
pnpm build

# 清理构建产物
pnpm clean

📦 构建产物

@sunyard-szyy-ui/components/
├── es/                   # ESM 格式
│   ├── index.mjs
│   ├── index.d.ts
│   └── components/
│       └── input/
│           ├── index.mjs
│           ├── index.d.ts
│           └── style/
│               ├── css.mjs       # CSS 样式导入
│               └── index.mjs     # SCSS 样式导入
└── lib/                  # CJS 格式
    ├── index.js
    ├── index.d.ts
    └── components/
        └── input/
            ├── index.js
            └── style/

🤝 依赖

• @sunyard-szyy-ui/hooks - Composition API Hooks
• @sunyard-szyy-ui/utils - 工具函数
• element-plus (peer) - UI 基础库
• vue (peer) - Vue 3 框架

📝 注意事项

1. TypeScript 支持：所有组件都有完整的类型定义
2. 样式按需加载：使用 unplugin-vue-components 可自动按需导入样式
3. Tree-shaking：支持 ES Module，自动 tree-shaking
4. BEM 命名：样式遵循 BEM 命名规范，前缀为 sy-