admin2 1.0.0

package/src/pages/tj/postImg/list/postImg/ImgSimilar/components/MultiSelect/index.tsx

@@ -0,0 +1,118 @@
+import {Select, Tooltip} from 'antd';
+import _ from 'lodash';
+import {useLanguage} from '@/hooks';
+
+const {Option} = Select;
+
+const MultiSelect = props => {
+    const {
+        options = [],
+        labelValue = 'value',
+        labelName = 'name',
+        labelKey = 'id',
+        selectParams = {},
+        isAddAll = false,
+        value,
+        onChange,
+        id,
+        ...antdParams
+    } = props;
+
+    const {t} = useLanguage();
+
+    const mulitiSelectOptions = {
+        showSearch: true,
+        mode: 'multiple',
+        allowClear: true,
+        autoClearSearchValue: false,
+        optionFilterProp: 'children',
+        maxTagPlaceholder: val => {
+            const title = val?.map((item, index) => {
+                return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <div key={index}>{item.label}</div>
+                );
+            });
+            return (
+                <Tooltip title={title} overlayInnerStyle={{width: 400, maxHeight: 450, overflowY: 'auto'}}>
+                    <span> ...</span>
+                </Tooltip>
+            );
+        },
+        ...selectParams,
+    };
+
+    const handleChange = values => {
+        if (_.includes(values, 'all')) {
+            if (_.last(values) === 'all') {
+                onChange?.(['all']);
+            }
+            else {
+                onChange?.([_.last(values)]);
+            }
+        }
+        else {
+            onChange?.(values);
+        }
+    };
+
+
+    return (
+        <Select
+            {...mulitiSelectOptions}
+            value={value}
+            showArrow
+            dropdownRender={menu => (
+                <>
+                    {menu}
+                    {/* 此处为多选，选择后，勾选所有内容 */}
+                    {isAddAll && (
+                        <>
+                            <a
+                                style={{paddingRight: '18px', float: 'right', marginTop: 2}}
+                                onClick={() => {
+                                    const allValue = options?.map(item => item[labelValue]);
+                                    onChange?.(allValue);
+                                }}
+                            >
+                                {t('全选')}
+                            </a>
+                            <a
+                                style={{paddingRight: '18px', float: 'right', marginTop: 2}}
+                                onClick={() => onChange?.([])}
+                            >
+                                {t('取消全选')}
+                            </a>
+                        </>
+                    )}
+                </>
+            )}
+            onChange={handleChange}
+            {...(antdParams || {})}
+        >
+            {isAddAll && (
+                <Option
+                    value={'all'}
+                    key={'all'}
+                >
+                    {t('全部')}
+                </Option>
+            )}
+            {options?.map(item => (
+                <Option
+                    value={item[labelValue]}
+                    key={item[labelValue] + (item[labelKey] || '')}
+                >
+                    {item.icon && (
+                        <span style={{marginRight: 6, position: 'relative', top: '2px', display: 'inline-block'}}>
+                            {item.icon}
+                        </span>
+                    )}
+                    {item[labelName] + '（' + item[labelValue] + '）'}
+                </Option>
+            ))}
+        </Select>
+    );
+};
+
+export default MultiSelect;

package/src/pages/tj/postImg/list/postImg/ImgSimilar/components/SimilarUpload/checkImageExist.ts

@@ -0,0 +1,36 @@
+// 仅校验浏览器 Image 对象支持的格式，无法校验的格式认为成功
+export const checkImageExist = (imgurl, res) => {
+    return new Promise(resolve => {
+        const results = { success: [], errors: [] };
+        const validFormats = /\.(jpg|jpeg|png|gif)$/i; // 仅校验这些格式
+
+        const checkImage = index => {
+            if (index === res.length) {
+                resolve(results);
+                return;
+            }
+
+            const url = res[index].trim();
+
+            // 如果不是可校验的图片格式，认为成功
+            if (!validFormats.test(url)) {
+                results.success.push(url);
+                checkImage(index + 1);
+                return;
+            }
+
+            const ImgObj = new Image();
+            ImgObj.src = url;
+            ImgObj.onload = () => {
+                results.success.push(url);
+                checkImage(index + 1);
+            };
+            ImgObj.onerror = (err :any) => {
+                results.errors.push({ ...err, imgurl: url });
+                checkImage(index + 1);
+            };
+        };
+
+        checkImage(0);
+    });
+};

