统一业务列表 Ant Design 风格(05-31-unify-business-list-ant-design)
这个提交包含在:
@@ -30,7 +30,12 @@ import { DateTextInput } from "../components/common/DateTextInput";
|
||||
import { StatusBadge } from "../components/common/StatusBadge";
|
||||
import { TableSkeleton } from "../components/common/TableSkeleton";
|
||||
import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
|
||||
import { FilterBar, ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
||||
import { ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
||||
import {
|
||||
BusinessListToolbar,
|
||||
BusinessMobileList,
|
||||
BusinessTable,
|
||||
} from "../components/patterns/BusinessListTemplate";
|
||||
import { SectionPanel } from "../components/patterns/SectionPanel";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Input } from "../components/ui/input";
|
||||
@@ -890,9 +895,20 @@ export function AssetRegistryPage() {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-6">
|
||||
<FilterBar className="space-y-4">
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_190px_auto]">
|
||||
<div className="grid gap-4">
|
||||
<BusinessListToolbar
|
||||
actions={canViewAll ? (
|
||||
<>
|
||||
<Button type="button" size="sm" variant={mine ? "default" : "secondary"} onClick={() => setMine(true)}>
|
||||
我相关
|
||||
</Button>
|
||||
<Button type="button" size="sm" variant={!mine ? "default" : "secondary"} onClick={() => setMine(false)}>
|
||||
全范围
|
||||
</Button>
|
||||
</>
|
||||
) : null}
|
||||
>
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_190px]">
|
||||
<Input
|
||||
placeholder="搜索编号/名称/hash/VER"
|
||||
value={assetSearch}
|
||||
@@ -912,17 +928,8 @@ export function AssetRegistryPage() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{canViewAll ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="button" variant={mine ? "default" : "secondary"} onClick={() => setMine(true)}>
|
||||
我相关
|
||||
</Button>
|
||||
<Button type="button" variant={!mine ? "default" : "secondary"} onClick={() => setMine(false)}>
|
||||
全范围
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</BusinessListToolbar>
|
||||
|
||||
{assetsQuery.isLoading ? <TableSkeleton columns={4} rows={6} /> : null}
|
||||
{assetsQuery.isError ? (
|
||||
@@ -930,7 +937,7 @@ export function AssetRegistryPage() {
|
||||
) : null}
|
||||
{!assetsQuery.isLoading && !assetsQuery.isError ? (
|
||||
<>
|
||||
<div className="space-y-3 md:hidden">
|
||||
<BusinessMobileList>
|
||||
{orderedAssetItems.length ? (
|
||||
orderedAssetItems.map((item) => (
|
||||
<button
|
||||
@@ -977,9 +984,8 @@ export function AssetRegistryPage() {
|
||||
) : (
|
||||
<div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无资产卡片</div>
|
||||
)}
|
||||
</div>
|
||||
<PrimaryTable className="hidden md:block ops-table-focus">
|
||||
<table className="w-full border-collapse text-left" data-testid="assets-table">
|
||||
</BusinessMobileList>
|
||||
<BusinessTable testId="assets-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th className="table-th">资产</th>
|
||||
@@ -1032,11 +1038,9 @@ export function AssetRegistryPage() {
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</PrimaryTable>
|
||||
</BusinessTable>
|
||||
</>
|
||||
) : null}
|
||||
</FilterBar>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
在新工单中引用
屏蔽一个用户