From 3bf8d7fbc5747da7ef5355d5edc2b5b1538375a1 Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Mon, 16 Jun 2025 11:12:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=99=BA=E8=83=BD=E4=BD=93=E6=A3=80?=
 =?UTF-8?q?=E8=A7=86=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/bubble/index.vue               |  5 +++--
 src/views/api/components/PluginCard.vue       |  1 +
 src/views/app/index.vue                       |  7 +++++++
 src/views/app/style.scss                      |  1 -
 .../createapp/components/AgentAppConfig.vue   | 19 ++++++++++++++-----
 src/views/createapp/components/DebugApp.vue   | 10 +++++++---
 src/views/createapp/components/McpDrawer.vue  | 18 ++++++++++++++++--
 .../dialogue/components/InterPreview.vue      |  1 -
 8 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/bubble/index.vue b/src/components/bubble/index.vue
index 9057e652..fc868c65 100644
--- a/src/components/bubble/index.vue
+++ b/src/components/bubble/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, VNode, h } from 'vue';
+import { VNode } from 'vue';
 import type { CSSProperties } from 'vue';
 
 type Style = Record<'avatar' | 'content', CSSProperties>;
@@ -15,7 +15,7 @@ interface BubbleProps {
   contentRender?: (content: string) => VNode;
 }
 
