dros/src/pages/security/Quota.tsx

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;