opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: enhance API key modal step indicator with active dots and improved styling

This commit is contained in:
lyzno1 2025-09-18 12:42:17 +08:00
parent 26e7677595
commit 5a6cb0d887
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
View File

@ -31,18 +31,22 @@ enum ApiKeyStep {
}
const StatusStep = ({ isActive, text }: { isActive: boolean, text: string }) => {
return <div className={`system-2xs-semibold-uppercase ${isActive
return <div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
? 'text-state-accent-solid'
: 'text-text-tertiary'}`}>
{/* Active indicator dot */}
{isActive && (
<div className='h-1 w-1 rounded-full bg-state-accent-solid'></div>
)}
{text}
</div>
}
const MultiSteps = ({ currentStep }: { currentStep: ApiKeyStep }) => {
const { t } = useTranslation()
return <div className='mb-2 flex w-1/3 items-center gap-2'>
return <div className='mb-6 flex w-1/3 items-center gap-2'>
<StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('pluginTrigger.modal.steps.verify')} />
<div className='h-px w-3 bg-divider-subtle'></div>
<div className='h-px w-3 shrink-0 bg-divider-deep'></div>
<StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('pluginTrigger.modal.steps.configuration')} />
</div>
}
@ -213,6 +217,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
<BaseForm
formSchemas={credentialsSchema}
ref={credentialsFormRef}
labelClassName='system-sm-medium mb-2 block text-text-primary'
/>
</div>
)}
@ -258,6 +263,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
<BaseForm
formSchemas={parametersSchema}
ref={parametersFormRef}
labelClassName='system-sm-medium mb-2 block text-text-primary'
/>
)}
{createType === SupportedCreationMethods.MANUAL && <>
@ -266,6 +272,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
<BaseForm
formSchemas={propertiesSchema}
ref={propertiesFormRef}
labelClassName='system-sm-medium mb-2 block text-text-primary'
/>
</div>
)}