chore: add model file ux

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

@@ -1,75 +0,0 @@
-import { Cascader, Input, Popover } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
-
-const { Panel } = Cascader;
-
-const options = [
-  {
-    value: 'fruit',
-    label: 'Fruit',
-    children: [
-      { value: 'apple', label: 'Apple' },
-      { value: 'banana', label: 'Banana' }
-    ]
-  },
-  {
-    value: 'vegetable',
-    label: 'Vegetable',
-    children: [
-      { value: 'carrot', label: 'Carrot' },
-      { value: 'potato', label: 'Potato' }
-    ]
-  }
-];
-
-const CustomCascader: React.FC = () => {
-  const [value, setValue] = useState<string>('');
-  const [visible, setVisible] = useState(false);
-  const [inputWidth, setInputWidth] = useState<number>(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      setInputWidth(inputRef.current.offsetWidth);
-    }
-  }, []);
-
-  const handleCascaderChange = (selectedValues: string[]) => {
-    setValue(selectedValues.join(' / '));
-    setVisible(false);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <Popover
-      overlayStyle={{ minWidth: inputWidth }}
-      content={
-        <div style={{ width: '100%' }}>
-          <Panel
-            options={options}
-            onChange={handleCascaderChange}
-            changeOnSelect
-          />
-        </div>
-      }
-      arrow={false}
-      placement="bottomLeft"
-      trigger="click"
-      open={visible}
-      onOpenChange={setVisible}
-    >
-      <Input
-        ref={inputRef}
-        placeholder="Select or type..."
-        value={value}
-        onChange={handleInputChange}
-        onClick={() => setVisible(true)}
-      />
-    </Popover>
-  );
-};
-
-export default CustomCascader;

src/components/seal-form/config/index.ts

@@ -0,0 +1,7 @@
+const WRAPHEIGHT = 54;
+const INPUTHEIGHT = 32;
+const BORDERRADIUS = 4;
+const BGCOLOR = 'transparent';
+const INPUT_INNER_PADDING = 14;
+
+export { BGCOLOR, BORDERRADIUS, INPUTHEIGHT, INPUT_INNER_PADDING, WRAPHEIGHT };

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

@@ -1,9 +1,10 @@
 import { isNotEmptyValue } from '@/utils/index';
 import type { InputNumberProps } from 'antd';
 import { Form, InputNumber } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import InputWrapper from './wrapper/input';
 
 const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   props
@@ -60,26 +61,28 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   };
 
   return (
-    <Wrapper
+    <InputWrapper>
-      status={status}
+      <Wrapper
-      label={label}
+        status={status}
-      isFocus={isFocus}
+        label={label}
-      required={required}
+        isFocus={isFocus}
-      description={description}
+        required={required}
-      disabled={props.disabled}
+        description={description}
-      onClick={handleClickWrapper}
+        disabled={props.disabled}
-      className="seal-input-number"
+        onClick={handleClickWrapper}
-    >
+        className="seal-input-number"
-      <InputNumber
+      >
-        {...rest}
+        <InputNumber
-        ref={inputRef}
+          {...rest}
-        autoComplete="off"
+          ref={inputRef}
-        onFocus={handleOnFocus}
+          autoComplete="off"
-        onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
-        onInput={handleInput}
+          onBlur={handleOnBlur}
-        onChange={handleChange}
+          onInput={handleInput}
-      ></InputNumber>
+          onChange={handleChange}
-    </Wrapper>
+        ></InputNumber>
+      </Wrapper>
+    </InputWrapper>
   );
 };
 

src/components/seal-form/password.tsx

@@ -1,8 +1,9 @@
 import type { InputProps } from 'antd';
 import { Form, Input } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import InputWrapper from './wrapper/input';
 
 const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
   const {
@@ -55,26 +56,28 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   return (
-    <Wrapper
+    <InputWrapper>
-      status={status}
+      <Wrapper
-      label={label}
+        status={status}
-      isFocus={isFocus}
+        label={label}
-      required={required}
+        isFocus={isFocus}
-      description={description}
+        required={required}
-      disabled={props.disabled}
+        description={description}
-      hasPrefix={!!props.prefix}
+        disabled={props.disabled}
-      onClick={handleClickWrapper}
+        hasPrefix={!!props.prefix}
-    >
+        onClick={handleClickWrapper}
-      <Input.Password
+      >
-        {...rest}
+        <Input.Password
-        ref={inputRef}
+          {...rest}
-        autoComplete="off"
+          ref={inputRef}
-        className="seal-input-password"
+          autoComplete="off"
-        onFocus={handleOnFocus}
+          className="seal-input-password"
-        onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
-        onChange={handleChange}
+          onBlur={handleOnBlur}
-      ></Input.Password>
+          onChange={handleChange}
-    </Wrapper>
+        ></Input.Password>
+      </Wrapper>
+    </InputWrapper>
   );
 };
 

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

@@ -1,12 +1,13 @@
 import type { InputProps } from 'antd';
 import { Form, Input } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
 import SealInputNumber from './input-number';
 import SealInputSearch from './input-search';
 import SealPassword from './password';
 import SealTextArea from './seal-textarea';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import InputWrapper from './wrapper/input';
 
 const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   const {
@@ -72,29 +73,31 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   return (
-    <Wrapper
+    <InputWrapper>
-      status={checkStatus || status}
+      <Wrapper
-      label={label}
+        status={checkStatus || status}
-      labelExtra={labelExtra}
+        label={label}
-      isFocus={isFocus}
+        labelExtra={labelExtra}
-      required={required}
+        isFocus={isFocus}
-      description={description}
+        required={required}
-      disabled={props.disabled}
+        description={description}
-      addAfter={addAfter}
+        disabled={props.disabled}
-      hasPrefix={!!props.prefix}
+        addAfter={addAfter}
-      onClick={handleClickWrapper}
+        hasPrefix={!!props.prefix}
-    >
+        onClick={handleClickWrapper}
-      <Input
+      >
-        {...rest}
+        <Input
-        placeholder={isFocus || !label ? placeholder : ''}
+          {...rest}
-        ref={inputRef}
+          placeholder={isFocus || !label ? placeholder : ''}
-        autoComplete="off"
+          ref={inputRef}
-        onInput={handleInput}
+          autoComplete="off"
-        onFocus={handleOnFocus}
+          onInput={handleInput}
-        onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
-        onChange={handleChange}
+          onBlur={handleOnBlur}
-      ></Input>
+          onChange={handleChange}
-    </Wrapper>
+        ></Input>
+      </Wrapper>
+    </InputWrapper>
   );
 };
 

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

