feat: show total quota consumption only when user click (songquanpeng…

…#448) * feat: add toggleable visibility for total quota using an eye icon * chore: update implementation --------- Co-authored-by: JustSong <[email protected]>
kjwlegend · Aug 19, 2023 · 1b56bec · 1b56bec
1 parent 23b1c63
commit 1b56bec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -520,5 +520,6 @@
   "代理": "Proxy",
   "此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com": "This is optional, used to make API calls through the proxy site, please enter the proxy site address, the format is: https://domain.com",
   "取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？": "Canceling password login will cause all users (including administrators) who have not bound other login methods to be unable to log in via password, confirm cancel?",
-  "按照如下格式输入：": "Enter in the following format:"
+  "按照如下格式输入：": "Enter in the following format:",
+  "点击查看": "click to view"
 }
diff --git a/web/src/components/LogsTable.js b/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(() => {
@@ -169,7 +176,7 @@ const LogsTable = () => {
     if (logs.length === 0) return;
     setLoading(true);
     let sortedLogs = [...logs];
-    if (typeof sortedLogs[0][key] === 'string'){
+    if (typeof sortedLogs[0][key] === 'string') {
       sortedLogs.sort((a, b) => {
         return ('' + a[key]).localeCompare(b[key]);
       });
@@ -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>
             {