Veygro · 设计系统

CSS token 建议

--bg #F5F6F7 · --surface #FFFFFF · --border #DDE3E8 · --fg #17212B · --muted #667085 · --accent #0B6B5E · --blue #1A73E8。

类型层级

页面标题 24px，区块标题 20px，卡片标题 16px，正文和表格 14px，状态和元信息 12px。

状态规范

所有状态使用小圆点 + 文案，不使用大色块、红色警告块或夸张胶囊。

完整组件系统

组件	状态	建议组件名	说明
顶栏	已覆盖	Header	可复用
侧边图标栏	已覆盖	SidebarIconRail	可复用
上下文菜单	已覆盖	ContextMenu	可复用
页面头部	已覆盖	PageHeader	可复用
KPI 卡片	已覆盖	KpiCard	可复用
指标条	已覆盖	MetricStrip	可复用
模块卡片	已覆盖	ModuleCard	可复用
建议卡片	已覆盖	RecommendationCard	可复用
行动队列行	已覆盖	ActionQueueRow	可复用
报告卡片	已覆盖	ReportCard	可复用
数据源状态行	已覆盖	DataSourceStatusRow	可复用
数据质量检查表	已覆盖	DataQualityChecklist	可复用
图表卡片	已覆盖	ChartCard	可复用
数据表格	已覆盖	DataTable	可复用
筛选栏	已覆盖	FilterBar	可复用
搜索输入	已覆盖	SearchInput	可复用
日期范围选择器	已覆盖	DateRangeSelector	可复用
状态标识	已覆盖	StatusToken	可复用
空状态	已覆盖	EmptyState	可复用
右侧详情面板	已覆盖	RightDetailPanel	可复用

图表组件

8 类

折线图趋势已用

多指标折线图对比已用

柱状图 / 堆叠条分布已用

环形图覆盖已用

迷你趋势线 / 趋势条表格已用

React 组件拆分建议

建议拆为 AppShell、Topbar、IconRail、SideNav、PageHeader、MetricStrip、KpiCard、ChartCard、DataTable、FilterBar、StatusDot、RecommendationCard、ActionQueueTable、RightDetailPanel、ReportPreview、DataSourceTable、QualityChecklist。数据层保持只读 DTO：source、period、metrics、tables、recommendations、qualityChecks、reports。

页面结构说明

index.html 作为平台入口；核心业务页独立文件承载完整产品内容：增长总览、SEO 信息中心、Google Ads 工作区、AI 建议中心、行动队列、增长报告、数据源、数据质量、客户站点。移动端 390px 下隐藏桌面侧栏，保留移动顶栏、横向快捷导航、可横向滚动的成熟表格。

Veygro 组件库与实现说明