From 51e6e3e383aa364c8219d0fab692d67c032cd73a Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Thu, 13 Mar 2025 17:29:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=AD=E4=B9=89=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AE=9E=E5=BF=83=E6=8A=98=E5=8F=A0=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/theme.scss                  |  4 ++-
 src/components/Upload/index.vue               | 36 +++++++++++++++++--
 src/views/createapp/components/appConfig.vue  |  4 ++-
 .../components/codeMirror/mirrorTextArea.vue  |  4 +--
 .../components/workFlowConfig/useLayout.js    | 10 ++----
 .../createapp/components/workFlowDebug.vue    |  2 +-
 .../dialogue/components/AppInitalPreview.vue  |  8 +++++
 src/views/styles/createApp.scss               |  4 +++
 src/views/styles/workFlowArrange.scss         | 12 +++++--
 src/views/styles/workFlowDebug.scss           |  3 ++
 10 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 5314e56a..71318e03 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -19,6 +19,7 @@ body[theme='dark'] {
   --flow-nodeBox-shadow: 0 8px 16px 0 rgba(253, 254, 255, 0.1);
   // 工作流节点背景色
   --flow-bg-color: #343a43;
+  --o-bash-box-shadow:  0 4px 16px 0 rgba(255, 255, 255, 0.1);
   // 工作流开始节点结束背景渐变色
   --flow-startEnd-bg: linear-gradient(rgba(132, 149, 253, 0.3), rgba(104, 113, 129, 0.15), rgba(52, 58, 67, 0));
   --flow-system-bg: linear-gradient(rgba(113, 225, 229, 0.3), rgba(97, 119, 121, 0.15), rgba(52, 58, 67, 0));
@@ -62,7 +63,8 @@ body[theme='light'] {
   --flow-instance-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   --flow-nodeBox-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
   // 工作流节点背景色
-  --flow-bg-color: #fff;
+  --flow-bg-color: #fdfeff;
+  --o-bash-box-shadow:  0 4px 16px 0 rgba(42, 47, 55, 0.1);
   // 工作流开始节点结束背景渐变色
   --flow-startEnd-bg: linear-gradient(rgba(133, 148, 253, 0.3), rgba(210, 231, 252, 0.15), rgba(255, 255, 255, 0));
   --flow-system-bg: linear-gradient(rgba(156, 237, 203, 0.3), rgba(240, 253, 244, 0.15), rgba(255, 255, 255, 0));
diff --git a/src/components/Upload/index.vue b/src/components/Upload/index.vue
index 4efbfac7..4bff0ff3 100644
--- a/src/components/Upload/index.vue
+++ b/src/components/Upload/index.vue
@@ -217,6 +217,18 @@ watch(
     }
   },
 );
