From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx | 74 +++++++++++++++++++------------------
1 files changed, 38 insertions(+), 36 deletions(-)
diff --git a/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 57659d6..360ea8a 100644
--- a/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -5,7 +5,7 @@
import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react'
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
+import { Listbox, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
import type { Item } from '@/app/components/base/select'
@@ -66,11 +66,11 @@
return (
<>
<div className='mb-4 flex items-center justify-between'>
- <div className='system-xl-semibold text-text-primary'>{t('appDebug.voice.voiceSettings.title')}</div>
- <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
+ <div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
+ <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
</div>
<div className='mb-3'>
- <div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
+ <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
{t('appDebug.voice.voiceSettings.language')}
<Tooltip
popupContent={
@@ -92,18 +92,18 @@
}}
>
<div className='relative h-8'>
- <ListboxButton
- className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
- <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
+ <Listbox.Button
+ className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
+ <span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
- className="h-4 w-4 text-text-tertiary"
+ className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
- </ListboxButton>
+ </Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
@@ -111,13 +111,14 @@
leaveTo="opacity-0"
>
- <ListboxOptions
- className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+ <Listbox.Options
+ className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
{languages.map((item: Item) => (
- <ListboxOption
+ <Listbox.Option
key={item.value}
- className={
- 'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+ className={({ active }) =>
+ `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
+ }`
}
value={item}
disabled={false}
@@ -129,23 +130,23 @@
{(selected || item.value === text2speech?.language) && (
<span
className={classNames(
- 'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
+ 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
)}
>
- <CheckIcon className="h-4 w-4" aria-hidden="true" />
+ <CheckIcon className="h-5 w-5" aria-hidden="true"/>
</span>
)}
</>
)}
- </ListboxOption>
+ </Listbox.Option>
))}
- </ListboxOptions>
+ </Listbox.Options>
</Transition>
</div>
</Listbox>
</div>
<div className='mb-3'>
- <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+ <div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
{t('appDebug.voice.voiceSettings.voice')}
</div>
<div className='flex items-center gap-1'>
@@ -158,18 +159,18 @@
})
}}
>
- <div className={'relative h-8 grow'}>
- <ListboxButton
- className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
+ <div className={'grow relative h-8'}>
+ <Listbox.Button
+ className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
<span
- className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
+ className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
- className="h-4 w-4 text-text-tertiary"
+ className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
- </ListboxButton>
+ </Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
@@ -177,13 +178,14 @@
leaveTo="opacity-0"
>
- <ListboxOptions
- className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+ <Listbox.Options
+ className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
{voiceItems?.map((item: Item) => (
- <ListboxOption
+ <Listbox.Option
key={item.value}
- className={
- 'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+ className={({ active }) =>
+ `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
+ }`
}
value={item}
disabled={false}
@@ -194,22 +196,22 @@
{(selected || item.value === text2speech?.voice) && (
<span
className={classNames(
- 'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
+ 'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
)}
>
- <CheckIcon className="h-4 w-4" aria-hidden="true" />
+ <CheckIcon className="h-5 w-5" aria-hidden="true"/>
</span>
)}
</>
)}
- </ListboxOption>
+ </Listbox.Option>
))}
- </ListboxOptions>
+ </Listbox.Options>
</Transition>
</div>
</Listbox>
{languageItem?.example && (
- <div className='h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1'>
+ <div className='shrink-0 h-8 p-1 rounded-lg bg-components-button-tertiary-bg'>
<AudioBtn
value={languageItem?.example}
isAudition
@@ -221,7 +223,7 @@
</div>
</div>
<div>
- <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+ <div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
{t('appDebug.voice.voiceSettings.autoPlay')}
</div>
<Switch className='shrink-0'
--
Gitblit v1.8.0