优化界面
This commit is contained in:
jiangdong.cheng
@@ -6,105 +6,150 @@
|
||||
@section('canonical', route('models.index'))
|
||||
|
||||
@section('content')
|
||||
<section class="module-hero">
|
||||
<div class="position-relative">
|
||||
<span class="hero-chip"><i class="bi bi-cpu"></i> 模型推荐</span>
|
||||
<h1 class="h2 fw-bold mt-2">AI 模型推荐榜</h1>
|
||||
<p class="hero-subtext">效果优先，结合成本与速度做多维评估，帮助你更稳地选模型。</p>
|
||||
</div>
|
||||
</section>
|
||||
@php
|
||||
$icons = ['bi-chat-square-text', 'bi-collection', 'bi-image', 'bi-mic'];
|
||||
$resetModalityFilters = array_filter([
|
||||
'q' => $filters['q'] ?? null,
|
||||
'deployment' => $filters['deployment'] ?? null,
|
||||
], fn ($value) => $value !== null && $value !== '');
|
||||
@endphp
|
||||
|
||||
<div class="module-grid">
|
||||
<div>
|
||||
<section class="block-card p-3 p-lg-4 mb-3">
|
||||
<form method="get" action="{{ route('models.index') }}" class="row g-2 align-items-end">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label" for="modelSearchKeyword">关键词</label>
|
||||
<input id="modelSearchKeyword" class="form-control" type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="例如：长上下文、多模态…" aria-label="按关键词搜索模型" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label" for="modelModality">模态</label>
|
||||
<select id="modelModality" class="form-select" name="modality">
|
||||
<option value="">全部</option>
|
||||
@foreach(['text' => '文本', 'multimodal' => '多模态', 'image' => '图像', 'audio' => '音频'] as $value => $label)
|
||||
<option value="{{ $value }}" @selected(($filters['modality'] ?? '') === $value)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label" for="modelDeployment">部署</label>
|
||||
<select id="modelDeployment" class="form-select" name="deployment">
|
||||
<option value="">全部</option>
|
||||
@foreach(['api' => 'API', 'self_hosted' => '私有部署', 'hybrid' => '混合'] as $value => $label)
|
||||
<option value="{{ $value }}" @selected(($filters['deployment'] ?? '') === $value)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-1 d-grid">
|
||||
<button class="btn btn-primary" type="submit" aria-label="筛选模型"><i class="bi bi-search me-1" aria-hidden="true"></i>筛选</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="row g-3">
|
||||
@forelse($items as $model)
|
||||
<div class="col-lg-6">
|
||||
<article class="entry-item h-100">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<a class="h5 text-decoration-none mb-0 d-inline-block" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
|
||||
<div class="small text-muted-soft">{{ $model->provider ?: '未知供应商' }} · {{ $model->modality }}</div>
|
||||
</div>
|
||||
<span class="chip">总分 {{ $model->total_score }}</span>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-soft small line-clamp-2 mb-3">{{ $model->summary }}</p>
|
||||
|
||||
<div class="mb-2 small">效果 {{ $model->effectiveness_score }}</div>
|
||||
<div class="metric-bar mb-2"><div class="metric-fill bg-primary" style="width:{{ $model->effectiveness_score }}%"></div></div>
|
||||
<div class="mb-2 small">价格 {{ $model->price_score }}</div>
|
||||
<div class="metric-bar mb-2"><div class="metric-fill bg-success" style="width:{{ $model->price_score }}%"></div></div>
|
||||
<div class="mb-2 small">速度 {{ $model->speed_score }}</div>
|
||||
<div class="metric-bar mb-3"><div class="metric-fill bg-warning" style="width:{{ $model->speed_score }}%"></div></div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted-soft">更新于 {{ $model->updated_at?->format('Y-m-d') }}</small>
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ route('models.show', $model->slug) }}">详情</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12"><div class="block-card p-4 text-center text-muted-soft">暂无符合条件的模型</div></div>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<div class="mt-3">{{ $items->links() }}</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<section class="block-card p-3 mb-3">
|
||||
<h3 class="section-title mb-3">工具补充</h3>
|
||||
@forelse($sidebarTools as $tool)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
|
||||
<div class="small text-muted-soft">{{ $tool->pricing_type }} · {{ $tool->has_api ? 'API' : 'No API' }}</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无工具</p>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<section class="block-card p-3">
|
||||
<h3 class="section-title mb-3">最新资讯</h3>
|
||||
@forelse($sidebarNews as $news)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('news.show', $news->slug) }}">{{ $news->title }}</a>
|
||||
<div class="small text-muted-soft">{{ $news->published_at?->format('m-d H:i') }}</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无资讯</p>
|
||||
@endforelse
|
||||
</section>
|
||||
<div class="channel-layout">
|
||||
<aside class="channel-sidebar" aria-label="模型分类">
|
||||
<div class="channel-brand"><span class="channel-brand-mark">AI</span>AI模型库</div>
|
||||
<nav class="channel-links">
|
||||
<a class="channel-link @if(empty($filters['modality'])) active @endif" href="{{ route('models.index', $resetModalityFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部模型</span>
|
||||
<small>{{ $modelStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($modalityOptions as $index => $option)
|
||||
<a class="channel-link @if(($filters['modality'] ?? '') === $option['value']) active @endif" href="{{ route('models.by-use-case', $option['value']) }}">
|
||||
<i class="bi {{ $icons[$index % count($icons)] }}"></i>
|
||||
<span>{{ $option['label'] }}</span>
|
||||
<small>{{ $option['count'] }}</small>
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<section class="channel-main">
|
||||
<header class="channel-head">
|
||||
<nav class="channel-tabs" aria-label="频道导航">
|
||||
<a class="channel-tab" href="{{ route('tools.index') }}">AI工具集</a>
|
||||
<a class="channel-tab active" href="{{ route('models.index') }}">模型推荐</a>
|
||||
<a class="channel-tab" href="{{ route('news.index') }}">资讯文章</a>
|
||||
<a class="channel-tab" href="{{ route('guides.index') }}">教程学习</a>
|
||||
<a class="channel-tab" href="{{ route('home') }}">首页</a>
|
||||
</nav>
|
||||
<div class="channel-status">收录模型 <b>{{ $modelStats['total'] ?? 0 }}</b></div>
|
||||
</header>
|
||||
|
||||
<nav class="channel-mobile-nav" aria-label="移动分类导航">
|
||||
<a class="channel-link @if(empty($filters['modality'])) active @endif" href="{{ route('models.index', $resetModalityFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部模型</span>
|
||||
<small>{{ $modelStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($modalityOptions as $index => $option)
|
||||
<a class="channel-link @if(($filters['modality'] ?? '') === $option['value']) active @endif" href="{{ route('models.by-use-case', $option['value']) }}">
|
||||
<i class="bi {{ $icons[$index % count($icons)] }}"></i>
|
||||
<span>{{ $option['label'] }}</span>
|
||||
<small>{{ $option['count'] }}</small>
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
|
||||
<section class="channel-hero">
|
||||
<span class="channel-chip">AIWEB.CN</span>
|
||||
<h1 class="channel-title">AI模型推荐</h1>
|
||||
<p class="channel-subtitle">按效果、成本与速度三维比较，快速筛选适配业务场景的模型方案。</p>
|
||||
|
||||
<form class="channel-search" method="get" action="{{ route('models.index') }}" role="search" aria-label="搜索 AI 模型">
|
||||
<input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="搜索模型名称或能力，如 多模态 / 长上下文" autocomplete="off" spellcheck="false">
|
||||
<select name="modality" aria-label="按模态筛选">
|
||||
<option value="">全部分类</option>
|
||||
@foreach($modalityOptions as $option)
|
||||
<option value="{{ $option['value'] }}" @selected(($filters['modality'] ?? '') === $option['value'])>{{ $option['label'] }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<select name="deployment" aria-label="按部署筛选">
|
||||
<option value="">部署方式</option>
|
||||
<option value="api" @selected(($filters['deployment'] ?? '') === 'api')>API</option>
|
||||
<option value="self_hosted" @selected(($filters['deployment'] ?? '') === 'self_hosted')>私有部署</option>
|
||||
<option value="hybrid" @selected(($filters['deployment'] ?? '') === 'hybrid')>混合部署</option>
|
||||
</select>
|
||||
<a class="btn btn-outline-secondary" href="{{ route('models.index') }}">重置</a>
|
||||
<button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> 搜索</button>
|
||||
</form>
|
||||
|
||||
<section class="channel-kpis" aria-label="模型统计概览">
|
||||
<article class="channel-kpi"><span>收录模型</span><b>{{ $modelStats['total'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>多模态</span><b>{{ $modelStats['multimodal'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>API部署</span><b>{{ $modelStats['api'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>7天更新</span><b>{{ $modelStats['updated_7d'] ?? 0 }}</b></article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="channel-body">
|
||||
<section class="channel-panel">
|
||||
<header class="channel-panel-head">
|
||||
<h2 class="channel-panel-title">模型列表</h2>
|
||||
</header>
|
||||
|
||||
@if($items->isNotEmpty())
|
||||
<div class="entity-grid">
|
||||
@foreach($items as $model)
|
||||
<article class="entity-card">
|
||||
<a class="entity-title" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
|
||||
<div class="entity-meta">{{ $model->provider ?: '未知供应商' }} · {{ $model->deployment_mode ?: '未标注部署' }}</div>
|
||||
<p class="entity-desc line-clamp-2">{{ $model->summary }}</p>
|
||||
<div class="d-flex align-items-center justify-content-between gap-2">
|
||||
<span class="chip">总分 {{ $model->total_score }}</span>
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ route('models.show', $model->slug) }}">详情</a>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-3">{{ $items->links() }}</div>
|
||||
@else
|
||||
<p class="text-muted-soft mb-0">暂无符合条件的模型数据</p>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<aside class="channel-list">
|
||||
<section class="channel-panel">
|
||||
<header class="channel-panel-head">
|
||||
<h3 class="channel-panel-title">相关工具</h3>
|
||||
<a class="tiny-link" href="{{ route('tools.index') }}">查看全部</a>
|
||||
</header>
|
||||
@forelse($sidebarTools as $tool)
|
||||
<article class="side-list-item">
|
||||
<a href="{{ route('tools.show', $tool->slug) }}">{{ $tool->name }}</a>
|
||||
<small>{{ $tool->pricing_type }} · {{ $tool->has_api ? '支持 API' : '无 API' }}</small>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无工具</p>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<section class="channel-panel">
|
||||
<header class="channel-panel-head">
|
||||
<h3 class="channel-panel-title">最新资讯</h3>
|
||||
<a class="tiny-link" href="{{ route('news.index') }}">查看全部</a>
|
||||
</header>
|
||||
@forelse($sidebarNews as $news)
|
||||
<article class="side-list-item">
|
||||
<a href="{{ route('news.show', $news->slug) }}">{{ $news->title }}</a>
|
||||
<small>{{ $news->published_at?->format('m-d H:i') }}</small>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无资讯</p>
|
||||
@endforelse
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user