返回 Demo 展厅

Knot · 东京装修工程业务管理系统

这个 demo 面向装修工程、建材安装、室内设计施工等以「项目制 + 多角色协作」为主的中小公司;它演示了一家从询价、报价、合同、请款到工程、现场照片、双语周报、售后的业务系统在「Admin 社内协作」与「Portal 客户透明」两个视角上的典型解法。

Knot 是一个虚构演示项目。所有客户、案件、图片和数据都是演示用。

Knot Admin 案件看板:17 个案件按問い合わせ/現地調査/見積/契約/施工/引渡し/アフター 七个阶段分列。

您日常会遇到的几件事

经营一家装修工程公司,下面这些情景每周都会发生。我们在这个 demo 里都已经替您处理过。

01

情境

案件刚問い合わせ时只是几条微信 + 一张户型图,现场调查后又有几十张照片、几页手写笔记。两周后报价时,资料早就散在不同员工的手机里。

我们的处理

Admin 每个案件号下九个分页 —— 概要 / 見積 / 契約 / 請求 / 工程 / 現場写真 / レポート / アフター / 履歴 —— 把整个生命周期的资料钉在同一个项目下。状态从「問い合わせ」一路走到「アフター」,每一步留下的资料都在原案件下。

我们的取舍

我们从案件生命周期出发设计数据结构,而不是从功能列表出发。这意味着「客户」「报价」「合同」「请款」之间的字段是按真实业务关联打通的,不能像通用 CRM 那样随便增删主表 —— 但每次案件交接时就不会再有「这个数据应该填到哪里」的问题。

Knot 案件详情页:标题、客户、地址、工期、合同金额;下方九个分页(概要 / 見積 / 契約 / 請求 / 工程 / 現場写真 / レポート / アフター / 履歴)覆盖案件全生命周期。
  1. 一个案件号串起来:客户、地址、工期、合同金额、负责人。社内三个角色(社长 / 营业 / 现场监督)看到的是同一个事实。
  2. 九个分页覆盖案件全生命周期。状态从「問い合わせ」走到「アフター」,每一步留下的资料都在原案件下,不散在邮件群聊。

02

情境

现场监督一天拍七十张照片:拆除前、墙体打底、水电走线、瓷砖铺贴。回到公司,要按工种和部位分类、剔掉模糊的、决定哪些发给客户看 —— 一晚上做不完。

我们的处理

AI 在上传时自动按四个施工阶段 × 六个部位分类(拆除 / 基层 / 水电 / 收尾 等 × 水回り / 建具 / 天井 等)。员工只需复核与确认「顾客公开」开关;模糊或测试照片留在内部库,不会推送给客户。

我们的取舍

AI 只做分类与提示,不替员工拍板「该不该给客户看」。每张照片的「顾客公开」开关独立可控,错分的标签也能一键改。结果是员工的工作从「逐张分类」变成「批量复核」,但人对最终结果仍负责。

Knot 现场照片管理:八张装修工地实拍,每张下方有 AI 自动给出的工种分类标签(仕上/水回り/天井/壁/床/設備/建具)和「顧客公開」开关。
  1. 现场监督拍完照片,AI 按工种自动打标签(拆除 / 基层 / 水电 / 收尾 等六类 × 部位若干)。员工只需复核,不需要逐张手填。
  2. 「顾客公开」开关在每张照片上独立控制:施工现场的某些过渡阶段不一定适合给客户看,由人决定,AI 不替您拍板。

03

情境

社长想让客户每周收到一份周报,但每份周报要写:本周做了什么、用了什么料、有什么问题、下周计划;中文客户的周报还要翻成中文。员工挤不出时间,结果客户只在投诉时才听到消息。

我们的处理

AI 把本周的现场照片、进度数据、采购单、留言聚合成一份结构化稿,按工种分节(解体 / 下地 / 水回り / 内装)。员工复核改稿,确定公开后,系统自动生成客户语言版本(日 / 中 / 英)的 PDF,并推送到 Portal。

我们的取舍

周报不是 AI 自动发,而是 AI 帮忙起稿、员工复核确认。我们让 AI 处理「重复整理」的部分,把「该不该这样讲」的判断留给现场监督。客户读到的是经过专业复核的内容,不是机器直接生成的文本。

Knot 周报编辑器:左侧周报列表(含「下书」「公开済」状态、进度百分比),右侧周报富文本编辑器,顶部「日本語 / English」语言切换 tab,正文按工种分节。
  1. 每周一键生成周报:AI 把本周现场照片、进度、用料、留言聚合成结构化稿,员工只需要复核改稿、确认公开。
  2. 客户语言是英语 / 中文的,自动出双语版;员工不需要会日语之外的语言。客户看到的就是自己语言里的、专业的周报。

04

情境

见积要改三版,每版客户都说「上次那版比较便宜,能不能在那版基础上加这一项」。员工翻 Excel 翻得头大,老板担心改错收错款。

我们的处理

同一案件的见积按 V1 / V2 / V3 版本留痕,每版可独立修改、PDF 输出、确定生效。从见积「確定」到合同「登録済」再到请款,是三个有顺序的状态,前一步未完成时后一步不可推进。

