dsh-design-studio 0.10.0 → 0.11.0

package/README.en.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-<img src="assets/hero.jpg" alt="Design Studio: one sentence gives three directions; pick one, get the full set, click to edit" width="480" />
+![Design Studio: one sentence gives three directions; pick one, get the full set, click to edit](assets/hero-sm.jpg)
 
 <p>
   <a href="https://github.com/OrderG-X/dsh-design-studio/releases"><img src="https://img.shields.io/github/v/release/OrderG-X/dsh-design-studio?label=release&color=4D6BFE" alt="release" /></a>
@@ -27,7 +27,7 @@
 
 **Requirements:** works in the DSH desktop app and the web version, on Mac and Windows. The design check needs Chrome or Edge on your computer.
 
-If DSH can't reach the npm registry, it falls back to a mirror in China. To update, uninstall on the Plugins page and add it again. A new version installs by package name about a day after release; to get it right away, enter the release tarball `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz` (needs GitHub access).
+If DSH can't reach the npm registry, it falls back to a mirror in China. To update on DSH 0.2.2 or later, open it on the Plugins page and click "Update to …"; on older DSH, uninstall it and add it again. A new version installs by package name about a day after release; to get it right away, uninstall it and enter the release tarball `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz` (needs GitHub access) — a tarball install can't use Update later.
 
 ## Quick start
 
@@ -43,7 +43,8 @@ If DSH can't reach the npm registry, it falls back to a mirror in China. To upda
 - **Design check:** one click finds overflowing text, low contrast, small tap targets and tiny text, marked right on the page. In Design mode the model also checks its own work and fixes what it finds.
 - **Versions and compare:** every turn is saved; drag a slider to compare, and go back to any version.
 - **Export and phone preview:** showcase images, PDF and PowerPoint (links between screens still work); scan a QR code to see it on your phone at real size.
