# xPrompt

**Repository Path**: xqshadow/x-prompt

## Basic Information

- **Project Name**: xPrompt
- **Description**: 一个功能完整的AI提示词管理系统，支持分类管理、步骤编辑、响应式设计和数据持久化。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2026-01-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, tsx, React, vite, Express

## README

# AI作品提示词管理平台

一个功能完整的AI提示词管理系统，支持分类管理、步骤编辑、响应式设计和数据持久化。

## 技术栈

### 前端
- React 19
- TypeScript
- Vite
- Ant Design

### 后端
- Node.js
- Express
- TypeScript
- SQLite (Better-sqlite3)

## 功能特点

### 核心功能
- **提示词管理**：创建、编辑、删除和搜索提示词
- **分类管理**：创建、编辑、删除分类，支持分类筛选
- **步骤管理**：
  - 创建、编辑、删除步骤
  - 步骤描述和提示词编辑
  - 步骤上移、下移调整顺序
  - 步骤图片上传和删除
  - 步骤提示词复制功能
- **数据持久化**：使用SQLite数据库存储数据
- **数据迁移**：支持从localStorage迁移到SQLite
- **数据管理仪表盘**：
  - 提示词列表和分类管理
  - 步骤数据展示
  - 数据统计卡片
  - 数据导出功能
- **空白状态处理**：友好的提示信息，引导用户操作

### 用户体验优化
- 响应式设计，适配不同屏幕尺寸
- 异步保存，自动保存数据
- 友好的操作反馈
- 清晰的步骤展示
- 便捷的分类切换
- 空白状态友好提示
- 流畅的页面导航

### 性能优化
- API请求缓存机制
- 避免重复API调用
- 高效的数据加载
- 批量数据处理优化
- 组件懒加载
- 数据库查询优化（JOIN查询）

## 安装和运行

### 环境要求
- Node.js >= 18.0.0

### 前端安装和运行

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

前端服务将在 http://localhost:5174 启动。

### 后端安装和运行

```bash
# 进入后端目录
cd backend

# 安装依赖
npm install

# 构建项目
npm run build

# 启动后端服务
npm start
```

或者使用开发模式启动后端：

```bash
# 进入后端目录
cd backend

# 启动开发服务器
npm run dev
```

后端服务将在 http://localhost:3001 启动。

## 项目结构

### 前端结构
```
src/
├── components/          # React组件
│   ├── Dashboard/       # 数据管理仪表盘组件
│   │   ├── CategoriesTable.tsx   # 分类表格组件
│   │   ├── DataExport.tsx        # 数据导出组件
│   │   ├── PromptDetailModal.tsx # 提示词详情模态框
│   │   ├── PromptsTable.tsx      # 提示词表格组件
│   │   ├── SearchFilter.tsx      # 搜索筛选组件
│   │   ├── StatsCards.tsx        # 统计卡片组件
│   │   └── StepsTable.tsx        # 步骤表格组件
│   ├── AuthGuard.tsx            # 权限守卫组件
│   ├── CategoryDialog.tsx       # 分类管理对话框
│   ├── CategoryManager.tsx      # 分类管理组件
│   ├── DataDashboard.tsx        # 数据仪表盘主组件
│   ├── EmptyPromptState.tsx     # 空白状态提示组件
│   ├── MigrationButton.tsx      # 数据迁移按钮
│   ├── PromptDetail.tsx         # 提示词详情组件
│   ├── PromptList.tsx           # 提示词列表组件
│   ├── PromptManagementContent.tsx # 提示词管理内容组件
│   ├── SearchBar.tsx            # 搜索栏组件
│   ├── StepEditDrawer.tsx       # 步骤编辑抽屉
│   └── StepItem.tsx             # 步骤项组件
├── contexts/           # React Context
│   └── PromptContext.tsx        # 提示词上下文
├── layouts/            # 布局组件
│   └── AppLayout.tsx            # 应用主布局
├── pages/              # 页面组件
│   ├── DataManagement.tsx       # 数据管理页面
│   ├── PromptDetail.tsx         # 提示词详情页面
│   └── PromptManagement.tsx     # 提示词管理页面
├── routes/             # 路由配置
│   └── index.tsx                # 路由定义
├── services/           # 服务层
│   ├── apiService.ts            # API服务
│   └── storageService.ts        # 存储服务
├── store/              # 状态管理
│   ├── README.md                # Zustand使用说明
│   └── store.ts                 # Zustand store定义
├── types/              # TypeScript类型定义
│   ├── dashboard.ts             # 仪表盘相关类型
│   └── index.ts                 # 核心类型定义
├── App.css             # 样式文件
├── index.css           # 全局样式
├── main.tsx            # 应用入口
└── setupTests.ts       # 测试配置
```

