AShareView/web/src/pages/TrendPage.tsx

import { useEffect, useState } from 'react';
import { Card, Segmented, Spin, Typography } from 'antd';
import { getDailySummary, type DailySummary } from '../api/dashboard';
import DailyChart from '../components/DailyChart';

const { Title } = Typography;

export default function TrendPage() {
  const [daily, setDaily] = useState<DailySummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [days, setDays] = useState<number>(30);

  useEffect(() => {
    setLoading(true);
    getDailySummary(days)
      .then(setDaily)
      .finally(() => setLoading(false));
  }, [days]);

  return (
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>
        每日趋势
      </Title>

      <Card
        extra={
          <Segmented
            value={days}
            onChange={(v) => setDays(v as number)}
            options={[
              { label: '7天', value: 7 },
              { label: '30天', value: 30 },
              { label: '90天', value: 90 },
              { label: '180天', value: 180 },
            ]}
          />
        }
      >
        {loading ? (
          <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}>
            <Spin size="large" />
          </div>
        ) : (
          <DailyChart data={daily} />
        )}
      </Card>
    </div>
  );
}