From 1ce5b3a60ac7fcda1b984398cbc9abdd95e41085 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Sun, 29 Jun 2025 22:44:53 +0800
Subject: [PATCH] modify page layout in prompt, resource and tool

---
 .../main-panel/prompt/prompt-templates.vue    | 43 ++++++----
 .../resource/resource-list-templates.vue      | 78 +++++++++++--------
 .../main-panel/resource/resource-list.vue     | 48 ++++++++----
 .../components/main-panel/tool/tool-list.vue  | 38 ++++++---
 4 files changed, 137 insertions(+), 70 deletions(-)

diff --git a/renderer/src/components/main-panel/prompt/prompt-templates.vue b/renderer/src/components/main-panel/prompt/prompt-templates.vue
index ff14a7c..dc4567b 100644
--- a/renderer/src/components/main-panel/prompt/prompt-templates.vue
+++ b/renderer/src/components/main-panel/prompt/prompt-templates.vue
@@ -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>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/resource/resource-list-templates.vue b/renderer/src/components/main-panel/resource/resource-list-templates.vue
index 2c6fd72..207dcdc 100644
--- a/renderer/src/components/main-panel/resource/resource-list-templates.vue
+++ b/renderer/src/components/main-panel/resource/resource-list-templates.vue
@@ -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>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/resource/resource-list.vue b/renderer/src/components/main-panel/resource/resource-list.vue
index 08c5607..4d5be81 100644
--- a/renderer/src/components/main-panel/resource/resource-list.vue
+++ b/renderer/src/components/main-panel/resource/resource-list.vue
@@ -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>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/tool/tool-list.vue b/renderer/src/components/main-panel/tool/tool-list.vue
index 9eed698..b89d383 100644
--- a/renderer/src/components/main-panel/tool/tool-list.vue
+++ b/renderer/src/components/main-panel/tool/tool-list.vue
@@ -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>
\ No newline at end of file