862 lines
44 KiB
TypeScript
862 lines
44 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { ChevronRight, ChevronDown, BarChart3, PieChart, Globe, TrendingUp, LayoutTemplate, Save, FileText, ArrowDownRight, GripVertical, X, ChevronsLeft, ArrowUpRight, Pencil, Settings, Star, Plus } from 'lucide-react';
|
||
import { StockChart } from '../components/StockChart';
|
||
import { STOCK_DATA_CONFIG } from '../data/mockData';
|
||
|
||
// --- Mock Data Generators ---
|
||
// 已移至 data/mockData.ts，这里保留引用
|
||
|
||
// Define initial data with Icons attached
|
||
const INITIAL_DATA = [
|
||
{
|
||
...STOCK_DATA_CONFIG.valuation,
|
||
icon: <BarChart3 size={18} />,
|
||
tags: ['A股市场', '估值'],
|
||
description: '从估值水平、历史分位、质量溢价等多角度评估当前估值合理性',
|
||
},
|
||
{
|
||
...STOCK_DATA_CONFIG.macro,
|
||
icon: <Globe size={18} />,
|
||
tags: ['A股市场', '宏观'],
|
||
description: '结合宏观经济环境、无风险利率、风险溢价等因素分析投资胜率',
|
||
},
|
||
{
|
||
...STOCK_DATA_CONFIG.assets,
|
||
icon: <TrendingUp size={18} />,
|
||
tags: ['A股市场', '基本面'],
|
||
description: '跟踪产业链上下游走势、竞争格局变化等基本面相关资产表现',
|
||
},
|
||
{
|
||
...STOCK_DATA_CONFIG.capital,
|
||
icon: <PieChart size={18} />,
|
||
tags: ['A股市场', '资金面'],
|
||
description: '观察市场资金流向、成交活跃度等资金面动态变化',
|
||
}
|
||
];
|
||
|
||
// 格式化摘要文本,添加标签高亮
|
||
const formatSummary = (text: string): string => {
|
||
const keywords: Record<string, { color: string, bg: string }> = {
|
||
'质量领跑': { color: 'text-emerald-800', bg: 'bg-emerald-100' },
|
||
'估值下行': { color: 'text-red-800', bg: 'bg-red-100' },
|
||
'历史低位': { color: 'text-emerald-800', bg: 'bg-emerald-100' },
|
||
'估值质量高': { color: 'text-blue-800', bg: 'bg-blue-100' },
|
||
'历史高位': { color: 'text-red-800', bg: 'bg-red-100' },
|
||
'历史极低位': { color: 'text-gray-800', bg: 'bg-gray-100' },
|
||
'核心资产': { color: 'text-blue-800', bg: 'bg-blue-100' },
|
||
'压力仍存': { color: 'text-orange-800', bg: 'bg-orange-100' },
|
||
'趋势上行': { color: 'text-emerald-800', bg: 'bg-emerald-100' },
|
||
'高位': { color: 'text-red-800', bg: 'bg-red-100' },
|
||
};
|
||
|
||
let formatted = text;
|
||
Object.entries(keywords).forEach(([keyword, styles]) => {
|
||
// 创建正则，允许关键词中间有可选空格
|
||
const keywordWithOptionalSpaces = keyword.split('').join('\\s*');
|
||
const regex = new RegExp(keywordWithOptionalSpaces, 'g');
|
||
formatted = formatted.replace(
|
||
regex,
|
||
(match) => `<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${styles.bg} ${styles.color} mx-1">${match.replace(/\s+/g, '')}</span>`
|
||
);
|
||
});
|
||
|
||
return formatted;
|
||
};
|
||
|
||
export const DashboardPage: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [modules, setModules] = useState(INITIAL_DATA);
|
||
const [isTemplateLibraryOpen, setIsTemplateLibraryOpen] = useState(false);
|
||
const [isSaveTemplateOpen, setIsSaveTemplateOpen] = useState(false);
|
||
const [templateName, setTemplateName] = useState('');
|
||
const [rightPanelVisible, setRightPanelVisible] = useState(false); // 默认隐藏
|
||
const [shouldRenderCharts, setShouldRenderCharts] = useState(false); // 控制图表渲染
|
||
const [isEditMode, setIsEditMode] = useState(false); // 编辑模式状态
|
||
const [showSortSuccessAlert, setShowSortSuccessAlert] = useState(false); // 排序成功提示
|
||
const [dimensionRatings, setDimensionRatings] = useState<Record<string, number>>({
|
||
valuation: 0,
|
||
capital: 0,
|
||
macro: 0,
|
||
assets: 0,
|
||
}); // 维度评分
|
||
const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({
|
||
valuation: true, // 默认展开
|
||
capital: true,
|
||
macro: true,
|
||
assets: true,
|
||
});
|
||
|
||
// 拖拽排序相关状态
|
||
const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
|
||
const [draggedItemId, setDraggedItemId] = useState<string | null>(null);
|
||
const dragItemRef = useRef<number | null>(null);
|
||
const dragOverItemRef = useRef<number | null>(null);
|
||
const dragGroupRef = useRef<string | null>(null);
|
||
|
||
const toggleGroup = (id: string) => {
|
||
setExpandedGroups(prev => ({ ...prev, [id]: !prev[id] }));
|
||
};
|
||
|
||
// 拖拽开始
|
||
const handleItemDragStart = (e: React.DragEvent, groupId: string, itemIndex: number) => {
|
||
console.log('拖拽开始', { isEditMode, groupId, itemIndex });
|
||
if (!isEditMode) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
dragItemRef.current = itemIndex;
|
||
dragGroupRef.current = groupId;
|
||
setDraggedItemId(`${groupId}-${itemIndex}`);
|
||
e.dataTransfer.effectAllowed = "move";
|
||
};
|
||
|
||
// 拖拽进入
|
||
const handleItemDragEnter = (e: React.DragEvent, groupId: string, itemIndex: number) => {
|
||
if (!isEditMode) return;
|
||
console.log('拖拽进入', { groupId, itemIndex, dragGroupRef: dragGroupRef.current });
|
||
e.preventDefault();
|
||
if (dragGroupRef.current === groupId) {
|
||
dragOverItemRef.current = itemIndex;
|
||
}
|
||
};
|
||
|
||
// 拖拽结束
|
||
const handleItemDragEnd = (e: React.DragEvent, groupId: string) => {
|
||
console.log('拖拽结束', {
|
||
isEditMode,
|
||
groupId,
|
||
dragItemRef: dragItemRef.current,
|
||
dragOverItemRef: dragOverItemRef.current,
|
||
dragGroupRef: dragGroupRef.current
|
||
});
|
||
e.preventDefault();
|
||
|
||
// 先保存 ref 值，因为会在重置后才执行 setModules 回调
|
||
const dragFromIndex = dragItemRef.current;
|
||
const dragToIndex = dragOverItemRef.current;
|
||
const dragFromGroup = dragGroupRef.current;
|
||
|
||
if (
|
||
isEditMode &&
|
||
dragFromIndex !== null &&
|
||
dragToIndex !== null &&
|
||
dragFromGroup === groupId &&
|
||
dragFromIndex !== dragToIndex
|
||
) {
|
||
console.log('开始执行拖拽交换', { dragFromIndex, dragToIndex });
|
||
setModules(prevModules => {
|
||
console.log('当前modules:', prevModules);
|
||
const newModules = [...prevModules];
|
||
const groupIndex = newModules.findIndex(m => m.id === groupId);
|
||
console.log('找到groupIndex:', groupIndex);
|
||
|
||
if (groupIndex !== -1 && newModules[groupIndex].items) {
|
||
const items = [...newModules[groupIndex].items];
|
||
console.log('items长度:', items.length);
|
||
console.log('dragFromIndex:', dragFromIndex);
|
||
console.log('dragToIndex:', dragToIndex);
|
||
|
||
// 安全检查：确保索引有效
|
||
if (dragFromIndex >= 0 && dragFromIndex < items.length) {
|
||
const draggedItem = items[dragFromIndex];
|
||
console.log('拖拽的item:', draggedItem);
|
||
|
||
// 确保 draggedItem 存在
|
||
if (draggedItem) {
|
||
items.splice(dragFromIndex, 1);
|
||
|
||
// 计算正确的插入位置
|
||
const insertIndex = Math.min(dragToIndex, items.length);
|
||
console.log('插入位置:', insertIndex);
|
||
items.splice(insertIndex, 0, draggedItem);
|
||
|
||
newModules[groupIndex] = {
|
||
...newModules[groupIndex],
|
||
items
|
||
};
|
||
console.log('更新后的items:', items);
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log('返回新modules:', newModules);
|
||
return newModules;
|
||
});
|
||
|
||
// 显示成功提示
|
||
setShowSortSuccessAlert(true);
|
||
setTimeout(() => {
|
||
setShowSortSuccessAlert(false);
|
||
}, 2000);
|
||
}
|
||
|
||
// 始终重置拖拽状态
|
||
dragItemRef.current = null;
|
||
dragOverItemRef.current = null;
|
||
dragGroupRef.current = null;
|
||
setDraggedItemId(null);
|
||
};
|
||
|
||
// 拖拽悬停
|
||
const handleItemDragOver = (e: React.DragEvent) => {
|
||
if (!isEditMode) return;
|
||
e.preventDefault();
|
||
};
|
||
|
||
const handleScrollTo = (elementId: string, itemId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
// 先显示右侧面板
|
||
setRightPanelVisible(true);
|
||
|
||
// 左侧滚动到对应的指标项
|
||
requestAnimationFrame(() => {
|
||
const leftElement = document.getElementById(`left-${itemId}`);
|
||
if (leftElement) {
|
||
leftElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
});
|
||
|
||
// 延迟300ms后渲染图表，等待动画完成
|
||
setTimeout(() => {
|
||
setShouldRenderCharts(true);
|
||
// 再延迟一帧滚动到对应位置
|
||
requestAnimationFrame(() => {
|
||
const element = document.getElementById(elementId);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
}, 300);
|
||
};
|
||
|
||
const handleGroupClick = (groupId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
// 先显示右侧面板
|
||
setRightPanelVisible(true);
|
||
|
||
// 左侧滚动到对应的维度卡片
|
||
requestAnimationFrame(() => {
|
||
const leftElement = document.getElementById(`left-group-${groupId}`);
|
||
if (leftElement) {
|
||
leftElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
|
||
// 延迟300ms后渲染图表
|
||
setTimeout(() => {
|
||
setShouldRenderCharts(true);
|
||
const group = modules.find(m => m.id === groupId);
|
||
if (group && group.items.length > 0) {
|
||
requestAnimationFrame(() => {
|
||
const element = document.getElementById(`chart-${group.items[0].id}`);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
}
|
||
}, 300);
|
||
};
|
||
|
||
const handleApplyTemplate = () => {
|
||
setIsTemplateLibraryOpen(false);
|
||
};
|
||
|
||
// 保存模板
|
||
const handleSaveTemplate = () => {
|
||
if (templateName.trim()) {
|
||
// 这里可以添加实际的保存逻辑
|
||
console.log('保存模板:', templateName);
|
||
setIsSaveTemplateOpen(false);
|
||
setTemplateName('');
|
||
// 可以显示成功提示
|
||
}
|
||
};
|
||
|
||
// 关闭右侧面板时，重置图表渲染状态
|
||
const handleCloseRightPanel = () => {
|
||
setRightPanelVisible(false);
|
||
setShouldRenderCharts(false);
|
||
};
|
||
|
||
const getDimensionColor = (id: string) => {
|
||
const colorMap: Record<string, { left: string, bg: string, hover: string, icon: string }> = {
|
||
'valuation': { left: 'bg-blue-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-blue-50 text-blue-500' },
|
||
'capital': { left: 'bg-purple-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-purple-50 text-purple-500' },
|
||
'macro': { left: 'bg-teal-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-teal-50 text-teal-500' },
|
||
'assets': { left: 'bg-indigo-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-indigo-50 text-indigo-500' },
|
||
};
|
||
return colorMap[id] || colorMap['valuation'];
|
||
};
|
||
|
||
// 删除整个维度
|
||
const handleDeleteGroup = (groupId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
if (window.confirm('确定要删除整个维度吗？')) {
|
||
setModules(prevModules => prevModules.filter(m => m.id !== groupId));
|
||
}
|
||
};
|
||
|
||
// 删除单个指标
|
||
const handleDeleteItem = (groupId: string, itemId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
if (window.confirm('确定要删除这个指标吗？')) {
|
||
setModules(prevModules => {
|
||
return prevModules.map(group => {
|
||
if (group.id === groupId) {
|
||
return {
|
||
...group,
|
||
items: group.items.filter(item => item && item.id !== itemId)
|
||
};
|
||
}
|
||
return group;
|
||
});
|
||
});
|
||
}
|
||
};
|
||
|
||
// 设置维度评分
|
||
const handleRatingChange = (groupId: string, rating: number, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
setDimensionRatings(prev => ({
|
||
...prev,
|
||
[groupId]: rating
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<div className="flex min-h-screen bg-slate-50 overflow-hidden relative">
|
||
|
||
{/* 排序成功提示 */}
|
||
{showSortSuccessAlert && (
|
||
<div className="fixed top-20 left-1/2 -translate-x-1/2 z-50 animate-fade-in">
|
||
<div className="bg-green-50 border border-green-200 rounded-lg px-6 py-3 shadow-lg flex items-center gap-2">
|
||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className="text-sm text-green-700 font-medium">
|
||
排序已保存
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex-1 flex flex-col min-w-0 h-screen">
|
||
{/* Top Header */}
|
||
<header className="h-16 bg-white border-b border-slate-200 px-4 sm:px-6 flex items-center justify-between shrink-0 z-20">
|
||
<div className="flex items-center gap-2 sm:gap-3 text-sm min-w-0">
|
||
<span onClick={() => navigate('/')} className="cursor-pointer text-slate-500 hover:text-blue-600 transition-colors font-medium whitespace-nowrap">首页</span>
|
||
<ChevronRight size={14} className="text-slate-300 flex-shrink-0" />
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<span className="font-bold text-base sm:text-lg text-slate-900 tracking-tight truncate">贵州茅台</span>
|
||
<span className="bg-gray-100 text-slate-600 px-1.5 sm:px-2 py-0.5 rounded text-xs font-mono font-semibold border border-gray-200 whitespace-nowrap">600519.SH</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 编辑模式提示 - 居中显示 */}
|
||
{isEditMode && (
|
||
<div className="flex-1 flex justify-center mx-4">
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-2 flex items-center gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<GripVertical size={16} className="text-blue-600" />
|
||
<span className="text-sm text-blue-700 font-medium whitespace-nowrap">
|
||
编辑模式已开启，可排序、删除等操作
|
||
</span>
|
||
</div>
|
||
<button
|
||
onClick={() => setIsEditMode(false)}
|
||
className="text-xs px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium whitespace-nowrap"
|
||
>
|
||
完成
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-2 sm:gap-5">
|
||
<button
|
||
onClick={() => setIsTemplateLibraryOpen(true)}
|
||
className="flex items-center gap-1 sm:gap-1.5 text-slate-600 hover:text-blue-600 transition-colors text-sm font-medium group"
|
||
>
|
||
<LayoutTemplate size={18} className="group-hover:scale-110 transition-transform flex-shrink-0" />
|
||
<span className="hidden sm:inline">模板库</span>
|
||
</button>
|
||
<button
|
||
onClick={() => setIsSaveTemplateOpen(true)}
|
||
className="flex items-center gap-1 sm:gap-1.5 text-slate-600 hover:text-blue-600 transition-colors text-sm font-medium group"
|
||
>
|
||
<Save size={18} className="group-hover:scale-110 transition-transform flex-shrink-0" />
|
||
<span className="hidden sm:inline">另存为</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Main Content - Split Layout */}
|
||
<div className="flex-1 flex overflow-hidden">
|
||
|
||
{/* Left Panel: Rating Snapshot Table */}
|
||
<div className={`bg-white border-r border-slate-200 flex flex-col z-10 shadow-sm transition-all duration-300 ${
|
||
rightPanelVisible
|
||
? 'w-full lg:w-[380px] xl:w-[480px] 2xl:w-[720px]'
|
||
: 'w-full'
|
||
}`}>
|
||
<div className={`flex flex-col flex-1 min-h-0 ${!rightPanelVisible ? 'max-w-[1440px] mx-auto w-full' : ''}`}>
|
||
<div className="p-4 border-b border-slate-100 bg-white shrink-0">
|
||
<div className={`flex items-center ${rightPanelVisible ? 'justify-between' : 'justify-center'}`}>
|
||
<h2 className="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
|
||
<span style={{ fontSize: '26px' }}>资产评级表</span>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
const newMode = !isEditMode;
|
||
console.log('切换编辑模式:', newMode);
|
||
setIsEditMode(newMode);
|
||
}}
|
||
className={`p-1.5 rounded-lg transition-colors group ${
|
||
isEditMode
|
||
? 'text-blue-600 bg-blue-50'
|
||
: 'text-slate-600 hover:text-blue-600 hover:bg-blue-50'
|
||
}`}
|
||
title="设置维度和视角"
|
||
>
|
||
<Settings size={16} className="group-hover:rotate-90 transition-transform duration-300" />
|
||
</button>
|
||
</h2>
|
||
{rightPanelVisible && (
|
||
<button
|
||
onClick={handleCloseRightPanel}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors group"
|
||
title="全屏显示快照列表"
|
||
>
|
||
<X size={16} className="group-hover:scale-110 transition-transform" />
|
||
<span className="hidden sm:inline">关闭详情</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{!rightPanelVisible && (
|
||
<div className="text-sm text-slate-400 mt-3 text-center">综合估值、资金、宏观、基本面四大维度，多视角量化评估资产投资价值</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-4 sm:p-6">
|
||
{/* 维度布局：右侧展开时在大屏幕(>1440px)显示2列，否则1列；未展开时两列 */}
|
||
<div className={`grid gap-4 ${
|
||
rightPanelVisible
|
||
? 'grid-cols-1 2xl:grid-cols-2'
|
||
: 'grid-cols-1 lg:grid-cols-2'
|
||
}`}>
|
||
{modules.map((group) => {
|
||
const colors = getDimensionColor(group.id);
|
||
|
||
return (
|
||
<div
|
||
key={group.id}
|
||
className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-all group/card"
|
||
>
|
||
{/* 维度标题 */}
|
||
<div
|
||
onClick={(e) => !isEditMode && handleGroupClick(group.id, e)}
|
||
className={`relative px-4 py-3 border-b border-slate-200 ${!isEditMode ? 'cursor-pointer' : ''} ${colors.hover} transition-colors`}
|
||
>
|
||
<div className={`absolute left-0 top-0 bottom-0 w-1 ${colors.left}`}></div>
|
||
<div className="flex flex-col gap-2 pl-2">
|
||
{/* 第一行：图标、标题、评分、删除按钮 */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`p-1.5 ${colors.icon} rounded-lg`}>
|
||
{group.icon}
|
||
</div>
|
||
<h2 className="text-sm font-bold text-slate-900">
|
||
{group.dimension}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
{/* 编辑模式下显示评分星星 */}
|
||
{isEditMode && (
|
||
<div className="flex items-center gap-1">
|
||
{[1, 2, 3, 4, 5].map((star) => (
|
||
<button
|
||
key={star}
|
||
onClick={(e) => handleRatingChange(group.id, star, e)}
|
||
className="transition-colors"
|
||
title={`${star}星`}
|
||
>
|
||
<Star
|
||
size={16}
|
||
className={`${
|
||
star <= dimensionRatings[group.id]
|
||
? 'text-yellow-500 fill-yellow-500'
|
||
: 'text-gray-300'
|
||
}`}
|
||
/>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑模式下显示删除按钮 */}
|
||
{isEditMode && (
|
||
<button
|
||
onClick={(e) => handleDeleteGroup(group.id, e)}
|
||
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||
title="删除维度"
|
||
>
|
||
<X size={16} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 第二行：维度描述 */}
|
||
{group.description && (
|
||
<p className="text-xs text-slate-400 pl-9 leading-relaxed">
|
||
{group.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 指标列表 */}
|
||
<div className="divide-y divide-slate-100" id={`left-group-${group.id}`}>
|
||
{group.items?.map((item, itemIndex) => {
|
||
// 跳过 undefined 的 item
|
||
if (!item) return null;
|
||
|
||
return (
|
||
<div
|
||
key={item.id}
|
||
id={`left-${item.id}`}
|
||
draggable={isEditMode}
|
||
onDragStart={(e) => handleItemDragStart(e, group.id, itemIndex)}
|
||
onDragEnter={(e) => handleItemDragEnter(e, group.id, itemIndex)}
|
||
onDragEnd={(e) => handleItemDragEnd(e, group.id)}
|
||
onDragOver={handleItemDragOver}
|
||
onClick={(e) => {
|
||
if (!isEditMode) {
|
||
handleScrollTo(`chart-${item.id}`, item.id, e);
|
||
}
|
||
}}
|
||
className={`p-4 hover:bg-slate-50 transition-all ${
|
||
isEditMode ? 'cursor-move' : 'cursor-pointer'
|
||
} ${draggedItemId === `${group.id}-${itemIndex}` ? 'opacity-50' : ''} group`}
|
||
>
|
||
<div className="flex items-start gap-2">
|
||
<GripVertical
|
||
size={14}
|
||
className={`text-slate-300 mt-0.5 flex-shrink-0 transition-opacity ${
|
||
isEditMode ? 'opacity-100' : 'opacity-0'
|
||
}`}
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
{/* 指标标题 */}
|
||
<h3 className="text-sm font-bold text-slate-900 mb-2 group-hover:text-blue-600 transition-colors">
|
||
{item.label}
|
||
</h3>
|
||
|
||
{/* 摘要 - 编辑模式下隐藏 */}
|
||
{!isEditMode && (
|
||
<p className="text-xs text-slate-600 leading-relaxed">
|
||
{item.summary}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 编辑模式下显示删除按钮 */}
|
||
{isEditMode && (
|
||
<button
|
||
onClick={(e) => handleDeleteItem(group.id, item.id, e)}
|
||
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors flex-shrink-0"
|
||
title="删除指标"
|
||
>
|
||
<X size={16} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{/* 编辑模式下显示"添加视角"按钮 */}
|
||
{isEditMode && (
|
||
<div className="p-4 border-t border-slate-100 opacity-0 group-hover/card:opacity-100 transition-opacity">
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
// TODO: 打开添加视角的对话框
|
||
alert('添加视角功能');
|
||
}}
|
||
className="w-full flex items-center justify-center gap-2 py-2.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors border border-dashed border-blue-300 hover:border-blue-400"
|
||
>
|
||
<Plus size={16} />
|
||
<span className="font-medium">添加视角</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
{/* 编辑模式下显示"添加维度"按钮 */}
|
||
{isEditMode && (
|
||
<div className="bg-white rounded-xl shadow-sm border-2 border-dashed border-slate-300 overflow-hidden hover:shadow-md hover:border-blue-400 transition-all">
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
// TODO: 打开添加维度的对话框
|
||
alert('添加维度功能');
|
||
}}
|
||
className="w-full h-full min-h-[200px] flex flex-col items-center justify-center gap-3 text-slate-500 hover:text-blue-600 transition-colors p-8"
|
||
>
|
||
<div className="w-12 h-12 rounded-full bg-slate-100 hover:bg-blue-50 flex items-center justify-center transition-colors">
|
||
<Plus size={24} />
|
||
</div>
|
||
<span className="text-sm font-medium">添加维度</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Panel: Charts */}
|
||
{rightPanelVisible && (
|
||
<div className="hidden lg:flex flex-1 relative flex-col min-w-0 bg-slate-50">
|
||
<div className="flex-1 overflow-y-auto p-6 scroll-smooth">
|
||
<div className="max-w-4xl mx-auto space-y-12">
|
||
{modules.map((group) => (
|
||
<div key={group.id} id={`group-${group.id}`} className="space-y-6 scroll-mt-6">
|
||
{/* Section Header */}
|
||
<div className="flex items-center gap-3 pl-2 border-l-4 border-slate-900">
|
||
<h2 className="text-xl font-bold text-slate-900">{group.dimension}</h2>
|
||
</div>
|
||
|
||
{/* Charts List */}
|
||
<div className="space-y-6">
|
||
{group.items.map((item) => (
|
||
<div
|
||
id={`chart-${item.id}`}
|
||
key={item.id}
|
||
className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-all scroll-mt-24"
|
||
>
|
||
<div className="mb-4">
|
||
<h3 className="text-base font-bold text-slate-900">{item.label}</h3>
|
||
<span className="text-xs text-slate-400">{group.dimension}</span>
|
||
</div>
|
||
|
||
{/* Chart */}
|
||
<div className="h-80 w-full mb-4">
|
||
{shouldRenderCharts ? (
|
||
<DetailChart data={item.chartData} color={item.color} label={item.label} />
|
||
) : (
|
||
<div className="w-full h-full flex items-center justify-center bg-slate-50 rounded-lg">
|
||
<div className="text-slate-400 text-sm">加载中...</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Summary */}
|
||
<div className="bg-slate-50 rounded-xl p-4 border border-slate-100 flex items-start justify-between gap-3">
|
||
<p className="text-sm text-slate-700 font-medium italic flex-1 text-center">
|
||
{item.summary}
|
||
</p>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
navigate('/detail');
|
||
}}
|
||
className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors flex-shrink-0"
|
||
title="查看详情"
|
||
>
|
||
<span>Ask</span>
|
||
<ArrowUpRight size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
|
||
{/* Template Library Modal */}
|
||
{isTemplateLibraryOpen && (
|
||
<TemplateLibraryModal onClose={() => setIsTemplateLibraryOpen(false)} onApply={handleApplyTemplate} />
|
||
)}
|
||
|
||
{/* Save Template Modal */}
|
||
{isSaveTemplateOpen && (
|
||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
|
||
{/* Header */}
|
||
<div className="p-6 border-b border-slate-200">
|
||
<h2 className="text-xl font-bold text-slate-900">保存为模板</h2>
|
||
<p className="text-sm text-slate-500 mt-1">输入模板名称以保存当前配置</p>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-6">
|
||
<label className="block text-sm font-medium text-slate-700 mb-2">
|
||
模板名称
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={templateName}
|
||
onChange={(e) => setTemplateName(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' && templateName.trim()) {
|
||
handleSaveTemplate();
|
||
}
|
||
}}
|
||
placeholder="例如：茅台估值分析模板"
|
||
className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="p-6 border-t border-slate-200 flex items-center justify-end gap-3">
|
||
<button
|
||
onClick={() => {
|
||
setIsSaveTemplateOpen(false);
|
||
setTemplateName('');
|
||
}}
|
||
className="px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleSaveTemplate}
|
||
disabled={!templateName.trim()}
|
||
className={`px-6 py-2 text-sm font-bold text-white rounded-lg transition-colors ${
|
||
templateName.trim()
|
||
? 'bg-blue-600 hover:bg-blue-700'
|
||
: 'bg-slate-300 cursor-not-allowed'
|
||
}`}
|
||
>
|
||
保存
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// Chart Component
|
||
const DetailChart: React.FC<{data: any[], color: string, label: string}> = ({ data, color, label }) => (
|
||
<StockChart data={data} color={color} legend={`贵州茅台_${label.split(' ')[0]}`} />
|
||
);
|
||
|
||
// Template Library Modal
|
||
const TemplateLibraryModal: React.FC<{onClose: () => void, onApply: () => void}> = ({ onClose, onApply }) => {
|
||
const [activeTab, setActiveTab] = useState<'general' | 'my'>('general');
|
||
|
||
const GENERAL_TEMPLATES = [
|
||
{ id: 't1', title: '个股通用深度模板', desc: '包含估值、资金、宏观、财务四大核心维度', icon: <FileText size={20} className="text-blue-600" />, tags: ['全市场', '通用'] },
|
||
{ id: 't2', title: '快速诊断模板', desc: '精简版模板,聚焦于PE/PB band与短期资金流向', icon: <TrendingUp size={20} className="text-amber-500" />, tags: ['短线', '效率'] }
|
||
];
|
||
|
||
const MY_TEMPLATES = [
|
||
{ id: 'm1', title: '宁德时代评级表', desc: '包含新能源行业特色指标、产能利用率、技术路线分析', icon: <FileText size={20} className="text-emerald-600" />, tags: ['新能源', '自定义'], date: '2024-03-15' },
|
||
{ id: 'm2', title: '茅台估值分析模板', desc: '聚焦消费品估值体系、品牌溢价、渠道分析', icon: <FileText size={20} className="text-purple-600" />, tags: ['消费', '自定义'], date: '2024-03-10' }
|
||
];
|
||
|
||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
|
||
const currentTemplates = activeTab === 'general' ? GENERAL_TEMPLATES : MY_TEMPLATES;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm">
|
||
<div className="bg-white w-full max-w-2xl max-h-[90vh] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
|
||
<div className="h-14 sm:h-16 border-b border-slate-100 flex items-center justify-between px-4 sm:px-6">
|
||
<h2 className="text-base sm:text-lg font-bold text-slate-900">模板库</h2>
|
||
<button onClick={onClose} className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full">✕</button>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="border-b border-slate-200 px-4 sm:px-6">
|
||
<div className="flex gap-6">
|
||
<button
|
||
onClick={() => setActiveTab('general')}
|
||
className={`py-3 text-sm font-medium border-b-2 transition-colors ${
|
||
activeTab === 'general'
|
||
? 'border-blue-600 text-blue-600'
|
||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
通用模板
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('my')}
|
||
className={`py-3 text-sm font-medium border-b-2 transition-colors ${
|
||
activeTab === 'my'
|
||
? 'border-blue-600 text-blue-600'
|
||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
我的模板
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-4 sm:p-6">
|
||
<div className="space-y-3">
|
||
{currentTemplates.map((template) => (
|
||
<div
|
||
key={template.id}
|
||
onClick={() => setSelectedTemplate(template.id)}
|
||
className={`p-4 rounded-xl border cursor-pointer transition-all ${
|
||
selectedTemplate === template.id
|
||
? 'bg-blue-50 border-blue-500 ring-1 ring-blue-500'
|
||
: 'bg-white border-slate-200 hover:border-blue-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<div className="p-2 rounded-lg bg-slate-50">{template.icon}</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<h4 className="text-sm font-bold">{template.title}</h4>
|
||
{activeTab === 'my' && 'date' in template && (
|
||
<span className="text-xs text-slate-400">{(template as any).date}</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-slate-500 mb-2">{template.desc}</p>
|
||
<div className="flex gap-2">
|
||
{template.tags.map(tag => (
|
||
<span key={tag} className="px-2 py-0.5 text-xs rounded bg-slate-100 text-slate-500">{tag}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="h-16 border-t border-slate-200 px-4 sm:px-6 flex items-center justify-end gap-3">
|
||
<button onClick={onClose} className="px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
|
||
<button
|
||
disabled={!selectedTemplate}
|
||
onClick={onApply}
|
||
className={`px-6 py-2 text-sm font-bold text-white rounded-lg ${
|
||
selectedTemplate ? 'bg-blue-600 hover:bg-blue-700' : 'bg-slate-300 cursor-not-allowed'
|
||
}`}
|
||
>
|
||
应用模板
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|