// watchlist-tab-variants.jsx — common big-tech layouts for putting
// Watchlist (自選股) + Screeners (篩選器) in ONE bottom tab ("自選").
// Reuses edit-modes.jsx shared bits (EM_STOCKS, EMTicker, EMNameCell, EMPriceCell, EMScreenHead).
const { useState: wvS } = React;
const WT = () => window.flutterTokens;
// saved screeners (name + matched count)
const SCREENS = [
{ name: '半導體龍頭', n: 24 },
{ name: 'Magnificent 7', n: 7 },
{ name: '高股息 ETF 成分', n: 38 },
{ name: '突破年線', n: 112 },
];
// user can have MULTIPLE watchlists (each tagged with its market mix)
const WATCHLISTS = [
{ name: '我的持股', n: 8, mk: '混合' },
{ name: '觀察中', n: 15, mk: '台股' },
{ name: '高息定存股', n: 6, mk: '台股' },
{ name: 'ETF', n: 5, mk: '美股' },
];
const SCREEN_MK = ['台股', '美股', '台股', '美股'];
const MARKETS = ['全部', '台股', '美股', '幣圈'];
const WL = window.EM_STOCKS; // favorited stocks
function StockRow({ s }) {
const t = WT();
return (
);
}
function MkBadge({ mk }) {
const t = WT();
return {mk};
}
function MkChips({ sel, onSel }) {
const t = WT();
return (
{MARKETS.map(m => {
const on = sel === m;
return ;
})}
);
}
function ListRow({ name, n, icon, mk }) {
const t = WT();
return (
);
}
function ScreenRow({ s }) {
const t = WT();
return (
);
}
function SectionHead({ children, action }) {
const t = WT();
return (
{children}
{action && {action}}
);
}
function Head() {
const t = WT();
return (
);
}
// ════ A · 頂部 Segmented（自選股 / 篩選器）════════════════════════
function WVSegmented() {
const t = WT();
const [tab, setTab] = wvS('wl');
return (
{[['wl', '自選股'], ['scr', '篩選器']].map(([k, lbl]) => {
const on = tab === k;
return ;
})}
{tab === 'wl' ? WL.map(s => ) : SCREENS.map((s, i) => )}
);
}
// ════ B · 分區捲動（自選股 section + 篩選器 section）═══════════════
function WVSectioned() {
const t = WT();
return (
自選股
{WL.slice(0, 4).map(s =>
)}
我的篩選器
{SCREENS.map((s, i) => )}
);
}
// ════ C · 篩選器卡片橫滑 + 自選股清單 ════════════════════════════
function WVCards() {
const t = WT();
return (
篩選器
{SCREENS.map((s, i) => (
))}
{WL.map(s =>
)}
);
}
// ════ D · 頂部 Tab Bar（Material 上分頁）═════════════════════════
function WVTopTabs() {
const t = WT();
const [tab, setTab] = wvS('wl');
const [mk, setMk] = wvS('全部');
const wls = mk === '全部' ? WATCHLISTS : WATCHLISTS.filter(w => w.mk === mk || w.mk === '混合');
const scrs = SCREENS.map((s, i) => ({ ...s, mk: SCREEN_MK[i] })).filter(s => mk === '全部' || s.mk === mk);
return (
{[['wl', '自選股'], ['scr', '篩選器']].map(([k, lbl]) => {
const on = tab === k;
return (
);
})}
{tab === 'wl'
? <>{wls.map((w, i) => )}
: scrs.map((s, i) => (
))}
);
}
Object.assign(window, { WVSegmented, WVSectioned, WVCards, WVTopTabs });
const VW = 402, VH = 874;
const vFrame = { background: 'transparent', boxShadow: 'none', borderRadius: 0, overflow: 'visible' };
function VFr({ children }) { return {children}; }
ReactDOM.createRoot(document.getElementById('root')).render(
);