这是一个现代化的数码印花打样配置与预览系统，专为印花行业设计。它允许用户浏览花型库，配置打样参数（如尺寸、排版模式），并实时预览生成的打样效果图。

• 花型库管理：浏览和搜索 30+ 种高精度花型素材。
• 智能排版预览：
  • 方格小样：自动生成网格状小样预览。
  • 条状大样：模拟实际面料门幅的条状打样效果。
• 交互式裁剪：
  • 支持拖拽选择打样区域。
  • 相对坐标显示：实时显示打样区域四角在原图上的相对坐标 (0-100)。
  • 支持旋转设置。
• 画布工具：
  • 全屏查看器：支持滚轮缩放、拖拽平移查看排版细节。
  • 一键下载：生成并下载带有时间戳的高清排版预览图。
• 订单生成：根据画布设置（门幅、长度）自动计算总长度和面积。

• 前端框架: React 18 + TypeScript + Vite
• 样式库: Tailwind CSS
• 图标库: Lucide React
• 部署: Docker + Nginx + Kubernetes

1. 安装依赖

   npm install
   

2. 启动开发服务器

   npm run dev
   

   访问 http://localhost:3000

项目中包含一个图片处理脚本，用于自动生成缩略图和高清预览图：

# 将 png 图片放入 public/images 后运行
./compress_images.sh

项目配置了完整的自动化部署脚本，支持构建 Docker 镜像并部署到 Kubernetes 集群。

1. 运行部署脚本

   ./deploy_local_build.sh
   

   此脚本会自动：
   • 构建本地 Docker 镜像
   • 导出并压缩镜像
   • 上传至远程服务器
   • 在 Kubernetes 集群中更新部署

• src/components: UI 组件 (CropEditor, ImageViewer 等)
• src/services: 核心业务逻辑 (Canvas 绘图, 坐标计算)
• public/images: 花型素材 (originals/, thumbs/)
• k8s-deploy.yaml: Kubernetes 部署配置

---

Designed for efficiency and precision in digital textile printing.