统一业务列表 Ant Design 风格（05-31-unify-business-list-ant-design）

client/src/components/patterns/BusinessListTemplate.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+import { FilterBar, PrimaryTable, WorkspaceEmptyState } from "./ListWorkspace";
+
+type BusinessListToolbarProps = {
+  children: ReactNode;
+  actions?: ReactNode;
+  advanced?: ReactNode;
+  className?: string;
+};
+
+export function BusinessListToolbar({ children, actions, advanced, className }: BusinessListToolbarProps) {
+  return (
+    <FilterBar className={cn("ops-command-bar space-y-3 !p-3 md:!p-3.5", className)}>
+      <div className="ops-command-bar__row">
+        <div className="min-w-0">{children}</div>
+        {actions ? <div className="ops-command-bar__actions">{actions}</div> : null}
+      </div>
+      {advanced ? <div className="rounded-lg border border-slate-200 bg-slate-50/70 p-3">{advanced}</div> : null}
+    </FilterBar>
+  );
+}
+
+export function BusinessTable({
+  children,
+  className,
+  testId,
+}: {
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+}) {
+  return (
+    <PrimaryTable className={cn("hidden md:block ops-table-focus", className)}>
+      <table className="w-full border-collapse text-left" data-testid={testId}>
+        {children}
+      </table>
+    </PrimaryTable>
+  );
+}
+
+export function BusinessTableFrame({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <PrimaryTable className={cn("hidden md:block ops-table-focus", className)}>{children}</PrimaryTable>;
+}
+
+export function BusinessMobileList({
+  children,
+  className,
+  testId,
+}: {
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+}) {
+  return (
+    <div className={cn("space-y-3 md:hidden", className)} data-testid={testId}>
+      {children}
+    </div>
+  );
+}
+
+export function BusinessEmptyRow({
+  colSpan,
+  title = "暂无数据",
+  description,
+  action,
+}: {
+  colSpan: number;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <tr>
+      <td className="py-8 text-center text-sm text-zinc-500" colSpan={colSpan}>
+        <div className="mx-auto max-w-sm py-3">
+          <div className="font-semibold text-zinc-900">{title}</div>
+          {description ? <div className="mt-1 leading-6 text-zinc-500">{description}</div> : null}
+          {action ? <div className="mt-3">{action}</div> : null}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export function BusinessEmptyState({
+  title = "暂无数据",
+  description,
+  action,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <WorkspaceEmptyState>
+      <div className="font-semibold text-zinc-900">{title}</div>
+      {description ? <div className="mt-1 leading-6 text-zinc-500">{description}</div> : null}
+      {action ? <div className="mt-3">{action}</div> : null}
+    </WorkspaceEmptyState>
+  );
+}