admin2 1.0.0

package/src/pages/pageComponents/historyPage/components/NewHistoryDetailDrawer/index.js

@@ -0,0 +1,959 @@
+/* eslint-disable max-statements-per-line */
+/* eslint-disable max-len */
+import {useCallback, useState, useEffect, useRef} from 'react';
+import {Drawer, Table, Popover, Tooltip, message} from 'antd';
+import _ from 'lodash';
+import {SMVideo} from 'sm-antd';
+import clsx from 'clsx';
+import moment from 'moment';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import {imgClose, imgOpen} from '@/pages/tj/components/img';
+import SMText from '@/components/SMText';
+import {SMRiskLevel, SMImage, SMAudio, SMNewText} from '@/components';
+import {getAuthFunction, getAuthFunctionList} from '@/utils/AuthorityManage';
+import {
+    historyOperationList,
+    HISTORY_COLUMN,
+    RISK_LEVEL_LIST,
+    SERVICEID_LIST,
+    RENDER_TYPE,
+    CLICK_List,
+    AUTH_FUNCTION,
+    FILED_SET_DETAIL,
+} from '@/contants';
+import {fieldSetMap, ACTION_TYPE} from '@/pages/tj/constants';
+import {replaceProtocol, Cookie, randomStr} from '@/utils/utils';
+import {BASEIC_LIST} from '@/pages/basic/constants';
+import {useLanguage} from '@/hooks';
+import {formatUs} from '@/utils/helpers';
+import { getHistoryList } from '@/services/history';
+
+import ImgSliderDetail from '../../TypeTwo/components/ImgSliderDetail';
+import ImgTextDetail from '../ImgTextDetail';
+import contentRender from '../contentRender';
+import MultiContentsRender from '../../MultiContentsRender';
+
+import formatSpecialFeature from './formatSpecialFeature';
+import styles from './index.less';
+
+
+// 天网注册、登录、事件、羊毛党、短信通道、历史数据全局检索
+const TW_SERVICE_LIST = [
+    SERVICEID_LIST.ACCOUNT_REGISTER,
+    SERVICEID_LIST.POST_EVENT,
+    SERVICEID_LIST.ACCOUNT_LOGIN,
+    SERVICEID_LIST.ANTI_ROBOT_MARKETING,
+    SERVICEID_LIST.ANTI_ROBOT_SMS,
+    SERVICEID_LIST.GLOBAL_SEARCH,
+];
+//  输入、输出信息 按表格方式渲染
+const inputTableRenderList = [
+    HISTORY_COLUMN.BUSINESS_LABELS, // 命中业务标签
+    HISTORY_COLUMN.PRODUCTS, // 订单商品信息
+    HISTORY_COLUMN.MODEL_SCORE_REASONS, // 账号模型核心特征
+    HISTORY_COLUMN.SLICE_RESULT,
+    HISTORY_COLUMN.MATCHED_LISTS,
+    HISTORY_COLUMN.ALL_LABELS,
+    HISTORY_COLUMN.MULTI_RESULTS,
+];
+
+// 代答信息
+const ANSWER_LIST = [
+    HISTORY_COLUMN.HAS_ANSWER,
+    HISTORY_COLUMN.HAS_KB_TYPE,
+    HISTORY_COLUMN.ANSWER,
+];
+
+// 按钮点击类型
+const ACCOUNT_LIST = [
+    ACTION_TYPE.IGNORE_WORD,
+    ACTION_TYPE.SENSITIVE_WORD,
+    ACTION_TYPE.BLACK_LIST,
+    ACTION_TYPE.RESET,
+    ACTION_TYPE.SCREEN,
+    ACTION_TYPE.RULE_DETAIL,
+    ACTION_TYPE.RISK_TOP,
+];
+const SERVICE_IMG_LIST = [ // 视频类型详情展示图片
+    SERVICEID_LIST.POST_VIDEO,
+    SERVICEID_LIST.POST_VIDEOSTREAM,
+    SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+];
+// 特殊方式展示，文本格式不展示
+const HIDE_TEXT_LIST = [
+    HISTORY_COLUMN.OTHER_DATA,
+    HISTORY_COLUMN.OTHER_DATA_TW,
+    HISTORY_COLUMN.FEEDBACK,
+    HISTORY_COLUMN.OTHER_DATA_TEXT,
+    HISTORY_COLUMN.AUDIO_EVIDENCE,
+    HISTORY_COLUMN.RESULT,
+    HISTORY_COLUMN.AUDIO_EVIDENCE_TWO,
+    HISTORY_COLUMN.ARTICLE,
+    HISTORY_COLUMN.TIMBRE,
+    // HISTORY_COLUMN.MULTI_RESULTS,
+];
+
+const HIDE_TEXT = '_BUILTIN'; // 风险识别类型隐藏BUILTIN  http://jira.ishumei.com/browse/TJCPYFRW-3797
+// 名单跳转地址
+const JUMP_URL_LIST = {
+    [SERVICEID_LIST.POST_TEXT]: '/new/tianjing/text/list/text/search',
+    [SERVICEID_LIST.POST_TEXT_EN]: '/new/tianjing/textEng/list/text/search',
+    [SERVICEID_LIST.POST_TEXT_AR]: '/new/tianjing/textAlb/list/text/search',
+    [SERVICEID_LIST.POST_IMG]: '/new/tianjing/image/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO]: '/new/tianjing/audio/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_EN]: '/new/tianjing/audioEng/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_AR]: '/new/tianjing/audioAlb/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_B]: '/new/tianjing/audioBlei/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM]: 'new/tianjing/audioStream/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_EN]: 'new/tianjing/audioStreamEng/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_AR]: 'new/tianjing/audioStreamAlb/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_B]: 'new/tianjing/audioStreamBlei/list/text/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG]: '/new/tianjing/videoStream/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN]: '/new/tianjing/videoStreamEng/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR]: '/new/tianjing/videoStreamAlb/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM]: '/new/tianjing/videoStream/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_EN]: '/new/tianjing/videoStreamEng/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_AR]: '/new/tianjing/videoStreamAlb/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEO_IMG]: '/new/tianjing/video/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEO]: '/new/tianjing/video/list/imgText/search',
+};
+
+const JUMP_URL_LIST_IMG = {
+    [SERVICEID_LIST.POST_TEXT]: '/new/tianjing/text/list/text/search',
+    [SERVICEID_LIST.POST_TEXT_EN]: '/new/tianjing/textEng/list/text/search',
+    [SERVICEID_LIST.POST_TEXT_AR]: '/new/tianjing/textAlb/list/text/search',
+    [SERVICEID_LIST.POST_IMG]: '/new/tianjing/image/list/image/search',
+    [SERVICEID_LIST.POST_AUDIO]: '/new/tianjing/audio/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_EN]: '/new/tianjing/audioEng/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_AR]: '/new/tianjing/audioAlb/list/text/search',
+    [SERVICEID_LIST.POST_AUDIO_B]: '/new/tianjing/audioBlei/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM]: 'new/tianjing/audioStream/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_EN]: 'new/tianjing/audioStreamEng/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_AR]: 'new/tianjing/audioStreamAlb/list/text/search',
+    [SERVICEID_LIST.POST_AUDIOSTREAM_B]: 'new/tianjing/audioStreamBlei/list/text/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG]: '/new/tianjing/videoStream/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN]: '/new/tianjing/videoStreamEng/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR]: '/new/tianjing/videoStreamAlb/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM]: '/new/tianjing/videoStream/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_EN]: '/new/tianjing/videoStreamEng/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEOSTREAM_AR]: '/new/tianjing/videoStreamAlb/list/imgText/search',
+    [SERVICEID_LIST.POST_VIDEO_IMG]: '/new/tianjing/video/list/postImg/search',
+    [SERVICEID_LIST.POST_VIDEO]: '/new/tianjing/video/list/imgText/search',
+};
+
+// 命中名单有值的情况下 后面新增查看命中图片
+const MATCHED_BTN = '查看命中图片';
+const MATCHED_REG = /^\[\d+(,\d+)*\]$/; // 是否显示查看命中图片按钮正则；
+/**
+ * 只有这三个规则才会用的画像工具
+ * 这个三个规则是模型特征规则，和他规则不一样，其他规则有一个阈值；这个三个规则的阈值是通过判断出来的
+ */
+const RULE_SPECIAL_LIST = ['M002070003', 'M002070002', 'M002070006'];
+
+// 列表格式的字段，后续需要列表展示的字段配置可写在此处，并记得同时配置到 HIDE_TEXT_LIST中
+const TABLE_FIELDS = [
+    {
+        key: HISTORY_COLUMN.TIMBRE,
+        name: '音色标签',
+    },
+];
+
+// 特征信息需要格式化的字段
+const FEATURE_NEED_FORMAT = [
+    'phone_risk',
+    'device_risk',
+];
+
+const DATA_ID_ORG = ['OiSyzKqqwO9gAy7AsaIP'];
+
+const NewHistoryDetailDrawer = props => {
+    const {
+        visible,
+        detailData: propDetailData = {},
+        headerData: propHeaderData,
+        onClose,
+        onActionClick,
+        hasImgList: hasImgItem,
+        serviceId,
+        modelText,
+        organization,
+        queryParams,
+    } = props;
+
+    const {t} = useLanguage();
+
+    const [showExtra, setShowExtra] = useState(false);
+    const [expandedTexts, setExpandedTexts] = useState({});
+    const [headerData, setHeaderData] = useState(propHeaderData);
+    const [detailData, setDetailData] = useState(propDetailData);
+    const hasFetchedRef = useRef(null);
+
+    const hasImgList = SERVICE_IMG_LIST.includes(serviceId);
+    const otherData = detailData[HISTORY_COLUMN.OTHER_DATA]
+                      || detailData[HISTORY_COLUMN.OTHER_DATA_TEXT]
+                      || detailData[HISTORY_COLUMN.AUDIO_EVIDENCE]
+                      || detailData[HISTORY_COLUMN.AUDIO_EVIDENCE_TWO]
+                      || detailData[HISTORY_COLUMN.OTHER_DATA_TW] // 天网其他风险列表
+                      || {};
+    const articleList = detailData.article;
+
+    const getActionType = useCallback((type, key, url) => {
+        switch (type) {
+            case CLICK_List.videoAudioScreen.key:
+            case CLICK_List.videoImgScreen.key:
+                return {
+                    actionType: ACTION_TYPE.SCREEN,
+                    otherData: {path: CLICK_List[type][serviceId]}};
+            case ACTION_TYPE.SCREEN:
+                return {
+                    actionType: ACTION_TYPE.SCREEN,
+                    otherData: {path: url || location.pathname},
+                };
+                // 加入黑名单
+            case ACTION_TYPE.BLACK_LIST:
+                return {
+                    actionType: ACTION_TYPE.ADD_LIST,
+                    otherData: {type: key},
+                };
+            case ACTION_TYPE.IGNORE_WORD:
+                return {
+                    actionType: ACTION_TYPE.ADD_LIST,
+                    otherData: {type: ACTION_TYPE.IGORE},
+                };
+            case ACTION_TYPE.SENSITIVE_WORD:
+                return {
+                    actionType: ACTION_TYPE.ADD_LIST,
+                    otherData: {type: ACTION_TYPE.SENSITIVE},
+                };
+            case ACTION_TYPE.RESET:
+                return {
+                    actionType: ACTION_TYPE.RESET_PORTRAIT,
+                    otherData: {type: ACTION_TYPE.TOKEN}, // 重置暂时只支持账号
+                };
+            case ACTION_TYPE.RULE_DETAIL:
+                return {
+                    actionType: HISTORY_COLUMN.MODEL,
+                };
+            case ACTION_TYPE.RISK_TOP:
+                return {
+                    actionType: ACTION_TYPE.RISK_TOP,
+                };
+        }
+    }, [serviceId]);
+
+    const detailItemRender = useCallback((item, value) => {
+        const newData = [];
+        _.keys(item).forEach(key => {
+            if ([
+                SERVICEID_LIST.POST_VIDEO,
+                SERVICEID_LIST.POST_VIDEOSTREAM,
+                SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+                SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+            ].includes(serviceId)) {
+                if ([HISTORY_COLUMN.BT_ID, HISTORY_COLUMN.REQUESTID, HISTORY_COLUMN.TOKENID].includes(item.fieldTag) && key === 'screen'
+                    && getAuthFunctionList('screen')) {
+                    newData.push(
+                        {
+                            title: t(CLICK_List.videoImgScreen.name),
+                            value: CLICK_List.videoImgScreen.key,
+                            name: item.name,
+                            fieldTag: item.fieldTag,
+                        },
+                        {
+                            title: t(CLICK_List.videoAudioScreen.name),
+                            value: CLICK_List.videoAudioScreen.key,
+                            name: item.name,
+                            fieldTag: item.fieldTag,
+                        }
+                    );
+                }
+            }
+            else {
+                if (getAuthFunctionList(ACCOUNT_LIST, 'item').includes(key)) {
+                    newData.push({
+                        title: t(historyOperationList.filter(e => e.value === key)[0].name),
+                        value: key,
+                        name: item.name,
+                        fieldTag: item.fieldTag,
+                    });
+                }
+            }
+        });
+        // 天净-图片、视频截帧图片、视频流截帧图片  &&  命中敏感词 && 有值的情况后面新增，查看命中图片按钮
+        if (
+            [SERVICEID_LIST.POST_IMG, SERVICEID_LIST.POST_VIDEO_IMG, SERVICEID_LIST.POST_VIDEOSTREAM_IMG].includes(serviceId)
+            && [HISTORY_COLUMN.MATCHED_ITEM].includes(item.fieldTag)
+            && value && MATCHED_REG.test(value)
+        ) {
+            newData.push({
+                title: t(MATCHED_BTN),
+                value: ACTION_TYPE.SCREEN,
+                name: item.name,
+                url: JUMP_URL_LIST_IMG[serviceId],
+                fieldTag: item.fieldTag,
+            });
+        }
+        return newData.map(ele => {
+            const actionObj = getActionType(ele.value, ele.fieldTag, ele.url);
+            if (actionObj.actionType ===  HISTORY_COLUMN.MODEL) {
+                return modelRender(value, ele.title);
+            }
+            if (actionObj.actionType === ACTION_TYPE.RISK_TOP) {
+                return riskTopRender(ele.title);
+            }
+            return (
+                <span key={ele.uuid}>
+                    <span
+                        className={styles['item-action']}
+                        onClick={() => onActionClick
+                            && onActionClick(actionObj.actionType, ele.fieldTag, value, actionObj.otherData)}
+                    >
+                        {ele.title}
+                    </span>
+                </span>
+            );
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/no-use-before-define
+    }, [serviceId, modelRender, getActionType, onActionClick, modelText]);
+
+    const highLightRender = useCallback(text => {
+        if (detailData.textPosition) {
+            return (<span className={styles['item-value']}><SMNewText content={text} keywords={detailData.textPosition} /></span>);
+        }
+        const matchedItem = detailData[HISTORY_COLUMN.MATCHED_ITEM];
+        return (<span className={styles['item-value']}><SMText content={text} keywords={matchedItem} /></span>);
+    }, [detailData]);
+
+    // 文本类型渲染
+    const textItemRender = useCallback((text, type) => {
+        switch (true) {
+            case _.isArray(text):
+                text = text.join(',');
+                break;
+            case _.isObject(text):
+                text = JSON.stringify(text);
+                break;
+            default:
+                text = text + '';
+                break;
+        }
+        try {
+            if (HISTORY_COLUMN.AUDIO_TEXT && type === HISTORY_COLUMN.AUDIO_TEXT) {
+                text = JSON.stringify(text).replace(/\\n\\n/g, '<br />').replace(/^"|"$/g, '');
+            }
+        } catch (error) {}
+
+        return <span className={styles['item-value']} dangerouslySetInnerHTML={{__html: text || '-'}} />; // 设计确认空数据统一默认-
+    }, []);
+
+    // 音频渲染
+    const audioRender = useCallback((text, record) => {
+        return (
+            <SMAudio
+                audioUrl={text}
+                audioId={record[HISTORY_COLUMN.REQUESTID]}
+                showSpeedFlag={false}
+                showDownloadFlag={false}
+                showSilenceFlag={false}
+                showProgressFlag // zhangzhe 2022-10-17 列表上要显示进度条
+                showSimpleTimeFlag={false}
+            />
+        );
+    }, []);
+
+    // 命中敏感词跳转到名单查询
+    const matchedItemRender = useCallback(text => {
+        const actionList = [];
+        if (!JUMP_URL_LIST[serviceId]) {
+            return <span>{text}</span>;
+        }
+        text = _.isArray(text) ? text : text.split(',');
+        _.forEach(text, item => {
+            const url = __ASSETS_PREFIX__ + `${JUMP_URL_LIST[serviceId]}?searchKey=matchedItem&searchContent=${item}&isOnlyCustomList=1`;
+            actionList.push(
+                <a target="_blank" href={url} rel="noreferrer">{item} </a>
+            );
+        });
+        return actionList;
+    }, [serviceId]);
+
+    const riskLevelItemRender = useCallback(text => {
+        const data = RISK_LEVEL_LIST.filter(item => item.name === text) || [];
+        const riskLevelStr = data.length && data[0].name;
+        const riskLevel = data.length && data[0].value;
+        return (
+            <span className={styles['detail-item']} key={text}>
+                <SMRiskLevel riskLevel={riskLevel || text} riskLevelStr={riskLevelStr || text} />
+            </span>
+        );
+    }, []);
+
+    const riskLevelRender = useCallback(text => {
+        const data = RISK_LEVEL_LIST.filter(item => item.name === text) || [];
+        const riskLevelStr = data.length && data[0].name;
+        const riskLevel = data.length && data[0].value;
+        return <SMRiskLevel riskLevel={riskLevel || text} riskLevelStr={riskLevelStr || text} />;
+    }, []);
+
+    /**
+     * 天网-规则标识特殊渲染方式
+     * 2023-01-30 策略解释 按钮详情页面需要支持多个字段进行查询查询的modelId是改成当前选中的数据
+     */
+    const modelRender = useCallback((text, title) => {
+        return (
+            <Popover
+                content={modelText}
+                trigger="click"
+                className={styles['item-action']}
+                onClick={() => {onActionClick(HISTORY_COLUMN.MODEL, _, text);}}
+            >
+                {title || text}
+
+            </Popover>
+        );
+    }, [modelText, onActionClick]);
+
+    // 风险原因Top3
+    const riskTopRender = useCallback(top3RiskTexts => (
+        <Popover
+            content={<div>{_.map(top3RiskTexts, item => <p key={item}>{item}</p>)}</div>}
+            trigger="click"
+            className={styles['item-action']}
+        >
+            top3风险
+        </Popover>
+    ), []);
+
+    const contextTextRender = useCallback(text => {
+        const textId = text.substring(0, 20); // 使用文本前20个字符作为唯一标识
+        const isExpanded = expandedTexts[textId];
+
+        if (text.length > 145) {
+            const displayText = isExpanded ? text : text.substring(0, 145) + '...';
+            return (
+                <div>
+                    { highLightRender(displayText)}
+                    <span
+                        style={{ color: '#13CBB9', cursor: 'pointer', textAlign: 'left' }}
+                        onClick={() => setExpandedTexts(prev => ({
+                            ...prev,
+                            [textId]: !isExpanded,
+                        }))}
+                    >
+                        {isExpanded ? t('收起') : t('展开')}
+                    </span>
+                </div>
+            );
+        }
+        return highLightRender(text);
+    }, [expandedTexts, highLightRender, t]);
+
+    const getItemValue = useCallback((type, text) => {
+
+        switch (type) {
+            case HISTORY_COLUMN.TEXT:
+            case HISTORY_COLUMN.OCR_TEXT:
+            case HISTORY_COLUMN.CONTEXT_TEXT:
+                // 2024-03-24 新增阿语飘红
+            case HISTORY_COLUMN.ORIGINAL_TEXT:
+            case HISTORY_COLUMN.TRANSLATE_TEXT:
+                return contextTextRender(text);
+            case HISTORY_COLUMN.RISK_LEVEL:
+                return riskLevelItemRender(text);
+            case HISTORY_COLUMN.MATCHED_ITEM:
+                return matchedItemRender(text);
+            default:
+                return textItemRender(text, type);
+
+        }
+    }, [textItemRender, riskLevelItemRender, matchedItemRender, contextTextRender]);
+
+    const originalTextRender = useCallback(text => {
+        return (
+            <Tooltip title={text} placement={'topLeft'}>
+                <CopyToClipboard
+                    onCopy={() => message.success(t('复制成功'))}
+                    text={text}
+                >
+                    <span className={styles['item-value']}>
+                        {text}
+                    </span>
+                </CopyToClipboard>
+
+            </Tooltip>
+
+        );
+    }, []);
+
+    const getTableData = useCallback((data = {}) => {
+        const headerData = data.header || [];
+        const dataSource = data.value;
+
+        const columns =  headerData.map(item => {
+            const obj = {
+                key: item.key,
+                dataIndex: item.key,
+                title: item.value,
+                width: `${100 / headerData.length}%`,
+                ellipsis: true,
+            };
+            switch (item.key) {
+                case HISTORY_COLUMN.RISK_LEVEL:
+                    obj.render = riskLevelRender;
+                    break;
+                case HISTORY_COLUMN.originalText: // 风险片段
+                case 'descriptionV2': // 风险原因
+                    obj.render = text => originalTextRender(text);
+                    break;
+                case HISTORY_COLUMN.AUDIO_URL:
+                case HISTORY_COLUMN.AUDIO_URL_TWO:
+                    obj.render = audioRender;
+                    obj.width = 150;
+                    break;
+                case HISTORY_COLUMN.MODEL:
+                    if (TW_SERVICE_LIST.includes(serviceId) && getAuthFunction(AUTH_FUNCTION.RULE_DETAIL)) {
+                        obj.render = text => modelRender(text);
+                    }
+                    else {
+                        obj.render = originalTextRender;
+                    }
+                    break;
+            }
+            return obj;
+        });
+
+        return {columns, dataSource};
+    }, [riskLevelRender, audioRender, modelRender, originalTextRender]);
+
+    const renderDom = useCallback(data => {
+        const newData = [];
+        data.map(item => {
+            if (
+                HIDE_TEXT_LIST.includes(item.fieldTag)
+                || _.isNil(detailData[item.fieldTag])
+                // 多模详情中不展示 图片、文本内容
+                || (SERVICEID_LIST.POST_MULTIMODAL === serviceId && (['text', 'imgUrl'].includes(item.fieldTag)))
+            ) {
+                newData.push(<div />);
+            }
+            else if (item.fieldTag === HISTORY_COLUMN.MODEL_CORE_FEATURES) {
+                if (RULE_SPECIAL_LIST.includes(detailData.model) && detailData[item.fieldTag]) {
+                    newData.push(riskTopRender(detailData[item.fieldTag]));
+                }
+            }
+            else {
+                if (inputTableRenderList.includes(item.fieldTag)) {
+                    const tableObject = getTableData(detailData?.[item.fieldTag]);
+                    if (tableObject.columns.length) {
+                        newData.push(
+                            <div className={styles['main-content']} key={item.uuid}>
+                                <p className={styles.title}>{t(item.name)}</p>
+                                <Table
+                                    dataSource={tableObject.dataSource}
+                                    columns={formatUs(tableObject.columns, ['title'], t)}
+                                    pagination={false}
+                                />
+                            </div>
+                        );
+                    }
+                    // 此处bug会多次循环，不能循环配置的列表字段，应该判断该字段为列表字段时直接渲染列表
+                    // inputTableRenderList.forEach(tableItem => {
+                    //     const tableObject = getTableData(detailData[tableItem]);
+                    //     if (tableObject.columns.length) {
+                    //         newData.push(
+                    //             <div className={styles['main-content']} key={item.uuid}>
+                    //                 <p className={styles.title}>{t(item.name)}</p>
+                    //                 <Table
+                    //                     dataSource={tableObject.dataSource}
+                    //                     columns={formatUs(tableObject.columns, ['title'], t)}
+                    //                     pagination={false}
+                    //                 />
+                    //             </div>
+                    //         );
+                    //     }
+                    // });
+                }
+                else if (HISTORY_COLUMN.HAS_KB_TYPE === item.fieldTag) { // 代答信息
+                    newData.push(
+                        <div>
+                            <p className={styles.title}>{t('代答信息')}</p>
+                            <div className={styles['detail-item']} key={item.uuid}>
+                                <span className={styles['item-name']}>{item.name}:</span>
+                                <span>
+                                    {getItemValue(item.fieldTag, detailData[item.fieldTag])}
+                                    {detailItemRender(item, detailData[item.fieldTag])}
+                                </span>
+                            </div>
+                        </div>
+                    );
+                }
+                else if (HISTORY_COLUMN.CONTENT === item.fieldTag) { // 检测内容
+                    newData.push(
+                        <div className={styles['detail-item']} key={item.uuid}>
+                            <span className={styles['item-name']}>{item.name}:</span>
+                            <span>
+                                {contentRender(detailData[item.fieldTag])}
+                            </span>
+                        </div>
+                    );
+                }
+                else if (HISTORY_COLUMN.MULTI_CONTENTS === item.fieldTag) { // 检测内容
+                    newData.push(
+                        <div className={styles['detail-item']} key={item.uuid}>
+                            <span className={styles['item-name']}>{item.name}:</span>
+
+                            <span>
+                                <MultiContentsRender data={detailData[item.fieldTag]} record={detailData} />
+                            </span>
+                        </div>
+                    );
+                }
+                else if (serviceId === 'POST_IMG' && item.fieldTag === 'aiText') {
+                    newData.push(
+                        <div className={styles['detail-item']} key={item.uuid}>
+                            <span className={styles['item-name']}>{item.name}:</span>
+                            <span>
+                                <SMImage width={470} height={200} url={detailData[item.fieldTag]} fallbackSrc={detailData[item.fieldTag]} />
+                            </span>
+                        </div>
+                    );
+                }
+                else {
+                    const value = item.fieldTag === HISTORY_COLUMN.TYPE
+                        ? detailData[item.fieldTag].replace(HIDE_TEXT, '') // 风险识别类型隐藏BUILTIN  http://jira.ishumei.com/browse/TJCPYFRW-3797
+                        : detailData[item.fieldTag];
+                    newData.push(
+                        <div className={clsx(styles['detail-item'], styles.content)} key={item.uuid}>
+                            <span className={styles['item-name']}>{item.name}:</span>
+                            <span>
+                                {getItemValue(item.fieldTag, value)}
+                                {detailItemRender(item, detailData[item.fieldTag])}
+                            </span>
+                        </div>
+                    );
+                }
+            }
+            if (item.fieldTag === HISTORY_COLUMN.URL && [SERVICEID_LIST.POST_VIDEO].includes(serviceId)) {
+                newData.unshift(
+                    <div style={{height: '280px', width: '100%'}} key={item.uuid}>
+                        <SMVideo
+                            id={detailData[item.fieldTag]}
+                            width="508"
+                            height="280"
+                            src={detailData[item.fieldTag]}
+                        />
+                    </div>
+                );
+            }
+        });
+
+        return newData;
+    }, [detailData, serviceId, detailItemRender, getItemValue, getTableData]);
+
+    const imageItemRender = useCallback(() => {
+        let imgUrl = detailData.choseImgUrl || detailData.imgUrl || detailData.imgFileUrl;
+        imgUrl = replaceProtocol(imgUrl, Cookie.get(BASEIC_LIST.ORGANINZATION));
+        const fallbackSrc = detailData.imgUrl; // 客户图片地址， 当choseImgUrl加载失败 使用客户地址
+
+        return (
+            <div className={styles['main-content']} key={imgUrl}>
+                {<SMImage width={570} height={200} url={imgUrl} fallbackSrc={fallbackSrc} />}
+            </div>
+        );
+    }, [detailData]);
+
+    const getTableName = useCallback(() => {
+        const outputList = headerData.output || [];
+        let otherName = t('命中风险列表');
+        let videoName = t('风险视频截帧（识别结果为拒绝和审核的截帧）');
+        outputList.map(item => {
+            if ([HISTORY_COLUMN.AUDIO_EVIDENCE_TWO, HISTORY_COLUMN.AUDIO_EVIDENCE].includes(item.fieldTag)) {
+                otherName = item.name;
+            }
+            if (item.fieldTag === HISTORY_COLUMN.RESULT) {
+                videoName = item.name;
+            }
+        });
+        return {
+            [HISTORY_COLUMN.AUDIO_EVIDENCE_TWO]: otherName,
+            [HISTORY_COLUMN.RESULT]: videoName,
+        };
+    }, [headerData]);
+
+    const getResuleData = useCallback(() => {
+        const {header = [], value = []} = detailData[HISTORY_COLUMN.RESULT] || {};
+        let cloumnsData = [];
+        cloumnsData = header.map(item => {
+            const obj = {
+                title: item.value,
+                key: item.key,
+            };
+            switch (item.key) {
+                case HISTORY_COLUMN.TEXT:
+                case HISTORY_COLUMN.IMG_TEXT:
+                case HISTORY_COLUMN.OCR_TEXT:
+                    obj.type = RENDER_TYPE.HIEG_LIGHT;
+                    break;
+                case HISTORY_COLUMN.RISK_LEVEL:
+                    obj.type = HISTORY_COLUMN.RISK_LEVEL;
+                    break;
+                default :
+                    obj.type = HISTORY_COLUMN.TEXT;
+                    break;
+            }
+            return obj;
+        });
+
+        return {
+            cloumnsData,
+            tableData: value,
+        };
+    }, [detailData]);
+
+    const imgListRender = useCallback(() => {
+        const {cloumnsData, tableData} = getResuleData();
+
+        return (
+            <div className={styles['main-content']} key={getTableName()[HISTORY_COLUMN.RESULT]}>
+                <span className={styles.title}>{t(getTableName()[HISTORY_COLUMN.RESULT])}</span>
+                {<ImgSliderDetail sliderWidth={512} dataSource={tableData} colunms={cloumnsData} />}
+            </div>
+        );
+    }, [getTableName, getResuleData]);
+
+    // 过滤掉需要特殊处理的特征信息字段
+    const featureFields = headerData?.[FILED_SET_DETAIL.FEATURE]?.filter(item => !FEATURE_NEED_FORMAT.includes(item.fieldTag)) || [];
+
+    // 处理需要特殊处理的特征信息字段
+    const formatFeatureSpecialFields = () => {
+        const getSpecialName = fieldTag => {
+            return _.find(headerData?.[FILED_SET_DETAIL.FEATURE], {fieldTag})?.name || fieldTag;
+        };
+        return (
+            FEATURE_NEED_FORMAT.map(item => detailData[item] && (
+                <div className={styles['detail-item']} style={{color: '#60718c'}} key={item}>
+                    <span className={styles['item-name']}>{getSpecialName(item)}:</span>
+                    {formatSpecialFeature(detailData[item])}
+                </div>
+            ))
+        );
+    };
+
+    const inputDataRender = () => {
+        const objectRenderData = _.pickBy(detailData?.inputParams, _.isPlainObject);
+        const textRenderData = _.omitBy(detailData?.inputParams, _.isPlainObject);
+
+        return (
+            <div className={styles['main-content']}>
+                <div
+                    style={{
+                        color: '#13cbb9',
+                        cursor: 'pointer',
+                        margin: '0 2px 5px 0',
+                    }}
+                >
+                    <span onClick={() => setShowExtra(prev => !prev)} style={{marginRight: 3}}>
+                        {t(showExtra ? '收起更多信息' : '展开更多信息')}
+                    </span>
+                    <img
+                        src={showExtra ? imgClose : imgOpen}
+                        width={8}
+                        height={6}
+                    />
+                </div>
+                {showExtra && (
+                    <div>
+                        { _.map(_.keys(textRenderData), extraItem => {
+                            const extraValue = textRenderData?.[extraItem];
+                            return (
+                                <div className={styles['detail-item']} key={extraItem}>
+                                    <span className={styles['item-name']}>{extraItem}:</span>
+                                    <span className={styles['item-name']}>
+                                        {_.toString(extraValue)}
+                                    </span>
+                                </div>
+                            );
+                        })}
+                        {_.map(_.keys(objectRenderData), extraItem => {
+                            const extraValue = objectRenderData?.[extraItem];
+                            if (_.isPlainObject(extraValue)) {
+                                return (
+                                    <div>
+                                        <div className={styles['detail-item']} key={extraItem}>
+                                            <span className={styles['item-name']}>{extraItem}:</span>
+                                        </div>
+                                        {_.map(_.keys(extraValue), extraSecondItem => {
+                                            const extraSecondValue = extraValue?.[extraSecondItem];
+                                            return (
+                                                <div
+                                                    className={styles['detail-item']}
+                                                    style={{marginLeft: 30}}
+                                                    key={extraSecondItem}
+                                                >
+                                                    <span className={styles['item-name']}>{extraSecondItem}:</span>
+                                                    <span>
+                                                        {_.toString(extraSecondValue)}
+                                                    </span>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                );
+                            }
+                        })}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const otherObj = getTableData(otherData);
+
+
+    const getHistoryData = useCallback(async dataId => {
+        const requestParams = {
+            organization,
+            count: 5000,
+            offset: 0,
+            isAll: 1,
+            search: [
+                {
+                    fieldTag: 'requestId',
+                    method: 'Term',
+                    type: 'string',
+                    value: dataId,
+                },
+            ],
+            startTime: queryParams.startTime,
+            endTime: queryParams.endTime,
+            serviceId: 'GLOBAL',
+        };
+        const result = await getHistoryList(requestParams);
+        if (result?.data?.code === 1100) {
+            setHeaderData(prevHeader => {
+                const newHeader = _.cloneDeep(prevHeader);
+                newHeader.input.push(
+                    {
+                        fieldTag: 'aiText',
+                        name: '用户输入内容',
+                        status: '1',
+                        uuid: randomStr(32),
+                    }
+                );
+                return newHeader;
+            });
+
+            setDetailData(prevDetail => {
+                const newDetail = _.cloneDeep(prevDetail);
+                const data = result?.data?.contents?.[0];
+                newDetail.aiText = serviceId === 'POST_IMG' ? data?.choseImgUrl || data?.imgUrl || data?.imgFileUrl : data?.text || '-';
+                return newDetail;
+            });
+        }
+    }, [organization, queryParams, serviceId]);
+
+    useEffect(() => {
+        if (!visible) {
+            return;
+        }
+        if (!(['POST_TEXT', 'POST_IMG'].includes(serviceId))) {return;}
+        const dataId = detailData?.dataId;
+        if (!dataId) {return;}
+        if (!DATA_ID_ORG.includes(organization)) {return;}
+        if (hasFetchedRef.current === dataId) {return;}
+        hasFetchedRef.current = dataId;
+        getHistoryData(dataId);
+    }, [
+        visible,
+        organization,
+        detailData?.dataId,
+        propDetailData,
+        propHeaderData,
+        serviceId,
+        getHistoryData,
+    ]);
+
+
+    useEffect(() => {
+        if (visible) {
+            hasFetchedRef.current = null;
+            setHeaderData(propHeaderData);
+            setDetailData(propDetailData);
+        }
+    }, [propHeaderData, propDetailData, visible]);
+
+    return (
+        <Drawer
+            visible={visible}
+            closable
+            destroyOnClose
+            width={800}
+            onClose={onClose}
+        >
+            <span className={styles.tips}>{t('可以使用方向键快速上一条（←）、下一条（→）切换')}</span>
+            <div
+                className={styles['main-content']}
+                style={detailData.inputParams ? {
+                    marginBottom: 6,
+                } : {}}
+            >
+                <p className={styles.title}>{t('输入信息')}</p>
+                {hasImgItem ? imageItemRender() : null}
+                {renderDom(headerData.input || [])}
+            </div>
+            {detailData.inputParams && inputDataRender()}
+            <div className={styles['main-content']}>
+                <p className={styles.title}>{t('输出信息')}</p>
+                {renderDom(headerData.output || [])}
+            </div>
+            {headerData?.[FILED_SET_DETAIL.FEATURE] && headerData?.[FILED_SET_DETAIL.FEATURE]?.length > 0 && (
+                <div className={styles['main-content']}>
+                    <p className={styles.title}>
+                        {t('特征信息')}
+                    </p>
+                    {renderDom(featureFields)}
+                    {formatFeatureSpecialFields()}
+                </div>
+            )}
+            {hasImgList && imgListRender()}
+            {
+                otherObj.columns.length
+                    ? (
+                        <div className={styles['main-content']}>
+                            <p className={styles.title}>{t(getTableName()[HISTORY_COLUMN.AUDIO_EVIDENCE_TWO])}</p>
+                            <Table
+                                dataSource={otherObj.dataSource}
+                                columns={formatUs(otherObj.columns, ['title'], t)}
+                                pagination={otherObj.dataSource.length > 10}
+                            />
+                        </div>
+                    )
+                    : <div />
+            }
+            {/* 此处是后续需要展示位列表形式的字段配置 */}
+            {TABLE_FIELDS.map((item, index) => {
+                if (detailData?.[item.key] && !_.isEmpty(detailData?.[item.key])) {
+                    const tableData = getTableData(detailData?.[item.key]);
+                    return (
+                        <div className={styles['main-content']} key={item.key || index}>
+                            <p className={styles.title}>{t(item.name)}</p>
+                            <Table
+                                dataSource={tableData.dataSource}
+                                columns={formatUs(tableData.columns, ['title'], t)}
+                                pagination={tableData.dataSource.length > 10}
+                            />
+                        </div>
+                    );
+                }
+            })}
+            {/* 网页显示图文详情 */}
+            {
+                serviceId === SERVICEID_LIST.POST_ARTICLE ? <ImgTextDetail articleList={articleList} /> : <div />
+            }
+
+        </Drawer>
+    );
+};
+export default NewHistoryDetailDrawer;