Просмотр исходного кода

feat: 添加聊天助手功能,更新布局样式

weipengtao 6 месяцев назад
Родитель
Сommit
cd6f882dcf
1 измененных файлов с 50 добавлено и 0 удалено
  1. 50 0
      src/views/Project/Schedule.vue

+ 50 - 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">seecoder 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: 'https://dify.seec.seecoder.cn/chatbot/h8mBtz4IQMSuT3xm',
       loading: false,
       requirements: [],
       showRequirementDrawer: false,
@@ -346,4 +360,40 @@ export default {
 .el-table .cell{
   white-space: pre-line;
 }
+.schedule-layout {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - 120px);
+}
+.schedule-left {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+}
+.schedule-right {
+  width: 400px;
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+  height: 100%;
+}
+.chat-header {
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  border-bottom: 1px solid #e4e7ed;
+  background: #f8f9fa;
+  flex-shrink: 0;
+}
+.chat-iframe {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
 </style>