/* Page 2 — Stock Detail / Chart Workspace */ const { Icon, fmt, fmtVol, sign } = window.UI; /* ---------- Tool rail spec — TradingView 風左側工具列 + flyout ---------- * impl: true → 接到 chart toolMode / action，能實際運作 * impl: false → UI 占位，顯示「即將推出」、disabled */ const TOOL_GROUPS = [ { id: "cursor", icon: "crosshair", label: "十字線", tool: "crosshair", standalone: true, impl: true }, { id: "lines", icon: "draw", label: "趨勢線工具", items: [ { id: "tline", icon: "draw", label: "趨勢線", tool: "tline", impl: true, hint: "Alt+T" }, { id: "ray", icon: "draw", label: "射線" }, { id: "extend", icon: "draw", label: "延伸線" }, { id: "hline", icon: "ruler", label: "水平價位線", tool: "hline", impl: true, hint: "H" }, { id: "vline", icon: "ruler", label: "垂直時間線" }, { id: "parallel", icon: "draw", label: "平行通道" }, ], }, { id: "fib", icon: "fib", label: "江恩和斐波那契工具", items: [ { id: "fib-retrace", icon: "fib", label: "斐波那契回撤", section: "斐波那契", hint: "Alt+F" }, { id: "fib-extend", icon: "fib", label: "斐波那契趨勢擴展", section: "斐波那契" }, { id: "fib-channel", icon: "fib", label: "斐波那契通道", section: "斐波那契" }, { id: "fib-timezone", icon: "fib", label: "斐波那契時區", section: "斐波那契" }, { id: "fib-fan", icon: "fib", label: "斐波那契速度阻力扇", section: "斐波那契" }, { id: "fib-wedge", icon: "fib", label: "斐波那契楔形", section: "斐波那契" }, { id: "gann-box", icon: "shapes", label: "江恩箱", section: "江恩" }, { id: "gann-square", icon: "shapes", label: "江恩正方", section: "江恩" }, { id: "gann-fan", icon: "draw", label: "江恩扇", section: "江恩" }, ], }, { id: "patterns", icon: "trending-up", label: "型態工具", items: [ { id: "abcd", icon: "trending-up", label: "ABCD" }, { id: "elliott", icon: "trending-up", label: "Elliott Wave" }, { id: "head-shoulders", icon: "trending-up", label: "頭肩型態" }, { id: "triangle-pattern",icon: "trending-up", label: "三角型態" }, ], }, { id: "positions", icon: "list", label: "進出場區", items: [ { id: "long-pos", icon: "trending-up", label: "做多區" }, { id: "short-pos", icon: "trending-down", label: "做空區" }, { id: "price-range", icon: "ruler", label: "價格範圍" }, ], }, { id: "brush", icon: "brush", label: "筆刷與註解", items: [ { id: "brush", icon: "brush", label: "筆刷", section: "筆刷" }, { id: "highlight", icon: "brush", label: "螢光筆", section: "筆刷" }, { id: "arrow-mark", icon: "trending-up", label: "箭頭標記", section: "箭頭" }, { id: "arrow-up", icon: "arrow-up", label: "上箭頭", section: "箭頭" }, { id: "arrow-down", icon: "arrow-down", label: "下箭頭", section: "箭頭" }, { id: "rect", icon: "shapes", label: "矩形", section: "形狀", hint: "Alt+Shift+R" }, { id: "circle", icon: "dot", label: "圓", section: "形狀" }, { id: "triangle", icon: "trending-up", label: "三角形", section: "形狀" }, ], }, { id: "text", icon: "text-tool", label: "文字工具", items: [ { id: "text", icon: "text-tool", label: "文字" }, { id: "label", icon: "list", label: "標籤" }, { id: "note", icon: "news", label: "註解" }, ], }, { id: "emoji", icon: "smile", label: "表情符號", items: [ { id: "emoji", icon: "smile", label: "貼圖" }, { id: "flag", icon: "alert", label: "旗幟" }, ], }, { id: "ruler-group", icon: "percent", label: "測量工具", items: [ { id: "ruler", icon: "percent", label: "測漲跌 %", tool: "ruler", impl: true }, { id: "date-range", icon: "ruler", label: "日期範圍" }, { id: "data-window", icon: "list", label: "資料視窗" }, ], }, { id: "zoom-group", icon: "zoom-in", label: "縮放與檢視", items: [ { id: "reset", icon: "refresh", label: "重設縮放" }, { id: "screenshot", icon: "camera", label: "截圖" }, { id: "zoom-in", icon: "zoom-in", label: "放大" }, { id: "zoom-out", icon: "zoom-out", label: "縮小" }, ], }, { sep: true }, { id: "magnet", icon: "magnet", label: "磁吸（自動對齊高低點）", toggle: true, standalone: true }, { id: "lock-draw", icon: "lock", label: "鎖定所有繪圖", toggle: true, standalone: true }, { id: "hide-draw", icon: "eye", label: "隱藏所有繪圖", toggle: true, standalone: true }, { id: "fx", icon: "fx", label: "函數視圖", toggle: true, standalone: true }, { sep: true }, { id: "trash", icon: "trash", label: "刪除所有繪圖", action: "clear-drawings", standalone: true, impl: true }, ]; const ToolFlyout = ({ group, toolMode, onItemClick }) => { /* 依 section 分群（沒指定 section 的歸 group.label） */ const sectioned = React.useMemo(() => { const out = []; group.items.forEach(it => { const name = it.section || group.label; let bucket = out.find(b => b.name === name); if (!bucket) { bucket = { name, items: [] }; out.push(bucket); } bucket.items.push(it); }); return out; }, [group]); return (
{sectioned.map((sec, si) => (
{sec.name}
{sec.items.map(it => { const targetTool = it.tool || it.id; const isActive = targetTool === toolMode; return ( ); })}
))}
); }; const ChartToolRail = ({ toolMode, setToolMode, drawings, clearDrawings, toggles, setToggle, chartActions }) => { const [openId, setOpenId] = React.useState(null); const wrapRef = React.useRef(null); React.useEffect(() => { if (!openId) return; const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpenId(null); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [openId]); const isGroupActive = (g) => { if (g.standalone && g.tool) return toolMode === g.tool; if (g.standalone && g.toggle) return !!toggles[g.id]; if (g.items) return g.items.some(it => (it.tool || it.id) === toolMode); return false; }; const runAction = (actionId) => { if (!chartActions) return; const map = { reset: "reset", screenshot: "screenshot", "zoom-in": "zoomIn", "zoom-out": "zoomOut" }; const fn = chartActions.current && chartActions.current[map[actionId] || actionId]; if (typeof fn === "function") fn(); }; const onMainClick = (g) => { if (g.standalone && g.tool) { setToolMode(toolMode === g.tool ? "crosshair" : g.tool); return; } if (g.standalone && g.toggle) { setToggle(g.id, !toggles[g.id]); return; } if (g.standalone && g.action === "clear-drawings") { clearDrawings(); return; } if (g.items) { setOpenId(openId === g.id ? null : g.id); } }; const onItemClick = (it) => { /* action items（reset / screenshot / zoom-in / zoom-out） */ if (["reset", "screenshot", "zoom-in", "zoom-out"].includes(it.id)) { runAction(it.id); setOpenId(null); return; } if (it.id === "data-window") { setToggle("data-window", !toggles["data-window"]); setOpenId(null); return; } /* shape 工具：用 id 當 tool fallback */ const tool = it.tool || it.id; setToolMode(toolMode === tool ? "crosshair" : tool); setOpenId(null); }; const hasDrawings = (drawings.hlines?.length > 0 || drawings.tlines?.length > 0); return (
{TOOL_GROUPS.map((g, i) => { if (g.sep) return
; if (g.id === "trash" && !hasDrawings) return null; const active = isGroupActive(g); const hasMenu = !!g.items; return (
{hasMenu && openId === g.id && ( )}
); })}
); }; const ChartPage = ({ symbol = "2330.TW", goChart }) => { const navList = React.useMemo(() => { try { return JSON.parse(sessionStorage.getItem("chart.navList") || "[]"); } catch { return []; } }, [symbol]); const navIdx = navList.indexOf(symbol); const prevSym = navIdx > 0 ? navList[navIdx - 1] : null; const nextSym = navIdx >= 0 && navIdx < navList.length - 1 ? navList[navIdx + 1] : null; const mockMeta = window.MOCK.WATCHLIST.find((s) => s.sym === symbol); const [resolvedName, setResolvedName] = React.useState(mockMeta ? mockMeta.name : null); /* mock 找不到時去 FinMind universe 查名稱 */ React.useEffect(() => { if (mockMeta) { setResolvedName(mockMeta.name); return; } setResolvedName(null); if (!window.FinMind || !window.FinMind.getTaiwanUniverse) return; let cancelled = false; window.FinMind.getTaiwanUniverse() .then((list) => { if (cancelled) return; const found = list.find((s) => s.sym === symbol); if (found) setResolvedName(found.name); }) .catch(() => {}); return () => { cancelled = true; }; }, [symbol, mockMeta]); const stock = mockMeta || { sym: symbol, name: resolvedName || symbol.replace(/\.TW$/, ""), market: symbol.endsWith(".TW") ? "TW" : "US", price: 0, chg: 0, pct: 0, vol: 0, volMa: 1, rsi: 50, ma: "Sideways", ts: "", spark: [], }; const market = stock.market; const [tf, setTf] = React.useState("1D"); const [range, setRange] = React.useState("3M"); const [showMA, setShowMA] = React.useState({ 5: true, 10: true, 20: true, 60: true, 120: false, 240: false }); const [showKC, setShowKC] = React.useState(true); const [kc, setKc] = React.useState({ swing: true, dashed: true, connect: true, neckline: true, trend: true, waitSignal: true, longEntry: true, longExit: true, shortEntry: false, shortExit: false, maLabel: true, }); const [indicators, setIndicators] = React.useState({ MA: true, EMA: false, MACD: false, RSI: true, KD: false, BB: false, VolMA: true }); const [toolMode, setToolMode] = React.useState("crosshair"); const [drawings, _setDrawings] = window.usePersistedState("chart.draw." + symbol, { hlines: [], tlines: [], shapes: [] }); /* drawings 變動 history — 用 ref 不觸發 render，Cmd/Ctrl+Z 取出上一版 */ const historyRef = React.useRef([]); const setDrawings = (next) => { historyRef.current.push(drawings); if (historyRef.current.length > 100) historyRef.current.shift(); _setDrawings(next); }; const clearDrawings = () => setDrawings({ hlines: [], tlines: [], shapes: [] }); /* 切 symbol 時清掉 history（不同股票的繪圖不該互相 undo） */ React.useEffect(() => { historyRef.current = []; }, [symbol]); /* Keyboard: Cmd/Ctrl+Z 還原 / Delete / Backspace 刪最後繪圖 */ React.useEffect(() => { const onKey = (e) => { const tgt = e.target; if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) return; if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z" && !e.shiftKey) { e.preventDefault(); if (historyRef.current.length === 0) return; const prev = historyRef.current.pop(); _setDrawings(prev); return; } if (e.key === "Delete" || e.key === "Backspace") { const fn = chartActionRef.current && chartActionRef.current.deleteLast; if (typeof fn !== "function") return; const before = drawings; if (fn()) { /* deleteLast 走 onDrawingsChange → setDrawings → push history，已自動入 history */ e.preventDefault(); } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [drawings]); /* Rail toggles — 磁吸/鎖定/隱藏/fx/data-window */ const [toggles, setToggles] = window.usePersistedState("chart.toggles." + symbol, { magnet: true, "lock-draw": false, "hide-draw": false, fx: false, "data-window": false, }); const setToggle = (k, v) => setToggles((t) => ({ ...t, [k]: v })); const chartActionRef = React.useRef({}); /* 觀察清單（與 page-watchlists 共用 localStorage key） */ const [lists, setLists] = window.usePersistedState("watchlists", window.DEFAULT_WATCHLISTS || []); const [addOpen, setAddOpen] = React.useState(false); const addWrapRef = React.useRef(null); const inListCount = lists.filter((l) => l.syms.includes(symbol)).length; const toggleInList = (listId) => { setLists((ls) => ls.map((l) => { if (l.id !== listId) return l; const has = l.syms.includes(symbol); return { ...l, syms: has ? l.syms.filter((s) => s !== symbol) : [...l.syms, symbol] }; })); }; React.useEffect(() => { if (!addOpen) return; const onDown = (e) => { if (addWrapRef.current && !addWrapRef.current.contains(e.target)) setAddOpen(false); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [addOpen]); /* 真實資料：FinMind 抓日 K，失敗時 fallback 到 mock 並標示 */ const [dataSource, setDataSource] = React.useState({ candles: null, source: "loading", error: null }); React.useEffect(() => { let cancelled = false; setDataSource({ candles: null, source: "loading", error: null }); window.FinMind.getCandles(symbol) .then((candles) => { if (cancelled) return; if (!candles.length) { setDataSource({ candles: window.genCandles(120, symbol.charCodeAt(0), stock.price - 60), source: "mock", error: "FinMind 回傳空資料", }); return; } setDataSource({ candles, source: "finmind", error: null }); }) .catch((err) => { if (cancelled) return; console.warn("[chart] FinMind 抓取失敗，fallback 到 mock：", err.message); setDataSource({ candles: window.genCandles(120, symbol.charCodeAt(0), stock.price - 60), source: "mock", error: err.message, }); }); return () => { cancelled = true; }; }, [symbol, stock.price]); const baseData = dataSource.candles; /* 即時報價（CF Worker proxy）— 盤中合併到最後一根 K */ const [intraday, setIntraday] = React.useState(null); const [intradayErr, setIntradayErr] = React.useState(null); React.useEffect(() => { setIntraday(null); setIntradayErr(null); if (!window.Intraday || !window.Intraday.isEnabled()) return; const unsub = window.Intraday.subscribe(symbol, (q, err) => { if (err) { setIntradayErr(err.message); return; } setIntraday(q); setIntradayErr(null); }); return unsub; }, [symbol]); /* 合併資料：今天的 quote 覆蓋當日那根 K；若資料最後一根不是今天則 append 一根 forming */ const data = React.useMemo(() => { if (!baseData) return null; if (!intraday || intraday.price == null) return baseData; const ts = new Date(intraday.ts); const tsStr = ts.toISOString().slice(0, 10); const last = baseData[baseData.length - 1]; const lastStr = last ? last.date.toISOString().slice(0, 10) : null; const live = { date: ts, o: intraday.open ?? (last ? last.c : intraday.price), h: intraday.high ?? intraday.price, l: intraday.low ?? intraday.price, c: intraday.price, v: intraday.vol ?? 0, }; if (lastStr === tsStr) return [...baseData.slice(0, -1), live]; return [...baseData, live]; }, [baseData, intraday]); /* range / tf 套用：依 range 切時間區段、再依 tf 聚合（日/週/月 K） */ const RANGE_DAYS = { "1M": 30, "3M": 90, "6M": 180, "1Y": 365, "3Y": 365 * 3, "5Y": 365 * 5 }; const displayData = React.useMemo(() => { if (!data) return null; const rangeDays = RANGE_DAYS[range] || 180; const cutoff = new Date(Date.now() - rangeDays * 24 * 60 * 60 * 1000); const sliced = data.filter(c => c.date >= cutoff); const base = sliced.length ? sliced : data; if (tf === "1D") return base; const weekKey = (d) => { const x = new Date(d); const day = x.getDay(); const diff = day === 0 ? -6 : 1 - day; x.setDate(x.getDate() + diff); return x.toISOString().slice(0, 10); }; const monthKey = (d) => new Date(d).toISOString().slice(0, 7); const keyFn = tf === "1W" ? weekKey : monthKey; const groups = []; let cur = null; for (const c of base) { const k = keyFn(c.date); if (!cur || cur._k !== k) { cur = { _k: k, date: c.date, o: c.o, h: c.h, l: c.l, c: c.c, v: c.v }; groups.push(cur); } else { cur.h = Math.max(cur.h, c.h); cur.l = Math.min(cur.l, c.l); cur.c = c.c; cur.v += c.v; cur.date = c.date; } } return groups.map(({ _k, ...r }) => r); }, [data, range, tf]); const isFormingLast = intraday != null; const formingIdx = (isFormingLast && displayData) ? displayData.length - 1 : null; const last = data && data.length ? data[data.length - 1] : null; const prev = data && data.length > 1 ? data[data.length - 2] : null; /* KC v17 純函式運算（real data 時用，mock 時讓 chart.jsx 用 KC_MARKERS） * 只在 tf=日 K 跑；週/月 K 的 KC 規格與日 K 不同，先不算 */ const kcEvents = React.useMemo(() => { if (!displayData || displayData.length < 25) return []; if (dataSource.source !== "finmind") return []; if (tf !== "1D") return []; return window.KCStructure ? window.KCStructure.compute(displayData) : []; }, [displayData, dataSource.source, tf]); /* 各 MA 最新值（取 displayData 最後 N 根 close 的平均） */ const maLast = React.useMemo(() => { if (!displayData || !displayData.length) return {}; const out = {}; for (const p of [5, 10, 20, 60, 120, 240]) { if (displayData.length >= p) { const slice = displayData.slice(-p); out[p] = slice.reduce((s, c) => s + c.c, 0) / p; } else { out[p] = null; } } return out; }, [displayData]); const MA_COLORS = { 5: "#F6C85F", 10: "#F87171", 20: "#4DA3FF", 60: "#A78BFA", 120: "#22C55E", 240: "#94A3B8" }; /* KC 訊號摘要 — 從 kcEvents 動態萃取 */ const kcSummary = React.useMemo(() => { if (!kcEvents || !kcEvents.length || !displayData || !displayData.length) return null; const fmtMD = (d) => { if (!d) return "—"; const dt = d instanceof Date ? d : new Date(d); return `${String(dt.getMonth()+1).padStart(2,"0")}-${String(dt.getDate()).padStart(2,"0")}`; }; const ev = kcEvents.map(e => ({ ...e, _date: displayData[e.idx]?.date })); const reversed = [...ev].reverse(); const lastTrend = reversed.find(e => e.type === "trend"); const lastLongEntry = reversed.find(e => e.type === "long-entry"); const lastLongExit = reversed.find(e => e.type === "long-exit"); const lastShortEntry = reversed.find(e => e.type === "short-entry"); const lastShortExit = reversed.find(e => e.type === "short-exit"); const lastWait = reversed.find(e => e.type === "wait-long" || e.type === "wait-short"); let position = "無部位", positionCls = "dim"; if (lastLongEntry && (!lastLongExit || lastLongExit.idx < lastLongEntry.idx)) { position = "多單持有"; positionCls = "up"; } else if (lastShortEntry && (!lastShortExit || lastShortExit.idx < lastShortEntry.idx)) { position = "空單持有"; positionCls = "down"; } let waitDisplay = "—", waitCls = "dim"; if (lastWait) { const sameDirEntryAfter = ev.find(e => e.idx > lastWait.idx && ((lastWait.type === "wait-long" && e.type === "long-entry") || (lastWait.type === "wait-short" && e.type === "short-entry")) ); if (!sameDirEntryAfter) { waitDisplay = lastWait.label + (lastWait.reason ? " · " + lastWait.reason : ""); waitCls = "warn"; } } const lastEntry = [lastLongEntry, lastShortEntry].filter(Boolean).sort((a,b) => b.idx - a.idx)[0]; const lastEntryDate = lastEntry ? fmtMD(lastEntry._date) : "—"; const lastEntryReason = lastEntry ? (lastEntry.reason || lastEntry.label) : ""; const confirmDate = lastEntry && lastEntry.confirmIdx != null ? fmtMD(displayData[lastEntry.confirmIdx]?.date) : null; const trendLabel = lastTrend ? lastTrend.label : "—"; const trendStructure = trendLabel === "多頭" ? "頭頭高 底底高" : trendLabel === "空頭" ? "頭頭低 底底低" : trendLabel === "盤整" ? "結構未明" : "—"; const trendCls = trendLabel === "多頭" ? "danger" : trendLabel === "空頭" ? "success" : trendLabel === "盤整" ? "warn" : ""; const tlTypes = new Set(["trend", "long-entry", "long-exit", "short-entry", "short-exit", "wait-long", "wait-short", "neckline-up", "neckline-dn"]); const timeline = ev.filter(e => tlTypes.has(e.type)).slice(-8).reverse(); return { trendLabel, trendStructure, trendCls, position, positionCls, waitDisplay, waitCls, lastEntryDate, lastEntryReason, confirmDate, timeline, fmtMD, }; }, [kcEvents, displayData]); /* stock-bar 顯示優先序：intraday quote > FinMind 最後一根 K > mock stock */ const intradayDisplay = React.useMemo(() => { if (!intraday || intraday.price == null) return null; const chg = intraday.prevClose != null ? intraday.price - intraday.prevClose : 0; const pct = intraday.prevClose ? (chg / intraday.prevClose) * 100 : 0; const d = new Date(intraday.ts); return { price: intraday.price, chg, pct, open: intraday.open, high: intraday.high, low: intraday.low, vol: intraday.vol, ts: `${d.toISOString().slice(0, 10)} ${d.toLocaleTimeString("zh-TW", { hour12: false })}`, source: intraday.source, }; }, [intraday]); const finmindLive = React.useMemo(() => { if (dataSource.source !== "finmind" || !baseData || baseData.length < 2) return null; const c = baseData[baseData.length - 1]; const p = baseData[baseData.length - 2]; const chg = c.c - p.c; const pct = p.c > 0 ? (chg / p.c) * 100 : 0; return { price: c.c, chg, pct, open: c.o, high: c.h, low: c.l, vol: c.v, ts: c.date.toISOString().slice(0, 10), source: "FinMind", }; }, [baseData, dataSource.source]); const display = intradayDisplay || finmindLive || { price: stock.price, chg: stock.chg, pct: stock.pct, open: stock.price - stock.chg, high: stock.price + 4, low: stock.price - stock.chg - 6, vol: stock.vol, ts: stock.ts, source: "Mock", }; return (
{/* Stock info bar */}
{stock.name} {stock.sym} {stock.market === "TW" ? "TWSE" : "NASDAQ"} {intradayDisplay ? {intradayDisplay.source} 即時 : dataSource.source === "finmind" ? FinMind 日 K : 模擬資料} {intradayErr && 即時失敗}
{addOpen && (
點選清單來加入 / 移除 {symbol}
{lists.length === 0 ? (
尚未建立任何清單，請到「觀察清單」頁建立。
) : lists.map((l) => { const inList = l.syms.includes(symbol); return ( ); })}
)}
= 0 ? "up" : "down")}>{fmt(display.price, 2)} = 0 ? "up" : "down")}>{display.chg >= 0 ? "+" : ""}{fmt(display.chg, 2)} = 0 ? "up" : "down")}>{display.pct >= 0 ? "+" : ""}{fmt(display.pct, 2)}%
開盤{fmt(display.open, 2)}
最高{fmt(display.high, 2)}
最低{fmt(display.low, 2)}
成交量{fmtVol(display.vol)}
成交金額{fmtVol(display.vol * display.price)}
資料源{display.source}
時間{display.ts}
{/* Chart workspace */}
{/* Toolbar — timeframe + range，互動工具搬到左側 chart-tool-rail */}
{["1D","1W","1M"].map(t => )}
{["1M","3M","6M","1Y","3Y","5Y"].map(r => )}
{tf} · {range}
{/* Indicator toggles */}
{Object.keys(indicators).map(k => ( ))}
{[5,10,20,60,120,240].map(p => ( ))}
{indicators.MA && (
{[5,10,20,60,120,240].filter(p => showMA[p]).map(p => ( MA{p} {maLast[p] != null ? fmt(maLast[p], 2) : "—"} ))} {[5,10,20,60,120,240].filter(p => showMA[p]).length === 0 && ( 未啟用任何 MA )}
)}
{/* Chart stage — 左側 vertical tool rail（TradingView 風 + flyout） + 右側 canvas */}
{dataSource.source === "loading" ? (
載入 {symbol} 日 K 中…
) : !displayData || displayData.length === 0 ? (
此區間（{range}）沒有 K 線資料 試試切到較長區間（3M / 6M / 1Y）
) : ( )}
{dataSource.source === "mock" && (
⚠ FinMind 抓取失敗，目前顯示模擬資料{dataSource.error ? `（${dataSource.error}）` : ""}。可在「設定」頁設定 token 後重整。
)} {/* KC sub-options */} {showKC && (
KC 訊號覆層 {[ ["swing","高低點"],["dashed","短虛線"],["connect","轉折連線"],["neckline","上下頸線"], ["trend","趨勢標籤"],["waitSignal","等待訊號"], ["longEntry","多單進場"],["longExit","多單出場"], ["shortEntry","空單進場"],["shortExit","空單出場"], ["maLabel","均線標籤"] ].map(([k,l]) => ( ))}
)}
{/* Right detail panel */}