fix(ui): 三处实机问题 + hero 改为三圆环

fix: 标题在窄栏里一行一个字
- Framework7 对裸 <button> 有全局样式，把「看数据」按钮拉成整行宽，
  标题/副标题容器被挤成 0 宽，文字只能竖排。给按钮显式 width:auto

fix: 标题旁边有个灰色方块
- 今日页没有右侧动作，但 NavRight 容器仍然渲染并带半透明白底。
  改为有内容才渲染

hero 改为三圆环（步数 / 睡眠 / HRV）:
- 每个环以「进入自己的参考区间」为满环，所以三个环的满度含义一致，
  尽管单位不可比
- 并列而非同心：Apple 的同心环成立是因为三环共享一个概念
  （动/练/站），而这三项是互不相关的度量，分开更好读

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

client/src/pages/TodayPage.tsx

@@ -7,52 +7,115 @@ import MetricCard from '../components/charts/MetricCard';
 import MetricStrip from '../components/charts/MetricStrip';
 import Skeleton from '../components/Skeleton';
 import { useCountUp } from '../lib/motion';
+import { RANGES } from '../lib/ranges';
 import './Today.css';
 
 const DAYS = 30;
 
-function StepHero({ today, history }: { today: HealthDay; history: HealthDay[] }) {
-  const goal = today.stepGoal ?? null;
-  const steps = today.steps ?? null;
-  const progress = steps != null && goal ? steps / goal : null;
-  const animated = useCountUp(steps);
+interface RingSpec {
+  label: string;
+  value: number | null;
+  /** Reaching this counts as a full ring. */
+  target: number | null;
+  unit: string;
+  decimals?: number;
+  goalText: string;
+}
+
+/**
+ * Three rings: steps, sleep and HRV.
+ *
+ * Each is normalised against the point where it enters its own reference band,
+ * so a full ring means the same thing for all three even though the units do
+ * not compare. Rings sit side by side rather than concentric — Apple's nested
+ * form works because its three rings share one idea (move/exercise/stand);
+ * these three are unrelated measures and read more clearly apart.
+ */
+function RingRow({ today, history }: { today: HealthDay; history: HealthDay[] }) {
+  const stepGoal = today.stepGoal ?? RANGES.steps.goodFrom;
+
+  const specs: RingSpec[] = [
+    {
+      label: '步数',
+      value: today.steps,
+      target: stepGoal,
+      unit: '步',
+      goalText: `目标 ${stepGoal.toLocaleString()}`,
+    },
+    {
+      label: '睡眠',
+      value: today.sleepDuration,
+      target: RANGES.sleepDuration.goodFrom,
+      unit: '小时',
+      decimals: 1,
+      goalText: `目标 ${RANGES.sleepDuration.goodFrom} 小时`,
+    },
+    {
+      label: 'HRV',
+      value: today.heartRateVariability,
+      target: RANGES.heartRateVariability.goodFrom,
+      unit: 'ms',
+      goalText: `参考 ≥${RANGES.heartRateVariability.goodFrom} ms`,
+    },
+  ];
 
   const week = history.slice(-7).map((d) => d.steps).filter((v): v is number => v != null);
   const weekAvg = week.length
     ? Math.round(week.reduce((a, b) => a + b, 0) / week.length)
     : null;
-  const remaining = steps != null && goal ? goal - steps : null;
+
+  const done = specs.filter((s) => s.value != null && s.target && s.value >= s.target).length;
 
   return (
     <section className="hero">
-      <Ring
-        progress={progress}
-        label={`步数完成度 ${progress != null ? Math.round(progress * 100) : 0}%`}
-      >
-        <span className="hero-value">
-          {steps == null ? '—' : Math.round(animated ?? steps).toLocaleString()}
-        </span>
-        <span className="hero-caption">步</span>
-      </Ring>
+      <div className="ring-row">
+        {specs.map((s) => (
+          <RingCell key={s.label} spec={s} />
+        ))}
+      </div>
 
-      <div className="hero-facts">
-        <div className="hero-headline">
-          {progress == null
-            ? '今日暂无步数记录'
-            : progress >= 1
-            ? '今日目标已完成'
-            : `距目标还差 ${remaining!.toLocaleString()} 步`}
-        </div>
-        <dl className="hero-list">
-          <div><dt>目标</dt><dd>{goal ? goal.toLocaleString() : '—'}</dd></div>
-          <div><dt>近 7 日均</dt><dd>{weekAvg ? weekAvg.toLocaleString() : '—'}</dd></div>
-          <div><dt>完成度</dt><dd>{progress != null ? `${Math.round(progress * 100)}%` : '—'}</dd></div>
-        </dl>
+      <div className="hero-summary">
+        <span className="hero-headline">
+          {done === 3 ? '三项全部达标' : done === 0 ? '今日尚无达标项' : `${done} / 3 项达标`}
+        </span>
+        {weekAvg != null && (
+          <span className="hero-aside">步数近 7 日均 {weekAvg.toLocaleString()}</span>
+        )}
       </div>
     </section>
   );
 }
 
+function RingCell({ spec }: { spec: RingSpec }) {
+  const animated = useCountUp(spec.value);
+  const progress =
+    spec.value != null && spec.target ? spec.value / spec.target : null;
+
+  const shown =
+    spec.value == null
+      ? '—'
+      : (animated ?? spec.value).toLocaleString(undefined, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: spec.decimals ?? 0,
+        });
+
+  return (
+    <div className="ring-cell">
+      <Ring
+        progress={progress}
+        size={96}
+        thickness={8}
+        label={`${spec.label} ${progress != null ? Math.round(progress * 100) : 0}%`}
+      >
+        <span className="ring-value">{shown}</span>
+        <span className="ring-unit">{spec.unit}</span>
+      </Ring>
+      <div className="ring-label">{spec.label}</div>
+      <div className="ring-goal">{spec.goalText}</div>
+    </div>
+  );
+}
+
 function TodayPage() {
   const [days, setDays] = useState<HealthDay[]>([]);
   const [loading, setLoading] = useState(true);
@@ -99,7 +162,7 @@ function TodayPage() {
 
       {!loading && !error && today && (
         <>
-          <StepHero today={today} history={days} />
+          <RingRow today={today} history={days} />
 
           <section className="sec">
             <h3 className="sec-title">活动</h3>