R103/A1-A6 收口跨页面设计一致性

client/src/features/navigation/schema.ts

@@ -3,12 +3,19 @@ export const ADMIN_NAV_ORDER = ["/system/workspace", "/people", "/organization",
 export const BACKUP_NAV_ORDER = ["/attendance", "/workflow/tasks", "/contracts-registry", "/purchase-requests", "/travel-requests", "/budgets", "/payment-batches", "/ap-operations", "/invoice-pool", "/inventory-checks", "/system/cutover", "/system/integrations/erp", "/dashboard", "/settings/profile"];
 
 const PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [
-  { path: "/portal", title: "Portal", group: "工作台" },
+  { path: "/portal", title: "工作台", group: "工作台" },
   { path: "/announcements", title: "公告", group: "主导航" },
   { path: "/team", title: "团队", group: "主导航" },
   { path: "/attendance", title: "考勤", group: "备用模块" },
   { path: "/projects", title: "项目", group: "主导航" },
   { path: "/contracts-registry", title: "合同台账", group: "备用模块" },
+  { path: "/purchase-requests", title: "采购申请", group: "备用模块" },
+  { path: "/travel-requests", title: "差旅申请", group: "备用模块" },
+  { path: "/budgets", title: "预算管理", group: "备用模块" },
+  { path: "/payment-batches", title: "付款批次", group: "备用模块" },
+  { path: "/ap-operations", title: "应付作业", group: "备用模块" },
+  { path: "/invoice-pool", title: "票据中心", group: "备用模块" },
+  { path: "/inventory-checks", title: "盘点任务", group: "备用模块" },
   { path: "/weekly-reports", title: "周报", group: "主导航" },
   { path: "/todos", title: "待办", group: "主导航" },
   { path: "/reimbursements/", title: "报销详情", group: "主导航" },
@@ -29,6 +36,9 @@ const PAGE_TITLES: Array<{ path: string; title: string; group: string }> = [
   { path: "/system/workflow-definitions", title: "流程定义", group: "管理入口" },
   { path: "/system/settings", title: "系统设置", group: "管理入口" },
   { path: "/system/feature-flags", title: "功能开关", group: "管理入口" },
+  { path: "/system/cutover", title: "切换控制台", group: "管理入口" },
+  { path: "/system/integrations/erp", title: "ERP 集成", group: "管理入口" },
+  { path: "/dashboard", title: "数据看板", group: "备用模块" },
   { path: "/audit-logs", title: "审计日志", group: "管理入口" },
 ];
 
@@ -41,7 +51,7 @@ export function resolvePageMeta(pathname: string) {
   }
 
   if (pathname === "/") {
-    return { title: "Portal", group: "工作台" };
+    return { title: "工作台", group: "工作台" };
   }
 
   return { title: pathname, group: "工作台" };

client/src/pages/PurchaseRequestsPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useSearchParams } from "react-router-dom";
 import { toast } from "sonner";
@@ -232,6 +232,8 @@ export function PurchaseRequestsPage() {
   const [items, setItems] = useState<DraftItem[]>([]);
   const [archivePoNo, setArchivePoNo] = useState("");
   const [archiveContractNo, setArchiveContractNo] = useState("");
+  const [selectedAttachmentName, setSelectedAttachmentName] = useState("");
+  const attachmentInputRef = useRef<HTMLInputElement | null>(null);
 
   const suppliersQuery = useQuery({
     queryKey: ["purchase-requests", "suppliers"],
@@ -701,7 +703,7 @@ export function PurchaseRequestsPage() {
     <div className="space-y-6">
       <PageHeader
         title="采购申请"
-        subtitle="支持草稿、附件、提交、撤回与经理单步审批的轻采购流程。"
+        subtitle="草稿、附件、审批。"
         actions={
           canCreate ? (
             <Button
@@ -1290,17 +1292,41 @@ export function PurchaseRequestsPage() {
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
                   <h4 className="text-base font-semibold text-zinc-900">附件</h4>
-                  <input
-                    type="file"
-                    disabled={!canEditDraft || uploadMutation.isPending}
-                    onChange={(event) => {
-                      const file = event.target.files?.[0];
-                      if (file) {
-                        uploadMutation.mutate(file);
-                      }
-                      event.currentTarget.value = "";
-                    }}
-                  />
+                  <div className="flex min-w-0 items-center gap-3">
+                    <input
+                      data-testid="purchase-attachment-file-input"
+                      hidden
+                      ref={attachmentInputRef}
+                      type="file"
+                      disabled={!canEditDraft || uploadMutation.isPending}
+                      onChange={(event) => {
+                        const file = event.target.files?.[0];
+                        if (file) {
+                          setSelectedAttachmentName(file.name);
+                          uploadMutation.mutate(file);
+                        }
+                        event.currentTarget.value = "";
+                      }}
+                    />
+                    <span
+                      className="hidden max-w-[220px] truncate text-xs text-zinc-500 sm:inline"
+                      data-testid="purchase-attachment-selected-name"
+                    >
+                      {uploadMutation.isPending
+                        ? `正在上传：${uploadMutation.variables?.name ?? selectedAttachmentName}`
+                        : selectedAttachmentName || "未选择文件"}
+                    </span>
+                    <Button
+                      data-testid="purchase-attachment-upload"
+                      type="button"
+                      size="sm"
+                      variant="secondary"
+                      disabled={!canEditDraft || uploadMutation.isPending}
+                      onClick={() => attachmentInputRef.current?.click()}
+                    >
+                      {uploadMutation.isPending ? "上传中" : "上传附件"}
+                    </Button>
+                  </div>
                 </div>
                 <div className="space-y-3 md:hidden">
                   {detail.attachments.length ? (

client/src/pages/invoice-pool/InvoiceBindCard.tsx

@@ -3,6 +3,7 @@ import type { InvoicePoolListResponse } from "../../api/invoicePool";
 import type { ReimbursementListResponse } from "../../api/reimbursements";
 import type { TravelRequestDetail, TravelRequestListResponse } from "../../api/travelRequests";
 import { Button } from "../../components/ui/button";
+import { resolveReimbursementDisplayCode } from "../../lib/reimbursementDisplay";
 
 export type InvoiceBindMode = "reimbursement" | "travelOrder";
 
@@ -87,7 +88,7 @@ export function InvoiceBindCard({
           <option value="">选择报销单</option>
           {(reimbursementQuery.data?.items ?? []).map((item) => (
             <option key={item.id} value={item.id}>
-              {item.formNumber ?? item.id} ({item.status})
+              {resolveReimbursementDisplayCode(item)} ({item.status})
             </option>
           ))}
         </select>

client/tests/e2e/r103-cross-page-ui-consistency.spec.ts

@@ -0,0 +1,381 @@
+import { mkdirSync } from "node:fs";
+import path from "node:path";
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+function envelope(data: unknown) {
+  return { requestId: "mock-r103-ui-consistency", data };
+}
+
+async function fulfillJson(route: Route, data: unknown, status = 200) {
+  await route.fulfill({
+    status,
+    contentType: "application/json",
+    body: JSON.stringify(envelope(data)),
+  });
+}
+
+const screenshotDir = path.resolve(process.cwd(), "../output/playwright/r103");
+
+function screenshotPath(fileName: string) {
+  mkdirSync(screenshotDir, { recursive: true });
+  return path.join(screenshotDir, fileName);
+}
+
+const me = {
+  id: "employee-r103",
+  employeeNo: "E103",
+  name: "Employee",
+  phone: "13800000000",
+  email: "[email protected]",
+  departmentId: "dept-r103",
+  directManagerId: null,
+  status: "active",
+  notificationPushEnabled: true,
+  roleCodes: ["employee"],
+  profileCompleteness: {
+    hasEmergencyContact: true,
+    hasBankAccount: true,
+    hasAvatar: false,
+    hasIdNumber: false,
+    score: 50,
+  },
+  wecomBinding: null,
+};
+
+const purchaseId = "purchase-r103";
+const reimbursementId = "11111111-1111-4111-8111-111111111111";
+const invoiceId = "invoice-r103";
+
+function navigationItem(key: string, href: string, label: string, icon: string) {
+  return { key, href, label, icon, placement: "main", permissionCodes: [], featureFlagKey: null };
+}
+
+function purchaseSummary() {
+  return {
+    id: purchaseId,
+    requestNo: "CG-20260506-0001",
+    applicantId: me.id,
+    submitterId: me.id,
+    departmentId: me.departmentId,
+    legalEntityId: "legal-r103",
+    costCenterId: "cost-r103",
+    supplierId: "supplier-r103",
+    documentCategoryId: "category-r103",
+    budgetPoolId: null,
+    title: "办公用品采购",
+    reason: "日常办公",
+    currencyCode: "CNY",
+    totalAmount: "299.00",
+    expectedDeliveryDate: "2026-05-10",
+    status: "draft",
+    createdAt: "2026-05-06T09:00:00.000Z",
+    updatedAt: "2026-05-06T09:10:00.000Z",
+    applicant: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    submitter: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    department: { id: me.departmentId, name: "研发部" },
+    legalEntity: { id: "legal-r103", code: "HYD", name: "海音达" },
+    costCenter: { id: "cost-r103", code: "RD", name: "研发部", legalEntityId: "legal-r103" },
+    supplier: { id: "supplier-r103", code: "SUP", name: "测试供应商" },
+    documentCategory: { id: "category-r103", code: "CG", name: "采购申请", entityType: "purchase_request" },
+    budgetPool: null,
+  };
+}
+
+function purchaseDetail() {
+  return {
+    ...purchaseSummary(),
+    items: [
+      {
+        id: "purchase-item-r103",
+        description: "键盘",
+        specification: "无线",
+        quantity: "1.00",
+        unitPrice: "299.00",
+        lineAmount: "299.00",
+        isAssetCandidate: false,
+        createdAt: "2026-05-06T09:00:00.000Z",
+        updatedAt: "2026-05-06T09:10:00.000Z",
+      },
+    ],
+    attachments: [],
+    pendingWorkflow: null,
+    archiveOrder: null,
+    permissions: {
+      canEditDraft: true,
+      canSubmit: true,
+      canWithdraw: false,
+      canArchiveOrder: false,
+    },
+    riskFlags: [],
+  };
+}
+
+function invoiceItem() {
+  return {
+    id: invoiceId,
+    status: "available",
+    ocrType: "mixed",
+    ocrProvider: "mock",
+    ocrAttempts: 1,
+    ocrLastError: null,
+    ocrCompletedAt: "2026-05-06T09:00:00.000Z",
+    invoiceCode: "044002600111",
+    invoiceNumber: "12345678",
+    invoiceDate: "2026-05-06",
+    amount: "100.00",
+    taxAmount: "6.00",
+    totalAmount: "106.00",
+    linkedReimbursementId: null,
+    linkedItemId: null,
+    linkedTravelOrderId: null,
+    originalName: "发票.pdf",
+    mimeType: "application/pdf",
+    fileSize: 1024,
+    verification: null,
+    owner: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    uploadedBy: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    createdAt: "2026-05-06T09:00:00.000Z",
+    updatedAt: "2026-05-06T09:10:00.000Z",
+  };
+}
+
+function reimbursementForBind() {
+  return {
+    id: reimbursementId,
+    formNumber: null,
+    status: "draft",
+    reimbursementDate: "2026-05-06",
+    totalAmount: "106.00",
+    description: "发票绑定测试",
+    payment: {
+      paymentVoucherNo: null,
+      paymentDate: null,
+      paymentChannel: null,
+      paidAt: null,
+      paidBy: null,
+    },
+    owner: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    submitter: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+    project: null,
+    pendingWorkflow: null,
+    createdAt: "2026-05-06T09:00:00.000Z",
+    updatedAt: "2026-05-06T09:10:00.000Z",
+  };
+}
+
+async function mockApis(page: Page) {
+  await page.route((url) => url.pathname.startsWith("/api/"), async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathName = url.pathname;
+
+    if (pathName === "/api/auth/sso/providers") {
+      await fulfillJson(route, []);
+      return;
+    }
+
+    if (pathName === "/api/auth/wecom/config") {
+      await fulfillJson(route, {
+        enabled: false,
+        entryEnabled: false,
+        oauthEnabled: false,
+        corpId: "",
+        agentId: "",
+        loginUrl: null,
+        bindEnabled: false,
+        defaultReturnTo: "/portal",
+        status: "disabled",
+        statusReasons: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/auth/login" || pathName === "/api/auth/refresh") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        headers: { "set-cookie": "has_session=1; Path=/; SameSite=Lax" },
+        body: JSON.stringify(envelope({ accessToken: "mock-r103-token", expiresIn: 900, mustChangePassword: false })),
+      });
+      return;
+    }
+
+    if (pathName === "/api/me") {
+      await fulfillJson(route, me);
+      return;
+    }
+
+    if (pathName === "/api/system/navigation") {
+      await fulfillJson(route, {
+        workspace: {
+          id: "workspace-r103",
+          persisted: true,
+          profile: "small_team_internal",
+          orgMode: "single_company",
+          primaryEntryMode: "password",
+          notificationStrategy: "in_app",
+          devicePriority: "desktop",
+          moduleVisibility: {},
+          createdAt: null,
+          updatedAt: null,
+          updatedBy: null,
+        },
+        sections: {
+          main: [
+            navigationItem("portal", "/portal", "工作台", "home_app_logo"),
+            navigationItem("purchase", "/purchase-requests", "采购申请", "shopping_cart"),
+            navigationItem("invoice", "/invoice-pool", "票据中心", "receipt_long"),
+          ],
+          admin: [],
+          backup: [
+            navigationItem("payment", "/payment-batches", "付款批次", "payments"),
+            navigationItem("dashboard", "/dashboard", "数据看板", "monitoring"),
+          ],
+        },
+        recommendedRolePresets: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/notifications") {
+      await fulfillJson(route, { page: 1, pageSize: 1, total: 0, unreadOnly: true, unreadCount: 0, items: [] });
+      return;
+    }
+
+    if (pathName === "/api/portal/home") {
+      await fulfillJson(route, {
+        workspace: { id: "workspace-r103", persisted: true, profile: "small_team_internal" },
+        greeting: { name: me.name },
+        cards: [],
+        pendingTasks: { count: 0, href: "/workflow/tasks" },
+        myApplications: [],
+        riskSummary: null,
+        announcements: [],
+        quickLinks: [],
+        todayPresence: null,
+        teamPresence: null,
+        weeklyReport: null,
+        weeklySummary: null,
+        todoSummary: null,
+        projectSummary: null,
+        peopleLifecycle: null,
+        adoptionSummary: null,
+        recentActivities: [],
+        teamStatusBoard: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/master-data/legal-entities") {
+      await fulfillJson(route, { includeArchived: false, items: [{ id: "legal-r103", code: "HYD", name: "海音达", shortName: null, currencyCode: "CNY", taxNo: null, enabled: true, archivedAt: null, createdAt: null, updatedAt: null }] });
+      return;
+    }
+
+    if (pathName === "/api/master-data/cost-centers") {
+      await fulfillJson(route, { includeArchived: false, items: [{ id: "cost-r103", legalEntityId: "legal-r103", code: "RD", name: "研发部", parentId: null, ownerEmployeeId: null, enabled: true, archivedAt: null, createdAt: null, updatedAt: null }] });
+      return;
+    }
+
+    if (pathName === "/api/master-data/suppliers") {
+      await fulfillJson(route, { includeArchived: false, items: [{ id: "supplier-r103", code: "SUP", name: "测试供应商", taxNo: null, contactName: null, contactPhone: null, bankName: null, bankAccount: null, enabled: true, archivedAt: null, createdAt: null, updatedAt: null }] });
+      return;
+    }
+
+    if (pathName === "/api/master-data/document-categories") {
+      await fulfillJson(route, { includeArchived: false, items: [{ id: "category-r103", code: "CG", name: "采购申请", entityType: "purchase_request", sequencePrefix: "CG", numberLength: 4, resetPeriod: "daily", enabled: true, archivedAt: null, createdAt: null, updatedAt: null }] });
+      return;
+    }
+
+    if (pathName === "/api/purchase-requests" && request.method() === "GET") {
+      await fulfillJson(route, { page: 1, pageSize: 20, total: 1, mine: true, items: [purchaseSummary()] });
+      return;
+    }
+
+    if (pathName === `/api/purchase-requests/${purchaseId}`) {
+      await fulfillJson(route, purchaseDetail());
+      return;
+    }
+
+    if (pathName === `/api/purchase-requests/${purchaseId}/attachments` && request.method() === "POST") {
+      await fulfillJson(route, {
+        attachment: {
+          id: "attachment-r103",
+          originalName: "采购报价.pdf",
+          mimeType: "application/pdf",
+          fileSize: 4,
+          uploadedBy: me.id,
+          createdAt: "2026-05-06T09:20:00.000Z",
+          uploader: { id: me.id, employeeNo: me.employeeNo, name: me.name },
+        },
+      });
+      return;
+    }
+
+    if (pathName === "/api/invoice-pool") {
+      await fulfillJson(route, { page: 1, pageSize: 20, total: 1, ownerScope: "own", items: [invoiceItem()] });
+      return;
+    }
+
+    if (pathName === "/api/reimbursements") {
+      await fulfillJson(route, { page: 1, pageSize: 50, total: 1, scope: "own", items: [reimbursementForBind()] });
+      return;
+    }
+
+    await fulfillJson(route, {});
+  });
+}
+
+async function login(page: Page) {
+  await page.goto("/login");
+  await page.getByTestId("login-identifier").fill("[email protected]");
+  await page.getByTestId("login-password").fill("EmployeePassword1234");
+  await page.getByTestId("login-submit").click();
+  await expect(page).toHaveURL(/\/portal/);
+}
+
+test.describe("R103 cross page UI consistency", () => {
+  test.beforeEach(async ({ page }) => {
+    await mockApis(page);
+    await login(page);
+  });
+
+  test("采购页显示中文标题并使用中文附件上传控件", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 960 });
+    await page.goto(`/purchase-requests?id=${purchaseId}`);
+
+    await expect(page.locator("header").filter({ hasText: "备用模块" }).getByText("采购申请")).toBeVisible();
+    await expect(page.getByRole("heading", { name: "采购申请" })).toBeVisible();
+    await expect(page.getByText("/purchase-requests")).toHaveCount(0);
+    await expect(page.getByTestId("purchase-attachment-upload")).toHaveText("上传附件");
+    await expect(page.getByText("Choose File")).toHaveCount(0);
+
+    await page.getByTestId("purchase-attachment-file-input").setInputFiles({
+      name: "采购报价.pdf",
+      mimeType: "application/pdf",
+      buffer: Buffer.from("r103"),
+    });
+    await expect(page.getByTestId("purchase-attachment-selected-name")).toContainText("采购报价.pdf");
+    await page.screenshot({ path: screenshotPath("purchase-desktop.png"), fullPage: true });
+  });
+
+  test("票据中心绑定报销单不展示 UUID 兜底", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 960 });
+    await page.goto("/invoice-pool");
+
+    await expect(page.locator("header").filter({ hasText: "备用模块" }).getByText("票据中心")).toBeVisible();
+    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);
+    await page.screenshot({ path: screenshotPath("invoice-pool-desktop.png"), fullPage: true });
+  });
+
+  test("移动宽度下关键页面仍保持浅色中文工作台风格", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto("/invoice-pool");
+
+    await expect(page.getByRole("heading", { name: "票据中心" })).toBeVisible();
+    await expect(page.getByTestId("invoice-pool-mobile-list")).toBeVisible();
+    await expect(page.getByText("Choose File")).toHaveCount(0);
+    await page.screenshot({ path: screenshotPath("invoice-pool-mobile.png"), fullPage: true });
+  });
+});