优化界面
This commit is contained in:
jiangdong.cheng
@@ -1,92 +1,153 @@
|
||||
@extends('layouts.site')
|
||||
|
||||
@section('page_class', 'page-news')
|
||||
@section('title', 'AI 资讯 - AIWeb')
|
||||
@section('title', 'AI 资讯文章 - AIWeb')
|
||||
@section('meta_description', '追踪 AI 行业动态、模型发布与产品更新，快速获取高价值信息。')
|
||||
@section('canonical', route('news.index'))
|
||||
|
||||
@section('content')
|
||||
<section class="module-hero">
|
||||
<div class="position-relative">
|
||||
<span class="hero-chip"><i class="bi bi-newspaper"></i> 资讯聚合</span>
|
||||
<h1 class="h2 fw-bold mt-2">AI 行业资讯追踪</h1>
|
||||
<p class="hero-subtext">聚合官方、媒体和社区动态，按时间线与可信度快速筛选。</p>
|
||||
</div>
|
||||
</section>
|
||||
@php
|
||||
$icons = ['bi-newspaper', 'bi-lightning', 'bi-megaphone', 'bi-globe', 'bi-broadcast', 'bi-bookmark-star'];
|
||||
$resetCategoryFilters = 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('news.index') }}" class="row g-2 align-items-end">
|
||||
<div class="col-md-8">
|
||||
<label class="form-label" for="newsSearchKeyword">关键词</label>
|
||||
<input id="newsSearchKeyword" 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="newsCategorySelect">分类</label>
|
||||
<select id="newsCategorySelect" class="form-select" name="category">
|
||||
<option value="">全部分类</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->slug }}" @selected(($filters['category'] ?? '') === $category->slug)>{{ $category->name }}</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="block-card p-3 p-lg-4">
|
||||
@forelse($items as $article)
|
||||
<article class="entry-item mb-3 mb-lg-2 d-flex gap-3">
|
||||
<div class="d-none d-md-block text-center" style="min-width:78px;">
|
||||
<div class="fw-semibold">{{ $article->published_at?->format('m-d') ?? '--' }}</div>
|
||||
<div class="small text-muted-soft">{{ $article->published_at?->format('H:i') ?? '' }}</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<div class="d-flex flex-wrap gap-2 mb-1">
|
||||
<span class="chip">{{ $article->source_level?->label() ?? '来源未知' }}</span>
|
||||
@if($article->is_stale)
|
||||
<span class="chip">可能过期</span>
|
||||
@endif
|
||||
</div>
|
||||
<a class="h5 text-decoration-none mb-1 d-inline-block" href="{{ route('news.show', $article->slug) }}">{{ $article->title }}</a>
|
||||
<p class="text-muted-soft mb-0 line-clamp-2">{{ $article->excerpt }}</p>
|
||||
</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft mb-0">暂无资讯数据</p>
|
||||
@endforelse
|
||||
|
||||
<div class="mt-3">{{ $items->links() }}</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<section class="block-card p-3 mb-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>
|
||||
|
||||
<section class="block-card p-3">
|
||||
<h3 class="section-title mb-3">推荐教程</h3>
|
||||
@forelse($sidebarGuides as $guide)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('guides.show', $guide->slug) }}">{{ $guide->title }}</a>
|
||||
<div class="small text-muted-soft">{{ $guide->difficulty }}</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['category'])) active @endif" href="{{ route('news.index', $resetCategoryFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部资讯</span>
|
||||
<small>{{ $newsStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($categories as $index => $category)
|
||||
<a class="channel-link @if(($filters['category'] ?? '') === $category->slug) active @endif" href="{{ route('news.index', array_filter(array_merge($filters, ['category' => $category->slug]))) }}">
|
||||
<i class="bi {{ $icons[$index % count($icons)] }}"></i>
|
||||
<span>{{ $category->name }}</span>
|
||||
<small>{{ $category->published_articles_count ?? 0 }}</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 active" 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>{{ $newsStats['total'] ?? 0 }}</b></div>
|
||||
</header>
|
||||
|
||||
<nav class="channel-mobile-nav" aria-label="移动分类导航">
|
||||
<a class="channel-link @if(empty($filters['category'])) active @endif" href="{{ route('news.index', $resetCategoryFilters) }}">
|
||||
<i class="bi bi-stars"></i>
|
||||
<span>全部资讯</span>
|
||||
<small>{{ $newsStats['total'] ?? 0 }}</small>
|
||||
</a>
|
||||
@foreach($categories as $index => $category)
|
||||
<a class="channel-link @if(($filters['category'] ?? '') === $category->slug) active @endif" href="{{ route('news.index', array_filter(array_merge($filters, ['category' => $category->slug]))) }}">
|
||||
<i class="bi {{ $icons[$index % count($icons)] }}"></i>
|
||||
<span>{{ $category->name }}</span>
|
||||
<small>{{ $category->published_articles_count ?? 0 }}</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('news.index') }}" role="search" aria-label="搜索 AI 资讯">
|
||||
<input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="搜索资讯标题或关键词，如 开源 / 融资 / 发布" autocomplete="off" spellcheck="false">
|
||||
<select name="category" aria-label="按分类筛选">
|
||||
<option value="">全部分类</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->slug }}" @selected(($filters['category'] ?? '') === $category->slug)>{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<input type="text" value="按发布时间排序" readonly aria-label="排序方式">
|
||||
<a class="btn btn-outline-secondary" href="{{ route('news.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>{{ $newsStats['total'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>今日新增</span><b>{{ $newsStats['today'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>高可信来源</span><b>{{ $newsStats['high_source'] ?? 0 }}</b></article>
|
||||
<article class="channel-kpi"><span>7天更新</span><b>{{ $newsStats['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="channel-list">
|
||||
@foreach($items as $article)
|
||||
<article class="entity-card">
|
||||
<a class="entity-title" href="{{ route('news.show', $article->slug) }}">{{ $article->title }}</a>
|
||||
<div class="entity-meta">{{ $article->source_level?->label() ?? '来源未知' }} · {{ $article->published_at?->format('Y-m-d H:i') }}</div>
|
||||
<p class="entity-desc line-clamp-2">{{ $article->excerpt }}</p>
|
||||
<div class="d-flex align-items-center justify-content-between gap-2">
|
||||
@if($article->is_stale)
|
||||
<span class="chip">可能过期</span>
|
||||
@else
|
||||
<span class="chip">已验证</span>
|
||||
@endif
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ route('news.show', $article->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('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>
|
||||
|
||||
<section class="channel-panel">
|
||||
<header class="channel-panel-head">
|
||||
<h3 class="channel-panel-title">推荐教程</h3>
|
||||
<a class="tiny-link" href="{{ route('guides.index') }}">查看全部</a>
|
||||
</header>
|
||||
@forelse($sidebarGuides as $guide)
|
||||
<article class="side-list-item">
|
||||
<a href="{{ route('guides.show', $guide->slug) }}">{{ $guide->title }}</a>
|
||||
<small>{{ $guide->difficulty }}</small>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无教程</p>
|
||||
@endforelse
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -32,20 +32,50 @@
|
||||
<div class="alert alert-warning" role="alert">免责声明：高风险领域内容仅供学习参考，不构成专业建议。</div>
|
||||
@endif
|
||||
|
||||
<article class="surface-card p-3 p-lg-4 mb-3">
|
||||
<p class="lead">{{ $item->excerpt }}</p>
|
||||
<div class="md-content">{!! $bodyHtml !!}</div>
|
||||
</article>
|
||||
<div class="module-grid">
|
||||
<div>
|
||||
<article class="surface-card p-3 p-lg-4 mb-3">
|
||||
<p class="lead">{{ $item->excerpt }}</p>
|
||||
<div class="md-content">{!! $bodyHtml !!}</div>
|
||||
</article>
|
||||
|
||||
<div class="surface-card p-3 p-lg-4">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<span class="chip"><i class="bi bi-link-45deg"></i>{{ $item->source_name ?: '未提供来源名称' }}</span>
|
||||
@if($item->source_url)
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ $item->source_url }}" target="_blank" rel="nofollow noopener">查看原文</a>
|
||||
@endif
|
||||
@if($item->is_stale)
|
||||
<span class="chip"><i class="bi bi-exclamation-triangle"></i>该资讯可能已过期</span>
|
||||
@endif
|
||||
<div class="surface-card p-3 p-lg-4">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<span class="chip"><i class="bi bi-link-45deg"></i>{{ $item->source_name ?: '未提供来源名称' }}</span>
|
||||
@if($item->source_url)
|
||||
<a class="btn btn-sm btn-outline-primary" href="{{ $item->source_url }}" target="_blank" rel="nofollow noopener">查看原文</a>
|
||||
@endif
|
||||
@if($item->is_stale)
|
||||
<span class="chip"><i class="bi bi-exclamation-triangle"></i>该资讯可能已过期</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<section class="surface-card p-3 mb-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>
|
||||
|
||||
<section class="surface-card p-3">
|
||||
<h3 class="section-title mb-3">推荐教程</h3>
|
||||
@forelse($sidebarGuides as $guide)
|
||||
<article class="pb-2 mb-2 border-bottom" style="border-color:var(--line)!important;">
|
||||
<a class="fw-semibold text-decoration-none" href="{{ route('guides.show', $guide->slug) }}">{{ $guide->title }}</a>
|
||||
<div class="small text-muted-soft">{{ $guide->difficulty }}</div>
|
||||
</article>
|
||||
@empty
|
||||
<p class="text-muted-soft small mb-0">暂无教程数据</p>
|
||||
@endforelse
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user