-- **Your brand, and real code:** give a site URL to extract a brand design system and design with it from then on; turn a finished design into React / Vue / HTML, compared screen by screen against the design.
+- **Design library and gallery:** everything you've designed, plus saved references and styles, lives in the Library. Browse templates, design systems and style cards others shared, and "Start from this" copies one for you to keep editing. Share your own with "Share to the gallery": it's checked, zipped and submitted on a web page, and listed once reviewed. The gallery catalog comes from npm mirrors and is used only when its signature and checksums match; to keep it offline, turn on "Design library offline" on the Plugins page.
+- **Your brand, and real code:** give a site URL to extract a brand design system and design with it from then on; turn a finished design into React / Vue / HTML (mini programs straight into uni-app or native WeChat code, HBuilderX projects included), compared screen by screen against the design.
 
 See [all features](https://github.com/OrderG-X/dsh-design-studio/blob/main/docs/features.md) for every feature, the tool parameters and the security design, and [development](https://github.com/OrderG-X/dsh-design-studio/blob/main/docs/development.md) for dev setup and tests.
 

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-<img src="assets/hero.jpg" alt="设计工作台：一句话做出三个方向，挑一个做全套，点一下就改" width="480" />
+![设计工作台：一句话做出三个方向，挑一个做全套，点一下就改](assets/hero-sm.jpg)
 
 <p>
   <a href="https://github.com/OrderG-X/dsh-design-studio/releases"><img src="https://img.shields.io/github/v/release/OrderG-X/dsh-design-studio?label=release&color=4D6BFE" alt="release" /></a>
@@ -27,7 +27,7 @@
 
 **需要什么**：DSH 桌面版、网页版都能用，Mac、Windows 都行。「设计体检」要电脑上装着 Chrome 或 Edge。
 
-连不上 npm 时 DSH 会自动换国内镜像。更新：在「插件」页卸载，再添加一次。新版发布后大约一天，按包名才装得到；急的话填发布包地址 `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`（要能连上 GitHub）。
+连不上 npm 时 DSH 会自动换国内镜像。更新：DSH 0.2.2 起，在「插件」页点开它，点「更新到 …」；更老的 DSH 先卸载，再添加一次。新版发布后大约一天，按包名才装得到；急的话卸载后填发布包地址 `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`（要能连上 GitHub），不过这样装的以后不能点更新。
 
 ## 三步上手
 
@@ -43,7 +43,8 @@
 - **设计体检**：一键查文字溢出、对比度不够、按钮太小、字太小，问题直接标在页面上；模型做完也会自己查一遍再改。
 - **版本和对比**：每轮自动存一版，左右拖动对比，随时回到任意一版。
 - **导出和手机上看**：导出展示图、PDF、PPT（屏和屏之间的跳转照样能点）；扫码在手机上按真机尺寸看。
-- **照品牌风格做、转成代码**：给官网地址，提一套品牌设计系统，以后都照它做；做好的设计转成 React / Vue / HTML，逐屏和设计稿比对。
+- **设计库和设计市场**：以前做过的设计、收的参考图和风格都在「设计库」里；市场里逛大家分享的模板、设计系统和风格卡，点「用这个开始」复制一份接着改。自己做的点「分享到设计市场」，查过打成 zip，在网页里交上去，审过就上架。市场目录从 npm 镜像取，签了名、核对过才用；不想让它联网，在插件页打开「设计库不联网」。
+- **照品牌风格做、转成代码**：给官网地址，提一套品牌设计系统，以后都照它做；做好的设计转成 React / Vue / HTML，小程序直接转成 uni-app 或原生小程序代码（HBuilderX 建的项目也认得出），逐屏和设计稿比对。
 
 全部功能、工具参数和安全设计见[完整功能](https://github.com/OrderG-X/dsh-design-studio/blob/main/docs/功能详解.md)；开发和测试见[开发说明](https://github.com/OrderG-X/dsh-design-studio/blob/main/docs/开发.md)。
 

package/cordis.patch.yml

@@ -7,6 +7,11 @@
     # 自动打开预览（模型写了设计用的 HTML、开发服务器起来时）
     - id: dsh-design-studio-auto
       name: dsh-design-studio/auto
+    # 设计库不联网（默认关）：打开后「市场」不访问任何网址，只看下载过的。
+    # 反着来是故意的：老版本升级上来没有这一行时，市场照常联网
+    - id: dsh-design-studio-offline
+      name: dsh-design-studio/offline
+      disabled: true
     # 其他模式（标准、创造 …）也能用预览工具、设计技能；设计模式里自带一份，不受这两行影响
     - id: dsh-design-studio-tool
       name: dsh-design-studio/tool

package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/app.css

@@ -0,0 +1,64 @@
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5; color: var(--color-text); -webkit-font-smoothing: antialiased; }
+.paper, body {
+  background-color: var(--color-bg);
+  background-image: radial-gradient(rgba(120, 72, 30, .07) .8px, transparent 1.3px), radial-gradient(rgba(120, 72, 30, .05) .8px, transparent 1.3px);
+  background-size: 9px 9px, 13px 13px;
+  background-position: 0 0, 4px 6px;
+}
+h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
+ol, ul { list-style: none; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
+svg { display: block; }
+.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
+.ico.sm { width: 16px; height: 16px; stroke-width: 2; }
+.serif { font-family: var(--font-serif); }
+.num { font-family: -apple-system, "SF Pro Text", var(--font-sans); font-variant-numeric: tabular-nums; }
+
+/* 小程序骨架：状态栏 44 + 导航栏 44，右边 101 让给胶囊 */
+.mp-top { position: sticky; top: 0; z-index: 10; }
+.mp-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 32px; font: 600 15px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
+.mp-sys { display: flex; align-items: center; gap: 6px; }
+.mp-sys svg { fill: currentColor; }
+.mp-nav { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 101px; }
+.mp-nav h1 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mp-nav.custom { justify-content: flex-start; padding-left: 16px; gap: 8px; }
+.mp-back { position: absolute; left: 4px; top: 0; width: 44px; height: 44px; display: grid; place-items: center; }
+.mp-page { padding: 0 16px 100px; }
+
+.mp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: 84px; padding-bottom: 34px; display: flex; background: var(--color-surface); border-top: 1px solid var(--color-line); }
+.mp-tabbar > a, .mp-tabbar > .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--text-xs); color: var(--color-muted); }
+.mp-tabbar > .on { color: var(--color-primary); font-weight: 600; }
+.mp-tabbar > .on .ico { fill: var(--color-primary-soft); }
+
+.mp-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 16px 42px; background: var(--color-surface); box-shadow: 0 -1px 0 var(--color-line), 0 -8px 24px rgba(120, 72, 30, .08); }
+
+/* 通用件 */
+.card { background: var(--color-surface); border-radius: var(--radius-md); padding: 16px; }
+.card + .card { margin-top: 12px; }
+.card-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 12px; }
+.card-head h2 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 600; }
+.muted { color: var(--color-muted); }
+.btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-body); font-weight: 600; box-shadow: 0 6px 16px rgba(169, 84, 42, .28); white-space: nowrap; }
+.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: var(--radius-full); border: 1.5px solid var(--color-text); font-size: var(--text-md); font-weight: 600; white-space: nowrap; }
+.price { font-family: -apple-system, "SF Pro Text", var(--font-sans); font-weight: 700; color: var(--color-primary); white-space: nowrap; }
+.price small { font-size: var(--text-sm); margin-right: 1px; }
+.dash { border: 0; border-top: 1.5px dashed var(--color-line); margin: 12px 0; }
+
+/* 步进器：看得见的圆 26，点击区 44 */
+.stepper { display: flex; align-items: center; margin-right: -9px; }
+.step { width: 44px; height: 44px; display: grid; place-items: center; }
+.step i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
+.step.minus i { border: 1.5px solid var(--color-muted); color: var(--color-muted); }
+.step.plus i { background: var(--color-primary); color: var(--color-on-primary); }
+.step .ico { width: 16px; height: 16px; stroke-width: 2.2; }
+.qty { min-width: 18px; text-align: center; font-weight: 600; font-size: var(--text-body); }
+.stepper.solo { margin-right: -9px; }
+
+/* 碗面小图 */
+.pic { position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: var(--radius-hand); background: var(--color-primary-soft); display: grid; place-items: center; }
+.pic.green { background: var(--color-accent-soft); }
+.pic.paper { background-color: var(--color-paper); }
+.bowl { width: 70px; height: 70px; }

