feat: add total entries in indexedDB

Author: blucas.wu

src/assets/locales/en.json

@@ -107,7 +107,8 @@
   "storage": {
     "empty-detail": "Select one to preview its value",
     "entries-be-modified": "Some entries have been modified",
-    "data-be-stale": "Data may be stale"
+    "data-be-stale": "Data may be stale",
+    "total-entries": "Total entries"
   },
   "socket": {
     "client-name": "Client",

src/assets/locales/ja.json

@@ -107,7 +107,8 @@
   "storage": {
     "empty-detail": "値を表示するアイテムを選択",
     "entries-be-modified": "一部のエントリが変更されました",
-    "data-be-stale": "データが古くなっている可能性があります"
+    "data-be-stale": "データが古くなっている可能性があります",
+    "total-entries": "合計エントリー"
   },
   "socket": {
     "client-name": "クライアント",

src/assets/locales/ko.json

@@ -107,7 +107,8 @@
   "storage": {
     "empty-detail": "값을 볼 항목을 선택하십시오.",
     "entries-be-modified": "일부 항목이 수정되었습니다",
-    "data-be-stale": "데이터가 오래되었을 수 있습니다"
+    "data-be-stale": "데이터가 오래되었을 수 있습니다",
+    "total-entries": "총 항목"
   },
   "socket": {
     "client-name": "클라이언트",

src/assets/locales/zh.json

@@ -107,7 +107,8 @@
   "storage": {
     "empty-detail": "选择查看其中一项的值",
     "entries-be-modified": "一些条目可能已经被修改",
-    "data-be-stale": "数据可能已经过时"
+    "data-be-stale": "数据可能已经过时",
+    "total-entries": "总记录数"
   },
   "socket": {
     "client-name": "客户端",

src/pages/Devtools/StoragePanel/TableContent/index.less

@@ -5,5 +5,12 @@
   flex-direction: column;
   .database-table {
     overflow: auto;
+    flex: 1;
+  }
+  .database-total-entries {
+    padding: 8px;
+    color: #666;
+    box-shadow: 0 -1px 1px 1px #eee;
+    z-index: 10;
   }
 }

src/pages/Devtools/StoragePanel/TableContent/index.tsx

@@ -352,6 +352,9 @@ export const DatabaseInfo = () => {
           render={(value) => <ReactJsonView source={value} maxTitleSize={50} />}
         />
       </Table>
+      <p className="database-total-entries">
+        {t('total-entries')}: {dbMsg?.total || 0}
+      </p>
     </div>
   );
 };