优化 mcp 服务器命名呈现
This commit is contained in:
parent
299bb30df7
commit
7414a905d4
@ -55,11 +55,29 @@ const fullDisplayServerName = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const displayServerName = computed(() => {
|
const displayServerName = computed(() => {
|
||||||
if (connectionResult.serverInfo.name.length > 20) {
|
const name = connectionResult.serverInfo.name;
|
||||||
return connectionResult.serverInfo.name.substring(0, 20);
|
if (name.length <= 3) return name;
|
||||||
} else {
|
|
||||||
return connectionResult.serverInfo.name;
|
// 处理中文混合名称
|
||||||
}
|
const chineseMatch = name.match(/[\u4e00-\u9fa5]/g);
|
||||||
|
if (chineseMatch && chineseMatch.length >= 2) {
|
||||||
|
return chineseMatch.slice(0, 3).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理各种命名格式
|
||||||
|
const words = name
|
||||||
|
.replace(/([a-z])([A-Z])/g, '$1 $2') // 驼峰分割
|
||||||
|
.split(/[\s\-_]+/) // 分割空格、连字符和下划线
|
||||||
|
.filter(word => word.length > 0);
|
||||||
|
|
||||||
|
if (words.length === 1 && words[0].length > 3) {
|
||||||
|
return words[0].substring(0, 3).toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
return words
|
||||||
|
.map(word => word[0].toUpperCase())
|
||||||
|
.slice(0, 3)
|
||||||
|
.join('');
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggleConnectionPanel() {
|
function toggleConnectionPanel() {
|
||||||
@ -132,7 +150,7 @@ function toggleConnectionPanel() {
|
|||||||
max-width: 60px;
|
max-width: 60px;
|
||||||
white-space: wrap;
|
white-space: wrap;
|
||||||
background-color: #f39a6d;
|
background-color: #f39a6d;
|
||||||
padding: 5px;
|
padding: 5px 12px;
|
||||||
border-radius: .5em;
|
border-radius: .5em;
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mcp-title">
|
<div class="mcp-title">
|
||||||
<div class="simple-logo">
|
<div class="simple-logo"
|
||||||
|
@click="clickLogo"
|
||||||
|
>
|
||||||
<span class="iconfont icon-openmcp"></span>
|
<span class="iconfont icon-openmcp"></span>
|
||||||
<span style="font-size: 12px;">openmcp</span>
|
<span style="font-size: 12px;">openmcp</span>
|
||||||
</div>
|
</div>
|
||||||
@ -11,6 +13,12 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
defineComponent({ name: 'mcp-title' });
|
defineComponent({ name: 'mcp-title' });
|
||||||
|
|
||||||
|
|
||||||
|
function clickLogo() {
|
||||||
|
window.open('https://kirigaya.cn/blog/article?seq=311', '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -28,9 +36,18 @@ defineComponent({ name: 'mcp-title' });
|
|||||||
height: 73px;
|
height: 73px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
transition: var(--animation-3s);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-logo:hover {
|
||||||
|
color: var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple-logo .iconfont {
|
.simple-logo .iconfont {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
@ -2,7 +2,7 @@
|
|||||||
"currentIndex": 0,
|
"currentIndex": 0,
|
||||||
"tabs": [
|
"tabs": [
|
||||||
{
|
{
|
||||||
"name": "Interactive Test",
|
"name": "交互测试",
|
||||||
"icon": "icon-robot",
|
"icon": "icon-robot",
|
||||||
"type": "blank",
|
"type": "blank",
|
||||||
"componentIndex": 3,
|
"componentIndex": 3,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user