分类图片上传和用户等级图片上传

web/pages/product/category.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Space, Tag, Typography } from 'antd';
-import { NodeExpandOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import {Button, Image, Tag, Typography} from 'antd';
+import {NodeExpandOutlined} from '@ant-design/icons';
 import XinTable from '@/components/XinTable';
 import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings.ts';
 import type IProductCategory from '@/domain/iProductCategory.ts';
@@ -36,17 +36,6 @@ const ProductCategoryPage: React.FC = () => {
   const [allIds, setAllIds] = useState<number[]>([]);
   const [categoryTree, setCategoryTree] = useState<IProductCategory[]>([]);
 
-  const loadTree = async () => {
-    const res = await getCategoryTable();
-    const tree = res.data.data ?? [];
-    setCategoryTree(tree);
-    setAllIds(collectAllIds(tree));
-  };
-
-  useEffect(() => {
-    loadTree();
-  }, []);
-
   const columns: XinTableColumn<IProductCategory>[] = [
     {
       title: '分类名称',
@@ -95,6 +84,45 @@ const ProductCategoryPage: React.FC = () => {
       },
       align: 'center',
     },
+    {
+      title: '分类图标',
+      dataIndex: 'icon',
+      valueType: 'image',
+      fieldProps: {
+        action: '/product/category/upload',
+        mode: 'single',
+        maxCount: 1,
+        changeType: "id"
+      },
+      render: (_, record: IProductCategory) => {
+        const url = record.icon_url
+        if (!url) return '-';
+        return (
+          <Image
+            src={url}
+            width={60}
+            height={60}
+            style={{ objectFit: 'cover', borderRadius: 4 }}
+          />
+        );
+      },
+      align: 'center',
+      hideInSearch: true,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'updated_at',
+      hideInForm: true,
+      hideInSearch: true,
+      align: 'center',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      hideInForm: true,
+      hideInSearch: true,
+      align: 'center',
+    },
   ];
 
   const tableProps: XinTableProps<IProductCategory> = {
@@ -115,9 +143,22 @@ const ProductCategoryPage: React.FC = () => {
       expandedRowKeys: expandedKeys,
       onExpandedRowsChange: (keys) => setExpandedKeys([...keys] as number[]),
     },
+    actionBarRender: (dom) => [
+      dom.add,
+      <Button
+        icon={<NodeExpandOutlined />}
+        onClick={() =>
+          setExpandedKeys(expandedKeys.length ? [] : allIds)
+        }
+      >
+        {expandedKeys.length ? '全部收起' : '全部展开'}
+      </Button>,
+      dom.keywordSearch,
+    ],
     formProps: {
       grid: true,
       colProps: { span: 12 },
+      rowProps: { gutter: 20 },
       layout: 'vertical',
     },
     modalProps: { width: 640 },
@@ -125,23 +166,11 @@ const ProductCategoryPage: React.FC = () => {
 
   return (
     <>
-      <div className="mb-5 flex items-start justify-between">
-        <div>
-          <Title level={3}>商品分类</Title>
-          <Text type="secondary">
-            多级分类（如蔬菜/水果/其他），采购单导出与对账筛选按分类归组；有子分类或挂载商品时不可删除。
-          </Text>
-        </div>
-        <Space>
-          <Button
-            icon={<NodeExpandOutlined />}
-            onClick={() =>
-              setExpandedKeys(expandedKeys.length ? [] : allIds)
-            }
-          >
-            {expandedKeys.length ? '全部收起' : '全部展开'}
-          </Button>
-        </Space>
+      <div className={"mb-5"}>
+        <Title level={3}>商品分类</Title>
+        <Text type="secondary">
+          多级分类（如蔬菜/水果/其他），采购单导出与对账筛选按分类归组；有子分类或挂载商品时不可删除。
+        </Text>
       </div>
       <XinTable<IProductCategory> {...tableProps} />
     </>