vladder

v1.0.66

Published

11 days ago

基于vue3的前端组件库

0High
0Medium
0Low

xzhy527

VLadder

基于 Vue 3 的现代化组件库，提供丰富的 UI 组件和功能。

特性

🚀 基于 Vue 3 和 TypeScript 开发
📦 支持按需引入
🎨 提供丰富的主题定制能力
📱 支持响应式设计
🛠 提供完整的类型定义

安装

NPM

# 安装组件库
npm install vladder

# 安装必需的依赖
npm install vue@^3.4.10

# 安装可选的依赖（按需安装）
npm install echarts@^5.6.0            # 如果需要使用图表组件
npm install @vueup/vue-quill@^1.2.0   # 如果需要使用富文本编辑器
npm install json-editor-vue3@^1.1.1   # 如果需要使用 JSON 编辑器
npm install jsoneditor@^10.0.3        # JSON 编辑器的依赖

YARN

# 安装组件库
yarn add vladder

# 安装必需的依赖
yarn add vue@^3.4.10

# 安装可选的依赖（按需安装）
yarn add echarts@^5.6.0
yarn add @vueup/vue-quill@^1.2.0
yarn add json-editor-vue3@^1.1.1
yarn add jsoneditor@^10.0.3

快速开始

完整引入

import { createApp } from 'vue'
import VLadder from 'vladder'
import 'vladder/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VLadder)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import { LadderButton, LadderInput } from 'vladder'
import 'vladder/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.component('LadderButton', LadderButton)
app.component('LadderInput', LadderInput)
app.mount('#app')

功能模块

VLadder 提供多个核心功能模块，满足不同场景的开发需求：

📊 数据展示模块

完整的数据展示解决方案，支持多种数据格式和交互方式

📝 表单处理模块

企业级表单解决方案，支持复杂表单验证和动态表单构建

🎨 界面交互模块

丰富的用户界面组件，提供现代化的交互体验

📱 响应式布局模块

完善的响应式布局系统，适配各种设备尺寸

🔐 安全通信模块

基于 WASM 的企业级安全通信解决方案

📈 数据可视化模块

集成图表和数据分析功能

组件库详细清单

🎛️ 基础控件组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderButton | 多样式按钮组件 | 操作触发、表单提交、导航跳转 | | LadderButtonGroup | 按钮组合组件 | 工具栏、选项卡切换 | | LadderInput | 文本输入框 | 单行文本输入、搜索框 | | LadderTextarea | 多行文本域 | 长文本输入、评论输入 | | LadderNumber | 数字输入框 | 数值输入、计数器 | | LadderRadio | 单选按钮 | 单项选择、配置选项 | | LadderRadioGroup | 单选按钮组 | 多个选项的单选 | | LadderCheck | 复选框 | 多项选择、开关控制 | | LadderSwitch | 开关组件 | 功能开关、状态切换 | | LadderSelector | 下拉选择器 | 选项选择、级联选择 | | LadderColor | 颜色选择器 | 颜色配置、主题设置 |

📋 表单处理组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderFormItem | 表单项容器 | 表单字段包装、验证显示 | | LadderFormView | 表单视图 | 数据表单、设置页面 | | LadderFormDialog | 表单对话框 | 弹窗表单、快速编辑 | | LadderAutoComplete | 自动完成输入 | 智能搜索、输入提示 | | LadderScore | 评分组件 | 用户评价、质量评分 |

📊 数据展示组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderTable | 数据表格 | 数据列表、报表展示 | | LadderGrid | 数据网格 | 大数据展示、虚拟滚动 | | LadderSheet | 电子表格 | 数据编辑、表格计算 | | LadderTableData | 表格数据容器 | 数据管理、状态控制 | | LadderPagination | 分页组件 | 数据分页、导航控制 | | LadderTree | 树形控件 | 层级数据、组织架构 | | LadderTreeDialog | 树形选择对话框 | 数据选择、权限配置 | | LadderListView | 列表视图 | 数据列表、卡片展示 |

📅 日期时间组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderCalendar | 日历组件 | 日期选择、日程安排 | | LadderDatePicker | 日期选择器 | 日期输入、时间范围 | | LadderDateBox | 日期输入框 | 简化日期输入 |

💬 反馈交互组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderLayer | 弹出层 | 模态对话框、遮罩层 | | LadderFlyout | 飞出面板 | 侧边栏、快速操作面板 | | LadderPopover | 气泡弹出框 | 信息提示、操作菜单 | | LadderMessage | 消息通知 | 系统通知、操作反馈 | | LadderTooltip | 文字提示 | 帮助说明、状态提示 | | LadderLoading | 加载状态 | 数据加载、处理等待 | | LadderConfirm | 确认对话框 | 危险操作确认 |

