admin2 1.0.0

package/src/components/RemindPage/index.less

@@ -0,0 +1,53 @@
+.count {
+    position: fixed;
+    bottom: 14px;
+    right: 0px;
+    z-index: 999;
+    width: 344px;
+    padding: 10px 14px 17px 20px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px 0px #c9dbf7;
+    p{
+        margin: 0;
+        padding: 0;
+    }
+
+
+
+    .title {
+        margin-bottom: 18px;
+        font-size: 16px;
+
+        .safe-hint {
+            display: inline-block;
+            margin-left: 8px;
+            color: #394b66;
+            font-weight: 500;
+            line-height: 22px;
+        }
+
+        .delete{
+            float: right;
+            color: #60718C;
+            font-size: 10px;
+        }
+    }
+    .text {
+        color: #60718c;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+    }
+    .footer{
+        margin-top: 14px;
+
+        .right-a{
+            float: right;
+            font-size: 14px;
+            background: #13CBB9;
+            padding: 4px 8px;
+            border-radius: 2px;
+            color: #fff;
+        }
+    }
+}

package/src/components/SMAlert/index.js

@@ -0,0 +1,169 @@
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * 提示组件
+ * tangjian
+ * 2025-02-10
+ */
+
+import {useMemo, useCallback} from 'react';
+
+import clsx from 'clsx';
+
+import { getDeepCleerUrl } from '@/utils/utils';
+
+require('./index.less');
+
+import succeed from './img/succeed.png';
+import warning from './img/warning.png';
+
+const productObj = {
+    POST_TEXT: {
+        succeed: 'free AI text moderation entries.',
+        warning: 'Dear user, your free trial for AI text moderation has been used up.',
+    },
+    POST_TEXT_EN: {
+        succeed: 'free AI text moderation entries.',
+        warning: 'Dear user, your free trial for AI text moderation has been used up.',
+    },
+    POST_TEXT_AR: {
+        succeed: 'free AI text moderation entries.',
+        warning: 'Dear user, your free trial for AI text moderation has been used up.',
+    },
+    POST_IMG: {
+        succeed: 'free image moderation. If you have integration issues or want to upgrade, please',
+        warning: 'Dear user, your free trial for image moderation has been used up.',
+    },
+    POST_ARTICLE: {
+        succeed: 'free web content moderation entries.',
+        warning: 'Dear user, your free trial for web content moderation has been used up.',
+    },
+    POST_AUDIO: {
+        succeed: 'hours of free audio moderation.',
+        warning: 'Dear user, your free trial for audio moderation has been used up.',
+    },
+    POST_AUDIO_EN: {
+        succeed: 'hours of free audio moderation.',
+        warning: 'Dear user, your free trial for audio moderation has been used up.',
+    },
+    POST_AUDIO_AR: {
+        succeed: 'hours of free audio moderation.',
+        warning: 'Dear user, your free trial for audio moderation has been used up.',
+    },
+    POST_AUDIO_B: {
+        succeed: 'hours of free audio moderation.',
+        warning: 'Dear user, your free trial for audio moderation has been used up.',
+    },
+
+    POST_AUDIOSTREAM: {
+        succeed: 'hours of free audio streaming moderation.',
+        warning: 'Dear user, your free trial for audio streaming moderation has been used up.',
+    },
+    POST_AUDIOSTREAM_EN: {
+        succeed: 'hours of free audio streaming moderation.',
+        warning: 'Dear user, your free trial for audio streaming moderation has been used up.',
+    },
+    POST_AUDIOSTREAM_AR: {
+        succeed: 'hours of free audio streaming moderation.',
+        warning: 'Dear user, your free trial for audio streaming moderation has been used up.',
+    },
+    POST_AUDIOSTREAM_B: {
+        succeed: 'hours of free audio streaming moderation.',
+        warning: 'Dear user, your free trial for audio streaming moderation has been used up.',
+    },
+
+    POST_VIDEO: {
+        succeed: 'hours of free video moderation. ',
+        warning: 'Dear user, your free trial for video moderation has been used up.',
+    },
+    POST_VIDEOSTREAM: {
+        succeed: 'hours of free video streaming moderation.',
+        warning: 'Dear user, your free trial for video streaming moderation has been used up.',
+    },
+    POST_VIDEOSTREAM_EN: {
+        succeed: 'hours of free video streaming moderation.',
+        warning: 'Dear user, your free trial for video streaming moderation has been used up.',
+    },
+    POST_VIDEOSTREAM_AR: {
+        succeed: 'hours of free video streaming moderation.',
+        warning: 'Dear user, your free trial for video streaming moderation has been used up.',
+    },
+    POST_VIDEOSTREAM_B: {
+        succeed: 'hours of free video streaming moderation.',
+        warning: 'Dear user, your free trial for video streaming moderation has been used up.',
+    },
+    overview: {
+        succeed: 'You are on a free trial.',
+    },
+};
+
+const SMAlert = props => {
+    let {type, count, serviceId, usageStage} = props;
+
+    const getLink = (
+        <a
+            href="https://wa.me/8618302808016"
+            target="_blank"
+            rel="noreferrer"
+        >contact us
+        </a>
+    );
+
+    const solutionsLink = (
+        <a
+            href={getDeepCleerUrl('/portal/pricing')}
+            target="_blank"
+            rel="noreferrer"
+        >Enterprise solutions
+        </a>
+    );
+    const getTextDom = useMemo(() => {
+        let usedUpText;
+        if (serviceId === 'overview') {
+            switch (usageStage) {
+                case 0:
+                    usedUpText = (
+                        <p>You are on a free trial. If you have integration issues or want to upgrade, please {getLink}！</p>
+                    );
+                    break;
+                case 1:
+                    usedUpText = (
+                        <p>Dear user, you’re on a free trial – enjoy 2,000 image moderation credits! Need help integrating or curious about upgrades? please {getLink}！</p>
+                    );
+                    break;
+                case 2:
+                    usedUpText = (
+                        <p>You’ve used 80% of your free credits – great progress! Ready to scale up or explore more features? please {getLink}！</p>
+                    );
+                    break;
+                case 3:
+                    usedUpText = (
+                        <p>Dear user, your free credits have been fully used – Please feel free to {getLink} to upgrade or explore our {solutionsLink}!</p>
+                    );
+                    break;
+            }
+        }
+        else {
+            if (type === 'succeed') {
+                usedUpText = (
+                    <p>Enjoy {count} {productObj[serviceId]?.succeed} {getLink}!</p>
+                );
+            }
+            else {
+                usedUpText = (
+                    <p>{productObj[serviceId]?.warning} {getLink} now to upgrade!</p>
+                );
+            }
+        }
+        return usedUpText;
+    }, [type, count, serviceId]);
+
+    return (
+        <div className={clsx(`sm-alert-${type}`, 'sm-alert-content', productObj[serviceId]?.succeed ? '' : 'sm-alert-content-hide')}>
+            <img src={type === 'succeed' ? succeed : warning} width={20} height={20} />
+            <p>{getTextDom}</p>
+        </div>
+    );
+};
+
+export default SMAlert;

package/src/components/SMAlert/index.less

@@ -0,0 +1,36 @@
+.sm-alert-content {
+    width: 100%;
+    display: flex;
+    padding: 12px 24px;
+    justify-items: center;
+    margin-bottom: 12px;
+    border-radius: 2px;
+
+    img {
+        margin-right: 12px;
+    }
+    p {
+        font-family: Helvetica;
+        font-size: 14px;
+        font-weight: 400;
+        color: #394B66;
+
+        a {
+            color: #21BFBB;
+        }
+    }
+}
+
+.sm-alert-succeed {
+    border: 1px solid #21BFBB;
+    background-color: #E5F6FF;
+}
+
+.sm-alert-warning {
+    border: 1px solid #FFB85F;
+    background-color: #FFF6EB;
+}
+
+.sm-alert-content-hide {
+    display: none;
+}

package/src/components/SMAudio/index.jsx

@@ -0,0 +1,297 @@
+/* eslint-disable react/jsx-closing-tag-location */
+import { useEffect, useMemo, useState } from 'react';
+import { Slider, Popover, Tooltip, message } from 'antd';
+import moment from 'moment';
+import { DownloadOutlined, SoundOutlined } from '@ant-design/icons';
+
+import SMIcon from '@/components/SMIcon';
+import {useInterval, useLanguage} from '@/hooks';
+
+
+import styles from './index.less';
+
+
+const defaultSpeedOptions = [0.5, 1, 1.5, 2, 3];
+
+/**
+ * 音频组件
+ * @param audioUrl              音频URL
+ * @param audioId               音频ID
+ * @param audioType             组件类型 callout / list
+ * @param showSpeedFlag         是否显示倍速控件
+ * @param showDownloadFlag      是否显示下载控件
+ * @param showSilenceFlag       是否显示禁音键
+ * @param showProgressFlag      是否显示进度条
+ * @param showSimpleTimeFlag    是否显示单独播放时间
+ */
+
+const SMAudio = props => {
+    const {
+        audioType,
+        audioUrl,
+        audioId,
+        showSpeedFlag,
+        showDownloadFlag,
+        showSilenceFlag = false,
+        width = 150,
+        showProgressFlag = false,
+        showSimpleTimeFlag,
+        isPre,
+        setTableKey,
+    } = props;
+
+    const videoAndVideoStreamTableKey = useMemo(() => {
+        return ['postVideoAudioClips', 'videoStreamAudioClips', 'videoStreamEngAudioClips', 'videoStreamAlbAudioClips'];
+    }, []);
+
+
+    const {t} = useLanguage();
+
+    const [isPlay, setPlayStatus] = useState(false);
+    const [isSilence, setSilenceStatus] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [totalTime, setTotalTime] = useState(0);
+    const [speed, setSpeed] = useState(1);
+    const [speedVisible, setSpeedVisible] = useState(false);
+
+    // 播放轮询hooks
+    useInterval(
+        () => {
+            let currentAudio = document.getElementById(audioId);
+            setCurrentTime(currentAudio?.currentTime || 0);
+        },
+        isPlay ? 300 : null
+    );
+
+    // 操作函数
+    const operation = (type, val) => {
+        let currentAudio = document.getElementById(audioId);
+        if (!currentAudio) {
+            return;
+        }
+        switch (type) {
+            case 'pause':
+                setPlayStatus(false);
+                currentAudio.pause();
+                break;
+            case 'play':
+                setPlayStatus(true);
+                currentAudio.play();
+                break;
+            case 'updateCurrentTime':
+                currentAudio.currentTime = val;
+                currentAudio.play();
+                setPlayStatus(true);
+                break;
+            case 'silence':
+                setSilenceStatus(true);
+                currentAudio.volume = 0;
+                break;
+            case 'unSilence':
+                setSilenceStatus(false);
+                currentAudio.volume = 1;
+                break;
+            case 'speed':
+                setSpeed(val);
+                currentAudio.playbackRate = val;
+                setSpeedVisible(false);
+                break;
+            case 'download':
+                location.h;
+                break;
+        }
+    };
+
+    // audio就绪事件
+    const onAudioLoad = () => {
+        let currentAudio = document.getElementById(audioId);
+
+        if (currentAudio?.readyState > 0) {
+            setTotalTime(currentAudio.duration);
+        }
+    };
+
+    // audio播放完毕
+    const onPlayEnded = () => {
+        setTimeout(() => {
+            setPlayStatus(false);
+        });
+    };
+
+    useEffect(() => {
+        operation('pause');
+        let currentAudio = document.getElementById(audioId);
+        if (currentAudio) {
+            currentAudio.addEventListener('canplay', onAudioLoad);
+            currentAudio.addEventListener('ended', onPlayEnded);
+        }
+        return () => {
+            if (currentAudio) {
+                currentAudio.removeEventListener('canplay', onAudioLoad);
+                currentAudio.removeEventListener('ended', onPlayEnded);
+            }
+        };
+    }, [audioId]);
+
+    // 跨域文件路径、下载到本地的文件名
+    const downloadFile = (url, fileName) => {
+        let x = new XMLHttpRequest();
+        x.open('GET', url, true);
+        x.responseType = 'blob';
+        x.onload = function (e) {
+            let url = window.URL.createObjectURL(x.response);
+            let a = document.createElement('a');
+            a.href = url;
+            a.download = fileName;
+            a.click();
+        };
+        x.send();
+        x.onerror = () => {
+            window.open(__ASSETS_PREFIX__ + url);
+        };
+    };
+
+    // 倍速列表
+    const speedOptions = () => {
+        return (
+            <div className={styles['audio-speed-select']}>
+                {defaultSpeedOptions.map(val => {
+                    return (
+                        <div
+                            onClick={() => {
+                                operation('speed', val);
+                            }}
+                            className={styles['audio-speed-select-item']}
+                            key={val}
+                        >
+                            {val.toFixed(1)}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    /**
+     *复制
+     * @param {} text
+     * @returns
+     */
+    const execCoy = text => {
+        const input = document.createElement('INPUT');
+        input.style.opacity = 0;
+        input.style.position = 'absolute';
+        input.style.left = '-100000px';
+        document.body.appendChild(input);
+        input.value = text;
+        input.select();
+        input.setSelectionRange(0, text.length);
+        if (document.execCommand('copy')) {
+            message.success(t('复制成功'));
+            document.execCommand('copy');
+            document.body.removeChild(input);
+        }
+
+        return true;
+    };
+
+    // audioId改变的话播放时间回到开始
+    useEffect(() => {
+        if (audioId) {
+            setCurrentTime(0);
+        }
+    }, [audioId]);
+
+    return (
+        <div className={styles['audio-wrapper']}>
+            <div
+                onClick={() => {
+                    execCoy(audioUrl);
+                }}
+            >
+                <Tooltip
+                    title={<span
+                        style={{cursor: 'pointer'}}
+                    >
+                        {videoAndVideoStreamTableKey.includes(setTableKey)
+                            ? isPre ? t('本条音频片段前10s URL:') : t('本条音频片段 URL:')
+                            : isPre ? t('本条截帧前10s URL:') : t('本条截帧 URL:')}<br />{audioUrl}
+                    </span>}
+                    placement="left"
+                >
+                    <span>
+                        <SMIcon
+                            type={isPlay ? 'icon-bofang2' : (isPre ? 'icon-shangyipianduan' : 'icon-zanting1')}
+                            onClick={event => {
+                                event.stopPropagation();
+                                operation(isPlay ? 'pause' : 'play');
+                            }}
+                        />
+                    </span>
+                </Tooltip>
+            </div>
+
+            {showSimpleTimeFlag
+            && (
+                <span style={{marginLeft: '8px'}}>
+                    {moment((isPlay ? currentTime : totalTime) * 1000).format('mm:ss')}
+                </span>
+            )}
+            {showProgressFlag && (
+                <div className={styles['audio-progress']}>
+                    <Slider
+                        value={totalTime > 0 ? (currentTime / totalTime * 100) : 0}
+                        tooltipVisible={false}
+                        onAfterChange={e => {
+                            operation('updateCurrentTime', (totalTime * e) / 100);
+                        }}
+                        onChange={e => {
+                            operation('pause');
+                            setCurrentTime((totalTime * e) / 100);
+                        }}
+                    />
+                    <span className={styles['audio-progress-start']}>{moment(currentTime * 1000).format('mm:ss')}</span>
+                    <span className={styles['audio-progress-end']}>{moment(totalTime * 1000).format('mm:ss')}</span>
+                </div>
+            )}
+
+            {showSilenceFlag && (
+                <SoundOutlined
+                    onClick={() => {
+                        operation(isSilence ? 'unSilence' : 'silence');
+                    }}
+                    className={styles['audio-sound']}
+                    style={{ color: isSilence ? '#cfd8e4' : '#75e8e9' }}
+                />
+            )}
+
+            {showSpeedFlag && (
+                <Popover
+                    overlayStyle={{ width: 50, overflow: 'hidden' }}
+                    content={speedOptions()}
+                    visible={speedVisible}
+                    onVisibleChange={setSpeedVisible}
+                    trigger="click"
+                >
+                    <div className={styles['audio-speed']}>
+                        <span>{t('倍速')}</span>
+                        <span>{speed.toFixed(1)}</span>
+                    </div>
+                </Popover>
+            )}
+            {showDownloadFlag && (
+                <DownloadOutlined
+                    onClick={() => {
+                        downloadFile(audioUrl, `${audioId}-audio`);
+                    }}
+                    className={styles['audio-download']}
+                    title={t('下载')}
+                />
+            )}
+
+            <audio id={audioId} src={audioUrl}></audio>
+        </div>
+    );
+};
+
+export default SMAudio;

package/src/components/SMAudio/index.less

@@ -0,0 +1,65 @@
+.audio-wrapper {
+    display: flex;
+    align-items: center;
+    border-radius: 40px;
+    svg{
+        width: 24px;
+        height: 24px;
+    }
+    .audio-play {
+        font-size: 20px;
+        color: #75e8e9;
+        cursor: pointer;
+    }
+    .audio-progress {
+        flex: 1;
+        margin: 0 15px;
+        position: relative;
+        margin-top: -4px;
+        .audio-progress-start {
+            position: absolute;
+            left: -2px;
+            bottom: -18px;
+            font-size: 13px;
+        }
+        .audio-progress-end {
+            position: absolute;
+            right: -10px;
+            bottom: -18px;
+            font-size: 13px;
+        }
+    }
+    .audio-progress > :first-child {
+        margin: 0;
+    }
+    .audio-sound {
+        font-size: 16px;
+    }
+    .audio-speed {
+        font-size: 12px;
+        margin-left: 10px;
+        cursor: pointer;
+        span:first-child {
+            color: #333;
+        }
+        span:last-child {
+            color: #75e8e9;
+            margin-left: 3px;
+            font-weight: 600;
+        }
+    }
+    .audio-download {
+        font-size: 16px;
+        cursor: pointer;
+        margin-left: 10px;
+    }
+}
+.audio-speed-select {
+    width: 25px;
+    &-item:hover {
+        background-color: #ecf2f9;
+    }
+    &-item {
+        cursor: pointer;
+    }
+}

package/src/components/SMBackTop/index.js

@@ -0,0 +1,48 @@
+/**
+ * 返回顶部
+ * tangjian
+ * 20230829
+ */
+
+import {useEffect, useState, useCallback} from 'react';
+import clsx from 'clsx';
+
+import {SMIcon} from '@/components';
+
+require('./index.less');
+
+const SMBackTop = () => {
+
+    const [isShow, setIsShow] = useState(false);
+
+    const handleScroll = useCallback(() => {
+        const el = document.getElementById('top-left-layout-content');
+        setIsShow(el.scrollTop > window.outerHeight / 2);
+    }, []);
+
+    useEffect(() => {
+        const el = document.getElementById('top-left-layout-content');
+        el.addEventListener('scroll', handleScroll);
+
+        return () => {
+            el.removeEventListener('scroll', handleScroll);
+        };
+    }, [handleScroll]);
+
+
+    return (
+        <div className={clsx('sm-back-top-content', isShow ? '' : 'sm-back-top-content-hide')}>
+            <div
+                className="sm-back-top-content-div"
+                onClick={() => {
+                    const el = document.getElementById('top-left-layout-content');
+                    el.scrollTop = 0;
+                }}
+            >
+                <SMIcon type="icon-huidaodingbu1" />
+            </div>
+        </div>
+    );
+};
+
+export default SMBackTop;