贡献指南

感谢你对ERP组件库的关注！我们欢迎任何形式的贡献，包括但不限于：

🐛 报告问题
💡 提出新功能建议
📖 改进文档
🔧 提交代码

🚀 快速开始

环境准备

确保你的开发环境满足以下要求：

Node.js >= 14
pnpm >= 7.0
Git

获取代码

bash

# 克隆仓库
git clone https://github.com/your-org/erp-lib.git
cd erp-lib

# 安装依赖
pnpm install

# 启动开发服务器
npm run dev:docs

📋 开发流程

1. 创建分支

从 main 分支创建新的功能分支：

bash

# 功能开发
git checkout -b feature/your-feature-name

# 问题修复
git checkout -b fix/issue-description

# 文档更新
git checkout -b docs/update-description

2. 开发规范

代码规范

使用 TypeScript 开发
遵循 ESLint 和 Prettier 配置
组件使用 Vue 3 Composition API
优先使用 <script setup> 语法

命名规范

typescript

// 组件命名：PascalCase
export default defineComponent({
  name: 'ErpButton'
})

// 文件命名：kebab-case
// erp-button.vue
// use-table-data.ts

// 变量命名：camelCase
const userName = ref('')
const handleClick = () => {}

// 常量命名：UPPER_SNAKE_CASE
const API_BASE_URL = 'https://api.example.com'

组件开发

新组件应该包含以下文件：

packages/common/components/your-component/
├── index.ts          # 导出文件
├── YourComponent.vue # 组件实现
├── types.ts          # 类型定义
└── __tests__/        # 测试文件
    └── YourComponent.test.ts

组件模板：

vue

<template>
  <div class="erp-your-component" :class="classes">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { YourComponentProps } from './types'

defineOptions({
  name: 'ErpYourComponent'
})