🎨 布局导航组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderTabs | 标签页组件 | 内容切换、功能分组 | | LadderTabPane | 标签页面板 | 标签页内容容器 | | LadderCollapse | 折叠面板 | 内容折叠、空间节省 | | LadderCollapseItem | 折叠面板项 | 单个折叠项 | | LadderAccordion | 手风琴组件 | 分组内容展示 | | LadderSteps | 步骤条 | 流程指引、进度显示 | | LadderAside | 侧边栏 | 导航菜单、辅助内容 | | LadderSuspend | 悬浮组件 | 快捷操作、工具面板 |

📱 移动适配组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderDraggable | 拖拽组件 | 元素拖拽、排序功能 | | LadderSpace | 间距组件 | 布局间距、响应式空白 |

🎯 业务功能组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderChooser | 选择器组件 | 数据选择、人员选择 | | LadderOrganize | 组织架构 | 部门管理、人员组织 | | LadderCondition | 条件构建器 | 搜索条件、筛选器 | | LadderPictureSelector | 图片选择器 | 图片上传、图库选择 | | LadderTableCombox | 表格下拉框 | 复杂数据选择 |

📈 数据可视化组件

| 组件名 | 功能描述 | 应用场景 | 依赖 | |--------|----------|----------|------| | LadderEcharts | 图表组件 | 数据可视化、报表图表 | echarts@^5.6.0 | | LadderStatistic | 统计数值 | 数据统计、指标展示 | - | | LadderDataBlock | 数据块 | 信息卡片、数据展示 | - |

✏️ 编辑器组件

| 组件名 | 功能描述 | 应用场景 | 依赖 | |--------|----------|----------|------| | LadderQuilleditor | 富文本编辑器 | 文章编辑、内容管理 | @vueup/vue-quill@^1.2.0 | | LadderJsonShow | JSON展示器 | 数据预览、接口调试 | - | | LadderMarkdown | Markdown编辑器 | 文档编写、技术文档 | - | | CodeHighlight | 代码高亮 | 代码展示、语法高亮 | - |

📎 文件处理组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderUploader | 文件上传 | 单文件上传、进度显示 | | LadderUploadFiles | 多文件上传 | 批量上传、文件管理 | | LadderImageUploader | 图片上传 | 图片上传、预览功能 |

🎪 展示效果组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderPreview | 预览组件 | 内容预览、图片查看 | | LadderEmpty | 空状态 | 无数据提示、占位显示 | | LadderResult | 结果页面 | 操作结果、状态页面 | | LadderShare | 分享组件 | 社交分享、链接分享 | | LadderBadge | 徽章组件 | 状态标识、消息提示 | | TimeCard | 时间卡片 | 时间展示、倒计时 | | LadderColWord | 彩色文字 | 关键词高亮、文本美化 |

👤 用户相关组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LadderFieldTranslation | 字段翻译 | 多语言支持、国际化 |

🔧 工具辅助组件

| 组件名 | 功能描述 | 应用场景 | |--------|----------|----------| | LaaderTransition | 过渡动画 | 页面切换、动画效果 | | LadderTableSkeleton | 表格骨架屏 | 加载占位、用户体验优化 |

主题定制

VLadder 提供了灵活的主题定制能力，你可以通过 CSS 变量来自定义组件的样式：

:root {
  --vladder-primary-color: #1890ff;
  --vladder-success-color: #52c41a;
  --vladder-warning-color: #faad14;
  --vladder-error-color: #f5222d;
  --vladder-font-size-base: 14px;
  --vladder-border-radius-base: 4px;
}

浏览器支持

Chrome >= 64
Firefox >= 78
Safari >= 12
Edge >= 79

依赖说明

必需依赖

Vue >= 3.4.10

可选依赖

echarts >= 5.6.0 (图表组件)
@vueup/vue-quill >= 1.2.0 (富文本编辑器)
json-editor-vue3 >= 1.1.1 (JSON 编辑器)
jsoneditor >= 10.0.3 (JSON 编辑器依赖)

WASM 模块

VLadder 集成了高性能的 WebAssembly 模块，提供安全的加密功能和网络请求能力。

功能特性

🔐 BaseXX 加密: 支持 Base66/77/88 编码的高安全性加密算法
🌐 HTTP 客户端: 基于 Fetch API 的高性能网络请求
🛠️ 工具函数: UUID 生成、时间码生成、Base64 编解码
⚡ 高性能: 比 JavaScript 实现快 2-5 倍
🔄 编码升级: 支持四位数编码控制，增强数据传输安全性

