feat: react-dev-inspector 替换为 code-inspector-plugin

Author: huangmingfu

README.en-US.md

@@ -58,7 +58,6 @@ pnpm build:pro
 - **Global State Management**: Provides Zustand global state management example code, simplifying cross-component state sharing and improving development efficiency. (See [store](./src/store))
 - **Axios Request Encapsulation**: Encapsulated Axios to uniformly handle HTTP requests and responses, simplifying interaction with backend interfaces. (See [services](./src/services))
 - **Utility Functions & Hooks**: Provides some convenient and practical utility functions and hooks. (See [utils](./src/utils), [hooks](./src/hooks))
-- **react-dev-inspector Integration**: Click on page elements to open corresponding code in IDE, facilitating code debugging and improving development efficiency. (See [vite.config.ts](./vite.config.ts))
 - **Automatic Import Order Beautification**: Integrated prettier-plugin-sort-imports plugin to automatically beautify import order, enhancing code readability and maintainability.
 - **Others**: Provides commands for convenient environment-based running and building; configured code splitting strategy; local reverse proxy for CORS; and detailed `nanny-level comments`, etc.
 
@@ -122,12 +121,6 @@ pnpm build:pro
 - Unified commit message standards (Commitlint + Husky)
 - Automatic code formatting to ensure team code style consistency
 
-### 🔧 Powerful Development Toolchain
-
-- react-dev-inspector integration - click page elements to jump directly to source code
-- Automatic import order sorting for improved code readability
-- Multi-environment configuration (dev/test/pro) to meet different deployment requirements
-
 ## 📦 About Route Caching (keep-alive)
 
 > React officially hasn't implemented functionality similar to Vue's \<keep-alive\>. React team rejected adding this feature based on two considerations, which you can search and read about. To achieve state preservation, the official team recommends these two manual state preservation methods:

README.md

@@ -62,7 +62,6 @@ pnpm build:pro
 - **全局状态管理**：提供了 Zustand 全局状态管理示例代码，简化跨组件状态共享，提升开发效率。（详见`store`）
 - **Axios 请求封装**：对 Axios 进行封装，统一处理 HTTP 请求和响应，简化与后端接口的交互流程。（详见[service](./src/services)）
 - **工具函数、hooks**：提供了一些方便实用的工具函数和hooks。（详见[utils](./src/utils)、[hooks](./src/hooks)）
