自我修改。
Some checks failed
Build / build (18.x) (push) Has been cancelled
Build / build (20.x) (push) Has been cancelled

This commit is contained in:
titor-z 2025-03-15 01:21:27 +08:00
parent fa1e736436
commit 6b5e3580fb
10 changed files with 96 additions and 110 deletions

View File

@ -24,25 +24,25 @@ export default function Navbar() {
.scrollIntoView({ behavior: "smooth" })
}
>
Features
功能
</Link>
<Link
to="/editor"
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
>
Editor
编辑器
</Link>
<Link
to="/templates"
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
>
Templates
模板
</Link>
<Link
to={socials.docs}
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
>
Docs
文档
</Link>
</div>
<div className="md:hidden block space-x-3 ms-12">
@ -100,28 +100,28 @@ export default function Navbar() {
setOpenMenu(false);
}}
>
Features
功能
</Link>
<hr />
<Link
to="/editor"
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
>
Editor
编辑器
</Link>
<hr />
<Link
to="/templates"
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
>
Templates
模板
</Link>
<hr />
<Link
to={socials.docs}
className="hover:bg-zinc-100 block p-3 text-base font-semibold"
>
Docs
文档
</Link>
</SideSheet>
</>

View File

@ -3,13 +3,14 @@ import { LocaleProvider } from "@douyinfe/semi-ui";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/react";
import App from "./App.jsx";
import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
// import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
import "./index.css";
import "./i18n/i18n.js";
import { zh } from "./i18n/locales/zh.js";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<LocaleProvider locale={en_US}>
<LocaleProvider locale={zh}>
<App />
<Analytics />
<SpeedInsights />

View File

