@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

package/src/multi-part-editor/components/multipart-item-renderer.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { ContentType } from '@cozeloop/api-schema/evaluation';
-import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
-import { Button, TextArea } from '@coze-arch/coze-design';
-
-import { type MultipartItem } from '../type';
-import { VideoItemRenderer } from './video-item-renderer';
-import { ImageItemRenderer } from './image-item-renderer';
-
-interface MultipartItemRendererProps {
-  item: MultipartItem;
-  readonly?: boolean;
-  onChange: (item: MultipartItem) => void;
-  onRemove: () => void;
-}
-
-export const MultipartItemRenderer: React.FC<MultipartItemRendererProps> = ({
-  item,
-  readonly,
-  onChange,
-  onRemove,
-}) => {
-  const handleTextChange = (text: string) => {
-    onChange({
-      ...item,
-      text,
-    });
-  };
-
-  switch (item.content_type) {
-    case ContentType.Text:
-      return (
-        <div className="flex items-center gap-1">
-          <TextArea
-            value={item.text}
-            onChange={handleTextChange}
-            autosize={{ minRows: 1, maxRows: 3 }}
-            disabled={readonly}
-            placeholder="请输入文本信息"
-          />
-          {readonly ? null : (
-            <Button
-              icon={<IconCozTrashCan />}
-              color="secondary"
-              size="small"
-              onClick={onRemove}
-            />
-          )}
-        </div>
-      );
-
-    case ContentType.Image:
-      return (
-        <ImageItemRenderer
-          item={item}
-          onRemove={onRemove}
-          onChange={onChange}
-          readonly={readonly}
-        />
-      );
-    case 'Video':
-      return (
-        <VideoItemRenderer
-          item={item}
-          onRemove={onRemove}
-          onChange={onChange}
-          readonly={readonly}
-        />
-      );
-    default:
-      return null;
-  }
-};

package/src/multi-part-editor/components/url-input-modal.tsx

