添加prompt生成，修改通用智能页面

package-lock.json

@@ -23,6 +23,7 @@
 				"js-md5": "^0.8.3",
 				"katex": "^0.16.21",
 				"markdown-it": "^14.1.0",
+				"markdown-it-highlightjs": "^4.2.0",
 				"markdown-it-katex": "^2.0.3",
 				"markdown-it-mermaid": "^0.2.5",
 				"marked": "^15.0.7",
@@ -3313,6 +3314,14 @@
 				"markdown-it": "bin/markdown-it.mjs"
 			}
 		},
+		"node_modules/markdown-it-highlightjs": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz",
+			"integrity": "sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==",
+			"dependencies": {
+				"highlight.js": "^11.9.0"
+			}
+		},
 		"node_modules/markdown-it-katex": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz",

package.json

@@ -23,6 +23,7 @@
 		"js-md5": "^0.8.3",
 		"katex": "^0.16.21",
 		"markdown-it": "^14.1.0",
+		"markdown-it-highlightjs": "^4.2.0",
 		"markdown-it-katex": "^2.0.3",
 		"markdown-it-mermaid": "^0.2.5",
 		"marked": "^15.0.7",

src/components/menu.ts

@@ -199,6 +199,12 @@ export const menuData: Menus[] = [
         index: '/gen-chat',
         title: '通用人机对话',
     },
+    {
+        id: '55',
+        icon: 'ChatDotSquare',
+        index: '/gen-prompt',
+        title: '提示词生成',
+    },
     {
         id: '6',
         icon: 'DocumentAdd',

src/components/table-edit.vue

@@ -9,7 +9,7 @@
 					<el-input-number v-else-if="item.type === 'number'" v-model="form[item.prop]"
 						:disabled="item.disabled" controls-position="right"></el-input-number>
 					<el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" :disabled="item.disabled"
-						:placeholder="item.placeholder" clearable>
+						:placeholder="item.placeholder" clearable >
 						<el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></el-option>
 					</el-select>
 					<el-date-picker v-else-if="item.type === 'date'" type="date" v-model="form[item.prop]"

src/router/index.ts

@@ -68,6 +68,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "gen-chat" */ '../views/system/gen-chat.vue'),
             },
