从零搭建团队协作工作台：WorkBuddy CSV数据驱动轻量应用部署完全指南

TECHNICALGUIDE·2026从零搭建团队协作工作台WorkBuddyCSV数据驱动轻量应用部署完全指南HTML展示层·CSV数据层·轻量发布访问层·零代码团队协作Version1.0·2026年9月目录CONTENTS·五个章节完整覆盖搭建全流程01背景与挑战个人工作台的数据孤岛与协作需求02准备工作前置条件、工具清单与核心概念速览03六步实战流程从看懂原工作台到发布协作的完整路径04最佳实践与扩展排障指南、性能优化与适用边界05总结与行动四步口诀回顾与落地建议核心价值零代码·数据云端同步·团队协作编辑·轻量在线发布01背景与挑战个人工作台的数据孤岛，以及团队协作的真实需求CHAPTER01/0501·背景与挑战个人工作台的核心局限：数据孤岛数据存储在本地浏览器个人工作台的所有数据都保存在localStorage中，绑定在特定设备和浏览器上。换一台电脑、清理浏览器缓存，数据就可能丢失。分享链接无法同步数据即使把HTML链接发给同事，对方打开后看到的是空白数据。你新增的任务、更新的项目进度，同事那边完全看不到。无法多人同时编辑同事修改了一条记录，你这里不会更新；你删除了一个任务，同事那边仍然存在。数据版本混乱，无法形成统一的团队视图。核心矛盾个人工作台的页面和功能已经足够好用，但数据层的本地化存储成为团队协作的最大障碍。解决方案不是重做页面，而是升级数据存储方式。01·背景与挑战团队协作的真实需求场景从"一个人用"到"一群人用"，需求发生了本质变化。以下是团队版工作台必须满足的四类核心需求。01数据云端同步所有数据存储在云端，任何设备打开都能看到最新内容。修改即时生效，不再依赖特定浏览器。02多人协作编辑团队成员可以共同维护任务、项目和风险数据。每个人的修改都能被其他人看到，形成统一视图。03权限分级管理公开链接只读访问，协作者可编辑，管理员拥有全部权限。不同角色看到不同的操作界面。04零代码维护不需要服务器、不需要数据库、不需要写后端代码。全程通过AI提示词操作，非技术人员也能维护。01·背景与挑战核心架构：三层分离设计HTML负责展示与交互页面布局、配色、交互逻辑全部保留在HTML中。原有功能模块不需要推倒重做，只需要替换数据读取层。CSV负责数据存储任务、项目、风险等数据以CSV表格形式存储在WorkBuddy资料库中，通过表格ID被HTML引用，实现云端持久化。轻量发布负责在线访问通过WorkBuddy的"发布为网站"功能生成公开链接，团队成员通过浏览器即可访问，无需安装任何客户端。设计原则展示层与数据层解耦，改数据不影响页面，改页面不影响数据。CSV是唯一数据源，HTML只读不存。01·背景与挑战三层架构职责与交互关系PRESENTATIONLAYER展示层·HTML页面渲染·用户交互·筛选统计·图表展示DATALAYER数据层·CSV任务表·项目表·风险表·唯一数据源·云端持久化ACCESSLAYER访问层·发布公开链接·只读访问·协作邀请·权限控制数据流向与关键约束交互方向操作内容关键约束HTML→CSV新增、编辑、删除数据时写入对应CSV表格必须通过表格ID引用，禁止写本地文件路径CSV→HTML页面加载时从CSV读取最新数据并渲染刷新或换设备后重新读取，不缓存旧数据发布→用户公开链接提供只读访问，协作者可编辑无编辑权限时隐藏修改操作，禁止虚假保存成功01·背景与挑战数据流转机制：从本地到云端BEFORE·改造前localStorage本地浏览器·单设备迁移STEP1·建立云端CSV表格资料库·表格ID引用接入STEP2·改写HTML数据层SDK读写·状态提示发布AFTER·完成团队共享多设备·多人迁移过程中的三个关键保障数据不丢失迁移完成前不删除localStorage中的旧数据。先用测试数据验证接入，确认无误后再执行正式迁移，遇到冲突先报告不覆盖。功能不退化只重写数据层（storage）和交互动作层，保留全部DOM、CSS和渲染函数不变。原有筛选、统计、图表、提醒功能继续可用。状态可感知增加加载中、保存中、保存成功、保存失败四种状态提示。写入失败时不能显示保存成功，也不能直接丢弃用户输入的数据。02准备工作动手前的前置条件、工具清单与核心概念速览CHAPTER02/0502·准备工作前置条件：你需要准备什么1已搭建好的个人工作台本教程基于已有的个人工作台HTML文件进行升级。如果你还没有搭建，建议先完成个人版的搭建，包含任务管理、项目跟踪、风险雷达、本周复盘等核心模块。2WorkBuddy账号与客户端注册并登录WorkBuddy账号，确保可以正常使用资料库和轻量发布功能。推荐使用桌面客户端，操作体验更流畅，也便于管理本地文件。3本地数据备份（可选）如果你在个人工作台中已经积累了任务和项目数据，建议先导出备份。迁移过程中WorkBuddy会保留localStorage旧数据，但手动备份多一层保障。!不需要的东西不需要写代码、不需要服务器、不需要数据库、不需要域名备案。全程通过自然语言提示词让AI操作，非技术背景的团队成员也能独立完成。02·准备工作工具与环境清单类别工具/组件用途备注平台WorkBuddy桌面客户端AI对话、文件上传、资料库管理推荐桌面端，网页端也可存储WorkBuddy资料库存放HTML文件和CSV数据表格支持多人协作和权限管理数据CSV在线表格任务表、项目表、风险表等数据源每个表格有唯一ID，被HTML引用发布轻量发布功能将HTML发布为可公开访问的网站生成公开链接，默认只读协作协作邀请机制邀请团队成员加入资料库共同编辑可设置可编辑或只读权限输入个人工作台HTML已有的个人版工作台文件，作为改造基础上传到资料库后由AI分析改造所有工具均为WorkBuddy平台内置能力，无需额外安装第三方软件或服务02·准备工作核心概念：localStorage与CSV对比localStorage（改造前）CSV云端表格（改造后）对比维度localStorageCSV云端表格存储位置用户浏览器本地，绑定设备和域名WorkBuddy资料库云端，任何设备可访问数据共享无法共享，每人看到自己的本地数据多人共享同一份数据，修改实时同步数据结构键值对JSON字符串，结构不直观行列表格结构，字段清晰，可直接编辑引用方式JSAPI直接读写，无外部依赖通过表格ID和SDK读写，需网络连接权限控制无权限概念，能打开页面就能改数据支持只读/可编辑/管理员多级权限数据安全清理缓存即丢失，无备份机制云端持久化存储，资料库自带版本管理03六步实战流程从看懂原工作台到发布协作的完整操作路径看懂工作台→建立CSV→接入数据→功能自查→发布链接→协作邀请CHAPTER03/0503·六步实战流程·第一步第一步：让AI看懂原来的工作台目标上传HTML文件，让WorkBuddy分析页面结构、功能模块和数据保存方式，输出检查结果和数据清单。AI需要识别的六个关键点1.当前数据保存在哪里（是否为localStorage）2.页面中有哪些可新增、编辑、删除的数据类型3.每类数据包含哪些字段，原始数据与计算字段的区分4.不同数据之间的关联方式5.哪些筛选、统计、提醒和图表依赖这些数据6.改造时可能影响哪些现有功能注意事项这一步只检查不修改。确认AI识别出任务、项目、风险雷达等模块，并确认当前以localStorage为主要存储后，再进入下一步。03·六步实战流程·第一步第一步提示词：让AI检查工作台结构（上）可直接复制的提示词我手上有一个已经做好的个人工作台HTML文件，想把它改成可以在线访问、多人查看的版本。请先检查这个文件的页面结构、功能模块和当前的数据保存方式，暂时不要修改。检查完成后，请用简单的话告诉我：1.现在的数据保存在哪里；2.页面里有哪些可以新增、编辑或删除的数据类型；3.每类数据包含哪些字段，哪些是原始数据，哪些是页面临时计算出来的；4.不同数据之间有没有关联，目前通过什么方式关联；5.哪些筛选、统计、提醒和图表依赖这些数据；6.改造时可能影响哪些现有功能。请先输出检查结果和数据清单，不要修改文件，也不要创建CSV。03·六步实战流程·第一步第一步验收要点：确认AI看懂了什么发送提示词后等待约两分钟，AI会输出检查结果与数据清单。请逐项核对以下内容，确认无误后再进入下一步。必须确认通过的项识别出任务、项目、风险雷达、本周复盘等核心模块确认当前以localStorage作为主要数据存储方式列出每类数据的完整字段清单需要警惕的问题AI遗漏了某个功能模块或数据类型字段清单不完整，缺少关键属性AI未经确认就开始修改文件或创建CSV检查结果的用途这份检查结果和数据清单不是给你看的，而是给下一步操作准备的。第二步中，AI会根据这份清单自动梳理页面里有哪些数据、各自包含哪些字段，再创建对应的CSV文件。因此第一步的检查越完整，后续的CSV设计就越准确，不会漏掉工作台已经在使用的字段，也不会硬塞一堆用不上的字段。03·六步实战流程·第二步第二步：在资料库建立在线CSV数据文件目标让WorkBuddy根据第一步的检查结果，梳理页面数据类型和字段，在资料库中创建对应的CSV文件，作为后续唯一数据源。典型工作台需要的CSV文件任务表tasks.csv核心字段：id（唯一标识）title（任务标题）status（状态）priority（优先级）project_id（关联项目）due_date（截止日期）项目表projects.csv核心字段：id（唯一标识）name（项目名称）status（项目状态）progress（进度百分比）start_date（开始日期）end_date（结束日期）风险/设置表根据实际模块而定：risks.csv（风险雷达）settings.csv（全局设置）reviews.csv（复盘记录）具体由AI根据第一步检查结果确定03·六步实战流程·第二步CSV设计原则与字段规范五条核心设计原则1每条记录有稳定唯一的ID，不依赖名称或序号作为标识2数据间通过ID关联，不只靠名称关联，避免重名导致断链3只保存必要的时间字段，创建/更新时间仅在页面逻辑确实需要时保存4CSV是唯一数据源，HTML只负责读取、展示和交互，不另存数据5不创建页面用不到的字段，避免硬塞冗余属性增加维护成本原始字段vs计算字段写入CSV的原始字段：任务标题、状态、优先级、截止日期项目名称、开始/结束日期风险描述、等级、责任人用户手动输入或选择的所有数据页面实时计算、不写入CSV：任务完成率、项目进度百分比风险雷达图表的坐标计算本周复盘的统计汇总数据筛选、排序后的临时展示结果区分原则：用户主动输入的存CSV，系统根据原始数据推导的实时计算03·六步实战流程·第二步第二步提示词：设计并创建CSV文件提示词第一部分：设计CSV方案（先输出方案等确认）请根据刚才对HTML页面结构、功能模块和数据保存方式的检查结果，为这个工作台设计一套CSV。请完成：1.识别页面里有哪些独立的数据类型；2.找出每类数据实际使用的全部字段；3.判断不同数据之间如何关联；4.区分需要长期保存的原始字段和可以由页面实时计算的字段；5.根据识别结果决定需要创建几个CSV文件。设计规则：每条记录都要有稳定且唯一的ID；不同数据之间优先通过ID关联；CSV作为后续唯一数据源，HTML只负责读取、展示和交互。请先把以下内容列给我确认：建议创建哪些CSV文件及用途；每个文件包含哪些字段；文件之间通过什么字段关联；哪些字段是根据代码推断出来的仍需确认。输出方案后请停下来等我确认，不要提前创建文件。确认方案后发送第二部分确认，按这套方案在资料库中创建CSV文件。创建后请告诉我每个文件的名称、位置和表格ID，暂时不要迁移旧数据。03·六步实战流程·第三步第三步：把HTML接到线上数据目标确认CSV方案无误后，让AI改造HTML页面，将原来的localStorage数据读写替换为通过表格ID读写云端CSV，保留全部页面功能和布局不变。这一步实际做了哪些改动数据存储层替换从localStorage换成资料库SDK，通过每个CSV的表格ID进行数据的读取和写入操作。状态提示新增接入加载中、保存中、保存成功、保存失败四种状态提示，写入失败时不显示虚假成功。只读模式处理公开发布后的页面按只读场景处理，无编辑权限时隐藏或禁用修改数据的操作。保持不变的部分全部DOM、CSS、渲染函数保持不变，只重写数据层（storage）与交互动作层。03·六步实战流程·第三步数据层重构：storage层改写机制BEFORE·改造前localStorage直读直写页面JS直接调用localStorageAPI读写JSON字符串。数据存在浏览器本地，同步操作，无网络延迟，但无法跨设备共享。改写AFTER·改造后资料库SDK异步读写通过WorkBuddy资料库SDK，按表格ID异步读写CSV数据。数据存在云端，支持跨设备共享和多人协作，需要处理加载和保存状态。改写的四个核心层级层级改造内容保持不变数据层storage模块从localStorage改为SDK读写CSV数据结构和字段定义保持一致交互层新增/编辑/删除操作改为异步写入，增加状态提示用户交互流程和操作入口不变渲染层页面加载时从CSV读取数据后再渲染，增加加载态DOM结构、CSS样式、渲染函数完全不变03·六步实战流程·第三步第三步提示词：改造HTML接入线上数据（上）可直接复制的提示词（核心要求部分）现在开始改造这个个人工作台。请严格按照上一步已经确认的CSV文件、字段结构和关联方式，把当前页面中原来以localStorage保存的数据，改为通过资料库SDK读写对应的CSV表格。不要自行假设固定的文件名称和字段，也不要遗漏页面已经在使用的数据。请通过每个CSV的表格ID进行引用。要求：1.页面加载时从对应CSV读取数据；真正改变数据的新增、编辑、删除、状态变化等操作，要写入对应的CSV；2.不同数据之间继续使用已经确认的唯一ID进行关联，不能因为名称修改而断开；3.普通筛选和排序只改变当前页面的显示，不要误写CSV；如果页面支持需要长期保留的手动排序，再单独处理；4.资料库中的CSV是唯一数据源。页面刷新或换一台设备打开后，要重新读取最新数据；5.页面原有的筛选、统计、提醒、图表和汇总功能继续可用，计算结果要基于CSV中的最新数据；6.尽量保持原来的页面布局、配色和交互，不要进行与数据接入无关的改版；03·六步实战流程·第三步第三步提示词：状态处理与交付要求（下）提示词续：状态处理、测试与交付7.增加必要的加载、保存中、保存成功和保存失败提示。写入失败时不能显示保存成功，也不能直接丢弃用户输入；8.公开发布后的页面按只读场景处理。没有编辑权限时，隐藏或禁用会修改数据的操作，并给出清晰提示；9.先使用容易识别的测试数据完成接入，不要立即迁移全部正式数据；10.在迁移完成并通过核对之前，不要删除或覆盖localStorage中的旧数据；11.完成修改后先检查，不要立即发布。完成后，请向我提供：页面数据字段与CSV字段的对应表；每个CSV的表格ID及引用位置；修改过的读写逻辑；保留或调整的功能；失败处理方式；需要重点验收的操作。等待时间这一步是六步中耗时最长的，通常需要等待十几分钟。AI会重写数据层和交互层，完成后页面仍是未发布版本，需要进入第四步检查。关键提醒完成后AI会提供字段对应表和表格ID清单，请妥善保存这些信息，后续自查和发布步骤都需要用到。不要立即发布，先进入第四步功能自查。03·六步实战流程·第四步第四步：上传之前先自查为什么这一步不能省页面能打开，不代表数据真的接通了。让WorkBuddy按功能逐项检查，它会完整测试所有功能，减少后续不必要的麻烦。这一步是发布前的质量门禁。自查流程的三个阶段1发送自查提示词让AI使用测试数据对改造后的工作台做完整检查，覆盖语法、数据读写、功能操作、异常处理等十个维度。2审核检查报告AI会输出一份详细的检查报告，逐项列出测试结果。确认所有项目都通过后，再进入数据迁移环节。3迁移旧数据测试通过后，将localStorage中的旧数据迁移到CSV，先预览再确认执行。03·六步实战流程·第四步十项测试检查清单发送以下提示词让AI逐项检查，每一项都必须通过才能进入下一步。序号检查项具体内容1代码语法HTML、CSS和JavaScript没有语法错误2数据引用所有CSV都通过正确的表格ID读取，没有继续依赖本地文件路径3功能操作按功能清单逐项测试页面中所有读取和数据修改操作4数据写入新增或修改的数据写入了正确的CSV和字段，没有只留在localStorage5ID关联不同数据之间的ID关联正常，没有因为名称修改而断开6持久化页面刷新后，刚才新增和修改的测试数据仍然存在7统计功能原有的筛选、统计、提醒、图表和汇总结果正确，基于CSV最新数据8异常处理空数据、加载中、读取失败和写入失败时，页面都有正确提示9权限控制没有编辑权限时，页面不会显示虚假的保存成功10数据安全测试过程没有覆盖或删除localStorage中的旧数据03·六步实战流程·第四步数据迁移策略：从localStorage到CSV前提条件测试全部通过后，如果你之前有本地数据，才需要执行迁移。没有旧数据可直接跳过这一步，进入第五步发布。迁移的三个安全阶段1读取与预览AI先读取备份文件，列出数据类型、字段和记录数量；对照CSV方案给出预计写入数量和字段对应；把重复、缺失、异常数据单独列出。2用户确认AI输出迁移预览后停下来等确认。用户核对预计写入数量、字段对应关系、异常数据清单。确认无误后回复"确认迁移"才执行写入。3执行与核对执行迁移，保留原有ID和时间信息。完成后核对迁移前后记录数量，显示成功、跳过、冲突和失败的数量。03·六步实战流程·第五步第五步：发布成在线链接目标确认功能正常、数据迁移完成后，将最终版HTML发布为可公开访问的在线网站，生成分享链接。两种发布方式方式一：AI直接发布在提示词中让WorkBuddy直接完成轻量发布，AI会自动操作并把公开链接发给你。方式二：手动发布在资料库中打开HTML，点击分享图标，切到"发布"，开启"发布为网站"，等待一两分钟。发布前最终确认HTML通过正确的表格ID读取CSV，没有引用本地路径、临时文件或测试文件；公开链接按只读场景处理。注意公开链接是只读访问，不是所有人都能编辑。如果同事也需要维护数据，需要通过第六步的协作邀请单独给权限。03·六步实战流程·第五步轻量发布操作流程详解手动发布的完整操作路径，每一步都有明确的界面入口。01打开资料库在WorkBuddy中进入资料库，找到存放工作台HTML的文件夹02打开HTML点击工作台HTML文件，在预览或编辑模式下打开03点击分享找到页面右上角的分享图标，点击打开分享设置面板04切到发布切到"发布"标签页05开启发布开启"发布为网站"，等待1-2分钟，获取公开链接发布完成后的交付物最终版HTML文件+全部CSV文件的名称、位置和表格ID清单+可公开访问的网站链接。团队成员通过链接即可查看最新数据，无需安装任何软件。03·六步实战流程·第五步只读访问与权限控制机制公开发布的链接默认只读，需要编辑权限的成员通过协作邀请单独授权。公开链接访问者（只读）可以查看所有任务、项目、风险数据和统计图表可以使用筛选、排序、搜索功能新增、编辑、删除按钮被隐藏或禁用尝试修改时给出"无编辑权限"的清晰提示协作成员（可编辑）拥有公开链接的全部查看功能可以新增、编辑、删除任务和项目数据修改实时写入CSV，其他成员刷新即可看到操作有加载中、保存成功/失败的状态反馈权限控制的技术实现要点控制维度只读模式可编辑模式UI元素隐藏新增/编辑/删除按钮，禁用输入框全部操作按钮和输入框可用数据写入不调用CSV写入API，不显示虚假保存成功调用SDK写入CSV，有完整状态反馈03·六步实战流程·第六步第六步：协作邀请与团队管理目标发布完成后，邀请需要共同维护数据的团队成员加入资料库协作，赋予编辑权限，完成从个人工作台到团队工作台的最终转变。协作邀请操作路径1.点击你的资料库，打开你的工作台文件夹2.点击分享按钮，选择"邀请协作"3.输入同事账号，设置权限（可编辑/只读），发送邀请完成标志同事接受邀请后，即可在WorkBuddy中编辑这个工作台。个人工作台正式摇身一变，成为可以分享、可以协作的团队工作台。03·六步实战流程·第六步协作权限设置与团队管理建议合理设置权限层级，按角色分配不同的操作能力，确保数据安全的同时不影响协作效率。角色权限等级可执行操作适用人群管理员全部权限编辑数据、管理成员、修改设置、发布/取消发布工作台创建者、团队负责人编辑者可编辑新增/编辑/删除任务和项目数据，使用全部功能核心团队成员、项目负责人只读成员仅查看查看数据、筛选排序、查看图表统计，不可修改相关方、观察员、上级领导公开访问只读（链接）通过公开链接查看，无需登录，不可修改任何数据外部协作者、临时查看者团队管理建议按项目划分资料库空间，权限随项目阶段调整；定期审查成员列表，及时移除已离开项目的成员。适用规模提醒这套方案适合十来个人的小团队。如果团队规模很大，建议走正常的服务器数据库部署方案。04最佳实践与扩展常见问题排障、性能优化、适用边界与扩展方向CHAPTER04/0504·最佳实践与扩展常见问题与排障指南#问题现象可能原因解决方法1页面打开后数据为空表格ID错误、CSV未创建、网络未连接核对第三步输出的表格ID清单，确认CSV存在且有数据2修改数据后刷新丢失写入API未调用、写入失败被静默、仍在写localStorage检查是否有保存失败提示，确认数据层已改为SDK写入CSV3同事看不到最新数据访问的是旧链接、浏览器缓存、未刷新页面确认使用最新发布链接，强制刷新页面（Ctrl+F5）清除缓存4统计图表数据不正确字段映射错误、计算逻辑仍基于旧数据结构核对字段对应表，让AI重新检查统计模块的数据源5协作成员无法编辑权限设为只读、邀请未接受、访问的是公开链接在资料库分享设置中确认权限为"可编辑"，成员从资料库进入6AI改造后页面样式变了AI进行了与数据接入无关的改版在提示词中强调"保持原有布局配色交互，不做无关改版"，重新生成04·最佳实践与扩展性能优化与数据安全建议性能优化建议合理控制数据量单表记录数建议控制在千条以内，超量时考虑归档历史数据减少不必要的写入筛选和排序只改页面显示不写CSV，避免频繁触发云端同步加载状态优化页面加载时显示骨架屏或加载提示，避免白屏造成用户困惑批量操作合并大量数据导入时使用批量写入，减少API调用次数和等待时间数据安全建议敏感数据谨慎上云公开链接可被任何人访问，不要在工作台中存放密码、密钥等敏感信息定