refactor(Center): 全面优化个人中心模块
- 目录重命名：Dashboard → Center（匹配路由 /home/center） - 删除遗留代码：Default.js、InvestmentPlansAndReviews.js、InvestmentCalendarChakra.js（共 2596 行） - 创建 src/types/center.ts 类型定义（15+ 接口） - 性能优化： - 创建 useCenterColors Hook 封装 7 个 useColorModeValue - 创建 utils/formatters.ts 提取纯函数 - 修复 loadRealtimeQuotes 的 useCallback 依赖项 - InvestmentPlanningCenter 添加 useMemo 缓存 - TypeScript 迁移：Center.js → Center.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
349
src/types/center.ts
Normal file
349
src/types/center.ts
Normal file
@@ -0,0 +1,349 @@
|
||||
/**
|
||||
* Center（个人中心）模块类型定义
|
||||
*
|
||||
* 包含自选股、实时行情、关注事件等类型
|
||||
*/
|
||||
|
||||
import type { NavigateFunction } from 'react-router-dom';
|
||||
|
||||
// ============================================================
|
||||
// Dashboard Events Hook 类型定义
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* useDashboardEvents Hook 配置选项
|
||||
*/
|
||||
export interface DashboardEventsOptions {
|
||||
/** 页面类型 */
|
||||
pageType?: 'center' | 'profile' | 'settings';
|
||||
/** 路由导航函数 */
|
||||
navigate?: NavigateFunction;
|
||||
}
|
||||
|
||||
/**
|
||||
* useDashboardEvents Hook 返回值
|
||||
*/
|
||||
export interface DashboardEventsResult {
|
||||
/** 追踪功能卡片点击 */
|
||||
trackFunctionCardClicked: (cardName: string, cardData?: { count?: number }) => void;
|
||||
/** 追踪自选股列表查看 */
|
||||
trackWatchlistViewed: (stockCount?: number, hasRealtime?: boolean) => void;
|
||||
/** 追踪自选股点击 */
|
||||
trackWatchlistStockClicked: (stock: { code: string; name?: string }, position?: number) => void;
|
||||
/** 追踪自选股添加 */
|
||||
trackWatchlistStockAdded: (stock: { code: string; name?: string }, source?: string) => void;
|
||||
/** 追踪自选股移除 */
|
||||
trackWatchlistStockRemoved: (stock: { code: string; name?: string }) => void;
|
||||
/** 追踪关注事件列表查看 */
|
||||
trackFollowingEventsViewed: (eventCount?: number) => void;
|
||||
/** 追踪关注事件点击 */
|
||||
trackFollowingEventClicked: (event: { id: number; title?: string }, position?: number) => void;
|
||||
/** 追踪评论列表查看 */
|
||||
trackCommentsViewed: (commentCount?: number) => void;
|
||||
/** 追踪订阅信息查看 */
|
||||
trackSubscriptionViewed: (subscription?: { plan?: string; status?: string }) => void;
|
||||
/** 追踪升级按钮点击 */
|
||||
trackUpgradePlanClicked: (currentPlan?: string, targetPlan?: string, source?: string) => void;
|
||||
/** 追踪个人资料更新 */
|
||||
trackProfileUpdated: (updatedFields?: string[]) => void;
|
||||
/** 追踪设置更改 */
|
||||
trackSettingChanged: (settingName: string, oldValue: unknown, newValue: unknown) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自选股项目
|
||||
* 来自 /api/account/watchlist 接口
|
||||
*/
|
||||
export interface WatchlistItem {
|
||||
/** 股票代码（如 '600000.SH'） */
|
||||
stock_code: string;
|
||||
|
||||
/** 股票名称 */
|
||||
stock_name: string;
|
||||
|
||||
/** 当前价格 */
|
||||
current_price?: number;
|
||||
|
||||
/** 涨跌幅（百分比） */
|
||||
change_percent?: number;
|
||||
|
||||
/** 添加时间 */
|
||||
created_at?: string;
|
||||
|
||||
/** 备注 */
|
||||
note?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 实时行情数据
|
||||
* 来自 /api/account/watchlist/realtime 接口
|
||||
*/
|
||||
export interface RealtimeQuote {
|
||||
/** 股票代码 */
|
||||
stock_code: string;
|
||||
|
||||
/** 当前价格 */
|
||||
current_price: number;
|
||||
|
||||
/** 涨跌幅（百分比） */
|
||||
change_percent: number;
|
||||
|
||||
/** 涨跌额 */
|
||||
change_amount?: number;
|
||||
|
||||
/** 成交量 */
|
||||
volume?: number;
|
||||
|
||||
/** 成交额 */
|
||||
amount?: number;
|
||||
|
||||
/** 最高价 */
|
||||
high?: number;
|
||||
|
||||
/** 最低价 */
|
||||
low?: number;
|
||||
|
||||
/** 开盘价 */
|
||||
open?: number;
|
||||
|
||||
/** 昨收价 */
|
||||
pre_close?: number;
|
||||
|
||||
/** 更新时间戳 */
|
||||
timestamp?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 实时行情映射表
|
||||
* key 为股票代码，value 为行情数据
|
||||
*/
|
||||
export type RealtimeQuotesMap = Record<string, RealtimeQuote>;
|
||||
|
||||
/**
|
||||
* 关注的事件
|
||||
* 来自 /api/account/events/following 接口
|
||||
*/
|
||||
export interface FollowingEvent {
|
||||
/** 事件 ID */
|
||||
id: number;
|
||||
|
||||
/** 事件标题 */
|
||||
title: string;
|
||||
|
||||
/** 关注人数 */
|
||||
follower_count?: number;
|
||||
|
||||
/** 相关股票平均涨跌幅（百分比） */
|
||||
related_avg_chg?: number;
|
||||
|
||||
/** 事件类型 */
|
||||
event_type?: string;
|
||||
|
||||
/** 发生日期 */
|
||||
event_date?: string;
|
||||
|
||||
/** 事件描述 */
|
||||
description?: string;
|
||||
|
||||
/** 相关股票列表 */
|
||||
related_stocks?: Array<{
|
||||
code: string;
|
||||
name: string;
|
||||
change_percent?: number;
|
||||
}>;
|
||||
|
||||
/** 创建时间 */
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户评论记录
|
||||
* 来自 /api/account/events/posts 接口
|
||||
*/
|
||||
export interface EventComment {
|
||||
/** 评论 ID */
|
||||
id: number;
|
||||
|
||||
/** 评论内容 */
|
||||
content: string;
|
||||
|
||||
/** 关联事件 ID */
|
||||
event_id: number;
|
||||
|
||||
/** 关联事件标题 */
|
||||
event_title?: string;
|
||||
|
||||
/** 点赞数 */
|
||||
like_count?: number;
|
||||
|
||||
/** 回复数 */
|
||||
reply_count?: number;
|
||||
|
||||
/** 创建时间 */
|
||||
created_at: string;
|
||||
|
||||
/** 更新时间 */
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 组件 Props 类型定义
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* WatchSidebar 组件 Props
|
||||
*/
|
||||
export interface WatchSidebarProps {
|
||||
/** 自选股列表 */
|
||||
watchlist: WatchlistItem[];
|
||||
|
||||
/** 实时行情数据（按股票代码索引） */
|
||||
realtimeQuotes: RealtimeQuotesMap;
|
||||
|
||||
/** 关注的事件列表 */
|
||||
followingEvents: FollowingEvent[];
|
||||
|
||||
/** 点击股票回调 */
|
||||
onStockClick?: (stock: WatchlistItem) => void;
|
||||
|
||||
/** 点击事件回调 */
|
||||
onEventClick?: (event: FollowingEvent) => void;
|
||||
|
||||
/** 添加股票回调 */
|
||||
onAddStock?: () => void;
|
||||
|
||||
/** 添加事件回调 */
|
||||
onAddEvent?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* WatchlistPanel 组件 Props
|
||||
*/
|
||||
export interface WatchlistPanelProps {
|
||||
/** 自选股列表 */
|
||||
watchlist: WatchlistItem[];
|
||||
|
||||
/** 实时行情数据 */
|
||||
realtimeQuotes: RealtimeQuotesMap;
|
||||
|
||||
/** 点击股票回调 */
|
||||
onStockClick?: (stock: WatchlistItem) => void;
|
||||
|
||||
/** 添加股票回调 */
|
||||
onAddStock?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* FollowingEventsPanel 组件 Props
|
||||
*/
|
||||
export interface FollowingEventsPanelProps {
|
||||
/** 事件列表 */
|
||||
events: FollowingEvent[];
|
||||
|
||||
/** 点击事件回调 */
|
||||
onEventClick?: (event: FollowingEvent) => void;
|
||||
|
||||
/** 添加事件回调 */
|
||||
onAddEvent?: () => void;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Hooks 返回值类型定义
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* useCenterColors Hook 返回值
|
||||
* 封装 Center 模块的所有颜色变量
|
||||
*/
|
||||
export interface CenterColors {
|
||||
/** 主要文本颜色 */
|
||||
textColor: string;
|
||||
|
||||
/** 边框颜色 */
|
||||
borderColor: string;
|
||||
|
||||
/** 背景颜色 */
|
||||
bgColor: string;
|
||||
|
||||
/** 悬停背景色 */
|
||||
hoverBg: string;
|
||||
|
||||
/** 次要文本颜色 */
|
||||
secondaryText: string;
|
||||
|
||||
/** 卡片背景色 */
|
||||
cardBg: string;
|
||||
|
||||
/** 区块背景色 */
|
||||
sectionBg: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* useCenterData Hook 返回值
|
||||
* 封装 Center 页面的数据加载逻辑
|
||||
*/
|
||||
export interface UseCenterDataResult {
|
||||
/** 自选股列表 */
|
||||
watchlist: WatchlistItem[];
|
||||
|
||||
/** 实时行情数据 */
|
||||
realtimeQuotes: RealtimeQuotesMap;
|
||||
|
||||
/** 关注的事件列表 */
|
||||
followingEvents: FollowingEvent[];
|
||||
|
||||
/** 用户评论列表 */
|
||||
eventComments: EventComment[];
|
||||
|
||||
/** 加载状态 */
|
||||
loading: boolean;
|
||||
|
||||
/** 行情加载状态 */
|
||||
quotesLoading: boolean;
|
||||
|
||||
/** 刷新数据 */
|
||||
refresh: () => Promise<void>;
|
||||
|
||||
/** 刷新实时行情 */
|
||||
refreshQuotes: () => Promise<void>;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// API 响应类型定义
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 自选股列表 API 响应
|
||||
*/
|
||||
export interface WatchlistApiResponse {
|
||||
success: boolean;
|
||||
data: WatchlistItem[];
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 实时行情 API 响应
|
||||
*/
|
||||
export interface RealtimeQuotesApiResponse {
|
||||
success: boolean;
|
||||
data: RealtimeQuote[];
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 关注事件 API 响应
|
||||
*/
|
||||
export interface FollowingEventsApiResponse {
|
||||
success: boolean;
|
||||
data: FollowingEvent[];
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户评论 API 响应
|
||||
*/
|
||||
export interface EventCommentsApiResponse {
|
||||
success: boolean;
|
||||
data: EventComment[];
|
||||
message?: string;
|
||||
}
|
||||
@@ -63,3 +63,23 @@ export type {
|
||||
PlanFormData,
|
||||
PlanningContextValue,
|
||||
} from './investment';
|
||||
|
||||
// Center（个人中心）相关类型
|
||||
export type {
|
||||
DashboardEventsOptions,
|
||||
DashboardEventsResult,
|
||||
WatchlistItem,
|
||||
RealtimeQuote,
|
||||
RealtimeQuotesMap,
|
||||
FollowingEvent,
|
||||
EventComment,
|
||||
WatchSidebarProps,
|
||||
WatchlistPanelProps,
|
||||
FollowingEventsPanelProps,
|
||||
CenterColors,
|
||||
UseCenterDataResult,
|
||||
WatchlistApiResponse,
|
||||
RealtimeQuotesApiResponse,
|
||||
FollowingEventsApiResponse,
|
||||
EventCommentsApiResponse,
|
||||
} from './center';
|
||||
|
||||
Reference in New Issue
Block a user