Skip to content

Commit 6b000b5

Browse files
ruibabyruibaby
committed
Polish MCP tool selection UI
Refreshes the MCP Console styling to improve readability and selection feedback. Tool cards and overview stats now use softer gray surfaces, metadata text is slightly darker for better contrast, and selected tools in the access key form get a clear highlighted state.
1 parent b61ce62 commit 6b000b5

3 files changed

Lines changed: 21 additions & 16 deletions

File tree

‎ui/src/components/AccessKeyForm.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ defineExpose({
9797
</VSpace>
9898
</div>
9999

100-
<div class=":uno: flex flex-col gap-4">
100+
<div class=":uno: flex flex-col gap-6">
101101
<section v-for="group in groups" :key="group.source.pluginName">
102102
<div class=":uno: mb-3 flex items-center gap-2 text-sm text-gray-900 font-medium">
103103
<span>{{ group.source.displayName }}</span>
104104
<VTag>{{ group.source.type === 'BUILT_IN' ? '内置' : '插件' }}</VTag>
105105
</div>
106-
<div class=":uno: flex flex-col gap-3">
106+
<div class=":uno: flex flex-col gap-4">
107107
<div v-for="category in group.categories" :key="category.category">
108108
<div class=":uno: mb-2 flex items-center gap-2 text-xs text-gray-500 font-medium">
109109
<span>{{ category.label }}</span>
@@ -113,7 +113,12 @@ defineExpose({
113113
<label
114114
v-for="tool in category.tools"
115115
:key="tool.name"
116-
class=":uno: flex cursor-pointer items-start gap-2.5 rounded-md border border-gray-100 p-3 transition-colors hover:border-gray-200 hover:bg-gray-50"
116+
class=":uno: flex cursor-pointer items-start gap-2.5 rounded-md border p-3 transition-colors"
117+
:class="
118+
selected[tool.name]
119+
? 'border-[rgb(var(--colors-primary))] bg-[rgb(var(--colors-primary)/0.06)]'
120+
: 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
121+
"
117122
>
118123
<input
119124
v-model="selected[tool.name]"
@@ -127,7 +132,7 @@ defineExpose({
127132
<VTag v-else-if="tool.readOnly">只读</VTag>
128133
<VTag v-else>写入</VTag>
129134
</div>
130-
<code class=":uno: mt-0.5 block break-all text-xs text-gray-400">{{
135+
<code class=":uno: mt-0.5 block break-all text-xs text-gray-500">{{
131136
tool.name
132137
}}</code>
133138
<p v-if="tool.description" class=":uno: mt-1 text-xs text-gray-500 leading-5">

‎ui/src/components/McpOverview.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,14 @@ const successRate = computed(() => (callTotal.value ? `${successRateValue.value}
7979
</VAlert>
8080

8181
<div class=":uno: grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
82-
<div class=":uno: flex items-center gap-3 rounded-md border border-gray-100 p-3">
82+
<div class=":uno: flex items-center gap-3 rounded-md bg-gray-50 p-3">
8383
<div
8484
class=":uno: flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500"
8585
>
8686
<KeyIcon class=":uno: h-5 w-5" />
8787
</div>
8888
<div class=":uno: min-w-0 flex-1">
89-
<div class=":uno: text-xs text-gray-400">访问密钥</div>
89+
<div class=":uno: text-xs text-gray-500">访问密钥</div>
9090
<div class=":uno: mt-0.5 text-xl text-gray-900 font-semibold leading-6">
9191
{{ keys?.length ?? '–' }}
9292
</div>
@@ -103,14 +103,14 @@ const successRate = computed(() => (callTotal.value ? `${successRateValue.value}
103103
</div>
104104
</div>
105105

106-
<div class=":uno: flex items-center gap-3 rounded-md border border-gray-100 p-3">
106+
<div class=":uno: flex items-center gap-3 rounded-md bg-gray-50 p-3">
107107
<div
108108
class=":uno: flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500"
109109
>
110110
<ToolIcon class=":uno: h-5 w-5" />
111111
</div>
112112
<div class=":uno: min-w-0 flex-1">
113-
<div class=":uno: text-xs text-gray-400">已注册工具</div>
113+
<div class=":uno: text-xs text-gray-500">已注册工具</div>
114114
<div class=":uno: mt-0.5 text-xl text-gray-900 font-semibold leading-6">
115115
{{ tools ? toolStats.total : '–' }}
116116
</div>
@@ -138,14 +138,14 @@ const successRate = computed(() => (callTotal.value ? `${successRateValue.value}
138138
</div>
139139
</div>
140140

141-
<div class=":uno: flex items-center gap-3 rounded-md border border-gray-100 p-3">
141+
<div class=":uno: flex items-center gap-3 rounded-md bg-gray-50 p-3">
142142
<div
143143
class=":uno: flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500"
144144
>
145145
<FlashIcon class=":uno: h-5 w-5" />
146146
</div>
147147
<div class=":uno: min-w-0 flex-1">
148-
<div class=":uno: text-xs text-gray-400">最近调用</div>
148+
<div class=":uno: text-xs text-gray-500">最近调用</div>
149149
<div class=":uno: mt-0.5 text-xl text-gray-900 font-semibold leading-6">
150150
{{ recentTotal ? callTotal : '–' }}
151151
</div>
@@ -163,14 +163,14 @@ const successRate = computed(() => (callTotal.value ? `${successRateValue.value}
163163
</div>
164164
</div>
165165

166-
<div class=":uno: flex items-center gap-3 rounded-md border border-gray-100 p-3">
166+
<div class=":uno: flex items-center gap-3 rounded-md bg-gray-50 p-3">
167167
<div
168168
class=":uno: flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500"
169169
>
170170
<CheckCircleIcon class=":uno: h-5 w-5" />
171171
</div>
172172
<div class=":uno: min-w-0 flex-1">
173-
<div class=":uno: text-xs text-gray-400">调用成功率</div>
173+
<div class=":uno: text-xs text-gray-500">调用成功率</div>
174174
<div class=":uno: mt-0.5 text-xl text-gray-900 font-semibold leading-6">
175175
{{ successRate }}
176176
</div>

‎ui/src/components/McpToolCatalog.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ const groups = computed(() => groupTools(tools.value ?? []))
2222
group.source.displayName
2323
}}</span>
2424
<VTag>{{ group.source.type === 'BUILT_IN' ? '内置' : '插件' }}</VTag>
25-
<span v-if="group.source.version" class=":uno: text-xs text-gray-400">
25+
<span v-if="group.source.version" class=":uno: text-xs text-gray-500">
2626
v{{ group.source.version }}
2727
</span>
28-
<span class=":uno: text-xs text-gray-400">{{ group.toolCount }} 个工具</span>
28+
<span class=":uno: text-xs text-gray-500">{{ group.toolCount }} 个工具</span>
2929
</div>
3030
<div class=":uno: flex flex-col gap-4">
3131
<div v-for="category in group.categories" :key="category.category">
@@ -37,14 +37,14 @@ const groups = computed(() => groupTools(tools.value ?? []))
3737
<div
3838
v-for="tool in category.tools"
3939
:key="tool.name"
40-
class=":uno: rounded-md border border-gray-100 p-3"
40+
class=":uno: rounded-md bg-gray-50 p-3 transition-colors hover:bg-gray-100"
4141
>
4242
<div class=":uno: flex items-start justify-between gap-2">
4343
<div class=":uno: min-w-0">
4444
<div class=":uno: truncate text-sm text-gray-800 font-medium">
4545
{{ tool.title || tool.name }}
4646
</div>
47-
<code class=":uno: mt-1 block break-all text-xs text-gray-400">{{
47+
<code class=":uno: mt-1 block break-all text-xs text-gray-500">{{
4848
tool.name
4949
}}</code>
5050
</div>

0 commit comments

Comments
 (0)