kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify page layout in prompt, resource and tool

Browse Source
This commit is contained in:
锦恢 2025-06-29 22:44:53 +08:00
parent 47d5d6474a
commit 1ce5b3a60a
4 changed files with 137 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
renderer/src/components/main-panel/prompt/prompt-templates.vue
View File

@ -8,23 +8,27 @@
<span>prompts/list</span> <span>prompts/list</span>
<span @click.stop="reloadPrompts(client, { first: false })" class="iconfont icon-restart"></span> <span @click.stop="reloadPrompts(client, { first: false })" class="iconfont icon-restart"></span>
</h3> </h3>
</template> </template>
<!-- body --> <!-- body -->
<div class="prompt-template-container-scrollbar"> <div class="prompt-template-container-scrollbar">
<el-scrollbar height="500px"> <el-scrollbar height="fit-content" v-if="(client.promptTemplates?.size || 0) > 0">
<div class="prompt-template-container"> <div class="prompt-template-container">
<div class="item" <div class="item"
:class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }" :class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }"
v-for="template of client.promptTemplates?.values()" :key="template.name" v-for="template of client.promptTemplates?.values()" :key="template.name"
@click="handleClick(template)"> @click="handleClick(template)">
<span>{{ template.name }}</span> <span class="prompt-title">{{ template.name }}</span>
<span>{{ template.description || '' }}</span> <span class="prompt-description">{{ template.description || '' }}</span>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div v-else style="padding: 10px;">
<div class="empty-description">
<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
<span style="opacity: 0.6;">No prompts found.</span>
</div>
</div>
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -126,8 +130,8 @@ onMounted(async () => {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; align-items: flex-start;
transition: var(--animation-3s); transition: var(--animation-3s);
} }
@ -141,19 +145,30 @@ onMounted(async () => {
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.prompt-template-container>.item>span:first-child { .prompt-title {
max-width: 200px; font-weight: bold;
max-width: 250px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.prompt-template-container>.item>span:last-child { .prompt-description {
opacity: 0.6; opacity: 0.6;
font-size: 12.5px; font-size: 12.5px;
max-width: 200px; max-width: 250px;
overflow: hidden; overflow: visible;
text-overflow: ellipsis; text-overflow: unset;
white-space: nowrap; white-space: normal;
word-break: break-all;
}
.empty-description {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-text-color-placeholder, #bbb);
font-size: 15px;
min-height: 40px;
} }
</style> </style>

46
renderer/src/components/main-panel/resource/resource-list-templates.vue
View File

@ -12,19 +12,22 @@
<!-- body --> <!-- body -->
<div class="resource-template-container-scrollbar"> <div class="resource-template-container-scrollbar">
<el-scrollbar height="500px" v-if="(client.resourceTemplates?.size || 0) > 0"> <el-scrollbar height="fit-content" v-if="(client.resourceTemplates?.size || 0) > 0">
<div class="resource-template-container"> <div class="resource-template-container">
<div class="item" <div class="item"
:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'template' && tabStorage.currentResourceName === template.name }" :class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'template' && tabStorage.currentResourceName === template.name }"
v-for="template of client.resourceTemplates?.values()" :key="template.name" v-for="template of client.resourceTemplates?.values()" :key="template.name"
@click="handleClick(template)"> @click="handleClick(template)">
<span>{{ template.name }}</span> <span class="resource-title">{{ template.name }}</span>
<span>{{ template.description || '' }}</span> <span class="resource-description">{{ template.description || '' }}</span>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div v-else style="padding: 10px;"> <div v-else style="padding: 10px;">
empty <div class="empty-description">
<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
<span style="opacity: 0.6;">No resource templates found.</span>
</div>
</div> </div>
</div> </div>
</el-collapse-item> </el-collapse-item>
@ -137,41 +140,52 @@ h3.resource-template .iconfont.icon-restart:hover {
width: 175px; width: 175px;
} }
.resource-template-container>.item { .resource-template-container > .item {
margin: 3px; margin: 3px;
padding: 5px 10px; padding: 5px 10px;
border-radius: .3em; border-radius: .3em;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; align-items: flex-start;
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item:hover { .resource-template-container > .item:hover {
background-color: var(--main-light-color); background-color: var(--main-light-color);
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item.active { .resource-template-container > .item.active {
background-color: var(--main-light-color); background-color: var(--main-light-color);
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item>span:first-child { .resource-title {
max-width: 200px; font-weight: bold;
max-width: 250px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.resource-template-container>.item>span:last-child { .resource-description {
opacity: 0.6; opacity: 0.6;
font-size: 12.5px; font-size: 12.5px;
max-width: 200px; max-width: 250px;
overflow: hidden; overflow: visible;
text-overflow: ellipsis; text-overflow: unset;
white-space: nowrap; white-space: normal;
word-break: break-all;
}
.empty-description {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-text-color-placeholder, #bbb);
font-size: 15px;
min-height: 40px;
} }
</style> </style>

48
renderer/src/components/main-panel/resource/resource-list.vue
View File

@ -12,17 +12,23 @@
<!-- body --> <!-- body -->
<div class="resource-template-container-scrollbar"> <div class="resource-template-container-scrollbar">
<el-scrollbar height="500px"> <el-scrollbar height="fit-content" v-if="(client.resources?.size || 0) > 0">
<div class="resource-template-container"> <div class="resource-template-container">
<div class="item" <div class="item"
:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'resource' && tabStorage.currentResourceName === resource.name }" :class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'resource' && tabStorage.currentResourceName === resource.name }"
v-for="resource of client.resources?.values()" :key="resource.uri" v-for="resource of client.resources?.values()" :key="resource.uri"
@click="handleClick(resource)"> @click="handleClick(resource)">
<span>{{ resource.name }}</span> <span class="resource-title">{{ resource.name }}</span>
<span>{{ resource.mimeType }}</span> <span class="resource-description">{{ resource.mimeType }}</span>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div v-else style="padding: 10px;">
<div class="empty-description">
<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
<span style="opacity: 0.6;">No resources found.</span>
</div>
</div>
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -139,41 +145,53 @@ h3.resource-template .iconfont.icon-restart:hover {
width: 175px; width: 175px;
} }
.resource-template-container>.item { .resource-template-container > .item {
margin: 3px; margin: 3px;
padding: 5px 10px; padding: 5px 10px;
border-radius: .3em; border-radius: .3em;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; align-items: flex-start;
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item:hover { .resource-template-container > .item:hover {
background-color: var(--main-light-color); background-color: var(--main-light-color);
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item.active { .resource-template-container > .item.active {
background-color: var(--main-light-color); background-color: var(--main-light-color);
transition: var(--animation-3s); transition: var(--animation-3s);
} }
.resource-template-container>.item>span:first-child { .resource-title {
max-width: 200px; font-weight: bold;
max-width: 250px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.resource-template-container>.item>span:last-child { .resource-description {
opacity: 0.6; opacity: 0.6;
font-size: 12.5px; font-size: 12.5px;
max-width: 200px; max-width: 250px;
overflow: hidden; /* Remove ellipsis and allow full text wrap */
text-overflow: ellipsis; overflow: visible;
white-space: nowrap; text-overflow: unset;
white-space: normal;
word-break: break-all;
}
.empty-description {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-text-color-placeholder, #bbb);
font-size: 15px;
min-height: 40px;
} }
</style> </style>

22
renderer/src/components/main-panel/tool/tool-list.vue
View File

@ -19,6 +19,8 @@
<!-- body --> <!-- body -->
<div class="tool-list-container-scrollbar"> <div class="tool-list-container-scrollbar">
<el-scrollbar height="fit-content"> <el-scrollbar height="fit-content">
<div class="tool-list-container-scrollbar">
<el-scrollbar height="fit-content" v-if="(client.tools?.size || 0) > 0">
<div class="tool-list-container"> <div class="tool-list-container">
<div class="item" :class="{ 'active': tabStorage.currentToolName === tool.name }" <div class="item" :class="{ 'active': tabStorage.currentToolName === tool.name }"
v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)"> v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)">
@ -28,6 +30,15 @@
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div v-else style="padding: 10px;">
<div class="empty-description">
<span class="iconfont icon-empty"
style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
<span style="opacity: 0.6;">No tools found.</span>
</div>
</div>
</div>
</el-scrollbar>
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -106,7 +117,7 @@ onMounted(async () => {
width: 175px; width: 175px;
} }
.tool-list-container > .item { .tool-list-container>.item {
margin: 3px; margin: 3px;
padding: 5px 10px; padding: 5px 10px;
border-radius: .3em; border-radius: .3em;
@ -158,4 +169,13 @@ onMounted(async () => {
opacity: 0.6; opacity: 0.6;
font-size: 12.5px; font-size: 12.5px;
} }
.empty-description {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-text-color-placeholder, #bbb);
font-size: 15px;
min-height: 40px;
}
</style> </style>