fix: adjust border raduis

src/pages/_components/column-settings.tsx

@@ -36,11 +36,12 @@ const Title = styled.div`
 `;
 
 const LabelWrapper = styled.span`
-  color: var(--color-text-secondary);
+  color: var(--ant-color-text-secondary);
   > span {
     display: flex;
     align-items: center;
     gap: 4px;
+    color: var(--ant-color-text-secondary);
     .sub-title {
       display: none;
     }

src/pages/_components/filter-form.tsx

@@ -1,13 +1,13 @@
+import IconFont from '@/components/icon-font';
 import OverlayScroller from '@/components/overlay-scroller';
-import { CloseCircleFilled, FilterOutlined } from '@ant-design/icons';
+import { CloseCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Badge, Button, Form, Popover } from 'antd';
+import { Button, Divider, Form, Popover } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div`
-  padding: 8px;
-  padding-right: 0px;
+  padding: 12px 8px;
   .title {
     font-weight: 500;
     margin-bottom: 12px;
@@ -26,25 +26,34 @@ const Container = styled.div`
   }
 `;
 
+const Filters = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0;
+  cursor: pointer;
+  .count {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 500;
+    background-color: var(--ant-color-bg-text-active);
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
 const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  .badge {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-  }
   .close-btn {
-    position: absolute;
-    display: none;
-    top: -4px;
-    right: -4px;
-    font-size: 12px;
     border-radius: 50%;
     color: var(--ant-color-text-quaternary);
-    background-color: var(--ant-color-bg-container);
     &:hover {
       color: var(--ant-color-text-tertiary);
     }
@@ -62,6 +71,7 @@ const FilterForm: React.FC<
     contentHeight?: number;
     initialValues?: any;
     hasFilters?: boolean;
+    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     onClose?: () => void;
     onValuesChange?: (ChangeValues: any, allValues: any) => void;
   }
@@ -70,6 +80,7 @@ const FilterForm: React.FC<
   width = 300,
   contentHeight = 400,
   initialValues = {},
+  placement = 'bottomLeft',
   onClose,
   onValuesChange
 }) => {
@@ -88,9 +99,10 @@ const FilterForm: React.FC<
 
   const handleOnReset = () => {
     form.resetFields(Object.keys(initialValues));
-    onValuesChange?.({}, initialValues);
     setOpen(false);
     setHasFilters(false);
+    form.resetFields();
+    onValuesChange?.({}, form.getFieldsValue());
   };
 
   const handleOnClose = () => {
@@ -106,19 +118,42 @@ const FilterForm: React.FC<
     setHasFilters(hasActiveFilters);
   };
 
+  const handleOnClear = () => {
+    handleOnReset();
+  };
+
+  const filtersCount = Object.values(form.getFieldsValue()).filter(
+    (value) => value !== undefined && value !== null && value !== ''
+  ).length;
+
+  const renderFooter = () => {
+    return (
+      <div className="btn-wrapper">
+        <Button size="middle" onClick={handleOnReset}>
+          {intl.formatMessage({ id: 'common.button.reset' })}
+        </Button>
+        <div className="buttons">
+          <Button size="middle" type="primary" onClick={handleOnClose}>
+            {intl.formatMessage({ id: 'common.button.close' })}
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Popover
       open={open}
-      trigger={'click'}
+      trigger={['click', 'hover']}
       arrow={false}
-      placement="bottomRight"
+      placement={placement}
       content={
         <Container>
           <OverlayScroller
             maxHeight={contentHeight}
             styles={{
               wrapper: {
-                paddingInlineStart: 0
+                paddingInline: 8
               }
             }}
           >
@@ -126,26 +161,29 @@ const FilterForm: React.FC<
               onValuesChange={handleOnValuesChange}
               initialValues={initialValues}
               form={form}
+              layout="vertical"
+              styles={{
+                label: {
+                  lineHeight: 1,
+                  height: 'auto',
+                  marginBottom: 8,
+                  fontWeight: 500
+                },
+                content: {
+                  minHeight: 0
+                }
+              }}
             >
               {children}
             </Form>
           </OverlayScroller>
-          <div className="btn-wrapper">
-            <Button size="middle" onClick={handleOnReset}>
-              {intl.formatMessage({ id: 'common.button.reset' })}
-            </Button>
-            <div className="buttons">
-              <Button size="middle" type="primary" onClick={handleOnClose}>
-                {intl.formatMessage({ id: 'common.button.close' })}
-              </Button>
-            </div>
-          </div>
         </Container>
       }
       onOpenChange={handleOpenChange}
       styles={{
         container: {
-          padding: 8
+          padding: 8,
+          border: '1px solid var(--ant-color-split)'
         },
         root: {
           width: width
@@ -153,25 +191,45 @@ const FilterForm: React.FC<
       }}
     >
       <ButtonWrapper>
-        <Button icon={<FilterOutlined />} onClick={handleToggle}></Button>
-        {hasFilters && (
-          <Badge
-            dot
-            color={'var(--ant-color-primary-text-hover)'}
-            className="badge"
-          />
-        )}
-        {hasFilters && (
-          <span className="close-btn">
-            <CloseCircleFilled
-              style={{ fontSize: 12 }}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleOnReset();
+        <Divider orientation="vertical" style={{ height: 16 }} />
+        <Button
+          size="small"
+          type="text"
+          variant="filled"
+          color="default"
+          shape="round"
+        >
+          <Filters>
+            <span
+              style={{
+                fontSize: 12,
+                color: 'var(--ant-color-text-secondary)',
+                fontWeight: 400
               }}
-            />
-          </span>
-        )}
+            >
+              More Filters
+            </span>
+            {filtersCount > 0 ? (
+              <>
+                <span className="count">{filtersCount}</span>
+                <span className="close-btn">
+                  <CloseCircleFilled
+                    style={{ fontSize: 16 }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleOnClear();
+                    }}
+                  />
+                </span>
+              </>
+            ) : (
+              <IconFont
+                type="icon-filter-list"
+                style={{ fontSize: 14 }}
+              ></IconFont>
+            )}
+          </Filters>
+        </Button>
       </ButtonWrapper>
     </Popover>
   );

src/pages/_components/page-box.tsx

@@ -1,9 +1,11 @@
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { ExtraContent } from '@/layouts/extraRender';
 import {
   PageContainer,
   RouteContext,
   type PageContainerProps
 } from '@ant-design/pro-components';
+import { Divider } from 'antd';
 import classNames from 'classnames';
 import { useContext, useEffect, useRef } from 'react';
 import pageBoxCss from './styles/page-box.less';
@@ -38,6 +40,7 @@ export const PageContainerInner: React.FC<
         {...rest}
         fixedHeader={false}
         title={false}
+        pageHeaderRender={false}
         style={{
           flex: 1
         }}
@@ -49,9 +52,15 @@ export const PageContainerInner: React.FC<
           <div className={pageBoxCss.left}>
             {leftContent || pageContext.title}
           </div>
-          {rightContent && (
-            <div className={pageBoxCss.right}>{rightContent}</div>
-          )}
+          <div className={pageBoxCss.right}>
+            {rightContent && (
+              <div>
+                {rightContent}
+                <Divider orientation="vertical" style={{ margin: '0 16px' }} />
+              </div>
+            )}
+            <ExtraContent />
+          </div>
         </div>
         <div
           className={classNames(pageBoxCss.contentWrapper)}

src/pages/_components/pill-button-group/index.tsx

@@ -0,0 +1,61 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import React from 'react';
+import pillButtonCss from './styles.less';
+
+type Option = {
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+};
+
+type Props = {
+  value?: string | number;
+  onChange?: (value: string | number | undefined) => void;
+  options: Option[];
+  disabled?: boolean;
+  variant?: 'filled' | 'outlined' | 'solid';
+};
+
+const PillButtonGroup: React.FC<Props> = ({
+  value,
+  onChange,
+  options,
+  disabled,
+  variant = 'outlined'
+}) => {
+  return (
+    <div className={pillButtonCss['wrapper']}>
+      {options.map((item) => {
+        const active = value === item.value;
+
+        return (
+          <AutoTooltip
+            ghost
+            title={item.label}
+            key={item.value}
+            maxWidth={'100%'}
+          >
+            <span
+              className={`${pillButtonCss['pill-item']} ${active ? pillButtonCss['active'] : ''}`}
+              key={item.value}
+              color="default"
+              onClick={() => {
+                if (item.value !== value) {
+                  onChange?.(item.value);
+                }
+                if (item.value === value) {
+                  onChange?.(undefined);
+                }
+              }}
+            >
+              {item.icon}
+              {item.label}
+            </span>
+          </AutoTooltip>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PillButtonGroup;

src/pages/_components/pill-button-group/styles.less

@@ -0,0 +1,31 @@
+.pill-item {
+  height: 28px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  border-radius: var(--ant-border-radius);
+  background-color: var(--ant-color-fill-tertiary);
+  color: var(--ant-color-text-secondary);
+  padding: 0 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &.active {
+    background-color: var(--ant-color-fill);
+    color: var(--ant-color-text);
+    font-weight: 500;
+  }
+
+  &:not(.active):hover {
+    background-color: var(--ant-color-fill-secondary);
+  }
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+  align-items: center;
+}

src/pages/_components/styles/page-box.less

@@ -18,7 +18,7 @@
     }
 
     .ant-pro-page-container-children-container {
-      height: calc(100vh - 56px);
+      height: calc(100vh - 16px);
       display: flex;
       flex-direction: column;
       border: 1px solid var(--color-border-container);

src/pages/api-keys/index.tsx

@@ -151,6 +151,7 @@ const APIKeys: React.FC = () => {
             rowKey="id"
             onChange={handleTableChange}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/backends/components/backend-card.tsx

@@ -27,7 +27,7 @@ const StyledCard = styled(Card)`
   &:hover {
     .operations {
       background-color: var(--ant-color-fill-tertiary);
-      border-radius: var(--ant-border-radius);
+      border-radius: var(--ant-border-radius-lg);
     }
   }
 `;
@@ -40,7 +40,7 @@ const TagInner = styled(Tag)<{ height?: number }>`
   font-size: 18px;
   height: ${({ height }) => (height ? `${height}px` : '28px')};
   width: ${({ height }) => (height ? `${height}px` : '28px')};
-  border-radius: 6px;
+  border-radius: var(--ant-border-radius-lg);
   font-weight: 400;
 `;
 

src/pages/backends/forms/version-info.tsx

@@ -22,7 +22,7 @@ const ItemWrapper = styled.div`
   gap: 8px;
   width: 100%;
   border: 1px solid var(--ant-color-border);
-  border-radius: var(--ant-border-radius);
+  border-radius: var(--ant-border-radius-lg);
   padding: 12px 16px;
   &:hover {
     background-color: var(--ant-color-fill-tertiary);

src/pages/benchmark/hooks/use-benchmark-columns.tsx

@@ -38,7 +38,10 @@ const useBenchmarkColumns = (params: {
       ...columns,
       {
         title: (
-          <Typography.Text ellipsis={{ tooltip: true }}>
+          <Typography.Text
+            ellipsis={{ tooltip: true }}
+            style={{ color: 'var(--color-text-table-header)' }}
+          >
             {intl.formatMessage({ id: 'common.table.operation' })}
           </Typography.Text>
         ),

src/pages/benchmark/hooks/use-column-settings.tsx

@@ -358,7 +358,10 @@ const useColumnSettings = (options: {
   const metadataColumns = [
     {
       title: (
-        <Typography.Text ellipsis={{ tooltip: true }}>
+        <Typography.Text
+          ellipsis={{ tooltip: true }}
+          style={{ color: 'var(--color-text-table-header)' }}
+        >
           {intl.formatMessage({ id: 'clusters.title' })}
         </Typography.Text>
       ),
@@ -371,7 +374,10 @@ const useColumnSettings = (options: {
     },
     {
       title: (
-        <Typography.Text ellipsis={{ tooltip: true }}>
+        <Typography.Text
+          ellipsis={{ tooltip: true }}
+          style={{ color: 'var(--color-text-table-header)' }}
+        >
           {intl.formatMessage({ id: 'benchmark.detail.modelName' })}
         </Typography.Text>
       ),
@@ -385,7 +391,10 @@ const useColumnSettings = (options: {
     },
     {
       title: (
-        <Typography.Text ellipsis={{ tooltip: true }}>
+        <Typography.Text
+          ellipsis={{ tooltip: true }}
+          style={{ color: 'var(--color-text-table-header)' }}
+        >
           {intl.formatMessage({ id: 'benchmark.form.profile' })}
         </Typography.Text>
       ),

src/pages/benchmark/index.tsx

@@ -255,6 +255,7 @@ const Benchmark: React.FC = () => {
             scroll={{ x: 1200 }}
             onChange={handleTableChange}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/cluster-management/clusters.tsx

@@ -396,6 +396,7 @@ const Clusters: React.FC = () => {
               ></NoResult>
             }
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/cluster-management/components/add-credential.tsx

@@ -6,24 +6,12 @@ import FormDrawer from '@/pages/_components/form-drawer';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
 import { ProviderType, ProviderValueMap } from '../config';
 import {
   CredentialFormData as FormData,
   CredentialListItem as ListItem
 } from '../config/types';
 
-const ExtraContent = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  position: absolute;
-  bottom: 6px;
-  right: 32px;
-  z-index: 1;
-  background: var(--ant-color-bg-container);
-  padding-inline: 8px;
-`;
 type AddModalProps = {
   title: string;
   action: PageActionType;

src/pages/cluster-management/components/worker-pools.tsx

@@ -156,6 +156,7 @@ const WorkerPools = () => {
         rowSelection={rowSelection}
         columns={columns}
         pagination={{
+          size: 'middle',
           showSizeChanger: true,
           pageSize: queryParams.perPage,
           current: queryParams.page,

src/pages/cluster-management/credentials.tsx

@@ -215,6 +215,7 @@ const Credentials: React.FC = () => {
             rowKey="id"
             onChange={handleTableChange}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -100,7 +100,9 @@ const useClusterColumns = (
         span: 3,
         render: (text: string, record: ClusterListItem) => (
           <>
-            <AutoTooltip ghost>{record.name}</AutoTooltip>
+            <AutoTooltip ghost>
+              <span className="text-primary">{record.name}</span>
+            </AutoTooltip>
             {record.is_default && (
               <Tooltip
                 title={intl.formatMessage({

src/pages/cluster-management/hooks/use-credential-columns.tsx

@@ -23,7 +23,7 @@ const useCredentialColumns = (
         sorter: tableSorter(1),
         render: (text: string) => (
           <AutoTooltip ghost minWidth={20}>
-            {text}
+            <span className="text-primary">{text}</span>
           </AutoTooltip>
         )
       },

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

@@ -25,7 +25,7 @@ const ActiveTable = () => {
       render: (text: any, record: any) => {
         return (
           <AutoTooltip ghost>
-            <span>
+            <span className="text-primary">
               {record.provider_name ? `${record.provider_name}/${text}` : text}
             </span>
           </AutoTooltip>

src/pages/dashboard/components/usage-inner/index.tsx

@@ -114,7 +114,7 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
         </Col>
         <Col xs={24} sm={24} md={24} lg={24} xl={8} style={{ margin: 0 }}>
           <div
-            style={{ margin: maxWidth < breakpoints.xl ? '26px 0' : '32px 0' }}
+            style={{ margin: maxWidth < breakpoints.xl ? '26px 0' : '29px 0' }}
           >
             <div className={FilterBarCss.usageTitleText}>
               {intl.formatMessage({ id: 'dashboard.topusers' })}

src/pages/llmodels/components/instance-cells/name-cell.tsx

@@ -19,6 +19,9 @@ export interface NameCellProps {
   modelData: any;
   defaultOpenId?: string;
   showWorkerInfo?: boolean;
+  styles?: {
+    label?: React.CSSProperties;
+  };
 }
 
 const calcTotalVram = (vram: Record<string, number>) => {
@@ -110,12 +113,15 @@ const NameCell: React.FC<NameCellProps> = ({
   record,
   modelData,
   defaultOpenId,
-  showWorkerInfo = true
+  showWorkerInfo = true,
+  styles
 }) => {
   return (
     <span className="flex-center instance-name">
       <AutoTooltip title={record.name} ghost>
-        <span className="m-r-5">{record.name}</span>
+        <span className="m-r-5" style={styles?.label}>
+          {record.name}
+        </span>
       </AutoTooltip>
       {!!record.worker_id && showWorkerInfo && (
         <WorkerInfo

src/pages/llmodels/components/instance/instance-item.tsx

@@ -31,7 +31,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
   return (
     <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
       <RowChildren>
-        <Row style={{ width: '100%' }} align="middle">
+        <Row
+          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
+          align="middle"
+        >
           <Col
             span={6}
             style={{

src/pages/llmodels/components/left-filters.tsx

@@ -1,9 +1,8 @@
-import BaseSelect from '@/components/seal-form/base/select';
 import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
 import React from 'react';
-import { modelCategories } from '../config';
+import Filters from '../filters';
 import useFilterStatus from '../hooks/use-filter-status';
 
 interface LeftFiltersProps {
@@ -12,6 +11,7 @@ interface LeftFiltersProps {
   handleStatusChange: (value: string) => void;
   handleSearch: () => void;
   handleCategoryChange: (value: string) => void;
+  onFilterChange: (allValues: any) => void;
   clusterList: Global.BaseOption<number>[];
 }
 
@@ -22,6 +22,7 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
     handleStatusChange,
     handleSearch,
     handleCategoryChange,
+    onFilterChange,
     clusterList
   } = props;
   const { labelRender, optionRender, statusOptions } = useFilterStatus();
@@ -36,12 +37,19 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
           ></SearchOutlined>
         }
         placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-        style={{ width: 200 }}
+        style={{ width: 400 }}
         size="large"
         allowClear
+        suffix={
+          <Filters
+            clusterList={clusterList}
+            onValuesChange={onFilterChange}
+          ></Filters>
+        }
         onChange={handleNameChange}
       ></Input>
-      <BaseSelect
+
+      {/* <BaseSelect
         allowClear
         showSearch={false}
         placeholder={intl.formatMessage({
@@ -76,7 +84,7 @@ const LeftFilters: React.FC<LeftFiltersProps> = (props) => {
         labelRender={labelRender}
         options={statusOptions}
         onChange={handleStatusChange}
-      ></BaseSelect>
+      ></BaseSelect> */}
       <Button
         type="text"
         style={{ color: 'var(--ant-color-text-tertiary)' }}

src/pages/llmodels/components/table-list.tsx

@@ -564,6 +564,7 @@ const Models: React.FC<ModelsProps> = ({
               handleCategoryChange={handleCategoryChange}
               handleStatusChange={onStatusChange}
               handleSearch={handleSearch}
+              onFilterChange={onFilterChange}
               clusterList={clusterList}
             ></LeftFilters>
           }

src/pages/llmodels/filters/index.tsx

@@ -1,5 +1,6 @@
 import BaseSelect from '@/components/seal-form/base/select';
 import FilterForm from '@/pages/_components/filter-form';
+import PillButtonGroup from '@/pages/_components/pill-button-group';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import styled from 'styled-components';
@@ -9,7 +10,14 @@ import useFilterStatus from '../hooks/use-filter-status';
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  // gap: 16px;
+`;
+const Label = styled.span`
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  margin-block: 16px;
+  color: var(--ant-color-text-tertiary);
 `;
 
 interface FilterFormContentProps {
@@ -32,23 +40,23 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
 
   return (
     <FilterForm
+      width={430}
       onValuesChange={handleOnValuesChange}
       initialValues={initialValues}
     >
       <Content>
-        <Form.Item name="categories" noStyle>
-          <BaseSelect
-            allowClear
-            showSearch={false}
-            placeholder={intl.formatMessage({
-              id: 'models.filter.category'
-            })}
-            size="large"
-            maxTagCount={1}
-            options={modelCategories.filter((item) => item.value)}
-          ></BaseSelect>
-        </Form.Item>
-        <Form.Item name="cluster_id" noStyle>
+        <Label style={{ marginTop: 0 }}>
+          {intl.formatMessage({
+            id: 'clusters.filterBy.cluster'
+          })}
+        </Label>
+        <Form.Item
+          noStyle
+          name="cluster_id"
+          label={intl.formatMessage({
+            id: 'clusters.filterBy.cluster'
+          })}
+        >
           <BaseSelect
             allowClear
             showSearch={false}
@@ -60,8 +68,44 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
             options={clusterList}
           ></BaseSelect>
         </Form.Item>
-        <Form.Item name="state" noStyle>
-          <BaseSelect
+        <Label>
+          {intl.formatMessage({
+            id: 'models.filter.category'
+          })}
+        </Label>
+        <Form.Item
+          noStyle
+          name="categories"
+          label={intl.formatMessage({
+            id: 'models.filter.category'
+          })}
+        >
+          <PillButtonGroup
+            allowClear
+            showSearch={false}
+            placeholder={intl.formatMessage({
+              id: 'models.filter.category'
+            })}
+            size="large"
+            maxTagCount={1}
+            variant="filled"
+            options={modelCategories.filter((item) => item.value)}
+          ></PillButtonGroup>
+        </Form.Item>
+
+        <Label>
+          {intl.formatMessage({
+            id: 'common.filter.status'
+          })}
+        </Label>
+        <Form.Item
+          noStyle
+          name="state"
+          label={intl.formatMessage({
+            id: 'common.filter.status'
+          })}
+        >
+          <PillButtonGroup
             allowClear
             showSearch={false}
             placeholder={intl.formatMessage({
@@ -72,7 +116,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = ({
             optionRender={optionRender}
             labelRender={labelRender}
             options={statusOptions}
-          ></BaseSelect>
+          ></PillButtonGroup>
         </Form.Item>
       </Content>
     </FilterForm>

src/pages/llmodels/hooks/use-filter-status.tsx

@@ -26,13 +26,15 @@ const useFilterStatus = (options?: {
     {
       value: MyModelsStatusValueMap.Active,
       color: 'var(--ant-color-success)',
+      icon: <Dot color="var(--ant-color-success)"></Dot>,
       label: intl.formatMessage({
         id: 'models.mymodels.status.active'
       })
     },
     {
       value: MyModelsStatusValueMap.Inactive,
-      color: 'var(--ant-color-fill)',
+      color: 'var(--ant-color-fill-secondary)',
+      icon: <Dot color="var(--ant-color-fill-secondary)"></Dot>,
       label: intl.formatMessage({
         id: 'models.mymodels.status.inactive'
       })
@@ -40,6 +42,7 @@ const useFilterStatus = (options?: {
     {
       value: MyModelsStatusValueMap.Degrade,
       color: 'var(--ant-color-warning)',
+      icon: <Dot color="var(--ant-color-warning)"></Dot>,
       label: intl.formatMessage({
         id: 'models.mymodels.status.degrade'
       })

src/pages/llmodels/hooks/use-models-columns.tsx

@@ -28,6 +28,20 @@ interface ActionItem {
   };
 }
 
+const Dot = ({ color }: { color: string }) => {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '50%',
+        height: 8,
+        width: 8,
+        display: 'flex'
+      }}
+    ></span>
+  );
+};
+
 const ActionList: ActionItem[] = [
   {
     label: 'common.button.edit',
@@ -119,6 +133,21 @@ const useModelsColumns = ({
     });
   });
 
+  const getColor = (record: ListItem) => {
+    if (!record.replicas && !record.ready_replicas) {
+      return 'var(--ant-color-fill-secondary)';
+    }
+
+    if (record.replicas > 0 && !record.ready_replicas) {
+      return 'var(--ant-color-warning)';
+    }
+
+    if (record.ready_replicas > 0 && record.replicas > 0) {
+      return 'var(--ant-color-success)';
+    }
+    return 'var(--ant-color-warning)';
+  };
+
   return useMemo(() => {
     return [
       {
@@ -130,7 +159,7 @@ const useModelsColumns = ({
         render: (text: string, record: ListItem) => (
           <span className="flex-center" style={{ maxWidth: '100%' }}>
             <AutoTooltip ghost>
-              <span>{text}</span>
+              <span className="text-primary font-400">{text}</span>
             </AutoTooltip>
             <ModelTag categoryKey={record.categories?.[0] || ''} />
           </span>
@@ -171,9 +200,7 @@ const useModelsColumns = ({
               { api: `${window.location.origin}/${OPENAI_COMPATIBLE}` }
             )}
           >
-            <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
-              {intl.formatMessage({ id: 'models.form.replicas' })}
-            </span>
+            <span>{intl.formatMessage({ id: 'models.form.replicas' })}</span>
             <QuestionCircleOutlined className="m-l-5" />
           </Tooltip>
         ),
@@ -187,7 +214,16 @@ const useModelsColumns = ({
           title: intl.formatMessage({ id: 'models.table.replicas.edit' })
         },
         render: (text: number, record: ListItem) => (
-          <span style={{ minWidth: '23px' }}>
+          <span
+            style={{
+              minWidth: '23px',
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 8,
+              color: 'var(--ant-color-text)'
+            }}
+          >
+            <Dot color={getColor(record)}></Dot>
             {record.ready_replicas} / {record.replicas}
           </span>
         )

src/pages/llmodels/instance-view/index.tsx

@@ -165,6 +165,7 @@ const InstanceView = forwardRef((props, ref) => {
             columns={columns}
             scroll={{ x: 900 }}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/llmodels/instance-view/use-instance-columns.tsx

@@ -65,7 +65,7 @@ const WorkerInfoContent: React.FC<NameCellProps> = ({ record, modelData }) => {
   );
 };
 
-const useProviderColumns = (options: {
+const useInstancesColumns = (options: {
   workerList: workerListItem[];
   clusterList: Global.BaseOption<
     number,
@@ -112,6 +112,11 @@ const useProviderColumns = (options: {
                 backend: record.backend,
                 backend_version: record.backend_version
               }}
+              styles={{
+                label: {
+                  color: 'var(--ant-color-text)'
+                }
+              }}
             ></NameCell>
             <div className="flex-center">
               <ThunderboltFilled
@@ -213,4 +218,4 @@ const useProviderColumns = (options: {
   }, [handleSelect, onCellClick, workerList, clusterList]);
 };
 
-export default useProviderColumns;
+export default useInstancesColumns;

src/pages/llmodels/style/catalog-item.less

@@ -7,7 +7,7 @@
   justify-content: space-between;
   align-items: flex-start;
   border: 1px solid var(--ant-color-border);
-  border-radius: var(--border-radius-base);
+  border-radius: var(--ant-border-radius-lg);
   cursor: pointer;
   width: 100%;
 

src/pages/maas-provider/hooks/use-provider-columns.tsx

@@ -38,7 +38,7 @@ const useProviderColumns = (
         render: (text: string, record: MaasProviderItem) => (
           <>
             <AutoTooltip ghost title={text}>
-              {text}
+              <span className="text-primary">{text}</span>
             </AutoTooltip>
             {record.builtin && (
               <Tag color="blue" style={{ marginLeft: 8 }}>

src/pages/maas-provider/index.tsx

@@ -174,6 +174,7 @@ const MaasProvider: React.FC = () => {
             columns={columns}
             scroll={{ x: 900 }}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/model-routes/components/route-targets.tsx

@@ -75,7 +75,10 @@ const RouteItem: React.FC<TargetItemProps> = ({
   return (
     <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
       <RowChildren>
-        <Row gutter={16} style={{ width: '100%' }}>
+        <Row
+          gutter={16}
+          style={{ width: '100%', color: 'var(--ant-color-text-secondary)' }}
+        >
           <Col span={5}>
             <CellContent
               style={{

src/pages/model-routes/hooks/use-routes-columns.tsx

@@ -35,7 +35,7 @@ const useAccessColumns = (
         render: (text: string, record: RouteItem) => (
           <span className="flex-center" style={{ maxWidth: '100%' }}>
             <AutoTooltip ghost title={text}>
-              <span className="m-r-5">{text}</span>
+              <span className="m-r-5 text-primary">{text}</span>
             </AutoTooltip>
             <ModelTag categoryKey={record.categories?.[0]}></ModelTag>
           </span>

src/pages/model-routes/index.tsx

@@ -333,6 +333,7 @@ const ModelRoutes: React.FC = () => {
               ></NoResult>
             }
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/playground/speech/index.tsx

@@ -223,6 +223,7 @@ const Playground: React.FC = () => {
           key="view-code-buttons"
         ></ViewCodeButtons>
       }
+      styles={{ containerWrapper: { padding: 0 } }}
       className={classNames('playground-container', {
         compare: activeKey === 'compare',
         chat: activeKey !== 'compare'

src/pages/playground/style/ground-llm.less

@@ -1,4 +1,4 @@
-@HEADER_HEIGHT: 56px;
+@HEADER_HEIGHT: 0px;
 
 .ground-left-wrapper {
   display: flex;
@@ -11,7 +11,7 @@
     position: relative;
     height: calc(
       100vh - @HEADER_HEIGHT - var(--page-content-padding) -
-        var(--page-header-height)
+        var(--page-content-padding) - var(--page-header-height)
     );
     width: calc(100% - 390px);
 

src/pages/playground/style/params-container.module.less

@@ -1,4 +1,4 @@
-@HEADER_HEIGHT: 56px;
+@HEADER_HEIGHT: 0px;
 
 .wrapper {
   position: relative;
@@ -22,7 +22,7 @@
     width: 390px;
     padding-inline: 24px;
     flex: 1;
-    overflow-y: auto;
+    overflow-y: hidden;
   }
 
   &.collapsed {

src/pages/playground/style/play-ground.less

@@ -1,4 +1,4 @@
-@HEADER_HEIGHT: 48px;
+@HEADER_HEIGHT: 0px;
 
 .play-ground {
   display: flex;

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

@@ -337,7 +337,8 @@ const ModelFiles = () => {
               current: queryParams.page,
               total: dataSource.total,
               hideOnSinglePage: queryParams.perPage === 10,
-              onChange: handlePageChange
+              onChange: handlePageChange,
+              size: 'middle'
             }}
           ></Table>
         </ConfigProvider>

src/pages/resources/components/worker-detail-content.tsx

@@ -107,6 +107,7 @@ const WorkerDetailContent: React.FC<{ worker_id: number | undefined }> = ({
           rowKey="id"
           onChange={handleTableChange}
           pagination={{
+            size: 'middle',
             showSizeChanger: true,
             pageSize: queryParams.perPage,
             current: queryParams.page,

src/pages/resources/components/workers.tsx

@@ -290,6 +290,7 @@ const Workers = () => {
             onChange={handleTableChange}
             rowSelection={rowSelection}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,

src/pages/resources/hooks/use-files-columns.tsx

@@ -237,7 +237,9 @@ const ResolvedPathColumn = (props: { record: ListItem }) => {
               <TooltipTitle path={record.resolved_paths?.[0]}></TooltipTitle>
             }
           >
-            <span>{getResolvedPath(record.resolved_paths)}</span>
+            <span className="text-primary">
+              {getResolvedPath(record.resolved_paths)}
+            </span>
           </AutoTooltip>
         </TextWrapper>
         <RenderParts record={record}></RenderParts>
@@ -273,7 +275,11 @@ const useFilesColumns = (props: {
           const modelInfo = getModelInfo(record);
           const { source } = modelInfo;
           return (
-            <TextWrapper style={{ paddingRight: 8 }}>
+            <TextWrapper
+              style={{
+                paddingRight: 8
+              }}
+            >
               <AutoTooltip ghost title={source}>
                 {source}
               </AutoTooltip>

src/pages/resources/hooks/use-gpu-columns.tsx

@@ -55,7 +55,7 @@ const useGPUColumns = (props: {
         sorter: tableSorter(1),
         render: (text: string, record: GPUDeviceItem) => (
           <AutoTooltip ghost maxWidth={240}>
-            {text}
+            <span className="text-primary">{text}</span>
           </AutoTooltip>
         )
       },

src/pages/resources/hooks/use-worker-columns.tsx

@@ -251,7 +251,7 @@ const useWorkerColumns = ({
 
   const renderIP = (text: string, record: ListItem) => {
     if (record.advertise_address === record.ip) {
-      return record.ip;
+      return <span className="text-primary">{record.ip}</span>;
     }
 
     if (
@@ -262,15 +262,19 @@ const useWorkerColumns = ({
       return (
         <span className={workerCss.ipWrapper}>
           <span className="item">
-            <span>{record.ip}</span>
+            <span className="text-primary">{record.ip}</span>
             <span className="label">{`(${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`}</span>
-            <span> {record.advertise_address}</span>
+            <span className="text-primary">{record.advertise_address}</span>
             <span className="label">{`(${intl.formatMessage({ id: 'clusters.table.ip.external' })})`}</span>
           </span>
         </span>
       );
     }
-    return record.ip || record.advertise_address || '';
+    return (
+      <span className="text-primary">
+        {record.ip || record.advertise_address || ''}
+      </span>
+    );
   };
 
   const setActions = (row: ListItem) => {

src/pages/users/hooks/use-users-columns.tsx

@@ -72,7 +72,7 @@ const useUsersColumns = ({
         sorter: tableSorter(1),
         render: (text: string, record: ListItem) => (
           <AutoTooltip ghost style={{ maxWidth: 400 }}>
-            {text}
+            <span className="text-primary">{text}</span>
           </AutoTooltip>
         )
       },

src/pages/users/index.tsx

@@ -199,6 +199,7 @@ const Users: React.FC = () => {
             rowKey="id"
             onChange={handleTableChange}
             pagination={{
+              size: 'middle',
               showSizeChanger: true,
               pageSize: queryParams.perPage,
               current: queryParams.page,