[add] Wealth Product selector page

README.md

@@ -11,7 +11,7 @@
 ## 技术栈
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v15][3]
+- Component engine: [Nextjs v16][3]
 - Component suite: [Bootstrap v5][4]
 - CI / CD: GitHub [Actions][10] + [Vercel][11]
 

components/Finance/Finance.module.less

@@ -0,0 +1,41 @@
+.fundCard {
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 20px;
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
+  }
+
+  .header small {
+    line-height: 1.3;
+  }
+}
+
+.metric {
+  gap: 1.5rem;
+  .value {
+    font-weight: 700;
+    font-size: 2rem;
+  }
+}
+.tagBadge {
+  border: 1px solid rgba(15, 23, 42, 0.15);
+  border-radius: 999px;
+  font-weight: 500;
+}
+
+.mutedText {
+  color: rgba(15, 23, 42, 0.6);
+}
+
+.positiveText {
+  color: #198754;
+}
+
+.negativeText {
+  color: #dc3545;
+}

components/Finance/FundCard.tsx

@@ -0,0 +1,109 @@
+import { FC, useContext, useMemo } from 'react';
+import { Badge, Card } from 'react-bootstrap';
+
+import { INDEX_CATEGORY_LABEL_KEYS, INDEX_RISK_LABEL_KEYS } from '../../constants/finance';
+import { I18nContext } from '../../models/Translation';
+import { IndexFundSnapshot } from '../../types/finance';
+import styles from './Finance.module.less';
+import { SparkLine } from './SparkLine';
+
+const formatNumber = (value?: number | null, locale = 'zh-CN') =>
+  value != null ? value.toLocaleString(locale, { maximumFractionDigits: 2 }) : '--';
+
+const formatPercent = (value?: number | null) =>
+  value != null ? `${(value * 100).toFixed(2)}%` : '--';
+
+const valueTone = (value?: number | null) =>
+  value != null ? (value >= 0 ? styles.positiveText : styles.negativeText) : styles.mutedText;
+
+export const FundCard: FC<IndexFundSnapshot> = ({
+  symbol,
+  displayName,
+  category,
+  riskLevel,
+  latestValue,
+  dailyChangePct,
+  oneYearReturnPct,
+  maxDrawdownPct,
+  tags,
+  sparkline,
+  updatedAt,
+  fallback,
+  description,
+  source,
+}) => {
+  const { currentLanguage, t } = useContext(I18nContext);
+  const sparklineId = useMemo(() => `fund-${symbol}`, [symbol]);
+  const updatedAtISO = updatedAt ? new Date(updatedAt).toJSON() : undefined;
+
+  return (
+    <Card className={`${styles.fundCard} h-100`}>
+      <Card.Body className="d-flex flex-column gap-3">
+        <div className={`${styles.header} d-flex justify-content-between align-items-start`}>
+          <div>
+            <h3 className="h5 mb-1">{displayName}</h3>
+            <div className="d-flex flex-wrap gap-2 align-items-center">
+              <Badge bg="light" text="dark">
+                {t(INDEX_CATEGORY_LABEL_KEYS[category])}
+              </Badge>
+              <Badge
+                bg={
+                  riskLevel === 'aggressive'
+                    ? 'danger'
+                    : riskLevel === 'balanced'
+                      ? 'warning'
+                      : 'success'
+                }
+              >
+                {t(INDEX_RISK_LABEL_KEYS[riskLevel])}
+              </Badge>
+              {fallback && (
+                <Badge bg="secondary" text="light">
+                  {t('offline_data')}
+                </Badge>
+              )}
+            </div>
+          </div>
+          <small className="text-muted text-end">
+            {t('data_source')} <br />
+            {source.historyEndpoint}
+          </small>
+        </div>
+
+        <p className="text-muted mb-0">{description}</p>
+
+        <dl className={`${styles.metric} d-flex flex-wrap gap-4 align-items-center`}>
+          <dt className="text-muted mb-1">{t('index_metric_latest_value')}</dt>
+          <dd className={styles.value}>{formatNumber(latestValue, currentLanguage)}</dd>
+
+          <dt className="text-muted mb-1">{t('index_metric_daily_change')}</dt>
+          <dd className={valueTone(dailyChangePct)}>{formatPercent(dailyChangePct)}</dd>
+
+          <dt className="text-muted mb-1">{t('index_metric_one_year_return')}</dt>
+          <dd className={valueTone(oneYearReturnPct)}>{formatPercent(oneYearReturnPct)}</dd>
+
+          <dt className="text-muted mb-1">{t('index_metric_max_drawdown')}</dt>
+          <dd className={valueTone(maxDrawdownPct)}>{formatPercent(maxDrawdownPct)}</dd>
+        </dl>
+
+        <SparkLine points={sparkline} chartId={sparklineId} />
+
+        <ul className="list-unstyled m-0 d-flex flex-wrap gap-2">
+          {tags?.map(tag => (
+            <Badge key={tag} as="li" bg="light" text="dark" className={styles.tagBadge}>
+              {tag}
+            </Badge>
+          ))}
+        </ul>
+
+        <time className="small text-muted" dateTime={updatedAtISO}>
+          {t('updated_at')} {updatedAt || '--'}
+        </time>
+
+        <a href={`/finance/${symbol}`} className="text-primary fw-semibold">
+          {t('view_details')}
+        </a>
+      </Card.Body>
+    </Card>
+  );
+};

