[阶段10] 前端以 Framework7 重建，采用 iOS 原生形态
按要求废弃手写外壳，改用 Framework7 React（theme=ios）。参照 PeakWatch 的信息架构与卡片语言。 保留（这些是资产，不该重来）: - 数据层 services/api.ts、聚合 lib/aggregate.ts、参考区间 lib/ranges.ts - 图表组件 Chart / Ring / Sparkline / BandBar / MetricCard / MetricStrip - 经校验的配色令牌（色盲安全 + 对比度，浅深两档） 替换: - 路由与外壳交给 F7：五个 Tab 各自独立导航栈，推入详情页不影响其他 Tab - 页面转场、橡皮筋滚动、大标题折叠、半透明栏 —— 这些正是换框架的理由， 手写做不像 - 底部标签栏改用 F7 Toolbar，触控目标与安全区由框架处理 配色接入: - 新增 f7theme.css 把我们的令牌映射到 F7 的 CSS 变量，让它的导航栏/ 列表/面板与我们的图表同属一套设计，而不是两种视觉打架 - F7 的深色靠 .dark 类，我们的靠 data-theme，两者在 App 里同步切换 fix: 图标显示为原始名称（squ/hea/cale…） - iconIos/iconMd 引用的是 framework7-icons 字体，没装就只会渲染出名字 其他: - tsconfig moduleResolution 改为 bundler —— F7 用 exports 映射， node 解析方式找不到它的类型 - 登录页不套 Tab 外壳，未登录时不该出现导航 桌面与手机都要好看：内容在宽屏收进 1100px 居中列并加密卡片列数， 窄屏走底部标签栏；两档都已实机核对。 bundle 190KB -> 399KB，是换取原生手感的代价。 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
ericwyuan
57
client/src/components/charts/BandBar.css
Normal file
57
client/src/components/charts/BandBar.css
Normal file
@@ -0,0 +1,57 @@
|
||||
.bandbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 999px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.bandbar.vertical {
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.bandbar-seg:first-child { border-radius: 999px 0 0 999px; }
|
||||
.bandbar-seg:last-child { border-radius: 0 999px 999px 0; }
|
||||
.bandbar.vertical .bandbar-seg:first-child { border-radius: 0 0 999px 999px; }
|
||||
.bandbar.vertical .bandbar-seg:last-child { border-radius: 999px 999px 0 0; }
|
||||
|
||||
.bandbar-seg {
|
||||
height: 100%;
|
||||
/* Bands are muted so the marker, not the track, is what the eye lands on. */
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.bandbar.vertical .bandbar-seg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tone-good { background: var(--status-good); }
|
||||
.tone-warning { background: var(--status-warning); }
|
||||
.tone-serious { background: var(--status-serious); }
|
||||
.tone-critical { background: var(--status-critical); }
|
||||
|
||||
/* A 2px surface ring keeps the marker legible wherever it lands. */
|
||||
.bandbar-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-primary);
|
||||
border: 2px solid var(--surface-1);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: left 0.9s var(--ease), bottom 0.9s var(--ease);
|
||||
}
|
||||
|
||||
.bandbar.vertical .bandbar-marker {
|
||||
top: auto;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bandbar-marker { transition: none; }
|
||||
}
|
||||
79
client/src/components/charts/BandBar.tsx
Normal file
79
client/src/components/charts/BandBar.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Band, Range } from '../../lib/ranges';
|
||||
import { usePrefersReducedMotion } from '../../lib/motion';
|
||||
import './BandBar.css';
|
||||
|
||||
interface BandBarProps {
|
||||
range: Range;
|
||||
value: number | null;
|
||||
/** Vertical layout for compact rows of metrics. */
|
||||
vertical?: boolean;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The reference bands as a segmented track, with a marker at the current value.
|
||||
*
|
||||
* This is what turns a bare number into a judgement the reader can check: the
|
||||
* marker's position shows *why* the value earned its label. The band colours
|
||||
* come from the reserved status palette, and the label itself is always
|
||||
* rendered as text beside the bar — colour never carries the verdict alone.
|
||||
*/
|
||||
function BandBar({ range, value, vertical = false, height = 6 }: BandBarProps) {
|
||||
const reduced = usePrefersReducedMotion();
|
||||
const [settled, setSettled] = useState(reduced);
|
||||
|
||||
useEffect(() => {
|
||||
if (reduced) return;
|
||||
const id = requestAnimationFrame(() => setSettled(true));
|
||||
return () => cancelAnimationFrame(id);
|
||||
}, [reduced]);
|
||||
|
||||
const min = range.min ?? 0;
|
||||
const max = range.max ?? range.bands[range.bands.length - 2]?.max ?? 100;
|
||||
const span = max - min || 1;
|
||||
|
||||
// Segment widths are proportional to how much of the scale each band covers,
|
||||
// so a wide "normal" band looks wide — equal-width segments would misstate
|
||||
// how much room there is inside each verdict.
|
||||
const segments = range.bands.map((band: Band, i) => {
|
||||
const lower = i === 0 ? min : range.bands[i - 1].max;
|
||||
const upper = Math.min(band.max === Infinity ? max : band.max, max);
|
||||
return { band, size: (Math.max(0, upper - lower) / span) * 100 };
|
||||
});
|
||||
|
||||
const position =
|
||||
value == null ? null : Math.min(100, Math.max(0, ((value - min) / span) * 100));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bandbar ${vertical ? 'vertical' : ''}`}
|
||||
style={vertical ? { width: height } : { height }}
|
||||
role="img"
|
||||
aria-label={
|
||||
value == null ? '暂无数据' : `当前 ${value}，参考区间 ${range.goodFrom}~${range.goodTo}`
|
||||
}
|
||||
>
|
||||
{segments.map(({ band, size }, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`bandbar-seg tone-${band.tone}`}
|
||||
style={vertical ? { height: `${size}%` } : { width: `${size}%` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{position != null && (
|
||||
<span
|
||||
className="bandbar-marker"
|
||||
style={
|
||||
vertical
|
||||
? { bottom: settled ? `${position}%` : '0%' }
|
||||
: { left: settled ? `${position}%` : '0%' }
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BandBar;
|
||||
124
client/src/components/charts/MetricCard.css
Normal file
124
client/src/components/charts/MetricCard.css
Normal file
@@ -0,0 +1,124 @@
|
||||
.mcard {
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem 1rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.mcard.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mcard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lift);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.mcard-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.mcard-label {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mcard-chevron {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Proportional figures: tabular-nums would make a large standalone value look
|
||||
loose. Tabular is reserved for columns that must align. */
|
||||
.mcard-value {
|
||||
font-size: 1.85rem;
|
||||
font-weight: 660;
|
||||
line-height: 1.05;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.mcard-unit {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.mcard-verdict {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.mcard-tone {
|
||||
font-weight: 650;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.mcard-tone.tone-good { background: none; color: var(--status-good); }
|
||||
.mcard-tone.tone-warning { background: none; color: var(--status-warning); }
|
||||
.mcard-tone.tone-serious { background: none; color: var(--status-serious); }
|
||||
.mcard-tone.tone-critical { background: none; color: var(--status-critical); }
|
||||
|
||||
.mcard-target {
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mcard-detail {
|
||||
font-size: 0.76rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Two columns, the way the phone apps lay these out. */
|
||||
.mcard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mcard-grid > * {
|
||||
animation: tile-in 0.42s var(--ease) both;
|
||||
}
|
||||
|
||||
.mcard-grid > *:nth-child(2) { animation-delay: 45ms; }
|
||||
.mcard-grid > *:nth-child(3) { animation-delay: 90ms; }
|
||||
.mcard-grid > *:nth-child(4) { animation-delay: 135ms; }
|
||||
.mcard-grid > *:nth-child(5) { animation-delay: 180ms; }
|
||||
.mcard-grid > *:nth-child(n + 6) { animation-delay: 220ms; }
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.mcard-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.mcard { padding: 0.75rem 0.8rem 0.85rem; border-radius: 12px; }
|
||||
.mcard-value { font-size: 1.45rem; }
|
||||
.mcard-target { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mcard { transition: none; animation: none; }
|
||||
.mcard:hover { transform: none; }
|
||||
.mcard-grid > * { animation: none; }
|
||||
}
|
||||
86
client/src/components/charts/MetricCard.tsx
Normal file
86
client/src/components/charts/MetricCard.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { classify, formatTarget } from '../../lib/ranges';
|
||||
import { useCountUp } from '../../lib/motion';
|
||||
import BandBar from './BandBar';
|
||||
import Sparkline from './Sparkline';
|
||||
import './MetricCard.css';
|
||||
|
||||
/* Status is icon + word + colour, never colour alone — the light-surface
|
||||
status steps sit below 3:1 by design. */
|
||||
const TONE_ICON: Record<string, string> = {
|
||||
good: '✓',
|
||||
warning: '!',
|
||||
serious: '↓',
|
||||
critical: '!',
|
||||
};
|
||||
|
||||
interface MetricCardProps {
|
||||
/** Key into RANGES; when absent the card shows no verdict. */
|
||||
metric?: string;
|
||||
label: string;
|
||||
value: number | null | undefined;
|
||||
unit?: string;
|
||||
decimals?: number;
|
||||
/** Recent history, drawn as an inline sparkline when supplied. */
|
||||
trend?: Array<number | null | undefined>;
|
||||
/** Extra line under the value. */
|
||||
detail?: ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
function MetricCard({
|
||||
metric, label, value, unit, decimals = 0, trend, detail, onClick,
|
||||
}: MetricCardProps) {
|
||||
const numeric = typeof value === 'number' ? value : null;
|
||||
const animated = useCountUp(numeric);
|
||||
const verdict = metric ? classify(metric, numeric) : null;
|
||||
|
||||
const display =
|
||||
numeric == null
|
||||
? '—'
|
||||
: (animated ?? numeric).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: decimals,
|
||||
});
|
||||
|
||||
const Tag = onClick ? 'button' : 'div';
|
||||
|
||||
return (
|
||||
<Tag
|
||||
className={`mcard ${onClick ? 'clickable' : ''}`}
|
||||
onClick={onClick}
|
||||
type={onClick ? 'button' : undefined}
|
||||
>
|
||||
<div className="mcard-head">
|
||||
<span className="mcard-label">{label}</span>
|
||||
{trend && trend.some((v) => v != null) ? (
|
||||
<Sparkline values={trend} label={`${label}近期走势`} width={54} height={18} />
|
||||
) : (
|
||||
onClick && <span className="mcard-chevron" aria-hidden="true">›</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mcard-value">
|
||||
{display}
|
||||
{unit && numeric != null && <span className="mcard-unit">{unit}</span>}
|
||||
</div>
|
||||
|
||||
{verdict && numeric != null ? (
|
||||
<>
|
||||
<div className="mcard-verdict">
|
||||
<span className={`mcard-tone tone-${verdict.band.tone}`}>
|
||||
<span aria-hidden="true">{TONE_ICON[verdict.band.tone]}</span>
|
||||
{verdict.band.label}
|
||||
</span>
|
||||
<span className="mcard-target">参考 {formatTarget(verdict.range)}</span>
|
||||
</div>
|
||||
<BandBar range={verdict.range} value={numeric} />
|
||||
</>
|
||||
) : (
|
||||
detail && <div className="mcard-detail">{detail}</div>
|
||||
)}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
export default MetricCard;
|
||||
72
client/src/components/charts/MetricStrip.css
Normal file
72
client/src/components/charts/MetricStrip.css
Normal file
@@ -0,0 +1,72 @@
|
||||
.strip-card {
|
||||
background: var(--surface-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.1rem 1.1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.strip-title {
|
||||
margin: 0 0 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 650;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.strip-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.strip-icon {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.strip-meter {
|
||||
height: 46px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--surface-0);
|
||||
border-radius: 999px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.strip-meter-empty {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.strip-value {
|
||||
font-size: 1.02rem;
|
||||
font-weight: 650;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.strip-unit {
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.strip-tone {
|
||||
font-size: 0.66rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.strip-tone.tone-good { background: none; color: var(--status-good); }
|
||||
.strip-tone.tone-warning { background: none; color: var(--status-warning); }
|
||||
.strip-tone.tone-serious { background: none; color: var(--status-serious); }
|
||||
.strip-tone.tone-critical { background: none; color: var(--status-critical); }
|
||||
60
client/src/components/charts/MetricStrip.tsx
Normal file
60
client/src/components/charts/MetricStrip.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { classify } from '../../lib/ranges';
|
||||
import BandBar from './BandBar';
|
||||
import './MetricStrip.css';
|
||||
|
||||
export interface StripItem {
|
||||
metric?: string;
|
||||
icon: string;
|
||||
label: string;
|
||||
value: number | null | undefined;
|
||||
unit?: string;
|
||||
decimals?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* A row of small metrics, each with its position in its own reference band.
|
||||
*
|
||||
* Denser than a card per metric, and useful precisely because the bands make
|
||||
* five unrelated units comparable at a glance: the reader is comparing "where
|
||||
* in range", not the raw numbers.
|
||||
*/
|
||||
function MetricStrip({ items, title }: { items: StripItem[]; title?: string }) {
|
||||
return (
|
||||
<section className="strip-card">
|
||||
{title && <h3 className="strip-title">{title}</h3>}
|
||||
<div className="strip">
|
||||
{items.map((item) => {
|
||||
const numeric = typeof item.value === 'number' ? item.value : null;
|
||||
const verdict = item.metric ? classify(item.metric, numeric) : null;
|
||||
return (
|
||||
<div className="strip-item" key={item.label}>
|
||||
<span className="strip-icon" aria-hidden="true">{item.icon}</span>
|
||||
<div className="strip-meter">
|
||||
{verdict ? (
|
||||
<BandBar range={verdict.range} value={numeric} vertical height={5} />
|
||||
) : (
|
||||
<span className="strip-meter-empty" />
|
||||
)}
|
||||
</div>
|
||||
<div className="strip-value">
|
||||
{numeric == null
|
||||
? '—'
|
||||
: numeric.toLocaleString(undefined, {
|
||||
maximumFractionDigits: item.decimals ?? 0,
|
||||
})}
|
||||
</div>
|
||||
<div className="strip-unit">{item.unit ?? item.label}</div>
|
||||
{verdict && (
|
||||
<div className={`strip-tone tone-${verdict.band.tone}`}>
|
||||
{verdict.band.label}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default MetricStrip;
|
||||
Reference in New Issue
Block a user