# 用 WorkBuddy 从零搭了一套针织面料异常登记系统：从 2 个 Excel 异常登记表到自动分析系统

> 一句话说清：我们厂原来用 2 个 Excel 文件登记经编/纬编的异常明细，谁登记、谁跟、结没结案全靠人盯。我用 WorkBuddy 搭了一套零依赖的 H5 内部系统，20+ 跟单员在手机上直接填报，管理层打开电脑就能看到「经编和纬编到底谁的问题更大、该先治谁」。

- 行业与岗位：针织面料制造 · 销售管理
- 应用场景：坯布/染色异常的全流程登记、跟踪闭环与分析复盘
- 运行环境：一台 Windows 办公 PC，零依赖（只用 Node.js 内置模块），手机与电脑同一套页面

---

## 一、背景与痛点（输入材料）

我在针织面料厂做销售管理，厂里有一厂、二厂、三厂，产品是锦纶+氨纶、涤纶+氨纶的经编/纬编面料，出给 T 恤、文胸、防晒服、瑜伽裤等客户。

改造前的问题（这些是我一开始整理的原始材料）：

1. 异常登记只有 2 个 Excel——经编一个、纬编一个，两个文件里混着 5 个月的记录，谁忘了填就没数据
2. 看不到「结没结」——领导问「上个月纬编到底闭环了几条」，要翻文件、人工数Excel 公式
3. 更可怕的是没有对比——以前月度分析只有一张"车间×月份堆积柱状图"，经编纬编堆在一根柱子里，只能看出总量，看不出谁的问题更严重。结果就是开会时永远在讨论"总量降了多少"，而不是"纬编到底差在哪"
4. 产能跟不上的问题——厂里三班倒，白班/中班/夜班的异常单据需要流转，人工登记经常断档

原始材料：E:\异常登记表\ 下的 2 个文件——经编异常登记.xlsx 与 纬编异常登记.xlsx，每个文件有登记日期、异常类型（横条/油针/针路/折痕/水波纹/色差等）、经纬编、产品名称、机台号、异常描述、异常数量、反馈人、处理结果等字段，累计 205 条历史记录。

这是我当时给 AI 提的原始需求，连"先出 Plan 等我确认"、"每步停下让我截图"都写在里面——先把协作节奏定死，才不会出现它一路闷头写完、我中途才发现方向错了。


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/4e3995cb4395442a9d96809457293eae.png)

---

## 二、WorkBuddy 配置（做了什么）

这一段是整个项目里最需要说明白的地方——我用的是 WorkBuddy 来做需求分析和代码实现，全程零依赖。

### 1. 先出方案，再动手

我没有直接让 AI 写代码，而是先让它读 E:\异常登记表\ 下的 2 个 Excel 的全部工作表与列名，输出改造方案 Plan：包含每个文件的列名清单、五角色权限矩阵、数据导入方案、开发步骤与耗时估算。我确认后才开工。


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/683d8e3dc94a2a299d6f391b132caf35.png)
这一步的价值在于：Plan 里的每个数字都是从真实文件里读出来的，不是我拍脑袋写的。它当场发现两个车间列名不一样（纬编叫「布名」、经编叫「品名」；纬编叫「反馈时间」、经编叫「反馈异常时间」），而且列顺序也不同（机台号一个在第 4 列、一个在第 7 列）——所以导入必须按列名映射，不能按列号。


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/dcd52425fbcd32c9def0194eb3945852.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/1e89e7087f9087d8aa60e678af36039b.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/8a9581a1109fdee7ac499513bf2dee07.png)

Plan 里列出的「7 个数据坑」我印象很深，都是 Excel 里能见到但人眼会忽略的东西：小数点脏数据（2026.9..2）、表头行位置不固定（r1/r2/r3 三种）、机台号格式乱七八糟（纯数字、空、多机台换行、全角井号、斜杠）、异常数量是文本（"20条/30.8KG+609.7KG"）、库存数量混着 6 位脱敏编码。它们全部在导入阶段统一归一化，而不是留到界面上再显示。

### 2. 技术选型（关键的取舍）

· 决策点｜选择｜原因
· 后端｜**零依赖纯 Node.js**，只用内置 `http` / `fs` / `path` / `crypto`｜工厂电脑没有开发环境，任何第三方包都要联网装、易坏。零依赖 = 拷贝就能跑
· 存储｜**JSON 文件**（`records.json` / `users.json` / `logs.json`）｜205 条数据量很小，JSON 够用；且可以直接用 Excel 工具读取分析
· 前端｜**单个 HTML 文件 + 内置 SVG 图表引擎**｜没有构建步骤，手机打开就可用
· 部署｜局域网一台常开PC，`启动系统.bat` 双击即启｜厂里不装新软件、不申请服务器

