diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json index 6f5e1bc..17a2655 100644 --- a/apps/jingrow/frontend/src/locales/zh-CN.json +++ b/apps/jingrow/frontend/src/locales/zh-CN.json @@ -1148,6 +1148,7 @@ "Untitled Tool": "未命名工具", "Tool Name": "工具名称", "Author": "作者", + "Developer": "开发者", "Route Name": "路由名称", "URL": "URL", "Created": "创建时间", diff --git a/apps/jingrow/frontend/src/views/dev/ToolDetail.vue b/apps/jingrow/frontend/src/views/dev/ToolDetail.vue index 04dc024..b76d33e 100644 --- a/apps/jingrow/frontend/src/views/dev/ToolDetail.vue +++ b/apps/jingrow/frontend/src/views/dev/ToolDetail.vue @@ -50,17 +50,15 @@
- +
-
- -
+
@@ -75,19 +73,14 @@
-
+
{{ t('Tool Name') }}: - {{ tool.name }} + {{ tool.tool_name }}
-
- {{ t('Category') }}: - {{ tool.category }} -
- -
- {{ t('Author') }}: - {{ tool.author }} +
+ {{ t('Developer') }}: + {{ tool.team }}
@@ -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; - align-items: center; - justify-content: center; - padding: 20px; + min-height: 300px; + object-fit: cover; + display: block; + 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 { diff --git a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue index 85cddea..9894d4f 100644 --- a/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue +++ b/apps/jingrow/frontend/src/views/dev/ToolMarketplace.vue @@ -57,16 +57,15 @@
- -
- +
+ -
+
@@ -76,9 +75,6 @@

{{ tool.title || tool.name }}

-
- {{ tool.category }} -
{{ 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 { - display: flex; - align-items: center; - justify-content: center; +.tool-image { + position: relative; 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;