Merge branch 'dev/better-import' into 'main'

Dev/better import

1. 增加ts path设置，将大部分的父层级导入改成`import {} from '@/xxx'`的形式。

2. 增加vite和eslint的插件，修改配置，让lint和build能正确识别ts path。

3. 去除导入`rust-src`时候的`@ts-ignore`。修改了CI，使得顺序变成`rs_check_lint->wasm_build->ts_check_lint`。这样，前面编译得到的`.d.ts`可以被后面的`ts_check_lint`消费，不会引发导入错误。

4. 去除了vite的WASM插件，因为内置可以识别WASM。

5. 处理了数个eslint的警告。

6. 给Cargo增加了镜像源，因为有时候CI会网络错误。（我不太确定这个修改好不好）

------

测试了本地编译和在线CI。

See merge request !166

.eslintrc.json

 {
   "parser": "@typescript-eslint/parser",
-  "extends": ["plugin:prettier/recommended"],
-  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "rules": {
     "eqeqeq": 0,
     "no-var": "error",
@@ -9,5 +15,11 @@
       "error",
       "interface"
     ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": true,
+      "typescript": true
+    }
   }
 }

.gitlab-ci.yml

 stages:
   - install
-  - check
-  - lint
-  - test
+  - rs_check_lint
   - wasm
+  - ts_check_lint
+  - test
   - build
   - deploy
 
@@ -22,37 +22,16 @@ npm_ci:
   dependencies:
     - npm_ci
 
-ts_check:
-  dependencies:
-    - npm_ci
-  stage: check
-  tags:
-    - linux
-  script:
-    - npx tsc
-
-rs_check:
-  stage: check
-  image: rust:latest
-  tags:
-    - linux
-  script: cd rust-src && cargo check
-
-ts_lint:
-  extends: .build_base
-  stage: lint
-  tags:
-    - linux
-  script: npm run lint
-
-rs_lint:
-  stage: lint
+rs_check_lint:
+  stage: rs_check_lint
   image: rust:latest
   tags:
     - linux
   script:
+    - cd rust-src
+    - cargo check
     - rustup component add clippy
-    - cd rust-src && cargo clippy -- -Dwarnings
+    - cargo clippy -- -Dwarnings
 
 wasm_build:
   tags:
@@ -70,6 +49,17 @@ wasm_build:
       - rust-src/pkg
       - node_modules
 
+ts_check_lint:
+  dependencies:
+    - npm_ci
+    - wasm_build
+  stage: ts_check_lint
+  tags:
+    - linux
+  script:
+    - npx tsc
+    - npm run lint
+
 npm_build:
   dependencies:
     - wasm_build
@@ -90,7 +80,7 @@ deploy:
     - linux
   only:
     - main
-  dependencies: 
+  dependencies:
     - npm_build
   script:
     - mv neos-assets dist/

package.json

@@ -28,7 +28,7 @@
     "react-draggable": "^4.4.5",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
-    "react-scripts": "^2.1.8",
+    "react-scripts": "^5.0.1",
     "socket.io-client": "^4.6.1",
     "sql.js": "^1.8.0",
     "vite-plugin-svgr": "^2.4.0",
@@ -73,12 +73,15 @@
     "@vitejs/plugin-react": "^3.1.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.7",
     "sass": "^1.61.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",
     "vite-plugin-wasm-pack": "^0.1.12",
+    "vite-tsconfig-paths": "^4.0.8",
     "vite-ydk-loader": "^0.0.2"
   }
 }

rust-src/Cargo.toml

@@ -23,3 +23,10 @@ wasm-bindgen-test = "0.3.13"
 
 [profile.release]
 opt-level = "s"
+
+[source.crates-io]
+registry = "https://github.com/rust-lang/crates.io-index"
+replace-with = 'ustc'
+
+[source.ustc]
+registry = "git://mirrors.ustc.edu.cn/crates.io-index"

src/api/cards.ts

 import axios from "axios";
