yeyinlaoying/nat-utools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加连接中状态

Browse Source
This commit is contained in:
lblblong
2021-08-04 10:35:20 +08:00
parent 3f845f4e21
commit 154a35ce80
11 changed files with 79 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintcache
+1 -1
View File
@@ -1 +1 @@
[{"/root/code/my/utools/nat-utools/src/index.tsx":"1","/root/code/my/utools/nat-utools/src/react/reportWebVitals.ts":"2","/root/code/my/utools/nat-utools/src/pages/manager/index.tsx":"3","/root/code/my/utools/nat-utools/src/model/nat.ts":"4","/root/code/my/utools/nat-utools/src/store/server.ts":"5","/root/code/my/utools/nat-utools/src/components/icon/index.tsx":"6","/root/code/my/utools/nat-utools/src/components/nat-edit/index.tsx":"7","/root/code/my/utools/nat-utools/src/components/alert/index.tsx":"8","/root/code/my/utools/nat-utools/src/components/nat-log/index.tsx":"9","/root/code/my/utools/nat-utools/src/components/help/index.tsx":"10"},{"size":697,"mtime":1627279865447,"results":"11","hashOfConfig":"12"},{"size":425,"mtime":1627263151942,"results":"13","hashOfConfig":"12"},{"size":3269,"mtime":1627279795438,"results":"14","hashOfConfig":"12"},{"size":510,"mtime":1627267804565,"results":"15","hashOfConfig":"12"},{"size":4235,"mtime":1627279817838,"results":"16","hashOfConfig":"12"},{"size":406,"mtime":1627263151934,"results":"17","hashOfConfig":"12"},{"size":1626,"mtime":1627269048414,"results":"18","hashOfConfig":"12"},{"size":842,"mtime":1627268262179,"results":"19","hashOfConfig":"12"},{"size":1109,"mtime":1627270225081,"results":"20","hashOfConfig":"12"},{"size":783,"mtime":1627278401400,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"35h0pq",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/root/code/my/utools/nat-utools/src/index.tsx",[],"/root/code/my/utools/nat-utools/src/react/reportWebVitals.ts",[],["43","44"],"/root/code/my/utools/nat-utools/src/pages/manager/index.tsx",[],"/root/code/my/utools/nat-utools/src/model/nat.ts",[],"/root/code/my/utools/nat-utools/src/store/server.ts",["45"],"/root/code/my/utools/nat-utools/src/components/icon/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/nat-edit/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/alert/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/nat-log/index.tsx",[],"/root/code/my/utools/nat-utools/src/components/help/index.tsx",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":2,"column":30,"nodeType":"52","messageId":"53","endLine":2,"endColumn":34},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"@typescript-eslint/no-unused-vars","'toJS' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
[{"/mnt/e/code/pro/utools/nat-utools/src/index.tsx":"1","/mnt/e/code/pro/utools/nat-utools/src/react/reportWebVitals.ts":"2","/mnt/e/code/pro/utools/nat-utools/src/pages/manager/index.tsx":"3","/mnt/e/code/pro/utools/nat-utools/src/model/nat.ts":"4","/mnt/e/code/pro/utools/nat-utools/src/store/server.ts":"5","/mnt/e/code/pro/utools/nat-utools/src/components/icon/index.tsx":"6","/mnt/e/code/pro/utools/nat-utools/src/components/alert/index.tsx":"7","/mnt/e/code/pro/utools/nat-utools/src/components/help/index.tsx":"8","/mnt/e/code/pro/utools/nat-utools/src/components/nat-edit/index.tsx":"9","/mnt/e/code/pro/utools/nat-utools/src/components/nat-log/index.tsx":"10"},{"size":697,"mtime":1627282191594,"results":"11","hashOfConfig":"12"},{"size":425,"mtime":1627282191598,"results":"13","hashOfConfig":"12"},{"size":3512,"mtime":1628044105015,"results":"14","hashOfConfig":"12"},{"size":510,"mtime":1627282191595,"results":"15","hashOfConfig":"12"},{"size":4400,"mtime":1628044184011,"results":"16","hashOfConfig":"12"},{"size":406,"mtime":1627282191591,"results":"17","hashOfConfig":"12"},{"size":842,"mtime":1627282191589,"results":"18","hashOfConfig":"12"},{"size":1442,"mtime":1628043988331,"results":"19","hashOfConfig":"12"},{"size":1626,"mtime":1627282191593,"results":"20","hashOfConfig":"12"},{"size":1109,"mtime":1627282191594,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"olkzyp",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/e/code/pro/utools/nat-utools/src/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/react/reportWebVitals.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/pages/manager/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/model/nat.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/store/server.ts",[],"/mnt/e/code/pro/utools/nat-utools/src/components/icon/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/alert/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/help/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/nat-edit/index.tsx",[],"/mnt/e/code/pro/utools/nat-utools/src/components/nat-log/index.tsx",[]]
.gitignore
+2 -1
View File
@@ -2,8 +2,9 @@
/dist
/node_modules
/build
/build-preload
/.cache
/utools/build
/utools/index.js
# Logs
logs
package.json
+1 -3
View File
@@ -7,10 +7,8 @@
"serve": "craco build && cra-build-watch",
"serve:preload": "cd ./preload && npm run serve",
"build": "npm run build:html && npm run build:preload",
"build:html": "craco build",
"build:html": "rm -rf ./utools/build && craco build && cp -r ./build ./utools",
"build:preload": "cd ./preload && npm run build",
"build:demo": "env-cmd -f .env.staging craco build",
"test": "craco test",
"commit": "git-cz"
},
"dependencies": {
preload/package.json
+2 -2
View File
@@ -5,8 +5,8 @@
"homepage": ".",
"main": "./dist/index.js",
"scripts": {
"serve": "parcel src/index.ts --out-dir ../build-preload --target node --bundle-node-modules",
"build": "rm -rf ../build-preload && parcel build src/index.ts --out-dir ../build-preload --target node --bundle-node-modules --no-source-maps"
"serve": "parcel src/index.ts --out-dir ../utools/ --target node --bundle-node-modules",
"build": "rm -rf ../utools/index.js && parcel build src/index.ts --out-dir ../utools --target node --bundle-node-modules --no-source-maps"
},
"dependencies": {
"localtunnel": "^2.0.1",
src/components/help/index.module.scss
+3
View File
@@ -27,6 +27,9 @@
color: #666;
padding: 16px 0;
line-height: 1.7;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
}
.btn {
src/components/help/index.tsx
+22 -2
View File
@@ -11,8 +11,28 @@ const Help: FC = () => {
<div className={styles.title}>关于内网穿透NAT</div>
<div className={styles.content}>
该 utools 扩展是基于 localtunnel 的封装，目前已在 GitHub 开源：
<span className={styles.link} onClick={()=>utools.shellOpenExternal('https://github.com/lblblong/nat-utools')}>https://github.com/lblblong/nat-utools</span>
<p>
该 utools 扩展是基于 localtunnel 的封装，目前已在 GitHub 开源：
<span
className={styles.link}
onClick={() => utools.shellOpenExternal('https://github.com/lblblong/nat-utools')}
>
https://github.com/lblblong/nat-utools
</span>
</p>
<h4>使用说明：</h4>
<p>
点击右下角 +
号按钮，输入你本地服务监听的端口号，如果需要自定义子域名则输入自定义的子域名，然后点击确定，即可获得可被外网访问的地址
</p>
<h4>状态说明：</h4>
<p>
<ul>
<li>灰色：未启动</li>
<li>灰蓝闪动：连接中</li>
<li>蓝色：已启动</li>
</ul>
</p>
</div>
</div>
)}
src/pages/manager/index.module.scss
+20
View File
@@ -103,5 +103,25 @@
}
}
}
.loading {
.lbox {
.state {
animation-name: blink;
animation-duration: 0.5s;
animation-iteration-count: infinite;
transition: all 0.5s;
}
}
}
}
}
@keyframes blink {
from {
background-color: #dfdfdf;
}
to {
background-color: var(--color-primary);
}
}
src/pages/manager/index.tsx
+17 -8
View File
@@ -28,22 +28,31 @@ export const IndexPage = () => {
<div className={styles.list}>
{StoreServer.natList.map((it) => {
return (
<div className={classNames(styles.item, { [styles.active]: it.state === NatState.on })} key={it.id}>
<div
className={classNames(styles.item, {
[styles.active]: it.state === NatState.on,
[styles.loading]: it.state === NatState.loading,
})}
key={it.id}
>
<div className={styles.lbox}>
<span className={styles.state}></span>
<span className={styles.name}>
{it.port}
{it.subdomain ? ` - ${it.subdomain}` : ''}
</span>
<span className={styles.url}>{it.url}</span>
<span
className={styles.url}
onClick={() => {
utools.shellOpenExternal(it.url!)
}}
>
{it.url}
</span>
</div>
<div className={styles.rbox}>
<button
disabled={it.state === NatState.loading}
className={classNames(styles.btn, styles.del)}
onClick={() => StoreServer.del(it.id)}
>
<button className={classNames(styles.btn, styles.del)} onClick={() => StoreServer.del(it.id)}>
删除
</button>
<button
@@ -71,7 +80,7 @@ export const IndexPage = () => {
className={styles.btn}
onClick={() => StoreServer.toggle(it.id)}
>
{it.state === NatState.on ? '关闭服务' : '启动服务'}
{it.state === NatState.off ? '启动服务' : '关闭服务'}
</button>
</div>
</div>
src/store/server.ts
+9 -3
View File
@@ -1,5 +1,5 @@
import localtunnel from 'localtunnel'
import { makeAutoObservable, toJS } from 'mobx'
import { makeAutoObservable } from 'mobx'
import { openAlert } from 'src/components/alert'
import { openHelp } from 'src/components/help'
import { openNatEdit } from 'src/components/nat-edit'
@@ -23,6 +23,9 @@ class Store {
utools.onPluginEnter(this.onPluginEnter)
utools.onPluginReady(() => {
this.loadDb()
if (this.natList.length === 0) {
openHelp()
}
})
}
@@ -46,12 +49,14 @@ class Store {
const nat = this.getNatById(id)
if (nat.state === NatState.loading) return
nat.state = NatState.loading
nat.logs.push('启动中')
nat.tunnel = await window.localtunnel({
port: nat.port,
subdomain: nat.subdomain,
})
nat.url = nat.tunnel.url
nat.state = NatState.on
nat.logs.push('启动成功')
const onRequest = (req: any) => {
nat.logs.push(`${req.method} ${req.path}`)
@@ -68,6 +73,7 @@ class Store {
nat.state = NatState.off
nat.tunnel = undefined
nat.url = ''
nat.logs.push('已关闭')
})
nat.tunnel?.on('error', onError)
nat.tunnel?.on('request', onRequest)
@@ -81,7 +87,7 @@ class Store {
async stop(id: number) {
const nat = this.getNatById(id)
if (nat.state !== NatState.on || nat.tunnel === undefined) return
if (nat.state === NatState.off) return
return new Promise<void>((ok) => {
nat.tunnel?.once('close', () => {
@@ -128,7 +134,7 @@ class Store {
toggle = async (id: number) => {
const nat = this.getNatById(id)
if (nat.state === NatState.on) {
if (nat.state === NatState.on || nat.state === NatState.loading) {
await this.stop(nat.id)
} else {
await this.start(nat.id)
assets/logo.png → utools/assets/logo.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

plugin.json → utools/plugin.json
+2 -2
View File
@@ -2,9 +2,9 @@
"pluginName": "Live Server",
"description": "启动静态资源实时服务，静态页面开发神器。",
"author": "lblblong",
"homepage": "https://github.com/lblblong/live-server-utools",
"homepage": "https://github.com/lblblong/nat-utools",
"main": "./build/index.html",
"preload": "./build-preload/index.js",
"preload": "./index.js",
"version": "0.0.1",
"logo": "assets/logo.png",
"platform": ["win32"],