Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: 🎨 代码重构,删除一些没必要的代码封装 #75

Merged
merged 1 commit into from
Jul 19, 2024
Merged

style: 🎨 代码重构,删除一些没必要的代码封装 #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 106 additions & 130 deletions src/app/(main)/(router)/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,152 +1,128 @@
'use client';

const TemplateCardData = [
{
title: 'Node',
icon: 'https://lf-cdn.marscode.com.cn/obj/eden-cn/ljhwz_lkpkbvsj/ljhwZthlaukjlkulzlp/project_template/prod/e78a9920fc913dcd1b339f0ee1493e429fb237c8/images/native_nodejs/icon.svg',
},
{
title: 'Vue3',
icon: 'https://lf-cdn.marscode.com.cn/obj/eden-cn/ljhwz_lkpkbvsj/ljhwZthlaukjlkulzlp/project_template/prod/e78a9920fc913dcd1b339f0ee1493e429fb237c8/images/native_nodejs/icon.svg',
},
{
title: 'React',
icon: 'https://lf-cdn.marscode.com.cn/obj/eden-cn/ljhwz_lkpkbvsj/ljhwZthlaukjlkulzlp/project_template/prod/e78a9920fc913dcd1b339f0ee1493e429fb237c8/images/native_golang/icon.svg',
},
];
const LinkCardData = [
{
linkText: 'Node1',
LinkUrl: 'https://www.baidu.com',
linkDesc: 'ai帮助你学习前端后端运维安全',
},
{
linkText: 'Node2',
LinkUrl: 'https://www.baidu.com',
linkDesc: 'ai帮助你学习前端后端运维安全',
},
{
linkText: 'Node3',
LinkUrl: 'https://www.baidu.com',
linkDesc: 'ai帮助你学习前端后端运维安全',
},
];
import React from 'react';

function createTemplateCard(templateName: string, templateIconUrl: string) {
return (
<div
key={templateName}
className=" group relative h-[20vh] py-[16px] px-[16px] duration-200 transition-all rounded-[8px] hover:rounded-[16px] hover:bg-black/50 bg-black/40 overflow-hidden flex flex-col w-1/3 cursor-pointer"
>
<div className="flex items-center h-[28px]">
<div className="w-[28px] h-[28px] rounded-[6px] flex items-center justify-center">
<img className="rounded-[6px]" width="28" height="28" src={templateIconUrl} />
</div>
<div className="font-[600] text-[16px] my-[12px] flex-1 leading-[20px] h-[20px] ml-[12px]">
{templateName}
</div>
</div>
<div className="text-[12px] overflow-hidden flex-1 text-ellipsis mt-[16px] text-[var(--text-default)]">
快速开始 {templateName} 开发
</div>
<div className="mt-[16px]">
<div className="bg-tr-1 bg-white/5 text-[14px] group-hover:bg-white/15 w-full font-[600] rounded-[4px] py-[5px] px-[16px] text-center">
体验
</div>
</div>
</div>
);
}

