style: dashboard style

config/config.ts

@@ -1,8 +1,5 @@
 import { defineConfig } from '@umijs/max';
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
-const DeleteCssPlugin = require('./plugins/delete-css-plugin');
 
 import proxy from './proxy';
 import routes from './routes';
@@ -17,23 +14,6 @@ export default defineConfig({
   base: process.env.npm_config_base || '/',
   ...(isProduction
     ? {
-        // extraBabelPlugins: [
-        //   [
-        //     'babel-plugin-named-asset-import',
-        //     {
-        //       loaderMap: {
-        //         css: {
-        //           loader: 'css-loader',
-        //           options: {
-        //             modules: {
-        //               localIdentName: 'css/[name]__[local]___[hash:base64:5]'
-        //             }
-        //           }
-        //         }
-        //       }
-        //     }
-        //   ]
-        // ],
         scripts: [
           {
             src: `/js/umi.${t}.js`

config/routes.ts

@@ -7,14 +7,14 @@ export default [
     redirect: '/dashboard'
   },
   {
-    name: 'dashboard',
+    name: 'Dashboard',
     path: '/dashboard',
     key: 'dashboard',
     icon: 'home',
     component: './dashboard'
   },
   {
-    name: 'playground',
+    name: 'Playground',
     title: 'Playground',
     path: '/playground',
     key: 'playground',
@@ -22,14 +22,14 @@ export default [
     component: './playground'
   },
   {
-    name: 'models',
+    name: 'Models',
     path: '/models',
     key: 'models',
     icon: 'Block',
     component: './llmodels'
   },
   {
-    name: 'resources',
+    name: 'Resources',
     path: '/resources',
     key: 'resources',
     icon: 'CloudServer',
@@ -43,14 +43,14 @@ export default [
     component: './api-keys'
   },
   {
-    name: 'users',
+    name: 'Users',
     path: '/users',
     key: 'users',
     icon: 'Team',
     component: './users'
   },
   {
-    name: 'profile',
+    name: 'Profile',
     path: '/profile',
     key: 'profile',
     hideInMenu: true,
@@ -58,7 +58,7 @@ export default [
     icon: 'User'
   },
   {
-    name: 'login',
+    name: 'Login',
     path: '/login',
     key: 'login',
     layout: false,

src/assets/styles/menu.less

@@ -1,9 +1,9 @@
 .ant-pro-layout {
   .ant-pro-sider {
     padding: 10px;
-    &.ant-layout-sider {
-      background: var(--color-white-1);
-    }
+    // &.ant-layout-sider {
+    //   background: var(--color-white-1);
+    // }
     .ant-layout-sider-children {
       background-color: var(--color-fill-1);
       border-inline: none;
@@ -11,12 +11,15 @@
       padding-inline: 16px;
       padding-block-end: 12px;
     }
+
     .umi-plugin-layout-right {
       width: 100%;
+
       .umi-plugin-layout-action {
         padding: 12px;
         width: 100%;
         border-radius: var(--menu-border-radius-base);
+
         &:hover {
           background-color: var(--color-white-1);
         }

src/components/charts/gauge.tsx

@@ -29,14 +29,18 @@ const GaugeChart: React.FC<GaugeChartProps> = (props) => {
         range: rangColor
       }
     },
+    startAngle: Math.PI,
+    endAngle: 0,
     title: {
-      // title,
+      title,
+      size: 0,
       titleFontSize: 14,
       style: {
         align: 'center'
       }
     },
     style: {
+      arcShape: 'round',
       textContent: (target: number, total: number) => {
         return `${(target / total) * 100}%`;
       }

src/components/charts/pie-chart.tsx

@@ -0,0 +1,37 @@
+import { Pie } from '@ant-design/plots';
+import numeral from 'numeral';
+
+interface PieChartProps {
+  data: { label: string; value: number }[];
+  height?: number;
+  radius?: number;
+}
+const PieChart: React.FC<PieChartProps> = (props) => {
+  const { data, height = 340, radius = 0.9 } = props;
+
+  return (
+    <Pie
+      height={height}
+      radius={radius}
+      angleField="value"
+      colorField="label"
+      data={data}
+      legend={{
+        color: {
+          position: 'bottom',
+          layout: {
+            justifyContent: 'center'
+          }
+        }
+      }}
+      label={{
+        position: 'outside',
+        text: (item: { label: number; value: number }) => {
+          return `${item.label}: ${numeral(item.value).format('0,0')}`;
+        }
+      }}
+    />
+  );
+};
+
+export default PieChart;

src/components/page-tools/index.tsx

@@ -6,17 +6,27 @@ type PageToolsProps = {
   right?: React.ReactNode;
   marginBottom?: number;
   marginTop?: number;
+  style?: React.CSSProperties;
 };
 
 const PageTools: React.FC<PageToolsProps> = (props) => {
-  const { left, right, marginBottom = 0, marginTop = 70 } = props;
+  const {
+    left,
+    right,
+    marginBottom = 0,
+    marginTop = 70,
+    style: pageStyle
+  } = props;
 
-  const newStyle: Record<string, string> = useMemo(() => {
-    const style: Record<string, string> = {};
+  const newStyle: React.CSSProperties = useMemo(() => {
+    const style: React.CSSProperties = {};
     style.marginBottom = `${marginBottom}px`;
     style.marginTop = `${marginTop}px`;
+    if (pageStyle) {
+      Object.assign(style, pageStyle);
+    }
     return style;
-  }, [marginBottom, marginTop]);
+  }, [marginBottom, marginTop, pageStyle]);
 
   return (
     <div className="page-tools" style={newStyle}>

src/components/status-tag/index.less

@@ -11,6 +11,10 @@
   font-size: var(--font-size-base);
   overflow: hidden;
 
+  &.download {
+    background-color: rgb(47 191 133 / 30%);
+  }
+
   .download {
     display: flex;
     justify-content: center;

src/components/status-tag/index.tsx

@@ -48,7 +48,9 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
   };
   return (
     <span
-      className={classNames('status-tag')}
+      className={classNames('status-tag', {
+        download: download?.percent
+      })}
       style={
         download
           ? {

src/global.less

@@ -31,8 +31,6 @@ html {
   --color-chart-red: #ff7875;
   --color-chart-green: #54cc98;
   --color-chart-glod: #ffd666;
-  // --color-text-1: #000;
-
   --seal-transition-func: cubic-bezier(0, 0, 1, 1);
   // ======== input ============
   --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
@@ -129,8 +127,10 @@ body {
   }
 
   // table
-  .ant-table-wrapper .ant-table-selection-column {
-    padding-inline-start: 16px !important;
+  .ant-table-wrapper {
+    .ant-table-selection-column {
+      padding-inline-start: 16px !important;
+    }
   }
 
   .ant-table-container .ant-table-content table {
@@ -245,6 +245,10 @@ body {
     min-height: 100vh;
   }
 
+  .ant-pro-layout-bg-list {
+    background: transparent !important;
+  }
+
   .ant-pro-layout-container {
     background-color: var(--color-fill-2);
   }
@@ -271,6 +275,23 @@ body {
 .monaco-editor {
   border-radius: 16px;
 }
+// .background {
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+//   bottom: 0;
+//   right: 0;
+//   background: radial-gradient(
+//     circle,
+//     rgba(47, 191, 133, 0.02),
+//     rgba(55, 125, 184, 0.2)
+//   );
+//   filter: blur(100px);
+//   height: 100%;
+// }
+.ant-pro-page-container {
+  background: transparent;
+}
 
 @keyframes skeleton-loading {
   0% {

src/layouts/index.tsx

@@ -1,7 +1,5 @@
 // @ts-nocheck
 
-/// <reference types="@ant-design/pro-components" />
-
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
 import { ProLayout } from '@ant-design/pro-components';
@@ -141,97 +139,100 @@ export default (props: any) => {
   );
   console.log('route===========', route);
   return (
-    <ProLayout
-      route={route}
-      location={location}
-      title={userConfig.title}
-      navTheme="light"
-      siderWidth={270}
-      onMenuHeaderClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        navigate('/');
-      }}
-      onPageChange={(route) => {
-        console.log('onRouteChange', route);
-        const { location } = history;
-        // 如果没有登录，重定向到 login
-        // if (!initialState?.currentUser && location.pathname !== loginPath) {
-        //   history.push(loginPath);
-        // }
-      }}
-      formatMessage={userConfig.formatMessage || formatMessage}
-      menu={{ locale: userConfig.locale }}
-      logo={Logo}
-      menuItemRender={(menuItemProps, defaultDom) => {
-        console.log('meurender=========', { defaultDom });
-        if (menuItemProps.isUrl || menuItemProps.children) {
-          return defaultDom;
-        }
-        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
-          return (
-            // handle wildcard route path, for example /slave/* from qiankun
-            <Link
-              to={menuItemProps.path.replace('/*', '')}
-              target={menuItemProps.target}
-            >
-              {defaultDom}
-            </Link>
-          );
-        }
-        return <>{defaultDom}</>;
-      }}
-      itemRender={(route, _, routes) => {
-        const { breadcrumbName, title, path } = route;
-        const label = title || breadcrumbName;
-        const last = routes[routes.length - 1];
-        if (last) {
-          if (last.path === path || last.linkPath === path) {
-            return <span>{label}</span>;
+    <div>
+      <div className="background"></div>
+      <ProLayout
+        route={route}
+        location={location}
+        title={userConfig.title}
+        navTheme="light"
+        siderWidth={270}
+        onMenuHeaderClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          navigate('/');
+        }}
+        onPageChange={(route) => {
+          console.log('onRouteChange', route);
+          const { location } = history;
+          // 如果没有登录，重定向到 login
+          // if (!initialState?.currentUser && location.pathname !== loginPath) {
+          //   history.push(loginPath);
+          // }
+        }}
+        formatMessage={userConfig.formatMessage || formatMessage}
+        menu={{ locale: userConfig.locale }}
+        logo={Logo}
+        menuItemRender={(menuItemProps, defaultDom) => {
+          console.log('meurender=========', { defaultDom });
+          if (menuItemProps.isUrl || menuItemProps.children) {
+            return defaultDom;
           }
-        }
-        return <Link to={path}>{label}</Link>;
-      }}
-      disableContentMargin
-      fixSiderbar
-      fixedHeader
-      {...runtimeConfig}
-      rightContentRender={
-        runtimeConfig.rightContentRender !== false &&
-        ((layoutProps) => {
-          const dom = getRightRenderContent({
-            runtimeConfig,
-            loading,
-            initialState,
-            setInitialState
-          });
-          if (runtimeConfig.rightContentRender) {
-            return runtimeConfig.rightContentRender(layoutProps, dom, {
-              // BREAK CHANGE userConfig > runtimeConfig
-              userConfig,
+          if (menuItemProps.path && location.pathname !== menuItemProps.path) {
+            return (
+              // handle wildcard route path, for example /slave/* from qiankun
+              <Link
+                to={menuItemProps.path.replace('/*', '')}
+                target={menuItemProps.target}
+              >
+                {defaultDom}
+              </Link>
+            );
+          }
+          return <>{defaultDom}</>;
+        }}
+        itemRender={(route, _, routes) => {
+          const { breadcrumbName, title, path } = route;
+          const label = title || breadcrumbName;
+          const last = routes[routes.length - 1];
+          if (last) {
+            if (last.path === path || last.linkPath === path) {
+              return <span>{label}</span>;
+            }
+          }
+          return <Link to={path}>{label}</Link>;
+        }}
+        disableContentMargin
+        fixSiderbar
+        fixedHeader
+        {...runtimeConfig}
+        rightContentRender={
+          runtimeConfig.rightContentRender !== false &&
+          ((layoutProps) => {
+            const dom = getRightRenderContent({
               runtimeConfig,
               loading,
               initialState,
               setInitialState
             });
-          }
-          return dom;
-        })
-      }
-    >
-      <Exception
-        route={matchedRoute}
-        noFound={runtimeConfig?.noFound}
-        notFound={runtimeConfig?.notFound}
-        unAccessible={runtimeConfig?.unAccessible}
-        noAccessible={runtimeConfig?.noAccessible}
+            if (runtimeConfig.rightContentRender) {
+              return runtimeConfig.rightContentRender(layoutProps, dom, {
+                // BREAK CHANGE userConfig > runtimeConfig
+                userConfig,
+                runtimeConfig,
+                loading,
+                initialState,
+                setInitialState
+              });
+            }
+            return dom;
+          })
+        }
       >
-        {runtimeConfig.childrenRender ? (
-          runtimeConfig.childrenRender(<Outlet />, props)
-        ) : (
-          <Outlet />
-        )}
-      </Exception>
-    </ProLayout>
+        <Exception
+          route={matchedRoute}
+          noFound={runtimeConfig?.noFound}
+          notFound={runtimeConfig?.notFound}
+          unAccessible={runtimeConfig?.unAccessible}
+          noAccessible={runtimeConfig?.noAccessible}
+        >
+          {runtimeConfig.childrenRender ? (
+            runtimeConfig.childrenRender(<Outlet />, props)
+          ) : (
+            <Outlet />
+          )}
+        </Exception>
+      </ProLayout>
+    </div>
   );
 };

src/pages/api-keys/index.tsx

@@ -141,7 +141,7 @@ const Models: React.FC = () => {
           left={
             <Space>
               <Input
-                placeholder="按名称查询"
+                placeholder="名称查询"
                 style={{ width: 300 }}
                 onChange={handleNameChange}
               ></Input>

src/pages/dashboard/components/active-table.tsx

@@ -1,4 +1,5 @@
 import ContentWrapper from '@/components/content-wrapper';
+import PageTools from '@/components/page-tools';
 import { Col, Row, Table } from 'antd';
 
 const modelColumns = [
@@ -132,10 +133,18 @@ const ActiveTable = () => {
   return (
     <Row>
       <Col span={12}>
-        <ContentWrapper
-          contentStyle={{ paddingRight: 0 }}
-          title={<span style={{ lineHeight: '48px' }}>Active Models</span>}
-        >
+        <PageTools
+          style={{ margin: '32px 40px' }}
+          left={
+            <span
+              style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
+            >
+              Active Models
+            </span>
+          }
+          right={false}
+        />
+        <ContentWrapper contentStyle={{ paddingRight: 0 }} title={false}>
           <Table
             columns={modelColumns}
             dataSource={modelData}
@@ -145,9 +154,18 @@ const ActiveTable = () => {
         </ContentWrapper>
       </Col>
       <Col span={12}>
-        <ContentWrapper
-          title={<span style={{ lineHeight: '48px' }}>Active Projects</span>}
-        >
+        <PageTools
+          style={{ margin: '32px 40px' }}
+          left={
+            <span
+              style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
+            >
+              Active Projects
+            </span>
+          }
+          right={false}
+        />
+        <ContentWrapper title={false}>
           <Table
             columns={projectColumns}
             dataSource={projectData}

src/pages/dashboard/components/over-view.less

@@ -1,16 +1,18 @@
 :local(.card-body) {
   :global(.ant-card-body) {
-    height: 100px;
+    height: 110px;
     display: flex;
     justify-content: space-around;
   }
 }
+
 :local(.row) {
   :global(.ant-col-5) {
     flex: 0 0 20%;
     max-width: 20%;
   }
 }
+
 .content {
   display: flex;
   flex-direction: column;

src/pages/dashboard/components/over-view.tsx

@@ -1,4 +1,4 @@
-import { PageContainer } from '@ant-design/pro-components';
+import ContentWrapper from '@/components/content-wrapper';
 import { Card, Col, Row, Space } from 'antd';
 import React from 'react';
 import { overviewConfigs } from '../config';
@@ -55,7 +55,7 @@ const Overview: React.FC = (props) => {
       return value;
     }
     return (
-      <Space className="value-box">
+      <Space className="value-box" size={20}>
         <span className={'value-healthy'}>{value.healthy}</span>
         <span className={'value-warning'}>{value.warning}</span>
         <span className={'value-error'}>{value.error}</span>
@@ -63,8 +63,8 @@ const Overview: React.FC = (props) => {
     );
   };
   return (
-    <PageContainer ghost title={false}>
-      <Row gutter={[20, 20]} className={styles.row}>
+    <ContentWrapper contentStyle={{ paddingBlockStart: '32px' }} title={false}>
+      <Row gutter={[24, 20]} className={styles.row}>
         {overviewConfigs.map((config, index) => (
           <Col span={5} key={config.key}>
             {renderCardItem({
@@ -75,7 +75,7 @@ const Overview: React.FC = (props) => {
           </Col>
         ))}
       </Row>
-    </PageContainer>
+    </ContentWrapper>
   );
 };
 

src/pages/dashboard/components/resource-utilization.tsx

@@ -26,13 +26,6 @@ const mockData = {
 };
 const UtilizationOvertime: React.FC = () => {
   const timeList = [
-    // '01:00:00',
-    // '02:00:00',
-    // '03:00:00',
-    // '04:00:00',
-    // '05:00:00',
-    // '06:00:00',
-    // '07:00:00',
     '08:00:00',
     '09:00:00',
     '10:00:00',
@@ -67,7 +60,6 @@ const UtilizationOvertime: React.FC = () => {
   };
   const data = generateData();
 
-  // <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
   return (
     <>
       <LineChart height={400} data={data} />

src/pages/dashboard/components/system-load.tsx

@@ -10,19 +10,23 @@ const SystemLoad = () => {
   };
 
   return (
-    <PageContainer ghost title="System Load">
+    <PageContainer ghost title={false}>
       <div className="system-load">
         <PageTools
           marginBottom={10}
           marginTop={0}
-          left={false}
+          left={
+            <span style={{ fontSize: 'var(--font-size-large)' }}>
+              System Load
+            </span>
+          }
           right={
             <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
           }
         />
         <ResourceUtilization />
-        <Row style={{ width: '100%' }}>
-          <Col span={6}>
+        <Row style={{ width: '100%', marginTop: '32px' }}>
+          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
             <GaugeChart
               title="GPU Compute Utilization"
               total={100}
@@ -32,7 +36,7 @@ const SystemLoad = () => {
               rangColor={['#54cc98', '#ffd666', '#ff7875']}
             ></GaugeChart>
           </Col>
-          <Col span={6}>
+          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
             <GaugeChart
               title="GPU Memory Utilization"
               total={100}
@@ -42,7 +46,7 @@ const SystemLoad = () => {
               rangColor={['#54cc98', '#ffd666', '#ff7875']}
             ></GaugeChart>
           </Col>
-          <Col span={6}>
+          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
             <GaugeChart
               title="CPU Compute Utilization"
               total={100}
@@ -52,7 +56,7 @@ const SystemLoad = () => {
               rangColor={['#54cc98', '#ffd666', '#ff7875']}
             ></GaugeChart>
           </Col>
-          <Col span={6}>
+          <Col xs={24} sm={24} md={12} lg={6} xl={6}>
             <GaugeChart
               title="CPU Memory Utilization"
               total={100}

src/pages/dashboard/components/usage.tsx

@@ -1,8 +1,8 @@
 import ColumnBar from '@/components/charts/column-bar';
 import HBar from '@/components/charts/h-bar';
+import ContentWrapper from '@/components/content-wrapper';
 import PageTools from '@/components/page-tools';
 import { generateRandomArray } from '@/utils';
-import { PageContainer } from '@ant-design/pro-components';
 import { Col, DatePicker, Row } from 'antd';
 
 const times = [
@@ -91,19 +91,16 @@ const Usage = () => {
   };
   return (
     <>
-      <PageContainer ghost title="Usage">
-        <PageTools
-          marginBottom={10}
-          marginTop={0}
-          left={false}
-          right={
-            <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
-          }
-        />
-      </PageContainer>
-      <Row style={{ width: '100%' }}>
+      <PageTools
+        style={{ margin: '32px 40px' }}
+        left={<span style={{ fontSize: 'var(--font-size-large)' }}>Usage</span>}
+        right={
+          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+        }
+      />
+      <Row style={{ width: '100%' }} gutter={[20, 0]}>
         <Col span={12}>
-          <PageContainer title={false}>
+          <ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
             <ColumnBar
               title="API Request"
               data={dataList}
@@ -111,10 +108,10 @@ const Usage = () => {
               yField="value"
               height={360}
             ></ColumnBar>
-          </PageContainer>
+          </ContentWrapper>
         </Col>
         <Col span={12}>
-          <PageContainer title={false}>
+          <ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
             <ColumnBar
               title="Tokens"
               data={tokenUsage}
@@ -122,12 +119,12 @@ const Usage = () => {
               yField="value"
               height={360}
             ></ColumnBar>
-          </PageContainer>
+          </ContentWrapper>
         </Col>
       </Row>
-      <Row style={{ width: '100%' }}>
+      <Row style={{ width: '100%' }} gutter={[20, 0]}>
         <Col span={12}>
-          <PageContainer title={false}>
+          <ContentWrapper title={false} contentStyle={{ paddingRight: 0 }}>
             <HBar
               title="Top Users"
               data={userDataList}
@@ -135,10 +132,10 @@ const Usage = () => {
               yField="value"
               height={400}
             ></HBar>
-          </PageContainer>
+          </ContentWrapper>
         </Col>
         <Col span={12}>
-          <PageContainer title={false}>
+          <ContentWrapper title={false} contentStyle={{ paddingLeft: 0 }}>
             <HBar
               title="Top Projects"
               data={projectDataList}
@@ -146,7 +143,7 @@ const Usage = () => {
               yField="value"
               height={400}
             ></HBar>
-          </PageContainer>
+          </ContentWrapper>
         </Col>
       </Row>
     </>

src/pages/dashboard/config/index.ts

@@ -3,30 +3,30 @@ export const overviewConfigs = [
     key: 'workers',
     label: 'Workers',
     backgroundColor:
-      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
   },
   {
     key: 'gpus',
     label: 'Total GPUs',
     backgroundColor:
-      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
   },
   {
     key: 'allocatedGpus',
     label: 'Allocated GPUs',
     backgroundColor:
-      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
   },
   {
     key: 'models',
     label: 'Models',
     backgroundColor:
-      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
   },
   {
     key: 'instances',
     label: 'Instances',
     backgroundColor:
-      'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)'
+      'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)'
   }
 ];

src/pages/dashboard/styles/index.less

@@ -11,7 +11,7 @@
     color: var(--ant-gold-6);
   }
 
-  .value-danger {
+  .value-error {
     color: var(--ant-red-6);
   }
 }

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

@@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { convertFileSize } from '@/utils';
-import { Form, Modal } from 'antd';
+import { Form, Input, Modal } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import {
@@ -130,7 +130,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             onSearch={debounceSearch}
             options={repoOptions}
             description="Only .gguf format is supported"
-          ></SealAutoComplete>
+          >
+            <Input.Search style={{ width: '520px' }}></Input.Search>
+          </SealAutoComplete>
         </Form.Item>
         <Form.Item<FormData>
           name="huggingface_filename"

src/pages/llmodels/index.tsx

@@ -382,7 +382,7 @@ const Models: React.FC = () => {
           left={
             <Space>
               <Input
-                placeholder="按名称查询"
+                placeholder="名称查询"
                 style={{ width: 300 }}
                 allowClear
                 onChange={handleNameChange}

src/pages/resources/components/gpus.tsx

@@ -146,7 +146,7 @@ const Models: React.FC = () => {
         left={
           <Space>
             <Input
-              placeholder="按名称查询"
+              placeholder="名称查询"
               style={{ width: 300 }}
               onChange={handleNameChange}
             ></Input>

src/pages/resources/components/nodes.tsx

@@ -86,7 +86,7 @@ const Models: React.FC = () => {
         left={
           <Space>
             <Input
-              placeholder="按名称查询"
+              placeholder="名称查询"
               style={{ width: 300 }}
               onChange={handleNameChange}
             ></Input>

src/pages/users/index.tsx

@@ -166,7 +166,7 @@ const Models: React.FC = () => {
           left={
             <Space>
               <Input
-                placeholder="按名称查询"
+                placeholder="名称查询"
                 style={{ width: 300 }}
                 onChange={handleNameChange}
               ></Input>