安全通信系统

WASM 模块内置企业级安全通信系统，提供透明的数据加密传输：

基础使用

import { AuthHelper } from 'vladder/wasm';

// 设置认证信息
AuthHelper.setAuth('your-auth-token');

// 自动安全请求（内置加密/解密）
const result = await Http.request('/api/data', {
  userId: 123
});
// 数据自动加密传输，响应自动解密

安全特性

企业级加密传输

多层混淆算法: 确保数据传输安全性
动态密钥系统: 防止密钥泄露风险
自动编码解码: 透明的安全处理

HTTP 请求自动处理

WASM 模块提供透明的安全 HTTP 请求：

import { Http } from 'vladder/wasm';

// 自动安全请求处理
const result = await Http.request('/api/data', {
  key: 'value'
});
// 自动加密传输，自动解密响应

// 代理请求支持
const proxyResult = await Http.proxy('User.GetInfo', {
  id: 123
});

// FormData 上传支持  
const formData = new FormData();
formData.append('file', fileObject);
const uploadResult = await Http.request('/api/upload', formData);

性能对比

| 操作类型 | JavaScript | WASM | 提升倍数 | |---------|-----------|------|---------| | BaseXX 加密 | 2.3ms | 0.8ms | 2.9x | | BaseXX 解密 | 2.1ms | 0.7ms | 3.0x | | UUID 生成 | 0.1ms | 0.04ms | 2.5x | | Base64 编码 | 0.2ms | 0.05ms | 4.0x |

构建和使用

构建 WASM 模块

# 安装依赖
cargo install wasm-pack

# 构建模块
npm run build:wasm

在项目中使用

// 完整导入
import { createApp } from 'vue'
import VLadder from 'vladder'
import 'vladder/dist/style.css'

const app = createApp(App)
app.use(VLadder)

// 使用 WASM 功能
import { AuthHelper, Http, BaseXX } from 'vladder/wasm';

// 设置认证编码
AuthHelper.setEncode(6611);
AuthHelper.setAuth('your-auth-token');

// 发送安全请求
const result = await Http.request('/api/secure-data', {
  userId: 123
});

WASM 模块维护指南

当 WASM 模块发生功能变化时，请按以下步骤更新文档：

功能特性部分: 更新新增的功能点
API 示例: 添加或修改使用示例
编码类型支持: 如有新的编码格式，更新表格
性能对比: 如有性能改进，更新对比数据
更新日志: 在主文档更新日志中记录变更
故障排除: 添加新的常见问题和解决方案

版本发布检查清单

[ ] 更新功能特性说明
[ ] 验证代码示例可用性
[ ] 更新性能数据
[ ] 记录破坏性变更（如有）
[ ] 更新故障排除指南
[ ] 确认向后兼容性说明

故障排除

常见问题

Q: WASM 模块加载失败

// 确保正确初始化模块
import init from 'vladder/wasm';
await init();

Q: 加密失败 "密钥长度不足"

// 密钥至少需要8位字符，建议使用字母+数字+特殊字符组合
AuthHelper.setSignKey("sign123", "MySecureKey123!");

Q: 安全请求设置

// 确保在发送请求前设置认证信息
AuthHelper.setAuth('your-auth-token');
// 然后发送安全请求

开发计划

[ ] 更多的组件
[ ] 更好的主题支持
[ ] 更完善的文档
[ ] 单元测试覆盖
[ ] 性能优化
[ ] WASM 模块功能扩展
- [ ] 更多加密算法支持
- [ ] 文件上传下载优化
- [ ] 离线数据缓存
- [ ] 更多编码格式支持

贡献指南

Fork 本仓库
创建你的特性分支 (git checkout -b feature/AmazingFeature)
提交你的改动 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
创建一个 Pull Request

许可证

MIT

作者

肖昭阳

更新日志

1.0.50 (最新) - WASM 模块重大升级

✅ 安全通信系统: 企业级加密传输，保障数据安全
✅ FormData 支持: 完美支持文件上传和二进制数据传输
✅ 自动处理机制: 透明的加密解密处理，开发体验优化
✅ MD5 算法修复: 与标准算法完全兼容，解决签名验证问题
✅ 认证系统升级: 优化认证头生成，支持多种认证方式
✅ 性能优化: WASM 原生性能，处理速度提升 2-5 倍
🔄 API 完善: 简化使用方式，提供更友好的开发接口
📖 文档升级: 详细的组件清单和功能模块说明

1.0.21

优化打包体积
将大型依赖设置为外部依赖
修复已知问题

1.0.20

初始发布
提供基础组件库功能