fix(style): dark style

config/routes.ts

@@ -120,7 +120,7 @@ export default [
     name: '404',
     path: '*',
     key: '404',
-    layout: false,
+    hideInMenu: true,
     component: './404'
   }
 ];

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">
+      {contextHolder}
-        <div className="footer-content-left">
+      <div className={styles.footer}>
-          <div className={styles['footer-content-left-text']}>
+        <div className="footer-content">
-            <Space size={4}>
+          <div className="footer-content-left">
-              <span>&copy;</span>
+            <div className={styles['footer-content-left-text']}>
-              <span> {new Date().getFullYear()}</span>
+              <Space size={4}>
-              <span> {intl.formatMessage({ id: 'settings.company' })}</span>
+                <span>&copy;</span>
-            </Space>
+                <span> {new Date().getFullYear()}</span>
-            <Space size={8} style={{ marginLeft: 18 }}>
+                <span> {intl.formatMessage({ id: 'settings.company' })}</span>
-              <Button
+              </Space>
-                type="link"
+              <Space size={8} style={{ marginLeft: 18 }}>
-                size="small"
+                <Button
-                href={externalLinks.documentation}
+                  type="link"
-                target="_blank"
+                  size="small"
-              >
+                  href={externalLinks.documentation}
-                {intl.formatMessage({ id: 'common.button.help' })}
+                  target="_blank"
-              </Button>
+                >
-              <Button type="link" size="small" onClick={showVersion}>
+                  {intl.formatMessage({ id: 'common.button.help' })}
-                {getAtomStorage(GPUStackVersionAtom)?.version}
+                </Button>
-              </Button>
+                <Button type="link" size="small" onClick={showVersion}>
-            </Space>
+                  {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;

src/global.less

@@ -94,9 +94,13 @@ html[data-theme='realDark'] {
   --color-bg-tooltip: #424242;
   --color-editor-header-bg: #292929;
   --color-progress-text: rgba(255, 255, 255, 80%);
-  --color-modal-content-bg: #1f1f1f;
+  --color-modal-content-bg: #080808;
 
   background: #141414;
+
+  .ant-result-image {
+    opacity: 0.9;
+  }
 }
 
 body {
@@ -118,6 +122,10 @@ body {
 
   // table
   .ant-table-wrapper {
+    .ant-table {
+      background: transparent !important;
+    }
+
     .ant-table-selection-column {
       padding-inline-start: 16px !important;
     }
@@ -144,11 +152,21 @@ body {
       display: flex !important;
     }
 
-    tr > th {
+    .ant-table-thead {
-      border: none;
+      tr {
-      padding-block: 0;
+        background-color: var(--ant-color-fill-tertiary);
-      height: 50px;
+
-      background-color: var(--ant-color-fill-tertiary);
+        > th {
+          border: none;
+          padding-block: 0;
+          height: 50px;
+          background-color: transparent;
+
+          &::before {
+            transition: none !important;
+          }
+        }
+      }
     }
 
     tr > td {
@@ -157,46 +175,17 @@ body {
     }
   }
 
-  // input
+  .ant-input-outlined,
-  // .ant-input-css-var.ant-input {
+  .ant-input-number,
-  //   height: 40px;
+  .ant-select-selector {
-  // }
+    background: transparent !important;
-
-  // .ant-input-outlined,
-  // .ant-input-affix-wrapper,
-  // .ant-picker {
-  //   height: 40px;
-  // }
-
-  .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,
+  // set for the non-form item
-  .ant-input-outlined.ant-input-status-error:not(
+  .ant-input-outlined,
-      .ant-input-disabled
+  .ant-input-affix-wrapper,
-    ):focus-within {
+  .ant-picker {
-    border: none;
+    height: 40px;
-    box-shadow: none;
-  }
-
-  // input number
-  .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;
   }
 
   // form item help
@@ -261,10 +250,6 @@ body {
     }
   }
 
-  .ant-table-wrapper .ant-table {
-    background-color: unset;
-  }
-
   .ant-table-content table {
     .ant-table-tbody {
       .ant-table-row {
@@ -732,7 +717,11 @@ body {
       }
 
       a {
-        color: var(--ant-color-link-hover);
+        color: var(--ant-blue);
+
+        &:hover {
+          color: var(--ant-blue-5);
+        }
       }
     }
   }

src/layouts/index.tsx

@@ -99,6 +99,7 @@ export default (props: any) => {
   const { initialize: initialize } = useOverlayScroller({
     defer: false
   });
+  const [modal, contextHolder] = Modal.useModal();
   const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const { initialize: initializeMenu } = useOverlayScroller();
@@ -132,7 +133,7 @@ export default (props: any) => {
 
   const showVersion = () => {
     saveScrollHeight();
-    Modal.info({
+    modal.info({
       ...modalConfig,
       width: 460,
       content: <VersionInfo intl={intl} />,
@@ -477,6 +478,7 @@ export default (props: any) => {
           )}
         </Exception>
       </ProLayout>
+      {contextHolder}
     </ConfigProvider>
   );
 };

src/locales/en-US/common.ts

@@ -238,5 +238,6 @@ export default {
   'common.appearance': 'Appearance',
   'common.appearance.dark': 'Dark',
   'common.appearance.light': 'Light',
-  'common.appearance.system': 'System Default'
+  'common.appearance.system': 'System Default',
+  'common.exception.404': 'Sorry, the page you visited does not exist.'
 };

src/locales/ja-JP/common.ts

@@ -238,7 +238,8 @@ export default {
   'common.appearance': 'Appearance',
   'common.appearance.dark': 'Dark',
   'common.appearance.light': 'Light',
-  'common.appearance.system': 'System Default'
+  'common.appearance.system': 'System Default',
+  'common.exception.404': 'Sorry, the page you visited does not exist.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -246,4 +247,5 @@ export default {
 // 2. 'common.appearance.light': 'Light',
 // 3. 'common.appearance.system': 'System Default',
 // 4. 'common.appearance': 'Appearance',
+// 5. 'common.exception.404': 'Sorry, the page you visited does not exist.'
 // ========== End of To-Do List ==========

src/locales/ru-RU/common.ts

@@ -236,9 +236,10 @@ export default {
   'common.appearance': 'Внешний вид',
   'common.appearance.dark': 'Темная',
   'common.appearance.light': 'Светлая',
-  'common.appearance.system': 'Как в системе'
+  'common.appearance.system': 'Как в системе',
+  'common.exception.404': 'Sorry, the page you visited does not exist.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'common.exception.404': 'Sorry, the page you visited does not exist.'
 // ========== End of To-Do List ==========

src/locales/zh-CN/common.ts

@@ -233,5 +233,6 @@ export default {
   'common.appearance': '外观',
   'common.appearance.dark': '深色',
   'common.appearance.light': '浅色',
-  'common.appearance.system': '跟随系统'
+  'common.appearance.system': '跟随系统',
+  'common.exception.404': '抱歉，你访问的页面不存在'
 };

src/pages/404.tsx

@@ -1,18 +1,16 @@
-import { history } from '@umijs/max';
+import { useIntl } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Result } from 'antd';
 import React from 'react';
 
-const NoFoundPage: React.FC = () => (
+const NoFoundPage: React.FC = () => {
-  <Result
+  const intl = useIntl();
-    status="404"
+  return (
-    title="404"
+    <Result
-    subTitle="Sorry, the page you visited does not exist."
+      status="404"
-    extra={
+      title="404"
-      <Button type="primary" onClick={() => history.push('/')}>
+      subTitle={intl.formatMessage({ id: 'common.exception.404' })}
-        Back Home
+    />
-      </Button>
+  );
-    }
+};
-  />
-);
 
 export default NoFoundPage;

src/pages/llmodels/components/deploy-modal.tsx

@@ -154,6 +154,7 @@ const AddModal: FC<AddModalProps> = (props) => {
 
   const handleOnSelectModel = (item: any, evaluate?: boolean) => {
     setSelectedModel(item);
+    console.log('item.isGGUF=========>', item.isGGUF);
     if (!item.isGGUF) {
       setIsGGUF(false);
       form.current?.form?.resetFields(resetFields);

src/pages/llmodels/config/index.ts

@@ -489,7 +489,8 @@ export const updateExcludeFields = [
   'ollama_library_model_name',
   'scheduleType',
   'backend',
-  'gpu_selector'
+  'gpu_selector',
+  'categories'
 ];
 
 export const formFields = [

src/pages/login/index.tsx

@@ -1,4 +1,5 @@
 import Bg2 from '@/assets/images/bg-2.png';
+import GridBg from '@/assets/images/grid_background_1920x1080.png';
 import { userAtom } from '@/atoms/user';
 import Footer from '@/components/footer';
 import useUserSettings from '@/hooks/use-user-settings';
@@ -21,7 +22,7 @@ const Wrapper = styled.div<{ $isDarkTheme: boolean }>`
   z-index: -1;
   background: ${({ $isDarkTheme }) =>
     $isDarkTheme
-      ? `repeating-linear-gradient(45deg, #000, transparent 120px)`
+      ? `url(${GridBg}) center center /cover no-repeat`
       : `url(${Bg2}) center center /cover no-repeat`};
   opacity: ${({ $isDarkTheme }) => ($isDarkTheme ? 1 : 0.6)};
 `;

src/pages/playground/style/message-input.less

@@ -80,7 +80,6 @@
     width: 100%;
     display: flex;
     position: relative;
-    background-color: var(--ant-color-bg-elevated);
     border-radius: var(--border-radius-base);
 
     textarea {

src/pages/resources/components/model-files.tsx

@@ -154,8 +154,10 @@ const getWorkerName = (
 };
 
 const getModelInfo = (record: ListItem) => {
+  const source = _.get(modelSourceMap, record.source, '');
   if (record.source === modelSourceMap.huggingface_value) {
     return {
+      source: `${source}/${record.huggingface_repo_id}`,
       repo_id: record.huggingface_repo_id,
       title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
       filename: record.huggingface_filename || record.huggingface_repo_id
@@ -163,6 +165,7 @@ const getModelInfo = (record: ListItem) => {
   }
   if (record.source === modelSourceMap.modelscope_value) {
     return {
+      source: `${source}/${record.model_scope_model_id}`,
       repo_id: record.model_scope_model_id,
       title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
       filename: record.model_scope_file_path || record.model_scope_model_id
@@ -170,12 +173,14 @@ const getModelInfo = (record: ListItem) => {
   }
   if (record.source === modelSourceMap.ollama_library_value) {
     return {
+      source: `${source}/${record.ollama_library_model_name}`,
       repo_id: record.ollama_library_model_name,
       title: record.ollama_library_model_name,
       filename: record.ollama_library_model_name
     };
   }
   return {
+    source: `${source}${record.local_path}`,
     repo_id: record.local_path,
     title: record.local_path,
     filename: _.split(record.local_path, /[\\/]/).pop()
@@ -551,11 +556,11 @@ const ModelFiles = () => {
       },
       render: (text: string, record: ListItem) => {
         const modelInfo = getModelInfo(record);
-        const { repo_id } = modelInfo;
+        const { repo_id, source } = modelInfo;
         return (
-          <TextWrapper>
+          <TextWrapper style={{ paddingRight: 8 }}>
-            <AutoTooltip ghost showTitle title={repo_id}>
+            <AutoTooltip ghost title={source}>
-              {_.get(modelSourceMap, record.source, '')}
+              {source}
             </AutoTooltip>
           </TextWrapper>
         );
@@ -586,7 +591,7 @@ const ModelFiles = () => {
     {
       title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
       dataIndex: 'resolved_paths',
-      width: '35%',
+      width: '30%',
       ellipsis: {
         showTitle: false
       },
@@ -597,6 +602,7 @@ const ModelFiles = () => {
     {
       title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
       dataIndex: 'size',
+      width: 100,
       ellipsis: {
         showTitle: false
       },
@@ -612,6 +618,7 @@ const ModelFiles = () => {
       title: intl.formatMessage({ id: 'common.table.createTime' }),
       dataIndex: 'created_at',
       sorter: false,
+      width: 180,
       ellipsis: {
         showTitle: false
       },

src/pages/resources/index.tsx

@@ -12,6 +12,10 @@ const Wrapper = styled.div`
   .ant-page-header-heading {
     padding-inline: 8px;
   }
+  .ant-tabs-nav .ant-tabs-tab-active,
+  .ant-tabs-tab {
+    background: transparent;
+  }
 `;
 
 const Resources = () => {