@@ -3,9 +3,10 @@ import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
 import { Form, Select } from 'antd';
 import { cloneDeep } from 'lodash';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import SelectWrapper from './wrapper/select';
 
 const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   const {
@@ -81,28 +82,30 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   };
 
   return (
-    <Wrapper
+    <SelectWrapper>
-      className="seal-select-wrapper"
+      <Wrapper
-      status={status}
+        className="seal-select-wrapper"
-      label={label}
+        status={status}
-      isFocus={isFocus}
+        label={label}
-      required={required}
+        isFocus={isFocus}
-      description={description}
+        required={required}
-      disabled={props.disabled}
+        description={description}
-      onClick={handleClickWrapper}
+        disabled={props.disabled}
-    >
+        onClick={handleClickWrapper}
-      <Select
-        {...rest}
-        ref={inputRef}
-        options={children ? null : _options}
-        onFocus={handleOnFocus}
-        onBlur={handleOnBlur}
-        onChange={handleChange}
-        notFoundContent={null}
       >
-        {children}
+        <Select
-      </Select>
+          {...rest}
-    </Wrapper>
+          ref={inputRef}
+          options={children ? null : _options}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onChange={handleChange}
+          notFoundContent={null}
+        >
+          {children}
+        </Select>
+      </Wrapper>
+    </SelectWrapper>
   );
 };
 

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

@@ -2,8 +2,8 @@ import { INPUT_WIDTH } from '@/constants';
 import { Form, InputNumber, Slider, type SliderSingleProps } from 'antd';
 import React from 'react';
 import LabelInfo from './components/label-info';
-import FieldWrapper from './field-wrapper';
+import Wrapper from './wrapper';
-import SliderStyles from './styles/slider.less';
+import SliderWrapper from './wrapper/slider';
 
 interface SealSliderProps extends SliderSingleProps {
   required?: boolean;
@@ -51,7 +51,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
   const renderLabel = React.useMemo(() => {
     return (
       <span
-        className={SliderStyles['slider-label']}
+        className="slider-label"
         style={{ width: labelWidth || INPUT_WIDTH.mini }}
       >
         <span className="text">
@@ -74,25 +74,27 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
     );
   }, [label, labelWidth, description, value, max, min, step, defaultValue]);
   return (
-    <FieldWrapper
+    <SliderWrapper>
-      required={required}
+      <Wrapper
-      status={checkStatus || status}
+        required={required}
-      label={renderLabel}
+        status={checkStatus || status}
-      style={{ padding: '20px 2px 0' }}
+        label={renderLabel}
-      variant="borderless"
+        isFocus={true}
-    >
+        variant="borderless"
-      <Slider
+      >
-        {...rest}
+        <Slider
-        defaultValue={defaultValue}
+          {...rest}
-        max={max}
+          defaultValue={defaultValue}
-        min={min}
+          max={max}
-        step={step}
+          min={min}
-        style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
+          step={step}
-        tooltip={tooltip}
+          style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
-        value={value}
+          tooltip={tooltip}
-        onChange={handleChange}
+          value={value}
-      ></Slider>
+          onChange={handleChange}
-    </FieldWrapper>
+        ></Slider>
+      </Wrapper>
+    </SliderWrapper>
   );
 };
 

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

@@ -1,8 +1,9 @@
 import { Form, Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input/TextArea';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+import InputWrapper from './wrapper/input';
 
 const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
   const {
@@ -78,30 +79,32 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
   );
 
   return (
-    <Wrapper
+    <InputWrapper>
-      status={status}
+      <Wrapper
-      label={label}
+        status={status}
-      isFocus={isFocus}
+        label={label}
-      required={required}
+        isFocus={isFocus}
-      description={description}
+        required={required}
-      className="seal-textarea-wrapper"
+        description={description}
-      extra={extra}
+        className="seal-textarea-wrapper"
-      disabled={props.disabled}
+        extra={extra}
-      addAfter={addAfter}
+        disabled={props.disabled}
-      onClick={handleClickWrapper}
+        addAfter={addAfter}
-    >
+        onClick={handleClickWrapper}
-      <Input.TextArea
+      >
-        {...rest}
+        <Input.TextArea
-        autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
+          {...rest}
-        ref={inputRef}
+          autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
-        style={{ minHeight: '80px', ...style }}
+          ref={inputRef}
-        className="seal-textarea"
+          style={{ minHeight: '80px', ...style }}
-        onFocus={handleOnFocus}
+          className="seal-textarea"
-        onBlur={handleOnBlur}
+          onFocus={handleOnFocus}
-        onInput={handleInput}
+          onBlur={handleOnBlur}
-        onChange={(e) => handleChange(e)}
+          onInput={handleInput}
-      ></Input.TextArea>
+          onChange={(e) => handleChange(e)}
-    </Wrapper>
+        ></Input.TextArea>
+      </Wrapper>
+    </InputWrapper>
   );
 };
 

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