-const props = withDefaults(defineProps<BubbleProps>(), {
+withDefaults(defineProps<BubbleProps>(), {
   loading: false,
   placement: 'start',
   shape: 'corner',
@@ -72,6 +72,7 @@ const props = withDefaults(defineProps<BubbleProps>(), {
     justify-content: center;
     align-items: center;
     font-size: 12px;
+    line-height: 20px;
 
     span {
       padding: 0 8px;
diff --git a/src/views/api/components/PluginCard.vue b/src/views/api/components/PluginCard.vue
index eb16dbf9..b5d52a60 100644
--- a/src/views/api/components/PluginCard.vue
+++ b/src/views/api/components/PluginCard.vue
@@ -66,6 +66,7 @@ const props = defineProps<CardInfo>();
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 80%;
+        font-weight: 700;
       }
     }
   }
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
index eb9647c3..918dd679 100644
--- a/src/views/app/index.vue
+++ b/src/views/app/index.vue
@@ -403,5 +403,12 @@ img {
   --o-tabs-item-padding: 5px 16px 0 5px;
   --o-tabs-line-height: 32px;
   --o-tabs-color_active: rgb(99, 149, 253);
+  .el-tabs__header {
+    .el-tabs__nav-wrap {
+      .el-tabs__item {
+        height: 32px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/app/style.scss b/src/views/app/style.scss
index 2e26280c..9435ec9e 100644
--- a/src/views/app/style.scss
+++ b/src/views/app/style.scss
@@ -62,7 +62,6 @@
       }
     }
     .appCenterCardContainer {
-      padding-top: 4px;
       width: 1340px;
       .appCenterCardBox {
         padding-top: 16px;
diff --git a/src/views/createapp/components/AgentAppConfig.vue b/src/views/createapp/components/AgentAppConfig.vue
index 21b2087f..743158e7 100644
--- a/src/views/createapp/components/AgentAppConfig.vue
+++ b/src/views/createapp/components/AgentAppConfig.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CaretRight, CirclePlus } from '@element-plus/icons-vue';
+import { CaretRight, CirclePlus, CaretBottom } from '@element-plus/icons-vue';
 import AppInitalPreview from '@/views/dialogue/components/AppInitalPreview.vue';
 import { ref, reactive, onMounted, watch, computed } from 'vue';
 import { ElMessage, FormRules, UploadProps } from 'element-plus';
@@ -299,6 +299,7 @@ onMounted(async () => {
               <el-select
                 v-model="createAppForm.model"
                 style="width: 100%"
+                :suffix-icon="CaretBottom"
                 :placeholder="t('app.modelSelected_input')"
               >
                 <el-option
@@ -379,7 +380,7 @@ onMounted(async () => {
             </el-form-item>
           </el-collapse-item>
 
-          <el-collapse-item name="ability">
+          <el-collapse-item class="ability-and-permissions" name="ability">
             <template #title>
               <span class="collapse-title">
                 {{ t('app.ability_Configuration') }}
@@ -431,7 +432,7 @@ onMounted(async () => {
             </el-form-item>
           </el-collapse-item>
 
-          <el-collapse-item name="permissions">
+          <el-collapse-item class="ability-and-permissions" name="permissions">
             <template #title>
               <span class="collapse-title">
                 {{ t('app.permissionConfiguration') }}
@@ -517,8 +518,7 @@ onMounted(async () => {
       align-items: center;
       font-weight: 700;
       color: var(--o-text-color-primary);
-      margin-bottom: 10px;
-      padding-left: 6px;
+      margin: 0 0 8px 8px;
       cursor: pointer;
       font-size: 16px;
     }
@@ -546,6 +546,9 @@ onMounted(async () => {
           top: 25%;
         }
       }
+      :deep(.el-collapse-item__header) {
+        margin-bottom: 8px;
+      }
 
       .hide-header {
         :deep(.el-collapse-item__header) {
@@ -553,6 +556,12 @@ onMounted(async () => {
         }
       }
 
+      .ability-and-permissions {
+        :deep(.el-collapse-item__header) {
+          margin-bottom: 16px;
+        }
+      }
+
       .collapse-title {
         margin-left: 6px;
         color: var(--o-text-color-primary);
diff --git a/src/views/createapp/components/DebugApp.vue b/src/views/createapp/components/DebugApp.vue
index ed95d991..393e614b 100644
--- a/src/views/createapp/components/DebugApp.vue
+++ b/src/views/createapp/components/DebugApp.vue
@@ -387,11 +387,11 @@ watch(
               }"
             >
               <template #content>
-                <span class="custom-content">
+                <div class="custom-content">
                   你好，我是
-                  <span class="gradient-text">{{ config.name }}</span>
+                  <div class="gradient-text">{{ config.name }}</div>
                   ，很高兴为您服务
-                </span>
+                </div>
               </template>
               <template #footer>
                 <div class="description">{{ config.description }}</div>
@@ -620,7 +620,9 @@ watch(
 
         .custom-content {
           font-size: 24px;
+          line-height: 32px;
           font-weight: 700;
+          display: flex;
 
           .gradient-text {
             background: linear-gradient(
@@ -635,7 +637,9 @@ watch(
         }
 
         .description {
+          font-size: 16px;
           border-top: 1px solid var(--o-border-color-light);
+          color: rgb(78, 88, 101);
           display: flex;
           justify-content: space-between;
           align-items: center;
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index 00488679..956cac38 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -109,11 +109,12 @@ onMounted(() => {
       <div class="wrapper">
         <div class="search">
           <el-input
+            class="search-input"
             v-model="searchKeyword"
-            type="search"
             :placeholder="t('common.search')"
-            :suffix-icon="Search"
             @change="queryMcpList"
+            :suffix-icon="Search"
+            clearable
           ></el-input>
         </div>
 
@@ -174,6 +175,19 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
 
+    .search {
+      .search-input {
+        :deep(.el-input__suffix-inner) {
+          display: flex;
+          flex-direction: row-reverse;
+          .el-icon:not(:last-child) {
+            border-left: 1px solid var(--el-border-color);
+            padding-left: 8px;
+          }
+        }
+      }
+    }
+
     .mcp-list {
       flex: 1;
       overflow: scroll;
diff --git a/src/views/dialogue/components/InterPreview.vue b/src/views/dialogue/components/InterPreview.vue
index 12361dce..36dcc467 100644
--- a/src/views/dialogue/components/InterPreview.vue
+++ b/src/views/dialogue/components/InterPreview.vue
@@ -264,7 +264,6 @@ watch(
           font-size: 16px;
           line-height: 24px;
           margin-top: 8px;
-          margin-bottom: 20px;
           color: var(--o-text-color-secondary);
         }
         .preMainContentLink {
-- 
Gitee