Skip to content

[add] Wealth Product selector page #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TechQuery merged 6 commits into from
Dec 6, 2025
Merged

[add] Wealth Product selector page #39

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4162281
feat: Add finance MVP with AkShare data service and landing page
dethan3 Nov 16, 2025
f8ca608
[fix] PNPM lock dismatch
TechQuery Nov 16, 2025
3a1f964
feat(finance): internationalize finance page and fund cards
dethan3 Dec 6, 2025
4d89463
[refactor] split Spark Line component into an independent module
TechQuery Dec 6, 2025
712096f
[optimize] generate Next.js types automatically
TechQuery Dec 6, 2025
c1ca5c7
chore: document /finance page in README and remove finance PRD
dethan3 Dec 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 163 additions & 0 deletions components/Finance/Finance.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
.financePage {
padding-bottom: 4rem;
}

.hero {
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 32px;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(25, 135, 84, 0.08));
padding-right: clamp(1.5rem, 4vw, 3rem);
padding-left: clamp(1.5rem, 4vw, 3rem);
}

.heroBadge {
letter-spacing: 0.2em;
text-transform: uppercase;
}

.heroChip {
border-radius: 999px;
background: rgba(13, 110, 253, 0.08);
padding: 0.35rem 0.9rem;
font-weight: 600;
font-size: 0.9rem;
}

.heroStats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}

.heroStatCard {
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 20px;
background: #fff;
padding: 1.5rem;
}

.filterPanel {
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 24px;
background: #fff;
padding: 2rem;
}

.segmentedControl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
}

.segmentedButton {
transition: all 0.2s ease;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 16px;
background: #f5f7fb;
padding: 0.75rem 1rem;
font-weight: 600;
text-align: left;
}

.segmentedButtonActive {
box-shadow: 0 10px 30px rgba(13, 110, 253, 0.15);
border-color: rgba(13, 110, 253, 0.5);
background: linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(25, 135, 84, 0.12));
color: #0d6efd;
}

.listSection {
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 24px;
background: #fff;
padding: 2rem;
}

.emptyState {
border: 1px dashed rgba(15, 23, 42, 0.2);
border-radius: 20px;
background: rgba(248, 249, 250, 0.7);
padding: 2.5rem;
text-align: center;
}

.educationSection {
border-radius: 28px;
background: rgba(13, 110, 253, 0.05);
padding: 2rem;
}

.educationCard {
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 20px;
background: #fff;
padding: 1.75rem;
height: 100%;
}

.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;
}

.fundCard:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.fundCardHeader small {
line-height: 1.3;
}

.metricRow {
gap: 1.5rem;
}

.metricValue {
font-weight: 700;
font-size: 2rem;
}

.sparkline {
width: 100%;
height: 80px;
}

.sparkline svg {
width: 100%;
height: 100%;
}

.sparklinePlaceholder {
border: 1px dashed rgba(15, 23, 42, 0.2);
border-radius: 12px;
padding: 1rem;
color: rgba(15, 23, 42, 0.6);
text-align: center;
}

.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;
}
172 changes: 172 additions & 0 deletions components/Finance/FundCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
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, IndexHistoryPoint } from '../../types/finance';
import styles from './Finance.module.less';

export interface FundCardProps {
data: IndexFundSnapshot;
}

const formatNumber = (value?: number | null) =>
value != null ? value.toLocaleString('zh-CN', { 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;

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(({ 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 };
}, [points]);
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>
);
};

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`}>
<Card.Body className="d-flex flex-column gap-3">
<div
className={`${styles.fundCardHeader} 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.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>

<dt className="text-muted mb-1">{t('index_metric_max_drawdown')}</dt>
<dd className={valueTone(maxDrawdownPct)}>{formatPercent(maxDrawdownPct)}</dd>
</dl>

{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} as="li" bg="light" text="dark" className={styles.tagBadge}>
{tag}
</Badge>
))}
</ul>
Comment on lines +91 to +97
Copy link

@coderabbitai coderabbitai bot Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

标签（tags）未国际化处理。

当前 tags 数组中的字符串（如 '宽基'、'蓝筹'）直接渲染，在非中文环境下会显示中文文本，违反国际化规范。

建议方案：

方案 1（推荐）：在 constants/finance.ts 中定义标签映射，类似 INDEX_CATEGORY_LABEL_KEYS：

// constants/finance.ts
export const INDEX_TAG_LABEL_KEYS: Record<string, string> = {
  '宽基': 'fund_tag_broad_base',
  '蓝筹': 'fund_tag_blue_chip',
  '成长': 'fund_tag_growth',
  // ... 其他标签
};

然后在组件中映射：

         <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}
+              {t(INDEX_TAG_LABEL_KEYS[tag] || tag)}
             </Badge>
           ))}
         </ul>

方案 2：API 返回标签的 key 而非中文字符串，组件通过 key 查找翻译。

基于 learnings：所有用户可见文本必须使用 t() 函数。

🤖 Prompt for AI Agents 
In components/Finance/FundCard.tsx around lines 154 to 160, the tags array is
rendered as raw Chinese strings which bypasses i18n; replace direct rendering
with translated labels by mapping tag values to translation keys (add an
INDEX_TAG_LABEL_KEYS or INDEX_TAG_KEY_MAP in constants/finance.ts mapping
Chinese tag strings to i18n keys), then in the component map each tag to
t(INDEX_TAG_LABEL_KEYS[tag] || tag) when rendering the Badge (use the original
tag as a safe fallback if no mapping exists); alternatively, if the API can be
changed, accept tag keys and call t(key) directly—ensure every user-visible tag
uses t() before render.


<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>
);
};
16 changes: 16 additions & 0 deletions constants/finance.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { IndexFundCategory, IndexRiskLevel } from '../types/finance';
import zhCN from '../translation/zh-CN';

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_LABEL_KEYS: Record<IndexRiskLevel, FinanceLabelKey> = {
conservative: 'index_risk_conservative',
balanced: 'index_risk_balanced',
aggressive: 'index_risk_aggressive',
};
Loading
Loading