新闻中心搜索功能上线：实时过滤与深色主题设计

By admin, 19 April, 2026

推理

用户要求增加新闻搜索框。我需要基于之前的音乐学院新闻列表页面，添加一个搜索框功能。

根据之前的代码，我需要：
1. 在新闻列表区域（hero或news-list部分）添加一个搜索框
2. 实现搜索交互功能（JavaScript）
3. 保持整体设计风格一致（深色编辑美学）

我应该在hero区域或news-list区域添加搜索框。考虑到用户体验，放在hero区域下方、新闻列表上方比较合适，这样用户可以先筛选分类，再搜索关键词。

让我修改代码：
1. 在hero部分添加搜索框
2. 添加搜索功能的JavaScript
3. 保持深色主题和金色点缀的设计风格

由于这是修改现有页面，我需要返回完整的HTML代码。

角色

assistant

content

```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 <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;…\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://unpkg.com/aos@2.3.1/dist/aos.css\" rel=\"stylesheet\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script src=\"https://unpkg.com/aos@2.3.1/dist/aos.js\"></script>\n <style>\n :root {\n --color-primary: #111827;\n --color-secondary: #374151;\n --color-accent: #d4a537;\n --color-background: #0a0a0a;\n --color-foreground: #f5f5f5;\n --color-card: #151515;\n --color-border: #222222;\n --color-muted: #888888;\n --radius-sm: 2px;\n --radius-md: 4px;\n --radius-lg: 8px;\n --radius-xl: 12px;\n --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n body {\n font-family: 'Source Sans Pro', sans-serif;\n background-color: var(--color-background);\n color: var(--color-foreground);\n overflow-x: hidden;\n }\n h1, h2, h3, h4, .font-heading {\n font-family: 'Playfair Display', serif;\n }\n .card-hover {\n transition: transform var(--transition-base), box-shadow var(--transition-base);\n }\n .card-hover:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);\n }\n .tab-active {\n color: var(--color-accent);\n border-bottom-color: var(--color-accent);\n }\n .pagination-active {\n background-color: var(--color-accent);\n color: var(--color-primary);\n }\n .grid-pattern {\n background-image: linear-gradient(rgba(212, 165, 55, 0.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(212, 165, 55, 0.05) 1px, transparent 1px);\n background-size: 40px 40px;\n }\n .noise-texture {\n background-image: url(\"https://www.transparenttextures.com/patterns/lightpaperfibers.png\");\n opacity: 0.03;\n }\n .search-input:focus {\n outline: none;\n border-color: var(--color-accent);\n box-shadow: 0 0 0 3px rgba(212, 165, 55, 0.1);\n }\n .highlight {\n background-color: rgba(212, 165, 55, 0.3);\n padding: 0 2px;\n border-radius: 2px;\n }\n .no-results {\n text-align: center;\n padding: 3rem;\n color: var(--color-muted);\n }\n </style>\n</head>\n<body class=\"relative\">\n \n <nav id=\"nav\" class=\"sticky top-0 z-50 border-b\" style=\"background-color: var(--color-card); border-color: var(--color-border);\">\n <div class=\"container mx-auto px-[2rem] py-4 flex flex-col md:flex-row justify-between items-center\">\n <a href=\"#\" class=\"font-heading text-2xl font-bold mb-4 md:mb-0\" style=\"color: var(--color-accent);\">中央音乐学院</a>\n <div class=\"flex flex-wrap justify-center items-center space-x-6\">\n <a href=\"#\" class=\"py-2 font-semibold border-b-2\" style=\"color: var(--color-accent); border-color: var(--color-accent);\">新闻中心</a>\n <a href=\"#\" class=\"py-2 hover:text-[#d4a537] transition-colors duration-200\">学术动态</a>\n <a href=\"#\" class=\"py-2 hover:text-[#d4a537] transition-colors duration-200\">演出信息</a>\n <a href=\"#\" class=\"py-2 hover:text-[#d4a537] transition-colors duration-200\">校友成就</a>\n <a href=\"#\" class=\"py-2 hover:text-[#d4a537] transition-colors duration-200\">关于学院</a>\n <button id=\"subscribe-nav-btn\" class=\"ml-4 px-6 py-2 font-semibold border\" style=\"background-color: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); border-radius: var(--radius-sm);\">订阅新闻</button>\n </div>\n </div>\n </nav>\n\n \n <header id=\"hero\" class=\"py-[4rem] text-center relative overflow-hidden\">\n <div class=\"absolute inset-0 noise-texture\"></div>\n <div class=\"container mx-auto px-[2rem] relative z-10\" data-aos=\"fade-up\">\n <h1 class=\"font-heading text-5xl md:text-6xl font-bold mb-6\">新闻中心</h1>\n <p class=\"text-xl mb-12 max-w-3xl mx-auto\" style=\"color: var(--color-muted);\">关注中央音乐学院的最新动态、学术成果与艺术成就</p>\n \n \n <div class=\"max-w-2xl mx-auto mb-12\" data-aos=\"fade-up\" data-aos-delay=\"100\">\n <div class=\"relative\">\n <i class=\"fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-xl\" style=\"color: var(--color-muted);\"></i>\n <input \n type=\"text\" \n id=\"news-search\" \n placeholder=\"搜索新闻标题、内容或关键词...\" \n class=\"search-input w-full pl-12 pr-4 py-4 text-lg border bg-transparent transition-all duration-300\"\n style=\"border-color: var(--color-border); color: var(--color-foreground); border-radius: var(--radius-lg);\"\n >\n </div>\n <p class=\"mt-3 text-sm\" style=\"color: var(--color-muted);\">\n <i class=\"fas fa-info-circle mr-1\"></i>\n 输入关键词实时搜索，支持标题和内容匹配\n </p>\n </div>\n \n <div class=\"flex flex-wrap justify-center gap-4 border-b pb-2\" style=\"border-color: var(--color-border);\">\n <button class=\"tab-btn px-6 py-3 text-lg font-semibold border-b-2 transition-colors duration-200 tab-active\" data-category=\"all\">全部</button>\n <button class=\"tab-btn px-6 py-3 text-lg font-semibold border-b-2 border-transparent hover:text-[#d4a537] transition-colors duration-200\" data-category=\"academic\">学术动态</button>\n <button class=\"tab-btn px-6 py-3 text-lg font-semibold border-b-2 border-transparent hover:text-[#d4a537] transition-colors duration-200\" data-category=\"performance\">演出信息</button>\n <button class=\"tab-btn px-6 py-3 text-lg font-semibold border-b-2 border-transparent hover:text-[#d4a537] transition-colors duration-200\" data-category=\"alumni\">校友成就</button>\n </div>\n </div>\n </header>\n\n \n <section id=\"featured\" class=\"py-[4rem]\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-[2rem]\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n \n <article class=\"card-hover p-8 lg:col-span-2 flex flex-col justify-between\" style=\"background-color: var(--color-card); border-radius: var(--radius-xl);\">\n <div>\n <span class=\"inline-block px-4 py-1 mb-4 text-sm font-semibold\" style=\"background-color: rgba(212, 165, 55, 0.1); color: var(--color-accent); border-radius: var(--radius-sm);\">演出信息</span>\n <h3 class=\"font-heading text-3xl font-bold mb-4\">学院交响乐团欧洲巡演圆满成功</h3>\n <p class=\"mb-6\" style=\"color: var(--color-muted);\">在维也纳金色大厅、柏林爱乐音乐厅等世界级音乐殿堂演出，获得国际乐评高度评价</p>\n </div>\n <div class=\"text-sm\" style=\"color: var(--color-muted);\">\n <i class=\"far fa-calendar mr-2\"></i>2024年3月15日\n </div>\n </article>\n \n <article class=\"card-hover p-8 flex flex-col justify-between order-2 lg:order-none\" style=\"background-color: var(--color-card); border-radius: var(--radius-xl);\">\n <div>\n <span class=\"inline-block px-4 py-1 mb-4 text-sm font-semibold\" style=\"background-color: rgba(212, 165, 55, 0.1); color: var(--color-accent); border-radius: var(--radius-sm);\">学术动态</span>\n <h3 class=\"font-heading text-2xl font-bold mb-4\">作曲系教授获国家艺术基金重大项目</h3>\n <p class=\"mb-6\" style=\"color: var(--color-muted);\">《中国当代交响乐创作研究》项目获资助，将推动中国交响乐创作理论体系建设</p>\n </div>\n <div class=\"text-sm\" style=\"color: var(--color-muted);\">\n <i class=\"far fa-calendar mr-2\"></i>2024年3月12日\n </div>\n </article>\n \n <article class=\"card-hover p-8 flex flex-col justify-between order-3 lg:order-none\" style=\"background-color: var(--color-card); border-radius: var(--radius-xl);\">\n <div>\n <span class=\"inline-block px-4 py-1 mb-4 text-sm font-semibold\" style=\"background-color: rgba(212, 165, 55, 0.1); color: var(--color-accent); border-radius: var(--radius-sm);\">校友成就</span>\n <h3 class=\"font-heading text-2xl font-bold mb-4\">校友钢琴家在国际大赛中斩获金奖</h3>\n <p class=\"mb-6\" style=\"color: var(--color-muted);\">2018届毕业生在肖邦国际钢琴比赛中获得第一名，创下学院历史最佳成绩</p>\n </div>\n <div class=\"text-sm\" style=\"color: var(--color-muted);\">\n <i class=\"far fa-calendar mr-2\"></i>2024年3月10日\n </div>\n </article>\n </div>\n </div>\n </section>\n\n \n <section id=\"news-list\" class=\"py-[4rem]\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-[2rem]\">\n \n <div id=\"search-stats\" class=\"mb-6 text-sm\" style=\"color: var(--color-muted); display: none;\">\n 找到 <span id=\"result-count\" class=\"font-bold\" style=\"color: var(--color-accent);\">0</span> 条相关新闻\n </div>\n \n <div id=\"news-container\" class=\"space-y-8 mb-12\">\n \n <article class=\"news-item card-hover p-8 border\" data-category=\"academic\" style=\"background-color: var(--color-card); border-color: var(--color-border); border-radius: var(--radius-lg);\">\n <div class=\"flex flex-col md:flex-row justify-between md:items-start gap-6\">\n <div class=\"flex-1\">\n <span class=\"inline-block px-3 py-1 mb-3 text-xs font-semibold\" style=\"background-color: rgba(212, 165, 55, 0.1); color: var(--color-accent); border-radius: var(--radius-sm);\">学术动态</span>\n <h3 class=\"news-title font-heading text-2xl font-bold mb-3\">声乐系举办意大利艺术歌曲大师班</h3>\n <p class=\"news-content mb-4\" style=\"color: var(--color-muted);\">特邀米兰斯卡拉歌剧院艺术指导来校授课，为期一周的密集训练提升学生演唱技巧</p>\n <div class=\"flex flex-wrap items-center text-sm gap-4\" style=\"color: var(--color-muted);\">\n <span><i class=\"far fa-calendar mr-2\"></i>2024年3月8

total_tokens

19801

summary

在新闻中心页面增加了搜索框功能。在英雄区下方添加了带有图标和占位符的搜索输入框，实现了实时搜索过滤功能，用户可以通过关键词快速查找新闻标题和内容。搜索框采用深色主题设计，与整体编辑美学风格保持一致。

uiParsing

关闭