feat: add key and url check

add min size, and perf some detail

Author: moonrailgun

package.json

@@ -98,12 +98,14 @@
     "electron-log": "^4.4.8",
     "electron-updater": "^5.3.0",
     "immer": "^9.0.19",
+    "nanoid": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^6.8.0",
     "source-map-support": "^0.5.21",
     "styled-components": "^5.3.6",
+    "url-regex": "^5.0.0",
     "zustand": "^4.3.2"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -74,6 +74,8 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
+    minWidth: 800,
+    minHeight: 600,
     icon: getAssetPath('icon.png'),
     webPreferences: {
       preload: app.isPackaged

src/main/main.ts

@@ -46,6 +46,7 @@ export function initWebviewManager(win: BrowserWindow) {
       return;
     }
 
+    hideAllWebview();
     const view = new BrowserView({
       webPreferences: {
         nodeIntegration: false,
@@ -60,17 +61,17 @@ export function initWebviewManager(win: BrowserWindow) {
   ipcMain.on('update-webview-rect', (e, info) => {
     console.log('[update-webview-rect] info:', info);
 
-    Array.from(webviewMap.values()).forEach(({ view }) => {
-      view.setBounds(fixRect(info.rect));
-    });
+    const webview = webviewMap.get(info.key);
+    if (webview) {
+      webview.hidden = false;
+      webview.view.setBounds(fixRect(info.rect));
+    }
   });
 
   ipcMain.on('hide-all-webview', (e) => {
     console.log('[hide-all-webview]');
 
-    Array.from(webviewMap.values()).forEach((webview) => {
-      hideWebView(webview);
-    });
+    hideAllWebview();
   });
 
   ipcMain.on('clear-all-webview', (e) => {
@@ -122,3 +123,9 @@ function hideWebView(webview: WebviewInfo) {
     y: oldBounds.y + HIDDEN_OFFSET,
   });
 }
+
+function hideAllWebview() {
+  Array.from(webviewMap.values()).forEach((webview) => {
+    hideWebView(webview);
+  });
+}

src/main/webviewManager.ts

@@ -1,26 +1,20 @@
-import { Button, Modal } from '@arco-design/web-react';
-import React, { useState } from 'react';
-import { generateFakeNode, useTreeStore } from '../store/tree';
+import { Button } from '@arco-design/web-react';
+import React from 'react';
+import { generateDefaultNode, useTreeStore } from '../store/tree';
 
 export const AddWebsiteBtn: React.FC = React.memo(() => {
   const { addTreeNode } = useTreeStore();
-  const [visible, setVisible] = useState(false);
 
   return (
     <>
       <Button
         long={true}
         onClick={() => {
-          // setVisible(true);
-          addTreeNode(generateFakeNode());
+          addTreeNode(generateDefaultNode());
         }}
       >
         Add Website
       </Button>
-
-      <Modal visible={visible} onCancel={() => setVisible(false)}>
-        <div>Fooo</div>
-      </Modal>
     </>
   );
 });

src/renderer/components/AddWebsiteBtn.tsx

@@ -1,7 +1,11 @@
 import { Menu, Tooltip, Tree, Trigger } from '@arco-design/web-react';
 import { IconDown, IconPlus } from '@arco-design/web-react/icon';
 import React from 'react';
-import { generateFakeNode, WebsiteTreeNode, useTreeStore } from '../store/tree';
+import {
+  generateDefaultNode,
+  WebsiteTreeNode,
+  useTreeStore,
+} from '../store/tree';
 import { AddWebsiteBtn } from './AddWebsiteBtn';
 import styled from 'styled-components';
 import { ClearWebsiteBtn } from './ClearWebsiteBtn';
@@ -102,7 +106,7 @@ export const SideTree: React.FC = React.memo(() => {
                   return;
                 }
 
-                addTreeNodeChildren(node._key!, generateFakeNode());
+                addTreeNodeChildren(node._key!, generateDefaultNode());
               }}
             />
           );

src/renderer/components/SideTree.tsx

@@ -2,7 +2,9 @@ import { Input } from '@arco-design/web-react';
 import React from 'react';
 import styled from 'styled-components';
 import { useTreeStore } from '../../store/tree';
+import { isValidUrl } from '../../utils';
 import { useEditValue } from '../../utils/hooks/useEditValue';
+import { WebInvalidUrl } from './WebInvalidUrl';
 import { WebPlaceholder } from './WebPlaceholder';
 import { WebviewRender } from './WebviewRender';
 
@@ -56,7 +58,11 @@ export const WebContent: React.FC = React.memo(() => {
         />
       </div>
       <div className="main">
-        <WebviewRender node={selectedNode} />
+        {isValidUrl(selectedNode.url) ? (
+          <WebviewRender node={selectedNode} />
+        ) : (
+          <WebInvalidUrl />
+        )}
       </div>
     </Root>
   );

src/renderer/components/main/WebContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+import webpageSvg from '../../assets/web-page.svg';
+
+const WebInvalidUrlRoot = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  flex-direction: column;
+
+  img {
+    width: 120px;
+  }
+`;
+
+export const WebInvalidUrl: React.FC = React.memo(() => {
+  useEffect(() => {
+    window.electron.ipcRenderer.sendMessage('hide-all-webview');
+  }, []);
+
+  return (
+    <WebInvalidUrlRoot>
+      <div>
+        <img src={webpageSvg} />
+      </div>
+      <div>Please input valid url to load Url</div>
+    </WebInvalidUrlRoot>
+  );
+});
+WebInvalidUrl.displayName = 'WebInvalidUrl';

src/renderer/components/main/WebInvalidUrl.tsx

@@ -28,7 +28,7 @@ export const WebPlaceholder: React.FC = React.memo(() => {
       <div>
         <img src={webpageSvg} />
       </div>
-      <div>Please Select Any Page on Left</div>
+      <div>Please Select Any Page on Left Website Tree</div>
       <div>
         <small>OR</small>
       </div>

src/renderer/components/main/WebPlaceholder.tsx

@@ -40,6 +40,7 @@ export const WebviewRender: React.FC<{ node: WebsiteTreeNode }> = React.memo(
           const rect = target.getBoundingClientRect();
 
           window.electron.ipcRenderer.sendMessage('update-webview-rect', {
+            key: node.key,
             rect: {
               x: rect.x,
               y: rect.y,