Add tool publishing and improve tool marketplace UI
This commit is contained in:
parent
f7d9fa01d5
commit
83baec614d
@ -1148,6 +1148,7 @@
|
||||
"Untitled Tool": "未命名工具",
|
||||
"Tool Name": "工具名称",
|
||||
"Author": "作者",
|
||||
"Developer": "开发者",
|
||||
"Route Name": "路由名称",
|
||||
"URL": "URL",
|
||||
"Created": "创建时间",
|
||||
|
||||
@ -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">
|
||||
<Icon
|
||||
:icon="tool.icon"
|
||||
:width="120"
|
||||
:height="120"
|
||||
:style="{ color: tool.color || '#64748b' }"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
v-if="tool.tool_image"
|
||||
:src="getImageUrl(tool.tool_image)"
|
||||
:alt="tool.title || tool.name"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<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">
|
||||
<span class="label">{{ t('Category') }}:</span>
|
||||
<span class="value">{{ tool.category }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="tool.author" class="info-item">
|
||||
<span class="label">{{ t('Author') }}:</span>
|
||||
<span class="value">{{ tool.author }}</span>
|
||||
<div v-if="tool.team" class="info-item">
|
||||
<span class="label">{{ t('Developer') }}:</span>
|
||||
<span class="value">{{ tool.team }}</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;
|
||||
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 {
|
||||
|
||||
@ -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)">
|
||||
<Icon
|
||||
v-if="tool.icon"
|
||||
:icon="tool.icon"
|
||||
:width="48"
|
||||
:height="48"
|
||||
:style="{ color: tool.color || '#6b7280' }"
|
||||
<!-- 工具图片 -->
|
||||
<div class="tool-image" @click="viewToolDetail(tool)">
|
||||
<img
|
||||
v-if="tool.tool_image"
|
||||
:src="getImageUrl(tool.tool_image)"
|
||||
:alt="tool.title || tool.name"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<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 {
|
||||
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user