create-setting-item

Skill do Project Graph, który przeprowadza Cię przez proces tworzenia nowych elementów ustawień. Zawiera instrukcje dodawania schematów walidacji Zod, ikon z biblioteki lucide-react, tłumaczeń w pięciu językach oraz integracji z systemem kategoryzacji. Idealny dla deweloperów rozszerzających funkcjonalność konfiguracji aplikacji bez ręcznego szukania odpowiednich plików i struktur danych.

1. Otwórz plik app/src/core/service/Settings.tsx i zlokalizuj obiekt settingsSchema. Dodaj nową definicję ustawienia, wybierając odpowiedni typ Zod: z.boolean().default(false) dla przełącznika, z.number().min(x).max(y).default(z) dla wartości numerycznej ze suwaka, z.string().default("") dla tekstu, z.union([z.literal("opcja1"), z.literal("opcja2")]).default("opcja1") dla listy wyboru lub z.tuple([z.number(), z.number(), z.number(), z.number()]).default([0,0,0,0]) dla tuple'a jak kolory RGBA.

2. Przejdź do app/src/core/service/SettingsIcons.tsx, zaimportuj odpowiednią ikonę z biblioteki lucide-react i dodaj mapowanie w obiekcie settingsIcons, przypisując klucz ustawienia do komponentu ikony.

3. Zaktualizuj pliki tłumaczeń we wszystkich obsługiwanych językach: zh_CN.yml, zh_TW.yml, en.yml, zh_TWC.yml i id.yml w katalogu app/src/locales/. W każdym pliku dodaj strukturę z tytułem, opisem i opcjonalnie listą opcji dla ustawień typu enum.

4. Otwórz plik app/src/sub/SettingsWindow/settings.tsx i znajdź obiekt categories. Dodaj klucz nowego ustawienia do odpowiedniej grupy kategorii, aby ustawienie pojawiło się w interfejsie użytkownika w logicznym miejscu.

5. Jeśli Twoje ustawienie wymaga dodatkowej logiki walidacji lub transformacji, rozważ dodanie custom validatora Zod w schemacie, aby zapewnić spójność danych.

6. Przetestuj nowe ustawienie, uruchamiając aplikację i sprawdzając, czy pojawia się w oknie ustawień z prawidłową ikoną, tłumaczeniem i typem kontrolki interfejsu.