Display a notification when the request fails

src/contexts/auth/index.tsx

@@ -1,7 +1,7 @@
 import Loader from "@/components/loader";
 import React, {createContext, useEffect, useReducer} from "react";
 import {auth, getUserInfo} from "@/service/api/user.ts";
-import {setAuthToken} from "@/hooks/useAuth.ts";
+import {getAuthToken, setAuthToken} from "@/hooks/useAuth.ts";
 import {getRoleByDepartName} from "@/contexts/auth/role.ts";
 
 
@@ -62,6 +62,15 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
 
     // MOCK INIT DATA
     const init = async () => {
+        const token = getAuthToken();
+        if(!token){
+            dispatch({
+                payload: {
+                    isInitialized: true,
+                }
+            })
+            return 'initialized'
+        }
         getUserInfo().then(user => {
             dispatch({
                 action: 'init',

src/i18n/translations/en.json

@@ -3,9 +3,11 @@
     "bill_number": "Bill Number",
     "btn_search_submit": "Search",
     "close": "Close",
+    "operate_fail": "Operation failed",
     "please_enter": "Please Enter",
     "please_select": "Please Select",
     "qr-code": "QRCode",
+    "query_bill": "Failed to query bill:",
     "student_number": "Student Number"
   },
   "bill": {

src/i18n/translations/sc.json

@@ -3,9 +3,11 @@
     "bill_number": "账单编号",
     "btn_search_submit": "搜索",
     "close": "关闭",
+    "operate_fail": "操作失败",
     "please_enter": "请输入",
     "please_select": "请选择",
     "qr-code": "二维码",
+    "query_bill": "查询账单失败:",
     "student_number": "学号"
   },
   "bill": {

src/i18n/translations/tc.json

@@ -3,9 +3,11 @@
     "bill_number": "帳單編號",
     "btn_search_submit": "搜尋",
     "close": "關閉",
+    "operate_fail": "操作失敗",
     "please_enter": "請輸入",
     "please_select": "請選擇",
     "qr-code": "QRCode",
+    "query_bill": "查詢帳單失敗:",
     "student_number": "學號"
   },
   "bill": {

src/pages/auth/login.tsx

@@ -1,4 +1,4 @@
-import {Space, Spin, Typography} from "@douyinfe/semi-ui";
+import {Space, Spin, Toast, Typography} from "@douyinfe/semi-ui";
 import {useTranslation} from 'react-i18next';
 import {useEffect} from "react";
 import {useSetState} from "ahooks";
@@ -9,7 +9,7 @@ import useConfig from "@/hooks/useConfig.ts";
 import AppLogo from "@/assets/AppLogo";
 import useAuth from "@/hooks/useAuth.ts";
 import {getAppUrl} from "@/hooks/useAppUrl";
-
+import {BizError} from "@/service/types.ts";
 
 const LoginContainer = styled.div({
     backgroundColor: '#fff',
@@ -57,7 +57,11 @@ const AuthLogin = ({type}:{type?:'auth'|'login'}) => {
             // 授权回调
             login(code, state).then(() => {
                 navigate('/dashboard')
-            }).catch(() => {
+            }).catch((e:BizError) => {
+                Toast.error({
+										content:`Auth Error:${e.message}`,
+										duration: 3,
+                })
                 // 获取登录凭证失败 重新显示登录按钮
                 setTimeout(() => {
                     setState({showLogin: true})
@@ -65,7 +69,7 @@ const AuthLogin = ({type}:{type?:'auth'|'login'}) => {
             }).finally(() => {
                 setTimeout(() => {
                     setState({loading: false})
-                }, 2000)
+                }, 1500)
             })
         } else {
             // 正常登录 - 显示登录按钮

src/pages/bill/query.tsx

@@ -1,4 +1,4 @@
-import {Button, Modal, Notification, Popconfirm, Space} from "@douyinfe/semi-ui";
+import {Button, Modal, Notification, Popconfirm, Space, Toast} from "@douyinfe/semi-ui";
 import {useState} from "react";
 import {useRequest} from "ahooks";
 import {useTranslation} from "react-i18next";
@@ -7,7 +7,7 @@ import {BillList} from "@/components/bill/list.tsx";
 import SearchForm from "@/components/bill/search-form.tsx";
 import BillDetail from "@/components/bill/detail.tsx";
 import {billList, BillQueryParams, cancelBill} from "@/service/api/bill.ts";
-import {BillStatus} from "@/service/types.ts";
+import {BillStatus, BizError} from "@/service/types.ts";
 import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
 import useAuth from "@/hooks/useAuth.ts";
 
@@ -37,6 +37,11 @@ const BillQuery = () => {
         cancelBill(bill.id).then(() => {
             Notification.success({title: 'Notice', content: t('bill.cancel_success')})
             refresh()
+        }).catch((e:BizError) => {
+            Toast.error({
+                content: `${t('base.operate_fail')}:${e.message}`,
+                duration: 3
+            })
         })
     }
     const operation = (bill: BillModel) => {

src/pages/bill/reconciliation.tsx

@@ -1,5 +1,5 @@
-import {Button, Space, TabPane, Tabs, Notification, Popconfirm} from "@douyinfe/semi-ui";
-import {useRequest} from "ahooks";
+import {Button, Space, TabPane, Tabs, Notification, Popconfirm, Toast} from "@douyinfe/semi-ui";
+import {useRequest, useSetState} from "ahooks";
 import {useTranslation} from "react-i18next";
 import {useState} from "react";
 
@@ -7,6 +7,7 @@ import SearchForm from "@/components/bill/search-form.tsx";
 import {BillList} from "@/components/bill/list.tsx";
 import {billList, BillQueryParams, confirmBills} from "@/service/api/bill.ts";
 import useAuth from "@/hooks/useAuth.ts";
+import {BizError} from "@/service/types.ts";
 
 const BillReconciliation = () => {
     const {t} = useTranslation()
@@ -19,19 +20,34 @@ const BillReconciliation = () => {
         status: 'PAID',
         department: user?.department == 'RO' ? 'RO' : 'FO',
     }), {
-        refreshDeps: [queryParams]
+        refreshDeps: [queryParams],
+        onError: (e:Error) => {
+            Toast.error({
+                content: `${t('base.query_bill')}:${e.message}`,
+                duration: 3
+            })
+        }
     })
 
     const [selectKeys, setSelectedKeys] = useState<(string | number)[]>([])
+    const [state,setState] = useSetState({
+        checkingId: -1
+    })
     const confirmBill = (records: number[]) => {
         if (records.length == 0) {
             Notification.error({title: 'Notice', content: t('bill.confirm_select_empty')})
             return
         }
+        setState({checkingId: records.length > 1 ? 0 : records[0] })
         confirmBills(records).then(() => {
             Notification.success({title: 'Notice', content: t('bill.confirm_success')})
             refresh()
-        })
+        }).catch((e:BizError) => {
+            Toast.error({
+                content: `${t('base.operate_fail')}:${e.message}`,
+                duration: 3
+            })
+        }).finally(() => {setState({checkingId: -1})})
     }
     const operation = (_record: BillModel) => {
         return (<Space>
@@ -40,7 +56,7 @@ const BillReconciliation = () => {
                 content={t('bill.confirm_confirm_title')}
                 onConfirm={() => confirmBill([_record.id])}
             >
-                <Button size={'small'} theme={'solid'}
+                <Button loading={state.checkingId == _record.id} size={'small'} theme={'solid'}
                         type={'primary'}>{t('bill.confirm')}</Button>
             </Popconfirm>
         </Space>)