package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/cart.html

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="dsh-design" content="miniprogram">
+<title>购物车 · 巷口面馆</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="app.css">
+</head>
+<body class="cart-page">
+<header class="mp-top paper">
+  <div class="mp-status"><span>9:41</span><span class="mp-sys"><svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg><svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><path d="M8 2.2c2.5 0 4.8 1 6.5 2.6l1.2-1.3A11 11 0 0 0 8 .4 11 11 0 0 0 .3 3.5l1.2 1.3A9.3 9.3 0 0 1 8 2.2z"/><path d="M8 5.8c1.5 0 2.9.6 3.9 1.5l1.2-1.3A7.4 7.4 0 0 0 8 4a7.4 7.4 0 0 0-5.1 2l1.2 1.3c1-.9 2.4-1.5 3.9-1.5z"/><path d="M8 9.3c.6 0 1.2.2 1.6.6L8 11.6 6.4 9.9c.4-.4 1-.6 1.6-.6z"/></svg><svg width="27" height="13" viewBox="0 0 27 13" aria-hidden="true"><rect x=".5" y=".5" width="23" height="12" rx="3.5" fill="none" stroke="currentColor" opacity=".45"/><rect x="2" y="2" width="18" height="9" rx="2"/><path d="M25 4.5v4c.8-.3 1.5-1.1 1.5-2s-.7-1.7-1.5-2z" opacity=".5"/></svg></span></div>
+  <div class="mp-nav"><a class="mp-back" href="menu.html" aria-label="返回点单"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></a><h1>购物车</h1></div>
+</header>
+<main class="mp-page">
+  <div class="seg" role="tablist" aria-label="用餐方式">
+    <button class="seg-item on" role="tab" aria-selected="true"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 11.5h17a8.5 8.5 0 0 1-17 0z"/><path d="M9 20.5h6"/><path d="M12.5 3.5l-2.5 8M18.5 4l-4.5 7.5"/></svg><span><b>堂食</b><small>到店吃，叫号取面</small></span></button>
+    <button class="seg-item" role="tab" aria-selected="false"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8.5h13l-1 12h-11z"/><path d="M9 10.5V7a3 3 0 0 1 6 0v3.5"/></svg><span><b>外带</b><small>打包 +¥1</small></span></button>
+  </div>
+
+  <section class="card items">
+    <header class="card-head"><h2>已选 4 件</h2><button class="text-btn">清空</button></header>
+    <div class="line">
+      <div class="pic"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M31 21c-3.5-4 3-6.5-.5-11M40.5 18.5c-3.5-4 3-6.5-.5-11M50 21c-3.5-4 3-6.5-.5-11" fill="none" stroke="#C2A48B" stroke-width="2" stroke-linecap="round"/><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#9C4A26" stroke="#2B1D14" stroke-width="2"/><path d="M17 41.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path d="M20 37.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path transform="translate(27 36) rotate(-8)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path transform="translate(38 33.5) rotate(6)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path transform="translate(33 42) rotate(2)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path d="M48 34c4-3.2 9.5-2.4 12 .8-3 2.6-8.6 2.8-12-.8z" fill="#7C9A5E" stroke="#2B1D14" stroke-width="1.2"/><path d="M49.5 34.2l9 .3" stroke="#E4EAD8" stroke-width="1.2" stroke-linecap="round"/><circle cx="46" cy="42" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="52" cy="40.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="24" cy="41.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="56" cy="43.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="42" cy="45" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="20" cy="38" r="1.1" fill="#E0763A"/><circle cx="58" cy="39" r="1.1" fill="#E0763A"/></svg></div>
+      <div class="line-body">
+        <h3>红烧牛肉面</h3>
+        <p class="spec-txt">中碗 · 微辣 · 加煎蛋</p>
+        <div class="line-foot"><span class="price"><small>¥</small>29</span><div class="stepper"><button class="step minus" aria-label="红烧牛肉面减一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 12h11"/></svg></i></button><span class="qty">1</span><button class="step plus" aria-label="红烧牛肉面加一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5v11M6.5 12h11"/></svg></i></button></div></div>
+      </div>
+    </div>
+    <div class="opts">
+      <p class="opt-label">辣度</p>
+      <div class="opt-row"><button class="chip"><span>不辣</span></button><button class="chip on" aria-pressed="true"><span>微辣</span></button><button class="chip"><span>中辣</span></button><button class="chip"><span>特辣</span></button></div>
+      <p class="opt-label">加料</p>
+      <div class="opt-row"><button class="chip on" aria-pressed="true"><span>煎蛋 +3</span></button><button class="chip"><span>牛肉 +8</span></button><button class="chip"><span>青菜 +2</span></button><button class="chip"><span>加面 +2</span></button></div>
+    </div>
+    <hr class="dash">
+    <div class="line">
+      <div class="pic green"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#E6BE72" stroke="#2B1D14" stroke-width="2"/><path d="M17 40c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0M19 36c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0M22 44c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#C99A4E" stroke-width="1.6" stroke-linecap="round"/><path d="M27 34.5l9 3.2M40 33.5l8.4 4.4M31 41l8 1.6M45 40.5l8-2.2" stroke="#3F5A2A" stroke-width="2.4" stroke-linecap="round"/><path d="M28 38.5c4 1 9 .6 13-1.2" fill="none" stroke="#8A4A22" stroke-width="1.6" stroke-linecap="round" opacity=".8"/></svg></div>
+      <div class="line-body">
+        <h3>葱油拌面</h3>
+        <p class="spec-txt">标准份</p>
+        <div class="line-foot"><span class="price"><small>¥</small>28</span><div class="stepper"><button class="step minus" aria-label="葱油拌面减一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 12h11"/></svg></i></button><span class="qty">2</span><button class="step plus" aria-label="葱油拌面加一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5v11M6.5 12h11"/></svg></i></button></div></div>
+      </div>
+    </div>
+    <hr class="dash">
+    <div class="line">
+      <div class="pic green"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><ellipse cx="40" cy="47" rx="32" ry="13" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2"/><ellipse cx="40" cy="45.5" rx="22" ry="7.5" fill="none" stroke="#A9542A" stroke-width="1.4" stroke-dasharray="2.5 3"/><g transform="translate(27 40) rotate(-12)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><g transform="translate(37 37) rotate(8)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><g transform="translate(47 40) rotate(-4)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><g transform="translate(33 46) rotate(14)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><g transform="translate(44 46) rotate(-10)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><g transform="translate(53 44) rotate(6)"><rect x="-5" y="-3.4" width="10" height="6.8" rx="2.4" fill="#6F9150" stroke="#2B1D14" stroke-width="1.1"/><rect x="-3" y="-1.6" width="6" height="3.2" rx="1.4" fill="#DCE7C6"/></g><circle cx="31" cy="42.5" r="1.2" fill="#D9452B"/><circle cx="50" cy="38.5" r="1.2" fill="#D9452B"/><circle cx="42" cy="42" r="1.1" fill="#FFFDF7" stroke="#2B1D14" stroke-width=".6"/></svg></div>
+      <div class="line-body">
+        <h3>凉拌黄瓜</h3>
+        <p class="spec-txt">蒜香 · 微辣</p>
+        <div class="line-foot"><span class="price"><small>¥</small>8</span><div class="stepper"><button class="step minus" aria-label="凉拌黄瓜减一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 12h11"/></svg></i></button><span class="qty">1</span><button class="step plus" aria-label="凉拌黄瓜加一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5v11M6.5 12h11"/></svg></i></button></div></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="card">
+    <header class="card-head"><h2>口味备注</h2><span class="muted small">给煮面师傅看</span></header>
+    <div class="quick"><button class="chip on" aria-pressed="true"><span>不要香菜</span></button><button class="chip on" aria-pressed="true"><span>汤多一点</span></button><button class="chip"><span>面硬一点</span></button><button class="chip"><span>不要葱</span></button></div>
+    <div class="note"><p>面煮软一点，谢谢老板</p><span class="num">10/50</span></div>
+  </section>
+
+  <section class="card sum">
+    <p><span>商品小计</span><span class="num">¥65</span></p>
+    <p><span><svg class="ico sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 12.5V4.5h8l9 9-8 8z"/><circle cx="8" cy="9" r="1.4"/></svg>满 60 减 5</span><span class="num minus">−¥5</span></p>
+    <p><span>打包费</span><span class="muted">堂食不收</span></p>
+  </section>
+</main>
+
+<div class="mp-actionbar">
+  <div class="total"><p>合计 <b class="num">¥60</b></p><small>已优惠 ¥5</small></div>
+  <a class="btn-primary go" href="order.html">去结算</a>
+</div>
+
+<style>
+.cart-page .mp-page { padding-top: 8px; padding-bottom: 132px; }
+.small { font-size: var(--text-sm); }
+.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: var(--radius-lg); background: var(--color-paper); margin-bottom: 12px; }
+.seg-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 14px; color: var(--color-muted); text-align: left; }
+.seg-item b { display: block; font-family: var(--font-serif); font-size: var(--text-body); color: var(--color-text); line-height: 1.3; }
+.seg-item small { display: block; font-size: var(--text-xs); line-height: 1.3; }
+.seg-item.on { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }
+.seg-item.on small { color: var(--color-muted); }
+
+.text-btn { height: 44px; min-width: 44px; padding: 0 2px 0 12px; margin: -10px -2px -10px 0; font-size: var(--text-md); color: var(--color-muted); }
+.line { display: flex; gap: 12px; }
+.line .pic { width: 68px; height: 68px; }
+.line .bowl { width: 62px; height: 62px; }
+.line-body { flex: 1; min-width: 0; }
+.line-body h3 { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 700; line-height: 1.35; }
+.spec-txt { font-size: var(--text-sm); color: var(--color-muted); }
+.line-foot { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 2px; }
+.line-foot .price { font-size: var(--text-lg); }
+
+.opts { margin-top: 10px; padding: 8px 12px 4px; border-radius: 12px; background: var(--color-bg); }
+.opt-label { font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
+.opt-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+.chip { height: 44px; display: grid; place-items: stretch; align-content: center; }
+.chip > span { display: grid; place-items: center; height: 32px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; }
+.chip.on > span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-deep); font-weight: 600; }
+
+.quick { display: flex; flex-wrap: wrap; gap: 0 8px; }
+.quick .chip > span { padding: 0 12px; border-radius: var(--radius-full); }
+.note { position: relative; margin-top: 8px; min-height: 72px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-line); background: var(--color-bg); font-size: var(--text-md); }
+.note span { position: absolute; right: 12px; bottom: 8px; font-size: var(--text-xs); color: var(--color-muted); }
+
+.sum p { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-md); line-height: 2; }
+.sum p > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
+.sum .ico { color: var(--color-primary); }
+.sum .minus { color: var(--color-primary-deep); font-weight: 600; }
+
+.total { flex: 1; }
+.total p { font-size: var(--text-md); }
+.total b { font-size: var(--text-xl); color: var(--color-primary); }
+.total small { display: block; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.2; }
+.go { min-width: 148px; }
+</style>
+</body>
+</html>

