@gientech/modual 1.3.0 → 1.3.2

package/src/utils/gientechCommon/components/FeedBackModal.tsx

@@ -1,310 +0,0 @@
-import { Button, ConfigProvider, Form, Modal, Input, Tree, Tag } from 'antd';
-import { Key, useEffect, useMemo, useRef, useState } from 'react';
-import downArrow from '../../../assets/img/downArrow.png';
-
-import './style.less';
-import { ChevronRight } from 'lucide-react';
-const { TextArea } = Input;
-const { useForm } = Form;
-const pKey: any = {
-  回答不佳: 'ansPoor',
-  格式问题: 'formatError',
-  理解问题有误: 'harmfulInfo',
-  其他: 'othres',
-};
-const FeedBackModal = ({ open, setOpen, feedBackList, handleConfirm }: any) => {
-  const modalStyles = {
-    header: {
-      padding: '20px 24px',
-      borderBottom: '1px solid #F0F0F0',
-      margin: 0,
-    },
-    body: { padding: '16px 24px 20px 24px', borderBottom: '1px solid #F0F0F0' },
-    mask: {},
-    footer: { padding: '16px 24px', margin: 0 },
-    content: { padding: 0, borderRadius: '4px', width: '563px' },
-  };
-
-  const [form] = useForm();
-  const [treeSelectResult, setTreeSelectResult] = useState<null | any>({});
-
-  const handleOk = async () => {
-    try {
-      const data = await form.validateFields();
-      setOpen(false);
-      const param = {
-        ...data,
-      };
-      Object.entries(treeSelectResult || {}).forEach(item => {
-        const [key, value] = item;
-        if (value) {
-          param[pKey[key]] = value;
-        }
-      });
-      handleConfirm(param);
-    } catch (e) {
-      console.log(e);
-      return;
-    }
-  };
-
-  useEffect(() => {
-    if (!open) {
-      form.resetFields();
-      setTreeSelectResult(null);
-    }
-  }, [open]);
-
-  return (
-    <ConfigProvider
-      modal={{
-        styles: modalStyles,
-      }}
-    >
-      <Modal
-        open={open}
-        onCancel={() => setOpen(false)}
-        title={
-          <div className="text-[16px] text-[#2A2A2A] font-bold leading-[1]">
-            感谢您的反馈！这将帮助我们不断优化与提升。
-          </div>
-        }
-        footer={
-          <div>
-            <Button
-              className="mr-[16px] w-[76px]"
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              取消
-            </Button>
-            <Button type="primary" className="w-[76px] border-none" onClick={handleOk}>
-              确认
-            </Button>
-          </div>
-        }
-      >
-        <SelectTreeCom
-          feedBackList={feedBackList}
-          treeSelectResult={treeSelectResult}
-          setTreeSelectResult={setTreeSelectResult}
-        />
-        <Form form={form} layout="vertical">
-          <Form.Item name="supplementExplain" label="补充描述">
-            <TextArea />
-          </Form.Item>{' '}
-          <Form.Item name="idealAnswer" label="您觉得更好的回答是什么？">
-            <TextArea />
-          </Form.Item>
-          <Form.Item name="userPhone" label="联系电话">
-            <Input />
-          </Form.Item>
-          <Form.Item name="deptName" label="部门">
-            <Input />
-          </Form.Item>
-        </Form>
-      </Modal>
-    </ConfigProvider>
-  );
-};
-export default FeedBackModal;
-
-const SelectTreeCom = ({ feedBackList, treeSelectResult, setTreeSelectResult }: any) => {
-  const [openSelect, setOpenSelect] = useState(false);
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-  const [checkedKeys, setCheckedKeys] = useState<Key[] | { checked: Key[]; halfChecked: Key[] }>(
-    []
-  );
-  const [selectedValue, setSelectedValue] = useState<
-    Key[] | { checked: Key[]; halfChecked: Key[] }
-  >([]);
-  const [selectedParent, setSelectedParent] = useState<null | {
-    que_name?: string;
-    items?: string[];
-  }>(null);
-  const curTree = useMemo(() => {
-    setCheckedKeys([]);
-    return selectedParent?.items
-      ? [
-          {
-            title: '全选',
-            key: '全选',
-            children: selectedParent.items.map(item => {
-              return {
-                title: item,
-                key: item,
-              };
-            }),
-          },
-        ]
-      : [];
-  }, [selectedParent]);
-
-  const handleClose = (removedTag: any) => {
-    setSelectedValue((pre: any) => {
-      if (Array.isArray(pre) && Array.isArray(checkedKeys)) {
-        const p = Object.entries(treeSelectResult).reduce((pre: any, current: any) => {
-          const [key, value] = current;
-          const tags = value ? value.split(';') : [];
-          const newTags = tags.filter((tag: any) => tag !== removedTag);
-          setTreeSelectResult((pre: any) => {
-            return {
-              ...(pre || {}),
-              [key]: newTags.join(';'),
-            };
-          });
-          return [...pre, ...newTags];
-        }, []);
-        return p;
-      }
-      return pre;
-    });
-  };
-
-  useEffect(() => {
-    setExpandedKeys(['全选']);
-    if (!treeSelectResult || !selectedParent?.que_name) return;
-    const res = treeSelectResult[selectedParent.que_name] || '';
-    const curSelectedValue = res ? res.split(';') : [];
-    setCheckedKeys(curSelectedValue);
-  }, [curTree, openSelect]);
-
-  useEffect(() => {
-    if (treeSelectResult === null) {
-      setSelectedValue([]);
-      setSelectedParent(null);
-      setCheckedKeys([]);
-    }
-  }, [treeSelectResult]);
-
-  useEffect(() => {
-    console.log('treeSelectResult', treeSelectResult);
-    console.log('selectedValue', selectedValue);
-    console.log('feedBackList', feedBackList);
-    console.log('pKey', pKey);
-    console.log('selectedParent', selectedParent);
-  }, [treeSelectResult, selectedValue]);
-  return (
-    <div className="relative mb-[24px] z-20">
-      <div className="absolute w-full z-10">
-        <div
-          className="h-[32px] box-border flex items-center justify-between border-[1px] border-solid border-[#D9D9D9] rounded-[4px] cursor-pointer"
-          onClick={() => setOpenSelect(!openSelect)}
-        >
-          <div className="ml-[16px]">问题类型</div>
-          <img src={downArrow} width={24} height={24} className="mr-[16px]" />
-        </div>
-        <div
-          style={{ display: openSelect ? '' : 'none' }}
-          className="h-[288px] rounded-[4px] shadow-md mt-[4px] bg-white"
-        >
-          <div className="h-[248px] flex" style={{ borderBottom: '1px solid #F0F0F0' }}>
-            <div
-              className="w-[203px] px-[8px] py-[8px]"
-              style={{ borderRight: '1px solid #F0F0F0' }}
-            >
-              {feedBackList.map((item: any, index: number) => {
-                return (
-                  <div
-                    key={index}
-                    className="rounded-[4px] h-[32px] cursor-pointer flex items-center"
-                    style={{
-                      backgroundColor: selectedParent?.que_name === item.que_name ? '#E6F4FF' : '',
-                    }}
-                  >
-                    <div
-                      className="h-full w-full leading-[32px]"
-                      onClick={() => {
-                        setSelectedParent(item);
-                      }}
-                    >
-                      <div className="ml-[8px] text-[14px] text-[#2A2A2A]">
-                        {item.que_name}(
-                        {treeSelectResult && treeSelectResult[item.que_name]
-                          ? treeSelectResult[item.que_name].split(';').length
-                          : 0}
-                        /{item?.items?.length})
-                      </div>
-                    </div>
-                    <ChevronRight className="mr-[8px] w-3 h-3 text-[rgba(0,0,0,0.45)]" />
-                  </div>
-                );
-              })}
-            </div>
-            <div className="selfTree h-full flex-1 mt-[8px] ml-[16px]">
-              <Tree
-                checkable
-                defaultSelectedKeys={['0-1']}
-                treeData={curTree}
-                blockNode
-                checkedKeys={checkedKeys}
-                expandedKeys={expandedKeys}
-                onCheck={(checkedKeys: Key[] | { checked: Key[]; halfChecked: Key[] }) => {
-                  if (Array.isArray(checkedKeys)) {
-                    setTreeSelectResult((pre: any) => {
-                      return {
-                        ...(pre || {}),
-                        [selectedParent?.que_name || '']: (checkedKeys || [])
-                          .filter(item => item !== '全选')
-                          .join(';'),
-                      };
-                    });
-                  }
-                  setCheckedKeys(checkedKeys);
-                }}
-              />
-            </div>
-          </div>
-          <div className="flex justify-end h-[40px] items-center">
-            <Button size="small" className="mr-[8px]" onClick={() => setOpenSelect(false)}>
-              取消
-            </Button>
-            <Button
-              size="small"
-              type="primary"
-              className="border-none mr-[16px]"
-              onClick={() => {
-                setSelectedValue((pre: any) => {
-                  if (Array.isArray(pre) && Array.isArray(checkedKeys)) {
-                    const p = Object.values(treeSelectResult).reduce((pre: any, current: any) => {
-                      return [...pre, ...(current ? current.split(';') : [])];
-                    }, []);
-                    return p;
-                  }
-                  return pre;
-                });
-                setOpenSelect(false);
-              }}
-            >
-              确认
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div className="h-[32px]"></div>
-
-      {!!(selectedValue as any)?.length && (
-        <div>
-          <div className="mt-[5px] text-[12px] text-[#555555]">
-            已选择 {(selectedValue as any).length} 个
-          </div>
-          {((selectedValue || []) as any).map((tag: string) => {
-            let qname = '';
-            Object.entries(treeSelectResult || {}).forEach(item => {
-              const [key, value]: any = item;
-              if (value.indexOf(tag) > -1) {
-                qname = key;
-              }
-            });
-            return (
-              <Tag key={tag} closable className="mt-[5px]" onClose={() => handleClose(tag)}>
-                {qname}（{tag}）
-              </Tag>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/utils/gientechCommon/components/FileCardCommon.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { X } from 'lucide-react';
-
-export interface FileCardCommonProps {
-  fileName: string;
-  fileSize?: number;
-  icon: React.ReactNode;
-  statusText?: string;
-  statusColor?: string;
-  statusIcon?: React.ReactNode;
-  onRemove?: () => void;
-  themeColors?: any;
-  cardId?: string;
-  showRemove?: boolean;
-  disabledRemove?: boolean;
-  onRemoveWithAnim?: (id: string) => void;
-  extra?: React.ReactNode;
-  style?: React.CSSProperties;
-}
-
-const formatSize = (size?: number) => {
-  if (!size) return '';
-  if (size < 1024) return `${size}B`;
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
-  return `${(size / 1024 / 1024).toFixed(1)}MB`;
-};
-
-const FileCardCommon: React.FC<FileCardCommonProps> = ({
-  fileName,
-  fileSize,
-  icon,
-  statusText,
-  statusColor = 'text-gray-400',
-  statusIcon,
-  onRemove,
-  themeColors = {},
-  cardId,
-  showRemove = true,
-  disabledRemove = false,
-  onRemoveWithAnim,
-  extra,
-  style
-}) => {
-  return (
-    <div
-      id={cardId}
-      className="group gap-x-2.5 items-center file-display-card relative flex w-[210px] bg-white border border-gray-200 rounded-md shadow-sm px-2 py-1 transition-all hover:shadow-md hover:border-blue-300"
-      style={style}
-    >
-      <div className="pt-1">{icon}</div>
-      <div className="flex-1 min-w-0 flex flex-col justify-center">
-        <div className="flex items-center justify-between gap-1">
-          <span className="text-[12px] font-medium truncate max-w-[120px]" title={fileName}>{fileName}</span>
-          <span className="ml-1 text-[11px] text-gray-400">{formatSize(fileSize)}</span>
-        </div>
-        <div className={`text-[10px] mt-0.5 flex items-center gap-3 ${statusColor}`}>
-          {statusIcon}
-          <span>{statusText}</span>
-        </div>
-      </div>
-      {extra}
-      {showRemove && !disabledRemove && (
-        <button
-          className="absolute top-0.5 right-0.5 opacity-0 group-hover:opacity-100 transition-opacity text-gray-300 hover:text-red-400 text-xs p-0.5 rounded-full bg-white shadow-sm z-10"
-          onClick={() => {
-            if (onRemoveWithAnim && cardId) {
-              onRemoveWithAnim(cardId);
-            } else if (onRemove) {
-              onRemove();
-            }
-          }}
-          title="移除"
-          style={{ lineHeight: 0, color: themeColors.error || '#FF0000' }}
-        >
-          <X className="w-3.5 h-3.5" />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default FileCardCommon;