antd中的表格穿梭框(Transfer)如何使用
穿梭框是什么?怎么使用?
需求如下:
有一组端口需要分配给具体接口
功能要求:
1. 需要展示当前端口名称及其所属的接口
2. 需支持搜索功能可对端口名或接口名进行筛选便于分配
3. 分配端口时,需检测当前接口内的端口是否满足此接口最低要求
4. 提供Select下拉框,可供查看及操作具体接口内的端口
5. 保存操作时,需对各接口数据进行最低要求效验
6. 操作不满足条件时,需中断数据操作,并展示操作项异常状态
原理:左侧为数据集合,右侧为设置的数据的key值集合
效果图如下:
穿梭框简单用法(基础属性介绍):
<TransferdataSource={staffKeyArr}titles={['任务总人员', 'A任务人员']} //标题集合targetKeys={AStaffKeyArr} // 显示在右侧的key集合// selectedKeys={selectedKeys} // 默认被选中的集合//onChange={onChange} // 具体数据操作onSelectChange={onSelectChange} // 选中项发生改变//showSearch // 是否展示搜索功能// onSearch={handleSearch}filterOption={seachFn} // 具体搜索操作//operations={['to right', 'to left']} // 穿梭框中间图标描述// 同时设置两侧的样式listStyle={{width: 300,height: 300,}}// 单独设置两侧的样式// listStyle={(direction) => {// if (direction === 'left') {// return {// width: 300,// backgroundColor: '#f5f5f5',// border: '1px solid #1890ff',// }// } else {// return {// width: 350,// backgroundColor: '#fffbe6',// border: '1px dashed #ffa940',// }// }// }}//// pagination // 是否使用分页pagination={{pageSize: 5,showSizeChanger: true, //是否显示分页器}}//render={(item) => {// 一般穿梭框渲染项return item.name}}/>
上述代码中的函数介绍,更多函数可查看官网,地址如下:穿梭框 Transfer - Ant Design
常用函数介绍:
tips:掌握onChange+filterOption能解决大部分操作
// 点击穿梭框中间的图标时的实际操作const onChange = (nextTargetKeys, direction, moveKeys) => {// nextTargetKeys 移动后的key值集合// direction 当前动作// moveKeys 当前选中的key值setbrWanKeyArr(nextTargetKeys)}// 搜索实际数据处理函数const seachFn = (value, item, direction) => {// value 当前搜索的值// item 此处可以把次函数理解为filter,item为当前操作的穿梭框内的每一项// direction 当前操作的穿梭框位置return (// 此处对name属性进行筛选(可对多数据进行筛选)item.name.indexOf(value) !== -1)}// 对穿梭框的内容选中时触发const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {// sourceSelectedKeys 当前选中的key值// targetSelectedKeys 当前的具体数值console.log(sourceSelectedKeys, targetSelectedKeys, 123)}// 搜索时触发const handleSearch = (direction, value) => {// direction 当前操作的穿梭框位置// value 当前搜索的值console.log('search:', direction, value)}
穿梭框高阶用法表格穿梭框:
使用场景: 简单穿梭框只能渲染数据中的一项,使用表格穿梭框可随意渲染数据中的任意项
在基础穿梭框的用法上,加以封装调整,代码如下:
表格穿梭框封装处理后使用
const Default = (props) => {// 表格渲染const columns = [{dataIndex: 'key',title: '端口名称',},{dataIndex: 'alias',title: '所属接口',render: (tag) => (<Tag className="TagCol1">{tag}</Tag>),},]// 总端口const [totalInter, setTotalInter] = useState()// 当前分配的接口const [nowInter, setNowInter] = useState()// 当前分配的接口数据const [nowKeys, setNowKeys] = useState([])// 需要禁用的端口列表const [disableList, setDisableList] = useState([])// 异常状态动态类名控制const [errorStatus, setErrorStatus] = useState()useEffect(() => {// 此处对初始各数据进行处理/赋值}, [])// 数据发生变动时触发const onChange = (nextTargetKeys, direction, moveKeys) => {// 对当前的操作进行条件1效验,并赋予异常状态if (flagXXX) {setErrorStatus('TransferRight')return} else {setErrorStatus('')}// 需要实时数据更新,即需对总数据进行实时更改setTotalInter((prev) => {prevxxx})// 更新当前右侧分配的接口数据的key值集合setNowKeys(nextTargetKeys)}// 右侧数据进行切换时触发const changeRightData = (val, error) => {// 存储当前所操作的接口标识setNowInter(val)// 更新当前右侧分配的接口数据的key值集合setNowKeys(XXXXchangeData)// 对当前的操作进行条件2效验,并赋予异常状态if (flagXXX) {setErrorStatus('TransferRight')} else {setErrorStatus('')}}// 搜索时触发const seachFn = (val, item, direction) => {// 当前支持搜索端口名称及所属接口return item.key.indexOf(val) !== -1 || item.alias.indexOf(val) !== -1}// 保存操作时触发const saveData = () => {// 对当前的操作进行条件3效验,并赋予异常状态let vad = falselet athArr = totalInter.filter((item) => {if (XXX) return XXX})athArr.forEach((item) => {if (flagXXX) {vad = truesetErrorStatus('TransferLeft')return}})if (vad) return// 对当前的操作进行条件4效验,并赋予异常状态let arrEmpty = falselastArr.forEach((item) => {if (flagXXX) {arrEmpty = truereturn}})if (arrEmpty) return// 所有效验通过后触发函数props.save(lastArr)}return (<><TableTransferdataSource={totalInter} // 数据源targetKeys={nowKeys} // 当前右侧操作的接口数据key值集合showSelectAll={false}onChange={onChange}showSearchfilterOption={seachFn}Columns={columns} // 表格渲染规则operations={['分配', '重置']}// 以下为自定义传递changeRightData={changeRightData} // 右侧插入的下拉框切换数据函数selectList={selectList} // 动态下拉框列表disabledList={disableList} // 动态禁用项transferStatus={errorStatus} // 动态类名,控制左侧或右侧异常nowInter={nowInter} // 动态控制当前操作的接口/><Button type="primary" onClick={saveData}>{L.Save}</Button></>)
}
export default Default
表格穿梭框封装处理
// 对穿梭框进行封装
const TableTransfer = ({ Columns, transferStatus, ...restProps }) => {return (// className={transferStatus} 控制异常状态<Transfer className={transferStatus} {...restProps}>{({direction,filteredItems,onItemSelect,onItemSelectAll,selectedKeys: selectedList,}) => {const columns = Columns// antd的表格功能配置项,具体可查看官网const rowSelection = {// 选择框的默认属性配置 (禁用)getCheckboxProps: (item) => {return {disabled:restProps.disabledList.indexOf(item.key) !== -1,}},// 全选操作处理onChange: (nowKeys, keysData) => {onItemSelectAll(nowKeys, 'replace')},selectedRowKeys: selectedList,selections: [Table.SELECTION_ALL,Table.SELECTION_INVERT,Table.SELECTION_NONE,],}return (<>{/* 插入的Select下拉框 */}{/* direction === 'right' 只插入右侧restProps.selectList[0] 下拉框初始值渲染处理*/}{direction === 'right' && restProps.selectList[0] && (<div><SelectonChange={(val) => {restProps.changeRightData(val)}} // 切换数据处理函数value={restProps.nowInter}options={restProps.selectList}/></div>)}<TablerowSelection={rowSelection}columns={columns}dataSource={filteredItems}size="small"// 可对表格行数据进行操作处理onRow={({ key }) => ({onClick: () => {onItemSelect(key,!listSelectedKeys.includes(key))},})}/></>)}}</Transfer>)
}
相关文章:
antd中的表格穿梭框(Transfer)如何使用
穿梭框是什么?怎么使用? 需求如下: 有一组端口需要分配给具体接口 功能要求: 1. 需要展示当前端口名称及其所属的接口 2. 需支持搜索功能可对端口名或接口名进行筛选便于分配 3. 分配端口时,需检测当前接口内的端口是否满足此接口最低要求 4. 提供Select下拉框,可供查…...
联邦学习与安全多方计算的结合是隐私保护机器学习领域
联邦学习(Federated Learning, FL)与安全多方计算(Secure Multi-Party Computation, MPC)的结合是隐私保护机器学习领域的前沿方向,其框架设计需兼顾计算效率、安全性和可扩展性。以下是结合两者的框架设计与实现流程的详细解析: 一、框架设计核心目标 隐私保护:确保多…...
mongoose的介绍,连接数据库
Mongoose 是一个基于 Node.js 的 MongoDB ODM(Object Data Modeling)库,用于在 MongoDB 和 Node.js 应用之间提供结构化的模型层,帮助你更优雅、安全地操作数据库。 🧾 一、Mongoose 简介 📦 功能ÿ…...
Pytest中的fixture装饰器详解
pytest是Python生态中最流行的自动化测试框架,它通过简洁的语法、强大的功能(如fixture、参数化、插件扩展等)和丰富的插件生态,帮助开发者高效完成单元测试、集成测试和端到端测试。fixture是pytest框架中最核心、最强大的功能之一,它提供了…...
Linux系统配置JDK
目录 一、xftp传输JDK包 1、新建xftp会话并连接到我们的服务器 2、上传jdk包 二、配置环境变量 为了方便javaweb项目的建立,我们需要在搭建好的linux环境下配置安装JDK环境 一、xftp传输JDK包 因为jdk包文件比较大了,这时候不能使用简单的linux上传…...
通义千问最新一代大语言模型Qwen3发布了
通义千问Qwen3全面解析:最强开源大模型Ollama本地运行实战 🔥 最新重大好消息! 经过漫长的等待,今天凌晨阿里云正式发布了Qwen3大语言模型!本次更新带来了0.6b 1.7b 4b 8b 14b 30b 32b 235b超大参数模型,更…...
想做博闻强记的自己
2025年4月29日,13~25℃,还好 待办: 冶金《物理》期末测试 阅卷(冶金《物理》期末测试试卷) 重修《物理》《物理2》电子材料归档 规则变更,《高等数学2》期末试卷推倒重来 遇见:直播画面。 感受…...
爱普生SG2520HHN晶振数据中心服务器的理想解决方案
在当今数字化时代,数据中心作为海量数据存储、处理与传输的核心枢纽,其服务器的高效稳定运行至关重要。服务器作为其核心设备,对时钟信号的精度和稳定性提出了严苛要求——微小的时序误差可能导致数据传输失败或系统宕机。爱普生 SG2520HHN 差…...
【Prometheus-MySQL Exporter安装配置指南,开机自启】
目录 1. 创建 MySQL 监控用户2. 配置 MySQL 认证文件3. 安装 mysqld_exporter4. 配置 Systemd 服务5. 启动并验证服务6. 修改Prometheus配置常见错误排查错误现象排查步骤 6. 验证监控数据关键注意事项 1. 创建 MySQL 监控用户 mysql -uroot -p123456 # 登录MySQL-- 1. 创建监…...
Linux 服务管理两种方式service和systemctl
Linux 服务管理两种方式service和systemctl 确定当前系统使用的哪种命令用来启动服务 SysV init 或者 systemd 使用下面的命令: ps -p 1例如,输出: PID TTY TIME CMD1 ? 00:00:02 systemdSysV init service命令用于对系统…...
P1494 [国家集训队] 小 Z 的袜子 Solution
Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an),有 q q q 次查询,每次查询给定 ( l , r ) (l,r) (l,r). 你需要求出 2 ∑ i ≤ i < j ≤ r [ a i a j ] ( r − l ) ( r − l 1 ) \dfrac{2\sum…...
(开源)视频画面增强模型:Ev-DeblurVSR (可以解决视频画面不清晰的问题)
在计算机视觉领域,模糊视频超分辨率(BVSR)是一个复杂且具有挑战性的任务,目标是从低分辨率(LR)和模糊的输入生成高分辨率(HR)视频。传统方法常常因缺乏足够运动信息和高频细节而表现…...
探索豆包WEB/PC超能创意1.0:创意新利器的全面解析
在当今数字化创意蓬勃发展的时代,新工具不断涌现,为创作者们带来了更多的可能性。豆包WEB/PC超能创意1.0便是其中一款备受瞩目的产品,它的出现为创意工作者和爱好者们打开了一扇充满无限可能的大门。 一、体验信息:探索创意新领域…...
五、UI自动化测试05--PyTest框架
目录 一、PyTest 框架2. 特点2. 安装步骤3. 基本使⽤3.1 测试函数形式3.2 执⾏⽅式3.3 测试类形式3.4 执⾏⽅式3.5 另⼀种执⾏⽅式: 主函数执⾏3.6 特殊⽅法: 函数级别3.7 特殊⽅法: 类级别3.8 特殊⽅法: 函数级别和类级别同时使⽤ 4. pytest 配置⽂件4.1 选项字段获取4.2 编写…...
51LA使用方法与悟空统计,网站数据分析的双重选择
在网站运营与数据分析领域,51LA作为国内较早的流量统计工具,曾为许多用户提供基础的访问数据监测服务。然而,随着技术的发展和用户需求的升级,越来越多的企业开始寻求功能更全面、体验更优的统计工具。小编今天将给大家介绍一款更…...
MongoDB的下载安装与启动
MongoDB的下载安装与启动, 一、MongoDB下载安装 1. 官网下载 打开官网:https://www.mongodb.com/try/download/community选择: 版本(Version):选最新版或者根据需要选旧版。平台(OS࿰…...
解决ktransformers v0.3 docker镜像中 operator torchvision::nms does not exist 问题
问题背景 更新ktransformers docker镜像到v0.3版本后(之前为v0.2.4post1),使用更新前启动命令无法正确启动服务,提示以下错误: Traceback (most recent call last):File "/workspace/ktransformers/ktransforme…...
MySQL事务隔离级别的实现原理MVCC
一、什么是MVCC? MVCC(Multi-Version Concurrency Control),即多版本并发控制,是并发读写场景下,数据库层面提供的一种解决方案。 数据库的并发场景有以下三种: 读读 当多个事务同时进行读取操作时,它们之间不存在…...
EtherCAT 分布式时钟(DC)补偿技术解析
一、技术定义 EtherCAT 分布式时钟(Distributed Clock, DC)是一种基于硬件的高精度同步机制,旨在解决工业自动化系统中多设备协同控制的时间同步问题。其核心功能包括: 初始偏移补偿:消除从站本地时钟与主站系统时间的初始偏差,确保所有设备在启动阶段的时间基准一致。…...
7.进程概念(三)
一、进程优先级 是什么? 进程得到CPU资源的先后顺序。 为什么要有进程优先级? 目标资源稀缺,导致要通过优先级确定谁先谁后。 如何比较和分配? 进程优先级也是一种数字,int,task_struct 值越低,…...
MATLAB小试牛刀系列(2)
问题描述 捷运公司在下一年度 1 - 4 月的 4 个月内拟租用仓库堆放物资。已知各月所需仓库面积列于表 1.1。仓库租借费用随合同期而定,期限越长,折扣越大,具体数字见表 1.1。租借合同每月初都可办理,每份合同具体规定租用面积和期…...
一个SciPy图像处理案例的全过程
本文利用SciPy进行图像处理,并记录图像处理的全过程,处理过程包含高斯模糊、腐蚀等操作。 代码 import matplotlib.pyplot as plt import numpy as np from scipy import ndimage# 设置图像的大小为 128x128,即 128x128 的逻辑像素 l 128 …...
修改输入框选择框颜色
项目场景: 提示:这里简述项目相关背景: 有时候需要改写element原来输入框/选择框的颜色 问题描述 提示:这里描述项目中遇到的问题: 输入框的话需要hover时边框颜色修改,选择值的时候边框颜色修改以及选…...
rust 全栈应用框架dioxus
逛github时发现了一个号称全栈应用框架dioxus,适用于web / desktop / mobile。零配置、集成了热启动和基于信号的状态管理。是由rust编写的,所以也就不受平台限制。 既然说的这么好,那就来试试构建一下三种平台的应用,构建的应用编译成web 、…...
电子电器框架 --- 数据连接性和云集成在增强电气/电子架构方面的作用
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 钝感力的“钝”,不是木讷、迟钝,而是直面困境的韧劲和耐力,是面对外界噪音的通透淡然。 生活中有两种人,一种人格外在意别人的眼光;另一种人无论…...
Nvidia 可能会发布具有增强内存配置的 RTX 5080 和 5070 Super
距离英伟达正式发布RTX 50系列显卡仅过去数月,有关"Super"系列升级版显卡的传闻已甚嚣尘上。据硬件爆料平台Chiphell论坛(该消息源可靠性参差不齐)用户透露,英伟达可能正在研发配备24GB显存的RTX 5080 Super和16GB显存的…...
预留库存的实现
1. 实体类 import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data;import java.sql.Timestamp;Data TableName("products") public class Product {private Long id;private String name;private int stock; }Data TableName("shopping_c…...
[逆向工程]如何理解小端序?逆向工程中的字节序陷阱与实战解析
[逆向工程]如何理解小端序?逆向工程中的字节序陷阱与实战解析 关键词:逆向工程、小端序、字节序、二进制分析、数据解析 引言:为什么字节序是逆向工程师的必修课? 在逆向工程中,分析二进制数据是最基础的任务之一。…...
【Python笔记 05】 if判断、比较运算符与逻辑运算符
一、if判断 1、基本格式 if 要判断的条件: #条件成立为true条件成立的时候要做的事情注:注意判断条件后面的冒号,以及条件成立要做的事情此行代码的缩进,最好是软件自动缩进。 2、练习题 用户在控制台输入成绩,…...
AI应用实战:Excel表的操作工具
有个小需求是这样的,需要在一份数据表里,将1000多个客户的月报数据分别单独截图存档,有客户需要的时候就要发给客户,截图下来的也是以客户为命名,这样查找时也比较容易匹配上。 在没有写工具之前,以往财务…...
P1903 [国家集训队] 数颜色 / 维护队列 Solution
Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an),有 m m m 个操作分两种: modify ( i , x ) \operatorname{modify}(i,x) modify(i,x):执行 a i ← x a_i\gets x ai←x. query ( …...
Transformer数学推导——Q33 分析正弦编码的频率衰减对长程依赖建模的影响
该问题归类到Transformer架构问题集——位置编码——绝对位置编码。请参考LLM数学推导——Transformer架构问题集。 1. 背景知识:Transformer 与长程依赖 在自然语言处理和其他序列数据处理任务中,Transformer 模型凭借其强大的性能脱颖而出。与传统的…...
微服务架构下的熔断与降级:原理、实践与主流框架深度解析
微服务架构下的熔断与降级:原理、实践与主流框架深度解析 在现代分布式系统中,熔断 (Circuit Breaker) 和 降级 (Degrade) 是保障系统弹性与高可用性的核心机制。本文将系统解析两者的原理、区别与协同方式,并结合主流框架 (Resilience4j、S…...
大脑、机器人与贝叶斯信念及AI推理
在机器不再局限于重复性任务的世界里,机器人技术已经大胆地迈入了感知、学习和决策的领域。这篇文章探讨了智能机器人系统是如何构建的——从理解它们嘈杂的传感器和不确定的环境,到使它们能够做出明智的选择并随着时间的推移调整自己的行为。 AI推理 …...
stm32wb55rg (4) 启用usart串口
code repo: 访问gitee 上节课成功点亮了LED,这次来把usart 用起来,毕竟有交互才是系统。 技术准备 首先查看手册,发现mcu有1个usart和1个 lpuart。 usart 的使用需要两个pin,一个接收一个发送。继续查看pin and ball definition…...
LSTM预测模型
LSTM预测模型 时间序列预测通常需要捕获时间依赖性,而 L S T M LSTM LSTM(长短时记忆网络)是处理时间序列数据的经典深度学习方法之一。结合长短时注意力机制( L o n g − S h o r t A t t e n t i o n M e c h a n i s m Long-S…...
[计算机网络]物理层
文章目录 物理层的概述与功能传输介质双绞线:分类:应用领域: 同轴电缆:分类: 光纤:分类: 无线传输介质:无线电波微波:红外线:激光: 物理层设备中继器:放大器:集线器(Hub):…...
Day16(贪心算法)——LeetCode45.跳跃游戏II763.划分字母区间
1 LeetCode45.跳跃游戏II 1.1 题目描述 与跳跃游戏类似,跳跃游戏II给定长为n的从0开始索引的整数数组nums,nums[i]是你在i处能向右跳跃的最大步数,求到达数组最后一个索引处需要跳跃的最少次数。 一个示例:nums[2,3,1,1,4]&a…...
【MySQL】表的内外连接
表的内外连接 一. 内连接二. 外连接1. 左外连接2. 右外连接 三. 简单案例四. SQL 实战 表的连接分为内连接和外连接 一. 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,之前博客中的查询都是内连接,也是在开发过程中使用的最多…...
Prometheus使用Recoding Rules优化性能
通过PromQL可以实时对Prometheus中采集到的样本数据进行查询,聚合以及其它各种运算操作。而在某些PromQL较为复杂且计算量较大时,直接使用PromQL可能会导致Prometheus响应超时的情况。这时需要一种能够类似于后台批处理的机制能够在后台完成这些复杂运算…...
Linux 怎么安装 Oracle Java 8
在 Linux 系统上安装 Oracle Java 8 的步骤如下: 1. 下载 Oracle Java 8 访问 Oracle 官方网站的 Java 下载页面: 下载链接:Oracle Java 8 下载页面选择适合 Linux x64 的安装包(通常是 .tar.gz 格式)。需要登录 Or…...
项目三 - 任务2:创建笔记本电脑类(一爹多叔)
在本次实战中,我们通过Java的单根继承和多接口实现特性,设计了一个笔记本电脑类。首先创建了Computer抽象类,提供计算的抽象方法,模拟电脑的基本功能。接着定义了NetCard和USB两个接口,分别包含连接网络和USB设备的抽象…...
基于蓝耘MaaS平台进行api调用创建本地智能ai
关于MaaS平台 MaaS 平台即 “模型即服务”(Model as a Service)平台,是一种依托云计算的人工智能服务模式。 模型即服务(MaaS)平台面向企业开发者、创业者及非技术背景用户,提供开箱即用的热门AI模型服务&…...
【Luogu】动态规划七
P1566 加等式 - 洛谷 思路: 其实这道题就是一个纸老虎,说这么多,其实最后就是问所有 a[i] 的组成方法之和有多少种 那么显然的一个dp就是 dp[j] dp[j - a[i]] 然后这题就结束了,就是这么简单,最后记得减去 n&…...
Kotlin 常见问题
以下从基础、中级、高级三个难度等级为你提供 Kotlin 面试题及参考答案: 基础难度 1. Kotlin 中 val 和 var 的区别是什么? 答案要点:val 用于声明不可变变量,类似于 Java 中的 final 变量,一旦赋值后就不能再重新赋…...
应急演练考试排查-DC01
DC01:攻击者最早通过哪种方式获取了机器权限?( ) A、远程登录(RDP登录) B、主机系统漏洞 C、软件服务漏洞 D、钓鱼 E、物理访问 F、内网横向手段 G、低权限账户提权 H、未获取到主机权限 DC01&…...
Spring MVC 中解决中文乱码问题
在 Spring MVC 中解决中文乱码问题,需要从 请求参数编码 和 响应内容编码 两方面入手。以下是完整的解决方案: 一、解决请求参数中文乱码 1. POST 请求编码(表单提交) 配置 CharacterEncodingFilter 在 web.xml 中添加 Spring 提…...
排序算法详解笔记(二)
归并排序 #include <vector> #include <iostream> #include <algorithm> // For std::inplace_merge in optimization// Helper function to merge two sorted subarrays void merge(std::vector<int>& arr, int left, int mid, int right) {int …...
Spark GraphX 机器学习:图计算
引言 在数字化时代,图数据(Graph Data)的价值日益凸显:社交网络中的用户关系、电商平台的商品关联、知识图谱的实体链接……这些以“节点(Vertex)”和“边(Edge)”为核心的非结构化…...
claude 3.7,极为均衡的“全能型战士”大模型,国内直接使用
文章目录 零、前言一、操作指南操作指导 二、小球弹跳三、生成 Mandelbrot set 集四、文本总结能力五、智力推理题六、感受 零、前言 Claude 3.7 Sonnet(下面简称 Claude 3.7)由 Anthropic 发布,“全球首个混合推理模型”的 AI 大模型&#x…...