package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/design.json

@@ -0,0 +1,56 @@
+{
+  "format": 1,
+  "type": "template",
+  "title": {
+    "zh": "巷口面馆",
+    "en": "Alley Noodles"
+  },
+  "description": {
+    "zh": "街边面馆的点单小程序：分类点单、口味备注、取餐叫号，手绘碗面配纸感底色",
+    "en": "An ordering mini program for a street-corner noodle shop: menu by category, taste notes, pickup number, with hand-drawn bowls on paper tones"
+  },
+  "kind": "miniprogram",
+  "screens": [
+    {
+      "file": "menu.html",
+      "title": {
+        "zh": "点单",
+        "en": "Menu"
+      }
+    },
+    {
+      "file": "cart.html",
+      "title": {
+        "zh": "购物车",
+        "en": "Cart"
+      }
+    },
+    {
+      "file": "order.html",
+      "title": {
+        "zh": "订单",
+        "en": "Order"
+      }
+    }
+  ],
+  "style": "warm",
+  "categories": [
+    "food"
+  ],
+  "tags": [
+    "menu",
+    "cart",
+    "checkout",
+    "illustration"
+  ],
+  "lang": "zh",
+  "license": "CC0-1.0",
+  "author": {
+    "login": "orderg-x",
+    "id": 271418316
+  },
+  "ai": {
+    "generated": true,
+    "tool": "dsh-design-studio@0.11.0"
+  }
+}

