```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=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\" integrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n <style>\n :root {\n --color-primary: #1a3a5c;\n --color-secondary: #2d5f8a;\n --color-accent: #c44536;\n --color-success: #2b7a4b;\n --color-warning: #d4a017;\n --color-danger: #c44536;\n --color-info: #3b82b0;\n --color-background: #f8f7f4;\n --color-foreground: #1a1a1a;\n --color-card: #ffffff;\n --color-border: #e2ddd6;\n --color-muted: #8a8580;\n --state-hover: #2d5f8a;\n --state-active: #0f2a44;\n --state-focus: #c44536;\n --state-disabled: #c4bfb8;\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 16px;\n --shadow-sm: 0 1px 3px rgba(26,58,92,0.08);\n --shadow-md: 0 4px 12px rgba(26,58,92,0.1);\n --shadow-lg: 0 8px 24px rgba(26,58,92,0.12);\n --transition-fast: 150ms ease-out;\n --transition-base: 250ms ease-out;\n --transition-slow: 400ms cubic-bezier(0.4,0,0.2,1);\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background-color: var(--color-background);\n color: var(--color-foreground);\n line-height: 1.65;\n -webkit-font-smoothing: antialiased;\n padding: 2rem 0;\n }\n .container {\n max-width: 960px;\n margin: 0 auto;\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n }\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;\n font-weight: 600;\n line-height: 1.25;\n }\n .heading-display {\n font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;\n font-size: clamp(1.75rem, 3vw, 2.5rem);\n font-weight: 700;\n line-height: 1.15;\n letter-spacing: -0.01em;\n }\n .heading-h1 {\n font-size: clamp(1.5rem, 2.5vw, 2rem);\n font-weight: 600;\n line-height: 1.2;\n letter-spacing: -0.01em;\n }\n .heading-h2 {\n font-size: clamp(1.25rem, 2vw, 1.75rem);\n font-weight: 600;\n line-height: 1.25;\n }\n .heading-h3 {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.3;\n }\n .heading-h4 {\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.4;\n }\n .text-body {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.65;\n }\n .text-small {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.5;\n }\n .text-caption {\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.4;\n letter-spacing: 0.02em;\n }\n .text-overline {\n font-size: 0.7rem;\n font-weight: 600;\n line-height: 1.2;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-background);\n padding: 0.5rem 1rem;\n border-radius: var(--radius-sm);\n font-weight: 600;\n font-size: 0.9rem;\n line-height: 1;\n letter-spacing: 0.02em;\n border: none;\n cursor: pointer;\n transition: background-color var(--transition-base), box-shadow var(--transition-base);\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n }\n .btn-primary:hover {\n background-color: var(--color-secondary);\n box-shadow: var(--shadow-sm);\n }\n .btn-primary:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n }\n .btn-primary:active {\n background-color: var(--state-active);\n }\n .btn-primary:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background-color: var(--color-primary);\n }\n .btn-secondary {\n background-color: var(--color-card);\n color: var(--color-foreground);\n padding: 0.5rem 1rem;\n border-radius: var(--radius-sm);\n font-weight: 600;\n font-size: 0.9rem;\n line-height: 1;\n letter-spacing: 0.02em;\n border: 1px solid var(--color-border);\n cursor: pointer;\n transition: background-color var(--transition-base), border-color var(--transition-base);\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n }\n .btn-secondary:hover {\n background-color: var(--color-border);\n }\n .btn-secondary:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n }\n .btn-secondary:active {\n background-color: var(--color-muted);\n }\n .btn-secondary:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background-color: var(--color-card);\n }\n .btn-ghost {\n background-color: transparent;\n color: var(--color-foreground);\n padding: 0.5rem 1rem;\n border-radius: var(--radius-sm);\n font-weight: 600;\n font-size: 0.9rem;\n line-height: 1;\n letter-spacing: 0.02em;\n border: none;\n cursor: pointer;\n transition: background-color var(--transition-base);\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n }\n .btn-ghost:hover {\n background-color: var(--color-border);\n }\n .btn-ghost:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n }\n .btn-ghost:active {\n background-color: var(--color-muted);\n }\n .btn-ghost:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background-color: transparent;\n }\n .card-news {\n background-color: var(--color-card);\n border-radius: var(--radius-md);\n padding: 1.25rem;\n border: 1px solid var(--color-border);\n transition: box-shadow var(--transition-base), border-color var(--transition-base);\n cursor: pointer;\n }\n .card-news:hover {\n box-shadow: var(--shadow-md);\n border-color: rgba(26,58,92,0.2);\n }\n .input-search {\n background-color: var(--color-background);\n color: var(--color-foreground);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-sm);\n padding: 0.5rem 0.75rem;\n font-size: 1rem;\n transition: border-color var(--transition-base), box-shadow var(--transition-base);\n min-height: 44px;\n width: 100%;\n }\n .input-search:hover {\n border-color: var(--color-muted);\n }\n .input-search:focus {\n outline: none;\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px rgba(26,58,92,0.2);\n }\n .input-search:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n }\n .input-search:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n .input-search.error {\n border-color: var(--color-danger);\n box-shadow: 0 0 0 2px rgba(196,69,54,0.2);\n }\n .filter-tag {\n display: inline-block;\n padding: 0.3rem 0.75rem;\n border-radius: var(--radius-sm);\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-foreground);\n border: 1px solid var(--color-border);\n background: var(--color-card);\n cursor: pointer;\n transition: all var(--transition-fast);\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n user-select: none;\n }\n .filter-tag:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .filter-tag.active {\n background: var(--color-primary);\n color: var(--color-background);\n border-color: transparent;\n }\n .filter-tag:focus-visible {\n outline: 2px solid var(--state-focus);\n outline-offset: 2px;\n }\n .news-thumb {\n width: 100%;\n height: 120px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Source Serif 4', serif;\n font-size: 1.125rem;\n font-weight: 600;\n color: white;\n }\n .news-divider {\n border: none;\n border-top: 1px solid var(--color-border);\n margin: 1.25rem 0;\n }\n .page-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 44px;\n min-height: 44px;\n font-size: 0.9rem;\n font-weight: 600;\n border-radius: var(--radius-sm);\n }\n .scroll-reveal {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .scroll-reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n @media (max-width: 640px) {\n .filter-wrap {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n .filter-wrap::-webkit-scrollbar {\n display: none;\n }\n }\n </style>\n</head>\n<body>\n <div class=\"container\">\n <!-- news-list-header -->\n <section id=\"news-list-header\" class=\"mb-8\">\n <div class=\"flex flex-col md:flex-row md:items-end md:justify-between gap-4\">\n <div>\n <h2 class=\"heading-h2\" style=\"color: var(--color-primary);\">校园新闻</h2>\n <p class=\"text-body\" style=\"color: var(--color-muted); margin-top: 0.25rem;\">聚焦学术动态、校园活动与师生故事</p>\n </div>\n <div class=\"relative w-full md:w-64\">\n <i class=\"fas fa-search absolute left-3 top-1/2 -translate-y-1/2\" style=\"color: var(--color-muted);\"></i>\n <input type=\"text\" class=\"input-search pl-10\" placeholder=\"搜索新闻...\" aria-label=\"搜索新闻\">\n </div>\n </div>\n <div class=\"filter-wrap flex gap-2 mt-6 overflow-x-auto md:overflow-visible pb-2\">\n <button class=\"filter-tag active\" data-filter=\"all\">全部</button>\n <button class=\"filter-tag\" data-filter=\"学术\">学术</button>\n <button class=\"filter-tag\" data-filter=\"校园\">校园</button>\n <button class=\"filter-tag\" data-filter=\"活动\">活动</button>\n <button class=\"filter-tag\" data-filter=\"公告\">公告</button>\n </div>\n </section>\n\n <!-- news-list -->\n <section id=\"news-list\" class=\"space-y-0\">\n <!-- 新闻卡片 1 -->\n <article class=\"card-news scroll-reveal\" data-category=\"学术\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-primary);\">学术</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月15日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-primary); color: white; font-size: 0.65rem;\">学术</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">计算机学院团队在国际顶级会议ACL 2026发表三篇论文</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">研究聚焦于低资源语言机器翻译与多模态语义理解,其中一篇获得最佳论文提名。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n <hr class=\"news-divider scroll-reveal\">\n <!-- 新闻卡片 2 -->\n <article class=\"card-news scroll-reveal\" data-category=\"活动\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-info);\">活动</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月12日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-info); color: white; font-size: 0.65rem;\">活动</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">春季校园招聘会将于4月10日举行,120家企业参会</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">涵盖互联网、金融、制造业等领域,提供超过2000个岗位,欢迎各年级同学参加。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n <hr class=\"news-divider scroll-reveal\">\n <!-- 新闻卡片 3 -->\n <article class=\"card-news scroll-reveal\" data-category=\"公告\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-warning);\">公告</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月10日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-warning); color: white; font-size: 0.65rem;\">公告</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">图书馆即日起开通夜间自习室,延长开放至凌晨1点</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">为满足期末复习需求,图书馆三层、四层自习区试行夜间开放,需提前预约座位。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n <hr class=\"news-divider scroll-reveal\">\n <!-- 新闻卡片 4 -->\n <article class=\"card-news scroll-reveal\" data-category=\"校园\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-success);\">校园</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月8日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-success); color: white; font-size: 0.65rem;\">校园</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">第38届校园文化艺术节开幕,首场音乐会座无虚席</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">本届艺术节以'青春·传承'为主题,将持续一个月,涵盖戏剧、舞蹈、美术等十余场活动。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n <hr class=\"news-divider scroll-reveal\">\n <!-- 新闻卡片 5 -->\n <article class=\"card-news scroll-reveal\" data-category=\"学术\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-primary);\">学术</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月5日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-primary); color: white; font-size: 0.65rem;\">学术</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">物理学院新实验楼竣工,配备亚洲领先的量子光学实验室</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">新实验楼总面积1.2万平方米,将支撑量子计算、凝聚态物理等前沿方向的研究。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n <hr class=\"news-divider scroll-reveal\">\n <!-- 新闻卡片 6 -->\n <article class=\"card-news scroll-reveal\" data-category=\"公告\">\n <div class=\"flex flex-col md:flex-row gap-4\">\n <div class=\"news-thumb flex-shrink-0 md:w-48\" style=\"background: var(--color-warning);\">公告</div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-caption\" style=\"color: var(--color-accent);\">2026年3月3日</span>\n <span class=\"text-overline px-2 py-0.5 rounded-sm\" style=\"background: var(--color-warning); color: white; font-size: 0.65rem;\">公告</span>\n </div>\n <h3 class=\"heading-h3 mb-2\" style=\"color: var(--color-primary);\">关于2026年清明节放假安排的通知</h3>\n <p class=\"text-small\" style=\"color: var(--color-muted);\">4月4日至6日放假调休,共3天。4月7日(星期二)正常上课,请师生合理安排时间。</p>\n <a href=\"#\" class=\"inline-block mt-3 text-small font-semibold\" style=\"color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor;\">阅读全文 →</a>\n </div>\n </div>\n </article>\n </section>\n\n <!-- news-pagination -->\n <section id=\"news-pagination\" class=\"mt-10 flex flex-wrap items-center justify-center gap-2\">\n <button class=\"btn-secondary\" disabled aria-label=\"上一页\"><i class=\"fas fa-chevron-left mr-1\"></i> 上一页</button>\n <button class=\"page-item btn-primary\" aria-current=\"page\">1</button>\n <button class=\"page-item btn-ghost\">2</button>\n <button class=\"page-item btn-ghost\">3</button>\n <button class=\"page-item btn-ghost\">4</button>\n <button class=\"page-item btn-ghost\">5</button>\n <span class=\"text-small\" style=\"color: var(--color-muted);\">...</span>\n <button class=\"page-item btn-ghost\">8</button>\n <button class=\"btn-secondary\" aria-label=\"下一页\">下一页 <i class=\"fas fa-chevron-right ml-1\"></i></button>\n </section>\n </div>\n\n <script>\n // 分类切换过滤\n const filterTags = document.querySelectorAll('.filter-tag');\n const newsItems = document.querySelectorAll('#news-list article');\n const newsDividers = document.querySelectorAll('#news-list .news-divider');\n filterTags.forEach(tag => {\n tag.addEventListener('click', function() {\n filterTags.forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n const filter = this.dataset.filter;\n let index = 0;\n newsItems.forEach((item, i) => {\n const cat = item.dataset.category;\n const match = filter === 'all' || cat === filter;\n item.style.display = match ? '' : 'none';\n // 相邻的分隔线\n if (newsDividers[i]) {\n newsDividers[i].style.display = match ? '' : 'none';\n }\n });\n // 重新触发滚动动画（重置可见性）\n document.querySelectorAll('.scroll-reveal').forEach(el => {\n el.classList.remove('visible');\n if (el.style.display !== 'none') {\n // 稍后由 observer 检测\n }\n });\n // 手动触发一次 observer\n observer.disconnect();\n document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));\n });\n });\n\n // 滚动显示动画 (IntersectionObserver)\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));\n </script>\n</body>\n</html>"},"next":["添加热门标签侧边栏","适配深色模式","增加新闻详情弹窗","实现搜索过滤联动","接入真实API数据"],"breakpoint":"none","plan":{"planId":"a7b3e8c1-9d4f-4e2a-b6c0-1f8d3a5e7b9c","goal":"校园新闻列表组件,信息层级清晰,阅读体验流畅","audience":"在校大学生、教职工,习惯移动端浏览,追求快速获取信息","tone":"editorial-clean","type":"fullHTML","designTokens":{"style":{"name":"editorial-clean","mood":"calm","keywords":["editorial","clean","academic","readable","hierarchical"],"density":"comfortable","philosophy":"信息即界面:用排版与留白建立清晰阅读层级,不依赖装饰性元素"},"colors":{"primary":"#1a3a5c","secondary":"#2d5f8a","accent":"#c44536","success":"#2b7a4b","warning":"#d4a017","danger":"#c44536","info":"#3b82b0","background":"#f8f7f4","foreground":"#1a1a1a","card":"#ffffff","border":"#e2ddd6","muted":"#8a8580"},"cssVarPrefix":"--color-","colorRoles":{"primary":{"name":"深蓝","role":"标题、品牌色、重点链接"},"accent":{"name":"砖红","role":"日期标签、分类徽章、悬停高亮"}},"gradients":[{"name":"brand-glow","stops":"linear-gradient(135deg,#1a3a5c 0%,#2d5f8a 100%)","role":"分类标签背景"}],"states":{"hover":"#2d5f8a","active":"#0f2a44","focus":"#c44536","disabled":"#c4bfb8"},"fonts":{"heading":"Source Serif 4","body":"Source Sans 3","mono":"JetBrains Mono","display":"Source Serif 4","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60…;:{"heading":"'Source Serif 4', Georgia, 'Times New Roman', serif","body":"'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","mono":"'JetBrains Mono', 'SF Mono', Consolas, monospace"},"scale":{"display":{"size":"clamp(1.75rem, 3vw, 2.5rem)","weight":700,"lineHeight":"1.15","letterSpacing":"-0.01em"},"h1":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":600,"lineHeight":"1.2","letterSpacing":"-0.01em"},"h2":{"size":"clamp(1.25rem, 2vw, 1.75rem)","weight":600,"lineHeight":"1.25"},"h3":{"size":"1.125rem","weight":600,"lineHeight":"1.3"},"h4":{"size":"1rem","weight":500,"lineHeight":"1.4"},"body":{"size":"1rem","weight":400,"lineHeight":"1.65"},"small":{"size":"0.875rem","weight":400,"lineHeight":"1.5"},"caption":{"size":"0.75rem","weight":400,"lineHeight":"1.4","letterSpacing":"0.02em"},"button":{"size":"0.9rem","weight":600,"lineHeight":"1","letterSpacing":"0.02em"},"overline":{"size":"0.7rem","weight":600,"lineHeight":"1.2","letterSpacing":"0.08em"}},"lineHeight":{"tight":"1.15","base":"1.65","loose":"1.9"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=background padding=0.5rem 1rem radius=sm weight=600","hover":"bg=secondary shadow=sm","active":"bg=active","disabled":"opacity=0.4 cursor=not-allowed","focus":"ring=2px solid accent offset=2px","variants":{"primary":{"default":"bg=primary fg=background padding=0.5rem 1rem radius=sm weight=600","hover":"bg=secondary shadow=sm","active":"bg=active","focus":"ring=2px solid accent offset=2px","disabled":"opacity=0.4 cursor=not-allowed"},"secondary":{"default":"bg=card fg=foreground border=1px solid border padding=0.5rem 1rem radius=sm","hover":"bg=border","active":"bg=muted","focus":"ring=2px solid accent offset=2px","disabled":"opacity=0.4 cursor=not-allowed"},"ghost":{"default":"bg=transparent fg=foreground padding=0.5rem 1rem radius=sm","hover":"bg=border","active":"bg=muted","focus":"ring=2px solid accent offset=2px","disabled":"opacity=0.4 cursor=not-allowed"}}},"card":{"default":"bg=card shadow=sm radius=md padding=1.25rem border=1px solid border","hover":"shadow=md translateY=-2px border=1px solid primary/20"},"nav":{"default":"bg=background/90 backdrop-blur=8px height=3.5rem","scrolled":"bg=background shadow=sm","mobile":"drawer-from-left width=80vw"},"input":{"default":"bg=background fg=foreground border=1px solid border radius=sm padding=0.5rem 0.75rem","hover":"border=1px solid muted","focus":"border=1px solid primary ring=2px primary/20","error":"border=1px solid danger ring=2px danger/20","disabled":"opacity=0.4 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"960px","paddingX":"1.25rem"},"grid":{"columns":12,"gap":"1.25rem"}},"spacing":{"gutter":"1.25rem","sectionY":"3rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.25rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,20,24,32,48,64,96]},"shadow":{"sm":"0 1px 3px rgba(26,58,92,0.08)","md":"0 4px 12px rgba(26,58,92,0.1)","lg":"0 8px 24px rgba(26,58,92,0.12)","xl":"0 16px 48px rgba(26,58,92,0.15)"},"surfaces":{"base":"bg=background shadow=none","raised":"bg=card shadow=sm radius=md","overlay":"bg=card shadow=md radius=md","modal":"bg=card shadow=lg radius=lg"},"elevation":{"base":"none","raised":"sm","overlay":"md","modal":"lg"},"breakpoints":{"sm":"640px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"multi-col→single-col, list→stacked, sidebar→hidden","hidePriority":["sidebar-filters","decorative-thumbnail","secondary-meta"]},"radius":{"sm":"4px","md":"8px","lg":"16px","xl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"250ms ease-out","slow":"400ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"news-list-header","type":"feature-icon-list","purpose":"列表顶部标题区,包含分类筛选标签与搜索入口","elements":{"title":true,"subtitle":true,"filter_tags":true,"search_input":true},"copy":{"title":"校园新闻","subtitle":"聚焦学术动态、校园活动与师生故事","filter_all":"全部","filter_academic":"学术","filter_campus":"校园","filter_event":"活动","filter_announcement":"公告","search_placeholder":"搜索新闻..."},"interactions":["tab-switch","smooth-scroll-to-#news-list"],"notes":"分类标签默认选中'全部',点击切换触发新闻列表过滤"},{"id":"news-list","type":"blog-list","purpose":"新闻卡片列表,按时间倒序排列,每条包含缩略图、标题、摘要、日期与分类标签","elements":{"list_items":6,"thumbnail":true,"category_badge":true,"title":true,"summary":true,"date":true,"read_more":true},"copy":{"item_1_title":"计算机学院团队在国际顶级会议ACL 2026发表三篇论文","item_1_summary":"研究聚焦于低资源语言机器翻译与多模态语义理解,其中一篇获得最佳论文提名。","item_1_category":"学术","item_1_date":"2026年3月15日","item_1_read_more":"阅读全文","item_2_title":"春季校园招聘会将于4月10日举行,120家企业参会","item_2_summary":"涵盖互联网、金融、制造业等领域,提供超过2000个岗位,欢迎各年级同学参加。","item_2_category":"活动","item_2_date":"2026年3月12日","item_2_read_more":"阅读全文","item_3_title":"图书馆即日起开通夜间自习室,延长开放至凌晨1点","item_3_summary":"为满足期末复习需求,图书馆三层、四层自习区试行夜间开放,需提前预约座位。","item_3_category":"公告","item_3_date":"2026年3月10日","item_3_read_more":"阅读全文","item_4_title":"第38届校园文化艺术节开幕,首场音乐会座无虚席","item_4_summary":"本届艺术节以'青春·传承'为主题,将持续一个月,涵盖戏剧、舞蹈、美术等十余场活动。","item_4_category":"校园","item_4_date":"2026年3月8日","item_4_read_more":"阅读全文","item_5_title":"物理学院新实验楼竣工,配备亚洲领先的量子光学实验室","item_5_summary":"新实验楼总面积1.2万平方米,将支撑量子计算、凝聚态物理等前沿方向的研究。","item_5_category":"学术","item_5_date":"2026年3月5日","item_5_read_more":"阅读全文","item_6_title":"关于2026年清明节放假安排的通知","item_6_summary":"4月4日至6日放假调休,共3天。4月7日(星期二)正常上课,请师生合理安排时间。","item_6_category":"公告","item_6_date":"2026年3月3日","item_6_read_more":"阅读全文"},"interactions":["scroll-reveal"],"notes":"每条卡片悬停时轻微上移并加深边框色;缩略图使用纯色占位+文字标识,避免加载外部图片"},{"id":"news-pagination","type":"cta-banner","purpose":"列表底部分页导航,支持加载更多或页码切换","elements":{"page_numbers":true,"prev_button":true,"next_button":true},"copy":{"prev":"上一页","next":"下一页","page_current":"1","page_total":"8"},"interactions":["smooth-scroll-to-#news-list-header"],"notes":"当前页码高亮为primary色背景,其余页码为ghost样式"}],"rules":{"dos":["标题用衬线体 Source Serif 4 营造学术感,正文用无衬线 Source Sans 3 保证可读性","每条新闻卡片缩略图区域用纯色背景+文字标识(如'学术''活动')代替图片,保持视觉统一","分类标签使用圆角矩形徽章,accent色用于日期和分类标签,与深蓝标题形成冷暖对比","卡片悬停只动 shadow 和边框色,不动 transform 缩放,保持 editorial 风格的克制","列表项之间用 1.25rem 间距,每项底部用 border 分隔线,形成清晰的视觉节奏"],"donts":["不要使用紫色渐变或霓虹色,保持 academic 基调的深蓝+砖红配色","不要居中三列 feature 布局,新闻列表采用单列纵向排列,信息密度更集中","不要使用 Emoji 作为图标,分类标签用纯文字,避免视觉干扰","不要使用大字号 hero 标题,列表头部标题用 h2 即可,避免喧宾夺主","不要添加自动轮播或弹窗广告,保持 editorial 风格的安静阅读体验"]},"promptGuide":{"quickRef":"米白底+深蓝标题+砖红日期标签+衬线/无衬线搭配+单列纵向新闻流+克制阴影","examples":["用 editorial-clean 风格做一个校园活动日历组件","用相同设计语言做教授简介卡片列表","把新闻列表改成带侧边栏热门标签的版本"]}},"planReviews":[{"round":1,"ok":true}],"planId":"a7b3e8c1-9d4f-4e2a-b6c0-1f8d3a5e7b9c"}```
角色
assistant
content
total_tokens
15117
summary
根据蓝图生成校园新闻列表组件，含三个区块及交互
uiParsing
关闭