@ -9,13 +9,13 @@ import postgres_icon from "../assets/postgres.png";
import sqlite_icon from "../assets/sqlite.png";
import mariadb_icon from "../assets/mariadb.png";
import sql_server_icon from "../assets/sql-server.png";
import discord from "../assets/discord.png";
import github from "../assets/github.png";
// import discord from "../assets/discord.png";
// import github from "../assets/github.png";
import screenshot from "../assets/screenshot.png";
import FadeIn from "../animations/FadeIn";
import axios from "axios";
import { languages } from "../i18n/i18n";
import { Tweet } from "react-tweet";
// import { Tweet } from "react-tweet";
import { socials } from "../data/socials";
function shortenNumber(number) {
@ -49,7 +49,7 @@ export default function LandingPage() {
{showSurvey && (
<div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
<Link to="/survey" className="hover:underline">
Help us improve! Share your feedback.
帮助我们改进分享您的反馈
</Link>
<div className="float-right">
<button onClick={() => setShowSurvey(false)}>
@ -72,19 +72,18 @@ export default function LandingPage() {
<FadeIn duration={0.75}>
<div className="md:px-3">
<h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-gradient-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] inline-block text-transparent bg-clip-text">
Draw, Copy, and Paste
描绘, 复制, 粘贴
</h1>
<div className="text-lg font-medium mt-1 sliding-vertical">
Free and open source, simple, and intuitive database design
editor, data-modeler, and SQL generator.{" "}
免费开源简单易用的数据库设计编辑器数据建模器和 SQL 生成器{" "}
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
No sign up
无需登录
</span>
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
Free of charge
免费
</span>
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
Quick and easy
快速且容易
</span>
</div>
</div>
@ -98,13 +97,13 @@ export default function LandingPage() {
.scrollIntoView({ behavior: "smooth" })
}
>
Learn more
查看更多
</button>
<Link
to="/editor"
className="inline-block py-3 text-white transition-all duration-300 rounded-full shadow-lg bg-sky-900 ps-7 pe-6 hover:bg-sky-800"
>
Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
自行尝试 <i className="bi bi-arrow-right ms-1"></i>
</Link>
</div>
</div>
@ -120,7 +119,7 @@ export default function LandingPage() {
{shortenNumber(stats.stars)}
</div>
<div className="ms-1 mt-1 font-medium tracking-wide">
GitHub stars
GitHub 星标
</div>
</div>
<div className="text-center mb-4">
@ -128,7 +127,7 @@ export default function LandingPage() {
{shortenNumber(stats.forks)}
</div>
<div className="ms-1 mt-1 font-medium tracking-wide">
GitHub forks
GitHub 收藏
</div>
</div>
<div className="text-center mb-4">
@ -136,19 +135,18 @@ export default function LandingPage() {
{shortenNumber(languages.length)}
</div>
<div className="ms-1 mt-1 font-medium tracking-wide">
Languages
语言
</div>
</div>
</div>
<div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-sm rounded-2xl border p-6 bg-white space-y-3">
<div className="text-lg font-medium">
Build diagrams with a few clicks, see the full picture, export SQL
scripts, customize your editor, and more.
用几下点击构建图表全面了解导出 SQL 脚本自定义你的编辑器更多功能
</div>
<img src={screenshot} className="mx-auto" />
</div>
<div className="text-lg font-medium text-center mt-12 mb-6">
Design for your database
设计你的数据库
</div>
<div className="flex justify-center items-center gap-8 md:block">
{dbs.map((s, i) => (
@ -179,10 +177,10 @@ export default function LandingPage() {
<div id="features" className="py-8 px-36 md:px-8">
<FadeIn duration={1}>
<div className="text-base font-medium text-center text-sky-900">
More than just an editor
不仅仅是一个编辑器
</div>
<div className="text-2xl mt-1 font-medium text-center">
What drawDB has to offer
drawDB 的功能介绍
</div>
<div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
{features.map((f, i) => (
@ -203,9 +201,9 @@ export default function LandingPage() {
</div>
{/* Tweets */}
<div className="px-40 mt-6 md:px-8">
{/* <div className="px-40 mt-6 md:px-8">
<div className="text-center text-2xl md:text-xl font-medium">
What the internet says about us
网上关于我们的说法
</div>
<div
data-theme="light"
@ -216,10 +214,10 @@ export default function LandingPage() {
<Tweet id="1785457354777006524" />
<Tweet id="1776842268042756248" />
</div>
</div>
</div> */}
{/* Contact us */}
<svg
{/* <svg
viewBox="0 0 1440 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -233,11 +231,10 @@ export default function LandingPage() {
</svg>
<div className="bg-zinc-100 py-8 px-32 md:px-8">
<div className="mt-4 mb-2 text-2xl font-bold text-center">
Reach out to us
联系我们
</div>
<div className="text-lg text-center mb-4">
We love hearing from you. Join our community on Discord, GitHub, and
X.
我们很乐意听到您的声音加入我们在 DiscordGitHub X 上的社区
</div>
<div className="px-36 text-center md:px-8">
<div className="md:block md:space-y-3 flex gap-3 justify-center">
@ -250,7 +247,7 @@ export default function LandingPage() {
<div className="bg-zinc-800 hover:opacity-90 transition-all duration-300 flex items-center gap-4 px-14 py-4 rounded-lg">
<img src={github} className="h-8" />
<div className="text-lg text-white font-bold">
See the source
查看源代码
</div>
</div>
</a>
@ -263,7 +260,7 @@ export default function LandingPage() {
<div className="bg-[#5865f2] hover:opacity-90 transition-all duration-300 flex items-center gap-4 px-8 py-4 rounded-lg">
<img src={discord} className="h-8" />
<div className="text-lg text-white font-bold">
Join us on Discord
Discord 加入我们
</div>
</div>
</a>
@ -275,20 +272,19 @@ export default function LandingPage() {
>
<div className="text-white bg-zinc-800 hover:opacity-90 transition-all duration-300 flex items-center gap-4 px-12 py-4 rounded-lg">
<i className="text-2xl bi bi-twitter-x" />
<div className="text-lg font-bold">Follow us on X</div>
<div className="text-lg font-bold">X 上关注我们</div>
</div>
</a>
</div>
</div>
</div>
</div> */}
<div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3">
Attention! The diagrams are saved in your browser. Before clearing the
browser make sure to back up your data.
<div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3 mt-5">
注意图表会在您的浏览器中保存在清除浏览器之前请确保备份您的数据
</div>
<hr className="border-zinc-300" />
<div className="text-center text-sm py-3">
&copy; 2024 <strong>drawDB</strong> - All right reserved.
&copy; 2024 <strong>drawDB</strong> - 保留所有权利
</div>
</div>
);
@ -304,123 +300,113 @@ const dbs = [
const features = [
{
title: "Export",
title: "导出",
content: (
<div>
Export the DDL script to run on your database or export the diagram as a
JSON or an image.
导出 DDL 脚本以在您的数据库中运行或将图表导出为 JSON 或图像
</div>
),
footer: "",
},
{
title: "Reverse engineer",
title: "反向工程",
content: (
<div>
Already have a schema? Import a DDL script to generate a diagram.
已经有模式了吗导入 DDL 脚本来生成图表
</div>
),
footer: "",
},
{
title: "Customizable workspace",
title: "可定制的工作区",
content: (
<div>
Customize the UI to fit your preferences. Select the components you want
in your view.
自定义界面以符合您的偏好选择您想要在视图中显示的组件
</div>
),
footer: "",
},
{
title: "Keyboard shortcuts",
title: "键盘快捷键",
content: (
<div>
Speed up development with keyboard shortuts. See all available shortcuts
使用键盘快捷键加快开发速度
<Link
to={`${socials.docs}/shortcuts`}
className="ms-1.5 text-blue-500 hover:underline"
>
here
</Link>
.
>这里</Link>查看所有可用的快捷键
</div>
),
footer: "",
},
{
title: "Templates",
title: "模板",
content: (
<div>
Start off with pre-built templates. Get a quick start or get inspirition
for your design.
使用预建模板开始快速入门或为您的设计获取灵感
</div>
),
footer: "",
},
{
title: "Custom Templates",
title: "自定义模板",
content: (
<div>
Have boilerplate structures? Save time by saving them as templates and
load them when needed.
有模板结构通过保存它们作为模板来节省时间在需要时加载它们
</div>
),
footer: "",
},
{
title: "Robust editor",
title: "强大的编辑器",
content: (
<div>
Undo, redo, copy, paste, duplacate and more. Add tables, subject areas,
and notes.
撤销重做复制粘贴复制更多添加表主题区域和注释
</div>
),
footer: "",
},
{
title: "Issue detection",
title: "问题检测",
content: (
<div>
Detect and tackle errors in the diagram to make sure the scripts are
correct.
检测并解决图中的错误确保脚本正确
</div>
),
footer: "",
},
{
title: "Relational databases",
title: "关系型数据库",
content: (
<div>
We support 5 relational databases - MySQL, PostgreSQL, SQLite, MariaDB,
SQL Server.
我们支持 5 种关系型数据库 - MySQLPostgreSQLSQLiteMariaDBSQL Server
</div>
),
footer: "",
},
{
title: "Object-Relational databases",
title: "对象关系型数据库",
content: (
<div>
Add custom types for object-relational databases, or create custom JSON
schemes.
为对象关系型数据库添加自定义类型或创建自定义 JSON 方案
</div>
),
footer: "",
},
{
title: "Presentation mode",
title: "演示模式",
content: (
<div>
Present your diagrams on a big screen during team meetings and
discussions.
在团队会议和讨论中在大屏幕上展示您的图表
</div>
),
footer: "",
},
{
title: "Track todos",
content: <div>Keep track of tasks and mark them done when finished.</div>,
title: "跟踪待办事项",
content: (
<div>用于跟踪任务并在完成时标记为已完成</div>
),
footer: "",
},
];

View File

@ -48,7 +48,7 @@ export default function Templates() {
/>
</Link>
<div className="ms-4 sm:text-sm xl:text-xl text-xl font-semibold">
Templates
模板
</div>
</div>
</div>
@ -56,16 +56,15 @@ export default function Templates() {
<div className="xl:px-20 sm:px-6 px-12 py-6">
<div className="w-full md:w-[75%] xl:w-[50%] mb-2">
<div className="text-2xl sm:text-lg font-semibold mb-2 text-neutral-800">
Database schema templates
数据库模式模板
</div>
<div className="text-sm text-neutral-700">
A compilation of database entity relationship diagrams to give you
a quick start or inspire your application&apos;s architecture.
一个数据库实体关系图的集合帮助你快速开始或启发你的应用程序架构
</div>
</div>
<Tabs>
<TabPane
tab={<span className="mx-2">Default templates</span>}
tab={<span className="mx-2">默认模板</span>}
itemKey="1"
>
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-10 my-6">
@ -101,7 +100,7 @@ export default function Templates() {
</div>
</TabPane>
<TabPane
tab={<span className="mx-2">Your templates</span>}
tab={<span className="mx-2">你的模板</span>}
itemKey="2"
>
{customTemplates?.length > 0 ? (
@ -134,7 +133,7 @@ export default function Templates() {
onClick={() => editTemplate(c.id)}
>
<i className="bi bi-pencil-fill"></i>
<div className="ms-1.5 font-semibold">Edit</div>
<div className="ms-1.5 font-semibold">编辑</div>
</button>
<div className="border-l border-gray-300 mx-2" />
<button
@ -142,7 +141,7 @@ export default function Templates() {
onClick={() => deleteTemplate(c.id)}
>
<IconDeleteStroked />
<div className="ms-1.5 font-semibold">Delete</div>
<div className="ms-1.5 font-semibold">删除</div>
</button>
</div>
</div>
@ -157,7 +156,7 @@ export default function Templates() {
bordered
icon={null}
closeIcon={null}
description={<div>You have no custom templates saved.</div>}
description={<div>您还没有保存自定义模板</div>}
/>
<div className="grid grid-cols-5 sm:grid-cols-1 gap-4 place-content-center my-4">
<img
@ -166,20 +165,20 @@ export default function Templates() {
/>
<div className="col-span-2 sm:cols-span-1">
<div className="text-xl font-bold my-4">
How to save a template
如何保存模板
</div>
<Steps direction="vertical" style={{ margin: "12px" }}>
<Steps.Step
title="Build a diagram"
description="Build the template in the editor"
title="建立图表"
description="在编辑器中构建模板"
/>
<Steps.Step
title="Save as template"
description="Editor > File > Save as template"
title="保存为模板"
description="编辑 > 文件 > 保存为模板"
/>
<Steps.Step
title="Load a template"
description="Fork a template to build on"
title="加载一个模板"
description="Fork一个模板以进行构建"
/>
</Steps>
</div>

View File

@ -342,8 +342,8 @@ export const template1 = {
notes: [],
subjectAreas: [],
types: [],
title: "Blog database schema",
title: "博客数据库模式",
description:
"A blog database including tables such as posts, users, comments, and tags to facilitate the storage and retrieval of blog-related information.",
"一个博客数据库,包括帖子、用户、评论和标签等表,以方便存储和检索博客相关信息。",
custom: 0,
};

View File

@ -346,8 +346,8 @@ export const template2 = {
notes: [],
subjectAreas: [],
types: [],
title: "Human resources schema",
title: "人力资源方案",
description:
"A Human Resources (HR) schema designed to manage employee and project related information within an organization.",
"一个旨在管理组织内员工和项目相关信息的人力资源HR方案。",
custom: 0,
};

View File

@ -418,8 +418,8 @@ export const template3 = {
notes: [],
subjectAreas: [],
types: [],
title: "E-commerce schema",
title: "电子商务方案",
description:
"An e-commerce schema designed to manage various aspects of an online store, including products, orders, and customers.",
'一个电子商务架构,用于管理在线商店的各种方面,包括产品、订单和客户。',
custom: 0,
};

View File

@ -358,8 +358,8 @@ export const template4 = {
notes: [],
subjectAreas: [],
types: [],
title: "Library schema",
title: "图书馆架构",
description:
"A library schema designed to manage the books, genres, reservations, and other aspects of a library system",
'一个图书馆架构,用于管理书籍、类型、预订以及其他图书馆系统方面的内容。',
custom: 0,
};

View File

@ -629,8 +629,8 @@ export const template5 = {
notes: [],
subjectAreas: [],
types: [],
title: "Bank schema",
title: "银行方案",
description:
"A financial schema designed to manage financial transactions, accounts, customers, and other aspects of financial data.",
'一个用于管理金融交易、账户、客户及其他金融数据的金融方案设计。',
custom: 0,
};

View File

@ -453,8 +453,8 @@ export const template6 = {
notes: [],
subjectAreas: [],
types: [],
title: "University schema",
title: "大学方案",
description:
"A university schema designed to manage information about students, courses, instructors, and other aspects of university-related data.",
'一个用于管理学生、课程、教师及其他大学相关数据信息的大学模式。',
custom: 0,
};