Add tool publishing and improve tool marketplace UI

apps/jingrow/frontend/src/locales/zh-CN.json

@@ -1148,6 +1148,7 @@
   "Untitled Tool": "未命名工具",
   "Tool Name": "工具名称",
   "Author": "作者",
+  "Developer": "开发者",
   "Route Name": "路由名称",
   "URL": "URL",
   "Created": "创建时间",

apps/jingrow/frontend/src/views/dev/ToolDetail.vue

@@ -50,17 +50,15 @@
         <!-- 上部分：工具信息 -->
         <div class="tool-info-section">
           <div class="tool-content-layout">
-            <!-- 左侧：工具图标 -->
+            <!-- 左侧：工具图片 -->
             <div class="tool-image-section">
               <div class="tool-image">
-                <div v-if="tool.icon" class="tool-icon-container">
+                <img 
-                  <Icon 
+                  v-if="tool.tool_image" 
-                    :icon="tool.icon" 
+                  :src="getImageUrl(tool.tool_image)" 
-                    :width="120" 
+                  :alt="tool.title || tool.name"
-                    :height="120"
+                  @error="handleImageError"
-                    :style="{ color: tool.color || '#64748b' }"
+                />
-                  />
-                </div>
                 <div v-else class="placeholder-image">
                   <n-icon size="80"><Icon icon="tabler:tool" /></n-icon>
                 </div>
@@ -75,19 +73,14 @@
               </div>
               
               <div class="info-list">
-                <div v-if="tool.name" class="info-item">
+                <div v-if="tool.tool_name" class="info-item">
                   <span class="label">{{ t('Tool Name') }}:</span>
-                  <span class="value">{{ tool.name }}</span>
+                  <span class="value">{{ tool.tool_name }}</span>
                 </div>
                 
-                <div v-if="tool.category" class="info-item">
+                <div v-if="tool.team" class="info-item">
-                  <span class="label">{{ t('Category') }}:</span>
+                  <span class="label">{{ t('Developer') }}:</span>
-                  <span class="value">{{ tool.category }}</span>
+                  <span class="value">{{ tool.team }}</span>
-                </div>
-                
-                <div v-if="tool.author" class="info-item">
-                  <span class="label">{{ t('Author') }}:</span>
-                  <span class="value">{{ tool.author }}</span>
                 </div>
                 
                 <div v-if="tool.version" class="info-item">
@@ -208,6 +201,25 @@ function formatDate(dateString: string): string {
   return `${year}-${month}-${day}`
 }
 
+function getImageUrl(imageUrl: string): string {
+  if (!imageUrl) return ''
+  if (imageUrl.startsWith('http')) {
+    return imageUrl
+  }
+  // 使用云端URL拼接
+  const cloudUrl = 'https://cloud.jingrow.com'
+  return `${cloudUrl}${imageUrl.startsWith('/') ? '' : '/'}${imageUrl}`
+}
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement
+  img.style.display = 'none'
+  const placeholder = img.parentElement?.querySelector('.placeholder-image') as HTMLElement
+  if (placeholder) {
+    placeholder.style.display = 'flex'
+  }
+}
+
 function goBack() {
   // 从查询参数获取返回路径
   const returnTo = route.query.returnTo as string
@@ -467,15 +479,19 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+  position: relative;
 }
 
-.tool-icon-container {
+.tool-image img {
   width: 100%;
   height: 100%;
-  display: flex;
+  min-height: 300px;
-  align-items: center;
+  object-fit: cover;
-  justify-content: center;
+  display: block;
-  padding: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .placeholder-image {
@@ -485,6 +501,7 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   color: #9ca3af;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
 }
 
 .tool-header {

apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue

@@ -57,16 +57,15 @@
         
         <div class="tools-grid">
           <div v-for="tool in tools" :key="tool.name" class="tool-card">
-            <!-- 工具图标 -->
+            <!-- 工具图片 -->
-            <div class="tool-icon" @click="viewToolDetail(tool)">
+            <div class="tool-image" @click="viewToolDetail(tool)">
-              <Icon 
+              <img 
-                v-if="tool.icon" 
+                v-if="tool.tool_image" 
-                :icon="tool.icon" 
+                :src="getImageUrl(tool.tool_image)" 
-                :width="48" 
+                :alt="tool.title || tool.name"
-                :height="48"
+                @error="handleImageError"
-                :style="{ color: tool.color || '#6b7280' }"
               />
-              <div v-else class="tool-icon-placeholder">
+              <div v-else class="tool-image-placeholder">
                 <n-icon size="48"><Icon icon="tabler:tool" /></n-icon>
               </div>
             </div>
@@ -76,9 +75,6 @@
               <div class="tool-header">
                 <div class="tool-title-section">
                   <h3 @click="viewToolDetail(tool)" class="clickable-title">{{ tool.title || tool.name }}</h3>
-                  <div class="tool-category" v-if="tool.category">
-                    {{ tool.category }}
-                  </div>
                 </div>
                 <div class="tool-name" v-if="tool.tool_name || tool.name">
                   {{ tool.tool_name || tool.name }}
@@ -391,6 +387,25 @@ async function performInstall(tool: any) {
   }
 }
 
+function getImageUrl(imageUrl: string): string {
+  if (!imageUrl) return ''
+  if (imageUrl.startsWith('http')) {
+    return imageUrl
+  }
+  // 使用云端URL拼接
+  const cloudUrl = 'https://cloud.jingrow.com'
+  return `${cloudUrl}${imageUrl.startsWith('/') ? '' : '/'}${imageUrl}`
+}
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement
+  img.style.display = 'none'
+  const placeholder = img.parentElement?.querySelector('.tool-image-placeholder')
+  if (placeholder) {
+    placeholder.classList.add('show')
+  }
+}
+
 function truncateText(text: string, maxLength: number): string {
   if (!text) return ''
   if (text.length <= maxLength) return text
@@ -552,24 +567,43 @@ watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
   border-color: #d1d5db;
 }
 
-.tool-icon {
+.tool-image {
-  display: flex;
+  position: relative;
-  align-items: center;
-  justify-content: center;
   width: 100%;
-  height: 120px;
+  height: 200px;
+  overflow: hidden;
   background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
   cursor: pointer;
-  padding: 20px;
+  transition: opacity 0.2s ease;
 }
 
-.tool-icon-placeholder {
+.tool-image:hover {
+  opacity: 0.9;
+}
+
+.tool-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.tool-card:hover .tool-image img {
+  transform: scale(1.05);
+}
+
+.tool-image-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: #9ca3af;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+.tool-image-placeholder.show {
+  display: flex;
 }
 
 .tool-content {
@@ -612,18 +646,6 @@ watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
   color: #10b981;
 }
 
-.tool-category {
-  color: #6b7280;
-  font-size: 11px;
-  font-weight: 500;
-  background: #f3f4f6;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  padding: 4px 10px;
-  display: inline-block;
-  white-space: nowrap;
-}
-
 .tool-name {
   color: #6b7280;
   font-size: 10px;