refactor: 清理代码格式并移除未使用的BrandSpace组件

style: 统一字符串引号和代码缩进格式 fix: 修复订单同步日期范围参数格式 feat: 添加产品分组列表API接口
feat(产品): 添加产品分组功能页面
2026-01-20 17:20:41 +08:00 · 2026-01-20 17:19:02 +08:00
13 changed files with 527 additions and 569 deletions
--- a/.umirc.ts
+++ b/.umirc.ts
@ -166,8 +166,8 @@ export default defineConfig({
        },
        {
          name: '产品品牌空间',
-          path: '/product/brandspace',
-          component: './Product/BrandSpace',
+          path: '/product/groupBy',
+          component: './Product/GroupBy',
        },
        // sync
        {
--- a/src/components/SyncForm.tsx
+++ b/src/components/SyncForm.tsx
@ -4,8 +4,8 @@ import {
  ActionType,
  DrawerForm,
  ProForm,
-  ProFormSelect,
  ProFormDateRangePicker,
+  ProFormSelect,
 } from '@ant-design/pro-components';
 import { Button } from 'antd';
 import dayjs from 'dayjs';
@ -24,7 +24,12 @@ interface SyncFormProps {
 * @param {SyncFormProps} props 组件属性
 * @returns {React.ReactElement} 抽屉表单
 */
-const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId, dateRange }) => {
+const SyncForm: React.FC<SyncFormProps> = ({
+  tableRef,
+  onFinish,
+  siteId,
+  dateRange,
+}) => {
  // 使用 antd 的 App 组件提供的 message API
  const [loading, setLoading] = React.useState(false);

@ -52,11 +57,10 @@ const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId, dateRan
  // 返回一个抽屉表单
  return (
    <DrawerForm<API.ordercontrollerSyncorderParams>
-     initialValues={{
-    dateRange: [dayjs().subtract(1, 'week'), dayjs()],
-  }}
-
-    title="同步订单"
+      initialValues={{
+        dateRange: [dayjs().subtract(1, 'week'), dayjs()],
+      }}
+      title="同步订单"
      // 表单的触发器,一个带图标的按钮
      trigger={
        <Button key="syncSite" type="primary">
@ -74,7 +78,6 @@ const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId, dateRan
      onFinish={onFinish}
    >
      <ProForm.Group>
-        
        {/* 站点选择框 */}
        <ProFormSelect
          name="siteId"
@ -93,20 +96,19 @@ const SyncForm: React.FC<SyncFormProps> = ({ tableRef, onFinish, siteId, dateRan
        />

        <ProFormDateRangePicker
-        name="dateRange"
-        label="同步日期范围"
-        placeholder={['开始日期', '结束日期']}
-        
-        transform={(value) => {
-          return {
-            dateRange: value,
-          };
-        }}
-        fieldProps={{
-          showTime: false,
-          style: { width: '100%' },
-        }}
-      />
+          name="dateRange"
+          label="同步日期范围"
+          placeholder={['开始日期', '结束日期']}
+          transform={(value) => {
+            return {
+              dateRange: value,
+            };
+          }}
+          fieldProps={{
+            showTime: false,
+            style: { width: '100%' },
+          }}
+        />
      </ProForm.Group>
    </DrawerForm>
  );
--- a/src/pages/Order/List/index.tsx
+++ b/src/pages/Order/List/index.tsx
@ -502,7 +502,10 @@ const ListPage: React.FC = () => {
                  success,
                  message: errMsg,
                  data,
-                } = await ordercontrollerSyncorders(values,{after:values.dateRange?.[0]+'T00:00:00Z',before:values.dateRange?.[1]+'T23:59:59Z'});
+                } = await ordercontrollerSyncorders(values, {
+                  after: values.dateRange?.[0] + 'T00:00:00Z',
+                  before: values.dateRange?.[1] + 'T23:59:59Z',
+                });
                if (!success) {
                  throw new Error(errMsg);
                }
@ -1507,16 +1510,16 @@ const Shipping: React.FC<{
          <ProFormList
            label="发货产品"
            name="sales"
-         //  rules={[
-         //    {
-          //     required: true,
-          //     message: '至少需要一个商品',
-          //     validator: (_, value) =>
-          //       value && value.length > 0
-           //</Col>        ? Promise.resolve()
-           //        : Promise.reject('至少需要一个商品'),
-           //  },
-          // ]}
+            //  rules={[
+            //    {
+            //     required: true,
+            //     message: '至少需要一个商品',
+            //     validator: (_, value) =>
+            //       value && value.length > 0
+            //</Col>        ? Promise.resolve()
+            //        : Promise.reject('至少需要一个商品'),
+            //  },
+            // ]}
          >
            <ProForm.Group>
              <ProFormSelect
--- a/src/pages/Product/BrandSpace/index.tsx
+++ b/src/pages/Product/BrandSpace/index.tsx
@ -1,486 +0,0 @@
-import { PageContainer } from '@ant-design/pro-components';
-import { request } from '@umijs/max';
-import {
-  Card,
-  Col,
-  Image,
-  Layout,
-  Row,
-  Select,
-  Space,
-  Typography,
-  message,
-} from 'antd';
-import React, { useEffect, useState } from 'react';
-
-const { Sider, Content } = Layout;
-const { Title, Text } = Typography;
-const { Option } = Select;
-
-// Define interfaces
-interface Brand {
-  id: number;
-  name: string;
-  shortName?: string;
-  image?: string;
-}
-
-interface Attribute {
-  id: number;
-  name: string;
-  title: string;
-}
-
-interface AttributeValue {
-  id: number;
-  name: string;
-  title: string;
-  titleCN?: string;
-  value?: string;
-  image?: string;
-}
-
-interface Product {
-  id: number;
-  sku: string;
-  name: string;
-  image?: string;
-  brandId: number;
-  brandName: string;
-  attributes: { [key: string]: any };
-}
-
-const BrandSpace: React.FC = () => {
-  // State management
-  const [brands, setBrands] = useState<Brand[]>([]);
-  const [selectedBrand, setSelectedBrand] = useState<number | null>(null);
-
-  const [attributes, setAttributes] = useState<Attribute[]>([]);
-  const [selectedAttribute, setSelectedAttribute] = useState<string | null>(
-    null,
-  );
-
-  const [attributeValues, setAttributeValues] = useState<AttributeValue[]>([]);
-  const [selectedAttributeValue, setSelectedAttributeValue] = useState<
-    number | null
-  >(null);
-
-  const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [attributeValuesLoading, setAttributeValuesLoading] = useState(false);
-
-  // Fetch brands list
-  const fetchBrands = async () => {
-    try {
-      const response = await request('/dict/items', {
-        params: { dictId: 'brand' }, // Assuming brand is a dict
-      });
-      const brandList = Array.isArray(response)
-        ? response
-        : response?.data || [];
-      setBrands(brandList);
-
-      // Set default brand to "yoone" if exists
-      const defaultBrand = brandList.find((brand) => brand.name === 'yoone');
-      if (defaultBrand) {
-        setSelectedBrand(defaultBrand.id);
-      }
-    } catch (error) {
-      console.error('Failed to fetch brands:', error);
-      message.error('获取品牌列表失败');
-    }
-  };
-
-  // Fetch attributes list
-  const fetchAttributes = async () => {
-    try {
-      // Get all dicts that are attributes (excluding non-attribute dicts)
-      const response = await request('/dict/list');
-      const dictList = Array.isArray(response)
-        ? response
-        : response?.data || [];
-
-      // Filter out non-attribute dicts (assuming attributes are specific dicts)
-      const attributeDicts = dictList.filter((dict: any) =>
-        ['strength', 'flavor', 'humidity', 'size', 'version'].includes(
-          dict.name,
-        ),
-      );
-
-      setAttributes(attributeDicts);
-
-      // Set default attribute to strength if exists
-      const defaultAttribute = attributeDicts.find(
-        (attr) => attr.name === 'strength',
-      );
-      if (defaultAttribute) {
-        setSelectedAttribute(defaultAttribute.name);
-      }
-    } catch (error) {
-      console.error('Failed to fetch attributes:', error);
-      message.error('获取属性列表失败');
-    }
-  };
-
-  // Fetch attribute values based on selected attribute
-  const fetchAttributeValues = async (attributeName: string) => {
-    setAttributeValuesLoading(true);
-    try {
-      const response = await request('/dict/items', {
-        params: { dictId: attributeName },
-      });
-      const values = Array.isArray(response) ? response : response?.data || [];
-      setAttributeValues(values);
-    } catch (error) {
-      console.error('Failed to fetch attribute values:', error);
-      message.error('获取属性值列表失败');
-      // Clear attribute values on error
-      setAttributeValues([]);
-    } finally {
-      setAttributeValuesLoading(false);
-    }
-  };
-
-  // Fetch products based on filters
-  const fetchProducts = async () => {
-    if (!selectedBrand) return;
-
-    setLoading(true);
-    try {
-      const params: any = {
-        brandId: selectedBrand,
-      };
-
-      // Add attribute filter if selected
-      if (selectedAttribute) {
-        // If attribute value is selected, filter by both attribute and value
-        if (selectedAttributeValue) {
-          params[selectedAttribute] = selectedAttributeValue;
-        } else {
-          // If only attribute is selected, filter by attribute presence
-          params[selectedAttribute] = 'hasValue';
-        }
-      }
-
-      const response = await request('/product/list', {
-        params,
-      });
-
-      const productList = response?.data?.items || [];
-      setProducts(productList);
-    } catch (error) {
-      console.error('Failed to fetch products:', error);
-      message.error('获取产品列表失败');
-      // Clear products on error
-      setProducts([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Initial data fetch
-  useEffect(() => {
-    fetchBrands();
-    fetchAttributes();
-  }, []);
-
-  // Fetch attribute values when attribute changes
-  useEffect(() => {
-    if (selectedAttribute) {
-    fetchAttributeValues(selectedAttribute);
-      setSelectedAttributeValue(null); // Reset selected value when attribute changes
-    }
-  }, [selectedAttribute]);
-
-  // Fetch products when filters change
-  useEffect(() => {
-    fetchProducts();
-  }, [selectedBrand, selectedAttribute, selectedAttributeValue]);
-
-  // Handle brand selection change
-  const handleBrandChange = (value: number) => {
-    setSelectedBrand(value);
-  };
-
-  // Handle attribute selection change
-  const handleAttributeChange = (value: string) => {
-    setSelectedAttribute(value);
-  };
-
-  // Handle attribute value selection change
-  const handleAttributeValueChange = (value: number) => {
-    setSelectedAttributeValue(value);
-  };
-
-  return (
-    <PageContainer title="品牌空间">
-      <Layout style={{ minHeight: 'calc(100vh - 64px)', background: '#fff' }}>
-        {/* Top Brand Selection */}
-        <div style={{ padding: '16px', borderBottom: '1px solid #f0f0f0' }}>
-          <Space direction="vertical" style={{ width: '100%' }}>
-            <Title level={4} style={{ margin: 0 }}>
-              选择品牌
-            </Title>
-            <Select
-              placeholder="请选择品牌"
-              style={{ width: 300 }}
-              value={selectedBrand}
-              onChange={handleBrandChange}
-              allowClear
-            >
-              {brands.map((brand) => (
-                <Option key={brand.id} value={brand.id}>
-                  {brand.name}
-                </Option>
-              ))}
-            </Select>
-          </Space>
-        </div>
-
-        <Layout>
-          {/* Left Attribute Selection */}
-          <Sider
-            width={240}
-            style={{ background: '#fafafa', borderRight: '1px solid #f0f0f0' }}
-          >
-            <div style={{ padding: '16px' }}>
-              <Space direction="vertical" style={{ width: '100%' }}>
-                <Title level={5} style={{ margin: 0 }}>
-                  选择属性
-                </Title>
-                <Select
-                  placeholder="请选择属性类型"
-                  style={{ width: '100%' }}
-                  value={selectedAttribute}
-                  onChange={handleAttributeChange}
-                  allowClear
-                >
-                  {attributes.map((attr) => (
-                    <Option key={attr.id} value={attr.name}>
-                      {attr.title}
-                    </Option>
-                  ))}
-                </Select>
-
-                {selectedAttribute && (
-                  <>
-                    <Title level={5} style={{ margin: '16px 0 8px 0' }}>
-                      属性值
-                    </Title>
-                    <Select
-                      placeholder={`请选择${
-                        attributes.find((a) => a.name === selectedAttribute)
-                          ?.title
-                      }`}
-                      style={{ width: '100%' }}
-                      value={selectedAttributeValue}
-                      onChange={handleAttributeValueChange}
-                      allowClear
-                      loading={attributeValuesLoading}
-                    >
-                      {attributeValues.map((value) => (
-                        <Option key={value.id} value={value.id}>
-                          <Space>
-                            {value.image && (
-                              <Image
-                                src={value.image}
-                                style={{
-                                  width: 24,
-                                  height: 24,
-                                  objectFit: 'cover',
-                                  borderRadius: 4,
-                                }}
-                              />
-                            )}
-                            <span>
-                              {value.titleCN || value.title || value.name}
-                            </span>
-                          </Space>
-                        </Option>
-                      ))}
-                    </Select>
-                  </>
-                )}
-
-                {/* Filter Summary */}
-                {selectedBrand && (
-                  <div
-                    style={{
-                      marginTop: 24,
-                      padding: 12,
-                      background: '#fff',
-                      borderRadius: 8,
-                    }}
-                  >
-                    <Text strong>当前筛选条件:</Text>
-                    <div style={{ marginTop: 8 }}>
-                      <Text type="secondary">品牌: </Text>
-                      <Text>
-                        {brands.find((b) => b.id === selectedBrand)?.name}
-                      </Text>
-                    </div>
-                    {selectedAttribute && (
-                      <div style={{ marginTop: 4 }}>
-                        <Text type="secondary">
-                          {
-                            attributes.find((a) => a.name === selectedAttribute)
-                              ?.title
-                          }
-                          :
-                        </Text>
-                        <Text>
-                          {selectedAttributeValue
-                            ? attributeValues.find(
-                                (v) => v.id === selectedAttributeValue,
-                              )?.titleCN ||
-                              attributeValues.find(
-                                (v) => v.id === selectedAttributeValue,
-                              )?.title
-                            : '所有值'}
-                        </Text>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </Space>
-            </div>
-          </Sider>
-
-          {/* Main Content - Product List */}
-          <Content style={{ padding: '16px', overflowX: 'auto' }}>
-            <div style={{ marginBottom: 16 }}>
-              <Title level={4} style={{ margin: 0 }}>
-                产品列表
-                <Text type="secondary" style={{ fontSize: 16, marginLeft: 8 }}>
-                  ({products.length} 个产品)
-                </Text>
-              </Title>
-            </div>
-
-            {loading ? (
-              <div style={{ textAlign: 'center', padding: '64px' }}>
-                <Text>加载中...</Text>
-              </div>
-            ) : attributeValues.length > 0 ? (
-              <div style={{ minWidth: 'max-content' }}>
-                <Row gutter={[16, 16]}>
-                  {attributeValues.map((attributeValue) => {
-                    // Filter products for this attribute value
-                    if(!Array.isArray(products)){
-                      console.log('products',products)
-                      return null
-                    }
-                    const attributeValueProducts = selectedAttribute
-                      ? (products || []).filter((product) => 
-                          product.attributes && 
-                          product.attributes[selectedAttribute] === attributeValue.id
-                        )
-                      : [];
-
-                    return (
-                      <Col key={attributeValue.id} style={{ minWidth: 300 }}>
-                        <Card
-                          title={
-                            <Space>
-                              {attributeValue.image && (
-                                <Image
-                                  src={attributeValue.image}
-                                  style={{
-                                    width: 24,
-                                    height: 24,
-                                    objectFit: 'cover',
-                                    borderRadius: 4,
-                                  }}
-                                />
-                              )}
-                              <span>
-                                {attributeValue.titleCN || attributeValue.title || attributeValue.name}
-                              </span>
-                            </Space>
-                          }
-                          style={{ width: 300 }}
-                        >
-                          {attributeValueProducts.length > 0 ? (
-                            <div style={{ maxHeight: 600, overflowY: 'auto' }}>
-                              {attributeValueProducts.map((product) => (
-                                <Card
-                                  key={product.id}
-                                  size="small"
-                                  hoverable
-                                  style={{ marginBottom: 8 }}
-                                >
-                                  <div
-                                    style={{
-                                      height: 100,
-                                      overflow: 'hidden',
-                                      marginBottom: 8,
-                                    }}
-                                  >
-                                    <Image
-                                      src={
-                                        product.image ||
-                                        'https://via.placeholder.com/100x100?text=No+Image'
-                                      }
-                                      alt={product.name}
-                                      style={{
-                                        width: '100%',
-                                        height: '100%',
-                                        objectFit: 'cover',
-                                      }}
-                                    />
-                                  </div>
-                                  <div>
-                                    <Text
-                                      type="secondary"
-                                      style={{ fontSize: 12, marginBottom: 4 }}
-                                    >
-                                      {product.sku}
-                                    </Text>
-                                    <div style={{ marginTop: 4 }}>
-                                      <Text ellipsis style={{ width: '100%', display: 'block' }}>
-                                        {product.name}
-                                      </Text>
-                                    </div>
-                                    <div style={{ marginTop: 8 }}>
-                                      <Text
-                                        strong
-                                        style={{ fontSize: 14, color: '#ff4d4f' }}
-                                      >
-                                        ¥{product.price || '--'}
-                                      </Text>
-                                    </div>
-                                  </div>
-                                </Card>
-                              ))}
-                            </div>
-                          ) : (
-                            <div style={{ textAlign: 'center', padding: '32px' }}>
-                              <Text type="secondary">暂无产品</Text>
-                            </div>
-                          )}
-                        </Card>
-                      </Col>
-                    );
-                  })}
-                </Row>
-              </div>
-            ) : (
-              <div
-                style={{
-                  textAlign: 'center',
-                  padding: '64px',
-                  background: '#fafafa',
-                  borderRadius: 8,
-                }}
-              >
-                <Text type="secondary">暂无属性值或产品</Text>
-              </div>
-            )}
-          </Content>
-        </Layout>
-      </Layout>
-    </PageContainer>
-  );
-};
-
-export default BrandSpace;
--- a/src/pages/Product/CsvTool/index.tsx
+++ b/src/pages/Product/CsvTool/index.tsx
@ -415,11 +415,11 @@ const CsvTool: React.FC = () => {
    }

    // 如果type为single且启用了生成bundle SKU，则添加quantity
-    if (
-      quantity
-    ) {
+    if (quantity) {
      // 使用quantity的shortName，如果没有则使用quantity但匹配 4 个零
-      const quantityShortName = attributeMappings.quantities[quantity] || Number(quantity).toString().padStart(4, '0');
+      const quantityShortName =
+        attributeMappings.quantities[quantity] ||
+        Number(quantity).toString().padStart(4, '0');
      skuComponents.push(quantityShortName);
    }
    // 合并所有组件，使用短横线分隔
@ -463,9 +463,7 @@ const CsvTool: React.FC = () => {
    if (size) nameComponents.push(size);

    // 如果有数量且类型为bundle或者生成bundle的single产品，则添加数量
-    if (
-      type==='bundle' && quantity
-    ) {
+    if (type === 'bundle' && quantity) {
      nameComponents.push(String(quantity));
    }

@ -569,7 +567,7 @@ const CsvTool: React.FC = () => {

      // Determine which data to use for processing and download
      let finalData = dataWithSku;
-      console.log('generateBundleSkuForSingle',generateBundleSkuForSingle)
+      console.log('generateBundleSkuForSingle', generateBundleSkuForSingle);
      // If generateBundleSkuForSingle is enabled, generate bundle products for single products
      if (generateBundleSkuForSingle) {
        // Filter out single records
@ -578,7 +576,9 @@ const CsvTool: React.FC = () => {
        );

        // Get quantity values from the config (same source as other attributes like brand)
-        const quantityValues = config.quantities.map(quantity=>quantity.name)
+        const quantityValues = config.quantities.map(
+          (quantity) => quantity.name,
+        );

        // Generate bundle products for each single record and quantity
        const generatedBundleRecords = singleRecords.flatMap((singleRecord) => {
@ -772,7 +772,11 @@ const CsvTool: React.FC = () => {
                valuePropName="checked"
                initialValue={true}
              >
-                <Checkbox onChange={(e)=> setGenerateBundleSkuForSingle(e.target.checked)}>
+                <Checkbox
+                  onChange={(e) =>
+                    setGenerateBundleSkuForSingle(e.target.checked)
+                  }
+                >
                  启用为single类型生成bundle SKU
                </Checkbox>
              </ProForm.Item>
--- a/src/pages/Product/GroupBy/index.tsx
+++ b/src/pages/Product/GroupBy/index.tsx
@ -0,0 +1,368 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { PageContainer, ProFromSelect } from '@ant-design/pro-components';
+import { Card, Collapse, Divider, Image, Select, Space, Typography, message } from 'antd';
+import { categorycontrollerGetall } from '@/servers/api/category';
+import { productcontrollerGetproductlistgrouped } from '@/servers/api/product';
+import { dictcontrollerGetdictitems } from '@/servers/api/dict';
+
+// Define interfaces
+interface Category {
+  id: number;
+  name: string;
+  title: string;
+  attributes: string[]; // List of attribute names for this category
+}
+interface Attribute {
+  id: number;
+  name: string;
+  title: string;
+}
+
+interface AttributeValue {
+  id: number;
+  name: string;
+  title: string;
+  titleCN?: string;
+  value?: string;
+  image?: string;
+}
+
+interface Product {
+  id: number;
+  sku: string;
+  name: string;
+  image?: string;
+  brandId: number;
+  brandName: string;
+  attributes: { [key: string]: number }; // attribute name to attribute value id mapping
+  price?: number;
+}
+
+// Grouped products by attribute value
+interface GroupedProducts {
+  [attributeValueId: string]: Product[];
+}
+
+// ProductCard component for displaying single product
+const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
+  return (
+    <Card hoverable style={{ width: 240 }}>
+      {/* <div style={{ height: 180, overflow: 'hidden', marginBottom: '12px' }}>
+        <Image
+          src={product.image || 'https://via.placeholder.com/240x180?text=No+Image'}
+          alt={product.name}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      </div> */}
+      <div>
+        <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: '4px' }}>
+          {product.sku}
+        </Typography.Text>
+        <Typography.Text ellipsis style={{ width: '100%', display: 'block', marginBottom: '8px' }}>
+          {product.name}
+        </Typography.Text>
+        <Typography.Text strong style={{ fontSize: 16, color: '#ff4d4f', display: 'block' }}>
+          ¥{product.price || '--'}
+        </Typography.Text>
+      </div>
+    </Card>
+  );
+};
+
+// ProductGroup component for displaying grouped products
+const ProductGroup: React.FC<{
+  attributeValueId: string;
+  groupProducts: Product[];
+  attributeValue: AttributeValue | undefined;
+  attributeName: string;
+}> = ({ attributeValueId, groupProducts, attributeValue }) => {
+  // State for collapse control
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // Create collapse panel header
+  const panelHeader = (
+    <Space>
+      {attributeValue?.image && (
+        <Image
+          src={attributeValue.image}
+          style={{ width: 24, height: 24, objectFit: 'cover', borderRadius: 4 }}
+        />
+      )}
+      <Typography.Title level={5} style={{ margin: 0 }}>
+        <span>
+          {attributeValue?.titleCN || attributeValue?.title || attributeValue?.name || attributeValueId||'未知'}
+          (共 {groupProducts.length} 个产品)
+        </span>
+      </Typography.Title>
+    </Space>
+  );
+
+  return (
+    <Collapse
+      activeKey={isCollapsed ? [] : [attributeValueId]}
+      onChange={(key) => setIsCollapsed(Array.isArray(key) && key.length === 0)}
+      ghost
+      bordered={false}
+      items={[
+        {
+          key: attributeValueId,
+          label: panelHeader,
+          children: (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', paddingTop: '8px' }}>
+              {groupProducts.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+// Main ProductGroupBy component
+const ProductGroupBy: React.FC = () => {
+  // State management
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  // Store selected values for each attribute
+  const [attributeFilters, setAttributeFilters] = useState<{ [key: string]: number | null }>({});
+
+  // Group by attribute
+  const [groupByAttribute, setGroupByAttribute] = useState<string | null>(null);
+
+  // Products
+  const [products, setProducts] = useState<Product[]>([]);
+  const [groupedProducts, setGroupedProducts] = useState<GroupedProducts>({});
+  const [loading, setLoading] = useState(false);
+
+  // Extract all unique attributes from categories
+  const categoryAttributes = useMemo(() => {
+    if (!selectedCategory) return [];
+    const categoryItem = categories.find((category: any) => category.name === selectedCategory);
+    if (!categoryItem) return [];
+    const attributesList: Attribute[] = categoryItem.attributes.map((attribute: any, index) => ({
+      ...attribute.attributeDict,
+      id: index + 1,
+    }));
+    return attributesList;
+  }, [selectedCategory]);
+
+  // Fetch categories list
+  const fetchCategories = async () => {
+    try {
+      const response = await categorycontrollerGetall();
+      const rawCategories = Array.isArray(response) ? response : response?.data || [];
+      setCategories(rawCategories);
+
+      // Set default category
+      if (rawCategories.length > 0) {
+        const defaultCategory = rawCategories.find((category: any) => category.name === 'nicotine-pouches');
+        setSelectedCategory(defaultCategory?.name || rawCategories[0].name);
+      }
+    } catch (error) {
+      console.error('Failed to fetch categories:', error);
+      message.error('获取分类列表失败');
+    }
+  };
+
+  // Update category attributes when selected category changes
+  useEffect(() => {
+    if (!selectedCategory) return;
+
+    const category = categories.find(cat => cat.name === selectedCategory);
+    if (!category) return;
+
+    // Get attributes for this category
+    const attributesForCategory = categoryAttributes.filter(attr =>
+      attr.name === 'brand' || category.attributes.includes(attr.name)
+    );
+    // Reset attribute filters when category changes
+    const newFilters: { [key: string]: number | null } = {};
+    attributesForCategory.forEach(attr => {
+      newFilters[attr.name] = null;
+    });
+    setAttributeFilters(newFilters);
+
+    // Set default group by attribute
+    if (attributesForCategory.length > 0) {
+      setGroupByAttribute(attributesForCategory[0].name);
+    }
+  }, [selectedCategory, categories, categoryAttributes]);
+
+  // Handle attribute filter change
+  const handleAttributeFilterChange = (attributeName: string, value: number | null) => {
+    setAttributeFilters(prev => ({ ...prev, [attributeName]: value }));
+  };
+
+  // Fetch products based on filters
+  const fetchProducts = async () => {
+    if (!selectedCategory || !groupByAttribute) return;
+
+    setLoading(true);
+    try {
+      const params: any = { 
+        category: selectedCategory, 
+        groupBy: groupByAttribute 
+      };
+
+
+      const response = await productcontrollerGetproductlistgrouped(params);
+      const grouped = response?.data || {};
+      setGroupedProducts(grouped);
+      
+      // Flatten grouped products to get all products
+      const allProducts = Object.values(grouped).flat() as Product[];
+      setProducts(allProducts);
+    } catch (error) {
+      console.error('Failed to fetch grouped products:', error);
+      message.error('获取分组产品列表失败');
+      setProducts([]);
+      setGroupedProducts({});
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Initial data fetch
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  // Fetch products when filters change
+  useEffect(() => {
+    fetchProducts();
+  }, [selectedCategory, attributeFilters, groupByAttribute]);
+
+  // Destructure antd components
+  const { Title, Text } = Typography;
+
+  return (
+    <PageContainer title="品牌空间">
+      <div style={{ padding: '16px', background: '#fff' }}>
+        {/* Filter Section */}
+        <div style={{ marginBottom: '24px' }}>
+          <Title level={4} style={{ marginBottom: '16px' }}>筛选条件</Title>
+          <Space direction="vertical" size="large">
+            {/* Category Filter */}
+            <div>
+              <Text strong>选择分类：</Text>
+              <Select
+                placeholder="请选择分类"
+                style={{ width: 300, marginLeft: '8px' }}
+                value={selectedCategory}
+                onChange={setSelectedCategory}
+                allowClear
+                showSearch
+                optionFilterProp="children"
+              >
+                {categories.map(category => (
+                  <Option key={category.id} value={category.name}>
+                    {category.title}
+                  </Option>
+                ))}
+              </Select>
+            </div>
+
+            {/* Attribute Filters */}
+            {categoryAttributes.length > 0 && (
+              <div>
+                <Text strong>属性筛选：</Text>
+                <Space direction="vertical" style={{ marginTop: '8px', width: '100%' }}>
+                  {categoryAttributes.map(attr => (
+                      <div key={attr.id} style={{ display: 'flex', alignItems: 'center' }}>
+                        <Text style={{ width: '100px' }}>{attr.title}：</Text>
+                        <ProFromSelect
+                          placeholder={`请选择${attr.title}`}
+                          style={{ width: 300 }}
+                          value={attributeFilters[attr.name] || null}
+                          onChange={value => handleAttributeFilterChange(attr.name, value)}
+                          allowClear
+                          showSearch
+                          optionFilterProp="children"
+                          request={async (params) => {
+                            try {
+                              console.log('params', params,attr);
+                              const response = await dictcontrollerGetdictitems({ dictId: attr.name });
+                              const rawValues = Array.isArray(response) ? response : response?.data?.items || [];
+                              const filteredValues = rawValues.filter((value: any) => 
+                                value.dictId === attr.name || value.dict?.id === attr.name || value.dict?.name === attr.name
+                              );
+                              return {
+                                options: filteredValues.map((value: any) => ({
+                                  label: `${value.name}${value.titleCN || value.title}`,
+                                  value: value.id
+                                }))
+                              };
+                            } catch (error) {
+                              console.error(`Failed to fetch ${attr.title} values:`, error);
+                              message.error(`获取${attr.title}属性值失败`);
+                              return { options: [] };
+                            }
+                          }}
+                        />
+                      </div>
+                    ))}
+                </Space>
+              </div>
+            )}
+
+            {/* Group By Attribute */}
+            {categoryAttributes.length > 0 && (
+              <div>
+                <Text strong>分组依据：</Text>
+                <Select
+                  placeholder="请选择分组属性"
+                  style={{ width: 300, marginLeft: '8px' }}
+                  value={groupByAttribute}
+                  onChange={setGroupByAttribute}
+                  showSearch
+                  optionFilterProp="children"
+                >
+                  {categoryAttributes.map(attr => (
+                    <Option key={attr.id} value={attr.name}>
+                      {attr.title}
+                    </Option>
+                  ))}
+                </Select>
+              </div>
+            )}
+          </Space>
+        </div>
+
+        <Divider />
+
+        {/* Products Section */}
+        <div>
+          <Title level={4} style={{ marginBottom: '16px' }}>产品列表 ({products.length} 个产品)</Title>
+
+          {loading ? (
+            <div style={{ textAlign: 'center', padding: '64px' }}>
+              <Text>加载中...</Text>
+            </div>
+          ) : groupByAttribute && Object.keys(groupedProducts).length > 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+              {Object.entries(groupedProducts).map(([attrValueId, groupProducts]) => {
+                return (
+                  <ProductGroup
+                    key={attrValueId}
+                    attributeValueId={attrValueId}
+                    groupProducts={groupProducts}
+                    // attributeValue={}
+                    attributeName={groupByAttribute!}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div style={{ textAlign: 'center', padding: '64px', background: '#fafafa', borderRadius: 8 }}>
+              <Text type="secondary">暂无产品</Text>
+            </div>
+          )}
+        </div>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default ProductGroupBy;
--- a/src/pages/Product/List/index.tsx
+++ b/src/pages/Product/List/index.tsx
@ -235,10 +235,10 @@ const List: React.FC = () => {
      ),
    },
    {
-      title: "图片",
+      title: '图片',
      dataIndex: 'image',
      width: 100,
-      valueType:'image'
+      valueType: 'image',
    },
    {
      title: '名称',
@ -254,7 +254,6 @@ const List: React.FC = () => {
        );
      },
    },
-    

    {
      title: '价格',
--- a/src/pages/Site/List/index.tsx
+++ b/src/pages/Site/List/index.tsx
@ -202,8 +202,12 @@ const SiteList: React.FC = () => {
        </a>
      ),
    },
-    { title: 'webhook地址', dataIndex: 'webhookUrl', width: 280, hideInSearch: true },
-  
+    {
+      title: 'webhook地址',
+      dataIndex: 'webhookUrl',
+      hideInSearch: true,
+    },
+
    {
      title: 'SKU 前缀',
      dataIndex: 'skuPrefix',
--- a/src/pages/Site/Shop/EditSiteForm.tsx
+++ b/src/pages/Site/Shop/EditSiteForm.tsx
@ -169,7 +169,6 @@ const EditSiteForm: React.FC<EditSiteFormProps> = ({
        label="区域"
        mode="multiple"
        placeholder="请选择区域"
-        
        showSearch
        filterOption={(input, option) =>
          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
--- a/src/pages/Statistics/Order/index.tsx
+++ b/src/pages/Statistics/Order/index.tsx
@ -2,7 +2,6 @@ import { ORDER_STATUS_ENUM } from '@/constants';
 import { AddTag } from '@/pages/Customer/List';
 import { customercontrollerDeltag } from '@/servers/api/customer';
 import { sitecontrollerAll } from '@/servers/api/site';
-import * as countries from 'i18n-iso-countries';
 import {
  statisticscontrollerGetorderbydate,
  statisticscontrollerGetorderbyemail,
@ -22,6 +21,7 @@ import { Button, Space, Tag } from 'antd';
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import ReactECharts from 'echarts-for-react';
+import * as countries from 'i18n-iso-countries';
 import { useEffect, useMemo, useRef, useState } from 'react';

 dayjs.extend(weekOfYear);
@ -40,15 +40,15 @@ const highlightText = (text: string, keyword: string) => {
 };

 // 获取所有国家/地区的选项
-  const getCountryOptions = () => {
-    // 获取所有国家的 ISO 代码
-    const countryCodes = countries.getAlpha2Codes();
-    // 将国家代码转换为选项数组
-    return Object.keys(countryCodes).map((code) => ({
-      label: countries.getName(code, 'zh') || code, // 使用中文名称, 如果没有则使用代码
-      value: code,
-    }));
-  };
+const getCountryOptions = () => {
+  // 获取所有国家的 ISO 代码
+  const countryCodes = countries.getAlpha2Codes();
+  // 将国家代码转换为选项数组
+  return Object.keys(countryCodes).map((code) => ({
+    label: countries.getName(code, 'zh') || code, // 使用中文名称, 如果没有则使用代码
+    value: code,
+  }));
+};

 const ListPage: React.FC = () => {
  const [xAxis, setXAxis] = useState([]);
@ -635,18 +635,17 @@ const ListPage: React.FC = () => {
          }}
        />

-      <ProFormSelect
-             name="country"
-             label="区域"
-             mode="multiple"
-             placeholder="请选择区域"
-             
-             showSearch
-             filterOption={(input, option) =>
-               (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-             }
-             options={getCountryOptions()}
-           />
+        <ProFormSelect
+          name="country"
+          label="区域"
+          mode="multiple"
+          placeholder="请选择区域"
+          showSearch
+          filterOption={(input, option) =>
+            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+          }
+          options={getCountryOptions()}
+        />
        {/* <ProFormSelect
          label="类型"
          name="purchaseType"
--- a/src/pages/Statistics/OrderSource/index.tsx
+++ b/src/pages/Statistics/OrderSource/index.tsx
@ -8,16 +8,16 @@ import {
  ActionType,
  PageContainer,
  ProColumns,
-  ProTable,
  ProForm,
  ProFormSelect,
+  ProTable,
 } from '@ant-design/pro-components';
 import { Space, Tag } from 'antd';
 import dayjs from 'dayjs';
 import ReactECharts from 'echarts-for-react';
-import { HistoryOrder } from '../Order';
 import * as countries from 'i18n-iso-countries';
 import zhCN from 'i18n-iso-countries/langs/zh';
+import { HistoryOrder } from '../Order';
 countries.registerLocale(zhCN);
 const ListPage: React.FC = () => {
  const [data, setData] = useState({});
@ -25,12 +25,14 @@ const ListPage: React.FC = () => {
    country: ['CA'],
  };
  function handleSubmit(values: typeof initialValues) {
-    statisticscontrollerGetordersource({params: values}).then(({ data, success }) => {
-      if (success) setData(data);
-    });
+    statisticscontrollerGetordersource({ params: values }).then(
+      ({ data, success }) => {
+        if (success) setData(data);
+      },
+    );
  }
  useEffect(() => {
-    handleSubmit(initialValues)
+    handleSubmit(initialValues);
  }, []);

  const option = useMemo(() => {
@ -287,7 +289,6 @@ const ListPage: React.FC = () => {
        );
      },
    },
-
  ];

  return (
@ -297,7 +298,6 @@ const ListPage: React.FC = () => {
        layout="inline"
        onFinish={handleSubmit}
      >
-
        <ProFormSelect
          name="country"
          label="区域"
@ -343,8 +343,6 @@ const ListPage: React.FC = () => {
  );
 };

-
-
 // 获取所有国家/地区的选项
 const getCountryOptions = () => {
  // 获取所有国家的 ISO 代码
--- a/src/servers/api/product.ts
+++ b/src/servers/api/product.ts
@ -623,6 +623,21 @@ export async function productcontrollerGetproductlist(
  });
 }

+/** 此处后端没有提供注释 GET /product/list/grouped */
+export async function productcontrollerGetproductlistgrouped(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.productcontrollerGetproductlistgroupedParams,
+  options?: { [key: string]: any },
+) {
+  return request<Record<string, any>>('/product/list/grouped', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
 /** 此处后端没有提供注释 GET /product/search */
 export async function productcontrollerSearchproducts(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
--- a/src/servers/api/typings.d.ts
+++ b/src/servers/api/typings.d.ts
@ -963,6 +963,7 @@ declare namespace API {
    orderId?: number;
    siteId?: number;
    externalOrderItemId?: string;
+    parentProductId?: number;
    productId?: number;
    name?: string;
    /** sku */
@ -993,6 +994,7 @@ declare namespace API {
    orderId?: number;
    siteId?: number;
    externalOrderItemId?: string;
+    parentProductId?: number;
    productId?: number;
    name?: string;
    /** sku */
@ -1227,6 +1229,25 @@ declare namespace API {
    id: number;
  };

+  type productcontrollerGetproductlistgroupedParams = {
+    /** 页码 */
+    page?: number;
+    /** 每页数量 */
+    per_page?: number;
+    /** 查询时间范围开始 */
+    after?: string;
+    /** 查询时间范围结束 */
+    before?: string;
+    /** 搜索关键词 */
+    search?: string;
+    /** 过滤条件对象 */
+    where?: any;
+    /** 排序对象,例如 { "sku": "desc" } */
+    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
+  };
+
  type productcontrollerGetproductlistParams = {
    /** 页码 */
    page?: number;
@ -1242,6 +1263,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
  };

  type productcontrollerGetproductsiteskusParams = {
@ -1784,6 +1807,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1802,6 +1827,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1820,6 +1847,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1838,6 +1867,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1856,6 +1887,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1874,6 +1907,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1892,6 +1927,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    customerId: number;
    siteId: number;
  };
@ -1916,6 +1953,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1938,6 +1977,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1971,6 +2012,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -1994,6 +2037,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -2012,6 +2057,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -2030,6 +2077,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -2053,6 +2102,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
    siteId: number;
  };

@ -3004,6 +3055,8 @@ declare namespace API {
    where?: any;
    /** 排序对象,例如 { "sku": "desc" } */
    orderBy?: any;
+    /** 分组字段,例如 "categoryId" */
+    groupBy?: string;
  };

  type UnifiedShippingLineDTO = {
Author	SHA1	Message	Date
tikkhun	d78b587035	refactor: 清理代码格式并移除未使用的BrandSpace组件 style: 统一字符串引号和代码缩进格式 fix: 修复订单同步日期范围参数格式 feat: 添加产品分组列表API接口	2026-01-20 17:20:41 +08:00
tikkhun	2ee8964bce	feat(产品): 添加产品分组功能页面实现产品按属性分组展示功能，支持按分类和属性筛选	2026-01-20 17:19:02 +08:00