chore: replace components with core-ui, upgrade eslint

src/layouts/error-boundary.tsx

@@ -2,7 +2,6 @@ import type { ErrorInfo } from 'react';
 import React from 'react';
 import ErrorResult from './error-result';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 class ErrorBoundary extends React.Component<
   { children?: React.ReactNode },
   { hasError: boolean; errorInfo: string }
@@ -15,7 +14,7 @@ class ErrorBoundary extends React.Component<
 
   componentDidCatch(error: any, errorInfo: ErrorInfo) {
     // You can also log the error to an error reporting service
-    // eslint-disable-next-line no-console
+
     console.log(error, errorInfo);
   }
 

src/layouts/extraRender.tsx

@@ -1,6 +1,4 @@
 import { GPUStackVersionAtom, UpdateCheckAtom } from '@/atoms/user';
-import DropDownActions from '@/components/drop-down-actions';
-import IconFont from '@/components/icon-font';
 import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
 import useBodyScroll from '@/hooks/use-body-scroll';
@@ -12,6 +10,7 @@ import {
   HomeOutlined,
   ReadOutlined
 } from '@ant-design/icons';
+import { DropdownActions, IconFont } from '@gpustack/core-ui';
 import { history, useIntl, useNavigate } from '@umijs/max';
 import { Avatar, Button, Divider, Modal } from 'antd';
 import { useAtom } from 'jotai';
@@ -292,7 +291,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
           </NewLabel>
         )}
       </div>
-      <DropDownActions menu={{ ...helpMenu }} popupRender={helpPopupRender}>
+      <DropdownActions menu={{ ...helpMenu }} popupRender={helpPopupRender}>
         <IconWrapper>
           <IconFont
             type="icon-help"
@@ -300,8 +299,8 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
             style={{ color: 'var(--ant-color-text-tertiary)' }}
           />
         </IconWrapper>
-      </DropDownActions>
-      <DropDownActions menu={{ ...userMenu }} popupRender={userPopupRender}>
+      </DropdownActions>
+      <DropdownActions menu={{ ...userMenu }} popupRender={userPopupRender}>
         <IconWrapper>
           <Avatar
             size={24}
@@ -310,7 +309,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
             icon={<IconFont type="icon-user-filled" className="font-size-24" />}
           />
         </IconWrapper>
-      </DropDownActions>
+      </DropdownActions>
     </Wrapper>
   );
 };

src/layouts/index.tsx

@@ -1,21 +1,30 @@
 import { routeCacheAtom, setRouteCache } from '@/atoms/route-cache';
 import { userAtom } from '@/atoms/user';
 import DarkMask from '@/components/dark-mask';
-import IconFont from '@/components/icon-font';
 import routeCachekey from '@/config/route-cachekey';
-import { DEFAULT_ENTER_PAGE } from '@/config/settings';
+import { DEFAULT_ENTER_PAGE, GPUSTACK_API_BASE_URL } from '@/config/settings';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useUserSettings from '@/hooks/use-user-settings';
 import useAddResource from '@/pages/dashboard/hooks/use-add-resource';
 import { logout } from '@/pages/login/apis';
+import {
+  readColumnSettings,
+  readState,
+  writeColumnSettings,
+  writeState
+} from '@/utils/localstore';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
 import { ProLayout } from '@ant-design/pro-components';
+import { CoreUIProvider, IconFont } from '@gpustack/core-ui';
 import {
   Outlet,
   dropByCacheKey,
+  getAllLocales,
   history,
   matchRoutes,
+  request,
+  setLocale,
   useAppData,
   useIntl,
   useLocation,
@@ -23,7 +32,6 @@ import {
   type IRoute
 } from '@umijs/max';
 import { Button, ConfigProvider, Modal, theme } from 'antd';
-import 'driver.js/dist/driver.css';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect, useMemo, useRef } from 'react';
@@ -73,7 +81,7 @@ const filterRoutes = (
     return [];
   }
 
