提示词分类管理界面

src/router/index.ts

@@ -102,7 +102,12 @@ export const constantRoutes: RouteRecordRaw[] = [
             component: () => import('@/views/modeldetailed/index.vue'),
             name:'ModelDetailed',
             meta: {title: '模型详细', icon: 'dashboard', affix: true}
-        }
+        },{
+        path: '/promptwordManagmant',
+        component: () => import('@/views/promptwordManagement/index.vue'),
+        name:'PromptWordManagement',
+        meta: {title: '提示词分类管理', icon: 'dashboard', affix: true}
+      }
     ]
   },
   {

src/views/promptwordManagement/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-row :gutter="20">
+    <!-- 左侧树形结构 -->
+    <el-col :span="6">
+      <el-card shadow="never">
+        <div class="header">
+          <span>分类树</span>
+          <el-button type="primary" size="small" class="add-btn">添加根分类</el-button>
+        </div>
+        <el-tree :data="treeData" :props="treeProps" node-key="id" highlight-current @node-click="handleNodeClick" />
+      </el-card>
+    </el-col>
+
+    <!-- 中间表单区域 -->
+    <el-col :span="18">
+      <el-card shadow="never">
+        <h3>编辑分类</h3>
+        <el-form :model="form" label-width="120px">
+          <el-form-item label="分类名称">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="分类编码">
+            <el-input v-model="form.code" />
+          </el-form-item>
+          <el-form-item label="父级分类">
+            <el-select v-model="form.parentId" placeholder="请选择父级分类">
+              <el-option label="无（根分类）" value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排序顺序">
+            <el-input-number v-model="form.sort" :min="1" />
+          </el-form-item>
+          <el-form-item label="分类描述">
+            <el-input v-model="form.description" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <!-- 关键词提示模块 -->
+        <div style="color: #777777">关键词提示词</div>
+        <div class="keyword-box" style="display: flex">
+          <div class="keyword-content" style="margin-top: 20px;margin-bottom: 20px;margin-left: 20px">
+            <span >该分类下共有 {{ templateCount }} 个提示词模板</span><br>
+            <el-button type="plain" size="small" @click="viewKeywords" style="margin-top: 10px ">查看关联提示词</el-button>
+          </div>
+        </div>
+        <div class="form-footer">
+          <el-button type="danger">删除分类</el-button>
+          <div class="right-btns">
+            <el-button>取消</el-button>
+            <el-button type="primary">保存</el-button>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const templateCount=ref(5)
+const treeData = ref([
+  {
+    id: 1,
+    label: '内容创作',
+    children: [
+      { id: 2, label: '文案撰写' },
+      { id: 3, label: '文章生成' }
+    ]
+  },
+  {
+    id: 1,
+    label: '知识问答',
+    children: [
+      { id: 2, label: '通用回答' },
+      { id: 2, label: '专业回答' }
+    ]
+  },
+  {
+    id: 1,
+    label: '代码助手',
+    children: [
+      { id: 2, label: '代码生成' },
+      { id: 2, label: '代码解释' },
+      { id:2,  label: 'Bug修复'}
+    ]
+  },
+  {
+    id: 1,
+    label: '聊天对话',
+    children: [
+
+    ]
+  },
+  {
+    id: 1,
+    label: '系统提示词',
+    children: [
+
+    ]
+  }
+])
+
+const treeProps = {
+  children: 'children',
+  label: 'label'
+}
+
+const form = ref({
+  name: '',
+  code: '',
+  parentId: '',
+  sort: 1,
+  description: ''
+})
+function handleNodeClick(data, node) {
+  const parent = node.parent
+
+  if (parent&&parent.level>0) {
+    // ✅ 如果有父节点，把它的 id 设置为 form.parentId
+    form.value.parentId = parent.data.id
+    console.log('父节点ID为：', parent.data.id)
+  } else {
+    // 如果没有父节点（顶级节点），parentId 设为 null 或 ''
+    form.value.parentId = '无(根分类)'
+    console.log('该节点是顶级节点')
+  }
+
+  // 其他表单字段可选填充
+  form.value.name = data.label
+}
+</script>
+
+<style scoped>
+.keyword-content{
+  margin-top: 10px;
+}
+.keyword-box{
+  background-color: #F5F7FA;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.add-btn {
+  font-size: 12px;
+}
+.form-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+.right-btns {
+  display: flex;
+  gap: 10px;
+}
+</style>