添加连接中状态

src/components/help/index.module.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)