wangjia/jiu
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 130 Wiki Activity

feat(site): 下载页平台专属图标 + 检测卡放大重排

Browse Source 
- 图标 sprite 新增 i-apple / i-android（simple-icons 品牌图标，填充式）与
  i-tablet-smartphone（lucide），先登记原型 icons.js 再同步官网 icons.njk
- 下载页 macOS/Android/iOS 卡片及当前平台检测卡换用专属图标（原为 copy/phone-call/funnel 错配）
- 检测卡高度加倍：icbox 44→84、标题 16→22、内边距加大，新增引导行与版本徽章，
  描述文字由 muted 灰改为正文色；窄屏按钮转全宽

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
2026-07-04 00:08:01 +08:00
parent 24afb3b5fd
commit 0e91768da4
3 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/prototype/screens/icons.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
web/_includes/icons.njk
+1 -1
View File
File diff suppressed because one or more lines are too long
web/download.njk
+24 -16
View File
@@ -3,15 +3,19 @@ layout: base.njk
title: 下载
description: 下载岩美酒库管理系统客户端：Windows、macOS、Android、iOS 与免安装 Web 版。
pageStyle: |
.dl-hero{background:var(--mk-hero-grad); color:var(--on-accent); padding:64px 0 72px; text-align:center;}
.dl-hero{background:var(--mk-hero-grad); color:var(--on-accent); padding:64px 0 88px; text-align:center;}
.dl-hero h1{color:var(--on-accent); font-size:var(--mk-h2); font-weight:800;}
.dl-hero p{color:var(--on-accent-faint); margin:12px auto 0; max-width:36em;}
.detect{max-width:640px; margin:-40px auto 0; position:relative; z-index:2;}
.detect .card{display:flex; align-items:center; gap:18px; box-shadow:var(--sh-2); padding:20px 22px;}
.detect .icbox{width:44px; height:44px; border-radius:var(--r-lg); flex:none; display:flex; align-items:center; justify-content:center;}
.detect .icbox .ic{width:22px; height:22px;}
.detect b{display:block; color:var(--heading); font-size:16px;}
.detect span{color:var(--muted); font-size:var(--fs-sm);}
.detect{max-width:720px; margin:-56px auto 0; position:relative; z-index:2;}
.detect .card{display:flex; align-items:center; gap:26px; box-shadow:var(--sh-2); padding:34px 36px;}
.detect .icbox{width:84px; height:84px; border-radius:var(--r-lg); flex:none; display:flex; align-items:center; justify-content:center;}
.detect .icbox .ic{width:42px; height:42px;}
.detect .detect-info{flex:1; min-width:0;}
.detect .detect-eyebrow{color:var(--primary); font-size:var(--fs-xs); font-weight:800; letter-spacing:1px; margin-bottom:5px;}
.detect .detect-title{display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap;}
.detect b{color:var(--heading); font-size:22px; font-weight:800; line-height:1.3;}
.detect .detect-ver{font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700; color:var(--primary); background:var(--info-soft); padding:3px 10px; border-radius:var(--r-pill);}
.detect .detect-desc{display:block; color:var(--text); font-size:15px; line-height:1.7;}
.detect .btn{margin-left:auto; flex:none;}
.dl-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:46px;}
.dl-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 18px; display:flex; flex-direction:column; text-align:center;}
@@ -35,7 +39,7 @@ pageStyle: |
.changelog-body ul{margin:0; padding-left:20px; color:var(--muted); font-size:14px; line-height:1.8;}
.changelog-intro{color:var(--muted); font-size:14px; margin:0 0 4px;}
@media (max-width:900px){ .dl-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .dl-grid{grid-template-columns:1fr;} .detect .card{flex-wrap:wrap;} .changelog-entry{grid-template-columns:1fr;} }
@media (max-width:600px){ .dl-grid{grid-template-columns:1fr;} .detect .card{flex-wrap:wrap; padding:26px 22px; gap:18px;} .detect .btn{margin-left:0; width:100%;} .changelog-entry{grid-template-columns:1fr;} }
---
<header class="dl-hero">
@@ -48,11 +52,15 @@ pageStyle: |
<div class="detect container">
<div class="card">
<div class="icbox ic-info" id="detect-icon"><svg class="ic"><use href="#i-ic01"/></svg></div>
<div>
<b id="detect-name">Web 版</b>
<span id="detect-desc">已自动识别你的设备，推荐以下版本。</span>
<div class="detect-info">
<div class="detect-eyebrow">已识别你的设备 · 为你推荐</div>
<div class="detect-title">
<b id="detect-name">Web 版</b>
<span class="detect-ver version-badge">v{{ changelog[0].version }}</span>
</div>
<span class="detect-desc" id="detect-desc">浏览器直接访问，功能完整，无需下载安装。</span>
</div>
<a class="btn primary" id="detect-btn" href="{{ site.appBaseUrl }}/app/"><span>立即使用</span></a>
<a class="btn primary lg" id="detect-btn" href="{{ site.appBaseUrl }}/app/"><span>立即使用</span></a>
</div>
</div>
@@ -67,7 +75,7 @@ pageStyle: |
<a class="btn primary" id="windows-dl-btn" href="{{ site.appBaseUrl }}/downloads/jiu-windows-x64-setup.exe"><svg class="ic" style="width:15px;height:15px"><use href="#i-download"/></svg>下载</a>
</div>
<div class="dl-card" data-platform="macos">
<div class="icbox ic-info"><svg class="ic"><use href="#i-ic25"/></svg></div>
<div class="icbox ic-info"><svg class="ic"><use href="#i-apple"/></svg></div>
<h3>macOS</h3>
<div class="req">Apple Silicon / Intel</div>
<div class="dl-status">✓ 已签名公证</div>
@@ -81,14 +89,14 @@ pageStyle: |
<a class="btn primary" href="{{ site.appBaseUrl }}/app/">立即使用</a>
</div>
<div class="dl-card" data-platform="android">
<div class="icbox ic-warn"><svg class="ic"><use href="#i-ic43"/></svg></div>
<div class="icbox ic-warn"><svg class="ic"><use href="#i-android"/></svg></div>
<h3>Android</h3>
<div class="req">Android 6.0 及以上</div>
<div class="dl-status">✓ APK 直装</div>
<a class="btn primary" id="android-dl-btn" href="{{ site.appBaseUrl }}/downloads/jiu-android.apk"><svg class="ic" style="width:15px;height:15px"><use href="#i-download"/></svg>下载</a>
</div>
<div class="dl-card" data-platform="ios" id="ios-card">
<div class="icbox ic-wine"><svg class="ic"><use href="#i-ic22"/></svg></div>
<div class="icbox ic-wine"><svg class="ic"><use href="#i-tablet-smartphone"/></svg></div>
<h3>iOS</h3>
<div class="req">iPhone / iPad</div>
<div class="dl-status soon" id="ios-status">TestFlight 内测中</div>
@@ -137,7 +145,7 @@ pageStyle: |
<script>
(function() {
var APP_BASE = '{{ site.appBaseUrl }}';
var SPRITE = { web:'#i-ic01', ios:'#i-ic22', android:'#i-ic43', windows:'#i-ic63', macos:'#i-ic25' };
var SPRITE = { web:'#i-ic01', ios:'#i-tablet-smartphone', android:'#i-android', windows:'#i-ic63', macos:'#i-apple' };
var platforms = {
web: { name: 'Web 版', desc: '浏览器直接访问，功能完整，无需下载安装。', btnText: '立即使用 Web 版', btnHref: APP_BASE + '/app/', available: true },
ios: { name: 'iOS', desc: 'iPhone 与 iPad 通用，通过 TestFlight 安装。', btnText: '敬请期待', available: false },