@sunyard-szyy-ui/components

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

📦 安装

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

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

📚 组件列表

SySearchBar - 搜索栏组件

企业级搜索输入框组件。

特性：

• ✅ 支持 v-model 双向绑定
• ✅ 支持 Enter 键触发搜索
• ✅ 支持自定义按钮文本
• ✅ 完整的 TypeScript 类型支持

使用示例：

<template>
  <SySearchBar v-model="keyword" placeholder="请输入搜索关键词" @search="handleSearch" />
</template>

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

const keyword = ref('');

const handleSearch = (value: string) => {
  console.log('搜索:', value);
};
</script>

🎯 使用方式

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

import { SySearchBar } from 'sunyard-szyy-ui';

方式二：从组件包导入

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

方式三：按需导入

import { SySearchBar } from '@sunyard-szyy-ui/components/search-bar';

🎨 样式导入

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

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

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

📖 API 文档

详细的 API 文档请查看：组件 API 文档

🔧 开发

# 安装依赖
pnpm install

# 类型检查
pnpm typecheck

# 构建
pnpm build

# 清理构建产物
pnpm clean

📦 构建产物

@sunyard-szyy-ui/components/
├── es/                   # ESM 格式
│   ├── index.mjs
│   ├── index.d.ts
│   └── components/
│       └── search-bar/
│           ├── index.mjs
│           ├── index.d.ts
│           └── style/
│               ├── css.mjs       # CSS 样式导入
│               └── index.mjs     # SCSS 样式导入
└── lib/                  # CJS 格式
    ├── index.js
    ├── index.d.ts
    └── components/
        └── search-bar/
            ├── 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-