package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/menu.html

@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="dsh-design" content="miniprogram">
+<title>点单 · 巷口面馆</title>
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="app.css">
+</head>
+<body>
+<header class="mp-top paper">
+  <div class="mp-status"><span>9:41</span><span class="mp-sys"><svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg><svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><path d="M8 2.2c2.5 0 4.8 1 6.5 2.6l1.2-1.3A11 11 0 0 0 8 .4 11 11 0 0 0 .3 3.5l1.2 1.3A9.3 9.3 0 0 1 8 2.2z"/><path d="M8 5.8c1.5 0 2.9.6 3.9 1.5l1.2-1.3A7.4 7.4 0 0 0 8 4a7.4 7.4 0 0 0-5.1 2l1.2 1.3c1-.9 2.4-1.5 3.9-1.5z"/><path d="M8 9.3c.6 0 1.2.2 1.6.6L8 11.6 6.4 9.9c.4-.4 1-.6 1.6-.6z"/></svg><svg width="27" height="13" viewBox="0 0 27 13" aria-hidden="true"><rect x=".5" y=".5" width="23" height="12" rx="3.5" fill="none" stroke="currentColor" opacity=".45"/><rect x="2" y="2" width="18" height="9" rx="2"/><path d="M25 4.5v4c.8-.3 1.5-1.1 1.5-2s-.7-1.7-1.5-2z" opacity=".5"/></svg></span></div>
+  <div class="mp-nav custom">
+    <span class="seal serif" aria-hidden="true">巷</span>
+    <span class="brand serif">巷口面馆</span>
+    <button class="branch">老街店<svg class="ico sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button>
+  </div>
+</header>
+<main class="menu">
+  <section class="shop">
+    <div class="shop-main">
+      <p class="shop-status"><i class="dot" aria-hidden="true"></i>营业中 · 10:00–21:30 · 距你 280 米</p>
+      <p class="shop-note serif">牛骨汤每天现熬 8 小时</p>
+      <div class="coupons"><span class="coupon">满 60 减 5</span><span class="coupon">满 99 减 12</span></div>
+    </div>
+    <svg class="shopfront" viewBox="0 0 96 84" aria-hidden="true">
+<path d="M14 31v45h68V31" fill="#F3E3D0" stroke="#2B1D14" stroke-width="2" stroke-linejoin="round"/>
+<path d="M8 28l7-15h66l7 15z" fill="#A9542A" stroke="#2B1D14" stroke-width="2" stroke-linejoin="round"/>
+<path d="M26.5 13.5L24 28M40 13.5L39 28M54 13.5l.6 14.5M68 13.5l2 14.5" stroke="#FFF9F2" stroke-width="3.2" stroke-linecap="round"/>
+<path d="M8 28q5 7 10 0t10 0 10 0 10 0 10 0 10 0 10 0 10 0" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linejoin="round"/>
+<rect x="34" y="3" width="28" height="11" rx="2" fill="#FFF9F2" stroke="#2B1D14" stroke-width="1.8"/>
+<path d="M39 8.5h3M45 7v3.5M49 8.5h3M55.5 7.5v2.5" stroke="#A9542A" stroke-width="1.8" stroke-linecap="round"/>
+<rect x="21" y="44" width="24" height="18" rx="2" fill="#FFF9F2" stroke="#2B1D14" stroke-width="1.8"/>
+<path d="M25 52h16c-.6 4.6-3.6 7-8 7s-7.4-2.4-8-7z" fill="#F4DFD0" stroke="#2B1D14" stroke-width="1.4"/><path d="M31 49.5c-1-1.4 1-2.2 0-3.6M35.5 49.5c-1-1.4 1-2.2 0-3.6" fill="none" stroke="#C2A48B" stroke-width="1.4" stroke-linecap="round"/>
+<path d="M55 76V52a7 7 0 0 1 14 0v24" fill="#6E5A4B" stroke="#2B1D14" stroke-width="1.8"/><circle cx="65" cy="65" r="1.2" fill="#F3E3D0"/>
+<path d="M88 30v4" stroke="#2B1D14" stroke-width="1.6"/><ellipse cx="88" cy="41" rx="5.5" ry="7" fill="#D9652F" stroke="#2B1D14" stroke-width="1.6"/><path d="M85 41h6" stroke="#2B1D14" stroke-width="1" opacity=".5"/><path d="M88 48v4" stroke="#2B1D14" stroke-width="1.6"/>
+<path d="M3 76.5h90" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/>
+<path d="M76 76c0-6 5-6 5-11M80 76c0-4 3-4 3-7" fill="none" stroke="#5E7A4A" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
+  </section>
+
+  <div class="board">
+    <aside class="cats" aria-label="分类">
+      <button class="cat"><svg class="ico sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c3.9 0 6.5-2.6 6.5-6.2 0-3.3-2.3-5.6-3.9-7.8-.4 2-1.4 3.2-2.6 3.8.2-3-1.2-5.6-3.8-7.3.2 3.1-1.6 5-3 7A7.3 7.3 0 0 0 5.5 15c0 3.5 2.6 6 6.5 6z"/></svg>热卖</button>
+      <button class="cat on" aria-current="true">招牌面<b class="cat-n">1</b></button>
+      <button class="cat">汤面</button>
+      <button class="cat">拌面<b class="cat-n">2</b></button>
+      <button class="cat">浇头加料</button>
+      <button class="cat">小菜<b class="cat-n">1</b></button>
+      <button class="cat">饮品</button>
+    </aside>
+    <div class="list">
+      <header class="sec-head"><h2 class="serif">招牌面</h2><span>老汤慢熬，面现切</span></header>
+
+      <article class="dish">
+        <div class="pic "><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M31 21c-3.5-4 3-6.5-.5-11M40.5 18.5c-3.5-4 3-6.5-.5-11M50 21c-3.5-4 3-6.5-.5-11" fill="none" stroke="#C2A48B" stroke-width="2" stroke-linecap="round"/><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#9C4A26" stroke="#2B1D14" stroke-width="2"/><path d="M17 41.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path d="M20 37.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path transform="translate(27 36) rotate(-8)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path transform="translate(38 33.5) rotate(6)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path transform="translate(33 42) rotate(2)" d="M-6 0c3.5-2.6 9-2.3 11.6.3C4 3.2-2.4 3.8-6 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path d="M48 34c4-3.2 9.5-2.4 12 .8-3 2.6-8.6 2.8-12-.8z" fill="#7C9A5E" stroke="#2B1D14" stroke-width="1.2"/><path d="M49.5 34.2l9 .3" stroke="#E4EAD8" stroke-width="1.2" stroke-linecap="round"/><circle cx="46" cy="42" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="52" cy="40.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="24" cy="41.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="56" cy="43.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="42" cy="45" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="20" cy="38" r="1.1" fill="#E0763A"/><circle cx="58" cy="39" r="1.1" fill="#E0763A"/></svg></div>
+        <div class="dish-body">
+          <h3 class="dish-name">红烧牛肉面</h3>
+          <p class="dish-desc">牛腱慢炖四小时，汤浓肉烂</p>
+          <p class="dish-meta"><span class="hot">招牌</span>月售 1200+</p>
+          <div class="dish-foot">
+            <span class="price"><small>¥</small>26</span>
+            <button class="spec"><span>选规格<b class="spec-n">1</b></span></button>
+          </div>
+        </div>
+      </article>
+
+      <article class="dish">
+        <div class="pic "><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M31 21c-3.5-4 3-6.5-.5-11M40.5 18.5c-3.5-4 3-6.5-.5-11M50 21c-3.5-4 3-6.5-.5-11" fill="none" stroke="#C2A48B" stroke-width="2" stroke-linecap="round"/><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#C85A32" stroke="#2B1D14" stroke-width="2"/><path d="M17 41.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F4DDA4" stroke-width="2.2" stroke-linecap="round"/><path d="M20 37.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F4DDA4" stroke-width="2.2" stroke-linecap="round"/><path d="M24 34.5a5.4 5.4 0 0 1 10 2.2z" fill="#D9452B" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><path d="M44 33a5.4 5.4 0 0 1 9.6 3.4z" fill="#D9452B" stroke="#2B1D14" stroke-width="1.2" stroke-linejoin="round"/><rect x="33" y="38" width="7" height="6" rx="1.6" fill="#7A3A1C" stroke="#2B1D14" stroke-width="1.2" transform="rotate(-8 36 41)"/><rect x="47" y="39" width="7" height="6" rx="1.6" fill="#7A3A1C" stroke="#2B1D14" stroke-width="1.2" transform="rotate(10 50 42)"/><circle cx="28" cy="42" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="57" cy="37" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="42" cy="35" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="22" cy="39" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/></svg></div>
+        <div class="dish-body">
+          <h3 class="dish-name">番茄牛腩面</h3>
+          <p class="dish-desc">整颗番茄熬汤，酸甜开胃</p>
+          <p class="dish-meta">月售 860</p>
+          <div class="dish-foot">
+            <span class="price"><small>¥</small>28</span>
+            <button class="spec"><span>选规格</span></button>
+          </div>
+        </div>
+      </article>
+
+      <article class="dish">
+        <div class="pic green"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M31 21c-3.5-4 3-6.5-.5-11M40.5 18.5c-3.5-4 3-6.5-.5-11M50 21c-3.5-4 3-6.5-.5-11" fill="none" stroke="#C2A48B" stroke-width="2" stroke-linecap="round"/><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#EAD8B4" stroke="#2B1D14" stroke-width="2"/><path d="M17 41.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F7E6B8" stroke-width="2.2" stroke-linecap="round"/><path d="M20 37.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F7E6B8" stroke-width="2.2" stroke-linecap="round"/><path d="M24 35.5c2-1.5 4 .8 6-.4M27 40.5c2.4-1.2 4 1 6.4-.2M45 35c2-1.4 4 1 6-.2M50 41c2.2-1.3 4 .8 6.2-.3" fill="none" stroke="#5E7A4A" stroke-width="2" stroke-linecap="round"/><path d="M35 37l6 1.5M37 41.5l6.4.8M41 34.5l5 1.8" stroke="#C98D63" stroke-width="2.2" stroke-linecap="round"/></svg></div>
+        <div class="dish-body">
+          <h3 class="dish-name">雪菜肉丝面</h3>
+          <p class="dish-desc">清汤打底，雪菜脆口</p>
+          <p class="dish-meta">月售 540</p>
+          <div class="dish-foot">
+            <span class="price"><small>¥</small>18</span>
+            <button class="spec"><span>选规格</span></button>
+          </div>
+        </div>
+      </article>
+      <article class="dish soldout">
+        <div class="pic paper"><div class="fade"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#B9774A" stroke="#2B1D14" stroke-width="2"/><path d="M17 41.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path d="M20 37.5c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#F2D795" stroke-width="2.2" stroke-linecap="round"/><path d="M23 37c2-3.2 8-3.6 11-.6-1.4 3.4-8.6 4-11 .6z" fill="#5A2A14" stroke="#2B1D14" stroke-width="1.2"/><path d="M38 35c2-3.4 8.4-3.6 11.4-.4-1.6 3.4-9 4-11.4.4z" fill="#5A2A14" stroke="#2B1D14" stroke-width="1.2"/><path d="M26 36.2l3.6-.8M41.4 34l4-.8" stroke="#C98D63" stroke-width="1.1" stroke-linecap="round"/><circle cx="52" cy="41" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="30" cy="42.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/><circle cx="57" cy="37.5" r="1.7" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".8"/></svg></div><span class="stamp serif">售罄</span></div>
+        <div class="dish-body">
+          <h3 class="dish-name">苏式爆鱼面</h3>
+          <p class="dish-desc">青鱼现炸，甜口酱汁</p>
+          <p class="dish-meta">每天限 30 碗</p>
+          <div class="dish-foot"><span class="price off"><small>¥</small>24</span><span class="later">明早 10 点再来</span></div>
+        </div>
+      </article>
+      <header class="sec-head"><h2 class="serif">拌面</h2><span>拌匀了再吃</span></header>
+
+      <article class="dish">
+        <div class="pic green"><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#E6BE72" stroke="#2B1D14" stroke-width="2"/><path d="M17 40c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0M19 36c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0M22 44c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#C99A4E" stroke-width="1.6" stroke-linecap="round"/><path d="M27 34.5l9 3.2M40 33.5l8.4 4.4M31 41l8 1.6M45 40.5l8-2.2" stroke="#3F5A2A" stroke-width="2.4" stroke-linecap="round"/><path d="M28 38.5c4 1 9 .6 13-1.2" fill="none" stroke="#8A4A22" stroke-width="1.6" stroke-linecap="round" opacity=".8"/></svg></div>
+        <div class="dish-body">
+          <h3 class="dish-name">葱油拌面</h3>
+          <p class="dish-desc">小葱慢熬出油，酱香浓</p>
+          <p class="dish-meta"><span class="hot">人气</span>月售 980</p>
+          <div class="dish-foot">
+            <span class="price"><small>¥</small>14</span>
+            <div class="stepper"><button class="step minus" aria-label="葱油拌面减一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 12h11"/></svg></i></button><span class="qty">2</span><button class="step plus" aria-label="葱油拌面加一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5v11M6.5 12h11"/></svg></i></button></div>
+          </div>
+        </div>
+      </article>
+
+      <article class="dish">
+        <div class="pic "><svg class="bowl" viewBox="0 0 80 80" aria-hidden="true"><path d="M9.5 39.5c1 16.5 13.5 27 30.5 27s29.5-10.5 30.5-27" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><path d="M16.5 52.5q2.9-2.7 5.8 0t5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0 5.8 0" fill="none" stroke="#A9542A" stroke-width="1.7" stroke-linecap="round"/><path d="M30 66.6c1.5 3 18.5 3 20 0" fill="none" stroke="#2B1D14" stroke-width="2" stroke-linecap="round"/><ellipse cx="40" cy="39.5" rx="31" ry="10" fill="#EDD39A" stroke="#2B1D14" stroke-width="2"/><path d="M17 40c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0 6 2 9 0M20 36c3-2.4 6 2 9 0s6 2 9 0 6 2 9 0 6 2 9 0" fill="none" stroke="#C99A4E" stroke-width="1.6" stroke-linecap="round"/><path d="M29 38.5c0-4.6 5-6.8 11-6.8s11 2.2 11 6.8c-3 2.4-19 2.4-22 0z" fill="#5A3420" stroke="#2B1D14" stroke-width="1.2"/><path d="M53 37.5l8 2.6M54 41.5l7.4 1M20 38l7 2.6M22 42.5l6-.4" stroke="#8FAE6E" stroke-width="2.2" stroke-linecap="round"/></svg></div>
+        <div class="dish-body">
+          <h3 class="dish-name">老式炸酱面</h3>
+          <p class="dish-desc">黄酱干炸，配黄瓜丝</p>
+          <p class="dish-meta">月售 410</p>
+          <div class="dish-foot">
+            <span class="price"><small>¥</small>19</span>
+            <div class="stepper solo"><button class="step plus" aria-label="老式炸酱面加一份"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5v11M6.5 12h11"/></svg></i></button></div>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</main>
+
+<div class="fade-tail" aria-hidden="true"></div>
+<a class="cartbar" href="cart.html" aria-label="购物车，4 件，去结算">
+  <span class="cart-ico"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 8.5h13l-1 12h-11z"/><path d="M9 10.5V7a3 3 0 0 1 6 0v3.5"/></svg><b class="cart-n">4</b></span>
+  <span class="cart-sum"><b class="num">¥60</b><small>已减 ¥5 · 堂食</small></span>
+  <span class="cart-go">选好了</span>
+</a>
+<nav class="mp-tabbar" aria-label="主导航">
+  <a class="on" href="menu.html" aria-current="page"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 11.5h17a8.5 8.5 0 0 1-17 0z"/><path d="M9 20.5h6"/><path d="M12.5 3.5l-2.5 8M18.5 4l-4.5 7.5"/></svg><span>点单</span></a>
+  <a href="order.html"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3.5h12v17l-2.4-1.5-2.4 1.5-2.4-1.5-2.4 1.5L6 20.5z"/><path d="M9 8.5h6M9 12.5h6M9 16h3"/></svg><span>订单</span></a>
+  <span class="tab"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20.5c1.3-3.8 4.1-5.6 7.5-5.6s6.2 1.8 7.5 5.6"/></svg><span>我的</span></span>
+</nav>
+
+<style>
+.seal { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px 11px 8px 12px; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-lg); font-weight: 700; transform: rotate(-4deg); box-shadow: 0 2px 0 var(--color-primary-deep); }
+.brand { font-size: var(--text-xl); font-weight: 700; letter-spacing: .04em; }
+.branch { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 4px 0 6px; font-size: var(--text-sm); color: var(--color-muted); }
+
+.shop { position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 8px 16px 0; padding: 14px 12px 12px 16px; border-radius: var(--radius-hand); background: var(--color-surface); box-shadow: var(--shadow); }
+.shop-main { flex: 1; min-width: 0; }
+.shop-status { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
+.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
+.shop-note { margin-top: 6px; font-size: var(--text-lg); font-weight: 600; }
+.coupons { display: flex; gap: 8px; margin-top: 10px; }
+.coupon { padding: 2px 8px; border: 1px dashed var(--color-primary); border-radius: 6px; font-size: var(--text-sm); color: var(--color-primary-deep); background: var(--color-primary-soft); white-space: nowrap; }
+.shopfront { width: 88px; height: 77px; flex-shrink: 0; margin-bottom: -4px; }
+
+.board { display: grid; grid-template-columns: 84px 1fr; margin-top: 16px; padding-bottom: 196px; background: var(--color-surface); border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 var(--color-line); min-height: 640px; }
+.cats { background: var(--color-paper); border-radius: 20px 0 0 0; padding: 8px 0; }
+.cat { position: relative; width: 100%; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px; font-size: var(--text-md); color: var(--color-muted); text-align: center; line-height: 1.3; }
+.cat .ico { color: var(--color-primary); }
+.cat.on { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
+.cat.on::before { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--color-primary); }
+.cat-n { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); line-height: 16px; font-weight: 600; }
+
+.list { padding: 4px 12px 0; min-width: 0; }
+.sec-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 0 4px; }
+.sec-head h2 { font-size: var(--text-lg); font-weight: 700; }
+.sec-head span { font-size: var(--text-sm); color: var(--color-muted); }
+.dish { display: flex; gap: 12px; padding: 12px 0; }
+.dish + .dish { border-top: 1.5px dashed var(--color-line); }
+.dish-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.dish-name { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 700; line-height: 1.35; }
+.dish-desc { margin-top: 2px; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
+.dish-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-xs); color: var(--color-muted); }
+.hot { padding: 0 5px; border-radius: 4px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; line-height: 16px; }
+.dish-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; height: 44px; margin-bottom: -8px; }
+.dish-foot .price { font-size: var(--text-lg); }
+.spec { position: relative; height: 44px; display: grid; place-items: center; margin-right: -2px; }
+.spec > span { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 600; }
+.spec-n { position: absolute; top: -7px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-text); color: var(--color-surface); border: 2px solid var(--color-surface); font-size: var(--text-xs); line-height: 14px; text-align: center; }
+.soldout .dish-name, .soldout .dish-desc { color: var(--color-muted); }
+.fade { opacity: .42; filter: grayscale(.6); }
+.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 1px 8px; border: 2px solid var(--color-primary); border-radius: 6px; color: var(--color-primary-deep); background: rgba(255, 249, 242, .92); font-size: var(--text-md); font-weight: 700; letter-spacing: .2em; text-indent: .2em; white-space: nowrap; }
+.price.off { color: var(--color-muted); }
+.later { font-size: var(--text-sm); color: var(--color-muted); }
+
+.fade-tail { position: fixed; left: 0; right: 0; bottom: 84px; height: 88px; z-index: 9; pointer-events: none; background: linear-gradient(rgba(255, 249, 242, 0), var(--color-surface) 62%); }
+.cartbar { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 11; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 16px; border-radius: var(--radius-full); background: var(--color-text); color: var(--color-surface); box-shadow: 0 10px 24px rgba(43, 29, 20, .28); }
+.cart-ico { position: relative; width: 40px; height: 40px; margin-top: -18px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); border: 3px solid var(--color-text); }
+.cart-n { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-surface); color: var(--color-primary-deep); font-size: var(--text-xs); line-height: 18px; text-align: center; }
+.cart-sum { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
+.cart-sum b { font-size: var(--text-xl); }
+.cart-sum small { font-size: var(--text-xs); color: var(--color-line); }
+.cart-go { height: 44px; display: grid; place-items: center; padding: 0 22px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; font-size: var(--text-body); }
+</style>
+</body>
+</html>