校园新闻列表页设计：7个区块布局实现

By admin, 23 May, 2026

角色

assistant

content

```json{"summary":"根据蓝图生成了校园新闻列表页，共7个区块","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 <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=…\">\n <link rel=\"preload\" as=\"font\" type=\"font/woff2\" crossorigin href=\"https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9…\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n /* ===== CSS Variables from DESIGN.md ===== */\n :root {\n --color-primary: #cc785c;\n --color-secondary: #5db8a6;\n --color-accent: #e8a55a;\n --color-success: #5db872;\n --color-warning: #d4a017;\n --color-danger: #c64545;\n --color-info: #5db8a6;\n --color-background: #faf9f5;\n --color-foreground: #141413;\n --color-card: #efe9de;\n --color-border: #e6dfd8;\n --color-muted: #6c6a64;\n --color-ink: #141413;\n --color-body: #3d3d3a;\n --color-body-strong: #252523;\n --color-muted-soft: #8e8b82;\n --color-hairline: #e6dfd8;\n --color-surface-soft: #f5f0e8;\n --color-surface-card: #efe9de;\n --color-surface-dark: #181715;\n --color-surface-dark-elevated: #252320;\n --color-on-primary: #ffffff;\n --color-on-dark: #faf9f5;\n --color-on-dark-soft: #a09d96;\n --color-primary-active: #a9583e;\n --color-primary-disabled: #e6dfd8;\n\n --state-hover: #a9583e;\n --state-active: #a9583e;\n --state-focus: #cc785c;\n --state-disabled: #e6dfd8;\n\n --radius-sm: 6px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-pill: 9999px;\n\n --shadow-sm: 0 1px 2px rgba(20,20,19,0.06);\n --shadow-md: 0 4px 12px rgba(20,20,19,0.08);\n --shadow-lg: 0 12px 32px rgba(20,20,19,0.10);\n --shadow-xl: 0 24px 64px rgba(20,20,19,0.14);\n\n --dur-micro: 100ms;\n --dur-base: 200ms;\n --dur-expressive: 320ms;\n --dur-deliberate: 480ms;\n --dur-exit: 140ms;\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);\n --ease-entering: cubic-bezier(0, 0, 0, 1);\n --ease-exiting: cubic-bezier(0.4, 0, 1, 1);\n --ease-spring: linear(0, 0.36 8%, 1 50%, 0.99 65%, 1);\n\n --stagger-list: 40ms;\n --stagger-grid: 60ms;\n }\n\n /* ===== Oklch wide-gamut override ===== */\n @supports (color: oklch(0 0 0)) {\n :root {\n --color-primary: oklch(0.62 0.12 35);\n --color-secondary: oklch(0.68 0.09 170);\n --color-accent: oklch(0.72 0.11 75);\n --state-hover: color-mix(in oklch, var(--color-primary) 88%, white 12%);\n --state-active: color-mix(in oklch, var(--color-primary) 88%, black 12%);\n --state-focus: var(--color-primary);\n }\n }\n\n /* ===== Font faces ===== */\n .font-heading {\n font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n font-weight: 400;\n font-variation-settings: 'wght' 400;\n font-feature-settings: 'ss01';\n }\n .font-body {\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-weight: 400;\n font-variation-settings: 'wght' 400;\n }\n .font-mono {\n font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;\n font-weight: 400;\n font-variation-settings: 'wght' 400;\n }\n\n /* ===== Typography scale ===== */\n .display-lg {\n font-size: clamp(1.75rem, 3.5vw, 2.5rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.03em;\n font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n font-variation-settings: 'wght' 400;\n }\n .h1 {\n font-size: clamp(1.75rem, 3.5vw, 2.5rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.03em;\n font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n font-variation-settings: 'wght' 400;\n }\n .h2 {\n font-size: clamp(1.5rem, 2.5vw, 2rem);\n font-weight: 400;\n line-height: 1.15;\n letter-spacing: -0.02em;\n font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n font-variation-settings: 'wght' 400;\n }\n .h3 {\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.2;\n letter-spacing: -0.01em;\n font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;\n font-variation-settings: 'wght' 400;\n }\n .h4 {\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.3;\n letter-spacing: 0;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n }\n .body-md {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.55;\n letter-spacing: 0;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 400;\n }\n .body-sm {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.55;\n letter-spacing: 0;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 400;\n }\n .caption {\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.4;\n letter-spacing: 0;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n }\n .overline {\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.4;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n }\n .button-label {\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n }\n\n /* ===== Tabular nums for dates ===== */\n .tabular-nums {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n }\n\n /* ===== Buttons ===== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n padding: 0.75rem 1.25rem;\n border-radius: var(--radius-md);\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n min-height: 44px;\n min-width: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);\n cursor: pointer;\n border: none;\n }\n .btn-primary:hover {\n background-color: var(--state-hover);\n transform: translateY(-1px);\n }\n .btn-primary:active {\n background-color: var(--state-active);\n transform: scale(0.97);\n }\n .btn-primary:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: var(--radius-md);\n }\n .btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--color-primary-disabled);\n color: var(--color-muted);\n transform: none;\n }\n\n .btn-secondary {\n background-color: var(--color-background);\n color: var(--color-ink);\n border: 1px solid var(--color-hairline);\n padding: 0.75rem 1.25rem;\n border-radius: var(--radius-md);\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n min-height: 44px;\n min-width: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);\n cursor: pointer;\n }\n .btn-secondary:hover {\n background-color: var(--color-surface-soft);\n transform: translateY(-1px);\n }\n .btn-secondary:active {\n transform: scale(0.97);\n }\n .btn-secondary:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: var(--radius-md);\n }\n .btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--color-hairline);\n color: var(--color-muted);\n transform: none;\n }\n\n .btn-ghost {\n background-color: transparent;\n color: var(--color-ink);\n padding: 0.5rem 0.75rem;\n border-radius: var(--radius-md);\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n min-height: 44px;\n min-width: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color var(--dur-base) var(--ease-standard);\n cursor: pointer;\n border: none;\n }\n .btn-ghost:hover {\n background-color: var(--color-surface-soft);\n }\n .btn-ghost:active {\n transform: scale(0.97);\n }\n .btn-ghost:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: var(--radius-md);\n }\n .btn-ghost:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--color-muted);\n }\n\n /* ===== Card hover ===== */\n .card-hover {\n transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);\n }\n .card-hover:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n }\n\n /* ===== Input ===== */\n .input-field {\n background-color: var(--color-background);\n color: var(--color-ink);\n border: 1px solid var(--color-hairline);\n border-radius: var(--radius-md);\n padding: 0.625rem 0.875rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.55;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 400;\n min-height: 44px;\n transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);\n outline: none;\n width: 100%;\n }\n .input-field:focus {\n border-color: var(--color-primary);\n box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);\n }\n .input-field:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .input-field.error {\n border-color: var(--color-danger);\n box-shadow: 0 0 0 3px rgba(198, 69, 69, 0.15);\n }\n\n /* ===== Category tab ===== */\n .category-tab {\n background-color: transparent;\n color: var(--color-muted);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n font-family: 'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-variation-settings: 'wght' 500;\n padding: 0.5rem 0.875rem;\n border-radius: var(--radius-md);\n transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);\n cursor: pointer;\n border: none;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .category-tab:hover {\n background-color: var(--color-surface-soft);\n color: var(--color-ink);\n }\n .category-tab:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: var(--radius-md);\n }\n .category-tab.active {\n background-color: var(--color-surface-card);\n color: var(--color-ink);\n }\n\n /* ===== Badges ===== */\n .badge-pill {\n background-color: var(--color-surface-card);\n color: var(--color-ink);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.4;\n border-radius: var(--radius-pill);\n padding: 0.25rem 0.75rem;\n display: inline-flex;\n align-items: center;\n }\n .badge-coral {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.4;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n border-radius: var(--radius-pill);\n padding: 0.25rem 0.75rem;\n display: inline-flex;\n align-items: center;\n }\n\n /* ===== Nav ===== */\n .top-nav {\n background-color: rgba(250, 249, 245, 0.8);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n height: 4rem;\n border-bottom: 1px solid var(--color-hairline);\n transition: box-shadow var(--dur-base) var(--ease-standard);\n }\n .top-nav.scrolled {\n box-shadow: var(--shadow-sm);\n }\n\n /* ===== Surfaces ===== */\n .surface-card {\n background-color: var(--color-surface-card);\n border-radius: var(--radius-lg);\n }\n .surface-dark {\n background-color: var(--color-surface-dark);\n }\n .surface-dark-elevated {\n background-color: var(--color-surface-dark-elevated);\n }\n\n /* ===== Hero gradient ===== */\n .hero-warm-glow {\n background: linear-gradient(135deg, #faf9f5 0%, #f5f0e8 50%, #efe9de 100%);\n }\n\n /* ===== Stagger animation ===== */\n .stagger-item {\n opacity: 0;\n transform: translateY(16px);\n animation: fadeUp var(--dur-expressive) var(--ease-standard) forwards;\n }\n @keyframes fadeUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ===== Skeleton shimmer ===== */\n .skeleton {\n background: linear-gradient(90deg, var(--color-surface-card) 25%, var(--color-surface-soft) 50%, var(--color-surface-card) 75%);\n background-size: 200% 100%;\n animation: shimmer 1200ms var(--ease-standard) infinite;\n border-radius: var(--radius-md);\n }\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n /* ===== Scroll-triggered reveal ===== */\n .reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity var(--dur-deliberate) var(--ease-emphasized), transform var(--dur-deliberate) var(--ease-emphasized);\n }\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ===== Focus-visible global ===== */\n *:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: inherit;\n }\n\n /* ===== Skip link ===== */\n .skip-link {\n position: absolute;\n top: -100%;\n left: 0;\n z-index: 100;\n padding: 0.5rem 1rem;\n background-color: var(--color-ink);\n color: var(--color-on-dark);\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 0 0 var(--radius-md) 0;\n transition: top var(--dur-base) var(--ease-standard);\n }\n .skip-link:focus {\n top: 0;\n }\n\n /* ===== Reduced motion ===== */\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n scroll-behavior: auto !important;\n }\n }\n\n /* ===== Responsive ===== */\n @media (max-width: 639px) {\n .hide-mobile { display: none !important; }\n .hero-grid { grid-template-columns: 1fr; }\n .featured-grid { grid-template-columns: 1fr; }\n .news-list-grid { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr; }\n }\n @media (min-width: 640px) and (max-width: 767px) {\n .hide-tablet { display: none !important; }\n .featured-grid { grid-template-columns: 1fr; }\n .news-list-grid { grid-template-columns: 1fr; }\n }\n @media (min-width: 768px) and (max-width: 1023px) {\n .featured-grid { grid-template-columns: 1fr 1fr; }\n .news-list-grid { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr 1fr; }\n }\n @media (min-width: 1024px) {\n .featured-grid { grid-template-columns: 1.5fr 1fr; }\n .news-list-grid { grid-template-columns: 1fr; }\n .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }\n }\n\n /* ===== Mobile drawer ===== */\n .mobile-drawer {\n position: fixed;\n top: 0;\n right: -100%;\n width: 85vw;\n max-width: 320px;\n height: 100dvh;\n background-color: var(--color-background);\n z-index: 50;\n transition: right var(--dur-expressive) var(--ease-emphasized);\n padding: 2rem 1.5rem;\n box-shadow: var(--shadow-lg);\n }\n .mobile-drawer.open {\n right: 0;\n }\n .drawer-overlay {\n position: fixed;\n inset: 0;\n background-color: rgba(20, 20, 19, 0.4);\n z-index: 49;\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--dur-base) var(--ease-standard);\n }\n .drawer-overlay.open {\n opacity: 1;\n pointer-events: auto;\n }\n\n /* ===== Empty state illustration ===== */\n .empty-illustration svg {\n stroke: var(--color-muted-soft);\n fill: none;\n stroke-width: 1.5;\n }\n </style>\n</head>\n<body class=\"bg-[#faf9f5] text-[#141413] font-body antialiased\" style=\"background-color: var(--color-background); color: var(--color-ink);\">\n\n \n <a href=\"#main\" class=\"skip-link\">跳到主内容</a>\n\n \n <header class=\"top-nav fixed top-0 left-0 right-0 z-40 flex items-center px-6\" style=\"padding-left: 1.5rem; padding-right: 1.5rem;\">\n <div class=\"flex items-center justify-between w-full max-w-[1200px] mx-auto\">\n \n <div class=\"flex items-center gap-2\">\n <span class=\"text-xl font-heading tracking-tight\" style=\"font-size: 1.25rem; letter-spacing: -0.03em;\">校园新闻</span>\n </div>\n\n \n <nav class=\"hidden md:flex items-center gap-1\" aria-label=\"主导航\">\n <a href=\"#\" class=\"category-tab active\" aria-current=\"page\">首页</a>\n <a href=\"#\" class=\"category-tab\">通知公告</a>\n <a href=\"#\" class=\"category-tab\">学术动态</a>\n <a href=\"#\" class=\"category-tab\">校园生活</a>\n <a href=\"#\" class=\"category-tab\">人物专访</a>\n </nav>\n\n \n <div class=\"flex items-center gap-3\">\n <button class=\"btn-ghost\" aria-label=\"搜索\">\n <i class=\"fa-solid fa-magnifying-glass\" style=\"font-size: 1rem;\"></i>\n </button>\n <button class=\"btn-primary hidden sm:inline-flex\">投稿</button>\n \n <button id=\"menuToggle\" class=\"md:hidden btn-ghost\" aria-label=\"打开菜单\" aria-expanded=\"false\">\n <i class=\"fa-solid fa-bars\" style=\"font-size: 1.25rem;\"></i>\n </button>\n </div>\n </div>\n </header>\n\n \n <div id=\"drawerOverlay\" class=\"drawer-overlay\"></div>\n\n \n <nav id=\"mobileDrawer\" class=\"mobile-drawer\" aria-label=\"移动端导航\">\n <div class=\"flex justify-end mb-6\">\n <button id=\"closeDrawer\" class=\"btn-ghost\" aria-label=\"关闭菜单\">\n <i class=\"fa-solid fa-xmark\" style=\"font-size: 1.25rem;\"></i>\n </button>\n </div>\n <div class=\"flex flex-col gap-2\">\n <a href=\"#\" class=\"category-tab active\" aria-current=\"page\">首页</a>\n <a href=\"#\" class=\"category-tab\">通知公告</a>\n <a href=\"#\" class=\"category-tab\">学术动态</a>\n <a href=\"#\" class=\"category-tab\">校园生活</a>\n <a href=\"#\" class=\"category-tab\">人物专访</a>\n <div class=\"mt-4 pt-4 border-t\" style=\"border-color: var(--color-hairline);\">\n <button class=\"btn-primary w-full\">投稿</button>\n </div>\n </div>\n </nav>\n\n <main id=\"main\" class=\"pt-16\">\n\n \n <section class=\"hero-warm-glow py-24 md:py-24\" style=\"padding-top: 6rem; padding-bottom: 6rem;\">\n <div class=\"max-w-[1200px] mx-auto px-6 text-center\">\n <h1 class=\"display-lg mb-4\" style=\"color: var(--color-ink);\">校园新闻</h1>\n <p class=\"body-md max-w-2xl mx-auto mb-8\" style=\"color: var(--color-body);\">聚焦学术前沿，记录校园点滴——每周为你精选值得关注的校园动态。</p>\n\n \n <div class=\"max-w-md mx-auto mb-10\">\n <div class=\"relative\">\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2\" style=\"color: var(--color-muted-soft); font-size: 0.875rem;\"></i>\n <input type=\"search\" class=\"input-field pl-10\" placeholder=\"搜索新闻标题、关键词…\" aria-label=\"搜索新闻\">\n </div>\n </div>\n\n \n <div class=\"flex flex-wrap justify-center gap-2\" role=\"tablist\" aria-label=\"新闻分类\">\n <button class=\"category-tab active\" role=\"tab\" aria-selected=\"true\">全部</button>\n <button class=\"category-tab\" role=\"tab\" aria-selected=\"false\">通知公告</button>\n <button class=\"category-tab\" role=\"tab\" aria-selected=\"false\">学术动态</button>\n <button class=\"category-tab\" role=\"tab\" aria-selected=\"false\">校园生活</button>\n <button class=\"category-tab\" role=\"tab\" aria-selected=\"false\">人物专访</button>\n </div>\n </div>\n </section>\n\n \n <section class=\"py-16 md:py-24\" style=\"padding-top: 4rem; padding-bottom: 4rem;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"featured-grid grid gap-6\">\n \n <article class=\"surface-card p-6 md:p-8 card-hover stagger-item\" style=\"--i: 0; animation-delay: calc(0 * 40ms);\" aria-label=\"置顶新闻\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"badge-coral\">置顶</span>\n <span class=\"badge-pill\">学术动态</span>\n </div>\n <h2 class=\"h3 mb-3\" style=\"color: var(--color-ink);\">我校计算机学院团队在国际顶会 ACL 2026 发表 5 篇论文</h2>\n <p class=\"body-md mb-4\" style=\"color: var(--color-body);\">自然语言处理方向取得突破性进展，其中一篇关于多模态语义对齐的研究被选为 oral 论文。</p>\n <div class=\"flex items-center gap-4 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span><i class=\"fa-regular fa-calendar mr-1\"></i>2026 年 1 月 18 日</span>\n <span><i class=\"fa-regular fa-user mr-1\"></i>通讯员：张明</span>\n </div>\n </article>\n\n \n <article class=\"surface-card p-6 md:p-8 card-hover stagger-item\" style=\"--i: 1; animation-delay: calc(1 * 40ms);\" aria-label=\"热门新闻\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"badge-coral\">热门</span>\n <span class=\"badge-pill\">校园生活</span>\n </div>\n <h2 class=\"h3 mb-3\" style=\"color: var(--color-ink);\">第 38 届校园文化艺术节开幕：30 场活动等你来</h2>\n <p class=\"body-md mb-4\" style=\"color: var(--color-body);\">本届艺术节以「融·合」为主题，涵盖戏剧、音乐、美术、舞蹈四大板块，持续三周。</p>\n <div class=\"flex items-center gap-4 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span><i class=\"fa-regular fa-calendar mr-1\"></i>2026 年 1 月 16 日</span>\n <span><i class=\"fa-regular fa-user mr-1\"></i>记者：李华</span>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n \n <section id=\"news-list\" class=\"py-16 md:py-24\" style=\"padding-top: 4rem; padding-bottom: 4rem; background-color: var(--color-background);\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <h2 class=\"h2 mb-8\" style=\"color: var(--color-ink);\">最新资讯</h2>\n\n <div class=\"news-list-grid grid gap-4\">\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 0; animation-delay: calc(0 * 40ms); background-color: var(--color-surface-card);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-newspaper\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">通知公告</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">关于 2025-2026 学年第二学期选课安排的通知</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">教务处发布下学期选课时间表：第一轮选课 2 月 10-14 日，第二轮补退选 2 月 24-28 日。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 15 日</span>\n <span>教务处</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 1; animation-delay: calc(1 * 40ms);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-user\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">人物专访</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">对话陈思远教授：从实验室到产业化的十年之路</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">材料学院陈思远教授团队研发的新型柔性电池材料获国家技术发明二等奖，我们与他聊了聊背后的故事。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 14 日</span>\n <span>学生记者团</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 2; animation-delay: calc(2 * 40ms); background-color: var(--color-surface-card);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-building\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">校园生活</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">图书馆延长开放时间：期末季每日 7:00-23:00</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">为满足期末复习需求，图书馆自即日起延长开放时间，并增设 24 小时自习室座位 200 个。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 12 日</span>\n <span>图书馆</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 3; animation-delay: calc(3 * 40ms);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-flask\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">学术动态</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">经济学院举办「数字经济与绿色发展」国际研讨会</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">来自 12 个国家的 30 余位学者参会，围绕碳交易市场、绿色金融等议题展开深入讨论。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 10 日</span>\n <span>经济学院</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 4; animation-delay: calc(4 * 40ms); background-color: var(--color-surface-card);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-clock\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">通知公告</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">2026 年寒假后勤服务安排一览</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">食堂、浴室、校医院、班车等后勤服务寒假期间运行时间调整，请师生留意。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 8 日</span>\n <span>后勤管理处</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"flex gap-4 md:gap-6 p-4 md:p-6 rounded-xl card-hover stagger-item\" style=\"--i: 5; animation-delay: calc(5 * 40ms);\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 flex-shrink-0 rounded-xl overflow-hidden\" style=\"background-color: var(--color-surface-soft); aspect-ratio: 1/1;\">\n <div class=\"w-full h-full flex items-center justify-center\" style=\"color: var(--color-muted-soft);\">\n <i class=\"fa-regular fa-image\" style=\"font-size: 1.5rem;\"></i>\n </div>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"badge-pill\">校园生活</span>\n </div>\n <h3 class=\"h4 mb-1 truncate\" style=\"color: var(--color-ink);\">摄影社年度作品展：「取景框里的四季」开展</h3>\n <p class=\"body-sm mb-2 line-clamp-2\" style=\"color: var(--color-body);\">展览汇集 42 幅优秀学生摄影作品，记录校园春樱、夏荷、秋叶、冬雪的四时之美。</p>\n <div class=\"flex items-center gap-3 caption tabular-nums\" style=\"color: var(--color-muted);\">\n <span>1 月 6 日</span>\n <span>摄影社</span>\n </div>\n </div>\n </article>\n </div>\n\n \n <nav class=\"flex items-center justify-center gap-4 mt-12\" aria-label=\"分页导航\">\n <button class=\"btn-secondary\" disabled aria-label=\"上一页\">\n <i class=\"fa-solid fa-chevron-left mr-2\"></i>上一页\n </button>\n <span class=\"caption tabular-nums\" style=\"color: var(--color-muted);\">\n 第 <span style=\"color: var(--color-ink); font-weight: 600;\">1</span> / 12 页\n </span>\n <button class=\"btn-primary\" aria-label=\"下一页\">\n 下一页<i class=\"fa-solid fa-chevron-right ml-2\"></i>\n </button>\n </nav>\n </div>\n </section>\n\n \n <section class=\"py-16 md:py-24\" style=\"padding-top: 4rem; padding-bottom: 4rem;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"rounded-xl p-8 md:p-12 text-center\" style=\"background-color: var(--color-primary); color: var(--color-on-primary);\">\n <h2 class=\"h2 mb-3\" style=\"color: var(--color-on-primary);\">订阅校园新闻周刊</h2>\n <p class=\"body-md mb-6 max-w-md mx-auto\" style=\"color: var(--color-on-primary); opacity: 0.9;\">每周五精选 5 条必读校园动态，直达你的邮箱。</p>\n <form class=\"flex flex-col sm:flex-row gap-3 max-w-md mx-auto\" onsubmit=\"event.preventDefault(); alert('订阅成功！');\">\n <input type=\"email\" class=\"input-field flex-1\" placeholder=\"输入你的学校邮箱\" aria-label=\"邮箱地址\" required style=\"background-color: var(--color-background); color: var(--color-ink);\">\n <button type=\"submit\" class=\"btn-primary\" style=\"background-color: var(--color-ink); color: var(--color-on-dark);\">立即订阅</button>\n </form>\n </div>\n </div>\n </section>\n\n \n <footer class=\"surface-dark py-16\" style=\"padding-top: 4rem; padding-bottom: 4rem;\">\n <div class=\"max-w-[1200px] mx-auto px-6\">\n <div class=\"footer-grid grid gap-8\">\n \n <div>\n <h3 class=\"h4 mb-4\" style=\"color: var(--color-on-dark);\">校园新闻</h3>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">党委宣传部主办 · 校园官方新闻平台</p>\n </div>\n\n \n <div>\n <h4 class=\"caption mb-4\" style=\"color: var(--color-on-dark-soft); text-transform: uppercase; letter-spacing: 0.1em;\">栏目</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark); transition: color var(--dur-base) var(--ease-standard);\">通知公告</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">学术动态</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">校园生活</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">人物专访</a></li>\n </ul>\n </div>\n\n \n <div>\n <h4 class=\"caption mb-4\" style=\"color: var(--color-on-dark-soft); text-transform: uppercase; letter-spacing: 0.1em;\">关于</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">关于我们</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">投稿指南</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">联系方式</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">隐私政策</a></li>\n </ul>\n </div>\n\n \n <div>\n <h4 class=\"caption mb-4\" style=\"color: var(--color-on-dark-soft); text-transform: uppercase; letter-spacing: 0.1em;\">合作</h4>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">校宣传部</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">学生会</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">研究生会</a></li>\n <li><a href=\"#\" class=\"body-sm\" style=\"color: var(--color-on-dark);\">校友会</a></li>\n </ul>\n </div>\n </div>\n\n \n <div class=\"mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4\" style=\"border-top: 1px solid var(--color-surface-dark-elevated);\">\n <div class=\"flex items-center gap-4\">\n <a href=\"#\" class=\"btn-ghost\" aria-label=\"微信公众号\" style=\"color: var(--color-on-dark-soft); min-height: 44px; min-width: 44px;\">\n <i class=\"fa-brands fa-weixin\" style=\"font-size: 1.25rem;\"></i>\n </a>\n <a href=\"#\" class=\"btn-ghost\" aria-label=\"官方微博\" style=\"color: var(--color-on-dark-soft); min-height: 44px; min-width: 44px;\">\n <i class=\"fa-brands fa-weibo\" style=\"font-size: 1.25rem;\"></i>\n </a>\n </div>\n <p class=\"body-sm\" style=\"color: var(--color-on-dark-soft);\">© 2026 校园新闻 · 党委宣传部主办</p>\n </div>\n </div>\n </footer>\n\n </main>\n\n \n <div id=\"emptyState\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(250, 249, 245, 0.95);\">\n <div class=\"text-center p-8 max-w-md\">\n <div class=\"empty-illustration mb-6\">\n <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"20\" y=\"30\" width=\"80\" height=\"60\" rx=\"8\" stroke=\"currentColor\" fill=\"none\"/>\n <line x1=\"35\" y1=\"50\" x2=\"85\" y2=\"50\" stroke=\"currentColor\"/>\n <line x1=\"35\" y1=\"62\" x2=\"70\" y2=\"62\" stroke=\"currentColor\"/>\n <line x1=\"35\" y1=\"74\" x2=\"60\" y2=\"74\" stroke=\"currentColor\"/>\n <circle cx=\"90\" cy=\"90\" r=\"20\" stroke=\"currentColor\" fill=\"none\"/>\n <line x1=\"105\" y1=\"105\" x2=\"115\" y2=\"115\" stroke=\"currentColor\" stroke-width=\"2\"/>\n </svg>\n </div>\n <h3 class=\"h3 mb-2\" style=\"color: var(--color-ink);\">暂无新闻</h3>\n <p class=\"body-md mb-6\" style=\"color: var(--color-body);\">当前分类下还没有新闻内容，试试切换其他分类或稍后再来。</p>\n <button class=\"btn-primary\" onclick=\"document.getElementById('emptyState').classList.add('hidden')\">查看全部新闻</button>\n </div>\n </div>\n\n \n <div id=\"errorState\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(250, 249, 245, 0.95);\">\n <div class=\"text-center p-8 max-w-md\">\n <div class=\"mb-6\" style=\"color: var(--color-danger);\">\n <i class=\"fa-solid fa-triangle-exclamation\" style=\"font-size: 3rem;\"></i>\n </div>\n <h3 class=\"h3 mb-2\" style=\"color: var(--color-ink);\">新闻加载失败</h3>\n <p class=\"body-md mb-6\" style=\"color: var(--color-body);\">网络连接似乎出现了问题，请检查网络后重试。</p>\n <button class=\"btn-primary\" onclick=\"window.location.reload()\" aria-label=\"重试\">重试</button>\n </div>\n </div>\n\n \n <div id=\"loadingState\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(250, 249, 245, 0.95);\">\n <div class=\"w-full max-w-lg p-8\">\n <div class=\"skeleton h-8 w-3/4 mb-4\"></div>\n <div class=\"skeleton h-4 w-full mb-2\"></div>\n <div class=\"skeleton h-4 w-5/6 mb-6\"></div>\n <div class=\"skeleton h-20 w-full mb-3\"></div>\n <div class=\"skeleton h-20 w-full mb-3\"></div>\n <div class=\"skeleton h-20 w-full\"></div>\n </div>\n </div>\n\n <script>\n // ===== Mobile drawer =====\n const menuToggle = document.getElementById('menuToggle');\n const closeDrawer = document.getElementById('closeDrawer');\n const mobileDrawer = document.getElementById('mobileDrawer');\n const drawerOverlay = document.getElementById('drawerOverlay');\n\n function openDrawer() {\n mobileDrawer.classList.add('open');\n drawerOverlay.classList.add('open');\n menuToggle.setAttribute('aria-expanded', 'true');\n document.body.style.overflow = 'hidden';\n }\n\n function closeDrawerFn() {\n mobileDrawer.classList.remove('open');\n drawerOverlay.classList.remove('open');\n menuToggle.setAttribute('aria-expanded', 'false');\n document.body.style.overflow = '';\n }\n\n menuToggle.addEventListener('click', openDrawer);\n closeDrawer.addEventListener('click', closeDrawerFn);\n drawerOverlay.addEventListener('click', closeDrawerFn);\n\n // ===== Nav scroll shadow =====\n const nav = document.querySelector('.top-nav');\n window.addEventListener('scroll', function() {\n if (window.scrollY > 10) {\n nav.classList.add('scrolled');\n } else {\n nav.classList.remove('scrolled');\n }\n });\n\n // ===== Category tab switching =====\n const tabs = document.querySelectorAll('[role=\"tab\"]');\n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n tabs.forEach(t => {\n t.classList.remove('active');\n t.setAttribute('aria-selected', 'false');\n });\n this.classList.add('active');\n this.setAttribute('aria-selected', 'true');\n });\n });\n\n // ===== Scroll reveal with IntersectionObserver =====\n const revealElements = document.querySelectorAll('.stagger-item, .reveal');\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.1, rootMargin: '0px 0px -50px 0px' });\n\n revealElements.forEach(el => observer.observe(el));\n\n // ===== Smooth scroll for nav links =====\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n const href = this.getAttribute('href');\n if (href && href !== '#') {\n e.preventDefault();\n const target = document.querySelector(href);\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }\n });\n });\n\n // ===== Demo: show empty state on double-click hero title =====\n document.querySelector('.display-lg')?.addEventListener('dblclick', function() {\n document.getElementById('emptyState').classList.remove('hidden');\n });\n\n // ===== Demo: show error state on triple-click hero subtitle =====\n document.querySelector('.hero-warm-glow p')?.addEventListener('click', function(e) {\n if (e.detail === 3) {\n document.getElementById('errorState').classList.remove('hidden');\n }\n });\n\n // ===== Demo: show loading state on keypress 'l' =====\n document.addEventListener('keydown', function(e) {\n if (e.key === 'l' || e.key === 'L') {\n document.getElementById('loadingState').classList.remove('hidden');\n setTimeout(() => {\n document.getElementById('loadingState').classList.add('hidden');\n }, 3000);\n }\n });\n </script>\n</body>\n</html>"},"next":["添加新闻详情页","优化搜索功能","增加暗色模式","添加评论模块","完善分类筛选"],"breakpoint":"none","plan":{"planId":"7a1e3c5f-8d2b-4e9a-b6c1-0f4d8e2a7b3c","goal":"校园新闻列表页，快速浏览与筛选","audience":"在校师生、校友及关注校园动态的访客","tone":"editorial-warm","type":"fullHTML","designTokens":{"style":{"name":"editorial-warm","mood":"calm","keywords":["warm cream","serif headlines","coral accent","editorial pacing","campus"],"density":"comfortable","philosophy":"奶油画布为底、衬线标题定调、珊瑚色点睛——让校园新闻读起来像一本文学刊物。"},"colors":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","success":"#5db872","warning":"#d4a017","danger":"#c64545","info":"#5db8a6","background":"#faf9f5","foreground":"#141413","card":"#efe9de","border":"#e6dfd8","muted":"#6c6a64"},"cssVarPrefix":"--color-","states":{"hover":"#a9583e","active":"#a9583e","focus":"#cc785c","disabled":"#e6dfd8"},"colorsOklch":{"primary":"oklch(0.62 0.12 35)","secondary":"oklch(0.68 0.09 170)","accent":"oklch(0.72 0.11 75)"},"colorSpaces":{"fallback":"hex","preferred":"oklch","stateMixing":"color-mix(in oklch, base, mod 12%)"},"colorRoles":{"primary":{"name":"Claude Coral","role":"CTA & focus rings & callout cards"},"accent":{"name":"Warm Amber","role":"category badges & inline highlights"}},"gradients":[{"name":"hero-warm-glow","stops":"linear-gradient(135deg, #faf9f5 0%, #f5f0e8 50%, #efe9de 100%)","role":"hero section background"}],"fonts":{"heading":"Copernicus, Tiempos Headline, serif","body":"StyreneB, Inter, sans-serif","mono":"JetBrains Mono, ui-monospace, monospace","display":"Copernicus, Tiempos Headline, serif","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=…;:{"heading":"'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif","body":"'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","mono":"'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace"},"variableAxes":{"body":{"wght":[400,600]}},"features":{"tabularNums":["price","metric","time","date"],"stylisticSet":{"heading":"ss01"},"ligatures":"common-only"},"loading":{"display":"swap","preload":["heading","body"],"selfHost":"recommended"},"scale":{"display":{"size":"clamp(2rem, 4.5vw, 3.5rem)","weight":400,"lineHeight":1.05,"letterSpacing":"-0.04em"},"h1":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":400,"lineHeight":1.1,"letterSpacing":"-0.03em"},"h2":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":400,"lineHeight":1.15,"letterSpacing":"-0.02em"},"h3":{"size":"1.25rem","weight":400,"lineHeight":1.2,"letterSpacing":"-0.01em"},"h4":{"size":"1.125rem","weight":500,"lineHeight":1.3,"letterSpacing":"0"},"body":{"size":"1rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"small":{"size":"0.875rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"caption":{"size":"0.8125rem","weight":500,"lineHeight":1.4,"letterSpacing":"0"},"button":{"size":"0.875rem","weight":500,"lineHeight":1,"letterSpacing":"0"},"overline":{"size":"0.75rem","weight":500,"lineHeight":1.4,"letterSpacing":"0.1em"}},"lineHeight":{"tight":"1.1","base":"1.55","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem","hover":"bg=#a9583e translateY=-1px","active":"bg=#a9583e translateY=0","disabled":"opacity=0.5 cursor=not-allowed bg=#e6dfd8 fg=#6c6a64","focus":"ring=2px solid #cc785c offset=2px","variants":{"primary":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#a9583e","focus":"ring=2px solid #cc785c offset=2px"},"secondary":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#f5f0e8","focus":"ring=2px solid #cc785c offset=2px"}}},"card":{"default":"bg=#efe9de radius=12px padding=1.5rem","hover":"translateY=-2px"},"nav":{"default":"bg=#faf9f5/80 backdrop-blur=12px height=4rem","scrolled":"bg=#faf9f5 shadow=sm","mobile":"drawer-from-right width=85vw bg=#faf9f5"},"input":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 radius=8px padding=0.625rem 0.875rem","focus":"border=1px solid #cc785c ring=3px rgba(204,120,92,0.15)","error":"border=1px solid #c64545 ring=3px rgba(198,69,69,0.15)","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 2px rgba(20,20,19,0.06)","md":"0 4px 12px rgba(20,20,19,0.08)","lg":"0 12px 32px rgba(20,20,19,0.10)","xl":"0 24px 64px rgba(20,20,19,0.14)"},"surfaces":{"base":"bg=#faf9f5 shadow=none","raised":"bg=#efe9de shadow=sm radius=12px","overlay":"bg=#faf9f5 shadow=md radius=12px","modal":"bg=#faf9f5 shadow=lg radius=16px"},"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":"sidebar→drawer, multi-col→single-col, table→card-list","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"motion":{"duration":{"instant":"0ms","micro":"100ms","base":"200ms","expressive":"320ms","deliberate":"480ms","exit":"140ms"},"easing":{"standard":"cubic-bezier(0.2, 0, 0, 1)","emphasized":"cubic-bezier(0.3, 0, 0, 1)","entering":"cubic-bezier(0, 0, 0, 1)","exiting":"cubic-bezier(0.4, 0, 1, 1)","spring":"linear(0, 0.36 8%, 1 50%, 0.99 65%, 1)"},"stagger":{"list":"40ms","grid":"60ms"},"scale":{"press":0.97,"hover":1.02,"popIn":0.92},"scrollTimeline":{"enabled":true,"thresholdEntry":"30% 0%"},"reducedMotion":{"duration":"1ms","transform":"none","preserve":["opacity","color"]}},"theming":{"defaultMode":"light","modes":["light","dark"],"colorsByMode":{"dark":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","background":"#181715","foreground":"#faf9f5","card":"#252320","border":"#3d3d3a","muted":"#a09d96"}},"switchStrategy":"media-then-attribute"},"a11y":{"focusRing":{"width":"2px","style":"solid","color":"var(--color-primary)","offset":"2px","radius":"inherit"},"minContrast":{"text":"4.5:1","uiComponent":"3:1","premium":"7:1"},"supportedTextScale":[1,1.25,1.5,2],"minTouchTarget":"44px","minTouchSpacing":"8px","skipLinkRequired":true,"headingHierarchy":"strict"},"iconography":{"set":"lucide","style":"outline","stroke":"1.5px","size":{"sm":"16px","md":"20px","lg":"24px"},"alignment":"baseline","expandHit":"44px","noEmoji":true},"radius":{"sm":"6px","md":"8px","lg":"12px","xl":"16px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航，包含校园品牌标识与主菜单","elements":{"brand":true,"nav_links":true,"cta_primary":true,"search_icon":true},"copy":{"brand":"校园新闻","link_1":"首页","link_2":"通知公告","link_3":"学术动态","link_4":"校园生活","link_5":"人物专访","cta_primary":"投稿"},"interactions":["smooth-scroll-to-#news-list","mobile-menu-toggle"],"notes":"奶油色导航栏，右侧搜索图标 + 珊瑚色'投稿'按钮"},{"id":"hero","type":"hero-centered","purpose":"新闻列表页标题区，展示当前栏目与搜索入口","elements":{"title":true,"subtitle":true,"search_bar":true,"category_tabs":true,"visual_hint":"warm gradient background with subtle line-art campus illustration"},"copy":{"title":"校园新闻","title_accent":"","subtitle":"聚焦学术前沿，记录校园点滴——每周为你精选值得关注的校园动态。","search_placeholder":"搜索新闻标题、关键词…","tab_all":"全部","tab_notice":"通知公告","tab_academic":"学术动态","tab_campus":"校园生活","tab_people":"人物专访"},"interactions":["tab-switch"],"notes":"居中布局，标题用 Copernicus serif display-lg，下方分类 tab 用 category-tab 组件"},{"id":"featured-news","type":"feature-grid","purpose":"头条/置顶新闻卡片，视觉突出展示 1~2 条重要新闻","elements":{"featured_card_1":true,"featured_card_2":true,"badge":true},"copy":{"featured_1_badge":"置顶","featured_1_category":"学术动态","featured_1_title":"我校计算机学院团队在国际顶会 ACL 2026 发表 5 篇论文","featured_1_desc":"自然语言处理方向取得突破性进展，其中一篇关于多模态语义对齐的研究被选为 oral 论文。","featured_1_date":"2026 年 1 月 18 日","featured_1_author":"通讯员：张明","featured_2_badge":"热门","featured_2_category":"校园生活","featured_2_title":"第 38 届校园文化艺术节开幕：30 场活动等你来","featured_2_desc":"本届艺术节以「融·合」为主题，涵盖戏剧、音乐、美术、舞蹈四大板块，持续三周。","featured_2_date":"2026 年 1 月 16 日","featured_2_author":"记者：李华"},"interactions":["scroll-reveal"],"notes":"2-up 网格，左侧大卡片用 surface-card 背景，右侧稍小。置顶/热门用 badge-coral"},{"id":"news-list","type":"blog-list","purpose":"新闻列表主体，按时间倒序排列，每项含缩略图、标题、摘要、元信息","elements":{"list_items":true,"pagination":true,"thumbnail":true},"copy":{"list_title":"最新资讯","item_1_category":"通知公告","item_1_title":"关于 2025-2026 学年第二学期选课安排的通知","item_1_desc":"教务处发布下学期选课时间表：第一轮选课 2 月 10-14 日，第二轮补退选 2 月 24-28 日。","item_1_date":"1 月 15 日","item_1_author":"教务处","item_2_category":"人物专访","item_2_title":"对话陈思远教授：从实验室到产业化的十年之路","item_2_desc":"材料学院陈思远教授团队研发的新型柔性电池材料获国家技术发明二等奖，我们与他聊了聊背后的故事。","item_2_date":"1 月 14 日","item_2_author":"学生记者团","item_3_category":"校园生活","item_3_title":"图书馆延长开放时间：期末季每日 7:00-23:00","item_3_desc":"为满足期末复习需求，图书馆自即日起延长开放时间，并增设 24 小时自习室座位 200 个。","item_3_date":"1 月 12 日","item_3_author":"图书馆","item_4_category":"学术动态","item_4_title":"经济学院举办「数字经济与绿色发展」国际研讨会","item_4_desc":"来自 12 个国家的 30 余位学者参会，围绕碳交易市场、绿色金融等议题展开深入讨论。","item_4_date":"1 月 10 日","item_4_author":"经济学院","item_5_category":"通知公告","item_5_title":"2026 年寒假后勤服务安排一览","item_5_desc":"食堂、浴室、校医院、班车等后勤服务寒假期间运行时间调整，请师生留意。","item_5_date":"1 月 8 日","item_5_author":"后勤管理处","item_6_category":"校园生活","item_6_title":"摄影社年度作品展：「取景框里的四季」开展","item_6_desc":"展览汇集 42 幅优秀学生摄影作品，记录校园春樱、夏荷、秋叶、冬雪的四时之美。","item_6_date":"1 月 6 日","item_6_author":"摄影社","pagination_prev":"上一页","pagination_next":"下一页","pagination_current":"1","pagination_total":"12"},"interactions":["scroll-reveal"],"notes":"列表每项左侧缩略图（圆角 xl 16px），右侧标题 h3 + 摘要 body + 底部分类标签 + 日期作者。分页在底部。"},{"id":"newsletter-cta","type":"cta-banner","purpose":"订阅校园新闻推送，保持用户回访","elements":{"title":true,"subtitle":true,"email_input":true,"cta_primary":true},"copy":{"title":"订阅校园新闻周刊","subtitle":"每周五精选 5 条必读校园动态，直达你的邮箱。","email_placeholder":"输入你的学校邮箱","cta_primary":"立即订阅"},"interactions":[],"notes":"珊瑚色全宽 callout-card-coral，白色文字，输入框用 cream 背景"},{"id":"footer","type":"footer-columns","purpose":"站点地图 + 版权信息 + 社交媒体链接","elements":{"brand":true,"col_1":true,"col_2":true,"col_3":true,"social_links":true,"copyright":true},"copy":{"brand":"校园新闻","col_1_title":"栏目","col_1_link_1":"通知公告","col_1_link_2":"学术动态","col_1_link_3":"校园生活","col_1_link_4":"人物专访","col_2_title":"关于","col_2_link_1":"关于我们","col_2_link_2":"投稿指南","col_2_link_3":"联系方式","col_2_link_4":"隐私政策","col_3_title":"合作","col_3_link_1":"校宣传部","col_3_link_2":"学生会","col_3_link_3":"研究生会","col_3_link_4":"校友会","copyright":"© 2026 校园新闻 · 党委宣传部主办","social_wechat":"微信公众号","social_weibo":"官方微博"},"interactions":[],"notes":"深色 footer（surface-dark #181715），文字 on-dark-soft，4 列布局"}],"rules":{"dos":["每页以奶油色 canvas (#faf9f5) 为底，纯白色会破坏品牌辨识度","新闻标题用 Copernicus serif 400 weight + 负字距，正文用 StyreneB/Inter 400","珊瑚色 (#cc785c) 仅用于 CTA 按钮和置顶/热门 badge，不滥用","卡片背景用 surface-card (#efe9de) 与 canvas 形成层次，不用阴影制造深度","列表项交替使用 cream card 与纯 canvas 背景，形成阅读节奏"],"donts":["不要用冷灰色或纯白做页面背景——奶油色是品牌底色","不要加粗衬线标题——Copernicus 700 显得浮夸，系统只用 400","不要使用蓝色或青色作为品牌点缀——珊瑚色是品牌电压","不要把珊瑚色铺满页面——珊瑚在单个元素上稀缺，只在全宽 callout 卡上慷慨使用","不要用 Inter 做标题——衬线字体是品牌声音的核心","不要连续两个区块使用同一种表面模式——奶油→卡片→深色→珊瑚→深色 footer 交替才是节奏"]},"promptGuide":{"quickRef":"奶油画布 + 珊瑚 CTA + Copernicus 衬线标题 + StyreneB 正文 + 深色产品卡片交替节奏","examples":["用 Claude 风格做个校园活动日历页","用奶油+珊瑚配色设计一个学术会议日程表","用 editorial-warm 风格做教授简介卡片组件","用 Claude 设计系统做图书馆开放时间公告板"]},"states":{"loading":{"type":"skeleton","shimmer":true,"duration":"1200ms"},"empty":{"illustration":"monoline","title":"暂无新闻","body":"当前分类下还没有新闻内容，试试切换其他分类或稍后再来。","action":{"label":"查看全部新闻","intent":"primary"}},"error":{"icon":"alert-triangle","title":"新闻加载失败","body":"网络连接似乎出现了问题，请检查网络后重试。","retry":true}},"personality":{"voice":"温润学院派","humorLevel":2,"formalityLevel":6,"exclamationAllowed":false,"brandVoiceKeywords":["scholarly","warm","direct","trustworthy"]}},"originalPlan":{"planId":"7a1e3c5f-8d2b-4e9a-b6c1-0f4d8e2a7b3c","goal":"校园新闻列表页，快速浏览与筛选","audience":"在校师生、校友及关注校园动态的访客","tone":"editorial-warm","type":"fullHTML","designTokens":{"style":{"name":"editorial-warm","mood":"calm","keywords":["warm cream","serif headlines","coral accent","editorial pacing","campus"],"density":"comfortable","philosophy":"奶油画布为底、衬线标题定调、珊瑚色点睛——让校园新闻读起来像一本文学刊物。"},"colors":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","success":"#5db872","warning":"#d4a017","danger":"#c64545","info":"#5db8a6","background":"#faf9f5","foreground":"#141413","card":"#efe9de","border":"#e6dfd8","muted":"#6c6a64"},"cssVarPrefix":"--color-","states":{"hover":"#a9583e","active":"#a9583e","focus":"#cc785c","disabled":"#e6dfd8"},"colorsOklch":{"primary":"oklch(0.62 0.12 35)","secondary":"oklch(0.68 0.09 170)","accent":"oklch(0.72 0.11 75)"},"colorSpaces":{"fallback":"hex","preferred":"oklch","stateMixing":"color-mix(in oklch, base, mod 12%)"},"colorRoles":{"primary":{"name":"Claude Coral","role":"CTA & focus rings & callout cards"},"accent":{"name":"Warm Amber","role":"category badges & inline highlights"}},"gradients":[{"name":"hero-warm-glow","stops":"linear-gradient(135deg, #faf9f5 0%, #f5f0e8 50%, #efe9de 100%)","role":"hero section background"}],"fonts":{"heading":"Copernicus, Tiempos Headline, serif","body":"StyreneB, Inter, sans-serif","mono":"JetBrains Mono, ui-monospace, monospace","display":"Copernicus, Tiempos Headline, serif","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=…;:{"heading":"'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif","body":"'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","mono":"'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace"},"variableAxes":{"body":{"wght":[400,600]}},"features":{"tabularNums":["price","metric","time","date"],"stylisticSet":{"heading":"ss01"},"ligatures":"common-only"},"loading":{"display":"swap","preload":["heading","body"],"selfHost":"recommended"},"scale":{"display":{"size":"clamp(2rem, 4.5vw, 3.5rem)","weight":400,"lineHeight":1.05,"letterSpacing":"-0.04em"},"h1":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":400,"lineHeight":1.1,"letterSpacing":"-0.03em"},"h2":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":400,"lineHeight":1.15,"letterSpacing":"-0.02em"},"h3":{"size":"1.25rem","weight":400,"lineHeight":1.2,"letterSpacing":"-0.01em"},"h4":{"size":"1.125rem","weight":500,"lineHeight":1.3,"letterSpacing":"0"},"body":{"size":"1rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"small":{"size":"0.875rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"caption":{"size":"0.8125rem","weight":500,"lineHeight":1.4,"letterSpacing":"0"},"button":{"size":"0.875rem","weight":500,"lineHeight":1,"letterSpacing":"0"},"overline":{"size":"0.75rem","weight":500,"lineHeight":1.4,"letterSpacing":"0.1em"}},"lineHeight":{"tight":"1.1","base":"1.55","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem","hover":"bg=#a9583e translateY=-1px","active":"bg=#a9583e translateY=0","disabled":"opacity=0.5 cursor=not-allowed bg=#e6dfd8 fg=#6c6a64","focus":"ring=2px solid #cc785c offset=2px","variants":{"primary":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#a9583e","focus":"ring=2px solid #cc785c offset=2px"},"secondary":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#f5f0e8","focus":"ring=2px solid #cc785c offset=2px"}}},"card":{"default":"bg=#efe9de radius=12px padding=1.5rem","hover":"translateY=-2px"},"nav":{"default":"bg=#faf9f5/80 backdrop-blur=12px height=4rem","scrolled":"bg=#faf9f5 shadow=sm","mobile":"drawer-from-right width=85vw bg=#faf9f5"},"input":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 radius=8px padding=0.625rem 0.875rem","focus":"border=1px solid #cc785c ring=3px rgba(204,120,92,0.15)","error":"border=1px solid #c64545 ring=3px rgba(198,69,69,0.15)","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 2px rgba(20,20,19,0.06)","md":"0 4px 12px rgba(20,20,19,0.08)","lg":"0 12px 32px rgba(20,20,19,0.10)","xl":"0 24px 64px rgba(20,20,19,0.14)"},"surfaces":{"base":"bg=#faf9f5 shadow=none","raised":"bg=#efe9de shadow=sm radius=12px","overlay":"bg=#faf9f5 shadow=md radius=12px","modal":"bg=#faf9f5 shadow=lg radius=16px"},"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":"sidebar→drawer, multi-col→single-col, table→card-list","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"motion":{"duration":{"instant":"0ms","micro":"100ms","base":"200ms","expressive":"320ms","deliberate":"480ms","exit":"140ms"},"easing":{"standard":"cubic-bezier(0.2, 0, 0, 1)","emphasized":"cubic-bezier(0.3, 0, 0, 1)","entering":"cubic-bezier(0, 0, 0, 1)","exiting":"cubic-bezier(0.4, 0, 1, 1)","spring":"linear(0, 0.36 8%, 1 50%, 0.99 65%, 1)"},"stagger":{"list":"40ms","grid":"60ms"},"scale":{"press":0.97,"hover":1.02,"popIn":0.92},"scrollTimeline":{"enabled":true,"thresholdEntry":"30% 0%"},"reducedMotion":{"duration":"1ms","transform":"none","preserve":["opacity","color"]}},"theming":{"defaultMode":"light","modes":["light","dark"],"colorsByMode":{"dark":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","background":"#181715","foreground":"#faf9f5","card":"#252320","border":"#3d3d3a","muted":"#a09d96"}},"switchStrategy":"media-then-attribute"},"a11y":{"focusRing":{"width":"2px","style":"solid","color":"var(--color-primary)","offset":"2px","radius":"inherit"},"minContrast":{"text":"4.5:1","uiComponent":"3:1","premium":"7:1"},"supportedTextScale":[1,1.25,1.5,2],"minTouchTarget":"44px","minTouchSpacing":"8px","skipLinkRequired":true,"headingHierarchy":"strict"},"iconography":{"set":"lucide","style":"outline","stroke":"1.5px","size":{"sm":"16px","md":"20px","lg":"24px"},"alignment":"baseline","expandHit":"44px","noEmoji":true},"radius":{"sm":"6px","md":"8px","lg":"12px","xl":"16px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航，包含校园品牌标识与主菜单","elements":{"brand":true,"nav_links":true,"cta_primary":true,"search_icon":true},"copy":{"brand":"📰 校园新闻","link_1":"首页","link_2":"通知公告","link_3":"学术动态","link_4":"校园生活","link_5":"人物专访","cta_primary":"投稿"},"interactions":["smooth-scroll-to-#news-list","mobile-menu-toggle"],"notes":"奶油色导航栏，右侧搜索图标 + 珊瑚色'投稿'按钮"},{"id":"hero","type":"hero-centered","purpose":"新闻列表页标题区，展示当前栏目与搜索入口","elements":{"title":true,"subtitle":true,"search_bar":true,"category_tabs":true,"visual_hint":"warm gradient background with subtle line-art campus illustration"},"copy":{"title":"校园新闻","title_accent":"","subtitle":"聚焦学术前沿，记录校园点滴——每周为你精选值得关注的校园动态。","search_placeholder":"搜索新闻标题、关键词…","tab_all":"全部","tab_notice":"通知公告","tab_academic":"学术动态","tab_campus":"校园生活","tab_people":"人物专访"},"interactions":["tab-switch"],"notes":"居中布局，标题用 Copernicus serif display-lg，下方分类 tab 用 category-tab 组件"},{"id":"featured-news","type":"feature-grid","purpose":"头条/置顶新闻卡片，视觉突出展示 1~2 条重要新闻","elements":{"featured_card_1":true,"featured_card_2":true,"badge":true},"copy":{"featured_1_badge":"置顶","featured_1_category":"学术动态","featured_1_title":"我校计算机学院团队在国际顶会 ACL 2026 发表 5 篇论文","featured_1_desc":"自然语言处理方向取得突破性进展，其中一篇关于多模态语义对齐的研究被选为 oral 论文。","featured_1_date":"2026 年 1 月 18 日","featured_1_author":"通讯员：张明","featured_2_badge":"热门","featured_2_category":"校园生活","featured_2_title":"第 38 届校园文化艺术节开幕：30 场活动等你来","featured_2_desc":"本届艺术节以「融·合」为主题，涵盖戏剧、音乐、美术、舞蹈四大板块，持续三周。","featured_2_date":"2026 年 1 月 16 日","featured_2_author":"记者：李华"},"interactions":["scroll-reveal"],"notes":"2-up 网格，左侧大卡片用 surface-card 背景，右侧稍小。置顶/热门用 badge-coral"},{"id":"news-list","type":"blog-list","purpose":"新闻列表主体，按时间倒序排列，每项含缩略图、标题、摘要、元信息","elements":{"list_items":true,"pagination":true,"thumbnail":true},"copy":{"list_title":"最新资讯","item_1_category":"通知公告","item_1_title":"关于 2025-2026 学年第二学期选课安排的通知","item_1_desc":"教务处发布下学期选课时间表：第一轮选课 2 月 10-14 日，第二轮补退选 2 月 24-28 日。","item_1_date":"1 月 15 日","item_1_author":"教务处","item_2_category":"人物专访","item_2_title":"对话陈思远教授：从实验室到产业化的十年之路","item_2_desc":"材料学院陈思远教授团队研发的新型柔性电池材料获国家技术发明二等奖，我们与他聊了聊背后的故事。","item_2_date":"1 月 14 日","item_2_author":"学生记者团","item_3_category":"校园生活","item_3_title":"图书馆延长开放时间：期末季每日 7:00-23:00","item_3_desc":"为满足期末复习需求，图书馆自即日起延长开放时间，并增设 24 小时自习室座位 200 个。","item_3_date":"1 月 12 日","item_3_author":"图书馆","item_4_category":"学术动态","item_4_title":"经济学院举办「数字经济与绿色发展」国际研讨会","item_4_desc":"来自 12 个国家的 30 余位学者参会，围绕碳交易市场、绿色金融等议题展开深入讨论。","item_4_date":"1 月 10 日","item_4_author":"经济学院","item_5_category":"通知公告","item_5_title":"2026 年寒假后勤服务安排一览","item_5_desc":"食堂、浴室、校医院、班车等后勤服务寒假期间运行时间调整，请师生留意。","item_5_date":"1 月 8 日","item_5_author":"后勤管理处","item_6_category":"校园生活","item_6_title":"摄影社年度作品展：「取景框里的四季」开展","item_6_desc":"展览汇集 42 幅优秀学生摄影作品，记录校园春樱、夏荷、秋叶、冬雪的四时之美。","item_6_date":"1 月 6 日","item_6_author":"摄影社","pagination_prev":"上一页","pagination_next":"下一页","pagination_current":"1","pagination_total":"12"},"interactions":["scroll-reveal"],"notes":"列表每项左侧缩略图（圆角 xl 16px），右侧标题 h3 + 摘要 body + 底部分类标签 + 日期作者。分页在底部。"},{"id":"newsletter-cta","type":"cta-banner","purpose":"订阅校园新闻推送，保持用户回访","elements":{"title":true,"subtitle":true,"email_input":true,"cta_primary":true},"copy":{"title":"订阅校园新闻周刊","subtitle":"每周五精选 5 条必读校园动态，直达你的邮箱。","email_placeholder":"输入你的学校邮箱","cta_primary":"立即订阅"},"interactions":[],"notes":"珊瑚色全宽 callout-card-coral，白色文字，输入框用 cream 背景"},{"id":"footer","type":"footer-columns","purpose":"站点地图 + 版权信息 + 社交媒体链接","elements":{"brand":true,"col_1":true,"col_2":true,"col_3":true,"social_links":true,"copyright":true},"copy":{"brand":"📰 校园新闻","col_1_title":"栏目","col_1_link_1":"通知公告","col_1_link_2":"学术动态","col_1_link_3":"校园生活","col_1_link_4":"人物专访","col_2_title":"关于","col_2_link_1":"关于我们","col_2_link_2":"投稿指南","col_2_link_3":"联系方式","col_2_link_4":"隐私政策","col_3_title":"合作","col_3_link_1":"校宣传部","col_3_link_2":"学生会","col_3_link_3":"研究生会","col_3_link_4":"校友会","copyright":"© 2026 校园新闻 · 党委宣传部主办","social_wechat":"微信公众号","social_weibo":"官方微博"},"interactions":[],"notes":"深色 footer（surface-dark #181715），文字 on-dark-soft，4 列布局"}],"rules":{"dos":["每页以奶油色 canvas (#faf9f5) 为底，纯白色会破坏品牌辨识度","新闻标题用 Copernicus serif 400 weight + 负字距，正文用 StyreneB/Inter 400","珊瑚色 (#cc785c) 仅用于 CTA 按钮和置顶/热门 badge，不滥用","卡片背景用 surface-card (#efe9de) 与 canvas 形成层次，不用阴影制造深度","列表项交替使用 cream card 与纯 canvas 背景，形成阅读节奏"],"donts":["不要用冷灰色或纯白做页面背景——奶油色是品牌底色","不要加粗衬线标题——Copernicus 700 显得浮夸，系统只用 400","不要使用蓝色或青色作为品牌点缀——珊瑚色是品牌电压","不要把珊瑚色铺满页面——珊瑚在单个元素上稀缺，只在全宽 callout 卡上慷慨使用","不要用 Inter 做标题——衬线字体是品牌声音的核心","不要连续两个区块使用同一种表面模式——奶油→卡片→深色→珊瑚→深色 footer 交替才是节奏"]},"promptGuide":{"quickRef":"奶油画布 + 珊瑚 CTA + Copernicus 衬线标题 + StyreneB 正文 + 深色产品卡片交替节奏","examples":["用 Claude 风格做个校园活动日历页","用奶油+珊瑚配色设计一个学术会议日程表","用 editorial-warm 风格做教授简介卡片组件","用 Claude 设计系统做图书馆开放时间公告板"]},"states":{"loading":{"type":"skeleton","shimmer":true,"duration":"1200ms"},"empty":{"illustration":"monoline","title":"暂无新闻","body":"当前分类下还没有新闻内容，试试切换其他分类或稍后再来。","action":{"label":"查看全部新闻","intent":"primary"}},"error":{"icon":"alert-triangle","title":"新闻加载失败","body":"网络连接似乎出现了问题，请检查网络后重试。","retry":true}},"personality":{"voice":"温润学院派","humorLevel":2,"formalityLevel":6,"exclamationAllowed":false,"brandVoiceKeywords":["scholarly","warm","direct","trustworthy"]}},"planReviews":[{"round":1,"ok":false,"score":94,"rubric":{"atmosphere":6,"color":17,"typography":8,"components":10,"layout":8,"depth":5,"rules":4,"responsive":6,"sections":16,"motion":7,"a11yDeep":4,"states":3},"issues":["nav.copy.brand 与 footer.copy.brand 使用了 emoji '📰'，违反文案禁止表情符号规则，须替换为纯文字'校园新闻'。"],"revisedPlan":{"planId":"7a1e3c5f-8d2b-4e9a-b6c1-0f4d8e2a7b3c","goal":"校园新闻列表页，快速浏览与筛选","audience":"在校师生、校友及关注校园动态的访客","tone":"editorial-warm","type":"fullHTML","designTokens":{"style":{"name":"editorial-warm","mood":"calm","keywords":["warm cream","serif headlines","coral accent","editorial pacing","campus"],"density":"comfortable","philosophy":"奶油画布为底、衬线标题定调、珊瑚色点睛——让校园新闻读起来像一本文学刊物。"},"colors":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","success":"#5db872","warning":"#d4a017","danger":"#c64545","info":"#5db8a6","background":"#faf9f5","foreground":"#141413","card":"#efe9de","border":"#e6dfd8","muted":"#6c6a64"},"cssVarPrefix":"--color-","states":{"hover":"#a9583e","active":"#a9583e","focus":"#cc785c","disabled":"#e6dfd8"},"colorsOklch":{"primary":"oklch(0.62 0.12 35)","secondary":"oklch(0.68 0.09 170)","accent":"oklch(0.72 0.11 75)"},"colorSpaces":{"fallback":"hex","preferred":"oklch","stateMixing":"color-mix(in oklch, base, mod 12%)"},"colorRoles":{"primary":{"name":"Claude Coral","role":"CTA & focus rings & callout cards"},"accent":{"name":"Warm Amber","role":"category badges & inline highlights"}},"gradients":[{"name":"hero-warm-glow","stops":"linear-gradient(135deg, #faf9f5 0%, #f5f0e8 50%, #efe9de 100%)","role":"hero section background"}],"fonts":{"heading":"Copernicus, Tiempos Headline, serif","body":"StyreneB, Inter, sans-serif","mono":"JetBrains Mono, ui-monospace, monospace","display":"Copernicus, Tiempos Headline, serif","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=…;:{"heading":"'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', Georgia, 'Times New Roman', serif","body":"'StyreneB', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","mono":"'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace"},"variableAxes":{"body":{"wght":[400,600]}},"features":{"tabularNums":["price","metric","time","date"],"stylisticSet":{"heading":"ss01"},"ligatures":"common-only"},"loading":{"display":"swap","preload":["heading","body"],"selfHost":"recommended"},"scale":{"display":{"size":"clamp(2rem, 4.5vw, 3.5rem)","weight":400,"lineHeight":1.05,"letterSpacing":"-0.04em"},"h1":{"size":"clamp(1.75rem, 3.5vw, 2.5rem)","weight":400,"lineHeight":1.1,"letterSpacing":"-0.03em"},"h2":{"size":"clamp(1.5rem, 2.5vw, 2rem)","weight":400,"lineHeight":1.15,"letterSpacing":"-0.02em"},"h3":{"size":"1.25rem","weight":400,"lineHeight":1.2,"letterSpacing":"-0.01em"},"h4":{"size":"1.125rem","weight":500,"lineHeight":1.3,"letterSpacing":"0"},"body":{"size":"1rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"small":{"size":"0.875rem","weight":400,"lineHeight":1.55,"letterSpacing":"0"},"caption":{"size":"0.8125rem","weight":500,"lineHeight":1.4,"letterSpacing":"0"},"button":{"size":"0.875rem","weight":500,"lineHeight":1,"letterSpacing":"0"},"overline":{"size":"0.75rem","weight":500,"lineHeight":1.4,"letterSpacing":"0.1em"}},"lineHeight":{"tight":"1.1","base":"1.55","loose":"1.8"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500 font-size=0.875rem","hover":"bg=#a9583e translateY=-1px","active":"bg=#a9583e translateY=0","disabled":"opacity=0.5 cursor=not-allowed bg=#e6dfd8 fg=#6c6a64","focus":"ring=2px solid #cc785c offset=2px","variants":{"primary":{"default":"bg=#cc785c fg=#ffffff padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#a9583e","focus":"ring=2px solid #cc785c offset=2px"},"secondary":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 padding=0.75rem 1.25rem radius=8px weight=500","hover":"bg=#f5f0e8","focus":"ring=2px solid #cc785c offset=2px"}}},"card":{"default":"bg=#efe9de radius=12px padding=1.5rem","hover":"translateY=-2px"},"nav":{"default":"bg=#faf9f5/80 backdrop-blur=12px height=4rem","scrolled":"bg=#faf9f5 shadow=sm","mobile":"drawer-from-right width=85vw bg=#faf9f5"},"input":{"default":"bg=#faf9f5 fg=#141413 border=1px solid #e6dfd8 radius=8px padding=0.625rem 0.875rem","focus":"border=1px solid #cc785c ring=3px rgba(204,120,92,0.15)","error":"border=1px solid #c64545 ring=3px rgba(198,69,69,0.15)","disabled":"opacity=0.5 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1200px","paddingX":"1.5rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"6rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","3rem","4rem","6rem"],"tokens":[0,4,8,12,16,24,32,48,64,96]},"shadow":{"sm":"0 1px 2px rgba(20,20,19,0.06)","md":"0 4px 12px rgba(20,20,19,0.08)","lg":"0 12px 32px rgba(20,20,19,0.10)","xl":"0 24px 64px rgba(20,20,19,0.14)"},"surfaces":{"base":"bg=#faf9f5 shadow=none","raised":"bg=#efe9de shadow=sm radius=12px","overlay":"bg=#faf9f5 shadow=md radius=12px","modal":"bg=#faf9f5 shadow=lg radius=16px"},"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":"sidebar→drawer, multi-col→single-col, table→card-list","hidePriority":["secondary-nav-links","decorative-illustration","stats-extra"]},"motion":{"duration":{"instant":"0ms","micro":"100ms","base":"200ms","expressive":"320ms","deliberate":"480ms","exit":"140ms"},"easing":{"standard":"cubic-bezier(0.2, 0, 0, 1)","emphasized":"cubic-bezier(0.3, 0, 0, 1)","entering":"cubic-bezier(0, 0, 0, 1)","exiting":"cubic-bezier(0.4, 0, 1, 1)","spring":"linear(0, 0.36 8%, 1 50%, 0.99 65%, 1)"},"stagger":{"list":"40ms","grid":"60ms"},"scale":{"press":0.97,"hover":1.02,"popIn":0.92},"scrollTimeline":{"enabled":true,"thresholdEntry":"30% 0%"},"reducedMotion":{"duration":"1ms","transform":"none","preserve":["opacity","color"]}},"theming":{"defaultMode":"light","modes":["light","dark"],"colorsByMode":{"dark":{"primary":"#cc785c","secondary":"#5db8a6","accent":"#e8a55a","background":"#181715","foreground":"#faf9f5","card":"#252320","border":"#3d3d3a","muted":"#a09d96"}},"switchStrategy":"media-then-attribute"},"a11y":{"focusRing":{"width":"2px","style":"solid","color":"var(--color-primary)","offset":"2px","radius":"inherit"},"minContrast":{"text":"4.5:1","uiComponent":"3:1","premium":"7:1"},"supportedTextScale":[1,1.25,1.5,2],"minTouchTarget":"44px","minTouchSpacing":"8px","skipLinkRequired":true,"headingHierarchy":"strict"},"iconography":{"set":"lucide","style":"outline","stroke":"1.5px","size":{"sm":"16px","md":"20px","lg":"24px"},"alignment":"baseline","expandHit":"44px","noEmoji":true},"radius":{"sm":"6px","md":"8px","lg":"12px","xl":"16px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"300ms ease-out","slow":"500ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav","type":"nav-sticky","purpose":"顶部导航，包含校园品牌标识与主菜单","elements":{"brand":true,"nav_links":true,"cta_primary":true,"search_icon":true},"copy":{"brand":"校园新闻","link_1":"首页","link_2":"通知公告","link_3":"学术动态","link_4":"校园生活","link_5":"人物专访","cta_primary":"投稿"},"interactions":["smooth-scroll-to-#news-list","mobile-menu-toggle"],"notes":"奶油色导航栏，右侧搜索图标 + 珊瑚色'投稿'按钮"},{"id":"hero","type":"hero-centered","purpose":"新闻列表页标题区，展示当前栏目与搜索入口","elements":{"title":true,"subtitle":true,"search_bar":true,"category_tabs":true,"visual_hint":"warm gradient background with subtle line-art campus illustration"},"copy":{"title":"校园新闻","title_accent":"","subtitle":"聚焦学术前沿，记录校园点滴——每周为你精选值得关注的校园动态。","search_placeholder":"搜索新闻标题、关键词…","tab_all":"全部","tab_notice":"通知公告","tab_academic":"学术动态","tab_campus":"校园生活","tab_people":"人物专访"},"interactions":["tab-switch"],"notes":"居中布局，标题用 Copernicus serif display-lg，下方分类 tab 用 category-tab 组件"},{"id":"featured-news","type":"feature-grid","purpose":"头条/置顶新闻卡片，视觉突出展示 1~2 条重要新闻","elements":{"featured_card_1":true,"featured_card_2":true,"badge":true},"copy":{"featured_1_badge":"置顶","featured_1_category":"学术动态","featured_1_title":"我校计算机学院团队在国际顶会 ACL 2026 发表 5 篇论文","featured_1_desc":"自然语言处理方向取得突破性进展，其中一篇关于多模态语义对齐的研究被选为 oral 论文。","featured_1_date":"2026 年 1 月 18 日","featured_1_author":"通讯员：张明","featured_2_badge":"热门","featured_2_category":"校园生活","featured_2_title":"第 38 届校园文化艺术节开幕：30 场活动等你来","featured_2_desc":"本届艺术节以「融·合」为主题，涵盖戏剧、音乐、美术、舞蹈四大板块，持续三周。","featured_2_date":"2026 年 1 月 16 日","featured_2_author":"记者：李华"},"interactions":["scroll-reveal"],"notes":"2-up 网格，左侧大卡片用 surface-card 背景，右侧稍小。置顶/热门用 badge-coral"},{"id":"news-list","type":"blog-list","purpose":"新闻列表主体，按时间倒序排列，每项含缩略图、标题、摘要、元信息","elements":{"list_items":true,"pagination":true,"thumbnail":true},"copy":{"list_title":"最新资讯","item_1_category":"通知公告","item_1_title":"关于 2025-2026 学年第二学期选课安排的通知","item_1_desc":"教务处发布下学期选课时间表：第一轮选课 2 月 10-14 日，第二轮补退选 2 月 24-28 日。","item_1_date":"1 月 15 日","item_1_author":"教务处","item_2_category":"人物专访","item_2_title":"对话陈思远教授：从实验室到产业化的十年之路","item_2_desc":"材料学院陈思远教授团队研发的新型柔性电池材料获国家技术发明二等奖，我们与他聊了聊背后的故事。","item_2_date":"1 月 14 日","item_2_author":"学生记者团","item_3_category":"校园生活","item_3_title":"图书馆延长开放时间：期末季每日 7:00-23:00","item_3_desc":"为满足期末复习需求，图书馆自即日起延长开放时间，并增设 24 小时自习室座位 200 个。","item_3_date":"1 月 12 日","item_3_author":"图书馆","item_4_category":"学术动态","item_4_title":"经济学院举办「数字经济与绿色发展」国际研讨会","item_4_desc":"来自 12 个国家的 30 余位学者参会，围绕碳交易市场、绿色金融等议题展开深入讨论。","item_4_date":"1 月 10 日","item_4_author":"经济学院","item_5_category":"通知公告","item_5_title":"2026 年寒假后勤服务安排一览","item_5_desc":"食堂、浴室、校医院、班车等后勤服务寒假期间运行时间调整，请师生留意。","item_5_date":"1 月 8 日","item_5_author":"后勤管理处","item_6_category":"校园生活","item_6_title":"摄影社年度作品展：「取景框里的四季」开展","item_6_desc":"展览汇集 42 幅优秀学生摄影作品，记录校园春樱、夏荷、秋叶、冬雪的四时之美。","item_6_date":"1 月 6 日","item_6_author":"摄影社","pagination_prev":"上一页","pagination_next":"下一页","pagination_current":"1","pagination_total":"12"},"interactions":["scroll-reveal"],"notes":"列表每项左侧缩略图（圆角 xl 16px），右侧标题 h3 + 摘要 body + 底部分类标签 + 日期作者。分页在底部。"},{"id":"newsletter-cta","type":"cta-banner","purpose":"订阅校园新闻推送，保持用户回访","elements":{"title":true,"subtitle":true,"email_input":true,"cta_primary":true},"copy":{"title":"订阅校园新闻周刊","subtitle":"每周五精选 5 条必读校园动态，直达你的邮箱。","email_placeholder":"输入你的学校邮箱","cta_primary":"立即订阅"},"interactions":[],"notes":"珊瑚色全宽 callout-card-coral，白色文字，输入框用 cream 背景"},{"id":"footer","type":"footer-columns","purpose":"站点地图 + 版权信息 + 社交媒体链接","elements":{"brand":true,"col_1":true,"col_2":true,"col_3":true,"social_links":true,"copyright":true},"copy":{"brand":"校园新闻","col_1_title":"栏目","col_1_link_1":"通知公告","col_1_link_2":"学术动态","col_1_link_3":"校园生活","col_1_link_4":"人物专访","col_2_title":"关于","col_2_link_1":"关于我们","col_2_link_2":"投稿指南","col_2_link_3":"联系方式","col_2_link_4":"隐私政策","col_3_title":"合作","col_3_link_1":"校宣传部","col_3_link_2":"学生会","col_3_link_3":"研究生会","col_3_link_4":"校友会","copyright":"© 2026 校园新闻 · 党委宣传部主办","social_wechat":"微信公众号","social_weibo":"官方微博"},"interactions":[],"notes":"深色 footer（surface-dark #181715），文字 on-dark-soft，4 列布局"}],"rules":{"dos":["每页以奶油色 canvas (#faf9f5) 为底，纯白色会破坏品牌辨识度","新闻标题用 Copernicus serif 400 weight + 负字距，正文用 StyreneB/Inter 400","珊瑚色 (#cc785c) 仅用于 CTA 按钮和置顶/热门 badge，不滥用","卡片背景用 surface-card (#efe9de) 与 canvas 形成层次，不用阴影制造深度","列表项交替使用 cream card 与纯 canvas 背景，形成阅读节奏"],"donts":["不要用冷灰色或纯白做页面背景——奶油色是品牌底色","不要加粗衬线标题——Copernicus 700 显得浮夸，系统只用 400","不要使用蓝色或青色作为品牌点缀——珊瑚色是品牌电压","不要把珊瑚色铺满页面——珊瑚在单个元素上稀缺，只在全宽 callout 卡上慷慨使用","不要用 Inter 做标题——衬线字体是品牌声音的核心","不要连续两个区块使用同一种表面模式——奶油→卡片→深色→珊瑚→深色 footer 交替才是节奏"]},"promptGuide":{"quickRef":"奶油画布 + 珊瑚 CTA + Copernicus 衬线标题 + StyreneB 正文 + 深色产品卡片交替节奏","examples":["用 Claude 风格做个校园活动日历页","用奶油+珊瑚配色设计一个学术会议日程表","用 editorial-warm 风格做教授简介卡片组件","用 Claude 设计系统做图书馆开放时间公告板"]},"states":{"loading":{"type":"skeleton","shimmer":true,"duration":"1200ms"},"empty":{"illustration":"monoline","title":"暂无新闻","body":"当前分类下还没有新闻内容，试试切换其他分类或稍后再来。","action":{"label":"查看全部新闻","intent":"primary"}},"error":{"icon":"alert-triangle","title":"新闻加载失败","body":"网络连接似乎出现了问题，请检查网络后重试。","retry":true}},"personality":{"voice":"温润学院派","humorLevel":2,"formalityLevel":6,"exclamationAllowed":false,"brandVoiceKeywords":["scholarly","warm","direct","trustworthy"]}}}],"planId":"7a1e3c5f-8d2b-4e9a-b6c1-0f4d8e2a7b3c"}```

total_tokens

36974

summary

根据蓝图生成了校园新闻列表页，共7个区块

uiParsing

关闭