first commit
This commit is contained in:
pqcqaq
commit
df422fc505
|
|
@ -0,0 +1,14 @@
|
|||
node_modules
|
||||
demo/out
|
||||
lib
|
||||
npm-debug.log.*
|
||||
dist
|
||||
.DS_Store
|
||||
bundle-stats.html
|
||||
.next
|
||||
.out
|
||||
.history/
|
||||
stats.html
|
||||
/.idea
|
||||
/packages/react-live/LICENSE
|
||||
/packages/react-live/README.md
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "demo",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-live": "file:../react-live"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.31",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.3.4",
|
||||
"postcss": "^8.4.21",
|
||||
"sass": "^1.77.8",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
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 = (
|
||||
func: string,
|
||||
setShowEdit: React.Dispatch<React.SetStateAction<boolean>>
|
||||
) => {
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-gray-900">
|
||||
<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>
|
||||
<LiveEditor
|
||||
className="w-full h-full p-4 text-white bg-gray-800 font-mono overflow-y-auto"
|
||||
code={func}
|
||||
language={"tsx"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DemoApp = () => {
|
||||
const [theme, setTheme] = useState<"system" | "dark" | "light">("system");
|
||||
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ThemeProvider activeTheme={theme}>
|
||||
{showEdit && editor(functionBlockList.join("\n"), 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import { createContext, useContext, useEffect, useState } from "react";
|
||||
|
||||
type ThemeSection = "dark" | "light" | "system";
|
||||
|
||||
const themeMap: Record<ThemeSection, string> = {
|
||||
dark: "theme-color-dark",
|
||||
light: "theme-color-light",
|
||||
system: "",
|
||||
} as const;
|
||||
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode;
|
||||
defaultTheme?: ThemeSection;
|
||||
activeTheme?: ThemeSection;
|
||||
storageKey?: string;
|
||||
};
|
||||
|
||||
type ThemeProviderState = {
|
||||
theme: ThemeSection;
|
||||
setTheme: (theme: ThemeSection) => void;
|
||||
};
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: "system",
|
||||
setTheme: () => null,
|
||||
};
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = "system",
|
||||
storageKey = "app-theme",
|
||||
activeTheme,
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<ThemeSection>(
|
||||
() => (localStorage.getItem(storageKey) as ThemeSection) || defaultTheme
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
}, [theme]);
|
||||
|
||||
// 在组件退出前监听系统主题变化，实时切换主题
|
||||
useEffect(() => {
|
||||
const listener = (e: MediaQueryListEvent) => {
|
||||
if (e.matches) {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
setTheme("light");
|
||||
}
|
||||
};
|
||||
if (theme === "system") {
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
mediaQuery.matches ? setTheme("dark") : setTheme("light");
|
||||
mediaQuery.addEventListener("change", listener);
|
||||
return () => mediaQuery.removeEventListener("change", listener);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove(themeMap.dark, themeMap.light);
|
||||
if (theme !== "system") {
|
||||
root.classList.add(themeMap[theme]);
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
// 若外部更新了activeTheme，则更新theme
|
||||
useEffect(() => {
|
||||
if (activeTheme && activeTheme !== "system") {
|
||||
setTheme(activeTheme);
|
||||
}
|
||||
}, [activeTheme]);
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (theme: ThemeSection) => {
|
||||
localStorage.setItem(storageKey, theme);
|
||||
setTheme(theme);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useTheme = () => {
|
||||
const context = useContext(ThemeProviderContext);
|
||||
|
||||
if (context === undefined)
|
||||
throw new Error("useTheme必须在ThemeProvider中使用");
|
||||
|
||||
return context;
|
||||
};
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 导入主题 */
|
||||
@import "./theme/index.scss";
|
||||
|
||||
/* 下面是统一的颜色定义 */
|
||||
/* 默认的主题样式 */
|
||||
:root {
|
||||
background-color: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--primary-6);
|
||||
color: var(--color-bg-white);
|
||||
border: var(--border-1) solid var(--color-border-3);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--size-3) var(--size-4);
|
||||
font-size: var(--font-size-body-3);
|
||||
box-shadow: var(--shadow1-center);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--primary-5);
|
||||
border-color: var(--color-border-4);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: var(--primary-7);
|
||||
border-color: var(--color-border-4);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: var(--color-fill-1);
|
||||
color: var(--color-text-1);
|
||||
border: var(--border-1) solid var(--color-border-2);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--size-3);
|
||||
font-size: var(--font-size-body-3);
|
||||
box-shadow: var(--shadow1-center);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
border: var(--border-1) solid var(--color-border-1);
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: var(--size-5);
|
||||
box-shadow: var(--shadow2-center);
|
||||
font-size: var(--font-size-body-3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-6);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-5);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-text-1);
|
||||
font-size: var(--font-size-body-3);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: var(--border-1) solid var(--color-border-2);
|
||||
padding: var(--size-3);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: var(--color-bg-2);
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--danger-1);
|
||||
color: var(--danger-6);
|
||||
border: var(--border-1) solid var(--danger-4);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--size-3);
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: var(--success-1);
|
||||
color: var(--success-6);
|
||||
border: var(--border-1) solid var(--success-4);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--size-3);
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: var(--warning-1);
|
||||
color: var(--warning-6);
|
||||
border: var(--border-1) solid var(--warning-4);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: var(--size-3);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* .font-size-global { */
|
||||
--font-size-body-3: 14px;
|
||||
--font-size-body-2: 13px;
|
||||
--font-size-body-1: 12px;
|
||||
--font-size-caption: 12px;
|
||||
--font-size-title-1: 16px;
|
||||
--font-size-title-2: 20px;
|
||||
--font-size-title-3: 24px;
|
||||
--font-size-display-1: 36px;
|
||||
--font-size-display-2: 48px;
|
||||
--font-size-display-3: 56px;
|
||||
|
||||
/* .font-weight-global { */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-100: 100;
|
||||
--font-weight-200: 200;
|
||||
--font-weight-300: 300;
|
||||
--font-weight-400: 400;
|
||||
--font-weight-500: 500;
|
||||
--font-weight-600: 600;
|
||||
--font-weight-700: 700;
|
||||
--font-weight-800: 800;
|
||||
--font-weight-900: 900;
|
||||
|
||||
/* size-N:(4 * N)px */
|
||||
/* .size-global { */
|
||||
--size-none: 0;
|
||||
--size-1: 4px;
|
||||
--size-2: 8px;
|
||||
--size-3: 12px;
|
||||
--size-4: 16px;
|
||||
--size-5: 20px;
|
||||
--size-6: 24px;
|
||||
--size-7: 28px;
|
||||
--size-8: 32px;
|
||||
--size-9: 36px;
|
||||
--size-10: 40px;
|
||||
--size-11: 44px;
|
||||
--size-12: 48px;
|
||||
--size-13: 52px;
|
||||
--size-14: 56px;
|
||||
--size-15: 60px;
|
||||
--size-16: 64px;
|
||||
--size-17: 68px;
|
||||
--size-18: 72px;
|
||||
--size-19: 76px;
|
||||
--size-20: 80px;
|
||||
--size-mini: var(--size-6);
|
||||
--size-small: var(--size-7);
|
||||
--size-default: var(--size-8);
|
||||
--size-large: var(--size-9);
|
||||
|
||||
/* .border-global { */
|
||||
--border-none: 0;
|
||||
--border-1: 1px;
|
||||
--border-2: 2px;
|
||||
--border-3: 3px;
|
||||
|
||||
/* .border-radius-global { */
|
||||
--border-radius-none: 0;
|
||||
--border-radius-small: 2px;
|
||||
--border-radius-medium: 4px;
|
||||
--border-radius-large: 8px;
|
||||
--border-radius-circle: 50%;
|
||||
|
||||
/* .shadow-global { */
|
||||
--shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
--shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||
--shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
--shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.scss";
|
||||
import { DemoApp } from "./app";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<DemoApp />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// 定义主体名称变量
|
||||
$theme-name: dark;
|
||||
|
||||
.theme-color-dark {
|
||||
--primary-7:rgb( 104,159,255);
|
||||
--primary-6:rgb( 60,126,255);
|
||||
--primary-5:rgb( 48,111,255);
|
||||
--primary-4:rgb( 29, 77,210);
|
||||
--primary-3:rgb( 14, 50,166);
|
||||
--primary-2:rgb( 4, 27,121);
|
||||
--primary-1:rgb( 0, 13, 77);
|
||||
--success-7:rgb( 80,210,102);
|
||||
--success-6:rgb( 39,195, 70);
|
||||
--success-5:rgb( 29,180, 64);
|
||||
--success-4:rgb( 18,154, 55);
|
||||
--success-3:rgb( 10,128, 45);
|
||||
--success-2:rgb( 4,102, 37);
|
||||
--success-1:rgb( 0, 77, 28);
|
||||
--warning-7:rgb( 255,179, 87);
|
||||
--warning-6:rgb( 255,150, 38);
|
||||
--warning-5:rgb( 255,141, 31);
|
||||
--warning-4:rgb( 210,105, 19);
|
||||
--warning-3:rgb( 166, 75, 10);
|
||||
--warning-2:rgb( 121, 48, 4);
|
||||
--warning-1:rgb( 77, 27, 0);
|
||||
--danger-7 :rgb( 249,141,134);
|
||||
--danger-6 :rgb( 247,105,101);
|
||||
--danger-5 :rgb( 245, 78, 78);
|
||||
--danger-4 :rgb( 203, 46, 52);
|
||||
--danger-3 :rgb( 161, 22, 31);
|
||||
--danger-2 :rgb( 119, 6, 17);
|
||||
--danger-1 :rgb( 77, 0, 10);
|
||||
--link-7: rgb( 104,159,255);
|
||||
--link-6: rgb( 60,126,255);
|
||||
--link-5: rgb( 48,111,255);
|
||||
--link-4: rgb( 29, 77,210);
|
||||
--link-3: rgb( 14, 50,166);
|
||||
--link-2: rgb( 4, 27,121);
|
||||
--link-1: rgb( 0, 13, 77);
|
||||
--data-1: rgb( 48,111,255);
|
||||
--data-2: rgb( 14, 50,166);
|
||||
--data-3: rgb( 70,154,250);
|
||||
--data-4: rgb( 19, 76,163);
|
||||
--data-5: rgb( 255,150, 38);
|
||||
--data-6: rgb( 166, 75, 10);
|
||||
--data-7: rgb( 18,154, 55);
|
||||
--data-8: rgb( 10,128, 45);
|
||||
--data-9: rgb( 90, 37,176);
|
||||
--data-10: rgb( 62, 19,143);
|
||||
--data-11: rgb( 249,204, 68);
|
||||
--data-12: rgb( 204,150, 31);
|
||||
--data-13: rgb( 184,226, 75);
|
||||
--data-14: rgb( 132,183, 35);
|
||||
--data-15: rgb( 203, 43,136);
|
||||
--data-16: rgb( 161, 23,108);
|
||||
--data-17: rgb( 63,212,207);
|
||||
--data-18: rgb( 17,131,139);
|
||||
--data-19: rgb( 176, 27,182);
|
||||
--data-20: rgb( 101, 3,112);
|
||||
--color-border-1:rgb( 46, 46, 48);
|
||||
--color-border-2:rgb( 72, 72, 73);
|
||||
--color-border-3:rgb( 95, 95, 96);
|
||||
--color-border-4:rgb( 146,146,147);
|
||||
--color-fill-1:rgb( 23, 23, 26);
|
||||
--color-fill-2:rgb( 46, 46, 48);
|
||||
--color-fill-3:rgb( 72, 72, 73);
|
||||
--color-fill-4:rgb( 95, 95, 96);
|
||||
--color-text-1: rgb( 246,246,246);
|
||||
--color-text-2: rgb( 197,197,197);
|
||||
--color-text-3: rgb( 146,146,147);
|
||||
--color-text-4: rgb( 95, 95, 96);
|
||||
--color-bg-1:rgb( 23, 23, 26);
|
||||
--color-bg-2:rgb( 35, 35, 36);
|
||||
--color-bg-3:rgb( 42, 42, 43);
|
||||
--color-bg-4:rgb( 49, 49, 50);
|
||||
--color-bg-5:rgb( 55, 55, 57);
|
||||
--color-bg-white:rgb( 246,246,246);
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "./dark/index.scss";
|
||||
@import "./light/index.scss"
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// 定义主体名称变量
|
||||
$theme-name: light;
|
||||
|
||||
.theme-color-light {
|
||||
--primary-7:rgb( 14, 66,210);
|
||||
--primary-6:rgb( 22, 93,255);
|
||||
--primary-5:rgb( 64,128,255);
|
||||
--primary-4:rgb( 106,161,255);
|
||||
--primary-3:rgb( 148,191,255);
|
||||
--primary-2:rgb( 190,218,255);
|
||||
--primary-1:rgb( 232,243,255);
|
||||
--success-7:rgb( 0,154, 41);
|
||||
--success-6:rgb( 0,180, 42);
|
||||
--success-5:rgb( 35,195, 67);
|
||||
--success-4:rgb( 76,210, 99);
|
||||
--success-3:rgb( 123,225,136);
|
||||
--success-2:rgb( 175,240,181);
|
||||
--success-1:rgb( 232,255,234);
|
||||
--warning-7:rgb( 210, 95, 0);
|
||||
--warning-6:rgb( 255,125, 0);
|
||||
--warning-5:rgb( 255,154, 46);
|
||||
--warning-4:rgb( 255,182, 93);
|
||||
--warning-3:rgb( 255,207,139);
|
||||
--warning-2:rgb( 255,228,186);
|
||||
--warning-1:rgb( 255,247,232);
|
||||
--danger-7 :rgb( 203, 39, 45);
|
||||
--danger-6 :rgb( 245, 63, 63);
|
||||
--danger-5 :rgb( 247,101, 96);
|
||||
--danger-4 :rgb( 249,137,129);
|
||||
--danger-3 :rgb( 251,172,163);
|
||||
--danger-2 :rgb( 253,205,197);
|
||||
--danger-1 :rgb( 255,236,232);
|
||||
--link-7: rgb( 14, 66,210);
|
||||
--link-6: rgb( 22, 93,255);
|
||||
--link-5: rgb( 64,128,255);
|
||||
--link-4: rgb( 106,161,255);
|
||||
--link-3: rgb( 148,191,255);
|
||||
--link-2: rgb( 190,218,255);
|
||||
--link-1: rgb( 232,243,255);
|
||||
--data-1: rgb( 64,128,255);
|
||||
--data-2: rgb( 190,218,255);
|
||||
--data-3: rgb( 85,197,253);
|
||||
--data-4: rgb( 156,220,252);
|
||||
--data-5: rgb( 255,125, 0);
|
||||
--data-6: rgb( 255,207,139);
|
||||
--data-7: rgb( 76,210, 99);
|
||||
--data-8: rgb( 175,240,181);
|
||||
--data-9: rgb( 168,113,227);
|
||||
--data-10: rgb( 221,190,246);
|
||||
--data-11: rgb( 247,186, 30);
|
||||
--data-12: rgb( 250,220,109);
|
||||
--data-13: rgb( 159,219, 29);
|
||||
--data-14: rgb( 201,233,104);
|
||||
--data-15: rgb( 249,121,183);
|
||||
--data-16: rgb( 251,157,199);
|
||||
--data-17: rgb( 20,201,201);
|
||||
--data-18: rgb( 137,233,224);
|
||||
--data-19: rgb( 232,101,223);
|
||||
--data-20: rgb( 247,186,239);
|
||||
--color-border-1:rgb( 242,243,245);
|
||||
--color-border-2:rgb( 229,230,235);
|
||||
--color-border-3:rgb( 201,205,212);
|
||||
--color-border-4:rgb( 134,144,156);
|
||||
--color-fill-1:rgb( 247,248,250);
|
||||
--color-fill-2:rgb( 242,243,245);
|
||||
--color-fill-3:rgb( 229,230,235);
|
||||
--color-fill-4:rgb( 201,205,212).;
|
||||
--color-text-1:rgb( 29, 33, 41);
|
||||
--color-text-2:rgb( 78, 89,105);
|
||||
--color-text-3:rgb( 134,144,156);
|
||||
--color-text-4:rgb( 201,205,212);
|
||||
--color-bg-1:rgb( 255,255,255);
|
||||
--color-bg-2:rgb( 255,255,255);
|
||||
--color-bg-3:rgb( 255,255,255);
|
||||
--color-bg-4:rgb( 255,255,255);
|
||||
--color-bg-5:rgb( 255,255,255);
|
||||
--color-bg-white:rgb( 255,255,255);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
colors: {
|
||||
blue: "#1fb6ff",
|
||||
purple: "#7e5bef",
|
||||
pink: "#ff49db",
|
||||
orange: "#ff7849",
|
||||
green: "#13ce66",
|
||||
yellow: "#ffc82c",
|
||||
"gray-dark": "#273444",
|
||||
gray: "#8492a6",
|
||||
"gray-light": "#d3dce6",
|
||||
transparent: "transparent",
|
||||
current: "currentColor",
|
||||
white: "#ffffff",
|
||||
midnight: "#121063",
|
||||
metal: "#565584",
|
||||
tahiti: "#3ab7bf",
|
||||
silver: "#ecebff",
|
||||
"bubble-gum": "#ff77e9",
|
||||
bermuda: "#78dcca",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Graphik", "sans-serif"],
|
||||
serif: ["Merriweather", "serif"],
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
"8xl": "96rem",
|
||||
"9xl": "128rem",
|
||||
},
|
||||
borderRadius: {
|
||||
"4xl": "2rem",
|
||||
},
|
||||
fontFamily: {
|
||||
display: "Oswald, ui-serif ", // Adds a new `font-display` class
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
1: "var(--primary-1)",
|
||||
2: "var(--primary-2)",
|
||||
3: "var(--primary-3)",
|
||||
4: "var(--primary-4)",
|
||||
5: "var(--primary-5)",
|
||||
6: "var(--primary-6)",
|
||||
7: "var(--primary-7)",
|
||||
},
|
||||
success: {
|
||||
1: "var(--success-1)",
|
||||
2: "var(--success-2)",
|
||||
3: "var(--success-3)",
|
||||
4: "var(--success-4)",
|
||||
5: "var(--success-5)",
|
||||
6: "var(--success-6)",
|
||||
7: "var(--success-7)",
|
||||
},
|
||||
warning: {
|
||||
1: "var(--warning-1)",
|
||||
2: "var(--warning-2)",
|
||||
3: "var(--warning-3)",
|
||||
4: "var(--warning-4)",
|
||||
5: "var(--warning-5)",
|
||||
6: "var(--warning-6)",
|
||||
7: "var(--warning-7)",
|
||||
},
|
||||
danger: {
|
||||
1: "var(--danger-1)",
|
||||
2: "var(--danger-2)",
|
||||
3: "var(--danger-3)",
|
||||
4: "var(--danger-4)",
|
||||
5: "var(--danger-5)",
|
||||
6: "var(--danger-6)",
|
||||
7: "var(--danger-7)",
|
||||
},
|
||||
link: {
|
||||
1: "var(--link-1)",
|
||||
2: "var(--link-2)",
|
||||
3: "var(--link-3)",
|
||||
4: "var(--link-4)",
|
||||
5: "var(--link-5)",
|
||||
6: "var(--link-6)",
|
||||
7: "var(--link-7)",
|
||||
},
|
||||
background: {
|
||||
1: "var(--color-bg-1)",
|
||||
2: "var(--color-bg-2)",
|
||||
3: "var(--color-bg-3)",
|
||||
4: "var(--color-bg-4)",
|
||||
5: "var(--color-bg-5)",
|
||||
white: "var(--color-bg-white)",
|
||||
},
|
||||
text: {
|
||||
1: "var(--color-text-1)",
|
||||
2: "var(--color-text-2)",
|
||||
3: "var(--color-text-3)",
|
||||
4: "var(--color-text-4)",
|
||||
},
|
||||
border: {
|
||||
1: "var(--color-border-1)",
|
||||
2: "var(--color-border-2)",
|
||||
3: "var(--color-border-3)",
|
||||
4: "var(--color-border-4)",
|
||||
},
|
||||
fill: {
|
||||
1: "var(--color-fill-1)",
|
||||
2: "var(--color-fill-2)",
|
||||
3: "var(--color-fill-3)",
|
||||
4: "var(--color-fill-4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
Loading…
Reference in New Issue