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

3 months ago · a6734ba143
7 changed files with 28 additions and 17 deletions
--- a/src/api/cms/cmsWebsite/model/index.ts
+++ b/src/api/cms/cmsWebsite/model/index.ts
@ -1,6 +1,7 @@
 import type { PageParam } from '@/api';
 import {CmsWebsiteSetting} from "@/api/cms/cmsWebsiteSetting/model";
 import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";

 /**
 * 网站信息记录表
@ -126,6 +127,12 @@ export interface CmsWebsite {
  topNavs?: CmsNavigation[];
  // 底部导航菜单
  bottomNavs?: CmsNavigation[];
+  // 导航菜单列表
+  navigations?: CmsNavigation[];
+  // 顶部导航菜单
+  topNavs?: CmsNavigation[];
+  // 底部导航菜单
+  bottomNavs?: CmsNavigation[];
 }

 /**
--- a/src/api/layout/index.ts
+++ b/src/api/layout/index.ts
@ -67,6 +67,8 @@ export async function getTopNavigations(): Promise<CmsNavigation[]> {
  return getNavigations(1); // position: 1 表示顶部菜单
 }

+
+
 /**
 * 获取当前登录的用户信息、菜单、权限、角色
 */
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -20,7 +20,7 @@
 * {
  box-sizing: border-box;
  padding: 0;
-  margin: 0;
+  margin: 0 auto;
 }

 html,
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -89,7 +89,7 @@ export default function RootLayout({
    <html lang="zh-CN">
      <body className="antialiased">
        <Header />
-        <main>{children}</main>
+        <main className="min-h-screen">{children}</main>
        <Footer />
      </body>
    </html>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,10 +1,11 @@
 import SiteInfoDisplay from '@/components/sections/SiteInfoDisplay';
 import NavigationDisplay from '@/components/sections/NavigationDisplay';
+import Container from '@/components/layout/Container';

 export default function Home() {
  return (
    <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">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            Zustand 全局状态管理演示
@ -114,7 +115,7 @@ export default function Home() {
            </div>
          </div>
        </div>
-      </div>
+      </Container>
    </div>
  );
 }
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@ -3,17 +3,17 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useSiteInfoValue } from '@/hooks/useSiteInfo';
 import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
+import Container from '@/components/layout/Container';

 const Footer = () => {
-  const { siteInfo, bottomNavs, isLoaded, isNavsLoaded } = useSiteInfoValue();
+  const { siteInfo, bottomNavs } = useSiteInfoValue();
  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) {
      // 顶级菜单作为分组标题
-      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;
  }, {});
@ -52,7 +52,7 @@ const Footer = () => {

  return (
    <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="lg:col-span-1">
@ -113,15 +113,15 @@ const Footer = () => {
            <div key={groupTitle}>
              <h3 className="text-lg font-semibold mb-4">{groupTitle}</h3>
              <ul className="space-y-2">
-                {links.map((link: any, index: number) => (
+                {links.map((link: CmsNavigation | { title: string; path: string }, index: number) => (
                  <li key={index}>
                    <Link
-                      href={link.path || link.href || '#'}
+                      href={link.path || '#'}
                      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>
                  </li>
                ))}
@ -183,7 +183,7 @@ const Footer = () => {
            </div>
          </div>
        </div>
-      </div>
+      </Container>
    </footer>
  );
 };
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@ -4,6 +4,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import {usePathname} from 'next/navigation';
 import {useSiteInfo} from '@/hooks/useSiteInfo';
+import Container from '@/components/layout/Container';

 const Header = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -30,7 +31,7 @@ const Header = () => {

    return (
        <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">
                    {/* Logo 和站点名称 */}
                    <div className="flex items-center">
@ -116,7 +117,7 @@ const Header = () => {
                        </div>
                    </div>
                )}
-            </div>
+            </Container>
        </header>
    );
 };