197 lines
5.6 KiB
Markdown
197 lines
5.6 KiB
Markdown
# 实现提示词管理功能
|
||
|
||
## 1. 功能概述
|
||
在管理后台侧边栏添加提示词管理功能，实现左右分栏的提示词管理界面，支持提示词的增删改查和拖拽排序。
|
||
|
||
## 2. 技术栈
|
||
- Vue 3 + Vite
|
||
- Element Plus
|
||
- Vue Router
|
||
- Vue I18n
|
||
|
||
## 3. 实现步骤
|
||
|
||
### 3.1 添加侧边栏菜单项
|
||
- 修改 `src/components/admin/AdminLayout.vue`，在侧边栏菜单中添加提示词管理菜单项
|
||
- 导入相应的图标组件
|
||
|
||
### 3.2 配置路由
|
||
- 修改 `src/router/index.js`，添加提示词管理页面的路由配置
|
||
- 使用懒加载方式引入组件
|
||
|
||
### 3.3 创建提示词管理页面
|
||
- 创建 `src/views/admin/AdminPromptManagement.vue` 文件
|
||
- 实现左右分栏布局
|
||
- 左侧：未生效提示词区域，支持增删改查
|
||
- 右侧：生效提示词区域，支持拖拽排序和删除功能
|
||
|
||
### 3.4 实现提示词卡片组件
|
||
- 创建 `src/components/admin/PromptCard.vue` 组件
|
||
- 支持展示参考图和标题
|
||
- 支持点击查看详情
|
||
- 支持删除操作
|
||
|
||
### 3.5 实现提示词添加/编辑弹窗
|
||
- 实现添加提示词的弹窗组件
|
||
- 包含提示词类型选择（动物/人物/通用）
|
||
- 包含提示词标题、内容输入
|
||
- 包含参考图上传功能
|
||
|
||
### 3.6 实现拖拽功能
|
||
- 使用 Element Plus 的 `el-transfer` 或自定义拖拽实现
|
||
- 支持从左侧拖拽到右侧
|
||
- 支持右侧区域内的拖拽排序
|
||
|
||
### 3.7 添加国际化支持
|
||
- 在语言文件中添加提示词管理相关的翻译
|
||
|
||
### 3.8 模拟数据
|
||
- 在组件中添加模拟数据，实现本地数据管理
|
||
- 支持提示词的增删改查操作
|
||
|
||
## 4. 详细实现
|
||
|
||
### 4.1 侧边栏菜单项
|
||
在 `AdminLayout.vue` 的侧边栏菜单中添加：
|
||
```vue
|
||
<el-menu-item index="/admin/prompt-management">
|
||
<el-icon><Document /></el-icon>
|
||
<template #title>{{ t('admin.layout.promptManagement') }}</template>
|
||
</el-menu-item>
|
||
```
|
||
|
||
### 4.2 路由配置
|
||
在 `router/index.js` 中添加：
|
||
```javascript
|
||
const AdminPromptManagement = () => import('@/views/admin/AdminPromptManagement.vue')
|
||
|
||
// 在 admin 路由的 children 数组中添加
|
||
{
|
||
path: 'prompt-management',
|
||
name: 'AdminPromptManagement',
|
||
component: AdminPromptManagement,
|
||
meta: {
|
||
title: '提示词管理'
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4.3 提示词管理页面结构
|
||
```vue
|
||
<template>
|
||
<div class="prompt-management">
|
||
<div class="page-header">
|
||
<h2>{{ t('admin.promptManagement.title') }}</h2>
|
||
<el-button type="primary" @click="showAddDialog">
|
||
<el-icon><Plus /></el-icon>
|
||
{{ t('admin.promptManagement.addPrompt') }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<div class="prompt-container">
|
||
<!-- 左侧：未生效提示词 -->
|
||
<div class="prompt-section">
|
||
<div class="section-header">
|
||
<h3>{{ t('admin.promptManagement.inactivePrompts') }}</h3>
|
||
<span class="count">{{ inactivePrompts.length }}</span>
|
||
</div>
|
||
<div class="prompt-list">
|
||
<PromptCard
|
||
v-for="prompt in inactivePrompts"
|
||
:key="prompt.id"
|
||
:prompt="prompt"
|
||
@edit="showEditDialog"
|
||
@delete="deletePrompt"
|
||
@drag-start="handleDragStart"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：生效提示词 -->
|
||
<div class="prompt-section">
|
||
<div class="section-header">
|
||
<h3>{{ t('admin.promptManagement.activePrompts') }}</h3>
|
||
<span class="count">{{ activePrompts.length }}</span>
|
||
</div>
|
||
<div
|
||
class="prompt-list active-list"
|
||
@drop="handleDrop"
|
||
@dragover.prevent
|
||
>
|
||
<PromptCard
|
||
v-for="prompt in activePrompts"
|
||
:key="prompt.id"
|
||
:prompt="prompt"
|
||
:isActive="true"
|
||
@edit="showEditDialog"
|
||
@delete="removeFromActive"
|
||
@drag-start="handleDragStart"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑弹窗 -->
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="isEditing ? t('admin.promptManagement.editPrompt') : t('admin.promptManagement.addPrompt')"
|
||
width="600px"
|
||
>
|
||
<!-- 弹窗内容 -->
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
### 4.4 实现拖拽功能
|
||
使用原生 HTML5 拖拽 API 或 Element Plus 的拖拽组件，实现：
|
||
- 从左侧拖拽到右侧，将提示词设为生效状态
|
||
- 在右侧区域内拖拽，调整提示词顺序
|
||
|
||
### 4.5 模拟数据结构
|
||
```javascript
|
||
const prompts = [
|
||
{
|
||
id: 1,
|
||
title: '示例提示词',
|
||
content: '这是一个示例提示词',
|
||
type: 'general', // animal, person, general
|
||
referenceImage: 'https://example.com/image.jpg',
|
||
isActive: false,
|
||
createdAt: new Date()
|
||
}
|
||
]
|
||
```
|
||
|
||
### 4.6 右侧删除功能实现
|
||
```javascript
|
||
// 从生效区域移除提示词
|
||
const removeFromActive = (promptId) => {
|
||
const prompt = prompts.find(p => p.id === promptId)
|
||
if (prompt) {
|
||
prompt.isActive = false
|
||
// 更新响应式数据
|
||
}
|
||
}
|
||
```
|
||
|
||
## 5. 预期效果
|
||
- 侧边栏新增提示词管理菜单项
|
||
- 提示词管理页面分为左右两栏
|
||
- 左侧可添加、编辑、删除提示词
|
||
- 支持拖拽提示词从左侧到右侧
|
||
- 右侧提示词可拖拽排序和删除
|
||
- 数据本地模拟实现
|
||
|
||
## 6. 文件修改清单
|
||
- `src/components/admin/AdminLayout.vue` - 添加侧边栏菜单项
|
||
- `src/router/index.js` - 添加路由配置
|
||
- `src/views/admin/AdminPromptManagement.vue` - 创建提示词管理页面
|
||
- `src/components/admin/PromptCard.vue` - 创建提示词卡片组件
|
||
- 语言文件 - 添加国际化支持
|
||
|
||
## 7. 注意事项
|
||
- 确保拖拽功能在各种浏览器中正常工作
|
||
- 实现响应式设计，适配不同屏幕尺寸
|
||
- 保持代码风格与现有代码一致
|
||
- 添加适当的用户反馈和验证 |