前端极简黑白重设计,并纳入客户端注册、站点设置与后台相关改动
- storefront 全站改为极简黑白配色:直角、细线分隔、卡片 hover 浅底、深色模式(跟随系统+手动切换) - 抽出 storefront/partials/card 复用卡片 - 一并提交此前暂存的客户端注册 API、站点设置、后台页面与测试 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,79 +1,70 @@
|
||||
@extends('storefront.layout', ['title' => 'Tstore · ' . ($type === 'plugin' ? '插件' : '主题')])
|
||||
@extends('storefront.layout', ['title' => (config('app.name', 'Tstore')) . ' · ' . ($type === 'plugin' ? '插件目录' : '主题目录')])
|
||||
|
||||
@php
|
||||
$typeLabel = $type === 'plugin' ? '插件' : '主题';
|
||||
$fallback = $type === 'plugin' ? 'P' : 'T';
|
||||
$selectedCategory = '';
|
||||
foreach ($categories as $category) {
|
||||
if ($filters['category'] === $category->slug) {
|
||||
$selectedCategory = $category->name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
$sortLabel = $filters['sort'] === 'name' ? '名称排序' : '最近更新';
|
||||
@endphp
|
||||
|
||||
@section('hero')
|
||||
<div class="hero-grid">
|
||||
<div class="hero-card">
|
||||
<h1>{{ $type === 'plugin' ? '插件目录' : '主题目录' }}</h1>
|
||||
<p>支持按分类和关键词浏览 {{ $type === 'plugin' ? '插件' : '主题' }},这里只展示信息,不直接提供下载地址。</p>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<form method="get" class="toolbar" style="margin:0">
|
||||
<div class="filters" style="width:100%">
|
||||
<div class="field" style="flex:1 1 220px">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" name="keyword" value="{{ $filters['keyword'] }}" placeholder="搜索名称、slug 或摘要">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>分类</label>
|
||||
<select class="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="field">
|
||||
<label>排序</label>
|
||||
<select class="select" name="sort">
|
||||
<option value="latest" @selected($filters['sort'] === 'latest')>最新更新</option>
|
||||
<option value="name" @selected($filters['sort'] === 'name')>按名称</option>
|
||||
</select>
|
||||
</div>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<span class="eyebrow">{{ $typeLabel }}</span>
|
||||
<h1 class="headline">{{ $typeLabel }}目录</h1>
|
||||
<p class="lede">统一浏览 {{ $typeLabel }} 的摘要、分类、作者和版本,筛选逻辑保持轻量,适合做公开展示与目录导航。</p>
|
||||
<form method="get" class="filter-bar">
|
||||
<div class="field" style="flex:2 1 260px">
|
||||
<label>关键词</label>
|
||||
<input class="input" type="text" name="keyword" value="{{ $filters['keyword'] }}" placeholder="搜索名称、slug 或摘要">
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" type="submit">筛选</button>
|
||||
<div class="field" style="flex:1 1 180px">
|
||||
<label>分类</label>
|
||||
<select class="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="field" style="flex:1 1 160px">
|
||||
<label>排序</label>
|
||||
<select class="select" name="sort">
|
||||
<option value="latest" @selected($filters['sort'] === 'latest')>最近更新</option>
|
||||
<option value="name" @selected($filters['sort'] === 'name')>按名称</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn" type="submit">应用筛选</button>
|
||||
<a class="btn ghost" href="{{ route($type === 'plugin' ? 'storefront.plugins' : 'storefront.themes') }}">重置</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="panel">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<h2>{{ $type === 'plugin' ? '插件列表' : '主题列表' }}</h2>
|
||||
<p>共 {{ $packages->total() }} 项结果</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
@forelse($packages as $package)
|
||||
<div class="card">
|
||||
<div class="card-top">
|
||||
@if($package->icon_url)
|
||||
<img class="icon" src="{{ $package->icon_url }}" alt="{{ $package->name }}">
|
||||
@else
|
||||
<div class="icon"></div>
|
||||
@endif
|
||||
<div>
|
||||
<div class="title">{{ $package->name }}</div>
|
||||
<div class="muted">{{ $package->author ?: '未知作者' }} · {{ $package->latestStableVersion?->version ?: $package->latest_version }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary">{{ $package->summary ?: '暂无摘要' }}</div>
|
||||
<div class="tags">
|
||||
@foreach($package->categories as $category)
|
||||
<span class="chip">{{ $category->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a class="btn secondary" href="{{ route('storefront.show', [$package->type, $package->slug]) }}">查看详情</a>
|
||||
</div>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="section-kicker">Catalog</span>
|
||||
<h2>{{ $typeLabel }}列表</h2>
|
||||
<p>共找到 {{ $packages->total() }} 个结果 · 当前分类 {{ $selectedCategory ?: '全部' }} · {{ $sortLabel }}。</p>
|
||||
</div>
|
||||
@empty
|
||||
<div class="empty">当前没有符合条件的{{ $type === 'plugin' ? '插件' : '主题' }}。</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="grid">
|
||||
@forelse($packages as $package)
|
||||
@include('storefront.partials.card', ['package' => $package, 'typeLabel' => $typeLabel, 'fallback' => $fallback])
|
||||
@empty
|
||||
<div class="empty">当前没有符合条件的{{ $typeLabel }}。</div>
|
||||
@endforelse
|
||||
</div>
|
||||
{{ $packages->onEachSide(1)->links() }}
|
||||
</div>
|
||||
<div style="margin-top:18px">{{ $packages->links() }}</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user