From 24d3c1dcac347ed1c960ed4f9d5934b2c61a3315 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 18 Jul 2026 06:13:18 +0800
Subject: [PATCH] refine Semi UI access filter workflow

---
 .../apps/web/src/v2/pages/AccessPage.test.tsx |  4 ++
 .../apps/web/src/v2/pages/AccessPage.tsx      |  5 ++-
 .../apps/web/src/v2/styles/workspace.css      | 40 +++++++++++++++++--
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.test.tsx
index 341a0d07..4dadd886 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.test.tsx
@@ -55,6 +55,10 @@ test('removes old access rows immediately when the vehicle filter scope changes'
   for (const className of ['v2-access-filter-card-v3', 'v2-access-kpis-card-v3', 'v2-access-table-v3']) {
     expect(view.container.querySelector(`.${className}.semi-card`)).toBeInTheDocument();
   }
+  const filterActions = view.container.querySelector<HTMLElement>('.v2-access-filter-actions');
+  expect(filterActions).toBeInTheDocument();
+  expect(within(filterActions!).getByRole('button', { name: '查询' })).toBeInTheDocument();
+  expect(within(filterActions!).getByRole('button', { name: '重置' })).toBeInTheDocument();
   expect(view.container.querySelector('.v2-access-semi-table.semi-table-wrapper')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-access-table-scroll-v3 > table')).not.toBeInTheDocument();
   const desktopRow = screen.getByTestId('access-row-OLDVIN');
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.tsx
index 79c4efef..c29c35f5 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/AccessPage.tsx
@@ -226,7 +226,10 @@ export default function AccessPage() {
       <label><span id="access-connection-label">接入状态</span><Select aria-labelledby="access-connection-label" value={draft.connectionState} onChange={(value) => setDraft({ ...draft, connectionState: String(value) })} optionList={[{ value: '', label: '全部状态' }, { value: 'attention', label: '需关注' }, { value: 'healthy', label: '已接来源正常' }, { value: 'master_data', label: '资料待维护' }, { value: 'degraded', label: '部分来源异常' }, { value: 'offline', label: '已接来源离线' }, { value: 'not_connected', label: '尚无来源' }]} /></label>
       <label><span id="access-protocol-label">真实协议</span><Select aria-labelledby="access-protocol-label" value={draft.protocol} onChange={(value) => setDraft({ ...draft, protocol: String(value) })} optionList={[{ value: '', label: '全部协议' }, ...PROTOCOLS.map((item) => ({ value: item, label: item }))]} /></label>
       <label><span id="access-oem-label">车辆品牌</span><Select aria-labelledby="access-oem-label" value={draft.oem} onChange={(value) => setDraft({ ...draft, oem: String(value) })} optionList={[{ value: '', label: '全部品牌' }, ...(summary?.oems.map((item) => ({ value: item.name, label: item.name })) ?? [])]} /></label>
-      <Button className="v2-primary-button" theme="solid" htmlType="submit">查询</Button><Button className="v2-secondary-button" theme="light" htmlType="button" onClick={() => apply(EMPTY_FILTERS)}>重置</Button>
+      <div className="v2-access-filter-actions">
+        <Button className="v2-primary-button" theme="solid" htmlType="submit">查询</Button>
+        <Button className="v2-secondary-button" theme="light" htmlType="button" onClick={() => apply(EMPTY_FILTERS)}>重置</Button>
+      </div>
     </form></WorkspaceFilterPanel>
     {summaryQuery.isError ? <InlineError message={summaryQuery.error instanceof Error ? summaryQuery.error.message : '接入汇总读取失败'} onRetry={() => summaryQuery.refetch()} /> : null}
     <Card className="v2-access-kpis-card-v3" bodyStyle={{ padding: 0 }}><section className="v2-access-kpis-v3">{[
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 e5f6e6d1..2d67e369 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -8044,7 +8044,7 @@
 
 .v2-access-filter-v3 {
   min-height: 54px;
-  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(128px, .7fr)) auto auto;
+  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(128px, .7fr)) auto;
   align-items: center;
   gap: 8px;
   padding: 7px 9px;
@@ -8059,7 +8059,7 @@
 }
 
 .v2-access-filter-v3 label > :is(.semi-input-wrapper, .semi-select),
-.v2-access-filter-v3 > .semi-button {
+.v2-access-filter-actions > .semi-button {
   width: 100%;
   height: 38px;
   min-height: 38px;
@@ -8067,6 +8067,25 @@
   border-radius: 8px;
 }
 
+.v2-access-filter-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.v2-access-filter-actions > .semi-button {
+  min-width: 76px;
+  padding-inline: 16px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.v2-access-filter-actions > .semi-button-primary.semi-button-solid {
+  box-shadow: 0 7px 16px rgba(18, 104, 243, .15);
+}
+
 .v2-access-kpis-card-v3.semi-card,
 .v2-access-kpis-v3 {
   min-height: 60px;
@@ -8111,7 +8130,11 @@
 
 @media (max-width: 1120px) and (min-width: 681px) {
   .v2-access-filter-v3 {
-    grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(110px, .65fr)) auto auto;
+    grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(110px, .65fr));
+  }
+
+  .v2-access-filter-actions {
+    grid-column: 1 / -1;
   }
 
   .v2-access-command-bar .v2-workspace-command-meta {
@@ -8147,6 +8170,17 @@
     display: block;
   }
 
+  .v2-access-filter-actions {
+    width: 100%;
+    grid-column: 1;
+  }
+
+  .v2-access-filter-actions > .semi-button {
+    height: 42px;
+    min-height: 42px;
+    flex: 1 1 0;
+  }
+
   .v2-access-kpis-card-v3.semi-card,
   .v2-access-kpis-v3 {
     min-height: 62px;