Toolverse
All skills

add-new-setting-field

by tsukumijima

【設定追加時は必ず参照】KonomiTV に新しい設定 (v-switch/v-select など) を追加する際の必須手順。SettingsStore.ts / Settings.ts / config.py / Settings/*.vue への追加が必要

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
2

About this skill

【設定追加時は必ず参照】KonomiTV に新しい設定 (v-switch/v-select など) を追加する際の必須手順。SettingsStore.ts / Settings.ts / config.py / Settings/*.vue への追加が必要

How to use

  1. Zanim zaczniesz dodawać pole, określ, czy nowe ustawienie będzie synchronizowane z serwerem, czy pozostanie tylko lokalne w przeglądarce — ta decyzja wpłynie na strukturę kodu w każdym z czterech plików.
  2. W pliku client/src/stores/SettingsStore.ts dodaj pole do interfejsu ILocalClientSettings (zawierającego wszystkie ustawienia lokalne), ustaw jego wartość domyślną w ILocalClientSettingsDefault wraz z komentarzem opisującym ustawienie, a następnie — jeśli synchronizacja jest wymagana — dodaj klucz do tablicy SYNCABLE_SETTINGS_KEYS.
  3. W pliku client/src/services/Settings.ts dodaj pole do interfejsu IClientSettings, jeśli ustawienie jest synchronizowane; jeśli nie, pozostaw komentarz w tym samym miejscu dla przejrzystości.
  4. W pliku server/app/config.py dodaj pole do modelu Pydantic ClientSettings (jeśli synchronizacja jest wymagana), zawsze używając wartości domyślnej z SettingsStore, oraz pozostaw komentarz dla pól niesynchronizowanych.
  5. W odpowiednim pliku .vue w katalogu client/src/views/Settings/ dodaj interfejs użytkownika dla nowego ustawienia — wybierz właściwe miejsce w hierarchii stron ustawień, dodaj jasny opis w HTML-u i dostosuj props komponentu (v-switch, v-select itp.) do otaczającego kodu.
  6. Upewnij się, że kolejność pól jest identyczna we wszystkich czterech plikach, a nazwy kluczy są wystarczająco opisowe, aby każdy deweloper mógł zrozumieć przeznaczenie ustawienia na pierwszy rzut oka.

Related skills