![企业微信截图_17872881664919.png](https://developer.qcloudimg.com/http-save/yehe-12667806/4a2ad102875f4fca707eeb2f035a8963.png)
## 背景：一个物业小需求

事情是这样的。我有个朋友在物业公司工作，手里有一份 Excel 台账，记录了小区几百户业主的楼栋、房号、车位和车牌信息。平时工作里最头疼的是两件事：
**第一，查信息太慢。**
保安在车场遇到陌生车，需要反查是哪户的；前台接到业主电话报房号，要查对应车位和车牌。每次都得打开 Excel、Ctrl+F、翻半天，效率极低。
**第二，数据不直观。**
台账里有缺车牌的、缺车位的、外地车牌的，光靠人眼看根本看不出哪些户需要补录。物业经理每个月都要人工统计“还有多少户没登记车牌”，每次都得折腾大半天。
朋友问我能不能帮忙做个简单的东西——**不需要服务器、不需要数据库、双击就能打开用**。我当时第一反应是：做个单页 HTML 就行了。但真正动手之后才发现，看似简单的小工具，坑比想象的多。

## 需求拆解：一个“能查”的看板需要什么？
![企业微信截图_17872885288843.png](https://developer.qcloudimg.com/http-save/yehe-12667806/0c5e9ce4175d025481aabcdfc7a98308.png)
把朋友的需求整理了一下，大概这几个点：
1. **门牌查询**：输入“10-1-202”或“10号楼1单元202”，能查到这户的车位和车牌
2. **车牌反查**：输入车牌号，能反查是哪户的车
3. **数据概览**：一眼看到总户数、完整率、缺车牌/缺车位的数量
4. **数据体检**：把“缺车牌”“缺车位”“外地车牌”的户自动列出来，方便物业催办
5. **离线可用**：不联网、不装任何软件，双击 HTML 文件就能用
6. **数据同步**：Excel 台账更新后，看板能自动同步，不用每次重新打开文件

看起来不复杂对吧？但真正开始做才发现——**Excel 解析、文件读取、数据持久化、自动同步**，每一个环节都有坑。

## 方案选型：为什么选 WorkBuddy？

说实话，我自己写一个纯前端 HTML 也不是不行，但有几个问题：
- 需要自己查 SheetJS 的文档处理 Excel 解析
- 需要处理 File System Access API 的兼容性和权限问题
- 需要写 IndexedDB 存文件句柄实现自动同步
- 需要设计 UI 和交互逻辑

这些活加起来，纯手搓至少两三天。**而且最麻烦的是——物业的 Excel 台账格式经常变**，今天多一列“备用电话”，明天少一列“备注”，代码就得跟着改。
这时候想起了 WorkBuddy。WorkBuddy 是腾讯出的 AI 办公工作台，可以用自然语言下达任务，帮我生成代码、调试逻辑、甚至直接输出可用的 HTML 文件。于是决定让它当我的“副驾”，一起把这个看板搓出来。

## 开发过程：和 WorkBuddy 一起“聊”出来的看板

### 第一步：聊需求，生成第一版

我把上面那个需求列表直接贴给 WorkBuddy，说：“帮我在一个 HTML 里实现这些功能，数据从 Excel 读取，用 SheetJS 解析。”
WorkBuddy 很快生成了一个完整的 HTML 文件，包含：
- 一个文件选择按钮
- SheetJS 的 CDN 引用
- Excel 解析逻辑
- 门牌查询和车牌反查两个输入框
- 一个简单的数据展示区

第一版大概 300 行代码，核心逻辑都有了。

### 第二步：踩坑 1 —— 文件选择器在浏览器里不好用

第一版用的是 `<input type="file">` 让用户手动选文件。朋友试了之后反馈：“每次打开都要重新选文件，太麻烦了。能不能记住上次选的文件？”
WorkBuddy 建议用 **File System Access API**（`window.showOpenFilePicker`），可以把文件句柄存到 IndexedDB，下次打开页面自动读取。
但问题来了：这个 API 只在 Chrome 86+ 支持，而且用户第一次授权后，浏览器重启或清除缓存后权限可能失效。**解决方案是加一个降级方案**：如果浏览器不支持 File System Access API，就 fallback 到传统的 file input；同时用 localStorage 缓存最后一次读取的数据，即使权限失效也能显示旧数据。

### 第三步：踩坑 2 —— Excel 列顺序不固定

物业的 Excel 台账不是固定模板，有时候“车位1”在第 8 列，有时候在第 10 列。如果硬编码列索引，Excel 格式一变就全崩。
WorkBuddy 给出的方案是**按列名动态定位**：先读取第一行作为表头，然后用列名（如“楼栋”“单元”“车位1”“车牌1”）去匹配对应的列索引。这样不管 Excel 的列怎么调整顺序，解析逻辑都能自适应。
```请在此输入代码块语言
请输入您的代码
```// 动态定位列索引
const header = rows[0];
const H = (name) => header.indexOf(name);
const I = {
  lou: H('楼栋'), dan: H('单元'), fang: H('房号'), menpai: H('完整门牌'),
  name: H('业主姓名'), phone: H('联系电话'), status: H('数据状态'),
};
// 车位和车牌列动态扫描
for (let i = 1; i <= 6; i++) {
  const v = H('车位' + i);
  if (v >= 0) cwIdx.push(v);
}

### 第四步：踩坑 3 —— 自动同步怎么做到“只读不写”

朋友的核心诉求是：**Excel 台账在共享盘里，物业同事会随时更新。看板能不能每隔几分钟自动检查一下文件有没有变化，变了就自动刷新？**
WorkBuddy 给出的方案是：
1. 用 `FileSystemFileHandle` 记住文件位置
2. 每次同步时调用 `fileHandle.getFile()` 获取最新的 File 对象
3. 对比 `file.lastModified` 判断文件是否变化
4. 变了才重新解析，没变就跳过（省资源）
5. 每 5 分钟自动执行一次

但这里有个坑：**File System Access API 的权限会过期**。如果用户长时间没操作，浏览器可能回收权限，导致自动同步失败。解决方案是每次同步前先 `queryPermission` 检查权限，如果没授权就尝试 `requestPermission` 重新获取。
```请在此输入代码块语言
请输入您的代码
```async function autoSyncOnce() {
  if (!fileHandle) return;
  let perm = await fileHandle.queryPermission({ mode: 'read' });
  if (perm !== 'granted') {
    perm = await fileHandle.requestPermission({ mode: 'read' });
    if (perm !== 'granted') return;
  }
  const file = await fileHandle.getFile();
  const lm = file.lastModified || 0;
  if (lm === lastModified) return; // 没变化，跳过
  // 文件变了 → 重新读取
  const buf = await file.arrayBuffer();
  const wb = XLSX.read(buf, { type: 'array' });
  lastModified = lm;
  finishLoad(wb, file.name, true);
}

### 第五步：数据脱敏 —— 物业数据不能随便展示

做截图的时候有个问题：Excel 里都是真实业主的姓名、电话、车牌，直接截图发文章肯定不行。
解决方案是在代码里加一个**脱敏函数**，电话号码显示前 3 位 + `****` + 后 4 位：
```请在此输入代码块语言
请输入您的代码
```function maskPhone(p) {
  if (!p || p.length < 7) return p || '';
  return p.slice(0, 3) + '****' + p.slice(-4);
}

截图的时候用这个函数处理所有敏感字段，既展示了功能，又保护了隐私。


----
## 最终效果：三个核心界面

### 1. 数据概览 KPI 卡片

顶部展示 6 个核心指标：总户数、车位车牌齐全、缺车牌、缺车位、仅业主登记、物业用房。物业经理扫一眼就能知道整体情况。
### 2. 即时查询（双栏布局）

左边是门牌查询，支持模糊匹配——“10-1-202”“10号楼1单元202”“1单元202”都能查。右边是车牌反查，输入车牌号就能反查出是哪户的车。
### 3. 数据体检清单

自动汇总“缺车牌”“缺车位”“外地车牌”三类问题户，支持按类型筛选。物业可以直接拿着这个清单去催办业主补录信息。
![企业微信截图_1787288369761.png](https://developer.qcloudimg.com/http-save/yehe-12667806/e11b0aaf71ba3409560396428622ed5d.png)

----
## 使用效果：朋友反馈

朋友用了两周后反馈了几个点：
- **查询速度**从“打开 Excel + Ctrl+F 十几秒”变成了“输入框回车瞬间出结果”
- **数据体检**功能帮他发现原来有 30 多户“有车位没车牌”，之前一直不知道
- **自动同步**设置好之后，Excel 台账更新，看板 5 分钟内自动刷新，不用手动操作
- 唯一的问题是 **File System Access API 在部分旧电脑的 Chrome 上不支持**，好在有 localStorage 缓存兜底

## 踩坑总结


|坑|现象|解决方案|
|:-:|:-:|:-:|
|文件选择器每次都要重新选|用户体验差|File System Access API + IndexedDB 持久化|
|Excel 列顺序不固定|解析报错或数据错位|按列名动态定位索引|
|自动同步权限过期|同步失败，显示旧数据|每次同步前检查 + 请求权限|
|数据脱敏|截图不能展示真实信息|电话号码打码 + 截图前清理敏感字段|
|行内反引号被社区编辑器拦截|文章发布失败|把代码相关的反引号改用代码块或文本描述

## 一点感想

这个看板前后一共花了大概两天时间——**和 WorkBuddy“聊”需求、调试、踩坑、改 bug**。如果纯手写，估计至少得三四天，而且很多细节（比如 File System Access API 的权限管理、IndexedDB 的读写）自己查文档也要折腾很久。
WorkBuddy 对我来说最大的价值不是“一键生成代码”，而是**它能理解业务场景，给出完整的方案建议，而不是只给一段孤立的代码**。比如我说“要自动同步”，它会主动建议用 File System Access API + IndexedDB，还会提醒我注意权限过期的问题。
如果你也在做类似的“单文件 HTML 工具”——不管是物业台账查询、质量周报、还是流程管理看板，**不妨试试让 WorkBuddy 当你的副驾**，把需求聊透，它真的能帮你把活干出来。



事情是这样的。我有个朋友在物业公司工作，手里有一份 Excel 台账，记录了小区几百户业主的楼栋、房号、车位和车牌信息。平时工作里最头疼的是两件事：第一，查信息太慢。保安在车场遇到陌生车，需要反查是哪户的；前台接到业主电话报房号，要查对应车位和车牌。每次都得打开 Excel、Ctrl+F、翻半天，效率极低。第二，数据不直观。台账里有缺车牌的、缺车位的、外地车牌的，光靠人眼看根本看不出哪些户需要补录。物业经理每个月都要人工统计“还有多少户没登记车牌”，每次都得折腾大半天。朋友问我能不能帮忙做个简单的东西——不需要服务器、不需要数据库、双击就能打开用。我当时第一反应是：做个单页 HTML 就行了。但真正动手之后才发现，看似简单的小工具，坑比想象的多。

用 WorkBuddy 搓了一个物业车位车牌查询看板，Excel 台账秒变可查询的 HTML 工具

事情是这样的。我有个朋友在物业公司工作，手里有一份 Excel 台账，记录了小区几百户业主的楼栋、房号、车位和车牌信息。平时工作里最头疼的是两件事：第一，查信息太慢。保安在车场遇到陌生车，需要反查是哪户的；前台接到业主电话报房号，要查对应车位和车牌。每次都得打开 Excel、Ctrl+F、翻半天，效率极低。第二，数据不直观。台账里有缺车牌的、缺车位的、外地车牌的，光靠人眼看根本看不出哪些户需要补录

开发工具

前端

职业发展

用HTML+WorkBuddy两天搞定物业台账查询看板，支持门牌/车牌双向模糊查询、数据体检、Excel自动同步，无需服务器双击即用，含踩坑实录与代码方案。

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

腾讯云BI特惠9.9元起！


CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

用 WorkBuddy 搓了一个物业车位车牌查询看板，Excel 台账秒变可查询的 HTML 工具-腾讯云开发者社区-腾讯云

用 WorkBuddy 搓了一个物业车位车牌查询看板，Excel 台账秒变可查询的 HTML 工具

用 WorkBuddy 搓了一个物业车位车牌查询看板，Excel 台账秒变可查询的 HTML 工具

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