package/src/pages/tj/postImg/list/postImg/ImgSimilar/components/SimilarUpload/constants.ts

@@ -0,0 +1,25 @@
+const HTTP_CODE = {
+    SUCCESS: 1100,
+    ERROR: 1902,
+};
+const FILE_STATUS = {
+    DONE: 'done',
+    ERROR: 'error',
+    UPLOADING: 'uploading',
+};
+const allowedTypes = [
+    'image/jpeg', 'image/jpg', 'image/png', 'image/webp',
+];
+
+const FILE_MAX_NUMBER = 200;
+const SIMPLE_MAX_SIZE = 50;
+const UPLOAD_URL = '/webapi/generalization/uploadJpeg';
+
+export {
+    HTTP_CODE,
+    FILE_STATUS,
+    allowedTypes,
+    UPLOAD_URL,
+    FILE_MAX_NUMBER,
+    SIMPLE_MAX_SIZE,
+};

package/src/pages/tj/postImg/list/postImg/ImgSimilar/components/SimilarUpload/getBase64.ts

@@ -0,0 +1,9 @@
+const getBase64 = file =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+
+export default getBase64;

package/src/pages/tj/postImg/list/postImg/ImgSimilar/components/SimilarUpload/index.less

@@ -0,0 +1,306 @@
+.img-upload-container {
+    .result-show {
+        background: #F4F6FA;
+    }
+    .img-upload-container-action {
+        float: right;
+        position: relative;
+        top: -33px;
+    }
+    .sm-upload-container {
+        .default-container {
+            .button-form {
+                background: #bd7a7a;
+            }
+            :global {
+                .ant-upload.ant-upload-select.ant-upload-select-picture-card {
+                    width: 210px !important;
+                    height: 150px !important;
+                    background: #F4F7FA;
+                    border: 1px dashed #AAB3CA;
+                    &:hover {
+                        border: 1px dashed #13CBB9 !important;
+                    }
+                }
+                .ant-upload {
+                    transition: color .3s ease;
+                    &:hover {
+                        color: #13CBB9;
+                    }
+                }
+                .ant-upload-list.ant-upload-list-picture-card {
+                    margin: 0 16px 10px 16px;
+                    max-height: 470px;
+                    min-height: 200px;
+                    overflow-y: auto;
+                }
+                .anticon-plus {
+                    font-size: 20px;
+                    border: none;
+                }
+            }
+            .ant-upload-picture-card-wrapper {
+                display: flex;
+                background: #F4F6FA;
+            }
+        }
+        .init-container {
+            background-color: #fff;
+            height: 187px;
+            margin-bottom: 0;
+            position: relative;
+            width: 100%;
+            text-align: center;
+            border-radius: 2px;
+            cursor: pointer;
+            transition: border-color .3s;
+            .ant-upload-list {
+                margin: 0;
+            }
+            .ant-upload-drag-icon {
+                display: block;
+                margin-top: 0;
+            }
+            :global {
+                .ant-upload-picture-card-wrapper, .ant-upload-list-picture-card, .ant-upload-select-picture-card {
+                    width: 100%;
+                    height: 187px;
+                }
+            }
+            .ant-upload-select-picture-card {
+                border: 0px solid rgba(155,167,181,.42) !important;
+            }
+            .ant-upload {
+                display: block;
+                padding-top: 20px;
+            }
+        }
+    
+        :global {
+            .ant-upload-list-picture-card .ant-upload-list-item {
+                background-color: #E8E8E8 !important;
+                width: 210px;
+                height: 150px;
+            }
+        }
+    }
+    :global {
+        .ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+            img {
+                object-fit: cover !important;
+            }
+        }
+        .ant-popover-buttons {
+            margin-top: 10px;
+        }
+        .ant-upload-list>div{
+            width: auto;
+            height: auto;
+            margin-right: 20px;
+        }
+        .ant-upload-list-item-actions {
+            display: flex;
+            align-items: center;
+            a {
+                height: 100%;
+                opacity: 1 !important;
+                pointer-events: auto !important;
+            }
+            .anticon-eye, .anticon-delete {
+                color: #fff;
+            }
+            Button {
+                &:hover {
+                    background: none;
+                }
+            }
+        }
+        .anticon-plus {
+            padding: 2px;
+            border: 1px solid #13CBB9;
+            border-radius: 50%;
+            font-size: 14px;
+        }
+        .ant-upload-list-picture-card .ant-upload-list-item-thumbnail{
+            font-size: 12px;
+        }
+        .ant-form-item {
+            margin-bottom: 0px;
+        }
+    }
+    .img-upload-container-input {
+        display: flex;
+        img {
+            margin-bottom: 2px;
+            margin: 0 6px 2px 0;
+        }
+    }
+    .img-upload-container-description {
+        color: #999;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #738199;
+        line-height: 17px;
+        margin-top: 15px;
+        margin: 15px 0 15px 0;
+    }
+    p {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #738199;
+        line-height: 17px;
+        margin-top: 15px;
+    }
+}
+
+.little-img-upload-container {
+    .result-show {
+        background: #F4F6FA;
+    }
+    .img-upload-container-action {
+        float: right;
+        position: relative;
+        top: -33px;
+    }
+    .sm-upload-container {
+        .default-container {
+            .button-form {
+                background: #bd7a7a;
+            }
+            :global {
+                .ant-upload.ant-upload-select.ant-upload-select-picture-card {
+                    width: 140px !important;
+                    height: 100px !important;
+                    background: #F4F7FA;
+                    border: 1px dashed #AAB3CA;
+                    &:hover {
+                        border: 1px dashed #13CBB9 !important;
+                    }
+                }
+                .ant-upload {
+                    transition: color .3s ease;
+                    &:hover {
+                        color: #13CBB9;
+                    }
+                }
+                .ant-upload-list.ant-upload-list-picture-card {
+                    margin: 0 16px 10px 16px;
+                    max-height: 320px;
+                    min-height: 200px;
+                    overflow-y: auto;
+                }
+                .anticon-plus {
+                    font-size: 20px;
+                    border: none;
+                }
+            }
+            .ant-upload-picture-card-wrapper {
+                display: flex;
+                background: #F4F6FA;
+            }
+        }
+        .init-container {
+            background-color: #fff;
+            height: 187px;
+            margin-bottom: 0;
+            position: relative;
+            width: 100%;
+            text-align: center;
+            border-radius: 2px;
+            cursor: pointer;
+            transition: border-color .3s;
+            .ant-upload-list {
+                margin: 0;
+            }
+            .ant-upload-drag-icon {
+                display: block;
+                margin-top: 0;
+            }
+            :global {
+                .ant-upload-picture-card-wrapper, .ant-upload-list-picture-card, .ant-upload-select-picture-card {
+                    width: 100%;
+                    height: 187px;
+                }
+            }
+            .ant-upload-select-picture-card {
+                border: 0px solid rgba(155,167,181,.42) !important;
+            }
+            .ant-upload {
+                display: block;
+                padding-top: 20px;
+            }
+        }
+    
+        :global {
+            .ant-upload-list-picture-card .ant-upload-list-item {
+                background-color: #E8E8E8 !important;
+                width: 140px;
+                height: 100px;
+            }
+        }
+    }
+    :global {
+        .ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+            img {
+                object-fit: cover !important;
+            }
+        }
+        .ant-upload-list>div{
+            width: auto;
+            height: auto;
+            margin-right: 20px;
+        }
+        .ant-upload-list-item-actions {
+            display: flex;
+            align-items: center;
+            a {
+                height: 100%;
+                opacity: 1 !important;
+                pointer-events: auto !important;
+            }
+            .anticon-eye, .anticon-delete {
+                color: #fff;
+            }
+            Button {
+                &:hover {
+                    background: none;
+                }
+            }
+        }
+        .anticon-plus {
+            padding: 2px;
+            border: 1px solid #13CBB9;
+            border-radius: 50%;
+            font-size: 14px;
+        }
+        .ant-upload-list-picture-card .ant-upload-list-item-thumbnail{
+            font-size: 12px;
+        }
+        .ant-form-item {
+            margin-bottom: 0px;
+        }
+    }
+    .img-upload-container-input {
+        display: flex;
+        img {
+            margin-bottom: 2px;
+            margin: 0 6px 2px 0;
+        }
+    }
+    .img-upload-container-description {
+        color: #999;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #738199;
+        line-height: 17px;
+        margin-top: 15px;
+        margin: 15px 0 15px 0;
+    }
+    p {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #738199;
+        line-height: 17px;
+        margin-top: 15px;
+    }
+}