fix(style): dark style

src/components/auto-tooltip/index.tsx

@@ -96,7 +96,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
         ...tooltipProps,
         destroyTooltipOnHide: false
       }}
-      title={isOverflowing || showTitle ? children : false}
+      title={isOverflowing || showTitle ? title || children : false}
     >
       {ghost ? (
         <div ref={contentRef} style={tagStyle} data-overflow={isOverflowing}>

src/components/echarts/scatter.tsx

@@ -168,7 +168,7 @@ const Scatter: React.FC<ChartProps> = (props) => {
       tooltip: {
         trigger: 'item',
         borderWidth: 0,
-        backgroundColor: chartColorMap.colorBgBase,
+        backgroundColor: chartColorMap.splitLineColor,
         borderColor: 'transparent',
         formatter(params: any, callback?: (val: any) => any) {
           const dataList = findOverlappingPoints(seriseDataList, params.data);

src/components/footer/index.tsx

@@ -25,10 +25,11 @@ const useStyles = createStyles(({ token, css }) => ({
 
 const Footer: React.FC = () => {
   const intl = useIntl();
+  const [modal, contextHolder] = Modal.useModal();
   const { styles } = useStyles();
 
   const showVersion = () => {
-    Modal.info({
+    modal.info({
       ...modalConfig,
       width: 460,
       content: <VersionInfo intl={intl} />
@@ -36,32 +37,35 @@ const Footer: React.FC = () => {
   };
 
   return (
-    <div className={styles.footer}>
-      <div className="footer-content">
-        <div className="footer-content-left">
-          <div className={styles['footer-content-left-text']}>
-            <Space size={4}>
-              <span>&copy;</span>
-              <span> {new Date().getFullYear()}</span>
-              <span> {intl.formatMessage({ id: 'settings.company' })}</span>
-            </Space>
-            <Space size={8} style={{ marginLeft: 18 }}>
-              <Button
-                type="link"
-                size="small"
-                href={externalLinks.documentation}
-                target="_blank"
-              >
-                {intl.formatMessage({ id: 'common.button.help' })}
-              </Button>
-              <Button type="link" size="small" onClick={showVersion}>
-                {getAtomStorage(GPUStackVersionAtom)?.version}
-              </Button>
-            </Space>
+    <>
+      {contextHolder}
+      <div className={styles.footer}>
+        <div className="footer-content">
+          <div className="footer-content-left">
+            <div className={styles['footer-content-left-text']}>
+              <Space size={4}>
+                <span>&copy;</span>
+                <span> {new Date().getFullYear()}</span>
+                <span> {intl.formatMessage({ id: 'settings.company' })}</span>
+              </Space>
+              <Space size={8} style={{ marginLeft: 18 }}>
+                <Button
+                  type="link"
+                  size="small"
+                  href={externalLinks.documentation}
+                  target="_blank"
+                >
+                  {intl.formatMessage({ id: 'common.button.help' })}
+                </Button>
+                <Button type="link" size="small" onClick={showVersion}>
+                  {getAtomStorage(GPUStackVersionAtom)?.version}
+                </Button>
+              </Space>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/seal-form/wrapper/input.ts

@@ -14,6 +14,39 @@ const InputWrapper = styled.div`
       top: 9px;
     }
   }
+
+  // ============= input initial =============
+  .ant-input-outlined.ant-input-status-error:not(.ant-input-disabled) {
+    border: none;
+    box-shadow: none;
+  }
+
+  .ant-input-outlined.ant-input-status-error:not(.ant-input-disabled):focus,
+  .ant-input-outlined.ant-input-status-error:not(
+      .ant-input-disabled
+    ):focus-within {
+    border: none;
+    box-shadow: none;
+  }
+
+  .ant-input-number-outlined.ant-input-number-status-error:not(
+      .ant-input-number-disabled
+    ) {
+    border: none;
+    box-shadow: none;
+  }
+
+  .ant-input-number-outlined.ant-input-number-status-error:not(
+      .ant-input-number-disabled
+    ):focus,
+  .ant-input-number-outlined.ant-input-number-status-error:not(
+      .ant-input-disabled
+    ):focus-within {
+    border: none;
+    box-shadow: none;
+  }
+  // ============= input initial end =============
+
   .seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
     cursor: not-allowed;

src/components/seal-form/wrapper/slider.ts

@@ -42,7 +42,6 @@ const SliderWrapper = styled.div`
 
       .ant-input-number-input {
         text-align: center !important;
-        background-color: var(--color-white-1);
       }
     }
   }

src/components/seal-table/components/header-prefix.tsx

@@ -13,6 +13,7 @@ interface HeaderPrefixProps {
   indeterminate?: boolean;
   selectAll?: boolean;
   hasColumns?: boolean;
+  disabled?: boolean;
 }
 
 const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
@@ -24,7 +25,8 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
     onExpandAll,
     indeterminate,
     selectAll,
-    expandAll
+    expandAll,
+    disabled
   } = props;
 
   const handleToggleExpand = () => {
@@ -68,6 +70,7 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
           onChange={onSelectAll}
           indeterminate={indeterminate}
           checked={selectAll}
+          disabled={disabled}
         ></Checkbox>
       </div>
     );
@@ -87,7 +90,9 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
   }
   if (enableSelection) {
     return (
-      <div className="header-row-prefix-wrapper">{<Checkbox></Checkbox>}</div>
+      <div className="header-row-prefix-wrapper">
+        {<Checkbox disabled={disabled}></Checkbox>}
+      </div>
     );
   }
   return null;

src/components/seal-table/index.tsx

@@ -14,7 +14,8 @@ const Wrapper = styled.div<{ $token: any }>`
   --ant-table-cell-padding-block: ${(props) => props.$token.cellPaddingBlock}px;
   --ant-table-header-border-radius: ${(props) =>
     props.$token.headerBorderRadius}px;
-  --ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
+  --ant-table-header-split-color: ${(props) =>
+    props.$token.colorBorderSecondary};
   --ant-table-row-selected-bg: ${(props) => props.$token.rowSelectedBg};
   --ant-table-row-selected-hover-bg: ${(props) =>
     props.$token.rowSelectedHoverBg};
@@ -47,7 +48,6 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     loadChildrenAPI
   } = props;
   const { token } = theme.useToken();
-  console.log('seal-table-props', token.Table);
   const parsedColumns = useMemo(() => {
     if (columns) return columns;
 
@@ -137,7 +137,12 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   };
 
   return (
-    <Wrapper $token={token.Table}>
+    <Wrapper
+      $token={{
+        ...token.Table,
+        colorBorderSecondary: token.colorBorderSecondary
+      }}
+    >
       <div className="seal-table-container">
         <div className="header-row-wrapper">
           <HeaderPrefix
@@ -148,6 +153,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
             expandAll={expandAll}
             expandable={expandable}
             enableSelection={rowSelection?.enableSelection}
+            disabled={!props.dataSource?.length}
             hasColumns={parsedColumns.length > 0}
           ></HeaderPrefix>
           <Header onSort={onSort} columns={parsedColumns}></Header>

src/components/seal-table/styles/header.less

@@ -1,10 +1,21 @@
 .table-header {
+  position: relative;
   min-height: 20px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding-inline: var(--ant-table-cell-padding-inline);
-  border-right: 1px solid var(--ant-table-header-split-color);
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0;
+    width: 1px;
+    height: 1.6em;
+    background-color: var(--ant-table-header-split-color);
+    transform: translateY(-50%);
+    content: '';
+  }
 
   &-last {
     border-right: none;