Compare commits
2 Commits
15473c6f9c
...
10506e6295
| Author | SHA1 | Date |
|---|---|---|
|
|
10506e6295 | |
|
|
c184361576 |
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { newsStore } from '@/store/newsStore';
|
import { useNewsStore } from '@/store/newsStore';
|
||||||
|
|
||||||
export default function CultureBgPage() {
|
export default function CultureBgPage() {
|
||||||
// 定义logo数据数组,包含16个logo信息
|
// 定义logo数据数组,包含16个logo信息
|
||||||
const {logos} = newsStore();
|
const {logos} = useNewsStore();
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
||||||
import { newsStore } from '@/store/newsStore';
|
import { useNewsStore } from '@/store/newsStore';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -7,7 +7,7 @@ import React from 'react';
|
||||||
// LearnPage 组件定义
|
// LearnPage 组件定义
|
||||||
const LearnPage = () => {
|
const LearnPage = () => {
|
||||||
// 新闻列表数据,用于显示在右侧新闻列表区
|
// 新闻列表数据,用于显示在右侧新闻列表区
|
||||||
const {newsList,booksList} = newsStore();
|
const {newsList,booksList} = useNewsStore();
|
||||||
{/* 水平居中
|
{/* 水平居中
|
||||||
使用背景图片方式展示logo 覆盖 只显示1 外边距
|
使用背景图片方式展示logo 覆盖 只显示1 外边距
|
||||||
弹性 默认纵向 大屏子元素横向 */ }
|
弹性 默认纵向 大屏子元素横向 */ }
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import {newsStore }from '@/store/newsStore';
|
import {useNewsStore }from '@/store/newsStore';
|
||||||
|
|
||||||
export default function Integrated() {
|
export default function Integrated() {
|
||||||
// 在组件内部调用 zustand hook
|
// 在组件内部调用 zustand hook
|
||||||
const { services } = newsStore();
|
const { services } = useNewsStore();
|
||||||
|
|
||||||
// 将一维服务数组转换为三维数组,分为3列,每列4个服务项
|
// 将一维服务数组转换为三维数组,分为3列,每列4个服务项
|
||||||
// 结构: [[列1的4项], [列2的4项], [列3的4项]]
|
// 结构: [[列1的4项], [列2的4项], [列3的4项]]
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
|
||||||
interface NewsItem {
|
interface NewsItem {
|
||||||
id: string;
|
id: string;
|
||||||
content: string;
|
content: string;
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// LearnPage 组件定义
|
// LearnPage 组件定义
|
||||||
const Train = () => {
|
const Train = () => {
|
||||||
// 新闻列表数据,用于显示在右侧新闻列表区
|
// 新闻列表数据,用于显示在右侧新闻列表区
|
||||||
|
|
@ -62,6 +65,7 @@ const Train = () => {
|
||||||
<div className="w-5/6 mx-auto">
|
<div className="w-5/6 mx-auto">
|
||||||
{/* 顶部Logo区:使用背景图片方式展示logo,宽70高20 */}
|
{/* 顶部Logo区:使用背景图片方式展示logo,宽70高20 */}
|
||||||
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5 mt-20" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5 mt-20" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row">
|
<div className="flex flex-col lg:flex-row">
|
||||||
{/* 使用grid布局来安排图片的位置 */}
|
{/* 使用grid布局来安排图片的位置 */}
|
||||||
<div className="grid grid-cols-12 grid-rows-2 w-full h-130 ">
|
<div className="grid grid-cols-12 grid-rows-2 w-full h-130 ">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Button } from '@/ui/button';
|
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 [internalActiveKey, setInternalActiveKey] = useState('home');
|
||||||
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
||||||
const [searchKeyword, setSearchKeyword] = useState('');
|
const [searchKeyword, setSearchKeyword] = useState('');
|
||||||
const {menuItems} = newsStore();
|
const {menuItems} = useNewsStore();
|
||||||
|
|
||||||
|
|
||||||
const handleSearchSubmit = (e: React.FormEvent) => {
|
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import {
|
||||||
FaBookOpenReader,
|
FaBookOpenReader,
|
||||||
FaPenRuler,
|
FaPenRuler,
|
||||||
} from 'react-icons/fa6';
|
} from 'react-icons/fa6';
|
||||||
|
import { persist, createJSONStorage } from 'zustand/middleware'
|
||||||
|
|
||||||
|
|
||||||
//文化符号徽章
|
//文化符号徽章
|
||||||
|
|
@ -47,9 +48,16 @@ type NewsStore = {
|
||||||
booksList: NewsItem[];
|
booksList: NewsItem[];
|
||||||
services: ServiceItem[];
|
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<NewsStore>(() => ({
|
// 初始数据
|
||||||
|
const initialData = {
|
||||||
logos: [
|
logos: [
|
||||||
{ id: 1, src: "/public/logo/1.png", alt: "Logo 1" },
|
{ id: 1, src: "/public/logo/1.png", alt: "Logo 1" },
|
||||||
{ id: 2, src: "/public/logo/1.png", alt: "Logo 2" },
|
{ id: 2, src: "/public/logo/1.png", alt: "Logo 2" },
|
||||||
|
|
@ -150,4 +158,26 @@ export const newsStore = create<NewsStore>(() => ({
|
||||||
{ label: '联系热线', key: 'hotline', sectionId: 'hotline' },
|
{ label: '联系热线', key: 'hotline', sectionId: 'hotline' },
|
||||||
{ label: '综合服务', key: 'service', sectionId: 'service' },
|
{ label: '综合服务', key: 'service', sectionId: 'service' },
|
||||||
],
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useNewsStore = create<NewsStore>()(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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue