我将为您创建一个组会排版系统。首先让我获取相关的设计系统建议,然后构建一个功能完整的界面。现在让我获取一些相关的UI图片资源来增强界面设计:基于设计系统的建议和获取的资源,我将创建一个现代化、功能完整的组会排版系统。这个系统将采用极简主义风格,包含人员管理、历史记录、时间安排和汇报管理等功能。
```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 rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #2563eb;\n --primary-dark: #1d4ed8;\n --secondary: #64748b;\n --accent: #3b82f6;\n --background: #0f172a;\n --surface: #1e293b;\n --text-primary: #f1f5f9;\n --text-secondary: #94a3b8;\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 line-height: 1.6;\n min-height: 100vh;\n }\n \n .font-display {\n font-family: 'Space Grotesk', sans-serif;\n }\n \n .glass-card {\n background: rgba(30, 41, 59, 0.7);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n }\n \n .gradient-border {\n position: relative;\n border-radius: 16px;\n background: var(--surface);\n }\n \n .gradient-border::before {\n content: '';\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary));\n border-radius: 17px;\n z-index: -1;\n opacity: 0.3;\n }\n \n .hover-lift {\n transition: all 0.3s ease;\n }\n \n .hover-lift:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n }\n \n .fade-in {\n animation: fadeIn 0.5s ease-out;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .slide-in {\n animation: slideIn 0.4s ease-out;\n }\n \n @keyframes slideIn {\n from { transform: translateX(-20px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n \n .pulse {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }\n 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }\n }\n \n .scrollbar-custom::-webkit-scrollbar {\n width: 6px;\n }\n \n .scrollbar-custom::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 10px;\n }\n \n .scrollbar-custom::-webkit-scrollbar-thumb {\n background: var(--primary);\n border-radius: 10px;\n }\n \n .scrollbar-custom::-webkit-scrollbar-thumb:hover {\n background: var(--primary-dark);\n }\n \n @media (max-width: 768px) {\n .mobile-stack {\n flex-direction: column;\n }\n \n .mobile-full {\n width: 100%;\n }\n }\n </style>\n</head>\n<body class=\"min-h-screen bg-gradient-to-br from-slate-900 to-slate-950\">\n <!-- 背景装饰 -->\n <div class=\"fixed inset-0 overflow-hidden pointer-events-none\">\n <div class=\"absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl\"></div>\n <div class=\"absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-500/5 rounded-full blur-3xl\"></div>\n </div>\n \n <div class=\"relative z-10 container mx-auto px-4 py-8 max-w-7xl\">\n <!-- 头部 -->\n <header class=\"mb-10 fade-in\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-6\">\n <div>\n <h1 class=\"text-3xl md:text-4xl font-bold font-display mb-2\">组会排版系统</h1>\n <p class=\"text-slate-400\">学术会议管理与安排平台</p>\n </div>\n <div class=\"flex items-center gap-4\">\n <div class=\"flex items-center gap-2 text-slate-300\">\n <i class=\"fas fa-calendar-alt text-blue-400\"></i>\n <span id=\"current-date\">2024年1月15日</span>\n </div>\n <button class=\"px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors flex items-center gap-2\">\n <i class=\"fas fa-plus\"></i>\n <span>新建组会</span>\n </button>\n </div>\n </div>\n </header>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <!-- 左侧:人员池管理 -->\n <div class=\"lg:col-span-2 space-y-8\">\n <!-- 人员池管理 -->\n <section class=\"glass-card p-6 fade-in\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-xl font-bold font-display flex items-center gap-2\">\n <i class=\"fas fa-users text-blue-400\"></i>\n 人员池管理\n </h2>\n <div class=\"flex gap-2\">\n <button id=\"add-person-btn\" class=\"px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium transition-colors flex items-center gap-1\">\n <i class=\"fas fa-user-plus\"></i>\n 添加人员\n </button>\n <button class=\"px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm font-medium transition-colors flex items-center gap-1\">\n <i class=\"fas fa-file-export\"></i>\n 导出\n </button>\n </div>\n </div>\n \n <div class=\"mb-6\">\n <div class=\"relative\">\n <i class=\"fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-500\"></i>\n <input type=\"text\" placeholder=\"搜索人员...\" class=\"w-full pl-10 pr-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\">\n </div>\n </div>\n \n <div class=\"overflow-x-auto scrollbar-custom\">\n <table class=\"w-full\">\n <thead>\n <tr class=\"border-b border-slate-700\">\n <th class=\"text-left py-3 px-4 text-slate-400 font-medium\">姓名</th>\n <th class=\"text-left py-3 px-4 text-slate-400 font-medium\">角色</th>\n <th class=\"text-left py-3 px-4 text-slate-400 font-medium\">专业方向</th>\n <th class=\"text-left py-3 px-4 text-slate-400 font-medium\">上次汇报</th>\n <th class=\"text-left py-3 px-4 text-slate-400 font-medium\">操作</th>\n </tr>\n </thead>\n <tbody id=\"person-pool\">\n <!-- 人员数据将通过JS动态生成 -->\n </tbody>\n </table>\n </div>\n \n <div class=\"mt-6 text-center text-slate-500 text-sm\">\n 共 <span id=\"person-count\" class=\"text-blue-400 font-medium\">0</span> 位成员\n </div>\n </section>\n \n <!-- 当前组会安排 -->\n <section class=\"glass-card p-6 fade-in\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-xl font-bold font-display flex items-center gap-2\">\n <i class=\"fas fa-calendar-check text-green-400\"></i>\n 当前组会安排\n </h2>\n <div class=\"flex items-center gap-4\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fas fa-clock text-slate-400\"></i>\n <span class=\"text-sm text-slate-400\">下次组会:</span>\n <span class=\"font-medium\" id=\"next-meeting-date\">2024年1月20日 14:00</span>\n </div>\n <button class=\"px-3 py-1.5 bg-green-600 hover:bg-green-700 rounded-lg text-sm font-medium transition-colors flex items-center gap-1\">\n <i class=\"fas fa-edit\"></i>\n 编辑安排\n </button>\n </div>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <!-- 主持人信息 -->\n <div class=\"gradient-border p-5 hover-lift\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"font-bold text-lg flex items-center gap-2\">\n <i class=\"fas fa-user-tie text-yellow-400\"></i>\n 主持人\n </h3>\n <span class=\"px-2 py-1 bg-yellow-900/30 text-yellow-400 text-xs rounded-full\">主持人</span>\n </div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold\">\n 王\n </div>\n <div>\n <h4 class=\"font-bold\">王教授</h4>\n <p class=\"text-slate-400 text-sm\">计算机视觉方向</p>\n </div>\n </div>\n <div class=\"mt-4\">\n <label class=\"block text-sm text-slate-400 mb-1\">主持主题</label>\n <input type=\"text\" value=\"深度学习在医学影像中的应用进展\" class=\"w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-transparent\">\n </div>\n </div>\n \n <!-- 汇报人信息 -->\n <div class=\"gradient-border p-5 hover-lift\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"font-bold text-lg flex items-center gap-2\">\n <i class=\"fas fa-chalkboard-teacher text-blue-400\"></i>\n 汇报人\n </h3>\n <span class=\"px-2 py-1 bg-blue-900/30 text-blue-400 text-xs rounded-full\">汇报中</span>\n </div>\n <div class=\"flex items-center gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white font-bold\">\n 李\n </div>\n <div>\n <h4 class=\"font-bold\">李研究员</h4>\n <p class=\"text-slate-400 text-sm\">自然语言处理方向</p>\n </div>\n </div>\n <div class=\"mt-4\">\n <label class=\"block text-sm text-slate-400 mb-1\">汇报题目</label>\n <input type=\"text\" value=\"基于Transformer的多模态情感分析研究\" class=\"w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent\">\n </div>\n <div class=\"mt-3 flex gap-2\">\n <button class=\"flex-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition-colors\">保存</button>\n <button class=\"flex-1 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors\">取消</button>\n </div>\n </div>\n </div>\n \n <div class=\"mt-6\">\n <h3 class=\"font-bold mb-3 flex items-center gap-2\">\n <i class=\"fas fa-list-ol text-purple-400\"></i>\n 后续汇报顺序\n </h3>\n <div class=\"space-y-3\" id=\"presentation-queue\">\n <!-- 汇报队列将通过JS动态生成 -->\n </div>\n </div>\n </section>\n </div>\n \n <!-- 右侧:历史记录与时间安排 -->\n <div class=\"space-y-8\">\n <!-- 时间安排 -->\n <section class=\"glass-card p-6 fade-in\">\n <h2 class=\"text-xl font-bold font-display mb-6 flex items-center gap-2\">\n <i class=\"fas fa-clock text-purple-400\"></i>\n 时间安排\n </h2>\n \n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm text-slate-400 mb-1\">选择日期</label>\n <input type=\"date\" class=\"w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent\" value=\"2024-01-20\">\n </div>\n \n <div>\n <label class=\"block text-sm text