@@ -1,317 +0,0 @@
-/* eslint-disable @coze-arch/max-line-per-function */
-import React, { useState, useRef } from 'react';
-
-import { type Image as ImageProps } from '@cozeloop/api-schema/evaluation';
-import {
-  IconCozTrashCan,
-  IconCozPlus,
-  IconCozCheckMarkCircleFill,
-  IconCozCrossCircleFill,
-} from '@coze-arch/coze-design/icons';
-import {
-  Modal,
-  Button,
-  Image,
-  Spin,
-  Form,
-  type FormApi,
-  Typography,
-  Tag,
-  type ColumnProps,
-} from '@coze-arch/coze-design';
-
-import { LoopTable } from '../../table';
-
-import { ErrorTypeMap, type UploadAttachmentDetail } from '../type';
-
-interface UrlInputModalProps {
-  visible: boolean;
-  onConfirm: (results: ImageProps[]) => void;
-  onCancel: () => void;
-  maxCount?: number;
-  uploadImageUrl?: (
-    urls: string[],
-  ) => Promise<UploadAttachmentDetail[] | undefined>;
-  uploadType?: 'image' | 'video';
-  intranetUrlValidator?: (url: string) => boolean;
-}
-
-export const UrlInputModal: React.FC<UrlInputModalProps> = ({
-  visible,
-  onConfirm,
-  onCancel,
-  maxCount = 6,
-  uploadImageUrl,
-  uploadType = 'image',
-  intranetUrlValidator,
-}) => {
-  const [error, setError] = useState('');
-  const [isUploading, setIsUploading] = useState(false);
-  const [isUploaded, setIsUploaded] = useState(false);
-  const [uploadResults, setUploadResults] = useState<UploadAttachmentDetail[]>(
-    [],
-  );
-  const formRef = useRef<FormApi>();
-  // Validate helpers
-  const validateUrl = (url: string) => {
-    try {
-      new URL(url);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  // Upload logic
-  const handleUpload = async formValues => {
-    if (formValues?.urls?.length === 0) {
-      setError('请至少添加一个图片链接');
-      return;
-    }
-    setIsUploading(true);
-    setError('');
-    try {
-      const results = await uploadImageUrl?.(formValues?.urls);
-      setUploadResults(results || []);
-      setIsUploaded(true);
-    } catch (err) {
-      setError('上传失败，请重试');
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleConfirm = async () => {
-    if (!uploadImageUrl) {
-      const data = await formRef.current
-        ?.validate()
-        ?.catch(e => console.error(e));
-      if (Array.isArray(data?.urls)) {
-        onConfirm(
-          data?.urls?.map(item => ({
-            name: item,
-            url: item,
-            thumb_url: item,
-          })),
-        );
-      }
-      return;
-    }
-    if (isUploaded) {
-      const successResults = uploadResults.filter(
-        item => item.errorType === undefined,
-      );
-      onConfirm(
-        successResults.map(item => ({
-          name: item.image?.name,
-          url: item.originImage?.url,
-          uri: item.image?.uri,
-          thumb_url: item.image?.thumb_url,
-        })),
-      );
-    } else {
-      await formRef.current?.submitForm();
-    }
-  };
-
-  const handleCancel = () => {
-    setError('');
-    setIsUploading(false);
-    setIsUploaded(false);
-    setUploadResults([]);
-    onCancel();
-  };
-
-  // Dynamic form for URLs
-  const renderInputStage = () => (
-    <Form
-      initValues={{ urls: [''] }}
-      getFormApi={api => (formRef.current = api)}
-      onSubmit={uploadImageUrl ? handleUpload : undefined}
-    >
-      {({ formState, formApi }) => {
-        const urls: string[] = formState.values?.urls || [''];
-        const canAdd = urls.length < maxCount;
-        return (
-          <div>
-            {urls.map((_url, idx) => (
-              <div key={idx} className="flex  gap-2">
-                <Form.Input
-                  field={`urls[${idx}]`}
-                  label={{
-                    text: `${uploadType === 'image' ? '图片' : '视频'}${idx + 1}`,
-                    required: true,
-                  }}
-                  fieldClassName="flex-1"
-                  placeholder={`请输入${uploadType === 'image' ? '图片' : '视频'}链接，请使用公网域名`}
-                  rules={[
-                    {
-                      validator: (_, value, cb) => {
-                        if (!value) {
-                          cb(
-                            `请输入${uploadType === 'image' ? '图片' : '视频'}链接`,
-                          );
-                          return false;
-                        }
-                        if (
-                          intranetUrlValidator &&
-                          intranetUrlValidator(value)
-                        ) {
-                          cb('请使用公网域名');
-                          return false;
-                        }
-                        if (!validateUrl(value)) {
-                          cb('请输入有效的URL');
-                          return false;
-                        }
-                        return true;
-                      },
-                    },
-                  ]}
-                  className="w-full"
-                />
-                <Button
-                  size="small"
-                  color="secondary"
-                  icon={<IconCozTrashCan className="w-[14px] h-[14px]" />}
-                  onClick={() => {
-                    formApi.setValue(
-                      'urls',
-                      urls.filter((_, i) => i !== idx),
-                    );
-                  }}
-                  className="mt-[42px]"
-                  disabled={urls.length === 1}
-                />
-              </div>
-            ))}
-            <Button
-              color="primary"
-              disabled={!canAdd}
-              icon={<IconCozPlus />}
-              onClick={() => formApi.setValue('urls', [...urls, ''])}
-              className="mt-2"
-            >
-              添加
-              <Typography.Text
-                className="ml-1"
-                type="secondary"
-              >{`${urls.length}/${maxCount}`}</Typography.Text>
-            </Button>
-            {error ? (
-              <div className="text-red-500 text-sm mt-1">{error}</div>
-            ) : null}
-          </div>
-        );
-      }}
-    </Form>
-  );
-
-  const columns: ColumnProps<UploadAttachmentDetail>[] = [
-    {
-      title: '图片地址',
-      dataIndex: 'originImage.url',
-      width: 220,
-      ellipsis: { showTitle: true },
-    },
-    {
-      title: '图片预览',
-      dataIndex: 'originImage.url',
-      width: 120,
-      render: (url: string) => (
-        <Image
-          src={url}
-          width={60}
-          height={60}
-          imgStyle={{ objectFit: 'contain' }}
-        />
-      ),
-    },
-    {
-      title: '状态',
-      key: 'status',
-      align: 'left',
-      width: 200,
-      render: (record: UploadAttachmentDetail) => (
-        <div className="flex items-center">
-          <Tag
-            prefixIcon={
-              record?.errorType ? (
-                <IconCozCrossCircleFill />
-              ) : (
-                <IconCozCheckMarkCircleFill />
-              )
-            }
-            color={record?.errorType ? 'red' : 'green'}
-          >
-            {record?.errorType ? '失败' : '成功'}
-          </Tag>
-          <Typography.Text type="secondary" className="ml-1">
-            {record.errorType ? ErrorTypeMap[record.errorType] : ''}
-          </Typography.Text>
-        </div>
-      ),
-    },
-  ];
-
-  const renderResultStage = () => (
-    <div className="space-y-4">
-      <LoopTable
-        tableProps={{
-          columns,
-          dataSource: uploadResults,
-          rowKey: 'id',
-          pagination: false,
-          size: 'small',
-        }}
-      />
-    </div>
-  );
-
-  const getConfirmButtonText = () => {
-    if (!uploadImageUrl) {
-      return '确认';
-    }
-    if (isUploading) {
-      return '上传中...';
-    }
-    if (isUploaded) {
-      return `导入${uploadType === 'image' ? '图片' : '视频'}`;
-    }
-    return '上传';
-  };
-
-  return (
-    <Modal
-      title={`添加${uploadType === 'image' ? '图片' : '视频'}链接`}
-      visible={visible}
-      onCancel={handleCancel}
-      width={640}
-      footer={
-        <div className="flex justify-end">
-          <Button onClick={handleCancel} color="primary">
-            取消
-          </Button>
-          <Button
-            type="primary"
-            onClick={handleConfirm}
-            loading={isUploading}
-            // disabled={!isUploaded && urls.length === 0}
-          >
-            {getConfirmButtonText()}
-          </Button>
-        </div>
-      }
-    >
-      {isUploading ? (
-        <div className="flex items-center justify-center py-8">
-          <Spin size="large" />
-          <span className="ml-2">正在上传图片...</span>
-        </div>
-      ) : null}
-
-      {!isUploading && !isUploaded && renderInputStage()}
-      {!isUploading && isUploaded ? renderResultStage() : null}
-    </Modal>
-  );
-};

package/src/multi-part-editor/components/video-item-renderer.tsx

@@ -1,145 +0,0 @@
-/* eslint-disable @coze-arch/use-error-in-catch */
-/* eslint-disable complexity */
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-import { StorageProvider } from '@cozeloop/api-schema/data';
-import {
-  IconCozCross,
-  IconCozPlayCircle,
-  IconCozRefresh,
-} from '@coze-arch/coze-design/icons';
-import { Loading, Modal } from '@coze-arch/coze-design';
-
-import { ImageStatus, type MultipartItem } from '../type';
-
-import styles from './index.module.less';
-
-interface VideoItemRendererProps {
-  className?: string;
-  style?: React.CSSProperties;
-  spaceID?: Int64;
-  item: MultipartItem;
-  readonly?: boolean;
-  onRemove: () => void;
-  onChange: (item: MultipartItem) => void;
-  uploadFile?: (params: unknown) => Promise<string>;
-}
-
-export const VideoItemRenderer: React.FC<VideoItemRendererProps> = ({
-  className,
-  style,
-  spaceID,
-  item,
-  onRemove,
-  onChange,
-  uploadFile,
-  readonly,
-}) => {
-  const [visible, setVisible] = useState(false);
-  const status = item?.sourceVideo?.status;
-  const uri = item?.video?.uri;
-  const url = item?.video?.url;
-  const isError = status === ImageStatus.Error;
-  const file = item?.sourceVideo?.file as File;
-  const retryUpload = async () => {
-    try {
-      onChange({
-        ...item,
-        sourceVideo: {
-          ...item.sourceVideo,
-          status: ImageStatus.Loading,
-        },
-      });
-      const newUri = await uploadFile?.({
-        file,
-        fileType: 'image',
-        spaceID,
-      });
-      onChange({
-        ...item,
-        sourceVideo: {
-          ...item.sourceVideo,
-          status: ImageStatus.Success,
-        },
-        video: {
-          ...item.video,
-          uri: newUri,
-          storage_provider: StorageProvider.ImageX,
-        },
-      });
-    } catch (error) {
-      onChange({
-        ...item,
-        sourceVideo: {
-          ...item.sourceVideo,
-          status: ImageStatus.Error,
-        },
-      });
-    }
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div
-        className={classNames('w-[64px] h-[64px] relative group', className)}
-        style={style}
-      >
-        <video
-          src={url}
-          className="w-full h-full rounded-[6px] border border-solid coz-stroke-plus"
-        />
-
-        {status === ImageStatus.Loading ? null : (
-          <IconCozPlayCircle
-            className="text-white w-[16px] h-[16px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
-            onClick={() => setVisible(true)}
-          />
-        )}
-        {status !== ImageStatus.Loading && (
-          <div
-            className={`absolute inset-0 flex gap-3 items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] ${isError ? 'visible' : 'invisible'}  group-hover:visible`}
-          >
-            {isError && !readonly && file ? (
-              <IconCozRefresh
-                className="text-white w-[16px] h-[16px] cursor-pointer"
-                onClick={retryUpload}
-              />
-            ) : null}
-            {uri || url ? (
-              <IconCozPlayCircle
-                className="text-white w-[16px] h-[16px] cursor-pointer"
-                onClick={() => setVisible(true)}
-              />
-            ) : null}
-            {readonly ? null : (
-              <div className="p-[2px] text-white cursor-pointer absolute right-[-4px] top-[-4px] z-10 bg-[var(--coz-fg-secondary)] rounded-[16px] flex items-end justify-center">
-                <IconCozCross onClick={onRemove} className="text-[12px]" />
-              </div>
-            )}
-          </div>
-        )}
-        {status === ImageStatus.Loading && (
-          <div className="absolute inset-0 flex items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] z-10">
-            <Loading loading color="blue" />
-          </div>
-        )}
-      </div>
-      {status === ImageStatus.Error ? (
-        <div className="text-sm text-red-500">上传失败</div>
-      ) : null}
-      <Modal
-        title="视频预览"
-        footer={null}
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        footerFill={false}
-        hasScroll={false}
-        width={654}
-        className={styles['video-preview-modal']}
-      >
-        <video src={url} className="w-full h-[368px]" controls autoPlay />
-      </Modal>
-    </div>
-  );
-};

package/src/multi-part-editor/index.module.less

@@ -1,8 +0,0 @@
-.ghost {
-  opacity: 0.5;
-}
-
-.drag {
-  overflow: hidden;
-  max-height: 100px;
-}