+            {
+                path: '/gen-prompt',
+                name: 'gen-prompt',
+                meta: {
+                    title: 'prompt生成',
+                    permiss: '55',
+                },
+                component: () => import(/* webpackChunkName: "gen-prompt" */ '../views/system/prompt-gen.vue'),
+            },
             {
                 path: '/system-role',
                 name: 'system-role',

src/store/permiss.ts

@@ -51,6 +51,7 @@ export const usePermissStore = defineStore('permiss', {
                     '52', //模型管理
                     '53', //通用人机对话
                     '54', //功能管理
+                    '55', //提示词生成
                 ],
                 user: ['0', '8', '7','9',  '61','53'],
             },

src/types/form-option.ts

@@ -15,6 +15,7 @@ export interface FormOptionList {
     opts?: any[];
     format?: string;
     activeValue?: any;
+    multiple?: boolean;
     inactiveValue?: any;
     activeText?: string;
     inactiveText?: string;

src/views/system/copy-test.vue

@@ -0,0 +1,467 @@
+<template>
+    <div class="chat-app">
+      <!-- 历史会话侧边栏 -->
+      <div class="history-sessions" v-if="sessionIsShow">
+          <div >
+            <el-button type="primary" @click="clearCurrent">新会话</el-button>
+          </div>
+        <el-card class="session-card">
+          <template #header>
+            <h3>当前会话</h3>
+          </template>
+          <ul>
+            <li>{{ getShortenedName(sessionName) }}</li>
+          </ul>
+        </el-card>
+        <el-card class="session-card2">
+          <template #header>
+            <h3>历史会话</h3>
+          </template>
+          <el-scrollbar style="height: 400px; scrollbar-width: none">
+            <ul>
+              <li
+                v-for="(session, index) in historySessions"
+                :key="index"
+                @click="loadSession(session.ID)"
+              >
+                {{ getShortenedName(session.Name) }}
+              </li>
+            </ul>
+          </el-scrollbar>
+        </el-card>
+      </div>
+  
+      <!-- 原有的聊天区域 -->
+      <div class="chat-container">
+        <div>
+          <div @click="showSession" style="cursor: pointer">
+            <el-icon v-if="sessionIsShow">
+              <Expand />
+            </el-icon>
+            <el-icon v-else>
+              <Fold />
+            </el-icon>
+          </div>
+        </div>
+        <!-- 消息列表 -->
+        <el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
+          <div
+            v-for="(message, index) in messages"
+            :key="index"
+            :class="['message', message.role]"
+          >
+            <div class="message-avatar">
+              <span v-if="message.role === 'assistant'">💬</span>
+              <span v-else>👤</span>
+            </div>
+            <div class="message-content">
+              <div v-html="renderMarkdown(message.content)"></div>
+              <!-- 添加复制 -->
+              <div>
+              <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
+            </div>
+            </div>
+          </div>
+          <div v-if="loading" class="loading-indicator">Loading...</div>
+        </el-card>
+  
+        <!-- 输入区域 -->
+        <el-card class="chat-input" shadow="never">
+          <el-row :gutter="10">
+            <el-col :span="20">
+              <el-input
+                v-model="inputMessage"
+                type="textarea"
+                :rows="2"
+                placeholder="输入消息..."
+                @keyup.enter="sendMessage"
+              />
+              <el-text v-model="inputMessage" aria-placeholder="输入信息...."></el-text>
+            </el-col>
+            <el-col :span="4" style="text-align: center">
+              <el-button  @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
+  import { ElCard, ElInput, ElButton } from "element-plus";
+  import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
+  import { ElMessage } from "element-plus";
+  import { GetMessageService } from "@/api/im";
+  import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
+  import MarkdownIt from "markdown-it";
+  import markdownItMermaid from "markdown-it-mermaid";
+  import hljs from "highlight.js";
+  import { Session } from "@/types/session";
+  import bash from "highlight.js/lib/languages/bash";
+  import { FindSessionService } from "@/api/session";
+  import javascript from "highlight.js/lib/languages/javascript";
+  import typescript from "highlight.js/lib/languages/typescript";
+  import java from "highlight.js/lib/languages/java";
+  import sql from "highlight.js/lib/languages/sql";
+  import nginx from "highlight.js/lib/languages/nginx";
+  import json from "highlight.js/lib/languages/json";
+  import yaml from "highlight.js/lib/languages/yaml";
+  import xml from "highlight.js/lib/languages/xml";
+  import shell from "highlight.js/lib/languages/shell";
+  import "katex/dist/katex.min.css";
+  interface Message {
+    role: "user" | "assistant";
+    content: string;
+    finished?: boolean;
+  }
+  
+  hljs.registerLanguage("bash", bash);
+  hljs.registerLanguage("javascript", javascript);
+  hljs.registerLanguage("typescript", typescript);
+  hljs.registerLanguage("java", java);
+  hljs.registerLanguage("sql", sql);
+  hljs.registerLanguage("nginx", nginx);
+  hljs.registerLanguage("json", json);
+  hljs.registerLanguage("yaml", yaml);
+  hljs.registerLanguage("xml", xml);
+  hljs.registerLanguage("shell", shell);
+  const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    breaks: true,
+    xhtmlOut: true,
+    typographer: true,
+    highlight: (str, lang) => {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return `<pre class="hljs"><code>${
+            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+          }</code></pre>`;
+        } catch (__) {}
+      }
+      return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+    },
+  });
+  
+  const historySessions = ref<Session[]>([]);
+  const loading = ref(false);
+  const isUserScrolling = ref<boolean>(false);
+  const messages = reactive([]);
+  const inputMessage = ref("");
+  const socket = ref(null);
+  const currentAIMessage = ref("");
+  const sessionID = ref(0);
+  const messagesContainer = ref<HTMLDivElement | null>(null);
+  const sessionIsShow = ref(false);
+  const sessionName = ref("");
+  
+  const renderMarkdown = (content: string) => {
+    return md.render(content);
+  };
+  
+  const scrollToBottom = () => {
+    let x = document.getElementsByClassName("chat-messages")[0];
+    x.scrollTop = x.scrollHeight; //将滚轮置底
+  };
+  
+  onMounted(() => {
+    // if (typeof window !== 'undefined') {
+    //   // 浏览器环境
+    //   md.use(markdownItMermaid);
+    // }
+    let url =
+      "wss://pm.ljsea.top/im/ai_chat_ws?" +
+      "token=" +
+      localStorage.getItem("token");
+    socket.value = new WebSocket(url);
+    socket.value.onopen = () => {
+      console.log("WebSocket 连接已建立");
+      ElMessage.success("连接成功");
+    };
+    //getMessage(125);
+    messagesContainer.value = document.querySelector(".chat-messages");
+  
+    socket.value.onmessage = (event) => {
+      let msg: WSMessage = JSON.parse(event.data);
+      const existingMessage = messages.find(
+        (msg) => msg.role === "assistant" && !msg.finished
+      );
+      if (existingMessage) {
+        // 追加内容
+        existingMessage.content += msg.msg.msg.response;
+      } else {
+        // 新消息
+        messages.push({
+          role: "assistant",
+          content: msg.msg.msg.response,
+          finished: false,
+        });
+      }
+      //console.log("resp:", msg);
+      sessionID.value = msg.session_id;
+      currentAIMessage.value += msg.msg.msg.response;
+      if (msg.msg.msg.done) {
+        const assistantMessage = messages[messages.length - 1];
+        assistantMessage.finished = true;
+        loading.value = false;
+      }
+      nextTick(() => {
+        scrollToBottom(); // 新增滚动调用
+      });
+    };
+  
+    socket.value.onclose = () => {
+      console.log("WebSocket 连接已关闭");
+      ElMessage.error("连接已关闭");
+      //重新连接
+      socket.value = new WebSocket(url);
+    };
+  
+    socket.value.onerror = (error) => {
+      console.error("WebSocket 发生错误:", error);
+    };
+  });
+  
+  onUnmounted(() => {
+    if (socket.value) {
+      socket.value.close();
+    }
+  });
+  
+  const sendMessage = () => {
+    if (inputMessage.value.trim() === "") {
+      ElMessage.warning("消息不能为空");
+      return;
+    }
+    let msg = {
+      msg: inputMessage.value,
+      type: "ollama",
+      function: "gen-ai-chat",
+      session_id: sessionID.value,
+    };
+    messages.push({ role: "user", content: inputMessage.value, finished: true });
+    socket.value.send(JSON.stringify(msg));
+    inputMessage.value = "";
+    scrollToBottom();
+    loading.value = true;
+    if (sessionID.value == 0) {
+      sessionName.value = msg.msg;
+    }
+  };
+  
+  const loadSession = async (session_id: number) => {
+    sessionID.value = session_id;
+    messages.length = 0; // 清空消息
+    sessionName.value = historySessions.value.find(
+      (session) => session.ID == session_id
+    )?.Name;
+    await getMessage(session_id);
+    scrollToBottom();
+  };
+  
+  const clearCurrent = () => {
+    sessionID.value = 0;
+    messages.length = 0; // 清空消息
+    sessionName.value = "新会话";
+    ElMessage.success("新会话已创建!可以开始聊天了");
+  };
+  
+  const showSession = async () => {
+    //获取历史会话
+    let req = {
+      token: localStorage.getItem("token"),
+      type: "UserID",
+    };
+    let result = await FindSessionService(req);
+    historySessions.value = result.data;
+    sessionIsShow.value = !sessionIsShow.value;
+  };
+  const getShortenedName = (name: string) => {
+    if (name.length > 10) {
+      return name.slice(0, 10) + "...";
+    }
+    return name;
+  };
+  
+  const getMessage = async (session_id: number) => {
+    let result = {};
+    try {
+      let req = {
+        token: localStorage.getItem("token"),
+        session_id: session_id,
+      };
+      result = await GetMessageService(req);
+      if (result["code"] === 0) {
+        console.log(result["data"]);
+        let data = result["data"];
+        for (let i = 0; i < data.length; i++) {
+          if (data[i]["Type"] === 3) {
+            messages.push({
+              role: "user",
+              content: data[i]["Msg"],
+              finished: true,
+            });
+          } else if (data[i]["Type"] === 4) {
+            messages.push({
+              role: "assistant",
+              content: data[i]["Msg"],
+              finished: true,
+            });
+          } else {
+            console.log("未知消息类型");
+          }
+        }
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return {};
+  };
+  const copyMessage = (content: string) => {
+    navigator.clipboard.writeText(content).then(() => {
+      ElMessage.success('复制成功');
+    }).catch((error) => {
+      ElMessage.error('复制失败: ' + error);
+    });
+  };
+  </script>
+  <style scoped>
+  .chat-app {
+    display: flex;
+    height: 100%;
+  }
+  
+  .history-sessions {
+    width: 15%;
+    padding: 20px;
+    height: 100%;
+    overflow-y: auto;
+    border-right: 1px solid #e1e1e1;
+    scrollbar-width: none;
+  }
+  
+  .history-sessions ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  .history-sessions li {
+    cursor: pointer;
+    padding: 10px;
+    border-bottom: 1px solid #e1e1e1;
+  }
+  
+  .history-sessions li:hover {
+    background-color: #f0f0f0;
+  }
+  
+  .chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto; /* 允许垂直滚动 */
+    padding: 10px;
+    margin-bottom: 20px;
+    scrollbar-width: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .messages-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto; /* 确保内部可以滚动 */
+    height: 100%;
+  }
+  
+  .message {
+    display: flex;
+    margin-bottom: 15px;
+  }
+  
+  .message.user {
+    justify-content: flex-end;
+  }
+  
+  .message-avatar {
+    width: 40px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 20px;
+    margin-right: 10px;
+  }
+  
+  .message.assistant .message-avatar {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+  
+  .message-content {
+    background-color: #f0f9eb;
+    border: 1px solid #e1f3d8;
+    border-radius: 4px;
+    padding: 10px 15px;
+    white-space: pre-wrap;
+    max-width: 70%;
+  }
+  
+  .message.assistant .message-content {
+    background-color: #f3f4f6;
+    border: 1px solid #dce4eb;
+    max-width: 70%;
+  }
+  
+  .loading-indicator {
+    text-align: center;
+    color: #999;
+    font-size: 16px;
+  }
+  
+  .chat-input {
+    width: 100%;
+  }
+  
+  .el-input {
+    width: 100%;
+  }
+  
+  .session-card {
+    margin-bottom: 20px;
+    height: 20%;
+  }
+  .session-card2 {
+    margin-bottom: 20px;
+    height: 70%;
+  }
+  
+  .session-card ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .session-card li {
+    cursor: pointer;
+    padding: 10px;
+    border-bottom: 1px solid #e1e1e1;
+  }
+  
+  .session-card li:hover {
+    background-color: #f0f0f0;
+  }
+  
+  .scroll-wrapper {
+    height: 100%;
+    overflow-y: auto;
+  }
+  </style>
+  

src/views/system/function.vue

@@ -124,7 +124,7 @@ let options_edit = ref<FormOption>({
     span: 12,
     list: [
         { type: 'input', label: '名称', prop: 'Name', required: true },
-        { type: 'select', label: '模型', prop: 'ModelID', required: true, opts:model_select_opts.value},
+        { type: 'select', label: '模型', prop: 'ModelID', required: true, opts:model_select_opts.value, multiple: true},
         { type: 'input', label: '功能', prop: 'Function', required: true },
         { type: 'input', label: '描述', prop: 'Info', required: true },
     ]

src/views/system/gen-chat.vue

@@ -2,7 +2,7 @@
   <div class="chat-app">
     <!-- 历史会话侧边栏 -->
     <div class="history-sessions" v-if="sessionIsShow">
-      <div>
+        <div >
           <el-button type="primary" @click="clearCurrent">新会话</el-button>
         </div>
       <el-card class="session-card">
@@ -44,7 +44,7 @@
         </div>
       </div>
       <!-- 消息列表 -->
-      <el-card class="chat-messages" shadow="never" ref="messagesContainer">
+      <el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
         <div
           v-for="(message, index) in messages"
           :key="index"
@@ -56,6 +56,10 @@
           </div>
           <div class="message-content">
             <div v-html="renderMarkdown(message.content)"></div>
+            <!-- 添加复制 -->
+            <div>
+            <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
+          </div>
           </div>
         </div>
         <div v-if="loading" class="loading-indicator">Loading...</div>
@@ -89,22 +93,14 @@ import { ElCard, ElInput, ElButton } from "element-plus";
 import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
 import { ElMessage } from "element-plus";
 import { GetMessageService } from "@/api/im";
-import {Check, Loading} from '@element-plus/icons-vue'
+import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
 import MarkdownIt from "markdown-it";
 import markdownItMermaid from "markdown-it-mermaid";
 import hljs from "highlight.js";
 import { Session } from "@/types/session";
 import bash from "highlight.js/lib/languages/bash";
 import { FindSessionService } from "@/api/session";
-import javascript from "highlight.js/lib/languages/javascript";
+import markdownItHighlightjs from 'markdown-it-highlightjs';
-import typescript from "highlight.js/lib/languages/typescript";
-import java from "highlight.js/lib/languages/java";
-import sql from "highlight.js/lib/languages/sql";
-import nginx from "highlight.js/lib/languages/nginx";
-import json from "highlight.js/lib/languages/json";
-import yaml from "highlight.js/lib/languages/yaml";
-import xml from "highlight.js/lib/languages/xml";
-import shell from "highlight.js/lib/languages/shell";
 import "katex/dist/katex.min.css";
 interface Message {
   role: "user" | "assistant";
@@ -112,33 +108,12 @@ interface Message {
   finished?: boolean;
 }
 
-hljs.registerLanguage("bash", bash);
+const md = new MarkdownIt();
-hljs.registerLanguage("javascript", javascript);
+md.use(markdownItHighlightjs,{
-hljs.registerLanguage("typescript", typescript);
+  hljs,
-hljs.registerLanguage("java", java);
+  auto: true,
-hljs.registerLanguage("sql", sql);
+  code: true
-hljs.registerLanguage("nginx", nginx);
+})
-hljs.registerLanguage("json", json);
-hljs.registerLanguage("yaml", yaml);
-hljs.registerLanguage("xml", xml);
-hljs.registerLanguage("shell", shell);
-const md = new MarkdownIt({
-  html: true,
-  linkify: true,
-  breaks: true,
-  xhtmlOut: true,
-  typographer: true,
-  highlight: (str, lang) => {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return `<pre class="hljs"><code>${
-          hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
-        }</code></pre>`;
-      } catch (__) {}
-    }
-    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
-  },
-});
 
 const historySessions = ref<Session[]>([]);
 const loading = ref(false);
@@ -161,6 +136,30 @@ const scrollToBottom = () => {
   x.scrollTop = x.scrollHeight; //将滚轮置底
 };
 
+const copyCode = (code: string) => {
+  navigator.clipboard.writeText(code).then(() => {
+    ElMessage.success("代码已复制到剪贴板");
+  });
+};
+
+const doButtonD = () => {
+  const codeBlocks = document.querySelectorAll('pre code');
+  codeBlocks.forEach((codeBlock) => {
+    // 创建复制按钮
+    const copyButton = document.createElement('button');
+    copyButton.textContent = '复制代码';
+    copyButton.classList.add('copy-code-button');
+    copyButton.addEventListener('click', () => {
+      copyCode(codeBlock.textContent);
+    });
+    // 设置代码块父元素的定位，以便按钮定位
+    const pre = codeBlock.parentNode;
+    pre.style.position = 'relative';
+    // 将复制按钮添加到代码块父元素中
+    pre.appendChild(copyButton);
+  });
+};
+
 onMounted(() => {
   // if (typeof window !== 'undefined') {
   //   // 浏览器环境
@@ -175,7 +174,7 @@ onMounted(() => {
     console.log("WebSocket 连接已建立");
     ElMessage.success("连接成功");
   };
-  getMessage(125);
+  //getMessage(125);
   messagesContainer.value = document.querySelector(".chat-messages");
 
   socket.value.onmessage = (event) => {
@@ -253,6 +252,8 @@ const loadSession = async (session_id: number) => {
     (session) => session.ID == session_id
   )?.Name;
   await getMessage(session_id);
+  scrollToBottom();
+  //doButtonD();
 };
 
 const clearCurrent = () => {
@@ -313,6 +314,13 @@ const getMessage = async (session_id: number) => {
   }
   return {};
 };
+const copyMessage = (content: string) => {
+  navigator.clipboard.writeText(content).then(() => {
+    ElMessage.success('复制成功');
+  }).catch((error) => {
+    ElMessage.error('复制失败: ' + error);
+  });
+};
 </script>
 <style scoped>
 .chat-app {
@@ -451,4 +459,15 @@ const getMessage = async (session_id: number) => {
   height: 100%;
   overflow-y: auto;
 }
+
+.copy-code-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+}
 </style>

src/views/system/prompt-gen.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="app-wrapper">
+    <!-- 顶部区域 -->
+    <div class="header">
+      <div class="logo">
+        <img src="../../assets/img/prompt.jpg" alt="Logo">
+        <span>欢迎使用 Prompt 优解</span>
+      </div>
+      <div class="description">
+        激发模型潜能，轻松优化Prompt。
+      </div>
+    </div>
+    <!-- 主体内容区域 -->
+    <div class="main-content">
+      <!-- 左侧任务区域 -->
+      <div class="task-section">
+        <h2>你的任务</h2>
+        <el-input
+          type="textarea"
+          placeholder="试试示例任务或简单描述你的任务，如总结文档摘要"
+          v-model="taskInput"
+          rows="10"
+        />
+        <el-button type="primary" @click="generatePrompt">生成Prompt</el-button>
+        <div class="prompt-template">
+          <h3>Prompt 模板</h3>
+          <el-button type="success" size="small" @click="addTemplate">模板新增</el-button>
+          <div v-for="(template, index) in templates" :key="index" class="template-item">
+            <div class="template-title">{{ template.title }}</div>
+            <div class="template-desc">{{ template.desc }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧结果及模型参数区域 -->
+      <div class="result-section">
+        <h2>生成后的 Prompt</h2>
+        <el-input
+          type="textarea"
+          placeholder="这里将展示AI根据任务描述辅助生成的Prompt"
+          v-model="resultPrompt"
+          rows="25"
+        />
+        <el-dropdown trigger="click" class="model-dropdown">
+          <span class="el-dropdown-link">
+            <img :src="selectedModel.logo" alt="Model Logo" class="model-logo">
+            {{ selectedModel.name }}
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <div class="dropdown-content">
+              <div class="model-list">
+                <div
+                  v-for="(model, index) in models"
+                  :key="index"
+                  class="model-item"
+                  @click="selectModel(model)"
+                >
+                  <img :src="model.logo" alt="Model Logo" class="model-logo">
+                  <div class="model-info">
+                    <div class="model-name">{{ model.name }}</div>
+                    <div class="model-version">{{ model.version }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="model-params">
+                <h4>模型参数</h4>
+                <el-slider v-model="temperature" :min="0" :max="2" :step="0.1"></el-slider>
+                <div class="param-value">{{ temperature }}</div>
+                <el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
+                <div class="param-value">{{ topP }}</div>
+              </div>
+            </div>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
+import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
+import { ElMessage } from "element-plus";
+// 任务输入和结果Prompt
+const taskInput = ref('');
+const resultPrompt = ref('');
+const socket = ref(null);
+
+// 模型列表
+const models = ref([
+  {
+    logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.-FZbTC72cXtUasfnISVDHgHaHa?rs=1&pid=ImgDetMain',
+    name: 'Deepseek-R1',
+    version: 'Deepseek-R1'
+  },
+]);
+const selectedModel = ref(models.value[0]);
+
+// 温度和Top P参数
+const temperature = ref(1);
+const topP = ref(0.7);
+
+// 会话ID
+const sessionID = ref(0);
+
+// Prompt模板
+const templates = ref([
+  {
+    title: '给我写一封电子邮件',
+    desc: '起草回复客户投诉的电子邮件并提供解决方案。'
+  },
+  {
+    title: '文档总结',
+    desc: '从提供的文档中提取总结要点，要点数量不超过10个。'
+  },
+]);
+
+// 生成Prompt方法
+const generatePrompt = () => {
+  // 这里添加实际调用API生成Prompt的逻辑
+  //resultPrompt.value = '模拟生成的Prompt';
+  resultPrompt.value = '';
+  sendMessage();
+};
+
+// 新增模板方法
+const addTemplate = () => {
+  // 这里添加新增模板的逻辑，例如弹出输入框让用户输入模板内容
+  console.log('添加模板功能待实现');
+};
+
+// 选择模型方法
+const selectModel = (model) => {
+  selectedModel.value = model;
+};
+
+//挂载时
+onMounted(() => {
+  // if (typeof window !== 'undefined') {
+  //   // 浏览器环境
+  //   md.use(markdownItMermaid);
+  // }
+  let url =
+    "wss://pm.ljsea.top/im/ai_chat_ws?" +
+    "token=" +
+    localStorage.getItem("token");
+  socket.value = new WebSocket(url);
+  socket.value.onopen = () => {
+    console.log("WebSocket 连接已建立");
+    ElMessage.success("连接成功");
+  };
+
+  socket.value.onmessage = (event) => {
+    let msg: WSMessage = JSON.parse(event.data);
+    receiveMessage(msg);
+  };
+
+  socket.value.onclose = () => {
+    console.log("WebSocket 连接已关闭");
+    ElMessage.error("连接已关闭");
+    //重新连接
+    socket.value = new WebSocket(url);
+  };
+
+  socket.value.onerror = (error) => {
+    console.error("WebSocket 发生错误:", error);
+  };
+});
+
+const receiveMessage = (msg:WSMessage) => {
+  resultPrompt.value += msg.msg.msg.response;
+};
+
+const sendMessage = () => {
+  if (taskInput.value.trim() === "") {
+    ElMessage.warning("消息不能为空");
+    return;
+  }
+  let msg = {
+    msg: taskInput.value,
+    type: "ollama",
+    function: "gen-prompt",
+    session_id: sessionID.value,
+  };
+  socket.value.send(JSON.stringify(msg));
+};
+
+
+onUnmounted(() => {
+  if (socket.value) {
+    socket.value.close();
+  }
+});
+</script>
+
+<style scoped>
+.app-wrapper {
+  padding: 20px;
+  background-color: #f4f4f4;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+}
+.logo img {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+.main-content {
+  display: flex;
+  height: 80%;
+}
+.task-section,
+.result-section {
+  width: 50%;
+  background-color: white;
+  padding: 20px;
+  margin-right: 20px;
+}
+.prompt-template {
+  margin-top: 20px;
+}
+.template-item {
+  border: 1px solid #e4e4e4;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.template-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.model-dropdown {
+  margin-top: 10px;
+}
+.model-logo {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.dropdown-content {
+  width: 300px;
+  padding: 10px;
+}
+.model-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.model-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  cursor: pointer;
+}
+.model-info {
+  margin-left: 10px;
+}
+.model-params {
+  margin-top: 10px;
+}
+.param-value {
+  margin-top: 5px;
+  text-align: right;
+}
+</style>

src/views/system/prompt-generate.vue

@@ -1,296 +0,0 @@
-<template>
-    <div @click="sessionIsShow = !sessionIsShow" style="cursor: pointer;">
-      <el-icon v-if="sessionIsShow" >
-                      <Expand />
-                  </el-icon>
-                  <el-icon v-else>
-                      <Fold />
-                  </el-icon>
-    </div>
-    <div class="chat-container">
-      <!-- 消息列表 -->
-      <el-card class="chat-messages" shadow="never" ref="messagesContainer">
-        <div
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="['message', message.role]"
-        >
-          <div class="message-avatar">
-            <span v-if="message.role === 'assistant'">💬</span>
-            <span v-else>👤</span>
-          </div>
-          <div class="message-content">
-            <div v-html="renderMarkdown(message.content)"></div>
-          </div>
-        </div>
-        <div v-if="loading" class="loading-indicator">Loading...</div>
-      </el-card>
-  
-      <!-- 输入区域 -->
-      <el-card class="chat-input" shadow="never">
-        <el-row :gutter="10">
-          <el-col :span="20">
-            <el-input
-              v-model="inputMessage"
-              type="textarea"
-              :rows="2"
-              placeholder="输入消息..."
-              @keyup.enter="sendMessage"
-            />
-          </el-col>
-          <el-col :span="4" style="text-align: center;" >
-            <el-button type="primary" @click="sendMessage" >发送</el-button>
-          </el-col>
-        </el-row>
-      </el-card>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
-  import { ElCard, ElInput, ElButton } from "element-plus";
-  import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
-  import { ElMessage } from "element-plus";
-  import { GetMessageService } from "@/api/im";
-  import MarkdownIt from "markdown-it";
-  import markdownItMermaid from "markdown-it-mermaid";
-  import hljs from "highlight.js";
-  import bash from "highlight.js/lib/languages/bash";
-  import javascript from "highlight.js/lib/languages/javascript";
-  import typescript from "highlight.js/lib/languages/typescript";
-  import java from "highlight.js/lib/languages/java";
-  import sql from "highlight.js/lib/languages/sql";
-  import nginx from "highlight.js/lib/languages/nginx";
-  import json from "highlight.js/lib/languages/json";
-  import yaml from "highlight.js/lib/languages/yaml";
-  import xml from "highlight.js/lib/languages/xml";
-  import shell from "highlight.js/lib/languages/shell";
-  import 'katex/dist/katex.min.css';
-  interface Message {
-    role: "user" | "assistant";
-    content: string;
-    finished?: boolean;
-  }
-  hljs.registerLanguage("bash", bash);
-  hljs.registerLanguage("javascript", javascript);
-  hljs.registerLanguage("typescript", typescript);
-  hljs.registerLanguage("java", java);
-  hljs.registerLanguage("sql", sql);
-  hljs.registerLanguage("nginx", nginx);
-  hljs.registerLanguage("json", json);
-  hljs.registerLanguage("yaml", yaml);
-  hljs.registerLanguage("xml", xml);
-  hljs.registerLanguage("shell", shell);
-  const md = new MarkdownIt({
-    html: true,
-    linkify: true,
-    breaks: true,
-    xhtmlOut: true,
-    typographer: true,
-    highlight: (str, lang) => {
-      if (lang && hljs.getLanguage(lang)) {
-        try {
-          return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
-        } catch (__) {}
-      }
-      return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
-    },
-  });
-  
-  
-  
-  const loading = ref(false);
-  const isUserScrolling = ref<boolean>(false);
-  const messages = reactive([]);
-  const inputMessage = ref("");
-  const socket = ref(null);
-  const currentAIMessage = ref("");
-  const sessionID = ref(0);
-  const messagesContainer = ref<HTMLDivElement | null>(null);
-  const sessionIsShow = ref(false);
-  
-  const renderMarkdown = (content: string) => {
-    return md.render(content);
-  };
-  
-  const scrollToBottom = () => {
-      let x=document.getElementsByClassName("chat-messages")[0]
-      x.scrollTop=x.scrollHeight  //将滚轮置底
-  };
-  
-  onMounted(() => {
-    // if (typeof window !== 'undefined') {
-    //   // 浏览器环境
-    //   md.use(markdownItMermaid);
-    // }
-    let url =
-      "wss://pm.ljsea.top/im/ai_chat_ws?" +
-      "token=" +
-      localStorage.getItem("token");
-    socket.value = new WebSocket(url);
-    socket.value.onopen = () => {
-      console.log("WebSocket 连接已建立");
-      ElMessage.success("连接成功");
-    };
-    getMessage(125);
-    messagesContainer.value = document.querySelector(".chat-messages");
-  
-    socket.value.onmessage = (event) => {
-      let msg: WSMessage = JSON.parse(event.data);
-      const existingMessage = messages.find(
-        (msg) => msg.role === "assistant" && !msg.finished
-      );
-      if (existingMessage) {
-        // 追加内容
-        existingMessage.content += msg.msg.msg.response;
-      } else {
-        // 新消息
-        messages.push({
-          role: "assistant",
-          content: msg.msg.msg.response,
-          finished: false,
-        });
-      }
-      console.log("resp:", msg);
-      sessionID.value = msg.session_id;
-      currentAIMessage.value += msg.msg.msg.response;
-      if (msg.msg.msg.done) {
-        const assistantMessage = messages[messages.length - 1];
-        assistantMessage.finished = true;
-        loading.value = false;
-      }
-      nextTick(() => {
-        scrollToBottom(); // 新增滚动调用
-      });
-    };
-  
-    socket.value.onclose = () => {
-      console.log("WebSocket 连接已关闭");
-      ElMessage.error("连接已关闭");
-    };
-  
-    socket.value.onerror = (error) => {
-      console.error("WebSocket 发生错误:", error);
-    };
-  });
-  
-  onUnmounted(() => {
-    if (socket.value) {
-      socket.value.close();
-    }
-  });
-  
-  const sendMessage = () => {
-    let msg = {
-      msg: inputMessage.value,
-      type: "ollama",
-      function: "gen-ai-chat",
-      session_id: sessionID.value,
-    };
-    if (inputMessage.value.trim() === "") return;
-    messages.push({ role: "user", content: inputMessage.value, finished: true });
-    socket.value.send(JSON.stringify(msg));
-    inputMessage.value = "";
-    scrollToBottom();
-    loading.value = true;
-    
-  };
-  
-  
-  const getMessage = async (session_id:number) => {
-    let result = {};
-    try {
-      let req = {
-        token: localStorage.getItem("token"),
-        session_id: session_id,
-      };
-      result = await GetMessageService(req);
-      if (result["code"] === 0) {
-        console.log(result["data"]);
-      }
-    } catch (e) {
-      console.log(e);
-    }
-    return {};
-  };
-  </script>
-  
-  <style scoped>
-  .chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  
-  .chat-messages {
-    flex: 1;
-    overflow-y: auto; /* 允许垂直滚动 */
-    padding: 10px;
-    margin-bottom: 20px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .messages-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto; /* 确保内部可以滚动 */
-    height: 100%;
-  }
-  
-  .message {
-    display: flex;
-    margin-bottom: 15px;
-  }
-  
-  .message.user {
-    justify-content: flex-end;
-  }
-  
-  .message-avatar {
-    width: 40px;
-    text-align: center;
-    line-height: 40px;
-    font-size: 20px;
-    margin-right: 10px;
-  }
-  
-  .message.assistant .message-avatar {
-    margin-right: 0;
-    margin-left: 10px;
-  }
-  
-  .message-content {
-    background-color: #f0f9eb;
-    border: 1px solid #e1f3d8;
-    border-radius: 4px;
-    padding: 10px 15px;
-    white-space: pre-wrap;
-    max-width: 70%;
-  }
-  
-  .message.assistant .message-content {
-    background-color: #f3f4f6;
-    border: 1px solid #dce4eb;
-    max-width: 70%;
-  }
-  
-  .loading-indicator {
-    text-align: center;
-    color: #999;
-    font-size: 16px;
-  }
-  
-  .chat-input {
-    width: 100%;
-  }
-  
-  .el-input {
-    width: 100%;
-  }
-  </style>
-  

yarn.lock

@@ -2153,6 +2153,13 @@ magic-string@^0.30.7:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+markdown-it-highlightjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz"
+  integrity sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==
+  dependencies:
+    highlight.js "^11.9.0"
+
 markdown-it-katex@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz"