前端极简黑白重设计,并纳入客户端注册、站点设置与后台相关改动

- storefront 全站改为极简黑白配色:直角、细线分隔、卡片 hover 浅底、深色模式(跟随系统+手动切换)
- 抽出 storefront/partials/card 复用卡片
- 一并提交此前暂存的客户端注册 API、站点设置、后台页面与测试

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
浪子
2026-09-22 08:35:49 +08:00
parent 62cffc6f5f
commit 04a2034975
41 changed files with 3447 additions and 658 deletions
+58 -67
View File
@@ -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