业务和功能介绍
一、立项背景与目标
浏览器书签长期使用后往往杂乱无章，原生管理器缺乏批量整理和云端备份能力。本项目构建一个 Chrome 扩展，让用户在独立工作区中以可视化图谱方式导入、整理书签，支持写回浏览器或同步至 WebDAV 云端，并提供版本管理和撤销保护，确保操作安全可逆。
当前已落地工程基线、启动导入链路、草稿图谱编辑、本地备份恢复、WebDAV 同步等核心能力，浏览器覆盖写回仍在收尾中。
二、核心功能模块
草稿图谱（bookmark-graph）：核心模块。以思维导图式布局展示书签树，支持节点创建（同级/子级）、重命名、编辑URL、删除、拖拽移动、键盘重排/提升，内置搜索、重复书签聚焦和 Ctrl+Z 撤销。节点分为 folder 和 bookmark 两类，来源标记为 browser 或 draft。
浏览器同步（browser-sync）：启动引导模块。按"本地草稿优先 → 浏览器书签导入 → 首次持久化"策略完成工作区初始化。
WebDAV 同步（webdav）：云端备份与恢复。支持草稿/书签快照上传，版本化存储（最多5版），支持从历史版本选择恢复并自动清理旧版本。
本地持久化（local-persistence）：基于 chrome.storage.local 持久化草稿会话、WebDAV 配置和本地备份产物，覆盖操作前自动创建备份用于撤销保护。
浏览器书签适配器（browser-bookmarks）：封装 Chrome 书签 API，提供读取、导入、导出和覆盖写回能力，写入失败时自动回退。
工作区入口（workspace-entry）：处理扩展图标点击，实现打开或聚焦工作区页面。
三、业务流程
启动：点击扩展图标 → 打开工作区 → 检测本地草稿：有则恢复，无则读取浏览器书签导入并持久化。
编辑：在图谱工作区浏览书签树 → 通过菜单/快捷键编辑节点（创建、重命名、删除、拖拽） → 搜索查找或重复聚焦 → Ctrl+Z 撤销。
同步写回：触发"同步到浏览器" → 确认覆盖 → 自动备份浏览器书签 → 导出草稿为书签树写回浏览器 → 失败自动回退。
WebDAV 流程：配置服务端并测试连通 → 上传快照到云端（版本化存储） → 恢复时选择目标版本 → 确认前自动备份 → 执行恢复。
撤销保护：每次覆盖操作前自动备份当前状态，用户可通过"撤销覆盖"恢复到操作前的草稿或浏览器书签。
浏览器书签长期使用后往往杂乱无章，原生管理器缺乏批量整理和云端备份能力。本项目构建一个 Chrome 扩展，让用户在独立工作区中以可视化图谱方式导入、整理书签，支持写回浏览器或同步至 WebDAV 云端，并提供版本管理和撤销保护，确保操作安全可逆。
当前已落地工程基线、启动导入链路、草稿图谱编辑、本地备份恢复、WebDAV 同步等核心能力，浏览器覆盖写回仍在收尾中。
二、核心功能模块
草稿图谱（bookmark-graph）：核心模块。以思维导图式布局展示书签树，支持节点创建（同级/子级）、重命名、编辑URL、删除、拖拽移动、键盘重排/提升，内置搜索、重复书签聚焦和 Ctrl+Z 撤销。节点分为 folder 和 bookmark 两类，来源标记为 browser 或 draft。
浏览器同步（browser-sync）：启动引导模块。按"本地草稿优先 → 浏览器书签导入 → 首次持久化"策略完成工作区初始化。
WebDAV 同步（webdav）：云端备份与恢复。支持草稿/书签快照上传，版本化存储（最多5版），支持从历史版本选择恢复并自动清理旧版本。
本地持久化（local-persistence）：基于 chrome.storage.local 持久化草稿会话、WebDAV 配置和本地备份产物，覆盖操作前自动创建备份用于撤销保护。
浏览器书签适配器（browser-bookmarks）：封装 Chrome 书签 API，提供读取、导入、导出和覆盖写回能力，写入失败时自动回退。
工作区入口（workspace-entry）：处理扩展图标点击，实现打开或聚焦工作区页面。
三、业务流程
启动：点击扩展图标 → 打开工作区 → 检测本地草稿：有则恢复，无则读取浏览器书签导入并持久化。
编辑：在图谱工作区浏览书签树 → 通过菜单/快捷键编辑节点（创建、重命名、删除、拖拽） → 搜索查找或重复聚焦 → Ctrl+Z 撤销。
同步写回：触发"同步到浏览器" → 确认覆盖 → 自动备份浏览器书签 → 导出草稿为书签树写回浏览器 → 失败自动回退。
WebDAV 流程：配置服务端并测试连通 → 上传快照到云端（版本化存储） → 恢复时选择目标版本 → 确认前自动备份 → 执行恢复。
撤销保护：每次覆盖操作前自动备份当前状态，用户可通过"撤销覆盖"恢复到操作前的草稿或浏览器书签。
项目实现
一、整体架构与设计思路
项目采用五层架构：应用层（app）为 React 壳层与工作区编排；特性层（features）按业务域划分——bookmark-graph（图谱编辑）、browser-sync（启动引导）、webdav（云端同步）、workspace-entry（扩展入口）；领域层（domain）为纯业务模型，不依赖框架；适配器层（adapters）隔离 Chrome 书签 API、chrome.storage.local、原生 fetch 等外部依赖；共享层（shared）管理文案和通用工具。
技术栈：React 19 + TypeScript + Vite，Vitest + Testing Library，Chrome Extension MV3，WebDAV 用原生 fetch。核心设计思路：业务真相在规范化草稿图谱层，浏览器和 WebDAV 是外部映射目标，所有覆盖操作先备份再执行，失败可回退。
二、负责模块与量化成果
独立完成 T01 至 T13 共 13 个里程碑，涵盖从工程 scaffold 到项目收尾的完整生命周期。
32 个源文件 + 35 个测试文件，约 21,600 行代码，测试文件数超过源文件数。已落地：浏览器书签读取/导入/导出/写回全链路（含失败自动回退）；图谱 7 种编辑操作 + 键盘重排/提升；5 种变更类型的 patch 撤销；WebDAV 版本化上传（最多 5 版）+ 双端恢复；覆盖前自动备份，支持双端撤销恢复；35
个测试套件覆盖启动、编辑、拖拽、WebDAV、搜索、撤销等核心链路；状态历史与配置均持久化。
三、难点与解决方案
浏览器写回安全性：Chrome 书签 API 不可逆，中断会丢失书签。解决方案：writeManagedBrowserTree 先读快照作回滚基准，异常时自动反向回退，区分"回滚成功/失败"给出精确提示。
可视化图谱自研布局：未引入第三方图库，需手写思维导图布局。解决方案：实现递归 MindmapLayout 算法，参数化控制节点宽度、间距、分支颜色，支持 400+ 节点视口裁剪和窗口 resize 自适应。
WebDAV 权限适配：Chrome MV3 跨域需动态申请 host_permissions。解决方案：封装权限检测/申请为独立适配器，操作前显式检查，区分 denied/unavailable/invalid-origin 给出精确提示，状态持久化避免重复弹窗。
撤销与外部操作隔离：Ctrl+Z 应撤销编辑但不影响已完成的写回/上传。解决方案：撤销历史仅记录草稿内部变更，外部操作不进 undo 栈，通过 snapshotVersion 和 checkpoint 管理快照一致性。
项目采用五层架构：应用层（app）为 React 壳层与工作区编排；特性层（features）按业务域划分——bookmark-graph（图谱编辑）、browser-sync（启动引导）、webdav（云端同步）、workspace-entry（扩展入口）；领域层（domain）为纯业务模型，不依赖框架；适配器层（adapters）隔离 Chrome 书签 API、chrome.storage.local、原生 fetch 等外部依赖；共享层（shared）管理文案和通用工具。
技术栈：React 19 + TypeScript + Vite，Vitest + Testing Library，Chrome Extension MV3，WebDAV 用原生 fetch。核心设计思路：业务真相在规范化草稿图谱层，浏览器和 WebDAV 是外部映射目标，所有覆盖操作先备份再执行，失败可回退。
二、负责模块与量化成果
独立完成 T01 至 T13 共 13 个里程碑，涵盖从工程 scaffold 到项目收尾的完整生命周期。
32 个源文件 + 35 个测试文件，约 21,600 行代码，测试文件数超过源文件数。已落地：浏览器书签读取/导入/导出/写回全链路（含失败自动回退）；图谱 7 种编辑操作 + 键盘重排/提升；5 种变更类型的 patch 撤销；WebDAV 版本化上传（最多 5 版）+ 双端恢复；覆盖前自动备份，支持双端撤销恢复；35
个测试套件覆盖启动、编辑、拖拽、WebDAV、搜索、撤销等核心链路；状态历史与配置均持久化。
三、难点与解决方案
浏览器写回安全性：Chrome 书签 API 不可逆，中断会丢失书签。解决方案：writeManagedBrowserTree 先读快照作回滚基准，异常时自动反向回退，区分"回滚成功/失败"给出精确提示。
可视化图谱自研布局：未引入第三方图库，需手写思维导图布局。解决方案：实现递归 MindmapLayout 算法，参数化控制节点宽度、间距、分支颜色，支持 400+ 节点视口裁剪和窗口 resize 自适应。
WebDAV 权限适配：Chrome MV3 跨域需动态申请 host_permissions。解决方案：封装权限检测/申请为独立适配器，操作前显式检查，区分 denied/unavailable/invalid-origin 给出精确提示，状态持久化避免重复弹窗。
撤销与外部操作隔离：Ctrl+Z 应撤销编辑但不影响已完成的写回/上传。解决方案：撤销历史仅记录草稿内部变更，外部操作不进 undo 栈，通过 snapshotVersion 和 checkpoint 管理快照一致性。
示例图片视频
相似推荐
南方电网微应用管理平台-低代码
统一认证：单点登录 / 登出、多协议支持（OAuth2.0、SAML 等）、账号状态控制、认证 IP 白名单。
统一权限：应用权限管理、资源权限管理、用户访问权限管理、权限继承与覆盖。
消息通知：待办事项（生成与推送、查看与管理、提醒与延期）、消息提醒（配置、触发、展示）、通知公告（发布、查看、过期处理）。
智能任务台：快捷入口（自定义配置、智能推荐、权限管理）、实用场景（模板库、自定义场景创建与保存）、各单位专区（概览、创建、访问权限设置、资源使用统计）、应用管理（列表展示与查询、更新检查与通知）、应用评价（本地化推荐、应用展示、用户评价、排行榜）、发布与分享（内容发布、分享、权限管理、互动操作）。
2)应用运营分析
应用台账分析：实时监控应用运行情况（使用情况、性能状态、错误日志）。
应用分类：按业务类型、功能模块等维度自动分类，展示应用与业务关系、使用情况、运行状态。
3)架构管理
应用分类管理：按功能 / 用途对应用分类，并归属至对应业务域（分类添加、修改、删除、归属设置）。
4)应用管理
应用台账管理：应用信息维护（手动录入、自动导入、数据校验）、数据导出、应用状态更新（手动更新、自动检测）。
应用接入管理：接入申请审批流程（多模式接入、审批配置与操作）、接入请求验证（身份与权限验证）、接入报告管理（过程记录、问题记录、报告生成）、接入日志管理（记录、查询、导出）。
应用版本管理：版本信息管理（录入、导入、校验）、版本比较、版本回滚、版本发布管理。
应用资源管理：资源监测、资源优化。
应用升级维护：升级需求自动检测、升级计划维护、升级日志管理、应用备份与恢复。
应用全生命周期管理：应用注册、应用发布、发布状态监控、流程管理、生命周期阶段管理、生命周期报告生成、生命周期日志管理。
华东科技创新创业赛事平台
面向创新创业大赛场景，覆盖赛事基础配置、项目报名、阶段流转、专家分配、在线评审及场馆调度的完整业务闭环。支持项目跨赛事和跨阶段数据迁移，提供短信邮件通知及初审结果、多维评分表的数据导出能力。
群艺馆东艺术综合业务平台
面向管理端、小程序端、教师端及大屏端，覆盖课程培训、文化活动、智能考勤三大核心业务场景。支持课程与活动发布、排期、富文本编辑及用户报名支付闭环。提供考勤签到一体化管理及机构独立后台自定义业务规则功能
政府采购电子商城平台的协议管理模块
作品介绍
本项目是政府采购电子商城平台的核心协议管理模块，主要用于管理供应商与平台之间的各类采购协议。系统支持多种协议类型，包括代理商协议、经销商协议、厂商协议和电商协议等，覆盖了政府采购全流程的协议管理需求。
核心功能
1. 协议全生命周期管理：支持协议的创建、编辑、审核、生效、失效等完整流程，包含协议范本管理、协议模板配置等功能。 2. 多级审核机制：实现了灵活的协议审核流程，支持免审项配置、公示自动审核、协议修改审核等多种审核模式，并记录完整的审核日志。 3. 权限体系管理：建立了完善的供应商权限体系，包括品牌权限、品目权限、代理商权限、经销商权限、厂商权限等多维度权限控制，确保供应商只能在授权范围内参与采购活动。 4. 资质管理：支持供应商品牌授权书、品目资质等资质文件的上传和管理，包含资质有效期控制和资质分级管理。 5. 配送范围管理：支持供应商协议配送区域的配置，实现按区划维度的服务范围管理。 6. 数据统计与查询：提供丰富的查询接口，支持按品目、品牌、区划、协议类型等多维度查询供应商协议信息，满足业务统计和公示需求。
政务服务平台-数图新治
【项目简介】
数图新治(简称：数图)是一个政务大数据分析平台，通过算法配置、图表数据展示、汇成专题来进行数据分析、数据挖掘、成果展
示，帮助决策。数图是一个核心产品，从该产品衍生一个个智慧统计项目，部署到各个项目地。到目前为止已服务了全国三四十个
街道办、地区统计局、区政府。
【功能点】
● 图表展示、图表下钻，用到 echarts 的大部分图表及高德地图，项目地涉及到一些客户要求的第三方地图；
●自动报告，用户点击图表生成语料并直接生成报告；用户可通过将语料、图表、图片等拖入到在线报告中，也可手动输入和增加
配置条件生成动静态文本来生成自动报告，如生成日报、周报、月报、季报、年报等；通过拖拽、富文本编辑实现
●自由页面配置，用户通过拖拉拽实现自由页面布局及页面内容展示，实现对页面框架、图表、资源框、筛选器等的功能配置和样
式配置等
● 支持全定制和半定制半配置的页面
●兼容，配置的专题在 pc 、大屏、pad 、移动端使用，实现四端兼容
●在线报表，通过配置实现自动生成报表，数据自动生成，在线编辑、保存、下载报表，通过 lucksheet 实现
●地图，实现各种类型地图如高德、百度、客户要求的第三方地图，涉及到的业务需求如落点、标牌、下钻、框选、热力图、白
模、3D、影像地图、二维地图、聚合、图上加 echarts 图表、弹框、色块、距离计算等
●文件下载，包括数据下载 excel ，图表下载成 word 文档、pdf 下载、报表下载等；
●文件上传，excel、txt、image、word、pdf等；
●文件预览，在线 word、pdf、excel 文档预览；
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服