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 @click.stop="reloadPrompts(client, { first: false })" class="iconfont icon-restart"></span>
</h3>
</template>
<!-- body -->
<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="item"
:class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }"
v-for="template of client.promptTemplates?.values()" :key="template.name"
@click="handleClick(template)">
<span>{{ template.name }}</span>
<span>{{ template.description || '' }}</span>
<span class="prompt-title">{{ template.name }}</span>
<span class="prompt-description">{{ template.description || '' }}</span>
</div>
</div>
</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>
</el-collapse-item>
</el-collapse>
@ -126,8 +130,8 @@ onMounted(async () => {
user-select: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
align-items: flex-start;
transition: var(--animation-3s);
}
@ -141,19 +145,30 @@ onMounted(async () => {
transition: var(--animation-3s);
}
.prompt-template-container>.item>span:first-child {
max-width: 200px;
.prompt-title {
font-weight: bold;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prompt-template-container>.item>span:last-child {
.prompt-description {
opacity: 0.6;
font-size: 12.5px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 250px;
overflow: visible;
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>

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

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

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

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

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

@ -8,23 +8,34 @@
<span>tools/list</span>
<span class="iconfont icon-restart" @click.stop="reloadTools(client, { first: false })"></span>
<span>
<span>
<span class="cilent-name-tag">
{{ client.name }}
</span>
</span>
</span>
</h3>
</template>
<!-- body -->
<div class="tool-list-container-scrollbar">
<el-scrollbar height="fit-content">
<div class="tool-list-container">
<div class="item" :class="{ 'active': tabStorage.currentToolName === tool.name }"
v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)">
<span>{{ tool.name }}</span>
<br>
<span class="tool-description">{{ tool.description || '' }}</span>
<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="item" :class="{ 'active': tabStorage.currentToolName === tool.name }"
v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)">
<span>{{ tool.name }}</span>
<br>
<span class="tool-description">{{ tool.description || '' }}</span>
</div>
</div>
</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>
@ -106,7 +117,7 @@ onMounted(async () => {
width: 175px;
}
.tool-list-container > .item {
.tool-list-container>.item {
margin: 3px;
padding: 5px 10px;
border-radius: .3em;
@ -158,4 +169,13 @@ onMounted(async () => {
opacity: 0.6;
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>