# fastprint-designer

**Repository Path**: rolaypp/fastprint-designer

## Basic Information

- **Project Name**: fastprint-designer
- **Description**: FastPrint Designer 是一款功能强大、直观易用的打印模板设计器，基于 Vue 3 + Vite 技术栈开发，专为企业和个人用户提供专业的打印模板设计解决方案。

该设计器支持拖拽式组件编辑，用户可以轻松添加文本、图片、条形码、二维码和表格等多种元素，并通过直观的属性面板实时调整样式和布局。核心功能包括实时预览、撤销/重做、复制/粘贴和键盘快捷键支持，让设计过程更加高效流畅。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-03-12
- **Last Updated**: 2026-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 打印模板

## README



# FastPrint Designer

一个功能强大、直观易用的打印模板设计器，基于 Vue 3 + Vite 开发，支持拖拽式组件编辑、实时预览和多种元素类型。

## 🎯 核心功能

### 🔧 可视化设计

- **拖拽式组件添加**：从组件库中拖拽文本、图片、条形码、二维码和表格到画布
- **实时编辑**：支持拖拽移动、调整大小、网格吸附
- **属性面板**：直观的属性编辑界面，实时预览效果

### 📋 支持的组件类型

- **文本**：支持字体大小、粗细、对齐方式调整
- **图片**：支持本地图片和网络图片
- **条形码**：支持多种条形码类型（CODE128 等），可自定义线条宽度和文本显示
- **二维码**：支持自定义内容
- **表格**：支持多列布局、边框设置、数据绑定

### 🚀 高级功能

- **实时预览**：点击预览按钮查看最终打印效果
- **撤销/重做**：支持操作历史记录
- **复制/粘贴**：快速复制和粘贴元素
- **键盘快捷键**：
  - `Delete` - 删除选中元素
  - `Ctrl+Z` - 撤销
  - `Ctrl+Y` - 重做
  - `Ctrl+C` - 复制
  - `Ctrl+V` - 粘贴

## 🛠️ 技术栈

| 技术类别 | 技术名称 |
|---------|---------|
| 前端框架 | Vue 3 + Vite |
| UI 组件库 | Element Plus |
| 拖拽功能 | Interact.js |
| 条形码生成 | JsBarcode |
| 二维码生成 | QRCode |
| 状态管理 | Vue 3 Composition API |

## 📁 项目结构

```
fastprint-designer/
├── src/
│   ├── components/          # 组件目录
│   │   ├── Canvas/          # 画布组件
│   │   ├── ComponentPanel.vue  # 左侧组件面板
│   │   ├── DesignerToolbar.vue # 顶部工具栏
│   │   ├── PropertyPanel.vue   # 右侧属性面板
│   │   └── PreviewDialog.vue   # 预览对话框
│   ├── views/
│   │   └── DesignerPage.vue    # 设计器主页面
│   ├── store/
│   │   └── designerStore.js    # 状态管理
│   ├── utils/
│   │   ├── barcodeUtil.js      # 条形码工具
│   │   ├── qrcodeUtil.js       # 二维码工具
│   │   ├── idGenerator.js      # ID 生成器
│   │   └── templateParser.js   # 模板解析器
│   ├── assets/              # 静态资源
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── public/                  # 公共资源
├── dist/                    # 构建输出
├── package.json             # 项目配置
└── vite.config.js           # Vite 配置
```

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式运行

```bash
npm run dev
```

### 3. 构建生产版本

```bash
npm run build
```

### 4. 预览生产构建

```bash
npm run preview
```

## 📖 使用指南

### 添加组件

1. 从左侧组件库中选择需要的组件
2. 拖拽到画布上的任意位置
3. 组件会自动吸附到网格上

### 编辑组件

1. 点击画布上的组件选中它
2. 使用鼠标拖拽移动组件位置
3. 使用边角的调整手柄调整组件大小
4. 在右侧属性面板中修改组件的详细属性

### 预览模板

1. 点击顶部工具栏的「预览」按钮
2. 在预览对话框中查看最终打印效果
3. 点击「关闭」按钮返回编辑模式

### 数据绑定

1. 在属性面板中，为组件设置「字段名」
2. 为组件设置「测试数据」以便预览效果
3. 实际使用时，会根据字段名从数据源获取真实数据

## 🎨 界面布局

```
┌─────────────────────────────────────────────────────────┐
│                    顶部工具栏                            │
│  [预览按钮]                                              │
├──────────┬────────────────────────────┬─────────────────┤
│          │                            │                 │
│ 左侧组件  │         中间画布           │   右侧属性面板   │
│  面板     │       (设计区域)           │                 │
│          │                            │                 │
│ [文本]   │    ┌──────────────┐       │  属性编辑       │
│ [图片]   │    │  组件元素     │       │  - 位置         │
│ [条形码] │    │              │       │  - 尺寸         │
│ [二维码] │    └──────────────┘       │  - 样式         │
│ [表格]   │                            │  - 数据绑定     │
│          │                            │                 │
└──────────┴────────────────────────────┴─────────────────┘
```

## 🔧 自定义配置

### 模板尺寸

默认模板尺寸可以在 `src/store/designerStore.js` 中修改：

```javascript
// src/store/designerStore.js
const template = reactive({
  width: 800,  // 模板宽度
  height: 600, // 模板高度
  elements: [] // 元素列表
});
```

### 组件默认属性

组件的默认属性可以在 `src/components/ComponentPanel.vue` 中修改：

```javascript
const element = {
  id: generateId(type),
  type,
  x: 0,
  y: 0,
  // 根据类型设置不同的默认尺寸
  width: type === 'text' ? 200 : type === 'image' ? 150 : 
         type === 'barcode' ? 300 : type === 'qrcode' ? 120 : 
         type === 'table' ? 400 : 150,
  height: type === 'text' ? 40 : type === 'image' ? 100 : 
          type === 'barcode' ? 80 : type === 'qrcode' ? 120 : 
          type === 'table' ? 60 : 100,
  // 样式配置
  style: type === 'text' ? { fontSize: 14, fontWeight: 'normal', textAlign: 'left' } : {},
  title: '',
  field: '',
  testData: type === 'barcode' ? '123456789' : '',
  options: type === 'barcode' ? { barcodeType: 'CODE128', textVisible: true } : 
           type === 'table' ? { columns: [], border: true } : {}
};
```

## 客户端
打印客户端仓库 https://gitee.com/rolaypp/fast-print-client

## 📱 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

## 📄 许可证

ISC License

## 📞 联系方式

如有问题或建议，请联系项目维护者。

---

**FastPrint Designer** - 让打印模板设计变得简单直观！