feat(finance): internationalize finance page and fund cards

- Replace hardcoded Chinese copy in /pages/finance and FundCard with i18n t() calls
- Refactor finance constants to export i18n label keys instead of raw strings
- Add finance-related translation entries for zh-CN, en-US, and zh-TW
- Move Finance styles from global SCSS to co-located Finance.module.less
- Tweak AkShare/finance data utilities and API handler to align with new flow

Author: dethan3

styles/Finance.module.scss components/Finance/Finance.module.lessstyles/Finance.module.scss renamed to components/Finance/Finance.module.less

@@ -1,36 +1,39 @@
-import { FC, useMemo } from 'react';
+import { FC, useContext, useMemo } from 'react';
 import { Badge, Card } from 'react-bootstrap';
 
-import { INDEX_CATEGORY_LABELS, INDEX_RISK_LABELS } from '../../constants/finance';
-import styles from '../../styles/Finance.module.scss';
+import { INDEX_CATEGORY_LABEL_KEYS, INDEX_RISK_LABEL_KEYS } from '../../constants/finance';
+import { I18nContext } from '../../models/Translation';
 import { IndexFundSnapshot, IndexHistoryPoint } from '../../types/finance';
+import styles from './Finance.module.less';
 
 export interface FundCardProps {
   data: IndexFundSnapshot;
 }
 
-const formatNumber = (value: number | null | undefined) =>
-  value == null ? '--' : value.toLocaleString('zh-CN', { maximumFractionDigits: 2 });
+const formatNumber = (value?: number | null) =>
+  value != null ? value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) : '--';
 
-const formatPercent = (value: number | null | undefined) =>
-  value == null ? '--' : `${(value * 100).toFixed(2)}%`;
+const formatPercent = (value?: number | null) =>
+  value != null ? `${(value * 100).toFixed(2)}%` : '--';
 
