fix(style): form field item

gpustack · Jul 4, 2024 · ed3f9f7 · ed3f9f7
1 parent b2d70c1
commit ed3f9f7
Show file tree

Hide file tree

Showing 24 changed files with 214 additions and 127 deletions.
diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less
@@ -62,3 +62,27 @@
   display: flex;
   flex-direction: column;
 }
+
+.font-size-12 {
+  font-size: var(--font-size-base);
+}
+
+.font-size-14 {
+  font-size: var(--font-size-middle);
+}
+
+.font-size-16 {
+  font-size: var(--font-size-large);
+}
+
+.font-400 {
+  font-weight: var(--font-weight-normal);
+}
+
+.font-600 {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-700 {
+  font-weight: var(--font-weight-bold);
+}
diff --git a/src/components/copy-button/index.tsx b/src/components/copy-button/index.tsx
@@ -5,12 +5,14 @@ import { Button } from 'antd';
 type CopyButtonProps = {
   text: string;
   disabled?: boolean;
+  type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
   text,
   disabled,
+  type = 'text',
   size = 'middle'
 }) => {
   const { copied, copyToClipboard } = useCopyToClipboard();
@@ -21,7 +23,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   };
   return (
     <Button
-      type="text"
+      type={type}
       shape="circle"
       size={size}
       onClick={handleCopy}

diff --git a/src/components/echarts/bar-chart.tsx b/src/components/echarts/bar-chart.tsx
@@ -3,6 +3,7 @@ import {
   barItemConfig,
   grid,
   legend,
+  title as titleConfig,
   tooltip,
   xAxis,
   yAxis
@@ -65,11 +66,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
     const optionsConfig = {
       ...options,
       title: {
-        show: true,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
+        ...titleConfig,
         text: title
       },
       yAxis: {

diff --git a/src/components/echarts/config.ts b/src/components/echarts/config.ts
@@ -76,7 +76,8 @@ export const title = {
   show: true,
   left: 'center',
   textStyle: {
-    fontSize: 14
+    fontSize: 12,
+    color: '#000'
   },
   text: ''
 };

diff --git a/src/components/echarts/line-chart.tsx b/src/components/echarts/line-chart.tsx
@@ -3,6 +3,7 @@ import {
   grid,
   legend,
   lineItemConfig,
+  title as titleConfig,
   tooltip,
   xAxis,
   yAxis
@@ -67,11 +68,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     const optionsConfig = {
       ...options,
       title: {
-        show: true,
-        left: 'center',
-        textStyle: {
-          fontSize: 14
-        },
+        ...titleConfig,
         text: title
       },
       yAxis: {

diff --git a/src/components/page-tools/index.less b/src/components/page-tools/index.less
@@ -3,14 +3,16 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 70px;
+
   .left {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: var(--font-size-middle);
   }
+
   .right {
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: var(--font-size-middle);
   }
 }
diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx
@@ -14,6 +14,9 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
     description,
     isInFormItems = true,
     onSelect,
+    extra,
+    style,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -64,11 +67,13 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   return (
     <Wrapper
       status={status}
+      extra={extra}
       label={label || (placeholder as string)}
       isFocus={isFocus}
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <AutoComplete

diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less
@@ -1,21 +1,16 @@
-:local(.wrapper) {
-  @wrapheight: 54px;
-  @inputheight: 32px;
+:local(.wrapper-box) {
   @borderRadius: 8px;
-  @input-inner-padding: 12px;
-  @bgColor: transparent;
 
   position: relative;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: 12px;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
   border-radius: @borderRadius;
-  padding-inline: 12px;
-  padding-block: 20px 0;
   background-color: var(--color-white-1);
 
   &.filled {
@@ -33,13 +28,6 @@
     box-shadow: none;
   }
 
-  .extra {
-    position: absolute;
-    right: 12px;
-    top: 8px;
-    z-index: 10;
-  }
-
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
     cursor: not-allowed;
@@ -86,13 +74,48 @@
     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: 8px;
+  @input-inner-padding: 12px;
+  @bgColor: transparent;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  padding-block: 20px 0;
+
+  .extra {
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    z-index: 10;
+  }
+
+  .inner-wrapper {
+    width: 100%;
+  }
+
   .label {
     position: absolute;
-    left: 24px;
+    left: 12px;
     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 {
@@ -116,6 +139,10 @@
     height: @inputheight !important;
   }
 
+  :global(.ant-input-number-input-wrap) {
+    flex: 1;
+  }
+
   :global(.ant-select-selector) {
     border: none !important;
     padding-block: 5px;
@@ -133,6 +160,7 @@
 
   :global(.ant-select-auto-complete) :global(.ant-select-selector) {
     padding-inline: 0 !important;
+    flex: 1;
   }
 
   :global(.ant-select-arrow) {
@@ -152,7 +180,8 @@
   // ==================== input ====================
   :global(.ant-input),
   :global(.ant-input-password) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
     display: flex;
     align-items: center;
     border: none;
@@ -164,7 +193,8 @@
   }
 
   :global(.ant-input.seal-textarea) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
   }
 
   :global(.ant-input-number) {
@@ -197,6 +227,7 @@
   }
 
   :global(input.ant-input-number-input) {
+    flex: 1;
     height: @inputheight !important;
     padding-block: 5px;
     padding-inline: @input-inner-padding;

diff --git a/src/components/seal-form/components/wrapper.tsx b/src/components/seal-form/components/wrapper.tsx
@@ -12,6 +12,7 @@ interface WrapperProps {
   className?: string;
   disabled?: boolean;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
   variant?: string;
   onClick?: () => void;
 }
@@ -27,35 +28,40 @@ const Wrapper: React.FC<WrapperProps> = ({
   required,
   extra,
   variant,
+  addAfter,
   onClick
 }) => {
   return (
     <div
       className={classNames(
-        wrapperStyle.wrapper,
+        wrapperStyle['wrapper-box'],
         wrapperStyle[`validate-status-${status}`],
+        addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
         className ? wrapperStyle[className] : ''
       )}
-      onClick={onClick}
     >
-      <label
-        onClick={onClick}
-        className={classNames(
-          wrapperStyle['label'],
-          isFocus
-            ? wrapperStyle['isfoucs-has-value']
-            : wrapperStyle['blur-no-value']
-        )}
-      >
-        <LabelInfo
-          label={label}
-          required={required}
-          description={description}
-        ></LabelInfo>
-      </label>
-      {extra && <div className={wrapperStyle.extra}>{extra}</div>}
-      {children}
+      <div className={classNames(wrapperStyle.wrapper)} onClick={onClick}>
+        <label
+          onClick={onClick}
+          className={classNames(
+            wrapperStyle['label'],
+            isFocus
+              ? wrapperStyle['isfoucs-has-value']
+              : wrapperStyle['blur-no-value']
+          )}
+        >
+          <LabelInfo
+            label={label}
+            required={required}
+            description={description}
+          ></LabelInfo>
+        </label>
+        {extra && <div className={wrapperStyle.extra}>{extra}</div>}
+        <div className={wrapperStyle['inner-wrapper']}>{children}</div>
+      </div>
+
+      {addAfter && <div className={wrapperStyle['add-after']}>{addAfter}</div>}
     </div>
   );
 };

diff --git a/src/components/seal-form/seal-input.tsx b/src/components/seal-form/seal-input.tsx
@@ -16,6 +16,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     description,
     isInFormItems = true,
     variant,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -71,6 +72,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input

diff --git a/src/components/seal-form/seal-textarea.tsx b/src/components/seal-form/seal-textarea.tsx
@@ -18,6 +18,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     description,
     variant,
     extra,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -85,6 +86,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       className="seal-textarea-wrapper"
       extra={extra}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input.TextArea

diff --git a/src/components/seal-form/types.ts b/src/components/seal-form/types.ts
@@ -6,4 +6,5 @@ export interface SealFormItemProps {
   isInFormItems?: boolean;
   description?: React.ReactNode;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
 }