add sample page

src/pages/custom/product/sample/data.json

@@ -0,0 +1,38 @@
+{
+    "ack": 0,
+    "msg": "响应成功",
+    "datas": [
+        {
+            "id": 77,
+            "createTime": "2023-07-21 15:05:59",
+            "spuCode": "2-35UD6O",
+            "categoryId": 1264,
+            "prototypeName": "kfc-test2",
+            "createId": 2,
+            "categoryName": "男士T恤",
+            "createName": "陈相荣✨",
+            "oneImgUrl": "http://192.168.10.136:9000/eshop/eshop_img/2023/7/21/20230721150600A003.png",
+            "dictDetails": []
+        },
+        {
+            "id": 76,
+            "createTime": "2023-07-13 17:24:25",
+            "spuCode": "2-47GEE7",
+            "categoryId": 1264,
+            "prototypeName": "kfc-test",
+            "createId": 2,
+            "categoryName": "男士T恤",
+            "createName": "陈相荣✨",
+            "oneImgUrl": "http://192.168.10.136:9000/eshop/eshop_img/2023/7/13/20230713172425A025.png",
+            "dictDetails": []
+        }
+    ],
+    "pop": {
+        "totalPages": 1,
+        "pageSize": 50,
+        "totalCount": 2,
+        "currentPage": 1,
+        "previousPage": 1,
+        "nextPage": 1
+    }
+}

src/pages/custom/product/sample/index.tsx

@@ -1,9 +1,163 @@
-import { Empty  } from 'antd';
+import { Space, Tag, Table, Form, Row, Col, Input, InputNumber, Button, Avatar } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { t } from '@/utils/i18n';
+import { IconBuguang } from '@/assets/icons/buguang';
+import React, { useState } from 'react';
+import type { TableRowSelection } from 'antd/es/table/interface';
+
+interface DataType {
+  id: number;
+  createTime: string;
+  spuCode: string;
+  categoryId: number;
+  prototypeName: string;
+  createId: number;
+  categoryName: string;
+  createName: string;
+  oneImgUrl: string;
+  dictDetails: string[];
+}
+
+const TablePage: React.FC = () => {
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '示例图',
+      dataIndex: 'oneImgUrl',
+      key: 'oneImgUrl',
+      render: (value: string) => (
+        <div className='flex justify-center'>
+          {value ? (
+            <img src={value} className='w-[40px] h-[40px] flex items-center rounded-[50%]' />
+          ) : (
+            <Avatar className='bg-[gold] align-middle flex items-center justify-center w-[40px] h-[40px]' icon={<IconBuguang />} />
+          )}
+        </div>
+      ),
+      align: 'center',
+      width: 100,
+    },
+    {
+      title: 'SPU编码',
+      dataIndex: 'spuCode',
+      key: 'spuCode',
+    },
+    {
+      title: '样机名称',
+      dataIndex: 'prototypeName',
+      key: 'prototypeName',
+    },
+    {
+      title:'类目',
+      key: 'categoryName',
+      dataIndex: 'categoryName'
+    },
+    {
+      title: '创建人',
+      dataIndex: 'createName',
+      key: 'createName',
+    },
+    {
+      title:'创建时间',
+      key: 'createTime',
+      dataIndex: 'createTime'
+    },
+    {
+      title: t("QkOmYwne" /* 操作 */),
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <a>蒙版图 </a>
+          <a>属性设置</a>
+          <a>编辑</a>
+          <a>删除</a>
+        </Space>
+      ),
+    },
+  ];
+
+  const data: DataType[] = [
+    {
+      id: 77,
+      createTime: "2023-07-21 15:05:59",
+      spuCode: "2-35UD6O",
+      categoryId: 1264,
+      prototypeName: "kfc-test2",
+      createId: 2,
+      categoryName: "男士T恤",
+      createName: "陈相荣✨",
+      oneImgUrl: "http://192.168.10.136:9000/eshop/eshop_img/2023/7/21/20230721150600A003.png",
+      dictDetails: []
+  },
+  {
+      id: 76,
+      createTime: "2023-07-13 17:24:25",
+      spuCode: "2-47GEE7",
+      categoryId: 1264,
+      prototypeName: "kfc-test",
+      createId: 2,
+      categoryName: "男士T恤",
+      createName: "陈相荣✨",
+      oneImgUrl: "http://192.168.10.136:9000/eshop/eshop_img/2023/7/13/20230713172425A025.png",
+      dictDetails: []
+  }
+  ];
+
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+
+  const rowSelection: TableRowSelection<DataType> = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+    selections: [
+      Table.SELECTION_ALL,
+      Table.SELECTION_INVERT,
+      Table.SELECTION_NONE,
+      {
+        key: 'odd',
+        text: 'Select Odd Row',
+        onSelect: (changeableRowKeys) => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
+            if (index % 2 !== 0) {
+              return false;
+            }
+            return true;
+          });
+          setSelectedRowKeys(newSelectedRowKeys);
+        },
+      },
+      {
+        key: 'even',
+        text: 'Select Even Row',
+        onSelect: (changeableRowKeys) => {
+          let newSelectedRowKeys = [];
+          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
+            if (index % 2 !== 0) {
+              return true;
+            }
+            return false;
+          });
+          setSelectedRowKeys(newSelectedRowKeys);
+        },
+      },
+    ],
+  };
+
 
-const CustomMade = () => {
   return (
-    <Empty  />
+    <div>
+      <div className="mt-[16px] dark:bg-[rgb(33,41,70)] rounded-md">
+        <Table rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent' 
+          pagination={{ position: ['bottomRight'] }}
+        />
+      </div>
+    </div>
   );
 };
 
-export default CustomMade;
+export default TablePage;