我们的取舍

合同与签章我们保留纸面 —— 不是不能做电子签,而是日本中小装修公司的客户与法律惯例还在以纸面合同 + 印鑑为信任锚点。系统只把「合同已盖章」标记一下、把扫描件存档,剩下的客户惯性我们尊重。

Knot 见积管理列表:报价编号(含 V1 / V2 / V3 版本号)、案件名、客户、状态(下书 / 确定)、期限、合同金额、PDF 下载按钮。
  1. 同一案件的见积版本(V1 / V2 / V3)按时间留痕:客户改要求、加项目、调整工期,都对应一个新的见积版本,不覆盖之前的。
  2. PDF 直接从系统出,格式与合同对齐。日本中小装修公司的「合同与签章保留纸面」习惯被尊重,系统只生成、不强制电子签。

05

情境

老板月底想知道:本月接了几个案件、超过 30 天未签的报价还有几张、今年上半年练馬区的项目按月分布、中国语对应的案件主要哪个营业在跟 —— 员工说要做一下,但没人有空。

我们的处理

Admin / AI Assistant 接受自然语言查询,把问题翻成查询并跑在权限内的真实业务数据上,输出图表 + 数据 + CSV / PNG 导出。示例查询直接展示六类常见经营问题。

我们的取舍

AI 在工作节点上服务具体工作结果(分类 / 起稿 / 查询),不做成独立的「AI 模块」。员工不需要先学会 AI、再去用 AI;他在「现场照片」「周报」「数据查询」三个具体场景里直接用到,结果在自己的工作产出里。

Knot AI Assistant 自然语言数据查询:上方输入框 + 示例查询(按月统计、稼働日排行、合同金额、超过 30 天未签约的报价、中文对应案件汇总),下方结果区按月份的柱状图与 CSV / PNG 导出按钮,右侧历史记录列表。
  1. 示例查询都是装修业务里真的会问的问题:今年上半期某区域的项目、按工种的稼働日排行、超过 30 天未签约的报价。员工不用学 SQL。
  2. AI 把自然语言翻成查询,跑在权限内的数据上,输出图表 + 数据;可以导出 CSV / PNG,老板可以直接拿去开会。

Admin × Portal 两个视角

同一个事实,两边都讲得通

B2B 业务系统真正难的地方不是功能多 —— 是「社内协作」与「客户透明」必须基于同一份事实,但两边能看到的字段、能做的动作完全不同。Knot 把这两个视角并排做完,确保客户在 Portal 看到的进度,就是 Admin 录入的进度。

Admin 社内视角

三种角色 · 一份案件事实

社长看全公司经营、营业看自己的客户与报价、现场监督看自己负责的施工与照片。三套权限对应三种本职动作,互不挡路。

Knot Admin 仪表板:今月売上 ¥26,500,000、今月契約数 3 件、施工中案件数 4 件三个 KPI;下方案件パイプライン(問い合わせ 2/現地調査 2/見積 3/契約 1/施工 4/引渡し 1/アフター 1)+ AI Assistant 入口 + 优先タスク 列表。
Portal 客户视角

三种语言 · 同一份进度

日本业主看日语、中国大陆业主看中文、海外业主看英文。看到的进度、照片、周报与 Admin 录入的完全一致;客户能看的字段我们一项项审过,不会泄露内部备注或同行价格。

Knot Portal 项目详情中文版:顶部切换项目 + 语言切换;标题「陳様邸 投資物件リノベーション工事(日本橋)」+ 状态「施工中」+ 进度 30%;下方五 tab(概要 / 进度 / 现场照片 / 文件 / 工程);右侧浮卡显示最新周报与「阅读周报 / 打开 PDF」按钮。

响应式体验 · Portal 客户侧

客户经常在工地或路上看进度,三种屏幕都要顺手

业主在桌面慢慢比较周报与照片,在平板上读完整内容,在手机上路过工地时打开看一眼现场。三种屏幕的信息密度不同 —— 桌面把状态、负责人、周报并列同屏;平板让每个字段独立成行;手机把进度条与 tab 提到最上方。

Knot 中文客户门户项目详情桌面截图:左主区显示项目状态与负责人,右侧浮卡显示最新周报。
桌面:项目状态、负责人、周报并列同屏,客户一眼看全。
Knot 中文客户门户项目详情平板截图:单列布局,状态、地址、合同金额、负责人逐项展开。
平板:单列阅读节奏,每个字段独立一行。
Knot 中文客户门户项目详情手机截图:顶部项目切换 + 语言切换,下方大字进度条与分页 tab。
手机:客户经常在工地或路上看进度,进度条与 tab 优先。

为您做的取舍

合同纸面、AI 边界、数据模型、客户门户 —— 这是我们替您做完比较后的判断。

合同与签章保留纸面

日本装修业务的客户惯性与法律预期还在以纸面合同 + 印鑑为信任锚点。我们让系统生成 PDF、记录「合同已盖章」状态、归档扫描件,但不强制电子签 —— 不是技术做不到,而是这一步替客户改变工作习惯需要等更大的行业拐点。

