qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

将部分数据迁移到newsStore，后续全部迁移

This commit is contained in:
qiuchenfan 2025-11-21 17:19:31 +08:00
parent 7b22e448be
commit a2cb36866c
5 changed files with 167 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/news/body/Culturebg.tsx
View File

@ -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，水平居中，相对定位

67
app/components/news/body/ImageGridSection.tsx
View File

@ -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 外边距
弹性 默认纵向 大屏子元素横向 */ }

53
app/components/news/body/Integrated.tsx
View File

@ -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，水平居中
<div className="w-[1514px] h-[573px] mx-auto ">

20
app/components/news/header/TopNav.tsx
View File

@ -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) => {

154
app/store/newsStore.ts
View File

@ -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<NewsStore>((set,get) => ({
news: [],
setNews: (news: any) => set({ news }),
}));
export const newsStore = create<NewsStore>(() => ({
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' },
],
}));