diff --git a/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx index bfc87bdf..6861d399 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx @@ -222,11 +222,16 @@ test('defaults to a compact mobile vehicle directory and keeps eight recent vehi expect(screen.getAllByRole('listitem', { name: /打开 .* 车辆档案/ })).toHaveLength(8); expect(view.container.querySelector('.v2-vehicle-directory-table')).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-vehicle-query-panel')).toHaveClass('is-mobile-collapsed'); - const toggle = screen.getByRole('button', { name: '修改车辆定位:10 辆授权车辆' }); + expect(screen.queryByLabelText('查车操作')).not.toBeInTheDocument(); + const toggle = screen.getByRole('button', { name: '修改车辆筛选:10 辆授权车辆' }); expect(toggle).toHaveAttribute('aria-expanded', 'false'); fireEvent.click(toggle); expect(view.container.querySelector('.v2-vehicle-query-panel')).not.toHaveClass('is-mobile-collapsed'); - expect(screen.getByRole('textbox', { name: '搜索车辆' })).toBeVisible(); + const input = screen.getByRole('textbox', { name: '搜索车辆' }); + expect(input).toBeVisible(); + expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument(); + fireEvent.focus(input); + expect(view.container.querySelector('.v2-vehicle-search-options')).toBeInTheDocument(); }); test('paginates the complete desktop authorized vehicle directory', async () => { diff --git a/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx b/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx index 90694dcd..41d126ee 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@tanstack/react-query'; -import { IconArrowRight, IconChevronRight, IconRefresh, IconSearch } from '@douyinfe/semi-icons'; +import { IconArrowRight, IconBox, IconChevronRight, IconRefresh, IconSearch } from '@douyinfe/semi-icons'; import { Button, Card, Empty, Input, Table, Tag } from '@douyinfe/semi-ui'; import { type FormEvent, lazy, Suspense, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -61,7 +61,12 @@ export default function VehicleSearchWorkspace() { const pageVehicles = useMemo(() => options.slice(0, pageSize), [options, pageSize]); const total = candidates.data?.total ?? 0; const totalPages = Math.max(1, Math.ceil(total / pageSize)); + const administrator = canAdminister(session); useEffect(() => () => window.clearTimeout(closeTimerRef.current), []); + useEffect(() => { + setFiltersCollapsed(mobileLayout); + setCandidatesOpen(false); + }, [mobileLayout]); const openCandidates = () => { window.clearTimeout(closeTimerRef.current); setCandidatesOpen(true); @@ -86,18 +91,18 @@ export default function VehicleSearchWorkspace() { }; const vehicleScope = candidates.data ? `${candidates.data.total.toLocaleString('zh-CN')} 辆授权` : '授权范围'; return
- setSyncOpen((value) => !value)}>{syncOpen ? '收起主档同步' : '批量同步主档'} : null} - /> + actions={administrator ? : null} + /> : null} {candidates.data ? `本页 ${formatZhNumber(pageVehicles.length)} 辆` : '授权范围'}} actions={} diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css index da3428ca..564dfe8b 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -2260,12 +2260,38 @@ @media (max-width: 700px) { .v2-vehicle-search-page { - gap: 9px; + gap: 8px; padding: 9px 8px 92px; } + .v2-vehicle-command-bar.is-mobile-admin { + min-height: 50px; + border-color: #dce6f2; + background: linear-gradient(105deg, #fff 0%, #f8fbff 100%); + } + + .v2-vehicle-command-bar.is-mobile-admin .v2-workspace-command-copy > .semi-typography:last-child { + display: none; + } + + .v2-vehicle-command-bar.is-mobile-admin .v2-workspace-command-actions > .semi-button { + min-height: 36px; + border-radius: 9px; + padding-inline: 11px; + } + + .v2-vehicle-search-page > .v2-mobile-filter-toggle.semi-button { + min-height: 52px; + padding-block: 6px; + } + + .v2-vehicle-query-panel.is-mobile-collapsed { + display: none; + } + .v2-vehicle-query-panel .v2-vehicle-search-form { min-height: 0; + flex-wrap: wrap; border-top: 0; padding: 9px; } @@ -8331,10 +8357,6 @@ min-height: 48px; } - .v2-vehicle-query-panel > .semi-card-body > .v2-workspace-filter-heading { - display: flex; - } - .v2-vehicle-query-panel .v2-vehicle-search-form { height: auto; min-height: 0;