chore: remove antd

package.json

@@ -28,16 +28,13 @@
     "prepare": "husky || true"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.1",
-    "@ant-design/pro-components": "^2.4.14",
     "@arco-design/web-react": "^2.62.0",
     "@pansy/react-amap": "^2.20.1",
     "@pansy/react-mapbox-gl": "^1.8.1",
     "@rcuse/core": "^0.16.0",
     "@rcuse/integrations": "^0.16.0",
     "@tanstack/react-query": "^5.35.1",
     "@unocss/reset": "^0.60.0",
-    "antd": "^5.4.7",
     "dayjs": "^1.11.11",
     "mapbox-gl": "^3.3.0",
     "nprogress": "^0.2.0",

src/App.tsx

@@ -1,14 +1,14 @@
 import { BrowserRouter } from 'react-router-dom';
 import Router from '@/routers';
-import 'antd/dist/reset.css';
-import './global.less';
+import { ConfigProvider } from '@arco-design/web-react';
+import zhCN from '@arco-design/web-react/es/locale/zh-CN';
 
-function App() {
+export const App = () => {
   return (
-    <BrowserRouter>
-      <Router />
-    </BrowserRouter>
+    <ConfigProvider locale={zhCN}>
+      <BrowserRouter>
+        <Router />
+      </BrowserRouter>
+    </ConfigProvider>
   )
 }
-
-export default App

src/components/SiteContext/index.tsx

@@ -1,14 +1,11 @@
 import { createContext } from 'react';
-import type { DirectionType } from 'antd/es/config-provider';
 
 export interface SiteContextProps {
   isMobile: boolean;
-  direction: DirectionType;
 }
 
 const SiteContext = createContext<SiteContextProps>({
   isMobile: false,
-  direction: 'ltr',
 });
 
 export default SiteContext;

src/layouts/BasicLayout/index.tsx

@@ -1,92 +1,11 @@
-import React from 'react';
-import { Dropdown } from 'antd';
-import {
-  SmileFilled,
-  LogoutOutlined,
-} from '@ant-design/icons';
-import { useOutlet, useLocation, useNavigate } from 'react-router-dom';
-import { ProLayout } from '@ant-design/pro-components';
+import { useOutlet } from 'react-router-dom';
 
-const routes =  [
-  {
-    path: '/dashboard',
-    name: '欢迎',
-    icon: <SmileFilled />,
-  },
-  {
-    path: '/map',
-    name: '地图',
-    icon: <SmileFilled />,
-  },
-];
-
-export const BasicLayout: React.FC = () => {
+export const BasicLayout = () => {
   const outlet = useOutlet();
-  const location = useLocation();
-  const navigate = useNavigate();
 
   return (
-    <ProLayout
-      path="/"
-      title="Vite React Starter"
-      logo="/vite.svg"
-      bgLayoutImgList={[
-        {
-          src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
-          left: 85,
-          bottom: 100,
-          height: '303px',
-        },
-        {
-          src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
-          bottom: -68,
-          right: -45,
-          height: '303px',
-        },
-        {
-          src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
-          bottom: 0,
-          left: 0,
-          width: '331px',
-        },
-      ]}
-      location={location}
-      siderMenuType="group"
-      fixSiderbar={true}
-      layout="mix"
-      avatarProps={{
-        src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
-        size: 'small',
-        title: '七妮妮',
-        render: (_: any, dom: React.ReactNode) => {
-          return (
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    key: 'logout',
-                    icon: <LogoutOutlined />,
-                    label: '退出登录',
-                  },
-                ],
-              }}
-            >
-              {dom}
-            </Dropdown>
-          );
-        },
-      }}
-      menuProps={{
-        onClick: (info: any) => {
-          navigate(info.key);
-        }
-      }}
-      route={{
-        path: '/',
-        routes,
-      }}
-    >
+    <>
       {outlet}
-    </ProLayout>
+    </>
   )
 }

src/layouts/GlobalLayout/index.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { App, ConfigProvider } from 'antd';
+
 import { useOutlet } from 'react-router-dom';
 
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
 
   return (
-    <ConfigProvider>
-      <App>
-        {outlet}
-      </App>
-    </ConfigProvider>
+    <>
+      {outlet}
+    </>
   )
 }
 

src/layouts/index.tsx

@@ -1,13 +0,0 @@
-// import { theme as antTheme  } from 'antd';
-// import { ThemeName } from '@/components/ThemeSwitch';
-
-// const getAlgorithm = (themes: ThemeName[] = []) =>
-//   themes.map((theme) => {
-//     if (theme === 'dark') {
-//       return antTheme.darkAlgorithm;
-//     }
-//     if (theme === 'compact') {
-//       return antTheme.compactAlgorithm;
-//     }
-//     return antTheme.defaultAlgorithm;
-//   });

