feat: api请求

.env.development

-FOO=hellodev
-BAR=2
+MODE=dev

.env.production

-FOO=helloprod
-BAR=3
+MODE='prod'

.env.sit

-FOO=hellosit
-BAR=1
+MODE='sit'

package.json

@@ -40,8 +40,9 @@
   },
   "dependencies": {
     "@nextui-org/react": "^2.4.6",
-    "@reactuses/core": "^5.0.19",
     "@virtuoso.dev/message-list": "^1.8.3",
+    "ahooks": "^3.8.0",
+    "axios": "^1.7.3",
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

rsbuild.config.ts

@@ -3,9 +3,17 @@ import { pluginReact } from '@rsbuild/plugin-react'
 import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { pluginLess } from '@rsbuild/plugin-less'
 import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules'
-import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin' // https://rsdoctor.dev/zh/guide/start/quick-start
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'
+import type { EnvConfKey } from './src/config/env'
+import { envConf } from './src/config/env' // https://rsdoctor.dev/zh/guide/start/quick-start
 
-const isProd = process.env.NODE_ENV === 'production'
+const mode = process.env.MODE as EnvConfKey
+
+const proxyUrl = envConf[mode].proxyUrl || ''
+
+const apiUrl = envConf[mode].apiUrl || ''
+
+const isProd = mode === 'prod'
 
 export default defineConfig({
   plugins: [
@@ -59,10 +67,19 @@ export default defineConfig({
   },
   source: {
     // 与源代码解析、编译方式相关的选项
+    define: {
+      'import.meta.env.MODE': JSON.stringify(process.env.MODE),
+    },
   },
   server: {
     // 与 Rsbuild 服务器有关的选项
     // 在本地开发和预览时都会生效
+    proxy: {
+      [apiUrl]: {
+        target: proxyUrl,
+        pathRewrite: { [`^${apiUrl}`]: '' },
+      },
+    },
   },
   security: {
     // 与 Web 安全有关的选项

src/api/home.ts

+import http from '@/utils/request'
+
+/**
+ * 查询推荐问题列表
+ * @params
+ */
+export function fetchRecommendQuestionList() {
+  return http.post('/config-center/api/question/mobile/v1/get_recommend_question_list')
+}

src/config/env.ts

+export const envConf = {
+  dev: {
+    apiUrl: '/api',
+    proxyUrl: 'https://sit-sdream.insurbank.cn/sdream-api',
+  },
+  sit: {
+    apiUrl: '/api',
+    proxyUrl: 'https://sit-sdream.insurbank.cn/sdream-api',
+  },
+  prod: {
+    apiUrl: '/api',
+    proxyUrl: 'https://sit-sdream.insurbank.cn/sdream-api',
+  },
+}
+
+export type EnvConfKey = 'dev' | 'sit' | 'prod'

src/layouts/MainLayout/MainLayout.tsx

 import type React from 'react'
 import { motion } from 'framer-motion'
-import { useToggle } from '@reactuses/core'
+import { useToggle } from 'ahooks'
 import { Navbar } from '../Navbar'
 import { HistoryBar } from '../HistoryBar/HistoryBar'
 import styles from './MainLayout.module.less'
@@ -10,7 +10,7 @@ interface MainLayoutProps {
 }
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const [isHistoryVisible, toggleHistoryVisible] = useToggle(false)
+  const [isHistoryVisible, { toggle }] = useToggle()
   const contentVariants = {
     expanded: {
       width: '90px',
@@ -28,7 +28,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         variants={contentVariants}
         className={`h-full pl-[12px] flex items-center ${isHistoryVisible ? 'w-[340px]' : 'w-[90px]'}`}
       >
-        <Navbar isCollapsed={isHistoryVisible} onToggle={toggleHistoryVisible} />
+        <Navbar isCollapsed={isHistoryVisible} onToggle={toggle} />
         <HistoryBar isVisible={isHistoryVisible} />
       </motion.div>
       <motion.div

src/pages/Home/Home.tsx

 import type React from 'react'
 import { Virtuoso } from 'react-virtuoso'
+import { useEffect } from 'react'
 import styles from './Home.module.less'
 import { QuestionList } from './components/QuestionList'
 import { WelcomeWord } from './components/WelcomeWord'
@@ -17,14 +18,16 @@ export const Home: React.FC = () => {
     '直接开始问吧！',
     '保险公司偿付能力在哪里可以看？',
   ]
-  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  //   e.preventDefault()
-  //   // console.log(e.target.value)
-  // }
-  // const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  //   e.preventDefault()
-  //   // console.log('submitted')
+
+  // async function getRecommendQuestionList() {
+  //   const res = await fetchRecommendQuestionList()
+  //   console.log(res)
   // }
+
+  useEffect(() => {
+    // getRecommendQuestionList()
+  }, [])
+
   return (
     <div className={styles.homePage}>
       <GradientBackground />

src/utils/request.ts

+import axios from 'axios'
+import type {
+  AxiosError,
+  AxiosRequestConfig,
+  AxiosResponse,
+} from 'axios'
+import type { EnvConfKey } from '@/config/env'
+import { envConf } from '@/config/env'
+
+export interface Response<T> {
+  data: T
+  config: AxiosRequestConfig
+}
+
+export interface ResponseData<T = any> {
+  code: string
+  message: string
+  data: T
+  ok: boolean
+}
+
+const mode = import.meta.env.MODE as EnvConfKey
+
+const service = axios.create({
+  timeout: 300000,
+  baseURL: envConf[mode].apiUrl,
+})
+
+service.interceptors.request.use(
+  (config: any) => {
+    config.headers = {
+      'X-Token': window.localStorage.getItem('__TOKEN__') || '',
+      'X-Request-Id': `${Date.now()}${Math.random().toString(36).substring(2)}`,
+      'X-Request-By': config.url,
+      // 'X-App-Type': getAppType() || '',
+      // 'X-Channel-Code': getChannelCode() || '',
+    }
+    return config
+  },
+  (error: AxiosError) => {
+    // showToast(error.message)
+    return Promise.reject(error)
+  },
+)
+
+service.interceptors.response.use(
+  (response: AxiosResponse<any, Response<ResponseData>>) => {
+    const { code, message } = response.data
+    if (response.config.responseType === 'stream')
+      return response
+
+    if (code === '00000000') {
+      return response.data
+    }
+    else if (code === '00000005') {
+      // 处理登录失效
+    }
+    else {
+      // showToast(message)
+      return Promise.reject(new Error(message))
+    }
+  },
+  (error: AxiosError) => {
+    // showToast('网络请求异常')
+    return Promise.reject(error)
+  },
+)
+
+/* 导出封装的请求方法 */
+export const http = {
+  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return service.get(url, config)
+  },
+
+  post<T = any>(
+    url: string,
+    data?: object,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return service.post(url, data, config)
+  },
+
+  put<T = any>(
+    url: string,
+    data?: object,
+    config?: AxiosRequestConfig,
+  ): Promise<T> {
+    return service.put(url, data, config)
+  },
+
+  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return service.delete(url, config)
+  },
+}
+
+/* 导出 axios 实例 */
+export default service