feat(status-bar): display quota information in status bar

src/layouts/StateBar.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import { Space, Tooltip } from 'antd';
+import Quota from '../pages/security/Quota';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setQuota } from '../states/security/quotaSlice';
+import { getQuota } from '../API/security/quotaActions';
 import {
   HddOutlined,
   WifiOutlined,
@@ -112,9 +117,39 @@ const StatusBar: React.FC<StatusBarProps> = ({
   wifiStrength,
   heatCapacity,
 }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchQuota = async () => {
+      try {
+        const response = await getQuota();
+        dispatch(
+          setQuota({
+            available: response.data.available,
+            total: response.data.total,
+          })
+        );
+      } catch (error) {
+        dispatch(
+          setQuota({
+            available: 0,
+            total: 0,
+          })
+        );
+        console.error('Failed to fetch quota:', error);
+      }
+    };
+
+    fetchQuota();
+    const intervalId = setInterval(fetchQuota, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [dispatch]);
+
   return (
     // <div className="flex justify-end p-2">
     <Space className="h-full">
+      <Quota />
       <DiskStatus status={diskStatus} />
       <BatteryStatus level={batteryLevel} />
       <WifiStatus strength={wifiStrength} />

src/pages/security/Quota.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Statistic } from 'antd';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../states/store';
+
+const Quota: React.FC = () => {
+  const availableQuota = useSelector(
+    (state: RootState) => state.quota.available
+  );
+  const totalQuota = useSelector((state: RootState) => state.quota.total);
+
+  return (
+    <Statistic
+      title="可用额"
+      value={availableQuota}
+      suffix={`/ ${totalQuota}`}
+    />
+  );
+};
+
+export default Quota;

src/states/security/quotaSlice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface QuotaState {
+  available: number;
+  total: number;
+}
+
+const initialState: QuotaState = {
+  available: 0,
+  total: 0,
+};
+
+const quotaSlice = createSlice({
+  name: 'quota',
+  initialState,
+  reducers: {
+    setQuota: (state, action: PayloadAction<QuotaState>) => {
+      state.available = action.payload.available;
+      state.total = action.payload.total;
+    },
+  },
+});
+
+export const { setQuota } = quotaSlice.actions;
+export default quotaSlice.reducer;

src/states/store.ts

@@ -38,6 +38,7 @@ import deviceAreaReducer from './exam/deviceAreaSlice';
 import historyPanelSwitchReducer from './patient/worklist/slices/historyPanelSwitchSlice';
 import panelSwitchForViewReducer from './panelSwitchSliceForView';
 import quotaModalReducer from './security/quotaModalSlice';
+import quotaReducer from './security/quotaSlice';
 
 const store = configureStore({
   reducer: {
@@ -71,6 +72,7 @@ const store = configureStore({
     historyPanelSwitch: historyPanelSwitchReducer,
     panelSwitchForView: panelSwitchForViewReducer,
     quotaModal: quotaModalReducer,
+    quota: quotaReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(