面向酒店 / 商业空间设计师的材料协同 SaaS 平台 · V1.0 MVP
A material-collaboration SaaS for hotel & commercial-space designers · V1.0 MVP
拾材集把「找材料 → AI 区域识别 → 材质替换预览 → 智能报价 → 供应商订货」整条链路收进一个工作区——设计师端告别在 Excel、聊天群与供应商电话间反复切换,从上传效果图到出报价单全程留在同一页面;材料供应商端获得结构化的数字订单通路,询价、确认、发货、售后状态一目了然,减少大量人工对账沟通。
工作台
|
方案上传 + AI 区域识别
|
材质替换工作区
|
材料库
|
智能报价
|
相似材料比价
|
订单管理
|
材料详情
|
| 功能 | 说明 |
|---|---|
| 🪄 AI 区域识别 | 上传效果图后自动识别墙面 / 地面 / 顶面 / 柜体 / 软装区域并测算面积 |
| 🎨 材质替换工作区 | 在效果图上选区,从材料库一键替换并实时预览替换前后对比 |
| 📚 材料库 | 12000+ 材料 SKU,支持分类、环保 / 防火等级、价格区间筛选与多选比价 |
| 💰 智能报价 | 自动按区域 × 材料 × 损耗 × 税费 × 运费生成报价单,带版本历史 |
| 🔄 相似材料比价 | AI 推荐相似材料,按相似度、单价、交期、节省额度排序,一键替换 |
| 📦 订货协同 | 按供应商分组下单,订单状态时间线(待确认 / 待发货 / 运输中 / 已完成 / 售后) |
| 👥 团队协作 | 项目动态、待办、消息、协作成员,多人共同推进方案 |
# 建议 Node.js ≥ 18.18
npm install
npm run dev # http://localhost:3000,默认跳转 /dashboard
# 生产构建
npm run build && npm start建议使用 1440 px 及以上宽度的浏览器窗口体验。
| 模块 | 选择 | 说明 |
|---|---|---|
| 前端框架 | Next.js 14 (App Router) | 文件路由 + RSC,便于未来接入服务端 API |
| 类型系统 | TypeScript 5 | 全部业务模型集中在 lib/types.ts |
| 样式 | Tailwind CSS 3 | tailwind.config.ts 内置品牌色与设计 token |
| 图标 | lucide-react | 与品牌的简洁设计语言一致 |
| Mock 数据 | 本地 TS 模块(lib/mock/*) |
字段命名贴近真实接口,便于平移到 REST/GraphQL |
| 视觉素材 | 程序化绘制(SVG + 渐变) | 不依赖外部图床,完全离线可演示 |
app/
(app)/
dashboard/ # 工作台
projects/[id]/
upload/ # 方案上传 + AI 识别
workspace/ # 材质替换工作区(核心)
quote/ # 智能报价
materials/[id] # 材料库 + 详情
compare/ # 相似材料比价
orders/ # 订单
components/
layout/ # Sidebar / Header / Logo / 面包屑
ui/ # Button / Card / Badge / Input 等
lib/
types.ts # 业务实体类型
mock/ # 项目、材料、供应商、报价、比价、订单、社交数据
- AI 识别 / 材质替换 — SAM2 输出多边形掩码 + Diffusion + ControlNet 做纹理替换
- 文件上传 — dropzone 替换为 S3 / OSS 预签名 PUT
- 报价导出 —
@react-pdf/renderer生成 PDF;exceljs生成 .xlsx - 供应商对接 — 开放询价 + 订单创建接口;ERP webhook 回填订单状态
- 全局搜索 — 接入 Meilisearch / Typesense,⌘ K 命令面板
- 视觉素材为程序化绘制,仅用于演示流程
- 表单交互为前端模拟,未持久化,刷新后状态重置
- 暂无单元测试 / e2e
仅用于内部演示与设计验收。







