Spaces:
Paused
Paused
File size: 3,688 Bytes
2d4ab0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 'use client';
interface ChartControlsProps {
mainIndicator: string;
setMainIndicator: (val: string) => void;
subIndicator1: string;
setSubIndicator1: (val: string) => void;
subIndicator2: string;
setSubIndicator2: (val: string) => void;
period: 'day' | 'week' | 'month';
setPeriod: (val: 'day' | 'week' | 'month') => void;
}
export default function ChartControls({
mainIndicator, setMainIndicator,
subIndicator1, setSubIndicator1,
subIndicator2, setSubIndicator2,
period, setPeriod
}: ChartControlsProps) {
const mainOptions = ['MA', 'BOLL', 'ENE', 'HIDE'];
const subOptions = ['VOL', 'MACD', 'KDJ', 'RSI', 'WR', 'CCI', 'HIDE'];
const periods = [
{ label: '日K', value: 'day' },
{ label: '周K', value: 'week' },
{ label: '月K', value: 'month' },
];
return (
<div className="flex items-center gap-2 px-4 py-2 bg-[#191B28] border-b border-[#2A2D3C] text-xs select-none overflow-x-auto whitespace-nowrap scrollbar-hide">
{/* 周期选择 */}
<div className="flex items-center gap-1 bg-[#2A2D3C] rounded p-0.5 shrink-0">
{periods.map(p => (
<button
key={p.value}
onClick={() => setPeriod(p.value as any)}
className={`px-3 py-0.5 rounded transition-colors ${
period === p.value
? 'bg-blue-600 text-white font-medium'
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
}`}
>
{p.label}
</button>
))}
</div>
<div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>
<div className="flex items-center gap-1 shrink-0">
<span className="text-gray-500 mr-1">主图</span>
{mainOptions.map(opt => (
<button
key={opt}
onClick={() => setMainIndicator(opt)}
className={`px-2 py-0.5 rounded transition-colors ${
mainIndicator === opt
? 'bg-blue-600/80 text-white font-medium'
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
}`}
>
{opt === 'HIDE' ? '隐藏' : opt}
</button>
))}
</div>
<div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-gray-500">副图1</span>
<div className="flex gap-1">
{subOptions.map(opt => (
<button
key={opt}
onClick={() => setSubIndicator1(opt)}
className={`px-2 py-0.5 rounded transition-colors ${
subIndicator1 === opt
? 'bg-purple-600/80 text-white font-medium'
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
}`}
>
{opt === 'HIDE' ? '隐藏' : opt}
</button>
))}
</div>
</div>
<div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-gray-500">副图2</span>
<div className="flex gap-1">
{subOptions.map(opt => (
<button
key={opt}
onClick={() => setSubIndicator2(opt)}
className={`px-2 py-0.5 rounded transition-colors ${
subIndicator2 === opt
? 'bg-teal-600/80 text-white font-medium'
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
}`}
>
{opt === 'HIDE' ? '隐藏' : opt}
</button>
))}
</div>
</div>
</div>
);
}
|