新增米家环境监控模块 (采集/聚合/历史/前端 EnvView) + CI 挂载米家凭证目录并自动应用迁移

src/pages/monitor/EnvView.jsx

@@ -0,0 +1,319 @@
+// 环境监控: 米家温湿度长期记录
+//  - 顶部: 授权横幅(重新授权弹窗) + 立即同步
+//  - 家庭: Collapse 手风琴, 一次只展开一个家庭
+//  - 设备卡片: 标题=别名+电量, 概览+缺N天, Segmented 今天/月/年 图表
+import { useEffect, useState, useRef, useCallback } from 'react'
+import {
+  Collapse, Popup, Dialog, Toast, Empty, DotLoading, Segmented, Button, Card, Input,
+} from 'antd-mobile'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import {
+  getMihomeStatus, getMihomeHistory, setMihomeAlias, syncMihome,
+  startMihomeAuth, getMihomeAuthStatus, cancelMihomeAuth, mihomeQrImageUrl,
+} from '../../api/mihome.js'
+import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
+
+const RANGE_OPTIONS = [
+  { label: '今天', value: 'today' },
+  { label: '月', value: 'month' },
+  { label: '年', value: 'year' },
+]
+
+const round1 = (v) => (v === null || v === undefined ? null : Math.round(Number(v) * 10) / 10)
+const pad = (n) => String(n).padStart(2, '0')
+
+export default function EnvView() {
+  const [status, setStatus] = useState(null)
+  const [err, setErr] = useState('')
+  const [syncing, setSyncing] = useState(false)
+  const [refreshTick, setRefreshTick] = useState(0)
+  const [qrOpen, setQrOpen] = useState(false)
+
+  const load = useCallback((silent) => {
+    if (!silent) setErr('')
+    getMihomeStatus()
+      .then((d) => { setStatus(d); setErr('') })
+      .catch((e) => { if (!silent) { setErr(e.message); if (!status) setStatus({ auth: { status: 'expired' }, homes: [] }) } })
+  }, [status])
+
+  useEffect(() => {
+    load(false)
+    const timer = setInterval(() => load(true), 60000)
+    return () => clearInterval(timer)
+  }, [load])
+  useRefreshOnVisible(() => load(true))
+
+  const doSync = async () => {
+    setSyncing(true)
+    try {
+      await syncMihome()
+      Toast.show({ icon: 'success', content: '已同步' })
+      setRefreshTick((x) => x + 1)
+      load(true)
+    } catch (e) {
+      Toast.show({ content: e.message })
+    } finally {
+      setSyncing(false)
+    }
+  }
+
+  const authOk = status?.auth?.status === 'ok'
+  const homes = status?.homes || []
+
+  return (
+    <div className="env-view">
+      {!authOk && status && (
+        <div className="env-auth-banner">
+          <span>米家授权{status.auth.status === 'expired' ? '已过期' : '待授权'}，部分历史待补齐</span>
+          <span className="env-auth-btn" onClick={() => setQrOpen(true)}>重新授权</span>
+        </div>
+      )}
+      <div className="monitor-tip env-toolbar">
+        <span>每小时采样 · 数据永久保留</span>
+        <Button size="mini" color="primary" fill="outline" loading={syncing} onClick={doSync}>立即同步</Button>
+      </div>
+      {!status && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
+      {err && (
+        <div className="error-banner">
+          {err}
+          <span className="retry-link" onClick={() => load(false)}>重试</span>
+        </div>
+      )}
+      {status && homes.length === 0 && authOk && <Empty description="暂无米家环境设备" />}
+      {status && homes.length > 0 && (
+        <div className="env-homes">
+          <Collapse accordion defaultActiveKey={homes[0].homeId}>
+            {homes.map((h) => (
+              <Collapse.Panel
+                key={h.homeId}
+                title={
+                  <span className="env-home-title">
+                    {h.name}
+                    <span className="env-home-count">{h.devices.length ? h.devices.length + ' 台设备' : '无环境设备'}</span>
+                  </span>
+                }
+              >
+                {h.devices.length === 0 ? (
+                  <Empty description="该家庭暂无环境设备" />
+                ) : (
+                  <div className="env-devices">
+                    {h.devices.map((d) => (
+                      <DeviceCard key={d.did} device={d} refreshTick={refreshTick} onChanged={() => load(true)} />
+                    ))}
+                  </div>
+                )}
+              </Collapse.Panel>
+            ))}
+          </Collapse>
+        </div>
+      )}
+
+      <AuthPopup open={qrOpen} onClose={() => setQrOpen(false)} onOk={() => { setQrOpen(false); setRefreshTick((x) => x + 1); load(true) }} />
+    </div>
+  )
+}
+
+// 设备卡片: 标题=别名+电量 / 概览+缺N天 / 今天·月·年图表
+function DeviceCard({ device, refreshTick, onChanged }) {
+  const [range, setRange] = useState('today')
+  const [buckets, setBuckets] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [cerr, setCerr] = useState('')
+
+  const load = useCallback((r) => {
+    setLoading(true); setCerr('')
+    getMihomeHistory(device.did, r)
+      .then((d) => { setBuckets(d.buckets || []); setCerr('') })
+      .catch((e) => setCerr(e.message))
+      .finally(() => setLoading(false))
+  }, [device.did])
+
+  useEffect(() => { load(range) }, [range, refreshTick, load])
+
+  const missing = device.missingDays?.length || 0
+  const latest = device.latest
+  const title = device.title || device.name
+  const batt = device.battery != null ? device.battery + '%' : null
+
+  const editAlias = () => {
+    const input = { current: null }
+    const onOk = async () => {
+      const val = (input.current && input.current.nativeElement) ? input.current.nativeElement.value : ''
+      try {
+        await setMihomeAlias(device.did, val.trim())
+        Toast.show({ icon: 'success', content: '已保存' })
+        onChanged()
+      } catch (e) {
+        Toast.show({ content: e.message })
+      }
+    }
+    let v = device.alias || device.name
+    Dialog.show({
+      title: '编辑别名',
+      content: <Input ref={(el) => { input.current = el }} defaultValue={v} placeholder="别名（仅本应用展示）" />,
+      closeOnAction: true,
+      actions: [
+        { key: 'cancel', text: '取消' },
+        { key: 'ok', text: '保存', onClick: () => { onOk(); } },
+      ],
+    })
+  }
+
+  return (
+    <Card className="env-device-card">
+      <div className="env-device-head">
+        <div className="env-device-title">
+          <span className="env-device-name">{title}</span>
+          {batt && <span className="env-device-batt">电量 {batt}</span>}
+          <span className="env-device-edit" onClick={editAlias}>改别名</span>
+        </div>
+        {missing > 0 && <span className="env-missing-badge">缺 {missing} 天</span>}
+      </div>
+      <div className="env-device-meta">
+        {latest ? (
+          <>
+            <span>温度 {latest.temperature != null ? round1(latest.temperature) + '℃' : '—'}
+              {latest.temperatureMin != null && <em> {round1(latest.temperatureMin)}~{round1(latest.temperatureMax)}℃</em>}</span>
+            <span>湿度 {latest.humidity != null ? round1(latest.humidity) + '%' : '—'}
+              {latest.humidityMin != null && <em> {round1(latest.humidityMin)}~{round1(latest.humidityMax)}%</em>}</span>
+          </>
+        ) : (
+          <span className="env-muted">暂无样本（今天 {pad(new Date().getHours())}:00 起每小时采样）</span>
+        )}
+      </div>
+      <div className="env-range">
+        <Segmented
+          options={RANGE_OPTIONS}
+          value={range}
+          onChange={(v) => setRange(v)}
+        />
+      </div>
+      {cerr && <div className="env-chart-err">{cerr}</div>}
+      {!cerr && loading && buckets === null && <div className="env-chart-loading"><DotLoading /></div>}
+      {!cerr && buckets !== null && <EnvChart range={range} buckets={buckets} />}
+    </Card>
+  )
+}
+
+// 图表: 温度/湿度双轴; 月/年加 min/max 淡虚线
+function EnvChart({ range, buckets }) {
+  if (!buckets.length) return <div className="env-chart-empty">该视图暂无数据</div>
+  const rows = buckets.map((b) => {
+    let x
+    let temp = round1(b.temperatureAvg ?? b.temperature)
+    let hum = round1(b.humidityAvg ?? b.humidity)
+    if (range === 'today') {
+      const d = new Date(b.t)
+      x = pad(d.getHours()) + ':00'
+    } else if (range === 'month') {
+      const d = new Date(b.t)
+      x = (d.getMonth() + 1) + '/' + d.getDate()
+    } else {
+      x = b.label || ''
+    }
+    return {
+      x,
+      temp,
+      hum,
+      tempMin: round1(b.temperatureMin),
+      tempMax: round1(b.temperatureMax),
+      humMin: round1(b.humidityMin),
+      humMax: round1(b.humidityMax),
+      sampleCount: b.sampleCount,
+    }
+  })
+  const showBand = range === 'month' || range === 'year'
+  return (
+    <div className="chart-wrap">
+      <ResponsiveContainer width="100%" height={220}>
+        <LineChart data={rows} margin={{ top: 6, right: 6, left: -6, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="x" tick={{ fontSize: 10 }} minTickGap={range === 'today' ? 30 : 20} />
+          <YAxis yAxisId="temp" tick={{ fontSize: 10 }} width={36} unit="°" />
+          <YAxis yAxisId="hum" orientation="right" tick={{ fontSize: 10 }} width={40} unit="%" />
+          <Tooltip />
+          <Legend wrapperStyle={{ fontSize: 11 }} />
+          <Line yAxisId="temp" dataKey="temp" name="温度" stroke="#1677ff" strokeWidth={1.8} dot={false} connectNulls={false} isAnimationActive={false} />
+          <Line yAxisId="hum" dataKey="hum" name="湿度" stroke="#00b578" strokeWidth={1.8} dot={false} connectNulls={false} isAnimationActive={false} />
+          {showBand && (
+            <>
+              <Line yAxisId="temp" dataKey="tempMin" name="温/最低" stroke="#1677ff" strokeWidth={1} strokeDasharray="3 3" opacity={0.45} dot={false} isAnimationActive={false} />
+              <Line yAxisId="temp" dataKey="tempMax" name="温/最高" stroke="#1677ff" strokeWidth={1} strokeDasharray="3 3" opacity={0.45} dot={false} isAnimationActive={false} />
+              <Line yAxisId="hum" dataKey="humMin" name="湿/最低" stroke="#00b578" strokeWidth={1} strokeDasharray="3 3" opacity={0.4} dot={false} isAnimationActive={false} />
+              <Line yAxisId="hum" dataKey="humMax" name="湿/最高" stroke="#00b578" strokeWidth={1} strokeDasharray="3 3" opacity={0.4} dot={false} isAnimationActive={false} />
+            </>
+          )}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// 重新授权弹窗: 服务端生成二维码, 3s 轮询直到 ok/failed
+function AuthPopup({ open, onClose, onOk }) {
+  const [state, setState] = useState(null)
+  const timerRef = useRef(null)
+  const [imgTs, setImgTs] = useState(0)
+
+  const stopPoll = () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null } }
+
+  const start = async () => {
+    stopPoll()
+    setState(null)
+    try {
+      await startMihomeAuth()
+    } catch (e) {
+      setState({ state: 'failed', lastError: e.message })
+      return
+    }
+    const poll = () => {
+      getMihomeAuthStatus()
+        .then((s) => {
+          setState(s)
+          setImgTs(Date.now()) // 让二维码 <img> 重新拉取 (换码刷新)
+          if (s.state === 'failed') stopPoll()
+          if (s.state === 'idle' && s.running === false && s.qrImageUrl) {
+            stopPoll()
+            onOk()
+          }
+        })
+        .catch((e) => { stopPoll(); setState({ state: 'failed', lastError: e.message }) })
+    }
+    poll()
+    timerRef.current = setInterval(poll, 3000)
+  }
+
+  useEffect(() => {
+    if (open) start()
+    else { stopPoll(); setState(null) }
+    return stopPoll
+  }, [open])
+
+  const cancel = async () => {
+    try { await cancelMihomeAuth() } catch { /* ignore */ }
+    stopPoll()
+    onClose()
+  }
+
+  const waiting = state?.state === 'waiting' && state?.qrImageUrl
+  const failed = state?.state === 'failed'
+
+  return (
+    <Popup visible={open} onMaskClick={cancel} bodyStyle={{ minWidth: '78vw', padding: 20, borderRadius: 12 }}>
+      <div className="env-qr">
+        <div className="env-qr-title">米家扫码授权</div>
+        {waiting ? (
+          <img className="env-qr-img" src={mihomeQrImageUrl() + '?ts=' + imgTs} alt="扫码授权" />
+        ) : (
+          <div className="env-qr-wait"><DotLoading /> {failed ? '扫码流程失败' : '正在生成二维码...'}</div>
+        )}
+        {failed && state?.lastError && <div className="env-qr-err">{state.lastError}</div>}
+        <div className="env-qr-tip">打开米家 App → 我的 → 扫码登录，扫码后自动恢复</div>
+        <div className="env-qr-actions">
+          <Button size="mini" fill="outline" onClick={cancel}>取消</Button>
+          <Button size="mini" color="primary" fill="outline" loading={!waiting && !failed} onClick={() => start()}>刷新二维码</Button>
+        </div>
+      </div>
+    </Popup>
+  )
+}