diff --git a/src/components/FUI/CardGlow.tsx b/src/components/FUI/CardGlow.tsx new file mode 100644 index 00000000..fc687baa --- /dev/null +++ b/src/components/FUI/CardGlow.tsx @@ -0,0 +1,140 @@ +/** + * CardGlow - 卡片级装饰光效组件 + * + * 为卡片提供 FUI 风格的装饰元素： + * - 顶部光条（Ash Thorp 风格） + * - 角落发光效果（James Turrell 风格） + * - 可选背景网格 + * + * 与 AmbientGlow 的区别： + * - AmbientGlow: 页面级环境光，position: fixed + * - CardGlow: 卡片级装饰光，相对于父容器定位 + * + * @example + * ```tsx + * + * + * {children} + * + * ``` + */ + +import React, { memo } from 'react'; +import { Box } from '@chakra-ui/react'; + +export interface CardGlowProps { + /** 预设主题 */ + variant?: 'gold' | 'cyan' | 'purple' | 'default'; + /** 是否显示背景网格 */ + showGrid?: boolean; + /** 自定义主色（覆盖 variant） */ + primaryColor?: string; + /** 自定义次色（覆盖 variant） */ + secondaryColor?: string; +} + +// 预设颜色配置 +const COLOR_PRESETS = { + gold: { + primary: 'rgba(212, 175, 55, 1)', + secondary: 'rgba(0, 212, 255, 0.1)', + grid: 'rgba(212, 175, 55, 0.03)', + }, + cyan: { + primary: 'rgba(0, 212, 255, 1)', + secondary: 'rgba(212, 175, 55, 0.1)', + grid: 'rgba(0, 212, 255, 0.03)', + }, + purple: { + primary: 'rgba(168, 85, 247, 1)', + secondary: 'rgba(0, 212, 255, 0.1)', + grid: 'rgba(168, 85, 247, 0.03)', + }, + default: { + primary: 'rgba(255, 255, 255, 0.6)', + secondary: 'rgba(255, 255, 255, 0.1)', + grid: 'rgba(255, 255, 255, 0.02)', + }, +}; + +/** + * 卡片装饰光效组件 + * + * 纯展示组件，需要父容器设置 position: relative 和 overflow: hidden + */ +const CardGlow = memo(({ + variant = 'gold', + showGrid = true, + primaryColor, + secondaryColor, +}) => { + const preset = COLOR_PRESETS[variant]; + const primary = primaryColor || preset.primary; + const secondary = secondaryColor || preset.secondary; + const gridColor = preset.grid; + + return ( + <> + {/* 顶部光条 - Ash Thorp 风格数据终端效果 */} + + + {/* 左上角光晕 - James Turrell 风格光影效果 */} + + + {/* 右下角光晕 - 补充色，增加层次感 */} + + + {/* 背景网格 - 微妙的科技感纹理 */} + {showGrid && ( + + )} + + ); +}); + +CardGlow.displayName = 'CardGlow'; + +export default CardGlow; diff --git a/src/components/FUI/index.ts b/src/components/FUI/index.ts index 741e91d7..757a389d 100644 --- a/src/components/FUI/index.ts +++ b/src/components/FUI/index.ts @@ -1,12 +1,20 @@ /** * FUI (Futuristic UI) 组件集合 * Ash Thorp 风格的科幻 UI 组件 + * + * 组件说明： + * - FuiCorners: 科幻角落装饰 + * - FuiContainer: FUI 风格容器 + * - AmbientGlow: 页面级环境光效果（position: fixed） + * - CardGlow: 卡片级装饰光效（相对定位，用于卡片内部） */ export { default as FuiCorners } from './FuiCorners'; export { default as FuiContainer } from './FuiContainer'; export { default as AmbientGlow } from './AmbientGlow'; +export { default as CardGlow } from './CardGlow'; export type { FuiCornersProps } from './FuiCorners'; export type { FuiContainerProps } from './FuiContainer'; export type { AmbientGlowProps } from './AmbientGlow'; +export type { CardGlowProps } from './CardGlow'; diff --git a/src/views/Company/components/StockQuoteCard/components/GlassSection.tsx b/src/views/Company/components/StockQuoteCard/components/GlassSection.tsx new file mode 100644 index 00000000..b89d5508 --- /dev/null +++ b/src/views/Company/components/StockQuoteCard/components/GlassSection.tsx @@ -0,0 +1,79 @@ +/** + * GlassSection - 玻璃态内嵌区块组件 + * + * 用于包装数据区块（如估值指标、市值股本、主力动态） + * 提供统一的 FUI 风格容器样式： + * - 半透明背景 + * - 金色边框高亮 + * - 顶部光条装饰 + * - 悬停效果 + */ + +import React, { memo } from 'react'; +import { Box, Text } from '@chakra-ui/react'; +import { DEEP_SPACE_THEME as T } from './theme'; + +export interface GlassSectionProps { + /** 区块标题 */ + title: string; + /** 区块内容 */ + children: React.ReactNode; + /** flex 布局属性，默认 1 */ + flex?: number | string; +} + +/** + * 玻璃态内嵌区块 + * + * 提供统一的数据区块容器样式 + * 用于包装 KeyMetrics、MainForceInfo 等内容组件 + */ +export const GlassSection: React.FC = memo(({ + title, + children, + flex = 1, +}) => ( + + {/* 区块顶部金色光条装饰 */} + + + {/* 区块标题 */} + + {title} + + + {/* 区块内容 */} + {children} + +)); + +GlassSection.displayName = 'GlassSection'; + +export default GlassSection; diff --git a/src/views/Company/components/StockQuoteCard/components/KeyMetrics.tsx b/src/views/Company/components/StockQuoteCard/components/KeyMetrics.tsx index a725f88d..f2258870 100644 --- a/src/views/Company/components/StockQuoteCard/components/KeyMetrics.tsx +++ b/src/views/Company/components/StockQuoteCard/components/KeyMetrics.tsx @@ -1,23 +1,74 @@ /** * KeyMetrics - 关键指标原子组件 - * 显示 PE、EPS、PB、流通市值、52周波动 + * + * 显示估值和市值相关指标： + * - 市盈率 (PE) + * - 流通市值 + * - 发行总股本 + * - 流通股本 + * - 换手率 + * - 52周波动 + * + * 注意：标题由外层 GlassSection 提供 */ import React, { memo } from 'react'; -import { Box, VStack, HStack, Text } from '@chakra-ui/react'; +import { VStack, HStack, Text } from '@chakra-ui/react'; import { formatPrice } from './formatters'; -import { STOCK_CARD_THEME } from './theme'; +import { DEEP_SPACE_THEME as T } from './theme'; export interface KeyMetricsProps { + /** 市盈率 */ pe: number; + /** 流通市值（已格式化字符串） */ marketCap: string; - totalShares?: number; // 发行总股本（亿股） - floatShares?: number; // 流通股本（亿股） - turnoverRate?: number; // 换手率（%） + /** 发行总股本（亿股） */ + totalShares?: number; + /** 流通股本（亿股） */ + floatShares?: number; + /** 换手率（%） */ + turnoverRate?: number; + /** 52周最低价 */ week52Low: number; + /** 52周最高价 */ week52High: number; } +/** + * 指标行组件 - 内部使用 + */ +interface MetricRowProps { + label: string; + value: string | number; + valueColor?: string; + highlight?: boolean; +} + +const MetricRow: React.FC = ({ + label, + value, + valueColor = T.textWhite, + highlight = false, +}) => ( + + {label} + + {value} + + +); + +/** + * 关键指标展示组件 + * + * 纯展示组件，不包含标题 + * 应由 GlassSection 包装以提供标题 + */ export const KeyMetrics: React.FC = memo(({ pe, marketCap, @@ -26,59 +77,38 @@ export const KeyMetrics: React.FC = memo(({ turnoverRate, week52Low, week52High, -}) => { - const { labelColor, valueColor, sectionTitleColor } = STOCK_CARD_THEME; - - return ( - - - 关键指标 - - - - 市盈率(PE)： - - {pe ? pe.toFixed(2) : '-'} - - - - 流通市值： - - {marketCap || '-'} - - - - 发行总股本： - - {totalShares ? `${totalShares}亿股` : '-'} - - - - 流通股本： - - {floatShares ? `${floatShares}亿股` : '-'} - - - - 换手率： - - {turnoverRate !== undefined ? `${turnoverRate.toFixed(2)}%` : '-'} - - - - 52周波动： - - {formatPrice(week52Low)}-{formatPrice(week52High)} - - - - - ); -}); +}) => ( + + + + + + 5 ? T.orange : T.textWhite} + /> + + +)); KeyMetrics.displayName = 'KeyMetrics'; diff --git a/src/views/Company/components/StockQuoteCard/components/LoadingSkeleton.tsx b/src/views/Company/components/StockQuoteCard/components/LoadingSkeleton.tsx new file mode 100644 index 00000000..dea78c22 --- /dev/null +++ b/src/views/Company/components/StockQuoteCard/components/LoadingSkeleton.tsx @@ -0,0 +1,117 @@ +/** + * LoadingSkeleton - 股票行情卡片加载骨架屏 + * + * 在数据加载期间展示的骨架屏组件 + * 保持与实际内容相同的布局结构，提供良好的加载体验 + */ + +import React, { memo } from 'react'; +import { Box, Flex, HStack, VStack, Skeleton } from '@chakra-ui/react'; +import { CardGlow } from '@components/FUI'; +import { glassCardStyle, DEEP_SPACE_THEME as T } from './theme'; + +/** + * 股票行情卡片加载骨架屏 + * + * 布局结构对应实际卡片： + * - 头部：股票名称 + 操作按钮 + * - 价格：当前价格 + 涨跌幅 + * - 内容：多列数据区块 + */ +export const LoadingSkeleton: React.FC = memo(() => ( + + {/* 装饰性光效 */} + + + + {/* 头部骨架：股票名称 + 代码 + 操作按钮 */} + + + + + + + + + + + + {/* 价格骨架：当前价格 + 涨跌幅 Badge */} + + + + + + {/* 内容骨架：三列数据区块 */} + + + + + + + + + + + + + +)); + +LoadingSkeleton.displayName = 'LoadingSkeleton'; + +export default LoadingSkeleton; diff --git a/src/views/Company/components/StockQuoteCard/components/MainForceInfo.tsx b/src/views/Company/components/StockQuoteCard/components/MainForceInfo.tsx index 607d1a73..1964ce93 100644 --- a/src/views/Company/components/StockQuoteCard/components/MainForceInfo.tsx +++ b/src/views/Company/components/StockQuoteCard/components/MainForceInfo.tsx @@ -1,70 +1,113 @@ /** * MainForceInfo - 主力动态原子组件 - * 显示主力净流入、机构持仓、买卖比例 + * + * 显示主力资金和机构相关指标： + * - 主力净流入（带正负颜色） + * - 机构持仓比例 + * - 买卖比例进度条 + * + * 注意：标题由外层 GlassSection 提供 */ import React, { memo } from 'react'; import { Box, VStack, HStack, Text, Progress } from '@chakra-ui/react'; import { formatNetInflow } from './formatters'; -import { STOCK_CARD_THEME } from './theme'; +import { DEEP_SPACE_THEME as T } from './theme'; export interface MainForceInfoProps { + /** 主力净流入（亿） */ mainNetInflow: number; + /** 机构持仓比例（%） */ institutionHolding: number; + /** 买入比例（%） */ buyRatio: number; + /** 卖出比例（%） */ sellRatio: number; } +/** + * 指标行组件 - 内部使用 + */ +interface MetricRowProps { + label: string; + value: string | number; + valueColor?: string; + highlight?: boolean; +} + +const MetricRow: React.FC = ({ + label, + value, + valueColor = T.textWhite, + highlight = false, +}) => ( + + {label} + + {value} + + +); + +/** + * 主力动态展示组件 + * + * 纯展示组件，不包含标题 + * 应由 GlassSection 包装以提供标题 + */ export const MainForceInfo: React.FC = memo(({ mainNetInflow, institutionHolding, buyRatio, sellRatio, }) => { - const { labelColor, valueColor, sectionTitleColor, borderColor, upColor, downColor } = STOCK_CARD_THEME; - const inflowColor = mainNetInflow >= 0 ? upColor : downColor; + const inflowColor = mainNetInflow >= 0 ? T.upColor : T.downColor; return ( - - - 主力动态 - - - - 主力净流入： - - {formatNetInflow(mainNetInflow)} + + + + + {/* 买卖比例进度条 */} + + div': { + bg: T.upColor, + boxShadow: T.upGlow, + }, + }} + bg={T.downColor} + borderRadius="full" + h="8px" + /> + + + 买入 {buyRatio}% + + + 卖出 {sellRatio}% - - 机构持仓： - - {institutionHolding.toFixed(2)}% - - - {/* 买卖比例条 */} - - div': { bg: upColor }, - }} - bg={downColor} - borderRadius="full" - /> - - 买入{buyRatio}% - 卖出{sellRatio}% - - - - + + ); }); diff --git a/src/views/Company/components/StockQuoteCard/components/SecondaryQuote.tsx b/src/views/Company/components/StockQuoteCard/components/SecondaryQuote.tsx index d6e7a685..c8348f72 100644 --- a/src/views/Company/components/StockQuoteCard/components/SecondaryQuote.tsx +++ b/src/views/Company/components/StockQuoteCard/components/SecondaryQuote.tsx @@ -1,59 +1,74 @@ /** * SecondaryQuote - 次要行情原子组件 - * 显示今开、昨收、最高、最低 + * + * 显示今开、昨收、最高、最低等次要行情数据 + * 使用水平布局，通过竖线分隔符分隔各项 */ import React, { memo } from 'react'; -import { HStack, Text } from '@chakra-ui/react'; +import { Box, HStack, Text } from '@chakra-ui/react'; import { formatPrice } from './formatters'; -import { STOCK_CARD_THEME } from './theme'; +import { DEEP_SPACE_THEME as T } from './theme'; export interface SecondaryQuoteProps { + /** 今日开盘价 */ todayOpen: number; + /** 昨日收盘价 */ yesterdayClose: number; + /** 今日最高价 */ todayHigh: number; + /** 今日最低价 */ todayLow: number; } +/** + * 竖线分隔符组件 + */ +const Divider: React.FC = () => ( + +); + +/** + * 次要行情展示组件 + * + * 水平排列展示今开、昨收、最高、最低 + * 最高使用上涨颜色，最低使用下跌颜色 + */ export const SecondaryQuote: React.FC = memo(({ todayOpen, yesterdayClose, todayHigh, todayLow, -}) => { - const { labelColor, valueColor, borderColor, upColor, downColor } = STOCK_CARD_THEME; - - return ( - - - 今开： - - {formatPrice(todayOpen)} - +}) => ( + + + 今开： + + {formatPrice(todayOpen)} - | - - 昨收： - - {formatPrice(yesterdayClose)} - + + + + 昨收： + + {formatPrice(yesterdayClose)} - | - - 最高： - - {formatPrice(todayHigh)} - + + + + 最高： + + {formatPrice(todayHigh)} - | - - 最低： - - {formatPrice(todayLow)} - + + + + 最低： + + {formatPrice(todayLow)} - - ); -}); + + +)); SecondaryQuote.displayName = 'SecondaryQuote'; diff --git a/src/views/Company/components/StockQuoteCard/components/index.ts b/src/views/Company/components/StockQuoteCard/components/index.ts index 8fa88fd0..d55c031e 100644 --- a/src/views/Company/components/StockQuoteCard/components/index.ts +++ b/src/views/Company/components/StockQuoteCard/components/index.ts @@ -1,8 +1,16 @@ /** * StockQuoteCard 组件统一导出 + * + * 组件分类： + * - 原子组件：基础展示组件（价格、指标、信息） + * - 容器组件：布局和装饰组件（玻璃容器、光效） + * - 复合组件：功能组件（对比、搜索） + * - 状态组件：加载、错误状态 */ -// 原子组件 +// ============================================ +// 原子组件 - 数据展示 +// ============================================ export { PriceDisplay } from './PriceDisplay'; export { SecondaryQuote } from './SecondaryQuote'; export { KeyMetrics } from './KeyMetrics'; @@ -10,18 +18,36 @@ export { MainForceInfo } from './MainForceInfo'; export { CompanyInfo } from './CompanyInfo'; export { StockHeader } from './StockHeader'; -// 复合组件 +// ============================================ +// 容器组件 - 布局 +// ============================================ +// 注意: 装饰光效组件已移至 @components/FUI/CardGlow +export { GlassSection } from './GlassSection'; + +// ============================================ +// 状态组件 - 加载/错误 +// ============================================ +export { LoadingSkeleton } from './LoadingSkeleton'; + +// ============================================ +// 复合组件 - 功能性 +// ============================================ export { default as CompareStockInput } from './CompareStockInput'; export { default as StockCompareModal } from './StockCompareModal'; +// ============================================ // 工具和主题 -export { STOCK_CARD_THEME } from './theme'; +// ============================================ +export { STOCK_CARD_THEME, DEEP_SPACE_THEME, glassCardStyle } from './theme'; export * from './formatters'; +// ============================================ // 类型导出 +// ============================================ export type { PriceDisplayProps } from './PriceDisplay'; export type { SecondaryQuoteProps } from './SecondaryQuote'; export type { KeyMetricsProps } from './KeyMetrics'; export type { MainForceInfoProps } from './MainForceInfo'; export type { CompanyInfoProps, CompanyBasicInfo } from './CompanyInfo'; export type { StockHeaderProps } from './StockHeader'; +export type { GlassSectionProps } from './GlassSection'; diff --git a/src/views/Company/components/StockQuoteCard/index.tsx b/src/views/Company/components/StockQuoteCard/index.tsx index b65fd5c9..1ca542ef 100644 --- a/src/views/Company/components/StockQuoteCard/index.tsx +++ b/src/views/Company/components/StockQuoteCard/index.tsx @@ -6,13 +6,19 @@ * - 光影深度，弥散背景光 * - 极致圆角，科幻数据终端感 * - * 保留原有所有功能： - * - 股票头部（名称、代码、行业、对比、关注、分享） - * - 价格显示（当前价、涨跌幅） - * - 次要行情（今开、昨收、最高、最低） - * - 关键指标（PE、市值、股本、换手率、52周） - * - 主力动态（净流入、机构持仓、买卖比） - * - 公司信息（成立、注册资本、所在地、官网、简介） + * 功能模块： + * - 股票头部：名称、代码、行业标签、操作按钮（对比、关注、分享） + * - 价格展示：当前价格、涨跌幅 Badge + * - 次要行情：今开、昨收、最高、最低（SecondaryQuote 组件） + * - 数据区块：估值指标、市值股本、主力动态（三列 GlassSection 布局） + * + * 组件结构： + * - GlowDecorations：装饰性光效（背景层） + * - LoadingSkeleton：加载骨架屏 + * - GlassSection：玻璃容器（包装数据区块） + * - SecondaryQuote：次要行情展示 + * - KeyMetrics：关键指标（估值 + 市值） + * - MainForceInfo：主力动态 */ import React, { memo } from 'react'; @@ -25,144 +31,38 @@ import { Badge, IconButton, Tooltip, - Skeleton, - Progress, - Link, - Icon, useDisclosure, } from '@chakra-ui/react'; -import { Share2, Calendar, Coins, MapPin, Globe } from 'lucide-react'; +import { Share2 } from 'lucide-react'; import FavoriteButton from '@components/FavoriteButton'; +import { CardGlow } from '@components/FUI'; -import { StockCompareModal, CompareStockInput } from './components'; +// 子组件导入 +import { + StockCompareModal, + CompareStockInput, + LoadingSkeleton, + GlassSection, + SecondaryQuote, + MainForceInfo, +} from './components'; + +// Hooks 和工具 import { useStockQuoteData, useStockCompare } from './hooks'; -import { DEEP_SPACE_THEME, glassCardStyle, decorativeElements } from './components/theme'; -import { formatPrice, formatChangePercent, formatNetInflow } from './components/formatters'; -import { formatRegisteredCapital, formatDate } from '../CompanyOverview/utils'; +import { DEEP_SPACE_THEME, glassCardStyle } from './components/theme'; +import { formatPrice, formatChangePercent } from './components/formatters'; import type { StockQuoteCardProps } from './types'; +/** 主题常量简写 */ const T = DEEP_SPACE_THEME; /** - * 装饰性光效组件 - */ -const GlowDecorations: React.FC = () => ( - <> - {/* 顶部金色光条 */} - - - {/* 左上角光晕 */} - - - {/* 右下角光晕 */} - - - {/* 背景网格 */} - - -); - -/** - * 加载骨架屏 - */ -const LoadingSkeleton: React.FC = () => ( - - - - - {/* 头部骨架 */} - - - - - - - - - - - - {/* 价格骨架 */} - - - - - - {/* 内容骨架 */} - - - - - - - - - - -); - -/** - * 玻璃态内嵌区块 - */ -interface GlassSectionProps { - title: string; - children: React.ReactNode; - flex?: number | string; -} - -const GlassSection: React.FC = ({ title, children, flex = 1 }) => ( - - {/* 区块顶部光条 */} - - - - {title} - - {children} - -); - -/** - * 指标行组件 + * 指标行组件 - 用于数据区块内的单行指标展示 + * + * @param label - 指标标签 + * @param value - 指标值 + * @param valueColor - 值的颜色（默认白色） + * @param highlight - 是否高亮显示（加粗 + 发光） */ interface MetricRowProps { label: string; @@ -222,12 +122,11 @@ const StockQuoteCard: React.FC = ({ return ; } - // 涨跌判断 + // 涨跌判断（用于价格颜色） const isUp = quoteData.changePercent >= 0; const priceColor = isUp ? T.upColor : T.downColor; const priceGlow = isUp ? T.upGlow : T.downGlow; const priceBg = isUp ? T.upColorMuted : T.downColorMuted; - const inflowColor = (quoteData.mainNetInflow || 0) >= 0 ? T.upColor : T.downColor; return ( <> @@ -235,7 +134,7 @@ const StockQuoteCard: React.FC = ({ {...glassCardStyle.containerGold} p={6} > - + {/* 内容区域（在装饰层之上）*/} @@ -340,39 +239,16 @@ const StockQuoteCard: React.FC = ({ {/* ========== 次要行情 ========== */} - - - 今开： - - {formatPrice(quoteData.todayOpen)} - - - - - 昨收： - - {formatPrice(quoteData.yesterdayClose)} - - - - - 最高： - - {formatPrice(quoteData.todayHigh)} - - - - - 最低： - - {formatPrice(quoteData.todayLow)} - - - + {/* ========== 数据区块（三列布局）========== */} - {/* 第一列：估值指标 */} + {/* 第一列：估值指标 - PE、流通股本、换手率 */} = ({ - {/* 第二列：市值股本 */} + {/* 第二列：市值股本 - 流通市值、发行总股本、52周波动 */} = ({ {/* 第三列：主力动态 */} - - - - - {/* 买卖比例条 */} - - div': { - bg: T.upColor, - boxShadow: T.upGlow, - }, - }} - bg={T.downColor} - borderRadius="full" - h="8px" - /> - - - 买入 {quoteData.buyRatio}% - - - 卖出 {quoteData.sellRatio}% - - - - + - {/* ========== 公司信息（已注释）========== */} - {/* {basicInfo && ( - <> - - - - - - - 成立： - - {formatDate(basicInfo.establish_date)} - - - - - 注册资本： - - {formatRegisteredCapital(basicInfo.reg_capital)} - - - - - 所在地： - - {basicInfo.province} {basicInfo.city} - - - - - {basicInfo.website ? ( - - 访问官网 - - ) : ( - 暂无官网 - )} - - - - - - - 公司简介： - - {basicInfo.company_intro || '暂无'} - - - - - )} */} + {/* 公司信息区块已移至 CompanyOverview 模块 */}