AI 只在工作节点上

AI 能力挂在现场照片自动分类、周报起稿、数据查询三个具体节点,不做成独立模块。员工不需要先学会 AI、再去用 AI;他在自己的本职工作里就能用到,结果反映在工作产出里,而不是单独的「AI 对话历史」。

数据模型按案件生命周期组织

客户、报价、合同、请款、工程、照片、周报之间的字段是按真实业务关联打通的,不像通用 CRM 那样支持随便增删主表。代价是每一类业务有自己的形状;好处是案件交接、跨员工查找、长期归档时不会再问「这条记录应该填到哪里」。

客户门户独立权限边界

Portal 只读、按案件粒度授权、所有可见字段单独审查过,不直接复用 Admin 的数据视图。这降低了「不小心把内部备注或同行价格暴露给客户」的风险,但也意味着 Portal 上的可见字段我们替您一项项过;如果未来要加新字段,需要重新走一次审查。

您看不见的、我们替您扛了

这一栏的事您不需要懂,也不用操心。我们交付时一并配好。

  • 客户、员工、外协师傅都在同一个系统里

    客户从 Portal 看到的就是 Admin 那边录入的同一条记录;不是把数据复制一份给客户看。沟通断点(「这周做了什么我不知道」「客户问的事项没人传达」)从根上消除。

  • 数据是您自己的,不是平台的

    PostgreSQL + Cloudflare R2 + Next.js — 标准开源栈与商业云对象存储。任何时候您都能拿到完整数据库和文件,迁到自有服务器或别的云上继续跑,不会因为退出某个 SaaS 而失去案件历史。

  • 角色权限按真实组织划分

    社长(管理)、营业(销售)、现场监督(施工)三种角色对应三套权限。客户 Portal 是只读视角,按案件粒度授权;任何角色都不会一次性看到不该看到的字段。

  • 海外客户的语言我们替您扛了

    系统 UI 支持日 / 中 / 英三语切换;周报由 AI 起稿后翻成客户语言再由员工复核。中国大陆客户看到中文版、英语客户看到英文版,员工不需要会日语之外的语言。

  • 现场照片不丢、不串、不错位

    现场监督手机拍照直接上传到对应案件,按时间和工种沉淀;离职、换设备、手机丢了照片都不会跟着丢。R2 预签名上传 + 案件级权限隔离 + 客户公开开关三层保护。

  • 日本特有的工作习惯被尊重

    工种术语用日语(解体 / 下地 / 内装 / 設備 / 仕上)、金额用日元含税、工期用日历周计算、电话与邮件格式按日本惯例校验。这些不是「翻译」就能做到的,是按日本中小装修公司的工作方式定制的。

技术规格

前端 · Admin + Portal

  • Next.js 16 App Router(Admin 与 Portal 同栈分应用)
  • React 19 + MUI 7 + MUI X 8 Community(DataGrid / DatePicker / Charts)
  • Emotion(CSS-in-JS)+ MUI 设计令牌
  • Lexical(周报富文本编辑器)
  • next-intl(ja / zh-CN / en 路由级 locale)
  • TanStack Query(数据缓存与重试策略)

后端 · 数据 · 存储

  • Fastify 5(API 服务)+ TypeScript 6
  • PostgreSQL(案件、客户、报价、合同、请款、工程、照片元数据)
  • Prisma(schema 管理 + 类型化客户端)
  • Cloudflare R2(现场照片与 PDF 媒体)+ 预签名上传
  • JWT 会话 + 角色(社长 / 营业 / 現場監督 / Portal 客户)
  • 邮件:Resend(请款提醒、周报推送)

AI 在工作节点上

  • Cloudflare Workers AI(图像分类 + 文本生成)
  • 现场照片:4 阶段 × 6 部位自动分类,员工复核
  • 周报起稿:聚合照片 / 进度 / 留言后生成结构化稿
  • 双语周报:日语原稿 + 客户语言(中 / 英)译稿,员工复核
  • AI Assistant:自然语言 → 权限内 SQL 查询 → 图表 + CSV / PNG 导出
  • 守卫规则:不替员工拍板「该不该给客户看」

基础设施 · 安全 · 部署

  • Vercel(Next.js Admin + Portal)+ Railway(API + PostgreSQL)
  • Cloudflare DNS / CDN / DDoS / WAF
  • Admin 在 Cloudflare Access 后(仅授权邮箱可访问后台)
  • HTTPS / SSL(Cloudflare 自动签发)+ Same-Origin CSRF 防护
  • Playwright E2E(admin / portal / a11y 三套套件)
  • Lighthouse + axe 持续巡检(首屏性能与 AA 无障碍)

想做一个类似的业务管理系统?

系统版业务管理面对的是「项目制 + 多角色协作」的真实复杂度:流程要顺、数据要打通、客户与员工要在同一份事实上对话。我们会先聊您的业务流程、角色权限边界、AI 想用在哪个节点,再决定具体范围。