const props = withDefaults(defineProps<YourComponentProps>(), {
  size: 'medium',
  disabled: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
  change: [value: string]
}>()

const classes = computed(() => [
  `erp-your-component--${props.size}`,
  {
    'erp-your-component--disabled': props.disabled
  }
])
</script>

<style scoped>
.erp-your-component {
  /* 组件样式 */
}
</style>

3. 提交代码

提交信息规范

使用 Conventional Commits 规范：

bash

# 功能开发
git commit -m "feat(button): add loading state support"

# 问题修复
git commit -m "fix(table): resolve pagination issue"

# 文档更新
git commit -m "docs(readme): update installation guide"

# 样式调整
git commit -m "style(input): improve focus state styling"

提交类型说明：

feat: 新功能
fix: 问题修复
docs: 文档更新
style: 代码格式调整（不影响功能）
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动

提交前检查

bash

# 代码检查
npm run lint

# 类型检查
npm run type-check

# 运行测试
npm run test

# 构建验证
npm run build

4. 创建 Pull Request

推送分支到远程仓库
在 GitHub 上创建 Pull Request
填写 PR 模板信息
等待代码审查

PR 模板

markdown

## 📝 变更描述

简要描述本次变更的内容和目的。

## 🔗 相关Issue

- Closes #123
- Related to #456

## 📋 变更类型

- [ ] 新功能
- [ ] 问题修复
- [ ] 文档更新
- [ ] 样式调整
- [ ] 代码重构
- [ ] 测试相关
- [ ] 其他

## 🧪 测试

- [ ] 单元测试通过
- [ ] 集成测试通过
- [ ] 手动测试通过
- [ ] 文档更新

## 📸 截图/录屏

如果涉及UI变更，请提供截图或录屏。

## ✅ 检查清单

- [ ] 代码遵循项目规范
- [ ] 已添加必要的测试
- [ ] 文档已更新
- [ ] 变更日志已更新

🐛 问题报告

报告Bug

使用 Issue模板报告问题：

描述问题现象
提供复现步骤
说明期望行为
提供环境信息
附上相关截图或代码

功能建议

使用功能请求模板：

描述需求背景
说明解决方案
考虑替代方案
提供使用示例

📖 文档贡献

文档结构

docs/src/
├── guide/           # 指南文档
├── components/      # 组件文档
├── api-docs/        # API文档
└── examples/        # 示例代码

文档规范

使用 Markdown 格式
代码示例要完整可运行
添加适当的代码注释
包含必要的截图说明

组件文档模板

markdown

# ComponentName 组件名

组件的简要描述。

## 基础用法

最简单的使用示例。

\`\`\`vue
<template>
  <ErpComponentName v-model="value" />
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>
\`\`\`

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 绑定值 | string | - |
| placeholder | 占位符 | string | - |

### Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| change | 值变化时触发 | (value: string) |

### Slots

| 插槽名 | 说明 |
|--------|------|
| default | 默认内容 |

🧪 测试

单元测试

使用 Vitest 进行单元测试：

typescript

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ErpButton from '../ErpButton.vue'

describe('ErpButton', () => {
  it('renders correctly', () => {
    const wrapper = mount(ErpButton, {
      props: { type: 'primary' },
      slots: { default: 'Click me' }
    })
    
    expect(wrapper.text()).toBe('Click me')
    expect(wrapper.classes()).toContain('erp-button--primary')
  })
  
  it('emits click event', async () => {
    const wrapper = mount(ErpButton)
    await wrapper.trigger('click')
    
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})

测试覆盖率

确保新增代码有适当的测试覆盖率：

bash

# 运行测试并生成覆盖率报告
npm run test:coverage

🚀 发布流程

版本管理

项目使用语义化版本：

major: 不兼容的API变更
minor: 向下兼容的新功能
patch: 向下兼容的问题修复

发布步骤

更新版本号
更新变更日志
创建发布标签
发布到npm仓库

bash

# 发布新版本
npm run release

# 发布beta版本
npm run release:beta

💡 开发建议

性能优化

使用 v-memo 优化列表渲染
合理使用 computed 和 watch
避免不必要的响应式数据
使用虚拟滚动处理大数据

可访问性

添加适当的 ARIA 属性
支持键盘导航
确保颜色对比度
提供屏幕阅读器支持

国际化

使用 i18n 处理文本
考虑RTL语言支持
注意日期和数字格式

🤝 社区

交流渠道

GitHub Issues: 问题报告和功能建议
GitHub Discussions: 技术讨论和问答
内部群组: 日常交流和快速响应

行为准则

我们致力于营造一个开放、友好的社区环境：

尊重不同观点和经验
接受建设性批评
关注对社区最有利的事情
对其他社区成员表示同理心

📞 联系我们

如果你有任何问题或建议，欢迎通过以下方式联系我们：

📧 Email: 1027061303@qq.com
💬 GitHub Issues: 提交问题
📖 文档: 查看文档

感谢你的贡献！🎉

Form 动态表单

SearchForm 查询表单

Table 数据表格

贡献指南

🚀 快速开始

环境准备

获取代码

📋 开发流程

1. 创建分支

2. 开发规范

代码规范

命名规范

组件开发

3. 提交代码

提交信息规范

提交前检查

4. 创建 Pull Request

PR 模板

🐛 问题报告

报告Bug

功能建议

📖 文档贡献

文档结构

文档规范

组件文档模板

🧪 测试

单元测试

测试覆盖率

🚀 发布流程

版本管理

发布步骤

💡 开发建议

性能优化

可访问性

国际化

🤝 社区

交流渠道

行为准则

📞 联系我们

贡献指南 ​

🚀 快速开始 ​

环境准备 ​

获取代码 ​

📋 开发流程 ​

1. 创建分支 ​

2. 开发规范 ​

代码规范 ​

命名规范 ​

组件开发 ​

3. 提交代码 ​

提交信息规范 ​

提交前检查 ​

4. 创建 Pull Request ​

PR 模板 ​

🐛 问题报告 ​

报告Bug ​

功能建议 ​

📖 文档贡献 ​

文档结构 ​

文档规范 ​

组件文档模板 ​

🧪 测试 ​

单元测试 ​

测试覆盖率 ​

🚀 发布流程 ​

版本管理 ​

发布步骤 ​

💡 开发建议 ​

性能优化 ​

可访问性 ​

国际化 ​

🤝 社区 ​

交流渠道 ​

行为准则 ​

📞 联系我们 ​

贡献指南

🚀 快速开始

环境准备

获取代码

📋 开发流程

1. 创建分支

2. 开发规范

代码规范

命名规范

组件开发

3. 提交代码

提交信息规范

提交前检查

4. 创建 Pull Request

PR 模板

🐛 问题报告

报告Bug

功能建议

📖 文档贡献

文档结构

文档规范

组件文档模板

🧪 测试

单元测试

测试覆盖率

🚀 发布流程

版本管理

发布步骤

💡 开发建议

性能优化

可访问性

国际化

🤝 社区

交流渠道

行为准则

📞 联系我们