# 实现提示词管理功能

## 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. 注意事项
- 确保拖拽功能在各种浏览器中正常工作
- 实现响应式设计，适配不同屏幕尺寸
- 保持代码风格与现有代码一致
- 添加适当的用户反馈和验证