201 lines
7.8 KiB
PHP
201 lines
7.8 KiB
PHP
@extends('layouts.site')
|
|
|
|
@section('page_class', 'page-tools')
|
|
@section('title', $item->seo_title ?: $item->name.' - AI工具详情')
|
|
@section('meta_description', $item->seo_description ?: $item->summary)
|
|
@section('canonical', $item->canonical_url ?: route('tools.show', $item->slug))
|
|
|
|
@section('head')
|
|
<style>
|
|
.detail-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
gap: var(--page-section-gap);
|
|
}
|
|
|
|
.detail-sidebar {
|
|
position: sticky;
|
|
top: 84px;
|
|
align-self: start;
|
|
}
|
|
|
|
.showcase-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: .5rem;
|
|
}
|
|
|
|
.showcase-box {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
padding: .62rem;
|
|
}
|
|
|
|
.info-list li {
|
|
padding: .3rem 0;
|
|
border-bottom: 1px dashed var(--line);
|
|
}
|
|
|
|
.info-list li:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.showcase-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.detail-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-sidebar {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.showcase-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
<script type="application/ld+json">
|
|
{!! json_encode([
|
|
'@context' => 'https://schema.org',
|
|
'@type' => 'SoftwareApplication',
|
|
'name' => $item->name,
|
|
'description' => $item->summary,
|
|
'url' => $item->official_url,
|
|
'applicationCategory' => $item->category?->name,
|
|
], JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
|
|
</script>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<section class="module-hero">
|
|
<div class="position-relative">
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
|
|
<span class="hero-chip">{{ $item->category?->name ?? 'AI 工具' }}</span>
|
|
<span class="hero-chip">{{ $item->pricing_type }}</span>
|
|
<span class="hero-chip">{{ $item->has_api ? '支持 API' : '无 API' }}</span>
|
|
</div>
|
|
<h1 class="h2 fw-bold mb-2">{{ $item->h1 ?: $item->name }}</h1>
|
|
<p class="hero-subtext">{{ $item->summary }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
@if($showRiskNotice)
|
|
<div class="alert alert-warning" role="alert">免责声明：涉及医疗、法律、投资等高风险场景的内容仅供学习参考，不构成专业建议。</div>
|
|
@endif
|
|
|
|
<div class="detail-layout">
|
|
<div>
|
|
<section class="surface-card p-3 p-lg-4 mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h2 class="section-title mb-0"><i class="bi bi-card-text text-primary"></i> 工具介绍</h2>
|
|
<span class="small text-muted-soft">更新时间：{{ $item->updated_at?->format('Y-m-d') }}</span>
|
|
</div>
|
|
<div class="md-content mb-3">
|
|
@if(trim((string) $item->description) !== '')
|
|
{!! $descriptionHtml !!}
|
|
@else
|
|
<p>{{ $item->summary }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
@if(!empty($capabilityTags))
|
|
<div class="d-flex flex-wrap gap-2">
|
|
@foreach($capabilityTags as $tag)
|
|
<span class="chip">{{ $tag }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</section>
|
|
|
|
<section class="surface-card p-3 p-lg-4 mb-3">
|
|
<h2 class="section-title mb-3"><i class="bi bi-lightning text-primary"></i> 快速看点</h2>
|
|
<div class="showcase-grid">
|
|
<div class="showcase-box">
|
|
<div class="small text-muted-soft">适用平台</div>
|
|
<div class="fw-semibold">{{ $item->platform ?: '未提供' }}</div>
|
|
</div>
|
|
<div class="showcase-box">
|
|
<div class="small text-muted-soft">支持语言</div>
|
|
<div class="fw-semibold">{{ $item->language ?: '未提供' }}</div>
|
|
</div>
|
|
<div class="showcase-box">
|
|
<div class="small text-muted-soft">来源可信度</div>
|
|
<div class="fw-semibold">{{ $item->source_level?->label() ?? '未知' }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="surface-card p-3 p-lg-4 mb-3">
|
|
<h2 class="section-title mb-3"><i class="bi bi-list-check text-primary"></i> 适用场景建议</h2>
|
|
<ul class="mb-0">
|
|
<li class="mb-2">如果你是首次上手，建议先用免费方案完成一个小任务验证效果。</li>
|
|
<li class="mb-2">有团队协作需求时，优先验证 API、权限管理与数据导出能力。</li>
|
|
<li>生产使用前，建议再次核验官方价格、条款与数据安全说明。</li>
|
|
</ul>
|
|
</section>
|
|
|
|
@if($relatedTools->isNotEmpty())
|
|
<section class="surface-card p-3 p-lg-4">
|
|
<h2 class="section-title mb-3"><i class="bi bi-diagram-3 text-primary"></i> 同类工具推荐</h2>
|
|
<div class="row g-3">
|
|
@foreach($relatedTools as $tool)
|
|
<div class="col-md-6">
|
|
<article class="entry-item h-100">
|
|
<a class="fw-semibold text-decoration-none" href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
|
|
<p class="small text-muted-soft line-clamp-2 mb-2">{{ $tool->summary }}</p>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="chip">{{ $tool->pricing_type }}</span>
|
|
<span class="chip">{{ $tool->has_api ? 'API' : 'No API' }}</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</div>
|
|
|
|
<aside class="detail-sidebar">
|
|
<section class="surface-card p-3 p-lg-4 mb-3">
|
|
<h3 class="section-title mb-3">工具信息</h3>
|
|
<ul class="list-unstyled small info-list mb-0">
|
|
<li>价格模式：<strong>{{ $item->pricing_type }}</strong></li>
|
|
<li>API 支持：<strong>{{ $item->has_api ? '支持' : '不支持' }}</strong></li>
|
|
<li>最后校验：<strong>{{ $item->last_verified_at?->format('Y-m-d') ?? '未记录' }}</strong></li>
|
|
<li>状态：<strong>{{ $item->is_stale ? '可能过期' : '有效' }}</strong></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="surface-card p-3 p-lg-4 mb-3 d-grid gap-2">
|
|
<a class="btn btn-primary" href="{{ $item->official_url }}" target="_blank" rel="nofollow noopener">访问官网</a>
|
|
@if($item->alternative)
|
|
<a class="btn btn-outline-primary" href="{{ route('tools.show', $item->alternative->slug) }}">查看替代工具</a>
|
|
@endif
|
|
</section>
|
|
|
|
@if($latestTools->isNotEmpty())
|
|
<section class="surface-card p-3 p-lg-4">
|
|
<h3 class="section-title mb-3">最新收录</h3>
|
|
<div class="list-tight">
|
|
@foreach($latestTools->take(6) as $tool)
|
|
<article>
|
|
<a class="fw-semibold text-decoration-none" href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
|
|
<div class="small text-muted-soft">{{ $tool->category?->name ?? '未分类' }}</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</aside>
|
|
</div>
|
|
@endsection
|