chore: model list ux

src/components/editor-wrap/index.tsx

@@ -8,6 +8,7 @@ interface EditorwrapProps {
   children: React.ReactNode;
   showHeader?: boolean;
   copyText: string;
+  defaultValue?: string;
   langOptions?: { label: string; value: string }[];
   onChangeLang?: (value: string) => void;
 }
@@ -17,6 +18,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
   copyText,
   langOptions,
   onChangeLang,
+  defaultValue,
   showHeader = true
 }) => {
   const handleChangeLang = (value: string) => {
@@ -30,7 +32,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
       return (
         <div className="editor-header">
           <Select
-            defaultValue="JSON"
+            defaultValue={defaultValue}
             style={{ width: 120 }}
             size="middle"
             variant="filled"
@@ -51,4 +53,4 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
   );
 };
 
-export default EditorWrap;
+export default React.memo(EditorWrap);

src/components/form-buttons/index.tsx

@@ -5,6 +5,8 @@ type FormButtonsProps = {
   onCancel?: () => void;
   cancelText?: string;
   okText?: string;
+  showOk?: boolean;
+  showCancel?: boolean;
   htmlType?: 'submit' | 'button';
 };
 const FormButtons: React.FC<FormButtonsProps> = ({
@@ -12,21 +14,27 @@ const FormButtons: React.FC<FormButtonsProps> = ({
   onCancel,
   cancelText,
   okText,
+  showCancel = true,
+  showOk = true,
   htmlType = 'button'
 }) => {
   return (
     <Space size={40} style={{ marginTop: '80px' }}>
-      <Button
-        type="primary"
-        onClick={onOk}
-        style={{ width: '120px' }}
-        htmlType={htmlType}
-      >
-        {okText || '保存'}
-      </Button>
-      <Button onClick={onCancel} style={{ width: '98px' }}>
-        {cancelText || '取消'}
-      </Button>
+      {showOk && (
+        <Button
+          type="primary"
+          onClick={onOk}
+          style={{ width: '120px' }}
+          htmlType={htmlType}
+        >
+          {okText || '保存'}
+        </Button>
+      )}
+      {showCancel && (
+        <Button onClick={onCancel} style={{ width: '98px' }}>
+          {cancelText || '取消'}
+        </Button>
+      )}
     </Space>
   );
 };

src/components/progress-bar/index.tsx

@@ -0,0 +1,36 @@
+import { Progress } from 'antd';
+import { memo, useMemo } from 'react';
+
+const RenderProgress = memo(
+  (props: { percent: number; steps?: number; download?: boolean }) => {
+    const { percent, steps = 5, download } = props;
+
+    const strokeColor = useMemo(() => {
+      if (download) {
+        return 'var(--ant-color-primary)';
+      }
+      if (percent <= 50) {
+        return 'var(--ant-color-primary)';
+      }
+      if (percent <= 80) {
+        return 'var(--ant-color-warning)';
+      }
+      return 'var(--ant-color-error)';
+    }, [percent]);
+
+    return (
+      <Progress
+        steps={steps}
+        format={() => {
+          return (
+            <span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
+          );
+        }}
+        percent={percent}
+        strokeColor={strokeColor}
+      />
+    );
+  }
+);
+
+export default RenderProgress;

src/components/seal-form/auto-complete.tsx

@@ -0,0 +1,86 @@
+import { AutoComplete, Form } from 'antd';
+import type { AutoCompleteProps } from 'antd/lib';
+import { useEffect, useRef, useState } from 'react';
+import Wrapper from './components/wrapper';
+import { SealFormItemProps } from './types';
+
+const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
+  props
+) => {
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  useEffect(() => {
+    if (props.value) {
+      setIsFocus(true);
+    }
+  }, [props.value]);
+
+  const handleClickWrapper = () => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.();
+      setIsFocus(true);
+    }
+  };
+
+  const handleChange = (value: string, option: any) => {
+    props.onChange?.(value, option);
+  };
+
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+
+  const handleOnBlur = (e: any) => {
+    if (!props.value) {
+      setIsFocus(false);
+      props.onBlur?.(e);
+    }
+  };
+
+  const handleSearch = (text: string) => {
+    props.onSearch?.(text);
+  };
+
+  const handleOnSelect = (value: any, option: any) => {
+    props.onSelect?.(value, option);
+  };
+
+  return (
+    <Wrapper
+      status={status}
+      label={label || (placeholder as string)}
+      isFocus={isFocus}
+      required={required}
+      description={description}
+      disabled={props.disabled}
+      onClick={handleClickWrapper}
+    >
+      <AutoComplete
+        {...rest}
+        ref={inputRef}
+        onSelect={handleOnSelect}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onSearch={handleSearch}
+        onChange={handleChange}
+      ></AutoComplete>
+    </Wrapper>
+  );
+};
+
+export default SealAutoComplete;

src/components/seal-form/components/label-info.tsx

@@ -5,7 +5,7 @@ import './label-info.less';
 
 interface NoteInfoProps {
   required?: boolean;
-  label: string;
+  label: React.ReactNode;
   description?: React.ReactNode;
 }
 const NoteInfo: React.FC<NoteInfoProps> = (props) => {

src/components/seal-form/components/wrapper.tsx

@@ -4,7 +4,7 @@ import LabelInfo from './label-info';
 import wrapperStyle from './wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   isFocus: boolean;
   status?: string;
   required?: boolean;

src/components/seal-form/field-wrapper.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
+import React from 'react';
 import LabelInfo from './components/label-info';
 import wrapperStyle from './components/wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   status?: string;
   className?: string;
   disabled?: boolean;

src/components/seal-form/seal-input.tsx

@@ -64,10 +64,6 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleOnBlur = useCallback(
     (e: any) => {
-      console.log(
-        'inputRef.current==========',
-        inputRef.current?.resizableTextArea?.textArea?.value
-      );
       if (!inputRef.current?.resizableTextArea?.textArea?.value) {
         setIsFocus(false);
         onBlur?.(e);

src/components/status-tag/index.less

@@ -5,5 +5,6 @@
   padding: 2px 10px;
   border-radius: 20px;
   width: fit-content;
+  height: 26px;
   font-size: var(--font-size-base);
 }

src/components/status-tag/index.tsx

@@ -1,7 +1,8 @@
 import { StatusColorMap } from '@/config';
 import { StatusType } from '@/config/types';
+import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import styles from './index.less';
+import './index.less';
 
 export const StatusMaps = {
   transitioning: 'blue',
@@ -16,9 +17,12 @@ type StatusTagProps = {
     status: StatusType;
     text: string;
   };
+  download?: {
+    percent: number;
+  };
 };
 
-const StatusTag: React.FC<StatusTagProps> = ({ statusValue }) => {
+const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
   const { text, status } = statusValue;
   const [statusColor, setStatusColor] = useState<{ text: string; bg: string }>({
     text: '',
@@ -31,11 +35,18 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue }) => {
 
   return (
     <span
-      className={styles['status-tag']}
-      style={{
-        color: statusColor.text,
-        border: `1px solid ${statusColor.text}`
-      }}
+      className={classNames('status-tag', { download: download })}
+      style={
+        download
+          ? {
+              color: StatusColorMap['success']['text'],
+              border: `1px solid ${StatusColorMap['success']['text']}`
+            }
+          : {
+              color: statusColor?.text,
+              border: `1px solid ${statusColor?.text}`
+            }
+      }
     >
       {text}
     </span>