diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx index 25330e02..2215110c 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx @@ -44,6 +44,9 @@ test('deduplicates vehicle candidates by VIN and renders granted vehicles plate const view = render(); const customer = await screen.findByRole('button', { name: /选择客户 华东客户/ }); + expect(screen.getByLabelText('账号管理操作')).toHaveTextContent('客户访问治理'); + expect(screen.getByLabelText('账号管理操作')).toHaveTextContent('变更最多 30 秒生效'); + expect(view.container.querySelector('.v2-page-heading')).not.toBeInTheDocument(); expect(screen.getByRole('heading', { name: '账号范围', level: 5 })).toBeInTheDocument(); expect(screen.getByText('按客户名称、登录账号、客户标识与启停状态查找')).toBeInTheDocument(); expect(screen.getAllByText('1 / 1 个账号')).toHaveLength(2); diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx index 4fa51bf4..51491cb9 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx @@ -6,7 +6,6 @@ import { api } from '../../api/client'; import type { AdminUser, CustomerUserInput, CustomerVehicleGrantInput } from '../../api/types'; import { useMobileLayout } from '../hooks/useMobileLayout'; import { useSideSheetA11y } from '../hooks/useSideSheetA11y'; -import { PageHeader } from '../shared/PageHeader'; import { TablePagination } from '../shared/TablePagination'; import { VehicleCandidateList } from '../shared/VehicleCandidateList'; import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel'; @@ -245,13 +244,17 @@ export default function UsersPage() { }; return
- 最小权限原则} - actions={} - /> +
+
+ 客户访问治理 + 菜单与车辆按最小权限开放,变更最多 30 秒生效 +
+
+ {customers.length} 个客户账号 + 本地账号 · 可扩展外部身份源 + +
+
{ expect(source).toContain("from '@douyinfe/semi-ui'"); expect(source).toContain(' { expect(corePageSources.UsersPage).toContain(' .semi-tag { + min-height: 24px; + flex: 0 0 auto; + border-radius: 999px; + padding-inline: 9px; + font-size: 10px; + font-weight: 650; +} + +.v2-user-command-meta > .semi-typography { + overflow: hidden; + max-width: 220px; + font-size: 10px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.v2-user-command-meta > .semi-button { + min-height: 36px; + flex: 0 0 auto; + border-radius: 8px; + padding-inline: 13px; + font-size: 11px; +} + +.v2-user-filter-panel.v2-workspace-filter-panel.semi-card { + flex: 0 0 auto; + overflow: hidden; + border-radius: 10px; + box-shadow: none; +} + +.v2-user-filter-panel > .semi-card-body { + display: block; +} + +.v2-user-filter-panel > .semi-card-body > .v2-workspace-filter-heading { + display: none; +} + +.v2-user-filter-form { + min-height: 54px; + grid-template-columns: minmax(260px, 1fr) 156px auto; + gap: 8px; + padding: 7px 9px; +} + +.v2-user-filter-form > label { + display: contents; +} + +.v2-user-filter-form > label > span:not(.semi-select) { + display: none; +} + +.v2-user-filter-form :is(.semi-input-wrapper, .semi-select), +.v2-user-filter-reset.semi-button { + min-height: 38px; + align-self: center; + border-radius: 8px; +} + +.v2-user-filter-form .semi-input, +.v2-user-filter-form .semi-select-selection { + min-height: 36px; +} + +.v2-user-filter-reset.semi-button { + min-width: 80px; +} + +.v2-user-admin-grid { + display: flex; + width: 100%; + max-width: 1480px; + min-height: 0; + flex: 1 1 0; + align-items: stretch; + margin: 0 auto; +} + +.v2-user-list.semi-card { + position: static; + width: 100%; + height: 100%; + max-height: none; + min-height: 0; + flex: 1 1 0; + border-radius: 10px; +} + +.v2-user-list > .semi-card-body { + display: flex; + height: 100%; + min-height: 0; + flex-direction: column; +} + +.v2-user-directory-header.v2-workspace-panel-header { + min-height: 54px; + flex: 0 0 auto; + padding: 7px 12px; +} + +.v2-user-directory-header .v2-workspace-panel-copy { + gap: 1px; +} + +.v2-user-directory-header .v2-workspace-panel-copy strong { + font-size: 13px; +} + +.v2-user-directory-header .v2-workspace-panel-copy small { + font-size: 9px; +} + +.v2-user-directory-body { + display: flex; + min-height: 0; + flex: 1 1 0; + flex-direction: column; + padding: 8px 10px 10px; +} + +.v2-user-directory-metrics { + min-height: 56px; + flex: 0 0 auto; + margin-bottom: 8px; + border-radius: 8px; +} + +.v2-user-directory-metrics > span { + min-height: 54px; + grid-template-columns: auto auto; + align-items: baseline; + align-content: center; + justify-content: start; + column-gap: 8px; + padding: 7px 12px; +} + +.v2-user-directory-metrics small { + font-size: 10px; +} + +.v2-user-directory-metrics strong { + font-size: 20px; +} + +.v2-customer-list.semi-list { + min-height: 0; + flex: 1 1 0; + overflow: auto; + overscroll-behavior: contain; + scrollbar-gutter: stable; +} + +.v2-customer-list .semi-list-items { + gap: 6px; +} + +.v2-customer-list .v2-user-list-row.semi-list-item { + min-height: 62px; + border-radius: 8px; +} + +.v2-customer-list .v2-user-list-item.semi-button { + min-height: 62px; + padding: 7px 10px; +} + +.v2-customer-list .v2-user-list-item .semi-button-content { + grid-template-columns: 36px minmax(170px, 1.45fr) minmax(70px, .45fr) minmax(70px, .45fr) minmax(150px, .9fr) auto; + gap: 10px; +} + +.v2-user-avatar.semi-avatar { + width: 34px; + height: 34px; + border-radius: 8px; +} + +.v2-user-list-identity { + gap: 2px; +} + +.v2-user-list-identity b { + font-size: 12px; +} + +.v2-user-list-identity small, +.v2-user-list-facts small { + font-size: 9px; +} + +.v2-user-list-facts { + gap: 2px; +} + +.v2-user-list-facts b { + font-size: 10px; +} + +.v2-user-editor.semi-card { + top: 68px; + width: min(800px, calc(100vw - 360px)); + min-width: 680px; + background: #f5f7fa; + box-shadow: -18px 0 46px rgba(20, 37, 59, .18); +} + +.v2-user-editor > .semi-card-body, +.v2-user-editor form { + height: 100%; + min-height: 0; +} + +.v2-user-editor form { + display: flex; + flex-direction: column; + gap: 0; + overflow: hidden; +} + +.v2-user-editor-title { + position: relative; + min-height: 68px; + flex: 0 0 auto; + align-items: center; + padding: 10px 14px; +} + +.v2-user-editor-title h3 { + font-size: 18px; +} + +.v2-user-editor-title p { + max-width: 520px; + margin-top: 4px; + font-size: 10px; +} + +.v2-user-status { + flex: 0 0 auto; + font-size: 10px; +} + +.v2-user-editor-tabs.semi-tabs { + display: flex; + width: auto; + min-height: 0; + flex: 1 1 0; + flex-direction: column; + overflow: hidden; + margin: 8px 8px 0; + border-radius: 9px; +} + +.v2-user-editor-tabs > .semi-tabs-bar { + min-height: 48px; + flex: 0 0 auto; + padding-inline: 12px; +} + +.v2-user-editor-tabs > .semi-tabs-bar .semi-tabs-tab { + min-height: 47px; + font-size: 11px; +} + +.v2-user-editor-tabs > .semi-tabs-content { + min-height: 0; + flex: 1 1 0; + overflow: auto; + overscroll-behavior: contain; + padding: 8px; + scrollbar-gutter: stable; +} + +.v2-user-editor-tabs > .semi-tabs-content > .semi-tabs-pane { + min-height: 100%; +} + +.v2-user-editor-section.semi-card { + border-radius: 8px; +} + +.v2-user-editor-section > .semi-card-header { + min-height: 44px; +} + +.v2-user-editor-section > .semi-card-body { + padding: 12px; +} + +.v2-user-editor form > .v2-user-feedback { + flex: 0 0 auto; + margin: 0; + border-top: 1px solid #e1e7ef; + background: #fff; + padding: 7px 14px 0; +} + +.v2-user-editor form > footer { + position: relative; + bottom: auto; + min-height: 56px; + flex: 0 0 auto; + margin: 0; + padding: 8px 12px; +} + +.v2-user-editor form > footer .semi-button { + min-width: 128px; + min-height: 38px; +} + +.v2-assigned-toolbar { + margin-top: 10px; + padding-top: 10px; +} + +.v2-assigned-vins { + gap: 7px; + margin-top: 7px; +} + +.v2-assigned-vins > .v2-assigned-vehicle-card.semi-card { + min-height: 92px; +} + +.v2-assigned-pagination { + min-height: 46px; + margin-top: 8px; + padding-top: 8px; +} + +@media (max-width: 980px) and (min-width: 681px) { + .v2-user-command-meta > .semi-typography { + display: none; + } + + .v2-user-editor.semi-card { + width: min(760px, calc(100vw - 210px)); + min-width: 620px; + } + + .v2-customer-list .v2-user-list-item .semi-button-content { + grid-template-columns: 36px minmax(150px, 1fr) 70px 70px auto; + } + + .v2-user-list-facts.is-login { + display: none; + } +} + +@media (max-width: 680px) { + .v2-user-admin { + height: 100%; + gap: 7px; + overflow: hidden; + padding: 7px 7px 10px; + } + + .v2-user-command-bar { + min-height: 48px; + gap: 8px; + border-radius: 9px; + padding: 5px 6px 5px 10px; + } + + .v2-user-command-copy strong { + font-size: 12px; + } + + .v2-user-command-copy span, + .v2-user-command-meta > .semi-tag, + .v2-user-command-meta > .semi-typography { + display: none; + } + + .v2-user-command-meta > .semi-button { + width: 40px; + min-width: 40px; + min-height: 40px; + padding: 0; + } + + .v2-user-command-meta > .semi-button .semi-button-content { + font-size: 0; + } + + .v2-user-command-meta > .semi-button .semi-icon { + margin-right: 0; + font-size: 16px; + } + + .v2-user-filter-panel > .semi-card-body > .v2-workspace-filter-heading { + display: flex; + } + + .v2-user-filter-form { + min-height: 0; + grid-template-columns: minmax(0, 1fr); + gap: 8px; + padding: 8px; + } + + .v2-user-filter-form > label { + display: grid; + } + + .v2-user-filter-form > label > span:not(.semi-select) { + display: block; + } + + .v2-user-filter-form.is-mobile-collapsed { + display: none; + } + + .v2-user-admin-grid { + display: flex; + min-height: 0; + flex: 1 1 0; + overflow: hidden; + } + + .v2-user-list > .semi-card-body { + display: flex; + padding: 0 !important; + } + + .v2-user-directory-header.v2-workspace-panel-header { + min-height: 50px; + padding: 6px 10px; + } + + .v2-user-directory-header .v2-workspace-panel-copy small { + display: none; + } + + .v2-user-directory-body { + padding: 7px; + } + + .v2-user-directory-metrics { + min-height: 48px; + margin-bottom: 7px; + } + + .v2-user-directory-metrics > span { + min-height: 46px; + display: grid; + grid-template-columns: auto; + gap: 2px; + padding: 6px 8px; + } + + .v2-user-directory-metrics small { + font-size: 8px; + } + + .v2-user-directory-metrics strong { + font-size: 17px; + } + + .v2-customer-list.semi-list { + display: block; + min-height: 0; + overflow: auto; + } + + .v2-customer-list .v2-user-list-item.semi-button { + min-height: 72px; + padding: 7px 8px; + } + + .v2-customer-list .v2-user-list-item .semi-button-content { + grid-template-columns: 34px minmax(0, 1fr) 58px auto; + grid-template-rows: auto auto; + gap: 3px 7px; + } + + .v2-user-avatar { + grid-row: 1 / 3; + } + + .v2-user-list-identity { + grid-column: 2 / 4; + grid-row: 1; + } + + .v2-user-list-facts { + grid-row: 2; + } + + .v2-user-list-facts.is-login { + display: none; + } + + .v2-user-list-trailing { + grid-column: 4; + grid-row: 1 / 3; + } + + .v2-user-editor.semi-card { + inset: 54px 0 66px; + width: auto; + min-width: 0; + } + + .v2-user-editor-title { + min-height: 62px; + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 7px; + padding: 8px 9px; + } + + .v2-user-editor-title h3 { + font-size: 16px; + } + + .v2-user-editor-title p { + max-width: 210px; + font-size: 9px; + } + + .v2-user-status > span { + display: none; + } + + .v2-user-editor-close.semi-button { + width: 38px; + height: 38px; + } + + .v2-user-editor-tabs.semi-tabs { + margin: 6px 6px 0; + } + + .v2-user-editor-tabs > .semi-tabs-bar { + min-height: 44px; + overflow-x: auto; + padding-inline: 7px; + } + + .v2-user-editor-tabs > .semi-tabs-bar .semi-tabs-tab { + min-height: 43px; + flex: 0 0 auto; + margin-right: 14px; + font-size: 10px; + } + + .v2-user-editor-tabs > .semi-tabs-content { + padding: 6px; + } + + .v2-user-editor-section > .semi-card-body { + padding: 9px; + } + + .v2-user-fields { + grid-template-columns: minmax(0, 1fr); + gap: 10px; + } + + .v2-user-editor form > footer { + min-height: 54px; + padding: 6px; + } + + .v2-user-editor form > footer .semi-button { + width: 100%; + min-width: 0; + min-height: 42px; + justify-content: center; + } + + .v2-assigned-toolbar { + display: grid; + gap: 8px; + } + + .v2-assigned-toolbar > .semi-input-wrapper { + width: 100%; + flex-basis: auto; + } + + .v2-assigned-vins { + grid-template-columns: minmax(0, 1fr); + } +}