@electerm/electerm-react 1.50.46 → 1.50.59

package/client/components/bookmark-form/web-form-ui.jsx

@@ -76,6 +76,18 @@ export default function LocalFormUi (props) {
           hasFeedback
           name='url'
           required
+          rules={[
+            {
+              required: true,
+              message: e('Please input URL')
+            },
+            {
+              validator: (_, value) =>
+                !value || value.startsWith('http://') || value.startsWith('https://')
+                  ? Promise.resolve()
+                  : Promise.reject(new Error(e('URL must start with http:// or https://')))
+            }
+          ]}
         >
           <Input />
         </FormItem>
@@ -98,6 +110,13 @@ export default function LocalFormUi (props) {
             showSearch
           />
         </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('useragent')}
+          name='useragent'
+        >
+          <Input />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/session/sessions.jsx

@@ -5,7 +5,6 @@ import { findIndex, pick } from 'lodash-es'
 import classNames from 'classnames'
 import generate from '../../common/id-with-stamp'
 import copy from 'json-deep-copy'
-import wait from '../../common/wait.js'
 import Tabs from '../tabs/index.jsx'
 import {
   tabActions,
@@ -146,7 +145,7 @@ class Sessions extends Component {
     })
   }
 
-  addTab = (_tab, _index) => {
+  addTab = (_tab, _index, callback) => {
     this.setState((oldState) => {
       const tabs = copy(oldState.tabs)
       const index = typeof _index === 'undefined'
@@ -167,6 +166,9 @@ class Sessions extends Component {
     }, () => {
       this.updateStoreTabs(this.state.tabs)
       this.updateStoreCurrentTabId(this.state.currentTabId)
+      if (callback) {
+        callback()
+      }
     })
   }
 
@@ -207,42 +209,38 @@ class Sessions extends Component {
     window.store.currentTabId = this.state.currentTabId
   }
 
-  reloadTab = async (tabToReload) => {
-    this.setState(async oldState => {
-      const tab = copy(
-        tabToReload
-      )
-      tab.pane = paneMap.terminal
-      const { id } = tab
-      const tabs = copy(oldState.tabs)
-      tab.id = generate()
-      tab.status = statusMap.processing
-      const index = findIndex(tabs, t => t.id === id)
-      this.addTab(tab, index)
-      await wait(30)
+  reloadTab = (tabToReload) => {
+    const tab = copy(
+      tabToReload
+    )
+    tab.pane = paneMap.terminal
+    const { id } = tab
+    const { tabs } = this.state
+    tab.id = generate()
+    tab.status = statusMap.processing
+    const index = findIndex(tabs, t => t.id === id)
+    this.addTab(tab, index, () => {
       this.delTab(id)
     })
   }
 
   onDuplicateTab = (tabToDup) => {
-    this.setState(oldState => {
-      const defaultStatus = statusMap.processing
-      let tab = copy(tabToDup)
-      updateCount(tab)
-      const tabs = copy(oldState.tabs)
-      const index = findIndex(
-        tabs,
-        d => d.id === tab.id
-      )
-      tab = {
-        ...tab,
-        status: defaultStatus,
-        id: generate(),
-        isTransporting: undefined
-      }
-      tab.pane = paneMap.terminal
-      this.addTab(tab, index + 1)
-    })
+    const defaultStatus = statusMap.processing
+    let tab = copy(tabToDup)
+    updateCount(tab)
+    const tabs = copy(this.state.tabs)
+    const index = findIndex(
+      tabs,
+      d => d.id === tab.id
+    )
+    tab = {
+      ...tab,
+      status: defaultStatus,
+      id: generate(),
+      isTransporting: undefined
+    }
+    tab.pane = paneMap.terminal
+    this.addTab(tab, index + 1)
   }
 
   onChangeTabId = id => {

package/client/components/web/web-session.jsx

@@ -1,4 +1,5 @@
 import AddressBar from './address-bar'
+// import React, { useEffect } from 'react'
 
 export default function WebSession (props) {
   const {
@@ -7,8 +8,10 @@ export default function WebSession (props) {
     height,
     reloadTab
   } = props
+  const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i
+  const url = urlRegex.test(tab.url) ? tab.url : 'https://' + tab.url
   const addrProps = {
-    url: tab.url,
+    url,
     title: tab.title,
     description: tab.description,
     onOpen: () => {
@@ -20,22 +23,62 @@ export default function WebSession (props) {
       )
     }
   }
-  const viewProps = {
-    src: tab.url,
-    style: {
-      width: (width - 10) + 'px',
-      height: (height - 12) + 'px'
-    },
-    disableblinkfeatures: 'true',
-    disablewebsecurity: 'true'
+
+  // TODO: 支持自定义Header和Cookie
+  // useEffect(() => {
+  //   const webview = document.querySelector('webview')
+  //   if (webview) {
+  //     // 添加事件监听，输出所有的事件
+  //     webview.addEventListener('did-start-loading', (e) => {
+  //       console.log('did-start-loading', e)
+  //     })
+  //   }
+  // }, []);
+
+  // 打开webview的开发者工具
+  // useEffect(() => {
+  //   const webview = document.querySelector('webview')
+  //   if (webview) {
+  //     webview.addEventListener('dom-ready', () => {
+  //       webview.openDevTools()
+  //     })
+  //   }
+  // }, [])
+
+  function renderView () {
+    if (window.et.isWebApp) {
+      const iframeProps = {
+        src: url,
+        style: {
+          width: (width - 10) + 'px',
+          height: (height - 12) + 'px'
+        }
+      }
+      return (
+        <iframe {...iframeProps} />
+      )
+    }
+    const viewProps = {
+      src: url,
+      style: {
+        width: (width - 10) + 'px',
+        height: (height - 12) + 'px'
+      },
+      disableblinkfeatures: 'true',
+      disablewebsecurity: 'true',
+      allowpopups: 'true',
+      useragent: tab.useragent || 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+    }
+    return (
+      <webview {...viewProps} />
+    )
   }
+
   return (
     <div className='web-session-wrap'>
       <AddressBar {...addrProps} />
       <div className='pd1'>
-        <webview
-          {...viewProps}
-        />
+        {renderView()}
       </div>
     </div>
   )

package/client/entry/{index.jsx → electerm.jsx}

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import 'antd/dist/reset.css'
 import '@xterm/xterm/css/xterm.css'
-import '../common/trzsz'
+import '../common/trzsz.js'
 import 'firacode/distr/fira_code.css'
 import Main from '../components/main/index.jsx'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.50.46",
+  "version": "1.50.59",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",