- <>
-
-
-
-
- <>
-
-
创建您的项目
-
-
- 导入Git项目
-
-
|
-
- 选择更多模板
-
+
+
+
+
+
创建您的项目
+
+
+ 导入Git项目
+
+
|
+
+ 选择更多模板
-
-
+
+
使用模板快速开始
-
- {TemplateCardData.map((item) => createTemplateCard(item.title, item.icon))}
+
+ {TemplateCardData.map((item) => (
+
+ ))}
- <>
-
阅读文档了解如何使用
-
- {LinkCardData.map((item) => createLinkCard(item.linkText, item.LinkUrl, item.linkDesc))}
-
-
+
+
阅读文档了解如何使用
+
+ {LinkCardData.map((item) => (
+
+ ))}
+
);
}
+
+const TemplateCard: React.FC<{ title: string; icon: string }> = ({ title, icon }) => (
+
+
+
+
+
+
+ {title}
+
+
+
+ 快速开始 {title} 开发
+
+
+
+);
+
+const LinkCard: React.FC<{ linkText: string; linkUrl: string; linkDesc: string }> = ({
+ linkText,
+ linkUrl,
+ linkDesc,
+}) => (
+
+
+
+);
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index a0ead09..122e4a7 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1,23 +1,52 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import { motion, useAnimation } from 'framer-motion';
+
import { Header } from '@/components/main/header';
-import { Sider } from '@/components/main/sider';
+import Sider from '@/components/main/sider';
export default function MainLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
+ const pathname = usePathname();
+
+ const controls = useAnimation();
+
+ useEffect(() => {
+ controls.start({
+ y: 0,
+ opacity: 1,
+ scale: 1,
+ transition: { ease: 'easeInOut', duration: 1 },
+ });
+ }, [pathname, controls]);
+
return (
-
+
-
+
-
{children}
-
+
+ {' '}
+
+ {children}
+
+
);
diff --git a/src/app/edit/layout.tsx b/src/app/edit/layout.tsx
index d011ee1..2dd5702 100644
--- a/src/app/edit/layout.tsx
+++ b/src/app/edit/layout.tsx
@@ -68,7 +68,6 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
});
}, [pathname, controls]);
- // const { editors } = useEditorStore();
const { models, setModels } = useModelsStore();
const { setActiveModel } = useActiveModelStore();
@@ -80,8 +79,6 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
};
function handleFileDrop({ active, over }: any) {
- // 清除dropIcon
-
dragIconRef.style.display = 'none';
dragIconRef.style.left = '0px';
dragIconRef.style.top = '0px';
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6e910de..d595cce 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,7 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
-import { NextDevtoolsProvider } from '@next-devtools/core';
import './globals.css';
-import { ModalProvider } from '@/components/provider/modal-provider';
const inter = Inter({ subsets: ['latin'] });
@@ -19,12 +17,7 @@ export default function RootLayout({
}>) {
return (
-
-
- {children}
-
-
-
+ {children}
);
}
diff --git a/src/components/main/sider/index.tsx b/src/components/main/sider/index.tsx
index 39e7bb4..5950236 100644
--- a/src/components/main/sider/index.tsx
+++ b/src/components/main/sider/index.tsx
@@ -3,73 +3,47 @@
import Link from 'next/link';
import React from 'react';
import { usePathname } from 'next/navigation';
-import { GoFileDirectory } from 'react-icons/go';
-import { MdComputer } from 'react-icons/md';
import { Button } from '@/components/ui/button';
import { cn } from '@/utils';
-import { PATHS } from '@/utils';
+import { RouterDataList } from '@/utils';
import { useModal } from '@/hooks/useModal';
+import { CreateProjectModal } from '@/components/modals/create-project-modal';
-interface RouterData {
- title: string;
- icon: React.ReactNode;
- link: string;
-}
-
-const RouterDataList: RouterData[] = [
- {
- title: '项目',
- icon:
,
- link: PATHS.MAIN_DASHBOARD,
- },
- {
- title: '文档',
- icon:
,
- link: PATHS.MAIN_TEMPLATES,
- },
-];
-
-const renderRouterDataList = (data: RouterData[], currentPath: string) => {
- return data.map((item, index) => {
- return (
-
-
{item.icon}
-
{item.title}
-
- );
- });
-};
-
-interface SiderProps {}
-
-export const Sider: React.FC
= () => {
- const currentRoute = usePathname();
+const Sider: React.FC = () => {
+ const currentPath = usePathname();
const { onOpen } = useModal();
return (
-