diff --git a/react-ui/src/assets/img/popover-bg.png b/react-ui/src/assets/img/popover-bg.png new file mode 100644 index 00000000..d783c637 Binary files /dev/null and b/react-ui/src/assets/img/popover-bg.png differ diff --git a/react-ui/src/iconfont/iconfont.js b/react-ui/src/iconfont/iconfont.js index d7576e9c..75c1b755 100644 --- a/react-ui/src/iconfont/iconfont.js +++ b/react-ui/src/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4511447='',(t=>{var a=(h=(h=document.getElementsByTagName("script"))[h.length-1]).getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var l,z,v,i,o,m=function(a,h){h.parentNode.insertBefore(a,h)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}l=function(){var a,h=document.createElement("div");h.innerHTML=t._iconfont_svg_string_4511447,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(a=document.body).firstChild?m(h,a.firstChild):a.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),l()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(v=l,i=t.document,o=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,p())})}function p(){o||(o=!0,v())}function d(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}p()}})(window); \ No newline at end of file +window._iconfont_svg_string_4511447='',(t=>{var a=(h=(h=document.getElementsByTagName("script"))[h.length-1]).getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var l,z,v,i,o,m=function(a,h){h.parentNode.insertBefore(a,h)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}l=function(){var a,h=document.createElement("div");h.innerHTML=t._iconfont_svg_string_4511447,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(a=document.body).firstChild?m(h,a.firstChild):a.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),l()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(v=l,i=t.document,o=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,p())})}function p(){o||(o=!0,v())}function d(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}p()}})(window); \ No newline at end of file diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less index d49089f5..61091050 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less @@ -1,13 +1,47 @@ .parameter-range { - width: 300px; - &__list { - width: 100%; - max-height: 300px; - overflow-x: visible; - overflow-y: auto; + width: 360px; + &__type { + margin-bottom: 10px; + color: @text-color-secondary; + font-size: @font-size-input; + &::before { + display: inline-block; + color: @error-color; + font-size: 14px; + font-family: SimSun, sans-serif; + line-height: 1; + content: '*'; + margin-inline-end: 4px; + } + } + &__desc { + margin-bottom: 20px; + padding: 4px 8px; + color: @text-color-tertiary; + font-size: 13px; + background: rgba(62, 96, 163, 0.05); + border-radius: 6px; } - &__button { - margin-bottom: 0; - text-align: center; + &__form { + width: 100%; + &__list { + width: 100%; + max-height: 300px; + overflow-x: visible; + overflow-y: auto; + } + &__space { + flex: none; + width: 22px; + color: @text-color-tertiary; + font-size: @font-size-input; + line-height: 32px; + text-align: center; + } + &__button { + width: 100%; + margin-bottom: 0; + text-align: center; + } } } diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx index 240e90e6..e4b700c9 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx @@ -1,16 +1,16 @@ import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { Button, Flex, Form, Input, InputNumber } from 'antd'; -import { ParameterType, getFormOptions } from '../utils'; +import { ParameterType, getFormOptions, parameterTooltip } from '../utils'; import styles from './index.less'; type ParameterRangeProps = { - type?: ParameterType; + type: ParameterType; value?: any[]; onCancel?: () => void; onConfirm?: (value: any[]) => void; }; -function ParameterRange({ type, value, onCancel, onConfirm }: ParameterRangeProps) { +function ParameterRange({ type, value, onConfirm }: ParameterRangeProps) { const [form] = Form.useForm(); const isList = type === ParameterType.Choice || type === ParameterType.Grid; const formOptions = getFormOptions(type, value); @@ -33,108 +33,119 @@ function ParameterRange({ type, value, onCancel, onConfirm }: ParameterRangeProp }; return ( -