From c013876bbdc9a63058339eb509a8e2bf6aae44e0 Mon Sep 17 00:00:00 2001 From: xintaofei Date: Fri, 27 Mar 2026 17:05:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE=E5=90=AF?= =?UTF-8?q?=E5=8A=A8=E5=99=A8=E7=9A=84=E9=85=8D=E7=BD=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shadcn/shadcn-config-panel.tsx | 167 ++++++++++-------- .../project-boot/shadcn/shadcn-launcher.tsx | 6 +- src/i18n/messages/ar.json | 6 +- src/i18n/messages/de.json | 6 +- src/i18n/messages/en.json | 6 +- src/i18n/messages/es.json | 6 +- src/i18n/messages/fr.json | 6 +- src/i18n/messages/ja.json | 6 +- src/i18n/messages/ko.json | 6 +- src/i18n/messages/pt.json | 6 +- src/i18n/messages/zh-CN.json | 6 +- src/i18n/messages/zh-TW.json | 6 +- 12 files changed, 149 insertions(+), 84 deletions(-) diff --git a/src/components/project-boot/shadcn/shadcn-config-panel.tsx b/src/components/project-boot/shadcn/shadcn-config-panel.tsx index d08f729..e140f7e 100644 --- a/src/components/project-boot/shadcn/shadcn-config-panel.tsx +++ b/src/components/project-boot/shadcn/shadcn-config-panel.tsx @@ -12,6 +12,7 @@ import { SelectValue, } from "@/components/ui/select" import { ScrollArea } from "@/components/ui/scroll-area" +import { Separator } from "@/components/ui/separator" import { STYLE_OPTIONS, BASE_COLOR_OPTIONS, @@ -33,56 +34,43 @@ interface ShadcnConfigPanelProps { presetCode: string } -type ConfigI18nKey = - | "config.style" - | "config.baseColor" - | "config.theme" - | "config.chartColor" - | "config.iconLibrary" - | "config.font" - | "config.fontHeading" - | "config.menuAccent" - | "config.menuColor" - | "config.radius" - | "config.template" - -const CONFIG_FIELDS: { - key: keyof ShadcnPresetConfig - i18nKey: ConfigI18nKey +function ConfigField({ + label, + value, + options, + onChange, +}: { + label: string + value: string options: { value: string; label: string }[] -}[] = [ - { key: "style", i18nKey: "config.style", options: STYLE_OPTIONS }, - { - key: "baseColor", - i18nKey: "config.baseColor", - options: BASE_COLOR_OPTIONS, - }, - { key: "theme", i18nKey: "config.theme", options: THEME_OPTIONS }, - { key: "chartColor", i18nKey: "config.chartColor", options: THEME_OPTIONS }, - { - key: "iconLibrary", - i18nKey: "config.iconLibrary", - options: ICON_LIBRARY_OPTIONS, - }, - { key: "font", i18nKey: "config.font", options: FONT_OPTIONS }, - { - key: "fontHeading", - i18nKey: "config.fontHeading", - options: FONT_HEADING_OPTIONS, - }, - { - key: "menuAccent", - i18nKey: "config.menuAccent", - options: MENU_ACCENT_OPTIONS, - }, - { - key: "menuColor", - i18nKey: "config.menuColor", - options: MENU_COLOR_OPTIONS, - }, - { key: "radius", i18nKey: "config.radius", options: RADIUS_OPTIONS }, - { key: "template", i18nKey: "config.template", options: TEMPLATE_OPTIONS }, -] + onChange: (v: string) => void +}) { + return ( +
+ + +
+ ) +} + +function SectionHeader({ children }: { children: React.ReactNode }) { + return ( +

+ {children} +

+ ) +} export function ShadcnConfigPanel({ config, @@ -92,32 +80,69 @@ export function ShadcnConfigPanel({ const t = useTranslations("ProjectBoot") const [createOpen, setCreateOpen] = useState(false) + const field = ( + key: keyof ShadcnPresetConfig, + i18nKey: string, + options: { value: string; label: string }[] + ) => ( + [0])} + value={config[key]} + options={options} + onChange={(v) => onConfigChange(key, v)} + /> + ) + return (
-
- {CONFIG_FIELDS.map((field) => ( -
- - +
+ {/* Style & Template */} +
+ {t("config.sectionStyle")} +
+ {field("style", "config.style", STYLE_OPTIONS)} + {field("template", "config.template", TEMPLATE_OPTIONS)}
- ))} +
+ + + + {/* Colors */} +
+ {t("config.sectionColors")} +
+ {field("baseColor", "config.baseColor", BASE_COLOR_OPTIONS)} +
+ {field("theme", "config.theme", THEME_OPTIONS)} + {field("chartColor", "config.chartColor", THEME_OPTIONS)} +
+
+
+ + + + {/* Typography */} +
+ {t("config.sectionTypography")} +
+ {field("font", "config.font", FONT_OPTIONS)} + {field("fontHeading", "config.fontHeading", FONT_HEADING_OPTIONS)} +
+
+ + + + {/* Interface */} +
+ {t("config.sectionInterface")} +
+ {field("iconLibrary", "config.iconLibrary", ICON_LIBRARY_OPTIONS)} + {field("radius", "config.radius", RADIUS_OPTIONS)} + {field("menuAccent", "config.menuAccent", MENU_ACCENT_OPTIONS)} + {field("menuColor", "config.menuColor", MENU_COLOR_OPTIONS)} +
+
diff --git a/src/components/project-boot/shadcn/shadcn-launcher.tsx b/src/components/project-boot/shadcn/shadcn-launcher.tsx index fcb5264..da59b6a 100644 --- a/src/components/project-boot/shadcn/shadcn-launcher.tsx +++ b/src/components/project-boot/shadcn/shadcn-launcher.tsx @@ -11,9 +11,9 @@ import { type ShadcnPresetConfig, } from "./constants" -const MIN_WIDTH = 280 -const MAX_WIDTH = 480 -const DEFAULT_WIDTH = 360 +const MIN_WIDTH = 260 +const MAX_WIDTH = 420 +const DEFAULT_WIDTH = 320 export function ShadcnLauncher() { const [config, setConfig] = useState( diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json index 8e41002..b7b9536 100644 --- a/src/i18n/messages/ar.json +++ b/src/i18n/messages/ar.json @@ -1593,7 +1593,11 @@ "menuColor": "لون القائمة", "radius": "نصف القطر", "template": "القالب", - "createProject": "إنشاء مشروع" + "createProject": "إنشاء مشروع", + "sectionStyle": "النمط", + "sectionColors": "الألوان", + "sectionTypography": "الخطوط", + "sectionInterface": "الواجهة" }, "preview": { "loading": "جاري تحميل المعاينة..." diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json index ff102a9..d47c64f 100644 --- a/src/i18n/messages/de.json +++ b/src/i18n/messages/de.json @@ -1593,7 +1593,11 @@ "menuColor": "Menü-Farbe", "radius": "Radius", "template": "Vorlage", - "createProject": "Projekt erstellen" + "createProject": "Projekt erstellen", + "sectionStyle": "Stil", + "sectionColors": "Farben", + "sectionTypography": "Typografie", + "sectionInterface": "Oberfläche" }, "preview": { "loading": "Vorschau wird geladen..." diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index e593468..c0aaa10 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -1593,7 +1593,11 @@ "menuColor": "Menu Color", "radius": "Radius", "template": "Template", - "createProject": "Create Project" + "createProject": "Create Project", + "sectionStyle": "Style", + "sectionColors": "Colors", + "sectionTypography": "Typography", + "sectionInterface": "Interface" }, "preview": { "loading": "Loading preview..." diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json index e1b8b8c..95a275e 100644 --- a/src/i18n/messages/es.json +++ b/src/i18n/messages/es.json @@ -1593,7 +1593,11 @@ "menuColor": "Color del menú", "radius": "Radio", "template": "Plantilla", - "createProject": "Crear proyecto" + "createProject": "Crear proyecto", + "sectionStyle": "Estilo", + "sectionColors": "Colores", + "sectionTypography": "Tipografía", + "sectionInterface": "Interfaz" }, "preview": { "loading": "Cargando vista previa..." diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json index d8ce0dc..b5045f8 100644 --- a/src/i18n/messages/fr.json +++ b/src/i18n/messages/fr.json @@ -1593,7 +1593,11 @@ "menuColor": "Couleur du menu", "radius": "Rayon", "template": "Modèle", - "createProject": "Créer un projet" + "createProject": "Créer un projet", + "sectionStyle": "Style", + "sectionColors": "Couleurs", + "sectionTypography": "Typographie", + "sectionInterface": "Interface" }, "preview": { "loading": "Chargement de l'aperçu..." diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json index 23a960c..0f9720f 100644 --- a/src/i18n/messages/ja.json +++ b/src/i18n/messages/ja.json @@ -1593,7 +1593,11 @@ "menuColor": "メニューカラー", "radius": "角丸", "template": "テンプレート", - "createProject": "プロジェクトを作成" + "createProject": "プロジェクトを作成", + "sectionStyle": "スタイル", + "sectionColors": "カラー", + "sectionTypography": "タイポグラフィ", + "sectionInterface": "インターフェース" }, "preview": { "loading": "プレビューを読み込み中..." diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json index d78a657..a63ea0a 100644 --- a/src/i18n/messages/ko.json +++ b/src/i18n/messages/ko.json @@ -1593,7 +1593,11 @@ "menuColor": "메뉴 색상", "radius": "둥글기", "template": "템플릿", - "createProject": "프로젝트 만들기" + "createProject": "프로젝트 만들기", + "sectionStyle": "스타일", + "sectionColors": "색상", + "sectionTypography": "타이포그래피", + "sectionInterface": "인터페이스" }, "preview": { "loading": "미리보기 로딩 중..." diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json index f7f0803..2cfdd59 100644 --- a/src/i18n/messages/pt.json +++ b/src/i18n/messages/pt.json @@ -1593,7 +1593,11 @@ "menuColor": "Cor do menu", "radius": "Raio", "template": "Modelo", - "createProject": "Criar projeto" + "createProject": "Criar projeto", + "sectionStyle": "Estilo", + "sectionColors": "Cores", + "sectionTypography": "Tipografia", + "sectionInterface": "Interface" }, "preview": { "loading": "Carregando visualização..." diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json index b51e4e4..9079f6f 100644 --- a/src/i18n/messages/zh-CN.json +++ b/src/i18n/messages/zh-CN.json @@ -1593,7 +1593,11 @@ "menuColor": "菜单颜色", "radius": "圆角", "template": "模板", - "createProject": "创建项目" + "createProject": "创建项目", + "sectionStyle": "风格", + "sectionColors": "配色", + "sectionTypography": "排版", + "sectionInterface": "界面" }, "preview": { "loading": "加载预览..." diff --git a/src/i18n/messages/zh-TW.json b/src/i18n/messages/zh-TW.json index 3b3cebb..c573800 100644 --- a/src/i18n/messages/zh-TW.json +++ b/src/i18n/messages/zh-TW.json @@ -1593,7 +1593,11 @@ "menuColor": "選單顏色", "radius": "圓角", "template": "模板", - "createProject": "建立專案" + "createProject": "建立專案", + "sectionStyle": "風格", + "sectionColors": "配色", + "sectionTypography": "排版", + "sectionInterface": "介面" }, "preview": { "loading": "載入預覽..."