-  let newRoutes: NewRoute[] = [];
+  const newRoutes: NewRoute[] = [];
   for (const route of routes) {
     const newRoute = { ...route };
     if (filterFn(route)) {
@@ -158,7 +166,7 @@ export default (props: any) => {
   };
 
   const dropRouteCache = (pathname: string) => {
-    for (let key of routeCache.keys()) {
+    for (const key of routeCache.keys()) {
       if (key !== pathname && !routeCache.get(key) && routeCachekey[key]) {
         dropByCacheKey(key);
         routeCache.delete(key);
@@ -329,8 +337,6 @@ export default (props: any) => {
     });
   };
 
-  console.log('userConfig==========title', userConfig.title);
-
   return (
     <ConfigProvider
       componentSize="large"
@@ -352,60 +358,83 @@ export default (props: any) => {
         }
       }}
     >
-      <DarkMask></DarkMask>
-      <ProLayout
-        fixSiderbar
-        fixedHeader={false}
-        headerRender={false}
-        breadcrumbRender={false}
-        route={route}
-        location={location}
-        title={userConfig.title}
-        navTheme={userSettings.theme}
-        layout="side"
-        contentStyle={{
-          paddingBlock: 0,
-          paddingInline: 0
+      <CoreUIProvider
+        config={{
+          apiBaseUrl: GPUSTACK_API_BASE_URL,
+          theme: userSettings.theme,
+          iconUrl: '//at.alicdn.com/t/c/font_4613488_8fi68fmt1th.js',
+          isDarkTheme: userSettings.isDarkTheme
         }}
-        openKeys={false}
-        disableMobile={true}
-        siderWidth={220}
-        onCollapse={onCollapse}
-        onMenuHeaderClick={onMenuHeaderClick}
-        menuHeaderRender={renderMenuHeader}
-        collapsed={userSettings.collapsed}
-        onPageChange={onPageChange}
-        formatMessage={formatMessage}
-        menu={{
-          locale: true,
-          type: 'group'
+        i18n={intl}
+        locale={{
+          getAllLocales: getAllLocales,
+          setLocale: setLocale
+        }}
+        services={{
+          request: request
+        }}
+        localStore={{
+          readColumnSettings,
+          writeColumnSettings,
+          readState,
+          writeState
         }}
-        splitMenus={true}
-        logo={userSettings.collapsed ? <SLogoIcon /> : <LogoIcon />}
-        menuContentRender={menuContentRender}
-        {...runtimeConfig}
-        ErrorBoundary={ErrorBoundary}
       >
-        <Exception
-          route={matchedRoute}
-          notFound={runtimeConfig?.notFound}
-          noFound={runtimeConfig?.noFound}
-          unAccessible={runtimeConfig?.unAccessible}
-          noAccessible={runtimeConfig?.noAccessible}
+        <DarkMask></DarkMask>
+        <ProLayout
+          fixSiderbar
+          fixedHeader={false}
+          headerRender={false}
+          breadcrumbRender={false}
+          route={route}
+          location={location}
+          title={userConfig.title}
+          navTheme={userSettings.theme}
+          layout="side"
+          contentStyle={{
+            paddingBlock: 0,
+            paddingInline: 0
+          }}
+          openKeys={false}
+          disableMobile={true}
+          siderWidth={220}
+          onCollapse={onCollapse}
+          onMenuHeaderClick={onMenuHeaderClick}
+          menuHeaderRender={renderMenuHeader}
+          collapsed={userSettings.collapsed}
+          onPageChange={onPageChange}
+          formatMessage={formatMessage}
+          menu={{
+            locale: true,
+            type: 'group'
+          }}
+          splitMenus={true}
+          logo={userSettings.collapsed ? <SLogoIcon /> : <LogoIcon />}
+          menuContentRender={menuContentRender}
+          {...runtimeConfig}
+          ErrorBoundary={ErrorBoundary}
         >
-          {isNoContainerPage ? (
-            <Outlet />
-          ) : (
-            <PageContainerInner>
-              <div>
-                <Outlet />
-              </div>
-            </PageContainerInner>
-          )}
-        </Exception>
-        {NoResourceModal}
-        {contextHolder}
-      </ProLayout>
+          <Exception
+            route={matchedRoute}
+            notFound={runtimeConfig?.notFound}
+            noFound={runtimeConfig?.noFound}
+            unAccessible={runtimeConfig?.unAccessible}
+            noAccessible={runtimeConfig?.noAccessible}
+          >
+            {isNoContainerPage ? (
+              <Outlet />
+            ) : (
+              <PageContainerInner>
+                <div>
+                  <Outlet />
+                </div>
+              </PageContainerInner>
+            )}
+          </Exception>
+          {NoResourceModal}
+          {contextHolder}
+        </ProLayout>
+      </CoreUIProvider>
     </ConfigProvider>
   );
 };

src/layouts/sider-menu.tsx

@@ -1,5 +1,5 @@
-import IconFont from '@/components/icon-font';
 import { CaretDownOutlined } from '@ant-design/icons';
+import { IconFont } from '@gpustack/core-ui';
 import { Link, useLocation } from '@umijs/max';
 import { Tooltip } from 'antd';
 import { createStyles } from 'antd-style';