From b89e7c6c3d937c5bb6ccd39c089868a5993dd815 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 7 Apr 2025 11:49:59 +0800 Subject: [PATCH] style: form components --- src/components/auto-tooltip/index.tsx | 2 +- src/components/seal-form/auto-complete.tsx | 63 +-- .../seal-form/components/wrapper.less | 463 ------------------ .../seal-form/components/wrapper.tsx | 95 ---- src/components/seal-form/config/index.ts | 10 +- src/components/seal-form/seal-cascader.tsx | 68 +-- src/components/seal-form/wrapper/slider.ts | 3 + src/locales/ru-RU/models.ts | 3 +- src/locales/zh-CN/models.ts | 2 +- .../playground/components/image-edit.tsx | 2 +- src/pages/playground/config/params-config.ts | 7 + 11 files changed, 94 insertions(+), 624 deletions(-) delete mode 100644 src/components/seal-form/components/wrapper.less delete mode 100644 src/components/seal-form/components/wrapper.tsx diff --git a/src/components/auto-tooltip/index.tsx b/src/components/auto-tooltip/index.tsx index 509c12e3..c6e4f35f 100644 --- a/src/components/auto-tooltip/index.tsx +++ b/src/components/auto-tooltip/index.tsx @@ -128,7 +128,7 @@ const AutoTooltip: React.FC = ({ style={{ position: 'absolute', right: 8, - top: 7 + top: 6 }} /> ) : ( diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx index 4f8b5da1..4ba07e26 100644 --- a/src/components/seal-form/auto-complete.tsx +++ b/src/components/seal-form/auto-complete.tsx @@ -1,8 +1,9 @@ import { AutoComplete, Form, Spin } from 'antd'; import type { AutoCompleteProps } from 'antd/lib'; import React, { useEffect, useRef, useState } from 'react'; -import Wrapper from './components/wrapper'; import { SealFormItemProps } from './types'; +import Wrapper from './wrapper'; +import SelectWrapper from './wrapper/select'; const SealAutoComplete: React.FC< AutoCompleteProps & SealFormItemProps & { onInput?: (e: Event) => void } @@ -79,35 +80,37 @@ const SealAutoComplete: React.FC< }; return ( - - {placeholder} - ) : ( - '' - ) - } - onSelect={handleOnSelect} - onFocus={handleOnFocus} - onBlur={handleOnBlur} - onSearch={handleSearch} - onChange={handleChange} - > - + + + {placeholder} + ) : ( + '' + ) + } + onSelect={handleOnSelect} + onFocus={handleOnFocus} + onBlur={handleOnBlur} + onSearch={handleSearch} + onChange={handleChange} + > + + ); }; diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less deleted file mode 100644 index 1e36fca4..00000000 --- a/src/components/seal-form/components/wrapper.less +++ /dev/null @@ -1,463 +0,0 @@ -:local(.wrapper-box) { - @borderRadius: var(--border-radius-base); - @input-inner-padding: 14px; - - 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: @borderRadius; - background-color: var(--color-white-1); - - &.seal-select-wrapper { - border: none; - box-shadow: none; - - &.dropdown-visible { - :local(.wrapper) { - :global(.ant-select-selector) { - border-bottom: none !important; - border-radius: @borderRadius @borderRadius 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); - } - } - - :global(.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; - } - - :local(.wrapper) { - padding-block: 0; - - .label { - left: @input-inner-padding + 1 !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; - } - } - - :global(.ant-select-selection-overflow-item) > span { - display: flex; - align-items: center; - } - } - - &.validate-status-error { - :global(.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 { - :global(.ant-select-dropdown) { - border-color: var(--ant-color-error) !important; - } - } - } - } - - &.seal-input-number { - padding-right: 0; - } - - &.borderless { - border: none; - box-shadow: none; - } - - &.filled { - border: none; - box-shadow: none; - } - - &.borderless:focus-within { - border: none; - box-shadow: none; - } - - &.seal-input-wrapper-disabled { - background-color: var(--ant-color-bg-container-disabled); - cursor: not-allowed; - - &:hover { - border-color: var(--ant-color-border); - - :global(.ant-input-search-button) { - border-color: var(--ant-color-border) !important; - color: var(--ant-color-text-description) !important; - } - } - } - - &.seal-textarea-wrapper { - height: auto; - padding-bottom: 10px; - padding-right: 10px; - } - - &.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); - } - } - - &: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); - } - - .add-after { - position: relative; - color: var(--ant-color-text-quaternary); - font-size: 14px; - padding-right: calc(var(--ant-padding-sm) - 1px); - } -} - -:local(.wrapper) { - @wrapheight: 54px; - @inputheight: 32px; - @borderRadius: 4px; - @input-inner-padding: 14px; - @bgColor: transparent; - - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - flex: 1; - padding-block: 20px 0; - max-width: 100%; - - &:hover { - :global(.ant-input-number-handler-wrap) { - width: 34px !important; - } - } - - &.no-wrapper-style { - padding-block: 0; - } - - .extra { - position: absolute; - right: 12px; - top: 8px; - z-index: 10; - } - - .inner-wrapper { - width: 100%; - } - - .label { - position: absolute; - left: @input-inner-padding; - 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; - } - } - - // ==================== select ================== - - :global(.ant-select) { - display: flex; - align-items: center; - height: 54px; - - :global(.ant-select-selection-search) { - top: 20px !important; - inset-inline-start: @input-inner-padding; - } - } - - :global( - .ant-select.ant-select-multiple.ant-cascader .ant-select-selection-search - ) { - top: 0 !important; - } - - :global(.ant-input-number-input-wrap) { - flex: 1; - } - - :global(.ant-select-selector) { - flex: 1; - padding-inline: @input-inner-padding !important; - border-width: var(--ant-line-width); - border-style: var(--ant-line-type); - border-color: var(--ant-color-border); - border-radius: @borderRadius; - 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); - } - } - - :global(.ant-select-multiple.ant-select-lg) { - :global(.ant-select-selection-search) { - margin-inline-start: 0 !important; - left: 0 !important; - } - } - - :global(.ant-select-selection-item) { - height: @inputheight !important; - padding-block: 5px !important; - line-height: 22px !important; - padding-inline-end: 0 !important; - } - - :global(.ant-select-auto-complete) :global(.ant-select-selector) { - padding-inline: 0 !important; - flex: 1; - } - - :global(.ant-select-arrow) { - top: 32px; - } - - &.no-label { - padding-block: 0; - - :global { - .ant-select-arrow { - top: 50%; - } - } - - :global(.ant-select-selector) { - padding-block-start: 0 !important; - } - - :global(.ant-select .ant-select-selection-search) { - top: 10px !important; - } - } - - :global( - .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) - .ant-select-selector - ) { - background-color: transparent; - } - - :global(.ant-select-selection-search-input) { - height: @inputheight !important; - } - - // ==================== input ==================== - - :global(.ant-input), - :global(.ant-input-password) { - // width: 100%; - flex: 1; - display: flex; - align-items: center; - border: none; - box-shadow: none; - padding-block: 5px; - padding-inline: @input-inner-padding; - height: @inputheight !important; - background-color: @bgColor; - } - - :global(.ant-input.seal-textarea) { - // width: 100%; - flex: 1; - } - - :global(.ant-input-number) { - position: static; - display: flex; - align-items: center; - border: none; - box-shadow: none; - padding: 0; - height: @inputheight !important; - background-color: @bgColor; - - &:hover .ant-input-number-handler-wrap, - &-focused .ant-input-number-handler-wrap { - width: 34px !important; - } - - &:hover { - cursor: text; - } - } - - :global(.ant-input-number.ant-input-number-disabled) { - &:hover { - background-color: inherit; - } - } - - :global(.ant-input-outlined) { - display: flex; - align-items: center; - border: none; - box-shadow: none; - padding-block: 5px; - padding-inline: @input-inner-padding; - height: @inputheight !important; - background-color: transparent; - - &.seal-textarea { - min-height: 100px !important; - } - } - - :global(.ant-input.ant-input-disabled) { - background-color: transparent; - } - - :global(input.ant-input-number-input) { - flex: 1; - height: @inputheight !important; - padding-block: 5px; - padding-inline: @input-inner-padding; - } - - :global(.ant-input-group) { - position: static; - } - - :global(.ant-input-group-addon) { - inset-inline-start: unset !important; - border-radius: 0 @borderRadius @borderRadius 0; - width: 30px; - background-color: transparent; - border: none; - } - - :global(.ant-input-group-addon:hover) { - background-color: transparent !important; - } - - :global(.ant-input-group-wrapper-disabled .ant-input-group-addon) { - background-color: transparent; - } - - :global(.ant-input-group-wrapper-disabled .ant-input-group-addon:hover) { - background-color: transparent !important; - } - - :global(.ant-input-search-button) { - position: absolute; - top: -20px; - right: 0; - border-radius: 0 @borderRadius @borderRadius 0 !important; - overflow: hidden; - border: none; - height: 52px; - border-left: var(--ant-line-width) var(--ant-line-type) - var(--ant-color-border); - } - - :global(.ant-input-number-handler-wrap) { - top: 0; - height: @wrapheight - 2px; - } -} diff --git a/src/components/seal-form/components/wrapper.tsx b/src/components/seal-form/components/wrapper.tsx deleted file mode 100644 index 90917ab7..00000000 --- a/src/components/seal-form/components/wrapper.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import classNames from 'classnames'; -import React from 'react'; -import LabelInfo from './label-info'; -import wrapperStyle from './wrapper.less'; -interface WrapperProps { - children: React.ReactNode; - label?: React.ReactNode; - noWrapperStyle?: boolean; - isFocus?: boolean; - status?: string; - required?: boolean; - description?: React.ReactNode; - className?: string; - disabled?: boolean; - extra?: React.ReactNode; - addAfter?: React.ReactNode; - variant?: string; - hasPrefix?: boolean; - classList?: string; - labelExtra?: React.ReactNode; - onClick?: () => void; -} - -const Wrapper: React.FC = ({ - children, - label, - isFocus, - status, - className, - disabled, - description, - required, - extra, - variant, - addAfter, - hasPrefix, - noWrapperStyle, - classList, - labelExtra, - onClick -}) => { - return ( -
-
- - {extra &&
{extra}
} -
- {children} -
-
- - {addAfter &&
{addAfter}
} -
- ); -}; - -export default Wrapper; diff --git a/src/components/seal-form/config/index.ts b/src/components/seal-form/config/index.ts index 9c6c8848..66e13004 100644 --- a/src/components/seal-form/config/index.ts +++ b/src/components/seal-form/config/index.ts @@ -3,5 +3,13 @@ const INPUTHEIGHT = 32; const BORDERRADIUS = 4; const BGCOLOR = 'transparent'; const INPUT_INNER_PADDING = 14; +const LINE_HEIGHT = 1.57; -export { BGCOLOR, BORDERRADIUS, INPUTHEIGHT, INPUT_INNER_PADDING, WRAPHEIGHT }; +export { + BGCOLOR, + BORDERRADIUS, + INPUTHEIGHT, + INPUT_INNER_PADDING, + LINE_HEIGHT, + WRAPHEIGHT +}; diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx index bc8fdc83..d95ce3c6 100644 --- a/src/components/seal-form/seal-cascader.tsx +++ b/src/components/seal-form/seal-cascader.tsx @@ -5,8 +5,9 @@ import { Cascader, Empty, Form } from 'antd'; import _, { cloneDeep } from 'lodash'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import AutoTooltip from '../auto-tooltip'; -import Wrapper from './components/wrapper'; import { SealFormItemProps } from './types'; +import Wrapper from './wrapper'; +import SelectWrapper from './wrapper/select'; const tag = (props: any) => { if (props.isMaxTag) { @@ -152,36 +153,41 @@ const SealCascader: React.FC< }; return ( - - ( - - ) - : undefined - } - tagRender={tagRender ?? renderTag} - ref={inputRef} - options={children ? null : _options} - onFocus={handleOnFocus} - onBlur={handleOnBlur} - onChange={handleChange} - notFoundContent={null} - onDropdownVisibleChange={handleDropdownVisibleChange} - > - + + + ( + + ) + : undefined + } + tagRender={tagRender ?? renderTag} + ref={inputRef} + options={children ? null : _options} + onFocus={handleOnFocus} + onBlur={handleOnBlur} + onChange={handleChange} + notFoundContent={null} + onDropdownVisibleChange={handleDropdownVisibleChange} + > + + ); }; diff --git a/src/components/seal-form/wrapper/slider.ts b/src/components/seal-form/wrapper/slider.ts index 8cadbcb8..c8f588fd 100644 --- a/src/components/seal-form/wrapper/slider.ts +++ b/src/components/seal-form/wrapper/slider.ts @@ -15,6 +15,9 @@ const SliderWrapper = styled.div` padding-block: 5px; padding-inline: ${INPUT_INNER_PADDING}px; } + .isfoucs-has-value { + left: 0; + } .slider-label { display: flex; justify-content: space-between; diff --git a/src/locales/ru-RU/models.ts b/src/locales/ru-RU/models.ts index 5aa191e3..cf5963b6 100644 --- a/src/locales/ru-RU/models.ts +++ b/src/locales/ru-RU/models.ts @@ -132,5 +132,6 @@ export default { }; // ========== To-Do: Translate Keys (Remove After Translation) ========== -// 1. 'models.form.check.passed' +// 1. 'models.form.check.passed', +// 2. 'models.form.partialoffload.tips // ========== End of To-Do List ========== diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 3189c071..ce2bf5cf 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -14,7 +14,7 @@ export default { 'models.form.configurations': '配置', 'models.form.s3address': 'S3 地址', 'models.form.partialoffload.tips': - '启用 CPU 卸载的说明：启用 CPU 卸载时，如果 GPU 资源不足，则模型的一部分层将被卸载到 CPU 上，在没有 GPU 可用时，会使用纯 CPU 推理。', + '启用 CPU 卸载时，如果 GPU 资源不足，则模型的一部分层将被卸载到 CPU 上，在没有 GPU 可用时，会使用纯 CPU 推理。', 'models.form.distribution.tips': '允许在单个 worker 资源不足时，将部分计算卸载到一个或多个远程 worker。', 'models.openinplayground': '在 Playground 中打开', diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 75f6da2b..326d31b4 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -356,7 +356,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { >