Qomo是一款革命性的AI提示词模板化工具，通过独创的组件化系统解决AI工具使用中的两大核心痛点：语义理解偏差和重复输入低效。基于腾讯云EdgeOne Pages的云原生架构，为全球用户提供毫秒级响应的AI创作体验。
- 🧩 组件化编排：将提示词拆分为可复用的功能组件（角色设定、约束条件、上下文等）
- 🎨 可视化拖拽：基于React DnD的直观拖拽界面，零学习成本构建复杂提示词
- 📚 知识库沉淀：个人模板库和公共社区，让AI使用经验可积累、可分享
- 🌐 全球加速：EdgeOne CDN确保全球用户的极速访问体验
- ☁️ 云端同步：多设备实时同步，创作内容永不丢失
-
📝 模板编辑器
- 可视化拖拽组件排序
- 实时预览生成的提示词
- 支持创建模式和使用模式切换
- 智能组件推荐和约束检查
-
🗂️ 模板库管理
- 个人模板库和公共模板社区
- 按分类、标签筛选和搜索
- 模板评分和使用统计
- 一键应用和快速复制
-
🧱 组件库系统
- 6种核心组件类型（角色设定、具体问题、后置要求、上下文、约束条件、示例）
- 组件复用和批量管理
- 智能组件推荐
- 自定义组件创建
-
🌍 国际化支持
- 中英文界面切换
- 基于地理位置的智能语言推荐
- 完整的多语言文本管理系统
- ☁️ 云端同步：基于EdgeOne KV存储的多设备同步
- 🤖 AI优化：智能提示词分析和改进建议（预留功能）
- 📊 使用统计：模板使用情况和效果分析
- 🔄 版本控制：模板版本管理和回滚功能
React 18 + TypeScript + Vite
├── UI框架: Tea Design 组件库
├── 状态管理: Zustand + 持久化存储
├── 拖拽系统: React DnD + HTML5 Backend
├── 动画引擎: Framer Motion
├── 样式方案: Tailwind CSS + 响应式设计
├── 路由管理: React Router v7
├── 表单处理: React Hook Form
└── 国际化: 自研i18n系统 + 地理位置检测
src/
├── components/ # 组件目录
│ ├── common/ # 通用组件
│ ├── template/ # 模板相关组件
│ ├── ui/ # 基础UI组件
│ └── layout/ # 布局组件
├── pages/ # 页面组件
├── store/ # Zustand状态管理
├── i18n/ # 国际化系统
├── config/ # 配置文件
├── utils/ # 工具函数
├── types/ # TypeScript类型定义
└── styles/ # 样式文件
functions/ # EdgeOne Pages 边缘函数
├── api/
│ ├── templates/ # 模板管理API
│ ├── kv/ # KV存储API
│ ├── geo/ # 地理位置服务
│ ├── ai/ # AI优化服务
│ └── test/ # 测试接口
Qomo充分利用EdgeOne Pages的边缘计算能力，实现了完整的Serverless API生态：
/api/templates/save- 模板云端保存，支持地理位置标识/api/templates/list- 获取用户模板列表和公开模板/api/templates/delete- 安全删除模板，包含权限验证
/api/kv/[action]- 通用KV操作接口（put/get/delete/list）- 支持用户数据隔离和多租户架构
- 自动处理CORS和错误处理
/api/geo/info- 基于EdgeOne地理位置信息的语言推荐- 自动检测用户地区并推荐最适合的界面语言
- 支持地理位置缓存和离线降级
/api/ai/optimize- 提示词智能分析和优化建议/api/ai/translate- 多语言提示词翻译/api/ai/analyze- 提示词质量评分和改进建议
/api/test/kv- KV存储功能完整性测试/api/test/counter- 访问计数器和系统状态监控/api/debug/keys- 开发环境KV键名查看
KV存储键名规范:
├── user:{userId}:templates:{templateId} # 用户私有模板
├── public:templates:{templateId} # 公开模板社区
├── user:{userId}:components:{componentId} # 用户组件库
├── template:{geoId}:{userId}:{templateId} # 地理位置标识的模板
└── system:config:{configKey} # 系统配置
- 多设备同步：实时云端存储，支持离线编辑和联网同步
- 数据隔离：用户数据完全隔离，支持公开模板社区
- 地理优化：基于地理位置的数据分布和访问优化
- 版本管理：模板版本控制和冲突解决机制
- 边缘节点分布：利用EdgeOne全球节点网络，确保毫秒级响应
- 智能缓存：静态资源CDN缓存 + API响应智能缓存
- 动态加速：基于地理位置的最优路径选择
- 零风险验证：每个Git分支自动生成独立预览环境
- 实时协作：团队成员通过预览链接直接体验新功能
- A/B测试：并行部署不同方案，数据驱动产品决策
- DDoS防护：EdgeOne内置的分布式拒绝服务攻击防护
- WAF防火墙：Web应用防火墙，过滤恶意请求
- 数据加密：传输和存储全程加密保护
- Node.js 18+
- npm 或 yarn
- 现代浏览器（支持ES2020+）
# 克隆项目
git clone https://github.com/your-username/qomo-react.git
cd qomo-react
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 访问 http://localhost:5173
# 构建生产版本
npm run build
# 预览构建结果
npm run preview-
创建EdgeOne Pages项目
# 直接使用模板创建 https://console.cloud.tencent.com/edgeone/pages/new?template=vite-react
-
配置KV存储
- 在EdgeOne Pages控制台创建KV命名空间
- 命名空间名称：
qomo-templates - 绑定变量名：
qomo
-
环境变量配置
# 在EdgeOne Pages控制台配置 qomo=your-kv-namespace-id AI_API_KEY=your-ai-api-key (可选) -
部署项目
- 连接GitHub仓库
- 自动部署：推送代码即可触发部署
- 预览分支：每个分支自动生成预览环境
- 进入编辑器页面，选择"创建模板"模式
- 填写模板基本信息（名称、描述、分类）
- 从组件库拖拽组件到编辑区域
- 调整组件顺序和内容
- 实时预览生成的提示词
- 保存模板到个人库或发布到公开库
- 切换到"使用模板"模式
- 输入具体问题
- 系统自动基于模板组件生成完整提示词
- 一键复制到AI工具使用
- 访问组件库页面
- 查看和管理个人组件
- 创建自定义组件
- 批量导入/导出组件
我们欢迎所有形式的贡献！请查看 CONTRIBUTING.md 了解详细信息。
- 使用TypeScript进行类型安全开发
- 遵循ESLint和Prettier代码规范
- 组件开发使用Tea Design组件库
- 所有文本使用国际化系统管理
- 提交前运行完整的测试套件
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
- 腾讯云EdgeOne Pages - 提供强大的云原生部署平台
- Tea Design - 优秀的React组件库
- React DnD - 强大的拖拽功能实现
- Framer Motion - 流畅的动画体验