scic-element-components
v1.0.32
Published
基于element-eoss研发的业务组件库
Downloads
133
Readme
SCIC Element Components
📖 项目简介
基于 Vue 2.6.14 和 Element UI (element-eoss) 构建的企业级组件库，专注于提供丰富的业务组件和完整的开发工具链。经过全面重构和优化，具备详细的文档说明和完善的测试覆盖。
✨ 核心特性
- 🎨 丰富组件库 - 提供 30+ 个高质量业务组件
- 📦 开箱即用 - 完善的构建和开发工具链，支持按需引入
- 🚀 高性能 - 基于 Vite 4.x 的快速构建，优化包体积
- 🧪 测试覆盖 - 完整的单元测试和覆盖率报告
- 📖 详细文档 - 每个组件都有完整的 API 文档和使用示例
- 🔧 企业级 - 适用于企业级应用开发，稳定可靠
🛠️ 技术栈
| 技术 | 版本 | 说明 | | -------------- | -------------------- | ------------ | | Vue | 2.6.14 | 核心框架 | | Vite | 4.5.2 | 构建工具 | | Element UI | element-eoss@^2.14.3 | UI 基础库 | | SCSS | 1.32.12 | 样式预处理器 | | ESLint | 7.32.0 | 代码检查 | | Prettier | 3.4.1 | 代码格式化 |
🚀 快速开始
环境要求
- Node.js >= 16.0.0
- pnpm >= 8.0.0 (推荐) 或 npm >= 8.0.0
安装
# 使用 pnpm (推荐)
pnpm add scic-element-components
# 使用 npm
npm install scic-element-components
# 使用 yarn
yarn add scic-element-components安装 Peer Dependencies
# 必须安装的依赖
pnpm add [email protected] element-eoss@^2.14.3
# 或使用 npm
npm install [email protected] element-eoss@^2.14.3使用方式
1. 全局引入
import Vue from 'vue';
import ElementComponents from 'scic-element-components';
import 'scic-element-components/lib/style.css';
// 全局注册所有组件
Vue.use(ElementComponents, {
// 可选全局配置
serveUrl: 'https://your-api-server.com',
// 其他全局配置...
});2. 按需引入 (推荐)
import { XButton, XForm, XTable, XDialog } from 'scic-element-components';
import 'scic-element-components/lib/style.css';
// 注册需要的组件
Vue.use(XButton);
Vue.use(XForm);
Vue.use(XTable);
Vue.use(XDialog);3. 单个组件引入
import XButton from 'scic-element-components/lib/button';
import 'scic-element-components/lib/button/style.css';
Vue.component('XButton', XButton);🧩 组件目录
🎯 基础组件 (8个)
| 组件 | 说明 | 状态 | 文档 | | ----------- | -------------------------------- | ---- | ------------------------------------------- | | XButton | 按钮组件，支持多种类型和加载状态 | ✅ | 查看文档 | | XInput | 输入框组件，支持各种输入类型 | ✅ | 查看文档 | | XSelect | 选择器组件，支持单选/多选 | ✅ | 查看文档 | | XSelectTree | 树形选择器，支持层级数据选择 | ✅ | 查看文档 | | XSwitch | 开关组件 | ✅ | 查看文档 | | XRadio | 单选框组件 | ✅ | 查看文档 | | XCheckbox | 复选框组件 | ✅ | 查看文档 | | XText | 文本显示组件，支持多种显示模式 | ✅ | 查看文档 |
📝 表单组件 (8个)
| 组件 | 说明 | 状态 | 文档 | | ----------------- | ------------------------------ | ---- | ------------------------------------------------- | | XForm | 表单组件，支持动态表单和校验 | ✅ | 查看文档 | | XFormItems | 表单项组件，支持网格布局 | ✅ | 查看文档 | | XDatePicker | 日期选择器，支持多种日期格式 | ✅ | 查看文档 | | XInputNumber | 数字输入框 | ✅ | 查看文档 | | XInputNumberRange | 数字范围输入框 | ✅ | 查看文档 | | XCascader | 级联选择器 | ✅ | 查看文档 | | XUpload | 文件上传组件，支持多种上传模式 | ✅ | 查看文档 | | XPerson | 人员/部门选择组件 | ✅ | 查看文档 |
📊 数据展示组件 (6个)
| 组件 | 说明 | 状态 | 文档 | | ------------ | ---------------------------------- | ---- | -------------------------------------------- | | XTable | 高级表格组件，支持排序、筛选、分页 | ✅ | 查看文档 | | XEditTable | 可编辑表格组件 | ✅ | 查看文档 | | XSearchTable | 搜索表格组件，集成搜索和表格 | ✅ | 查看文档 | | XPagination | 分页组件 | ✅ | 查看文档 | | XEmpty | 空状态组件 | ✅ | 查看文档 | | XTitle | 标题组件 | ✅ | 查看文档 |
🔧 功能组件 (8个)
| 组件 | 说明 | 状态 | 文档 | | ------------ | ------------------------------ | ---- | -------------------------------------------- | | XDialog | 对话框组件，支持多种尺寸和模式 | ✅ | 查看文档 | | XTooltip | 文字提示组件 | ✅ | 查看文档 | | XTransfer | 穿梭框组件 | ✅ | 查看文档 | | XCustom | 自定义渲染组件 | ✅ | 查看文档 | | XSearch | 搜索组件，支持多种搜索条件 | ✅ | 查看文档 | | XToolbar | 工具栏组件 | ✅ | 查看文档 | | XSelectPage | 分页选择器组件 | ✅ | 查看文档 | | XSelectTable | 表格选择器组件 | ✅ | 查看文档 |
状态说明: ✅ 已完成 | 🔄 开发中 | ❌ 未开始
📁 项目结构
scic-element-components/
├── packages/ # 组件源码目录
│ ├── button/ # 按钮组件
│ │ ├── index.vue # 组件实现
│ │ ├── index.js # 组件导出
│ │ ├── constants.js # 常量定义
│ │ ├── utils.js # 工具函数
│ │ └── README.md # 组件文档
│ ├── form/ # 表单组件
│ ├── table/ # 表格组件
│ ├── ... # 其他组件
│ └── index.js # 统一导出
├── src/ # 示例文档源码
│ ├── components/ # 文档组件
│ ├── views/ # 页面视图
│ ├── router/ # 路由配置
│ └── App.vue # 主应用
├── lib/ # 构建产物目录
├── docs/ # 文档构建产物
├── .husky/ # Git Hooks
├── vite.config.js # Vite 配置
├── package.json # 项目配置
├── CHANGELOG.md # 更新日志
└── README.md # 项目文档🔧 开发指南
本地开发
# 克隆项目
git clone <repository-url>
cd scic-element-components
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev开发服务器将在 http://localhost:5010 启动。
可用命令
# 开发相关
pnpm dev # 启动开发服务器
pnpm build:component # 构建组件库
pnpm build:example # 构建示例文档
pnpm build # 同时构建组件库和文档
pnpm preview # 预览构建结果
# 代码质量
pnpm lint # 代码检查
pnpm lint:fix # 自动修复代码问题
# 分析工具
pnpm analyze # 构建分析报告
# 发布相关
pnpm changelog # 生成更新日志
pnpm commit # 提交代码（使用规范）
pnpm publish:auto # 自动发布和生成日志
# 其他
pnpm clean:cache # 清理缓存开发规范
代码风格
- 使用 ESLint + Prettier 进行代码格式化
- 遵循 Vue 2.x 官方风格指南
- 组件命名使用 PascalCase，文件名使用 kebab-case
组件开发规范
- 目录结构: 每个组件独立目录，包含实现、文档、测试
- 命名规范: 组件以
X前缀命名，如XButton - Props 定义: 提供完整的 props 验证和默认值
- 事件规范: 使用 kebab-case 命名事件
- 文档要求: 每个组件必须有完整的 API 文档和使用示例
提交规范
项目使用 Conventional Commits 规范：
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]类型说明:
feat: 新功能fix: 修复问题docs: 文档更新style: 代码格式调整refactor: 代码重构perf: 性能优化test: 测试相关build: 构建系统变动ci: CI配置变动chore: 其他变动
🤝 贡献指南
贡献流程
- Fork 本仓库
- 创建特性分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'feat: add amazing feature' - 推送分支:
git push origin feature/amazing-feature - 提交 Pull Request
贡献要求
- ✅ 新增组件需要包含完整的文档和测试
- ✅ 确保代码风格检查通过:
pnpm lint - ✅ 确保构建成功:
pnpm build - ✅ 提交信息遵循 Conventional Commits 规范
- ✅ 更新相关文档
🔗 相关链接
📞 支持与反馈
如果您在使用过程中遇到问题或有建议，可以通过以下方式：
- 🐛 提交 Issue
- 📖 查看组件文档和示例
- 💬 联系维护者: Linyer [email protected]
📜 许可证
MIT License © 2024 SCIC Element Components
📈 项目状态
当前版本: v1.0.30
重构完成情况:
- ✅ 重构了组件代码结构，提升可维护性
- ✅ 完善了组件文档和 API 说明
- ✅ 优化了构建配置和开发工具链
- ✅ 更新了项目文档和开发指南
- ✅ 新增人员/部门选择组件
- ✅ 优化表单组件，支持网格布局
- ✅ 增强表格组件，支持多维度排序
近期更新 (v1.0.30):
- 🐛 修复 cascader 组件 emitPath 的 bug
- 🐛 修复 form、formItems 组件网格模式的样式问题
- 🐛 修复 searchTable 组件排序无效的 bug
- ✨ editTable 组件支持 disabled 属性
- ✨ searchTable 组件的 search 支持插入表格的 toolbars 区域
下一步计划:
- 🔄 增加更多实用的业务组件
- 🔄 优化组件性能和用户体验
- 🔄 扩展主题定制能力