### 3. 内置的 SVG 图表引擎

因为零依赖，不能用 ECharts/Chart.js，我让 WorkBuddy 手写了一套 SVG 图表函数，全部输出字符串拼成 HTML。这套引擎后来扩展到 8 种图表：柱状、折线、横条、环形、堆叠柱，以及这次为经纬编对比新增的分组柱、多系列折线、蝴蝶图、横向分组条。

### 4. 权限模型（服务端控制，不是前端藏按钮）

五种角色：管理员 / 负责人 / 组长 / 跟单员 / 查看员。密码用 sha256(salt + 密码) 加盐哈希存储，不存明文；首次登录强制改密；连续 5 次密码错锁 10 分钟；session 8 小时过期，改密后旧 token 立即失效。所有权限判断都在服务端 can() / visibleRecords() 里做，前端拿不到不该拿的数据。

### 5. 数据脱敏（这一步不能省）

因为要做成公开参赛作品，所有敏感信息在导入阶段就脱敏，落盘的 JSON 已经是脱敏数据：

· 原始｜系统内
· 机台号 `J×××#××`｜`JXX#XX`
· 布号 `PB×××××`｜`PBHXX`
· 业务员姓名｜`张XX`、`郑XX`（保留姓氏）
· 公司名 / 内网 IP｜**完全不写入代码与数据**

产品名称（如「四经平-58」）保留了——那是行业通用布名，不是个人隐私，删了就没法做业务分析了。客户端/服务端都做了 XSS 转义。

---

## 三、操作步骤（怎么一步步做出来的）

### 步骤 1：先做数据体检

用 WorkBuddy 读 Excel、统计各车间/各类型分布。这一步直接决定了后面图表怎么设计。跑出来是这样：

```
总数 205   经编 118 / 纬编 87
经编 TOP5: 色差18 横条17 其他17 其他异常12 油针11
纬编 TOP5: 横条36 油针16 脏污6 折痕6 针路6
```

这个结果本身就说明了问题：纬编的「横条」36 条，占纬编的 41%；而经编的第一是「色差」。两边的头号毛病完全不同。

### 步骤 2：系统功能按四段落地

1. 异常登记：H5 单页，手机电脑自适应，提交即自动编号 YC-20260510-001
2. 异常汇总表：11 列 + 三色状态 + 日期区间/关键词查询
3. 日报月报分析报告：自动重算，导出 Excel
4. 账号管理 + 操作日志：谁改了什么全部留痕

后端是这么写出来的——
![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/4fe74fc59b38f3fc0da4f490bbc717be.png)

写完后立刻跑接口全链路测试（5 个账号 ×增删改查 × 权限边界）。(https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/12382701/20261007-fc15d7e7.png?q-sign-algorithm=sha1&q-ak=AKIDQCHEfnOK48M4TfL4bAVgKeQE33Y36snJd0hSJUNa21RYFMSixstyGZg6ziPGft3i&q-sign-time=1791316742;1791322142&q-key-time=1791316742;1791322142&q-header-list=host&q-url-param-list=&q-signature=276f09ff0f9eee47c5aecb27656fb4de5e81fab4&x-cos-security-token=3V21jihsfN8JvhTEuGJ7q1WHgSuSaiZa87fdaad67082d048360c9b6057dd060be-8oIVUGjNZxwEiUCJ8SbGI-xMwyf0YyPb0bH_armRcpdGq3KV2Rs5a_79JWRGXTOMCCjWIkyux9aFwKbfln9y4hoDpXR9AtANiEgz30ttVzbBAMBuPpYfgy86VGSSWFv1VVO93bAN8n97kehojBTC1fxgW0OJ-T0F5lntOlc_jFsl2zKSZQI3ZQWS5W5L0PVaS4-_rOXhAvE_8y5DkPNYU81PRgkzYyW2jYJK7TThubc-pBlS1euoR6gZE5k7axh7caURX-GS6iCnxLBylD0vSzFP0G5jimtyeTrHCNVpQsNGnUBLP1SVZ3aCi-P7hjmFsbNWFtzGx1n5fvPDab6tRFUp6twAykYYffSmYZupoIz4ZtrR4oeC94MwVe_kUMEukfTH3XOKuHl1w4n4eTau1e33eAhlXmeyiBX4gEmohRv6D3oqf_PEeanS6M4lTP_g8_z4xHIhI59KCBug4Et1aQbdaEy16kDVufbHGZW9aYfWTNmGsBNTnsTDxoVHObK0CGDhU8bFwtFXYI4NX4RH3KWh2CUrAt0Ty6-eFbFfW5AT8oOKbTRbLYOSZTruxSxh_H6r_SWsgfqAv1w1eVYhizIagIVKAY6GKU1k0b5rA0gtMo72QQXgkyqSBYMm1YvqgvNXdFAHxtNwdgZH5FM5tsHPLPElcUsPmzHV6yVGnzMNIrplyO74P3GpR1aOJ6)成，测试套件 19 组共 68 项断言全部通过，含 6 项越权测试]

