From c1843615767220a7bca4fe8e9411647e11bd31c0 Mon Sep 17 00:00:00 2001 From: qiuchenfan <2035024011@qq.com> Date: Fri, 21 Nov 2025 17:51:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E6=95=B0=E6=8D=AE=E8=83=BD=E5=A4=9F?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E6=95=B0=E6=8D=AE=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/news/body/Culturebg.tsx | 4 +- app/components/news/body/ImageGridSection.tsx | 4 +- app/components/news/body/Integrated.tsx | 4 +- app/components/news/body/Train.tsx | 4 ++ app/components/news/header/TopNav.tsx | 4 +- app/store/newsStore.ts | 48 +++++++++++++++---- 6 files changed, 51 insertions(+), 17 deletions(-) diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx index db16033..8645c08 100644 --- a/app/components/news/body/Culturebg.tsx +++ b/app/components/news/body/Culturebg.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { newsStore } from '@/store/newsStore'; +import { useNewsStore } from '@/store/newsStore'; export default function CultureBgPage() { // 定义logo数据数组，包含16个logo信息 - const {logos} = newsStore(); + const {logos} = useNewsStore(); return ( diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index 4c10d9c..6506827 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -1,5 +1,5 @@ import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件 -import { newsStore } from '@/store/newsStore'; +import { useNewsStore } from '@/store/newsStore'; import React from 'react'; @@ -7,7 +7,7 @@ import React from 'react'; // LearnPage 组件定义 const LearnPage = () => { // 新闻列表数据，用于显示在右侧新闻列表区 - const {newsList,booksList} = newsStore(); + const {newsList,booksList} = useNewsStore(); {/* 水平居中 使用背景图片方式展示logo 覆盖 只显示1 外边距 弹性 默认纵向 大屏子元素横向 */ } diff --git a/app/components/news/body/Integrated.tsx b/app/components/news/body/Integrated.tsx index e6e00ad..e4207ed 100644 --- a/app/components/news/body/Integrated.tsx +++ b/app/components/news/body/Integrated.tsx @@ -1,8 +1,8 @@ -import {newsStore }from '@/store/newsStore'; +import {useNewsStore }from '@/store/newsStore'; export default function Integrated() { // 在组件内部调用 zustand hook - const { services } = newsStore(); + const { services } = useNewsStore(); // 将一维服务数组转换为三维数组，分为3列，每列4个服务项 // 结构: [[列1的4项], [列2的4项], [列3的4项]] diff --git a/app/components/news/body/Train.tsx b/app/components/news/body/Train.tsx index 3536687..20530d8 100644 --- a/app/components/news/body/Train.tsx +++ b/app/components/news/body/Train.tsx @@ -1,12 +1,15 @@ import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件 import React from 'react'; + interface NewsItem { id: string; content: string; url: string; } + + // LearnPage 组件定义 const Train = () => { // 新闻列表数据，用于显示在右侧新闻列表区 @@ -62,6 +65,7 @@ const Train = () => {
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
+
{/* 使用grid布局来安排图片的位置 */}
diff --git a/app/components/news/header/TopNav.tsx b/app/components/news/header/TopNav.tsx index 187688d..e7f9fc6 100644 --- a/app/components/news/header/TopNav.tsx +++ b/app/components/news/header/TopNav.tsx @@ -1,7 +1,7 @@ import { Search } from 'lucide-react'; import React, { useState, useEffect } from 'react'; import { Button } from '@/ui/button'; -import { newsStore,type MenuItem} from '@/store/newsStore'; +import { useNewsStore,type MenuItem} from '@/store/newsStore'; @@ -21,7 +21,7 @@ export function TopNav({ const [internalActiveKey, setInternalActiveKey] = useState('home'); const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey; const [searchKeyword, setSearchKeyword] = useState(''); - const {menuItems} = newsStore(); + const {menuItems} = useNewsStore(); const handleSearchSubmit = (e: React.FormEvent) => { diff --git a/app/store/newsStore.ts b/app/store/newsStore.ts index 499bc03..14fef78 100644 --- a/app/store/newsStore.ts +++ b/app/store/newsStore.ts @@ -14,6 +14,7 @@ import { FaBookOpenReader, FaPenRuler, } from 'react-icons/fa6'; +import { persist, createJSONStorage } from 'zustand/middleware' //文化符号徽章 @@ -46,10 +47,17 @@ type NewsStore = { newsList: NewsItem[]; booksList: NewsItem[]; services: ServiceItem[]; - menuItems:MenuItem[]; + menuItems: MenuItem[]; + // 添加 setter 方法 + setLogos: (logos: Logo[]) => void; + setNewsList: (news: NewsItem[]) => void; + setBooksList: (books: NewsItem[]) => void; + setServices: (services: ServiceItem[]) => void; + setMenuItems: (items: MenuItem[]) => void; }; -export const newsStore = create(() => ({ +// 初始数据 +const initialData = { logos: [ { id: 1, src: "/public/logo/1.png", alt: "Logo 1" }, { id: 2, src: "/public/logo/1.png", alt: "Logo 2" }, @@ -142,12 +150,34 @@ export const newsStore = create(() => ({ { 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' }, + 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' }, ], +}; + +export const useNewsStore = create()(persist((set) => ({ + ...initialData, + // Setter 方法实现 + setLogos: (logos) => set({ logos }), + setNewsList: (newsList) => set({ newsList }), + setBooksList: (booksList) => set({ booksList }), + setServices: (services) => set({ services }), + setMenuItems: (menuItems) => set({ menuItems }), +}), { + name: 'news-store', + storage: createJSONStorage(() => localStorage), })); + +// 初始化时强制写入 localStorage（仅在首次加载时） +if (typeof window !== 'undefined') { + const stored = localStorage.getItem('news-store'); + if (!stored) { + // 如果 localStorage 中没有数据，手动触发一次保存 + useNewsStore.setState(initialData); + } +}