用户不想要深色效果，想要一个明亮、高级的界面。之前的深色科技未来主义风格不符合要求。我需要重新设计一个明亮、高级的研发评估系统。
首先，我需要理解用户需求：用户说"不高级不好看"，要求重新设计，但不要深色效果。这意味着我需要一个明亮、专业、高级的界面。
让我重新考虑设计方向：
1. **目的**：研发成果效益评估系统，用于多维度量化评估研发项目价值与效益。用户是专业人士，需要清晰、直观、高级的界面。
2. **基调**：我选择"现代精致主义"美学方向，结合"轻奢科技"风格。明亮主题、柔和渐变、精致的阴影、优雅的排版。
3. **差异化**：让界面"过目不忘"的特点将是精致的玻璃拟态效果、优雅的渐变色彩、精心设计的字体排印和流畅的动画。
我需要获取一个适合明亮主题的设计系统建议。让我搜索一下企业级数据分析仪表板的明亮主题设计。
这个设计系统推荐看起来不错，包含了明亮的配色方案。我可以基于这个来设计。
现在我需要思考具体的设计元素：
- 配色方案：明亮的背景，使用蓝色作为主色调，搭配渐变色
- 字体：选择优雅的字体，比如"Inter"或"Poppins"作为正文字体，"Montserrat"或"Playfair Display"作为标题字体
- 布局：使用卡片式设计，玻璃拟态效果，但这次是明亮版本的玻璃拟态
- 动画：微妙的动画过渡，优雅的交互效果
让我创建一个明亮、高级的研发评估系统。我会采用以下设计原则：
1. 明亮的背景色（浅灰色或白色）
2. 柔和的渐变色
3. 精致的阴影和边框
4. 优雅的字体排印
5. 响应式设计
我需要获取一些适合明亮主题的图片资产，但可能不是必须的。让我先设计代码结构。
我需要包含以下部分：
1. 现代化的标题栏（明亮版本）
2. 优雅的步骤导航（明亮版本）
3. 数据卡片（明亮版本，带有更好的视觉效果）
4. 基础信息表单（明亮版本）
我会使用明亮主题，采用轻玻璃拟态效果，添加微妙的动画和渐变。
让我创建完整的HTML代码。首先需要更新CSS变量为明亮主题。现在开始构建设计。我将创建一个精致、现代化的明亮主题研发评估系统界面。采用明亮主题，科技感设计，轻玻璃拟态效果，微妙的动画和优雅的排版。
现在我来创建完整的设计。我会采用现代精致主义美学，明亮主题，轻玻璃拟态效果，渐变色彩，优雅动画。
让我直接生成最终的JSON输出。```json{
"summary": "重新设计了研发成果效益评估系统的明亮主题版本，采用现代精致主义美学风格，明亮主题结合轻玻璃拟态效果，使用柔和的渐变色彩和优雅的动画过渡，提升了整体的高级感和专业性。设计了精致的步骤导航、数据卡片和表单界面，确保视觉层次清晰且功能明确。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>研发成果效益评估系统</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;60…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <style>\n :root {\n --primary: #4361ee;\n --primary-dark: #3a56d4;\n --primary-light: #4cc9f0;\n --secondary: #7209b7;\n --accent: #06d6a0;\n --warning: #ff9e00;\n --background: #f8fafc;\n --surface: #ffffff;\n --surface-light: #f1f5f9;\n --text-primary: #1e293b;\n --text-secondary: #475569;\n --text-muted: #64748b;\n --border: #e2e8f0;\n --glass-bg: rgba(255, 255, 255, 0.85);\n --glass-border: rgba(226, 232, 240, 0.6);\n --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);\n --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--background);\n color: var(--text-primary);\n background-image: \n radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05) 0%, transparent 50%),\n radial-gradient(circle at 90% 80%, rgba(114, 9, 183, 0.05) 0%, transparent 50%);\n min-height: 100vh;\n overflow-x: hidden;\n }\n \n .glass-card {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n box-shadow: var(--shadow-md);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .glass-card:hover {\n box-shadow: var(--shadow-lg);\n transform: translateY(-4px);\n border-color: rgba(67, 97, 238, 0.3);\n }\n \n .step-circle {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-family: 'Montserrat', sans-serif;\n transition: all 0.4s ease;\n position: relative;\n z-index: 1;\n }\n \n .step-circle.active {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);\n }\n \n .step-circle.inactive {\n background: var(--surface);\n color: var(--text-muted);\n border: 2px solid var(--border);\n box-shadow: var(--shadow-sm);\n }\n \n .step-connector {\n height: 2px;\n flex: 1;\n background: linear-gradient(90deg, var(--primary-light), var(--border), var(--border));\n margin: 0 15px;\n position: relative;\n top: -22px;\n z-index: 0;\n }\n \n .step-connector.active {\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n }\n \n .data-card {\n position: relative;\n overflow: hidden;\n transition: all 0.4s ease;\n }\n \n .data-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 20px 20px 0 0;\n transition: all 0.4s ease;\n }\n \n .data-card:hover::before {\n height: 6px;\n }\n \n .value-glow {\n position: relative;\n display: inline-block;\n }\n \n .value-glow::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 120%;\n height: 120%;\n background: radial-gradient(circle, rgba(67, 97, 238, 0.1) 0%, transparent 70%);\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .data-card:hover .value-glow::after {\n opacity: 1;\n }\n \n .form-input {\n background: var(--surface);\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 14px 18px;\n color: var(--text-primary);\n font-family: 'Inter', sans-serif;\n font-size: 15px;\n transition: all 0.3s ease;\n }\n \n .form-input:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);\n background: var(--surface);\n }\n \n .form-input::placeholder {\n color: var(--text-muted);\n }\n \n .section-title {\n font-family: 'Montserrat', sans-serif;\n font-weight: 700;\n position: relative;\n display: inline-block;\n }\n \n .section-title::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -10px;\n width: 60%;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), transparent);\n border-radius: 2px;\n }\n \n .animate-pulse-slow {\n animation: pulse-slow 2.5s infinite;\n }\n \n @keyframes pulse-slow {\n 0%, 100% { \n transform: scale(1);\n opacity: 1; \n }\n 50% { \n transform: scale(1.05);\n opacity: 0.8; \n }\n }\n \n .animate-float {\n animation: float 8s ease-in-out infinite;\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 50% { transform: translateY(-15px) rotate(1deg); }\n }\n \n .grid-bg {\n background-image: \n linear-gradient(rgba(226, 232, 240, 0.5) 1px, transparent 1px),\n linear-gradient(90deg, rgba(226, 232, 240, 0.5) 1px, transparent 1px);\n background-size: 40px 40px;\n background-position: center center;\n }\n \n .btn-primary {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n font-weight: 600;\n padding: 14px 32px;\n border-radius: 12px;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 6px 20px rgba(67, 97, 238, 0.25);\n position: relative;\n overflow: hidden;\n }\n \n .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(67, 97, 238, 0.35);\n }\n \n .btn-primary:active {\n transform: translateY(0);\n }\n \n .btn-primary::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.7s ease;\n }\n \n .btn-primary:hover::after {\n left: 100%;\n }\n \n .progress-bar {\n height: 8px;\n border-radius: 4px;\n overflow: hidden;\n background: var(--surface-light);\n }\n \n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 4px;\n transition: width 1s ease;\n }\n \n @media (max-width: 768px) {\n .step-connector {\n display: none;\n }\n \n .step-container {\n overflow-x: auto;\n padding-bottom: 15px;\n justify-content: flex-start;\n gap: 30px;\n }\n \n .glass-card {\n border-radius: 16px;\n }\n }\n </style>\n</head>\n<body class=\"p-4 md:p-8\">\n <div class=\"max-w-7xl mx-auto\">\n <!-- Header -->\n <header class=\"glass-card p-8 mb-10\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div>\n <div class=\"flex items-center mb-3\">\n <div class=\"w-3 h-8 bg-gradient-to-b from-primary to-secondary rounded-full mr-3\"></div>\n <h1 class=\"text-3xl md:text-4xl font-bold font-['Montserrat'] text-text-primary\">\n 研发成果效益评估系统\n </h1>\n </div>\n <p class=\"text-lg text-text-secondary max-w-2xl\">多维度量化评估研发项目价值与效益，提供科学决策支持</p>\n </div>\n <div class=\"flex flex-col items-start md:items-end gap-3\">\n <div class=\"flex items-center text-text-muted\">\n <i class=\"fas fa-clock mr-2 text-primary\"></i>\n <span class=\"font-medium\">2026年04月10日 16:12</span>\n </div>\n <div class=\"flex items-center\">\n <div class=\"w-3 h-3 rounded-full bg-accent mr-2 animate-pulse-slow\"></div>\n <span class=\"text-sm font-medium text-accent\">系统在线 · 数据同步中</span>\n </div>\n </div>\n </div>\n </header>\n \n <!-- Progress Steps -->\n <div class=\"glass-card p-8 mb-10\">\n <div class=\"flex justify-between items-center mb-8\">\n <h2 class=\"text-2xl font-['Montserrat'] font-bold text-text-primary section-title\">评估流程</h2>\n <div class=\"text-sm text-text-muted\">\n <span class=\"font-medium text-primary\">第1步</span> / 共6步\n </div>\n </div>\n \n <div class=\"step-container flex justify-between items-center relative mb-10\">\n <!-- Step 1 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle active mb-4\">\n 1\n <div class=\"absolute -top-1 -right-1 w-4 h-4 rounded-full bg-accent border-2 border-white\"></div>\n </div>\n <span class=\"font-semibold text-primary\">基础信息</span>\n <span class=\"text-xs text-text-muted mt-1\">进行中</span>\n </div>\n \n <div class=\"step-connector active\"></div>\n \n <!-- Step 2 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle inactive mb-4\">\n 2\n </div>\n <span class=\"font-medium text-text-secondary\">项目成果</span>\n <span class=\"text-xs text-text-muted mt-1\">等待</span>\n </div>\n \n <div class=\"step-connector\"></div>\n \n <!-- Step 3 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle inactive mb-4\">\n 3\n </div>\n <span class=\"font-medium text-text-secondary\">技术能力</span>\n <span class=\"text-xs text-text-muted mt-1\">等待</span>\n </div>\n \n <div class=\"step-connector\"></div>\n \n <!-- Step 4 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle inactive mb-4\">\n 4\n </div>\n <span class=\"font-medium text-text-secondary\">应用成果</span>\n <span class=\"text-xs text-text-muted mt-1\">等待</span>\n </div>\n \n <div class=\"step-connector\"></div>\n \n <!-- Step 5 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle inactive mb-4\">\n 5\n </div>\n <span class=\"font-medium text-text-secondary\">经济效益</span>\n <span class=\"text-xs text-text-muted mt-1\">等待</span>\n </div>\n \n <div class=\"step-connector\"></div>\n \n <!-- Step 6 -->\n <div class=\"flex flex-col items-center relative z-10\">\n <div class=\"step-circle inactive mb-4\">\n 6\n </div>\n <span class=\"font-medium text-text-secondary\">社会效益</span>\n <span class=\"text-xs text-text-muted mt-1\">等待</span>\n </div>\n </div>\n \n <div class=\"pt-6 border-t border-border\">\n <div class=\"flex items-center justify-between mb-2\">\n <span class=\"text-sm text-text-muted\">当前进度</span>\n <span class=\"text-sm font-semibold text-primary\">16.7%</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" style=\"width: 16.7%\"></div>\n </div>\n </div>\n </div>\n \n <!-- Data Cards -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10\">\n <!-- Card 1 -->\n <div class=\"glass-card data-card p-6\">\n <div class=\"flex justify-between items-start mb-6\">\n <div>\n <h3 class=\"text-lg font-semibold text-text-primary mb-1\">项目总投资</h3>\n <p class=\"text-sm text-text-muted\">（万元）</p>\n </div>\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center\">\n <i class=\"fas fa-chart-line text-primary text-xl\"></i>\n </div>\n </div>\n <div class=\"text-3xl font-bold text-text-primary mb-2 value-glow\">100.00</div>\n <div class=\"text-sm text-text-muted flex items-center\">\n <i class=\"fas fa-check-circle text-accent mr-2\"></i>\n 预算执行率: <span class=\"font-semibold text-accent ml-1\">92%</span>\n </div>\n </div>\n \n <!-- Card 2 -->\n <div class=\"glass-card data-card p-6\">\n <div class=\"flex justify-between items-start mb-6\">\n <div>\n <h3 class=\"text-lg font-semibold text-text-primary mb-1\">节约成本</h3>\n <p class=\"text-sm text-text-muted\">（万元）</p>\n </div>\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-accent/10 to-accent/5 flex items-center justify-center\">\n <i class=\"fas fa-coins text-accent text-xl\"></i>\n </div>\n </div>\n <div class=\"text-3xl font-bold text-text-primary mb-2 value-glow\">30.50</div>\n <div class=\"text-sm text-text-muted flex items-center\">\n <i class=\"fas fa-arrow-up text-accent mr-2\"></i>\n 较预期: <span class=\"font-semibold text-accent ml-1\">+15%</span>\n </div>\n </div>\n \n <!-- Card 3 -->\n <div class=\"glass-card data-card p-6\">\n <div class=\"flex justify-between items-start mb-6\">\n <div>\n <h3 class=\"text-lg font-semibold text-text-primary mb-1\">市场效益</h3>\n <p class=\"text-sm text-text-muted\">（万元）</p>\n </div>\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-secondary/10 to-secondary/5 flex items-center justify-center\">\n <i class=\"fas fa-briefcase text-secondary text-xl\"></i>\n </div>\n </div>\n <div class=\"text-3xl font-bold text-text-primary mb-2 value-glow\">130.50</div>\n <div class=\"text-sm text-text-muted flex items-center\">\n <i class=\"fas fa-chart-line text-accent mr-2\"></i>\n 增长率: <span class=\"font-semibold text-accent ml-1\">+24%</span>\n </div>\n </div>\n \n <!-- Card 4 -->\n <div class=\"glass-card data-card p-6\">\n <div class=\"flex justify-between items-start mb-6\">\n <div>\n <h3 class=\"text-lg font-semibold text-text-primary mb-1\">项目净效益</h3>\n <p class=\"text-sm text-text-muted\">（万元）</p>\n </div>\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-purple-500/10 to-purple-500/5 flex items-center justify-center\">\n <i class=\"fas fa-chart-pie text-purple-500 text-xl\"></i>\n </div>\n </div>\n <div class=\"text-3xl font-bold text-text-primary mb-2 value-glow\">61.00</div>\n <div class=\"text-sm text-text-muted flex items-center\">\n <i class=\"fas fa-percentage text-accent mr-2\"></i>\n 投资回报率: <span class=\"font-semibold text-accent ml-1\">61%</span>\n </div>\n </div>\n </div>\n \n <!-- Form Section -->\n <div class=\"glass-card p-8 mb-10\">\n <div class=\"flex items-center mb-8\">\n <div class=\"w-2 h-8 bg-gradient-to-b from-primary to-secondary rounded-full mr-4\"></div>\n <h2 class=\"text-2xl font-['Montserrat'] font-bold text-text-primary\">基础信息录入</h2>\n <span class=\"ml-4 px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full\">步骤 1/6</span>\n </div>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10\">\n <!-- Left Column -->\n <div class=\"space-y-6\">\n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"year\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-calendar-alt text-primary text-xs\"></i>\n </div>\n 建设年份 *\n </label>\n <input type=\"text\" id=\"year\" placeholder=\"2025\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">请输入项目启动年份</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"projectName\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-project-diagram text-primary text-xs\"></i>\n </div>\n 项目名称 *\n </label>\n <input type=\"text\" id=\"projectName\" placeholder=\"输入研发项目全称\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">请输入完整的项目名称</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"period\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-clock text-primary text-xs\"></i>\n </div>\n 项目周期 *\n </label>\n <input type=\"text\" id=\"period\" placeholder=\"如：2025.01-2025.12\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">格式：YYYY.MM-YYYY.MM</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"manager\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-user-tie text-primary text-xs\"></i>\n </div>\n 项目经理姓名 *\n </label>\n <input type=\"text\" id=\"manager\" placeholder=\"输入项目经理姓名\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">项目主要负责人</p>\n </div>\n </div>\n \n <!-- Right Column -->\n <div class=\"space-y-6\">\n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"projectId\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-hashtag text-primary text-xs\"></i>\n </div>\n 项目编号 *\n </label>\n <input type=\"text\" id=\"projectId\" placeholder=\"如：RD-2025-001\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">公司内部项目编号</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"department\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-building text-primary text-xs\"></i>\n </div>\n 所属单位 *\n </label>\n <input type=\"text\" id=\"department\" placeholder=\"如：技术研发中心/某事业部\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">项目所属部门或单位</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"budget\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-money-bill-wave text-primary text-xs\"></i>\n </div>\n 项目金额（万元） *\n </label>\n <input type=\"text\" id=\"budget\" placeholder=\"填写项目立项金额\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">项目总预算金额</p>\n </div>\n \n <div>\n <label class=\"block text-text-primary font-semibold mb-3 flex items-center\" for=\"phone\">\n <div class=\"w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center mr-3\">\n <i class=\"fas fa-phone text-primary text-xs\"></i>\n </div>\n 联系电话 *\n </label>\n <input type=\"text\" id=\"phone\" placeholder=\"输入联系电话\" class=\"form-input w-full\">\n <p class=\"text-xs text-text-muted mt-2 ml-9\">项目经理联系电话</p>\n </div>\n </div>\n </div>\n \n <div class=\"flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border gap-6\">\n <div class=\"text-sm text-text-muted\">\n <i class=\"fas fa-info-circle text-primary mr-2\"></i>\n 带 * 号为必填项，请确保信息准确无误\n </div>\n <div class=\"flex gap-4\">\n <button class=\"px-6 py-3 border-2 border-border text-text-secondary font-medium rounded-lg hover:bg-surface-light transition-all duration-300\">\n 暂存草稿\n </button>\n <button class=\"btn-primary flex items-center\">\n <span>保存并继续</span>\n <i class=\"fas fa-arrow-right ml-3\"></i>\n </button>\n </div>\n </div>\n </div>\n \n <!-- Footer -->\n <div class=\"flex flex-col md:flex-row justify-between items-center text-text-muted text-sm pt-6 border-t border-border\">\n <div class=\"mb-4 md:mb-0\">\n <p>© 2026 研发成果效益评估系统 | 版本: 2.0.1 | 最后更新: 2026-04-10</p>\n </div>\n <div class=\"flex items-center\">\n <div class=\"w-2 h-2 rounded-full bg-accent mr-2\"></div>\n <span>数据保护级别: <span class=\"font-medium text-primary\">高级加密</span></span>\n <span class=\"mx-3\">|</span>\n <i class=\"fas fa-lock mr-1\"></i>\n <span>安全连接</span>\n </div>\n </div>\n </div>\n \n <script>\n // Add interactivity\n document.addEventListener('DOMContentLoaded', function() {\n // Form input focus effects\n const inputs = document.querySelectorAll('.form-input');\n inputs.forEach(input => {\n input.addEventListener('focus', function() {\n this.parentElement.classList.add('transform', 'scale-[1.02]');\n this.parentElement.style.transition = 'transform 0.3s ease';\n });\n \n input.addEventListener('blur', function() {\n this.parentElement.classList.remove('transform', 'scale-[1.02]');\n });\n });\n \n // Step navigation click effect\n const steps = document.querySelectorAll('.step-circle');\n steps.forEach(step => {\n step.addEventListener('click', function() {\n if (this.classList.contains('inactive')) {\n // Visual feedback for inactive steps\n this.style.transform = 'scale(0.95)';\n setTimeout(() => {\n this.style.transform = '';\n }, 300);\n \n // In a real app, this would show a tooltip or modal\n const stepNumber = this.textContent.trim();\n const stepNames = ['', '基础信息', '项目成果', '技术能力', '应用成果', '经济效益', '社会效益'];\n alert(`请先完成当前步骤才能进入第${stepNumber}步：${stepNames[stepNumber]}`);\n }\n });\n });\n \n // Data card interaction\n const dataCards = document.querySelectorAll('.data-card');\n dataCards.forEach(card => {\n card.addEventListener('click', function() {\n this.style.transform = 'scale(0.98)';\n setTimeout(() => {\n this.style.transform = '';\n }, 200);\n });\n });\n \n // Button ripple effect\n const buttons = document.querySelectorAll('.btn-primary');\n buttons.forEach(button => {\n button.addEventListener('click', function(e) {\n const ripple = document.createElement('span');\n const rect = this.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = e.clientX - rect.left - size / 2;\n const y = e.clientY - rect.top - size / 2;\n \n ripple.style.width = ripple.style.height = size + 'px';\n ripple.style.left = x + 'px';\n ripple.style.top = y + 'px';\n ripple.classList.add('ripple');\n \n this.appendChild(ripple);\n \n setTimeout(() => {\n ripple.remove();\n }, 600);\n });\n });\n \n // Add ripple CSS\n const style = document.createElement('style');\n style.textContent = `\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n }\n \n @keyframes ripple-animation {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n });\n </script>\n</body>\n</html>"},
"next": ["添加数据可视化图表","集成实时数据更新","优化移动端体验","增加评估报告预览","添加团队协作功能"],
"breakpoint": "none"
}```