科研评价系统容器组件设计与布局实现

"{\n \"component\": \"ResearchEvaluationSystem\",\n \"type\": \"container\",\n \"layout\": {\n \"display\": \"grid\",\n \"columns\": 12,\n \"gap\": \"16px\"\n },\n \"padding\": \"16px\",\n \"backgroundColor\": \"#F8F9FA\",\n \"children\": [\n {\n \"component\": \"Header\",\n \"backgroundColor\": \"#1E88E5\",\n \"padding\": \"16px\",\n \"children\": [\n {\n \"component\": \"Title\",\n \"content\": \"研发成果效益评估系统\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"700\",\n \"color\": \"#FFFFFF\"\n }\n },\n {\n \"component\": \"Subtitle\",\n \"content\": \"多维度量化评估研发项目价值与效益\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#FFFFFF\",\n \"marginTop\": \"4px\"\n }\n }\n ]\n },\n {\n \"component\": \"StepNavigation\",\n \"layout\": {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"alignItems\": \"center\",\n \"position\": \"relative\"\n },\n \"children\": [\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"backgroundColor\": \"#1E88E5\",\n \"border\": \"2px solid #1E88E5\",\n \"color\": \"#FFFFFF\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"1\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"基础信息\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#1E88E5\",\n \"fontWeight\": \"500\"\n }\n }\n ]\n },\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"border\": \"2px solid #BDBDBD\",\n \"color\": \"#BDBDBD\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"2\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"项目成果\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#BDBDBD\",\n \"fontWeight\": \"400\"\n }\n }\n ]\n },\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"border\": \"2px solid #BDBDBD\",\n \"color\": \"#BDBDBD\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"3\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"技术能力\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#BDBDBD\",\n \"fontWeight\": \"400\"\n }\n }\n ]\n },\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"border\": \"2px solid #BDBDBD\",\n \"color\": \"#BDBDBD\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"4\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"应用成果\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#BDBDBD\",\n \"fontWeight\": \"400\"\n }\n }\n ]\n },\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"border\": \"2px solid #BDBDBD\",\n \"color\": \"#BDBDBD\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"5\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"经济效益\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#BDBDBD\",\n \"fontWeight\": \"400\"\n }\n }\n ]\n },\n {\n \"component\": \"StepItem\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"StepCircle\",\n \"style\": {\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\",\n \"border\": \"2px solid #BDBDBD\",\n \"color\": \"#BDBDBD\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"12px\",\n \"fontWeight\": \"bold\",\n \"marginBottom\": \"4px\"\n },\n \"content\": \"6\"\n },\n {\n \"component\": \"StepLabel\",\n \"content\": \"社会效益\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#BDBDBD\",\n \"fontWeight\": \"400\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"DataCards\",\n \"layout\": {\n \"display\": \"grid\",\n \"columns\": 4,\n \"gap\": \"16px\"\n },\n \"children\": [\n {\n \"component\": \"DataCard\",\n \"backgroundColor\": \"#FFFFFF\",\n \"borderRadius\": \"8px\",\n \"border\": \"1px solid #E0E0E0\",\n \"padding\": \"16px\",\n \"children\": [\n {\n \"component\": \"CardTitle\",\n \"content\": \"项目总投资（万元）\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#757575\",\n \"textAlign\": \"center\"\n }\n },\n {\n \"component\": \"CardValue\",\n \"content\": \"100.00\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"700\",\n \"color\": \"#2196F3\",\n \"textAlign\": \"center\",\n \"marginTop\": \"8px\"\n }\n }\n ]\n },\n {\n \"component\": \"DataCard\",\n \"backgroundColor\": \"#FFFFFF\",\n \"borderRadius\": \"8px\",\n \"border\": \"1px solid #E0E0E0\",\n \"padding\": \"16px\",\n \"children\": [\n {\n \"component\": \"CardTitle\",\n \"content\": \"节约人力/硬件/其他成本（万元）\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#757575\",\n \"textAlign\": \"center\"\n }\n },\n {\n \"component\": \"CardValue\",\n \"content\": \"30.50\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"700\",\n \"color\": \"#2196F3\",\n \"textAlign\": \"center\",\n \"marginTop\": \"8px\"\n }\n }\n ]\n },\n {\n \"component\": \"DataCard\",\n \"backgroundColor\": \"#FFFFFF\",\n \"borderRadius\": \"8px\",\n \"border\": \"1px solid #E0E0E0\",\n \"padding\": \"16px\",\n \"children\": [\n {\n \"component\": \"CardTitle\",\n \"content\": \"对内市场效益/对外创收（万元）\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#757575\",\n \"textAlign\": \"center\"\n }\n },\n {\n \"component\": \"CardValue\",\n \"content\": \"130.50\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"700\",\n \"color\": \"#2196F3\",\n \"textAlign\": \"center\",\n \"marginTop\": \"8px\"\n }\n }\n ]\n },\n {\n \"component\": \"DataCard\",\n \"backgroundColor\": \"#FFFFFF\",\n \"borderRadius\": \"8px\",\n \"border\": \"1px solid #E0E0E0\",\n \"padding\": \"16px\",\n \"children\": [\n {\n \"component\": \"CardTitle\",\n \"content\": \"项目净效益（万元）\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#757575\",\n \"textAlign\": \"center\"\n }\n },\n {\n \"component\": \"CardValue\",\n \"content\": \"61.00\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"700\",\n \"color\": \"#2196F3\",\n \"textAlign\": \"center\",\n \"marginTop\": \"8px\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"BasicInfoForm\",\n \"layout\": {\n \"display\": \"grid\",\n \"columns\": 2,\n \"gap\": \"16px\"\n },\n \"children\": [\n {\n \"component\": \"FormSection\",\n \"children\": [\n {\n \"component\": \"FormTitle\",\n \"content\": \"1. 基础信息录入\",\n \"style\": {\n \"fontSize\": \"18px\",\n \"fontWeight\": \"600\",\n \"color\": \"#212121\",\n \"marginBottom\": \"16px\",\n \"borderBottom\": \"1px solid #E0E0E0\",\n \"paddingBottom\": \"8px\"\n }\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"建设年份 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"2025\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"项目名称 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"输入研发项目全称\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"项目周期 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"如：2025.01-2025.12\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"项目经理姓名 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"输入项目经理姓名\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"FormSection\",\n \"children\": [\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"项目编号 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"如：RD-2025-001\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"所属单位 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"如：技术研发中心/某事业部\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"项目金额（万元） *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"填写项目立项金额\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"FormField\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"gap\": \"8px\"\n },\n \"children\": [\n {\n \"component\": \"Label\",\n \"content\": \"联系电话 *\",\n \"style\": {\n \"fontSize\": \"14px\",\n \"color\": \"#212121\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Input\",\n \"placeholder\": \"输入联系电话\",\n \"style\": {\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"border\": \"1px solid #E0E0E0\",\n \"borderRadius\": \"4px\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}"