components/Finance/SparkLine.module.less

@@ -0,0 +1,17 @@
+.sparkline {
+  width: 100%;
+  height: 80px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .placeholder {
+    border: 1px dashed rgba(15, 23, 42, 0.2);
+    border-radius: 12px;
+    padding: 1rem;
+    color: rgba(15, 23, 42, 0.6);
+    text-align: center;
+  }
+}

components/Finance/SparkLine.tsx

@@ -0,0 +1,89 @@
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservedComponent } from 'mobx-react-helper';
+
+import { i18n, I18nContext } from '../../models/Translation';
+import { IndexHistoryPoint } from '../../types/finance';
+import styles from './SparkLine.module.less';
+
+export interface SparkLineProps {
+  points: IndexHistoryPoint[];
+  chartId: string;
+}
+
+@observer
+export class SparkLine extends ObservedComponent<SparkLineProps, typeof i18n> {
+  static contextType = I18nContext;
+
+  @computed
+  get chartData() {
+    const { points } = this.observedProps;
+
+    if (!points.length) return { polyline: '', gradientStops: [] as number[] };
+
+    const values = points.map(({ value }) => value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const delta = max - min || 1;
+
+    const polylinePoints = points
+      .map(({ value }, index, { length }) => {
+        const x = (index / Math.max(length - 1, 1)) * 100;
+        const y = ((max - value) / delta) * 40;
+
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(' ');
+
+    const gradientOffsets = [0, 50, 100];
+
+    return { polyline: polylinePoints, gradientStops: gradientOffsets };
+  }
+
+  renderContent() {
+    const { t } = this.observedContext,
+      { chartId } = this.observedProps,
+      { polyline, gradientStops } = this.chartData;
+    const gradientId = `${chartId}-gradient`;
+
+    return (
+      <div className={styles.sparkline}>
+        <svg viewBox="0 0 100 40" role="img" aria-label={t('index_sparkline_60d_label')}>
+          <defs>
+            <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+              {gradientStops.map(offset => (
+                <stop
+                  key={offset}
+                  offset={`${offset}%`}
+                  stopColor="var(--bs-primary)"
+                  stopOpacity="0.5"
+                />
+              ))}
+            </linearGradient>
+          </defs>
+          <polyline
+            fill="none"
+            stroke={`url(#${gradientId})`}
+            strokeWidth="2"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            points={polyline}
+          />
+        </svg>
+      </div>
+    );
+  }
+
+  render() {
+    const { t } = this.observedContext,
+      { points } = this.props;
+
+    return points.length ? (
+      this.renderContent()
+    ) : (
+      <div className={styles.sparkline}>
+        <div className={styles.placeholder}>{t('data_preparing')}</div>
+      </div>
+    );
+  }
+}

constants/finance.ts

@@ -0,0 +1,14 @@
+import { IndexFundCategory, IndexRiskLevel } from '../types/finance';
+import { I18nKey } from '../models/Translation';
+
+export const INDEX_CATEGORY_LABEL_KEYS: Record<IndexFundCategory, I18nKey> = {
+  broad: 'index_category_broad',
+  sector: 'index_category_sector',
+  theme: 'index_category_theme',
+};
+
+export const INDEX_RISK_LABEL_KEYS: Record<IndexRiskLevel, I18nKey> = {
+  conservative: 'index_risk_conservative',
+  balanced: 'index_risk_balanced',
+  aggressive: 'index_risk_aggressive',
+};

eslint.config.ts

@@ -2,6 +2,7 @@ import cspellPlugin from '@cspell/eslint-plugin';
 import eslint from '@eslint/js';
 import nextPlugin from '@next/eslint-plugin-next';
 import stylistic from '@stylistic/eslint-plugin';
+import { defineConfig } from 'eslint/config';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import react from 'eslint-plugin-react';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
@@ -16,7 +17,7 @@ import { fileURLToPath } from 'url';
 
 const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
 
-export default tsEslint.config(
+export default defineConfig(
   // register all of the plugins up-front
   {
     plugins: {
@@ -47,7 +48,6 @@ export default tsEslint.config(
         warnOnUnsupportedTypeScriptVersion: false,
       },
     },
-    // @ts-expect-error https://github.com/vercel/next.js/issues/81695
     rules: {
       // spellchecker
       '@cspell/spellchecker': [