refactor(global): import alias @

src/components/AppBar.tsx

@@ -2,7 +2,7 @@ import { HeartOutlined, ScheduleOutlined, SearchOutlined, UserOutlined } from "@
 import { Button, Flex } from "antd";
 import { useNavigate } from "react-router";
 import styled from "styled-components";
-import { isRunningStandalone } from "../utils/front";
+import { isRunningStandalone } from "@/utils/front";
 
 const StyledContainer = styled.div`
   position: fixed;

src/components/BattleTable.tsx

@@ -1,12 +1,12 @@
-import type { BasePlayer } from "../types";
+import type { BasePlayer } from "@/types";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { calculate, getRoundTable } from "../utils/common";
+import { calculate, getRoundTable } from "@/utils/common";
 import { Button, Card, Divider, Flex, Table, Modal, Typography, Input } from "antd";
 import styled from "styled-components";
 import { cloneDeep } from "lodash";
 import { ClearOutlined, EditOutlined, ShareAltOutlined } from "@ant-design/icons";
 import { useLocation } from "react-router";
-import { MATCH_RESULT_MAP_KEY } from "../utils/constants";
+import { MATCH_RESULT_MAP_KEY } from "@/utils/constants";
 
 const StyledContainer = styled(Flex)`
   min-width: 300px;

src/components/BindKaiqiuAccount.tsx

@@ -1,5 +1,5 @@
 import { useRequest } from "ahooks";
-import { useAuthHeaders } from "../hooks/useAuthHeaders";
+import { useAuthHeaders } from "@/hooks/useAuthHeaders";
 import { Alert, App, Button, Drawer, Flex, Form, Input, Skeleton, Space, Spin, Typography } from "antd";
 import { ExportOutlined, LinkOutlined } from "@ant-design/icons";
 import { useCallback, useState } from "react";

src/components/CascaderProvinceCity.tsx

@@ -1,7 +1,7 @@
 import { Cascader } from "antd";
 import { useMemo } from "react";
 
