Browse Source

feat: 在项目规划页右侧嵌入 Dify AI 需求助手聊天框

weipengtao 6 months ago
parent
commit
b6ae667d5c
2 changed files with 48 additions and 30 deletions
  1. 0 30
      src/App.vue
  2. 48 0
      src/views/Project/Schedule.vue

+ 0 - 30
src/App.vue

@@ -42,36 +42,6 @@ export default defineComponent({
       window.onbeforeunload = () => {
         localStorage.setItem('workspace', JSON.stringify(store.state.workspace));
       };
-
-      // Dify chatbot 配置与加载
-      (window as any).difyChatbotConfig = {
-        token: 'h8mBtz4IQMSuT3xm',
-        baseUrl: 'http://dify.seec.seecoder.cn',
-        systemVariables: {},
-        userVariables: {},
-      };
-      if (!document.getElementById('h8mBtz4IQMSuT3xm')) {
-        const script = document.createElement('script');
-        script.src = 'http://dify.seec.seecoder.cn/embed.min.js';
-        script.id = 'h8mBtz4IQMSuT3xm';
-        document.body.appendChild(script);
-      }
-
-      // Dify chatbot 样式
-      if (!document.getElementById('dify-chatbot-style')) {
-        const style = document.createElement('style');
-        style.id = 'dify-chatbot-style';
-        style.textContent = `
-          #dify-chatbot-bubble-button {
-            background-color: #1C64F2 !important;
-          }
-          #dify-chatbot-bubble-window {
-            width: 24rem !important;
-            height: 40rem !important;
-          }
-        `;
-        document.head.appendChild(style);
-      }
     });
   },
 });

+ 48 - 0
src/views/Project/Schedule.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="schedule-layout">
+  <div class="schedule-left">
   <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
     <h4>项目概览</h4>
   </el-row>
@@ -91,6 +93,17 @@
     </el-row>
     <img src="@/assets/example.png" style="height: 400px; width: 100%">
   </ElDrawer>
+  </div>
+  <div class="schedule-right">
+    <div class="chat-header">AI 需求助手</div>
+    <iframe
+      class="chat-iframe"
+      :src="chatUrl"
+      frameborder="0"
+      allow="microphone"
+    ></iframe>
+  </div>
+  </div>
 </template>
 
 <script>
@@ -112,6 +125,7 @@ export default {
   },
   data() {
     return {
+      chatUrl: 'http://dify.seec.seecoder.cn/chatbot/h8mBtz4IQMSuT3xm',
       loading: false,
       requirements: [],
       showRequirementDrawer: false,
@@ -346,4 +360,38 @@ export default {
 .el-table .cell{
   white-space: pre-line;
 }
+.schedule-layout {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+}
+.schedule-left {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+}
+.schedule-right {
+  width: 380px;
+  min-width: 380px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+}
+.chat-header {
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  border-bottom: 1px solid #e4e7ed;
+  background: #f8f9fa;
+}
+.chat-iframe {
+  flex: 1;
+  width: 100%;
+  min-height: 600px;
+  border: none;
+}
 </style>