From 0a702791dfc2a60c7d9e028950f16124be0688b9 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Fri, 21 Nov 2025 16:59:27 +0800
Subject: [PATCH] Add tool_name display in tool marketplace and fix alignment

---
 .../src/views/dev/ToolMarketplace.vue         | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
index bcb6c89..72b57f9 100644
--- a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
+++ b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue
@@ -74,6 +74,9 @@
                     {{ tool.category }}
                   </div>
                 </div>
+                <div class="tool-name" v-if="tool.tool_name || tool.name">
+                  {{ tool.tool_name || tool.name }}
+                </div>
               </div>
               
               <div class="tool-description" v-if="tool.description">
@@ -564,6 +567,9 @@ watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
 }
 
 .tool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 12px;
 }
 
@@ -572,6 +578,9 @@ watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+  margin-right: 12px;
 }
 
 .tool-title-section h3 {
@@ -605,6 +614,29 @@ watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
   white-space: nowrap;
 }
 
+.tool-name {
+  color: #6b7280;
+  font-size: 10px;
+  font-weight: 500;
+  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background: transparent;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  padding: 4px 10px;
+  text-align: center;
+  min-width: 70px;
+  letter-spacing: 0.3px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tool-name:hover {
+  border-color: #9ca3af;
+  color: #374151;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
 .tool-description {
   color: #6b7280;
   font-size: 14px;