src/main.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { App } from './App.tsx'
 import '@unocss/reset/tailwind.css'
 import 'nprogress/nprogress.css'
 import 'uno.css'

src/pages/login/index.tsx

@@ -1,165 +1,10 @@
-import React, { useState } from 'react';
-import { Tabs, Divider, Space, message } from 'antd';
-import {
-  AlipayOutlined,
-  UserOutlined,
-  LockOutlined,
-  MobileOutlined,
-  WeiboOutlined,
-  WechatOutlined,
-} from '@ant-design/icons';
-import {
-  LoginFormPage,
-  ProFormText,
-  ProFormCaptcha,
-  ProFormCheckbox,
-} from '@ant-design/pro-components';
-import { OtherLogin } from './components/OtherLogin';
-
-type LoginType = 'phone' | 'account';
-
-const Login: React.FC =  () => {
-  const [loginType, setLoginType] = useState<LoginType>('phone');
+import { Button } from '@arco-design/web-react'
 
+const Login = () => {
   return (
-    <LoginFormPage
-      backgroundImageUrl="https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png"
-      logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
-      title="Github"
-      subTitle="全球最大的代码托管平台"
-      style={{
-        height: '100vh',
-      }}
-      actions={
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column',
-          }}
-        >
-          <Divider plain>
-            <span
-              style={{ color: '#CCC', fontWeight: 'normal', fontSize: 14 }}
-            >
-              其他登录方式
-            </span>
-          </Divider>
-          <Space align="center" size={24}>
-            <OtherLogin icon={<AlipayOutlined style={{ color: '#1677FF' }} />} />
-            <OtherLogin icon={<WechatOutlined style={{ color: '#FF6A10' }} />} />
-            <OtherLogin icon={<WeiboOutlined style={{ color: '#333333' }} />} />
-          </Space>
-        </div>
-      }
-    >
-      <Tabs
-        centered
-        activeKey={loginType}
-        onChange={(activeKey) => setLoginType(activeKey as LoginType)}
-        items={[
-          { key: 'account', label: '账号密码登录' },
-          { key: 'phone', label: '手机号登录' }
-        ]}
-      />
-      {loginType === 'account' && (
-        <>
-          <ProFormText
-            name="username"
-            fieldProps={{
-              size: 'large',
-              prefix: <UserOutlined className={'prefixIcon'} />,
-            }}
-            placeholder={'用户名: admin or user'}
-            rules={[
-              {
-                required: true,
-                message: '请输入用户名!',
-              },
-            ]}
-          />
-          <ProFormText.Password
-            name="password"
-            fieldProps={{
-              size: 'large',
-              prefix: <LockOutlined className={'prefixIcon'} />,
-            }}
-            placeholder={'密码: ant.design'}
-            rules={[
-              {
-                required: true,
-                message: '请输入密码！',
-              },
-            ]}
-          />
-        </>
-      )}
-      {loginType === 'phone' && (
-        <>
-          <ProFormText
-            fieldProps={{
-              size: 'large',
-              prefix: <MobileOutlined className={'prefixIcon'} />,
-            }}
-            name="mobile"
-            placeholder="手机号"
-            rules={[
-              {
-                required: true,
-                message: '请输入手机号！',
-              },
-              {
-                pattern: /^1\d{10}$/,
-                message: '手机号格式错误！',
-              },
-            ]}
-          />
-          <ProFormCaptcha
-            fieldProps={{
-              size: 'large',
-              prefix: <LockOutlined className={'prefixIcon'} />,
-            }}
-            captchaProps={{
-              size: 'large',
-            }}
-            placeholder="请输入验证码"
-            captchaTextRender={(timing, count) => {
-              if (timing) {
-                return `${count} ${'获取验证码'}`;
-              }
-              return '获取验证码';
-            }}
-            name="captcha"
-            rules={[
-              {
-                required: true,
-                message: '请输入验证码！',
-              },
-            ]}
-            onGetCaptcha={async () => {
-              message.success('获取验证码成功！验证码为：1234');
-            }}
-          />
-        </>
-      )}
-      <div
-        style={{
-          marginBlockEnd: 24,
-        }}
-      >
-        <ProFormCheckbox noStyle name="autoLogin">
-          自动登录
-        </ProFormCheckbox>
-        <a
-          style={{
-            float: 'right',
-          }}
-        >
-          忘记密码
-        </a>
-      </div>
-    </LoginFormPage>
+    <>
+    <Button type="primary" long>登录</Button>
+    </>
   )
 }
 

src/routers/LazyLoad.tsx

@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
-import { Spin } from 'antd';
+import { Spin } from '@arco-design/web-react'
 
 export const LazyLoad = (Comp: React.LazyExoticComponent<any>): React.ReactNode => {
   return (
     <Suspense
       fallback={
         <Spin
-          size="large"
           style={{
             display: "flex",
             alignItems: "center",