jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: 技术支持工单/企微权限/开发版本管理/消息推送等迭代

Browse Source
This commit is contained in:
jacy
2026-08-04 21:32:13 +08:00
parent c8ea5a3119
commit 9d96c73246
1341 changed files with 0 additions and 195605 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_archive/数据报表中心_9894492a/code.html
-357
View File
@@ -1,357 +0,0 @@
<!DOCTYPE html><html lang="zh-CN" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>杜康管理中心 - 数据报表</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500&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">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-fixed": "#ffe088",
"on-tertiary": "#ffffff",
"subtle-gray": "#999999",
"background": "#faf9f7",
"on-primary": "#ffffff",
"on-secondary-fixed": "#241a00",
"on-error": "#ffffff",
"surface-tint": "#b3272c",
"outline": "#8d706e",
"error": "#ba1a1a",
"surface-container-high": "#e9e8e6",
"error-container": "#ffdad6",
"primary-container": "#a61d24",
"inverse-surface": "#2f3130",
"primary-fixed-dim": "#ffb3ae",
"on-surface-variant": "#5a413f",
"on-tertiary-container": "#c2cdc6",
"outline-variant": "#e2bebc",
"on-secondary-container": "#745c00",
"surface-container-lowest": "#ffffff",
"surface-bright": "#faf9f7",
"tertiary-container": "#4e5852",
"on-error-container": "#93000a",
"surface-container": "#efeeec",
"tertiary": "#37413b",
"tertiary-fixed-dim": "#bec9c2",
"ink-black": "#1A1A1A",
"secondary-container": "#fed65b",
"on-primary-container": "#ffb9b4",
"primary": "#820012",
"success-green": "#2D6A4F",
"on-tertiary-fixed-variant": "#3f4943",
"inverse-primary": "#ffb3ae",
"tertiary-fixed": "#dae5dd",
"on-secondary": "#ffffff",
"secondary-fixed-dim": "#e9c349",
"on-primary-fixed": "#410004",
"on-background": "#1a1c1b",
"surface-variant": "#e3e2e0",
"on-surface": "#1a1c1b",
"status-blue": "#2A6EBB",
"aged-amber": "#FFBF00",
"surface-container-low": "#f4f3f1",
"on-secondary-fixed-variant": "#574500",
"surface": "#faf9f7",
"secondary": "#735c00",
"heritage-red": "#A61D24",
"on-primary-fixed-variant": "#910817",
"inverse-on-surface": "#f1f1ef",
"surface-container-highest": "#e3e2e0",
"on-tertiary-fixed": "#141e19",
"surface-dim": "#dadad8",
"primary-fixed": "#ffdad7"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-sm": "4px",
"margin-page": "20px",
"stack-lg": "32px",
"gutter-card": "12px",
"base": "8px",
"stack-md": "16px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"headline-xl": ["Manrope"],
"label-md": ["Inter"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.bento-card {
background: #ffffff;
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
transition: transform 0.2s ease;
}
.bento-card:active {
transform: scale(0.98);
}
.custom-scrollbar::-webkit-scrollbar {
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #e2bebc;
border-radius: 10px;
}
.chart-bar {
transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- Top AppBar (JSON Derived Structure) -->
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center gap-3">
<button class="hover:opacity-80 transition-opacity active:scale-95 transition-transform">
<span class="material-symbols-outlined text-primary dark:text-primary-fixed">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">数据报表</h1>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center gap-1 text-on-surface-variant text-label-md font-label-md border border-outline-variant rounded-full px-3 py-1">
<span class="material-symbols-outlined text-[18px]">location_on</span>
全国
</button>
</div>
</header>
<!-- Content Canvas -->
<main class="pt-20 pb-24 px-margin-page">
<!-- Period Selector -->
<section class="mb-stack-md">
<div class="flex items-center justify-between overflow-x-auto custom-scrollbar gap-2 pb-2">
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-heritage-red text-on-primary text-label-md font-label-md shadow-lg shadow-heritage-red/20">今日</button>
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">本周</button>
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">本月</button>
<button class="whitespace-nowrap px-4 py-2 rounded-full bg-surface-container text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-high transition-colors">自定义</button>
<div class="ml-auto">
<span class="material-symbols-outlined text-subtle-gray">calendar_today</span>
</div>
</div>
</section>
<!-- Key Metrics Grid -->
<section class="grid grid-cols-2 gap-gutter-card mb-stack-lg">
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="text-on-surface-variant text-label-md font-label-md">累计用户</span>
<span class="material-symbols-outlined text-heritage-red/40">groups</span>
</div>
<div>
<div class="text-headline-lg font-headline-lg text-ink-black">12,840</div>
<div class="flex items-center text-[10px] text-success-green mt-1">
<span class="material-symbols-outlined text-[12px]">trending_up</span>
<span class="ml-0.5">12.5%</span>
</div>
</div>
</div>
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="text-on-surface-variant text-label-md font-label-md">累计GMV</span>
<span class="material-symbols-outlined text-aged-amber">payments</span>
</div>
<div>
<div class="text-headline-lg font-headline-lg text-ink-black">¥45.2w</div>
<div class="flex items-center text-[10px] text-success-green mt-1">
<span class="material-symbols-outlined text-[12px]">trending_up</span>
<span class="ml-0.5">8.2%</span>
</div>
</div>
</div>
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="text-on-surface-variant text-label-md font-label-md">总订单量</span>
<span class="material-symbols-outlined text-heritage-red/40">receipt_long</span>
</div>
<div>
<div class="text-headline-lg font-headline-lg text-ink-black">3,492</div>
<div class="flex items-center text-[10px] text-subtle-gray mt-1">
<span class="">较昨日持平</span>
</div>
</div>
</div>
<div class="bento-card p-4 rounded-xl flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<span class="text-on-surface-variant text-label-md font-label-md">核销总数</span>
<span class="material-symbols-outlined text-heritage-red/40">confirmation_number</span>
</div>
<div>
<div class="text-headline-lg font-headline-lg text-ink-black">2,105</div>
<div class="flex items-center text-[10px] text-error mt-1">
<span class="material-symbols-outlined text-[12px]">trending_down</span>
<span class="ml-0.5">2.1%</span>
</div>
</div>
</div>
</section>
<!-- Charts Section: Order Trend -->
<section class="mb-stack-lg">
<div class="flex items-center justify-between mb-4">
<h2 class="font-headline-md text-headline-md text-ink-black">订单趋势</h2>
</div>
<div class="bento-card p-6 rounded-xl aspect-[16/9] flex items-end justify-between relative">
<!-- Simple CSS Chart Simulation -->
<div class="absolute inset-x-6 bottom-12 top-6 border-b border-surface-container-high flex flex-col justify-between pointer-events-none">
<div class="w-full border-t border-surface-container-low border-dashed"></div>
<div class="w-full border-t border-surface-container-low border-dashed"></div>
<div class="w-full border-t border-surface-container-low border-dashed"></div>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-12" style="height: 48px;"></div>
<span class="text-[10px] text-subtle-gray">周一</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-20" style="height: 80px;"></div>
<span class="text-[10px] text-subtle-gray">周二</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-heritage-red rounded-t-full h-32 shadow-lg shadow-heritage-red/10" style="height: 128px;"></div>
<span class="text-[10px] text-on-surface font-bold">周三</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-24" style="height: 96px;"></div>
<span class="text-[10px] text-subtle-gray">周四</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-28" style="height: 112px;"></div>
<span class="text-[10px] text-subtle-gray">周五</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-36" style="height: 144px;"></div>
<span class="text-[10px] text-subtle-gray">周六</span>
</div>
<div class="flex flex-col items-center gap-2 z-10">
<div class="chart-bar w-3 bg-surface-container-high rounded-t-full h-16" style="height: 64px;"></div>
<span class="text-[10px] text-subtle-gray">周日</span>
</div>
</div>
</section>
<!-- Charts Section: User Source -->
<section class="mb-stack-lg">
<h2 class="font-headline-md text-headline-md text-ink-black mb-4">用户来源分布</h2>
<div class="bento-card p-6 rounded-xl flex items-center justify-between">
<div class="relative w-24 h-24">
<!-- Donut Chart Representation -->
<svg class="w-full h-full rotate-[-90deg]" viewBox="0 0 36 36">
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#efeeec" stroke-width="4"></circle>
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#A61D24" stroke-dasharray="60 100" stroke-width="4"></circle>
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#FFBF00" stroke-dasharray="25 100" stroke-dashoffset="-60" stroke-width="4"></circle>
<circle cx="18" cy="18" fill="transparent" r="15.9" stroke="#735c00" stroke-dasharray="15 100" stroke-dashoffset="-85" stroke-width="4"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-label-md font-bold text-ink-black">100%</span>
</div>
</div>
<div class="flex-1 ml-8 space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-heritage-red"></div>
<span class="text-body-md text-on-surface-variant">品鉴会扫码</span>
</div>
<span class="text-label-md font-bold text-ink-black">60%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-aged-amber"></div>
<span class="text-body-md text-on-surface-variant">微信搜索</span>
</div>
<span class="text-label-md font-bold text-ink-black">25%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<span class="text-body-md text-on-surface-variant">社区团购扫码</span>
</div>
<span class="text-label-md font-bold text-ink-black">15%</span>
</div>
</div>
</div>
</section>
<!-- City Performance Ranking -->
<section class="mb-8">
<div class="flex items-center justify-between mb-4">
<h2 class="font-headline-md text-headline-md text-ink-black">城市业绩榜</h2>
<button class="text-heritage-red text-label-md font-bold">查看全部</button>
</div>
<div class="bento-card rounded-xl overflow-hidden">
<div class="px-5 py-4 border-b border-surface-container-low flex text-label-md text-subtle-gray uppercase tracking-wider">
<div class="w-10">排名</div>
<div class="flex-1">城市</div>
<div class="w-24 text-right">GMV (元)</div>
</div>
<div class="divide-y divide-surface-container-low">
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
<div class="w-10 font-bold text-aged-amber">01</div>
<div class="flex-1 font-headline-md text-ink-black">洛阳</div>
<div class="w-24 text-right font-headline-md text-heritage-red">158,400</div>
</div>
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
<div class="w-10 font-bold text-subtle-gray">02</div>
<div class="flex-1 font-headline-md text-ink-black">郑州</div>
<div class="w-24 text-right font-headline-md text-ink-black">124,050</div>
</div>
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
<div class="w-10 font-bold text-subtle-gray">03</div>
<div class="flex-1 font-headline-md text-ink-black">西安</div>
<div class="w-24 text-right font-headline-md text-ink-black">98,200</div>
</div>
<div class="px-5 py-4 flex items-center hover:bg-surface-container-lowest transition-colors">
<div class="w-10 font-bold text-subtle-gray">04</div>
<div class="flex-1 font-headline-md text-ink-black">南阳</div>
<div class="w-24 text-right font-headline-md text-ink-black">72,400</div>
</div>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation (JSON Derived) -->
<script>
// Micro-interactions for the "charts"
document.addEventListener('DOMContentLoaded', () => {
const bars = document.querySelectorAll('.chart-bar');
bars.forEach((bar, index) => {
const finalHeight = bar.style.height || getComputedStyle(bar).height;
bar.style.height = '0px';
setTimeout(() => {
bar.style.height = finalHeight;
}, 100 * index);
});
});
</script>
</body></html>