-const provinceCityConfig = require('../private/city.json');
+const provinceCityConfig = require('@/private/city.json');
 
 interface Props {
   onChange?: (province?: string, city?: string) => void;

src/components/ClubEventList.tsx

@@ -1,5 +1,5 @@
 import { Button, Divider, Empty, Flex, Pagination, Skeleton, Space, Switch, Typography } from "antd";
-import type { IEventInfo } from "../types";
+import type { IEventInfo } from "@/types";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { EventCard } from "./EventCard";
 import { useRequest } from "ahooks";

src/components/ClubSearchTable.tsx

@@ -1,9 +1,9 @@
 import { useRequest } from "ahooks";
 import { Avatar, Button, Flex, Input, Radio, Space, Table } from "antd";
 import { useCallback, useRef, useState } from "react";
-import type { ClubInfo } from "../types";
+import type { ClubInfo } from "@/types";
 import { EyeOutlined, StarFilled, StarOutlined } from "@ant-design/icons";
-import { useClubStore } from "../store/useClubStore";
+import { useClubStore } from "@/store/useClubStore";
 import { CascaderProvinceCity } from "./CascaderProvinceCity";
 
 

src/components/ClubSummary.tsx

@@ -2,11 +2,11 @@ import { Avatar, Button, Drawer, Dropdown, Flex, Skeleton, Typography } from "an
 import { ChangeBackground } from "./ChangeBackground";
 import { useMemo, useState } from "react";
 import { useRequest } from "ahooks";
-import type { ClubDetail } from "../types";
+import type { ClubDetail } from "@/types";
-import { MapType, openWebMapRaw } from "../utils/front";
+import { MapType, openWebMapRaw } from "@/utils/front";
 import type { ItemType } from "antd/es/menu/interface";
 import { NotificationOutlined, PushpinOutlined, StarFilled, StarOutlined } from "@ant-design/icons";
-import { useClubStore } from "../store/useClubStore";
+import { useClubStore } from "@/store/useClubStore";
 
 interface Props {
   clubId: string;

src/components/EventCard.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Statistic, Typography } from "antd";
-import type { IEventInfo } from "../types";
+import type { IEventInfo } from "@/types";
 import dayjs from "dayjs";
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -8,10 +8,10 @@ import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 import type { TimerType } from "antd/lib/statistic/Timer";
 import { useLogto } from "@logto/react";
-import { useAuthHeaders } from "../hooks/useAuthHeaders";
+import { useAuthHeaders } from "@/hooks/useAuthHeaders";
 import { useRequest } from "ahooks";
-import { WebScoketContext } from "../context/WebsocketContext";
+import { WebScoketContext } from "@/context/WebsocketContext";
-import { getEventSubKey } from "../utils/common";
+import { getEventSubKey } from "@/utils/common";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

src/components/FavButton.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { useFavPlayerStore, type FavPlayer } from "../store/useFavPlayerStore";
+import { useFavPlayerStore, type FavPlayer } from "@/store/useFavPlayerStore";
 import styled from "styled-components";
 import { useRequest } from "ahooks";
 import { useLogto } from "@logto/react";
-import { useAuthHeaders } from "../hooks/useAuthHeaders";
+import { useAuthHeaders } from "@/hooks/useAuthHeaders";
 import { StarFilled, StarOutlined } from "@ant-design/icons";
 
 interface Props {

src/components/GamePanel.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { BasePlayer, Player } from "../types";
+import type { BasePlayer, Player } from "@/types";
 import { Tabs } from "antd";
 import { PlayerList } from "./PlayerList";
 import { GroupingPrediction } from "./GroupingPrediction";

src/components/GameSelector/GameSelector.tsx

@@ -2,14 +2,14 @@ import { Button, Drawer, Flex, Select } from 'antd';
 import type React from 'react';
 import { clubs } from './clubList';
 import { useCallback, useEffect, useState } from 'react';
-import { ClubEvenList } from '../ClubEventList';
+import { ClubEvenList } from '@/components/ClubEventList';
 import { SearchOutlined } from '@ant-design/icons';
-import { useClubStore } from '../../store/useClubStore';
+import { useClubStore } from '@/store/useClubStore';
-import { ClubSearchTable } from '../ClubSearchTable';
+import { ClubSearchTable } from '@/components/ClubSearchTable';
 import styled, { createGlobalStyle } from 'styled-components';
 import { useLocalStorageState } from 'ahooks';
-import { CLUB_SELECTOR_KEY } from '../../utils/constants';
+import { CLUB_SELECTOR_KEY } from '@/utils/constants';
-import { ClubSummary } from '../ClubSummary';
+import { ClubSummary } from '@/components/ClubSummary';
 
 interface Props {
 }

src/components/GameTable.tsx

@@ -1,5 +1,5 @@
 import { Button, Divider, Flex, Table as AntTable, Skeleton } from "antd";
-import type { GamesData } from "../types";
+import type { GamesData } from "@/types";
 import User from "./User";
 import { useMemo, useState } from "react";
 import { useRequest } from "ahooks";

src/components/GroupMember.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { Button, Card, Drawer, Table } from "antd";
-import type { BasePlayer } from "../types";
+import type { BasePlayer } from "@/types";
 import User from "./User";
 import BattleTable from "./BattleTable";
 import { ExpandOutlined } from "@ant-design/icons";

src/components/GroupingPrediction.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Flex, Form, InputNumber, Segmented, Space, Switch } from "antd";
 import { chunk } from 'lodash';
-import type { BasePlayer } from "../types";
+import type { BasePlayer } from "@/types";
 import { GroupMember } from "./GroupMember";
-import { sneckGroup } from "../utils/common";
+import { sneckGroup } from "@/utils/common";
 import { useLoaderData } from "react-router";
 import { SyncOutlined } from "@ant-design/icons";
 import { useRequest } from "ahooks";

src/components/Layout/AppBarLayout.tsx

@@ -1,11 +1,11 @@
 import { Outlet, useNavigation } from "react-router";
-import { HydrateFallback } from "../HydrateFallback";
+import { HydrateFallback } from "@/components/HydrateFallback";
-import { AppBar } from "../AppBar";
+import { AppBar } from "@/components/AppBar";
 import styled from "styled-components";
-import { WebScoketContext } from "../../context/WebsocketContext";
+import { WebScoketContext } from "@/context/WebsocketContext";
 import { Alert } from "antd";
 import { useEffect } from "react";
-import { initServiceWorker } from "../../utils/firebase-frontend";
+import { initServiceWorker } from "@/utils/firebase-frontend";
 
 const StyledContainer = styled.div`
   padding-bottom: 90px;

src/components/Layout/BaseLayout.tsx

@@ -1,6 +1,6 @@
 import { Outlet, useNavigation } from "react-router";
-import { HydrateFallback } from "../HydrateFallback";
+import { HydrateFallback } from "@/components/HydrateFallback";
-import { MenuButtons } from "../MenuButtons";
+import { MenuButtons } from "@/components/MenuButtons";
 
 export function BaseLayout() {
   const navigation = useNavigation();

src/components/NotificationPermissionContorl.tsx

@@ -1,5 +1,5 @@
 import { Button, Drawer, Flex, Form, Switch, Typography } from "antd";
-import { useNotificationControl } from "../hooks/useNotificationControl";
+import { useNotificationControl } from "@/hooks/useNotificationControl";
 import { useCallback, useState } from "react";
 
 const NotificationPermissionControl = () => {

src/components/PlayerList.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { Player } from "../types";
+import type { Player } from "@/types";
 import { Avatar, Table } from "antd";
 import User from "./User";
 

src/components/Tags.tsx

@@ -1,6 +1,6 @@
 import { useRequest } from "ahooks";
 import { Divider, Flex, Skeleton, Tag, Typography } from "antd";
-import { EType, type XCXTag } from "../types";
+import { EType, type XCXTag } from "@/types";
 import { useLoaderData } from "react-router";
 
 interface Props {

src/context/WebsocketContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import type { WsWebSendTopicPayload, WsWebSendTopics } from "../utils/common";
+import type { WsWebSendTopicPayload, WsWebSendTopics } from "@/utils/common";
 
 interface MessageSender {
   messageSender?: <T extends WsWebSendTopics>(topic: T, data: WsWebSendTopicPayload[T]) => void;

src/hooks/useAuthHeaders.tsx

@@ -1,6 +1,6 @@
 import { useLogto } from "@logto/react"
 import { useEffect, useState } from "react";
-import { LOGTO_RESOURCE } from "../utils/constants";
+import { LOGTO_RESOURCE } from "@/utils/constants";
 import { App, Button } from "antd";
 import useAutoLogin from "./useAutoLogin";
 

src/hooks/useHandlerServerMessage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
-import { ensureTopicData, fromServerMessage } from "../utils/common";
+import { ensureTopicData, fromServerMessage } from "@/utils/common";
-import { EVENT_WS_MESSAGE } from "../utils/constants";
+import { EVENT_WS_MESSAGE } from "@/utils/constants";
 import { App } from "antd";
 
 export const useServerMessageHandler = () => {

src/page/ClubEvents.tsx

@@ -1,7 +1,7 @@
 import { useLoaderData } from "react-router";
-import type { ClubDetail } from "../types";
+import type { ClubDetail } from "@/types";
-import { ClubEvenList } from "../components/ClubEventList";
+import { ClubEvenList } from "@/components/ClubEventList";
-import { ClubSummary } from "../components/ClubSummary";
+import { ClubSummary } from "@/components/ClubSummary";
 
 export const ClubEventsPage = () => {
   const { info } = useLoaderData<{

src/page/EventPage.tsx

@@ -1,6 +1,6 @@
 import { useLoaderData } from "react-router";
-import { GamePanel } from "../components/GamePanel";
+import { GamePanel } from "@/components/GamePanel";
-import type { BasePlayer, MatchInfo, MatchSummary, XCXMember } from "../types";
+import type { BasePlayer, MatchInfo, MatchSummary, XCXMember } from "@/types";
 import { Button, Typography } from "antd";
 import { useMemo } from "react";
 import { useTitle } from "ahooks";

src/page/FavPlayersPage.tsx

@@ -1,13 +1,13 @@
 import { Avatar, Button, Card, Divider, Flex, Image, Popconfirm, Radio, Segmented, Spin, Typography, App } from "antd";
-import { useFavPlayerStore, type FavPlayer } from "../store/useFavPlayerStore";
+import { useFavPlayerStore, type FavPlayer } from "@/store/useFavPlayerStore";
 import { useNavigate } from "react-router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLogto } from "@logto/react";
 import { DeleteOutlined, LoginOutlined, SyncOutlined, UploadOutlined } from "@ant-design/icons";
 import { useRequest } from "ahooks";
-import type { XCXProfile } from "../types";
+import type { XCXProfile } from "@/types";
-import useAutoLogin from "../hooks/useAutoLogin";
+import useAutoLogin from "@/hooks/useAutoLogin";
-import { useAuthHeaders } from "../hooks/useAuthHeaders";
+import { useAuthHeaders } from "@/hooks/useAuthHeaders";
 import styled from "styled-components";
 
 enum SortType {

src/page/FindUserPage.tsx

@@ -1,8 +1,8 @@
 import { useLocalStorageState, useRequest } from "ahooks";
 import { Input, Table, Spin, Typography, Flex } from "antd";
-import type { XCXFindUser, XCXFindUserResp } from "../types";
+import type { XCXFindUser, XCXFindUserResp } from "@/types";
-import User from "../components/User";
+import User from "@/components/User";
-import { SEX } from "../utils/front";
+import { SEX } from "@/utils/front";
 import dayjs from "dayjs";
 
 export function FindUserPage() {

src/page/ProfilePage.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useMemo } from "react";
 import { Link, useLoaderData, useNavigate } from "react-router";
 import { Avatar, Divider, Flex, Image, Typography } from "antd";
 import { useTitle } from "ahooks";
-import type { XCXProfile } from "../types/profile";
+import type { XCXProfile } from "@/types/profile";
-import User from "../components/User";
+import User from "@/components/User";
-import { ChangeBackground } from "../components/ChangeBackground";
+import { ChangeBackground } from "@/components/ChangeBackground";
-import UserTags from "../components/Tags";
+import UserTags from "@/components/Tags";
-import { GameTable } from "../components/GameTable";
+import { GameTable } from "@/components/GameTable";
-import { FavButton } from "../components/FavButton";
+import { FavButton } from "@/components/FavButton";
-import { useFavPlayerStore } from "../store/useFavPlayerStore";
+import { useFavPlayerStore } from "@/store/useFavPlayerStore";
 
 function Honor(props: { honors?: XCXProfile['honors'] }) {
   if (!props.honors?.length) return null;

src/page/UserCenter.tsx

@@ -3,13 +3,13 @@ import { useLogto, type IdTokenClaims } from "@logto/react";
 import { App, Avatar, Button, Divider, Flex, Typography } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
-import { AUTH_CALLBACK_URL, USER_CENTER_URL } from "../utils/front";
+import { AUTH_CALLBACK_URL, USER_CENTER_URL } from "@/utils/front";
-import useAutoLogin from "../hooks/useAutoLogin";
+import useAutoLogin from "@/hooks/useAutoLogin";
-import { LOGTO_DOMAIN } from "../utils/common";
+import { LOGTO_DOMAIN } from "@/utils/common";
-import { useAppVersion } from "../hooks/useAppVersion";
+import { useAppVersion } from "@/hooks/useAppVersion";
-import { BindKaiqiuAccount } from "../components/BindKaiqiuAccount";
+import { BindKaiqiuAccount } from "@/components/BindKaiqiuAccount";
-import { ChangeBackground } from "../components/ChangeBackground";
+import { ChangeBackground } from "@/components/ChangeBackground";
-import PermissionControlPanel from "../components/PermissionControlPanel";
+import PermissionControlPanel from "@/components/PermissionControlPanel";
 
 enum modifyRoutes {
   username = '/account/username',

tsconfig.json

@@ -25,6 +25,9 @@
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
+    "noPropertyAccessFromIndexSignature": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   }
 }