feat: show total quota consumption only when user click (#448)

* feat: add toggleable visibility for total quota using an eye icon

* chore: update implementation

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

i18n/en.json

@@ -609,5 +609,6 @@
 
   "警告": "Warning",
   "确定": "Confirm",
-  "。": "."
+  "。": ".",
+  "点击查看": "click to view"
 }

web/src/components/LogsTable.js

@@ -43,6 +43,7 @@ function renderType(type) {
 
 const LogsTable = () => {
   const [logs, setLogs] = useState([]);
+  const [showStat, setShowStat] = useState(false);
   const [loading, setLoading] = useState(true);
   const [activePage, setActivePage] = useState(1);
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -92,6 +93,17 @@ const LogsTable = () => {
     }
   };
 
+  const handleEyeClick = async () => {
+    if (!showStat) {
+      if (isAdminUser) {
+        await getLogStat();
+      } else {
+        await getLogSelfStat();
+      }
+    }
+    setShowStat(!showStat);
+  };
+
   const loadLogs = async (startIdx) => {
     let url = '';
     let localStartTimestamp = Date.parse(start_timestamp) / 1000;
@@ -129,13 +141,8 @@ const LogsTable = () => {
 
   const refresh = async () => {
     setLoading(true);
-    setActivePage(1)
+    setActivePage(1);
     await loadLogs(0);
-    if (isAdminUser) {
-      getLogStat().then();
-    } else {
-      getLogSelfStat().then();
-    }
   };
 
   useEffect(() => {
@@ -190,7 +197,12 @@ const LogsTable = () => {
   return (
     <>
       <Segment>
-        <Header as='h3'>使用明细（总消耗额度：{renderQuota(stat.quota)}）</Header>
+        <Header as='h3'>
+          使用明细（总消耗额度：
+          {showStat && renderQuota(stat.quota)}
+          {!showStat && <span onClick={handleEyeClick} style={{ cursor: 'pointer', color: 'gray' }}>点击查看</span>}
+          ）
+        </Header>
         <Form>
           <Form.Group>
             {