+ 语言设置：
+ {preset.locale || '未设置'}
+
+
+ 权限列表：
+ {preset.permissions?.join(', ') || '未设置'}
+
+
+ API 接口：
+ {preset.apis?.getUserList || '未设置'}
+
+
+ 状态枚举：
+ {JSON.stringify(preset.enums?.status) || '未设置'}
+
+
+ 特性配置：
+ debug: {preset.features?.debug?.toString() || '未设置'}, profile: {preset.features?.profile || '未设置'}
+
+
+ 当前主题色：
+
+ {primaryColor}
+
+
+ 主色按钮：
+
+
+
+ 链接文字：
+
+ 链接文字
+
+
+
+ Alert 组件（使用主题色）：
+
+
+
+
+
+
+ 用户名：
+ {userName || '未设置'}
+
+
+ 用户数量：
+ {userCount || 0}
+
+
+ 用户信息：
+
+
+
+ 用户ID：10001
+ 用户名：张三
+ 部门：技术部
+
+ 系统配置：
+
+
+
+ 主题色：#4096ff
+ 语言：zh-CN
+ 环境：production
+
+ 用户名：
+ {userName || '未设置'}
+
+
+ 用户数量：
+ {userCount || 0}
+
+
+ 用户信息：
+
+
+
+ 用户ID：10001
+ 用户名：张三
+ 部门：技术部
+
+ 系统配置：
+
+
+
+ 主题色：#4096ff
+ 语言：zh-CN
+ 环境：production
+
+ 语言设置：
+ {preset.locale || '未设置'}
+
+
+ 权限列表：
+ {preset.permissions?.join(', ') || '未设置'}
+
+
+ API 接口：
+ {preset.apis?.getUserList || '未设置'}
+
+
+ 状态枚举：
+ {JSON.stringify(preset.enums?.status) || '未设置'}
+
+
+ 特性配置：
+ debug: {preset.features?.debug?.toString() || '未设置'}, profile: {preset.features?.profile || '未设置'}
+
+
+ 当前主题色：
+
+ {primaryColor}
+
+
+ 主色按钮：
+
+
+
+ 链接文字：
+
+ 链接文字
+
+
+
+ Alert 组件（使用主题色）：
+
+
+
+
+
+
+ 用户名：
+
+
+ 密码：
+
+
+ API 文档：
+
+
+ 快速开始：
+
+
+ 个人信息
+
+
+ 安全设置
+
+
+ 通知设置
+
+
+ 隐私设置
+
+
+ 默认样式：
+
+
+ 蓝色自定义样式：
+
+
+ 警告样式：
+
+
+ 错误样式：
+
+
+ 自定义间距：
+ （通过 style 属性添加边距）
+
+ 1. 通过 className 属性可以自定义 HelperGuide 的样式，样式应用在外层容器上。
+ 2. 通过 style 属性可以添加行内样式，如调整间距等。
+ 3. 自定义样式可以覆盖组件的默认背景色、边框、文字颜色等。
+
+ 用户名：
+
+
+ 密码：
+
+
+ 默认样式：
+
+
+ 蓝色自定义样式：
+
+
+ 警告样式：
+
+
+ 错误样式：
+
+
+ 自定义间距：
+ （通过 style 属性添加边距）
+
+ 1. 通过 className 属性可以自定义 HelperGuide 的样式，样式应用在外层容器上。
+ 2. 通过 style 属性可以添加行内样式，如调整间距等。
+ 3. 自定义样式可以覆盖组件的默认背景色、边框、文字颜色等。
+
+ API 文档：
+
+
+ 快速开始：
+
+
+ 个人信息
+
+
+ 安全设置
+
+
+ 通知设置
+
+
+ 隐私设置
+
+
-
+
{
- setValue(value);
- }}
- >
- {({ appendHistory, openHistory }) => (
- {
- setValue(e.target.value);
+
+
+ {
+ console.log('选中历史记录：', value, item);
}}
- onFocus={openHistory}
- onSearch={(value) => {
- appendHistory({
- value,
- label: value,
- });
- }}
- />
- )}
-
+ >
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+
+
+
+ 基础用法：搜索框获取焦点时显示历史记录，点击历史记录标签或回车搜索后，
+ 该记录会被保存到历史记录中。
+
+
+ 历史记录使用 localStorage 持久化存储，刷新页面后仍然可用。
+
+
+
+
);
};
@@ -48,7 +78,609 @@ render(
+
+
+
+
+
+
+
+ 通过 maxLength、label 等属性可以自定义历史记录的配置。
+ maxLength 为 0 时不限制保存数量，但建议设置合理的最大值以避免占用过多存储空间。
+
+
+
+ );
+};
+
+render(
+
+
+
+
+
+
+
+ HistoryStore 可以与 Select 组件结合使用，记录用户的选择历史。
+ 通过 storeName 区分不同的历史记录场景，互不干扰。
+ 使用 onDropdownVisibleChange 控制下拉框的打开状态，实现历史记录和选项列表的切换。
+
+
+
+ );
+};
+
+render(
+
+
+
+
+
+
+
+ 通过不同的 storeName 可以创建多个独立的历史记录存储，每个存储互不干扰。
+ 这样可以在同一个页面中使用多个 HistoryStore 组件，分别记录不同操作的历史记录。
+ 常用于多个搜索框、多个筛选器等场景。
+
+
+
+ );
+};
+
+render(待处理 ,
+ processing: 处理中 ,
+ completed: 已完成 ,
+ cancelled: 已取消
+ };
+ return statusMap[status] || status;
+ }
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ key: 'createTime'
+ }
+ ];
+
+ const mockData = [
+ {
+ key: '1',
+ orderNo: 'ORD202401001',
+ customerName: '张三',
+ amount: 1200.00,
+ status: 'completed',
+ createTime: '2024-01-15 10:30:00'
+ },
+ {
+ key: '2',
+ orderNo: 'ORD202401002',
+ customerName: '李四',
+ amount: 3500.00,
+ status: 'processing',
+ createTime: '2024-01-15 11:20:00'
+ },
+ {
+ key: '3',
+ orderNo: 'ORD202401003',
+ customerName: '王五',
+ amount: 890.00,
+ status: 'pending',
+ createTime: '2024-01-15 14:45:00'
+ }
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 真实业务场景示例：在订单管理页面中，使用两个独立的 HistoryStore 组件，
+ 分别记录订单搜索历史和状态筛选历史。这样用户可以快速选择之前的搜索条件，
+ 提高操作效率。通过不同的 storeName 确保两个历史记录互不干扰。
+
+
+
+ );
+};
+
+render( {
- setValue(value);
- }}
- >
- {({ appendHistory, openHistory }) => (
- {
- setValue(e.target.value);
+
+
+ {
+ console.log('选中历史记录：', value, item);
}}
- onFocus={openHistory}
- onSearch={(value) => {
- appendHistory({
- value,
- label: value,
- });
- }}
- />
- )}
-
+ >
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+
+
+
+ 基础用法：搜索框获取焦点时显示历史记录，点击历史记录标签或回车搜索后，
+ 该记录会被保存到历史记录中。
+
+
+ 历史记录使用 localStorage 持久化存储，刷新页面后仍然可用。
+
+
+
+
);
};
diff --git a/src/components/HistoryStore/doc/custom-config.js b/src/components/HistoryStore/doc/custom-config.js
new file mode 100644
index 00000000..da76730e
--- /dev/null
+++ b/src/components/HistoryStore/doc/custom-config.js
@@ -0,0 +1,105 @@
+const { default: HistoryStore } = _HistoryStore;
+const { Input, Space, Card, Typography, Divider } = antd;
+
+const { Text } = Typography;
+
+const CustomConfigExample = () => {
+ return (
+
+
+
+
+
+
+
+
+ 通过 maxLength、label 等属性可以自定义历史记录的配置。
+ maxLength 为 0 时不限制保存数量，但建议设置合理的最大值以避免占用过多存储空间。
+
+
+
+ );
+};
+
+render(
+
+
+
+
+
+
+
+ 通过不同的 storeName 可以创建多个独立的历史记录存储，每个存储互不干扰。
+ 这样可以在同一个页面中使用多个 HistoryStore 组件，分别记录不同操作的历史记录。
+ 常用于多个搜索框、多个筛选器等场景。
+
+
+
+ );
+};
+
+render(待处理 ,
+ processing: 处理中 ,
+ completed: 已完成 ,
+ cancelled: 已取消
+ };
+ return statusMap[status] || status;
+ }
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ key: 'createTime'
+ }
+ ];
+
+ const mockData = [
+ {
+ key: '1',
+ orderNo: 'ORD202401001',
+ customerName: '张三',
+ amount: 1200.00,
+ status: 'completed',
+ createTime: '2024-01-15 10:30:00'
+ },
+ {
+ key: '2',
+ orderNo: 'ORD202401002',
+ customerName: '李四',
+ amount: 3500.00,
+ status: 'processing',
+ createTime: '2024-01-15 11:20:00'
+ },
+ {
+ key: '3',
+ orderNo: 'ORD202401003',
+ customerName: '王五',
+ amount: 890.00,
+ status: 'pending',
+ createTime: '2024-01-15 14:45:00'
+ }
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ 真实业务场景示例：在订单管理页面中，使用两个独立的 HistoryStore 组件，
+ 分别记录订单搜索历史和状态筛选历史。这样用户可以快速选择之前的搜索条件，
+ 提高操作效率。通过不同的 storeName 确保两个历史记录互不干扰。
+
+
+
+ );
+};
+
+render(
+
+
+
+
+
+
+
+ HistoryStore 可以与 Select 组件结合使用，记录用户的选择历史。
+ 通过 storeName 区分不同的历史记录场景，互不干扰。
+ 使用 onDropdownVisibleChange 控制下拉框的打开状态，实现历史记录和选项列表的切换。
+
+
+
+ );
+};
+
+render(
-
-
- {
-
- {({ list }) => {
- return (
-
- {list.map(({ name, font_class }) => {
- return (
-
-
- );
- })}
-
- );
- }}
-
- }
-
- );
+ modules: ["components-iconfont:Font"],
+})(({remoteModules}) => {
+ const [Font] = remoteModules;
+ const [value, setValue] = useState(30);
+ return (
+
+
+
+ {
+
+ {({list}) => {
+ return (
+
+ {list.map(({name, font_class}) => {
+ return (
+
+
+
+ );
+ })}
+
+ );
+ }}
+
+ }
+
+ );
});
-render(
-
-
- {
-
- {({ list }) => {
- return (
-
- {list.map(({ name, font_class }) => {
- return (
-
-
- );
- })}
-
- );
- }}
-
- }
-
- );
-});
-
-render(
-
-
-
- {({ list }) => (
-
- {list.map(({ name }) => {
- return (
-
-
- );
- })}
-
- )}
-
-
- );
-});
-
-render(
+
+
+
+
+
+
+
+
+
+
+ );
};
-render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+render(
+
+
+ 点击图片查看大图：
+
+ handleImageClick('https://picsum.photos/seed/product1/600/600.jpg')}
+ alt="产品图片1"
+ />
+ handleImageClick('https://picsum.photos/seed/product2/600/600.jpg')}
+ alt="产品图片2"
+ />
+ handleImageClick('https://picsum.photos/seed/product3/600/600.jpg')}
+ alt="产品图片3"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 关闭
+
+ ]}
+ width={700}
+ onCancel={handlePreviewClose}
+ >
+
+
+ );
+};
+
+render(
+
+
+
+
+
+ }
+ />
+
+
+ )}
+ />
+
+
+
+ 默认配置（最多5条，标题"最近搜索"）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 自定义最大数量（最多10条）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 自定义标题（"搜索历史"）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 不限制数量（maxLength={0}）：
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 部门选择：
+
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 城市选择：
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 用户搜索（storeName: user_search）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 订单搜索（storeName: order_search）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 部门筛选（storeName: department_filter）：
+
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 状态筛选（storeName: status_filter）：
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 订单搜索：
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ setFilters({ ...filters, keyword: value });
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+
+ 状态：
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+
+
+
+
+ 当前筛选条件：{Object.keys(filters).length > 0 ? JSON.stringify(filters) : '无'}
+
+
+
+
+ 默认配置（最多5条，标题"最近搜索"）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 自定义最大数量（最多10条）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 自定义标题（"搜索历史"）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 不限制数量（maxLength={0}）：
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 用户搜索（storeName: user_search）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 订单搜索（storeName: order_search）：
+
+
+
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+ 部门筛选（storeName: department_filter）：
+
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 状态筛选（storeName: status_filter）：
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 订单搜索：
+
+ {({ appendHistory, openHistory }) => (
+ {
+ if (value) {
+ setFilters({ ...filters, keyword: value });
+ appendHistory({ value, label: value });
+ }
+ }}
+ />
+ )}
+
+
+
+
+ 状态：
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+
+
+
+
+ 当前筛选条件：{Object.keys(filters).length > 0 ? JSON.stringify(filters) : '无'}
+
+
+
+
+ 部门选择：
+
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+
+ 城市选择：
+
+
+
+ {({ appendHistory, openHistory, close, open }) => (
+
+
+ 调整大小:
- {value}px
- {name}
- 调整大小:
+ {value}px
+ {name}
+ 调整大小:
- {value}px
- {name}
- 调整大小:
- {value}px
-
+ 通过 src 属性加载图片：
+
+
+
+
+ 通过 URL 加载网络图片：
+
+
+
+ 1. Image 组件通过 src 属性直接加载图片URL。
+ 2. 支持本地图片和网络图片加载。
+ 3. 可以通过 style 属性设置图片大小。
+ 4. 自动处理加载状态和错误状态。
+
+
+ );
+
+ const customError = (
+
+
+ );
+
+ return (
+
+
+ 默认加载状态:
+
+
+ 自定义加载状态:
+
+
+ 默认错误状态:
+
+
+ 自定义错误状态:
+
+ console.log('点击了用户头像')}
+ style={{ cursor: 'pointer' }}
+ alt="用户头像"
+ />
+
+ 用户头像
+
+ console.log('点击了默认女性头像')}
+ style={{ cursor: 'pointer' }}
+ />
+
+ 默认女性头像
+ 1. Image 和 Image.Avatar 组件都支持 onClick 事件，可以添加交互功能。
+ 2. 结合 Modal 组件可以实现图片预览功能。
+ 3. 通过设置 cursor: 'pointer' 样式可以提示用户图片是可点击的。
+
+ 
+
+ - (
+
+ {user.name}
+
+ {user.department}
+
+
+ }
+ description={user.position}
+ />
+ - (
+
-
+
- 用户信息卡片中的头像展示，支持图片头像和默认性别图标头像 +
- 商品展示列表中的图片展示，支持加载状态和错误处理 +
- 结合其他组件（List、Card、Tag等）实现完整的功能页面 +
+ 通过 src 属性加载图片：
+
+
+
+
+ 通过 URL 加载网络图片：
+
+
+
+ 1. Image 组件通过 src 属性直接加载图片URL。
+ 2. 支持本地图片和网络图片加载。
+ 3. 可以通过 style 属性设置图片大小。
+ 4. 自动处理加载状态和错误状态。
+
+
+ );
+
+ const customError = (
+
+
+ );
+
+ return (
+
+
+ 默认加载状态:
+
+
+ 自定义加载状态:
+
+
+ 默认错误状态:
+
+
+ 自定义错误状态:
+
+ console.log('点击了用户头像')}
+ style={{ cursor: 'pointer' }}
+ alt="用户头像"
+ />
+
+ 用户头像
+
+ console.log('点击了默认女性头像')}
+ style={{ cursor: 'pointer' }}
+ />
+
+ 默认女性头像
+ 1. Image 和 Image.Avatar 组件都支持 onClick 事件，可以添加交互功能。
+ 2. 结合 Modal 组件可以实现图片预览功能。
+ 3. 通过设置 cursor: 'pointer' 样式可以提示用户图片是可点击的。
+
+
+
+ - (
+
+ {user.name}
+
+ {user.department}
+
+
+ }
+ description={user.position}
+ />
+ - (
+
-
+
- 用户信息卡片中的头像展示，支持图片头像和默认性别图标头像 +
- 商品展示列表中的图片展示，支持加载状态和错误处理 +
- 结合其他组件（List、Card、Tag等）实现完整的功能页面 +
+ 固定到顶部（offsetTop: 100）：
+
+
+
+ setFixed(fixed)}>
+
+
+
+ 我会在距离顶部 100px 时固定
+ {fixed && ' (已固定)'}
+
+
+ 不固定（isFixed: false）：
+
+
+
+
+
+
+ 我不会被固定
+
+
+ （向下滚动查看 Affix 固定效果）
+
+
+
)}
+ />
+ 数据统计：共 {tableData?.pageData?.length || 0} 条记录
+
+ 固定到顶部（offsetTop: 100）：
+
+
+
+ setFixed(fixed)}>
+
+
+
+ 我会在距离顶部 100px 时固定
+ {fixed && ' (已固定)'}
+
+
+ 不固定（isFixed: false）：
+
+
+
+
+
+
+ 我不会被固定
+
+
+ （向下滚动查看 Affix 固定效果）
+
+
+
)}
+ />
+ 数据统计：共 {tableData?.pageData?.length || 0} 条记录
+
-
+// 无图标菜单示例
+const NoIconMenuExample = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 这是一个基础弹窗的内容
+弹窗支持确认和取消操作
+这是一个{size}尺寸的弹窗
+ {size === "large" && ( +
+
+ )}
+ 大号弹窗可以容纳更多内容
+适合展示复杂的表单或数据
+可以根据实际需求选择合适的尺寸
+内容会根据弹窗大小自动调整布局
+点击确认按钮后，将执行异步操作
+在操作完成前，确认按钮将显示为加载状态
+操作完成后，弹窗将自动关闭
+这个弹窗有自定义的底部按钮
+每个按钮都可以有自己的点击处理逻辑
+
+
,
+ onConfirm: () => {
+ message.success("确认操作");
+ },
+ });
+ };
+
+ return (
+ 这是通过 useModal Hook 命令式打开的弹窗
+无需管理弹窗的显示状态
+适合在事件处理中直接使用
+
+
+ );
+ }}
+ onConfirm={() => {
+ message.success("操作成功");
+ setOpen(false);
+ }}
+ >
+ {({ decoratorData }) => (
+
+
+
+
+
+ {loading ? (
+ 这是通过 withDecorator 添加的外部装饰内容
+
+ 加载中，请稍候...
+
+ ) : (
+ render({
+ decoratorData: { loading, message: "装饰器传递的数据" }
+ })
+ )}
+
+
+ )}
+ 这是弹窗的主体内容
+从装饰器接收的数据: {JSON.stringify(decoratorData)}
+
+
+
+
+ );
+
+ return (
+ 浏览量: {info.views}
+ 点赞数: {info.likes}
+
+ 这是弹窗的主体内容
+右侧区域显示了额外的信息
+右侧区域通常用于显示辅助信息或操作
+
+
+ {render()}
+
+ );
+ },
+ children: () => (
+
+ {data ? (
+
+ ) : (
+
+ ),
+ footerButtons: [
+ {
+ children: '刷新',
+ onClick: () => {
+ if (data) {
+ setData([...data]);
+ message.success("数据已刷新");
+ }
+ },
+ },
+ {
+ children: '关闭',
+ onClick: () => {
+ message.info("已关闭");
+ },
+ },
+ ],
+ });
+ modalApiRef.current = api;
+ }, [modal, data]);
+
+ return (
+
+ 暂无数据，请点击"加载数据"按钮
+
+ )}
+
+
+ );
+ },
+ children: () => (
+ 这是基本信息标签的装饰内容
+ {render()} +
+
+
+ {userData.department}
+ {userData.joinDate}
+
+
+
+ ),
+ },
+ {
+ key: 'projects',
+ label: '项目经验',
+ children: () => (
+
+
+
+
+ {userData.name}
+{userData.email}
+
+
}
+ bordered
+ dataSource={userData.projects}
+ renderItem={(item, index) => (
+ - 参与项目
+
+ {userData.skills.map((skill, index) => (
+
+ {skill}
+
+ ))}
+
+
+ {userData.skills.map((skill, index) => (
+
+
+ ),
+ },
+ {
+ key: 'achievements',
+ label: '成就荣誉',
+ children: () => (
+ 技能掌握程度评估：
+
+
+ ))}
+ {skill}:
+
+
+
+ {90 - index * 10}%
+
+
+ {userData.achievements.map((achievement, index) => (
+
+
+ ))}
+
+
+ ),
+ },
+ ];
+
+ return (
+ {achievement}
++ {index === 0 ? '2023年度评选' : index === 1 ? '2022年度评选' : '2021年度评选'} +
+ModalButton 可以在点击后加载数据，然后弹出弹窗
+ +弹窗弹窗弹窗弹窗弹窗弹窗弹窗
-
-
-