From a2cb36866cf1b10e2a81e85534872b423d42ad08 Mon Sep 17 00:00:00 2001 From: qiuchenfan <2035024011@qq.com> Date: Fri, 21 Nov 2025 17:19:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E9=83=A8=E5=88=86=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=88=B0newsStore=EF=BC=8C=E5=90=8E=E7=BB=AD?= =?UTF-8?q?=E5=85=A8=E9=83=A8=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/news/body/Culturebg.tsx | 21 +-- app/components/news/body/ImageGridSection.tsx | 67 +------- app/components/news/body/Integrated.tsx | 53 +----- app/components/news/header/TopNav.tsx | 20 +-- app/store/newsStore.ts | 154 +++++++++++++++++- 5 files changed, 167 insertions(+), 148 deletions(-) diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx index f87bb55..db16033 100644 --- a/app/components/news/body/Culturebg.tsx +++ b/app/components/news/body/Culturebg.tsx @@ -1,25 +1,10 @@ import React from 'react'; +import { newsStore } from '@/store/newsStore'; export default function CultureBgPage() { // 定义logo数据数组，包含16个logo信息 - const logos = [ - { id: 1, src: '/public/logo/1.png', alt: 'Logo 1' }, - { id: 2, src: '/public/logo/1.png', alt: 'Logo 2' }, - { id: 3, src: '/public/logo/1.png', alt: 'Logo 3' }, - { id: 4, src: '/public/logo/1.png', alt: 'Logo 4' }, - { id: 5, src: '/public/logo/1.png', alt: 'Logo 5' }, - { id: 6, src: '/public/logo/1.png', alt: 'Logo 6' }, - { id: 7, src: '/public/logo/1.png', alt: 'Logo 7' }, - { id: 8, src: '/public/logo/1.png', alt: 'Logo 8' }, - { id: 9, src: '/public/logo/1.png', alt: 'Logo 9' }, - { id: 10, src: '/public/logo/1.png', alt: 'Logo 10' }, - { id: 11, src: '/public/logo/1.png', alt: 'Logo 11' }, - { id: 12, src: '/public/logo/1.png', alt: 'Logo 12' }, - { id: 13, src: '/public/logo/1.png', alt: 'Logo 13' }, - { id: 14, src: '/public/logo/1.png', alt: 'Logo 14' }, - { id: 15, src: '/public/logo/1.png', alt: 'Logo 15' }, - { id: 16, src: '/public/logo/1.png', alt: 'Logo 16' }, - ]; + const {logos} = newsStore(); + return ( // 主容器：固定高度700px，宽度1550px，水平居中，相对定位 diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index 7c0de31..4c10d9c 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -1,74 +1,13 @@ import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件 +import { newsStore } from '@/store/newsStore'; import React from 'react'; -interface NewsItem { - id: string; - content: string; - url: string; -} + // LearnPage 组件定义 const LearnPage = () => { // 新闻列表数据，用于显示在右侧新闻列表区 - const newsList: NewsItem[] = [ - { - id: '1', - content: '中华人民共和国监察法', - url: 'https://www.baidu.com', - }, - { - id: '2', - content: '2024年国办印发意见部门工作人员党听全国两...', - url: 'https://www.baidu.com', - }, - { - id: '3', - content: '十四届全国人大二次会议闭幕贺词', - url: 'https://www.baidu.com', - }, - { - id: '4', - content: '7天人代会："小片段"折射民主"大全景"', - url: 'https://www.baidu.com', - }, - { - id: '5', - content: '全国政协十四届二次会议共收到提案5800多件', - url: 'https://www.baidu.com', - }, - { - id: '6', - content: '两会观察丨从两会八个高频词看中国', - url: 'https://www.baidu.com', - }, - { - id: '7', - content: '两会"清单"上新这些民生发展温度', - url: 'https://www.baidu.com', - }, - { - id: '8', - content: '"选择中国"——世界从中国两会读出心动机号', - url: 'https://www.baidu.com', - }, - { - id: '9', - content: '中国经济信心说丨新玛合信心从哪里来', - url: 'https://www.baidu.com', - }, - ]; - const booksList: NewsItem[] = [ - { - id: 'book1', - content: '习近平新时代中国特色社会主义思想专题数据库', - url: 'https://www.baidu.com', - }, - { - id: 'book2', - content: '习近平著作选读', - url: 'https://www.baidu.com', - }, - ]; + const {newsList,booksList} = newsStore(); {/* 水平居中 使用背景图片方式展示logo 覆盖 只显示1 外边距 弹性 默认纵向 大屏子元素横向 */ } diff --git a/app/components/news/body/Integrated.tsx b/app/components/news/body/Integrated.tsx index 80feb58..e6e00ad 100644 --- a/app/components/news/body/Integrated.tsx +++ b/app/components/news/body/Integrated.tsx @@ -1,49 +1,14 @@ -import type { IconType } from 'react-icons'; -import { - FaUserGraduate, - FaUserShield, - FaLaptopCode, - FaMicrophoneLines, - FaEnvelopeOpenText, - FaWrench, - FaRegFileLines, - FaSpellCheck, - FaChartPie, - FaGlobe, - FaBookOpenReader, - FaPenRuler, -} from 'react-icons/fa6'; - -// 定义服务项的类型接口 -type ServiceItem = { - icon: IconType; // 图标组件 - label: string; // 显示标签 - href: string; // 链接地址 -}; - -// 服务项数据数组 -const services: ServiceItem[] = [ - { icon: FaUserGraduate, label: '警队自考', href: '/study' }, - { icon: FaUserShield, label: '警队教育', href: '/scholarship' }, - { icon: FaLaptopCode, label: '常用软件', href: '/software' }, - { icon: FaMicrophoneLines, label: '智能语音', href: '/voice' }, - { icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' }, - { icon: FaWrench, label: '策划工具', href: '/plan' }, - { icon: FaRegFileLines, label: '办公模板', href: '/office' }, - { icon: FaSpellCheck, label: '智能校对', href: '/ai-check' }, - { icon: FaChartPie, label: '警情调研', href: '/survey' }, - { icon: FaGlobe, label: '上网助手', href: '/net' }, - { icon: FaBookOpenReader, label: '考试平台', href: '/exam' }, - { icon: FaPenRuler, label: '学习平台', href: '/study' }, -]; - -// 将一维服务数组转换为三维数组，分为3列，每列4个服务项 -// 结构: [[列1的4项], [列2的4项], [列3的4项]] -const columns = Array.from({ length: 3 }, (_, colIndex) => - services.slice(colIndex * 4, colIndex * 4 + 4) -); +import {newsStore }from '@/store/newsStore'; export default function Integrated() { + // 在组件内部调用 zustand hook + const { services } = newsStore(); + + // 将一维服务数组转换为三维数组，分为3列，每列4个服务项 + // 结构: [[列1的4项], [列2的4项], [列3的4项]] + const columns = Array.from({ length: 3 }, (_, colIndex) => + services.slice(colIndex * 4, colIndex * 4 + 4) + ); return ( // 主容器：固定宽度1514px，高度573px，水平居中
diff --git a/app/components/news/header/TopNav.tsx b/app/components/news/header/TopNav.tsx index 47dfc99..187688d 100644 --- a/app/components/news/header/TopNav.tsx +++ b/app/components/news/header/TopNav.tsx @@ -1,28 +1,19 @@ import { Search } from 'lucide-react'; import React, { useState, useEffect } from 'react'; import { Button } from '@/ui/button'; -interface MenuItem { - label: string; - key: string; - sectionId:string; -} +import { newsStore,type MenuItem} from '@/store/newsStore'; + + interface TopNavProps { - menuItems?: MenuItem[]; + activeKey?: string; onSearch?: (keyword: string) => void; onItemClick?: (key: string) => void; } export function TopNav({ - menuItems = [ - { label: '首页', key: 'home', sectionId:'home' }, - { label: '烽火动态', key: 'news', sectionId:'fireNews' }, - { label: '烽火铸魂', key: 'soul', sectionId:'soul' }, - { label: '烽火训练', key: 'training', sectionId:'training' }, - { label: '联系热线', key: 'hotline', sectionId:'hotline' }, - { label: '综合服务', key: 'service', sectionId:'service' }, - ], + activeKey: externalActiveKey, onSearch, onItemClick, @@ -30,6 +21,7 @@ export function TopNav({ const [internalActiveKey, setInternalActiveKey] = useState('home'); const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey; const [searchKeyword, setSearchKeyword] = useState(''); + const {menuItems} = newsStore(); const handleSearchSubmit = (e: React.FormEvent) => { diff --git a/app/store/newsStore.ts b/app/store/newsStore.ts index e59ea2d..499bc03 100644 --- a/app/store/newsStore.ts +++ b/app/store/newsStore.ts @@ -1,15 +1,153 @@ import { create } from "zustand"; +import type { IconType } from 'react-icons'; +import { + FaUserGraduate, + FaUserShield, + FaLaptopCode, + FaMicrophoneLines, + FaEnvelopeOpenText, + FaWrench, + FaRegFileLines, + FaSpellCheck, + FaChartPie, + FaGlobe, + FaBookOpenReader, + FaPenRuler, +} from 'react-icons/fa6'; - -//此页面是为了使用zustand进行数据管理 +//文化符号徽章 +interface Logo { + id: number; + src: string; + alt: string; +} +//新闻列表 +interface NewsItem { + id: string; + content: string; + url: string; +} +//综合服务徽章 +interface ServiceItem { + icon: IconType; // 图标组件 + label: string; // 显示标签 + href: string; // 链接地址 +}; +//导航栏项 +export interface MenuItem { + label: string; + key: string; + sectionId:string; +} type NewsStore = { - news: any; - setNews: (news: any) => void; + logos: Logo[]; + newsList: NewsItem[]; + booksList: NewsItem[]; + services: ServiceItem[]; + menuItems:MenuItem[]; }; -const newsStore = create((set,get) => ({ - news: [], - setNews: (news: any) => set({ news }), -})); \ No newline at end of file +export const newsStore = create(() => ({ + logos: [ + { id: 1, src: "/public/logo/1.png", alt: "Logo 1" }, + { id: 2, src: "/public/logo/1.png", alt: "Logo 2" }, + { id: 3, src: "/public/logo/1.png", alt: "Logo 3" }, + { id: 4, src: "/public/logo/1.png", alt: "Logo 4" }, + { id: 5, src: "/public/logo/1.png", alt: "Logo 5" }, + { id: 6, src: "/public/logo/1.png", alt: "Logo 6" }, + { id: 7, src: "/public/logo/1.png", alt: "Logo 7" }, + { id: 8, src: "/public/logo/1.png", alt: "Logo 8" }, + { id: 9, src: "/public/logo/1.png", alt: "Logo 9" }, + { id: 10, src: "/public/logo/1.png", alt: "Logo 10" }, + { id: 11, src: "/public/logo/1.png", alt: "Logo 11" }, + { id: 12, src: "/public/logo/1.png", alt: "Logo 12" }, + { id: 13, src: "/public/logo/1.png", alt: "Logo 13" }, + { id: 14, src: "/public/logo/1.png", alt: "Logo 14" }, + { id: 15, src: "/public/logo/1.png", alt: "Logo 15" }, + { id: 16, src: "/public/logo/1.png", alt: "Logo 16" }, + ], //文化符号徽章 + newsList: [ + { id: "1", content: "中华人民共和国监察法", url: "https://www.baidu.com" }, + { + id: "2", + content: "2024年国办印发意见部门工作人员党听全国两...", + url: "https://www.baidu.com", + }, + { + id: "3", + content: "十四届全国人大二次会议闭幕贺词", + url: "https://www.baidu.com", + }, + { + id: "4", + content: '7天人代会："小片段"折射民主"大全景"', + url: "https://www.baidu.com", + }, + { + id: "5", + content: "全国政协十四届二次会议共收到提案5800多件", + url: "https://www.baidu.com", + }, + { + id: "6", + content: "两会观察丨从两会八个高频词看中国", + url: "https://www.baidu.com", + }, + { + id: "7", + content: '两会"清单"上新这些民生发展温度', + url: "https://www.baidu.com", + }, + { + id: "8", + content: '"选择中国"——世界从中国两会读出心动机号', + url: "https://www.baidu.com", + }, + { + id: "9", + content: "中国经济信心说丨新玛合信心从哪里来", + url: "https://www.baidu.com", + }, + ], + booksList: [ + { + id: "1", + content: "《中国特色社会主义》", + url: "https://www.baidu.com", + }, + { + id: "2", + content: "《中国特色社会主义》", + url: "https://www.baidu.com", + }, + { + id: "3", + content: "《中国特色社会主义》", + url: "https://www.baidu.com", + }, + ], + services:[ + { icon: FaUserGraduate, label: '警队自考', href: '/study' }, + { icon: FaUserShield, label: '警队教育', href: '/scholarship' }, + { icon: FaLaptopCode, label: '常用软件', href: '/software' }, + { icon: FaMicrophoneLines, label: '智能语音', href: '/voice' }, + { icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' }, + { icon: FaWrench, label: '策划工具', href: '/plan' }, + { icon: FaRegFileLines, label: '办公模板', href: '/office' }, + { icon: FaSpellCheck, label: '智能校对', href: '/ai-check' }, + { icon: FaChartPie, label: '警情调研', href: '/survey' }, + { icon: FaGlobe, label: '上网助手', href: '/net' }, + { icon: FaBookOpenReader, label: '考试平台', href: '/exam' }, + { icon: FaPenRuler, label: '学习平台', href: '/study' }, + ], + menuItems :[ + { label: '首页', key: 'home', sectionId:'home' }, + { label: '烽火动态', key: 'news', sectionId:'fireNews' }, + { label: '烽火铸魂', key: 'soul', sectionId:'soul' }, + { label: '烽火训练', key: 'training', sectionId:'training' }, + { label: '联系热线', key: 'hotline', sectionId:'hotline' }, + { label: '综合服务', key: 'service', sectionId:'service' }, + ], +}));