From f96b96e11fb8eb5491689e355e7360b7a20dede2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Tue, 29 Jul 2025 17:46:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(agent):=20=E4=BC=98=E5=8C=96=E5=AE=A2?=
 =?UTF-8?q?=E6=9C=8D=E5=92=8C=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示
---
 .../work-flow/components/DynamicForm.vue      |   7 +-
 src/views/agent/work-flow/index.vue           | 123 +++---
 src/views/agent/work-flow/style.scss          | 364 +++++++++++++++---
 3 files changed, 384 insertions(+), 110 deletions(-)

diff --git a/src/views/agent/work-flow/components/DynamicForm.vue b/src/views/agent/work-flow/components/DynamicForm.vue
index b7ccc21..fd7cd1e 100644
--- a/src/views/agent/work-flow/components/DynamicForm.vue
+++ b/src/views/agent/work-flow/components/DynamicForm.vue
@@ -76,18 +76,13 @@ const handleSubmit = async () => {
 
 <style scoped lang="scss">
 .form-container {
-  padding: 24px;
-  border: 1px solid #d7d7d9; /* 添加灰色边框 */
-  background: var(--BG-White, white);
-  min-height: 70vh;
-
   :deep(.arco-input-wrapper),
   :deep(.arco-textarea-wrapper) {
     border-radius: 4px;
     border-color: #d7d7d9;
     background-color: #fff;
     height: 35px;
-    width: 400px;
+    width: 300px;
 
     &:focus-within,
     &.arco-input-focus {
diff --git a/src/views/agent/work-flow/index.vue b/src/views/agent/work-flow/index.vue
index 4d8b37f..3944573 100644
--- a/src/views/agent/work-flow/index.vue
+++ b/src/views/agent/work-flow/index.vue
@@ -1,53 +1,79 @@
 <template>
-  <div class="chat-wrap">
-    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
-
-    <div class="chat-contain">
-      <a-row class="grid-layout">
-        <!-- 左侧历史聊天 -->
-        <a-col
-          :xs="isCollapsed ? 0 : 3"
-          :sm="isCollapsed ? 0 : 3"
-          :md="isCollapsed ? 0 : 4"
-          :lg="isCollapsed ? 0 : 6"
-          :xl="isCollapsed ? 0 : 8"
-          :xxl="isCollapsed ? 0 : 5"
-        >
-          <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
-        </a-col>
-        <div class="toggle-btn" @click="toggleCollapse">
-          <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
-            <img class="status-icon" :src="isCollapsed ?  menuUnfold  : menuFold" />
-          </a-tooltip>
+  <div>
+    <span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+    <div class="workflow-container">
+      <div class="left-wap" v-if="isCollapsed == false">
+        <div class="header">
+          <div class="image-body">
+            <img :src="cozeInfo.image_url" />
+          </div>
         </div>
-        <!-- 动态表单 -->
-        <a-col
-          :xs="isCollapsed ? 3 : 3"
-          :sm="isCollapsed ? 3 : 3"
-          :md="isCollapsed ? 4 : 4"
-          :lg="isCollapsed ? 6 : 6"
-          :xl="isCollapsed ? 6 : 6"
-          :xxl="isCollapsed ? 5 : 5"
-          class="dynamic-form"
-        >
-          <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
-        </a-col>
-
-        <!-- 主内容区域 -->
-        <a-col
-          class="right-box content-container"
-          :xs="isCollapsed ? 4 : 2"
-          :sm="isCollapsed ? 4 : 4"
-          :md="isCollapsed ? 6 : 6"
-          :lg="isCollapsed ? 8 : 8"
-          :xl="isCollapsed ? 10 : 9"
-          :xxl="isCollapsed ? 12 : 12"
-        >
-          <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
-          <div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
-          <NoData v-if="loading == false && workFlowRes?.output == ''" />
-        </a-col>
-      </a-row>
+        <div class="content">
+          <div class="title-body">
+            <div class="text">{{ cozeInfo.name }}</div>
+            <div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
+              <div class="">
+                <img class="status-icon" :src="workflow" />
+              </div>
+              <div class="text">工作流</div>
+            </div>
+          </div>
+          <div class="use-body">
+            <div class="num">{{ cozeInfo.views }}</div>
+            <div class="text">次使用</div>
+          </div>
+        </div>
+        <div class="description">
+          <div class="text">
+            {{ cozeInfo.description }}
+          </div>
+        </div>
+        <div class="out-line">
+          <div class="out-line-div"></div>
+        </div>
+        <div class="history">
+          <div class="section">
+            <div class="text">历史对话</div>
+          </div>
+          <div class="history-item">
+            <div class="item-body">
+              <div class="text">博主的粉丝数量与增长趋势</div>
+            </div>
+            <div class="item-body">
+              <div class="text">博主的粉丝数量与增长趋势</div>
+            </div>
+            <div class="item-body">
+              <div class="text">博主的粉丝数量与增长趋势</div>
+            </div>
+            <div class="item-body">
+              <div class="text">博主的粉丝数量与增长趋势</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-wap">
+        <div class="header">
+          <div class="body">
+            <div class="">
+              <div class="toggle-btn" @click="toggleCollapse">
+                <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
+                  <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
+                </a-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="form">
+            <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
+          </div>
+          <div class="res">
+            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
+            <div v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
+            <NoData v-if="workFlowRes.output == '' && loading === false" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -62,6 +88,7 @@ import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import menuFold from '@/assets/svg/menu-fold.svg';
 import menuUnfold from '@/assets/svg/menu-unfold.svg';
+import workflow from '@/assets/svg/workflow.svg';
 
 const formFields = ref({});
 // 是否折叠状态
diff --git a/src/views/agent/work-flow/style.scss b/src/views/agent/work-flow/style.scss
index 708c41c..c2ce67b 100644
--- a/src/views/agent/work-flow/style.scss
+++ b/src/views/agent/work-flow/style.scss
@@ -1,62 +1,314 @@
-.chat-wrap {
-  .chat-contain {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: #2c3e50;
-    margin-top: 24px;
+.back-wap {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 20px;
+  padding-left: 24px;
+  padding-right: 24px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+}
 
-    .span-back {
-      color: var(--Text-2, #3C4043);
-      font-size: 14px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 400;
-      line-height: 62px;
-      word-wrap: break-word
+.workflow-container {
+  width: 100%;
+  height: 100%;
+  padding-left: 24px;
+  padding-right: 24px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 24px;
+  display: inline-flex;
+
+  .left-wap {
+    width: 360px;
+    align-self: stretch;
+    background: var(--BG-100, #F7F8FA);
+    overflow: hidden;
+    border-radius: 8px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: inline-flex;
+
+    .header {
+      align-self: stretch;
+      height: 160px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      display: flex;
+
+      .image-body {
+        align-self: stretch;
+        flex: 1 1 0;
+        position: relative;
+        background: #FFEDED;
+        overflow: hidden;
+        border-radius: 8px;
+
+        img {
+          width: 408.90px;
+          height: 218px;
+          left: -24.45px;
+          top: -29px;
+          position: absolute
+        }
+      }
+    }
+
+    .content {
+      align-self: stretch;
+      padding-top: 15px;
+      padding-bottom: 15px;
+      justify-content: space-between;
+      align-items: flex-start;
+      display: inline-flex;
+
+      .title-body {
+        justify-content: flex-start;
+        align-items: center;
+        gap: 4px;
+        display: flex;
+
+        .text {
+          justify-content: center;
+          display: flex;
+          flex-direction: column;
+          color: var(--Text-1, #211F24);
+          font-size: 18px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          line-height: 26px;
+          word-wrap: break-word;
+        }
+
+        .tag-body {
+          height: 20px;
+          padding-left: 8px;
+          padding-right: 8px;
+          background: var(--Functional-Red-1, #FFE9E7);
+          overflow: hidden;
+          border-radius: 2px;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 4px;
+          display: flex;
+
+          .text {
+            color: var(--Functional-Red-6, #F64B31);
+            font-size: 12px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: 400;
+            line-height: 20px;
+            word-wrap: break-word
+          }
+        }
+
+      }
+
+      .use-body {
+        width: 79px;
+        height: 24px;
+        position: relative;
+
+        .num {
+          left: 20px;
+          top: 0px;
+          position: absolute;
+          color: var(--Text-2, #3C4043);
+          font-size: 16px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          line-height: 24px;
+          word-wrap: break-word
+        }
+
+        .text {
+          left: 43px;
+          top: 3px;
+          position: absolute;
+          color: var(--Text-3, #737478);
+          font-size: 12px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          line-height: 20px;
+          word-wrap: break-word;
+        }
+      }
+    }
+
+    .description {
+      align-self: stretch;
+      overflow: hidden;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+      display: flex;
+
+      .text {
+        align-self: stretch;
+        color: var(--Text-2, #3C4043);
+        font-size: 14px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        line-height: 22px;
+        word-wrap: break-word;
+      }
+    }
+
+    .out-line {
+      align-self: stretch;
+      height: 40px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 10px;
+      display: flex;
+
+      .out-line-div {
+        align-self: stretch;
+        height: 0px;
+        outline: 1px var(--Border-2, #E6E6E8) solid;
+        outline-offset: -0.50px;
+      }
+    }
+
+    .history {
+      align-self: stretch;
+      flex: 1 1 0;
+      position: relative;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      display: flex;
+
+      .section {
+        align-self: stretch;
+        height: 40px;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 10px;
+        display: inline-flex;
+
+        .text {
+          color: var(--Text-3, #737478);
+          font-size: 14px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          line-height: 22px;
+          word-wrap: break-word
+        }
+      }
+
+      .history-item {
+        align-self: stretch;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        display: flex;
+
+        .item-body {
+          align-self: stretch;
+          height: 40px;
+          padding: 8px;
+          border-radius: 8px;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 10px;
+          display: inline-flex;
+
+          .text {
+            flex: 1 1 0;
+            color: var(--Text-1, #211F24);
+            font-size: 14px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: 400;
+            line-height: 22px;
+            word-wrap: break-word;
+          }
+        }
+      }
     }
   }
 
-  .span-back {
-    color: var(--Text-2, #3C4043);
-    font-size: 14px;
-    font-family: Alibaba PuHuiTi;
-    line-height: 22px;
-    word-wrap: break-word
+  .right-wap {
+    flex: 1 1 0;
+    align-self: stretch;
+    background: var(--BG-White, white);
+    overflow: hidden;
+    border-radius: 8px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: inline-flex;
+
+    .header {
+      align-self: stretch;
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 28px;
+      padding-bottom: 28px;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+      display: inline-flex;
+
+      .body {
+        width: 20px;
+        height: 20px;
+        position: relative;
+        overflow: hidden;
+
+        .fold {
+          width: 15px;
+          height: 12.50px;
+          left: 17.50px;
+          top: 16.25px;
+          position: absolute;
+          transform: rotate(-180deg);
+          transform-origin: top left;
+          background: var(--Text-3, #737478)
+        }
+      }
+
+    }
+
+    .content {
+      align-self: stretch;
+      border-top: 1px var(--Border-1, #D7D7D9) solid;
+      justify-content: space-between;
+      align-items: flex-start;
+      display: inline-flex;
+
+      .form {
+        width: 400px;
+        height: 796px;
+        padding: 20px;
+        position: relative;
+        border-right: 1px var(--Border-1, #D7D7D9) solid;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 32px;
+        display: inline-flex;
+      }
+
+      .res {
+        flex: 1 1 0;
+        align-self: stretch;
+        padding-left: 32px;
+        padding-right: 32px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 32px;
+        display: inline-flex
+      }
+    }
   }
-
-  .content-container {
-    width: 40%;
-    background-color: #fff;
-    min-height: 70vh; // 初始高度
-    overflow: auto;    // 允许滚动
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
-
-  .work-res-span {
-    padding: 24px;
-    line-height: 34px;
-  }
-
-  .layout-sider {
-    border-radius: 6px;
-    margin-left: 20px;
-  }
-
-
-  .spin-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-  }
-
-  .work-res {
-    line-height: 26px;
-    font-size: 15px;
-    padding: 20px;
-
-  }
-
-
 }