这里有个细节值得说：那次测试首轮全不通，排查下来是后台进程随 shell 退出被杀掉，不是业务逻辑错——改成常驻后台启动才绿。这类"环境问题伪装成代码问题"的坑，自动化测试能挡掉一半，但前提是你真的去跑，而不是看完代码觉得没问题。

接下来写前端。
![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/8597f51bb9cbdfd744939faed3ef9a81.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/b20b48b29b6518bd0ba1adeb0483691d.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/c51d09dca63c470746f8a1d0633de964.png)
![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/16de9aeba9a0adc007adee7089865101.png)

### 步骤 3：三轮迭代，每轮都是业务真实需求驱动

第一轮 —— 满屏自适应
业务反馈「两边空白太多」。定位到根因是 #main{max-width:1400px} 写死。改成满屏后，「异常描述」列自动吃剩余宽度。

第二轮 —— 表格交互（像 Excel 一样）
业务反馈「查台账太难」。做了三件事：
- 列宽自由拉伸：拖动表头右边缘即可，宽度存浏览器本地，下次打开保持
- 双击表头排序：三态循环（升序→降序→取消回默认）。这里有个关键点——排序必须放服务端做，否则翻页会乱序；数量列要走数值比较而不是字符串比较，否则 "9" 会排在 "10" 后面
- 表头筛选：四种类型（枚举多选/文本包含/数值区间/日期区间），可多列叠加

其中「异常描述」列设计成弹性列——你拖宽别的列，它自动反向收窄，表格总宽恒定，不产生横向滚动条。

第三轮 —— 经编纬编必须对比，不能堆积
这是业务提的原话：「分析表报告图表中，经编与纬编应该对比分析，不要堆积」。改造后：

· 原来｜现在
· 车间×月份**堆积柱**｜**并排分组柱**，每月两根柱并排（右上角可切回堆积视图）
· 月度趋势**一条线**｜**三条线**：经编（蓝）、纬编（绿）、合计（灰虚线）
· 车间分布一句话｜**15 行核心指标对比表**，谁更差谁那格自动标红
· 异常类型一个环｜**蝴蝶图**：左经编右纬编，中间是类型名，一眼看出差异
· 无｜**结案情况对比**（红/黄/绿 × 车间横向对比条）

系统还自动生成结论文字，比如这次跑出来的：

> ① 数量规模：经编 118 条（57.6%）、纬编 87 条（42.4%），经编高出 31 条
> ② 结案质量：纬编闭环率 3%（超期未结 84 条，占 96.6%）；纬编闭环率偏低、96.6% 的未结案已超 10 天，需优先清理
> ④ 缺陷结构差异：经编 TOP3 色差(18)、横条(17)、其他(17)；纬编 TOP3 横条(36)、油针(16)、脏污(6)。两者的成因不同，改善措施应分开制定、不宜合并推进

### 步骤 4：测试与验收

写了 7 个专项测试脚本，共467 项自动化断言全部通过（接口层 250 项 + UI 层 217 项），用无头 Chrome 真机点、拖、双击、筛选，并逐张截图留证。

这里踩过一个坑值得记下来：测试脚本不能拿真实密码硬试——密码错 5 次会被锁 10 分钟。我第一次跑全量回归时把admin 账号撞锁了，只能干等。现在改成测试前备份密码文件 + 指纹校验，跑完原样还原。


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/efc8894b2202b2b30fc08e37340bc01d.png)

---

## 四、产出物（可验收的成果）

