@ponydev/dsh-phone 0.3.1 → 0.4.0

package/lib/client.js

@@ -52,6 +52,24 @@ window.__ModuleLoader__.load({
       diagnostics: 'adb 诊断',
       quality: '显示清晰度',
       immersiveOn: '沉浸模式',
+      addDevice: '添加设备',
+      connectAndroid: '连接 Android 设备',
+      createIos: '创建 iOS 模拟器',
+      createHos: '创建鸿蒙模拟器',
+      hosImage: '系统镜像',
+      hosStarting: '正在启动鸿蒙模拟器…',
+      stopHos: '关闭鸿蒙模拟器',
+      deleteHos: '删除鸿蒙模拟器',
+      iosName: '名称',
+      iosDeviceType: '机型',
+      iosRuntime: '系统版本',
+      create: '创建',
+      booting: '正在启动模拟器…',
+      simulator: '模拟器',
+      shutdownSimulator: '关闭模拟器',
+      deleteSimulator: '删除模拟器',
+      confirmDeleteSimulator: '确认删除？',
+      idbHint: 'iOS 输入/实时画面需要 idb',
       immersiveOff: '显示操作栏',
       qualityLow: '流畅',
       qualityMedium: '标准',
@@ -102,6 +120,24 @@ window.__ModuleLoader__.load({
       diagnostics: 'adb diagnostics',
       quality: 'Stream quality',
       immersiveOn: 'Immersive mode',
+      addDevice: 'Add device',
+      connectAndroid: 'Connect Android device',
+      createIos: 'Create iOS simulator',
+      createHos: 'Create HarmonyOS emulator',
+      hosImage: 'System image',
+      hosStarting: 'Starting HarmonyOS emulator…',
+      stopHos: 'Shut down HarmonyOS emulator',
+      deleteHos: 'Delete HarmonyOS emulator',
+      iosName: 'Name',
+      iosDeviceType: 'Device type',
+      iosRuntime: 'Runtime',
+      create: 'Create',
+      booting: 'Booting simulator…',
+      simulator: 'Simulator',
+      shutdownSimulator: 'Shut down simulator',
+      deleteSimulator: 'Delete simulator',
+      confirmDeleteSimulator: 'Confirm delete?',
+      idbHint: 'iOS input/streaming requires idb',
       immersiveOff: 'Show controls',
       qualityLow: 'Low',
       qualityMedium: 'Medium',
@@ -187,6 +223,8 @@ window.__ModuleLoader__.load({
 .dph-field{display:flex;gap:8px}
 .dph-input{flex:1;height:32px;border:1px solid var(--dsw-alias-border-l2,#dededf);border-radius:8px;padding:0 10px;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-primary,#17171a);background:var(--dsw-alias-bg-layer-1,#fff);outline:none}
 .dph-input:focus{border-color:var(--dsw-alias-brand-primary,#3b6cff)}
+.dph-select-input{appearance:none;-webkit-appearance:none;padding-right:24px}
+.dph-label{display:block;font-size:11px;color:var(--dsw-alias-label-tertiary,#9a9aa1);margin:10px 0 4px}
 .dph-primary{height:32px;padding:0 14px;border:0;border-radius:8px;background:var(--dsw-alias-label-primary,#17171a);color:var(--dsw-alias-bg-layer-1,#fff);font-size:12px;cursor:pointer}
 .dph-primary:disabled{opacity:.5;cursor:default}
 .dph-err{color:var(--dsw-alias-state-error-primary,#dc2626);font-size:11.5px;margin-top:8px;word-break:break-word}
@@ -395,6 +433,17 @@ window.__ModuleLoader__.load({
         screenInfo: (serial, options) => unwrap('screen-info', { serial, fresh: Boolean(options && options.fresh) }),
         ping: (serial) => unwrap('ping', { serial }),
         targets: () => unwrap('targets'),
+        iosTypes: () => unwrap('ios/types'),
+        iosRuntimes: () => unwrap('ios/runtimes'),
+        iosCreate: (payload) => unwrap('ios/create', payload),
+        iosBoot: (serial) => unwrap('ios/boot', { serial }),
+        iosShutdown: (serial) => unwrap('ios/shutdown', { serial }),
+        iosDelete: (serial) => unwrap('ios/delete', { serial }),
+        hosImages: (deviceType) => unwrap('hos/images', { deviceType }),
+        hosCreate: (payload) => unwrap('hos/create', payload),
+        hosStart: (serial) => unwrap('hos/start', { serial }),
+        hosStop: (serial) => unwrap('hos/stop', { serial }),
+        hosDelete: (serial) => unwrap('hos/delete', { serial }),
         removeTarget: (address) => unwrap('targets/remove', { address }),
         shot: async (serial) => {
           const res = await unwrap('shot', { serial })
@@ -437,7 +486,7 @@ window.__ModuleLoader__.load({
     }
 
     function kindForAddress(address) {
-      if (/^unicom-openclaw-|\.ts\.net/.test(address)) return 'tailscale'
+      if (/\.ts\.net/.test(address)) return 'tailscale'
       if (/^100\.(6[4-9]|[7-9]\d|1[01]\d|12[0-7])\./.test(address)) return 'tailscale'
       if (address.includes(':')) return 'wifi'
       return 'usb'
@@ -462,6 +511,7 @@ window.__ModuleLoader__.load({
       if (kind === 'tailscale') return 'Tailscale'
       if (kind === 'wifi') return 'Wi-Fi'
       if (kind === 'emulator') return 'emulator'
+      if (kind === 'simulator') return 'Simulator'
       return 'USB'
     }
 
@@ -1104,8 +1154,56 @@ window.__ModuleLoader__.load({
         }
       })
       const [disconnectArmed, setDisconnectArmed] = useState(false)
+      const [addMenuOpen, setAddMenuOpen] = useState(false)
+      const [iosCreateOpen, setIosCreateOpen] = useState(false)
+      const [iosTypes, setIosTypes] = useState([])
+      const [iosRuntimes, setIosRuntimes] = useState([])
+      const [iosForm, setIosForm] = useState({ name: '', deviceType: '', runtime: '' })
+      const [iosBusy, setIosBusy] = useState(false)
+      const [simDeleteArmed, setSimDeleteArmed] = useState(false)
+      const [hosCreateOpen, setHosCreateOpen] = useState(false)
+      const [hosImages, setHosImages] = useState([])
+      const [hosForm, setHosForm] = useState({ name: '', osVersion: '' })
+      const [hosBusy, setHosBusy] = useState(false)
       const autoSelected = useRef(false)
       const { devices, error, reload } = useDeviceList(visible, nonce)
+      useEffect(() => {
+        if (!hosCreateOpen) return undefined
+        let alive = true
+        api
+          .hosImages('phone')
+          .catch(() => ({ images: [] }))
+          .then((value) => {
+            if (!alive) return
+            const images = (Array.isArray(value.images) ? value.images : []).filter((item) => item.downloaded)
+            setHosImages(images)
+            setHosForm((prev) => ({ name: prev.name, osVersion: prev.osVersion || (images[0] && images[0].osVersion) || '' }))
+          })
+        return () => {
+          alive = false
+        }
+      }, [hosCreateOpen])
+
+      useEffect(() => {
+        if (!iosCreateOpen) return undefined
+        let alive = true
+        Promise.all([api.iosTypes().catch(() => ({ types: [] })), api.iosRuntimes().catch(() => ({ runtimes: [] }))]).then(([t, r]) => {
+          if (!alive) return
+          const types = Array.isArray(t.types) ? t.types : []
+          const runtimes = Array.isArray(r.runtimes) ? r.runtimes : []
+          setIosTypes(types)
+          setIosRuntimes(runtimes)
+          setIosForm((prev) => ({
+            name: prev.name,
+            deviceType: prev.deviceType || (types[0] && types[0].identifier) || '',
+            runtime: prev.runtime || (runtimes[0] && runtimes[0].identifier) || '',
+          }))
+        })
+        return () => {
+          alive = false
+        }
+      }, [iosCreateOpen])
+
       const quality = selected && QUALITY_ORDER.includes(qualityMap[selected]) ? qualityMap[selected] : 'medium'
       const setQualityForSelected = (next) => {
         if (!selected) return
@@ -1161,6 +1259,8 @@ window.__ModuleLoader__.load({
       const device = rows ? rows.find((item) => item.serial === selected) || null : null
       const tabId = tab && tab.id ? tab.id : null
       const adbMissing = health && health.adb === null
+      const iosReady = Boolean(health && health.ios && health.ios.available)
+      const hosReady = Boolean(health && health.harmony && health.harmony.emulator && health.harmony.emulator.available)
 
       const connectTo = async (address) => {
         setConnecting(true)
@@ -1218,6 +1318,30 @@ window.__ModuleLoader__.load({
           })
           return
         }
+        if (picked && picked.transport === 'emulator' && picked.state !== 'device') {
+          preview.setToast(t('hosStarting'))
+          api
+            .hosStart(picked.serial)
+            .then(() => {
+              rememberDevice(picked.serial)
+              setNonce((value) => value + 1)
+              setSelected(picked.serial)
+            })
+            .catch((err) => preview.setToast(err && err.message ? err.message : 'start failed'))
+          return
+        }
+        if (picked && picked.kind === 'simulator' && picked.state !== 'device') {
+          preview.setToast(t('booting'))
+          api
+            .iosBoot(picked.serial)
+            .then(() => {
+              rememberDevice(picked.serial)
+              setNonce((value) => value + 1)
+              setSelected(picked.serial)
+            })
+            .catch((err) => preview.setToast(err && err.message ? err.message : 'boot failed'))
+          return
+        }
         rememberDevice(picked.serial)
         setSelected(picked.serial)
       }
@@ -1303,6 +1427,44 @@ window.__ModuleLoader__.load({
           },
         },
         { id: 'copy', icon: 'copy', label: t('copySerial'), run: copySerial },
+        ...(device && device.kind === 'simulator'
+          ? [
+              {
+                id: 'shutdown-sim',
+                icon: 'power',
+                label: t('shutdownSimulator'),
+                run: () => {
+                  api
+                    .iosShutdown(device.serial)
+                    .catch(() => {})
+                    .then(() => {
+                      setSelected(null)
+                      setNonce((value) => value + 1)
+                    })
+                },
+              },
+              {
+                id: 'delete-sim',
+                icon: 'unlink',
+                label: simDeleteArmed ? t('confirmDeleteSimulator') : t('deleteSimulator'),
+                run: () => {
+                  if (!simDeleteArmed) {
+                    setSimDeleteArmed(true)
+                    setTimeout(() => setSimDeleteArmed(false), 3000)
+                    return
+                  }
+                  setSimDeleteArmed(false)
+                  api
+                    .iosDelete(device.serial)
+                    .catch((err) => preview.setToast(err && err.message ? err.message : 'delete failed'))
+                    .then(() => {
+                      setSelected(null)
+                      setNonce((value) => value + 1)
+                    })
+                },
+              },
+            ]
+          : []),
         {
           id: 'list',
           icon: 'back',
@@ -1347,7 +1509,7 @@ window.__ModuleLoader__.load({
                     className: 'dph-link',
                     onClick: () => {
                       setMenuOpen(false)
-                      setConnectOpen(true)
+                      setAddMenuOpen(true)
                     },
                   },
                   '+ ' + t('add'),
@@ -1406,7 +1568,7 @@ window.__ModuleLoader__.load({
                 h('input', {
                   className: 'dph-input',
                   value: address,
-                  placeholder: '100.90.248.53:5555',
+                  placeholder: '192.0.2.53:5555',
                   onChange: (event) => setAddress(event.target.value),
                   autoFocus: true,
                   spellCheck: false,
@@ -1588,7 +1750,7 @@ window.__ModuleLoader__.load({
                   { className: 'dph-empty' },
                   h('div', { className: 'dph-empty-icon' }, h(Icon, { name: 'phone', size: 30 })),
                   h('div', { className: 'dph-empty-title' }, t('empty')),
-                  h('button', { type: 'button', className: 'dph-primary', onClick: () => setConnectOpen(true) }, '+ ' + t('add')),
+                  h('button', { type: 'button', className: 'dph-primary', onClick: () => setAddMenuOpen(true) }, '+ ' + t('addDevice')),
                 )
               : h(DeviceRows, { t, devices: rows, selected, onSelect })
 
@@ -1613,7 +1775,7 @@ window.__ModuleLoader__.load({
             ),
             h(
               'button',
-              { key: 'add', type: 'button', className: 'dph-ibtn', title: t('add'), onClick: () => setConnectOpen(true) },
+              { key: 'add', type: 'button', className: 'dph-ibtn', title: t('addDevice'), onClick: () => setAddMenuOpen(true) },
               h(Icon, { name: 'plus' }),
             ),
           ]
@@ -1646,6 +1808,199 @@ window.__ModuleLoader__.load({
           )
         : null
 
+      const hosCreateSheet = hosCreateOpen
+        ? h(
+            'div',
+            null,
+            h('div', {
+              className: 'dph-backdrop',
+              onClick: () => {
+                if (!hosBusy) setHosCreateOpen(false)
+              },
+            }),
+            h(
+              'form',
+              {
+                className: 'dph-connect',
+                style: { maxWidth: 380 },
+                onSubmit: async (event) => {
+                  event.preventDefault()
+                  if (hosBusy) return
+                  setHosBusy(true)
+                  try {
+                    const created = await api.hosCreate({ name: hosForm.name, osVersion: hosForm.osVersion, deviceType: 'phone' })
+                    setHosCreateOpen(false)
+                    setNonce((value) => value + 1)
+                    if (created && created.serial) {
+                      rememberDevice(created.serial)
+                      setSelected(created.serial)
+                    }
+                  } catch (error) {
+                    preview.setToast(error && error.message ? error.message : 'create failed')
+                  } finally {
+                    setHosBusy(false)
+                  }
+                },
+              },
+              h('div', { className: 'ttl' }, t('createHos')),
+              h('div', { className: 'sub' }, 'DevEco Emulator CLI'),
+              h('label', { className: 'dph-label' }, t('iosName')),
+              h('input', {
+                className: 'dph-input',
+                value: hosForm.name,
+                placeholder: 'dsh-phone-hos',
+                onChange: (event) => setHosForm((prev) => ({ ...prev, name: event.target.value })),
+                spellCheck: false,
+              }),
+              h('label', { className: 'dph-label' }, t('hosImage')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: hosForm.osVersion,
+                  onChange: (event) => setHosForm((prev) => ({ ...prev, osVersion: event.target.value })),
+                },
+                hosImages.map((item) => h('option', { key: item.osVersion, value: item.osVersion }, item.osVersion)),
+              ),
+              h(
+                'div',
+                { className: 'dph-field', style: { marginTop: 12 } },
+                h('button', { type: 'submit', className: 'dph-primary', disabled: hosBusy || !hosForm.name.trim() || !hosForm.osVersion }, hosBusy ? t('loading') : t('create')),
+                h('button', { type: 'button', className: 'dph-ghost', onClick: () => setHosCreateOpen(false) }, t('cancel')),
+              ),
+            ),
+          )
+        : null
+
+      const addMenu = addMenuOpen
+        ? h(
+            'div',
+            null,
+            h('div', { className: 'dph-backdrop', onClick: () => setAddMenuOpen(false) }),
+            h(
+              'div',
+              { className: 'dph-menu', style: { top: 48, left: 8, width: 270 } },
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'dph-row',
+                  onClick: () => {
+                    setAddMenuOpen(false)
+                    setConnectOpen(true)
+                  },
+                },
+                h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'android', size: 16 })),
+                h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('connectAndroid'))),
+              ),
+              iosReady
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'dph-row',
+                      onClick: () => {
+                        setAddMenuOpen(false)
+                        setIosCreateOpen(true)
+                      },
+                    },
+                    h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'apple', size: 16 })),
+                    h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('createIos'))),
+                  )
+                : null,
+              hosReady
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'dph-row',
+                      onClick: () => {
+                        setAddMenuOpen(false)
+                        setHosCreateOpen(true)
+                      },
+                    },
+                    h('span', { className: 'dph-av', style: { width: 26, height: 26, borderRadius: 7 } }, h(Icon, { name: 'harmony', size: 16 })),
+                    h('span', { className: 'dph-meta' }, h('span', { className: 'dph-model', style: { fontWeight: 400 } }, t('createHos'))),
+                  )
+                : null,
+            ),
+          )
+        : null
+
+      const iosCreateSheet = iosCreateOpen
+        ? h(
+            'div',
+            null,
+            h('div', {
+              className: 'dph-backdrop',
+              onClick: () => {
+                if (!iosBusy) setIosCreateOpen(false)
+              },
+            }),
+            h(
+              'form',
+              {
+                className: 'dph-connect',
+                style: { maxWidth: 380 },
+                onSubmit: async (event) => {
+                  event.preventDefault()
+                  if (iosBusy) return
+                  setIosBusy(true)
+                  try {
+                    const created = await api.iosCreate(iosForm)
+                    setIosCreateOpen(false)
+                    setNonce((value) => value + 1)
+                    if (created && created.serial) {
+                      rememberDevice(created.serial)
+                      setSelected(created.serial)
+                    }
+                  } catch (error) {
+                    preview.setToast(error && error.message ? error.message : 'create failed')
+                  } finally {
+                    setIosBusy(false)
+                  }
+                },
+              },
+              h('div', { className: 'ttl' }, t('createIos')),
+              h('div', { className: 'sub' }, 'xcrun simctl create'),
+              h('label', { className: 'dph-label' }, t('iosName')),
+              h('input', {
+                className: 'dph-input',
+                value: iosForm.name,
+                placeholder: 'dsh-phone',
+                onChange: (event) => setIosForm((prev) => ({ ...prev, name: event.target.value })),
+                spellCheck: false,
+              }),
+              h('label', { className: 'dph-label' }, t('iosDeviceType')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: iosForm.deviceType,
+                  onChange: (event) => setIosForm((prev) => ({ ...prev, deviceType: event.target.value })),
+                },
+                iosTypes.map((item) => h('option', { key: item.identifier, value: item.identifier }, item.name)),
+              ),
+              h('label', { className: 'dph-label' }, t('iosRuntime')),
+              h(
+                'select',
+                {
+                  className: 'dph-input dph-select-input',
+                  value: iosForm.runtime,
+                  onChange: (event) => setIosForm((prev) => ({ ...prev, runtime: event.target.value })),
+                },
+                iosRuntimes.map((item) => h('option', { key: item.identifier, value: item.identifier }, item.name)),
+              ),
+              h(
+                'div',
+                { className: 'dph-field', style: { marginTop: 12 } },
+                h('button', { type: 'submit', className: 'dph-primary', disabled: iosBusy || !iosForm.name.trim() || !iosForm.deviceType || !iosForm.runtime }, iosBusy ? t('loading') : t('create')),
+                h('button', { type: 'button', className: 'dph-ghost', onClick: () => setIosCreateOpen(false) }, t('cancel')),
+              ),
+            ),
+          )
+        : null
+
       return h(
         'div',
         { className: 'dph-root' },
@@ -1694,6 +2049,9 @@ window.__ModuleLoader__.load({
         moreMenu,
         connectSheet,
         diagSheet,
+        addMenu,
+        iosCreateSheet,
+        hosCreateSheet,
       )
     }