达播手卡生成器

批量生成 ELLE 品牌直播手卡 PowerPoint 文件的 Web 应用。

功能特点

• 支持 Excel/CSV 产品数据导入
• 支持批量上传产品主图和尺码表
• 自动生成格式化的 PPT 手卡
• 批量下载生成的文件
• 多种主题样式：内置 5 种精美主题风格
• 自定义模板编辑器：可视化拖拽调整布局
• AI 智能分析：上传参考图片，AI 自动识别布局生成模板
• 历史记录管理：保存生成记录，支持重新下载

快速开始

安装依赖

npm install

配置环境变量（可选，用于 AI 功能）

cp .env.example .env.local

编辑 .env.local 文件，填入智谱 API Key：

ZHIPU_API_KEY=your-zhipu-api-key

获取 API Key：https://open.bigmodel.cn/

运行开发服务器

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build
npm start

功能说明

主题样式

内置 5 种精美主题：

• 苹果风格 - 简约现代，黑白配色
• 奢华金 - 深色背景 + 金色文字
• 清新绿 - 浅绿背景 + 深绿文字
• 粉色少女 - 粉色系配色
• 海洋蓝 - 蓝色系配色

模板编辑器

访问 /template-editor 进入可视化模板编辑器：

• 拖拽调整元素位置
• 拖拽角落调整元素大小
• 实时预览布局效果
• 保存自定义模板

支持配置的元素：

• 顶部服务文案
• 产品标题
• 价格区域
• 规格信息（颜色/尺码）
• 品牌背书
• 设计亮点/卖点
• 主图
• 尺码表
• 成分/材质
• 发货快递
• 售后信息
• 运费险
• 库存信息

AI 智能分析

在模板编辑器中使用 AI 功能：

1. 上传一张参考图片（PPT 截图、设计稿等）
2. AI 自动识别图片中的布局元素位置
3. 自动生成模板配置

需要配置 ZHIPU_API_KEY 环境变量

历史记录

访问 /history 查看生成历史：

• 查看历史生成记录
• 重新下载 PPT 文件
• 删除不需要的记录

使用说明

1. 准备数据文件

方式一：使用 Excel 模板（支持你的格式）

列名	说明	必填	示例值
品牌	品牌名称	否	ELLE
款号	产品编码	是	EM53342
商品名称	产品名称	是	ELLE女装绵羊毛连帽绞花针织
直播价	销售价格	是	248
吊牌价	原价	否	289
库存	库存数量	否	1000
颜色	颜色信息	否	米白/燕麦色
规格	可用尺码	否	S,M,L
卖点	产品卖点	否	摒弃了传统面料的厚重...
发货快递	快递方式	否	申通中通邮政
成分	面料材质	否	面料：绵羊毛100%

方式二：使用简化 CSV 格式

列名	说明	必填	示例值
SKU	产品编码	是	EA63135
产品名称	产品名称	是	ELLE 女士修身连衣裙
价格	销售价格	是	299.00
原价	原价	否	599.00
颜色	颜色信息	否	黑色
尺码	可用尺码	否	S/M/L/XL
材质	面料材质	否	棉95% 氨纶5%
备注	其他信息	否	新品上市

示例 CSV 文件已包含在 public/示例数据.csv

2. 准备图片文件（可选）

将图片按以下结构组织：

达播手卡/
├── 主图/
│   ├── EM53342.jpg
│   ├── EK52642.jpg
│   └── ...
└── 尺码表/
    ├── EM53342.jpg
    ├── EK52642.jpg
    └── ...

图片文件名必须与款号对应！

3. 使用步骤

1. 上传产品数据：上传 Excel 或 CSV 文件
2. 选择主题：从 5 种预设主题中选择
3. 选择模板（可选）：使用自定义布局模板
4. 配置图片路径（可选）：输入图片文件夹路径
5. 预览数据：确认数据无误
6. 生成 PPT：点击生成按钮
7. 下载文件：下载生成的 PPT 文件

文件命名规则

• 主图文件：{款号}.jpg (例如: EM53342.jpg)
• 尺码表文件：{款号}.jpg (例如: EM53342.jpg)
• 输出 PPT 文件：{批次号}-{序号}-{款号}.pptx (例如: 20250122-001-EM53342.pptx)

技术栈

• Next.js 15 (App Router)
• TypeScript
• Tailwind CSS
• PptxGenJS
• XLSX (SheetJS)
• PapaParse
• @dnd-kit/core (拖拽交互)
• IndexedDB (本地存储)
• 智谱 GLM-4V (AI 视觉分析)

项目结构

daboshouka-web/
├── src/
│   ├── app/
│   │   ├── api/                    # API 路由
│   │   │   ├── upload/             # 文件上传
│   │   │   ├── generate/           # PPT 生成
│   │   │   ├── download/           # 文件下载
│   │   │   └── analyze-template/   # AI 模板分析
│   │   ├── history/                # 历史记录页面
│   │   ├── template-editor/        # 模板编辑器页面
│   │   ├── page.tsx                # 主页面
│   │   ├── layout.tsx              # 布局
│   │   └── globals.css             # 全局样式
│   ├── components/                 # React 组件
│   │   ├── FileUpload.tsx          # 文件上传组件
│   │   ├── DataPreview.tsx         # 数据预览组件
│   │   ├── ProgressBar.tsx         # 进度条组件
│   │   ├── theme/                  # 主题相关组件
│   │   ├── history/                # 历史记录组件
│   │   └── layout/                 # 布局组件
│   ├── lib/                        # 工具库
│   │   ├── ppt-generator.ts        # PPT 生成核心
│   │   ├── excel-parser.ts         # 数据解析器
│   │   ├── themes/                 # 主题配置
│   │   └── storage/                # 本地存储
│   │       ├── indexeddb.ts        # IndexedDB 封装
│   │       ├── history.ts          # 历史记录服务
│   │       ├── templates.ts        # 模板存储服务
│   │       └── session.ts          # 会话状态
│   └── types/                      # TypeScript 类型
│       ├── product.ts
│       ├── template.ts
│       ├── theme.ts
│       └── history.ts
├── public/
│   ├── uploads/                    # 上传文件存储
│   ├── generated/                  # 生成的 PPT 文件
│   └── 示例数据.csv
├── .env.example                    # 环境变量示例
└── package.json

环境变量

变量名	说明	必填
ZHIPU_API_KEY	智谱 AI API Key，用于 AI 智能分析功能	否