153 lines
7.1 KiB
HTML
153 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>EwoooC · 商家後台</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="design-tokens.css?v=3">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; background: #f0eee9; }
|
|
#root { width: 100vw; height: 100vh; }
|
|
/* hover 微互動 */
|
|
.momo-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
|
|
.momo-btn:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
|
|
|
|
/* Topbar responsive — inline 確保即使 design-tokens.css 被快取也生效 */
|
|
.momo-topbar { container-type: inline-size; }
|
|
.momo-search-text {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
min-width: 0;
|
|
}
|
|
@container (max-width: 1024px) { .momo-schedule-pill { display: none !important; } }
|
|
@container (max-width: 880px) { .momo-user-meta { display: none !important; } }
|
|
@container (max-width: 720px) { .momo-search-text { display: none !important; } }
|
|
@media (max-width: 1024px) { .momo-schedule-pill { display: none !important; } }
|
|
@media (max-width: 880px) { .momo-user-meta { display: none !important; } }
|
|
@media (max-width: 720px) { .momo-search-text { display: none !important; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
|
|
|
<script type="text/babel" src="app/icons.jsx"></script>
|
|
<script type="text/babel" src="app/data.jsx"></script>
|
|
<script type="text/babel" src="app/ui.jsx"></script>
|
|
<script type="text/babel" src="app/shell.jsx"></script>
|
|
<script type="text/babel" src="app/page-dashboard.jsx"></script>
|
|
<script type="text/babel" src="app/page-campaigns.jsx"></script>
|
|
<script type="text/babel" src="app/page-orders.jsx"></script>
|
|
<script type="text/babel" src="app/page-products.jsx"></script>
|
|
<script type="text/babel" src="app/data-analytics.jsx"></script>
|
|
<script type="text/babel" src="app/page-analytics.jsx"></script>
|
|
<script type="text/babel" src="app/page-analytics-sales.jsx"></script>
|
|
<script type="text/babel" src="app/page-analytics-trends.jsx"></script>
|
|
<script type="text/babel" src="app/modals.jsx"></script>
|
|
<script type="text/babel" src="app/modal-price-history.jsx"></script>
|
|
<script type="text/babel" src="app/main.jsx"></script>
|
|
|
|
<script type="text/babel" data-presets="env,react">
|
|
const { useState, useEffect } = React;
|
|
|
|
function Root() {
|
|
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
|
return (
|
|
<div data-screen-label="EwoooC · 後台原型">
|
|
<MomoApp tweaks={tweaks} setTweak={setTweak} />
|
|
|
|
<TweaksPanel title="Tweaks">
|
|
<TweakSection title="頁面切換">
|
|
<TweakSelect label="目前頁面" value={tweaks.page}
|
|
onChange={v => setTweak('page', v)}
|
|
options={[
|
|
{ value: 'dashboard', label: '儀表板' },
|
|
{ value: 'campaigns', label: '活動看板' },
|
|
{ value: 'analytics-sales', label: '業績分析' },
|
|
{ value: 'analytics-daily', label: '當日業績' },
|
|
{ value: 'analytics-growth', label: '成長分析' },
|
|
{ value: 'analytics-monthly', label: '月份總表' },
|
|
{ value: 'orders', label: '訂單管理' },
|
|
{ value: 'products', label: '商品管理' },
|
|
{ value: 'inventory', label: '庫存管理' },
|
|
{ value: 'members', label: '會員管理' },
|
|
{ value: 'marketing', label: '行銷活動' },
|
|
{ value: 'analytics', label: '數據分析' },
|
|
{ value: 'settings', label: '系統設定' },
|
|
]}
|
|
/>
|
|
</TweakSection>
|
|
|
|
<TweakSection title="側邊欄">
|
|
<TweakToggle label="收合側邊欄" value={tweaks.sidebarCollapsed}
|
|
onChange={v => setTweak('sidebarCollapsed', v)} />
|
|
<TweakRadio label="主題" value={tweaks.sidebarTheme}
|
|
onChange={v => setTweak('sidebarTheme', v)}
|
|
options={[
|
|
{ value: 'light', label: '淺色' },
|
|
{ value: 'dark', label: '深色漸層' },
|
|
]}
|
|
/>
|
|
</TweakSection>
|
|
|
|
<TweakSection title="版面">
|
|
<TweakRadio label="資訊密度" value={tweaks.density}
|
|
onChange={v => setTweak('density', v)}
|
|
options={[
|
|
{ value: 'comfortable', label: '舒適' },
|
|
{ value: 'compact', label: '緊湊' },
|
|
]}
|
|
/>
|
|
<TweakRadio label="卡片樣式" value={tweaks.cardStyle}
|
|
onChange={v => setTweak('cardStyle', v)}
|
|
options={[
|
|
{ value: 'shadow', label: '陰影' },
|
|
{ value: 'flat', label: '平面' },
|
|
{ value: 'bordered', label: '描邊' },
|
|
]}
|
|
/>
|
|
<TweakRadio label="活動 Hero 樣式" value={tweaks.campaignHero}
|
|
onChange={v => setTweak('campaignHero', v)}
|
|
options={[
|
|
{ value: 'simple', label: '簡約' },
|
|
{ value: 'dotted', label: '點陣' },
|
|
{ value: 'inverse', label: '反差' },
|
|
]}
|
|
/>
|
|
<TweakRadio label="主要按鈕" value={tweaks.buttonStyle}
|
|
onChange={v => setTweak('buttonStyle', v)}
|
|
options={[
|
|
{ value: 'gradient', label: '漸層' },
|
|
{ value: 'solid', label: '純色' },
|
|
{ value: 'outline', label: '外框' },
|
|
]}
|
|
/>
|
|
</TweakSection>
|
|
|
|
<TweakSection title="提示">
|
|
<div style={{ fontSize: 11, color: '#6c757d', lineHeight: 1.6, padding: '4px 0' }}>
|
|
按 <kbd style={{ padding: '1px 5px', background: '#f5f7fa', border: '1px solid #dee2e6', borderRadius: 3, fontFamily: 'monospace', fontSize: 10 }}>⌘K</kbd> 開啟命令面板，<br/>
|
|
點商品列表的編輯圖示可開啟編輯彈窗。
|
|
</div>
|
|
</TweakSection>
|
|
</TweaksPanel>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<Root />);
|
|
</script>
|
|
</body>
|
|
</html>
|