TWCPT - Vue 3 + Element-plus 组件库

TWCPT 是一个基于 Vue 3、TypeScript 和 Element-plus 构建的现代企业级组件库。

分支管理

1. 创建开发分支: 开发新功能或修复问题时，应基于 dev 分支创建对应的功能分支。分支命名格式为 feat/、fix/、refactor/、docs/、perf/ 或 chore/ 前缀，后跟具体描述。

2. 提交代码审查: 完成开发后，通过 Pull Request (PR) 或 Merge Request (MR) 提交至 dev 分支进行代码审查。提交后可保留自建分支，无需删除。

3. 版本发布流程: 在 dev 分支完成构建后（执行 npm run build-all），需先执行 npm login 进行身份验证，随后执行 npm run patch 发布新版本。

项目特点

• 基于 Element-plus 的现代化 UI 组件
• 全面的 TypeScript 类型支持
• 开箱即用的企业级业务组件
• 内置国际化支持 (i18n)
• 权限控制系统
• 高度可定制的主题配置

分支命名规范 (Branching Guidelines)

为了保持组件库开发的条理性以及 CI/CD 流程的自动化，本项目采用语义化分支命名规范。

1. 核心分支 (Core Branches)

| 分支名 | 说明 | |:------|:-------------------------------| | dev | 开发分支。日常功能集成的基准分支，所有 PR 默认合并至此。 |

2. 短期协作分支 (Supporting Branches)

所有短期分支应遵循 类别/描述 的格式，使用小写字母并以中划线分隔。

功能开发 (Feature)

用于开发新组件或新特性。

• 格式: feat/description
• 示例: git checkout -b feat/button-component

缺陷修复 (Bugfix)

用于修复组件 Bug。

• 格式: fix/description
• 示例: git checkout -b fix/select-dropdown-overflow

代码重构 (Refactor)

不影响功能逻辑的代码结构调整。

• 格式: refactor/description
• 示例: git checkout -b refactor/use-callback-optimization

文档更新 (Docs)

仅涉及文档、注释、Storybook 示例的修改。

• 格式: docs/description
• 示例: git checkout -b docs/add-api-tables

性能优化 (Perf)

专门针对组件渲染性能或包体积的优化。

• 格式: perf/description
• 示例: git checkout -b perf/reduce-bundle-size

辅助任务 (Chore)

构建流程、依赖库更新、CI 配置等非业务逻辑修改。

• 格式: chore/description
• 示例: git checkout -b chore/upgrade-react-18

3. 工作流建议 (Workflow)

1. 同步主分支: 开发前确保 dev 分支是最新的。
2. 创建分支: 从 dev 拉取新分支。

   git checkout -b feat/your-feature-name

3. 提交代码: 完成开发后提交 PR 到 dev 分支。
4. 代码审查: 等待代码审查通过后合并。

安装使用

安装

npm install twcpt
# 或
yarn add twcpt
# 或
pnpm add twcpt

基础使用

import { createApp } from 'vue'
import { twcptInit } from 'twcpt'
import 'twcpt/dist/index.css'

const app = createApp(App)

// 初始化 TWCPT
twcptInit({
  app,
  defaultLanguage: 'zh-CN', // 可选：设置默认语言
  colors: {
    primary: '#FF5722', // 可选：自定义主题色
    blue: '#2196F3'
  }
})

app.mount('#app')

样式隔离

为了避免 TWCPT 的颜色配置影响外部项目，所有 TWCPT 组件必须包裹在 .twcpt-container 容器内：

<template>
  <div class="twcpt-container">
    <!-- TWCPT 组件只在此容器内生效 -->
    <JTWButton type="primary">按钮</JTWButton>
    <JTWTable :data="tableData" />
  </div>
</template>

重要说明：

• .twcpt-container 确保 TWCPT 的颜色变量不会影响外部项目
• 如果 A 项目引用了 B 组件（TWCPT），两者的颜色配置互不影响
• 每个使用 TWCPT 的区域都需要包裹 .twcpt-container

按需引入

import { JTWButton, JTWTable } from 'twcpt'

export default {
  components: {
    JTWButton,
    JTWTable
  }
}

组件列表

• j-tw series: 基于 Element Plus 的封装组件

  • JTWAutocomplete - 自动完成输入框
  • JTWButton - 按钮组件
  • JTWTable - 表格组件
  • 更多组件开发中...

• j-ch series: 图表组件

  • JCHBar - 柱状图
  • JCHBarLine - 混合图表
  • JCHBubble - 气泡图
  • 更多图表组件开发中...

开发指南

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 发布到 npm
npm run patch

项目结构

src/
├── components/          # 组件源码
│   ├── j-tw/           # Element Plus 封装组件
│   ├── j-ch/           # 图表组件
│   └── j-c/            # 基础组件
├── composables/        # 组合式函数
├── css/               # 样式文件
└── types.ts           # 类型定义

贡献指南

1. Fork 本仓库
2. 创建你的功能分支 (git checkout -b feat/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feat/AmazingFeature)
5. 开启一个 Pull Request

许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

更新日志

查看 CHANGELOG.md 了解版本更新详情。