function createLinkCard(linkText: string, linkUrl: string, linkDesc: string) {
return (
<a
key={linkText}
rel="noreferrer"
className="w-1/3 cursor-pointer"
href={linkUrl}
target="_blank"
>
<div className="relative group py-[20px] px-[20px] rounded-[8px] hover:rounded-[16px] hover:bg-[#282A2E] bg-[#1F2124] overflow-hidden flex flex-col transition-all duration-200">
<div className="flex items-center h-[16px] w-full place-content-between mb-[12px]">
<div className="font-[600] text-[16px] my-[12px] flex-1 leading-[20px] h-[20px]">
{linkText}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="none"
viewBox="0 0 16 16"
className="hidden group-hover:inline-block"
>
<path
fill="#ADB0B8"
fillRule="evenodd"
d="M12.582 9.772c0 .185-.149.334-.333.334h-.667a.333.333 0 0 1-.333-.334V5.714l-6.984 6.984a.333.333 0 0 1-.471 0l-.472-.471a.333.333 0 0 1 0-.472l6.983-6.983H6.25a.333.333 0 0 1-.333-.333v-.667c0-.184.149-.333.333-.333h6c.184 0 .333.15.333.333z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="text-[12px] h-[36px] leading-[18px] overflow-hidden text-ellipsis text-[#dadde5]">
{linkDesc}
</div>
</div>
</a>
);
}
import { TemplateCardData, LinkCardData } from '@/utils';

export default function DashboardPage() {
return (
<div className="bg-[#181a1f] w-full h-full flex justify-center items-center overflow-hidden">
<div className=" flex flex-col items-start justify-start gap-y-12 h-full w-[70%] overflow-auto pt-12">
<div className=" flex flex-col gap-y-5">
<span className=" text-[32px] font-[800] leading-[38.2px]">欢迎使用 Online Edit</span>
<span className=" text-[14px] text-[#c7ccd6]">
<div className="flex flex-col items-start justify-start gap-y-12 h-full w-[70%] overflow-auto pt-12">
<div className="flex flex-col gap-y-5">
<span className="text-[32px] font-[800] leading-[38.2px]">欢迎使用 Online Edit</span>
<span className="text-[14px] text-[#c7ccd6]">
一款集成 AI 能力的 Online IDE，提供开箱即用的开发环境，简化开发过程，提高效率
</span>
</div>

<div className="relative flex flex-col pt-6 px-6 w-full h-[40vh] rounded-lg overflow-hidden">
<>
<img
src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/A0_prod/static/image/create-from-template-bg.f1c04af1.png"
alt=""
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
/>
<div className="absolute inset-0 w-full h-full bg-gray-800 opacity-20 pointer-events-none"></div>
<div className="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none">
<div className=" pointer-events-none bg-radial-[rgba(255,255,255,0.667)-rgba(233,242,255,0.25)] bg-center bg-no-repeat bg-contain w-full h-full"></div>
</div>
</>
<>
<div className=" flex justify-start items-center h-[3.5vh] font-[800]">
<span className=" text-[24px] ml-4">创建您的项目</span>
<div className=" ml-auto flex gap-x-2 items-center">
<div className=" cursor-pointer text-[14px] p-3 flex items-center justify-center rounded-md font-[500] w-[7vw] h-[3.2vh] hover:bg-white/20 hover:text-white">
导入Git项目
</div>
<span className=" font-[600] text-[12px]">|</span>
<div className=" cursor-pointer text-[14px] p-3 flex items-center justify-center rounded-md font-[500] w-[7vw] h-[3.2vh] hover:bg-white/20 hover:text-white">
选择更多模板
</div>
<img
src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/A0_prod/static/image/create-from-template-bg.f1c04af1.png"
alt=""
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
/>
<div className="absolute inset-0 w-full h-full bg-gray-800 opacity-20 pointer-events-none"></div>
<div className="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none">
<div className="pointer-events-none bg-radial-[rgba(255,255,255,0.667)-rgba(233,242,255,0.25)] bg-center bg-no-repeat bg-contain w-full h-full"></div>
</div>
<div className="flex justify-start items-center h-[3.5vh] font-[800]">
<span className="text-[24px] ml-4">创建您的项目</span>
<div className="ml-auto flex gap-x-2 items-center">
<div className="cursor-pointer text-[14px] p-3 flex items-center justify-center rounded-md font-[500] w-[7vw] h-[3.2vh] hover:bg-white/20 hover:text-white">
导入Git项目
</div>
<span className="font-[600] text-[12px]">|</span>
<div className="cursor-pointer text-[14px] p-3 flex items-center justify-center rounded-md font-[500] w-[7vw] h-[3.2vh] hover:bg-white/20 hover:text-white">
选择更多模板
</div>
</div>
</>
<p className=" text-[#737780] leading-[17px] ml-4 mb-[12px] mt-[26px] text-[14px] px-[8px]">
</div>
<p className="text-[#737780] leading-[17px] ml-4 mb-[12px] mt-[26px] text-[14px] px-[8px]">
使用模板快速开始
</p>
<div className=" flex items-center justify-center mt-4 w-full gap-x-4 px-2">
{TemplateCardData.map((item) => createTemplateCard(item.title, item.icon))}
<div className="flex items-center justify-center mt-4 w-full gap-x-4 px-2">
{TemplateCardData.map((item) => (
<TemplateCard key={item.title} title={item.title} icon={item.icon} />
))}
</div>
</div>
<>
<p className=" text-[#737780] text-[14px]">阅读文档了解如何使用</p>
<div className=" flex gap-x-4 items-center justify-center w-full mt-[-3vh]">
{LinkCardData.map((item) => createLinkCard(item.linkText, item.LinkUrl, item.linkDesc))}
</div>
</>

<p className="text-[#737780] text-[14px]">阅读文档了解如何使用</p>
<div className="flex gap-x-4 items-center justify-center w-full mt-[-3vh]">
{LinkCardData.map((item) => (
<LinkCard
key={item.linkText}
linkText={item.linkText}
linkUrl={item.linkUrl}
linkDesc={item.linkDesc}
/>
))}
</div>
</div>
</div>
);
}

const TemplateCard: React.FC<{ title: string; icon: string }> = ({ title, icon }) => (
<div
key={title}
className="group relative h-[20vh] py-[16px] px-[16px] duration-200 transition-all rounded-[8px] hover:rounded-[16px] hover:bg-black/50 bg-black/40 overflow-hidden flex flex-col w-1/3 cursor-pointer"
>
<div className="flex items-center h-[28px]">
<div className="w-[28px] h-[28px] rounded-[6px] flex items-center justify-center">
<img className="rounded-[6px]" width="28" height="28" src={icon} alt={title} />
</div>
<div className="font-[600] text-[16px] my-[12px] flex-1 leading-[20px] h-[20px] ml-[12px]">
{title}
</div>
</div>
<div className="text-[12px] overflow-hidden flex-1 text-ellipsis mt-[16px] text-[var(--text-default)]">
快速开始 {title} 开发
</div>
<div className="mt-[16px]">
<div className="bg-tr-1 bg-white/5 text-[14px] group-hover:bg-white/15 w-full font-[600] rounded-[4px] py-[5px] px-[16px] text-center">
体验
</div>
</div>
</div>
);

const LinkCard: React.FC<{ linkText: string; linkUrl: string; linkDesc: string }> = ({
linkText,
linkUrl,
linkDesc,
}) => (
<a
key={linkText}
rel="noreferrer"
className="w-1/3 cursor-pointer"
href={linkUrl}
target="_blank"
>
<div className="relative group py-[20px] px-[20px] rounded-[8px] hover:rounded-[16px] hover:bg-[#282A2E] bg-[#1F2124] overflow-hidden flex flex-col transition-all duration-200">
<div className="flex items-center h-[16px] w-full place-content-between mb-[12px]">
<div className="font-[600] text-[16px] my-[12px] flex-1 leading-[20px] h-[20px]">
{linkText}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="none"
viewBox="0 0 16 16"
className="hidden group-hover:inline-block"
>
<path
fill="#ADB0B8"
fillRule="evenodd"
d="M12.582 9.772c0 .185-.149.334-.333.334h-.667a.333.333 0 0 1-.333-.334V5.714l-6.984 6.984a.333.333 0 0 1-.471 0l-.472-.471a.333.333 0 0 1 0-.472l6.983-6.983H6.25a.333.333 0 0 1-.333-.333v-.667c0-.184.149-.333.333-.333h6c.184 0 .333.15.333.333z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="text-[12px] h-[36px] leading-[18px] overflow-hidden text-ellipsis text-[#dadde5]">
{linkDesc}
</div>
</div>
</a>
);
39 changes: 34 additions & 5 deletions src/app/(main)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className=" flex flex-col w-[100vw] h-[100vh] overflow-hidden">
<div className=" w-[100vw] h-[5vh] bg-[#24262B] flex items-center">
<Header></Header>
<Header />
</div>
<div className=" flex-1 flex flex-row bg-red-400 w-[100vw]">
<div className=" h-full w-[18vw] bg-gray-400">
<Sider></Sider>
<Sider />
</div>
<div className=" h-full w-[5px] bg-[#1f2023]"></div>
<div className=" h-full flex-1 bg-black">{children}</div>
<div></div>
<div className=" h-full flex-1 bg-black">
{' '}
<motion.div
key={pathname}
className=" overflow-y-scroll h-full hide-scrollbar"
initial={{ y: 20, opacity: 0, scale: 0.95 }}
animate={controls}
transition={{ ease: 'easeInOut', duration: 1 }}
>
{children}
</motion.div>
</div>
</div>
</div>
);
Expand Down
3 changes: 0 additions & 3 deletions src/app/edit/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
});
}, [pathname, controls]);

// const { editors } = useEditorStore();
const { models, setModels } = useModelsStore();

const { setActiveModel } = useActiveModelStore();
Expand All @@ -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';
Expand Down
9 changes: 1 addition & 8 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'] });

Expand All @@ -19,12 +17,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<NextDevtoolsProvider>
{children}
<ModalProvider />
</NextDevtoolsProvider>
</body>
<body className={inter.className}>{children}</body>
</html>
);
}
Loading
Loading