root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: command viewer scroller

Browse Source
This commit is contained in:
jialin
2026-01-07 15:55:26 +08:00
parent 8f9fae9210
commit bbf09c2ea9
21 changed files with 136 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_components/collapse-panel/index.tsx
+11 -2
View File
@@ -13,7 +13,9 @@ const CollapseInner = styled(Collapse)`
border-radius: var(--border-radius-base) !important;
font-size: 14px !important;
font-weight: 600 !important;
background-color: var(--ant-color-fill-tertiary) !important;
&:hover {
background-color: var(--ant-color-fill-tertiary) !important;
}
}
.ant-collapse-body {
@@ -32,7 +34,8 @@ const CollapsePanel: React.FC<{
activeKey: string | string[];
accordion?: boolean;
onChange?: (key: string | string[]) => void;
}> = ({ items, activeKey, accordion, onChange }) => {
styles?: Record<string, React.CSSProperties>;
}> = ({ items, activeKey, accordion, onChange, styles }) => {
return (
<CollapseInner
expandIconPlacement="start"
@@ -42,6 +45,12 @@ const CollapsePanel: React.FC<{
activeKey={activeKey}
onChange={onChange}
destroyOnHidden={false}
styles={{
...styles,
header: {
backgroundColor: 'var(--ant-collapse-header-bg)'
}
}}
expandIcon={({ isActive }) => (
<IconFont
type="icon-down"
src/pages/_components/yaml-editor/index.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ const Header = styled.div`
padding-inline: 10px;
font-size: 14px;
border-bottom: 1px solid var(--ant-color-border);
background-color: var(--ant-color-fill-tertiary);
background-color: var(--ant-color-fill-quaternary);
`;
interface ViewerProps {
src/pages/cluster-management/cluster-create.tsx
+6 -30
View File
@@ -1,9 +1,7 @@
import { clusterSessionAtom } from '@/atoms/clusters';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import ColumnWrapper from '@/pages/_components/column-wrapper';
import { useIntl, useSearchParams } from '@umijs/max';
import { useAtom } from 'jotai';
import { useIntl } from '@umijs/max';
import _ from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
@@ -40,29 +38,20 @@ const Content = styled.div`
width: 100%;
`;
const StepsWrapper = styled.div`
width: 220px;
padding-inline: 24px;
padding-block: 16px;
border-right: 1px solid var(--ant-color-split);
`;
const MainWrapper = styled.div`
display: flex;
height: 100%;
`;
const ClusterCreate: React.FC<{
action: PageActionType;
setCurrentTitle?: (title: string) => void;
onClose?: () => void;
}> = ({ onClose }) => {
const intl = useIntl();
}> = ({ onClose, action, setCurrentTitle }) => {
const startStep = 0;
const stepList = useStepList();
const { systemConfig } = useSystemConfig();
const [searchParams] = useSearchParams();
const action =
(searchParams.get('action') as PageActionType) || PageAction.CREATE;
const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
const intl = useIntl();
const [credentialList, setCredentialList] = useState<
Global.BaseOption<number, { provider: ProviderType }>[]
>([]);
@@ -85,7 +74,6 @@ const ClusterCreate: React.FC<{
const [formValues, setFormValues] = useState<Record<string, any>>({});
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [isAddWorkerStep, setIsAddWorkerStep] = useState<boolean>(false);
const [isComplete, setIsComplete] = useState<boolean>(false);
const formRefs: Record<string, any> = {
[moduleMap.BasicForm]: useRef<any>(null),
@@ -240,6 +228,7 @@ const ClusterCreate: React.FC<{
// add worker or cluster registration step
const handleAddWorker = () => {
setIsAddWorkerStep(true);
setCurrentTitle?.(intl.formatMessage({ id: 'resources.button.create' }));
onNext();
};
@@ -301,7 +290,6 @@ const ClusterCreate: React.FC<{
const res = await createCluster({ data });
const info = await queryClusterToken({ id: res.id });
setSubmitLoading(false);
setIsComplete(true);
setRegistrationInfo({
...info,
cluster_id: res.id
@@ -320,11 +308,6 @@ const ClusterCreate: React.FC<{
return (
<MainWrapper>
{/* {!isAddWorkerStep && (
<StepsWrapper>
<ClusterSteps steps={steps} currentStep={currentStep}></ClusterSteps>
</StepsWrapper>
)} */}
<ColumnWrapper
styles={{
container: { paddingTop: 16, paddingBottom: 16 }
@@ -341,13 +324,6 @@ const ClusterCreate: React.FC<{
/>
}
>
{/* {!isComplete && (
<div style={{ marginBottom: 24 }}>
<Title level={5} style={{ marginBottom: 8, fontSize: 14 }}>
{steps[currentStep]?.subTitle || steps[currentStep]?.title}
</Title>
</div>
)} */}
{!isAddWorkerStep && (
<div style={{ marginBottom: 32 }}>
<ClusterSteps
src/pages/cluster-management/cluster-modal.tsx
+8 -2
View File
@@ -1,4 +1,5 @@
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageAction } from '@/config';
import React from 'react';
import ClusterCreate from './cluster-create';
@@ -13,13 +14,14 @@ const ClusterModal: React.FC<ClusterModalProps> = ({
onClose,
title
}) => {
const [currentTitle, setCurrentTitle] = React.useState<string>(title);
const handleCancel = () => {
onClose();
};
return (
<GSDrawer
title={title}
title={currentTitle}
open={open}
onClose={handleCancel}
destroyOnHidden={true}
@@ -34,7 +36,11 @@ const ClusterModal: React.FC<ClusterModalProps> = ({
}}
footer={false}
>
<ClusterCreate onClose={handleCancel}></ClusterCreate>
<ClusterCreate
onClose={handleCancel}
action={PageAction.CREATE}
setCurrentTitle={setCurrentTitle}
></ClusterCreate>
</GSDrawer>
);
};
src/pages/cluster-management/components/add-worker-command.tsx
+1
View File
@@ -65,6 +65,7 @@ const AddWorkerCommand: React.FC<ViewModalProps> = ({
code={code}
copyValue={code}
lang="bash"
xScrollable={true}
></HighlightCode>
);
};
src/pages/cluster-management/components/add-worker/index.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
body: {
paddingBlock: 0
},
wrapper: { width: 865 }
wrapper: { width: 700 }
}}
footer={false}
>
src/pages/cluster-management/components/cluster-steps.tsx
+37 -78
View File
@@ -1,4 +1,3 @@
import { CheckCircleFilled, CheckCircleOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
import React from 'react';
import styled from 'styled-components';
@@ -9,6 +8,9 @@ const Wrapper = styled.div`
gap: 24px;
`;
/**
* --steps-item-base-width: 20px; type="panel"
*/
const Box = styled.div`
.indicates {
color: var(--ant-color-text-tertiary);
@@ -16,76 +18,20 @@ const Box = styled.div`
margin-bottom: 24px;
}
.ant-steps {
--steps-title-font-size: 14px;
.ant-steps-item {
--steps-item-base-width: 20px;
}
}
`;
const StepItemWrapper = styled.div`
display: flex;
align-items: flex-start;
gap: 12px;
padding-bottom: 16px;
// border-bottom: 1px solid var(--ant-color-split);
.description {
display: flex;
flex-direction: column;
gap: 4px;
.title {
font-weight: 500;
line-height: 20px;
color: var(--ant-color-text-tertiary);
.ant-steps-item-rail-wait {
--steps-item-solid-line-color: var(--ant-color-split);
}
.content {
line-height: 22px;
font-size: 14px;
color: var(--ant-color-text-tertiary);
}
}
&.active {
.description {
.title {
color: var(--ant-color-text);
font-weight: 600;
}
.content {
color: var(--ant-color-text);
&:not(.ant-steps-panel) {
.ant-steps-item-finish {
--steps-item-icon-bg-color: var(--ant-color-primary);
}
}
}
`;
const StepsItem: React.FC<{
active: boolean;
item: {
title: string;
content: string;
};
}> = ({ active, item }) => {
return (
<StepItemWrapper className={active ? 'active' : ''}>
<div className="icon">
{active ? (
<CheckCircleFilled
style={{ color: 'var(--ant-color-primary)', fontSize: 20 }}
/>
) : (
<CheckCircleOutlined
style={{ color: 'var(--ant-color-text-disabled)', fontSize: 20 }}
/>
)}
</div>
<div className="description">
<div className="title">{item.title}</div>
<div className="content">{item.content}</div>
</div>
</StepItemWrapper>
);
};
const ClusterSteps: React.FC<{
currentStep: number;
onChange?: (step: number) => void;
@@ -94,28 +40,41 @@ const ClusterSteps: React.FC<{
const { steps, currentStep = 0, onChange } = props;
const visibleSteps = steps.filter((step) => !step.hideInSteps);
const styles: Record<string, any> = {
root: {
'--ant-steps-description-max-width': 'auto'
},
item: {
paddingBlock: 0
},
itemIcon: {
fontSize: 0,
width: 8,
height: 8,
marginInlineStart: 0
},
itemWrapper: {
alignItems: 'center'
},
itemRail: {
borderWidth: 1.5,
borderRadius: 1,
insetInlineStart: 10,
insetInlineEnd: 2,
'--steps-horizontal-rail-margin': '12px'
}
};
return (
<Box>
<Wrapper>
{/* {visibleSteps.map((item, index) => (
<StepsItem
key={index}
active={currentStep === index}
item={item}
></StepsItem>
))} */}
<Steps
current={currentStep}
items={visibleSteps}
type="panel"
styles={{
item: {
paddingBlock: 0
},
itemRail: {
borderColor: 'var(--ant-color-split)'
}
}}
variant="filled"
size="small"
styles={styles}
></Steps>
</Wrapper>
</Box>
src/pages/cluster-management/components/success-result.tsx
+2 -2
View File
@@ -35,11 +35,11 @@ const SuccessResult: React.FC<{
}}
icon={
<CheckCircleFilled
style={{ color: 'var(--ant-color-success)', fontSize: 42 }}
style={{ color: 'var(--ant-color-success)', fontSize: 36 }}
/>
}
status="success"
title={intl.formatMessage({ id: 'clusters.create.complete.tips' })}
title={intl.formatMessage({ id: 'clusters.create.steps.complete.tips' })}
subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips}
extra={[
<Flex gap={16} justify="center" key="buttons">
src/pages/cluster-management/step-forms/use-step-list.tsx
+5 -3
View File
@@ -15,7 +15,9 @@ export default function useStepList() {
return useMemo(
() => [
{
title: intl.formatMessage({ id: 'clusters.create.selectProvider' }),
title: intl.formatMessage({
id: 'clusters.create.steps.selectProvider'
}),
content: '',
subTitle: '',
description:
@@ -35,7 +37,7 @@ export default function useStepList() {
providers: []
},
{
title: intl.formatMessage({ id: 'common.title.config' }),
title: intl.formatMessage({ id: 'clusters.create.steps.configure' }),
content: '',
description:
'Set the cluster name, description, or other essential parameters in advanced settings.',
@@ -72,7 +74,7 @@ export default function useStepList() {
beforeNext: handleBack
},
{
title: intl.formatMessage({ id: 'clusters.create.complete' }),
title: intl.formatMessage({ id: 'clusters.create.steps.complete' }),
content: '',
description: '',
showButtons: (provider?: ProviderType) => {
src/pages/llmodels/forms/advance-config.tsx
+3 -2
View File
@@ -77,9 +77,10 @@ const AdvanceConfig = () => {
included={true}
max={modelContextData?.scaled || 163840}
tooltip={{}}
step={1024}
marks={{
[modelContextData?.native]: 'native',
[modelContextData?.scaled]: 'scaled'
[modelContextData?.scaled]: 'scaled',
[modelContextData?.native]: 'native'
}}
></SealSlider>
</Form.Item>