diff --git a/web/src/components/table/users/modals/EditUserModal.jsx b/web/src/components/table/users/modals/EditUserModal.jsx index 297f18116..90676d840 100644 --- a/web/src/components/table/users/modals/EditUserModal.jsx +++ b/web/src/components/table/users/modals/EditUserModal.jsx @@ -207,7 +207,7 @@ const EditUserModal = (props) => { onSubmit={submit} > {({ values }) => ( -
+
{/* 基本信息 */}
@@ -344,7 +344,7 @@ const EditUserModal = (props) => { {t('绑定信息')}
- {t('第三方账户绑定状态(只读)')} + {t('管理用户已绑定的第三方账户,支持筛选与解绑')}
@@ -353,7 +353,7 @@ const EditUserModal = (props) => { theme='outline' onClick={openBindingModal} > - {t('修改绑定')} + {t('管理绑定')}
diff --git a/web/src/components/table/users/modals/UserBindingManagementModal.jsx b/web/src/components/table/users/modals/UserBindingManagementModal.jsx index 547c04f7d..c5b2a3a15 100644 --- a/web/src/components/table/users/modals/UserBindingManagementModal.jsx +++ b/web/src/components/table/users/modals/UserBindingManagementModal.jsx @@ -53,7 +53,7 @@ const UserBindingManagementModal = ({ }) => { const { t } = useTranslation(); const [bindingLoading, setBindingLoading] = React.useState(false); - const [showUnboundOnly, setShowUnboundOnly] = React.useState(false); + const [showBoundOnly, setShowBoundOnly] = React.useState(true); const [statusInfo, setStatusInfo] = React.useState({}); const [customOAuthBindings, setCustomOAuthBindings] = React.useState([]); const [bindingActionLoading, setBindingActionLoading] = React.useState({}); @@ -90,7 +90,7 @@ const UserBindingManagementModal = ({ React.useEffect(() => { if (!visible) return; - setShowUnboundOnly(false); + setShowBoundOnly(true); setBindingActionLoading({}); loadBindingData(); }, [visible, loadBindingData]); @@ -294,8 +294,12 @@ const UserBindingManagementModal = ({ ...customBindingItems.map((item) => ({ ...item, type: 'custom' })), ]; - const visibleBindingItems = showUnboundOnly - ? allBindingItems.filter((item) => !item.value) + const boundCount = allBindingItems.filter((item) => + Boolean(item.value), + ).length; + + const visibleBindingItems = showBoundOnly + ? allBindingItems.filter((item) => Boolean(item.value)) : allBindingItems; return ( @@ -308,86 +312,96 @@ const UserBindingManagementModal = ({ title={
- {t('绑定信息')} + {t('账户绑定管理')}
} > -
- setShowUnboundOnly(Boolean(e.target.checked))} - > - {`${t('筛选')} ${t('未绑定')}`} - - - {t('筛选')} · {visibleBindingItems.length} - -
- - {visibleBindingItems.length === 0 ? ( - - {t('暂无自定义 OAuth 提供商')} - - ) : ( -
- {visibleBindingItems.map((item) => { - const isBound = Boolean(item.value); - const loadingKey = - item.type === 'builtin' - ? `builtin-${item.key}` - : `custom-${item.providerId}`; - const statusText = isBound - ? item.value - : item.enabled - ? t('未绑定') - : t('未启用'); - - return ( - -
-
-
- {item.icon} -
-
-
- {item.name} - - {item.type === 'builtin' ? 'Built-in' : 'Custom'} - -
-
- {statusText} -
-
-
- -
-
- ); - })} +
+
+ setShowBoundOnly(Boolean(e.target.checked))} + > + {t('仅显示已绑定')} + + + {t('已绑定')} {boundCount} / {allBindingItems.length} +
- )} + + {visibleBindingItems.length === 0 ? ( + + {t('暂无已绑定项')} + + ) : ( +
+ {visibleBindingItems.map((item, index) => { + const isBound = Boolean(item.value); + const loadingKey = + item.type === 'builtin' + ? `builtin-${item.key}` + : `custom-${item.providerId}`; + const statusText = isBound + ? item.value + : item.enabled + ? t('未绑定') + : t('未启用'); + const shouldSpanTwoColsOnDesktop = + visibleBindingItems.length % 2 === 1 && + index === visibleBindingItems.length - 1; + + return ( + +
+
+
+ {item.icon} +
+
+
+ {item.name} + + {item.type === 'builtin' + ? t('内置') + : t('自定义')} + +
+
+ {statusText} +
+
+
+ +
+
+ ); + })} +
+ )} +
);