feat: 技术支持工单/企微权限/开发版本管理/消息推送等迭代
This commit is contained in:
@@ -1,54 +0,0 @@
|
||||
import { useEffect, useState, type ImgHTMLAttributes } from 'react';
|
||||
|
||||
type AppImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
|
||||
src?: string | null;
|
||||
wrapperClassName?: string;
|
||||
fit?: 'cover' | 'contain';
|
||||
};
|
||||
|
||||
export default function AppImage({
|
||||
src,
|
||||
alt = '',
|
||||
className = '',
|
||||
wrapperClassName = '',
|
||||
fit = 'cover',
|
||||
...rest
|
||||
}: AppImageProps) {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const hasSrc = Boolean(src);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
setFailed(!src);
|
||||
}, [src]);
|
||||
|
||||
const showPlaceholder = !hasSrc || failed || !loaded;
|
||||
|
||||
return (
|
||||
<div className={`app-image${wrapperClassName ? ` ${wrapperClassName}` : ''}`}>
|
||||
{showPlaceholder && (
|
||||
<div className="app-image-placeholder" aria-hidden>
|
||||
{hasSrc && !failed ? (
|
||||
<span className="app-image-spinner" />
|
||||
) : (
|
||||
<span className="material-symbols-outlined app-image-fallback-icon">image</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasSrc && !failed && (
|
||||
<img
|
||||
{...rest}
|
||||
src={src!}
|
||||
alt={alt}
|
||||
className={`app-image-img app-image-img--${fit}${loaded ? ' is-loaded' : ''}${className ? ` ${className}` : ''}`}
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => {
|
||||
setFailed(true);
|
||||
setLoaded(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import AppImage from './AppImage';
|
||||
|
||||
type BrandLogoProps = {
|
||||
className?: string;
|
||||
size?: 'default' | 'lg';
|
||||
};
|
||||
|
||||
export default function BrandLogo({ className = '', size = 'default' }: BrandLogoProps) {
|
||||
const sizeClass = size === 'lg' ? 'brand-logo--lg' : '';
|
||||
return (
|
||||
<AppImage
|
||||
src="/logo.png"
|
||||
alt="杜康好客"
|
||||
wrapperClassName={`brand-logo ${sizeClass} ${className}`.trim()}
|
||||
fit="contain"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
type CouponBadgeProps = {
|
||||
amount: number | string;
|
||||
className?: string;
|
||||
/** 权益标签文案，默认「餐券」；首页使用「好客权益」 */
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export default function CouponBadge({ amount, className = '', label = '餐券' }: CouponBadgeProps) {
|
||||
return (
|
||||
<span className={`coupon-badge ${className}`.trim()}>
|
||||
¥{amount}{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
type Tab = { key: string; label: string };
|
||||
|
||||
type OrderStatusTabsProps = {
|
||||
tabs: Tab[];
|
||||
active: string;
|
||||
onChange: (key: string) => void;
|
||||
};
|
||||
|
||||
export default function OrderStatusTabs({ tabs, active, onChange }: OrderStatusTabsProps) {
|
||||
return (
|
||||
<nav className="order-status-tabs">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
className={`order-status-tab${active === t.key ? ' active' : ''}`}
|
||||
onClick={() => onChange(t.key)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
type PageHeaderProps = {
|
||||
title: string;
|
||||
onBack?: () => void;
|
||||
backLabel?: string;
|
||||
right?: React.ReactNode;
|
||||
/** 是否展示居中标题；H5 微信内默认隐藏，避免与系统标题栏重复 */
|
||||
showTitle?: boolean;
|
||||
};
|
||||
|
||||
export default function PageHeader({
|
||||
title,
|
||||
onBack,
|
||||
backLabel = '←',
|
||||
right,
|
||||
showTitle = false,
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<header className="page-header" aria-label={title}>
|
||||
<div className="page-header-side">
|
||||
{onBack ? (
|
||||
<button type="button" className="back-btn" onClick={onBack} aria-label="返回">
|
||||
{backLabel}
|
||||
</button>
|
||||
) : (
|
||||
<span className="page-header-spacer" />
|
||||
)}
|
||||
</div>
|
||||
{showTitle ? (
|
||||
<div className="app-page-title page-header-title">{title}</div>
|
||||
) : (
|
||||
<div className="page-header-title page-header-title--spacer" aria-hidden="true" />
|
||||
)}
|
||||
<div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import './pull-to-refresh.css';
|
||||
|
||||
const PULL_THRESHOLD = 64;
|
||||
const MAX_PULL = 96;
|
||||
|
||||
type PullToRefreshProps = {
|
||||
onRefresh: () => void | Promise<void>;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
function getScrollTop() {
|
||||
return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
}
|
||||
|
||||
export default function PullToRefresh({
|
||||
onRefresh,
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
disabled = false,
|
||||
}: PullToRefreshProps) {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const [pull, setPull] = useState(0);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const startY = useRef(0);
|
||||
const pulling = useRef(false);
|
||||
const busy = useRef(false);
|
||||
const pullRef = useRef(0);
|
||||
const disabledRef = useRef(disabled);
|
||||
const onRefreshRef = useRef(onRefresh);
|
||||
|
||||
disabledRef.current = disabled;
|
||||
onRefreshRef.current = onRefresh;
|
||||
pullRef.current = pull;
|
||||
|
||||
const finishRefresh = useCallback(async () => {
|
||||
if (busy.current) return;
|
||||
busy.current = true;
|
||||
setRefreshing(true);
|
||||
setPull(40);
|
||||
pullRef.current = 40;
|
||||
try {
|
||||
await onRefreshRef.current();
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
setPull(0);
|
||||
pullRef.current = 0;
|
||||
busy.current = false;
|
||||
pulling.current = false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const el = rootRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const onTouchStart = (e: TouchEvent) => {
|
||||
if (disabledRef.current || busy.current) return;
|
||||
if (getScrollTop() > 2) return;
|
||||
startY.current = e.touches[0]?.clientY ?? 0;
|
||||
pulling.current = true;
|
||||
};
|
||||
|
||||
const onTouchMove = (e: TouchEvent) => {
|
||||
if (!pulling.current || disabledRef.current || busy.current) return;
|
||||
if (getScrollTop() > 2) {
|
||||
pulling.current = false;
|
||||
setPull(0);
|
||||
pullRef.current = 0;
|
||||
return;
|
||||
}
|
||||
const y = e.touches[0]?.clientY ?? 0;
|
||||
const delta = y - startY.current;
|
||||
if (delta <= 0) {
|
||||
setPull(0);
|
||||
pullRef.current = 0;
|
||||
return;
|
||||
}
|
||||
const next = Math.min(MAX_PULL, delta * 0.45);
|
||||
setPull(next);
|
||||
pullRef.current = next;
|
||||
if (next > 8 && e.cancelable) e.preventDefault();
|
||||
};
|
||||
|
||||
const onTouchEnd = () => {
|
||||
if (!pulling.current || disabledRef.current) return;
|
||||
pulling.current = false;
|
||||
if (pullRef.current >= PULL_THRESHOLD) {
|
||||
void finishRefresh();
|
||||
return;
|
||||
}
|
||||
setPull(0);
|
||||
pullRef.current = 0;
|
||||
};
|
||||
|
||||
el.addEventListener('touchstart', onTouchStart, { passive: true });
|
||||
el.addEventListener('touchmove', onTouchMove, { passive: false });
|
||||
el.addEventListener('touchend', onTouchEnd);
|
||||
el.addEventListener('touchcancel', onTouchEnd);
|
||||
return () => {
|
||||
el.removeEventListener('touchstart', onTouchStart);
|
||||
el.removeEventListener('touchmove', onTouchMove);
|
||||
el.removeEventListener('touchend', onTouchEnd);
|
||||
el.removeEventListener('touchcancel', onTouchEnd);
|
||||
};
|
||||
}, [finishRefresh]);
|
||||
|
||||
const showHint = pull > 8 || refreshing;
|
||||
const ready = pull >= PULL_THRESHOLD;
|
||||
const pad = showHint ? Math.max(pull, refreshing ? 40 : 0) : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
className={['dukang-ptr', className].filter(Boolean).join(' ')}
|
||||
style={{ ...style, paddingTop: pad || undefined }}
|
||||
>
|
||||
<div
|
||||
className={`dukang-ptr-indicator${showHint ? ' dukang-ptr-indicator--visible' : ''}`}
|
||||
style={{ height: pad }}
|
||||
aria-live="polite"
|
||||
>
|
||||
<span className="dukang-ptr-text">
|
||||
{refreshing ? '刷新中…' : ready ? '松开刷新' : '下拉刷新'}
|
||||
</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,704 +0,0 @@
|
||||
@import './tokens.css';
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-background);
|
||||
color: var(--color-on-surface);
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input, select, textarea { font: inherit; }
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.headline-lg {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.headline-md {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.body-md {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.label-md {
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.text-muted { color: var(--color-subtle-gray); }
|
||||
.text-variant { color: var(--color-on-surface-variant); }
|
||||
.text-primary { color: var(--color-heritage-red); }
|
||||
.text-success { color: var(--color-success-green); }
|
||||
|
||||
.amount-lg {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
.amount-xl {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.page { min-height: 100vh; padding-bottom: 80px; background: var(--color-background); }
|
||||
.page-no-tab { min-height: 100vh; background: var(--color-background); }
|
||||
|
||||
/* Brand logo */
|
||||
.brand-logo {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
min-width: 36px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.brand-logo--lg {
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.brand-logo .app-image-img.is-loaded {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-logo--center {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-md) var(--space-page);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 三端统一页面顶栏标题 */
|
||||
.app-page-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
height: 56px;
|
||||
padding: 0 var(--space-page);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 1px 0 rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.app-page-header--fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.app-page-header-action {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: var(--space-page);
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-heritage-red);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.app-page-header-action--end {
|
||||
left: auto;
|
||||
right: var(--space-page);
|
||||
}
|
||||
|
||||
.app-page-header-action:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-city { color: var(--color-heritage-red); font-size: 14px; }
|
||||
|
||||
.back-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 4px;
|
||||
color: var(--color-heritage-red);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-gutter) var(--space-page);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
border: var(--border-card);
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-label);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.05em;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-heritage-red);
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
.btn-block { width: 100%; display: block; text-align: center; }
|
||||
|
||||
.btn-pill {
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: var(--space-md); }
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--color-on-surface-variant);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-outline-variant);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-card);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px rgba(130, 0, 18, 0.2);
|
||||
}
|
||||
|
||||
/* Badges & status */
|
||||
.benefit-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-aged-amber);
|
||||
color: var(--color-on-secondary-container);
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 13px;
|
||||
color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(45, 106, 79, 0.1);
|
||||
color: var(--color-success-green);
|
||||
font-family: var(--font-label);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: var(--color-card);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 4px;
|
||||
font-size: 14px;
|
||||
color: var(--color-subtle-gray);
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--color-heritage-red);
|
||||
border-bottom-color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tabbar (legacy) */
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid rgba(141, 112, 110, 0.3);
|
||||
box-shadow: var(--shadow-tabbar);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-subtle-gray);
|
||||
}
|
||||
|
||||
.tabbar-item.active { color: var(--color-heritage-red); }
|
||||
|
||||
/* App tabbar (Material icons) */
|
||||
.app-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid rgba(141, 112, 110, 0.3);
|
||||
box-shadow: var(--shadow-tabbar);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-tabbar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 8px;
|
||||
color: var(--color-subtle-gray);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.app-tabbar-item.active { color: var(--color-heritage-red); }
|
||||
|
||||
.app-tabbar-icon { font-size: 24px; line-height: 1; }
|
||||
|
||||
.app-tabbar-label {
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Auth page */
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
padding: 48px var(--space-page) var(--space-page);
|
||||
background: var(--color-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
color: var(--color-subtle-gray);
|
||||
margin-bottom: var(--space-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-msg {
|
||||
color: var(--color-heritage-red);
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Mine profile */
|
||||
.profile-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-family: var(--font-headline);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
}
|
||||
|
||||
.menu-link:last-child { border-bottom: none; }
|
||||
|
||||
.page-actions { padding: var(--space-md) var(--space-page); }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px var(--space-md);
|
||||
color: var(--color-subtle-gray);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Shop-specific */
|
||||
.shop-header-card {
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-page);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.scan-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-aged-amber);
|
||||
border: 4px solid var(--color-card);
|
||||
margin: 24px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.coupon-highlight {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: var(--color-secondary-container);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-on-secondary-container);
|
||||
}
|
||||
|
||||
.code-box {
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
background: var(--color-surface-container-low);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.line-2-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 var(--space-page);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.page-header-side {
|
||||
width: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-header-side--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.page-header-spacer {
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-header-title--spacer {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Coupon badge (ticket notch) */
|
||||
.coupon-badge {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-aged-amber);
|
||||
color: var(--color-on-secondary-container);
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.coupon-badge::before,
|
||||
.coupon-badge::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-card);
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.coupon-badge::before { left: -4px; }
|
||||
.coupon-badge::after { right: -4px; }
|
||||
|
||||
/* Order status tabs */
|
||||
.order-status-tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background: var(--color-card);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.order-status-tabs::-webkit-scrollbar { display: none; }
|
||||
|
||||
.order-status-tab {
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 12px 16px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-subtle-gray);
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-status-tab.active {
|
||||
color: var(--color-heritage-red);
|
||||
border-bottom-color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modal overlay */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
padding: var(--space-page);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-grabber {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: var(--color-surface-container-highest);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.tag-reship {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(42, 110, 187, 0.1);
|
||||
color: var(--color-status-blue);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* App image loading / placeholder */
|
||||
.app-image {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-container-low);
|
||||
}
|
||||
|
||||
.app-image--fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-image-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.app-image-img--cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-image-img--contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-image-img.is-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-image-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-surface-container-low);
|
||||
color: var(--color-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.app-image-fallback-icon {
|
||||
font-size: 32px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.app-image-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--color-outline-variant);
|
||||
border-top-color: var(--color-heritage-red);
|
||||
border-radius: 50%;
|
||||
animation: app-image-spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes app-image-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
.dukang-ptr {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dukang-ptr-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dukang-ptr-text {
|
||||
padding-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #8a8580;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
/* Dukang Hospitality Heritage — design tokens from pages/stitch_4_1.0/DESIGN.md */
|
||||
:root {
|
||||
--color-surface: #faf9f7;
|
||||
--color-surface-dim: #dadad8;
|
||||
--color-surface-container-low: #f4f3f1;
|
||||
--color-surface-container: #efeeec;
|
||||
--color-surface-container-highest: #e3e2e0;
|
||||
--color-on-surface: #1a1c1b;
|
||||
--color-on-surface-variant: #5a413f;
|
||||
--color-outline: #8d706e;
|
||||
--color-outline-variant: #e2bebc;
|
||||
|
||||
--color-primary: #820012;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-heritage-red: #a61d24;
|
||||
--color-on-primary-container: #ffb9b4;
|
||||
|
||||
--color-secondary: #735c00;
|
||||
--color-secondary-container: #fed65b;
|
||||
--color-on-secondary-container: #745c00;
|
||||
--color-aged-amber: #ffbf00;
|
||||
|
||||
--color-success-green: #2d6a4f;
|
||||
--color-status-blue: #2a6ebb;
|
||||
--color-subtle-gray: #999999;
|
||||
--color-ink-black: #1a1a1a;
|
||||
|
||||
--color-error: #ba1a1a;
|
||||
--color-background: #faf9f7;
|
||||
--color-card: #ffffff;
|
||||
|
||||
--font-headline: 'Manrope', 'PingFang SC', sans-serif;
|
||||
--font-body: 'Be Vietnam Pro', 'PingFang SC', sans-serif;
|
||||
--font-label: 'Inter', 'PingFang SC', sans-serif;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--space-page: 20px;
|
||||
--space-gutter: 12px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 32px;
|
||||
|
||||
--shadow-card: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
--shadow-tabbar: 0 -4px 20px rgba(0, 0, 0, 0.06);
|
||||
--border-card: 1px solid rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
Reference in New Issue
Block a user