AXI 低代码设计器 - 按钮样式改进

概述

本项目是一个基于 Vue 3 + Vite 的低代码视觉设计器，专注于按钮组件的设计和样式定制。最新版本对按钮样式进行了全面改进，提供了丰富的视觉效果和交互体验。

主要功能

🎨 丰富的按钮类型

• 主要按钮 - 用于主要操作，渐变背景
• 默认按钮 - 用于次要操作，简洁设计
• 虚线按钮 - 用于特殊操作，虚线边框
• 危险按钮 - 用于危险操作，红色主题
• 文本按钮 - 无背景按钮，轻量设计
• 链接按钮 - 链接样式按钮
• 幽灵按钮 - 透明背景按钮

📏 多种尺寸和形状

• 尺寸: 小 (32px)、中 (40px)、大 (48px)
• 形状: 默认、圆角、圆形
• 响应式: 支持移动端适配

🎭 状态和交互

• 正常状态 - 基础样式
• 悬停效果 - 阴影和位移动画
• 禁用状态 - 半透明效果
• 加载状态 - 旋转动画
• 点击反馈 - 即时响应

✨ 动画效果

• 默认动画 - 平滑过渡
• 脉冲动画 - 呼吸效果
• 弹跳动画 - 弹性效果
• 抖动动画 - 震动效果
• 发光动画 - 霓虹效果

🎯 图标支持

支持 24 种常用图标：

• 基础操作: 加号、删除、编辑、保存
• 导航: 首页、菜单、搜索、用户
• 文件: 文件、文件夹、下载
• 通信: 邮件、电话、通知
• 其他: 设置、锁定、日历等

🎨 自定义样式

• 颜色定制 - 背景色、文字色、边框色
• 尺寸调整 - 宽度、高度、圆角
• 字体设置 - 字体大小、粗细
• 间距控制 - 内边距、外边距
• 渐变背景 - 支持线性渐变
• 特殊效果 - 毛玻璃、霓虹等

技术特性

🏗️ 组件化设计

• CustomButton - 自定义按钮组件
• ComponentPanel - 组件面板
• CanvasArea - 画布区域
• PropertyPanel - 属性面板
• ButtonShowcase - 按钮演示页面

🎨 样式系统

• CSS 变量 - 主题色彩管理
• 响应式设计 - 移动端适配
• 深色主题 - 自动主题切换
• 动画系统 - CSS 动画和过渡
• 阴影系统 - 多层次阴影效果

🔧 开发工具

• Vue 3 Composition API - 现代 Vue 开发
• TypeScript - 类型安全
• Vite - 快速构建工具
• Ant Design Vue - UI 组件库
• Pinia - 状态管理

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

使用指南

1. 设计器模式

• 从左侧组件面板拖拽按钮到画布
• 在右侧属性面板调整按钮样式
• 支持实时预览和属性编辑

2. 演示模式

• 查看所有按钮样式的展示
• 了解不同效果和动画
• 参考设计规范和最佳实践

3. 自定义按钮

<template>
  <CustomButton 
    type="primary"
    size="large"
    shape="round"
    icon="PlusOutlined"
    text="自定义按钮"
    :background-color="'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'"
    animation="pulse"
    @click="handleClick"
  />
</template>

样式规范

颜色系统

• 主色: #1890ff (蓝色)
• 成功色: #52c41a (绿色)
• 警告色: #faad14 (黄色)
• 错误色: #ff4d4f (红色)
• 中性色: #262626, #8c8c8c, #f0f0f0

尺寸规范

• 小按钮: 32px 高度
• 中按钮: 40px 高度
• 大按钮: 48px 高度
• 圆角: 6px (默认), 20px (圆角), 50% (圆形)

动画规范

• 过渡时间: 0.2s
• 缓动函数: cubic-bezier(0.645, 0.045, 0.355, 1)
• 悬停效果: translateY(-1px) + 阴影
• 点击效果: translateY(0)

浏览器支持

• Chrome >= 88
• Firefox >= 85
• Safari >= 14
• Edge >= 88

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

许可证

MIT License

更新日志

v1.0.0 (2024-01-XX)

• ✨ 新增自定义按钮组件
• 🎨 改进按钮样式和视觉效果
• 🎭 添加多种动画效果
• 📱 优化响应式设计
• 🌙 支持深色主题
• 🎯 增加图标支持
• 📖 添加按钮演示页面

AXI 低代码设计器 - 让按钮设计更简单、更美观、更专业！

npm install npm run build npm publish --access public