-import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite";
+import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
 
 export interface CardMeta {
   id: number;

src/api/ocgcore/ocgAdapter/bufferIO.ts

 import { ygopro } from "../idl/ocgcore";
 import { numberToCardPosition, numberToCardZone } from "./util";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 const LOCATION_OVERLAY = 0x80;

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectBattleCmd.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectCard.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SelectCardResponse) => {

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectChain.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SelectChainResponse) => {

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectCounter.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SelectCounterResponse) => {

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectEffectYn.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectIdleCmd.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SelectIdleCmdResponse) => {

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectOption.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SelectOptionResponse) => {

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectPlace.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 import { cardZoneToNumber } from "../../util";
 

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectPosition.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/selectUnselectCard.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
+
 import { BufferWriter } from "rust-src";
 
 export default (

src/api/ocgcore/ocgAdapter/ctos/ctosGameMsgResponse/sortCard.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferWriter } from "rust-src";
 
 export default (response: ygopro.CtosGameMsgResponse.SortCardResponse) => {

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/damage.ts

 import { ygopro } from "../../../idl/ocgcore";
-//@ts-ignore
 import { ocgDamageAdapter } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/draw.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/hint.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/newPhase.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/newTurn.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/recover.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/reloadField.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReaderExt } from "../../bufferIO";
 import MsgReloadField = ygopro.StocGameMessage.MsgReloadField;
 import { numberToCardPosition } from "../../util";

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/selectOption.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 import MsgSelectOption = ygopro.StocGameMessage.MsgSelectOption;
 

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/selectPlace.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 import MsgSelectPlace = ygopro.StocGameMessage.MsgSelectPlace;
 

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/selectPosition.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 import MsgSelectPosition = ygopro.StocGameMessage.MsgSelectPosition;
 

src/api/ocgcore/ocgAdapter/stoc/stocGameMsg/win.ts

 import { ygopro } from "../../../idl/ocgcore";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
 

src/api/ocgcore/ocgAdapter/stoc/stocTimeLimit.ts

 import { ygopro } from "../../idl/ocgcore";
 import { YgoProPacket, StocAdapter } from "../packet";
-// @ts-ignore
 import { BufferReader } from "rust-src";
 
 /*

src/api/ocgcore/ocgHelper.ts

@@ -3,7 +3,7 @@
  *
  * */
 import { ygopro } from "./idl/ocgcore";
-import socketMiddleWare, { socketCmd } from "../../middleware/socket";
+import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import { IDeck } from "../deck";
 import PlayerInfoAdapter from "./ocgAdapter/ctos/ctosPlayerInfo";
 import JoinGameAdapter from "./ocgAdapter/ctos/ctosJoinGame";

src/config/automation.ts

-import { useEnv } from "../hook";
+import { useEnv } from "@/hook";
 
 const { DEV, VITE_IS_AI_MODE, VITE_IS_AI_FIRST } = useEnv();
 

src/config/defaults.ts

-import { useEnv } from "../hook";
+import { useEnv } from "@/hook";
 
 const { DEV, VITE_IS_AI_MODE, VITE_AI_MODE_DEFAULT_DECK } = useEnv();
 

src/config/env.ts

-import { useEnv } from "../hook";
+import { useEnv } from "@/hook";
 import NeosDevConfig from "../../neos.config.json";
 import NeosProdConfig from "../../neos.config.prod.json";
 

src/hook/useApp.ts

 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import type { RootState, AppDispatch } from "../store";
+import type { RootState, AppDispatch } from "@/store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;

src/middleware/sqlite.ts

@@ -6,7 +6,7 @@
  * */
 
 import initSqlJs, { Database } from "sql.js";
-import { CardMeta, CardData, CardText } from "../api/cards";
+import { CardMeta, CardData, CardText } from "@/api/cards";
 import NeosConfig from "../../neos.config.json";
 
 export enum sqliteCmd {

src/reducers/chatSlice.ts

@@ -3,7 +3,7 @@
  *
  * */
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "../store";
+import { RootState } from "@/store";
 
 export interface chatState {
   message: string;

src/reducers/duel/cemeretySlice.ts

@@ -5,8 +5,8 @@ import {
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { RootState } from "../../store";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   createAsyncMetaThunk,
   DuelFieldState,

src/reducers/duel/commonSlice.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   clearIdleInteractivities,
   clearPlaceInteractivities,

src/reducers/duel/deckSlice.ts

 import { judgeSelf } from "./util";
 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { RootState } from "../../store";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { DuelFieldState, CardState } from "./generic";
 
 export interface DeckState extends DuelFieldState {}

src/reducers/duel/exclusionSlice.ts

@@ -5,8 +5,8 @@ import {
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { RootState } from "../../store";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   createAsyncMetaThunk,
   DuelFieldState,

src/reducers/duel/extraDeckSlice.ts

 import { ActionReducerMapBuilder } from "@reduxjs/toolkit";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { RootState } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
 import {
   createAsyncMetaThunk,
   createAsyncRepeatedMetaThunk,

src/reducers/duel/generic.ts

@@ -4,9 +4,8 @@ import {
   createAsyncThunk,
   PayloadAction,
 } from "@reduxjs/toolkit";
-import { CardMeta } from "../../api/cards";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchCard } from "../../api/cards";
+import { CardMeta, fetchCard } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { DuelState } from "./mod";
 import ReloadFieldAction = ygopro.StocGameMessage.MsgReloadField.ZoneAction;
 type UpdateDataAction = ReturnType<

src/reducers/duel/handsSlice.ts

@@ -4,7 +4,7 @@ import {
   PayloadAction,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { RootState } from "../../store";
+import { RootState } from "@/store";
 import { judgeSelf } from "./util";
 import {
   Interactivity,
@@ -16,7 +16,7 @@ import {
   createAsyncRepeatedMetaThunk,
   updateCardMeta,
 } from "./generic";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 
 export interface HandState extends DuelFieldState {}
 

src/reducers/duel/hintSlice.ts

 import { createAsyncThunk, ActionReducerMapBuilder } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { RootState } from "../../store";
-import { DESCRIPTION_LIMIT, fetchStrings, getStrings } from "../../api/strings";
+import { RootState } from "@/store";
+import { DESCRIPTION_LIMIT, fetchStrings, getStrings } from "@/api/strings";
 import { findCardByLocation } from "./util";
-import { fetchCard } from "../../api/cards";
+import { fetchCard } from "@/api/cards";
 import { DuelReducer } from "./generic";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 
 export interface HintState {
   code: number;

src/reducers/duel/initInfoSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { RootState } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
 import { DuelState } from "./mod";
 import { judgeSelf } from "./util";
 import MsgUpdateHp = ygopro.StocGameMessage.MsgUpdateHp;

src/reducers/duel/magicSlice.ts

@@ -5,8 +5,8 @@ import {
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { RootState } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
 import {
   createAsyncMetaThunk,
   DuelFieldState,

src/reducers/duel/mod.ts

@@ -3,7 +3,7 @@
  *
  * */
 
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { InitInfo, infoInitImpl, updateHpImpl } from "./initInfoSlice";
 import { TimeLimit, updateTimeLimitImpl } from "./timeLimit";
@@ -22,7 +22,7 @@ import {
   setEnableM2Impl,
   setEnableEpImpl,
 } from "./phaseSlice";
-import { RootState } from "../../store";
+import { RootState } from "@/store";
 import { HintState, hintCase, initHintImpl } from "./hintSlice";
 import {
   ModalState,

src/reducers/duel/modal/cardListModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
-import { RootState } from "../../../store";
-import { CardMeta } from "../../../api/cards";
+import { RootState } from "@/store";
+import { CardMeta } from "@/api/cards";
 
 // 更新卡牌列表弹窗打开状态
 export const setCardListModalIsOpenImpl: CaseReducer<

src/reducers/duel/modal/cardModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
-import { RootState } from "../../../store";
-import { CardMeta } from "../../../api/cards";
+import { RootState } from "@/store";
+import { CardMeta } from "@/api/cards";
 
 // 更新卡牌弹窗打开状态
 export const setCardModalIsOpenImpl: CaseReducer<

src/reducers/duel/modal/checkCardModalSlice.ts

@@ -4,11 +4,11 @@ import {
   createAsyncThunk,
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
-import { RootState } from "../../../store";
+import { RootState } from "@/store";
 import { DuelState } from "../mod";
 import { cmpCardLocation, findCardByLocation, judgeSelf } from "../util";
-import { fetchCard, getCardStr } from "../../../api/cards";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { fetchCard, getCardStr } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 
 // 更新卡牌选择弹窗打开状态
 export const setCheckCardModalIsOpenImpl: CaseReducer<

src/reducers/duel/modal/checkCardModalV2Slice.ts

@@ -5,9 +5,9 @@ import {
   CaseReducer,
   createAsyncThunk,
 } from "@reduxjs/toolkit";
-import { fetchCard } from "../../../api/cards";
-import { RootState } from "../../../store";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { fetchCard } from "@/api/cards";
+import { RootState } from "@/store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { findCardByLocation } from "../util";
 
 // 更新打开状态

src/reducers/duel/modal/checkCardModalV3Slice.ts

@@ -5,9 +5,9 @@ import {
   CaseReducer,
   createAsyncThunk,
 } from "@reduxjs/toolkit";
-import { fetchCard } from "../../../api/cards";
-import { RootState } from "../../../store";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { fetchCard } from "@/api/cards";
+import { RootState } from "@/store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { findCardByLocation } from "../util";
 
 // 更新打开状态

src/reducers/duel/modal/checkCounterModalSlice.ts

 // 后续对于`MSG_SELECT_XXX`的处理UI都尽量用`Babylon.js`实现而不会通过`Antd`的`Modal`实现，因此这里不追求工程质量，暂时简单实现下。
 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
-import { RootState } from "../../../store";
+import { RootState } from "@/store";
 import { DuelState } from "../mod";
 import { findCardByLocation } from "../util";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 type SelectCounter = ReturnType<
   typeof ygopro.StocGameMessage.MsgSelectCounter.prototype.toObject
 >;

src/reducers/duel/modal/mod.ts

-import { CardMeta } from "../../../api/cards";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { CardMeta } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 type CardLocation = ReturnType<typeof ygopro.CardLocation.prototype.toObject>;
 
 export interface ModalState {

src/reducers/duel/modal/optionModalSlice.ts

@@ -5,8 +5,8 @@ import {
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
-import { fetchCard, getCardStr } from "../../../api/cards";
-import { RootState } from "../../../store";
+import { fetchCard, getCardStr } from "@/api/cards";
+import { RootState } from "@/store";
 
 export const setOptionModalIsOpenImpl: CaseReducer<
   DuelState,

src/reducers/duel/modal/positionModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
-import { RootState } from "../../../store";
+import { RootState } from "@/store";
 import { DuelState } from "../mod";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 
 export const setPositionModalIsOpenImpl: CaseReducer<
   DuelState,

src/reducers/duel/modal/sortCardModalSlice.ts

@@ -3,9 +3,9 @@ import {
   CaseReducer,
   createAsyncThunk,
 } from "@reduxjs/toolkit";
-import { fetchCard } from "../../../api/cards";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
-import { RootState } from "../../../store";
+import { fetchCard } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
 import { DuelReducer } from "../generic";
 import { DuelState } from "../mod";
 type SortCard = ReturnType<

src/reducers/duel/modal/yesNoModalSlice.ts

@@ -4,10 +4,10 @@ import {
   createAsyncThunk,
   ActionReducerMapBuilder,
 } from "@reduxjs/toolkit";
-import { CardMeta, fetchCard } from "../../../api/cards";
-import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
-import { fetchStrings, getStrings } from "../../../api/strings";
-import { RootState } from "../../../store";
+import { CardMeta, fetchCard } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchStrings, getStrings } from "@/api/strings";
+import { RootState } from "@/store";
 import { DuelState } from "../mod";
 
 // 更新YesNo弹窗是否打开状态

src/reducers/duel/monstersSlice.ts

@@ -6,8 +6,8 @@ import {
   createAsyncThunk,
 } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { RootState } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { RootState } from "@/store";
 import {
   DuelFieldState,
   Interactivity,
@@ -21,7 +21,7 @@ import {
   setPosition,
   removeOverlay,
 } from "./generic";
-import { fetchCard } from "../../api/cards";
+import { fetchCard } from "@/api/cards";
 type MsgUpdateCounter = ReturnType<
   typeof ygopro.StocGameMessage.MsgUpdateCounter.prototype.toObject
 >;

src/reducers/duel/phaseSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
-import { RootState } from "../../store";
+import { RootState } from "@/store";
 import { DuelState } from "./mod";
 
 export interface PhaseState {

src/reducers/duel/turnSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
-import { RootState } from "../../store";
+import { RootState } from "@/store";
 import { DuelState } from "./mod";
 import { judgeSelf } from "./util";
 

src/reducers/duel/util.ts

@@ -5,7 +5,7 @@
 
 import { DuelState } from "./mod";
 import { Draft } from "@reduxjs/toolkit";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { CardState } from "./generic";
 
 type Location =

src/reducers/joinSlice.ts

@@ -3,7 +3,7 @@
  *
  * */
 import { createSlice } from "@reduxjs/toolkit";
-import { RootState } from "../store";
+import { RootState } from "@/store";
 
 export interface JoinState {
   value: boolean;

src/reducers/moraSlice.ts

@@ -3,7 +3,7 @@
  *
  * */
 import { createSlice } from "@reduxjs/toolkit";
-import { RootState } from "../store";
+import { RootState } from "@/store";
 
 export interface moraState {
   duelStart: boolean;

src/reducers/playerSlice.ts

@@ -3,7 +3,7 @@
  *
  * */
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "../store";
+import { RootState } from "@/store";
 
 export interface Player {
   name?: string;

src/service/duel/attack.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   attack: ygopro.StocGameMessage.MsgAttack,

src/service/duel/attackDisable.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   _: ygopro.StocGameMessage.MsgAttackDisabled,

src/service/duel/chaining.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   chaining: ygopro.StocGameMessage.MsgChaining,

src/service/duel/draw.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
-import { fetchHandsMeta } from "../../reducers/duel/handsSlice";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
+import { fetchHandsMeta } from "@/reducers/duel/handsSlice";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
 
 export default (
   draw: ygopro.StocGameMessage.MsgDraw,

src/service/duel/flipSummoned.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   _: ygopro.StocGameMessage.MsgFlipSummoned,

src/service/duel/flipSummoning.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   flipSummoning: ygopro.StocGameMessage.MsgFlipSummoning,

src/service/duel/gameMsg.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
 import onMsgStart from "./start";
 import onMsgDraw from "./draw";
 import onMsgNewTurn from "./newTurn";
@@ -40,7 +40,7 @@ import onMsgSpSummoning from "./spSummoning";
 import onMsgSpSummoned from "./spSummoned";
 import onMsgSummoning from "./summoning";
 import onMsgSummoned from "./summoned";
-import { setWaiting } from "../../reducers/duel/mod";
+import { setWaiting } from "@/reducers/duel/mod";
 
 const ActiveList = [
   "select_idle_cmd",

src/service/duel/hint.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
 import {
   fetchCommonHintMeta,
   fetchEsHintMeta,
   fetchSelectHintMeta,
-} from "../../reducers/duel/hintSlice";
+} from "@/reducers/duel/hintSlice";
 import MsgHint = ygopro.StocGameMessage.MsgHint;
 
 export default (hint: MsgHint, dispatch: AppDispatch) => {

src/service/duel/move.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import MsgMove = ygopro.StocGameMessage.MsgMove;
-import { AppDispatch } from "../../store";
+import { AppDispatch } from "@/store";
 import {
   fetchMonsterMeta,
   fetchOverlayMeta,
-} from "../../reducers/duel/monstersSlice";
+} from "@/reducers/duel/monstersSlice";
 import {
   removeCemetery,
   removeExclusion,
@@ -13,12 +13,12 @@ import {
   removeMagic,
   removeMonster,
   removeOverlay,
-} from "../../reducers/duel/mod";
-import { fetchMagicMeta } from "../../reducers/duel/magicSlice";
-import { fetchCemeteryMeta } from "../../reducers/duel/cemeretySlice";
-import { insertHandMeta } from "../../reducers/duel/handsSlice";
-import { fetchExclusionMeta } from "../../reducers/duel/exclusionSlice";
-import { fetchExtraDeckMeta } from "../../reducers/duel/extraDeckSlice";
+} from "@/reducers/duel/mod";
+import { fetchMagicMeta } from "@/reducers/duel/magicSlice";
+import { fetchCemeteryMeta } from "@/reducers/duel/cemeretySlice";
+import { insertHandMeta } from "@/reducers/duel/handsSlice";
+import { fetchExclusionMeta } from "@/reducers/duel/exclusionSlice";
+import { fetchExtraDeckMeta } from "@/reducers/duel/extraDeckSlice";
 import { REASON_MATERIAL } from "../../common";
 
 const OVERLAY_STACK: { code: number; sequence: number }[] = [];

src/service/duel/newPhase.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
-import { updatePhase } from "../../reducers/duel/mod";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
+import { updatePhase } from "@/reducers/duel/mod";
 
 export default (
   newPhase: ygopro.StocGameMessage.MsgNewPhase,

src/service/duel/newTurn.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
-import { updateTurn } from "../../reducers/duel/mod";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
+import { updateTurn } from "@/reducers/duel/mod";
 
 export default (
   newTurn: ygopro.StocGameMessage.MsgNewTurn,

src/service/duel/posChange.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { setMagicPosition, setMonsterPosition } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { setMagicPosition, setMonsterPosition } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgPosChange = ygopro.StocGameMessage.MsgPosChange;
 
 export default (posChange: MsgPosChange, dispatch: AppDispatch) => {

src/service/duel/reloadField.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { reloadField } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { reloadField } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgReloadField = ygopro.StocGameMessage.MsgReloadField;
 
 export default (field: MsgReloadField, dispatch: AppDispatch) => {

src/service/duel/selectBattleCmd.ts

 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { Interactivity, InteractType } from "../../reducers/duel/generic";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { Interactivity, InteractType } from "@/reducers/duel/generic";
 import {
   addHandsIdleInteractivity,
   addMagicIdleInteractivities,
@@ -8,8 +8,8 @@ import {
   clearAllIdleInteractivities,
   setEnableEp,
   setEnableM2,
-} from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgSelectBattleCmd = ygopro.StocGameMessage.MsgSelectBattleCmd;
 
 export default (selectBattleCmd: MsgSelectBattleCmd, dispatch: AppDispatch) => {

src/service/duel/selectCard.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
 import {
   setCheckCardModalIsOpen,
   setCheckCardModalMinMax,
   setCheckCardModalOnSubmit,
-} from "../../reducers/duel/mod";
-import { fetchCheckCardMeta } from "../../reducers/duel/modal/mod";
+} from "@/reducers/duel/mod";
+import { fetchCheckCardMeta } from "@/reducers/duel/modal/mod";
 import MsgSelectCard = ygopro.StocGameMessage.MsgSelectCard;
 import { CardZoneToChinese } from "./util";
 

src/service/duel/selectChain.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { sendSelectChainResponse } from "../../api/ocgcore/ocgHelper";
-import { fetchSelectHintMeta } from "../../reducers/duel/hintSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { sendSelectChainResponse } from "@/api/ocgcore/ocgHelper";
+import { fetchSelectHintMeta } from "@/reducers/duel/hintSlice";
 import {
   setCheckCardMOdalCancelAble,
   setCheckCardModalCancelResponse,
   setCheckCardModalIsOpen,
   setCheckCardModalMinMax,
   setCheckCardModalOnSubmit,
-} from "../../reducers/duel/mod";
-import { fetchCheckCardMeta } from "../../reducers/duel/modal/mod";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { fetchCheckCardMeta } from "@/reducers/duel/modal/mod";
+import { AppDispatch } from "@/store";
 import { CardZoneToChinese } from "./util";
 import MsgSelectChain = ygopro.StocGameMessage.MsgSelectChain;
 

src/service/duel/selectCounter.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setCheckCounter } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setCheckCounter } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgSelectCounter = ygopro.StocGameMessage.MsgSelectCounter;
 
 export default (selectCounter: MsgSelectCounter, dispatch: AppDispatch) => {

src/service/duel/selectEffectYn.ts

-import { CardMeta } from "../../api/cards";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
-import { fetchYesNoMeta } from "../../reducers/duel/modal/mod";
-import { AppDispatch } from "../../store";
+import { CardMeta } from "@/api/cards";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setYesNoModalIsOpen } from "@/reducers/duel/mod";
+import { fetchYesNoMeta } from "@/reducers/duel/modal/mod";
+import { AppDispatch } from "@/store";
 import { CardZoneToChinese } from "./util";
 import MsgSelectEffectYn = ygopro.StocGameMessage.MsgSelectEffectYn;
 

src/service/duel/selectIdleCmd.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
-import { Interactivity, InteractType } from "../../reducers/duel/generic";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
+import { Interactivity, InteractType } from "@/reducers/duel/generic";
 import {
   addHandsIdleInteractivity,
   addMonsterIdleInteractivities,
@@ -11,7 +11,7 @@ import {
   clearAllIdleInteractivities,
   addExclusionIdleInteractivities,
   addExtraDeckIdleInteractivities,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import MsgSelectIdleCmd = ygopro.StocGameMessage.MsgSelectIdleCmd;
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 

src/service/duel/selectOption.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setOptionModalIsOpen } from "../../reducers/duel/mod";
-import { fetchOptionMeta } from "../../reducers/duel/modal/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setOptionModalIsOpen } from "@/reducers/duel/mod";
+import { fetchOptionMeta } from "@/reducers/duel/modal/mod";
+import { AppDispatch } from "@/store";
 import MsgSelectOption = ygopro.StocGameMessage.MsgSelectOption;
 
 export default (selectOption: MsgSelectOption, dispatch: AppDispatch) => {

src/service/duel/selectPlace.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
 import MsgSelectPlace = ygopro.StocGameMessage.MsgSelectPlace;
 import {
   addMonsterPlaceInteractivities,
   addMagicPlaceInteractivities,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 
 export default (selectPlace: MsgSelectPlace, dispatch: AppDispatch) => {
   if (selectPlace.count != 1) {

src/service/duel/selectPosition.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   setPositionModalIsOpen,
   setPositionModalPositions,
-} from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgSelectPosition = ygopro.StocGameMessage.MsgSelectPosition;
 
 export default (selectPosition: MsgSelectPosition, dispatch: AppDispatch) => {

src/service/duel/selectSum.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   setCheckCardModalV3AllLevel,
   setCheckCardModalV3IsOpen,
   setCheckCardModalV3MinMax,
   setCheckCardModalV3OverFlow,
-} from "../../reducers/duel/mod";
-import { fetchCheckCardMetasV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { fetchCheckCardMetasV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
+import { AppDispatch } from "@/store";
 import MsgSelectSum = ygopro.StocGameMessage.MsgSelectSum;
 
 export default (selectSum: MsgSelectSum, dispatch: AppDispatch) => {

src/service/duel/selectTribute.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   setCheckCardModalV3AllLevel,
   setCheckCardModalV3IsOpen,
   setCheckCardModalV3MinMax,
   setCheckCardModalV3OverFlow,
-} from "../../reducers/duel/mod";
-import { fetchCheckCardMetasV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { fetchCheckCardMetasV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
+import { AppDispatch } from "@/store";
 import MsgSelectTribute = ygopro.StocGameMessage.MsgSelectTribute;
 
 export default (selectTribute: MsgSelectTribute, dispatch: AppDispatch) => {

src/service/duel/selectUnselectCard.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   setCheckCardModalV2CancelAble,
   setCheckCardModalV2FinishAble,
   setCheckCardModalV2IsOpen,
   setCheckCardModalV2MinMax,
   setCheckCardModalV2ResponseAble,
-} from "../../reducers/duel/mod";
-import { fetchCheckCardMetasV2 } from "../../reducers/duel/modal/checkCardModalV2Slice";
-import { AppDispatch } from "../../store";
+} from "@/reducers/duel/mod";
+import { fetchCheckCardMetasV2 } from "@/reducers/duel/modal/checkCardModalV2Slice";
+import { AppDispatch } from "@/store";
 import MsgSelectUnselectCard = ygopro.StocGameMessage.MsgSelectUnselectCard;
 
 export default (

src/service/duel/selectYesNo.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
-import { fetchYesNoMetaWithEffecDesc } from "../../reducers/duel/modal/yesNoModalSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setYesNoModalIsOpen } from "@/reducers/duel/mod";
+import { fetchYesNoMetaWithEffecDesc } from "@/reducers/duel/modal/yesNoModalSlice";
+import { AppDispatch } from "@/store";
 import MsgSelectYesNo = ygopro.StocGameMessage.MsgSelectYesNo;
 
 export default (selectYesNo: MsgSelectYesNo, dispatch: AppDispatch) => {

src/service/duel/set.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (_set: ygopro.StocGameMessage.MsgSet, dispatch: AppDispatch) => {
   dispatch(fetchEsHintMeta({ originMsg: 1601 }));

src/service/duel/shuffleHand.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { updateHandsMeta } from "../../reducers/duel/handsSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { updateHandsMeta } from "@/reducers/duel/handsSlice";
+import { AppDispatch } from "@/store";
 import MsgShuffleHand = ygopro.StocGameMessage.MsgShuffleHand;
 
 export default (shuffleHand: MsgShuffleHand, dispatch: AppDispatch) => {

src/service/duel/sortCard.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setSortCardModalIsOpen } from "../../reducers/duel/mod";
-import { fetchSortCardMeta } from "../../reducers/duel/modal/sortCardModalSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setSortCardModalIsOpen } from "@/reducers/duel/mod";
+import { fetchSortCardMeta } from "@/reducers/duel/modal/sortCardModalSlice";
+import { AppDispatch } from "@/store";
 import MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
 
 export default (sortCard: MsgSortCard, dispatch: AppDispatch) => {

src/service/duel/spSummoned.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   _: ygopro.StocGameMessage.MsgSpSummoned,

src/service/duel/spSummoning.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   spSummoning: ygopro.StocGameMessage.MsgSpSummoning,

src/service/duel/start.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { AppDispatch } from "@/store";
 import {
   infoInit,
   setSelfType,
@@ -9,7 +9,7 @@ import {
   initDeck,
   initExclusion,
   initHint,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 
 export default (
   start: ygopro.StocGameMessage.MsgStart,

src/service/duel/summoned.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   _: ygopro.StocGameMessage.MsgSummoned,

src/service/duel/summoning.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   summoning: ygopro.StocGameMessage.MsgSummoning,

src/service/duel/swap.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { AppDispatch } from "@/store";
 
 export default (
   _swap: ygopro.StocGameMessage.MsgSwap,

src/service/duel/timeLimit.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { updateTimeLimit } from "../../reducers/duel/mod";
-import { sendTimeConfirm } from "../../api/ocgcore/ocgHelper";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { updateTimeLimit } from "@/reducers/duel/mod";
+import { sendTimeConfirm } from "@/api/ocgcore/ocgHelper";
 
 export default function handleTimeLimit(timeLimit: ygopro.StocTimeLimit) {
   const dispatch = store.dispatch;

src/service/duel/unimplemented.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setUnimplemented } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setUnimplemented } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import NeosConfig from "../../../neos.config.json";
 
 export default (

src/service/duel/updateCounter.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { updateMonsterCounters } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { updateMonsterCounters } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgUpdateCounter = ygopro.StocGameMessage.MsgUpdateCounter;
 
 export default (updateCounter: MsgUpdateCounter, dispatch: AppDispatch) => {

src/service/duel/updateData.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { updateFieldData } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { updateFieldData } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgUpdateData = ygopro.StocGameMessage.MsgUpdateData;
 
 export default (updateData: MsgUpdateData, dispatch: AppDispatch) => {

src/service/duel/updateHp.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { fetchEsHintMeta } from "../../reducers/duel/hintSlice";
-import { updateHp } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { fetchEsHintMeta } from "@/reducers/duel/hintSlice";
+import { updateHp } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 import MsgUpdateHp = ygopro.StocGameMessage.MsgUpdateHp;
 
 export default (msgUpdateHp: MsgUpdateHp, dispatch: AppDispatch) => {

src/service/duel/util.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 
 export function CardZoneToChinese(zone: ygopro.CardZone): string {
   switch (zone) {

src/service/duel/wait.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import {
-  clearAllIdleInteractivities,
-  setWaiting,
-} from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { clearAllIdleInteractivities, setWaiting } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 
 export default (
   _wait: ygopro.StocGameMessage.MsgWait,

src/service/duel/win.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { setResult } from "../../reducers/duel/mod";
-import { AppDispatch } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { setResult } from "@/reducers/duel/mod";
+import { AppDispatch } from "@/store";
 
 export default (win: ygopro.StocGameMessage.MsgWin, dispatch: AppDispatch) => {
   dispatch(setResult(win.type_));

src/service/mora/deckCount.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { player0DeckInfo, player1DeckInfo } from "../../reducers/playerSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { player0DeckInfo, player1DeckInfo } from "@/reducers/playerSlice";
 
 // FIXME: player0 不一定是当前玩家
 export default function handleDeckCount(pb: ygopro.YgoStocMsg) {

src/service/mora/selectHand.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { selectHandAble } from "../../reducers/moraSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { selectHandAble } from "@/reducers/moraSlice";
 
 export default function handleSelectHand(_: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/mora/selectTp.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { selectTpAble } from "../../reducers/moraSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { selectTpAble } from "@/reducers/moraSlice";
 
 export default function handleSelectTp(_: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/onSocketMessage.ts

@@ -8,8 +8,8 @@ import handleHsPlayerEnter from "./room/hsPlayerEnter";
 import handleJoinGame from "./room/joinGame";
 import handleChat from "./room/chat";
 import handleHsWatchChange from "./room/hsWatchChange";
-import { YgoProPacket } from "../api/ocgcore/ocgAdapter/packet";
-import { adaptStoc } from "../api/ocgcore/ocgAdapter/adapter";
+import { YgoProPacket } from "@/api/ocgcore/ocgAdapter/packet";
+import { adaptStoc } from "@/api/ocgcore/ocgAdapter/adapter";
 import handleSelectHand from "./mora/selectHand";
 import handleSelectTp from "./mora/selectTp";
 import handleDeckCount from "./mora/deckCount";

src/service/onSocketOpen.ts

@@ -2,7 +2,7 @@
  * 长连接建立事件订阅处理逻辑
  *
  * */
-import { sendJoinGame, sendPlayerInfo } from "../api/ocgcore/ocgHelper";
+import { sendJoinGame, sendPlayerInfo } from "@/api/ocgcore/ocgHelper";
 import NeosConfig from "../../neos.config.json";
 
 /*

src/service/room/chat.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { postChat } from "../../reducers/chatSlice";
-import { store } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { postChat } from "@/reducers/chatSlice";
+import { store } from "@/store";
 
 export default function handleChat(pb: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/room/duelStart.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { duelStart } from "../../reducers/moraSlice";
-import { store } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { duelStart } from "@/reducers/moraSlice";
+import { store } from "@/store";
 
 export default function handleDuelStart(_pb: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/room/hsPlayerChange.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
 import {
   player0Update,
   player1Update,
   player0Leave,
   player1Leave,
   observerIncrement,
-} from "../../reducers/playerSlice";
+} from "@/reducers/playerSlice";
 
 const READY_STATE = "ready";
 const NO_READY_STATE = "not ready";

src/service/room/hsPlayerEnter.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { player0Enter, player1Enter } from "../../reducers/playerSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { player0Enter, player1Enter } from "@/reducers/playerSlice";
 
 export default function handleHsPlayerEnter(pb: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/room/hsWatchChange.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { observerChange } from "../../reducers/playerSlice";
-import { store } from "../../store";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { observerChange } from "@/reducers/playerSlice";
+import { store } from "@/store";
 
 export default function handleHsWatchChange(pb: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/room/joinGame.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
-import { store } from "../../store";
-import { setJoined } from "../../reducers/joinSlice";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { store } from "@/store";
+import { setJoined } from "@/reducers/joinSlice";
 
 export default function handleJoinGame(pb: ygopro.YgoStocMsg) {
   const dispatch = store.dispatch;

src/service/room/typeChange.ts

-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   player0Update,
   player1Update,
   hostChange,
   updateIsHost,
-} from "../../reducers/playerSlice";
-import { store } from "../../store";
+} from "@/reducers/playerSlice";
+import { store } from "@/store";
 
 const NO_READY_STATE = "not ready";
 

src/ui/Duel/alert.tsx

 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { sendSurrender } from "../../api/ocgcore/ocgHelper";
-import { useAppSelector } from "../../hook";
-import { selectUnimplemented } from "../../reducers/duel/mod";
+import { sendSurrender } from "@/api/ocgcore/ocgHelper";
+import { useAppSelector } from "@/hook";
+import { selectUnimplemented } from "@/reducers/duel/mod";
 import { Alert } from "antd";
 
 const NeosAlert = () => {

src/ui/Duel/cardListModal.tsx

 import React from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import {
   selectCardListModalIsOpen,
   selectCardListModalInfo,
-} from "../../reducers/duel/modal/mod";
+} from "@/reducers/duel/modal/mod";
 import {
   clearAllIdleInteractivities,
   setCardListModalIsOpen,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { Drawer, List, Button } from "antd";
-import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
 import NeosConfig from "../../../neos.config.json";
 
 const CARD_WIDTH = 100;

src/ui/Duel/cardModal.tsx

 import React from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import {
   selectCardModalIsOpen,
   selectCardModalInteractivies,
   selectCardModalMeta,
   selectCardModalCounters,
-} from "../../reducers/duel/modal/mod";
+} from "@/reducers/duel/modal/mod";
 import {
   setCardModalIsOpen,
   clearAllIdleInteractivities,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { Modal, Card, Button, Row, Col } from "antd";
-import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
 import Icon, { StarOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../neos.config.json";
 import { ReactComponent as BattleSvg } from "../../../neos-assets/battle-axe.svg";
@@ -23,7 +23,7 @@ import {
   Attribute2StringCodeMap,
   Race2StringCodeMap,
 } from "../../common";
-import { fetchStrings } from "../../api/strings";
+import { fetchStrings } from "@/api/strings";
 
 const { Meta } = Card;
 const CARD_WIDTH = 240;

src/ui/Duel/cemetery.tsx

@@ -2,8 +2,8 @@ import * as BABYLON from "@babylonjs/core";
 import {
   selectMeCemetery,
   selectOpCemetery,
-} from "../../reducers/duel/cemeretySlice";
-import { useAppSelector } from "../../hook";
+} from "@/reducers/duel/cemeretySlice";
+import { useAppSelector } from "@/hook";
 import SingleSlot, { Depth } from "./singleSlot";
 import { cardSlotRotation } from "./util";
 import NeosConfig from "../../../neos.config.json";

src/ui/Duel/checkCardModal.tsx

 import React, { useState } from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import {
   selectCheckCardModalCacnelResponse,
   selectCheckCardModalCancelAble,
@@ -8,21 +8,21 @@ import {
   selectCheckCardModalMinMax,
   selectCheckCardModalOnSubmit,
   selectCheckCardModalTags,
-} from "../../reducers/duel/modal/mod";
+} from "@/reducers/duel/modal/mod";
 import {
   resetCheckCardModal,
   setCheckCardModalIsOpen,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { Button, Row, Col, Popover } from "antd";
 import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
 import {
   sendSelectCardResponse,
   sendSelectChainResponse,
-} from "../../api/ocgcore/ocgHelper";
+} from "@/api/ocgcore/ocgHelper";
 import { ThunderboltOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../neos.config.json";
 import DragModal from "./dragModal";
-import { selectHint } from "../../reducers/duel/hintSlice";
+import { selectHint } from "@/reducers/duel/hintSlice";
 
 const CheckCardModal = () => {
   const dispatch = store.dispatch;

src/ui/Duel/checkCardModalV2.tsx

 import React from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import { Button, Card, Row, Col } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import {
@@ -11,16 +11,16 @@ import {
   selectCheckCardModalV2ResponseAble,
   selectCheckCardModalV2SelectAbleOptions,
   selectCheckCardModalV2SelectedOptions,
-} from "../../reducers/duel/modal/checkCardModalV2Slice";
-import { sendSelectUnselectCardResponse } from "../../api/ocgcore/ocgHelper";
+} from "@/reducers/duel/modal/checkCardModalV2Slice";
+import { sendSelectUnselectCardResponse } from "@/api/ocgcore/ocgHelper";
 import {
   resetCheckCardModalV2,
   setCheckCardModalV2IsOpen,
   setCheckCardModalV2ResponseAble,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
 import DragModal from "./dragModal";
-import { selectHint } from "../../reducers/duel/hintSlice";
+import { selectHint } from "@/reducers/duel/hintSlice";
 
 const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;

src/ui/Duel/checkCardModalV3.tsx

 import React, { useState } from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import { Button, Card, Row, Col } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
-import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
+import { sendSelectCardResponse } from "@/api/ocgcore/ocgHelper";
 import {
   resetCheckCardModalV3,
   setCheckCardModalV3IsOpen,
   setCheckCardModalV3ResponseAble,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
-import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
+import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
 import DragModal from "./dragModal";
-import { selectHint } from "../../reducers/duel/hintSlice";
+import { selectHint } from "@/reducers/duel/hintSlice";
 
 const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;

src/ui/Duel/checkCounterModal.tsx

 import { Button, Row, Col, Card, InputNumber } from "antd";
 import React, { useState } from "react";
-import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper";
-import { fetchStrings } from "../../api/strings";
-import { useAppSelector } from "../../hook";
-import { clearCheckCounter } from "../../reducers/duel/mod";
-import { selectCheckCounterModal } from "../../reducers/duel/modal/checkCounterModalSlice";
-import { store } from "../../store";
+import { sendSelectCounterResponse } from "@/api/ocgcore/ocgHelper";
+import { fetchStrings } from "@/api/strings";
+import { useAppSelector } from "@/hook";
+import { clearCheckCounter } from "@/reducers/duel/mod";
+import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
+import { store } from "@/store";
 import DragModal from "./dragModal";
 import NeosConfig from "../../../neos.config.json";
 

src/ui/Duel/deck.tsx

 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "../../hook";
-import { selectMeDeck, selectOpDeck } from "../../reducers/duel/deckSlice";
+import { useAppSelector } from "@/hook";
+import { selectMeDeck, selectOpDeck } from "@/reducers/duel/deckSlice";
 import SingleSlot, { Depth } from "./singleSlot";
 import { cardSlotRotation } from "./util";
 import NeosConfig from "../../../neos.config.json";

src/ui/Duel/exclusion.tsx

 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "../../hook";
+import { useAppSelector } from "@/hook";
 import {
   selectMeExclusion,
   selectopExclusion,
-} from "../../reducers/duel/exclusionSlice";
+} from "@/reducers/duel/exclusionSlice";
 import SingleSlot, { Depth } from "./singleSlot";
 import NeosConfig from "../../../neos.config.json";
 import { cardSlotRotation } from "./util";

src/ui/Duel/extraDeck.tsx

 import SingleSlot, { Depth } from "./singleSlot";
 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "../../hook";
+import { useAppSelector } from "@/hook";
 import {
   selectMeExtraDeck,
   selectOpExtraDeck,
-} from "../../reducers/duel/extraDeckSlice";
+} from "@/reducers/duel/extraDeckSlice";
 import NeosConfig from "../../../neos.config.json";
 import { cardSlotRotation } from "./util";
 

src/ui/Duel/field.tsx

 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "../../hook";
-import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
-import { clearMagicPlaceInteractivities } from "../../reducers/duel/mod";
+import { useAppSelector } from "@/hook";
+import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
+import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import FixedSlot from "./fixedSlot";
 import { Depth } from "./singleSlot";
 import NeosConfig from "../../../neos.config.json";

src/ui/Duel/fixedSlot.tsx

 import * as BABYLON from "@babylonjs/core";
-import { store } from "../../store";
-import { CardState } from "../../reducers/duel/generic";
+import { store } from "@/store";
+import { CardState } from "@/reducers/duel/generic";
 import { useRef } from "react";
 import { useClick } from "./hook";
-import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { sendSelectPlaceResponse } from "@/api/ocgcore/ocgHelper";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   setCardListModalInfo,
   setCardListModalIsOpen,
@@ -12,7 +12,7 @@ import {
   setCardModalInteractivies,
   setCardModalIsOpen,
   setCardModalMeta,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { interactTypeToString } from "./util";
 import NeosConfig from "../../../neos.config.json";

src/ui/Duel/hands.tsx

 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "../../hook";
-import { selectMeHands, selectOpHands } from "../../reducers/duel/handsSlice";
-import { CardState } from "../../reducers/duel/generic";
+import { useAppSelector } from "@/hook";
+import { selectMeHands, selectOpHands } from "@/reducers/duel/handsSlice";
+import { CardState } from "@/reducers/duel/generic";
 import {
   setCardModalIsOpen,
   setCardModalMeta,
   setCardModalInteractivies,
-} from "../../reducers/duel/mod";
-import { store } from "../../store";
+} from "@/reducers/duel/mod";
+import { store } from "@/store";
 import { useHover } from "react-babylonjs";
 import { useClick } from "./hook";
 import { useState, useRef, useEffect } from "react";

src/ui/Duel/hintNotification.tsx

 import React, { useEffect } from "react";
-import { useAppSelector } from "../../hook";
-import { selectHint } from "../../reducers/duel/hintSlice";
-import { selectCurrentPhase } from "../../reducers/duel/phaseSlice";
+import { useAppSelector } from "@/hook";
+import { selectHint } from "@/reducers/duel/hintSlice";
+import { selectCurrentPhase } from "@/reducers/duel/phaseSlice";
 import { notification } from "antd";
-import { selectDuelResult, selectWaiting } from "../../reducers/duel/mod";
+import { selectDuelResult, selectWaiting } from "@/reducers/duel/mod";
 import { useNavigate } from "react-router-dom";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
 import NeosConfig from "../../../neos.config.json";
 

src/ui/Duel/magics.tsx

 import * as BABYLON from "@babylonjs/core";
-import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
-import { CardState } from "../../reducers/duel/generic";
-import { useAppSelector } from "../../hook";
-import { zip } from "./util";
+import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
+import { CardState } from "@/reducers/duel/generic";
+import { useAppSelector } from "@/hook";
+import { zip, cardSlotRotation } from "./util";
 import FixedSlot from "./fixedSlot";
-import { clearMagicPlaceInteractivities } from "../../reducers/duel/mod";
+import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
-import { cardSlotRotation } from "./util";
 
 // TODO: use config
 const left = -2.15;

src/ui/Duel/monsters.tsx

 import * as BABYLON from "@babylonjs/core";
-import { CardState } from "../../reducers/duel/generic";
+import { CardState } from "@/reducers/duel/generic";
 import "react-babylonjs";
-import { useAppSelector } from "../../hook";
+import { useAppSelector } from "@/hook";
 import {
   selectMeMonsters,
   selectOpMonsters,
-} from "../../reducers/duel/monstersSlice";
-import { zip } from "./util";
+} from "@/reducers/duel/monstersSlice";
+import { zip, cardSlotRotation, cardSlotDefenceRotation } from "./util";
 import FixedSlot from "./fixedSlot";
-import { clearMonsterPlaceInteractivities } from "../../reducers/duel/mod";
+import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
-import { cardSlotRotation, cardSlotDefenceRotation } from "./util";
 
 const transform = NeosConfig.ui.card.transform;
 const floating = NeosConfig.ui.card.floating;

src/ui/Duel/optionModal.tsx

 import React, { useState } from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import { Button } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import {
   selectOptionModalIsOpen,
   selectOptionModalOptions,
-} from "../../reducers/duel/modal/mod";
-import { sendSelectOptionResponse } from "../../api/ocgcore/ocgHelper";
-import {
-  resetOptionModal,
-  setOptionModalIsOpen,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/modal/mod";
+import { sendSelectOptionResponse } from "@/api/ocgcore/ocgHelper";
+import { resetOptionModal, setOptionModalIsOpen } from "@/reducers/duel/mod";
 import DragModal from "./dragModal";
 
 const OptionModal = () => {

src/ui/Duel/phase.tsx

 import React, { useState } from "react";
-import { store } from "../../store";
-import { useAppSelector } from "../../hook";
+import { store } from "@/store";
+import { useAppSelector } from "@/hook";
 import {
   selectCurrentPhase,
   selectEnableBp,
   selectEnableEp,
   selectEnableM2,
-} from "../../reducers/duel/phaseSlice";
+} from "@/reducers/duel/phaseSlice";
 import {
   sendSelectBattleCmdResponse,
   sendSelectIdleCmdResponse,
   sendSurrender,
-} from "../../api/ocgcore/ocgHelper";
+} from "@/api/ocgcore/ocgHelper";
 import {
   clearAllIdleInteractivities,
   setEnableBp,
   setEnableEp,
   setEnableM2,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { Button, Modal, Space } from "antd";
 import Icon from "@ant-design/icons";
 import { ReactComponent as BattleSvg } from "../../../neos-assets/crossed-swords.svg";

src/ui/Duel/positionModal.tsx

 import React, { useState } from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import { Button } from "antd";
-import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
+import { sendSelectPositionResponse } from "@/api/ocgcore/ocgHelper";
 import {
   selectPositionModalIsOpen,
   selectPositionModalPositions,
-} from "../../reducers/duel/modal/mod";
-import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+} from "@/reducers/duel/modal/mod";
+import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
   resetPositionModal,
   setPositionModalIsOpen,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { CheckCard } from "@ant-design/pro-components";
 import DragModal from "./dragModal";
 

src/ui/Duel/sendBox.tsx

 import React, { useState } from "react";
 import { Input, Button, Row, Col } from "antd";
 import { SendOutlined } from "@ant-design/icons";
-import { sendChat } from "../../api/ocgcore/ocgHelper";
+import { sendChat } from "@/api/ocgcore/ocgHelper";
 
 const SendBox = () => {
   const [content, setContent] = useState("");

src/ui/Duel/singleSlot.tsx

 import * as BABYLON from "@babylonjs/core";
-import { CardState } from "../../reducers/duel/generic";
-import { store } from "../../store";
+import { CardState } from "@/reducers/duel/generic";
+import { store } from "@/store";
 import { useClick } from "./hook";
 import { useRef } from "react";
 import {
   setCardListModalInfo,
   setCardListModalIsOpen,
-} from "../../reducers/duel/mod";
+} from "@/reducers/duel/mod";
 import { interactTypeToString } from "./util";
 import NeosConfig from "../../../neos.config.json";
 

src/ui/Duel/sortCardModal.tsx

@@ -16,13 +16,13 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useAppSelector } from "../../hook";
-import { selectSortCardModal } from "../../reducers/duel/modal/sortCardModalSlice";
-import { sendSortCardResponse } from "../../api/ocgcore/ocgHelper";
-import { store } from "../../store";
-import { resetSortCardModal } from "../../reducers/duel/mod";
+import { useAppSelector } from "@/hook";
+import { selectSortCardModal } from "@/reducers/duel/modal/sortCardModalSlice";
+import { sendSortCardResponse } from "@/api/ocgcore/ocgHelper";
+import { store } from "@/store";
+import { resetSortCardModal } from "@/reducers/duel/mod";
 import { Modal, Button, Card } from "antd";
-import { CardMeta } from "../../api/cards";
+import { CardMeta } from "@/api/cards";
 import NeosConfig from "../../../neos.config.json";
 
 const SortCardModal = () => {

src/ui/Duel/status.tsx

@@ -3,12 +3,12 @@ import { UserOutlined } from "@ant-design/icons";
 import { Avatar } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import NeosConfig from "../../../neos.config.json";
-import { useAppSelector } from "../../hook";
+import { useAppSelector } from "@/hook";
 import {
   selectMeInitInfo,
   selectOpInitInfo,
-} from "../../reducers/duel/initInfoSlice";
-import { selectWaiting } from "../../reducers/duel/mod";
+} from "@/reducers/duel/initInfoSlice";
+import { selectWaiting } from "@/reducers/duel/mod";
 
 const Config = NeosConfig.ui.status;
 const avatarSize = 40;

src/ui/Duel/timeLine.tsx

 import React, { useEffect, useState } from "react";
 import { Timeline, TimelineItemProps } from "antd";
 import { MessageOutlined } from "@ant-design/icons";
-import { useAppSelector } from "../../hook";
-import { selectChat } from "../../reducers/chatSlice";
+import { useAppSelector } from "@/hook";
+import { selectChat } from "@/reducers/chatSlice";
 
 const DuelTimeLine = () => {
   const [items, setItems] = useState<TimelineItemProps[]>([]);

src/ui/Duel/util.ts

-import { InteractType } from "../../reducers/duel/generic";
+import { InteractType } from "@/reducers/duel/generic";
 import NeosConfig from "../../../neos.config.json";
 import { Vector3 } from "@babylonjs/core";
 

src/ui/Duel/yesNoModal.tsx

 import React from "react";
-import { useAppSelector } from "../../hook";
-import { store } from "../../store";
+import { useAppSelector } from "@/hook";
+import { store } from "@/store";
 import { Button } from "antd";
-import { sendSelectEffectYnResponse } from "../../api/ocgcore/ocgHelper";
+import { sendSelectEffectYnResponse } from "@/api/ocgcore/ocgHelper";
 import {
   selectYesNoModalIsOpen,
   selectYesNOModalMsg,
-} from "../../reducers/duel/modal/mod";
-import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
+} from "@/reducers/duel/modal/mod";
+import { setYesNoModalIsOpen } from "@/reducers/duel/mod";
 import DragModal from "./dragModal";
-import { selectHint } from "../../reducers/duel/hintSlice";
+import { selectHint } from "@/reducers/duel/hintSlice";
 
 const YesNoModal = () => {
   const dispatch = store.dispatch;

src/ui/Login.tsx

@@ -11,7 +11,7 @@ import React, { useState, ChangeEvent, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import "../styles/core.scss";
 import NeosConfig from "../../neos.config.json";
-import { useConfig } from "../config";
+import { useConfig } from "@/config";
 
 const serverConfig = NeosConfig.servers;
 const {

src/ui/Mora.tsx

-import React from "react";
-import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper";
-import { useAppSelector } from "../hook";
-import { useConfig } from "../config";
+import React, { useEffect } from "react";
+import { sendHandResult, sendTpResult } from "@/api/ocgcore/ocgHelper";
+import { useAppSelector } from "@/hook";
+import { useConfig } from "@/config";
 import {
   selectHandSelectAble,
   unSelectHandAble,
   selectTpSelectAble,
   unSelectTpAble,
-} from "../reducers/moraSlice";
-import { selectDuelHsStart } from "../reducers/duel/mod";
-import { store } from "../store";
-import { useEffect } from "react";
+} from "@/reducers/moraSlice";
+import { selectDuelHsStart } from "@/reducers/duel/mod";
+import { store } from "@/store";
 import { useNavigate, useParams } from "react-router-dom";
 import { Button, Modal } from "antd";
 import {

src/ui/WaitRoom.tsx

@@ -9,26 +9,26 @@ import {
   message,
   Select,
 } from "antd";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import React, { useState, useEffect } from "react";
-import socketMiddleWare, { socketCmd } from "../middleware/socket";
-import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite";
-import { store } from "../store";
+import socketMiddleWare, { socketCmd } from "@/middleware/socket";
+import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
+import { store } from "@/store";
 import {
   selectIsHost,
   selectPlayer0,
   selectPlayer1,
-} from "../reducers/playerSlice";
-import { useAppSelector } from "../hook";
-import { useConfig } from "../config";
-import { selectJoined } from "../reducers/joinSlice";
-import { selectChat } from "../reducers/chatSlice";
-import { fetchDeck, type IDeck, DeckManager } from "../api/deck";
+} from "@/reducers/playerSlice";
+import { useAppSelector } from "@/hook";
+import { useConfig } from "@/config";
+import { selectJoined } from "@/reducers/joinSlice";
+import { selectChat } from "@/reducers/chatSlice";
+import { fetchDeck, type IDeck, DeckManager } from "@/api/deck";
 import {
   sendUpdateDeck,
   sendHsReady,
   sendHsStart,
-} from "../api/ocgcore/ocgHelper";
+} from "@/api/ocgcore/ocgHelper";
 import {
   UserOutlined,
   CheckCircleFilled,
@@ -38,15 +38,13 @@ import {
   TagOutlined,
   UploadOutlined,
 } from "@ant-design/icons";
-import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice";
+import { initMeExtraDeckMeta } from "@/reducers/duel/extraDeckSlice";
 import type { UploadProps } from "antd";
-import { useParams } from "react-router-dom";
-import { selectDuelStart } from "../reducers/moraSlice";
+import { selectDuelStart } from "@/reducers/moraSlice";
 import NeosConfig from "../../neos.config.json";
 import YGOProDeck from "ygopro-deck-encode";
-// @ts-ignore
 import rustInit from "rust-src";
-import { initStrings } from "../api/strings";
+import { initStrings } from "@/api/strings";
 
 const READY_STATE = "ready";
 

tsconfig.json

@@ -19,10 +19,20 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "types": ["vite/client"]
+    "types": [
+      "vite/client"
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "rust-src": [
+        "./rust-src/pkg"
+      ]
+    }
   },
   "include": [
     "src",
-    "src/api"
+    "rust-src/pkg"
   ]
 }

vite.config.ts

 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
-import wasmPack from "vite-plugin-wasm-pack";
 import ydkLoader from "vite-ydk-loader";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     minify: false,
   },
-  plugins: [react(), svgr(), wasmPack("./rust-src"), ydkLoader()],
+  plugins: [
+    react(),
+    svgr(),
+    ydkLoader(),
+    tsconfigPaths(),
+  ],
   resolve: {
     extensions: [".js", ".json", ".ydk"],
   },