deotalandAi/.trae/documents/实现提示词管理功能.md

实现提示词管理功能

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 的侧边栏菜单中添加：

<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 中添加：

const AdminPromptManagement = () => import('@/views/admin/AdminPromptManagement.vue')

// 在 admin 路由的 children 数组中添加
{
  path: 'prompt-management',
  name: 'AdminPromptManagement',
  component: AdminPromptManagement,
  meta: {
    title: '提示词管理'
  }
}

4.3 提示词管理页面结构

<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 模拟数据结构

const prompts = [
  {
    id: 1,
    title: '示例提示词',
    content: '这是一个示例提示词',
    type: 'general', // animal, person, general
    referenceImage: 'https://example.com/image.jpg',
    isActive: false,
    createdAt: new Date()
  }
]

4.6 右侧删除功能实现

// 从生效区域移除提示词
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. 注意事项

• 确保拖拽功能在各种浏览器中正常工作
• 实现响应式设计，适配不同屏幕尺寸
• 保持代码风格与现有代码一致
• 添加适当的用户反馈和验证