-- **react-dev-inspector集成**：点击页面元素，IDE直接打开对应代码插件，方便开发者调试代码，提高开发效率。(详见[vite.config.ts](./vite.config.ts)）
 - **import顺序自动美化排序**：集成了 prettier-plugin-sort-imports 插件，可以自动美化 import 顺序，提高代码的可读性和可维护性。
 - **其他**：提供一些方便根据环境运行、打包的命令；配置了分包策略；本地反向代理解决跨域；还有详细的`保姆级注释`等等。
 
@@ -126,12 +125,6 @@ pnpm build:pro
 - 统一的 commit message 规范（Commitlint + Husky）
 - 自动格式化代码，保证团队代码风格一致性
 
-### 🔧 强大的开发工具链
-
-- react-dev-inspector 集成，点击页面元素直接跳转到源码
-- import 顺序自动排序，提高代码可读性
-- 多环境配置（dev/test/pro），满足不同部署需求
-
 ## 📦 关于路由缓存 keep-alive
 
 > React 官方暂时没有实现 vue \<keep-alive\> 类似的功能。React 官方出于两点考虑拒绝添加这个功能，具体可以自行搜索查阅。为了达到状态保存的效果，官方推荐以下两种手动保存状态的方式：

package.json

@@ -61,20 +61,19 @@
     "@commitlint/prompt-cli": "^20.2.0",
     "@eslint-react/eslint-plugin": "2.3.13",
     "@eslint/js": "^9.39.2",
-    "@react-dev-inspector/vite-plugin": "^2.0.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/node": "^25.0.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "code-inspector-plugin": "1.4.1",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.25",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
-    "react-dev-inspector": "^2.0.1",
     "sass": "^1.96.0",
     "stylelint": "^16.26.1",
     "stylelint-config-recess-order": "^7.4.0",

pnpm-lock.yaml

@@ -2,3 +2,4 @@ export { default as AutoScrollToTop } from './auto-scroll-to-top';
 export { default as HighLight } from './high-light';
 export { default as NotFount } from './not-fount';
 export { default as Loading } from './loading';
+export { default as ErrorBoundary } from './error-boundary';

src/components/index.ts

@@ -1,4 +1,3 @@
-import { Inspector } from 'react-dev-inspector';
 import { createRoot } from 'react-dom/client';
 
 // 公共样式
@@ -7,12 +6,7 @@ import '@/styles/scss/global.scss';
 import App from './app.tsx';
 
 function setupApp() {
-  createRoot(document.getElementById('root')!).render(
-    <>
-      <Inspector keys={['ctrl', 'alt', 'q']} />
-      <App />
-    </>,
-  );
+  createRoot(document.getElementById('root')!).render(<App />);
 }
 
 setupApp();

src/main.tsx

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { Navigate, RouteObject, createBrowserRouter } from 'react-router';
 
-import ErrorBoundary from '@/components/error-boundary';
+import { ErrorBoundary } from '@/components';
 
 import { LazyLoad, routes } from './utils';
 

src/router/index.tsx

@@ -1,9 +1,11 @@
 import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 
+// import { Loading } from '@/components';
+
 // 创建axios实例
 const axiosInstance: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL, // 请求的默认前缀 只要是发出去请求就会 默认带上这个前缀
-  timeout: 10000, // 请求超时时间：10s
+  timeout: 60000, // 请求超时时间：60s
   headers: { 'Content-Type': 'application/json' }, // 设置默认请求头
 });
 
@@ -15,9 +17,15 @@ axiosInstance.interceptors.request.use(
     // if (token) {
     //     config.headers.Authorization = `Bearer ${token}`
     // }
+
+    // 全局 loading 显示
+    // Loading.show();
+
     return config;
   },
   (err: AxiosError) => {
+    // 全局 loading 隐藏
+    // Loading.hide();
     return Promise.reject(err);
   },
 );
@@ -35,11 +43,19 @@ axiosInstance.interceptors.response.use(
     //   default:
     //     return res.data || {};
     // }
+
+    // 全局 loading 隐藏
+    // Loading.hide();
+
     return res; // res.data
   },
   (err: AxiosError) => {
     // 如果接口请求报错时，也可以直接返回对象，如return { message: onErrorReason(error.message) }，这样使用async/await就不需要加try/catch
     // onErrorReason(err.message) // 做一些全局的错误提示，可用ui库的message提示组件
+
+    // 全局 loading 隐藏
+    // Loading.hide();
+
     return Promise.resolve(err);
   },
 );

src/services/service.ts

@@ -1,5 +1,5 @@
-import { inspectorServer } from '@react-dev-inspector/vite-plugin';
 import react from '@vitejs/plugin-react-swc';
+import { codeInspectorPlugin } from 'code-inspector-plugin';
 import { resolve } from 'node:path';
 import process from 'node:process';
 import { ConfigEnv, UserConfig, defineConfig, loadEnv } from 'vite';
@@ -13,10 +13,15 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     plugins: [
       react(),
       /**
-       * 点击页面元素，IDE直接打开对应代码插件（本项目配置的快捷键是：ctrl+alt+q，详见main.tsx）
-       * @see https://github.com/zthxxx/react-dev-inspector
+       * 在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
+       * Mac 默认组合键 Option + Shift
+       * Windows 默认组合键 Alt + Shift
+       * 更多用法看 https://inspector.fe-dev.cn/guide/start.html
        */
-      inspectorServer(),
+      codeInspectorPlugin({
+        bundler: 'vite',
+        hideConsole: true,
+      }),
       // 在浏览器中直接看到上报的类型错误（更严格的类型校验）
       checker({
         typescript: true,