@electerm/electerm-react 2.3.126 → 2.3.151

package/client/components/widgets/widget-control.jsx

@@ -0,0 +1,64 @@
+/**
+ * Widget control component - shows form for a selected widget
+ */
+import React, { useState } from 'react'
+import WidgetForm from './widget-form'
+import {
+  message
+} from 'antd'
+
+export default function WidgetControl ({ formData }) {
+  const [loading, setLoading] = useState(false)
+  const widget = formData
+  if (!widget.id) {
+    return (
+      <div className='widget-control-empty aligncenter pd3'>
+        <p>Select a widget to configure</p>
+      </div>
+    )
+  }
+
+  const handleFormSubmit = async (config) => {
+    setLoading(true)
+    try {
+      const result = await window.store.runWidget(widget.id, config)
+      const {
+        instanceId,
+        success,
+        error,
+        msg
+      } = result
+      if (!instanceId) {
+        if (success === false) {
+          message.error('Failed to run widget', error || '')
+        } else {
+          message.success(msg || 'Widget run successfully')
+        }
+        return
+      }
+      // Add instance to the store
+      const instance = {
+        id: result.instanceId,
+        title: `${widget.info.name} (${result.instanceId})`,
+        widgetId: result.widgetId,
+        serverInfo: result.serverInfo,
+        config
+      }
+      window.store.widgetInstances.push(instance)
+    } catch (err) {
+      console.error('Failed to run widget:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className='widget-control'>
+      <WidgetForm
+        widget={widget}
+        onSubmit={handleFormSubmit}
+        loading={loading}
+      />
+    </div>
+  )
+}

package/client/components/widgets/widget-form.jsx

@@ -0,0 +1,115 @@
+/**
+ * Widget form component
+ */
+import React from 'react'
+import { Form, Input, InputNumber, Switch, Select, Button, message } from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+
+export default function WidgetForm ({ widget, onSubmit, loading }) {
+  const [form] = Form.useForm()
+
+  if (!widget) {
+    return null
+  }
+
+  const { info } = widget
+  const { configs, type } = info
+  const isInstanceWidget = type === 'instance'
+  const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
+
+  const handleSubmit = async (values) => {
+    try {
+      await onSubmit(values)
+      message.success('Widget started successfully')
+    } catch (error) {
+      message.error('Failed to start widget: ' + error.message)
+    }
+  }
+
+  const renderFormItem = (config) => {
+    const { name, type, description, choices } = config
+    let control = null
+
+    switch (type) {
+      case 'string':
+        control = <Input placeholder={description} />
+        break
+      case 'number':
+        control = <InputNumber style={{ width: '100%' }} placeholder={description} />
+        break
+      case 'boolean':
+        return (
+          <Form.Item
+            key={name}
+            {...formItemLayout}
+            label={name}
+            name={name}
+            valuePropName='checked'
+            tooltip={description}
+          >
+            <Switch />
+          </Form.Item>
+        )
+      default:
+        control = <Input placeholder={description} />
+    }
+
+    if (choices && choices.length > 0) {
+      control = (
+        <Select placeholder={description}>
+          {choices.map(choice => (
+            <Select.Option key={choice} value={choice}>
+              {choice}
+            </Select.Option>
+          ))}
+        </Select>
+      )
+    }
+
+    return (
+      <Form.Item
+        key={name}
+        {...formItemLayout}
+        label={name}
+        name={name}
+        tooltip={description}
+      >
+        {control}
+      </Form.Item>
+    )
+  }
+
+  const initialValues = configs.reduce((acc, config) => {
+    acc[config.name] = config.default
+    return acc
+  }, {})
+
+  return (
+    <div className='widget-form'>
+      <div className='pd1b'>
+        <h4>{info.name}</h4>
+        <p>{info.description}</p>
+      </div>
+      <Form
+        form={form}
+        onFinish={handleSubmit}
+        initialValues={initialValues}
+        layout='horizontal'
+      >
+        {configs.map(renderFormItem)}
+        <Form.Item
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+            loading={loading}
+            disabled={loading}
+          >
+            {txt}
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+}

package/client/components/widgets/widget-instance.jsx

@@ -0,0 +1,46 @@
+import { Popconfirm } from 'antd'
+import { CloseOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default function WidgetInstance ({ item }) {
+  const { id, title } = item
+  const cls = 'item-list-unit'
+  const delProps = {
+    title: e('del'),
+    className: 'pointer list-item-remove'
+  }
+  const icon = (
+    <CloseOutlined
+      {...delProps}
+    />
+  )
+  function onConfirm () {
+    window.store.stopWidget(id)
+  }
+  const popProps = {
+    title: e('del') + '?',
+    onConfirm,
+    okText: e('del'),
+    cancelText: e('cancel'),
+    placement: 'top'
+  }
+  return (
+    <div
+      key={id}
+      className={cls}
+    >
+      <div
+        title={title}
+        className='elli pd1y pd2x list-item-title'
+      >
+        {title}
+      </div>
+      <Popconfirm
+        {...popProps}
+      >
+        {icon}
+      </Popconfirm>
+    </div>
+  )
+}

package/client/components/widgets/widget-instances.jsx

@@ -0,0 +1,10 @@
+import WidgetInstance from './widget-instance'
+
+export default function WidgetInstances ({ widgetInstances }) {
+  return widgetInstances.map(item => (
+    <WidgetInstance
+      key={item.id}
+      item={item}
+    />
+  ))
+}

package/client/components/widgets/widgets-list.jsx

@@ -0,0 +1,155 @@
+/**
+ * widgets list
+ */
+import React, { useState, useEffect } from 'react'
+import {
+  Input,
+  Tabs
+} from 'antd'
+import WidgetInstances from './widget-instances'
+import classnames from 'classnames'
+import highlight from '../common/highlight'
+import {
+  auto
+} from 'manate/react'
+
+const e = window.translate
+
+export default auto(function WidgetsList ({ activeItemId, store }) {
+  const { widgetInstances } = store
+  const [tab, setTab] = useState('widgets') // or instances
+  const [widgets, setWidgets] = useState([])
+  const [keyword, setKeyword] = useState('')
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setReady(true)
+    }, 200)
+    loadWidgets()
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  const loadWidgets = async () => {
+    try {
+      const widgets = await window.store.listWidgets()
+      setWidgets(widgets)
+    } catch (error) {
+      console.error('Failed to load widgets:', error)
+    }
+  }
+
+  const handleSearch = (e) => {
+    setKeyword(e.target.value)
+  }
+
+  const handleTabChange = (key) => {
+    setTab(key)
+  }
+
+  const onClickWidget = (widget) => {
+    window.store.setSettingItem(widget)
+  }
+
+  const renderWidgetItem = (widget, i) => {
+    const title = widget.info.name
+    const tag = ''
+    const cls = classnames(
+      'item-list-unit',
+      {
+        active: activeItemId === widget.id
+      }
+    )
+    const titleHighlight = highlight(
+      title,
+      keyword
+    )
+    return (
+      <div
+        key={widget.id}
+        className={cls}
+        onClick={() => onClickWidget(widget)}
+      >
+        <div
+          title={title}
+          className='elli pd1y pd2x list-item-title'
+        >
+          {tag}{titleHighlight || e('new')}
+        </div>
+      </div>
+    )
+  }
+
+  const renderWidgetsList = () => {
+    const filteredWidgets = keyword
+      ? widgets.filter(widget => widget.info.name.toLowerCase().includes(keyword.toLowerCase()))
+      : widgets
+
+    return (
+      <div className='item-list item-type-widgets'>
+        <div className='pd1y'>
+          <Input.Search
+            type='text'
+            placeholder='Search widgets...'
+            value={keyword}
+            onChange={handleSearch}
+            className='form-control'
+          />
+        </div>
+        <div className='item-list-wrap pd1y'>
+          {filteredWidgets.map(renderWidgetItem)}
+        </div>
+      </div>
+    )
+  }
+
+  const renderTabs = () => {
+    const instancesTag = e('runningInstances') + ` (${widgetInstances.length})`
+    const items = [
+      {
+        key: 'widgets',
+        label: e('widgets'),
+        children: null
+      },
+      {
+        key: 'instances',
+        label: instancesTag,
+        children: null
+      }
+    ]
+    return (
+      <Tabs
+        activeKey={tab}
+        onChange={handleTabChange}
+        items={items}
+      />
+    )
+  }
+
+  const renderInstancesSection = () => {
+    return (
+      <WidgetInstances
+        widgetInstances={widgetInstances}
+      />
+    )
+  }
+
+  if (!ready) {
+    return null
+  }
+
+  return (
+    <div>
+      {renderTabs()}
+      <div className='pd2x pd1y'>
+        {
+          tab === 'widgets'
+            ? renderWidgetsList()
+            : renderInstancesSection()
+        }
+      </div>
+    </div>
+  )
+})

package/client/store/init-state.js

@@ -190,6 +190,14 @@ export default () => {
     hasNodePty: window.pre.runSync('nodePtyCheck'),
     terminalFullScreen: false,
     hideDelKeyTip: ls.getItem(dismissDelKeyTipLsKey) === 'y',
-    tabsHeight: 36
+    tabsHeight: 36,
+
+    // widgets
+    widgets: [],
+    widgetInstances: [],
+    // move item
+    openMoveModal: false,
+    moveItem: null,
+    moveItemIsGroup: false
   }
 }

package/client/store/setting.js

@@ -91,9 +91,7 @@ export default Store => {
     ) {
       return store.hideSettingModal()
     }
-    store.storeAssign({
-      settingTab: settingMap.setting
-    })
+    store.settingTab = settingMap.setting
     store.setSettingItem(getInitItem([], settingMap.setting))
     store.openSettingModal()
   }

