perf: 样式调整

src/layouts/Basic.vue

@@ -61,7 +61,7 @@ provide('toggleDrawerMenu', () => {
 </script>
 
 <template>
-  <a-layout :class="['layout', { mobile: appStore.hideMenu }]">
+  <a-layout :class="['layout', { mobile: appStore.hideMenu }]" class="h-100vh flex flex-col w-full">
     <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
     <div v-if="navbar" class="layout-navbar">
       <base-navbar />
@@ -98,7 +98,7 @@ provide('toggleDrawerMenu', () => {
         <a-layout class="layout-content" :style="paddingStyle">
           <base-tab-bar v-if="appStore.tabBar" />
           <a-layout-content class="px-5 py-5">
-            <base-breadcrumb />
+            <!-- <base-breadcrumb /> -->
             <layout-page />
           </a-layout-content>
         </a-layout>
@@ -111,15 +111,11 @@ provide('toggleDrawerMenu', () => {
 $nav-size-height: 72px;
 $layout-max-width: 1100px;
 
-.layout {
-  width: 100%;
-  height: 100%;
-}
 .layout-navbar {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 100;
+  z-index: 9999;
   width: 100%;
   height: $nav-size-height;
 }
@@ -168,7 +164,7 @@ $layout-max-width: 1100px;
 }
 .layout-content {
   min-width: 1366px;
-  min-height: 100vh;
+  height: 100%;
   overflow-y: hidden;
   background-color: $color-background;
   transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

src/views/agent/chat/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="px-4px">
+  <div class="px-4px h-full overflow-hidden">
-    <div class="back-wap cursor-pointer mb-20px" @click="goChatIndex"> 
+    <div class="back-wap cursor-pointer mb-17px mt--3px !w-fit" @click="goChatIndex">
       <icon-left size="16" class="color-#737478 mr-4px" />
       <span class="cs">返回空间</span>
     </div>
     <div class="workflow-container">
       <div class="left-wap mr-24px" v-if="isCollapsed == false">
         <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
-          <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class= "w-full h-full object-contain" />
+          <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
         </div>
         <div class="content mb-15px">
           <div class="title-body">
@@ -29,7 +29,6 @@
             {{ cozeInfo?.description }}
           </div>
         </div>
-
       </div>
       <div class="right-wap">
         <div class="header">
@@ -55,7 +54,7 @@ import { getChatAgent } from '@/api/all/agent';
 import { useRouter } from 'vue-router';
 import menuFold from '@/assets/svg/menu-fold.svg';
 import menuUnfold from '@/assets/svg/menu-unfold.svg';
-import { formatNumberShow } from "@/utils/tools"
+import { formatNumberShow } from '@/utils/tools';
 
 const router = useRouter();
 
@@ -142,6 +141,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
         height: '100%',
         title: name,
         isNeedFunctionCallMessage: true,
+        isNeedAudio: false,
         feedback: {
           isNeedFeedback: true,
           feedbackPanel: {
@@ -168,7 +168,8 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
         expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
       },
       header: {
-        isShow: true,
+        isShow: false,
+        isNeedClose: false,
       },
       conversations: {
         isNeed: true,
@@ -179,7 +180,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
     auth: auth,
     userInfo: userInfo,
     header: {
-      isShow: true,
+      isShow: false,
       isNeedClose: false,
     },
   };

src/views/agent/chat/style.scss

@@ -67,7 +67,7 @@
       .title-body {
         justify-content: flex-start;
         align-items: center;
-        gap: 4px;
+        // gap: 4px;
         display: flex;
 
         .text {

src/views/agent/index/index.vue

@@ -6,29 +6,29 @@
       placeholder="搜索智能体"
       size="large"
       allow-clear
-      class="absolute right-0 top-0  !w-400px"
+      class="absolute right-0 top--10px  !w-400px"
     >
       <template #prefix>
         <icon-search @click="getData()" />
       </template>
     </a-input>
     <div   v-for="(item, index) in list" :key="index">
-      <p class="span-title ">{{ item.name }}</p>
+      <p class="span-title w-fit mb-16px">{{ item.name }}</p>
-      <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
+      <a-row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
         <a-col  :xs="24"
                 :sm="12"
                 :md="8"
                 :lg="5"
                 :xl="6"
                 :xxl="4"
-                v-for="(product, k) in item.agent_products">
+                v-for="(product, k) in item.agent_products" :key="k">
-          <div class="card-container cursor-pointer !h-252px mt-25px" @click="goDetail(product?.type, product?.id)">
+          <div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
             <div class="card-image h-120px w-100%  bg-cover bg-center bg-#E6E6E8 mb-8px" v-image-main-color="product.image_url">
               <img class="object-contain h-full w-100% " :src="product?.image_url"/>
             </div>
 
             <div class="card-content w-full">
-              <TextoverTips :context="product.name" class="card-title mb-4px"/>
+              <TextoverTips :context="product.name" class="card-title mb-4px !text-16px"/>
               <TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
             </div>
 

src/views/agent/index/style.scss

@@ -52,7 +52,7 @@
   }
 
 
-  .card-title {
+  :deep(.card-title) {
     color: var(--Text-1, #211f24);
     font-size: 16px;
     font-family: $font-family-medium;
@@ -61,7 +61,7 @@
     word-wrap: break-word;
   }
 
-  .card-description {
+  :deep(.card-description) {
     color: var(--Text-3, #737478);
     font-size: 14px;
     font-family: $font-family-regular;
@@ -93,7 +93,7 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      gap: 4px;
+      // gap: 4px;
 
 
       .status-text {

src/views/agent/work-flow/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="h-full overflow-hidden flex flex-col">
     <div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
       <icon-left size="16" class="color-#737478 mr-4px" />
       <span class="cs">返回空间</span>
     </div>
-    <div class="workflow-container">
+    <div class="workflow-container flex-1">
       <div class="left-wap mr-24px" v-if="isCollapsed == false">
         <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" v-image-main-color="cozeInfo.image_url">
           <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
@@ -84,11 +84,11 @@
             </div>
           </div>
         </div>
-        <div class="content">
+        <div class="content flex-1">
-          <div class="form">
+          <div class="form !h-full">
             <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
           </div>
-          <div class="res">
+          <div class="res h-full">
             <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
             <div class="markdown-container" v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
             <NoData v-if="workFlowRes.output == '' && loading === false" />

src/views/agent/work-flow/style.scss

@@ -16,7 +16,7 @@
 
 .workflow-container {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   justify-content: flex-start;
   align-items: center;
   display: inline-flex;