From 1c41f1d90e30e49866d2657ebbd2fd4efec8e046 Mon Sep 17 00:00:00 2001 From: Jianhui Zhao Date: Sun, 15 Jun 2025 18:04:35 +0800 Subject: [PATCH] feat(ui): More convenient access device web Signed-off-by: Jianhui Zhao --- ui/src/components/RttyWeb.vue | 131 ++++++++++++++++++++++++++++++++++ ui/src/i18n/en.json | 15 ++-- ui/src/i18n/zh-CN.json | 15 ++-- ui/src/views/Home.vue | 56 ++------------- 4 files changed, 158 insertions(+), 59 deletions(-) create mode 100644 ui/src/components/RttyWeb.vue diff --git a/ui/src/components/RttyWeb.vue b/ui/src/components/RttyWeb.vue new file mode 100644 index 0000000..7a790f4 --- /dev/null +++ b/ui/src/components/RttyWeb.vue @@ -0,0 +1,131 @@ + + + diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json index c24250c..251757f 100644 --- a/ui/src/i18n/en.json +++ b/ui/src/i18n/en.json @@ -51,11 +51,18 @@ "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!", "Access your device's Shell": "Access your device's Shell", "Access your devices's Web": "Access your devices's Web", - "Please enter the address you want to access": "Please enter the address you want to access:", + "Proto": "Proto", + "ipaddr": "IP address", + "port": "Port", + "path": "Path", + "Please input ipaddr": "Please input ipaddr", + "Please input port": "Please input port", + "Please input path": "Please input path", "The file you will upload is too large(> 4294967295 Byte)": "The file you will upload is too large(> 4294967295 Byte)", - "Invalid address": "Invalid address", + "Invalid IP address": "Invalid IP address", + "Invalid port": "Invalid port", + "Must start with /": "Must start with /", "Already copied to clipboard": "Already copied to clipboard", "Please use shortcut \"Shift+Insert\"": "Please use shortcut \"Shift+Insert\"", - "Your device's rtty does not support https proxy, please upgrade it.": "Your device's rtty does not support https proxy, please upgrade it.", - "Invalid Address": "Invalid Address" + "Your device's rtty does not support https proxy, please upgrade it.": "Your device's rtty does not support https proxy, please upgrade it." } diff --git a/ui/src/i18n/zh-CN.json b/ui/src/i18n/zh-CN.json index 6b5d541..cdc3fcf 100644 --- a/ui/src/i18n/zh-CN.json +++ b/ui/src/i18n/zh-CN.json @@ -52,11 +52,18 @@ "Please execute command \"rtty -R\" or \"rtty -S\" in current terminal!": "请在当前终端中执行命令 \"rtty -R\" 或者 \"rtty -S\"", "Access your device's Shell": "访问您的设备的 Shell", "Access your devices's Web": "访问您的设备的 Web", - "Please enter the address you want to access": "请输入您要访问的地址:", + "Proto": "协议", + "ipaddr": "IP 地址", + "port": "端口", + "path": "路径", + "Please input ipaddr": "请输入 IP 地址", + "Please input port": "请输入端口", + "Please input path": "请输入路径", "The file you will upload is too large(> 4294967295 Byte)": "您要上传的文件太大了(> 4294967295 Byte)", - "Invalid address": "无效的地址", + "Invalid IP address": "无效的 IP 地址", + "Invalid port": "无效的端口", + "Must start with /": "必须以 / 开头", "Already copied to clipboard": "已复制到剪切板", "Please use shortcut \"Shift+Insert\"": "请使用快捷键 \"Shift+Insert\"", - "Your device's rtty does not support https proxy, please upgrade it.": "你的设备的 rtty 不支持 https 代理，请升级", - "Invalid Address": "无效的地址" + "Your device's rtty does not support https proxy, please upgrade it.": "你的设备的 rtty 不支持 https 代理，请升级" } diff --git a/ui/src/views/Home.vue b/ui/src/views/Home.vue index 51c105b..e979e1d 100644 --- a/ui/src/views/Home.vue +++ b/ui/src/views/Home.vue @@ -41,6 +41,7 @@ + @@ -48,13 +49,15 @@ import { InternetExplorer as IEIcon } from '@vicons/fa' import { Terminal as TerminalIcon } from '@vicons/ionicons5' import RttyCmd from '../components/RttyCmd.vue' +import RttyWeb from '../components/RttyWeb.vue' export default { name: 'Home', components: { IEIcon, TerminalIcon, - RttyCmd + RttyCmd, + RttyWeb }, data() { return { @@ -138,57 +141,8 @@ export default { connectDevice(devid) { window.open('/rtty/' + devid) }, - isValidURL(url) { - const ipv4Pattern = '(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' - const urlPattern = new RegExp(`^https?:\\/\\/${ipv4Pattern}(?::\\d{1,5})?(?:\\/[^\\s]*)?$`) - return urlPattern.test(url) - }, - parseURL(url) { - const result = { - proto: 'http', - ip: '', - port: '80', - path: '/' - } - - if (url.startsWith('https://')) { - result.proto = 'https' - url = url.substring(8) - result.port = '443' - } else if (url.startsWith('http://')) { - url = url.substring(7) - } - - const [address, ...pathParts] = url.split('/') - - result.path = pathParts.length > 0 ? '/' + pathParts.join('/') : '/' - - const [ip, port] = address.split(':') - result.ip = ip - if (port) { - result.port = port - } - - return result - }, connectDeviceWeb(dev) { - this.$prompt(this.$t('Please enter the address you want to access'), '', { - confirmButtonText: this.$t('OK'), - cancelButtonText: this.$t('Cancel'), - inputValue: 'http://127.0.0.1', - inputValidator: this.isValidURL, - inputErrorMessage: this.$t('Invalid Address') - }).then(({ value }) => { - const url = this.parseURL(value) - - if (dev.proto < 4 && url.proto === 'https') { - this.$message.error(this.$t('Your device\'s rtty does not support https proxy, please upgrade it.')) - return - } - - const addr = encodeURIComponent(`${url.ip}:${url.port}${url.path}`) - window.open(`/web/${dev.id}/${url.proto}/${addr}`) - }) + this.$refs.rttyWeb.show(dev) }, showCmdForm() { this.$refs.rttyCmd.showCmdForm()