refine Semi UI account workspace

vehicle-data-platform/apps/web/src/v2/pages/UsersPage.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { IconChevronRight, IconClose, IconDelete, IconPlus, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
+import { IconChevronRight, IconDelete, IconPlus, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
 import { Avatar, Button, Card, Checkbox, Collapse, Empty, Input, List, Select, SideSheet, Spin, Switch, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
 import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { api } from '../../api/client';
@@ -102,6 +102,8 @@ export default function UsersPage() {
   const editingGrant = useMemo(() => draft.vehicleGrants.find((grant) => grant.vin === editingGrantVIN), [draft.vehicleGrants, editingGrantVIN]);
   const editingGrantPlate = editingGrant ? vehicleLabels[editingGrant.vin] : '';
   const grantWindowInvalid = Boolean(editingGrant && (!editingGrant.validFrom || (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)));
+  const editorVisible = creating || Boolean(selected);
+  useSideSheetA11y(editorVisible, '.v2-user-editor-sidesheet', 'v2-user-editor-sheet', '客户账号详情', '关闭账号详情');
   useSideSheetA11y(Boolean(editingGrant), '.v2-user-grant-sidesheet', 'v2-user-grant-window', '车辆授权有效期', '关闭车辆授权有效期');
 
   useEffect(() => {
@@ -226,8 +228,8 @@ export default function UsersPage() {
     setAssignedPage(1);
     setBulkVINs('');
   };
-  const submit = (event: FormEvent) => {
-    event.preventDefault();
+  const persistDraft = () => {
+    if (save.isPending) return;
     setFeedback('');
     if (!draft.displayName.trim() || (creating && (!draft.username.trim() || !draft.password))) {
       setActiveSection('identity');
@@ -243,6 +245,10 @@ export default function UsersPage() {
     }
     save.mutate();
   };
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    persistDraft();
+  };
 
   return <div className="v2-user-admin">
     <WorkspaceCommandBar
@@ -314,35 +320,51 @@ export default function UsersPage() {
             <span><small>车辆授权</small><strong>{grantedVehicles}</strong></span>
           </div>
           {users.isPending ? <PanelLoading className="v2-user-list-loading" title="正在加载客户账号" description="账号目录和授权摘要就绪后会自动显示。" /> : customers.length === 0 ? <PanelEmpty className="v2-user-list-empty" title="还没有客户账号" description="创建客户账号后，可在这里配置菜单和车辆范围。" action={<Button theme="solid" onClick={startCreate}>创建第一个客户账号</Button>} /> : <>
-            <List
-              className="v2-customer-list"
-              dataSource={visibleCustomers}
-              emptyContent={<Empty className="v2-user-filter-empty" title="没有匹配账号" description="请更换名称或账号关键词。" />}
-              renderItem={(user) => <List.Item key={user.id} className={`v2-user-list-row${selectedID === user.id && !creating ? ' is-active' : ''}`}>
-                <Button
-                  className="v2-user-list-item"
-                  theme="borderless"
-                  type="tertiary"
-                  aria-label={`选择客户 ${user.displayName}，账号 ${user.username}，${user.vehicles.length} 辆授权车`}
-                  aria-pressed={selectedID === user.id && !creating}
-                  aria-expanded={selectedID === user.id && !creating}
-                  onClick={() => selectCustomer(user)}
-                >
-                  <Avatar className="v2-user-avatar" color={user.status === 'enabled' ? 'light-blue' : 'grey'} shape="square" size="small">{user.displayName.slice(0, 1)}</Avatar>
-                  <span className="v2-user-list-identity"><b>{user.displayName}</b><small>@{user.username}</small></span>
-                  <span className="v2-user-list-facts"><small>菜单权限</small><b>{user.menuKeys.length} 项</b></span>
-                  <span className="v2-user-list-facts"><small>车辆权限</small><b>{user.vehicles.length} 辆</b></span>
-                  <span className="v2-user-list-facts is-login"><small>最近登录</small><b>{formatTime(user.lastLoginAt)}</b></span>
-                  <span className="v2-user-list-trailing"><Tag className={`v2-user-status-tag is-${user.status}`} color={user.status === 'enabled' ? 'green' : 'grey'} type="light" size="small">{user.status === 'enabled' ? '启用' : '停用'}</Tag><IconChevronRight /></span>
-                </Button>
-              </List.Item>}
-            />
+            <div className="v2-customer-list-scroll" role="region" aria-label="客户账号目录，可上下滚动" tabIndex={0}>
+              <List
+                className="v2-customer-list"
+                dataSource={visibleCustomers}
+                emptyContent={<Empty className="v2-user-filter-empty" title="没有匹配账号" description="请更换名称或账号关键词。" />}
+                renderItem={(user) => <List.Item key={user.id} className={`v2-user-list-row${selectedID === user.id && !creating ? ' is-active' : ''}`}>
+                  <Button
+                    className="v2-user-list-item"
+                    theme="borderless"
+                    type="tertiary"
+                    aria-label={`选择客户 ${user.displayName}，账号 ${user.username}，${user.vehicles.length} 辆授权车`}
+                    aria-pressed={selectedID === user.id && !creating}
+                    aria-expanded={selectedID === user.id && !creating}
+                    onClick={() => selectCustomer(user)}
+                  >
+                    <Avatar className="v2-user-avatar" color={user.status === 'enabled' ? 'light-blue' : 'grey'} shape="square" size="small">{user.displayName.slice(0, 1)}</Avatar>
+                    <span className="v2-user-list-identity"><b>{user.displayName}</b><small>@{user.username}</small></span>
+                    <span className="v2-user-list-facts"><small>菜单权限</small><b>{user.menuKeys.length} 项</b></span>
+                    <span className="v2-user-list-facts"><small>车辆权限</small><b>{user.vehicles.length} 辆</b></span>
+                    <span className="v2-user-list-facts is-login"><small>最近登录</small><b>{formatTime(user.lastLoginAt)}</b></span>
+                    <span className="v2-user-list-trailing"><Tag className={`v2-user-status-tag is-${user.status}`} color={user.status === 'enabled' ? 'green' : 'grey'} type="light" size="small">{user.status === 'enabled' ? '启用' : '停用'}</Tag><IconChevronRight /></span>
+                  </Button>
+                </List.Item>}
+              />
+            </div>
           </>}
         </div>
       </Card>
-      {creating || selected ? <Card className="v2-user-editor" bodyStyle={{ padding: 0 }} aria-label="客户账号详情">
-        <form onSubmit={submit}>
-          <div className="v2-user-editor-title"><div><h3>{creating ? '创建客户账号' : selected?.displayName}</h3><p>{creating ? '设置登录身份和最小必要权限' : `@${selected?.username} · ${draft.menuKeys.length} 个菜单 · ${draft.vehicleGrants.length} 辆车 · 最近登录 ${formatTime(selected?.lastLoginAt)}`}</p></div><label className="v2-user-status"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '账号启用' : '账号停用'}</span></label><Button className="v2-user-editor-close" theme="borderless" type="tertiary" icon={<IconClose />} aria-label="关闭账号详情" onClick={closeEditor} /></div>
+    </div>
+    <SideSheet
+      className="v2-user-editor-sidesheet"
+      visible={editorVisible}
+      width={mobileLayout ? '100%' : 840}
+      aria-label="客户账号详情"
+      title={<div className="v2-user-editor-sheet-title">
+        <span><strong>{creating ? '创建客户账号' : selected?.displayName}</strong><small>{creating ? '设置登录身份和最小必要权限' : `@${selected?.username} · ${draft.menuKeys.length} 个菜单 · ${draft.vehicleGrants.length} 辆车 · 最近登录 ${formatTime(selected?.lastLoginAt)}`}</small></span>
+        <label className="v2-user-status"><Switch aria-label={draft.status === 'enabled' ? '账号启用' : '账号停用'} checked={draft.status === 'enabled'} onChange={(checked) => setDraft((value) => ({ ...value, status: checked ? 'enabled' : 'disabled' }))} /><span>{draft.status === 'enabled' ? '账号启用' : '账号停用'}</span></label>
+      </div>}
+      onCancel={closeEditor}
+      footer={<div className="v2-user-editor-sheet-footer">
+        <Typography.Text className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} role="status" type={save.isError ? 'danger' : 'tertiary'}>{feedback || '权限变更最多 30 秒生效，保存前请核对车辆有效期'}</Typography.Text>
+        <Button theme="solid" htmlType="submit" form="v2-user-editor-form" disabled={save.isPending}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button>
+      </div>}
+    >
+      {editorVisible ? <form id="v2-user-editor-form" className="v2-user-editor-form" onSubmit={submit}>
           <Tabs className="v2-user-editor-tabs" activeKey={activeSection} onChange={(key) => setActiveSection(String(key) as EditorSection)}>
           <Tabs.TabPane tab="登录身份" itemKey="identity">
           <Card className="v2-user-editor-section v2-user-identity-section" title="登录身份" headerLine>
@@ -413,11 +435,8 @@ export default function UsersPage() {
           </Card>
           </Tabs.TabPane>
           </Tabs>
-          {feedback ? <p className={`v2-user-feedback${save.isError ? ' is-error' : ''}`} role="status">{feedback}</p> : null}
-          <footer><Button theme="solid" htmlType="submit" disabled={save.isPending}>{save.isPending ? '正在保存…' : creating ? '创建账号' : '保存权限'}</Button></footer>
-        </form>
-      </Card> : null}
-    </div>
+        </form> : null}
+    </SideSheet>
     <SideSheet
       className="v2-user-grant-sidesheet"
       visible={Boolean(editingGrant)}