@@ -0,0 +1,229 @@
+import classNames from 'classnames';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import LabelInfo from '../components/label-info';
+import { INPUT_INNER_PADDING } from '../config';
+
+interface WrapperProps {
+  children: React.ReactNode;
+  label?: React.ReactNode;
+  noWrapperStyle?: boolean;
+  isFocus?: boolean;
+  classList?: string;
+  status?: string; // error | success | warning
+  required?: boolean;
+  description?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
+  variant?: string;
+  hasPrefix?: boolean;
+  labelExtra?: React.ReactNode;
+  onClick?: () => void;
+}
+
+// wrapper box
+const WrapperBox = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 54px;
+  border-width: var(--ant-line-width);
+  border-style: var(--ant-line-type);
+  border-color: var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  background-color: var(--color-white-1);
+  &.borderless {
+    border: none;
+    box-shadow: none;
+  }
+  &.filled {
+    border: none;
+    box-shadow: none;
+  }
+  &.borderless:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+  &:hover {
+    border-color: var(--ant-input-hover-border-color);
+    transition: all 0.2s ease;
+  }
+  &:focus-within {
+    border-color: var(--ant-input-active-border-color);
+    box-shadow: var(--ant-input-active-shadow);
+    outline: 0;
+    background-color: var(--ant-input-active-bg);
+  }
+  &.validate-status-error:not(.seal-select-wrapper) {
+    border-width: var(--ant-line-width);
+    border-style: var(--ant-line-type);
+    border-color: var(--ant-color-error);
+
+    &:hover {
+      border-color: var(--ant-color-error-border-hover);
+    }
+
+    &:focus-within {
+      border-color: var(--ant-color-error);
+    }
+  }
+  &.seal-input-wrapper-disabled {
+    background-color: var(--ant-color-bg-container-disabled);
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: var(--ant-color-border);
+
+      .ant-input-search-button {
+        border-color: var(--ant-color-border) !important;
+        color: var(--ant-color-text-description) !important;
+      }
+    }
+  }
+`;
+
+// wrapper
+const InnerWrapper = styled.div.attrs<{
+  noWrapperStyle?: boolean;
+  nolabel?: boolean;
+}>((props) => ({
+  className: classNames({
+    __wrapper__: true,
+    'no-wrapper-style': props.noWrapperStyle,
+    'no-label': props.nolabel
+  })
+}))`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  padding-block: 20px 0;
+  max-width: 100%;
+  &:hover {
+    .ant-input-number-handler-wrap {
+      width: 34px !important;
+    }
+  }
+  &.no-wrapper-style {
+    padding-block: 0;
+  }
+  &.no-label {
+    padding-block: 0;
+  }
+`;
+
+// label
+export const Label = styled.div.attrs<{
+  isFocus?: boolean;
+  hasPrefix?: boolean;
+}>((props) => ({
+  className: classNames({
+    'isfoucs-has-value': props.isFocus,
+    'blur-no-value': !props.isFocus,
+    'has-prefix': props.hasPrefix
+  })
+}))`
+  position: absolute;
+  left: ${INPUT_INNER_PADDING}px;
+  color: rgba(0, 0, 0, 45%);
+  font-size: var(--font-size-base);
+  line-height: 1;
+  pointer-events: all;
+  display: flex;
+  width: max-content;
+  z-index: 5;
+
+  &.isfoucs-has-value {
+    top: 10px;
+    transition: all 0.2s var(--seal-transition-func);
+  }
+
+  &.blur-no-value {
+    top: 21px;
+    transition: all 0.2s var(--seal-transition-func);
+  }
+
+  &.has-prefix {
+    top: 10px !important;
+  }
+`;
+
+// inner
+const Inner = styled.div`
+  width: 100%;
+`;
+
+const Extra = styled.div`
+  position: absolute;
+  right: 12px;
+  top: 8px;
+  z-index: 10;
+`;
+
+const AddAfter = styled.div`
+  position: relative;
+  color: var(--ant-color-text-quaternary);
+  font-size: 14px;
+  padding-right: calc(var(--ant-padding-sm) - 1px);
+`;
+
+// for wrapper
+
+const Wrapper: FC<WrapperProps> = ({
+  children,
+  label,
+  isFocus,
+  status,
+  className,
+  disabled,
+  classList,
+  description,
+  required,
+  extra,
+  variant,
+  addAfter,
+  hasPrefix,
+  noWrapperStyle,
+  labelExtra,
+  onClick
+}) => {
+  const wrapperClass = classNames(
+    status ? `validate-status-${status}` : '',
+    className,
+    classList,
+    variant,
+    {
+      'seal-input-wrapper-addafter': addAfter,
+      'seal-input-wrapper-disabled': disabled
+    }
+  );
+  return (
+    <WrapperBox className={wrapperClass}>
+      <InnerWrapper
+        noWrapperStyle={noWrapperStyle}
+        nolabel={!label}
+        onClick={onClick}
+      >
+        {label && (
+          <Label isFocus={isFocus} hasPrefix={hasPrefix} onClick={onClick}>
+            <LabelInfo
+              label={label}
+              required={required}
+              description={description}
+              labelExtra={labelExtra}
+            ></LabelInfo>
+          </Label>
+        )}
+        {extra && <Extra>{extra}</Extra>}
+        <Inner>{children}</Inner>
+      </InnerWrapper>
+      {addAfter && <AddAfter>{addAfter}</AddAfter>}
+    </WrapperBox>
+  );
+};
+
+export default Wrapper;

src/components/seal-form/wrapper/input.ts

@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+import {
+  BGCOLOR,
+  BORDERRADIUS,
+  INPUTHEIGHT,
+  INPUT_INNER_PADDING,
+  WRAPHEIGHT
+} from '../config';
+
+const InputWrapper = styled.div`
+  .seal-input-number {
+    padding-right: 0;
+  }
+  .seal-input-wrapper-disabled {
+    background-color: var(--ant-color-bg-container-disabled);
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: var(--ant-color-border);
+      .ant-input-search-button {
+        border-color: var(--ant-color-border) !important;
+        color: var(--ant-color-text-description) !important;
+      }
+    }
+  }
+  .ant-input-number-input-wrap {
+    flex: 1;
+  }
+  .ant-input,
+  .ant-input-password {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: ${INPUT_INNER_PADDING}px;
+    height: ${INPUTHEIGHT}px !important;
+    background-color: ${BGCOLOR};
+  }
+  .ant-input.seal-textarea {
+    flex: 1;
+  }
+
+  .ant-input-number {
+    position: static;
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    height: ${INPUTHEIGHT}px !important;
+    background-color: ${BGCOLOR};
+
+    &:hover .ant-input-number-handler-wrap,
+    &-focused .ant-input-number-handler-wrap {
+      width: 34px !important;
+    }
+
+    &:hover {
+      cursor: text;
+    }
+    &.ant-input-number-disabled {
+      &:hover {
+        background-color: inherit;
+      }
+    }
+  }
+  .ant-input-outlined {
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: ${INPUT_INNER_PADDING}px;
+    height: ${INPUTHEIGHT}px !important;
+    background-color: transparent;
+  }
+  .ant-input.ant-input-disabled {
+    background-color: transparent;
+  }
+  input.ant-input-number-input {
+    flex: 1;
+    height: ${INPUTHEIGHT}px !important;
+    padding-block: 5px;
+    padding-inline: ${INPUT_INNER_PADDING}px;
+  }
+  .ant-input-group {
+    position: static;
+  }
+  .ant-input-group-addon {
+    inset-inline-start: unset !important;
+    border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0;
+    width: 30px;
+    background-color: transparent;
+    border: none;
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+  .ant-input-group-wrapper-disabled {
+    .ant-input-group-addon {
+      background-color: transparent;
+    }
+    .ant-input-group-addon:hover {
+      background-color: transparent !important;
+    }
+  }
+  .ant-input-search-button {
+    position: absolute;
+    top: -20px;
+    right: 0;
+    border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0 !important;
+    overflow: hidden;
+    border: none;
+    height: 52px;
+    border-left: var(--ant-line-width) var(--ant-line-type)
+      var(--ant-color-border);
+  }
+  .ant-input-number-handler-wrap {
+    top: 0;
+    height: ${WRAPHEIGHT - 2}px;
+  }
+  .seal-textarea-wrapper {
+    height: auto;
+    padding-bottom: 10px;
+    padding-right: 10px;
+  }
+`;
+
+export default InputWrapper;

src/components/seal-form/wrapper/select.ts

@@ -0,0 +1,190 @@
+import styled from 'styled-components';
+import { BORDERRADIUS, INPUT_INNER_PADDING, INPUTHEIGHT } from '../config';
+
+const SelectWrapper = styled.div`
+  .seal-select-wrapper {
+    border: none;
+    box-shadow: none;
+
+    &.dropdown-visible {
+      .__wrapper__ {
+        .ant-select-selector {
+          border-bottom: none !important;
+          border-radius: ${BORDERRADIUS}px ${BORDERRADIUS}px 0 0;
+          transition: all 0.2s ease;
+
+          &::before {
+            content: '';
+            position: absolute;
+            height: 1px;
+            margin-inline: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--ant-color-split);
+          }
+        }
+
+        .ant-select-dropdown {
+          box-shadow: none;
+          border-width: var(--ant-line-width);
+          border-style: var(--ant-line-type);
+          border-color: var(--ant-input-active-border-color);
+          border-top: none;
+        }
+
+        &:hover {
+          :global(.ant-select-dropdown) {
+            border-color: var(--ant-input-active-border-color);
+          }
+        }
+
+        &:focus-within {
+          border-color: var(--ant-input-active-border-color) !important;
+          outline: 0;
+          background-color: var(--ant-input-active-bg);
+        }
+      }
+    }
+
+    &:focus-within {
+      border: none;
+      box-shadow: none;
+    }
+    .__wrapper__ {
+      padding-block: 0;
+
+      .label {
+        left: ${INPUT_INNER_PADDING + 1}px !important;
+        top: 11px;
+
+        &.isfoucs-has-value {
+          top: 11px;
+          transition: all 0.2s var(--seal-transition-func);
+        }
+
+        &.blur-no-value {
+          top: 21px;
+          transition: all 0.2s var(--seal-transition-func);
+        }
+
+        &.has-prefix {
+          top: 11px !important;
+        }
+      }
+      &.no-label {
+        padding-block: 0;
+
+        :global {
+          .ant-select-arrow {
+            top: 50%;
+          }
+        }
+
+        .ant-select-selector {
+          padding-block-start: 0 !important;
+        }
+
+        :global(.ant-select .ant-select-selection-search) {
+          top: 10px !important;
+        }
+      }
+    }
+    .ant-select-selection-overflow-item > span {
+      display: flex;
+      align-items: center;
+    }
+    .ant-select {
+      display: flex;
+      align-items: center;
+      height: 54px;
+
+      .ant-select-selection-search {
+        top: 20px !important;
+        inset-inline-start: ${INPUT_INNER_PADDING}px;
+      }
+      &.ant-select-multiple.ant-cascader .ant-select-selection-search {
+        top: 0 !important;
+      }
+    }
+
+    .ant-select-selector {
+      flex: 1;
+      padding-inline: ${INPUT_INNER_PADDING}px !important;
+      border-width: var(--ant-line-width);
+      border-style: var(--ant-line-type);
+      border-color: var(--ant-color-border);
+      border-radius: ${BORDERRADIUS}px;
+      height: 54px !important;
+      padding-block: 20px 0 !important;
+      box-shadow: none !important;
+
+      &:hover {
+        border-color: var(--ant-input-hover-border-color) !important;
+        transition: all 0.2s ease;
+      }
+
+      &:focus-within {
+        border-color: var(--ant-input-active-border-color) !important;
+        outline: 0;
+        background-color: var(--ant-input-active-bg);
+      }
+    }
+
+    .ant-select-multiple.ant-select-lg {
+      .ant-select-selection-search {
+        margin-inline-start: 0 !important;
+        left: 0 !important;
+      }
+    }
+
+    .ant-select-selection-item {
+      height: ${INPUTHEIGHT}px !important;
+      padding-block: 5px !important;
+      line-height: 22px !important;
+      padding-inline-end: 0 !important;
+    }
+
+    .ant-select-auto-complete .ant-select-selector {
+      padding-inline: 0 !important;
+      flex: 1;
+    }
+
+    .ant-select-arrow {
+      top: 32px;
+    }
+
+    .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
+      .ant-select-selector {
+      background-color: transparent;
+    }
+
+    .ant-select-selection-search-input {
+      height: ${INPUTHEIGHT}px !important;
+    }
+
+    &.validate-status-error {
+      .ant-select-selector {
+        border-width: var(--ant-line-width) !important;
+        border-style: var(--ant-line-type) !important;
+        border-color: var(--ant-color-error) !important;
+
+        &:hover {
+          border-color: var(--ant-color-error-border-hover) !important;
+        }
+
+        &:focus-within {
+          border-color: var(--ant-color-error) !important;
+        }
+      }
+
+      &.dropdown-visible {
+        .ant-select-dropdown {
+          border-color: var(--ant-color-error) !important;
+        }
+      }
+    }
+  }
+`;
+
+export default SelectWrapper;

src/components/seal-form/wrapper/slider.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { INPUTHEIGHT, INPUT_INNER_PADDING } from '../config';
+
+const SliderWrapper = styled.div`
+  padding-block: 0;
+  padding-inline: 2px;
+  input.ant-input-number-input {
+    text-align: center !important;
+    flex: 1;
+    height: ${INPUTHEIGHT}px !important;
+    padding-block: 5px;
+    padding-inline: ${INPUT_INNER_PADDING}px;
+  }
+  .slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+
+    .val {
+      color: var(--ant-color-text);
+    }
+
+    .label-val {
+      position: absolute !important;
+      top: -14px;
+      right: -14px;
+      width: 80px;
+      border-radius: var(--border-radius-base);
+      text-align: center;
+      border: 1px solid var(--ant-color-border) !important;
+
+      .ant-input-number-input {
+        text-align: center !important;
+      }
+    }
+  }
+`;
+
+export default SliderWrapper;

src/locales/en-US/resources.ts

@@ -57,8 +57,14 @@ export default {
   'resources.worker.container.install': 'Container Installation(Linux Only)',
   'resources.worker.cann.tips': `Set <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES</span> to the required GPU indices. For GPU0 to GPU3, use <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> or <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`,
   'resources.modelfiles.form.path': 'Storage path',
-  'resources.modelfiles.modelfile': 'Model File',
+  'resources.modelfiles.modelfile': 'Model Files',
-  'resources.modelfiles.download': 'Download Model',
+  'resources.modelfiles.download': 'Add Model File',
   'resources.modelfiles.size': 'Size',
-  'resources.modelfiles.selecttarget': 'Select Target'
+  'resources.modelfiles.selecttarget': 'Select Target',
+  'resources.modelfiles.form.localdir': 'Local Directory',
+  'resources.modelfiles.form.localdir.tips':
+    'The default storage directory is /var/lib/gpustack/cache.',
+  'resources.modelfiles.retry.download': 'Retry Download',
+  'resources.modelfiles.storagePath.holder':
+    'Waiting for download to complete...'
 };

src/locales/ru-RU/resources.ts

@@ -57,10 +57,16 @@ export default {
   'resources.worker.container.install': 'Установка контейнером (только Linux)',
   'resources.worker.cann.tips': `Укажите индексы GPU через <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> или <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`,
   'resources.modelfiles.form.path': 'Storage path',
-  'resources.modelfiles.modelfile': 'Model File',
+  'resources.modelfiles.modelfile': 'Model Files',
-  'resources.modelfiles.download': 'Add Model',
+  'resources.modelfiles.download': 'Add Model File',
   'resources.modelfiles.size': 'Size',
-  'resources.modelfiles.selecttarget': 'Select Target'
+  'resources.modelfiles.selecttarget': 'Select Target',
+  'resources.modelfiles.form.localdir': 'Local Directory',
+  'resources.modelfiles.form.localdir.tips':
+    'The default storage directory is /var/lib/gpustack/cache.',
+  'resources.modelfiles.retry.download': 'Retry Download',
+  'resources.modelfiles.storagePath.holder':
+    'Waiting for download to complete...'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -69,4 +75,8 @@ export default {
 //3. 'resources.modelfiles.download',
 //4. 'resources.modelfiles.size',
 //5. 'resources.modelfiles.selecttarget',
+//6. 'resources.modelfiles.form.localdir',
+//7. 'resources.modelfiles.retry.download',
+//8. 'resources.modelfiles.form.localdir.tips',
+//9. 'resources.modelfiles.storagePath.holder',
 // ========== End of To-Do List ==========

src/locales/zh-CN/resources.ts

@@ -57,7 +57,12 @@ export default {
     '按需要挂载的 GPU index 设置 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span>，如需挂载 GPU0 - GPU3，则设为 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0,1,2,3</span> 或 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0-3</span>',
   'resources.modelfiles.form.path': '存储路径',
   'resources.modelfiles.modelfile': '模型文件',
-  'resources.modelfiles.download': '添加模型',
+  'resources.modelfiles.download': '添加模型文件',
   'resources.modelfiles.size': '文件大小',
-  'resources.modelfiles.selecttarget': '选择目标位置'
+  'resources.modelfiles.selecttarget': '选择目标位置',
+  'resources.modelfiles.form.localdir': '本地目录',
+  'resources.modelfiles.form.localdir.tips':
+    '默认存储目录为 /var/lib/gpustack/cache',
+  'resources.modelfiles.retry.download': '重新下载',
+  'resources.modelfiles.storagePath.holder': '等待下载完成...'
 };

src/pages/llmodels/catalog.tsx

@@ -35,7 +35,7 @@ const Catalog: React.FC = () => {
     page: 1,
     perPage: 100,
     search: '',
-    categories: []
+    categories: ''
   });
   const [openDeployModal, setOpenDeployModal] = useState<any>({
     show: false,
@@ -49,22 +49,20 @@ const Catalog: React.FC = () => {
   const categoryOptions = [...modelCategories.filter((item) => item.value)];
 
   const filterData = useCallback(
-    (data: { search: string; categories: string[] }) => {
+    (data: { search: string; categories: string }) => {
       const { search, categories } = data;
       const dataList = cacheData.current.filter((item) => {
-        if (search && categories.length > 0) {
+        if (search && categories) {
           return (
             _.toLower(item.name).includes(search) &&
-            categories.some((category) => item.categories.includes(category))
+            item.categories.includes(categories)
           );
         }
         if (search) {
           return _.toLower(item.name).includes(_.toLower(search));
         }
-        if (categories.length > 0) {
+        if (categories) {
-          return categories.some((category) =>
+          return item.categories.includes(categories);
-            item.categories.includes(category)
-          );
         }
         return true;
       });
@@ -241,7 +239,6 @@ const Catalog: React.FC = () => {
               placeholder={intl.formatMessage({ id: 'models.filter.category' })}
               style={{ width: 230 }}
               size="large"
-              mode="multiple"
               maxTagCount={1}
               onChange={handleCategoryChange}
               options={categoryOptions}

src/pages/llmodels/components/data-form.tsx

@@ -1,6 +1,5 @@
 import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
-import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -8,7 +7,7 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Form, Input, Typography } from 'antd';
+import { Form, Typography } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
@@ -30,11 +29,12 @@ import {
   ollamaModelOptions,
   sourceOptions
 } from '../config';
-import { HuggingFaceModels, ModelScopeModels } from '../config/audio-catalog';
+import { identifyModelTask } from '../config/audio-catalog';
 import { FormData } from '../config/types';
 import AdvanceConfig from './advance-config';
 
 interface DataFormProps {
+  initialValues?: any;
   ref?: any;
   source: string;
   action: PageActionType;
@@ -65,6 +65,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const {
     action,
     isGGUF,
+    initialValues,
     sourceDisable = true,
     backendOptions,
     sourceList,
@@ -116,33 +117,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     []
   );
 
-  const identifyModelTask = () => {
-    let data = null;
-    if (props.source === modelSourceMap.huggingface_value) {
-      data = HuggingFaceModels.find(
-        (item) =>
-          `${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
-          props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
-      );
-    }
-    if (props.source === modelSourceMap.modelscope_value) {
-      data = ModelScopeModels.find(
-        (item) =>
-          `${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
-          props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
-      );
-    }
-    if (data) {
-      return modelTaskMap.audio;
-    }
-    return '';
-  };
   const handleOnSelectModel = () => {
     let name = _.split(props.selectedModel.name, '/').slice(-1)[0];
     const reg = /(-gguf)$/i;
     name = _.toLower(name).replace(reg, '');
 
-    const modelTaskType = identifyModelTask();
+    const modelTaskType = identifyModelTask(
+      props.source,
+      props.selectedModel.name
+    );
 
     const modelTask =
       HuggingFaceTaskMap.audio.includes(props.selectedModel.task) ||
@@ -282,11 +265,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     );
   };
 
-  const handleOnSearch = (value: string) => {
-    console.log('local_path', value);
-    form.setFieldValue('local_path', value);
-  };
-
   const renderLocalPathFields = () => {
     return (
       <>
@@ -300,14 +278,17 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             }
           ]}
         >
-          {/* <SealInput.Input
+          <SealAutoComplete
             required
+            filterOption
+            defaultActiveFirstOption
+            options={modelFileOptions}
             onBlur={handleLocalPathBlur}
             onFocus={handleOnFocus}
             label={intl.formatMessage({ id: 'models.form.filePath' })}
             description={<TooltipList list={localPathTipsList}></TooltipList>}
-          ></SealInput.Input> */}
+          ></SealAutoComplete>
-          <SealCascader
+          {/* <SealCascader
             required
             showSearch
             description={<TooltipList list={localPathTipsList}></TooltipList>}
@@ -330,7 +311,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                 }}
               />
             )}
-          ></SealCascader>
+          ></SealCascader> */}
         </Form.Item>
       </>
     );
@@ -523,7 +504,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         cpu_offloading: true,
         scheduleType: 'auto',
         categories: null,
-        distributed_inference_across_workers: true
+        distributed_inference_across_workers: true,
+        ...initialValues
       }}
     >
       <Form.Item<FormData>

src/pages/llmodels/components/deploy-modal.tsx

@@ -4,7 +4,7 @@ import { PageActionType } from '@/config/types';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Drawer } from 'antd';
-import { debounce } from 'lodash';
+import _, { debounce } from 'lodash';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { backendOptionsMap, modelSourceMap } from '../config';
 import { FormData } from '../config/types';
@@ -21,9 +21,11 @@ type AddModalProps = {
   action: PageActionType;
   open: boolean;
   source: string;
+  isGGUF?: boolean;
   width?: string | number;
   gpuOptions: any[];
   modelFileOptions: any[];
+  initialValues?: any;
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -36,7 +38,8 @@ const AddModal: FC<AddModalProps> = (props) => {
     onCancel,
     source,
     action,
-    width = 600
+    width = 600,
+    initialValues
   } = props || {};
   const SEARCH_SOURCE = [
     modelSourceMap.huggingface_value,
@@ -47,7 +50,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   const intl = useIntl();
   const [selectedModel, setSelectedModel] = useState<any>({});
   const [collapsed, setCollapsed] = useState<boolean>(false);
-  const [isGGUF, setIsGGUF] = useState<boolean>(false);
+  const [isGGUF, setIsGGUF] = useState<boolean>(props.isGGUF || false);
   const modelFileRef = useRef<any>(null);
   const [warningStatus, setWarningStatus] = useState<{
     show: boolean;
@@ -128,7 +131,9 @@ const AddModal: FC<AddModalProps> = (props) => {
   }, [onCancel]);
 
   useEffect(() => {
-    handleSelectModelFile({ fakeName: '' });
+    if (!_.isEmpty(selectedModel)) {
+      handleSelectModelFile({ fakeName: '' });
+    }
   }, [selectedModel]);
 
   useEffect(() => {
@@ -142,12 +147,17 @@ const AddModal: FC<AddModalProps> = (props) => {
     } else if (source === modelSourceMap.ollama_library_value) {
       form.current?.setFieldValue?.('backend', backendOptionsMap.llamaBox);
       setIsGGUF(true);
+    } else {
+      form.current?.setFieldsValue({
+        ...props.initialValues
+      });
+      setIsGGUF(props.isGGUF || false);
     }
 
     return () => {
       setSelectedModel({});
     };
-  }, [open, source]);
+  }, [open, source, props.isGGUF, props.initialValues]);
 
   return (
     <Drawer
@@ -280,6 +290,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                 </TitleWrapper>
               )}
               <DataForm
+                initialValues={initialValues}
                 source={source}
                 action={action}
                 selectedModel={selectedModel}

src/pages/llmodels/components/file-parts.tsx

@@ -4,8 +4,9 @@ import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 
 const FileParts: React.FC<{
+  showSize?: boolean;
   fileList: any[];
-}> = ({ fileList }) => {
+}> = ({ fileList, showSize = true }) => {
   return (
     <SimpleBar
       style={{ maxHeight: 200 }}
@@ -19,7 +20,7 @@ const FileParts: React.FC<{
                 {' '}
                 Part {file.part} of {file.total}
               </span>
-              <span>{convertFileSize(file.size)}</span>
+              {showSize && <span>{convertFileSize(file.size)}</span>}
             </div>
           );
         })}

src/pages/llmodels/components/table-list.tsx

@@ -730,7 +730,6 @@ const Models: React.FC<ModelsProps> = ({
                 })}
                 style={{ width: 230 }}
                 size="large"
-                mode="multiple"
                 maxTagCount={1}
                 onChange={handleCategoryChange}
                 options={modelCategories.filter((item) => item.value)}

src/pages/llmodels/config/audio-catalog.ts

@@ -1,3 +1,5 @@
+import { modelSourceMap, modelTaskMap } from './index';
+
 export const HuggingFaceModels = [
   {
     type: 'stt',
@@ -178,3 +180,25 @@ export const ModelScopeModels = [
     name: 'faster-whisper-large-v1'
   }
 ];
+
+export const identifyModelTask = (source: string, modelName: string) => {
+  let data = null;
+  if (source === modelSourceMap.huggingface_value) {
+    data = HuggingFaceModels.find(
+      (item) =>
+        `${item.org}/${item.name}`.indexOf(modelName) > -1 ||
+        modelName?.indexOf(`${item.org}/${item.name}`) > -1
+    );
+  }
+  if (source === modelSourceMap.modelscope_value) {
+    data = ModelScopeModels.find(
+      (item) =>
+        `${item.org}/${item.name}`.indexOf(modelName) > -1 ||
+        modelName?.indexOf(`${item.org}/${item.name}`) > -1
+    );
+  }
+  if (data) {
+    return modelTaskMap.audio;
+  }
+  return '';
+};

src/pages/llmodels/config/button-actions.ts

@@ -189,13 +189,13 @@ export const setModelActionList = (record: any) => {
 };
 
 export const modelFileActions = [
-  // {
-  //   label: 'common.button.deploy',
-  //   key: 'deploy',
-  //   icon: icons.ThunderboltOutlined
-  // },
   {
-    label: 'common.button.retry',
+    label: 'common.button.deploy',
+    key: 'deploy',
+    icon: icons.ThunderboltOutlined
+  },
+  {
+    label: 'resources.modelfiles.retry.download',
     key: 'retry',
     icon: icons.RetweetOutlined
   },

src/pages/llmodels/download/index.tsx

@@ -110,6 +110,12 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
     } else if (source === modelSourceMap.ollama_library_value) {
       setIsGGUF(true);
     }
+    if (open) {
+      form.current?.form?.setFieldValue(
+        'worker_id',
+        workersList[0]?.value || ''
+      );
+    }
 
     return () => {
       setSelectedModel({});

src/pages/llmodels/download/target-form.tsx

@@ -162,14 +162,21 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
           name="local_dir"
           rules={[
             {
-              required: true,
+              required: false,
-              message: getRuleMessage('input', 'resources.modelfiles.form.path')
+              message: getRuleMessage(
+                'input',
+                'resources.modelfiles.form.localdir'
+              )
             }
           ]}
         >
           <SealInput.Input
-            label={intl.formatMessage({ id: 'resources.modelfiles.form.path' })}
+            description={intl.formatMessage({
-            required
+              id: 'resources.modelfiles.form.localdir.tips'
+            })}
+            label={intl.formatMessage({
+              id: 'resources.modelfiles.form.localdir'
+            })}
           ></SealInput.Input>
         </Form.Item>
       )}

src/pages/llmodels/hooks/index.ts

@@ -143,7 +143,29 @@ export const useGenerateModelFileOptions = () => {
         Object.entries(worker).filter(([key]) => workerFields.has(key))
       )
     }));
-    return result;
+    // extract a list from the result, and the structure is like:
+    // [
+    //   {
+    //     label: 'worker_name/child_label',
+    //     value: 'child_value',
+    //     ...other child properties
+    //   }
+    // ]
+    const childrenList = result.reduce((acc: any[], cur) => {
+      if (cur.children) {
+        const list = cur.children.map((child: any) => ({
+          ...child,
+          label: `${cur.label}${child.label}`,
+          value: child.value
+        }));
+        acc.push(...list);
+      }
+      return acc;
+    }, []);
+
+    return childrenList;
+
+    // return result;
   };
 
   return {

src/pages/resources/components/model-files.tsx

@@ -1,3 +1,4 @@
+import { modelsExpandKeysAtom } from '@/atoms/models';
 import AutoTooltip from '@/components/auto-tooltip';
 import CopyButton from '@/components/copy-button';
 import DeleteModal from '@/components/delete-modal';
@@ -5,9 +6,19 @@ import DropDownActions from '@/components/drop-down-actions';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import StatusTag from '@/components/status-tag';
+import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { modelSourceMap } from '@/pages/llmodels/config';
+import { createModel } from '@/pages/llmodels/apis';
+import DeployModal from '@/pages/llmodels/components/deploy-modal';
+import FileParts from '@/pages/llmodels/components/file-parts';
+import {
+  backendOptionsMap,
+  getSourceRepoConfigValue,
+  modelSourceMap
+} from '@/pages/llmodels/config';
+import { identifyModelTask } from '@/pages/llmodels/config/audio-catalog';
 import {
   generateSource,
   modalConfig,
@@ -16,11 +27,32 @@ import {
 } from '@/pages/llmodels/config/button-actions';
 import DownloadModal from '@/pages/llmodels/download';
 import { convertFileSize } from '@/utils';
-import { DeleteOutlined, DownOutlined, SyncOutlined } from '@ant-design/icons';
+import {
-import { useIntl } from '@umijs/max';
+  DeleteOutlined,
-import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
+  DownOutlined,
+  InfoCircleOutlined,
+  SyncOutlined
+} from '@ant-design/icons';
+import { useIntl, useNavigate } from '@umijs/max';
+import {
+  Button,
+  ConfigProvider,
+  Empty,
+  Input,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  message
+} from 'antd';
 import dayjs from 'dayjs';
+import { useAtom } from 'jotai';
+import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import {
+  useGenerateFormEditInitialValues,
+  useGenerateModelFileOptions
+} from '../../llmodels/hooks';
 import {
   MODEL_FILES_API,
   deleteModelFile,
@@ -40,6 +72,9 @@ import {
   ListItem as WorkerListItem
 } from '../config/types';
 
+const pattern = /^(.*)-(\d+)-of-(\d+)\.(.*)$/;
+const filterPattern = /^(.*)-\d+-of-\d+(\.gguf)?$/;
+
 const getWorkerName = (
   id: number,
   workersList: Global.BaseOption<number>[]
@@ -77,11 +112,16 @@ const InstanceStatusTag = (props: { data: ListItem }) => {
 };
 
 const ModelFiles = () => {
+  const { getGPUList, generateFormValues } = useGenerateFormEditInitialValues();
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+  const [modelsExpandKeys, setModelsExpandKeys] = useAtom(modelsExpandKeysAtom);
+  const navigate = useNavigate();
   const {
     dataSource,
     rowSelection,
     queryParams,
     modalRef,
+    fetchData,
     handleDelete,
     handleDeleteBatch,
     handlePageChange,
@@ -95,7 +135,8 @@ const ModelFiles = () => {
     watch: true,
     contentForDelete: 'resources.modelfiles.modelfile'
   });
-
+  const { getModelFileList, generateModelFileOptions } =
+    useGenerateModelFileOptions();
   const intl = useIntl();
   const { showSuccess } = useAppUtils();
   const [workersList, setWorkersList] = useState<Global.BaseOption<number>[]>(
@@ -112,6 +153,23 @@ const ModelFiles = () => {
     source: modelSourceMap.huggingface_value,
     gpuOptions: []
   });
+  const [openDeployModal, setOpenDeployModal] = useState<{
+    show: boolean;
+    width: number | string;
+    source: string;
+    gpuOptions: any[];
+    modelFileOptions?: any[];
+    initialValues: any;
+    isGGUF?: boolean;
+  }>({
+    show: false,
+    width: 600,
+    source: modelSourceMap.local_path_value,
+    gpuOptions: [],
+    modelFileOptions: [],
+    initialValues: {},
+    isGGUF: false
+  });
 
   useEffect(() => {
     const fetchWorkerList = async () => {
@@ -140,6 +198,84 @@ const ModelFiles = () => {
     fetchWorkerList();
   }, []);
 
+  const extractFileName = (name: string) => {
+    return name.replace(filterPattern, '$1');
+  };
+
+  const generateInitialValues = (record: ListItem) => {
+    const isGGUF = _.includes(record.resolved_paths?.[0], 'gguf');
+    const isOllama = !!record.ollama_library_model_name;
+    const audioModelTag = identifyModelTask(
+      record.source,
+      record.resolved_paths?.[0]
+    );
+
+    let name = _.toLower(
+      _.split(
+        record.huggingface_repo_id ||
+          record.ollama_library_model_name ||
+          record.model_scope_model_id ||
+          record.local_path,
+        '/'
+      ).pop()
+    );
+
+    return {
+      source: modelSourceMap.local_path_value,
+      local_path: record.resolved_paths?.[0],
+      name: extractFileName(name),
+      backend:
+        isGGUF || isOllama
+          ? backendOptionsMap.llamaBox
+          : audioModelTag
+            ? backendOptionsMap.voxBox
+            : backendOptionsMap.vllm,
+      isGGUF: !audioModelTag && (isGGUF || isOllama)
+    };
+  };
+
+  const renderParts = (record: ListItem) => {
+    const parts = _.tail(record.resolved_paths);
+    if (!parts.length) {
+      return null;
+    }
+    const partsList = parts.map((item: string) => {
+      const match = item.match(pattern);
+      if (!match) {
+        return null;
+      }
+      return {
+        part: parseInt(match[2], 10),
+        total: parseInt(match[3], 10),
+        name: _.split(match[1], '/').pop()
+      };
+    });
+    return (
+      <Tooltip
+        overlayInnerStyle={{
+          width: 120,
+          padding: 0
+        }}
+        title={<FileParts fileList={partsList} showSize={false}></FileParts>}
+      >
+        <Tag
+          className="tag-item"
+          color="purple"
+          style={{
+            marginRight: 0,
+            height: 22,
+            borderRadius: 'var(--border-radius-base)'
+          }}
+        >
+          <span style={{ opacity: 1 }}>
+            <InfoCircleOutlined className="m-r-5" />
+            {partsList.length} parts
+          </span>
+        </Tag>
+      </Tooltip>
+    );
+  };
+
   const handleSelect = async (val: any, record: ListItem) => {
     try {
       if (val === 'delete') {
@@ -150,6 +286,22 @@ const ModelFiles = () => {
       } else if (val === 'retry') {
         await retryDownloadModelFile(record.id);
         showSuccess();
+      } else if (val === 'deploy') {
+        saveScrollHeight();
+        const [modelFileList, gpuList] = await Promise.all([
+          getModelFileList(),
+          getGPUList()
+        ]);
+        const dataList = generateModelFileOptions(modelFileList, workersList);
+        const initialValues = generateInitialValues(record);
+        setOpenDeployModal({
+          ...openDeployModal,
+          modelFileOptions: dataList,
+          gpuOptions: gpuList,
+          initialValues: initialValues,
+          isGGUF: initialValues.isGGUF,
+          show: true
+        });
       }
     } catch (error) {
       // console.log('error', error);
@@ -189,43 +341,60 @@ const ModelFiles = () => {
         ...downloadModalStatus,
         show: false
       });
+      fetchData();
       showSuccess();
     } catch (error) {
       // console.log('error', error);
     }
   };
 
+  const setActionList = (record: ListItem) => {
+    return _.filter(modelFileActions, (item: { key: string }) => {
+      if (item.key === 'deploy') {
+        return record.state === ModelfileStateMap.Ready;
+      }
+      return true;
+    });
+  };
+  const handleDeployModalCancel = () => {
+    setOpenDeployModal({
+      ...openDeployModal,
+      show: false
+    });
+    restoreScrollHeight();
+  };
+
+  const handleCreateModel = async (data: any) => {
+    try {
+      const result = getSourceRepoConfigValue(openDeployModal.source, data);
+
+      const modelData = await createModel({
+        data: {
+          ...result.values,
+          ..._.omit(data, result.omits)
+        }
+      });
+      setOpenDeployModal({
+        ...openDeployModal,
+        show: false
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      setModelsExpandKeys([modelData.id]);
+      navigate('/models/list');
+    } catch (error) {
+      // console.log('error', error);
+    }
+  };
+
   const columns = [
     {
-      title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
+      title: intl.formatMessage({ id: 'models.form.source' }),
-      dataIndex: 'resolved_paths',
+      dataIndex: 'source',
-      width: 240,
+      render: (text: string, record: ListItem) => (
-      render: (text: string, record: ListItem) => {
+        <span className="flex flex-column" style={{ width: '100%' }}>
-        return (
+          <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
-          record.resolved_paths?.length > 0 && (
+        </span>
-            <span className="flex-center">
+      )
-              <AutoTooltip ghost maxWidth={240}>
-                <span>{record.resolved_paths?.[0]}</span>
-              </AutoTooltip>
-              <CopyButton
-                text={record.resolved_paths?.[0]}
-                type="link"
-              ></CopyButton>
-            </span>
-          )
-        );
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
-      dataIndex: 'size',
-      render: (text: string, record: ListItem) => {
-        return (
-          <AutoTooltip ghost maxWidth={100}>
-            <span>{convertFileSize(record.size, 1)}</span>
-          </AutoTooltip>
-        );
-      }
     },
     {
       title: 'Worker',
@@ -238,26 +407,63 @@ const ModelFiles = () => {
         );
       }
     },
-    {
-      title: intl.formatMessage({ id: 'models.form.source' }),
-      dataIndex: 'source',
-      render: (text: string, record: ListItem) => (
-        <span className="flex flex-column" style={{ width: '100%' }}>
-          <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
-        </span>
-      )
-    },
     {
       title: intl.formatMessage({ id: 'common.table.status' }),
       dataIndex: 'state',
+      width: 120,
       render: (text: string, record: ListItem) => {
         return <InstanceStatusTag data={record} />;
       }
     },
+    {
+      title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
+      dataIndex: 'resolved_paths',
+      render: (text: string, record: ListItem) => {
+        if (
+          !record.resolved_paths.length &&
+          record.state === ModelfileStateMap.Downloading
+        ) {
+          return (
+            <span>
+              {intl.formatMessage({
+                id: 'resources.modelfiles.storagePath.holder'
+              })}
+            </span>
+          );
+        }
+        return (
+          record.resolved_paths?.length > 0 && (
+            <span className="flex-center">
+              <AutoTooltip ghost maxWidth={'100%'}>
+                <span>{record.resolved_paths?.[0]}</span>
+              </AutoTooltip>
+              <CopyButton
+                text={record.resolved_paths?.[0]}
+                type="link"
+              ></CopyButton>
+              {renderParts(record)}
+            </span>
+          )
+        );
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
+      dataIndex: 'size',
+      width: 100,
+      render: (text: string, record: ListItem) => {
+        return (
+          <AutoTooltip ghost maxWidth={100}>
+            <span>{convertFileSize(record.size, 1)}</span>
+          </AutoTooltip>
+        );
+      }
+    },
     {
       title: intl.formatMessage({ id: 'common.table.createTime' }),
       dataIndex: 'created_at',
       sorter: false,
+      width: 180,
       render: (text: number) => (
         <AutoTooltip ghost>
           {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -267,9 +473,10 @@ const ModelFiles = () => {
     {
       title: intl.formatMessage({ id: 'common.table.operation' }),
       dataIndex: 'operation',
+      width: 120,
       render: (text: string, record: ListItem) => (
         <DropdownButtons
-          items={modelFileActions}
+          items={setActionList(record)}
           onSelect={(val) => handleSelect(val, record)}
         ></DropdownButtons>
       )
@@ -334,6 +541,7 @@ const ModelFiles = () => {
       <ConfigProvider renderEmpty={renderEmpty}>
         <Table
           columns={columns}
+          tableLayout="fixed"
           style={{ width: '100%' }}
           dataSource={dataSource.dataList}
           loading={dataSource.loading}
@@ -360,6 +568,19 @@ const ModelFiles = () => {
         onOk={handleDownload}
         workersList={workersList}
       ></DownloadModal>
+      <DeployModal
+        open={openDeployModal.show}
+        action={PageAction.CREATE}
+        title={intl.formatMessage({ id: 'models.button.deploy' })}
+        source={openDeployModal.source}
+        width={openDeployModal.width}
+        gpuOptions={openDeployModal.gpuOptions}
+        modelFileOptions={openDeployModal.modelFileOptions || []}
+        initialValues={openDeployModal.initialValues}
+        isGGUF={openDeployModal.isGGUF}
+        onCancel={handleDeployModalCancel}
+        onOk={handleCreateModel}
+      ></DeployModal>
     </>
   );
 };