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

feat(backend): 公开页对齐设计系统真源 + 三主题支持

Browse Source 
- 弃用手编宣纸黄配色，变量名与色值逐字取自 prototype/tokens.css
- 支持 a 经典蓝浅 / b 琥珀深 / c 酒窖暖浅 三主题：默认 a，
  首访跟随系统深色自动切 b，右上 ◐ 钮循环切换并记忆（localStorage）
- 结构保留：画框图集+印章、全屏灯箱、分节卡、页脚署名/ICP

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-07 11:48:10 +08:00
parent 8000f00e9e
commit 47d6490bf2
2 changed files with 236 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/internal/handler/templates/public_shop.html
+103 -63
View File
@@ -5,110 +5,138 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.PageTitle}}</title>{{.OGTags}}
<style>
/* 与商品页同族：宣纸暖白 × 墨色衬线 × 酒红点睛，「本店酒单」气质。零 JS。 */
/* 设计系统单一真源：变量名与三主题（a/b/c）色值逐字取自 .superpowers/prototype/tokens.css。
与商品公开页同族；改配色须先改原型令牌再同步此处。--glow 为本页派生变量（主色低透明度）。 */
:root{
--paper:#F6F1E7; --card:#FCFAF4; --ink:#2A2420; --muted:#8A7F70;
--wine:#8B2331; --gold:#9A6B2F; --line:#E2D7C3; --line-soft:#EDE5D4;
--r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
--fs-h1:21px; --fs-title:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
/* 主题 A（默认） */
--bg:#F5F7FA; --surface:#FFFFFF; --border:#DCE2EB; --border-subtle:#ECEFF4;
--text:#232934; --heading:#1B2430; --muted:#6E7888; --faint:#99A3B3;
--primary:#2563AC; --primary-dark:#154072; --on-primary:#FFFFFF; --brand50:#EEF4FB; --accent:#8B2331;
--shadow:rgba(20,40,70,.20); --sh-1:0 1px 3px var(--shadow);
--glow1:rgba(37,99,172,.05); --glow2:rgba(21,64,114,.04);
}
:root[data-theme="b"]{
--bg:#15151C; --surface:#1E1E27; --border:#2B2B37; --border-subtle:#26262F;
--text:#E8E8EE; --heading:#F6F6F9; --muted:#9A9AA8; --faint:#6E6E7E;
--primary:#F5A300; --primary-dark:#D98C00; --on-primary:#1A1408; --brand50:#2A2212; --accent:#F87171;
--shadow:rgba(0,0,0,.55);
--glow1:rgba(245,163,0,.04); --glow2:rgba(248,113,113,.03);
}
:root[data-theme="c"]{
--bg:#FAF5EC; --surface:#FFFDF8; --border:#EADDC9; --border-subtle:#F1E8D8;
--text:#33271F; --heading:#241A14; --muted:#917A64; --faint:#B9A488;
--primary:#7C1F2C; --primary-dark:#5F1621; --on-primary:#F7E9D6; --brand50:#F3E7D2; --accent:#A23522;
--shadow:rgba(74,20,32,.22);
--glow1:rgba(124,31,44,.05); --glow2:rgba(181,134,47,.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
background-color:var(--paper);
background-color:var(--bg);
background-image:
radial-gradient(circle at 12% 8%, rgba(154,107,47,.06), transparent 42%),
radial-gradient(circle at 88% 92%, rgba(139,35,49,.05), transparent 42%);
color:var(--ink);
font:15px/1.7 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
radial-gradient(circle at 12% 0%, var(--glow1), transparent 38%),
radial-gradient(circle at 100% 100%, var(--glow2), transparent 38%);
color:var(--text);
font:var(--fs-title)/1.7 var(--font);
-webkit-font-smoothing:antialiased;
transition:background-color .25s,color .25s;
}
.page{max-width:560px;margin:0 auto;padding:0 18px 44px;}
a{color:var(--wine);text-decoration:none;}
.page{max-width:560px;margin:0 auto;padding:0 16px 40px;}
a{color:var(--primary);text-decoration:none;}
.mast{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:20px 0 14px;color:var(--muted);font-size:12px;letter-spacing:.35em;
border-bottom:1px solid var(--line);position:relative;
padding:18px 0 12px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:.3em;
border-bottom:1px solid var(--border);position:relative;
}
.mast a{color:var(--primary-dark);font-weight:700;letter-spacing:.3em;}
.thm{
position:absolute;right:0;top:50%;transform:translateY(-58%);width:30px;height:30px;
border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);
color:var(--muted);font-size:14px;line-height:1;cursor:pointer;
}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:3px;border-bottom:1px solid var(--line-soft);}
.mast a{color:var(--ink);font-weight:600;letter-spacing:.35em;}
/* 店铺题名 */
.shop{text-align:center;padding:26px 0 6px;animation:rise .6s ease both;}
.shop img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--card);padding:2px;margin-bottom:10px;}
.shop h1{font-size:23px;font-weight:700;font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;letter-spacing:.08em;}
.shop .sub{color:var(--muted);font-size:12px;letter-spacing:.25em;margin-top:6px;}
.shop .sub b{color:var(--gold);font-weight:600;}
.shop{text-align:center;padding:24px 0 4px;animation:rise .5s ease both;}
.shop img{width:56px;height:56px;border-radius:var(--r-pill);object-fit:cover;border:1px solid var(--border);background:var(--surface);padding:2px;margin-bottom:10px;}
.shop h1{font-size:var(--fs-h1);font-weight:700;color:var(--heading);letter-spacing:.06em;}
.shop .sub{color:var(--muted);font-size:var(--fs-sm);letter-spacing:.2em;margin-top:5px;}
.shop .sub b{color:var(--primary);font-weight:600;}
form{display:flex;gap:10px;margin:18px 0 6px;animation:rise .6s ease .08s both;}
form{display:flex;gap:10px;margin:16px 0 4px;animation:rise .5s ease .06s both;}
input[type=search]{
flex:1;border:1px solid var(--line);border-radius:3px;padding:10px 14px;font-size:14px;
background:var(--card);outline:none;color:var(--ink);letter-spacing:.02em;
flex:1;border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 14px;font-size:14px;
background:var(--surface);outline:none;color:var(--text);
}
input[type=search]::placeholder{color:var(--muted);opacity:.7;letter-spacing:.06em;}
input[type=search]:focus{border-color:var(--gold);}
input[type=search]::placeholder{color:var(--faint);}
input[type=search]:focus{border-color:var(--primary);}
button{
border:1px solid var(--wine);background:var(--wine);color:#F6F1E7;border-radius:3px;
padding:0 20px;font-size:13.5px;letter-spacing:.3em;text-indent:.3em;cursor:pointer;
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
border:none;background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);
padding:0 20px;font-size:14px;letter-spacing:.2em;text-indent:.2em;cursor:pointer;font-family:var(--font);
}
.sec-t{
display:flex;align-items:center;gap:14px;color:var(--wine);font-size:13px;letter-spacing:.4em;text-indent:.4em;
font-weight:700;justify-content:center;margin:20px 0 14px;
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
display:flex;align-items:center;gap:12px;color:var(--primary-dark);font-size:var(--fs-body);
letter-spacing:.3em;text-indent:.3em;font-weight:700;justify-content:center;margin:18px 0 12px;
}
.sec-t::before,.sec-t::after{content:"";height:1px;background:var(--line);flex:1;max-width:64px;}
.sec-t::before,.sec-t::after{content:"";height:1px;background:var(--border);flex:1;max-width:56px;}
/* 酒单条目 */
.list{animation:rise .6s ease .14s both;}
/* 商品条目 */
.list{animation:rise .5s ease .12s both;}
.item{
display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
border-radius:5px;padding:12px 14px;margin-bottom:10px;color:var(--ink);position:relative;
display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-xl);padding:12px 14px;margin-bottom:10px;color:var(--text);position:relative;box-shadow:var(--sh-1);
}
.item::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-58%);color:var(--line);font-size:16px;}
.item img,.item .ph{width:58px;height:58px;border-radius:3px;flex:none;border:1px solid var(--line-soft);background:var(--paper);}
.item::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-58%);color:var(--faint);font-size:16px;}
.item img,.item .ph{width:58px;height:58px;border-radius:var(--r-md);flex:none;border:1px solid var(--border-subtle);background:var(--brand50);}
.item img{object-fit:cover;display:block;}
.item .ph{display:flex;align-items:center;justify-content:center;}
.item .ph svg{width:20px;height:32px;stroke:var(--gold);opacity:.5;}
.item .ph svg{width:20px;height:32px;stroke:var(--primary);opacity:.4;}
.item .m{flex:1;min-width:0;padding-right:16px;}
.item .nm{
font-weight:700;font-size:15.5px;line-height:1.45;
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
}
.item .sb{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.06em;}
.item .cd{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;margin-top:2px;opacity:.85;}
.item .pr{
flex:none;color:var(--wine);font-weight:700;font-size:16px;padding-right:14px;
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
}
.item .nm{font-weight:700;font-size:var(--fs-title);line-height:1.45;color:var(--heading);}
.item .sb{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;}
.item .cd{font-size:var(--fs-xs);color:var(--faint);font-family:var(--font-mono);margin-top:2px;}
.item .pr{flex:none;color:var(--accent);font-weight:700;font-size:16px;padding-right:14px;}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:13.5px;animation:rise .6s ease .2s both;}
.pager a{color:var(--wine);font-weight:600;letter-spacing:.1em;padding:8px 2px;}
.pager .off{color:var(--line);letter-spacing:.1em;}
.pager .pg{color:var(--muted);font-size:12px;letter-spacing:.15em;}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13.5px;animation:rise .5s ease .16s both;}
.pager a{color:var(--primary);font-weight:600;letter-spacing:.08em;padding:8px 2px;}
.pager .off{color:var(--border);letter-spacing:.08em;}
.pager .pg{color:var(--muted);font-size:var(--fs-sm);letter-spacing:.12em;}
.empty{text-align:center;padding:56px 20px;background:var(--card);border:1px solid var(--line);border-radius:5px;animation:rise .6s ease both;}
.empty h2{font-size:17px;margin-bottom:8px;font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;}
.empty p{color:var(--muted);font-size:13px;}
.empty{text-align:center;padding:56px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);animation:rise .5s ease both;box-shadow:var(--sh-1);}
.empty h2{font-size:17px;margin-bottom:8px;color:var(--heading);}
.empty p{color:var(--muted);font-size:var(--fs-body);}
.foot{margin-top:34px;text-align:center;color:var(--muted);font-size:12px;line-height:2.1;}
.foot-rule{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--gold);}
.foot-rule::before,.foot-rule::after{content:"";height:1px;background:var(--line);flex:1;}
.foot{margin-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:2;}
.foot-rule{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--border);}
.foot-rule::before,.foot-rule::after{content:"";height:1px;background:var(--border);flex:1;}
.foot a{color:var(--muted);}
.foot .brand{color:var(--wine);font-weight:600;letter-spacing:.1em;}
.foot .icp{font-size:11px;opacity:.85;}
.foot .brand{color:var(--primary);font-weight:600;}
.foot .icp{font-size:var(--fs-xs);opacity:.9;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}
</style>
<script>
/* 首屏前定主题防闪烁：记忆值 > 系统深色(→b) > a */
(function(){try{
var t=localStorage.getItem('jiu-pub-theme');
if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)t='b';
if(t==='b'||t==='c')document.documentElement.setAttribute('data-theme',t);
}catch(e){}})();
</script>
</head>
<body>
<div class="page">
<header class="mast"><a href="https://jiu.51yanmei.com">岩美酒库</a></header>
<header class="mast"><a href="https://jiu.51yanmei.com">岩美酒库</a><button class="thm" id="thm" aria-label="切换主题">◐</button></header>
{{if .Found}}
<div class="shop">
{{if .LogoURL}}<img src="{{.LogoURL}}" alt="{{.ShopName}}" decoding="async">{{end}}
<h1>{{.ShopName}}</h1>
<div class="sub">在售商品 <b>{{.Total}}</b> 件 · 正品保障</div>
<div class="sub">在售商品 <b>{{.Total}}</b> 件</div>
</div>
<form method="get" action="">
@@ -116,7 +144,7 @@
<button type="submit">搜索</button>
</form>
<div class="sec-t">本店酒单</div>
<div class="sec-t">在售商品</div>
{{if .Items}}
<div class="list">
@@ -154,5 +182,17 @@
<div>技术支持：<a class="brand" href="https://jiu.51yanmei.com">岩美科技</a> · <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2026039814号</a></div>
</footer>
</div>
<script>
(function(){
var order=['a','b','c'],root=document.documentElement,btn=document.getElementById('thm');
if(!btn)return;
btn.addEventListener('click',function(){
var cur=root.getAttribute('data-theme')||'a',
next=order[(order.indexOf(cur)+1)%order.length];
if(next==='a')root.removeAttribute('data-theme');else root.setAttribute('data-theme',next);
try{localStorage.setItem('jiu-pub-theme',next);}catch(e){}
});
})();
</script>
</body>
</html>