优化界面
This commit is contained in:
jiangdong.cheng
@@ -1,89 +1,149 @@
|
||||
@extends('layouts.site')
|
||||
|
||||
@section('page_class', 'page-guides')
|
||||
@section('title', 'AI 教程 - AIWeb')
|
||||
@section('title', 'AI 教程学习 - AIWeb')
|
||||
@section('meta_description', '从入门到实战的 AI 教程集合，按难度分层学习并落地工作流。')
|
||||
@section('canonical', route('guides.index'))
|
||||
|
||||
@section('content')
|
||||
<section class="module-hero">
|
||||
<div class="position-relative">
|
||||
<span class="hero-chip"><i class="bi bi-journal-code"></i> 学习路径</span>
|
||||
<h1 class="h2 fw-bold mt-2">AI 教程与实战路径</h1>
|
||||
<p class="hero-subtext">按难度分层组织教程，帮助你从零搭建可复用的 AI 工作流。</p>
|
||||
</div>
|
||||
</section>
|
||||
@php
|
||||
$icons = ['bi-book', 'bi-layers', 'bi-rocket'];
|
||||
$resetDifficultyFilters = array_filter([
|
||||
'q' => $filters['q'] ?? 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('guides.index') }}" class="row g-2 align-items-end">
|
||||
<div class="col-md-8">
|
||||
<label class="form-label" for="guideSearchKeyword">关键词</label>
|
||||
<input id="guideSearchKeyword" 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="guideDifficultySelect">难度</label>
|
||||
<select id="guideDifficultySelect" class="form-select" name="difficulty">
|
||||
<option value="">全部难度</option>
|
||||
@foreach(['beginner' => '入门', 'intermediate' => '进阶', 'advanced' => '高级'] as $value => $label)
|
||||
<option value="{{ $value }}" @selected(($filters['difficulty'] ?? '') === $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 $guide)
|
||||
<div class="col-lg-6">
|
||||
<article class="entry-item h-100 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2 mb-2">
|
||||
<a class="h5 text-decoration-none mb-0" href="{{ route('guides.show', $guide->slug) }}">{{ $guide->title }}</a>
|
||||
<span class="chip">{{ $guide->difficulty }}</span>
|
||||
</div>
|
||||
<p class="text-muted-soft mb-3 line-clamp-2">{{ $guide->excerpt }}</p>
|
||||
<div class="mt-auto d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted-soft">更新于 {{ $guide->updated_at?->format('Y-m-d') }}</small>
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ route('guides.show', $guide->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 }}</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($sidebarModels as $model)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
|
||||
<div class="small text-muted-soft">综合 {{ $model->total_score }} 分</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['difficulty'])) active @endif" href="{{ route('guides.index', $resetDifficultyFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部教程</span>
|
||||
<small>{{ $guideStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($difficultyOptions as $index => $option)
|
||||
<a class="channel-link @if(($filters['difficulty'] ?? '') === $option['value']) active @endif" href="{{ route('guides.by-topic', $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" href="{{ route('models.index') }}">模型推荐</a>
|
||||
<a class="channel-tab" href="{{ route('news.index') }}">资讯文章</a>
|
||||
<a class="channel-tab active" href="{{ route('guides.index') }}">教程学习</a>
|
||||
<a class="channel-tab" href="{{ route('home') }}">首页</a>
|
||||
</nav>
|
||||
<div class="channel-status">教程总量 <b>{{ $guideStats['total'] ?? 0 }}</b></div>
|
||||
</header>
|
||||
|
||||
<nav class="channel-mobile-nav" aria-label="移动分类导航">
|
||||
<a class="channel-link @if(empty($filters['difficulty'])) active @endif" href="{{ route('guides.index', $resetDifficultyFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部教程</span>
|
||||
<small>{{ $guideStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($difficultyOptions as $index => $option)
|
||||
<a class="channel-link @if(($filters['difficulty'] ?? '') === $option['value']) active @endif" href="{{ route('guides.by-topic', $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">按难度分层与场景化路线组织，帮助你稳定构建可复用 AI 工作流。</p>
|
||||
|
||||
<form class="channel-search" method="get" action="{{ route('guides.index') }}" role="search" aria-label="搜索 AI 教程">
|
||||
<input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="搜索教程标题或关键词，如 提示词 / 自动化 / 数据分析" autocomplete="off" spellcheck="false">
|
||||
<select name="difficulty" aria-label="按难度筛选">
|
||||
<option value="">全部难度</option>
|
||||
@foreach($difficultyOptions as $option)
|
||||
<option value="{{ $option['value'] }}" @selected(($filters['difficulty'] ?? '') === $option['value'])>{{ $option['label'] }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<input type="text" value="按发布时间排序" readonly aria-label="排序方式">
|
||||
<a class="btn btn-outline-secondary" href="{{ route('guides.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>{{ $guideStats['total'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>入门教程</span><b>{{ $guideStats['beginner'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>进阶教程</span><b>{{ $guideStats['advanced'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>7天更新</span><b>{{ $guideStats['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 $guide)
|
||||
<article class="entity-card">
|
||||
<a class="entity-title" href="{{ route('guides.show', $guide->slug) }}">{{ $guide->title }}</a>
|
||||
<div class="entity-meta">{{ $guide->difficulty }} · {{ $guide->updated_at?->format('Y-m-d') }}</div>
|
||||
<p class="entity-desc line-clamp-2">{{ $guide->excerpt }}</p>
|
||||
<div class="d-flex align-items-center justify-content-between gap-2">
|
||||
<span class="chip">实战教程</span>
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ route('guides.show', $guide->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 }}</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('models.index') }}">查看全部</a>
|
||||
</header>
|
||||
@forelse($sidebarModels as $model)
|
||||
<article class="side-list-item">
|
||||
<a href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
|
||||
<small>综合 {{ $model->total_score }} 分</small>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无模型</p>
|
||||
@endforelse
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -36,14 +36,38 @@
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div class="surface-card p-3 p-lg-4">
|
||||
<section class="surface-card p-3 p-lg-4 mb-3">
|
||||
<h3 class="section-title mb-3">学习信息</h3>
|
||||
<ul class="list-unstyled small mb-0">
|
||||
<li class="mb-2">难度：<strong>{{ $item->difficulty }}</strong></li>
|
||||
<li class="mb-2">发布时间：<strong>{{ $item->published_at?->format('Y-m-d H:i') ?? '-' }}</strong></li>
|
||||
<li>最后更新：<strong>{{ $item->updated_at?->format('Y-m-d H:i') ?? '-' }}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="surface-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 }}</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无工具</p>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<section class="surface-card p-3">
|
||||
<h3 class="section-title mb-3">模型推荐</h3>
|
||||
@forelse($sidebarModels as $model)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('models.show', $model->slug) }}">{{ $model->name }}</a>
|
||||
<div class="small text-muted-soft">综合 {{ $model->total_score }} 分</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无模型</p>
|
||||
@endforelse
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user