$git clone https://github.com/JoeyLearnsToCode/prompt-studio🌐 直接使用 | Use it here:[prompt.hahadalin.eu.org](https://prompt.hahadalin.eu.org/)
| 1 | # Prompt Studio |
| 2 | |
| 3 | **🌐 直接使用 | Use it here:[prompt.hahadalin.eu.org](https://prompt.hahadalin.eu.org/)** |
| 4 | |
| 5 | [English Version](#english-version) | [中文版本](#中文版本) |
| 6 | |
| 7 | --- |
| 8 | |
| 9 | ## 中文版本 |
| 10 | |
| 11 | ### 💡 理念 |
| 12 | |
| 13 | Prompt Studio 是一个**本地优先**的 AI 提示词版本管理与编辑工具,致力于为 Prompt 工程师提供像管理代码一样管理提示词的能力。 |
| 14 | |
| 15 | 我们相信: |
| 16 | - **版本即历史**:每次提示词的改进都应该被记录和可视化,让优化过程可追溯 |
| 17 | - **本地优先**:您的数据属于您自己,所有内容存储在本地浏览器中,保护隐私,支持离线工作 |
| 18 | - **直观可视**:复杂的版本树不应只是列表,而应该是一张清晰的演化地图 |
| 19 | - **专注体验**:零配置启动,流畅的键盘操作,让工具成为思维的延伸而非障碍 |
| 20 | |
| 21 | ### ✨ 核心功能 |
| 22 | |
| 23 | #### 📊 版本树可视化 |
| 24 | - **树状结构展示**:以直观的树状图展示提示词版本的演化路径和分支关系 |
| 25 | - **智能定位**:自动聚焦到最新修改的版本,快速找到工作重点 |
| 26 | - **灵活导航**:平移、缩放画布,鼠标点击节点即可查看和编辑对应版本 |
| 27 | |
| 28 | #### ✏️ 强大的编辑器 |
| 29 | - **基于 CodeMirror 6**:专业级代码编辑体验,支持大文本流畅编辑 |
| 30 | - **智能保存**:`Ctrl+Enter` 创建新版本,`Ctrl+Shift+Enter` 原地更新 |
| 31 | - **内置搜索**:支持文本搜索和正则表达式,快速定位内容 |
| 32 | - **片段库**:保存常用文本片段,一键插入提升效率 |
| 33 | |
| 34 | #### 🔍 版本对比与搜索 |
| 35 | - **并排对比**:全屏 Diff 视图,清晰标注增删改内容 |
| 36 | - **智能去重**:自动检测重复内容,避免创建冗余版本 |
| 37 | - **全文搜索**:在整个版本树中搜索关键词,高亮匹配结果并快速跳转 |
| 38 | |
| 39 | #### 🗂️ 灵活的组织方式 |
| 40 | - **文件夹管理**:支持多层嵌套文件夹,项目分类井然有序 |
| 41 | - **标签系统**:为项目添加模型、平台、类型标签,快速筛选 |
| 42 | - **拖拽操作**:直观的拖拽移动项目和调整面板宽度 |
| 43 | |
| 44 | #### 📎 附件与备份 |
| 45 | - **附件管理**:为版本添加图片或视频参考,支持预览和下载 |
| 46 | - **数据导出**:导出为 JSON 或 ZIP 格式,包含完整的附件文件 |
| 47 | - **WebDAV 同步**:配置 WebDAV 服务器实现跨设备数据备份和同步 |
| 48 | |
| 49 | #### 🎨 现代化 UI |
| 50 | - **Material Design 3**:遵循最新设计规范,清新的视觉风格 |
| 51 | - **响应式布局**:自适应桌面、平板、移动端,随时随地工作 |
| 52 | - **无障碍支持**:完整的键盘导航和屏幕阅读器支持,符合 WCAG 2.1 AA 标准 |
| 53 | |
| 54 | ### 📸 应用预览 |
| 55 | |
| 56 | #### 主界面 |
| 57 |  |
| 58 | |
| 59 | #### 差异对比 |
| 60 |  |
| 61 | |
| 62 | #### 设置界面 |
| 63 |  |
| 64 | |
| 65 | ### 🚀 快速开始 |
| 66 | |
| 67 | #### 安装依赖 |
| 68 | ```bash |
| 69 | pnpm install |
| 70 | ``` |
| 71 | |
| 72 | #### 开发模式 |
| 73 | ```bash |
| 74 | pnpm dev |
| 75 | ``` |
| 76 | |
| 77 | #### 构建生产版本 |
| 78 | ```bash |
| 79 | pnpm build |
| 80 | ``` |
| 81 | |
| 82 | #### 运行测试 |
| 83 | ```bash |
| 84 | # 单元测试和组件测试 |
| 85 | pnpm test |
| 86 | |
| 87 | # 端到端测试 |
| 88 | pnpm test:e2e |
| 89 | ``` |
| 90 | |
| 91 | ### 🛠️ 技术栈 |
| 92 | |
| 93 | **前端框架** |
| 94 | - React 18 - UI 框架 |
| 95 | - TypeScript - 类型安全 |
| 96 | - Vite - 构建工具 |
| 97 | |
| 98 | **状态管理与数据** |
| 99 | - Zustand - 轻量级状态管理 |
| 100 | - Dexie.js - IndexedDB 封装库 |
| 101 | - React Router - 路由管理 |
| 102 | |
| 103 | **编辑器与可视化** |
| 104 | - CodeMirror 6 - 代码编辑器核心 |
| 105 | - React Zoom Pan Pinch - 画布缩放和平移 |
| 106 | - Diff Match Patch - 文本差异计算 |
| 107 | |
| 108 | **UI 组件** |
| 109 | - Tailwind CSS - 实用优先的 CSS 框架 |
| 110 | - Headless UI - 无样式可访问组件 |
| 111 | - Framer Motion - 动画库 |
| 112 | |
| 113 | **测试** |
| 114 | - Vitest - 单元测试和组件测试 |
| 115 | - Playwright - 端到端测试 |
| 116 | - Testing Library - React 组件测试 |
| 117 | |
| 118 | ### 📄 许可证 |
| 119 | |
| 120 | 本项目采用 [GNU Affero General Public License v3.0 (AGPL-3.0)](LICENSE) 许可证。 |
| 121 | |
| 122 | **这意味着:** |
| 123 | - ✅ 您可以自由使用、修改和分发本软件 |
| 124 | - ✅ 您必须以相同的 AGPL-3.0 许可证开源您的修改版本 |
| 125 | - ✅ 如果您通过网络提供基于本软件的服务,您必须公开完整的源代码 |
| 126 | - ❌ 不允许将本软件用于闭源商业产品 |
| 127 | |
| 128 | --- |
| 129 | |
| 130 | ## English Version |
| 131 | |
| 132 | ### 💡 Philosophy |
| 133 | |
| 134 | Prompt Studio is a **local-first** AI prompt version management and editing tool, dedicated to empowering Prompt Engineers to manage prompts as they manage code. |
| 135 | |
| 136 | We believe: |
| 137 | - **Versions as History**: Every prompt improvement should be recorded and visualized, making the optimization process traceable |
| 138 | - **Local First**: Your data belongs to you. Everything is stored locally in the browser, protecting privacy and enabling offline work |
| 139 | - **Intuitive Visualization**: Complex version trees should not be mere lists, but clear evolution maps |
| 140 | - **Focus on Experience**: Zero-configuration startup, smooth keyboard operations - let the tool become an extension of thought, not a barrier |
| 141 | |
| 142 | ### ✨ Core Features |
| 143 | |
| 144 | #### 📊 Version Tree Visualization |
| 145 | - **Tree Structure Display**: Visualize prompt evolution paths and branch relationships in an intuitive tree diagram |
| 146 | - **Smart Positioning**: Automatically focus on the most recently modified version to quickly find your work focus |
| 147 | - **Flexible Navigation**: Pan and zoom the canvas, click nodes to view and edit corresponding versions |
| 148 | |
| 149 | #### ✏️ Powerful Editor |
| 150 | - **Based on CodeMirror 6**: Professional-grade code editing experience with smooth large text editing |
| 151 | - **Smart Saving**: `Ctrl+Enter` to create new version, `Ctrl+Shift+Enter` to update in place |
| 152 | - **Built-in Search**: Support text search and regular expressions for quick content location |
| 153 | - **Snippet Library**: Save frequently used text snippets for one-click insertion to boost efficiency |
| 154 | |
| 155 | #### 🔍 Version Comparison & Search |
| 156 | - **Side-by-Side Comparison**: Full-screen Diff view with clear marking of additions, deletions, and modifications |
| 157 | - **Smart Deduplication**: Automatically detect duplicate content to avoid creating redundant versions |
| 158 | - **Full-Text Search**: |