chore: preview field use switch
This commit is contained in:
@@ -2,6 +2,7 @@ import { Checkbox } from 'antd';
|
|||||||
import SealInput from '../seal-input';
|
import SealInput from '../seal-input';
|
||||||
import SealSelect from '../seal-select';
|
import SealSelect from '../seal-select';
|
||||||
import Slider from '../seal-slider';
|
import Slider from '../seal-slider';
|
||||||
|
import Switch from '../seal-switch';
|
||||||
|
|
||||||
const components: {
|
const components: {
|
||||||
InputNumber: typeof SealInput.Number;
|
InputNumber: typeof SealInput.Number;
|
||||||
@@ -10,13 +11,15 @@ const components: {
|
|||||||
TextArea: typeof SealInput.TextArea;
|
TextArea: typeof SealInput.TextArea;
|
||||||
Input: typeof SealInput.Input;
|
Input: typeof SealInput.Input;
|
||||||
Checkbox: typeof Checkbox;
|
Checkbox: typeof Checkbox;
|
||||||
|
Switch: typeof Switch;
|
||||||
} = {
|
} = {
|
||||||
InputNumber: SealInput.Number,
|
InputNumber: SealInput.Number,
|
||||||
Select: SealSelect,
|
Select: SealSelect,
|
||||||
Slider: Slider as React.ComponentType<typeof Slider>,
|
Slider: Slider as React.ComponentType<typeof Slider>,
|
||||||
TextArea: SealInput.TextArea,
|
TextArea: SealInput.TextArea,
|
||||||
Input: SealInput.Input,
|
Input: SealInput.Input,
|
||||||
Checkbox: Checkbox
|
Checkbox: Checkbox,
|
||||||
|
Switch: Switch
|
||||||
};
|
};
|
||||||
|
|
||||||
export default components;
|
export default components;
|
||||||
|
|||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import { Form, Switch, type SwitchProps } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import LabelInfo from './components/label-info';
|
||||||
|
import Wrapper from './wrapper';
|
||||||
|
|
||||||
|
const Inner = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding-inline: 14px;
|
||||||
|
.ant-switch {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
interface SealSwitchProps extends SwitchProps {
|
||||||
|
required?: boolean;
|
||||||
|
label?: React.ReactNode;
|
||||||
|
labelWidth?: number | string;
|
||||||
|
description?: string;
|
||||||
|
isInFormItems?: boolean;
|
||||||
|
checkStatus?: 'success' | 'error' | 'warning' | '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const SealSlider: React.FC<SealSwitchProps> = (props) => {
|
||||||
|
const {
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
required,
|
||||||
|
description,
|
||||||
|
isInFormItems = true,
|
||||||
|
defaultValue,
|
||||||
|
checkStatus,
|
||||||
|
labelWidth,
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
let status = '';
|
||||||
|
if (isInFormItems) {
|
||||||
|
const statusData = Form?.Item?.useStatus?.();
|
||||||
|
status = statusData?.status || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (value: boolean, event: any) => {
|
||||||
|
props.onChange?.(value, event);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Wrapper
|
||||||
|
required={required}
|
||||||
|
status={checkStatus || status}
|
||||||
|
className="no-focus"
|
||||||
|
>
|
||||||
|
<Inner>
|
||||||
|
<LabelInfo label={label} description={description}></LabelInfo>
|
||||||
|
<Switch
|
||||||
|
{...rest}
|
||||||
|
size="small"
|
||||||
|
defaultValue={defaultValue}
|
||||||
|
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
||||||
|
value={value}
|
||||||
|
onChange={handleChange}
|
||||||
|
></Switch>
|
||||||
|
</Inner>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SealSlider;
|
||||||
@@ -52,7 +52,7 @@ const WrapperBox = styled.div`
|
|||||||
border-color: var(--ant-input-hover-border-color);
|
border-color: var(--ant-input-hover-border-color);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
&:focus-within {
|
&:focus-within:not(.no-focus, .borderless) {
|
||||||
border-color: var(--ant-input-active-border-color);
|
border-color: var(--ant-input-active-border-color);
|
||||||
box-shadow: var(--ant-input-active-shadow);
|
box-shadow: var(--ant-input-active-shadow);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|||||||
@@ -127,9 +127,9 @@ export default {
|
|||||||
'models.form.restart.onerror.tips': '当发生错误时,将自动尝试恢复',
|
'models.form.restart.onerror.tips': '当发生错误时,将自动尝试恢复',
|
||||||
'models.form.check.params': '正在校验配置...',
|
'models.form.check.params': '正在校验配置...',
|
||||||
'models.form.check.passed': '兼容性检查通过',
|
'models.form.check.passed': '兼容性检查通过',
|
||||||
'models.form.check.claims': '该模型大约需要 {vram} 显存和 {ram} 内存。',
|
'models.form.check.claims': '该模型大约需要分配 {vram} 显存和 {ram} 内存。',
|
||||||
'models.form.check.claims2': '该模型大约需要 {vram} 显存。',
|
'models.form.check.claims2': '该模型大约需要分配 {vram} 显存。',
|
||||||
'models.form.check.claims3': '该模型大约需要 {ram} 内存。',
|
'models.form.check.claims3': '该模型大约需要分配 {ram} 内存。',
|
||||||
'models.form.update.tips': '更改仅在删除并重新创建实例后生效。',
|
'models.form.update.tips': '更改仅在删除并重新创建实例后生效。',
|
||||||
'models.table.download.progress': '下载进度',
|
'models.table.download.progress': '下载进度',
|
||||||
'models.table.button.apiAccessInfo': 'API 接入信息',
|
'models.table.button.apiAccessInfo': 'API 接入信息',
|
||||||
|
|||||||
@@ -145,13 +145,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
chunk_size: 16 * 1024,
|
chunk_size: 16 * 1024,
|
||||||
chunk_results: true
|
chunk_results: true
|
||||||
};
|
};
|
||||||
if (parameters.preview === 'preview') {
|
|
||||||
stream_options = {
|
|
||||||
preview: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parameters.preview === 'preview_faster') {
|
if (parameters.preview) {
|
||||||
stream_options = {
|
stream_options = {
|
||||||
preview_faster: true
|
preview_faster: true
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -170,13 +170,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
|||||||
stream_options_chunk_size: 16 * 1024,
|
stream_options_chunk_size: 16 * 1024,
|
||||||
stream_options_chunk_result: true
|
stream_options_chunk_result: true
|
||||||
};
|
};
|
||||||
if (parameters.preview === 'preview') {
|
|
||||||
stream_options = {
|
|
||||||
stream_options_preview: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parameters.preview === 'preview_faster') {
|
if (parameters.preview) {
|
||||||
stream_options = {
|
stream_options = {
|
||||||
stream_options_preview_faster: true
|
stream_options_preview_faster: true
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -423,6 +423,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
|
|||||||
isLocalized: true
|
isLocalized: true
|
||||||
},
|
},
|
||||||
attrs: {
|
attrs: {
|
||||||
|
scaleSize: true,
|
||||||
trim: false,
|
trim: false,
|
||||||
autoSize: { minRows: 2, maxRows: 2 }
|
autoSize: { minRows: 2, maxRows: 2 }
|
||||||
},
|
},
|
||||||
@@ -433,20 +434,12 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'Select',
|
type: 'Switch',
|
||||||
name: 'preview',
|
name: 'preview',
|
||||||
options: [
|
|
||||||
{ label: 'Faster', value: 'preview_faster' },
|
|
||||||
{ label: 'Normal', value: 'preview' },
|
|
||||||
{ label: 'common.options.none', value: null, locale: true }
|
|
||||||
],
|
|
||||||
label: {
|
label: {
|
||||||
text: 'Preview',
|
text: 'Preview',
|
||||||
isLocalized: false
|
isLocalized: false
|
||||||
},
|
},
|
||||||
attrs: {
|
|
||||||
allowNull: true
|
|
||||||
},
|
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
required: false
|
required: false
|
||||||
|
|||||||
@@ -29,7 +29,8 @@ type SchemaType =
|
|||||||
| 'Slider'
|
| 'Slider'
|
||||||
| 'TextArea'
|
| 'TextArea'
|
||||||
| 'Checkbox'
|
| 'Checkbox'
|
||||||
| 'Textarea';
|
| 'Textarea'
|
||||||
|
| 'Switch';
|
||||||
|
|
||||||
export interface ParamsSchema {
|
export interface ParamsSchema {
|
||||||
type: SchemaType;
|
type: SchemaType;
|
||||||
|
|||||||
Reference in New Issue
Block a user