gxwebsoft
/
next-10398
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化网站底部、解决居中问题

master
科技小王子 3 months ago
parent
4d3644599d
commit
a6734ba143
7 changed files with 28 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/api/cms/cmsWebsite/model/index.ts
  2. 2
      src/api/layout/index.ts
  3. 2
      src/app/globals.css
  4. 2
      src/app/layout.tsx
  5. 5
      src/app/page.tsx
  6. 22
      src/components/layout/Footer.tsx
  7. 5
      src/components/layout/Header.tsx

7
src/api/cms/cmsWebsite/model/index.ts
View File

@ -1,6 +1,7 @@
import type { PageParam } from '@/api'; import type { PageParam } from '@/api';
import {CmsWebsiteSetting} from "@/api/cms/cmsWebsiteSetting/model"; import {CmsWebsiteSetting} from "@/api/cms/cmsWebsiteSetting/model";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"; import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
/** /**
* 网站信息记录表 * 网站信息记录表
@ -126,6 +127,12 @@ export interface CmsWebsite {
topNavs?: CmsNavigation[]; topNavs?: CmsNavigation[];
// 底部导航菜单 // 底部导航菜单
bottomNavs?: CmsNavigation[]; bottomNavs?: CmsNavigation[];
// 导航菜单列表
navigations?: CmsNavigation[];
// 顶部导航菜单
topNavs?: CmsNavigation[];
// 底部导航菜单
bottomNavs?: CmsNavigation[];
} }
/** /**

2
src/api/layout/index.ts
View File

@ -67,6 +67,8 @@ export async function getTopNavigations(): Promise<CmsNavigation[]> {
return getNavigations(1); // position: 1 表示顶部菜单 return getNavigations(1); // position: 1 表示顶部菜单
} }
/** /**
* 获取当前登录的用户信息、菜单、权限、角色 * 获取当前登录的用户信息、菜单、权限、角色
*/ */

2
src/app/globals.css
View File

@ -20,7 +20,7 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
margin: 0;
margin: 0 auto;
} }
html, html,

2
src/app/layout.tsx
View File

@ -89,7 +89,7 @@ export default function RootLayout({
<html lang="zh-CN"> <html lang="zh-CN">
<body className="antialiased"> <body className="antialiased">
<Header /> <Header />
<main>{children}</main>
<main className="min-h-screen">{children}</main>
<Footer /> <Footer />
</body> </body>
</html> </html>

5
src/app/page.tsx
View File

@ -1,10 +1,11 @@
import SiteInfoDisplay from '@/components/sections/SiteInfoDisplay'; import SiteInfoDisplay from '@/components/sections/SiteInfoDisplay';
import NavigationDisplay from '@/components/sections/NavigationDisplay'; import NavigationDisplay from '@/components/sections/NavigationDisplay';
import Container from '@/components/layout/Container';
export default function Home() { export default function Home() {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<Container className="py-12">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4"> <h1 className="text-4xl font-bold text-gray-900 mb-4">
Zustand 全局状态管理演示 Zustand 全局状态管理演示
@ -114,7 +115,7 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </div>
</div>
</Container>
</div> </div>
); );
} }

22
src/components/layout/Footer.tsx
View File

@ -3,17 +3,17 @@ import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { useSiteInfoValue } from '@/hooks/useSiteInfo'; import { useSiteInfoValue } from '@/hooks/useSiteInfo';
import { CmsNavigation } from '@/api/cms/cmsNavigation/model'; import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
import Container from '@/components/layout/Container';
const Footer = () => { const Footer = () => {
const { siteInfo, bottomNavs, isLoaded, isNavsLoaded } = useSiteInfoValue();
const { siteInfo, bottomNavs } = useSiteInfoValue();
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
console.log(bottomNavs,'bottomNavs')
// 按父级分组底部导航 // 按父级分组底部导航
const groupedNavs = bottomNavs.reduce((groups: Record<string, CmsNavigation[]>, nav) => {
const groupedNavs = bottomNavs.reduce((groups: Record<string, CmsNavigation[]>, nav: CmsNavigation) => {
if (nav.parentId === 0) { if (nav.parentId === 0) {
// 顶级菜单作为分组标题 // 顶级菜单作为分组标题
groups[nav.title || 'default'] = bottomNavs.filter(child => child.parentId === nav.navigationId);
groups[nav.title || 'default'] = bottomNavs.filter((child: CmsNavigation) => child.parentId === nav.navigationId);
} }
return groups; return groups;
}, {}); }, {});
@ -52,7 +52,7 @@ const Footer = () => {
return ( return (
<footer className="bg-gray-900 text-white"> <footer className="bg-gray-900 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<Container className="py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* 网站信息 */} {/* 网站信息 */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
@ -113,15 +113,15 @@ const Footer = () => {
<div key={groupTitle}> <div key={groupTitle}>
<h3 className="text-lg font-semibold mb-4">{groupTitle}</h3> <h3 className="text-lg font-semibold mb-4">{groupTitle}</h3>
<ul className="space-y-2"> <ul className="space-y-2">
{links.map((link: any, index: number) => (
{links.map((link: CmsNavigation | { title: string; path: string }, index: number) => (
<li key={index}> <li key={index}>
<Link <Link
href={link.path || link.href || '#'}
href={link.path || '#'}
className="text-gray-400 hover:text-white transition-colors duration-200 text-sm" className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
target={link.target === '_blank' ? '_blank' : undefined}
rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
target={'target' in link && link.target === '_blank' ? '_blank' : undefined}
rel={'target' in link && link.target === '_blank' ? 'noopener noreferrer' : undefined}
> >
{link.title || link.name}
{link.title}
</Link> </Link>
</li> </li>
))} ))}
@ -183,7 +183,7 @@ const Footer = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
</Container>
</footer> </footer>
); );
}; };

5
src/components/layout/Header.tsx
View File

@ -4,6 +4,7 @@ import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import {usePathname} from 'next/navigation'; import {usePathname} from 'next/navigation';
import {useSiteInfo} from '@/hooks/useSiteInfo'; import {useSiteInfo} from '@/hooks/useSiteInfo';
import Container from '@/components/layout/Container';
const Header = () => { const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -30,7 +31,7 @@ const Header = () => {
return ( return (
<header className="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50"> <header className="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Container>
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
{/* Logo 和站点名称 */} {/* Logo 和站点名称 */}
<div className="flex items-center"> <div className="flex items-center">
@ -116,7 +117,7 @@ const Header = () => {
</div> </div>
</div> </div>
)} )}
</div>
</Container>
</header> </header>
); );
}; };

Write Preview
Loading…
Cancel
Save