+
+const updateFunc = () => {
+  const foldDoms = document.querySelectorAll('span[title="Fold line"]');
+  foldDoms.forEach(dom => {
+    dom.innerText = '';
+  });
+
+  const unFoldDoms = document.querySelectorAll('span[title="Unfold line"]');
+  unFoldDoms.forEach(dom => {
+    dom.innerText = '';
+  });
+};
 onMounted(() => {
   if (themeStore.theme === 'dark') {
     extensions.value = [yaml(), oneDark];
@@ -281,6 +293,7 @@ onMounted(() => {
       :extensions="extensions"
       :disabled="!editable"
       @ready="handleReady"
+      @update="updateFunc"
       @change="handleChange"
     />
   </div>
@@ -326,7 +339,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .serviceName{
   display: block;
   font-size: 14px;
@@ -341,11 +354,30 @@ onMounted(() => {
 .v-codemirror {
   height: 100%;
   width: 100%;
-  .cm-editor {
+  ::v-deep(.cm-editor) {
     height: 100%;
     border: 1px solid var(--o-time-text);
     .cm-gutters {
       background-color: var(--o-bash-bg);
+      span[title='Fold line'] {
+        width: 0;
+        height: 0;
+        display: block;
+        border: 4px solid transparent;
+        border-top: 4px solid #8d98aa;
+        margin-top: 8px;
+        padding: 0;
+      }
+      span[title='Unfold line'] {
+        width: 0;
+        height: 0;
+        display: block;
+        border: 4px solid transparent;
+        border-left: 4px solid #8d98aa;
+        margin-top: 6px;
+        margin-left: 4px;
+        padding: 0;
+      }
     }
   }
   .cm-focused {
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index a9525453..fbec5911 100644
--- a/src/views/createapp/components/appConfig.vue
+++ b/src/views/createapp/components/appConfig.vue
@@ -8,8 +8,10 @@ import { api } from 'src/apis';
 import CustomLoading from '../../customLoading/index.vue';
 import AppInitalPreview from 'src/views/dialogue/components/AppInitalPreview.vue';
 import { ElMessage } from 'element-plus';
+import { useChangeThemeStore } from 'src/store';
 const activeName = ref([1, 2, 3]);
 const activeNames = ref([1, 2, 3]);
+const themeStore = useChangeThemeStore();
 const route = useRoute();
 const props = withDefaults(defineProps<{
   handleValidateContent: Function,
@@ -425,7 +427,7 @@ defineExpose({
   </el-form>
   <div class="createAppContainerMainBox">
     <div class="previewTitle">界面预览</div>
-    <div class="createAppContainerMainRight">
+    <div class="createAppContainerMainRight" :class="themeStore.theme">
       <AppInitalPreview :createAppForm="createAppForm" />
     </div>
   </div>
diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
index 08504db3..82e7eb7d 100644
--- a/src/views/createapp/components/codeMirror/mirrorTextArea.vue
+++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
@@ -50,11 +50,11 @@ const updateFunc = () => {
   });
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .v-codemirror {
   height: 100%;
   width: 100%;
-  .cm-editor {
+  ::v-deep(.cm-editor) {
     height: 100%;
     border: 1px solid var(--o-time-text);
     .cm-gutters {
diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js
index a5239dbc..5ae8340c 100644
--- a/src/views/createapp/components/workFlowConfig/useLayout.js
+++ b/src/views/createapp/components/workFlowConfig/useLayout.js
@@ -33,16 +33,13 @@ export function useLayout() {
     for (const node of nodes) {
       // 查找到节点的信息
       const graphNode = findNode(node.id);
+      // 获取到所有节点中最高的高度，之后可计算每个节点与最高高度差设置y，使得节点的中心点都在同一水平线上
       maxHeight = maxHeight > graphNode.dimensions.height ? maxHeight : graphNode.dimensions.height;
     }
 
     for (const node of nodes) {
       // 查找到节点的信息
       const graphNode = findNode(node.id);
-      const newNode = {
-        width: graphNode.dimensions.width + 100 || 150,
-        height: graphNode.dimensions.height + 100 || 50,
-      };
 
       // 设置节点
       dagreGraph.setNode(node.id, {
@@ -64,17 +61,16 @@ export function useLayout() {
       const nodeWithPosition = dagreGraph.node(node.id);
       let diff = maxHeight - nodeWithPosition.height;
       let position = { x: nodeWithPosition.x, y: nodeWithPosition.y + diff / 2 };
-      let newPosition = { x: nodeWithPosition.x, y: nodeWithPosition.y + diff / 2 };
       // 需要进行判断--是否为开始结束
       if (node.id === 'start' || node.id === 'end') {
-        newPosition = { x: nodeWithPosition.x + 112, y: nodeWithPosition.y + diff / 2 };
+        position = { x: nodeWithPosition.x + 112, y: nodeWithPosition.y + diff / 2 };
       }
 
       return {
         ...node,
         targetPosition: isHorizontal ? Position.Left : Position.Top,
         sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-        position: newPosition, // 这里修改即可
+        position: position, // 这里修改即可
       };
     });
   }
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
index 54dbc9bb..c7a72144 100644
--- a/src/views/createapp/components/workFlowDebug.vue
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -45,7 +45,7 @@
         <!-- 发送问题 -->
         <div class="sendIcon">
           <img v-if="isAnswerGenerating || dialogueInput.length <= 0" src="@/assets/images/send_disable.png" alt="" />
-          <div v-else @click="handleSendMessage(undefined, dialogueInput)">
+          <div v-else @click="handleSendMessage(undefined, dialogueInput)" class="ableSend">
             <img v-if="themeStore.theme === 'dark'" src="@/assets/images/dark_send.png" alt="" />
             <img v-else src="@/assets/images/light_send.png" alt="" />
           </div>
diff --git a/src/views/dialogue/components/AppInitalPreview.vue b/src/views/dialogue/components/AppInitalPreview.vue
index d2194870..33dd1ab0 100644
--- a/src/views/dialogue/components/AppInitalPreview.vue
+++ b/src/views/dialogue/components/AppInitalPreview.vue
@@ -17,11 +17,15 @@
       </div>
     </div>
   </div>
+  <footer class="copilot-footer">
+    <CommonFooter />
+  </footer>
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import InterPreview from 'src/views/dialogue/components/InterPreview.vue';
 import { useChangeThemeStore } from 'src/store';
+import CommonFooter from 'src/components/commonFooter/CommonFooter.vue';
 const themeStore = useChangeThemeStore();
 interface InterPreProps {
   createAppForm: any;
@@ -78,6 +82,10 @@ watch(
     border-radius: 2px;
   }
 
+  .dialogue-conversation-bottom-sendbox__upload {
+    cursor: default;
+  }
+
   &__textarea {
     height: 60%;
     position: relative;
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index 3d57a8ed..4c671aa7 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -123,6 +123,10 @@
       margin-bottom: 12px;
     }
   }
+  .createAppContainerMainRight.dark {
+    background: var(--o-bg-image) center center no-repeat;
+    background-size: cover;
+  }
 
   .createAppContainerMainLeft {
     width: 536px;
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 9954021b..c7e08e5c 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -118,19 +118,22 @@
       .el-collapse {
         .el-collapse-item__header {
           padding: 0 !important;
-          height: 28px;
+          height: 24px;
+          line-height: 24px;
           font-size: 14px;
           color: var(--o-text-color-primary);
           display: flex;
           gap: 8px;
           text-align: left;
           flex-wrap: nowrap;
+          margin-bottom: 8px;
           .el-icon {
             color: var(--o-text-color-tertiary);
           }
         }
         .el-collapse-item__content {
           margin-left: 0px;
+          margin-bottom: 0px;
         }
       }
     }
@@ -158,13 +161,17 @@
     .nodeIcon {
       width: 24px;
       height: 24px;
-      background: gray;
       border-radius: 4px;
     }
     .stancesName {
       flex: 1;
       text-align: left;
     }
+    &:hover {
+      background-color: var(--flow-bg-color);
+      box-shadow: var(--o-bash-box-shadow);
+      cursor: pointer;
+    }
   }
   .workFlowContainerRight {
     position: relative;
@@ -188,6 +195,7 @@
         width: 32px;
         height: 32px;
         background: var(--o-bg-color-base);
+        border-radius: 4px;
         cursor: pointer;
         img {
           width: 100%;
diff --git a/src/views/styles/workFlowDebug.scss b/src/views/styles/workFlowDebug.scss
index 57c8079c..81ffd900 100644
--- a/src/views/styles/workFlowDebug.scss
+++ b/src/views/styles/workFlowDebug.scss
@@ -72,6 +72,9 @@
       .sendIcon {
         width: 48px;
         height: 32px;
+        .ableSend {
+          cursor: pointer;
+        }
         img {
           width: 32px;
         }
-- 
Gitee