chore: npu ux for add worker

src/components/editor-wrap/index.less

@@ -9,8 +9,8 @@
 
   .editor-header {
     display: flex;
-    height: 40px;
-    padding: 0 10px;
+    padding-block: 0;
+    padding-inline: 12px 10px;
     justify-content: space-between;
     align-items: center;
     background-color: rgb(56, 56, 56);

src/components/editor-wrap/index.tsx

@@ -1,33 +1,40 @@
-import { Select } from 'antd';
 import React from 'react';
+import styled from 'styled-components';
 import CopyButton from '../copy-button';
+import SegmentLine from '../segment-line';
 import './index.less';
 
+const Wrapper = styled.div<{ $height: number }>`
+  height: ${(props) => props.$height}px;
+`;
+
 interface EditorwrapProps {
+  headerHeight?: number;
   header?: React.ReactNode;
   children: React.ReactNode;
   showHeader?: boolean;
   copyText: string;
   defaultValue?: string;
-  langOptions?: { label: string; value: string }[];
+  langOptions?: Global.BaseOption<string | number>[];
   styles?: {
     wrapper?: React.CSSProperties;
     header?: React.CSSProperties;
     content?: React.CSSProperties;
   };
-  onChangeLang?: (value: string) => void;
+  onChangeLang?: (value: string | number) => void;
 }
 const EditorWrap: React.FC<EditorwrapProps> = ({
+  headerHeight = 40,
   header,
   children,
   copyText,
-  langOptions,
+  langOptions = [],
   onChangeLang,
   defaultValue,
   styles = {},
   showHeader = true
 }) => {
-  const handleChangeLang = (value: string) => {
+  const handleChangeLang = (value: string | number) => {
     onChangeLang?.(value);
   };
   const renderHeader = () => {
@@ -36,15 +43,14 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
     }
     if (showHeader) {
       return (
-        <div className="editor-header">
-          <Select
+        <Wrapper className="editor-header" $height={headerHeight}>
+          <SegmentLine
+            height={headerHeight}
             defaultValue={defaultValue}
-            style={{ width: 120 }}
-            size="middle"
-            variant="filled"
+            size="small"
             options={langOptions}
             onChange={handleChangeLang}
-          ></Select>
+          ></SegmentLine>
           <CopyButton
             text={copyText}
             size="small"
@@ -52,7 +58,7 @@ const EditorWrap: React.FC<EditorwrapProps> = ({
               color: 'rgba(255,255,255,.7)'
             }}
           />
-        </div>
+        </Wrapper>
       );
     }
     return null;

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

@@ -107,4 +107,7 @@ export default {
   Password: SealPassword,
   Number: SealInputNumber,
   Search: SealInputSearch
-} as Record<string, React.FC<InputProps & SealFormItemProps>>;
+} as Record<
+  string,
+  React.FC<InputProps & SealFormItemProps & { scaleSize?: boolean }>
+>;

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

@@ -1,11 +1,28 @@
 import { Form, Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input/TextArea';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import styled from 'styled-components';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import InputWrapper from './wrapper/input';
 
-const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
+const LabelWrapper = styled.div`
+  background-color: var(--color-white-1);
+`;
+
+interface InputTextareaProps extends TextAreaProps {
+  scaleSize?: boolean;
+}
+
+const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
+  props
+) => {
   const {
     label,
     placeholder,
@@ -21,6 +38,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     extra,
     addAfter,
     trim,
+    scaleSize,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -37,6 +55,16 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     }
   }, [props.value]);
 
+  const autoSize = useMemo(() => {
+    const focusRows = props.autoSize || { minRows: 2, maxRows: 5 };
+
+    if (scaleSize) {
+      return isFocus ? focusRows : { minRows: 1, maxRows: 1 };
+    }
+
+    return focusRows;
+  }, [props.autoSize, isFocus, scaleSize]);
+
   const handleClickWrapper = useCallback(() => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.({
@@ -68,7 +96,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
         onBlur?.(e);
       }
     },
-    [onBlur]
+    [onBlur, scaleSize]
   );
 
   const handleInput = useCallback(
@@ -82,7 +110,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     <InputWrapper>
       <Wrapper
         status={status}
-        label={label}
+        label={<LabelWrapper>{label}</LabelWrapper>}
         isFocus={isFocus}
         required={required}
         description={description}
@@ -94,7 +122,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       >
         <Input.TextArea
           {...rest}
-          autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
+          autoSize={autoSize}
           ref={inputRef}
           style={{ minHeight: '80px', ...style }}
           className="seal-textarea"

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

@@ -143,7 +143,7 @@ export const Label = styled.div.attrs<{
   }
 
   &.blur-no-value {
-    top: 21px;
+    top: 20px;
     transition: all 0.2s var(--seal-transition-func);
   }
 

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

@@ -126,7 +126,6 @@ const InputWrapper = styled.div`
   }
   .seal-textarea-wrapper {
     height: auto;
-    padding-bottom: 10px;
     padding-right: 10px;
   }
 `;

src/components/segment-line/index.tsx

@@ -0,0 +1,84 @@
+import { Segmented, type SegmentedProps } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+interface SegmentLineProps extends SegmentedProps {
+  height?: number;
+}
+
+const SegmentedQwrapper = styled.div<{ $height: number }>`
+  .ant-segmented.segment-line {
+    padding: 0;
+    background-color: transparent;
+    color: var(--color-white-tertiary);
+    border: none;
+    box-shadow: none;
+    height: ${(props) => props.$height}px;
+    display: flex;
+    align-items: center;
+    .ant-segmented-group {
+      gap: 16px;
+      height: 100%;
+    }
+    .ant-segmented-item:hover {
+      color: var(--color-white-secondary);
+    }
+    .ant-segmented-thumb {
+      height: 2px;
+      padding: 0px;
+      bottom: 0px;
+      top: unset;
+    }
+    .ant-segmented-item-label {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      font-size: var(--font-size-small);
+    }
+    .ant-segmented-item {
+      background-color: transparent;
+      padding-bottom: 2px;
+      display: flex;
+      align-items: center;
+      &::after {
+        background-color: var(--color-white-primary) !important;
+        width: 100%;
+        height: 0px;
+        border-radius: 2px;
+        bottom: 0px;
+        top: unset;
+      }
+    }
+    .ant-segmented-item-selected {
+      background-color: transparent;
+      color: var(--color-white-primary);
+      &::after {
+        height: 2px;
+      }
+    }
+  }
+`;
+
+const SegmentLine: React.FC<SegmentLineProps> = (props) => {
+  const {
+    height = 32,
+    size = 'small',
+    options = [],
+    className = 'segment-line',
+    ...rest
+  } = props;
+  return (
+    <SegmentedQwrapper $height={height}>
+      <Segmented
+        {...rest}
+        size={size}
+        options={options}
+        className={className}
+      />
+    </SegmentedQwrapper>
+  );
+};
+
+SegmentLine.displayName = 'SegmentLine';
+
+export default SegmentLine;