### 后端结构
```
backend/
src/
├── db.ts               # 数据库操作
├── index.ts            # 服务器入口
├── routes/             # API路由
│   ├── categories.ts          # 分类相关API
│   ├── migrate.ts             # 数据迁移API
│   ├── prompts.ts             # 提示词相关API
│   └── steps.ts               # 步骤相关API
└── types.ts            # TypeScript类型定义
```

## API接口

### 分类相关
- `GET /api/categories` - 获取所有分类
- `GET /api/categories/with-prompt-count` - 获取所有分类及提示词数量
- `POST /api/categories` - 创建分类
- `PUT /api/categories/:id` - 更新分类
- `DELETE /api/categories/:id` - 删除分类

### 提示词相关
- `GET /api/prompts` - 获取所有提示词
- `GET /api/prompts/with-category` - 获取所有提示词及分类名称
- `GET /api/prompts/:id` - 获取单个提示词
- `POST /api/prompts` - 创建提示词
- `PUT /api/prompts/:id` - 更新提示词
- `DELETE /api/prompts/:id` - 删除提示词

### 步骤相关
- `GET /api/steps` - 获取所有步骤
- `GET /api/steps/with-prompt` - 获取所有步骤及提示词名称
- `POST /api/steps` - 添加步骤
- `PUT /api/steps/:id` - 更新步骤
- `DELETE /api/steps/:id` - 删除步骤

### 统计相关
- `GET /api/stats` - 获取系统统计数据（提示词、分类、步骤数量）

### 数据迁移
- `POST /api/migrate` - 从localStorage迁移数据到SQLite

### 系统相关
- `GET /api/health` - 健康检查
- `GET /api/docs` - API文档

### API文档
访问 `http://localhost:3001/api/docs` 查看完整的API文档，包括所有可用的端点、请求方法和描述。

## 数据模型

### 核心数据模型

#### 分类 (Category)
```typescript
interface Category {
  id: string;
  name: string;
}
```

#### 提示词 (Prompt)
```typescript
interface Prompt {
  id: string;
  name: string;
  category: string;
  steps: Step[];
  createdAt: Date;
  updatedAt: Date;
}
```

#### 步骤 (Step)
```typescript
interface Step {
  id: string;
  description: string;
  prompt: string;
  imageUrl?: string;
  order: number;
  prompt_id?: string; // 关联的提示词ID
}
```

### 扩展数据模型

#### 带有提示词数量的分类 (CategoryWithPromptCount)
```typescript
interface CategoryWithPromptCount extends Category {
  promptCount: number;
}
```

#### 带有分类名称的提示词 (PromptWithCategory)
```typescript
interface PromptWithCategory extends Prompt {
  categoryName: string;
}
```

#### 带有提示词名称的步骤 (StepWithPromptName)
```typescript
interface StepWithPromptName extends Step {
  promptName: string;
}
```

### 数据库表结构

#### 分类表 (categories)
```sql
CREATE TABLE IF NOT EXISTS categories (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL
);
```

#### 提示词表 (prompts)
```sql
CREATE TABLE IF NOT EXISTS prompts (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,
  category_id TEXT NOT NULL,
  created_at DATETIME NOT NULL,
  updated_at DATETIME NOT NULL,
  FOREIGN KEY (category_id) REFERENCES categories(id)
);
```

#### 步骤表 (steps)
```sql
CREATE TABLE IF NOT EXISTS steps (
  id TEXT PRIMARY KEY,
  prompt_id TEXT NOT NULL,
  description TEXT,
  prompt_text TEXT,
  image_url TEXT,
  step_order INTEGER NOT NULL,
  FOREIGN KEY (prompt_id) REFERENCES prompts(id) ON DELETE CASCADE
);
```

## 开发指南

### 前端开发

1. 安装依赖：`npm install`
2. 启动开发服务器：`npm run dev`
3. 构建生产版本：`npm run build`
4. 预览生产版本：`npm run preview`

### 后端开发

1. 安装依赖：`cd backend && npm install`
2. 启动开发服务器：`npm run dev`
3. 构建项目：`npm run build`
4. 启动生产版本：`npm start`

## 许可证

MIT