@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/admin/src/pages/master-data/vendors/ListPage.tsx

@@ -0,0 +1,266 @@
+import { useState } from "react"
+import { useNavigate } from "react-router"
+import { Building2, Eye, Pencil } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { ListReport, type ListReportColumn } from "@/components/admin-ui/list-report"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const vendorTypeConfig: Record<string, string> = {
+  supplier: "供货商",
+  service: "服务商",
+  contractor: "承包商",
+  oneTime: "一次性供应商",
+}
+
+const statusConfig = {
+  active: { label: "合作中", color: "bg-emerald-500/10 text-emerald-700", dot: "bg-emerald-500" },
+  inactive: { label: "暂停", color: "bg-muted text-muted-foreground", dot: "bg-muted-foreground" },
+  blocked: { label: "黑名单", color: "bg-red-500/10 text-red-600", dot: "bg-red-500" },
+}
+
+interface Vendor {
+  id: string
+  vendorCode: string
+  vendorName: string
+  vendorType: string
+  country: string
+  city: string
+  contactPerson: string
+  phone: string
+  email: string
+  status: "active" | "inactive" | "blocked"
+  createdAt: string
+}
+
+const mockVendors: Vendor[] = [
+  { id: "1", vendorCode: "VD-001", vendorName: "联想集团", vendorType: "supplier", country: "中国", city: "北京", contactPerson: "王经理", phone: "010-12345678", email: "wang@lenovo.com", status: "active", createdAt: "2023-01-15" },
+  { id: "2", vendorCode: "VD-002", vendorName: "戴尔科技", vendorType: "supplier", country: "中国", city: "上海", contactPerson: "李总", phone: "021-87654321", email: "li@dell.com", status: "active", createdAt: "2023-02-20" },
+  { id: "3", vendorCode: "VD-003", vendorName: "华为技术", vendorType: "supplier", country: "中国", city: "深圳", contactPerson: "张工", phone: "0755-11112222", email: "zhang@huawei.com", status: "active", createdAt: "2023-03-10" },
+  { id: "4", vendorCode: "VD-004", vendorName: "京东物流", vendorType: "service", country: "中国", city: "北京", contactPerson: "赵经理", phone: "010-33334444", email: "zhao@jd.com", status: "active", createdAt: "2023-04-05" },
+  { id: "5", vendorCode: "VD-005", vendorName: "顺丰速运", vendorType: "service", country: "中国", city: "深圳", contactPerson: "孙总", phone: "0755-55556666", email: "sun@sf.com", status: "inactive", createdAt: "2023-05-12" },
+  { id: "6", vendorCode: "VD-006", vendorName: "办公易", vendorType: "supplier", country: "中国", city: "广州", contactPerson: "周经理", phone: "020-77778888", email: "zhou@office.com", status: "blocked", createdAt: "2023-06-18" },
+]
+
+export function ListPage() {
+  const navigate = useNavigate()
+  const [showFilter, setShowFilter] = useState(false)
+  const [filters, setFilters] = useState({
+    status: "",
+    vendorType: "",
+    city: "",
+  })
+
+  const columns: ListReportColumn<Vendor>[] = [
+    {
+      id: "vendorCode",
+      header: "供应商编码",
+      sortable: true,
+      accessorKey: "vendorCode",
+      cell: (row) => (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            navigate(`/master-data/vendors/${row.id}`)
+          }}
+          className="text-sm font-medium text-primary hover:underline"
+        >
+          {row.vendorCode}
+        </button>
+      ),
+    },
+    {
+      id: "vendorName",
+      header: "供应商名称",
+      cell: (row) => (
+        <div>
+          <p className="text-sm font-medium">{row.vendorName}</p>
+          <p className="text-xs text-muted-foreground">
+            {vendorTypeConfig[row.vendorType]}
+          </p>
+        </div>
+      ),
+    },
+    {
+      id: "location",
+      header: "所在地",
+      cell: (row) => (
+        <span className="text-sm text-muted-foreground">
+          {row.country} · {row.city}
+        </span>
+      ),
+    },
+    {
+      id: "contact",
+      header: "联系人",
+      cell: (row) => (
+        <div>
+          <p className="text-sm">{row.contactPerson}</p>
+          <p className="text-xs text-muted-foreground">{row.phone}</p>
+        </div>
+      ),
+    },
+    {
+      id: "status",
+      header: "状态",
+      align: "center",
+      cell: (row) => {
+        const status = statusConfig[row.status]
+        return (
+          <span
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+              status.color
+            )}
+          >
+            <span className={cn("h-1.5 w-1.5 rounded-full", status.dot)} />
+            {status.label}
+          </span>
+        )
+      },
+    },
+    {
+      id: "createdAt",
+      header: "创建时间",
+      cell: (row) => (
+        <span className="text-sm text-muted-foreground">{row.createdAt}</span>
+      ),
+    },
+    {
+      id: "actions",
+      header: "操作",
+      align: "center",
+      cell: (row) => (
+        <div className="flex items-center justify-center gap-1">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              navigate(`/master-data/vendors/${row.id}`)
+            }}
+            className="flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-primary/10 hover:text-primary"
+            title="查看"
+          >
+            <Eye className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              navigate(`/master-data/vendors/${row.id}/edit`)
+            }}
+            className="flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-primary/10 hover:text-primary"
+            title="编辑"
+          >
+            <Pencil className="h-4 w-4" />
+          </button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="">
+      <ListReport<Vendor>
+        header={{
+          title: "供应商主数据",
+          subtitle: "XK03 - 管理和维护供应商信息",
+          tag: "Master Data",
+          icon: <Building2 className="h-5 w-5" />,
+        }}
+        data={mockVendors}
+        columns={columns}
+        totalCount={mockVendors.length}
+        primaryAction={{
+          id: "create",
+          label: "创建供应商",
+          onClick: () => navigate("/master-data/vendors/create"),
+        }}
+        searchPlaceholder="搜索供应商编码、名称..."
+        showFilter={showFilter}
+        onFilterToggle={() => setShowFilter(!showFilter)}
+        filterCount={Object.values(filters).filter(Boolean).length}
+        onFilterClear={() =>
+          setFilters({ status: "", vendorType: "", city: "" })
+        }
+        filterContent={
+          <div className="grid grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label className="text-xs font-medium text-muted-foreground">状态</Label>
+              <Select
+                value={filters.status || "__all__"}
+                onValueChange={(v) =>
+                  setFilters({ ...filters, status: v === "__all__" ? "" : v })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="全部" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">全部</SelectItem>
+                  <SelectItem value="active">合作中</SelectItem>
+                  <SelectItem value="inactive">暂停</SelectItem>
+                  <SelectItem value="blocked">黑名单</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs font-medium text-muted-foreground">供应商类型</Label>
+              <Select
+                value={filters.vendorType || "__all__"}
+                onValueChange={(v) =>
+                  setFilters({
+                    ...filters,
+                    vendorType: v === "__all__" ? "" : v,
+                  })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="全部" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">全部</SelectItem>
+                  <SelectItem value="supplier">供货商</SelectItem>
+                  <SelectItem value="service">服务商</SelectItem>
+                  <SelectItem value="contractor">承包商</SelectItem>
+                  <SelectItem value="oneTime">一次性供应商</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs font-medium text-muted-foreground">所在城市</Label>
+              <Select
+                value={filters.city || "__all__"}
+                onValueChange={(v) =>
+                  setFilters({ ...filters, city: v === "__all__" ? "" : v })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="全部" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">全部</SelectItem>
+                  <SelectItem value="北京">北京</SelectItem>
+                  <SelectItem value="上海">上海</SelectItem>
+                  <SelectItem value="深圳">深圳</SelectItem>
+                  <SelectItem value="广州">广州</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        }
+        getRowId={(row) => row.id}
+        onRowClick={(row) => navigate(`/master-data/vendors/${row.id}`)}
+      />
+    </div>
+  )
+}
+
+export default ListPage

package/templates/scaffold-default/packages/admin/src/pages/master-data/vendors/ViewPage.tsx

@@ -0,0 +1,274 @@
+import { useNavigate, useParams } from "react-router";
+import { Building2, Pencil, MapPin, User, Landmark, BarChart3, History } from "lucide-react";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+
+const mockVendor = {
+  id: "1",
+  vendorCode: "VD-001",
+  vendorName: "联想集团",
+  vendorType: "supplier",
+  vendorTypeName: "供货商",
+  status: "active" as const,
+  country: "中国",
+  province: "北京市",
+  city: "北京",
+  district: "海淀区",
+  address: "中关村软件园二期",
+  postalCode: "100085",
+  contactPerson: "王经理",
+  phone: "010-12345678",
+  mobile: "138-0000-0001",
+  fax: "010-12345679",
+  email: "wang@lenovo.com",
+  website: "www.lenovo.com.cn",
+  bankName: "中国工商银行北京分行",
+  bankAccount: "6222 **** **** 1234",
+  taxNumber: "91110000100001234X",
+  paymentTerms: "30天净付",
+  currency: "CNY",
+  incoterms: "DDP",
+  totalOrders: 156,
+  totalAmount: 12580000,
+  avgDeliveryDays: 3.5,
+  qualityScore: 98.5,
+  createdAt: "2023-01-15 09:00:00",
+  createdBy: "系统管理员",
+  updatedAt: "2024-01-10 15:30:00",
+  updatedBy: "采购专员",
+};
+
+const statusConfig = {
+  active: { label: "合作中", color: "green" as const },
+  inactive: { label: "暂停", color: "gray" as const },
+  blocked: { label: "黑名单", color: "red" as const },
+};
+
+export function ViewPage() {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const data = mockVendor;
+  const status = statusConfig[data.status];
+
+  return (
+    <ObjectPage
+      mode="display"
+      backPath="/master-data/vendors"
+      breadcrumb="供应商主数据"
+      title={data.vendorName}
+      subtitle={`${data.vendorCode} · ${data.vendorTypeName}`}
+      status={status}
+      headerIcon={<Building2 className="h-5 w-5" />}
+      headerFields={[
+        { label: "供应商类型", value: data.vendorTypeName },
+        { label: "联系人", value: data.contactPerson },
+        { label: "所在城市", value: `${data.province} ${data.city}` },
+        { label: "付款条件", value: data.paymentTerms },
+      ]}
+      kpis={[
+        { value: data.totalOrders, label: "订单数量", color: "blue" },
+        {
+          value: `${(data.totalAmount / 10000).toFixed(0)}万`,
+          label: "采购金额",
+          color: "green",
+        },
+        { value: `${data.qualityScore}%`, label: "质量评分", color: "orange" },
+      ]}
+      sections={[
+        {
+          id: "basic",
+          title: "基本信息",
+          content: (
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">供应商编码</p>
+                <p className="text-sm font-medium">{data.vendorCode}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">供应商名称</p>
+                <p className="text-sm">{data.vendorName}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">供应商类型</p>
+                <p className="text-sm">{data.vendorTypeName}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">状态</p>
+                <span
+                  className={
+                    data.status === "active"
+                      ? "inline-flex rounded bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600"
+                      : data.status === "inactive"
+                      ? "inline-flex rounded bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground"
+                      : "inline-flex rounded bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-600"
+                  }
+                >
+                  {status.label}
+                </span>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "address",
+          title: "地址信息",
+          icon: <MapPin className="h-4 w-4" />,
+          content: (
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">国家/地区</p>
+                <p className="text-sm">{data.country}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">省/市</p>
+                <p className="text-sm">
+                  {data.province} · {data.city}
+                </p>
+              </div>
+              <div className="col-span-2">
+                <p className="mb-1 text-xs text-muted-foreground">详细地址</p>
+                <p className="text-sm">
+                  {data.district} {data.address}
+                </p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">邮政编码</p>
+                <p className="text-sm">{data.postalCode}</p>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "contact",
+          title: "联系信息",
+          icon: <User className="h-4 w-4" />,
+          content: (
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">联系人</p>
+                <p className="text-sm">{data.contactPerson}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">电话</p>
+                <p className="text-sm">{data.phone}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">手机</p>
+                <p className="text-sm">{data.mobile}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">传真</p>
+                <p className="text-sm">{data.fax}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">邮箱</p>
+                <p className="text-sm text-primary">{data.email}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">网站</p>
+                <p className="text-sm text-primary">{data.website}</p>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "bank",
+          title: "银行与财务",
+          icon: <Landmark className="h-4 w-4" />,
+          content: (
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">开户银行</p>
+                <p className="text-sm">{data.bankName}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">银行账号</p>
+                <p className="text-sm font-mono">{data.bankAccount}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">税号</p>
+                <p className="text-sm font-mono">{data.taxNumber}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">付款条件</p>
+                <p className="text-sm">{data.paymentTerms}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">货币</p>
+                <p className="text-sm">{data.currency}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">贸易条款</p>
+                <p className="text-sm">{data.incoterms}</p>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "stats",
+          title: "业务统计",
+          icon: <BarChart3 className="h-4 w-4" />,
+          sidebar: true,
+          content: (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">订单数量</span>
+                <span className="text-sm font-semibold">
+                  {data.totalOrders} 单
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">采购金额</span>
+                <span className="text-sm font-semibold text-primary">
+                  ¥{(data.totalAmount / 10000).toFixed(0)}万
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">平均交货</span>
+                <span className="text-sm font-semibold">
+                  {data.avgDeliveryDays} 天
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">质量评分</span>
+                <span className="text-sm font-semibold text-emerald-600">
+                  {data.qualityScore}%
+                </span>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "history",
+          title: "变更记录",
+          icon: <History className="h-4 w-4" />,
+          sidebar: true,
+          content: (
+            <div className="space-y-4">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">创建时间</p>
+                <p className="text-sm">{data.createdAt}</p>
+                <p className="text-xs text-muted-foreground">由 {data.createdBy}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">最后更新</p>
+                <p className="text-sm">{data.updatedAt}</p>
+                <p className="text-xs text-muted-foreground">由 {data.updatedBy}</p>
+              </div>
+            </div>
+          ),
+        },
+      ]}
+      actions={[
+        {
+          key: "edit",
+          label: "编辑",
+          icon: <Pencil className="h-4 w-4" />,
+          variant: "primary",
+          onClick: () => navigate(`/master-data/vendors/${id}/edit`),
+        },
+      ]}
+    />
+  );
+}
+
+export default ViewPage;

package/templates/scaffold-default/packages/admin/src/pages/master-data/vendors/index.ts

@@ -0,0 +1,2 @@
+export { ListPage } from "./ListPage";
+export { ViewPage } from "./ViewPage";

package/templates/scaffold-default/packages/admin/src/pages/placeholder-page.tsx

@@ -0,0 +1,13 @@
+interface PlaceholderPageProps {
+  title: string;
+  subtitle?: string;
+}
+
+export function PlaceholderPage({ title, subtitle }: PlaceholderPageProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <h1 className="text-2xl font-semibold">{title}</h1>
+      {subtitle && <p className="text-muted-foreground">{subtitle}</p>}
+    </div>
+  );
+}