From db7590719ce36fa504415a3c56daad071053c39a Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Sun, 7 Dec 2025 22:28:40 +0800 Subject: [PATCH] refactor(stage-pages): switch to use mapped keys --- packages/i18n/src/locales/en/settings.yaml | 100 +++++++++-------- packages/i18n/src/locales/es/settings.yaml | 100 +++++++++-------- packages/i18n/src/locales/fr/settings.yaml | 100 +++++++++-------- packages/i18n/src/locales/ja/settings.yaml | 106 +++++++++--------- packages/i18n/src/locales/ru/settings.yaml | 100 +++++++++-------- packages/i18n/src/locales/vi/settings.yaml | 100 +++++++++-------- .../i18n/src/locales/zh-Hans/settings.yaml | 100 +++++++++-------- .../i18n/src/locales/zh-Hant/settings.yaml | 100 +++++++++-------- .../pages/settings/system/color-presets.json | 63 +++++++++-- .../pages/settings/system/color-scheme.vue | 55 ++++++++- 10 files changed, 529 insertions(+), 395 deletions(-) diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml index 08fffd2ce..b5e616991 100644 --- a/packages/i18n/src/locales/en/settings.yaml +++ b/packages/i18n/src/locales/en/settings.yaml @@ -621,63 +621,69 @@ pages: description: Test shortcuts theme-presets: presets: - - colors: - - AIRI Green + default: + colors: + color-1: AIRI Green description: The default greenish theme color, brought by AIRI to you! title: Default Color - - colors: - - Taupe - - Beige - - Ash Grey - - Light Taupe - - Ivory - - Olive Grey - - Sand - - Warm Grey + morandi: + colors: + color-1: Taupe + color-2: Beige + color-3: Ash Grey + color-4: Light Taupe + color-5: Ivory + color-6: Olive Grey + color-7: Sand + color-8: Warm Grey description: Soft, muted tones inspired by Giorgio Morandi's paintings title: Morandi Colors - - colors: - - Sky Blue - - Mist - - Sand - - Moss Green - - Water Lily - - Wheat - - Slate Blue - - Sage + monet: + colors: + color-1: Sky Blue + color-2: Mist + color-3: Sand + color-4: Moss Green + color-5: Water Lily + color-6: Wheat + color-7: Slate Blue + color-8: Sage description: Impressionist palette inspired by Claude Monet's works title: Monet Colors - - colors: - - Tan - - Warm Taupe - - Umber - - Coffee - - Bronze - - Gold - - Mustard - - Amber + japanese: + colors: + color-1: Tan + color-2: Warm Taupe + color-3: Umber + color-4: Coffee + color-5: Bronze + color-6: Gold + color-7: Mustard + color-8: Amber description: Traditional Japanese color palette title: Japanese Colors - - colors: - - Nordic Blue - - Ice - - Fjord - - Steel - - Glacier - - Slate - - Cloud - - Stone + nordic: + colors: + color-1: Nordic Blue + color-2: Ice + color-3: Fjord + color-4: Steel + color-5: Glacier + color-6: Slate + color-7: Cloud + color-8: Stone description: Scandinavian minimalist color scheme title: Nordic Colors - - colors: - - Rosy Dawn - - Chinese Red - - Smoky Brown - - Bamboo Green - - Dark Purple - - Golden Yellow - - Azure Blue - - Ochre + chinese: + colors: + color-1: Rosy Dawn + color-2: Chinese Red + color-3: Smoky Brown + color-4: Bamboo Green + color-5: Dark Purple + color-6: Golden Yellow + color-7: Azure Blue + color-8: Ochre description: >- Traditional Chinese colors, derived from ancient textiles, porcelain and paintings diff --git a/packages/i18n/src/locales/es/settings.yaml b/packages/i18n/src/locales/es/settings.yaml index a9134ab38..ca9a74b5b 100644 --- a/packages/i18n/src/locales/es/settings.yaml +++ b/packages/i18n/src/locales/es/settings.yaml @@ -601,63 +601,69 @@ pages: description: Test shortcuts theme-presets: presets: - - colors: - - Verde AIRI + default: + colors: + color-1: Verde AIRI description: '¡El color de tema verdoso predeterminado, traído por AIRI para ti!' title: Color Predeterminado - - colors: - - Taupe - - Beige - - Gris Ceniza - - Taupe Claro - - Marfil - - Gris Oliva - - Arena - - Gris Cálido + morandi: + colors: + color-1: Taupe + color-2: Beige + color-3: Gris Ceniza + color-4: Taupe Claro + color-5: Marfil + color-6: Gris Oliva + color-7: Arena + color-8: Gris Cálido description: Tonos suaves y apagados inspirados en las pinturas de Giorgio Morandi title: Colores Morandi - - colors: - - Azul Cielo - - Niebla - - Arena - - Verde Musgo - - Nenúfar - - Trigo - - Azul Pizarra - - Salvia + monet: + colors: + color-1: Azul Cielo + color-2: Niebla + color-3: Arena + color-4: Verde Musgo + color-5: Nenúfar + color-6: Trigo + color-7: Azul Pizarra + color-8: Salvia description: Paleta impresionista inspirada en las obras de Claude Monet title: Colores Monet - - colors: - - Bronceado - - Taupe Cálido - - Umber - - Café - - Bronce - - Oro - - Mostaza - - Ámbar + japanese: + colors: + color-1: Bronceado + color-2: Taupe Cálido + color-3: Umber + color-4: Café + color-5: Bronce + color-6: Oro + color-7: Mostaza + color-8: Ámbar description: Paleta de colores japonesa tradicional title: Colores Japoneses - - colors: - - Azul Nórdico - - Hielo - - Fiordo - - Acero - - Glaciar - - Pizarra - - Nube - - Piedra + nordic: + colors: + color-1: Azul Nórdico + color-2: Hielo + color-3: Fiordo + color-4: Acero + color-5: Glaciar + color-6: Pizarra + color-7: Nube + color-8: Piedra description: Esquema de colores minimalista escandinavo title: Colores Nórdicos - - colors: - - Amanecer Rosado - - Rojo Chino - - Marrón Ahumado - - Verde Bambú - - Púrpura Oscuro - - Amarillo Dorado - - Azul Azure - - Ocre + chinese: + colors: + color-1: Amanecer Rosado + color-2: Rojo Chino + color-3: Marrón Ahumado + color-4: Verde Bambú + color-5: Púrpura Oscuro + color-6: Amarillo Dorado + color-7: Azul Azure + color-8: Ocre description: >- Colores chinos tradicionales, derivados de textiles antiguos, porcelana y pinturas title: Colores Tradicionales Chinos diff --git a/packages/i18n/src/locales/fr/settings.yaml b/packages/i18n/src/locales/fr/settings.yaml index bf0693ffe..e0178345b 100644 --- a/packages/i18n/src/locales/fr/settings.yaml +++ b/packages/i18n/src/locales/fr/settings.yaml @@ -601,63 +601,69 @@ pages: description: Test shortcuts theme-presets: presets: - - colors: - - AIRI Green + default: + colors: + color-1: AIRI Green description: La couleur verte par défaut, apportée par AIRI pour vous ! title: Couleur par défaut - - colors: - - Taupe - - Beige - - Gris cendré - - Taupe clair - - Ivoire - - Gris olive - - Sable - - Gris chaud + morandi: + colors: + color-1: Taupe + color-2: Beige + color-3: Gris cendré + color-4: Taupe clair + color-5: Ivoire + color-6: Gris olive + color-7: Sable + color-8: Gris chaud description: Tons doux et atténués inspirés des peintures de Giorgio Morandi title: Couleurs Morandi - - colors: - - Bleu ciel - - Brume - - Sable - - Vert mousse - - Nénuphar - - Blé - - Bleu ardoise - - Sauge + monet: + colors: + color-1: Bleu ciel + color-2: Brume + color-3: Sable + color-4: Vert mousse + color-5: Nénuphar + color-6: Blé + color-7: Bleu ardoise + color-8: Sauge description: Palette impressionniste inspirée des œuvres de Claude Monet title: Couleurs Monet - - colors: - - Fauve - - Taupe chaud - - Ombre - - Café - - Bronze - - Or - - Moutarde - - Ambre + japanese: + colors: + color-1: Fauve + color-2: Taupe chaud + color-3: Ombre + color-4: Café + color-5: Bronze + color-6: Or + color-7: Moutarde + color-8: Ambre description: Palette traditionnelle japonaise title: Couleurs japonaises - - colors: - - Bleu nordique - - Glace - - Fjord - - Acier - - Glacier - - Ardoise - - Nuage - - Pierre + nordic: + colors: + color-1: Bleu nordique + color-2: Glace + color-3: Fjord + color-4: Acier + color-5: Glacier + color-6: Ardoise + color-7: Nuage + color-8: Pierre description: Schéma de couleurs minimaliste scandinave title: Couleurs nordiques - - colors: - - Aube rosée - - Rouge chinois - - Marron fumé - - Vert bambou - - Violet foncé - - Jaune doré - - Bleu azur - - Ocre + chinese: + colors: + color-1: Aube rosée + color-2: Rouge chinois + color-3: Marron fumé + color-4: Vert bambou + color-5: Violet foncé + color-6: Jaune doré + color-7: Bleu azur + color-8: Ocre description: >- Couleurs traditionnelles chinoises, issues des textiles anciens, de la porcelaine et des peintures title: Couleurs traditionnelles chinoises diff --git a/packages/i18n/src/locales/ja/settings.yaml b/packages/i18n/src/locales/ja/settings.yaml index 0af246533..a479ff9c4 100644 --- a/packages/i18n/src/locales/ja/settings.yaml +++ b/packages/i18n/src/locales/ja/settings.yaml @@ -601,69 +601,69 @@ pages: description: Test shortcuts theme-presets: presets: - - - colors: - - AIRI Green + default: + colors: + color-1: AIRI Green description: The default greenish theme color, brought by AIRI to you! title: Default Color - - - colors: - - Taupe - - Beige - - Ash Grey - - Light Taupe - - Ivory - - Olive Grey - - Sand - - Warm Grey + morandi: + colors: + color-1: Taupe + color-2: Beige + color-3: Ash Grey + color-4: Light Taupe + color-5: Ivory + color-6: Olive Grey + color-7: Sand + color-8: Warm Grey description: Soft, muted tones inspired by Giorgio Morandi's paintings title: Morandi Colors - - - colors: - - Sky Blue - - Mist - - Sand - - Moss Green - - Water Lily - - Wheat - - Slate Blue - - Sage + monet: + colors: + color-1: Sky Blue + color-2: Mist + color-3: Sand + color-4: Moss Green + color-5: Water Lily + color-6: Wheat + color-7: Slate Blue + color-8: Sage description: Impressionist palette inspired by Claude Monet's works title: Monet Colors - - - colors: - - Tan - - Warm Taupe - - Umber - - Coffee - - Bronze - - Gold - - Mustard - - Amber + japanese: + colors: + color-1: Tan + color-2: Warm Taupe + color-3: Umber + color-4: Coffee + color-5: Bronze + color-6: Gold + color-7: Mustard + color-8: Amber description: Traditional Japanese color palette title: Japanese Colors - - - colors: - - Nordic Blue - - Ice - - Fjord - - Steel - - Glacier - - Slate - - Cloud - - Stone + nordic: + colors: + color-1: Nordic Blue + color-2: Ice + color-3: Fjord + color-4: Steel + color-5: Glacier + color-6: Slate + color-7: Cloud + color-8: Stone description: Scandinavian minimalist color scheme title: Nordic Colors - - - colors: - - Rosy Dawn - - Chinese Red - - Smoky Brown - - Bamboo Green - - Dark Purple - - Golden Yellow - - Azure Blue - - Ochre + chinese: + colors: + color-1: Rosy Dawn + color-2: Chinese Red + color-3: Smoky Brown + color-4: Bamboo Green + color-5: Dark Purple + color-6: Golden Yellow + color-7: Azure Blue + color-8: Ochre description: >- Traditional Chinese colors, derived from ancient textiles, porcelain and paintings title: Chinese Traditional Colors diff --git a/packages/i18n/src/locales/ru/settings.yaml b/packages/i18n/src/locales/ru/settings.yaml index cd2beac63..a9c4f75ce 100644 --- a/packages/i18n/src/locales/ru/settings.yaml +++ b/packages/i18n/src/locales/ru/settings.yaml @@ -601,63 +601,69 @@ pages: description: Test shortcuts theme-presets: presets: - - colors: - - AIRI Green + default: + colors: + color-1: AIRI Green description: Стандартный зелёный оттенок AIRI title: Цвет по умолчанию - - colors: - - Taupe - - Beige - - Ash Grey - - Light Taupe - - Ivory - - Olive Grey - - Sand - - Warm Grey + morandi: + colors: + color-1: Taupe + color-2: Beige + color-3: Ash Grey + color-4: Light Taupe + color-5: Ivory + color-6: Olive Grey + color-7: Sand + color-8: Warm Grey description: Приглушённые тона в стиле Джорджо Моранди title: Цвета Моранди - - colors: - - Sky Blue - - Mist - - Sand - - Moss Green - - Water Lily - - Wheat - - Slate Blue - - Sage + monet: + colors: + color-1: Sky Blue + color-2: Mist + color-3: Sand + color-4: Moss Green + color-5: Water Lily + color-6: Wheat + color-7: Slate Blue + color-8: Sage description: Палитра импрессионизма, вдохновлённая Моне title: Цвета Моне - - colors: - - Tan - - Warm Taupe - - Umber - - Coffee - - Bronze - - Gold - - Mustard - - Amber + japanese: + colors: + color-1: Tan + color-2: Warm Taupe + color-3: Umber + color-4: Coffee + color-5: Bronze + color-6: Gold + color-7: Mustard + color-8: Amber description: Традиционная японская цветовая палитра title: Японские цвета - - colors: - - Nordic Blue - - Ice - - Fjord - - Steel - - Glacier - - Slate - - Cloud - - Stone + nordic: + colors: + color-1: Nordic Blue + color-2: Ice + color-3: Fjord + color-4: Steel + color-5: Glacier + color-6: Slate + color-7: Cloud + color-8: Stone description: Скандинавская минималистичная схема title: Северные цвета - - colors: - - Rosy Dawn - - Chinese Red - - Smoky Brown - - Bamboo Green - - Dark Purple - - Golden Yellow - - Azure Blue - - Ochre + chinese: + colors: + color-1: Rosy Dawn + color-2: Chinese Red + color-3: Smoky Brown + color-4: Bamboo Green + color-5: Dark Purple + color-6: Golden Yellow + color-7: Azure Blue + color-8: Ochre description: >- Традиционные китайские цвета, вдохновлённые текстилем, фарфором и живописью title: Китайские традиционные цвета diff --git a/packages/i18n/src/locales/vi/settings.yaml b/packages/i18n/src/locales/vi/settings.yaml index e88d6c2cb..15a8184a4 100644 --- a/packages/i18n/src/locales/vi/settings.yaml +++ b/packages/i18n/src/locales/vi/settings.yaml @@ -601,63 +601,69 @@ pages: description: Test shortcuts theme-presets: presets: - - colors: - - Xanh AIRI + default: + colors: + color-1: Xanh AIRI description: Màu xanh đặc trưng mặc định của AIRI title: Màu mặc định - - colors: - - Taupe - - Be - - Xám tro - - Nâu sáng - - Ngà - - Xám ô liu - - Cát - - Xám ấm + morandi: + colors: + color-1: Taupe + color-2: Be + color-3: Xám tro + color-4: Nâu sáng + color-5: Ngà + color-6: Xám ô liu + color-7: Cát + color-8: Xám ấm description: Tông màu dịu nhẹ lấy cảm hứng từ tranh Giorgio Morandi title: Màu Morandi - - colors: - - Xanh Da Trời - - Sương Mù - - Cát - - Xanh Rêu - - Hoa Súng - - Lúa Mì - - Xanh Đá Phiến - - Xanh Xô Thơm + monet: + colors: + color-1: Xanh Da Trời + color-2: Sương Mù + color-3: Cát + color-4: Xanh Rêu + color-5: Hoa Súng + color-6: Lúa Mì + color-7: Xanh Đá Phiến + color-8: Xanh Xô Thơm description: Bảng màu ấn tượng lấy cảm hứng từ các tác phẩm của Claude Monet title: Màu Monet - - colors: - - Nâu Vàng - - Nâu Ấm - - Nâu Đậm (Umber) - - Cà Phê - - Đồng - - Vàng Kim - - Mù Tạt - - Hổ Phách + japanese: + colors: + color-1: Nâu Vàng + color-2: Nâu Ấm + color-3: Nâu Đậm (Umber) + color-4: Cà Phê + color-5: Đồng + color-6: Vàng Kim + color-7: Mù Tạt + color-8: Hổ Phách description: Bảng màu truyền thống Nhật Bản title: Màu Nhật Bản - - colors: - - Xanh Bắc Âu - - Băng Giá - - Xanh đậm (Fjord) - - Thép - - Sông Băng - - Đá Phiến - - Mây - - Đá + nordic: + colors: + color-1: Xanh Bắc Âu + color-2: Băng Giá + color-3: Xanh đậm (Fjord) + color-4: Thép + color-5: Sông Băng + color-6: Đá Phiến + color-7: Mây + color-8: Đá description: Bảng màu tối giản phong cách Bắc Âu title: Màu Bắc Âu - - colors: - - Hồng Bình Minh - - Đỏ Trung Hoa - - Nâu Khói - - Xanh Tre - - Tím Đậm - - Vàng Óng - - Xanh Lam Ngọc - - Son Đất + chinese: + colors: + color-1: Hồng Bình Minh + color-2: Đỏ Trung Hoa + color-3: Nâu Khói + color-4: Xanh Tre + color-5: Tím Đậm + color-6: Vàng Óng + color-7: Xanh Lam Ngọc + color-8: Son Đất description: >- Màu sắc truyền thống Trung Hoa, bắt nguồn từ vải dệt cổ, gốm sứ và tranh vẽ title: Màu Truyền Thống Trung Hoa diff --git a/packages/i18n/src/locales/zh-Hans/settings.yaml b/packages/i18n/src/locales/zh-Hans/settings.yaml index e9e180f3a..27cdcffdb 100644 --- a/packages/i18n/src/locales/zh-Hans/settings.yaml +++ b/packages/i18n/src/locales/zh-Hans/settings.yaml @@ -601,63 +601,69 @@ pages: description: 测试快捷键 theme-presets: presets: - - colors: - - AIRI 绿 + default: + colors: + color-1: AIRI 绿 description: 默认的绿色主题，由 AIRI 为您带来！ title: 默认颜色 - - colors: - - 灰褐色 - - 米色 - - 灰白色 - - 浅灰褐色 - - 象牙色 - - 橄榄灰 - - 沙色 - - 暖灰色 + morandi: + colors: + color-1: 灰褐色 + color-2: 米色 + color-3: 灰白色 + color-4: 浅灰褐色 + color-5: 象牙色 + color-6: 橄榄灰 + color-7: 沙色 + color-8: 暖灰色 description: 受乔治·莫兰迪绘画启发的柔和、低调的色调 title: Morandi 颜色 - - colors: - - 天蓝色 - - 薄雾色 - - 沙色 - - 苔藓绿 - - 睡莲色 - - 小麦色 - - 板岩蓝 - - 鼠尾草色 + monet: + colors: + color-1: 天蓝色 + color-2: 薄雾色 + color-3: 沙色 + color-4: 苔藓绿 + color-5: 睡莲色 + color-6: 小麦色 + color-7: 板岩蓝 + color-8: 鼠尾草色 description: 受克劳德·莫奈作品启发的印象派调色板 title: 莫奈颜色 - - colors: - - 棕褐色 - - 暖灰褐色 - - 赭色 - - 咖啡色 - - 青铜色 - - 金色 - - 芥末色 - - 琥珀色 + japanese: + colors: + color-1: 棕褐色 + color-2: 暖灰褐色 + color-3: 赭色 + color-4: 咖啡色 + color-5: 青铜色 + color-6: 金色 + color-7: 芥末色 + color-8: 琥珀色 description: 传统日本色彩调色板 title: 日本颜色 - - colors: - - 北欧蓝 - - 冰色 - - 峡湾色 - - 钢铁色 - - 冰川色 - - 板岩色 - - 云色 - - 石头色 + nordic: + colors: + color-1: 北欧蓝 + color-2: 冰色 + color-3: 峡湾色 + color-4: 钢铁色 + color-5: 冰川色 + color-6: 板岩色 + color-7: 云色 + color-8: 石头色 description: 北欧极简主义配色方案 title: 北欧颜色 - - colors: - - 霞光红 - - 枣红 - - 黄栌 - - 竹青 - - 乌梅紫 - - 缃色 - - 青冥 - - 赭石 + chinese: + colors: + color-1: 霞光红 + color-2: 枣红 + color-3: 黄栌 + color-4: 竹青 + color-5: 乌梅紫 + color-6: 缃色 + color-7: 青冥 + color-8: 赭石 description: >- 中国传统色彩，源自古代纺织品、瓷器和绘画 title: 中国传统颜色 diff --git a/packages/i18n/src/locales/zh-Hant/settings.yaml b/packages/i18n/src/locales/zh-Hant/settings.yaml index 26d8dd76c..e8d79f676 100644 --- a/packages/i18n/src/locales/zh-Hant/settings.yaml +++ b/packages/i18n/src/locales/zh-Hant/settings.yaml @@ -601,63 +601,69 @@ pages: description: 測試快捷鍵 theme-presets: presets: - - colors: - - AIRI 綠 + default: + colors: + color-1: AIRI 綠 description: 預設的綠色主題，由 AIRI 為您帶來！ title: 預設顏色 - - colors: - - 灰褐色 - - 米色 - - 灰白色 - - 淺灰褐色 - - 象牙色 - - 橄欖灰 - - 沙色 - - 暖灰色 + morandi: + colors: + color-1: 灰褐色 + color-2: 米色 + color-3: 灰白色 + color-4: 淺灰褐色 + color-5: 象牙色 + color-6: 橄欖灰 + color-7: 沙色 + color-8: 暖灰色 description: 受喬治·莫蘭迪繪畫啟發的柔和、低調色調 title: Morandi 顏色 - - colors: - - 天藍色 - - 薄霧色 - - 沙色 - - 苔蘚綠 - - 睡蓮色 - - 小麥色 - - 板岩藍 - - 鼠尾草色 + monet: + colors: + color-1: 天藍色 + color-2: 薄霧色 + color-3: 沙色 + color-4: 苔蘚綠 + color-5: 睡蓮色 + color-6: 小麥色 + color-7: 板岩藍 + color-8: 鼠尾草色 description: 受克勞德·莫內作品啟發的印象派調色盤 title: 莫內顏色 - - colors: - - 棕褐色 - - 暖灰褐色 - - 赭色 - - 咖啡色 - - 青銅色 - - 金色 - - 芥末色 - - 琥珀色 + japanese: + colors: + color-1: 棕褐色 + color-2: 暖灰褐色 + color-3: 赭色 + color-4: 咖啡色 + color-5: 青銅色 + color-6: 金色 + color-7: 芥末色 + color-8: 琥珀色 description: 傳統日本色彩調色盤 title: 日本顏色 - - colors: - - 北歐藍 - - 冰色 - - 峽灣色 - - 鋼鐵色 - - 冰川色 - - 板岩色 - - 雲色 - - 石頭色 + nordic: + colors: + color-1: 北歐藍 + color-2: 冰色 + color-3: 峽灣色 + color-4: 鋼鐵色 + color-5: 冰川色 + color-6: 板岩色 + color-7: 雲色 + color-8: 石頭色 description: 北歐極簡主義配色方案 title: 北歐顏色 - - colors: - - 霞光紅 - - 棗紅 - - 黃櫨 - - 竹青 - - 烏梅紫 - - 緗色 - - 青冥 - - 赭石 + chinese: + colors: + color-1: 霞光紅 + color-2: 棗紅 + color-3: 黃櫨 + color-4: 竹青 + color-5: 烏梅紫 + color-6: 緗色 + color-7: 青冥 + color-8: 赭石 description: >- 中國傳統色彩，源自古代紡織品、瓷器與繪畫 title: 中國傳統顏色 diff --git a/packages/stage-pages/src/pages/settings/system/color-presets.json b/packages/stage-pages/src/pages/settings/system/color-presets.json index b659d27f2..c0720dca9 100644 --- a/packages/stage-pages/src/pages/settings/system/color-presets.json +++ b/packages/stage-pages/src/pages/settings/system/color-presets.json @@ -1,8 +1,55 @@ -[ - [], - ["#A5978B", "#D8CAAF", "#B8B4A7", "#C4BCB1", "#E5DED8", "#9A8F7D", "#BEB5A7", "#C9C0B6"], - ["#7A9EAF", "#B8C7CC", "#D4B79C", "#8B9D77", "#C7D5CB", "#E6D0B1", "#94A7B1", "#B4C8C3"], - ["#D9B48F", "#B5917A", "#8C7A6B", "#A17F5F", "#B98C46", "#C7A252", "#DAB300", "#D19826"], - ["#9BA7B0", "#C1CBD4", "#A5ADB6", "#8B959E", "#D4DCE4", "#7F8A94", "#B3BCC6", "#98A4AE"], - ["#E4C6D0", "#A61B29", "#5D513C", "#789262", "#1C0D1A", "#F7C242", "#62A9DD", "#8C4B3C"] -] +{ + "default": { + "color-1": null + }, + "morandi": { + "color-1": "#A5978B", + "color-2": "#D8CAAF", + "color-3": "#B8B4A7", + "color-4": "#C4BCB1", + "color-5": "#E5DED8", + "color-6": "#9A8F7D", + "color-7": "#BEB5A7", + "color-8": "#C9C0B6" + }, + "monet": { + "color-1": "#7A9EAF", + "color-2": "#B8C7CC", + "color-3": "#D4B79C", + "color-4": "#8B9D77", + "color-5": "#C7D5CB", + "color-6": "#E6D0B1", + "color-7": "#94A7B1", + "color-8": "#B4C8C3" + }, + "japanese": { + "color-1": "#D9B48F", + "color-2": "#B5917A", + "color-3": "#8C7A6B", + "color-4": "#A17F5F", + "color-5": "#B98C46", + "color-6": "#C7A252", + "color-7": "#DAB300", + "color-8": "#D19826" + }, + "nordic": { + "color-1": "#9BA7B0", + "color-2": "#C1CBD4", + "color-3": "#A5ADB6", + "color-4": "#8B959E", + "color-5": "#D4DCE4", + "color-6": "#7F8A94", + "color-7": "#B3BCC6", + "color-8": "#98A4AE" + }, + "chinese": { + "color-1": "#E4C6D0", + "color-2": "#A61B29", + "color-3": "#5D513C", + "color-4": "#789262", + "color-5": "#1C0D1A", + "color-6": "#F7C242", + "color-7": "#62A9DD", + "color-8": "#8C4B3C" + } +} diff --git a/packages/stage-pages/src/pages/settings/system/color-scheme.vue b/packages/stage-pages/src/pages/settings/system/color-scheme.vue index 6b5e4bb33..d7a958431 100644 --- a/packages/stage-pages/src/pages/settings/system/color-scheme.vue +++ b/packages/stage-pages/src/pages/settings/system/color-scheme.vue @@ -2,12 +2,56 @@ import { ColorPalette, Section } from '@proj-airi/stage-ui/components' import { useSettings } from '@proj-airi/stage-ui/stores/settings' import { ColorHueRange } from '@proj-airi/ui' +import { computed } from 'vue' import { useI18n } from 'vue-i18n' import COLOR_PRESETS from './color-presets.json' const settings = useSettings() -const { t } = useI18n() +const { t, tm } = useI18n() + +const themePresetOrder = ['default', 'morandi', 'monet', 'japanese', 'nordic', 'chinese'] as const + +const themePresets = computed(() => { + const presets = tm('settings.pages.system.sections.section.theme-presets.presets') as Record< + (typeof themePresetOrder)[number], + { + title: string + description: string + colors?: Record + } + > + + if (!presets || typeof presets !== 'object') { + return [] + } + + return themePresetOrder + .map((key) => { + const preset = presets[key] + if (!preset) + return null + + const presetColors = (COLOR_PRESETS as Record>)[key] || {} + const colors = Object.entries(preset.colors ?? {}).map(([colorKey, name]) => { + const hex = presetColors[colorKey] + + return { + key: colorKey, + name, + hex: typeof hex === 'string' && hex.length ? hex : undefined, + } + }) + + return { + key, + title: preset.title, + description: preset.description, + colors, + } + }) + .filter((preset): preset is NonNullable => Boolean(preset)) +})