· 产出｜说明
· **可运行的内部系统**｜零依赖部署，双击 `启动系统.bat` 即启动，手机浏览器输入局域网地址就能填报
· **205 条脱敏台账数据**｜覆盖 2026 年 5—9 月，经编 118 / 纬编 87
· **5 种角色权限体系**｜服务端接口级校验 + 操作日志留痕
· **日报 / 月报 / 分析报告**｜自动重算，一键导出 Excel
· **经纬编对比分析**｜15 行指标对比表 + 并排柱 + 三线趋势 + 蝴蝶图 + 自动结论
· **8 张带标注功能截图**｜见文末
· **11 张协作过程截图**｜从提需求到完工，含 Plan、架构、代码、测试全过程（已按流程编号）
· **7 个自动化测试脚本**｜467 项断言，含无头浏览器 UI 测试
· **操作手册 README**｜含 FAQ 与目录结构说明

实际效果：以前开生产会要人工翻Excel、大概十分钟才能说清「哪个车间问题大」，现在打开分析报告页，表格里的红底格子直接标出「纬编闭环率 3%、超期占比 96.6%」，一分钟内就能定下优先清理对象。

---

## 五、几个可复用的经验

1. 业务永远先于技术。「不要堆积」这五个字是业务说的，不是技术判断——技术上堆积柱完全没问题，但业务要的是对比。
2. AI 协作要留痕。每一轮改动的方案、测试结果、踩过的坑都写进 README 和项目记忆，人能接得住，AI 也能接得住。
3. 零依赖不是炫技。工厂环境里，"拷贝就能跑、不用装任何东西"比"架构优雅"重要一百倍。
4. 脱敏要在导入阶段做。等做完再去清理，很容易漏。

---

### 附一：协作过程截图（11 张）

>按时间顺序还原整个协作过程：提需求 → 读真实数据 → 出架构与Plan → 写后端 → 写前端 → 导入数据 → 交付。这些图能看出每一步都是「先验证、再动手」，而不是一次生成一大坨代码再回头改。

（过程图1~5 已穿插在正文各阶段；过程图 6~11 见正文「步骤 2」与「步骤 4」处的标注）

### 附二：功能截图（8 张）

>以下 8 张图覆盖完整功能流程：登录 → 驾驶舱 → 登记 → 汇总表 → 筛选排序 → 经纬编对比 → 分析结论 → 手机端。




![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/432b597fa38a321c87144e3d3c23072e.png)
![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/32810098b7054b40f868379a5d9ebde8.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/4592212fcac5c44d91684b4d9b658704.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/8d1ecf7c6e3a83ce67bc446c77e643cd.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/e1356d0637ef1afaea4388824acc773d.png)

![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/715dc2619750571c304c03a9fa308540.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/e261271aaf9c48feca89760a9537c9c1.png)


![image.png](https://developer.qcloudimg.com/http-save/yehe-12382701/35ad831442884c93c60354a9de2d3516.png)

---

*本文所述工作由作者本人完成，AI 工具用于需求分析、代码实现与结构整理。文中所有数据均已脱敏，不含任何企业真实信息。所有过程截图中的账号密码、机台号、布号、员工姓名与本机路径均已做脱敏处理。*

#WorkBuddy #AI办公

一句话说清：我们厂原来用 2 个 Excel 文件登记经编/纬编的异常明细，谁登记、谁跟、结没结案全靠人盯。我用 WorkBuddy 搭了一套零依赖的 H5 内部系统，20+ 跟单员在手机上直接填报，管理层打开电脑就能看到「经编和纬编到底谁的问题更大、该先治谁」。

用 WorkBuddy 从零搭了一套针织面料异常登记系统：从 2 个 Excel 异常登记表到自动分析系统

用 WorkBuddy 从零搭了一套针织面料异常登记系统，把 2 个 Excel 登记表变成 205 条台账的自动分析。手机填报、五角色权限、经纬编对比分析，一分钟定位生产瓶颈。

业务经理

数据库

开发工具

后端

基于WorkBuddy从2个Excel异常登记表搭建针织面料异常登记分析系统，零依赖部署、手机填报、经纬编自动对比分析，实现异常全流程闭环跟踪，205条数据自动生成对比图表与结论，替代人工翻表，1分钟定位问题车间。

数据脱敏

代码解释

服务器

WorkBuddy 

Windows

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 WorkBuddy 从零搭了一套针织面料异常登记系统：从 2 个 Excel 异常登记表到自动分析系统-腾讯云开发者社区-腾讯云

用 WorkBuddy 从零搭了一套针织面料异常登记系统：从 2 个 Excel 异常登记表到自动分析系统

用 WorkBuddy 从零搭了一套针织面料异常登记系统：从 2 个 Excel 异常登记表到自动分析系统

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