feat: multi-module iteration

This commit is contained in:
2026-08-04 21:38:49 +08:00
parent 9d96c73246
commit 71f508e02b
1366 changed files with 202004 additions and 0 deletions
@@ -0,0 +1,401 @@
<!DOCTYPE html><html lang="zh-CN" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.coupon-notch {
position: relative;
}
.coupon-notch::before, .coupon-notch::after {
content: '';
position: absolute;
left: -6px;
width: 12px;
height: 12px;
background-color: #faf9f7;
border-radius: 50%;
z-index: 10;
}
.coupon-notch::before { top: -6px; }
.coupon-notch::after { bottom: -6px; }
.glass-header {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed-dim": "#bec9c2",
"error": "#ba1a1a",
"secondary-fixed": "#ffe088",
"on-primary": "#ffffff",
"tertiary-fixed": "#dae5dd",
"surface-container-highest": "#e3e2e0",
"on-secondary-fixed-variant": "#574500",
"background": "#faf9f7",
"on-primary-container": "#ffb9b4",
"on-error-container": "#93000a",
"primary-container": "#a61d24",
"on-primary-fixed-variant": "#910817",
"inverse-surface": "#2f3130",
"on-surface-variant": "#5a413f",
"surface-container-lowest": "#ffffff",
"surface-container": "#efeeec",
"secondary": "#735c00",
"surface-tint": "#b3272c",
"on-secondary": "#ffffff",
"primary": "#820012",
"on-tertiary-fixed": "#141e19",
"ink-black": "#1A1A1A",
"status-blue": "#2A6EBB",
"aged-amber": "#FFBF00",
"outline-variant": "#e2bebc",
"primary-fixed": "#ffdad7",
"surface-variant": "#e3e2e0",
"on-tertiary-fixed-variant": "#3f4943",
"error-container": "#ffdad6",
"heritage-red": "#A61D24",
"tertiary-container": "#4e5852",
"on-tertiary": "#ffffff",
"surface-container-low": "#f4f3f1",
"surface-container-high": "#e9e8e6",
"on-error": "#ffffff",
"on-tertiary-container": "#c2cdc6",
"tertiary": "#37413b",
"inverse-primary": "#ffb3ae",
"surface-dim": "#dadad8",
"inverse-on-surface": "#f1f1ef",
"surface": "#faf9f7",
"secondary-container": "#fed65b",
"subtle-gray": "#999999",
"on-surface": "#1a1c1b",
"success-green": "#2D6A4F",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-fixed": "#241a00",
"surface-bright": "#faf9f7",
"outline": "#8d706e",
"on-primary-fixed": "#410004",
"on-secondary-container": "#745c00",
"secondary-fixed-dim": "#e9c349",
"on-background": "#1a1c1b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"margin-page": "20px",
"base": "8px",
"stack-lg": "32px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"headline-md": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"label-md": ["Inter"],
"headline-lg": ["Manrope"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface min-h-screen pb-32">
<!-- Top Navigation Bar -->
<header class="fixed top-0 w-full z-50 bg-surface/80 glass-header flex justify-between items-center px-margin-page h-14 shadow-sm">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">arrow_back</span>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
</div>
<div class="flex items-center gap-3">
</div>
</header>
<main class="pt-14 px-margin-page">
<!-- Segmented Control Tabs -->
<div class="sticky top-14 bg-background z-40 py-4">
<div class="flex bg-surface-container-high rounded-xl p-1 p-base">
<button class="flex-1 py-2 rounded-lg font-headline-md text-headline-md transition-all bg-surface-container-lowest text-on-surface-variant" id="tab-orders" onclick="switchTab('orders')">
订单列表
</button>
<button class="flex-1 py-2 rounded-lg font-headline-md text-headline-md transition-all bg-white text-heritage-red shadow-sm" id="tab-coupons" onclick="switchTab('coupons')">权益记录</button>
</div>
</div>
<!-- Section: Order List -->
<section class="space-y-stack-md hidden" id="view-orders">
<!-- Filter Bar -->
<div class="flex flex-col gap-3 pb-2">
<div class="flex gap-2 overflow-x-auto hide-scrollbar py-1">
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-heritage-red text-white font-label-md text-label-md">今日</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-white border border-outline-variant text-on-surface-variant font-label-md text-label-md">近7天</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-white border border-outline-variant text-on-surface-variant font-label-md text-label-md">近30天</button>
</div>
<div class="flex gap-2 overflow-x-auto hide-scrollbar border-b border-surface-container-high pb-2">
<button class="whitespace-nowrap px-4 py-1 text-heritage-red font-label-md text-label-md border-b-2 border-heritage-red">全部</button>
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">待发货</button>
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">运输中</button>
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">已完成</button>
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">异常</button>
</div>
</div>
<!-- Order Cards -->
<div class="space-y-4">
<!-- Order Card 1 -->
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
<div class="flex justify-between items-center mb-3">
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310248819</span>
<span class="text-status-blue font-label-md text-label-md font-semibold">运输中</span>
</div>
<div class="flex gap-4 mb-4">
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container" data-alt="A studio photograph of a premium Dukang liquor bottle, featuring intricate traditional Chinese calligraphy on a textured cream label, against a soft amber-lit background that highlights the liquid's clarity and the bottle's elegant crystalline structure. The lighting is sophisticated, emphasizing the heritage quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1EVT8TnXp5-euHdYE4PieQkGaUOGH34yOhVHgAhiegRapxigTThmxCXwWD4hu7UyrzEDokI-4KCsD2U3n4g_XKnGCdY-HuMv9hi_mg-vVewThfq5pBe4hmTTTdV-u6_FJd-GHTBRM4Y0SXq7VAzDIWlDIm0uLr9yR15ROYM_Ue_FRjQ-pIJPE_6vcYaw8dv46lqv6QYT2A0KkPpyzvD7t0EflFolp3xGqEEwOQJ-_aYbBmuPrWrS2KuX5IAZOzBe67UOaecGgSYg">
<div class="flex-1 min-w-0">
<h3 class="font-headline-md text-headline-md text-ink-black truncate">酒祖杜康 · 小封坛 (52°)</h3>
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格:500ml × 6瓶/箱</p>
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥1200权益</div>
</div>
</div>
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
<p class="text-on-surface-variant font-body-md text-body-md truncate">河南省洛阳市涧西区南昌路街道... (张先生)</p>
</div>
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥470.40</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥1,200</p></div></div>
</div>
<!-- Order Card 2 -->
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
<div class="flex justify-between items-center mb-3">
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310237722</span>
<span class="text-success-green font-label-md text-label-md font-semibold">已完成</span>
</div>
<div class="flex gap-4 mb-4">
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container" data-alt="A close-up shot of the Dukang liquor packaging, showing the rich red and gold embossed textures of the box. Professional studio lighting casts gentle shadows, creating a sense of luxury and depth. The aesthetic is clean, minimalist, and deeply rooted in Chinese heritage styling." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJbVMmriyZy1ohZALmg6A_ah4O9Xtdr0iJmjvWUiUE8PqvDmtYDmZHqvR5AgCBI3GcqvJJjsmpotcX8pg3oKpETwZEre8D5CXpPzxIMucigSEIWyIPbx1BjLjqsinxFrA0znyalOfHfnN6-xfsQRTSYQx-1NDz_btNKCmlGVyCJGp3mMVkVCzwqN2l3ITQSNyOMUyDqsQCQB5wog3No7PDfXbgOlGj-NaDlPA1_N-U6MqK5Tu7IHM99OsA6EvwwgP4mF1oBAYpq2o">
<div class="flex-1 min-w-0">
<h3 class="font-headline-md text-headline-md text-ink-black truncate">杜康老酒 · 经典版</h3>
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格:500ml × 12瓶/箱</p>
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥600权益</div>
</div>
</div>
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
<p class="text-on-surface-variant font-body-md text-body-md truncate">郑州市金水区未来路街道办未来大厦...</p>
</div>
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥192.00</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥600</p></div></div>
</div>
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
<div class="flex justify-between items-center mb-3">
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310259901</span>
<span class="text-secondary font-label-md text-label-md font-semibold">待发货</span>
</div>
<div class="flex gap-4 mb-4">
<div class="w-20 h-20 rounded-lg bg-surface-container flex items-center justify-center text-subtle-gray text-[12px]">img</div>
<div class="flex-1 min-w-0">
<h3 class="font-headline-md text-headline-md text-ink-black truncate">杜康老酒·珍藏版</h3>
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格:500ml × 6瓶/箱</p>
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥600权益</div>
</div>
</div>
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
<p class="text-on-surface-variant font-body-md text-body-md truncate">河南省洛阳市涧西区... (王女士)</p>
</div>
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥256.00</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥600</p></div></div>
</div><div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
<div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-2">
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310261122</span>
<span class="bg-error/10 text-error text-[10px] px-1.5 py-0.5 rounded font-bold">配送超时</span>
</div>
<span class="text-error font-label-md text-label-md font-semibold">异常</span>
</div>
<div class="flex gap-4 mb-4">
<div class="w-20 h-20 rounded-lg bg-surface-container flex items-center justify-center text-subtle-gray text-[12px]">img</div>
<div class="flex-1 min-w-0">
<h3 class="font-headline-md text-headline-md text-ink-black truncate">酒祖杜康·小封坛 (52°)</h3>
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格:500ml × 1瓶</p>
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥200权益</div>
</div>
</div>
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
<p class="text-on-surface-variant font-body-md text-body-md truncate">郑州市金水区... (李先生)</p>
</div>
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥78.40</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥200</p></div></div>
</div></div>
</section>
<!-- Section: Coupon Records -->
<section class="space-y-4 block" id="view-coupons">
<!-- Coupon Summary Card -->
<div class="relative overflow-hidden bg-primary-container text-white p-6 rounded-2xl shadow-lg">
<div class="relative z-10">
<p class="text-on-primary-container font-label-md text-label-md">累计已发放权益金额</p>
<div class="flex items-baseline gap-1 mt-1">
<span class="text-headline-md">¥</span>
<span class="font-headline-xl text-headline-xl">42,800.00</span>
</div>
<div class="flex gap-6 mt-4">
<div>
<p class="text-on-primary-container/80 text-label-md">本月发放</p>
<p class="font-headline-md">¥8,200</p>
</div>
<div class="w-px h-8 bg-white/20 self-center"></div>
<div>
<p class="text-on-primary-container/80 text-label-md">待核销</p>
<p class="font-headline-md">¥5,400</p>
</div>
</div>
</div>
</div>
<!-- Coupon List -->
<div class="space-y-3">
<!-- Record Item 1 -->
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
<div class="p-4 flex justify-between items-start">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="bg-aged-amber text-white text-[10px] px-1.5 py-0.5 rounded font-bold">已核销</span>
<span class="font-headline-md text-headline-md text-ink-black">¥400.00</span>
</div>
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-24 14:22</p>
<p class="text-on-surface font-body-md text-body-md">持有人: 138****9928</p><p class="text-on-surface-variant font-body-md text-body-md">核销佣金: ¥20.00</p>
</div>
<span class="material-symbols-outlined text-surface-container-highest">receipt_long</span>
</div>
<div class="bg-surface-container-low px-4 py-3 coupon-notch">
<div class="flex flex-col gap-1">
<div class="flex justify-between text-label-md font-label-md">
<span class="text-on-surface-variant">核销门店:</span>
<span class="text-ink-black">洛阳水席园 (总店)</span>
</div>
<div class="flex justify-between text-label-md font-label-md">
<span class="text-on-surface-variant">核销时间:</span>
<span class="text-ink-black">2023-10-25 19:30</span>
</div>
</div>
</div>
</div>
<!-- Record Item 2 -->
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
<div class="p-4 flex justify-between items-start">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="bg-subtle-gray text-white text-[10px] px-1.5 py-0.5 rounded font-bold">待使用</span>
<span class="font-headline-md text-headline-md text-ink-black">¥800.00</span>
</div>
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-24 10:05</p>
<p class="text-on-surface font-body-md text-body-md">持有人: 155****0031</p><p class="text-on-surface-variant font-body-md text-body-md">预估核销佣金: ¥15.00</p>
</div>
<span class="material-symbols-outlined text-surface-container-highest">pending_actions</span>
</div>
</div>
<!-- Record Item 3 -->
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
<div class="p-4 flex justify-between items-start">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="bg-aged-amber text-white text-[10px] px-1.5 py-0.5 rounded font-bold">已核销</span>
<span class="font-headline-md text-headline-md text-ink-black">¥600.00</span>
</div>
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-23 18:12</p>
<p class="text-on-surface font-body-md text-body-md">持有人: 176****4482</p><p class="text-on-surface-variant font-body-md text-body-md">核销佣金: ¥15.00</p>
</div>
<span class="material-symbols-outlined text-surface-container-highest">receipt_long</span>
</div>
<div class="bg-surface-container-low px-4 py-3 coupon-notch">
<div class="flex flex-col gap-1">
<div class="flex justify-between text-label-md font-label-md">
<span class="text-on-surface-variant">核销门店:</span>
<span class="text-ink-black">豫味居中餐厅</span>
</div>
<div class="flex justify-between text-label-md font-label-md">
<span class="text-on-surface-variant">核销时间:</span>
<span class="text-ink-black">2023-10-23 20:15</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation Bar -->
<script>
function switchTab(view) {
const orderBtn = document.getElementById('tab-orders');
const couponBtn = document.getElementById('tab-coupons');
const orderView = document.getElementById('view-orders');
const couponView = document.getElementById('view-coupons');
if (view === 'orders') {
orderBtn.classList.add('bg-white', 'text-heritage-red', 'shadow-sm');
orderBtn.classList.remove('text-on-surface-variant');
couponBtn.classList.remove('bg-white', 'text-heritage-red', 'shadow-sm');
couponBtn.classList.add('text-on-surface-variant');
orderView.classList.remove('hidden');
orderView.classList.add('block');
couponView.classList.add('hidden');
couponView.classList.remove('block');
} else {
couponBtn.classList.add('bg-white', 'text-heritage-red', 'shadow-sm');
couponBtn.classList.remove('text-on-surface-variant');
orderBtn.classList.remove('bg-white', 'text-heritage-red', 'shadow-sm');
orderBtn.classList.add('text-on-surface-variant');
couponView.classList.remove('hidden');
couponView.classList.add('block');
orderView.classList.add('hidden');
orderView.classList.remove('block');
}
}
</script>
</body></html>
@@ -0,0 +1,6 @@
{
"title": "合伙人订单中心页 - 增加待发货与异常示例",
"screenId": "b7c630ed3ae4434a98d9fceaf30574da",
"category": "partner",
"syncedAt": "2026-06-29T08:06:35.653Z"
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB