wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 5 软件包 项目 发布 百科 活动

统一业务台账首屏布局（05-30-fix-payment-ledger-layout-consistency）

浏览代码
这个提交包含在：
wangsli
2026-05-30 21:44:16 +08:00
父节点 eea2af7718
当前提交 16fd9bdf52
共修改 25 个文件，包含 834 行新增和 543 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
.trellis/spec/hyb-oa/frontend-react-vite-design.md
+8 -5
查看文件
@@ -280,8 +280,9 @@ pages must pick one primary template before implementation:
- `业务台账列表`: reimbursement, contracts, projects, payments, AP and invoices.
Page-header primary action, command bar, list/table body and folded ledger
tools.
- `主从工作台`: procurement, assets and inventory checks. Left/index list plus
right/current-object detail and actions.
- `主从工作台`: only for true task execution after an explicit user selection,
such as an inventory-check task that has been opened. It is not the default
first screen for procurement, assets, payments, AP or invoices.
- `详情工作区`: reimbursement detail, workflow task detail, project detail and
future contract detail. Overview, facts/evidence, right-side summary/command
panel and history.
@@ -297,9 +298,11 @@ pages must pick one primary template before implementation:
- Mobile is the responsive expression of these templates: top status/focus,
card list or sectioned detail, bottom primary action. Do not create a PC shell
inside mobile routes.
- B-class business pages should usually choose `业务台账列表` or `主从工作台`.
Use a ledger when records open into details; use master-detail when users
select one object and edit/process it in the same workspace.
- B-class business pages should usually choose `业务台账列表`. Procurement,
assets, payments, AP and invoices must start as a list and open details only
through an explicit row action, `?id=` detail mode, drawer or detail route.
Use `主从工作台` only for explicit execution tasks, and never auto-select the
first item merely to fill a detail column.
- A-class task pages must not drift into configuration surfaces. C-class
configuration pages must not appear as ordinary employee task pages.
.trellis/tasks/05-30-fix-payment-ledger-layout-consistency/check.jsonl
+3
查看文件
@@ -0,0 +1,3 @@
{"file":".trellis/spec/hyb-oa/frontend-react-vite-design.md","reason":"检查业务台账是否保持单列列表、显式详情和紧凑筛选。"}
{"file":".trellis/spec/hyb-oa/deployment-trialrun.md","reason":"部署、公网复检和可测试告知边界。"}
{"file":".trellis/spec/hyb-oa/project-governance.md","reason":"检查 Trellis task、提交、验证和交付流程是否闭环。"}
.trellis/tasks/05-30-fix-payment-ledger-layout-consistency/implement.jsonl
+3
查看文件
@@ -0,0 +1,3 @@
{"file":".trellis/spec/hyb-oa/frontend-react-vite-design.md","reason":"业务台账首屏、成熟企业页面基线、按钮命名和详情页布局约束。"}
{"file":".trellis/spec/hyb-oa/project-governance.md","reason":"Trellis task、提交、验证和 solo developer 工作流约束。"}
{"file":".trellis/spec/hyb-oa/deployment-trialrun.md","reason":"公网部署、公网检查和可测试告知边界。"}
.trellis/tasks/05-30-fix-payment-ledger-layout-consistency/implement.md
+14
查看文件
@@ -0,0 +1,14 @@
# 实施说明
## 页面策略
- 业务台账首屏统一为单列列表：付款、资产、采购、票据、应付账款、报销和项目不得默认渲染详情区。
- 详情必须由用户显式进入：使用 `?id=`、详情路由或行级 `查看详情`，不自动选择第一条记录。
- `台账工具` 固定为页头右侧入口，展开后占据列表上方全宽区域，不作为左侧栏或右侧提示栏。
- 状态摘要使用紧凑 chips/tabs/counts，去掉普通工作流解释句和大型状态卡。
## 风险控制
- 不改后端 API、权限校验、审批状态机和付款执行语义。
- 旧 E2E 按新交互同步：票据上传/绑定先打开 `台账工具`，付款执行进入批次详情。
- 资产盘点保留执行页例外，但首屏不自动选择盘点任务。
.trellis/tasks/05-30-fix-payment-ledger-layout-consistency/prd.md
+185
查看文件
@@ -0,0 +1,185 @@
# 修正业务台账首屏布局一致性
## Goal
修正用户指出的台账统一规则漏改问题，并扩展为所有业务台账页一致性审查。统一采用成熟企业系统常见的列表边界：首屏只做查找、筛选、状态判断和进入详情；详情通过显式入口进入独立详情/编辑视图；台账工具在页头右侧触发并展开为列表上方的工具区，不挤压列表，不在首屏默认塞入详情工作台。
## What I already know
- 用户明确反馈：
- `付款` 还没按统一规则改。
- 台账虽然是列表，但详情在列表下面，仍然不一致。
- `台账工具` 还在左侧，和其他页面操作区域不一致。
- 需要继续检查其他页面，避免只修局部后同类问题继续存在。
- 已确认的统一规则：
- 业务台账首屏统一为单列列表。
- 不默认左列表/右详情，不自动选中第一条记录。
- 不在列表下方自动展开详情。
- 状态摘要用 Tab/Chip/counts，不使用大状态卡片。
- `台账工具` 属于页头右侧操作，低频工具展开在列表上方或独立面板，不作为左侧栏。
- 详情页采用独立详情工作区：PC 顶部摘要、中部事实/证据/明细、右侧或顶部动作区；移动端单列。
- 已定位代码：
- `client/src/pages/PaymentBatchesPage.tsx`
- 仍有 `WorkspaceHeader` 副标题解释文案。
- 仍有 `finance-status-strip` 五张大指标卡。
- `selectedBatch` 默认回退到 `batches[0]`，会自动选中首条。
- `useEffect` 自动写入 `?id=`。
- 主体为 `xl:grid-cols-[340px,minmax(0,1fr)]` 的左列表/右详情。
- `client/src/pages/AssetRegistryPage.tsx`
- `showLedgerTools` 时使用 `xl:grid-cols-[380px,minmax(0,1fr)]`，台账工具成为左侧列。
- 点击资产行后保持列表并在下方直接渲染详情/编辑区。
- 详情仍依赖 `selectedAssetId || isCreatingAsset` 在列表页面下方展开。
- `client/src/pages/PurchaseRequestsPage.tsx`
- 仍有 `selectedId`、`?id`、行高亮和列表下方详情区。
- `id` 模式仍像内嵌详情，不像独立详情工作区。
- `client/src/pages/InvoicePoolPage.tsx`
- 会在列表数据返回后自动选中第一张票据。
- 仍有页头解释性副标题和五张大状态卡。
- 列表后默认渲染 `InvoiceDetailPanel`。
- `client/src/pages/InventoryChecksPage.tsx`
- 资产盘点是任务执行页而非普通台账，但当前使用大状态卡、左侧新建/列表、右侧详情执行工作台，并自动选中第一条盘点任务。
- 本轮需要判断是否按“资产执行页例外”处理，至少不能混入普通资产台账首屏。
- 已初步检查但不作为主要改造目标：
- `client/src/pages/ReimbursementsPage.tsx`：当前更接近列表优先，详情走独立路由。
- `client/src/pages/ContractsRegistryPage.tsx`：台账工具位于上方，但新建/编辑仍在列表前方，需做防回退和局部降噪检查。
- `client/src/pages/ProjectsPage.tsx`：项目详情走独立路由，台账工具位于上方；工具区内有低频查看侧块，需做一致性检查。
- `client/src/pages/ApOperationsPage.tsx`：应付账款是财务操作页，采用 tabs/list 和上方工具；`财务台账` tab 默认筛选较多，需检查是否压缩到常用筛选/台账工具。
## Assumptions
- `付款`、`资产`、`采购`、`票据` 都是业务台账列表，不是双列工作台。
- `资产`、`采购`、`票据` 的详情/编辑表单可以继续复用现有组件代码，但显示方式改为独立视图，不再压在列表下方。
- `盘点任务` 可以保留执行页属性，但不能影响普通资产台账；如果保留主从工作台，也必须在 PRD/规范中明确它是任务执行页例外，而不是业务台账默认形态。
- 本轮只修 PC 台账一致性；移动资产扫码/移动页面不改业务流程。
- 付款批次主链路测试需要同步更新：创建批次后进入详情视图，详情里的复核、回单、执行操作继续可用。
## Proposed Plan
1. 全量页面归类：
- 业务台账页：`报销`、`采购`、`合同台账`、`项目`、`资产`、`付款`、`应付账款`、`票据`。
- 必改页面：`付款`、`资产`、`采购`、`票据`。
- 防回退检查页面：`报销`、`合同台账`、`项目`、`应付账款`。
- 例外/单独判断页面：`资产盘点` 是任务执行页；`请假记录`、`考勤` 是企业微信边界页；管理配置页不套普通台账首屏规则。
2. `付款` 页面：
- 去掉页头解释性副标题。
- 去掉五张大状态卡，改为列表上方紧凑 Tab/Chip：`全部`、`待复核`、`待付款`、`待补回单`、`异常`。
- 首屏只显示批次列表表格/卡片，列包含批次、实体/金额、状态/复核、回单、操作。
- 不自动选中首条，不自动写入 `?id=`。
- 行操作使用 `查看详情`；可保留低风险快捷动作，但优先详情页处理。
- `?id=<batchId>` 时显示独立付款批次详情视图，不再同时显示左列表。
- `台账工具` 仍为页头右侧按钮；展开时显示在列表上方全宽工具区。
3. `资产` 页面：
- `台账工具` 展开为页头下方全宽工具区，不再作为左侧列。
- 首屏只显示筛选 + 资产列表；点击行进入 `?id=<assetId>` 的独立资产详情/编辑视图，不在列表下方展开。
- `新建资产卡片` 进入独立创建视图，创建完成后进入该资产详情。
- 列表页增加右侧操作列 `查看详情`，保持行点击可用但不高亮当前行。
4. `采购` 页面：
- `/purchase-requests` 首屏只显示筛选 + 采购申请列表。
- `?id=<purchaseRequestId>` 改为独立详情/编辑视图，不在列表下方继续展示详情。
- 行操作统一为 `查看详情`、`继续编辑`、`查看进度` 等常规动作，审批动作仍进入统一待办/审批详情。
- 台账工具仅承接创建、导出、归档/ERP 等低频能力，不作为第二个主体区域。
5. `票据` 页面：
- `/invoice-pool` 不自动选中第一张票据。
- 去掉页头解释性副标题和五张大状态卡，改为紧凑状态 tabs/chips。
- 列表首屏只显示票据列表、识别/绑定状态和操作；详情通过显式 `查看详情` 打开独立详情视图或抽屉。
6. `资产盘点` 页面：
- 先审查并明确页面模板：若作为资产执行页例外保留主从结构，需要在规范中写清“任务执行页例外”；否则改为盘点任务列表 + 独立盘点详情。
- 至少去掉默认自动选中和首屏大段解释文案，避免被误认为普通业务台账模板。
7. 防回退检查：
- `报销`、`合同台账`、`项目`、`应付账款` 保持列表优先、上方工具、详情显式进入。
- 若发现同类内嵌详情、默认选中、左侧工具挤压列表或多行默认筛选，纳入同一轮修正。
8. 测试同步：
- 更新付款批次、资产、采购、票据、视觉一致性相关断言，明确首屏不显示详情面板。
- 保持付款批次主链路仍能创建、复核、上传回单、执行。
9. 验证与发布：
- `cd client && npm run typecheck && npm run build`
- 聚焦 Playwright：付款、资产、采购、票据、财务视觉、跨页面一致性。
- 通过后提交、部署、公网复检。
## Scope
- 前端页面：付款、资产、采购、票据、资产盘点、应付账款、项目、报销。
- 测试：同步受布局变更影响的票据、付款、跨页面一致性、移动票据和高风险动作确认 E2E。
- 规范：沉淀业务台账首屏为单列列表、详情显式进入、台账工具页头右侧展开的统一规则。
- 不触碰后端 API、权限模型、审批状态机、付款执行语义和企业微信边界。
## Test Plan
- `cd client && npm run typecheck`
- `cd client && npm run build`
- `npx playwright test tests/e2e/pc-finance-admin-visual-wave4.spec.ts tests/e2e/r103-cross-page-ui-consistency.spec.ts tests/e2e/r92-mobile-invoice-usability.spec.ts --workers=1 --reporter=list`
- `npx playwright test tests/e2e/r102-reimbursement-main-flow.spec.ts --workers=1 --reporter=list`
- `npx playwright test tests/e2e/system-action-confirmation.spec.ts --workers=1 --reporter=list`
- `git diff --check`
- `python3 ./.trellis/scripts/task.py validate 05-30-fix-payment-ledger-layout-consistency`
- `node scripts/qa/check-trellis-governance.mjs`
## Requirements
- 付款列表首屏不得出现 `payment-batch-detail-panel`、`payment-batch-receipt-panel` 或批次项详情。
- 付款首屏不得出现五张 `finance-metric-card` 大状态卡。
- 付款首屏不得自动选择第一条批次。
- 资产列表首屏不得出现资产详情/编辑表单。
- 资产 `台账工具` 打开后不得作为左侧栏挤压列表；应位于列表上方或作为弹层/抽屉。
- 采购列表首屏不得在列表下方渲染采购详情/编辑区。
- 票据列表首屏不得自动选择第一张票据，不得默认渲染票据详情面板。
- 业务台账首屏不得使用左列表/右详情、左工具/右列表或列表下方详情作为默认形态。
- 业务台账首屏不得使用解释普通工作流的大段副标题、提示卡或说明句。
- 业务台账默认筛选应控制在一行常用项；高级筛选、导出、批量、统计、测试数据进入 `台账工具` 或高级筛选区。
- 所有台账工具按钮位置保持页头右侧。
- 不改变付款、资产、采购、票据的后端 API、权限模型和业务状态机。
## Acceptance Criteria
- [ ] `/payment-batches` 首屏为单列列表，未带 `id` 时不渲染付款详情。
- [ ] `/payment-batches?id=...` 为独立付款详情/处理视图，操作仍可复核、上传回单、执行。
- [ ] `/assets` 首屏为单列资产列表，未带 `id` 时不渲染资产详情。
- [ ] `/assets?id=...` 为独立资产详情/编辑视图。
- [ ] `/purchase-requests` 首屏为单列采购列表，未带 `id` 时不渲染采购详情/编辑区。
- [ ] `/purchase-requests?id=...` 为独立采购详情/编辑视图。
- [ ] `/invoice-pool` 首屏为单列票据列表，未带 `id` 时不渲染票据详情。
- [ ] `/invoice-pool?id=...` 或显式详情入口为独立票据详情视图/抽屉，不自动选择第一条。
- [ ] `台账工具` 在付款、资产页面均为页头右侧入口，展开后不变成左侧栏。
- [ ] `报销`、`合同台账`、`项目`、`应付账款` 经检查无默认内嵌详情、默认选中第一条、左侧工具挤压列表或多行默认筛选的回退。
- [ ] `资产盘点` 的页面模板和例外口径明确，不误导为普通业务台账默认样式。
- [ ] 相关 E2E 和构建通过。
- [ ] 部署并公网复检通过后再告知可线上测试。
## Out of Scope
- 不改付款、资产、采购、票据后端模型。
- 不新增付款审批/支付能力。
- 不改企业微信、考勤、请假边界。
- 不重做所有详情页视觉，只处理台账首屏与详情入口一致性。
- 不把管理配置页、审计排障页强行改成普通业务台账页。
## Technical Notes
- 相关规范：
- `.trellis/spec/hyb-oa/frontend-react-vite-design.md`
- `.trellis/spec/hyb-oa/project-governance.md`
- 相关页面：
- `client/src/pages/PaymentBatchesPage.tsx`
- `client/src/pages/AssetRegistryPage.tsx`
- `client/src/pages/PurchaseRequestsPage.tsx`
- `client/src/pages/InvoicePoolPage.tsx`
- `client/src/pages/InventoryChecksPage.tsx`
- `client/src/pages/ReimbursementsPage.tsx`
- `client/src/pages/ContractsRegistryPage.tsx`
- `client/src/pages/ProjectsPage.tsx`
- `client/src/pages/ApOperationsPage.tsx`
- 相关测试候选：
- `client/tests/e2e/main-flow.spec.ts`
- `client/tests/e2e/reimbursement-payment-batch-flow.spec.ts`
- `client/tests/e2e/assets-flow.spec.ts`
- `client/tests/e2e/purchase-requests*.spec.ts`
- `client/tests/e2e/*invoice*.spec.ts`
- `client/tests/e2e/pc-finance-admin-visual-wave4.spec.ts`
- `client/tests/e2e/r103-cross-page-ui-consistency.spec.ts`
## Definition of Done
- 代码、测试、规范/任务文档保持一致。
- 本地构建和聚焦 E2E 通过。
- 提交中文 commit，包含 Trellis task 名称。
- 公网部署和复检通过后，才告知用户可以看线上效果。
.trellis/tasks/05-30-fix-payment-ledger-layout-consistency/task.json
+34
查看文件
@@ -0,0 +1,34 @@
{
"id": "fix-payment-ledger-layout-consistency",
"name": "fix-payment-ledger-layout-consistency",
"title": "修正付款与台账详情布局一致性",
"description": "统一业务台账首屏为单列列表，修正付款、资产、采购、票据、应付账款等页面默认详情和工具区不一致问题。",
"status": "in_progress",
"dev_type": "frontend",
"scope": "client,docs,trellis-spec",
"package": "hyb-oa",
"priority": "P2",
"creator": "shunli",
"assignee": "shunli",
"createdAt": "2026-05-30",
"completedAt": null,
"branch": null,
"base_branch": "main",
"worktree_path": null,
"commit": null,
"pr_url": null,
"subtasks": [],
"children": [],
"parent": null,
"relatedFiles": [
"client/src/pages/PaymentBatchesPage.tsx",
"client/src/pages/AssetRegistryPage.tsx",
"client/src/pages/PurchaseRequestsPage.tsx",
"client/src/pages/InvoicePoolPage.tsx",
"client/src/pages/ApOperationsPage.tsx",
".trellis/spec/hyb-oa/frontend-react-vite-design.md",
"docs/产品设计规则.md"
],
"notes": "",
"meta": {}
}
client/src/pages/ApOperationsPage.tsx
+46 -29
查看文件
@@ -259,6 +259,7 @@ export function ApOperationsPage() {
const [ledgerSearch, setLedgerSearch] = useState("");
const [ledgerPage, setLedgerPage] = useState(1);
const [showLedgerTools, setShowLedgerTools] = useState(false);
const [showLedgerAdvancedFilters, setShowLedgerAdvancedFilters] = useState(false);
const [reviewTarget, setReviewTarget] = useState<PaymentBatch | null>(null);
const [reviewComment, setReviewComment] = useState("");
@@ -384,6 +385,7 @@ export function ApOperationsPage() {
}),
[openRiskFlags, riskBucket],
);
const hasLedgerAdvancedFilters = Boolean(ledgerInvoiceStatus !== "all" || ledgerDateFrom || ledgerDateTo);
const failedDetailItem = useMemo(() => {
if (!failedDetailTarget) {
@@ -666,7 +668,19 @@ export function ApOperationsPage() {
</TabsList>
<TabsContent value="ledger" className="mt-6 space-y-4">
<div className="finance-command-panel grid gap-3 !p-3 md:grid-cols-6">
<div className="finance-command-panel space-y-3 !p-3">
<div className="grid gap-3 xl:grid-cols-[minmax(240px,1fr)_160px_160px_auto_auto]">
<div className="space-y-2">
<div className="text-sm font-medium text-zinc-700">搜索</div>
<Input
placeholder="单号、姓名、部门、项目"
value={ledgerSearch}
onChange={(event) => {
setLedgerSearch(event.target.value);
setLedgerPage(1);
}}
/>
</div>
<div className="space-y-2">
<div className="text-sm font-medium text-zinc-700">审批状态</div>
<select
@@ -700,6 +714,36 @@ export function ApOperationsPage() {
<option value="paid">已付款</option>
</select>
</div>
<div className="flex items-end">
<Button
type="button"
variant={showLedgerAdvancedFilters || hasLedgerAdvancedFilters ? "default" : "secondary"}
onClick={() => setShowLedgerAdvancedFilters((current) => !current)}
>
更多筛选
</Button>
</div>
<div className="flex items-end">
<Button
type="button"
variant="ghost"
onClick={() => {
setLedgerStatus("all");
setLedgerPaymentStatus("all");
setLedgerInvoiceStatus("all");
setLedgerDateFrom("");
setLedgerDateTo("");
setLedgerSearch("");
setLedgerPage(1);
}}
>
清空
</Button>
</div>
</div>
</div>
{showLedgerAdvancedFilters || hasLedgerAdvancedFilters ? (
<div className="finance-command-panel grid gap-3 !p-3 md:grid-cols-3">
<div className="space-y-2">
<div className="text-sm font-medium text-zinc-700">发票状态</div>
<select
@@ -739,35 +783,8 @@ export function ApOperationsPage() {
}}
/>
</div>
<div className="space-y-2">
<div className="text-sm font-medium text-zinc-700">搜索</div>
<Input
placeholder="单号、姓名、部门、项目"
value={ledgerSearch}
onChange={(event) => {
setLedgerSearch(event.target.value);
setLedgerPage(1);
}}
/>
</div>
</div>
<div className="flex justify-end">
<Button
type="button"
variant="ghost"
onClick={() => {
setLedgerStatus("all");
setLedgerPaymentStatus("all");
setLedgerInvoiceStatus("all");
setLedgerDateFrom("");
setLedgerDateTo("");
setLedgerSearch("");
setLedgerPage(1);
}}
>
清空台账筛选
</Button>
</div>
) : null}
<div className="ops-table-focus overflow-x-auto" data-testid="finance-ledger-table">
<Table>
client/src/pages/AssetRegistryPage.tsx
+32 -13
查看文件
@@ -798,6 +798,14 @@ export function AssetRegistryPage() {
setIsCreatingAsset(false);
setSelectedAssetId(assetId);
};
const returnToAssetList = () => {
setIsCreatingAsset(false);
setSelectedAssetId("");
const next = new URLSearchParams(searchParams);
next.delete("id");
setSearchParams(next, { replace: true });
};
const isAssetDetailMode = isCreatingAsset || Boolean(selectedAssetId);
return (
<ListWorkspace>
@@ -805,17 +813,26 @@ export function AssetRegistryPage() {
title="资产台账"
actions={
<div className="flex flex-wrap gap-2">
{isAssetDetailMode ? (
<Button type="button" variant="secondary" onClick={returnToAssetList}>
返回列表
</Button>
) : (
<>
<Button type="button" variant="secondary" onClick={() => navigate("/mobile/assets/scan") }>
移动扫码查找
</Button>
<Button type="button" variant={showLedgerTools ? "default" : "secondary"} onClick={() => setShowLedgerTools((value) => !value)}>
台账工具
</Button>
</>
)}
</div>
}
/>
<div className={showLedgerTools ? "grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]" : "grid gap-6"}>
{!isAssetDetailMode ? (
<div className="grid gap-6">
{showLedgerTools ? (
<div className="card-std space-y-4 p-4 md:p-5" data-testid="asset-ledger-tools">
<div className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600">
@@ -1030,11 +1047,7 @@ export function AssetRegistryPage() {
type="button"
key={item.id}
onClick={() => selectAsset(item.id)}
className={`w-full rounded-lg border p-3 text-left ${
item.id === selectedAssetId && !isCreatingAsset
? "border-zinc-400 bg-zinc-50"
: "border-zinc-200 bg-white"
}`}
className="w-full rounded-lg border border-zinc-200 bg-white p-3 text-left"
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
@@ -1067,6 +1080,7 @@ export function AssetRegistryPage() {
<div className="mt-0.5 truncate text-zinc-700">{item.location ?? "-"}</div>
</div>
</div>
<div className="mt-3 text-sm font-medium text-primary">查看详情</div>
</button>
))
) : (
@@ -1082,6 +1096,7 @@ export function AssetRegistryPage() {
<TableHead>责任链</TableHead>
<TableHead>位置</TableHead>
<TableHead>状态</TableHead>
<TableHead className="w-24 text-right">操作</TableHead>
</tr>
</TableHeader>
<TableBody>
@@ -1089,7 +1104,7 @@ export function AssetRegistryPage() {
orderedAssetItems.map((item) => (
<TableRow data-testid="asset-row" key={item.id} onClick={() => {
selectAsset(item.id);
}} className={item.id === selectedAssetId && !isCreatingAsset ? "bg-zinc-50" : "cursor-pointer"}>
}} className="cursor-pointer">
<TableCell>
<div className="font-medium text-zinc-900">
<CompactAssetNo value={item.assetNo} />
@@ -1108,11 +1123,16 @@ export function AssetRegistryPage() {
<div className="text-xs text-zinc-500">盘点 {item.lastVerifiedAt ? formatDisplayDateTime(item.lastVerifiedAt) : "未登记"}</div>
</TableCell>
<TableCell><StatusBadge status={item.status} /></TableCell>
<TableCell className="text-right">
<Button type="button" size="sm" variant="secondary" onClick={() => selectAsset(item.id)}>
查看详情
</Button>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={5} className="py-4 text-zinc-500">
<TableCell colSpan={6} className="py-4 text-zinc-500">
暂无资产卡片
</TableCell>
</TableRow>
@@ -1123,8 +1143,9 @@ export function AssetRegistryPage() {
</>
) : null}
</FilterBar>
{selectedAssetId || isCreatingAsset ? (
</div>
</div>
) : (
<div className="card-std space-y-4 p-4 md:p-5">
{selectedAssetId && !isCreatingAsset && assetDetailQuery.isLoading ? <TableSkeleton columns={2} rows={8} /> : null}
{selectedAssetId && !isCreatingAsset && assetDetailQuery.isError ? (
@@ -1559,9 +1580,7 @@ export function AssetRegistryPage() {
</>
) : null}
</div>
) : null}
</div>
</div>
)}
</ListWorkspace>
);
}
client/src/pages/InventoryChecksPage.tsx
+18 -37
查看文件
@@ -109,15 +109,11 @@ export function InventoryChecksPage() {
});
useEffect(() => {
const nextId = inventoryChecksQuery.data?.items?.[0]?.id ?? "";
if (!selectedCheckId && nextId) {
setSelectedCheckId(nextId);
}
if (selectedCheckId && inventoryChecksQuery.data?.items?.some((item) => item.id === selectedCheckId)) {
if (!selectedCheckId) {
return;
}
if (nextId !== selectedCheckId) {
setSelectedCheckId(nextId);
if (!inventoryChecksQuery.data?.items?.some((item) => item.id === selectedCheckId)) {
setSelectedCheckId("");
}
}, [inventoryChecksQuery.data?.items, selectedCheckId]);
@@ -247,7 +243,6 @@ export function InventoryChecksPage() {
<PageScaffold className="space-y-6">
<PageHeader
title="资产盘点"
subtitle="按任务执行盘点：先确定范围，再启动、扫码/录入、核对结果并确认完成。"
actions={
<Button
type="button"
@@ -260,30 +255,20 @@ export function InventoryChecksPage() {
}
/>
<section className="ops-status-strip grid gap-4 md:grid-cols-4" data-testid="inventory-check-summary">
<div className="finance-metric-card">
<div className="text-sm text-zinc-500">盘点任务</div>
<div className="mt-1 text-2xl font-semibold text-zinc-900">{inventoryStats.total}</div>
<div className="mt-1 text-xs text-zinc-500">按季度或事件触发</div>
</div>
<div className="finance-metric-card">
<div className="text-sm text-zinc-500">草稿</div>
<div className="mt-1 text-2xl font-semibold text-zinc-900">{inventoryStats.draft}</div>
<div className="mt-1 text-xs text-zinc-500">待启动后录入</div>
</div>
<div className="finance-metric-card">
<div className="text-sm text-zinc-500">盘点中</div>
<div className="mt-1 text-2xl font-semibold text-zinc-900">{inventoryStats.counting}</div>
<div className="mt-1 text-xs text-zinc-500">可扫码或手工录入</div>
</div>
<div className="finance-metric-card">
<div className="text-sm text-zinc-500">已完成</div>
<div className="mt-1 text-2xl font-semibold text-zinc-900">{inventoryStats.completed}</div>
<div className="mt-1 text-xs text-zinc-500">保留差异和备注</div>
</div>
<section className="flex flex-wrap gap-2" data-testid="inventory-check-summary">
{[
["全部", inventoryStats.total],
["草稿", inventoryStats.draft],
["盘点中", inventoryStats.counting],
["已完成", inventoryStats.completed],
].map(([label, value]) => (
<span key={label} className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-700">
{label} <span className="font-semibold text-zinc-900">{value}</span>
</span>
))}
</section>
<div className="grid gap-6 xl:grid-cols-[360px_minmax(0,1fr)]">
<div className={selectedCheck ? "grid gap-6 xl:grid-cols-[360px_minmax(0,1fr)]" : "grid gap-6"}>
<div className="card-std space-y-4 p-6">
<h3 className="text-base font-semibold text-zinc-900">新建盘点任务</h3>
<div className="space-y-2">
@@ -338,7 +323,7 @@ export function InventoryChecksPage() {
<TableRow
data-testid="inventory-row"
key={item.id}
className={item.id === selectedCheckId ? "bg-zinc-50 cursor-pointer" : "cursor-pointer"}
className="cursor-pointer"
onClick={() => setSelectedCheckId(item.id)}
>
<TableCell className="font-medium text-zinc-900">{item.checkNo}</TableCell>
@@ -358,17 +343,12 @@ export function InventoryChecksPage() {
</div>
</div>
{selectedCheck ? (
<div className="card-std space-y-4 p-6">
{inventoryChecksQuery.isLoading ? <TableSkeleton columns={3} rows={6} /> : null}
{inventoryChecksQuery.isError ? (
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(inventoryChecksQuery.error)}</p>
) : null}
{!inventoryChecksQuery.isLoading && !selectedCheck ? (
<div className="rounded-lg border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500">
请先创建或选择盘点任务。
</div>
) : null}
{selectedCheck ? (
<>
<div className="flex items-center justify-between gap-3">
@@ -464,6 +444,7 @@ export function InventoryChecksPage() {
</>
) : null}
</div>
) : null}
</div>
<ActionConfirmDialog
open={confirmCompleteCheck}
client/src/pages/InvoicePoolPage.tsx
+71 -53
查看文件
@@ -1,5 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchMyDelegations } from "../api/delegations";
@@ -51,6 +52,7 @@ type UploadBatchResult = {
export function InvoicePoolPage() {
const queryClient = useQueryClient();
const [searchParams, setSearchParams] = useSearchParams();
const { permissions, me } = useAuth();
const canManageInvoice = hasPermission(permissions, "invoice.manage");
const canOverrideDuplicate = hasPermission(permissions, "expense.finance.override_duplicate");
@@ -71,7 +73,7 @@ export function InvoicePoolPage() {
const [selectedReimbursementId, setSelectedReimbursementId] = useState("");
const [selectedTravelRequestId, setSelectedTravelRequestId] = useState("");
const [selectedTravelOrderId, setSelectedTravelOrderId] = useState("");
const [detailInvoiceId, setDetailInvoiceId] = useState("");
const [detailInvoiceId, setDetailInvoiceId] = useState(searchParams.get("id") ?? "");
const [editOpen, setEditOpen] = useState(false);
const [editSetAvailable, setEditSetAvailable] = useState(false);
const [editRemarks, setEditRemarks] = useState("");
@@ -203,10 +205,25 @@ export function InvoicePoolPage() {
}, [canManageTravelPayments]);
useEffect(() => {
if (!detailInvoiceId && listQuery.data?.items?.length) {
setDetailInvoiceId(listQuery.data.items[0].id);
const searchInvoiceId = searchParams.get("id") ?? "";
if (searchInvoiceId !== detailInvoiceId) {
setDetailInvoiceId(searchInvoiceId);
}
}, [detailInvoiceId, listQuery.data?.items]);
}, [detailInvoiceId, searchParams]);
useEffect(() => {
const currentId = searchParams.get("id") ?? "";
if (detailInvoiceId === currentId) {
return;
}
const next = new URLSearchParams(searchParams);
if (detailInvoiceId) {
next.set("id", detailInvoiceId);
} else {
next.delete("id");
}
setSearchParams(next, { replace: true });
}, [detailInvoiceId, searchParams, setSearchParams]);
// --- Helper for error handling ---
@@ -453,6 +470,13 @@ export function InvoicePoolPage() {
detail.ownerEmployeeId === me?.id ||
detail.uploadedByEmployeeId === me?.id),
);
const isInvoiceDetailMode = Boolean(detailInvoiceId);
const returnToInvoiceList = () => {
setDetailInvoiceId("");
const next = new URLSearchParams(searchParams);
next.delete("id");
setSearchParams(next, { replace: true });
};
// --- Render ---
@@ -460,11 +484,18 @@ export function InvoicePoolPage() {
<ListWorkspace>
<WorkspaceHeader
title="票据中心"
subtitle="优先看识别状态、失败票据和待绑定票据；导出、全范围和财务交接进入台账工具。"
actions={
<div className="flex flex-wrap gap-2">
{isInvoiceDetailMode ? (
<Button type="button" variant="secondary" onClick={returnToInvoiceList}>
返回列表
</Button>
) : (
<Button type="button" variant={showLedgerTools ? "default" : "secondary"} onClick={() => setShowLedgerTools((current) => !current)}>
台账工具
</Button>
)}
</div>
}
/>
@@ -474,14 +505,11 @@ export function InvoicePoolPage() {
</p>
) : null}
{showLedgerTools ? (
{!isInvoiceDetailMode && showLedgerTools ? (
<div className="finance-command-panel space-y-3" data-testid="invoice-ledger-tools">
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div>
<h3 className="text-base font-semibold text-zinc-900">台账工具</h3>
<p className="mt-1 text-sm leading-6 text-zinc-500">
导出按当前状态和范围生成，只用于财务复核、OCR 排障和代账交接；普通员工日常补票据仍从报销详情或移动上传进入。
</p>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -504,35 +532,6 @@ export function InvoicePoolPage() {
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600">
票据原文、预览和下载仍按详情页权限与审计控制处理，列表导出不作为敏感材料分发入口。
</div>
</div>
) : null}
<div className="finance-status-strip" data-testid="invoice-pool-summary">
<div className="finance-metric-card">
<div className="finance-metric-card__label">票据总数</div>
<div className="finance-metric-card__value">{invoiceStats.total}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">识别中</div>
<div className="finance-metric-card__value">{invoiceStats.pending}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">识别失败</div>
<div className="finance-metric-card__value">{invoiceStats.failed}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">可绑定</div>
<div className="finance-metric-card__value">{invoiceStats.available}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">已绑定</div>
<div className="finance-metric-card__value">{invoiceStats.bound}</div>
</div>
</div>
<InvoiceUploadCard
selectedFiles={selectedFiles}
setSelectedFiles={setSelectedFiles}
@@ -548,21 +547,6 @@ export function InvoicePoolPage() {
uploadOwnerEmployeeId={uploadOwnerEmployeeId}
setUploadOwnerEmployeeId={setUploadOwnerEmployeeId}
/>
<InvoiceListCard
listQuery={listQuery}
status={status}
setStatus={setStatus}
ownerScope={ownerScope}
setOwnerScope={setOwnerScope}
page={page}
setPage={setPage}
totalPages={totalPages}
detailInvoiceId={detailInvoiceId}
setDetailInvoiceId={setDetailInvoiceId}
signedUrlMutation={signedUrlMutation}
/>
<InvoiceBindCard
listQuery={listQuery}
reimbursementQuery={reimbursementQuery}
@@ -581,7 +565,40 @@ export function InvoicePoolPage() {
selectedTravelOrderId={selectedTravelOrderId}
setSelectedTravelOrderId={setSelectedTravelOrderId}
/>
</div>
) : null}
{!isInvoiceDetailMode ? (
<div className="flex flex-wrap gap-2" data-testid="invoice-pool-summary">
{[
["全部", invoiceStats.total],
["识别中", invoiceStats.pending],
["识别失败", invoiceStats.failed],
["可绑定", invoiceStats.available],
["已绑定", invoiceStats.bound],
].map(([label, value]) => (
<span key={label} className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-700">
{label} <span className="font-semibold text-zinc-900">{value}</span>
</span>
))}
</div>
) : null}
{!isInvoiceDetailMode ? (
<InvoiceListCard
listQuery={listQuery}
status={status}
setStatus={setStatus}
ownerScope={ownerScope}
setOwnerScope={setOwnerScope}
page={page}
setPage={setPage}
totalPages={totalPages}
detailInvoiceId={detailInvoiceId}
setDetailInvoiceId={setDetailInvoiceId}
signedUrlMutation={signedUrlMutation}
/>
) : (
<InvoiceDetailPanel
detail={detail}
detailQuery={detailQuery}
@@ -622,6 +639,7 @@ export function InvoicePoolPage() {
confirmAction={confirmAction}
setConfirmAction={setConfirmAction}
/>
)}
</ListWorkspace>
);
}
client/src/pages/PaymentBatchesPage.tsx
+71 -76
查看文件
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useMemo, useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import {
@@ -128,7 +128,7 @@ export function PaymentBatchesPage() {
const selectedBatchId = searchParams.get("id") ?? "";
const batches = useMemo(() => listQuery.data?.items ?? [], [listQuery.data?.items]);
const selectedBatch = useMemo<PaymentBatch | null>(() => {
return batches.find((item) => item.id === selectedBatchId) ?? batches[0] ?? null;
return batches.find((item) => item.id === selectedBatchId) ?? null;
}, [batches, selectedBatchId]);
const batchStats = useMemo(() => {
return {
@@ -152,17 +152,6 @@ export function PaymentBatchesPage() {
enabled: Boolean(selectedBatch?.id),
queryFn: () => fetchPaymentBatchReceiptAttachments(selectedBatch!.id),
});
useEffect(() => {
if (!selectedBatch) {
return;
}
if (selectedBatch.id === selectedBatchId) {
return;
}
const next = new URLSearchParams(searchParams);
next.set("id", selectedBatch.id);
setSearchParams(next, { replace: true });
}, [searchParams, selectedBatch, selectedBatchId, setSearchParams]);
const canEditSelectedBatch =
canManageBatch &&
@@ -195,6 +184,12 @@ export function PaymentBatchesPage() {
await queryClient.invalidateQueries({ queryKey: ["ap-operations"] });
};
const returnToList = () => {
const next = new URLSearchParams(searchParams);
next.delete("id");
setSearchParams(next, { replace: true });
};
const createMutation = useMutation({
mutationFn: async () =>
createPaymentBatch({
@@ -363,51 +358,47 @@ export function PaymentBatchesPage() {
{downloadReasonDialog}
<WorkspaceHeader
title="付款"
subtitle="先核对待复核、待付款和异常批次；真实付款在线下完成，OA 只记录复核、回单和付款状态。"
actions={
<>
<div className="flex flex-wrap gap-2">
{selectedBatchId ? (
<Button type="button" variant="secondary" onClick={returnToList}>
返回列表
</Button>
) : null}
<Button type="button" variant="secondary" onClick={() => void refresh()}>
刷新
</Button>
{!selectedBatchId ? (
<Button type="button" variant={showBatchTools ? "default" : "secondary"} onClick={() => setShowBatchTools((current) => !current)}>
台账工具
</Button>
</>
) : null}
</div>
}
/>
{error ? <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</div> : null}
<div className="finance-status-strip" data-testid="payment-batches-summary">
<div className="finance-metric-card">
<div className="finance-metric-card__label">待复核</div>
<div className="finance-metric-card__value">{batchStats.needsReview}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">待付款标记</div>
<div className="finance-metric-card__value">{batchStats.readyToPay}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">待补回单</div>
<div className="finance-metric-card__value">{batchStats.needsReceipt}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">异常批次</div>
<div className="finance-metric-card__value">{batchStats.exceptions}</div>
</div>
<div className="finance-metric-card">
<div className="finance-metric-card__label">批次数</div>
<div className="finance-metric-card__value">{batchStats.total}</div>
</div>
{!selectedBatchId ? (
<div className="flex flex-wrap gap-2" data-testid="payment-batches-summary">
{[
["全部", batchStats.total],
["待复核", batchStats.needsReview],
["待付款", batchStats.readyToPay],
["待补回单", batchStats.needsReceipt],
["异常", batchStats.exceptions],
].map(([label, value]) => (
<span key={label} className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-700">
{label} <span className="font-semibold text-zinc-900">{value}</span>
</span>
))}
</div>
) : null}
{showBatchTools ? (
{!selectedBatchId && showBatchTools ? (
<div className="finance-command-panel space-y-4" data-testid="payment-batch-create-panel">
<div>
<h3 className="text-base font-semibold text-zinc-900">台账工具 · 新建批次</h3>
<p className="mt-1 text-sm text-zinc-500">
仅把已确认待付款的单据归入批次。真实付款仍在银行或既有财务流程完成，OA 记录复核、回单和状态。
</p>
<h3 className="text-base font-semibold text-zinc-900">新建批次</h3>
</div>
{!canManageBatch ? (
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
@@ -490,39 +481,8 @@ export function PaymentBatchesPage() {
</div>
) : null}
<div className="finance-workspace-grid">
<div className="grid gap-5 xl:col-span-2 xl:grid-cols-[340px,minmax(0,1fr)]">
<div className="finance-command-panel">
<h3 className="mb-3 text-base font-semibold text-zinc-900">批次列表</h3>
<div className="space-y-2">
{batches.map((item) => (
<button
key={item.id}
type="button"
className={selectedBatch?.id === item.id ? "finance-list-card finance-list-card--active" : "finance-list-card"}
onClick={() => {
const next = new URLSearchParams(searchParams);
next.set("id", item.id);
setSearchParams(next, { replace: true });
}}
>
<div className="flex items-center justify-between gap-3">
<div className="font-medium text-zinc-900">{item.batchNo}</div>
<StatusBadge status={item.status} label={batchStatusLabel(item.status)} />
</div>
<div className="mt-1 text-sm text-zinc-600">{item.name}</div>
<div className="mt-1 text-xs text-zinc-500">
金额 {item.totalAmount}
{item.highRisk ? " · 高风险" : ""}
{` · 复核 ${item.reviewRequirement.completedReviewCount}/${item.reviewRequirement.requiredReviewCount}`}
</div>
</button>
))}
{!listQuery.data?.items?.length ? <div className="text-sm text-zinc-500">暂无付款批次</div> : null}
</div>
</div>
{selectedBatch ? (
{selectedBatchId ? (
selectedBatch ? (
<div className="space-y-5">
<div className="finance-command-panel space-y-3" data-testid="payment-batch-detail-panel">
<div className="flex flex-wrap items-center justify-between gap-3">
@@ -727,9 +687,44 @@ export function PaymentBatchesPage() {
</div>
</div>
</div>
) : null}
) : (
<div className="finance-command-panel text-sm text-zinc-500">未找到付款批次</div>
)
) : (
<div className="finance-command-panel" data-testid="payment-batches-list-panel">
<div className="mb-3 flex items-center justify-between gap-3">
<h3 className="text-base font-semibold text-zinc-900">批次列表</h3>
<span className="text-sm text-zinc-500">共 {batches.length} 条</span>
</div>
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
{batches.map((item) => (
<button
key={item.id}
type="button"
className="finance-list-card"
onClick={() => {
const next = new URLSearchParams(searchParams);
next.set("id", item.id);
setSearchParams(next, { replace: true });
}}
>
<div className="flex items-center justify-between gap-3">
<div className="font-medium text-zinc-900">{item.batchNo}</div>
<StatusBadge status={item.status} label={batchStatusLabel(item.status)} />
</div>
<div className="mt-1 text-sm text-zinc-600">{item.name}</div>
<div className="mt-1 text-xs text-zinc-500">
金额 {item.totalAmount}
{item.highRisk ? " · 高风险" : ""}
{` · 复核 ${item.reviewRequirement.completedReviewCount}/${item.reviewRequirement.requiredReviewCount}`}
</div>
<div className="mt-3 text-sm font-medium text-primary">查看详情</div>
</button>
))}
{!listQuery.data?.items?.length ? <div className="text-sm text-zinc-500">暂无付款批次</div> : null}
</div>
</div>
)}
<ActionConfirmDialog
open={Boolean(confirmPaymentAction)}
onOpenChange={(open) => {
client/src/pages/ProjectsPage.tsx
+7 -8
查看文件
@@ -187,12 +187,11 @@ export function ProjectsPage() {
{showLedgerTools ? (
<SectionPanel title="台账工具">
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr),260px]">
<div>
<div className="space-y-4">
{!canManageProjects ? (
<div className="text-sm text-zinc-500">你当前只有查看权限，项目创建入口仅对老板 / 管理员 / 项目管理角色开放。</div>
) : (
<div className="space-y-4">
<>
<div className="grid gap-3 md:grid-cols-2">
<div className="space-y-2">
<Label>项目名称</Label>
@@ -236,6 +235,10 @@ export function ProjectsPage() {
<input type="checkbox" checked={isConfidential} onChange={(event) => setIsConfidential(event.target.checked)} />
项目含涉密内容（正文与附件继续离线保存）
</label>
</>
)}
<div className="flex flex-wrap gap-2">
{canManageProjects ? (
<Button
type="button"
disabled={createMutation.isPending || !name.trim() || !clientName.trim()}
@@ -243,11 +246,7 @@ export function ProjectsPage() {
>
{createMutation.isPending ? "创建中..." : "创建项目"}
</Button>
</div>
)}
</div>
<div className="space-y-3 rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
<div className="font-medium text-slate-900">低频查看</div>
) : null}
<Button type="button" variant={showTrialData ? "default" : "secondary"} onClick={() => setShowTrialData((value) => !value)}>
{showTrialData ? "隐藏测试数据" : "显示测试数据"}
</Button>
client/src/pages/PurchaseRequestsPage.tsx
+47 -28
查看文件
@@ -935,6 +935,18 @@ export function PurchaseRequestsPage() {
);
const detailEvidenceHint = detail ? resolvePurchaseEvidenceHint(detail) : null;
const detailNextStepText = detail ? resolvePurchaseNextStep(detail) : "";
const isPurchaseDetailMode = Boolean(selectedId);
const openPurchaseDetail = (id: string) => {
setSelectedId(id);
setHydratedDetailId("");
};
const returnToPurchaseList = () => {
setSelectedId("");
setHydratedDetailId("");
const next = new URLSearchParams(searchParams);
next.delete("id");
setSearchParams(next, { replace: true });
};
return (
<ListWorkspace>
@@ -942,7 +954,14 @@ export function PurchaseRequestsPage() {
<WorkspaceHeader
title="采购申请"
actions={
canCreate ? (
<div className="flex flex-wrap gap-2">
{isPurchaseDetailMode ? (
<Button type="button" variant="secondary" onClick={returnToPurchaseList}>
返回列表
</Button>
) : (
<>
{canCreate ? (
<Button
data-testid="purchase-requests-create"
disabled={createMutation.isPending}
@@ -951,7 +970,21 @@ export function PurchaseRequestsPage() {
>
{createMutation.isPending ? "创建中..." : "新建采购"}
</Button>
) : undefined
) : null}
{canShowLedgerTools ? (
<Button
data-testid="purchase-ledger-tools"
type="button"
variant={showAdvancedTools ? "default" : "secondary"}
onClick={() => setShowLedgerTools((current) => !current)}
>
<Wrench aria-hidden className="mr-1 size-4" />
台账工具
</Button>
) : null}
</>
)}
</div>
}
/>
@@ -961,6 +994,8 @@ export function PurchaseRequestsPage() {
</p>
) : null}
{!isPurchaseDetailMode ? (
<>
<FilterBar className="ops-command-bar space-y-3 !p-3 md:!p-3.5">
<div className="ops-command-bar__row">
<div className="min-w-0">
@@ -990,18 +1025,6 @@ export function PurchaseRequestsPage() {
<span className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
{mine ? "我相关" : "全范围"}
</span>
{canShowLedgerTools ? (
<Button
data-testid="purchase-ledger-tools"
size="sm"
type="button"
variant={showAdvancedTools ? "default" : "secondary"}
onClick={() => setShowLedgerTools((current) => !current)}
>
<Wrench aria-hidden className="mr-1 size-4" />
台账工具
</Button>
) : null}
</div>
</div>
@@ -1123,13 +1146,8 @@ export function PurchaseRequestsPage() {
data-testid="purchase-request-mobile-row"
key={item.id}
type="button"
className={`w-full rounded-lg border p-3 text-left ${
item.id === selectedId ? "border-zinc-400 bg-zinc-50" : "border-zinc-200 bg-white"
}`}
onClick={() => {
setSelectedId(item.id);
setHydratedDetailId("");
}}
className="w-full rounded-lg border border-zinc-200 bg-white p-3 text-left"
onClick={() => openPurchaseDetail(item.id)}
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
@@ -1164,6 +1182,7 @@ export function PurchaseRequestsPage() {
<div className={`mt-0.5 ${evidenceHint.className}`}>{evidenceHint.label}</div>
</div>
</div>
<div className="mt-3 text-sm font-medium text-primary">{resolvePurchaseRowActionLabel(item.status)}</div>
</button>
);
})
@@ -1192,7 +1211,8 @@ export function PurchaseRequestsPage() {
return (
<TableRow
key={item.id}
className={item.id === selectedId ? "bg-zinc-50" : undefined}
className="cursor-pointer"
onClick={() => openPurchaseDetail(item.id)}
>
<TableCell>
<div className="font-medium text-zinc-900">
@@ -1235,8 +1255,7 @@ export function PurchaseRequestsPage() {
variant={["draft", "rejected"].includes(item.status) ? "default" : "secondary"}
onClick={(event) => {
event.stopPropagation();
setSelectedId(item.id);
setHydratedDetailId("");
openPurchaseDetail(item.id);
}}
>
{resolvePurchaseRowActionLabel(item.status)}
@@ -1268,8 +1287,9 @@ export function PurchaseRequestsPage() {
testIdPrefix="purchase-requests"
/>
</div>
{selectedId ? (
</div>
</>
) : (
<div className="card-std space-y-5 p-4 md:p-5">
{selectedId && detailQuery.isLoading ? <TableSkeleton columns={3} rows={8} /> : null}
@@ -2050,8 +2070,7 @@ export function PurchaseRequestsPage() {
</>
) : null}
</div>
) : null}
</div>
)}
<ActionConfirmDialog
open={Boolean(submitPrecheckConfirm)}
onOpenChange={(open) => {
client/src/pages/ReimbursementsPage.tsx
+8 -26
查看文件
@@ -1,7 +1,7 @@
import { useMemo, useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowRight, Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
import { Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchMyDelegations } from "../api/delegations";
@@ -53,32 +53,24 @@ const REIMBURSEMENT_TASK_STATUS_OPTIONS = [
{
value: "rejected",
title: "被驳回待补正",
idleNote: "暂无需要补正的报销",
activeNote: "优先补齐说明或附件后重新提交",
icon: RotateCcw,
accentClass: "border-red-200 bg-red-50 text-red-700",
},
{
value: "draft",
title: "草稿待完善",
idleNote: "还没有报销草稿",
activeNote: "继续完善明细、发票和附件",
icon: FilePenLine,
accentClass: "border-amber-200 bg-amber-50 text-amber-700",
},
{
value: "reviewing",
title: "审批中进度",
idleNote: "暂无审批中的报销",
activeNote: "查看当前节点和处理进度",
icon: Clock3,
accentClass: "border-sky-200 bg-sky-50 text-sky-700",
},
] satisfies Array<{
value: ReimbursementStatus;
title: string;
idleNote: string;
activeNote: string;
icon: typeof RotateCcw;
accentClass: string;
}>;
@@ -360,7 +352,7 @@ export function ReimbursementsPage() {
</p>
) : null}
<section className="grid gap-3 md:grid-cols-3" aria-label="我的报销任务">
<section className="flex flex-wrap gap-2" aria-label="我的报销任务">
{REIMBURSEMENT_TASK_STATUS_OPTIONS.map((item) => {
const Icon = item.icon;
const count = taskSummaryTotalByStatus[item.value];
@@ -369,29 +361,19 @@ export function ReimbursementsPage() {
return (
<button
className={`card-std min-h-[124px] p-4 text-left transition hover:border-primary/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
active ? "border-primary/40 bg-primary/5" : ""
className={`inline-flex min-h-10 items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition hover:border-primary/40 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
active ? "border-primary/40 bg-primary/5 text-primary" : "border-zinc-200 bg-white text-zinc-700"
}`}
data-testid={`reimbursements-task-card-${item.value}`}
key={item.value}
onClick={() => setSearchParams({ status: item.value, page: "1", scope: "own" })}
type="button"
>
<div className="flex items-start justify-between gap-3">
<span className={`flex size-9 items-center justify-center rounded-lg border ${item.accentClass}`}>
<Icon aria-hidden className="size-4" />
<span className={`flex size-7 items-center justify-center rounded-full border ${item.accentClass}`}>
<Icon aria-hidden className="size-3.5" />
</span>
<ArrowRight aria-hidden className="mt-1 size-4 text-zinc-300" />
</div>
<div className="mt-4 flex items-end justify-between gap-3">
<div className="min-w-0">
<div className="text-sm font-semibold text-zinc-900">{item.title}</div>
<div className="mt-1 text-xs leading-5 text-zinc-500">
{typeof count === "number" && count > 0 ? item.activeNote : item.idleNote}
</div>
</div>
<div className="text-3xl font-semibold tabular-nums text-zinc-950">{displayCount}</div>
</div>
<span className="font-medium">{item.title}</span>
<span className="font-semibold tabular-nums text-zinc-950">{displayCount}</span>
</button>
);
})}
client/src/pages/invoice-pool/InvoiceDetailPanel.tsx
+6 -1
查看文件
@@ -114,6 +114,7 @@ function verificationMessage(message: string | null | undefined) {
export function InvoiceDetailPanel({
detail,
detailQuery,
canEditDetail,
canVerifyInvoice,
canUploadInvoice,
@@ -531,8 +532,12 @@ export function InvoiceDetailPanel({
</div>
) : null}
</>
) : detailQuery.isLoading ? (
<p className="text-zinc-500 py-6 text-center bg-zinc-50/50 rounded-lg border border-dashed border-zinc-200 mt-2">加载票据详情...</p>
) : detailQuery.isError ? (
<p className="text-red-600 py-6 text-center bg-red-50 rounded-lg border border-red-100 mt-2">票据详情加载失败</p>
) : (
<p className="text-zinc-500 py-6 text-center bg-zinc-50/50 rounded-lg border border-dashed border-zinc-200 mt-2">请从左侧列表选择一条票据查看详情与修正选项</p>
<p className="text-zinc-500 py-6 text-center bg-zinc-50/50 rounded-lg border border-dashed border-zinc-200 mt-2">未找到票据详情</p>
)}
</div>
client/src/pages/invoice-pool/InvoiceUploadCard.tsx
-1
查看文件
@@ -94,7 +94,6 @@ export function InvoiceUploadCard({
{selectedFiles.length > 4 ? <div>另有 {selectedFiles.length - 4} 个文件</div> : null}
</div>
) : null}
<p className="text-xs text-zinc-500">发票上传仅支持 PDF；附件材料可在对应业务单据中上传图片或其他证明文件。</p>
</div>
);
}
client/tests/e2e/helpers/liveInvoiceOcr.ts
+1
查看文件
@@ -304,6 +304,7 @@ export async function uploadLiveInvoiceAndWait(page: Page, invoiceFilePath: stri
const url = new URL(response.url());
return response.request().method() === "POST" && url.pathname === "/api/invoice-pool/upload" && response.ok();
});
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-upload-file").setInputFiles(invoiceFilePath);
await page.getByTestId("invoice-upload-submit").click();
const uploadPayload = (await (await uploadResponsePromise).json()) as UploadInvoiceResponse;
client/tests/e2e/invoice-ocr-flow.spec.ts
+1
查看文件
@@ -61,6 +61,7 @@ test("E2E 轻交互 OCR：票据中心缺关键字段后可在当前页修正并
await (await openNavLink(page, "票据")).click();
await expect(page.getByTestId("invoice-pool-table")).toBeVisible();
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-upload-file").setInputFiles({
name: `r73-missing-${Date.now()}.pdf`,
mimeType: "application/pdf",
client/tests/e2e/main-flow.spec.ts
+4 -3
查看文件
@@ -40,6 +40,7 @@ test("E2E 主链路：登录→报销→待办审批→票据OCR→支付→登
const url = new URL(response.url());
return response.request().method() === "POST" && url.pathname === "/api/invoice-pool/upload" && response.ok();
});
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-upload-file").setInputFiles({
name: invoiceFileName,
mimeType: "application/pdf",
@@ -57,15 +58,15 @@ test("E2E 主链路：登录→报销→待办审批→票据OCR→支付→登
// 预览（popup 存在即可）
const popupPromise = page.waitForEvent("popup");
const invoiceRow = page.getByTestId("invoice-row").filter({ hasText: invoiceFileName }).first();
await expect(invoiceRow).toBeVisible();
await invoiceRow.getByRole("button").click();
await page.getByTestId("invoice-preview-button").click();
const popup = await popupPromise;
await expect(popup).toHaveURL(new RegExp(`/api/invoice-pool/${invoiceId}`));
await popup.close();
// 3) bind invoice to reimbursement
await page.goto("/invoice-pool");
await expect(page.getByTestId("invoice-pool-table")).toBeVisible();
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-bind-invoice").selectOption(invoiceId);
await page.getByTestId("invoice-bind-reimbursement").selectOption(reimbursementId);
await page.getByTestId("invoice-bind-submit").click();
client/tests/e2e/pc-finance-admin-visual-wave4.spec.ts
+5 -5
查看文件
@@ -1000,9 +1000,9 @@ async function capture(page: Page, name: string) {
}
const pages = [
{ path: "/payment-batches", summary: "payment-batches-summary", proof: "text=批次列表", screenshot: "01-payment-batches" },
{ path: "/payment-batches", summary: "payment-batches-summary", proof: "text=批次列表", screenshot: "01-payment-batches", expectStatusStrip: false },
{ path: "/ap-operations", proof: "text=异常付款", screenshot: "02-ap-operations", expectStatusStrip: false },
{ path: "/invoice-pool", summary: "invoice-pool-summary", proof: "data-testid=invoice-pool-table", screenshot: "03-invoice-pool" },
{ path: "/invoice-pool", summary: "invoice-pool-summary", proof: "data-testid=invoice-pool-table", screenshot: "03-invoice-pool", expectStatusStrip: false },
{ path: "/system/approval-rules", summary: "approval-rules-summary", proof: "data-testid=approval-rules-table", screenshot: "04-approval-rules" },
{ path: "/people", summary: "people-summary", proof: "data-testid=people-table", screenshot: "05-people" },
{ path: "/organization", summary: "organization-summary", proof: "text=研发部", screenshot: "06-organization" },
@@ -1043,7 +1043,7 @@ test("PC 财务台账工具默认收起并可按需打开", async ({ page }) =>
await expect(page.getByTestId("payment-batch-create-panel")).toHaveCount(0);
await page.getByRole("button", { name: "台账工具" }).click();
await expect(page.getByTestId("payment-batch-create-panel")).toBeVisible();
await expect(page.getByTestId("payment-batch-create-panel")).toContainText("台账工具 · 新建批次");
await expect(page.getByTestId("payment-batch-create-panel")).toContainText("新建批次");
await page.goto("/ap-operations");
await expect(page.getByRole("button", { name: "导出 CSV" })).toHaveCount(0);
@@ -1082,7 +1082,7 @@ test("PC 票据中心辅助核验动作可提交并重试", async ({ page }) =>
await page.setViewportSize({ width: 1440, height: 960 });
await login(page);
await page.goto("/invoice-pool");
await page.goto(`/invoice-pool?id=${invoiceListItem.id}`);
await expect(page.getByTestId("invoice-detail-panel")).toBeVisible();
await expect(page.getByTestId("invoice-trigger-verification")).toBeVisible();
await expect(page.getByTestId("invoice-retry-verification")).toBeVisible();
@@ -1118,7 +1118,7 @@ test("PC 票据中心辅助核验错误提示可理解", async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 960 });
await login(page);
await page.goto("/invoice-pool");
await page.goto(`/invoice-pool?id=${invoiceListItem.id}`);
await expect(page.getByTestId("invoice-detail-panel")).toBeVisible();
await page.getByTestId("invoice-trigger-verification").click();
client/tests/e2e/r103-cross-page-ui-consistency.spec.ts
+8 -1
查看文件
@@ -344,15 +344,20 @@ test.describe("R103 cross page UI consistency", () => {
test("采购页显示中文标题并使用中文附件上传控件", async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 960 });
await page.goto(`/purchase-requests?id=${purchaseId}`);
await page.goto("/purchase-requests");
await expect(page.locator("header").filter({ hasText: "业务" }).getByText("采购申请")).toBeVisible();
await expect(page.getByRole("heading", { name: "采购申请" })).toBeVisible();
await expect(page.getByTestId("purchase-requests-table")).toBeVisible();
await expect(page.getByTestId("purchase-ledger-tools")).toBeVisible();
await expect(page.getByTestId("purchase-attachment-upload")).toHaveCount(0);
await expect(page.getByTestId("purchase-row-next-step")).toHaveCount(0);
await expect(page.getByText("付款处理")).toHaveCount(0);
await expect(page.getByText("/purchase-requests")).toHaveCount(0);
await page.goto(`/purchase-requests?id=${purchaseId}`);
await expect(page.getByTestId("purchase-requests-table")).toHaveCount(0);
await expect(page.getByTestId("purchase-ledger-tools")).toHaveCount(0);
await expect(page.getByTestId("purchase-attachment-upload")).toHaveText("上传附件");
await expect(page.getByText("Choose File")).toHaveCount(0);
@@ -370,6 +375,8 @@ test.describe("R103 cross page UI consistency", () => {
await page.goto("/invoice-pool");
await expect(page.getByRole("heading", { name: "票据中心" })).toBeVisible();
await expect(page.getByTestId("invoice-detail-panel")).toHaveCount(0);
await page.getByRole("button", { name: "台账工具" }).click();
await expect(page.getByTestId("invoice-bind-reimbursement")).toContainText("草稿单 · 2026-05-06");
await expect(page.getByTestId("invoice-bind-reimbursement")).not.toContainText(reimbursementId);
await expect(page.getByText("/invoice-pool")).toHaveCount(0);
client/tests/e2e/r92-mobile-invoice-usability.spec.ts
+3
查看文件
@@ -326,6 +326,9 @@ test.describe("R92 手机端票据与报销可用性", () => {
await expect(page.getByText("票据详情")).toBeVisible();
await attachScreenshot(page, testInfo, "r97-invoice-pool-mobile.png");
await page.goto("/invoice-pool");
await expect(page.getByTestId("invoice-mobile-row")).toBeVisible();
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-upload-file").setInputFiles([
{ name: "invoice-a.pdf", mimeType: "application/pdf", buffer: Buffer.from("%PDF-a") },
{ name: "invoice-b.pdf", mimeType: "application/pdf", buffer: Buffer.from("%PDF-b") },
client/tests/e2e/system-action-confirmation.spec.ts
+1 -1
查看文件
@@ -307,7 +307,7 @@ test.describe("R7E 全站高风险操作二次确认", () => {
});
await login(page, user);
await page.goto("/payment-batches");
await page.goto(`/payment-batches?id=${paymentBatchId}`);
await expect(page.getByText("PAY-ACTION-001").first()).toBeVisible();
await page.getByRole("button", { name: "执行" }).click();
client/tests/e2e/travel-payment-flow.spec.ts
+3 -1
查看文件
@@ -59,6 +59,7 @@ test("E2E 差旅支付主链路：申请→审批→支付→绑票", async ({ p
const url = new URL(response.url());
return response.request().method() === "POST" && url.pathname === "/api/invoice-pool/upload" && response.ok();
});
await page.getByRole("button", { name: "台账工具" }).click();
await page.getByTestId("invoice-upload-file").setInputFiles({
name: invoiceFileName,
mimeType: "application/pdf",
@@ -76,8 +77,9 @@ test("E2E 差旅支付主链路：申请→审批→支付→绑票", async ({ p
const invoiceDetailText = await page.getByTestId("invoice-detail-panel").innerText();
const invoiceCode = extractInvoiceCode(invoiceDetailText);
await page.reload();
await page.goto("/invoice-pool");
await expect(page.getByTestId("invoice-pool-table")).toBeVisible();
await page.getByRole("button", { name: "台账工具" }).click();
const bindCard = page.locator(".card-std").filter({ hasText: "绑定业务单据" }).first();
await bindCard.getByRole("combobox").first().selectOption("travelOrder");
await page.getByTestId("invoice-bind-invoice").selectOption(invoiceId);
docs/产品设计规则.md
+1 -1
查看文件
@@ -32,7 +32,7 @@
A 类页面优先保证真实试运行路径顺畅；B 类页面优先保证台账、复核和导出不误导；C 类页面允许展示更多审计和排障信息，但不得泄露无权限数据。
页面模板固定为六类：`工作台总览`、`任务处理列表`、`业务台账列表`、`主从工作台`、`详情工作区`、`管理配置页`。后续新增或重构页面必须先判定页面分级和模板，再设计业务内容；不允许每个页面临时自创布局。移动端是这些模板的移动表达，不单独开一套 PC 壳层。
页面模板固定为六类：`工作台总览`、`任务处理列表`、`业务台账列表`、`主从工作台`、`详情工作区`、`管理配置页`。后续新增或重构页面必须先判定页面分级和模板，再设计业务内容；不允许每个页面临时自创布局。移动端是这些模板的移动表达，不单独开一套 PC 壳层。采购、合同、项目、资产、付款、应付账款和票据的首屏默认都是 `业务台账列表`；`主从工作台` 只用于用户显式选择后的执行任务，例如已打开的资产盘点任务，不得在普通台账首屏自动选择第一条记录来填充详情区。
全系统操作语义固定：页面主动作只保留一个且出现在用户预期的主操作区；筛选、台账工具、行级动作、详情高风险动作和移动端底部动作各有稳定位置。不可逆或高风险动作不得混在普通查看/编辑动作里，必须显示当前对象摘要并二次确认。