diff --git a/src/views/Company/components/MarketDataView/components/AnalysisModal.tsx b/src/views/Company/components/MarketDataView/components/AnalysisModal.tsx
index e4677e08..a5906710 100644
--- a/src/views/Company/components/MarketDataView/components/AnalysisModal.tsx
+++ b/src/views/Company/components/MarketDataView/components/AnalysisModal.tsx
@@ -1,5 +1,5 @@
// src/views/Company/components/MarketDataView/components/AnalysisModal.tsx
-// 涨幅分析模态框组件
+// 涨幅分析模态框组件 - FUI 科幻风格
import React from 'react';
import {
@@ -14,172 +14,446 @@ import {
Box,
Heading,
Text,
- Tag,
- Badge,
Icon,
} from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { FileText, TrendingUp, Building2, Newspaper, BookOpen } from 'lucide-react';
import MarkdownRenderer from './MarkdownRenderer';
import { formatNumber } from '../utils/formatUtils';
import type { AnalysisModalProps, RiseAnalysis, Theme } from '../types';
+// FUI 风格颜色常量
+const FUI = {
+ gold: '#D4AF37',
+ goldLight: 'rgba(212, 175, 55, 0.8)',
+ goldDim: 'rgba(212, 175, 55, 0.4)',
+ red: '#FF4444',
+ green: '#00C851',
+ cyan: '#00BCD4',
+ purple: '#9C27B0',
+ orange: '#FF9800',
+ bgDeep: '#0A0A14',
+ bgPrimary: '#0F0F1A',
+ bgElevated: '#1A1A2E',
+ bgCard: 'rgba(26, 26, 46, 0.95)',
+ textPrimary: 'rgba(255, 255, 255, 0.95)',
+ textSecondary: 'rgba(255, 255, 255, 0.75)',
+ textMuted: 'rgba(255, 255, 255, 0.5)',
+ border: 'rgba(212, 175, 55, 0.2)',
+ borderHover: 'rgba(212, 175, 55, 0.4)',
+};
+
/**
- * 涨幅分析内容组件
+ * FUI 风格标签组件
+ */
+const FUITag: React.FC<{
+ children: React.ReactNode;
+ color?: string;
+ icon?: React.ElementType;
+}> = ({ children, color = FUI.gold, icon }) => (
+
+ {icon && }
+ {children}
+
+);
+
+/**
+ * FUI 风格徽章组件
+ */
+const FUIBadge: React.FC<{
+ children: React.ReactNode;
+ color?: string;
+ glow?: boolean;
+}> = ({ children, color = FUI.gold, glow = false }) => (
+
+ {children}
+
+);
+
+/**
+ * FUI 风格区块组件
+ */
+const FUISection: React.FC<{
+ title: string;
+ icon: React.ElementType;
+ color?: string;
+ children: React.ReactNode;
+}> = ({ title, icon, color = FUI.gold, children }) => (
+
+ {/* 顶部发光线 */}
+
+
+ {/* 左侧装饰条 */}
+
+
+ {/* 标题 */}
+
+
+
+ {title}
+
+
+
+ {/* 内容 */}
+
+ {children}
+
+
+);
+
+/**
+ * 涨幅分析内容组件 - FUI 风格
*/
interface AnalysisContentProps {
analysis: RiseAnalysis;
theme: Theme;
}
-export const AnalysisContent: React.FC = ({ analysis, theme }) => {
+export const AnalysisContent: React.FC = ({ analysis }) => {
+ const riseColor = parseFloat(String(analysis.rise_rate)) >= 0 ? FUI.red : FUI.green;
+
return (
- {/* 头部信息 */}
-
-
- {analysis.stock_name} ({analysis.stock_code})
-
-
- 日期: {analysis.trade_date}
- 涨幅: {analysis.rise_rate}%
- 收盘价: {analysis.close_price}
+ {/* 头部信息 - FUI 风格 */}
+
+ {/* 角落装饰 */}
+
+
+
+
+
+ {/* 股票名称 */}
+
+
+ {analysis.stock_name}
+
+ {analysis.stock_code}
+
+
+ {/* 数据标签 */}
+
+ 日期: {analysis.trade_date}
+
+ 涨幅: {analysis.rise_rate}%
+
+
+ 收盘价: ¥{analysis.close_price}
+
{/* 主营业务 */}
{analysis.main_business && (
-
-
- 主营业务
-
- {analysis.main_business}
-
+
+ {analysis.main_business}
+
)}
{/* 详细分析 */}
{analysis.rise_reason_detail && (
-
-
- 详细分析
-
- {analysis.rise_reason_detail}
-
+
+
+ {analysis.rise_reason_detail}
+
+
)}
{/* 相关公告 */}
{analysis.announcements && analysis.announcements !== '[]' && (
-
-
- 相关公告
-
- {analysis.announcements}
-
+
+
+ {analysis.announcements}
+
+
)}
{/* 研报引用 */}
{analysis.verification_reports && analysis.verification_reports.length > 0 && (
-
-
-
-
- 研报引用 ({analysis.verification_reports.length})
-
-
+
{analysis.verification_reports.map((report, reportIdx) => (
-
-
-
+
+
+
{report.publisher || '未知机构'}
-
+
{report.match_score && (
-
- 匹配度: {report.match_score}
-
+ 匹配: {report.match_score}
+
)}
{report.match_ratio != null && report.match_ratio > 0 && (
-
+
{(report.match_ratio * 100).toFixed(0)}%
-
+
)}
{report.declare_date && (
-
+
{report.declare_date.substring(0, 10)}
)}
{report.report_title && (
-
+
《{report.report_title}》
)}
{report.author && (
-
- 分析师: {report.author}
+
+ 分析师: {report.author}
)}
{report.verification_item && (
-
-
- 验证项: {report.verification_item}
+
+
+ 验证项:{' '}
+ {report.verification_item}
)}
{report.content && (
-
+
{report.content}
)}
))}
-
+
)}
- {/* 底部统计 */}
-
-
- 成交量: {formatNumber(analysis.volume)} | 成交额: {formatNumber(analysis.amount)} | 更新时间:{' '}
- {analysis.update_time || analysis.create_time || '-'}
-
+ {/* 底部统计 - FUI 风格 */}
+
+
+
+ 成交量
+ {formatNumber(analysis.volume)}
+
+
+
+ 成交额
+ {formatNumber(analysis.amount)}
+
+
+
+ 更新
+ {analysis.update_time || analysis.create_time || '-'}
+
+
);
};
/**
- * 涨幅分析模态框组件
+ * 涨幅分析模态框组件 - FUI 科幻风格
*/
-const AnalysisModal: React.FC = ({ isOpen, onClose, content, theme }) => {
+const AnalysisModal: React.FC = ({ isOpen, onClose, content }) => {
return (
-
-
-
- 涨幅分析详情
-
- {content}
+
+
+
+ {/* 顶部发光线 */}
+
+
+ {/* 角落装饰 */}
+
+
+
+
+
+
+
+
+ 涨幅分析详情
+
+
+
+
+
+
+ {content}
+
);
diff --git a/src/views/Company/components/MarketDataView/components/MarkdownRenderer.tsx b/src/views/Company/components/MarketDataView/components/MarkdownRenderer.tsx
index cfd44f2e..0186b76b 100644
--- a/src/views/Company/components/MarketDataView/components/MarkdownRenderer.tsx
+++ b/src/views/Company/components/MarketDataView/components/MarkdownRenderer.tsx
@@ -1,22 +1,32 @@
// src/views/Company/components/MarketDataView/components/MarkdownRenderer.tsx
-// Markdown 渲染组件
+// Markdown 渲染组件 - 支持 FUI 科幻风格
import React from 'react';
import { Box } from '@chakra-ui/react';
import ReactMarkdown from 'react-markdown';
import type { MarkdownRendererProps } from '../types';
+// FUI 默认主题(黑金风格)
+const FUI_THEME = {
+ primary: '#D4AF37',
+ textPrimary: 'rgba(255, 255, 255, 0.95)',
+ textSecondary: 'rgba(255, 255, 255, 0.75)',
+};
+
/**
* Markdown 渲染组件
- * 提供统一的 Markdown 样式
+ * 提供统一的 Markdown 样式,支持 FUI 风格
*/
const MarkdownRenderer: React.FC = ({ children, theme }) => {
+ // 使用传入的主题或默认 FUI 主题
+ const colors = theme || FUI_THEME;
+
return (
= ({ children, theme })
},
'& strong': {
fontWeight: 'bold',
- color: theme.textSecondary,
+ color: colors.textSecondary,
},
'& em': {
fontStyle: 'italic',
},
'& code': {
- backgroundColor: 'rgba(0,0,0,0.05)',
- padding: '2px 4px',
+ backgroundColor: 'rgba(212, 175, 55, 0.1)',
+ padding: '2px 6px',
borderRadius: '4px',
fontSize: '0.9em',
+ color: '#D4AF37',
+ border: '1px solid rgba(212, 175, 55, 0.2)',
},
'& blockquote': {
- borderLeft: `3px solid ${theme.primary}`,
+ borderLeft: `3px solid ${colors.primary}`,
paddingLeft: 4,
marginLeft: 2,
fontStyle: 'italic',
opacity: 0.9,
+ backgroundColor: 'rgba(212, 175, 55, 0.05)',
+ borderRadius: '0 4px 4px 0',
+ padding: 3,
+ },
+ '& a': {
+ color: '#D4AF37',
+ textDecoration: 'underline',
+ _hover: {
+ color: '#F4D03F',
+ },
},
}}
>
diff --git a/src/views/Company/components/MarketDataView/types.ts b/src/views/Company/components/MarketDataView/types.ts
index 8a133dd7..0089f8bd 100644
--- a/src/views/Company/components/MarketDataView/types.ts
+++ b/src/views/Company/components/MarketDataView/types.ts
@@ -262,7 +262,7 @@ export interface ThemedCardProps {
*/
export interface MarkdownRendererProps {
children: string;
- theme: Theme;
+ theme?: Theme; // 可选,默认使用 FUI 黑金主题
}
/**