update simulator (#48)

Author: wqcstrong

src/assets/image/device.svg

@@ -97,7 +97,8 @@
     "reference": "See detection rule"
   },
   "page": {
-    "element": "Element"
+    "element": "Element",
+    "device": "Device"
   },
   "storage": {
     "empty-detail": "Select one to preview its value"

src/assets/locales/en.json

@@ -97,7 +97,8 @@
     "reference": "查看检测规则"
   },
   "page": {
-    "element": "元素"
+    "element": "元素",
+    "device": "设备"
   },
   "storage": {
     "empty-detail": "选择查看其中一项的值"

src/assets/locales/zh.json

@@ -54,6 +54,17 @@
     &-content {
       flex: 1;
     }
+    .mobile-frame {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &__body-content {
+        height: 90%;
+        aspect-ratio: 375 / 667;
+        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
+      }
+    }
     &-divider {
       position: relative;
       width: 2px;

src/pages/Devtools/BrowserFrame/index.less

@@ -1,14 +1,17 @@
 import type { PropsWithChildren } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useState } from 'react';
-import Icon from '@ant-design/icons';
+import Icon, { PicLeftOutlined, ReloadOutlined } from '@ant-design/icons';
 import { ReactComponent as CellularSVG } from '@/assets/image/cellular.svg';
 import { ReactComponent as BatterySVG } from '@/assets/image/battery.svg';
+import { ReactComponent as DeviceSVG } from '@/assets/image/device.svg';
 import './index.less';
 import { Button, Space, Spin } from 'antd';
 import { ElementPanel } from '../ElementPanel';
 import { useTranslation } from 'react-i18next';
 import { useSocketMessageStore } from '@/store/socket-message';
+import { resolveClientInfo } from '@/utils/brand';
+import useSearch from '@/utils/useSearch';
 
 function getTime() {
   const date = new Date();
@@ -41,6 +44,7 @@ export const PCFrame = ({
   const utilsRef = useRef<HTMLDivElement | null>(null);
   const xAxisRef = useRef(0);
   const [width, setWidth] = useState<string | number>('40%');
+
   useEffect(() => {
     if (!elementVisible) {
       return;
@@ -60,8 +64,8 @@ export const PCFrame = ({
       // `mousemove` not working when meet iframe
       clientIframe.style.pointerEvents = 'none';
       containerWidth = containerArea?.getBoundingClientRect().width || 0;
-      MAX_SIZE = containerWidth * 0.8;
-      MIN_SIZE = containerWidth * 0.2;
+      MAX_SIZE = containerWidth * 0.6;
+      MIN_SIZE = containerWidth * 0.4;
       rightWidth = utilsArea?.getBoundingClientRect().width || 0;
       const { clientX } = e;
       xAxisRef.current = clientX;
@@ -92,6 +96,16 @@ export const PCFrame = ({
       document.removeEventListener('mouseup', end);
     };
   }, [elementVisible]);
+
+  const [enableDevice, setEnableDevice] = useState(false);
+  const { version } = useSearch();
+  useEffect(() => {
+    const { osName } = resolveClientInfo(version);
+    if (['iPhone', 'iPad', 'Android'].indexOf(osName) >= 0) {
+      setEnableDevice(true);
+    }
+  }, [version]);
+
   return (
     <div className="pc-frame" ref={containerRef}>
       <div className="pc-frame__top">
@@ -108,6 +122,16 @@ export const PCFrame = ({
         <div className="pc-frame__top-right">
           <Space>
             <Button
+              type={elementVisible ? 'primary' : 'default'}
+              icon={<PicLeftOutlined />}
+              onClick={() => {
+                setElementVisible(!elementVisible);
+              }}
+            >
+              {t('element')}
+            </Button>
+            <Button
+              icon={<ReloadOutlined />}
               onClick={() => {
                 if (loading) return;
                 onRefresh();
@@ -116,18 +140,27 @@ export const PCFrame = ({
               {ct('refresh')}
             </Button>
             <Button
+              type={enableDevice ? 'primary' : 'default'}
+              icon={<Icon component={DeviceSVG} style={{ fontSize: 14 }} />}
               onClick={() => {
-                setElementVisible(!elementVisible);
+                setEnableDevice((state) => !state);
+                onRefresh();
               }}
             >
-              {t('element')}
+              {t('device')}
             </Button>
           </Space>
         </div>
       </div>
       <div className="pc-frame__body spin-container">
         <Spin spinning={loading} className="spin-controller" />
-        <div className="pc-frame__body-content">{children}</div>
+        {enableDevice ? (
+          <div className="mobile-frame">
+            <div className="mobile-frame__body-content">{children}</div>
+          </div>
+        ) : (
+          <div className="pc-frame__body-content">{children}</div>
+        )}
         {elementVisible && (
           <>
             <div className="pc-frame__body-divider" ref={dividerRef} />

src/pages/Devtools/BrowserFrame/index.tsx

@@ -35,24 +35,41 @@ export const MainContent = () => {
   }, [data]);
   useEffect(() => {
     const logType = [...data].pop()?.logType || '';
-    const isEval = logType === 'debug-eval';
+    const isDebug = ['debug-origin', 'debug-eval'].includes(logType);
     const evalError =
       data.length > 1 && data[data.length - 2].logType === 'debug-origin';
-    if (isEval || evalError) {
+    if (isDebug || evalError) {
       scrollToBottom();
     } else {
       const container = containerEl.current;
       if (!container) return;
 
-      const { offsetHeight, scrollTop, scrollHeight } = container;
+      const { offsetHeight, scrollHeight } = container;
       if (scrollHeight > offsetHeight) {
-        if (scrollTop + offsetHeight <= scrollHeight - 30) {
-          setNewTips(true);
-        }
+        setNewTips(true);
       }
     }
   }, [data, scrollToBottom]);
 
+  useEffect(() => {
+    const container = containerEl.current;
+    if (!container) return;
+
+    const fn = () => {
+      const { offsetHeight, scrollTop, scrollHeight } = container;
+      if (scrollHeight > offsetHeight) {
+        if (scrollTop + offsetHeight > scrollHeight - 30) {
+          setNewTips(false);
+        }
+      }
+    };
+
+    container.addEventListener('scrollend', fn);
+    return () => {
+      container.removeEventListener('scrollend', fn);
+    };
+  }, []);
+
   return (
     <div className="console-list" ref={containerEl}>
       {data.map((item) => (

src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx

@@ -1,10 +1,7 @@
 import { Empty } from 'antd';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { PCFrame, MobileFrame } from '../BrowserFrame';
+import { useEffect, useRef, useState } from 'react';
+import { PCFrame } from '../BrowserFrame';
 import './index.less';
-import React from 'react';
-import useSearch from '@/utils/useSearch';
-import { resolveClientInfo } from '@/utils/brand';
 import { useSocketMessageStore } from '@/store/socket-message';
 
 function insertStyle(doc: Document, text: string) {
@@ -21,30 +18,12 @@ const PagePanel = () => {
   ]);
   const [loading, setLoading] = useState(false);
   const frameRef = useRef<HTMLIFrameElement | null>(null);
-  const { version } = useSearch();
-  const os = useMemo(() => {
-    const { osName } = resolveClientInfo(version);
-    if (['iPhone', 'iPad'].indexOf(osName) >= 0) return 'iOS';
-    if (osName === 'Android') return 'Android';
-    return 'PC';
-  }, [version]);
 
   useEffect(() => {
     setLoading(true);
     refresh('page');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const FrameWrapper = useMemo(() => {
-    switch (os) {
-      case 'iOS':
-      case 'Android':
-        return ({ children, ...props }: any) =>
-          React.createElement(MobileFrame, { ...props, os }, children);
-      case 'PC':
-      default:
-        return PCFrame;
-    }
-  }, [os]);
 
   useEffect(() => {
     if (html) {
@@ -80,7 +59,7 @@ const PagePanel = () => {
   return (
     <div className="page-panel">
       <div className="page-panel__content">
-        <FrameWrapper
+        <PCFrame
           loading={loading}
           onRefresh={() => {
             setLoading(true);
@@ -95,7 +74,7 @@ const PagePanel = () => {
             sandbox="allow-same-origin"
             referrerPolicy="strict-origin-when-cross-origin"
           />
-        </FrameWrapper>
+        </PCFrame>
       </div>
     </div>
   );

src/pages/Devtools/PagePanel/index.tsx

@@ -69,7 +69,13 @@ const SystemPanel = memo(() => {
         >
           <Row>
             {noSupport.map((feature) => (
-              <Col span={8} key={feature.title}>
+              <Col
+                span={8}
+                xxl={{
+                  span: 6,
+                }}
+                key={feature.title}
+              >
                 <FeatureItem {...feature} />
               </Col>
             ))}
@@ -83,7 +89,7 @@ const SystemPanel = memo(() => {
             <Card>
               <Row>
                 {value.map((feature) => (
-                  <Col span={8} key={feature.title}>
+                  <Col span={8} xxl={{ span: 6 }} key={feature.title}>
                     <FeatureItem {...feature} />
                   </Col>
                 ))}

src/pages/Devtools/SystemPanel/index.tsx

@@ -748,7 +748,7 @@
 
 "@huolala-tech/page-spy@^1.3.0":
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy/-/page-spy-1.3.0.tgz#9bc75341c0158efdf8400ddb036c5afd83657446"
+  resolved "https://registry.npmjs.org/@huolala-tech/page-spy/-/page-spy-1.3.0.tgz#9bc75341c0158efdf8400ddb036c5afd83657446"
   integrity sha512-ivIVyHz0uyep96bsoPQHn+o30nOEwlwXoQ8rTxVv5E5I23fItdNAa827k2ZcUHbVnf7CaBWQa9DzPteNou9NdQ==
   dependencies:
     "@babel/runtime" "^7.13.0"