From 801974a18bae581e721c673ae8c0509d145e09db Mon Sep 17 00:00:00 2001 From: Xinyang Gao-PC <15850645317@163.com> Date: Sun, 4 Jan 2026 19:41:49 +0800 Subject: [PATCH] feat: add all Draw.io themes to settings panel (#499) --- app/[lang]/page.tsx | 24 ++++++++++++---- app/globals.css | 5 ++++ components/chat-panel.tsx | 8 +++--- components/settings-dialog.tsx | 52 ++++++++++++++++++++++------------ lib/drawio-themes.ts | 12 ++++++++ lib/i18n/dictionaries/en.json | 12 +++++--- lib/i18n/dictionaries/ja.json | 12 +++++--- lib/i18n/dictionaries/zh.json | 12 +++++--- 8 files changed, 97 insertions(+), 40 deletions(-) create mode 100644 lib/drawio-themes.ts diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index 2a6049f1..b7a7e69a 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -13,6 +13,17 @@ import { import { useDiagram } from "@/contexts/diagram-context" import { i18n, type Locale } from "@/lib/i18n/config" +// Draw.io UI themes +export type DrawioTheme = "kennedy" | "simple" | "min" | "sketch" | "atlas" +export const DRAWIO_THEMES: DrawioTheme[] = [ + "kennedy", + "simple", + "min", + "sketch", + "atlas", +] +const DEFAULT_DRAWIO_THEME: DrawioTheme = "min" + const drawioBaseUrl = process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net" @@ -25,7 +36,7 @@ export default function Home() { const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale const [isMobile, setIsMobile] = useState(false) const [isChatVisible, setIsChatVisible] = useState(true) - const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min") + const [drawioUi, setDrawioUi] = useState(DEFAULT_DRAWIO_THEME) const [darkMode, setDarkMode] = useState(false) const [isLoaded, setIsLoaded] = useState(false) const [isDrawioReady, setIsDrawioReady] = useState(false) @@ -48,8 +59,10 @@ export default function Home() { } } - const savedUi = localStorage.getItem("drawio-theme") - if (savedUi === "min" || savedUi === "sketch") { + const savedUi = localStorage.getItem( + "drawio-theme", + ) as DrawioTheme | null + if (savedUi && DRAWIO_THEMES.includes(savedUi)) { setDrawioUi(savedUi) } @@ -90,8 +103,7 @@ export default function Home() { resetDrawioReady() } - const handleDrawioUiChange = () => { - const newUi = drawioUi === "min" ? "sketch" : "min" + const handleDrawioUiChange = (newUi: DrawioTheme) => { localStorage.setItem("drawio-theme", newUi) setDrawioUi(newUi) setIsDrawioReady(false) @@ -239,7 +251,7 @@ export default function Home() { isVisible={isChatVisible} onToggleVisibility={toggleChatPanel} drawioUi={drawioUi} - onToggleDrawioUi={handleDrawioUiChange} + onDrawioUiChange={handleDrawioUiChange} darkMode={darkMode} onToggleDarkMode={handleDarkModeChange} isMobile={isMobile} diff --git a/app/globals.css b/app/globals.css index d91c503d..bc75e17b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -399,3 +399,8 @@ animation: none; } } + +/* Fix for iframe touch events in Chrome */ +.diagrams-iframe { + touch-action: auto; +} diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx index 7aa28a55..1c988ff5 100644 --- a/components/chat-panel.tsx +++ b/components/chat-panel.tsx @@ -64,8 +64,8 @@ interface ChatMessage { interface ChatPanelProps { isVisible: boolean onToggleVisibility: () => void - drawioUi: "min" | "sketch" - onToggleDrawioUi: () => void + drawioUi: import("@/app/[lang]/page").DrawioTheme + onDrawioUiChange: (theme: import("@/app/[lang]/page").DrawioTheme) => void darkMode: boolean onToggleDarkMode: () => void isMobile?: boolean @@ -106,7 +106,7 @@ export default function ChatPanel({ isVisible, onToggleVisibility, drawioUi, - onToggleDrawioUi, + onDrawioUiChange, darkMode, onToggleDarkMode, isMobile = false, @@ -1277,7 +1277,7 @@ export default function ChatPanel({ onOpenChange={setShowSettingsDialog} onCloseProtectionChange={onCloseProtectionChange} drawioUi={drawioUi} - onToggleDrawioUi={onToggleDrawioUi} + onDrawioUiChange={onDrawioUiChange} darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} minimalStyle={minimalStyle} diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx index 0dae69d2..08244783 100644 --- a/components/settings-dialog.tsx +++ b/components/settings-dialog.tsx @@ -3,6 +3,7 @@ import { Github, Info, Moon, Sun, Tag } from "lucide-react" import { usePathname, useRouter, useSearchParams } from "next/navigation" import { Suspense, useEffect, useState } from "react" +import { DRAWIO_THEMES, type DrawioTheme } from "@/app/[lang]/page" import { Button } from "@/components/ui/button" import { Dialog, @@ -60,8 +61,8 @@ interface SettingsDialogProps { open: boolean onOpenChange: (open: boolean) => void onCloseProtectionChange?: (enabled: boolean) => void - drawioUi: "min" | "sketch" - onToggleDrawioUi: () => void + drawioUi: DrawioTheme + onDrawioUiChange: (theme: DrawioTheme) => void darkMode: boolean onToggleDarkMode: () => void minimalStyle?: boolean @@ -84,7 +85,7 @@ function SettingsContent({ onOpenChange, onCloseProtectionChange, drawioUi, - onToggleDrawioUi, + onDrawioUiChange, darkMode, onToggleDarkMode, minimalStyle = false, @@ -314,23 +315,38 @@ function SettingsContent({ {/* Draw.io Style */} - + + + + + + {dict.settings.themes.classic} + + + {dict.settings.themes.simple} + + + {dict.settings.themes.minimal} + + + {dict.settings.themes.sketch} + + + {dict.settings.themes.atlas} + + + {/* Close Protection */} diff --git a/lib/drawio-themes.ts b/lib/drawio-themes.ts new file mode 100644 index 00000000..0f8eacbc --- /dev/null +++ b/lib/drawio-themes.ts @@ -0,0 +1,12 @@ +// Draw.io UI themes configuration +export type DrawioTheme = "kennedy" | "simple" | "min" | "sketch" | "atlas" + +export const DRAWIO_THEMES: DrawioTheme[] = [ + "kennedy", + "simple", + "min", + "sketch", + "atlas", +] + +export const DEFAULT_DRAWIO_THEME: DrawioTheme = "min" diff --git a/lib/i18n/dictionaries/en.json b/lib/i18n/dictionaries/en.json index dba4a9c8..bce3ef25 100644 --- a/lib/i18n/dictionaries/en.json +++ b/lib/i18n/dictionaries/en.json @@ -94,10 +94,14 @@ "theme": "Theme", "themeDescription": "Dark/Light mode for interface and DrawIO canvas.", "drawioStyle": "DrawIO Style", - "drawioStyleDescription": "Canvas style:", - "switchTo": "Switch to", - "minimal": "Minimal", - "sketch": "Sketch", + "drawioStyleDescription": "Choose canvas UI theme.", + "themes": { + "classic": "Classic", + "simple": "Simple", + "minimal": "Minimal", + "sketch": "Sketch", + "atlas": "Atlas" + }, "closeProtection": "Close Protection", "closeProtectionDescription": "Show confirmation when leaving the page.", "diagramStyle": "Diagram Style", diff --git a/lib/i18n/dictionaries/ja.json b/lib/i18n/dictionaries/ja.json index 0a6cd0ee..59750d6a 100644 --- a/lib/i18n/dictionaries/ja.json +++ b/lib/i18n/dictionaries/ja.json @@ -94,10 +94,14 @@ "theme": "テーマ", "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。", "drawioStyle": "DrawIO スタイル", - "drawioStyleDescription": "キャンバススタイル：", - "switchTo": "切り替え", - "minimal": "ミニマル", - "sketch": "スケッチ", + "drawioStyleDescription": "キャンバスUIテーマを選択。", + "themes": { + "classic": "クラシック", + "simple": "シンプル", + "minimal": "ミニマル", + "sketch": "スケッチ", + "atlas": "アトラス" + }, "closeProtection": "ページ離脱確認", "closeProtectionDescription": "ページを離れる際に確認を表示します。", "diagramStyle": "ダイアグラムスタイル", diff --git a/lib/i18n/dictionaries/zh.json b/lib/i18n/dictionaries/zh.json index 9fca336c..98a111a2 100644 --- a/lib/i18n/dictionaries/zh.json +++ b/lib/i18n/dictionaries/zh.json @@ -94,10 +94,14 @@ "theme": "主题", "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。", "drawioStyle": "DrawIO 样式", - "drawioStyleDescription": "画布样式：", - "switchTo": "切换到", - "minimal": "简约", - "sketch": "草图", + "drawioStyleDescription": "选择画布 UI 主题。", + "themes": { + "classic": "经典", + "simple": "简易", + "minimal": "极简", + "sketch": "草图", + "atlas": "现代" + }, "closeProtection": "关闭确认", "closeProtectionDescription": "离开页面时显示确认。", "diagramStyle": "图表样式",