314 lines
10 KiB
TypeScript
314 lines
10 KiB
TypeScript
import { LiveProvider, LivePreview, LiveError, LiveEditor } from "react-live";
|
||
import { ThemeProvider } from "./components/ThemePrivider";
|
||
import { useState } from "react";
|
||
|
||
const functionBlockList = [
|
||
`
|
||
const cpn = () => {
|
||
function handleClick() {
|
||
console.log("Hi there!");
|
||
}
|
||
|
||
return (
|
||
<div className="bg-primary-1 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h1 className="text-primary text-5xl md:text-7xl font-extrabold mb-4">
|
||
AI智能建站助手
|
||
</h1>
|
||
<p className="text-primary text-xl md:text-2xl mb-8">
|
||
让我们帮助您快速构建和优化您的网站
|
||
</p>
|
||
<button
|
||
onClick={handleClick}
|
||
className="font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out"
|
||
>
|
||
开始使用
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
`
|
||
const cpn = () => {
|
||
return (
|
||
<div className="bg-background-2 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto">
|
||
<h2 className="text-text-1 text-4xl font-bold mb-4 text-center">
|
||
功能介绍
|
||
</h2>
|
||
<p className="text-text-2 text-lg mb-8 text-center">
|
||
AI智能建站助手提供多种功能，帮助您轻松创建和管理网站
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div className="p-6 rounded-lg shadow-lg text-center">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
自动布局
|
||
</h3>
|
||
<p className="text-text-3">
|
||
通过AI技术自动生成最优的网页布局，提高用户体验
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg shadow-lg text-center">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
智能优化
|
||
</h3>
|
||
<p className="text-text-3">
|
||
利用大数据分析和优化工具提升网站性能和SEO排名
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg shadow-lg text-center">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
个性化定制
|
||
</h3>
|
||
<p className="text-text-3">
|
||
提供多种定制选项，让您的网站独一无二
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
`
|
||
const cpn = () => {
|
||
return (
|
||
<div className="bg-background-1 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h2 className="text-text-1 text-4xl font-bold mb-4">
|
||
使用案例
|
||
</h2>
|
||
<p className="text-text-2 text-lg mb-8">
|
||
了解其他用户如何利用我们的工具创建令人惊叹的网站
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div className="p-6 rounded-lg shadow-lg">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
案例一
|
||
</h3>
|
||
<p className="text-text-3">
|
||
某公司利用我们的AI工具创建了一个高效、美观的企业官网
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg shadow-lg">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
案例二
|
||
</h3>
|
||
<p className="text-text-3">
|
||
某设计师通过我们的平台轻松构建了一个个人作品展示网站
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
`
|
||
const cpn = () => {
|
||
return (
|
||
<div className="bg-background-2 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h2 className="text-text-1 text-4xl font-bold mb-4">
|
||
用户评价
|
||
</h2>
|
||
<p className="text-text-2 text-lg mb-8">
|
||
我们的用户对我们的工具评价很高
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div className="p-6 rounded-lg shadow-lg">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
用户A
|
||
</h3>
|
||
<p className="text-text-3">
|
||
“AI智能建站助手帮助我节省了大量时间，让我的网站更专业。”
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg shadow-lg">
|
||
<h3 className="text-primary text-2xl font-semibold mb-4">
|
||
用户B
|
||
</h3>
|
||
<p className="text-text-3">
|
||
“非常容易使用，功能强大，效果出色！”
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
`
|
||
const cpn = () => {
|
||
return (
|
||
<div className="bg-background-1 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h2 className="text-text-1 text-4xl font-bold mb-4">
|
||
常见问题
|
||
</h2>
|
||
<p className="text-text-2 text-lg mb-8">
|
||
解答您在使用过程中可能遇到的问题
|
||
</p>
|
||
<div className="text-left max-w-3xl mx-auto">
|
||
<div className="mb-8">
|
||
<h3 className="text-primary text-2xl font-semibold mb-2">
|
||
问题一：如何开始使用AI智能建站助手？
|
||
</h3>
|
||
<p className="text-text-3">
|
||
您只需注册一个账号，选择一个模板即可开始构建您的网站。
|
||
</p>
|
||
</div>
|
||
<div className="mb-8">
|
||
<h3 className="text-primary text-2xl font-semibold mb-2">
|
||
问题二：是否支持移动端？
|
||
</h3>
|
||
<p className="text-text-3">
|
||
是的，我们的所有模板都是响应式设计，兼容各类设备。
|
||
</p>
|
||
</div>
|
||
<div className="mb-8">
|
||
<h3 className="text-primary text-2xl font-semibold mb-2">
|
||
问题三：如何获取技术支持？
|
||
</h3>
|
||
<p className="text-text-3">
|
||
您可以通过我们的客服系统或者发送邮件获取技术支持。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
`
|
||
const cpn = () => {
|
||
return (
|
||
<div className="bg-primary-1 py-16 px-8">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h2 className="text-text-1 text-4xl font-bold mb-4">
|
||
联系我们
|
||
</h2>
|
||
<p className="text-text-2 text-lg mb-8">
|
||
如果您有任何问题或建议，请随时与我们联系
|
||
</p>
|
||
<form className="max-w-3xl mx-auto text-left">
|
||
<div className="mb-4">
|
||
<label className="block text-text-1 text-sm font-bold mb-2">
|
||
姓名
|
||
</label>
|
||
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-text-1 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="您的姓名"/>
|
||
</div>
|
||
<div className="mb-4">
|
||
<label className="block text-text-1 text-sm font-bold mb-2">
|
||
邮箱
|
||
</label>
|
||
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-text-1 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="您的邮箱"/>
|
||
</div>
|
||
<div className="mb-4">
|
||
<label className="block text-text-1 text-sm font-bold mb-2">
|
||
留言
|
||
</label>
|
||
<textarea className="shadow appearance-none border rounded w-full py-2 px-3 text-text-1 leading-tight focus:outline-none focus:shadow-outline" id="message" placeholder="您的留言"></textarea>
|
||
</div>
|
||
<button className="bg-primary-6 font-bold py-2 px-4 transition duration-300 ease-in-out" type="button">
|
||
提交
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
`,
|
||
];
|
||
|
||
const code = (func: string) => `
|
||
${func}
|
||
render(cpn)
|
||
`;
|
||
|
||
const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
|
||
return (
|
||
<div className="fixed inset-0 flex flex-col items-center bg-gray-900 p-4 overflow-y-auto">
|
||
<div className="fixed top-4 right-2">
|
||
<button
|
||
className="bg-primary-6 text-white py-2 px-4 rounded-lg mr-2"
|
||
onClick={() => setShowEdit(false)}
|
||
>
|
||
关闭编辑框
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-col items-center w-full space-y-4 mt-12">
|
||
{functionBlockList.map((func, index) => {
|
||
return (
|
||
<div
|
||
className="w-full p-4 text-white bg-gray-800 font-mono"
|
||
key={index}
|
||
>
|
||
<LiveEditor
|
||
code={code(func)}
|
||
language={"tsx"}
|
||
onChange={(code) => {
|
||
functionBlockList[index] = code;
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export const DemoApp = () => {
|
||
const [theme, setTheme] = useState<"system" | "dark" | "light">("system");
|
||
|
||
const [showEdit, setShowEdit] = useState(false);
|
||
|
||
return (
|
||
<div>
|
||
<ThemeProvider activeTheme={theme}>
|
||
{showEdit && editor(setShowEdit)}
|
||
{!showEdit && (
|
||
<>
|
||
<div className="fixed top-4 right-4">
|
||
<button
|
||
className="bg-primary-6 text-white py-2 px-4 rounded-lg mr-2"
|
||
onClick={() => setTheme("system")}
|
||
>
|
||
跟随系统
|
||
</button>
|
||
<button
|
||
className="bg-primary-6 text-white py-2 px-4 rounded-lg mr-2"
|
||
onClick={() => setTheme("dark")}
|
||
>
|
||
深色模式
|
||
</button>
|
||
<button
|
||
className="bg-primary-6 text-white py-2 px-4 rounded-lg"
|
||
onClick={() => setTheme("light")}
|
||
>
|
||
浅色模式
|
||
</button>
|
||
<button
|
||
className="bg-primary-6 text-white py-2 px-4 rounded-lg ml-2"
|
||
onClick={() => setShowEdit(true)}
|
||
>
|
||
打开编辑框
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
{functionBlockList.map((func, index) => {
|
||
return (
|
||
<LiveProvider code={code(func)} noInline key={index}>
|
||
<LivePreview />
|
||
<LiveError />
|
||
</LiveProvider>
|
||
);
|
||
})}
|
||
</ThemeProvider>
|
||
</div>
|
||
);
|
||
};
|