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}
-
-
-
-
}
- size='small'
- disabled={!isBound}
- loading={Boolean(bindingActionLoading[loadingKey])}
- onClick={() => {
- if (item.type === 'builtin') {
- handleUnbindBuiltInAccount(item);
- return;
- }
- handleUnbindCustomOAuthAccount({
- id: item.providerId,
- name: item.name,
- });
- }}
- >
- {t('解绑')}
-
-
-
- );
- })}
+
+
+ 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}
+
+
+
+
}
+ size='small'
+ disabled={!isBound}
+ loading={Boolean(bindingActionLoading[loadingKey])}
+ onClick={() => {
+ if (item.type === 'builtin') {
+ handleUnbindBuiltInAccount(item);
+ return;
+ }
+ handleUnbindCustomOAuthAccount({
+ id: item.providerId,
+ name: item.name,
+ });
+ }}
+ >
+ {t('解绑')}
+
+
+
+ );
+ })}
+
+ )}
+
);