# AI-react-admin

**Repository Path**: ai-prompt-word-generation---ui/ai-react-admin

## Basic Information

- **Project Name**: AI-react-admin
- **Description**: AI提示词生成react后管框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-07
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< HEAD
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```
=======
# AI-react-admin

#### 介绍
AI提示词生成react后管框架

#### 提示词
我来总结一个完整的提示词，用于生成这个提示词模板管理系统：

```markdown
请帮我创建一个基于React和TypeScript的提示词模板管理系统，具体要求如下：

1. 技术栈要求：
- 使用React 18和TypeScript开发
- 使用Vite作为构建工具
- 使用Ant Design组件库实现UI界面
- 使用React Router处理路由
- 使用Axios处理HTTP请求
- 使用Mock.js模拟后端API

2. 项目结构：
src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── hooks/          # 自定义Hook
├── layouts/        # 布局组件
├── mock/           # Mock数据和服务
├── pages/          # 页面组件
│   ├── prompt/     # 提示词管理
│   └── system/     # 系统管理
├── routes/         # 路由配置
├── services/       # API服务
├── types/          # 类型定义
└── utils/          # 工具函数

3. 核心功能模块：

A. 提示词管理：
- 提示词列表页面：
  * 分页展示提示词模板
  * 支持新增、编辑、删除操作
  * 展示标题、描述、创建时间等信息
- 提示词编辑页面：
  * 表单验证
  * 富文本编辑器支持
  * 自动保存功能

B. 系统管理：
1) 用户管理：
   * 用户列表的分页展示
   * 创建、编辑、删除用户
   * 用户角色分配
   * 使用标签展示用户角色
   * 表单验证和错误处理

2) 角色管理：
   * 角色列表展示
   * 创建、编辑、删除角色
   * 权限配置功能
   * 使用彩色标签展示权限
   * 表单验证和错误处理

3) 菜单管理：
   * 树形展示菜单结构
   * 创建、编辑、删除菜单
   * 支持配置菜单层级
   * 展示菜单路径和图标
   * 防止删除有子菜单的项

4. 数据结构设计：

A. 提示词模板：
```typescript
interface PromptTemplate {
  id: string;
  title: string;
  description: string;
  template: string;
  createdAt: string;
  updatedAt: string;
}
```

B. 用户信息：
```typescript
interface User {
  id: string;
  username: string;
  email: string;
  role: string;
  createdAt: string;
}
```

C. 角色信息：
```typescript
interface Role {
  id: string;
  name: string;
  description: string;
  permissions: string[];
  createdAt: string;
}
```

D. 菜单项：
```typescript
interface MenuItem {
  key: string;
  label: string;
  icon?: React.ReactNode;
  children?: MenuItem[];
  path?: string;
}
```

5. API接口设计：

A. 提示词模板接口：
- GET /api/prompts - 获取提示词列表（支持分页）
- GET /api/prompts/:id - 获取单个提示词
- POST /api/prompts - 创建提示词
- PUT /api/prompts/:id - 更新提示词
- DELETE /api/prompts/:id - 删除提示词

B. 用户管理接口：
- GET /api/users - 获取用户列表（支持分页）
- POST /api/users - 创建用户
- PUT /api/users/:id - 更新用户
- DELETE /api/users/:id - 删除用户

C. 角色管理接口：
- GET /api/roles - 获取角色列表
- POST /api/roles - 创建角色
- PUT /api/roles/:id - 更新角色
- DELETE /api/roles/:id - 删除角色

6. 页面布局要求：
- 创建统一的页面布局
- 顶部导航栏显示系统标题和logo
- 左侧菜单用于功能导航
- 响应式设计，支持移动端访问

7. 交互体验要求：
- 操作后给出清晰的成功/失败提示
- 删除等危险操作需要二次确认
- 表单提交时显示加载状态
- 数据加载时显示loading效果
- 表单需要进行数据验证

8. 开发规范要求：
- 使用TypeScript强类型定义
- 组件和函数需要添加注释
- 统一的错误处理机制
- 代码分层清晰，便于维护
- 遵循React最佳实践

9. 性能优化要求：
- 路由懒加载
- 组件按需加载
- 合理的缓存策略
- 避免不必要的渲染

请确保生成的代码结构合理，组件可复用，并具有良好的扩展性和维护性。同时需要处理各种边界情况和错误情况，提供良好的用户体验。
```

这个提示词涵盖了整个项目的所有关键点，包括：
1. 技术栈选择
2. 项目结构设计
3. 功能模块划分
4. 数据结构定义
5. API接口设计
6. 页面布局要求
7. 交互体验要求
8. 开发规范要求
9. 性能优化要求

使用这个提示词可以生成一个完整的提示词模板管理系统，包含所有必要的功能和组件。提示词的结构清晰，要求明确，便于AI理解和执行。同时，提示词中的代码示例和具体要求也有助于确保生成的代码质量。




>>>>>>> a58304152c66123e534cdff2e29ea8af10e11575