Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 13:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update backup recommendations UI; enhance styles and structure for better user experience

Browse Source
This commit is contained in:
shuaiplus
2026-05-10 01:54:12 +08:00
parent 4e62c90700
commit 2f1b61e883
10 changed files with 504 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/backup-center/BackupOperationsSidebar.tsx
+45 -38
View File
@@ -41,42 +41,47 @@ export function BackupOperationsSidebar(props: BackupOperationsSidebarProps) {
</button>
</div>
<div className="backup-divider" />
<details className="backup-recommendations-disclosure">
<summary className="backup-recommendations-summary">
<span>
<strong>{t('txt_backup_recommend_title')}</strong>
<small>{t('txt_backup_recommend_group_webdav')} · {t('txt_backup_recommend_group_s3')}</small>
</span>
<span className="backup-recommendations-summary-icon" aria-hidden="true" />
</summary>
<div className="section-head">
<h3>{t('txt_backup_recommend_title')}</h3>
</div>
<div className="backup-recommendation-group">
<h4 className="backup-recommendation-group-title">{t('txt_backup_recommend_group_webdav')}</h4>
<div className="backup-recommendation-list">
{props.recommendedWebDavProviders.map((provider) => (
<button
key={provider.id}
type="button"
className={`backup-destination-item ${props.selectedProviderId === provider.id ? 'active' : ''}`}
onClick={() => props.onSelectProvider(provider.id)}
>
<span className="backup-recommendation-row">
<span className="backup-destination-name">{provider.name}</span>
<span className="backup-destination-meta">{provider.capacity}</span>
</span>
{hasLinkedStorages(provider) && provider.linkedStorages.length ? (
<span className="backup-recommendation-linked">
{provider.linkedStorages.map((storage) => (
<span key={`${provider.id}-${storage.name}`} className="backup-recommendation-linked-item">
<span>{storage.name}</span>
<span>{storage.capacity}</span>
<div className="backup-recommendations-body">
<div className="backup-recommendation-group">
<h4 className="backup-recommendation-group-title">{t('txt_backup_recommend_group_webdav')}</h4>
<div className="backup-recommendation-list">
{props.recommendedWebDavProviders.map((provider) => (
<button
key={provider.id}
type="button"
className={`backup-destination-item ${props.selectedProviderId === provider.id ? 'active' : ''}`}
onClick={() => props.onSelectProvider(provider.id)}
>
<span className="backup-recommendation-row">
<span className="backup-destination-name">{provider.name}</span>
<span className="backup-destination-meta">{provider.capacity}</span>
</span>
{hasLinkedStorages(provider) && provider.linkedStorages.length ? (
<span className="backup-recommendation-linked">
{provider.linkedStorages.map((storage) => (
<span key={`${provider.id}-${storage.name}`} className="backup-recommendation-linked-item">
<span>{storage.name}</span>
<span>{storage.capacity}</span>
</span>
))}
</span>
))}
</span>
) : null}
</button>
))}
</div>
</div>
<div className="backup-recommendation-group">
<h4 className="backup-recommendation-group-title">{t('txt_backup_recommend_group_s3')}</h4>
{props.recommendedS3Providers.length ? (
) : null}
</button>
))}
</div>
</div>
<div className="backup-recommendation-group">
<h4 className="backup-recommendation-group-title">{t('txt_backup_recommend_group_s3')}</h4>
{props.recommendedS3Providers.length ? (
<div className="backup-recommendation-list">
{props.recommendedS3Providers.map((provider) => (
<button
@@ -92,10 +97,12 @@ export function BackupOperationsSidebar(props: BackupOperationsSidebarProps) {
</button>
))}
</div>
) : (
<div className="backup-browser-empty">{t('txt_backup_recommend_empty')}</div>
)}
</div>
) : (
<div className="backup-browser-empty">{t('txt_backup_recommend_empty')}</div>
)}
</div>
</div>
</details>
</aside>
);
}
webapp/src/components/vault/VaultEditor.tsx
+7 -1
View File
@@ -109,7 +109,13 @@ function WebsiteRow(props: WebsiteRowProps) {
))}
</select>
{props.canRemove && (
<button type="button" className="btn btn-secondary small" onClick={() => props.onRemove(props.index)}>
<button
type="button"
className="btn btn-secondary small website-remove-btn"
title={t('txt_remove')}
aria-label={t('txt_remove')}
onClick={() => props.onRemove(props.index)}
>
<X size={14} className="btn-icon" />
{t('txt_remove')}
</button>