package/client/store/store.js

@@ -24,6 +24,7 @@ import transferHistoryExtend from './transfer-history'
 import batchInputHistory from './batch-input-history'
 import transferExtend from './transfer-list'
 import addressBookmarkExtend from './address-bookmark'
+import widgetsExtend from './widgets'
 import isColorDark from '../common/is-color-dark'
 import { getReverseColor } from '../common/reverse-color'
 import { uniq } from 'lodash-es'
@@ -295,5 +296,6 @@ transferHistoryExtend(Store)
 batchInputHistory(Store)
 transferExtend(Store)
 addressBookmarkExtend(Store)
+widgetsExtend(Store)
 
 export const StateStore = Store

package/client/store/widgets.js

@@ -0,0 +1,59 @@
+/**
+ * widgets related functions
+ */
+
+import {
+  message
+} from 'antd'
+import {
+  settingMap
+} from '../common/constants'
+import getInitItem from '../common/init-setting-item'
+
+export default Store => {
+  Store.prototype.listWidgets = async () => {
+    return window.pre.runGlobalAsync('listWidgets')
+  }
+
+  Store.prototype.runWidget = async (widgetId, config) => {
+    return window.pre.runGlobalAsync('runWidget', widgetId, config)
+  }
+
+  Store.prototype.deleteWidgetInstance = (instanceId) => {
+    const {
+      widgetInstances
+    } = window.store
+    const index = widgetInstances.findIndex(w => w.id === instanceId)
+    if (index > -1) {
+      widgetInstances.splice(index, 1)
+    }
+  }
+
+  Store.prototype.stopWidget = async (instanceId) => {
+    const {
+      store
+    } = window
+    const r = await window.pre.runGlobalAsync('stopWidget', instanceId)
+      .catch(err => {
+        console.error('stopWidget error', err)
+        message.error(window.translate('stopWidgetFailed') + ': ' + err.message)
+        return false
+      })
+    if (r) {
+      store.deleteWidgetInstance(instanceId)
+    }
+  }
+
+  Store.prototype.runWidgetFunc = async (instanceId, funcName, ...args) => {
+    return window.pre.runGlobalAsync('runWidgetFunc', instanceId, funcName, ...args)
+  }
+
+  Store.prototype.openWidgetsModal = () => {
+    const {
+      store
+    } = window
+    store.setSettingItem(getInitItem([], settingMap.widgets))
+    store.settingTab = settingMap.widgets
+    store.openSettingModal()
+  }
+}

package/package.json

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