Default 默认
默认倾斜风格的卡片，带有4色阴影循环效果
React
COMPONENT LIBRARY
DevManga 组件库
完整的漫画风格React组件集合，包含多种变体和样式
Tag 标签
方角标签，支持倾斜动画和4色循环
Badge 徽章
4种动画变体：bounce、static、rotate、pulse
BOUNCE
STATIC
ROTATE
PULSE
Button 按钮
5种变体：primary、secondary、tertiary、outline、ghost
Card 卡片
多种变体：default、comic、monitor、float、minimal、square、rounded、skewed
Comic 漫画
更夸张的漫画效果，带有旋转动画
Vue
Square 方角
完全方角的卡片设计，简洁现代
Angular
Rounded 圆角
大圆角设计，柔和友好的视觉效果
Svelte
Skewed 倾斜
Y轴倾斜效果，独特的视觉风格
Next.js
CollapsibleCard 折叠卡片
可折叠的卡片组件，支持多种颜色和变体
新安CRM系统
全栈开发工程师
2025.11 - 至今
智慧仓储/智慧营地
全栈开发工程师
2025.01 - 2025.11
智慧仓储是以物联网为基础的三维建模与AI大模型为方向的企业级WMS解决方案，系统集成仓储管理、库位管理、物位管理、物料分析、供应商管理、入库管理、出库管理、库存管理、盘点管理、报废管理等功能。
数据治理中心
全栈开发工程师
2023.09 - 2024.12
数据治理中心（DataArts Studio）是整合全生命周期应用一站式开发运营平台，提供数据集成、数据开发、数据治理、数据服务等功能，支持行业知识库智能化建设，支持大数据存储与计算分析等数据能能，帮助企业客户快速构建数据运营能力。
StatsCard 统计卡片
用于展示统计数据
9年+
工作经验
10+
核心项目
20+
技术栈
6家
知名企业
ContactCard 联系卡片
用于展示联系信息
phone
电话
13261915710
email
邮箱
example@qq.com
location_on
位置
北京 · 32岁
payments
期望薪资
20-25K
TechCard 技术卡片
用于展示技术栈，支持3种颜色变体：primary、secondary、tertiary
data_objectTypeScript
layersReact/Next
databasePostgreSQL
cloud_doneCloudflare
ImageCard 图片卡片
用于角色/柱选择，支持光环效果
贝蒂
Beatrice
艾米莉亚
Emilia
主角
蕾姆
Rem
Toast 提示框
漫画风格的提示框，支持5种变体和4种位置
Alert 警告框
多种类型的警告提示框
check_circle
操作成功
你的更改已成功保存！
error
操作失败
发生了一个错误，请稍后重试。
warning
注意
此操作可能会影响系统性能。
info
这是一条信息提示。
CTASection 行动号召
带呼吸火花动画的CTA区域代码不仅是工具，更是创造价值的艺术
创新品质卓越
CodeBlock 代码块
漫画风格的代码块，支持行号和高亮
example.js
codejavascript
1function hello() {2 console.log('Hello World!');3 return true;4}Timeline 时间线
用于展示工作/项目经历
2024-01
高级全栈工程师
XX科技公司
- 01. 负责核心业务系统的架构设计和开发
- 02. 带领团队完成多个重点项目
2022-06
全栈工程师
YY互联网公司
- 01. 参与大型电商平台的开发
- 02. 优化系统性能
BentoCard Bento网格卡片
用于技能展示的网格卡片
terminal后端框架
SPRINGMYBATIS-PLUSSPRINGBOOTSPRINGCLOUD
draw前端框架
VUEREACTANGULAR
Input 输入框
多种样式的输入框组件
person
email
lock
密码长度至少8位
search
Bubble 气泡卡片
对话气泡，支持多种样式
这是一个普通的对话气泡！
这是一个思考气泡...
这个功能必须今天上线！！！
Table 表格
漫画风格的数据表格
| 组件名称 | 类型 | 状态 | 版本 |
|---|---|---|---|
| Button | 按钮 | ✅ 完成 | v1.0.0 |
| Card | 卡片 | ✅ 完成 | v1.2.0 |
| Input | 输入框 | ✅ 完成 | v1.0.0 |
| Table | 表格 | ✅ 完成 | v1.0.0 |
| Modal | 弹窗 | ✅ 完成 | v1.0.0 |
ProgressBar 进度条
多种样式的进度条组件
默认进度条75/100
条纹进度条
动画进度条
渐变进度条90/100
发光进度条
Avatar 头像
用户头像组件，支持多种尺寸和样式
5
DM
Modal 弹窗
模态对话框组件
Slider 滑块
滑动选择器组件
Divider 分隔线
内容分隔组件
虚线分隔
渐变分隔
漫画风格
Skeleton 骨架屏
加载占位组件
DataTable 增强表格
支持搜索、排序、分页的数据表格
search
姓名unfold_more | 年龄unfold_more | 城市unfold_more | 职位 |
|---|---|---|---|
| 张三 | 28 | 北京 | 前端工程师 |
| 李四 | 32 | 上海 | 后端工程师 |
| 王五 | 25 | 深圳 | 全栈工程师 |
| 赵六 | 30 | 杭州 | 架构师 |
| 钱七 | 27 | 成都 | UI设计师 |
第 1 / 2 页 · 共 6 条
Tabs 标签页
4种变体：default、pills、underline、comic
个人简介
这是第一个标签页的内容，展示基础信息。
Accordion 手风琴
可折叠的内容面板
React是一个用于构建用户界面的JavaScript库，由Facebook开发和维护。
TypeScript是JavaScript的超集，添加了静态类型检查和其他特性。
Docusaurus是一个静态网站生成器，专为构建文档网站而设计。
Pagination 分页
支持页码跳转和每页数量选择
...
跳至页
第 3 / 10 页 · 共 100 条
Breadcrumb 面包屑
导航路径指示器
Dropdown 下拉菜单
下拉选择菜单
Sidebar 侧边栏
导航侧边栏组件