From f10205b3f8a42658f3cbbf3ea0518b0ee2bc9019 Mon Sep 17 00:00:00 2001 From: zty012 Date: Fri, 6 Dec 2024 20:23:18 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BC=98=E5=8C=96=E5=85=B3?= =?UTF-8?q?=E4=BA=8E=E9=A1=B5=E9=9D=A2=E5=92=8C=E6=8F=92=E4=BB=B6=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locales/en.yml | 49 ++++++++++++++++ src/locales/zh-CN.yml | 55 ++++++++++++++---- src/main.tsx | 3 +- src/pages/settings/_field.tsx | 34 +++++++++-- src/pages/settings/about.tsx | 101 ++++++++++++++++++--------------- src/pages/settings/plugins.tsx | 26 ++++++--- 6 files changed, 194 insertions(+), 74 deletions(-) diff --git a/src/locales/en.yml b/src/locales/en.yml index 7eb68af..467deb7 100644 --- a/src/locales/en.yml +++ b/src/locales/en.yml @@ -6,6 +6,55 @@ welcome: bilibili: Bilibili qq: QQ Group +about: + title: Project Graph + intro: + - Software Introduction + - This is a tool for quickly drawing topological graphs based on the Tauri framework, which can be used for project topology diagram drawing and rapid brainstorming drafts. + - Xmind can only be used to draw tree structure diagrams, while FigJam and draw.io can be used for drawing but they are a bit slow to open as web pages. + - Therefore, this small software was created. + contact: + - Contact Us + - We are committed to designing the fastest and most convenient methodology for "graph theory" and are also exploring and innovating in the fields of visual thinking and topological todo lists. + - "If you want to get feedback quickly and provide suggestions, or if you have any ideas or questions, you are welcome to join our QQ group: 1006956704" + techEnvironment: Technical Support and Ecosystem + developers: + title: Developers List + proposer: Project Proposer + conceptDesigner: Concept Designer + featureDesigner: Feature Designer + feedbackManager: Feedback Manager + logoDesigner: Logo Designer + uiDesigner: UI Designer + softwareArchitect: Software Architect + bezierCurveDesigner: Bezier Curve Designer + animationEffectDesigner: Animation Effect Designer + automationBuilder: Automation Builder + xlings: Automation Environment Setup + websiteMaintainer: Website Maintainer + performanceSupervisor: Performance Supervisor + videoPromoter: Video Promoter + translator: Translator + tester: Tester + encourager: Programmer Encourager + encouragerEncourager: Encourager's Encourager + atmosphereAdjuster: Atmosphere Adjuster + ideaSources: + - Inspiration Sources + - FigJam not supporting dark mode + - Director Lin Chao's video on the detailed analysis of drawing analysis frameworks + - Topological sorting and graph theory in "Data Structures and Algorithms" + - "Brainstorming Method" + - Command Blocks in Minecraft + - The animation effect of slashing in Fruit Ninja + team: + - Team Introduction + - LiRen Tech is a small team founded by Littlefean and Rutubet on May 1, 2017, with ZTY joining the team later. + - With its youthful team atmosphere, emphasis on innovation and creativity, and characteristics of rational thinking and cultural inclusiveness, it stands out in the field of software development. + - Not only focuses on developing tool software and games but also engages in Minecraft game plugin development, game server operation, and website construction in a diversified business. + - LiRen Tech's representative works include the rich content tower defense game CannonWar, the BitMountain algorithm competition website, the Watch desktop software, and the Minecraft PvP Professional War server. + - The team is represented by light blue and code green, symbolizing a team culture that coexists with logical rationality and humor. + settings: tabs: about: About diff --git a/src/locales/zh-CN.yml b/src/locales/zh-CN.yml index 9f3a69b..f1a560f 100644 --- a/src/locales/zh-CN.yml +++ b/src/locales/zh-CN.yml @@ -5,10 +5,11 @@ welcome: github: GitHub bilibili: 哔哩哔哩 qq: QQ 群 -settingsAbout: + +about: title: Project Graph 计划投射 - introTitle: 软件介绍 intro: + - 软件介绍 - 这是一个基于tauri框架的快速绘制节点图的工具，可以用于项目拓扑图绘制、快速头脑风暴草稿 - Xmind 只能用来绘制树形结构图，FigJam 和 draw.io 可以用来绘制但网页打开有点慢了 - 所以做了这个小软件 @@ -17,19 +18,38 @@ settingsAbout: - 我们致力于为“图论”设计一个最快速方便的绘制方法论，同时也在可视化思考、拓扑型 todo list 等方向进行探索创新。 - 如果您想快速获得反馈和提供建议，或者有任何想法、疑问，欢迎加入我们的 QQ 群：1006956704 techEnvironment: 技术支持与生态环境 - developer: + developers: title: 开发者名单 - tips: 软件在github上开源，欢迎提issue与贡献代码 - ideaSource: - title: 灵感来源 - list: - - 没有黑夜风格的FigJamBoard - - 所长林超的画分析框架的详解视频 - - 《数据结构与算法》中的拓扑排序、图论 - + proposer: 项目提出 + conceptDesigner: 概念设计 + featureDesigner: 功能设计 + feedbackManager: 反馈管理 + logoDesigner: 图标设计 + uiDesigner: UI 设计 + softwareArchitect: 软件架构 + bezierCurveDesigner: 贝塞尔曲线设计 + animationEffectDesigner: 动画特效设计 + automationBuilder: 自动化构建 + xlings: 自动化环境搭建 + websiteMaintainer: 网站维护 + performanceSupervisor: 性能督导 + videoPromoter: 视频推广 + translator: 翻译 + tester: 测试 + encourager: 程序员鼓励师 + encouragerEncourager: 鼓励师的鼓励师 + atmosphereAdjuster: 气氛调节 + ideaSources: + - 灵感来源 + - 未支持深色风格的 FigJam + - 所长林超的画分析框架详解视频 + - 《数据结构与算法》中的拓扑排序、图论 + - “头脑风暴法” + - 游戏《Minecraft》中的“命令方块” + - 游戏《水果忍者》中挥刀的动画效果 team: - 团队简介 - - 理刃科技是一个由Littlefean和Rutubet在2017年5月1日创立的小型团队，后续ZTY加入团队。 + - 理刃科技(LiRen Tech)是一个由Littlefean和Rutubet在2017年5月1日创立的小型团队，后续ZTY加入团队。 - 以其年轻化的团队氛围、对创新创意的重视、以及理性思维与文化包容的特点，在软件开发领域独树一帜。 - 不仅专注于开发工具软件和游戏，还涉足Minecraft游戏插件开发、游戏服务器运营以及网站建设等多元化业务。 - 理刃科技的代表作品包括CannonWar这个内容丰富的塔防游戏、BitMountain算法竞赛网站、Watch小桌面软件，以及MinecraftPvP职业战争服务器。 @@ -165,6 +185,17 @@ settings: 死区越大，手柄的输入越趋于0或1，不会产生太大的变化 死区越小，手柄的输入越趋于中间值，会产生较大的变化 +plugins: + welcome: + title: 欢迎使用插件系统 + description: | + 插件系统是 Project Graph v2 的计划之一，开发者可以使用 JavaScript 开发插件以扩展应用的功能。 + 目前插件系统还未开发完成，敬请期待。 + title: 插件管理 + install: 安装插件 + uninstall: 卸载 + documentation: 文档 + app: unsaved: "*" comingSoon: "即将到来……" diff --git a/src/main.tsx b/src/main.tsx index 774bf31..49f3932 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -13,6 +13,7 @@ import { RecentFileManager } from "./core/RecentFileManager"; import { EdgeRenderer } from "./core/render/canvas2d/entityRenderer/edge/EdgeRenderer"; import { Renderer } from "./core/render/canvas2d/renderer"; import { Settings } from "./core/Settings"; +import { SoundService } from "./core/SoundService"; import { Camera } from "./core/stage/Camera"; import { Stage } from "./core/stage/Stage"; import { StageHistoryManager } from "./core/stage/stageManager/StageHistoryManager"; @@ -22,7 +23,6 @@ import { StartFilesManager } from "./core/StartFilesManager"; import "./index.pcss"; import { DialogProvider } from "./utils/dialog"; import { PopupDialogProvider } from "./utils/popupDialog"; -import { SoundService } from "./core/SoundService"; const router = createMemoryRouter(routes); const Routes = () => ; @@ -76,6 +76,7 @@ async function loadLanguageFiles() { lng: "zh-CN", debug: import.meta.env.DEV, defaultNS: "", + fallbackLng: "zh-CN", resources: { en: await import("./locales/en.yml").then((m) => m.default), "zh-CN": await import("./locales/zh-CN.yml").then((m) => m.default), diff --git a/src/pages/settings/_field.tsx b/src/pages/settings/_field.tsx index 70783f8..f474f26 100644 --- a/src/pages/settings/_field.tsx +++ b/src/pages/settings/_field.tsx @@ -7,6 +7,7 @@ import Select from "../../components/ui/Select"; import Slider from "../../components/ui/Slider"; import Switch from "../../components/ui/Switch"; import { Settings } from "../../core/Settings"; +import { cn } from "../../utils/cn"; export function SettingField({ settingKey, @@ -126,24 +127,45 @@ export function ButtonField({ ); } +const fieldColors = { + default: "hover:bg-white/10", + green: "bg-green-500/20 hover:bg-green-500/25", + red: "bg-red-500/20 hover:bg-red-500/25", + yellow: "bg-yellow-500/20 hover:bg-yellow-500/25", + blue: "bg-blue-500/20 hover:bg-blue-500/25", + purple: "bg-purple-500/20 hover:bg-purple-500/25", +}; export function Field({ - title, + title = "", description = "", - children, + children = <>, + color = "default", icon = <>, }: { - title: string; + title?: string; description?: string; - children: React.ReactNode; + children?: React.ReactNode; + color?: "default" | "green" | "red" | "yellow" | "blue" | "purple"; icon?: React.ReactNode; }) { return ( -
+
{icon}
{title} - {description} + + {description.split("\n").map((dd, ii) => ( +

+ {dd} +

+ ))} +
diff --git a/src/pages/settings/about.tsx b/src/pages/settings/about.tsx index 05a7dc2..3aa4b58 100644 --- a/src/pages/settings/about.tsx +++ b/src/pages/settings/about.tsx @@ -12,7 +12,7 @@ export default function About() { const [version, setVersion] = React.useState(""); const [versionName, setVersionName] = React.useState(""); const [versionNameEn, setVersionNameEn] = React.useState(""); - const { t } = useTranslation("settingsAbout"); + const { t, i18n } = useTranslation("about"); React.useEffect(() => { getVersion().then((version) => { @@ -39,73 +39,80 @@ export default function About() {
icon
- Project Graph 计划投射 + {t("title")} - {versionName} {versionNameEn} ({version}) + {i18n.language === "zh-CN" && versionName} {versionNameEn} ( + {version})
- -

{t("intro.0")}

-

{t("intro.1")}

-

{t("intro.2")}

+ + {t("intro", { joinArrays: "\n" }) + .split("\n") + .map((v, i) => i > 0 &&

{v}

)} -

{t("contact.1")}

-

{t("contact.2")}

+ {t("contact", { joinArrays: "\n" }) + .split("\n") + .map((v, i) => i > 0 &&

{v}

)}
- + - Rutubet - Littlefean - Littlefean, ZTY, Rutubet, 广大的反馈者们 - Littlefean, ZTY - Littlefean, ZTY, Rutubet - ZTY - Rutubet, Littlefean, ZTY - Rutubet - Littlefean - ZTY - SunriseSpeak - ZTY - ZTY, 广大的反馈者们 - Littlefean - Artificial Intelligence - Vitest, all developer, all user - null - + Rutubet + Littlefean + + Littlefean, ZTY, Rutubet, feedbackers + + Littlefean, ZTY + + Littlefean, ZTY, Rutubet + + ZTY + + Rutubet, Littlefean, ZTY + + Rutubet + + Littlefean + + ZTY + SunriseSpeak + ZTY + + ZTY, feedbackers + + Littlefean + + Artificial Intelligence + + + Vitest, all developer, all user + + null + maximum recursion depth exceeded - yuxiaoQAQ + yuxiaoQAQ
- + - 未支持深色风格的FigJamBoard - b站的所长林超的画分析框架详解视频 - 《数据结构与算法》中的拓扑排序、图论 - 大学时期一次UI设计课中老师展示的“头脑风暴法” - - 游戏《Minecraft》中的“命令方块”（一键打开bat文件并直接运行的功能） - - - 游戏《水果忍者》中挥刀的动画效果（右键删除节点的方法灵感来源） - + {t("ideaSources", { joinArrays: "\n" }) + .split("\n") + .map((v, i) => i > 0 && {v})}
-

{t("team.1")}

-

{t("team.2")}

-

{t("team.3")}

-

{t("team.4")}

-

{t("team.5")}

+ {t("team", { joinArrays: "\n" }) + .split("\n") + .map((v, i) => i > 0 &&

{v}

)}
@@ -144,11 +151,11 @@ export default function About() { } function Card({ - title, + title = "", children, className = "", }: React.PropsWithChildren<{ - title: string; + title?: string; className?: string; }>) { return ( diff --git a/src/pages/settings/plugins.tsx b/src/pages/settings/plugins.tsx index 7ea06f1..d3bf881 100644 --- a/src/pages/settings/plugins.tsx +++ b/src/pages/settings/plugins.tsx @@ -1,33 +1,43 @@ import { open } from "@tauri-apps/plugin-shell"; -import { BookOpen, Box, Plug, X } from "lucide-react"; +import { BookOpen, Box, PartyPopper, Plug, X } from "lucide-react"; import { useTranslation } from "react-i18next"; import Button from "../../components/ui/Button"; +import Switch from "../../components/ui/Switch"; import { Field } from "./_field"; export default function PluginsPage() { - const { t } = useTranslation(); + const { t } = useTranslation("plugins"); return ( <> - } title={t("plugins.title")}> + } + title={t("welcome.title")} + color="green" + description={t("welcome.description")} + > + } title={t("title")}> } - title="plugin name" - description="plugin description" + title="Core" + description={ + "Provides the core functionality of the app\nAuthor: Project Graph Developers" + } > + {}} /> );