-const valueTone = (value: number | null | undefined) =>
-  value == null ? styles.mutedText : value >= 0 ? styles.positiveText : styles.negativeText;
+const valueTone = (value?: number | null) =>
+  value != null ? (value >= 0 ? styles.positiveText : styles.negativeText) : styles.mutedText;
 
 const Sparkline: FC<{ points: IndexHistoryPoint[]; chartId: string }> = ({ points, chartId }) => {
+  const { t } = useContext(I18nContext);
+
   const { polyline, gradientStops } = useMemo(() => {
     if (!points.length) return { polyline: '', gradientStops: [] as number[] };
 
-    const values = points.map(point => point.value);
+    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((point, index) => {
-        const x = (index / Math.max(points.length - 1, 1)) * 100;
-        const y = ((max - point.value) / delta) * 40;
+      .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)}`;
       })
@@ -40,14 +43,11 @@ const Sparkline: FC<{ points: IndexHistoryPoint[]; chartId: string }> = ({ point
 
     return { polyline: polylinePoints, gradientStops: gradientOffsets };
   }, [points]);
-
-  if (!points.length) return <div className={styles.sparklinePlaceholder}>数据准备中</div>;
-
   const gradientId = `${chartId}-gradient`;
 
   return (
     <div className={styles.sparkline}>
-      <svg viewBox="0 0 100 40" role="img" aria-label="近 60 日走势">
+      <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 => (
@@ -73,22 +73,25 @@ const Sparkline: FC<{ points: IndexHistoryPoint[]; chartId: string }> = ({ point
   );
 };
 
-export const FundCard: FC<FundCardProps> = ({ data }) => {
-  const {
-    displayName,
-    category,
-    riskLevel,
-    latestValue,
-    dailyChangePct,
-    oneYearReturnPct,
-    maxDrawdownPct,
-    tags,
-    sparkline,
-    updatedAt,
-    fallback,
-    description,
-  } = data;
-  const sparklineId = useMemo(() => `fund-${data.symbol}`, [data.symbol]);
+export const FundCard: FC<IndexFundSnapshot> = ({
+  symbol,
+  displayName,
+  category,
+  riskLevel,
+  latestValue,
+  dailyChangePct,
+  oneYearReturnPct,
+  maxDrawdownPct,
+  tags,
+  sparkline,
+  updatedAt,
+  fallback,
+  description,
+  source,
+}) => {
+  const { t } = useContext(I18nContext);
+  const sparklineId = useMemo(() => `fund-${symbol}`, [symbol]);
+  const updatedAtISO = updatedAt ? new Date(updatedAt).toJSON() : undefined;
 
   return (
     <Card className={`${styles.fundCard} h-100`}>
@@ -100,7 +103,7 @@ export const FundCard: FC<FundCardProps> = ({ data }) => {
             <h3 className="h5 mb-1">{displayName}</h3>
             <div className="d-flex flex-wrap gap-2 align-items-center">
               <Badge bg="light" text="dark">
-                {INDEX_CATEGORY_LABELS[category]}
+                {t(INDEX_CATEGORY_LABEL_KEYS[category])}
               </Badge>
               <Badge
                 bg={
@@ -111,60 +114,58 @@ export const FundCard: FC<FundCardProps> = ({ data }) => {
                       : 'success'
                 }
               >
-                {INDEX_RISK_LABELS[riskLevel]}
+                {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">
-            数据源 <br />
-            {data.source.historyEndpoint}
+            {t('data_source')} <br />
+            {source.historyEndpoint}
           </small>
         </div>
 
         <p className="text-muted mb-0">{description}</p>
 
-        <div className={`${styles.metricRow} d-flex flex-wrap gap-4 align-items-center`}>
-          <div>
-            <p className="text-muted mb-1">最新点位</p>
-            <span className={styles.metricValue}>{formatNumber(latestValue)}</span>
-          </div>
-          <div>
-            <p className="text-muted mb-1">日涨跌</p>
-            <strong className={valueTone(dailyChangePct)}>{formatPercent(dailyChangePct)}</strong>
-          </div>
-          <div>
-            <p className="text-muted mb-1">近 1 年收益</p>
-            <strong className={valueTone(oneYearReturnPct)}>
-              {formatPercent(oneYearReturnPct)}
-            </strong>
-          </div>
-          <div>
-            <p className="text-muted mb-1">最大回撤</p>
-            <strong className={valueTone(maxDrawdownPct)}>{formatPercent(maxDrawdownPct)}</strong>
-          </div>
-        </div>
+        <dl className={`${styles.metricRow} d-flex flex-wrap gap-4 align-items-center`}>
+          <dt className="text-muted mb-1">{t('index_metric_latest_value')}</dt>
+          <dd className={styles.metricValue}>{formatNumber(latestValue)}</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>
 
-        <Sparkline points={sparkline} chartId={sparklineId} />
+          <dt className="text-muted mb-1">{t('index_metric_max_drawdown')}</dt>
+          <dd className={valueTone(maxDrawdownPct)}>{formatPercent(maxDrawdownPct)}</dd>
+        </dl>
 
-        <div className="d-flex flex-wrap gap-2">
+        {sparkline.length ? (
+          <Sparkline points={sparkline} chartId={sparklineId} />
+        ) : (
+          <div className={styles.sparklinePlaceholder}>{t('data_preparing')}</div>
+        )}
+
+        <ul className="list-unstyled m-0 d-flex flex-wrap gap-2">
           {tags?.map(tag => (
-            <Badge key={tag} bg="light" text="dark" className={styles.tagBadge}>
+            <Badge key={tag} as="li" bg="light" text="dark" className={styles.tagBadge}>
               {tag}
             </Badge>
           ))}
-        </div>
+        </ul>
 
-        <div className="d-flex justify-content-between align-items-center">
-          <small className="text-muted">更新于 {updatedAt || '--'}</small>
-          <a href={`/finance/${data.symbol}`} className="text-primary fw-semibold">
-            查看详情 →
-          </a>
-        </div>
+        <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/FundCard.tsx

@@ -1,13 +1,16 @@
 import { IndexFundCategory, IndexRiskLevel } from '../types/finance';
+import zhCN from '../translation/zh-CN';
 
-export const INDEX_CATEGORY_LABELS: Record<IndexFundCategory, string> = {
-  broad: '宽基',
-  sector: '行业',
-  theme: '主题',
+export type FinanceLabelKey = keyof typeof zhCN;
+
+export const INDEX_CATEGORY_LABEL_KEYS: Record<IndexFundCategory, FinanceLabelKey> = {
+  broad: 'index_category_broad',
+  sector: 'index_category_sector',
+  theme: 'index_category_theme',
 };
 
-export const INDEX_RISK_LABELS: Record<IndexRiskLevel, string> = {
-  conservative: '保守',
-  balanced: '稳健',
-  aggressive: '进取',
+export const INDEX_RISK_LABEL_KEYS: Record<IndexRiskLevel, FinanceLabelKey> = {
+  conservative: 'index_risk_conservative',
+  balanced: 'index_risk_balanced',
+  aggressive: 'index_risk_aggressive',
 };

constants/finance.ts

@@ -1,3 +1,5 @@
+import { buildURLData } from 'web-utility';
+
 const DEFAULT_HOSTS = [
   process.env.AKSHARE_API_BASE,
   'https://akshare.xyz/api/public',
@@ -8,22 +10,14 @@ export async function requestAkShareJSON<T>(
   endpoint: string,
   params?: Record<string, string | number | undefined>,
 ): Promise<T> {
-  if (!DEFAULT_HOSTS.length) throw new Error('No AkShare host configured');
-
   let lastError: Error | null = null;
 
   for (const host of DEFAULT_HOSTS) {
     try {
       const url = new URL(endpoint.replace(/^\//, ''), host.endsWith('/') ? host : `${host}/`);
 
       if (params) {
-        const searchParams = new URLSearchParams();
-
-        Object.entries(params).forEach(([key, value]) => {
-          if (value !== undefined) searchParams.append(key, String(value));
-        });
-
-        const serialized = searchParams.toString();
+        const serialized = buildURLData(params).toString();
 
         if (serialized) url.search = serialized;
       }

lib/akshare.ts

@@ -2,11 +2,8 @@ import { IndexHistoryPoint } from '../types/finance';
 
 export const TRADING_DAYS_PER_YEAR = 252;
 
-export function computeChangePct(current?: number | null, base?: number | null) {
-  if (current == null || base == null || base === 0) return null;
-
-  return (current - base) / base;
-}
+export const computeChangePct = (current?: number | null, base?: number | null): number | null =>
+  current == null || base == null || base === 0 ? null : (current - base) / base;
 
 export function computeOneYearReturn(series: IndexHistoryPoint[]) {
   if (series.length < 2) return null;
@@ -16,12 +13,10 @@ export function computeOneYearReturn(series: IndexHistoryPoint[]) {
 
   if (recent.length < 2) return null;
 
-  const first = recent[0].value;
-  const last = recent[recent.length - 1].value;
-
-  if (!first) return null;
+  const [{ value: first }] = recent;
+  const { value: last } = recent.at(-1)!;
 
-  return (last - first) / first;
+  return computeChangePct(last, first);
 }
 
 export function computeMaxDrawdown(series: IndexHistoryPoint[]) {
@@ -32,35 +27,26 @@ export function computeMaxDrawdown(series: IndexHistoryPoint[]) {
   let peak = sorted[0].value;
   let maxDrawdown = 0;
 
-  sorted.forEach(point => {
-    const { value } = point;
-
+  for (const { value } of sorted) {
     if (value > peak) peak = value;
 
-    if (!peak) return;
+    if (!peak) break;
 
-    const drawdown = (value - peak) / peak;
+    const drawdown = computeChangePct(value, peak);
 
-    if (drawdown < maxDrawdown) maxDrawdown = drawdown;
-  });
+    if (drawdown != null && drawdown < maxDrawdown) maxDrawdown = drawdown;
+  }
 
-  return maxDrawdown || null;
+  return maxDrawdown;
 }
 
 export function computeDailyChange(series: IndexHistoryPoint[]) {
   if (series.length < 2) return null;
 
-  const sorted = [...series].sort((a, b) => a.date.localeCompare(b.date));
-  const latest = sorted[sorted.length - 1].value;
-  const previous = sorted[sorted.length - 2].value;
+  const [{ value: previous }, { value: latest }] = series.slice(-2);
 
   return computeChangePct(latest, previous);
 }
 
-export function buildSparkline(series: IndexHistoryPoint[], limit = 30) {
-  if (!series.length) return [];
-
-  const sorted = [...series].sort((a, b) => a.date.localeCompare(b.date));
-
-  return sorted.slice(-limit);
-}
+export const buildSparkline = (series: IndexHistoryPoint[], limit = 30) =>
+  [...series].sort((a, b) => a.date.localeCompare(b.date)).slice(-limit);

lib/finance.ts

@@ -1,4 +1,6 @@
+import { observable } from 'mobx';
 import { ListModel } from 'mobx-restful';
+import { buildURLData } from 'web-utility';
 
 import { ownClient } from './Base';
 import { IndexFundSnapshot, IndexFundCategory, IndexRiskLevel } from '../types/finance';
@@ -17,31 +19,18 @@ export class IndexFundModel extends ListModel<IndexFundSnapshot, IndexFundFilter
   client = ownClient;
   baseURI = 'finance/index-funds';
 
-  constructor() {
-    super();
-    this.pageSize = 8;
-  }
-
-  async loadPage(page = this.pageIndex, perPage = this.pageSize, filter: IndexFundFilter = {}) {
-    const search = new URLSearchParams();
-
-    if (filter.category) search.set('category', filter.category);
-    if (filter.riskLevel) search.set('riskLevel', filter.riskLevel);
-
-    search.set('limit', String(perPage));
+  @observable accessor pageSize = 8;
 
-    const query = search.toString();
+  async loadPage(page = this.pageIndex, limit = this.pageSize, filter: IndexFundFilter = {}) {
+    const query = buildURLData({ ...filter, limit }).toString();
     const path = query ? `${this.baseURI}?${query}` : this.baseURI;
 
     const { body } = await this.client.get<IndexFundAPIResponse>(path);
 
-    const data = body?.data || [];
-    const totalCount = body?.meta?.total ?? data.length;
+    const pageData = body?.data || [];
+    const totalCount = body?.meta?.total ?? pageData.length;
 
-    return {
-      pageData: data,
-      totalCount,
-    };
+    return { pageData, totalCount };
   }
 }