陈美薏作品集

01 / BUSINESS APPLICATION

TaskFlow CRM

项目时间: 2026.03—至今
开发角色: 独立开发（Web 方向）

真实付费委托项目｜B端CRM｜0-1规划与交付

需求梳理 / 业务流程 / 权限设计 / 上线交付

Next.js 16
React 19
TypeScript
Tailwind CSS 4
Supabase
Resend
Vercel
PWA

打开在线演示体验路线：姓名填写「演示访客」、密码填写 demo → 点击「进入员工演示」→ 查看「客户」与「日程」。无需注册。

TaskFlow 公开演示：销售阶段、重点客户与待办任务概览 — 公开演示实拍 · 示例数据

在同一工作台查看销售阶段、客户跟进和待办任务。

01
串联客户跟进流程
关联客户、合同回款与任务日程，让业务信息与待办安排集中在同一工作台。
02
按角色控制数据访问
通过角色权限与数据库访问规则控制数据范围，结合实时同步支持团队协作。
03
让统计覆盖完整数据
列表分页展示，统计由数据库聚合，避免仪表盘只计算当前页的数据。

设计思路与技术架构展开 +收起 −

产品思考与界面设计

围绕客户集中组织联系方式、历史文档与签约资料，归并同类功能、精简侧边栏入口。支持销售自行建档和经理分配客户，让查找资料、跟进与协作衔接在同一工作台。

业务与数据

基于 Next.js 16、React 19 与 TypeScript 实现客户档案、合同回款、任务日程及数据分析；接入 Supabase Auth、Postgres 与 Storage。围绕关联业务设计数据表，通过 RLS 与受控 RPC 隔离多角色数据权限。

协作与交付

以即时性为重点，通过 Realtime、聊天与通知同步业务进展。配套完成附件上传、Excel 导入导出、邮件、移动端适配与 PWA，并部署上线。

列表与统计

针对业务列表与统计场景采用索引、稳定排序、分批加载和数据库聚合，避免仅按前端分页数据计算仪表盘统计。

TaskFlow CRM 核心链路架构：经理与员工通过工作台操作，经身份认证与权限校验写入数据库，触发通知并实时同步，员工处理后更新业务统计。 — 核心链路架构图 · 展示工作分配、接收处理、实时同步与统计更新的实现关系。

02 / AI APPLICATION

AI数据复盘助手

项目时间: 2026.06—至今
开发角色: 独立开发（Web 方向）

AI产品实践｜RAG / Agent / 引用溯源

数据复盘 / AI分析 / 风险控制 / 人工确认

Vue 3
TypeScript
Pinia
Supabase
pgvector
IndexedDB
OpenAI Responses API
Vercel

打开在线演示体验路线：点击「立即体验完整演示」→ 在内置周报中点击「总结核心内容」→ 查看原文参考与依据。无需注册；演示使用本地检索，不调用 AI 模型。

AI 数据复盘助手公开演示：内置经营周报、文档编辑器与分析目标面板 — 公开演示实拍 · 内置文档 / 本地检索模式

文档与分析目标并列展示，保留当前上下文和执行前确认提示。

01
跨期追踪客户问题
合并多份数据，处理重复与冲突，对比不同时期的问题，区分新增、持续和已解决的事项。
02
让分析结论有据可查
分析结果关联文档来源，支持回看原文；通过流式反馈展示生成过程，减少等待时的不确定感。
03
让计算与 AI 分工明确
指标由程序计算，AI 负责解释与建议；修改数据前先展示操作内容，由用户确认后执行。

项目详细介绍展开 +收起 −

产品思考与交互设计

将文档、分析目标和结果依据放在同一工作区，减少查看资料与发起分析之间的切换。分析结论提供原文来源，方便核对；涉及修改时，先展示方案，再由用户确认执行。

数据工作台

使用 Vue 3、TypeScript 与 Pinia 开发多文件导入、经营看板、跨期对比和 Excel 报告导出。通过确定性规则完成指标计算、去重与冲突识别，让分析结果可追溯。

上下文与流式交互

使用 Supabase Auth / RLS 隔离用户数据，结合 pgvector 做多文档检索与引用溯源，通过 IndexedDB 持久化大文档。Vercel Serverless Functions 接入 OpenAI、DeepSeek，处理 SSE 流式响应、Agent 工具调用与结构化分析。

可靠执行

针对工具重复调用、JSON 截断及异步结果串扰，引入工具去重、结构化结果校验与 runId / context 隔离。AI 负责决策解释与行动建议，写操作先生成 Proposal，再由用户确认执行。

风险控制与人工确认

AI 先给出操作方案，由用户预览并确认；执行前核对当前文档与任务，拦截过期或已完成的方案，减少误操作。

查看交互示例与实现代码

要解决的问题分析还未结束，用户已经切换了文档或重新发起任务。即使旧结果成功返回，也要先判断它是否仍属于当前操作。

预览操作方案
用户确认
创建前再次校验
记录执行状态

校验通过 · 等待用户确认

方案待确认，文档、会话和运行一致，可以进入用户确认步骤。

这里使用固定示例演示真实校验函数，不调用模型、不写入文档。前端校验用于避免操作串扰，服务端权限和并发幂等仍需单独保证。

把结果绑定到具体任务

方案记录来源文档和运行 ID；执行时对照当前会话、运行与模型配置。校验依据来自状态，不依赖模型在文本里声称“可以执行”。

确认与创建分别检查

原项目在应用方案时校验，通过后由用户确认；文档创建入口再通过 beforeCreate 校验。创建成功后标记 applied，后续校验不再接受该方案。

提取逻辑，保留边界

独立版本只将 store 状态变为参数，保留原判断分支。无活动运行时仍按当前会话文档判断；它不包含数据库写入、权限管理或并发锁。

原项目节选 · src/stores/chat.ts · canApplyAgentChange

canApplyAgentChange(change: AgentDocumentChange | null, documentId: string | undefined) {
  if (!change || change.status !== 'pending' || !documentId || change.sourceDocumentId !== documentId) return false
  if (this.activeRun) return this.isRunActive(this.activeRun) && this.activeRun.runId === change.runId
  return this.currentSession?.documentId === documentId
}

isRunActive 进一步检查运行 ID、会话 ID 与模型配置；下载版本已将这部分逻辑合并到独立函数中。页面上方的场景直接调用该函数。

阅读源码 ↗下载 TypeScript 模块 ↓查看提取说明 ↗

让想法，在界面上着陆。

想法的落点。

TaskFlow CRM

串联客户跟进流程

按角色控制数据访问

让统计覆盖完整数据

产品思考与界面设计

业务与数据

协作与交付

列表与统计

即时协作如何落地

AI数据复盘助手

跨期追踪客户问题

让分析结论有据可查

让计算与 AI 分工明确

产品思考与交互设计

数据工作台

上下文与流式交互

可靠执行

从梳理需求，
到产品上线。

产品分析与功能拆解

UI 设计与交互规范

前端实现与持续迭代

下一次探索，
一起出发。

让想法，在界面上着陆。

想法的落点。

TaskFlow CRM

串联客户跟进流程

按角色控制数据访问

让统计覆盖完整数据

产品思考与界面设计

业务与数据

协作与交付

列表与统计

即时协作如何落地

AI数据复盘助手

跨期追踪客户问题

让分析结论有据可查

让计算与 AI 分工明确

产品思考与交互设计

数据工作台

上下文与流式交互

可靠执行

从梳理需求，到产品上线。

产品分析与功能拆解

UI 设计与交互规范

前端实现与持续迭代

下一次探索，一起出发。

从梳理需求，
到产品上线。

下一次探索，
一起出发。