feat: yaml editor

src/pages/llmodels/catalog.tsx

@@ -5,7 +5,7 @@ import BaseSelect from '@/components/seal-form/base/select';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { IS_FIRST_LOGIN, writeState } from '@/utils/localstore/index';
-import { SyncOutlined } from '@ant-design/icons';
+import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Pagination, Space, message } from 'antd';
@@ -266,6 +266,11 @@ const Catalog: React.FC = () => {
         left={
           <Space>
             <Input
+              prefix={
+                <SearchOutlined
+                  style={{ color: 'var(--ant-color-text-placeholder)' }}
+                ></SearchOutlined>
+              }
               placeholder={intl.formatMessage({ id: 'common.filter.name' })}
               style={{ width: 230 }}
               size="large"

src/pages/llmodels/components/column-wrapper.tsx

@@ -1,50 +0,0 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import React from 'react';
-import '../style/column-wrapper.less';
-
-const ColumnWrapper: React.FC<any> = ({
-  children,
-  footer,
-  maxHeight,
-  paddingBottom = 50
-}) => {
-  const scroller = React.useRef<any>(null);
-  const { initialize } = useOverlayScroller({
-    options: {
-      scrollbars: {
-        autoHide: 'move'
-      }
-    }
-  });
-
-  React.useEffect(() => {
-    if (scroller.current) {
-      initialize(scroller.current);
-    }
-  }, []);
-
-  return (
-    <>
-      {footer ? (
-        <div className="column-wrapper-footer">
-          <div className="column-wrapper" ref={scroller} style={{ maxHeight }}>
-            <div
-              style={{
-                paddingBottom: paddingBottom
-              }}
-            >
-              {children}
-            </div>
-          </div>
-          {<div className="footer">{footer}</div>}
-        </div>
-      ) : (
-        <div className="column-wrapper" ref={scroller} style={{ maxHeight }}>
-          <div>{children}</div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ColumnWrapper;

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

@@ -161,7 +161,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         form={form}
         onFinish={handleOk}
         preserve={false}
-        style={{ padding: '16px 24px' }}
         clearOnDestroy={true}
         onValuesChange={handleOnValuesChange}
         scrollToFirstError={true}

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

@@ -8,6 +8,7 @@ import { Button } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+import ColumnWrapper from '../../_components/column-wrapper';
 import { queryCatalogItemSpec } from '../apis';
 import {
   defaultFormValues,
@@ -21,7 +22,6 @@ import { CatalogSpec, FormData, ListItem, SourceType } from '../config/types';
 import { generateGPUIds } from '../config/utils';
 import { useCheckCompatibility } from '../hooks';
 import useFormInitialValues from '../hooks/use-form-initial-values';
-import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
 

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

@@ -7,6 +7,7 @@ import { Button } from 'antd';
 import _ from 'lodash';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+import ColumnWrapper from '../../_components/column-wrapper';
 import { defaultFormValues, deployFormKeyMap, modelSourceMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { BackendOption, FormData, SourceType } from '../config/types';
@@ -17,7 +18,6 @@ import {
   useSelectModel
 } from '../hooks';
 import useCheckBackend from '../hooks/use-check-backend';
-import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
 import GGUFResult from './gguf-result';

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

@@ -13,7 +13,7 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { handleBatchRequest } from '@/utils';
-import { DownOutlined, SyncOutlined } from '@ant-design/icons';
+import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
@@ -579,6 +579,11 @@ const Models: React.FC<ModelsProps> = ({
           left={
             <Space>
               <Input
+                prefix={
+                  <SearchOutlined
+                    style={{ color: 'var(--ant-color-text-placeholder)' }}
+                  ></SearchOutlined>
+                }
                 placeholder={intl.formatMessage({ id: 'common.filter.name' })}
                 style={{ width: 160 }}
                 size="large"

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

@@ -4,6 +4,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
+import ColumnWrapper from '../../_components/column-wrapper';
 import {
   deployFormKeyMap,
   modelSourceMap,
@@ -14,7 +15,6 @@ import { backendOptionsMap } from '../config/backend-parameters';
 import { BackendOption, FormData } from '../config/types';
 import { generateGPUSelector } from '../config/utils';
 import { useCheckCompatibility } from '../hooks';
-import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
 

src/pages/llmodels/download/index.tsx

@@ -4,7 +4,7 @@ import { ProviderValueMap } from '@/pages/cluster-management/config';
 import { useIntl } from '@umijs/max';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ColumnWrapper from '../components/column-wrapper';
+import ColumnWrapper from '../../_components/column-wrapper';
 import CompatibilityAlert from '../components/compatible-alert';
 import ModelCard from '../components/model-card';
 import SearchModel from '../components/search-model';

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

@@ -87,7 +87,6 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
         form={form}
         onFinish={handleOk}
         preserve={false}
-        style={{ padding: '16px 24px' }}
         clearOnDestroy={true}
         initialValues={{
           source: source

src/pages/llmodels/style/column-wrapper.less

@@ -1,31 +0,0 @@
-.column-wrapper {
-  flex: 1;
-  position: relative;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.simplebar-scrollbar::before {
-  width: var(--scrollbar-size);
-  background: var(--scrollbar-handle-bg);
-}
-
-.column-wrapper-footer {
-  flex: 1;
-  display: flex;
-  position: relative;
-
-  .column-wrapper {
-    border-left: none;
-  }
-
-  .footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    padding-block: 0;
-    background-color: var(--ant-color-bg-elevated);
-  }
-}