From 8c82d181171f8ff06763998ea31fe616aaecbbcf Mon Sep 17 00:00:00 2001
From: zty <zty18395607196@gmail.com>
Date: Fri, 10 Jul 2026 03:30:36 -0400
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=9D=90=E6=96=99=E5=BA=93?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BE=9D=E6=8D=AE/=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=20+=20=E5=81=A5=E5=BA=B7=E6=A1=A3=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E4=B8=8E=E5=88=86=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VCShKevM5prWZhp1kk1iGh
---
 .../src/components/material-card/index.tsx    | 698 ++++++++++++++++++
 .../iapip-web/src/services/api/material.ts    |   1 +
 2 files changed, 699 insertions(+)
 create mode 100644 空气质量预测/源码/用户端/iapip-web/src/components/material-card/index.tsx

diff --git a/空气质量预测/源码/用户端/iapip-web/src/components/material-card/index.tsx b/空气质量预测/源码/用户端/iapip-web/src/components/material-card/index.tsx
new file mode 100644
index 0000000..6dfe4ec
--- /dev/null
+++ b/空气质量预测/源码/用户端/iapip-web/src/components/material-card/index.tsx
@@ -0,0 +1,698 @@
+import { DATA_TYPE } from '@/common/constants'
+import { ADMIN_TYPE, AnyObj, ECO_LEVEL, Material } from '@/common/types'
+import { searchParams } from '@/common/utils'
+import MaterialModalForm from '@/components/material-modal-form'
+import PageCard from '@/components/page-card'
+import api from '@/services/api'
+import {
+    ActionType,
+    LightFilter,
+    ProFormCascader,
+    ProFormSelect,
+    ProFormText,
+    ProTable,
+    QueryFilter
+} from '@ant-design/pro-components'
+import { Button, Form, InputNumber, Modal, Popconfirm, Select, Switch, Tag, message } from 'antd'
+import { useRef, useState } from 'react'
+import { useModel } from '@umijs/max'
+import ImportMaterialsModal from '../import-file-modal/materials'
+
+const MaterialCard: React.FC<{
+    title?: string
+    modal?: boolean
+    modalProps?: {
+        open?: boolean
+        onCancel?: () => void
+    }
+    defaultSelected?: Material[]
+    onAdd?: (addedMtrls?: Material[]) => void
+}> = ({ title, modal, modalProps, defaultSelected, onAdd }) => {
+    const [tab, setTab] = useState(DATA_TYPE.PUBLIC)
+    const tableRef = useRef<ActionType>()
+    const [filterForm] = Form.useForm()
+    const [filterConditions, setFilterConditions] = useState<AnyObj>()
+    const [details, setDetails] = useState<Partial<Material>>()
+    const [selected, setSelected] = useState<Material[] | undefined>()
+    // 材料排序依据（默认综合 Ypt 升序）与是否按健康档分组显示
+    const [sortKey, setSortKey] = useState<string>('ypt')
+    const [groupByTier, setGroupByTier] = useState<boolean>(false)
+    const { initialState } = useModel('@@initialState')
+    const cert = initialState?.cert
+    const isAdmin = !!cert?.is_admin
+    // 公共材料编辑权限：超管，或具备材料管理权限的管理员（与后端 authz 规则一致）
+    const canPubMtrlMgmt =
+        isAdmin &&
+        (cert?.type === ADMIN_TYPE.SUPER_ADMIN ||
+            (cert?.type === ADMIN_TYPE.ADMIN && cert?.authz_mtrl_mgmt === 1))
+    const pageDataRef = useRef<Material[]>([])
+    // 仅在「手动排序」视图下启用排序控件（避免在按其他字段排序时破坏 sort_order 语义）
+    const canSort = !modal && tab === DATA_TYPE.PUBLIC && isAdmin && (!filterConditions?.sort || filterConditions?.sort === 'sort_order')
+    // pageDataRef.current 为全部材料（按 sort_order 升序）。输入目标全局序号(1-based)直接定位：
+    // 把材料移到目标位置后，对全部材料按新顺序连续重编号(0,1,2,...)，保证全局顺序一致、不跨页错乱
+    const moveSortTo = async (material_id: string, targetPos: number) => {
+        const list = pageDataRef.current ?? []
+        const fromIdx = list.findIndex((m) => m.material_id === material_id)
+        if (fromIdx < 0) return
+        let toIdx = Math.floor(targetPos) - 1
+        if (Number.isNaN(toIdx)) return
+        if (toIdx < 0) toIdx = 0
+        if (toIdx >= list.length) toIdx = list.length - 1
+        if (toIdx === fromIdx) return
+        const arr = [...list]
+        const [moved] = arr.splice(fromIdx, 1)
+        arr.splice(toIdx, 0, moved)
+        const updates: { material_id: string; sort_order: number }[] = []
+        arr.forEach((m, i) => {
+            if ((m.sort_order ?? 0) !== i) {
+                updates.push({ material_id: m.material_id, sort_order: i })
+            }
+        })
+        if (!updates.length) return
+        try {
+            await Promise.all(updates.map((u) => api.material.updatePubSort(u)))
+            message.success('排序已更新')
+            await tableRef?.current?.reload?.()
+        } catch (err) {}
+    }
+    // 上下箭头：复用 moveSortTo，按全局位置上移/下移一格
+    const moveSort = async (material_id: string, dir: -1 | 1) => {
+        const list = pageDataRef.current ?? []
+        const idx = list.findIndex((m) => m.material_id === material_id)
+        if (idx < 0) return
+        const ni = idx + dir
+        if (ni < 0 || ni >= list.length) return
+        await moveSortTo(material_id, ni + 1)
+    }
+    // 取材料在全部数据中的全局序号(0-based)，用于排序输入框显示
+    const globalIndexOf = (material_id: string) => (pageDataRef.current ?? []).findIndex((m) => m.material_id === material_id)
+    const content = (
+        <PageCard
+            title={title}
+            defActTabKey={DATA_TYPE.PUBLIC}
+            tabItems={[
+                {
+                    key: DATA_TYPE.PUBLIC,
+                    label: '公共库'
+                },
+                {
+                    key: DATA_TYPE.PRIVATE,
+                    label: '自建库'
+                }
+            ]}
+            onTabChange={(key) => setTab(key as DATA_TYPE)}
+            extra={
+                !modal && tab === DATA_TYPE.PRIVATE
+                    ? [
+                          <ImportMaterialsModal
+                              key="import-modal"
+                              title="导入自建材料"
+                              trigger={<Button>导入材料</Button>}
+                              onSuccess={async () => {
+                                  await tableRef?.current?.reload?.()
+                              }}
+                          />,
+                          <MaterialModalForm
+                              key="create-modal-form"
+                              title="新建自建材料"
+                              displayDetails
+                              trigger={<Button type="primary">新建材料</Button>}
+                              onFinish={async (data) => {
+                                  try {
+                                      await api.material.createSelf(data)
+                                      message.success('新建成功')
+                                      await tableRef?.current?.reload?.()
+                                      return true
+                                  } catch (err) {
+                                      return false
+                                  }
+                              }}
+                          />
+                      ]
+                    : []
+            }
+            cardStyle={
+                modal
+                    ? {
+                          borderBottomWidth: 0
+                      }
+                    : undefined
+            }
+        >
+            <div className="flex mb-4">
+                <div style={{ width: 'calc(100% - 80px)' }}>
+                    <LightFilter form={filterForm} onFinish={async (data) => setFilterConditions(data)}>
+                        <ProFormText name="material_id" label="材料ID" />
+                        <ProFormText name="name" label="材料名称" />
+                        {/* 公共库/自建库改由顶部 tab 切换，此处不再需要「类型」筛选 */}
+                        <ProFormCascader
+                            name="category"
+                            label="材料类别"
+                            fieldProps={{
+                                placeholder: '请选择大类/子类（可多选跨类）',
+                                multiple: true,
+                                showSearch: true,
+                                changeOnSelect: true,
+                                maxTagCount: 'responsive'
+                            }}
+                            request={async () => {
+                                const cats = await api.config.getMtrlCatList()
+                                return cats.map((item) => ({
+                                    value: item.first_category,
+                                    label: item.first_category,
+                                    children: item.second_categories.map((c) => ({
+                                        value: c.second_category,
+                                        label: c.second_category
+                                    }))
+                                }))
+                            }}
+                            transform={(val) => ({ category: (val as string[][])?.map((v: string[]) => v.join('/')) ?? undefined })}
+                        />
+                        <ProFormText name="brand" label="材料品牌" />
+                        <ProFormText name="factory" label="材料厂家" />
+                        <ProFormText name="spec" label="材料规格" />
+                        <ProFormSelect
+                            name="eco_level"
+                            label="环保级别"
+                            options={[{ value: ECO_LEVEL.E0 }, { value: ECO_LEVEL.E1 }, { value: ECO_LEVEL.E2 }]}
+                            mode="multiple"
+                        />
+                        <ProFormSelect
+                            name="health_level"
+                            label="健康等级"
+                            options={[{ value: 'A' }, { value: 'B' }, { value: 'C' }]}
+                            mode="multiple"
+                        />
+                        {modal || tab === DATA_TYPE.PUBLIC ? (
+                            <ProFormSelect
+                                name="collected"
+                                label="收藏"
+                                options={[
+                                    { label: '已收藏', value: 1 },
+                                    { label: '未收藏', value: 0 }
+                                ]}
+                            />
+                        ) : (
+                            <></>
+                        )}
+                        {isAdmin && (
+                            <ProFormSelect
+                                name="sort"
+                                label="排序"
+                                options={[
+                                    {
+                                        label: '手动排序',
+                                        value: 'sort_order'
+                                    },
+                                    {
+                                        label: '材料类别A-Z',
+                                        value: 'category'
+                                    },
+                                    {
+                                        label: '最近更新时间由近到远',
+                                        value: 'updated_at'
+                                    },
+                                    {
+                                        label: '甲醛释放量由低到高',
+                                        value: 'methanal_be_area'
+                                    },
+                                    {
+                                        label: 'TVOC释放量由低到高',
+                                        value: 'tvoc_be_area'
+                                    },
+                                    {
+                                        label: '苯释放量由低到高',
+                                        value: 'benzene_be_area'
+                                    },
+                                    {
+                                        label: '甲苯释放量由低到高',
+                                        value: 'toluene_be_area'
+                                    },
+                                    {
+                                        label: '二甲苯释放量由低到高',
+                                        value: 'p_xylene_be_area'
+                                    }
+                                ]}
+                            />
+                        )}
+                    </LightFilter>
+                </div>
+                <div style={{ width: 80 }} className="flex justify-center">
+                    <Button
+                        key="reset"
+                        onClick={() => {
+                            setFilterConditions(undefined)
+                            filterForm.resetFields()
+                        }}
+                    >
+                        重置
+                    </Button>
+                </div>
+            </div>
+            <div className="flex items-center gap-4 mb-4">
+                <span>
+                    排序依据{' '}
+                    <Select
+                        size="small"
+                        style={{ width: 160 }}
+                        value={sortKey}
+                        onChange={(v) => {
+                            setSortKey(v)
+                            tableRef.current?.reload()
+                        }}
+                        options={[
+                            { value: 'ypt', label: '综合 Ypt' },
+                            { value: 'methanal_be_area', label: '甲醛 Yp' },
+                            { value: 'tvoc_be_area', label: 'TVOC Yp' },
+                            { value: 'benzene_be_area', label: '苯 Yp' },
+                            { value: 'toluene_be_area', label: '甲苯 Yp' },
+                            { value: 'p_xylene_be_area', label: '二甲苯 Yp' }
+                        ]}
+                    />
+                </span>
+                <span>
+                    按健康等级分组{' '}
+                    <Switch
+                        size="small"
+                        checked={groupByTier}
+                        onChange={(c) => {
+                            setGroupByTier(c)
+                            tableRef.current?.reload()
+                        }}
+                    />
+                </span>
+            </div>
+            <ProTable<Material>
+                cardProps={{
+                    bodyStyle: {
+                        padding: 0
+                    }
+                }}
+                size="small"
+                search={false}
+                options={false}
+                actionRef={tableRef}
+                rowSelection={
+                    modal
+                        ? {
+                              type: 'checkbox',
+                              hideSelectAll: true,
+                              selectedRowKeys: selected?.map((m) => m.material_id),
+                              onSelect: (mtrl, isSelected) => {
+                                  setSelected((pre) => {
+                                      if (isSelected) {
+                                          if ((pre ?? []).find((m) => m.material_id === mtrl.material_id)) return pre
+                                          return [...(pre ?? []), mtrl]
+                                      } else {
+                                          return (pre ?? []).filter((m) => m.material_id !== mtrl.material_id)
+                                      }
+                                  })
+                              },
+                              getCheckboxProps: (mtrl) => ({
+                                  disabled:
+                                      defaultSelected &&
+                                      defaultSelected.findIndex((m) => m.material_id === mtrl.material_id) !== -1
+                              })
+                          }
+                        : false
+                }
+                onRow={(mtrl) => ({
+                    onClick: () => {
+                        if (!defaultSelected?.find((m) => m.material_id === mtrl.material_id)) {
+                            setSelected((pre) => {
+                                if (pre) {
+                                    if (pre.find((m) => m.material_id === mtrl.material_id)) {
+                                        return pre.filter((m) => m.material_id !== mtrl.material_id)
+                                    } else {
+                                        const nxt = [...pre]
+                                        nxt.push(mtrl)
+                                        return nxt
+                                    }
+                                } else {
+                                    return [mtrl]
+                                }
+                            })
+                        }
+                    }
+                })}
+                scroll={modal ? { y: 'calc(100vh - 400px)' } : undefined}
+                params={{ type: tab, conditions: filterConditions, sortKey, groupByTier }}
+                columns={[
+                    {
+                        title: '材料ID',
+                        dataIndex: 'material_id',
+                        width: 120,
+                        align: 'center'
+                    },
+                    {
+                        title: '材料名称',
+                        dataIndex: 'name',
+                        align: 'center',
+                        render: (_, m) => {
+                            const tierHead = (m as Material & { __tierHead?: string }).__tierHead
+                            return (
+                                <>
+                                    {tierHead && (
+                                        <div style={{ fontWeight: 600, color: '#888', margin: '4px 0' }}>
+                                            {'档位 ' + tierHead}
+                                        </div>
+                                    )}
+                                    <span>{m.name}</span>
+                                </>
+                            )
+                        }
+                    },
+                    {
+                        title: '类型',
+                        dataIndex: 'type',
+                        align: 'center',
+                        width: 80,
+                        render: (_, { material_id }) => <Tag>{material_id.startsWith('P') ? '公共' : '自建'}</Tag>,
+                        hideInTable: !modal
+                    },
+                    {
+                        title: '材料类别',
+                        dataIndex: 'category',
+                        align: 'center'
+                    },
+                    {
+                        title: '材料品牌',
+                        dataIndex: 'brand',
+                        align: 'center'
+                    },
+                    {
+                        title: '材料厂家',
+                        dataIndex: 'factory',
+                        align: 'center'
+                    },
+                    {
+                        title: '材料规格',
+                        dataIndex: 'spec',
+                        align: 'center'
+                    },
+                    {
+                        title: '环保等级',
+                        dataIndex: 'eco_level',
+                        align: 'center',
+                        width: 90,
+                        render: (_, { eco_level }) => (eco_level ? <Tag>{eco_level}</Tag> : '-')
+                    },
+                    {
+                        title: '健康等级',
+                        dataIndex: 'health_level',
+                        align: 'center',
+                        width: 90,
+                        render: (_, { health_level }) => (health_level ? <Tag color={health_level === 'A' ? 'green' : health_level === 'B' ? 'orange' : 'red'}>{health_level}</Tag> : '-')
+                    },
+                    {
+                        title: '健康档',
+                        dataIndex: 'health_tier',
+                        align: 'center',
+                        width: 70,
+                        render: (_, m) => {
+                            const color =
+                                m.health_tier === 'A' ? 'green' : m.health_tier === 'B' ? 'gold' : m.health_tier === 'C' ? 'red' : 'default'
+                            return <Tag color={color}>{m.health_tier ?? '—'}</Tag>
+                        }
+                    },
+                    {
+                        title: '最近更新时间',
+                        dataIndex: 'updated_at',
+                        align: 'center',
+                        width: 160,
+                        renderText: (dt) => new Date(dt).toLocaleString('zh-CN'),
+                        search: false
+                    },
+                    {
+                        title: '操作',
+                        valueType: 'option',
+                        align: 'center',
+                        width: !modal && tab === DATA_TYPE.PRIVATE ? 100 : canSort ? 180 : 70,
+                        render: (_, item, idx) => (
+                            <div className="flex justify-center items-center space-x-2">
+                                <Button
+                                    type="link"
+                                    style={{ padding: 0 }}
+                                    onClick={(e) => {
+                                        setDetails(item)
+                                        e.stopPropagation()
+                                    }}
+                                >
+                                    详情
+                                </Button>
+                                {canSort ? (() => {
+                                    const gIdx = globalIndexOf(item.material_id)
+                                    const total = pageDataRef.current?.length ?? 0
+                                    return (
+                                        <>
+                                            <InputNumber
+                                                key={`so-${item.material_id}-${gIdx}`}
+                                                size="small"
+                                                min={1}
+                                                max={total || 1}
+                                                defaultValue={gIdx + 1}
+                                                style={{ width: 56 }}
+                                                onClick={(e) => e.stopPropagation()}
+                                                onPressEnter={(e) => {
+                                                    const v = Number((e.target as HTMLInputElement).value)
+                                                    if (!Number.isNaN(v)) moveSortTo(item.material_id, v)
+                                                    e.stopPropagation()
+                                                }}
+                                                onBlur={(e) => {
+                                                    const v = Number((e.target as HTMLInputElement).value)
+                                                    if (!Number.isNaN(v)) moveSortTo(item.material_id, v)
+                                                }}
+                                            />
+                                            <Button
+                                                type="link"
+                                                style={{ padding: 0 }}
+                                                disabled={gIdx <= 0}
+                                                onClick={(e) => {
+                                                    moveSort(item.material_id, -1)
+                                                    e.stopPropagation()
+                                                }}
+                                            >
+                                                ↑
+                                            </Button>
+                                            <Button
+                                                type="link"
+                                                style={{ padding: 0 }}
+                                                disabled={gIdx >= total - 1}
+                                                onClick={(e) => {
+                                                    moveSort(item.material_id, 1)
+                                                    e.stopPropagation()
+                                                }}
+                                            >
+                                                ↓
+                                            </Button>
+                                        </>
+                                    )
+                                })() : (
+                                    ''
+                                )}
+                                {!modal && tab === DATA_TYPE.PRIVATE ? (
+                                    <Popconfirm
+                                        title="确定删除该材料吗?"
+                                        okText="确定"
+                                        cancelText="取消"
+                                        onConfirm={async (e) => {
+                                            try {
+                                                await api.material.removeSelf({
+                                                    material_id: item.material_id
+                                                })
+                                                message.success('删除成功')
+                                                await tableRef?.current?.reload?.()
+                                                e?.stopPropagation()
+                                            } catch (err) {}
+                                        }}
+                                    >
+                                        <Button type="link" style={{ padding: 0 }}>
+                                            删除
+                                        </Button>
+                                    </Popconfirm>
+                                ) : (
+                                    ''
+                                )}
+                            </div>
+                        )
+                    },
+                    {
+                        title: '收藏',
+                        valueType: 'option',
+                        align: 'center',
+                        width: 70,
+                        render: (_, { material_id, collected }) => (
+                            <Button
+                                type="link"
+                                style={{ padding: 0 }}
+                                onClick={async (e) => {
+                                    try {
+                                        const c = collected ?? 0 ? 0 : 1
+                                        await api.material.collectPub({ material_id, c })
+                                        message.success(c ? '收藏成功' : '取消成功')
+                                        await tableRef.current?.reload?.()
+                                        e.stopPropagation()
+                                    } catch (err) {}
+                                }}
+                            >
+                                {collected ? '取消' : '收藏'}
+                            </Button>
+                        ),
+                        hideInTable: modal || tab === DATA_TYPE.PRIVATE
+                    }
+                ]}
+                request={async ({ type, conditions, sortKey: skParam, groupByTier: gbtParam, ...other }) => {
+                    // 弹窗与独立页面统一：都按当前 tab(type) 分别查公共库或自建库
+                    try {
+                        const { sort, ...otherConditions } = conditions ?? {}
+                        const sortByCategory = sort === 'category'
+                        const data = await api.material.search(
+                            type,
+                            searchParams(
+                                {
+                                    ...otherConditions,
+                                    ...other,
+                                    display: 1,
+                                    with_cltrs: 1,
+                                    // 顶部「排序依据」控件的默认值（如 ypt 升序）；若下方筛选区的「排序」被管理员显式选中，
+                                    // 下面的第三个参数会覆盖此处的 sort_key/sort_val
+                                    sort_key: skParam,
+                                    sort_val: 'asc',
+                                    group_by_tier: gbtParam ? 1 : 0
+                                },
+                                false,
+                                !sortByCategory && sort
+                                    ? {
+                                          [sort]: sort !== 'updated_at' ? 'ascend' : 'descend'
+                                      }
+                                    : undefined
+                            )
+                        )
+                        pageDataRef.current = data
+                        if (sortByCategory) {
+                            data.sort((a, b) => (a.category ?? '').localeCompare(b.category ?? ''))
+                        }
+                        if (gbtParam) {
+                            // 分组开时后端已按档排序；为每档第一条打标，供「材料名称」列渲染分区小标题
+                            let last: string | null | undefined = undefined
+                            data.forEach((m) => {
+                                if (m.health_tier !== last) {
+                                    ;(m as Material & { __tierHead?: string }).__tierHead = m.health_tier ?? '数据不全'
+                                    last = m.health_tier
+                                }
+                            })
+                        }
+                        return {
+                            success: true,
+                            data
+                        }
+                    } catch (err) {
+                        return {
+                            success: false
+                        }
+                    }
+                }}
+                rowKey={(data) => data.material_id}
+                pagination={
+                    !modal
+                        ? {
+                              position: ['bottomRight'],
+                              defaultPageSize: 10,
+                              showSizeChanger: true
+                          }
+                        : false
+                }
+            />
+            <MaterialModalForm
+                title={
+                    !modal && tab === DATA_TYPE.PUBLIC && canPubMtrlMgmt
+                        ? '编辑公共材料'
+                        : `${
+                              !modal
+                                  ? tab === DATA_TYPE.PUBLIC
+                                      ? '公共'
+                                      : '自建'
+                                  : details?.material_id?.startsWith('P')
+                                    ? '公共'
+                                    : '自建'
+                          }材料详情`
+                }
+                initialValues={details}
+                displayId
+                displayDetails={
+                    !modal
+                        ? tab === DATA_TYPE.PRIVATE || (tab === DATA_TYPE.PUBLIC && canPubMtrlMgmt)
+                        : !details?.material_id?.startsWith('P')
+                }
+                readonly={modal || (tab === DATA_TYPE.PUBLIC && !canPubMtrlMgmt)}
+                open={details !== undefined}
+                submitText="保存"
+                onFinish={
+                    !modal && (tab === DATA_TYPE.PRIVATE || (tab === DATA_TYPE.PUBLIC && canPubMtrlMgmt))
+                        ? async (values) => {
+                              const { material_id, ...data } = values
+                              // 公共材料无 unit 字段，剔除以避免后端校验失败
+                              delete (data as AnyObj).unit
+                              try {
+                                  if (tab === DATA_TYPE.PUBLIC) {
+                                      await api.material.patchPub({ material_id }, data)
+                                  } else {
+                                      await api.material.patchSelf({ material_id }, data)
+                                  }
+                                  message.success('修改成功')
+                                  await tableRef?.current?.reload?.()
+                                  setDetails(undefined)
+                                  return true
+                              } catch (err) {
+                                  return false
+                              }
+                          }
+                        : undefined
+                }
+                onCancel={() => setDetails(undefined)}
+            />
+        </PageCard>
+    )
+    return !modal ? (
+        content
+    ) : (
+        <Modal
+            style={{
+                top: 65
+            }}
+            styles={{
+                content: {
+                    padding: 0
+                },
+                footer: {
+                    margin: 0
+                }
+            }}
+            width="calc(100% - 100px)"
+            footer={
+                <div className="space-x-4 pb-4 pr-[20px]">
+                    <Button style={{ width: 64 }} onClick={modalProps?.onCancel}>
+                        取消
+                    </Button>
+                    <Button type="primary" style={{ width: 64 }} onClick={() => onAdd?.(selected)}>
+                        添加
+                    </Button>
+                </div>
+            }
+            maskClosable={false}
+            destroyOnClose
+            open={modalProps?.open}
+            afterClose={() => {
+                setTab(DATA_TYPE.PUBLIC)
+                setFilterConditions(undefined)
+                filterForm.resetFields()
+                setSelected(undefined)
+            }}
+            onCancel={modalProps?.onCancel}
+        >
+            {content}
+        </Modal>
+    )
+}
+
+export default MaterialCard
diff --git a/空气质量预测/源码/用户端/iapip-web/src/services/api/material.ts b/空气质量预测/源码/用户端/iapip-web/src/services/api/material.ts
index 665df4d..edd04ef 100644
--- a/空气质量预测/源码/用户端/iapip-web/src/services/api/material.ts
+++ b/空气质量预测/源码/用户端/iapip-web/src/services/api/material.ts
@@ -211,6 +211,7 @@ export async function search(
         with_cltrs?: number
         sort_key?: Arrayable<string>
         sort_val?: Arrayable<string>
+        group_by_tier?: 0 | 1
         page?: number
         size?: number
     },