From dafb539993d8bd58eca9f844a128d39dadfb9b12 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Fri, 8 May 2026 04:31:29 -0700
Subject: [PATCH] style: update MCP server picker styles and variables for
 improved UI consistency

---
 .../components/PluginCard.vue                 | 77 +++++++++++--------
 .../src/mcp-server-picker/index.vue           | 58 ++++++++++----
 packages/components/src/styles/variables.css  | 32 ++++++--
 3 files changed, 112 insertions(+), 55 deletions(-)

diff --git a/packages/components/src/mcp-server-picker/components/PluginCard.vue b/packages/components/src/mcp-server-picker/components/PluginCard.vue
index a3d8dc7e3..be045ae49 100644
--- a/packages/components/src/mcp-server-picker/components/PluginCard.vue
+++ b/packages/components/src/mcp-server-picker/components/PluginCard.vue
@@ -113,8 +113,8 @@ const getHoverTitle = (isEnabled: boolean) => {
               >
                 <template #reference>
                   <slot name="delete-icon">
-                    <span title="移除插件">
-                      <IconDelete class="common-icon delete" />
+                    <span class="plugin-card__delete-trigger" title="移除插件">
+                      <IconDelete class="common-icon" />
                     </span>
                   </slot>
                 </template>
@@ -183,32 +183,44 @@ const getHoverTitle = (isEnabled: boolean) => {
 
 <style lang="less" scoped>
 .plugin-card {
+  --plugin-card-padding-inline: 24px;
+  --plugin-card-padding-block: 14px;
+  --plugin-card-icon-size: 40px;
+  --plugin-card-row-gap: 16px;
+  --plugin-card-divider-inset-start: calc(
+    var(--plugin-card-padding-inline) + var(--plugin-card-icon-size) + var(--plugin-card-row-gap)
+  );
+  --plugin-card-divider-inset-end: var(--plugin-card-padding-inline);
+
   position: relative;
-  background: var(--tr-mcp-server-picker-bg-default-2);
+  background: var(--tr-mcp-server-picker-card-bg-color);
   border-radius: 12px;
-  border: 1px solid var(--tr-mcp-server-picker-plugin-card-border-color);
+
+  &--installed:hover,
+  &--installed:focus-within {
+    .plugin-card__delete-trigger {
+      visibility: visible;
+    }
+  }
 
   &__main {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--plugin-card-row-gap);
     box-sizing: border-box;
     border-radius: 16px;
-    padding: 14px 24px;
-    background: transparent;
+    padding: var(--plugin-card-padding-block) var(--plugin-card-padding-inline);
     transition: border-radius 0.3s ease;
   }
 
   &__icon {
-    width: 40px;
-    height: 40px;
+    width: var(--plugin-card-icon-size);
+    height: var(--plugin-card-icon-size);
     border-radius: 8px;
     object-fit: cover;
-    background: var(--tr-mcp-server-picker-bg-default-2);
     flex-shrink: 0;
 
     &--placeholder {
-      background: transparent;
       border: none;
       opacity: 0;
     }
@@ -297,6 +309,13 @@ const getHoverTitle = (isEnabled: boolean) => {
     }
   }
 
+  &__delete-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+  }
+
   &__add {
     display: flex;
     justify-content: flex-end;
@@ -305,22 +324,24 @@ const getHoverTitle = (isEnabled: boolean) => {
     padding: 16px 0;
 
     &-button {
-      width: 64px;
-      height: 24px;
-      padding: 3px 16px;
-      text-align: center;
-      line-height: 18px;
+      min-width: 64px;
+      height: 28px;
+      padding: 0 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       font-size: 12px;
       font-weight: 400;
+      line-height: 18px;
+      text-align: center;
       color: var(--tr-text-primary);
       border-radius: 999px;
-      background: var(--tr-mcp-server-picker-bg-default-2);
-      border: 1px solid var(--tr-text-secondary);
+      white-space: nowrap;
+      border: 1px solid var(--tr-mcp-server-picker-market-button-border-color);
       cursor: pointer;
       box-sizing: border-box;
 
       &--loading {
-        width: 78px;
         background: var(--tr-color-primary-light);
         border-color: var(--tr-color-primary);
         color: var(--tr-color-primary);
@@ -328,10 +349,9 @@ const getHoverTitle = (isEnabled: boolean) => {
       }
 
       &--added {
-        width: 78px;
         color: var(--tr-text-disabled);
-        background-color: var(--tr-mcp-server-picker-button-bg-disabled);
-        border-color: var(--tr-mcp-server-picker-border-color-default);
+        background-color: var(--tr-mcp-server-picker-market-button-added-bg-color);
+        border-color: transparent;
         fill: var(--tr-text-disabled);
         cursor: not-allowed;
       }
@@ -340,7 +360,6 @@ const getHoverTitle = (isEnabled: boolean) => {
 
   // 工具列表样式
   &__tools {
-    background: var(--tr-mcp-server-picker-bg-default-2);
     border-radius: 0 0 16px 16px;
   }
 
@@ -348,9 +367,9 @@ const getHoverTitle = (isEnabled: boolean) => {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--plugin-card-row-gap);
     box-sizing: border-box;
-    padding: 14px 24px;
+    padding: var(--plugin-card-padding-block) var(--plugin-card-padding-inline);
     min-height: 68px;
     height: auto;
 
@@ -364,10 +383,10 @@ const getHoverTitle = (isEnabled: boolean) => {
 
   // 分割线样式
   &__divider {
-    width: calc(100% - 32px);
     height: 1px;
     background: var(--tr-mcp-server-picker-divider-color);
-    margin: 0 16px;
+    margin-left: var(--plugin-card-divider-inset-start);
+    margin-right: var(--plugin-card-divider-inset-end);
     flex-shrink: 0;
   }
 }
@@ -406,10 +425,6 @@ const getHoverTitle = (isEnabled: boolean) => {
   cursor: pointer;
   box-sizing: border-box;
   color: var(--tr-icon-color-default);
-
-  &.delete {
-    color: var(--tr-color-error);
-  }
 }
 
 .common-icon:hover {
diff --git a/packages/components/src/mcp-server-picker/index.vue b/packages/components/src/mcp-server-picker/index.vue
index 65cb6f0d9..06fa624eb 100644
--- a/packages/components/src/mcp-server-picker/index.vue
+++ b/packages/components/src/mcp-server-picker/index.vue
@@ -287,7 +287,7 @@ const transitionName = computed(() => {
 })
 
 const SelectDropStyle = {
-  background: 'var(--tr-mcp-server-picker-bg-default-2)',
+  background: 'var(--tr-container-bg-default)',
   color: 'var(--tr-text-primary)',
 }
 </script>
@@ -305,7 +305,7 @@ const SelectDropStyle = {
         <div class="mcp-server-picker__header-right">
           <slot name="header-actions" />
           <div v-if="props.showCustomAddButton" class="mcp-server-picker__header-right-item" @click="handleCustomAdd">
-            <IconPlus class="mcp-server-picker__icon" />
+            <IconPlus class="mcp-server-picker__icon mcp-server-picker__header-right-item-icon" />
             <span>{{ props.customAddButtonText }}</span>
           </div>
           <IconClose class="mcp-server-picker__header-right-close" @click="handleClose" />
@@ -347,7 +347,7 @@ const SelectDropStyle = {
               class="mcp-server-picker__content-market-header"
               v-if="props.enableSearch || props.enableMarketCategoryFilter"
             >
-              <div v-if="props.enableMarketCategoryFilter" style="width: 168px">
+              <div v-if="props.enableMarketCategoryFilter" class="mcp-server-picker__content-market-filter">
                 <TinyBaseSelect
                   v-model="marketCategory"
                   :placeholder="props.marketCategoryPlaceholder"
@@ -364,7 +364,7 @@ const SelectDropStyle = {
                   </TinyOption>
                 </TinyBaseSelect>
               </div>
-              <div v-if="props.enableSearch" style="width: 264px; flex-shrink: 0">
+              <div v-if="props.enableSearch" class="mcp-server-picker__content-market-search">
                 <TinyInput v-model="marketSearch" :placeholder="currentSearchPlaceholder">
                   <template #suffix>
                     <IconSearch class="mcp-server-picker__icon" />
@@ -450,18 +450,22 @@ const SelectDropStyle = {
         align-items: center;
         gap: 4px;
         cursor: pointer;
-        color: var(--tr-text-primary);
+        color: var(--tr-mcp-server-picker-header-button-text-color);
         font-size: 12px;
         font-weight: 400;
         line-height: 18px;
         text-align: center;
-        border: 1px solid var(--tr-text-secondary);
+        border: 1px solid var(--tr-mcp-server-picker-header-button-border-color);
         box-sizing: border-box;
         border-radius: 999px;
-        padding: 7px 20px;
+        padding: 4px 15px;
 
         &:hover {
-          border-color: var(--tr-text-disabled);
+          border-color: var(--tr-mcp-server-picker-header-button-border-color-hover);
+        }
+
+        &-icon {
+          color: var(--tr-mcp-server-picker-header-button-icon-color);
         }
       }
 
@@ -499,6 +503,16 @@ const SelectDropStyle = {
       flex-shrink: 0;
     }
 
+    &-market-filter {
+      width: 168px;
+      flex-shrink: 0;
+    }
+
+    &-market-search {
+      width: 264px;
+      flex-shrink: 0;
+    }
+
     &-market-header-select-option {
       color: var(--tr-text-primary) !important;
 
@@ -536,7 +550,7 @@ const SelectDropStyle = {
   &__icon {
     font-size: 16px;
     cursor: pointer;
-    color: var(--tr-text-primary);
+    color: var(--tr-mcp-server-picker-field-icon-color);
   }
 }
 
@@ -584,14 +598,11 @@ const SelectDropStyle = {
 
 :deep(.tiny-tabs__header) {
   flex-shrink: 0;
+  --tv-Tabs-border-color: var(--tr-mcp-server-picker-tabs-divider-color);
 
   .tiny-tabs__active-bar {
     background: var(--tr-mcp-server-picker-tabs-border-color-active);
   }
-
-  .tiny-tabs__nav-wrap-not-separator::after {
-    background: var(--tr-mcp-server-picker-tabs-nav-wrap-bg-color);
-  }
 }
 
 :deep(.tiny-tabs__content) {
@@ -620,8 +631,23 @@ const SelectDropStyle = {
   line-height: 22px;
 }
 
-:deep(.tiny-input__inner) {
-  background: var(--tr-mcp-server-picker-bg-default-2);
-  color: var(--tr-text-primary);
+:deep(.tiny-input) {
+  --tv-Input-text-color: var(--tr-text-primary);
+  --tv-Input-bg-color: var(--tr-mcp-server-picker-field-bg-color);
+  --tv-Input-border-color: var(--tr-mcp-server-picker-field-border-color);
+  --tv-Input-hover-border-color: var(--tr-mcp-server-picker-field-border-color);
+  --tv-Input-active-border-color: var(--tr-mcp-server-picker-field-border-color);
+  --tv-Input-icon-color: var(--tr-mcp-server-picker-field-icon-color);
+  --tv-Input-icon-color-hover: var(--tr-mcp-server-picker-field-icon-color);
+  --tv-Input-focus-icon-color: var(--tr-mcp-server-picker-field-icon-color);
+  --tv-Input-suffix-icon-color: var(--tr-mcp-server-picker-field-icon-color);
+  --tv-Input-placeholder-text-color: var(--tr-text-tertiary);
+}
+
+:deep(.tiny-base-select) {
+  --tv-BaseSelect-text-color: var(--tr-text-primary);
+  --tv-BaseSelect-input-border-color-active: var(--tr-mcp-server-picker-field-border-color);
+  --tv-BaseSelect-icon-color: var(--tr-mcp-server-picker-field-icon-color);
+  --tv-BaseSelect-icon-color-hover: var(--tr-mcp-server-picker-field-icon-color);
 }
 </style>
diff --git a/packages/components/src/styles/variables.css b/packages/components/src/styles/variables.css
index 5e1b83b15..21676d6b4 100644
--- a/packages/components/src/styles/variables.css
+++ b/packages/components/src/styles/variables.css
@@ -111,12 +111,20 @@
 
   /* ===== MCP Server Picker ===== */
   --tr-mcp-server-picker-bg-default: #ffffff;
-  --tr-mcp-server-picker-bg-default-2: #ffffff;
-  --tr-mcp-server-picker-tabs-nav-wrap-bg-color: #f0f0f0;
-  --tr-mcp-server-picker-plugin-card-border-color: #e6e6e6;
   --tr-mcp-server-picker-tabs-border-color-active: #191919;
+  --tr-mcp-server-picker-tabs-divider-color: rgba(0, 0, 0, 0.1);
+  --tr-mcp-server-picker-field-bg-color: var(--tr-mcp-server-picker-bg-default);
+  --tr-mcp-server-picker-field-border-color: #dbdbdb;
+  --tr-mcp-server-picker-muted-icon-color: #808080;
+  --tr-mcp-server-picker-field-icon-color: var(--tr-mcp-server-picker-muted-icon-color);
+  --tr-mcp-server-picker-card-bg-color: #f8f8f8;
   --tr-mcp-server-picker-bg-hover: rgba(0, 0, 0, 0.04);
-  --tr-mcp-server-picker-button-bg-disabled: #f0f0f0;
+  --tr-mcp-server-picker-header-button-border-color: var(--tr-border-color-default);
+  --tr-mcp-server-picker-header-button-border-color-hover: var(--tr-border-color-default);
+  --tr-mcp-server-picker-header-button-text-color: var(--tr-text-primary);
+  --tr-mcp-server-picker-header-button-icon-color: var(--tr-mcp-server-picker-muted-icon-color);
+  --tr-mcp-server-picker-market-button-border-color: var(--tr-border-color-default);
+  --tr-mcp-server-picker-market-button-added-bg-color: #f0f0f0;
   --tr-mcp-server-picker-divider-color: rgba(0, 0, 0, 0.1);
   --tr-mcp-server-picker-tool-count-color: #e6e6e6;
   --tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
@@ -240,13 +248,21 @@
 
   /* ===== MCP Server Picker ===== */
   --tr-mcp-server-picker-bg-default: #191919;
-  --tr-mcp-server-picker-bg-default-2: #262626;
-  --tr-mcp-server-picker-tabs-nav-wrap-bg-color: rgba(255, 255, 255, .1);
-  --tr-mcp-server-picker-plugin-card-border-color: #4a4a4a;
   --tr-mcp-server-picker-tabs-border-color-active: #E6E6E6;
+  --tr-mcp-server-picker-tabs-divider-color: rgba(255, 255, 255, 0.1);
+  --tr-mcp-server-picker-field-bg-color: var(--tr-mcp-server-picker-bg-default);
+  --tr-mcp-server-picker-field-border-color: #4d4d4d;
+  --tr-mcp-server-picker-muted-icon-color: #808080;
+  --tr-mcp-server-picker-field-icon-color: var(--tr-mcp-server-picker-muted-icon-color);
+  --tr-mcp-server-picker-card-bg-color: rgba(255, 255, 255, 0.05);
   --tr-mcp-server-picker-bg-hover: rgba(255, 255, 255, 0.1);
+  --tr-mcp-server-picker-header-button-border-color: var(--tr-border-color-default);
+  --tr-mcp-server-picker-header-button-border-color-hover: var(--tr-border-color-default);
+  --tr-mcp-server-picker-header-button-text-color: var(--tr-text-primary);
+  --tr-mcp-server-picker-header-button-icon-color: var(--tr-mcp-server-picker-muted-icon-color);
   --tr-mcp-server-picker-tool-count-color: #333333;
-  --tr-mcp-server-picker-button-bg-disabled: rgba(255, 255, 255, 0.15);
+  --tr-mcp-server-picker-market-button-border-color: var(--tr-border-color-default);
+  --tr-mcp-server-picker-market-button-added-bg-color: rgba(255, 255, 255, 0.1);
   --tr-mcp-server-picker-divider-color: rgba(255, 255, 255, 0.1);
   --tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.08);
   --tr-mcp-server-picker-border-color-default: rgba(255, 255, 255, 0.15);