feat: add IndexedDB submenu in Storage panel (#51)

* update useEventListener hook

* update the timing of sending 'refresh' event

* adjust the 'storageMsg' state structure: change from 'map' to 'array'

* add MESSAGE_TYPE constants

* add 'databaseMsg' in store

* divide content into <StorageInfo/> and <DatabaseInfo />

* fill data into <DatabaseInfo />

* mv useCacheDetailStore in '@/store/cache-detail'

* notify entries have been modified

* upgrade sdk

* use cursor.key

* update store info

---------

Co-authored-by: blucas.wu <[email protected]>

Author: wqcstrong

package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@huolala-tech/page-spy": "^1.3.2",
+    "@huolala-tech/page-spy": "^1.4.0",
     "@mdx-js/rollup": "^2.3.0",
     "@types/lodash-es": "^4.17.7",
     "@types/mdx": "^2.0.4",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/react-json-view": "^1.1.0",
+    "@huolala-tech/react-json-view": "^1.2.2",
     "@huolala-tech/request": "^1.1.2",
     "ahooks": "^3.1.9",
     "antd": "^5.2.1",

src/assets/image/cookie.svg

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

src/assets/image/database.svg

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

src/assets/image/storage.svg

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

src/assets/locales/en.json

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

src/assets/locales/ja.json

@@ -6,6 +6,7 @@ import { ReactComponent as UserSvg } from '@/assets/image/user-1.svg';
 import Icon from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useSocketMessageStore } from '@/store/socket-message';
+import { CUSTOM_EVENT } from '@/store/socket-message/socket';
 
 interface ConnectionStatus {
   client?: SpySocket.Connection | null;
@@ -30,9 +31,9 @@ export const ConnectStatus = memo(() => {
       const { detail } = evt as CustomEvent<ConnectionStatus>;
       setConnections(detail);
     };
-    socket.addEventListener('connect-status', statusListener);
+    socket.addEventListener(CUSTOM_EVENT.ConnectStatus, statusListener);
     return () => {
-      socket.removeEventListener('connect-status', statusListener);
+      socket.removeEventListener(CUSTOM_EVENT.ConnectStatus, statusListener);
     };
   }, [socket]);
 

src/assets/locales/ko.json

@@ -19,12 +19,6 @@ const PagePanel = () => {
   const [loading, setLoading] = useState(false);
   const frameRef = useRef<HTMLIFrameElement | null>(null);
 
-  useEffect(() => {
-    setLoading(true);
-    refresh('page');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (html) {
       const frameDocument = frameRef.current!.contentDocument;

src/assets/locales/zh.json

@@ -0,0 +1,9 @@
+.database-info {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .database-table {
+    overflow: auto;
+  }
+}