提示词全生命周期管理平台（华为云码道实战开发实战 ）

发布时间：2026/10/27 1:53:06
提示词全生命周期管理平台（华为云码道实战开发实战 ）

【PromptCraft — 提示词全生命周期管理平台（华为云码道实战开发实战）】

【正文】

本文记录使用华为云码道（CodeArts）Agent从开源项目优化到全栈增强的完整开发过程，项目已开源至 AtomGit。

一、作品介绍

1.1 项目背景

在日常使用大语言模型（LLM）的过程中，提示词（Prompt）往往散落在聊天记录、笔记、文档各处，难以复用、版本对比和效果验证。PromptCraft（提示词工坊）正是为解决这一痛点而生——一个本地优先、零配置的提示词全生命周期管理工作台。

管理、编辑、版本追踪、实时渲染预览、批量导入导出、收藏置顶、数据统计，全部在一个界面中完成。数据存储在本地 SQLite 文件中，隐私完全由自己掌控。

1.2 实现功能

模块能力
📝 提示词管理创建 / 编辑 / 删除 / 搜索 / 分类 / 标签 / 实时字数统计
⭐ 收藏置顶一键收藏，收藏项列表置顶，支持「只看收藏」筛选
🕛 版本历史每次编辑自动归档，版本列表 + 并排行级 LCS diff +一键回滚（回滚前置操作同样归档，永不丢失）
👁️ 渲染预览自动检测{{变量}}，支持{{var=默认值}}语法与默认值预填，实时 POST/api/render，缺失变量高亮提示
📥 批量管理批量选择模式（checkbox + 全选），批量删除（事务性、最多 500 条）
📤 导入导出JSON 格式导出全部，文件选择导入（共享 schema 校验，事务性批量写入）
📊 数据统计顶部分布统计条：总数 / 收藏数 / 分类数 / 累计字符
🎨 主题系统暗色 / 亮色 CSS 变量主题，一键切换，偏好本地持久化
⌨️ 快捷操作Ctrl+Enter保存、Esc关闭弹层 / 退出批量模式、自定义二次确认弹窗
📱 响应式桌面端多列网格，移动端单列布局

1.3 技术架构

  • 前端：React 18 + TypeScript + Vite
  • 后端：Express + Node.js 原生 SQLite（node:sqlite实验性模块）
  • 共享层：zod schema 前后端统一校验
  • 工程化：多阶段 Dockerfile、docker-compose、优雅关闭、静态托管、访问日志
  • 测试：Vitest 134 用例，覆盖率 97%+，Playwright 端到端 UI 实测
Browser (React+TS+Vite) ──HTTP──▶ Express Server ──SQL──▶ SQLite (WAL) │ shared/ (zod schema)

二、码道 Agent 协作开发

本项目使用华为云码道（CodeArts）Agent完成全部优化开发。码道 Agent 是华为云推出的代码智能体，支持多文件批量编辑、自动化测试、构建验证、Git 推送等全流程软件工程能力。

2.1 码道 Agent 界面截图（含 AtomGit 账号信息）

AtomGit 账号信息确认：

$ ag auth status ✓ Logged in to atomgit.com as 2401_88896705 Token: EaYF****XaXv

2.2 开发过程

码道 Agent 按五大优化方向自主完成开发：

  1. 新增高价值功能：收藏星标、版本回滚、批量删除、统计仪表盘、变量默认值语法
  2. 交互体验打磨：Ctrl+Enter 提交、Esc 退出批量、自定义确认弹窗、字数实时统计
  3. 数据能力增强：结构迁移、收藏筛选与排序、5 个新仓储方法
  4. 工程化完善：多阶段 Docker、优雅关闭、静态托管、访问日志、404 兜底
  5. 视觉与样式升级：统计条、批量工具条、确认弹窗、星标动效

每项功能均配套单元测试，最终134 个测试用例全部通过，覆盖率 97.1%。

三、项目实际运行效果

以下为 PromptCraft 实际运行截图（生产模式，单端口 3001 托管前端 + API）：

3.1 主界面：提示词列表 + 统计条

顶部统计条展示总数 / 收藏数 / 分类数 / 累计字符；卡片网格展示每个提示词，收藏项星标置顶。

3.2 收藏筛选

点击星标按钮一键收藏，点击「只看收藏」筛选出收藏项。

3.3 版本历史与一键回滚

每次编辑自动归档版本，版本抽屉展示并排行级 LCS diff，支持一键回滚（回滚前当前内容先归档，永不丢失）。

3.4 批量管理模式

进入批量模式后显示 checkbox + 全选 + 批量删除工具条，事务性删除最多 500 条。

3.5 搜索过滤

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

实时搜索标题 / 内容 / 标签，输入即过滤。

3.6 渲染预览（变量默认值预填）

编辑面板内置渲染预览，自动检测{{language=python}}、{{code}}等变量，支持{{var=默认值}}语法自动预填默认值，实时调用/api/render渲染，缺失变量高亮提示，一键复制结果。

3.7 暗色 / 亮色主题

CSS 变量主题系统，一键切换，偏好本地持久化。

四、AtomGit 项目仓库地址

公开仓库地址：

https://atomgit.com/2401_88896705/promptforge

仓库已设为public（公开），可直接访问。产品名为 PromptCraft，仓库名为 promptforge。

克隆运行：

gitclone https://atomgit.com/2401_88896705/promptforgecdpromptforgenpminstallnpmrun dev# 开发模式：server :3001 + client :5173# 或dockercompose up-d--build# Docker 一键部署 → http://localhost:3001

五、测试与质量

$npmtestTest Files3passed(3)Tests134passed(134)Coverage97.1%(lines / statements / functions / branches)
  • 134 个 Vitest 用例：覆盖纯函数、仓储层、API 路由、安全加固、静态托管
  • 安全测试：SQL 注入 payload 原样存储、XSS payload 被转义、500 错误不泄露堆栈
  • 端到端 UI 实测：Playwright 全流程自动化验证（新建 / 收藏 / 回滚 / 批量删除 / 主题 / 快捷键）

安全设计

层级措施
HTTPhelmet 安全响应头 + CORS 白名单 + 写接口限流
校验前后端共享 zod schema（零重复定义）
渲染变量值 HTML 实体转义（防 XSS）
数据参数化 SQL（防注入）+ 事务性批量操作
运维优雅关闭 + Docker HEALTHCHECK

六、总结

PromptCraft 在码道 Agent 协助下，从一个基础提示词管理工具，升级为具备收藏、版本回滚、批量管理、统计仪表盘、变量默认值、Docker 部署等能力的全生命周期管理平台。全程134 测试全绿、覆盖率 97%+，并完成端到端 UI 实测验证。

项目已开源：https://atomgit.com/2401_88896705/promptforge

Built with 💜 by 华为云码道（CodeArts）Agent