设计系统Token颜色配置方案

"{\n \"tokens\": {\n \"colors\": {\n \"text\": \"#111827\",\n \"muted\": \"#6B7280\",\n \"border\": \"#E5E7EB\",\n \"surface\": \"#FFFFFF\",\n \"background\": \"#F6F6F6\",\n \"success\": \"#10B981\",\n \"danger\": \"#EF4444\"\n },\n \"typography\": {\n \"title\": { \"fontSize\": \"16px\", \"fontWeight\": \"500\" },\n \"body\": { \"fontSize\": \"14px\", \"fontWeight\": \"400\" },\n \"caption\": { \"fontSize\": \"12px\", \"fontWeight\": \"400\" }\n },\n \"rounded\": {\n \"sm\": \"4px\",\n \"md\": \"8px\"\n },\n \"spacing\": {\n \"sm\": \"8px\",\n \"md\": \"12px\",\n \"lg\": \"16px\"\n }\n },\n \"component\": \"Page\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"row\", \"height\": \"100vh\" },\n \"backgroundColor\": \"{colors.background}\",\n \"children\": [\n {\n \"component\": \"SideNav\",\n \"width\": \"240px\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRight\": \"1px solid {colors.border}\",\n \"children\": [\n {\n \"component\": \"Logo\",\n \"src\": \"placeholder\",\n \"alt\": \"执行纪律台\",\n \"layout\": { \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"执行纪律台\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Personal trading cockpit\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"NavItems\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"padding\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"NavItem\",\n \"content\": \"总控\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.text}\",\n \"borderLeft\": \"3px solid {colors.success}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"持仓\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"基金\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"筛选\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"通知\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"回测\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"策略\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"NavItem\",\n \"content\": \"设置\",\n \"style\": {\n \"padding\": \"{spacing.md}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Main\",\n \"flex\": 1,\n \"overflowY\": \"auto\",\n \"children\": [\n {\n \"component\": \"Header\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\", \"padding\": \"{spacing.lg}\" },\n \"backgroundColor\": \"{colors.surface}\",\n \"borderBottom\": \"1px solid {colors.border}\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"总控 2026-05-28\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"ButtonGroup\",\n \"layout\": { \"display\": \"flex\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Button\",\n \"content\": \"处理持仓\",\n \"variant\": \"outline\",\n \"color\": \"{colors.text}\",\n \"border\": \"1px solid {colors.border}\"\n },\n {\n \"component\": \"Button\",\n \"content\": \"看执行池\",\n \"variant\": \"solid\",\n \"color\": \"white\",\n \"backgroundColor\": \"#000000\"\n }\n ]\n }\n ]\n },\n {\n \"component\": \"PageHeader\",\n \"layout\": { \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"今日总控\",\n \"style\": {\n \"fontSize\": \"20px\",\n \"fontWeight\": \"600\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"这个页面只回答一件事：今天哪些动作被允许，哪些动作要先等数据或环境确认。\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"ContentGrid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"1fr 1fr\", \"gap\": \"{spacing.lg}\", \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"MarketSummaryCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.lg}\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"市场总闸\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"观察期\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"-0.41%\",\n \"style\": {\n \"fontSize\": \"32px\",\n \"fontWeight\": \"600\",\n \"color\": \"{colors.danger}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"总闸已可读，仍需按白线/黄线、RR、仓位和盘中确认逐只筛选。\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"DataGrid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(4, 1fr)\", \"gap\": \"{spacing.md}\", \"marginTop\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"DataItem\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"开放持仓\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"0\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n },\n {\n \"component\": \"DataItem\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"执行票\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"4\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n },\n {\n \"component\": \"DataItem\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"观察票\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"5\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n },\n {\n \"component\": \"DataItem\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"口径阻断\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"0\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Tags\",\n \"layout\": { \"display\": \"flex\", \"gap\": \"{spacing.sm}\", \"marginTop\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"Tag\",\n \"content\": \"0 个阻断\",\n \"color\": \"{colors.success}\",\n \"backgroundColor\": \"bg-green-100\"\n },\n {\n \"component\": \"Tag\",\n \"content\": \"盘中 未录入\",\n \"color\": \"{colors.muted}\",\n \"backgroundColor\": \"bg-gray-100\"\n },\n {\n \"component\": \"Tag\",\n \"content\": \"快照 2026-05-28 01:52:17\",\n \"color\": \"{colors.muted}\",\n \"backgroundColor\": \"bg-gray-100\"\n }\n ]\n }\n ]\n },\n {\n \"component\": \"ActionList\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.lg}\",\n \"children\": [\n {\n \"component\": \"ActionItem\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\", \"paddingBottom\": \"{spacing.md}\", \"borderBottom\": \"1px solid {colors.border}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"01 先处理持仓\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"处理\",\n \"variant\": \"outline\",\n \"color\": \"{colors.text}\",\n \"border\": \"1px solid {colors.border}\"\n }\n ]\n },\n {\n \"component\": \"ActionItem\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\", \"paddingBottom\": \"{spacing.md}\", \"borderBottom\": \"1px solid {colors.border}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"02 再看新仓\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"查看\",\n \"variant\": \"outline\",\n \"color\": \"{colors.text}\",\n \"border\": \"1px solid {colors.border}\"\n }\n ]\n },\n {\n \"component\": \"ActionItem\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\", \"paddingBottom\": \"{spacing.md}\", \"borderBottom\": \"1px solid {colors.border}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"03 盘中只做确认\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"分析\",\n \"variant\": \"outline\",\n \"color\": \"{colors.text}\",\n \"border\": \"1px solid {colors.border}\"\n }\n ]\n },\n {\n \"component\": \"ActionItem\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"04 最后核对口径\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"通过\",\n \"variant\": \"solid\",\n \"color\": \"white\",\n \"backgroundColor\": \"{colors.success}\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"component\": \"StepNavigation\",\n \"layout\": { \"display\": \"flex\", \"gap\": \"{spacing.sm}\", \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"StepItem\",\n \"content\": \"01 持仓\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"borderBottom\": \"2px solid {colors.success}\",\n \"color\": \"{colors.success}\"\n }\n },\n {\n \"component\": \"StepItem\",\n \"content\": \"02 新仓\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"StepItem\",\n \"content\": \"03 盘中\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"StepItem\",\n \"content\": \"04 环境\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"StepItem\",\n \"content\": \"05 数据\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"StepItem\",\n \"content\": \"06 复盘\",\n \"style\": {\n \"padding\": \"{spacing.sm}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"StepContent\",\n \"layout\": { \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"Step 01\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"持仓优先\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"已买入资产先处理，今天买入的受 T+1 约束，不能用盘中通知倒逼卖出。\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"EmptyState\",\n \"border\": \"1px dashed {colors.border}\",\n \"borderRadius\": \"{rounded.md}\",\n \"padding\": \"{spacing.lg}\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"当前没有已登记持仓\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"如果今天有新成交，先在持仓页登记，后续通知才能按成本、止损和目标提醒。\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"Button\",\n \"content\": \"进入持仓页\",\n \"variant\": \"solid\",\n \"color\": \"white\",\n \"backgroundColor\": \"{colors.success}\"\n }\n ]\n },\n {\n \"component\": \"StepContent\",\n \"layout\": { \"padding\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"Step 02\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"新仓执行池\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"这里只展示可讨论对象；真正买入仍要过环境、白黄线、RR、仓位和实时确认。\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n }\n ]\n }\n ]\n}"