From d9582d52f20b68148b70c362c40001801e7788d7 Mon Sep 17 00:00:00 2001 From: Chara <71215473+horizonzzzz@users.noreply.github.com> Date: Thu, 12 Mar 2026 01:55:12 +0800 Subject: [PATCH] feat(stage-ui): optimize card many select component layout styles (#1096) --------- Co-authored-by: Rin --- packages/i18n/src/locales/en/settings.yaml | 1 + packages/i18n/src/locales/es/settings.yaml | 1 + packages/i18n/src/locales/fr/settings.yaml | 1 + packages/i18n/src/locales/ja/settings.yaml | 1 + packages/i18n/src/locales/ko/settings.yaml | 1 + packages/i18n/src/locales/ru/settings.yaml | 1 + packages/i18n/src/locales/vi/settings.yaml | 1 + .../i18n/src/locales/zh-Hans/settings.yaml | 1 + .../i18n/src/locales/zh-Hant/settings.yaml | 1 + .../pages/settings/modules/consciousness.vue | 5 ++- .../src/pages/settings/modules/hearing.vue | 4 +- .../src/pages/settings/modules/speech.vue | 3 +- .../menu/radio-card-many-select.vue | 16 +++++-- .../menu/voice-card-many-select.story.vue | 45 +++++++++---------- .../menu/voice-card-many-select.vue | 15 +++++-- 15 files changed, 62 insertions(+), 35 deletions(-) diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml index 1137ebf55..61e4eb6ba 100644 --- a/packages/i18n/src/locales/en/settings.yaml +++ b/packages/i18n/src/locales/en/settings.yaml @@ -296,6 +296,7 @@ pages: provider-model-selection: collapse: Collapse custom_model_placeholder: Enter custom model name... + current_model_label: 'Current model:' description: Select the suitable LLM provider for consciousness error: Error loading models health_check_failed: Health check failed diff --git a/packages/i18n/src/locales/es/settings.yaml b/packages/i18n/src/locales/es/settings.yaml index 14e10763b..954e3bd89 100644 --- a/packages/i18n/src/locales/es/settings.yaml +++ b/packages/i18n/src/locales/es/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: Colapsar custom_model_placeholder: Ingresa el nombre del modelo personalizado... + current_model_label: 'Modelo actual seleccionado：' description: Selecciona el proveedor LLM adecuado para la consciencia error: Error cargando modelos health_check_failed: Health check failed diff --git a/packages/i18n/src/locales/fr/settings.yaml b/packages/i18n/src/locales/fr/settings.yaml index a39861114..787f34dc2 100644 --- a/packages/i18n/src/locales/fr/settings.yaml +++ b/packages/i18n/src/locales/fr/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: Réduire custom_model_placeholder: Entrez le nom du modèle personnalisé... + current_model_label: 'Modèle actuel sélectionné：' description: Sélectionnez le fournisseur LLM approprié pour la conscience error: Erreur lors du chargement des modèles health_check_failed: Échec de la vérification de l'état de santé diff --git a/packages/i18n/src/locales/ja/settings.yaml b/packages/i18n/src/locales/ja/settings.yaml index d0a5f19bb..affb2d9af 100644 --- a/packages/i18n/src/locales/ja/settings.yaml +++ b/packages/i18n/src/locales/ja/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: 折りたたむ custom_model_placeholder: カスタムモデル名を入力… + current_model_label: '現在選択中のモデル：' description: 意識に適したLLMプロバイダーを選択 error: モデルの読み込みエラー health_check_failed: ヘルスチェックに失敗しました diff --git a/packages/i18n/src/locales/ko/settings.yaml b/packages/i18n/src/locales/ko/settings.yaml index 5a957deba..54f1e0a66 100644 --- a/packages/i18n/src/locales/ko/settings.yaml +++ b/packages/i18n/src/locales/ko/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: 접기 custom_model_placeholder: 사용자 지정 모델 이름 입력... + current_model_label: '현재 선택된 모델：' description: 의식에 적합한 LLM 제공자를 선택합니다. error: 모델 목록을 불러오는데 오류가 발생했습니다. health_check_failed: 상태 점검 실패 diff --git a/packages/i18n/src/locales/ru/settings.yaml b/packages/i18n/src/locales/ru/settings.yaml index e2a708d64..925451aab 100644 --- a/packages/i18n/src/locales/ru/settings.yaml +++ b/packages/i18n/src/locales/ru/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: Свернуть custom_model_placeholder: Введите название кастомной модели... + current_model_label: 'Текущая выбранная модель：' description: Выберите подходящего LLM-провайдера для сознания error: Ошибка загрузки моделей health_check_failed: Health check failed diff --git a/packages/i18n/src/locales/vi/settings.yaml b/packages/i18n/src/locales/vi/settings.yaml index 47bcd463e..e37b1e22f 100644 --- a/packages/i18n/src/locales/vi/settings.yaml +++ b/packages/i18n/src/locales/vi/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: Thu gọn custom_model_placeholder: Nhập tên mô hình tùy chỉnh... + current_model_label: 'Mô hình hiện được chọn：' description: Chọn nhà cung cấp LLM phù hợp cho ý thức error: Lỗi tải mô hình health_check_failed: Health check failed diff --git a/packages/i18n/src/locales/zh-Hans/settings.yaml b/packages/i18n/src/locales/zh-Hans/settings.yaml index 269406cec..3f4015aa9 100644 --- a/packages/i18n/src/locales/zh-Hans/settings.yaml +++ b/packages/i18n/src/locales/zh-Hans/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: 折叠 custom_model_placeholder: 输入自订模型名称 + current_model_label: '当前选择模型：' description: 为意识选择合适的 LLM 服务来源 error: 获取出错啦 health_check_failed: 健康检查失败 diff --git a/packages/i18n/src/locales/zh-Hant/settings.yaml b/packages/i18n/src/locales/zh-Hant/settings.yaml index 5b66e4fa3..2f2a691fa 100644 --- a/packages/i18n/src/locales/zh-Hant/settings.yaml +++ b/packages/i18n/src/locales/zh-Hant/settings.yaml @@ -284,6 +284,7 @@ pages: provider-model-selection: collapse: 摺疊 custom_model_placeholder: 輸入自訂模型名稱 + current_model_label: '目前選擇模型：' description: 為意識選擇合適的 LLM 服務來源 error: 取得發生錯誤 health_check_failed: 健康度檢查失敗 diff --git a/packages/stage-pages/src/pages/settings/modules/consciousness.vue b/packages/stage-pages/src/pages/settings/modules/consciousness.vue index b19de951c..0a78a1341 100644 --- a/packages/stage-pages/src/pages/settings/modules/consciousness.vue +++ b/packages/stage-pages/src/pages/settings/modules/consciousness.vue @@ -145,8 +145,9 @@ function handleDeleteProvider(providerId: string) {

{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.title') }}

-
+
{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.subtitle') }} + {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.current_model_label') }} {{ activeModel }}
@@ -195,7 +196,7 @@ function handleDeleteProvider(providerId: string) { {

{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.title') }}

-
- +
{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.subtitle') }} Enter the transcription model to use (e.g., 'whisper-1', 'gpt-4o-transcribe') + {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.current_model_label') }} {{ activeTranscriptionModel }}
diff --git a/packages/stage-pages/src/pages/settings/modules/speech.vue b/packages/stage-pages/src/pages/settings/modules/speech.vue index 86e070570..680774f7c 100644 --- a/packages/stage-pages/src/pages/settings/modules/speech.vue +++ b/packages/stage-pages/src/pages/settings/modules/speech.vue @@ -335,8 +335,9 @@ function handleDeleteProvider(providerId: string) {

{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.title') }}

-
+
{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.subtitle') }} + {{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.current_model_label') }} {{ activeSpeechModel }}
diff --git a/packages/stage-ui/src/components/menu/radio-card-many-select.vue b/packages/stage-ui/src/components/menu/radio-card-many-select.vue index af7989696..a92329fc9 100644 --- a/packages/stage-ui/src/components/menu/radio-card-many-select.vue +++ b/packages/stage-ui/src/components/menu/radio-card-many-select.vue @@ -14,6 +14,7 @@ interface Item { interface Props { items: Item[] + columns?: number searchable?: boolean searchPlaceholder?: string searchNoResultsTitle?: string @@ -29,6 +30,7 @@ interface Props { } const props = withDefaults(defineProps(), { + columns: 2, searchable: true, searchPlaceholder: 'Search...', searchNoResultsTitle: 'No results found', @@ -92,6 +94,10 @@ const filteredItems = computed(() => { return result }) +const showExpandCollapseBtn = computed(() => { + return filteredItems.value.length > props.columns +}) + function updateCustomValue(value: string) { customValue.value = value emit('update:customValue', value) @@ -138,9 +144,10 @@ function updateCustomValue(value: string) {
@@ -76,20 +70,28 @@ function handleSearchQueryUpdate(value: string) { + + + + @@ -97,7 +99,7 @@ function handleSearchQueryUpdate(value: string) { @@ -116,9 +117,8 @@ function handleSearchQueryUpdate(value: string) { @@ -126,9 +126,8 @@ function handleSearchQueryUpdate(value: string) { diff --git a/packages/stage-ui/src/components/menu/voice-card-many-select.vue b/packages/stage-ui/src/components/menu/voice-card-many-select.vue index a78b1677f..9b6d395fd 100644 --- a/packages/stage-ui/src/components/menu/voice-card-many-select.vue +++ b/packages/stage-ui/src/components/menu/voice-card-many-select.vue @@ -29,6 +29,7 @@ interface Voice { interface Props { voices: Voice[] + columns?: number searchable?: boolean searchPlaceholder?: string searchNoResultsTitle?: string @@ -46,6 +47,7 @@ interface Props { } const props = withDefaults(defineProps(), { + columns: 2, searchable: true, searchPlaceholder: 'Search voices...', searchNoResultsTitle: 'No voices found', @@ -111,6 +113,10 @@ const filteredVoices = computed(() => { }) }) +const showExpandCollapseBtn = computed(() => { + return filteredVoices.value.length > props.columns +}) + // Get preview URL from either field function getPreviewUrl(voice: Voice): string | undefined { return voice.previewURL || voice.preview_audio_url @@ -341,9 +347,10 @@ const customVoiceName = ref('')
@@ -374,6 +381,7 @@ const customVoiceName = ref('') v-model:voice-id="voiceId" v-model:custom-voice-name="customVoiceName" name="voice" + class="snap-start" :voice="voice" :currently-playing-id="currentlyPlayingId" :custom-input-placeholder="customInputPlaceholder" @@ -385,6 +393,7 @@ const customVoiceName = ref('')