cjd/ai-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

优化界面

Browse Source
This commit is contained in:
jiangdong.cheng
2026-02-12 10:31:53 +08:00
parent aa16c9f8c2
commit a633234239
13 changed files with 1856 additions and 749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

571
resources/views/public/home.blade.php
View File

@@ -2,7 +2,7 @@
@section('page_class', 'page-home')
@section('title', 'AIWeb - AI 聚合导航入口')
@section('meta_description', '探索 AI 工具、模型、资讯与教程，快速搭建你的 AI 工作流。')
@section('meta_description', '探索 AI 工具、模型、资讯与教程，统一入口快速搭建 AI 工作流。')
@section('canonical', url('/'))
@section('head')
@@ -19,428 +19,161 @@
],
], JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
</script>
<style>
.home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
gap: 1rem;
}
.home-hero {
position: relative;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--radius-xl);
background: linear-gradient(140deg, #f2f6ff, #ebf2ff 60%, #f7f5ff);
box-shadow: var(--shadow-md);
padding: 1.1rem;
}
.home-hero::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
right: -56px;
top: -66px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .76), rgba(255, 255, 255, .22));
}
.home-hero-inner {
position: relative;
z-index: 2;
}
.home-tag {
display: inline-flex;
align-items: center;
gap: .3rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, .86);
color: var(--brand-strong);
padding: .18rem .62rem;
font-size: .78rem;
font-weight: 600;
}
.home-title {
margin: .72rem 0 .4rem;
font-family: "Outfit", "Noto Sans SC", sans-serif;
font-size: clamp(1.45rem, 2.5vw, 2.1rem);
font-weight: 800;
color: var(--text-main);
}
.home-subtitle {
margin: 0;
color: var(--text-muted);
}
.home-search {
margin-top: .95rem;
display: flex;
align-items: center;
gap: .45rem;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: #fff;
padding: .42rem;
}
.home-search input {
border: 0;
box-shadow: none;
}
.home-search .btn {
border-radius: 999px;
min-width: 102px;
}
.home-hotwords {
margin-top: .72rem;
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.home-hotword {
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .86);
color: var(--text-main);
font-size: .76rem;
padding: .17rem .55rem;
text-decoration: none;
}
.home-stats {
margin-top: .85rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .62rem;
}
.home-stat {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-sm);
padding: .74rem;
}
.home-stat-label {
color: var(--text-muted);
font-size: .78rem;
}
.home-stat-value {
margin-top: .15rem;
font-family: "Outfit", "Noto Sans SC", sans-serif;
font-size: 1.45rem;
font-weight: 800;
line-height: 1.1;
}
.home-panels {
margin-top: .9rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
.home-panel {
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: #fff;
box-shadow: var(--shadow-sm);
padding: .92rem;
}
.home-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .58rem;
}
.home-panel-head h2,
.home-panel-head h3 {
margin: 0;
font-family: "Outfit", "Noto Sans SC", sans-serif;
font-size: 1.04rem;
font-weight: 700;
}
.home-list {
display: grid;
gap: .55rem;
}
.home-list-item {
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
padding: .62rem .7rem;
}
.home-list-item a {
color: var(--text-main);
font-weight: 700;
text-decoration: none;
}
.home-list-item p,
.home-list-item div {
margin: .2rem 0 0;
color: var(--text-muted);
font-size: .84rem;
}
.home-side {
display: grid;
gap: .75rem;
}
.home-side-card {
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: #fff;
box-shadow: var(--shadow-sm);
padding: .9rem;
}
.home-side-card h3 {
margin: 0 0 .56rem;
font-family: "Outfit", "Noto Sans SC", sans-serif;
font-size: 1.02rem;
font-weight: 700;
}
.rank-row {
display: flex;
gap: .55rem;
}
.rank-row + .rank-row {
margin-top: .6rem;
}
.rank-index {
width: 1.36rem;
height: 1.36rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4f64ff, #2f49e5);
color: #fff;
font-size: .72rem;
font-weight: 700;
flex-shrink: 0;
margin-top: .1rem;
}
.home-note {
margin: 0;
padding-left: 1rem;
color: var(--text-muted);
font-size: .9rem;
}
.home-note li + li {
margin-top: .44rem;
}
@media (max-width: 1199.98px) {
.home-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 991.98px) {
.home-panels {
grid-template-columns: 1fr;
}
.home-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.home-hero,
.home-panel,
.home-side-card {
border-radius: 14px;
padding: .86rem;
}
.home-search {
flex-wrap: wrap;
border-radius: var(--radius-lg);
}
.home-search .btn {
width: 100%;
}
.home-stats {
grid-template-columns: 1fr;
}
}
</style>
@endsection
@section('content')
<div class="home-layout">
<div>
<section class="home-hero">
<div class="home-hero-inner">
<span class="home-tag"><i class="bi bi-stars"></i> AI 聚合入口</span>
<h1 class="home-title">探索 AI，从这里开始</h1>
<p class="home-subtitle">聚合工具导航、模型推荐、资讯文章和实战教程，让信息不再碎片化。</p>
@php
$totalCount = ($stats['tools'] ?? 0) + ($stats['models'] ?? 0) + ($stats['articles'] ?? 0) + ($stats['guides'] ?? 0);
@endphp
<form method="get" action="{{ route('tools.index') }}" class="home-search">
<span class="px-2 text-muted"><i class="bi bi-search"></i></span>
<input class="form-control" type="search" name="q" placeholder="搜索你想找的 AI 工具或场景…" aria-label="搜索 AI 工具关键词" autocomplete="off" spellcheck="false">
<button class="btn btn-primary" type="submit">搜索工具</button>
</form>
<div class="home-hotwords">
@foreach($hotKeywords as $keyword)
<a class="home-hotword" href="{{ route('tools.index', ['q' => $keyword]) }}">{{ $keyword }}</a>
@endforeach
</div>
</div>
</section>
<section class="home-stats">
<article class="home-stat">
<div class="home-stat-label">AI 工具</div>
<div class="home-stat-value">{{ $stats['tools'] }}</div>
</article>
<article class="home-stat">
<div class="home-stat-label">AI 模型</div>
<div class="home-stat-value">{{ $stats['models'] }}</div>
</article>
<article class="home-stat">
<div class="home-stat-label">AI 资讯</div>
<div class="home-stat-value">{{ $stats['articles'] }}</div>
</article>
<article class="home-stat">
<div class="home-stat-label">AI 教程</div>
<div class="home-stat-value">{{ $stats['guides'] }}</div>
</article>
</section>
<section class="home-panels">
<article class="home-panel">
<div class="home-panel-head">
<h2><i class="bi bi-grid text-primary me-1"></i>工具精选</h2>
<a class="tiny-link" href="{{ route('tools.index') }}">更多</a>
</div>
<div class="home-list">
@forelse($toolList->take(4) as $item)
<article class="home-list-item">
<a href="{{ route('tools.show', $item->slug) }}">{{ $item->name }}</a>
<p class="line-clamp-2">{{ $item->summary }}</p>
</article>
@empty
<article class="home-list-item"><p class="mb-0">暂无工具内容</p></article>
@endforelse
</div>
</article>
<article class="home-panel">
<div class="home-panel-head">
<h2><i class="bi bi-cpu text-primary me-1"></i>模型推荐</h2>
<a class="tiny-link" href="{{ route('models.index') }}">更多</a>
</div>
<div class="home-list">
@forelse($modelList->take(4) as $item)
<article class="home-list-item">
<a href="{{ route('models.show', $item->slug) }}">{{ $item->name }}</a>
<div>综合评分 {{ $item->total_score }}</div>
</article>
@empty
<article class="home-list-item"><p class="mb-0">暂无模型内容</p></article>
@endforelse
</div>
</article>
<article class="home-panel">
<div class="home-panel-head">
<h3><i class="bi bi-newspaper text-primary me-1"></i>最新资讯</h3>
<a class="tiny-link" href="{{ route('news.index') }}">更多</a>
</div>
<div class="home-list">
@forelse($articleList->take(4) as $item)
<article class="home-list-item">
<a href="{{ route('news.show', $item->slug) }}">{{ $item->title }}</a>
<div>{{ $item->published_at?->format('m-d H:i') }}</div>
</article>
@empty
<article class="home-list-item"><p class="mb-0">暂无资讯内容</p></article>
@endforelse
</div>
</article>
<article class="home-panel">
<div class="home-panel-head">
<h3><i class="bi bi-journal-code text-primary me-1"></i>教程学习</h3>
<a class="tiny-link" href="{{ route('guides.index') }}">更多</a>
</div>
<div class="home-list">
@forelse($guideList->take(4) as $item)
<article class="home-list-item">
<a href="{{ route('guides.show', $item->slug) }}">{{ $item->title }}</a>
<p class="line-clamp-2">{{ $item->excerpt }}</p>
</article>
@empty
<article class="home-list-item"><p class="mb-0">暂无教程内容</p></article>
@endforelse
</div>
</article>
</section>
</div>
<aside class="home-side">
<section class="home-side-card">
<h3><i class="bi bi-fire text-danger me-1"></i>热门模型榜</h3>
@forelse($modelList->take(6) as $index => $item)
<article class="rank-row">
<span class="rank-index">{{ $index + 1 }}</span>
<div>
<a class="fw-semibold" href="{{ route('models.show', $item->slug) }}">{{ $item->name }}</a>
<div class="small text-muted-soft">综合 {{ $item->total_score }} 分</div>
</div>
</article>
@empty
<p class="small text-muted-soft mb-0">暂无榜单数据</p>
@endforelse
</section>
<section class="home-side-card">
<h3><i class="bi bi-lightning-charge text-warning me-1"></i>学习任务</h3>
<ol class="home-note">
<li>先看一篇模型推荐，明确选型标准。</li>
<li>选一个工具，完成一个真实任务。</li>
<li>结合教程搭建第一个工作流。</li>
<li>每周复盘并优化工具组合。</li>
</ol>
</section>
<section class="home-side-card">
<h3><i class="bi bi-shield-check text-success me-1"></i>使用说明</h3>
<ul class="home-note mb-0">
<li>内容标注来源与发布时间。</li>
<li>高风险主题会显示风险提示。</li>
<li>产品信息变化快，请以官方公告为准。</li>
</ul>
</section>
<div class="channel-layout">
<aside class="channel-sidebar" aria-label="首页导航">
<div class="channel-brand"><span class="channel-brand-mark">AI</span>AIWeb</div>
<nav class="channel-links">
<a class="channel-link active" href="{{ route('home') }}">
<i class="bi bi-house"></i>
<span>首页总览</span>
<small>{{ $totalCount }}</small>
</a>
<a class="channel-link" href="{{ route('tools.index') }}">
<i class="bi bi-tools"></i>
<span>工具导航</span>
<small>{{ $stats['tools'] ?? 0 }}</small>
</a>
<a class="channel-link" href="{{ route('models.index') }}">
<i class="bi bi-cpu"></i>
<span>模型推荐</span>
<small>{{ $stats['models'] ?? 0 }}</small>
</a>
<a class="channel-link" href="{{ route('news.index') }}">
<i class="bi bi-newspaper"></i>
<span>资讯文章</span>
<small>{{ $stats['articles'] ?? 0 }}</small>
</a>
<a class="channel-link" href="{{ route('guides.index') }}">
<i class="bi bi-journal-code"></i>
<span>教程学习</span>
<small>{{ $stats['guides'] ?? 0 }}</small>
</a>
</nav>
</aside>
<section class="channel-main">
<header class="channel-head">
<nav class="channel-tabs" aria-label="频道导航">
<a class="channel-tab active" href="{{ route('home') }}">首页</a>
<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" href="{{ route('guides.index') }}">教程学习</a>
</nav>
<div class="channel-status">数据总量 <b>{{ $totalCount }}</b></div>
</header>
<nav class="channel-mobile-nav" aria-label="移动导航">
<a class="channel-link active" href="{{ route('home') }}"><i class="bi bi-house"></i><span>首页</span><small>当前</small></a>
<a class="channel-link" href="{{ route('tools.index') }}"><i class="bi bi-tools"></i><span>工具</span><small>入口</small></a>
<a class="channel-link" href="{{ route('models.index') }}"><i class="bi bi-cpu"></i><span>模型</span><small>入口</small></a>
<a class="channel-link" href="{{ route('news.index') }}"><i class="bi bi-newspaper"></i><span>资讯</span><small>入口</small></a>
<a class="channel-link" href="{{ route('guides.index') }}"><i class="bi bi-journal-code"></i><span>教程</span><small>入口</small></a>
</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('tools.index') }}" role="search" aria-label="搜索 AI 工具">
<input type="search" name="q" placeholder="输入关键词直达工具，如 写作 / 编程 / 自动化" autocomplete="off" spellcheck="false">
<a class="btn btn-outline-secondary" href="{{ route('tools.index') }}">工具入口</a>
<a class="btn btn-outline-secondary" href="{{ route('models.index') }}">模型入口</a>
<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>
<nav class="channel-tabs mt-2" aria-label="热门关键词">
@foreach($hotKeywords as $keyword)
<a class="channel-tab" href="{{ route('tools.index', ['q' => $keyword]) }}">{{ $keyword }}</a>
@endforeach
</nav>
<section class="channel-kpis" aria-label="站点统计概览">
<article class="channel-kpi"><span>工具收录</span><b>{{ $stats['tools'] ?? 0 }}</b></article>
<article class="channel-kpi"><span>模型收录</span><b>{{ $stats['models'] ?? 0 }}</b></article>
<article class="channel-kpi"><span>资讯文章</span><b>{{ $stats['articles'] ?? 0 }}</b></article>
<article class="channel-kpi"><span>教程学习</span><b>{{ $stats['guides'] ?? 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>
<div class="entity-grid">
@forelse($toolList->take(4) as $item)
<article class="entity-card">
<a class="entity-title" href="{{ route('tools.show', $item->slug) }}">{{ $item->name }}</a>
<div class="entity-meta">工具 · {{ $item->pricing_type }}</div>
<p class="entity-desc line-clamp-2">{{ $item->summary }}</p>
<div class="d-flex justify-content-between align-items-center gap-2">
<span class="chip">{{ $item->has_api ? '支持 API' : '无 API' }}</span>
<a class="btn btn-sm btn-outline-primary" href="{{ route('tools.show', $item->slug) }}">详情</a>
</div>
</article>
@empty
<article class="entity-card"><p class="mb-0 text-muted-soft">暂无工具内容</p></article>
@endforelse
@forelse($modelList->take(4) as $item)
<article class="entity-card">
<a class="entity-title" href="{{ route('models.show', $item->slug) }}">{{ $item->name }}</a>
<div class="entity-meta">模型 · {{ $item->provider ?: '未知供应商' }}</div>
<p class="entity-desc line-clamp-2">{{ $item->summary }}</p>
<div class="d-flex justify-content-between align-items-center gap-2">
<span class="chip">总分 {{ $item->total_score }}</span>
<a class="btn btn-sm btn-outline-primary" href="{{ route('models.show', $item->slug) }}">详情</a>
</div>
</article>
@empty
<article class="entity-card"><p class="mb-0 text-muted-soft">暂无模型内容</p></article>
@endforelse
</div>
</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('news.index') }}">查看全部</a>
</header>
@forelse($articleList->take(6) as $item)
<article class="side-list-item">
<a href="{{ route('news.show', $item->slug) }}">{{ $item->title }}</a>
<small>{{ $item->published_at?->format('m-d H:i') }}</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($guideList->take(6) as $item)
<article class="side-list-item">
<a href="{{ route('guides.show', $item->slug) }}">{{ $item->title }}</a>
<small>{{ $item->difficulty }}</small>
</article>
@empty
<p class="text-muted-soft small mb-0">暂无教程</p>
@endforelse
</section>
</aside>
</section>
</section>
</div>
@endsection