💄 优化关于页面和插件管理器

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

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: "即将到来……"

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 = () => <RouterProvider router={router} />;
@@ -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),

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 (
-    <div className="flex w-full items-center justify-between gap-2 rounded-xl p-4 hover:bg-white/10">
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-xl p-4",
+        fieldColors[color],
+      )}
+    >
       <div className="flex items-center gap-2">
         {icon}
         <div className="flex flex-col">
           <span>{title}</span>
-          <span className="text-xs text-gray-500">{description}</span>
+          <span className="text-xs text-gray-500">
+            {description.split("\n").map((dd, ii) => (
+              <p key={ii} className="text-xs text-gray-500">
+                {dd}
+              </p>
+            ))}
+          </span>
         </div>
       </div>
       <div className="flex-1"></div>

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() {
       <div className="flex h-20 gap-4">
         <img src={icon} alt="icon" className="h-20 w-20 rounded-xl" />
         <div className="flex flex-col gap-2">
-          <span className="text-3xl font-bold">Project Graph 计划投射</span>
+          <span className="text-3xl font-bold">{t("title")}</span>
           <span className="text-gray-500">
-            {versionName} {versionNameEn} ({version})
+            {i18n.language === "zh-CN" && versionName} {versionNameEn} (
+            {version})
           </span>
         </div>
       </div>
 
       <div className="flex flex-1 flex-col gap-4 overflow-auto">
-        <Card title={t("introTitle")}>
-          <p>{t("intro.0")}</p>
-          <p>{t("intro.1")}</p>
-          <p>{t("intro.2")}</p>
+        <Card title={t("intro.0")}>
+          {t("intro", { joinArrays: "\n" })
+            .split("\n")
+            .map((v, i) => i > 0 && <p key={i}>{v}</p>)}
         </Card>
         <Card title={t("contact.0")}>
-          <p>{t("contact.1")}</p>
-          <p>{t("contact.2")}</p>
+          {t("contact", { joinArrays: "\n" })
+            .split("\n")
+            .map((v, i) => i > 0 && <p key={i}>{v}</p>)}
         </Card>
 
         <div className="grid grid-cols-4 gap-4">
-          <Card title="开发者名单" className="bg-blue-500/20">
+          <Card title={t("developers.title")} className="bg-blue-500/20">
             <Code2 />
           </Card>
-          <Card title="项目提出者">Rutubet</Card>
-          <Card title="理念设计">Littlefean</Card>
-          <Card title="功能设计">Littlefean, ZTY, Rutubet, 广大的反馈者们</Card>
-          <Card title="反馈管理">Littlefean, ZTY</Card>
-          <Card title="Logo设计">Littlefean, ZTY, Rutubet</Card>
-          <Card title="UI设计">ZTY</Card>
-          <Card title="软件架构与体系设计">Rutubet, Littlefean, ZTY</Card>
-          <Card title="贝塞尔曲线设计">Rutubet</Card>
-          <Card title="动画特效设计">Littlefean</Card>
-          <Card title="自动化构建发布">ZTY</Card>
-          <Card title="自动化环境搭建">SunriseSpeak</Card>
-          <Card title="文档网站维护">ZTY</Card>
-          <Card title="性能督导">ZTY, 广大的反馈者们</Card>
-          <Card title="视频宣发">Littlefean</Card>
-          <Card title="翻译官">Artificial Intelligence</Card>
-          <Card title="测试">Vitest, all developer, all user</Card>
-          <Card title="程序员鼓励师">null</Card>
-          <Card title="程序员鼓励师的鼓励师">
+          <Card title={t("developers.proposer")}>Rutubet</Card>
+          <Card title={t("developers.conceptDesigner")}>Littlefean</Card>
+          <Card title={t("developers.featureDesigner")}>
+            Littlefean, ZTY, Rutubet, feedbackers
+          </Card>
+          <Card title={t("developers.feedbackManager")}>Littlefean, ZTY</Card>
+          <Card title={t("developers.logoDesigner")}>
+            Littlefean, ZTY, Rutubet
+          </Card>
+          <Card title={t("developers.uiDesigner")}>ZTY</Card>
+          <Card title={t("developers.softwareArchitect")}>
+            Rutubet, Littlefean, ZTY
+          </Card>
+          <Card title={t("developers.bezierCurveDesigner")}>Rutubet</Card>
+          <Card title={t("developers.animationEffectDesigner")}>
+            Littlefean
+          </Card>
+          <Card title={t("developers.automationBuilder")}>ZTY</Card>
+          <Card title={t("developers.xlings")}>SunriseSpeak</Card>
+          <Card title={t("developers.websiteMaintainer")}>ZTY</Card>
+          <Card title={t("developers.performanceSupervisor")}>
+            ZTY, feedbackers
+          </Card>
+          <Card title={t("developers.videoPromoter")}>Littlefean</Card>
+          <Card title={t("developers.translator")}>
+            Artificial Intelligence
+          </Card>
+          <Card title={t("developers.tester")}>
+            Vitest, all developer, all user
+          </Card>
+          <Card title={t("developers.encourager")}>null</Card>
+          <Card title={t("developers.encouragerEncourager")}>
             maximum recursion depth exceeded
           </Card>
-          <Card title="气氛调节师">yuxiaoQAQ</Card>
+          <Card title={t("developers.atmosphereAdjuster")}>yuxiaoQAQ</Card>
         </div>
 
         <div className="grid grid-cols-4 gap-4">
-          <Card title="灵感来源" className="bg-blue-500/20">
+          <Card title={t("ideaSources.0")} className="bg-blue-500/20">
             <Lightbulb />
           </Card>
-          <Card title="">未支持深色风格的FigJamBoard</Card>
-          <Card title="">b站的所长林超的画分析框架详解视频</Card>
-          <Card title="">《数据结构与算法》中的拓扑排序、图论</Card>
-          <Card title="">大学时期一次UI设计课中老师展示的“头脑风暴法”</Card>
-          <Card title="">
-            游戏《Minecraft》中的“命令方块”（一键打开bat文件并直接运行的功能）
-          </Card>
-          <Card title="">
-            游戏《水果忍者》中挥刀的动画效果（右键删除节点的方法灵感来源）
-          </Card>
+          {t("ideaSources", { joinArrays: "\n" })
+            .split("\n")
+            .map((v, i) => i > 0 && <Card key={i}>{v}</Card>)}
         </div>
 
         <Card title={t("team.0")}>
-          <p>{t("team.1")}</p>
-          <p>{t("team.2")}</p>
-          <p>{t("team.3")}</p>
-          <p>{t("team.4")}</p>
-          <p>{t("team.5")}</p>
+          {t("team", { joinArrays: "\n" })
+            .split("\n")
+            .map((v, i) => i > 0 && <p key={i}>{v}</p>)}
         </Card>
       </div>
       <div className="flex gap-2">
@@ -144,11 +151,11 @@ export default function About() {
 }
 
 function Card({
-  title,
+  title = "",
   children,
   className = "",
 }: React.PropsWithChildren<{
-  title: string;
+  title?: string;
   className?: string;
 }>) {
   return (