add gitattributes to force set_env.sh be LF ending

.gitattributes

@@ -0,0 +1 @@
+*.sh eol=lf

LICENCE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 kerms
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,18 @@
 # 允斯无线透传器的内嵌网页版上位机
 
+此项目使用`NPM`包管理, 需要先安装`node`工具。
 
+# 环境准备步骤
+
+##### 本地测试：
+
+1. `npm install`
+2. `npm run dev`，或用 `npm run devh` 则可以用其他设备访问，如手机调试移动界面。
+3. 根据显示的地址，使用浏览器打开，默认地址为`localhost:5173`， 或者其他设备访问`192.168.X.X:5173`
+
+##### 发布至esp32：
+
+1. `npm install`
+2. `npm run build` -> 会在`dist/`生成`index.html`和`ws.sharedworker.js`
+3. 在`dist/`里执行`gzip *` -> -> 会在`dist/`生成`index.html.gz`和`ws.sharedworker.js.gz`
+4. 至此，可以使用这两个文件覆盖ESP32目录中的`project_components/html`里相对应的文件了。

package.json

@@ -8,6 +8,7 @@
     "devh": ". ./set_env.sh && vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": ". ./set_env.sh && vite preview",
+    "previewh": ". ./set_env.sh && vite preview --host",
     "build-only": ". ./set_env.sh && vite build",
     "build:dev": ". ./set_env.sh && vite build --mode development",
     "type-check": "vue-tsc --build --force",
@@ -16,12 +17,15 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.9.0",
+    "ansi_up": "^6.0.2",
     "element-plus": "^2.7.3",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
+    "vue-draggable-plus": "^0.4.1",
     "vue-i18n": "^9.10.2",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vuetify": "^3.6.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -42,10 +46,11 @@
     "typescript": "~5.4.0",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.6",
+    "vite": "^5.3.3",
     "vite-plugin-css-injected-by-js": "^3.5.0",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-singlefile": "^2.0.1",
+    "vite-plugin-singlefile": "^2.0.2",
+    "vite-plugin-vuetify": "^2.0.3",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^2.0.6"
   }

set_env.sh

@@ -1,3 +1,7 @@
-#!/bin/bash
-export VITE_APP_GIT_TAG=$(git describe --tags | cut -d'-' -f1,2)
-export VITE_APP_LAST_COMMIT=$(git log -1 --format=%cd)
+#!/usr/bin/env bash
+
+VITE_APP_GIT_TAG=$(git describe --tags | cut -d'-' -f1,2)
+VITE_APP_LAST_COMMIT=$(git log -1 --format=%cd)
+
+export VITE_APP_GIT_TAG
+export VITE_APP_LAST_COMMIT

src/api/apiWifi.ts

@@ -2,20 +2,49 @@ import {type ApiJsonMsg, sendJsonMsg, WtModuleID} from '@/api'
 
 export enum WifiCmd {
     UNKNOWN = 0,
-    WIFI_API_JSON_STA_GET_AP_INFO,
-    WIFI_API_JSON_CONNECT,
-    WIFI_API_JSON_GET_SCAN,
-    WIFI_API_JSON_DISCONNECT,
-    WIFI_API_JSON_AP_GET_INFO,
+    WIFI_API_JSON_STA_GET_AP_INFO = 1,
+    WIFI_API_JSON_CONNECT         = 2,
+    WIFI_API_JSON_GET_SCAN        = 3,
+    WIFI_API_JSON_DISCONNECT      = 4,
+    WIFI_API_JSON_AP_GET_INFO     = 5,
+    WIFI_API_JSON_GET_MODE        = 6,
+    WIFI_API_JSON_SET_MODE        = 7,
+    WIFI_API_JSON_AP_SET_CRED     = 8,
+    WIFI_API_JSON_STA_GET_STATIC_INFO =  9,
+    WIFI_API_JSON_STA_SET_STATIC_CONF = 10,
 }
 
-interface WifiMsgOut extends ApiJsonMsg {
+export enum WifiMode {
+    /* permanent */
+    WIFI_AP_AUTO_STA_ON = 0,
+
+    WIFI_AP_STA_OFF     = 4, /* 100 */
+    WIFI_AP_OFF_STA_ON  = 5, /* 101 */
+    WIFI_AP_ON_STA_OFF  = 6, /* 110 */
+    WIFI_AP_STA_ON      = 7, /* 111 */
+
+    /* temporary */
+    WIFI_AP_STOP        = 8,
+    WIFI_AP_START       = 9,
+    WIFI_STA_STOP       = 10,
+    WIFI_STA_START      = 11,
+}
+
+export enum WifiStatus {
+    WIFI_MODE_NULL = 0,  /**< null mode */
+    WIFI_MODE_STA,   /**< WiFi station mode */
+    WIFI_MODE_AP,    /**< WiFi soft-AP mode */
+    WIFI_MODE_APSTA, /**< WiFi station + soft-AP mode */
+}
+
+export interface WiFiCredential extends ApiJsonMsg {
     ssid?: string;
     password?: string;
+    err?: string;
 }
 
 export function wifi_get_scan_list() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_GET_SCAN,
     }
@@ -23,7 +52,7 @@ export function wifi_get_scan_list() {
 }
 
 export function wifi_sta_get_ap_info() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_STA_GET_AP_INFO,
     }
@@ -31,7 +60,7 @@ export function wifi_sta_get_ap_info() {
 }
 
 export function wifi_ap_get_info() {
-    const msg : WifiMsgOut = {
+    const msg : WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_AP_GET_INFO,
     }
@@ -39,7 +68,7 @@ export function wifi_ap_get_info() {
 }
 
 export function wifi_connect_to(ssid: string, password: string) {
-    const msg: WifiMsgOut = {
+    const msg: WiFiCredential = {
         module: WtModuleID.WIFI,
         cmd: WifiCmd.WIFI_API_JSON_CONNECT,
         ssid: ssid,
@@ -49,6 +78,19 @@ export function wifi_connect_to(ssid: string, password: string) {
 }
 
 export interface WifiInfo extends ApiJsonMsg {
+    rssi: number;
+    ssid: string;
+    password: string;
+    gateway: string;
+    ip: string;
+    mac: string;
+    netmask: string;
+    dns_main: string;
+    dns_backup: string;
+    wifiLogo?: string;
+}
+
+export interface WifiScanInfo extends ApiJsonMsg {
     rssi: number;
     ssid: string;
     gateway: string;
@@ -59,5 +101,86 @@ export interface WifiInfo extends ApiJsonMsg {
 }
 
 export interface WifiList extends ApiJsonMsg {
-    scan_list: Array<WifiInfo>;
+    scan_list: Array<WifiScanInfo>;
 }
+
+export interface IWifiMode extends ApiJsonMsg {
+    mode?: WifiMode;
+    status?: WifiStatus;
+    ap_on_delay?: number;
+    ap_off_delay?: number;
+    err?: string;
+}
+
+export function wifi_set_mode(req_mode: WifiMode, ap_on_delay = -1, ap_off_delay = -1) {
+    let msg: IWifiMode;
+    if (req_mode === WifiMode.WIFI_AP_AUTO_STA_ON && ap_on_delay !== -1 && ap_off_delay !== -1) {
+        msg = {
+            module: WtModuleID.WIFI,
+            cmd: WifiCmd.WIFI_API_JSON_SET_MODE,
+            mode: req_mode,
+            ap_on_delay: ap_on_delay,
+            ap_off_delay: ap_off_delay,
+        };
+    } else {
+        msg = {
+            module: WtModuleID.WIFI,
+            cmd: WifiCmd.WIFI_API_JSON_SET_MODE,
+            mode: req_mode,
+        };
+    }
+    sendJsonMsg(msg);
+}
+
+export function wifi_get_mode() {
+    const msg: IWifiMode = {
+        module: WtModuleID.WIFI,
+        cmd: WifiCmd.WIFI_API_JSON_GET_MODE,
+    };
+
+    sendJsonMsg(msg);
+}
+
+export function wifi_ap_set_credential(ssid: string, password: string) {
+    const msg : WiFiCredential = {
+        module: WtModuleID.WIFI,
+        cmd: WifiCmd.WIFI_API_JSON_AP_SET_CRED,
+        ssid: ssid,
+        password: password,
+    }
+    sendJsonMsg(msg);
+}
+
+export interface IWifiStaStaticInfo {
+    static_ip_en: number;
+    static_dns_en: number;
+    ip: string;
+    gateway: string;
+    netmask: string;
+    dns_main: string;
+    dns_backup: string;
+}
+export function wifi_sta_get_static_info() {
+    const msg: ApiJsonMsg = {
+        module: WtModuleID.WIFI,
+        cmd: WifiCmd.WIFI_API_JSON_STA_GET_STATIC_INFO,
+    }
+    sendJsonMsg(msg);
+}
+
+export function wifi_sta_set_static_conf(static_info: IWifiStaStaticInfo) {
+    const msg: IWifiStaStaticInfo & ApiJsonMsg = {
+        module: WtModuleID.WIFI,
+        cmd: WifiCmd.WIFI_API_JSON_STA_SET_STATIC_CONF,
+        static_dns_en: static_info.static_dns_en,
+        static_ip_en: static_info.static_ip_en,
+        ip: static_info.ip,
+        gateway: static_info.gateway,
+        netmask: static_info.netmask,
+        dns_main: static_info.dns_main,
+        dns_backup: static_info.dns_backup,
+    }
+    sendJsonMsg(msg);
+}
+
+

src/assets/icon/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#5f6368"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

src/views/Wifi.vue

@@ -54,32 +54,72 @@
       </div>
     </el-form>
 
+    <el-divider></el-divider>
+    <div class="flex items-center">
+      <h5 class="text-md font-bold text-gray-800 w-32">Wi-Fi模式</h5>
+      <div class="flex shrink-0">
+        <el-tooltip effect="light">
+          <template #content>
+            <p>热点+终端模式并存会影响稳定性。且保持热点开启会增加功耗。</p>
+            <p>
+              <el-text size="small">智能模式：</el-text>
+              成功连接Wi-Fi，30秒后自动关闭热点；断开连接，5秒后自动打开热点
+            </p>
+            <p>
+              <el-text size="small">热点+终端共存模式：</el-text>
+              方便使用，但是影响稳定性
+            </p>
+            <p>
+              <el-text size="small">单热点模式缺点：</el-text>
+              无网络
+            </p>
+          </template>
+          <InlineSvg name="help" class="w-3.5 h-3.5 text-gray-500 cursor-help"></InlineSvg>
+        </el-tooltip>
+      </div>
+      <el-select v-model="wifiMode" :disabled="wsStore.state != ControlEvent.CONNECTED">
+        <el-option
+            v-for="item in wifiModeOptions"
+            :key="item.key"
+            :value="item.key"
+            :label="item.label"
+        />
+      </el-select>
+      <el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">保存</el-button>
+    </div>
+
     <el-divider></el-divider>
 
 
     <el-descriptions
-        title="Wi-Fi终端信息"
+        title="Wi-Fi终端(STA)信息"
         :column="1"
         border
         class="description-style"
     >
-      <el-descriptions-item label="asd">
+      <template #extra>
+        <el-switch v-model="wifiSta_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiAp_On"
+                   active-text="已开启" inactive-text="未开启" :loading="wifiMode_loading"
+                   :before-change="()=>beforeWifiModeChange('STA')"
+        />
+      </template>
+      <el-descriptions-item span="4">
         <template #label>
           <div>
             信号强度
           </div>
         </template>
         <template #default>
-          {{ wifiStaApInfo.rssi }}
+          <p>{{ wifiStaApInfo.rssi }}</p>
         </template>
       </el-descriptions-item>
-      <el-descriptions-item span="1">
+      <el-descriptions-item span="4">
         <template #label>
           <div>
-            SSID
+            Wi-Fi名(SSID)
           </div>
         </template>
-        {{ wifiStaApInfo.ssid }}
+        <p>{{ wifiStaApInfo.ssid }}</p>
       </el-descriptions-item>
 <!--      <el-descriptions-item span="6" >-->
 <!--        <template #label>-->
@@ -87,23 +127,21 @@
 <!--            密码-->
 <!--          </div>-->
 <!--        </template>-->
-<!--        <password-viewer password="asdasdasd"></password-viewer>-->
+<!--        <password-viewer :password="wifiStaApInfo.password"></password-viewer>-->
 <!--      </el-descriptions-item>-->
-      <el-descriptions-item span="4">
-        <template #label>
-          <div>
-            IP
-          </div>
-        </template>
-        {{ wifiStaApInfo.ip }}
-      </el-descriptions-item>
       <el-descriptions-item span="4">
         <template #label>
           <div>
             MAC
           </div>
         </template>
-        {{ wifiStaApInfo.mac }}
+        <p>{{ wifiStaApInfo.mac }}</p>
+      </el-descriptions-item>
+      <el-descriptions-item span="4">
+        <template #label>
+          <div>IP(内网地址)</div>
+        </template>
+        <p>{{ wifiStaApInfo.ip }}</p>
       </el-descriptions-item>
       <el-descriptions-item span="4">
         <template #label>
@@ -111,43 +149,139 @@
             网关
           </div>
         </template>
-        {{ wifiStaApInfo.gateway }}
+        <p>{{ wifiStaApInfo.gateway }}</p>
       </el-descriptions-item>
-
       <el-descriptions-item span="4">
         <template #label>
           <div>
             掩码
           </div>
         </template>
-        {{ wifiStaApInfo.netmask }}
+        <p>{{ wifiStaApInfo.netmask }}</p>
+      </el-descriptions-item>
+      <el-descriptions-item span="4">
+        <template #label>
+          <div>
+            首选DNS
+          </div>
+        </template>
+        <p>{{ wifiStaApInfo.dns_main }}</p>
+      </el-descriptions-item>
+      <el-descriptions-item span="4">
+        <template #label>
+          <div>
+            备用DNS
+          </div>
+        </template>
+        <p>{{ wifiStaApInfo.dns_backup }}</p>
+      </el-descriptions-item>
+
+      <el-descriptions-item span="4">
+        <template #label>
+          <div>
+            IP分配模式
+          </div>
+        </template>
+        <el-select v-model="wifiStaticInfo.static_ip_en" :disabled="wsStore.state != ControlEvent.CONNECTED">
+          <el-option
+              v-for="item in staIPModeOptions"
+              :key="item.key"
+              :value="item.key"
+              :label="item.label"
+          />
+        </el-select>
+      </el-descriptions-item>
+      <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
+        <template #label>
+          <div>IP(内网地址)</div>
+        </template>
+        <el-input v-model="wifiStaticInfo.ip"></el-input>
+      </el-descriptions-item>
+      <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
+        <template #label>
+          <div>
+            网关
+          </div>
+        </template>
+        <el-input v-model="wifiStaticInfo.gateway"></el-input>
+      </el-descriptions-item>
+      <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
+        <template #label>
+          <div>
+            掩码
+          </div>
+        </template>
+        <el-input v-model="wifiStaticInfo.netmask"></el-input>
+      </el-descriptions-item>
+
+      <el-descriptions-item span="4">
+        <template #label>
+          <div>
+            DNS模式
+          </div>
+        </template>
+        <el-select v-model="wifiStaticInfo.static_dns_en" :disabled="wsStore.state != ControlEvent.CONNECTED">
+          <el-option
+              v-for="item in staDNSModeOptions"
+              :key="item.key"
+              :value="item.key"
+              :label="item.label"
+          />
+        </el-select>
+      </el-descriptions-item>
+      <el-descriptions-item span="4" v-if="wifiStaticInfo.static_dns_en">
+        <template #label>
+          <div>
+            首选DNS
+          </div>
+        </template>
+        <el-input v-model="wifiStaticInfo.dns_main"></el-input>
+      </el-descriptions-item>
+      <el-descriptions-item span="4" v-if="wifiStaticInfo.static_dns_en">
+        <template #label>
+          <div>
+            备用DNS
+          </div>
+        </template>
+        <el-input v-model="wifiStaticInfo.dns_backup"></el-input>
       </el-descriptions-item>
     </el-descriptions>
+    <div class="flex justify-center mt-4">
+      <el-button type="primary" :loading="wifiMode_loading" @click="wifiStaSetStaticInfo">保存</el-button>
+    </div>
 
     <el-divider></el-divider>
 
     <el-descriptions
-        title="Wi-Fi热点信息"
+        title="Wi-Fi自发热点(AP)信息"
         :column="1"
         border
         class="description-style"
     >
+      <template #extra>
+        <el-switch v-model="wifiAp_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiSta_On"
+                   :loading="wifiMode_loading" active-text="已开启" inactive-text="未开启"
+                   :before-change="()=>beforeWifiModeChange('AP')"
+        />
+      </template>
       <el-descriptions-item span="6">
         <template #label>
           <div>
-            SSID
+            Wi-Fi名(SSID)
           </div>
         </template>
-        {{ wifiApInfo.ssid }}
+        <div class="flex">
+          <el-input v-model="wifiApInfo.ssid"></el-input>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item span="6">
+        <template #label>
+          <div>
+            密码
+          </div>
+        </template>
+        <el-input v-model="wifiApInfo.password"></el-input>
       </el-descriptions-item>
-<!--      <el-descriptions-item span="6">-->
-<!--        <template #label>-->
-<!--          <div>-->
-<!--            密码-->
-<!--          </div>-->
-<!--        </template>-->
-<!--        <password-viewer password="asdasdasd"></password-viewer>-->
-<!--      </el-descriptions-item>-->
       <el-descriptions-item span="4">
         <template #label>
           <div>
@@ -184,7 +318,9 @@
         {{ wifiApInfo.netmask }}
       </el-descriptions-item>
     </el-descriptions>
-
+    <div class="flex justify-center mt-4">
+      <el-button type="primary" :loading="wifiMode_loading" @click="wifiApChangeCredential">保存</el-button>
+    </div>
     <el-divider></el-divider>
   </div>
 
@@ -193,21 +329,32 @@
 <script setup lang="ts">
 import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import {
-  wifi_sta_get_ap_info,
+  type IWifiMode,
+  wifi_ap_get_info,
+  wifi_ap_set_credential,
+  wifi_connect_to,
+  wifi_get_mode,
   wifi_get_scan_list,
+  wifi_set_mode,
+  wifi_sta_get_ap_info,
   WifiCmd,
   type WifiInfo,
   type WifiList,
-  wifi_ap_get_info, wifi_connect_to
+  WifiMode,
+  type WifiScanInfo,
+  type WiFiCredential,
+  WifiStatus, wifi_sta_get_static_info,
+  type IWifiStaStaticInfo, wifi_sta_set_static_conf,
 } from "@/api/apiWifi";
 import type {FormInstance} from "element-plus";
 
 import InlineSvg from "@/components/InlineSvg.vue";
-import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
+import type {ApiJsonMsg, ControlMsg} from "@/api";
 import {ControlEvent, ControlMsgType, WtModuleID} from "@/api";
 import {registerModule, unregisterModule} from "@/router/msgRouter";
 import {useWsStore} from "@/stores/websocket";
 import {globalNotify, globalNotifyRightSide} from "@/composables/notification";
+import {isDevMode} from "@/composables/buildMode";
 
 const formRef = ref<FormInstance>()
 let wifiListPlaceholder = ref("我的WIFI")
@@ -216,6 +363,29 @@ let ssidValidateForm = reactive({
   password: "",
 })
 
+let wifiSta_On = ref(false);
+const wifiMode_loading = ref(false)
+
+let wifiAp_On = ref(false);
+
+let wifiMode = ref(-1);
+
+let wifiModeOptions = [
+  {
+    label: "智能热点+常开终端 (AP+STA)",
+    key: WifiMode.WIFI_AP_AUTO_STA_ON,
+  }, {
+    label: "仅开启热点 (AP)",
+    key: WifiMode.WIFI_AP_ON_STA_OFF,
+  }, {
+    label: "[不推荐] 常开热点+常开终端 (AP+STA)",
+    key: WifiMode.WIFI_AP_STA_ON,
+  }, /* {
+    value: "仅开启终端（STA）",
+    key: 2,
+  },*/
+
+]
 
 let wsStore = useWsStore();
 
@@ -225,18 +395,49 @@ const defWifiInfo: WifiInfo = {
   gateway: "未连接",
   ip: "未连接",
   mac: "未连接",
+  dns_main: "未连接",
+  dns_backup: "未连接",
   rssi: 0,
   netmask: "未连接",
   ssid: "未连接",
+  password: "",
 }
+const staIPModeOptions = [
+  {
+    label: "自动 (DHCP)",
+    key: 0,
+  }, {
+    label: "静态IP",
+    key: 1,
+  },
+]
+
+const staDNSModeOptions = [
+  {
+    label: "自动 (使用网关)",
+    key: 0,
+  }, {
+    label: "静态DNS",
+    key: 1,
+  },
+]
 
 let wifiStaApInfo = reactive<WifiInfo>({...defWifiInfo});
 let wifiApInfo = reactive<WifiInfo>({...defWifiInfo});
+let wifiStaticInfo = reactive<IWifiStaStaticInfo>({
+  dns_backup: "0.0.0.0",
+  dns_main: "0.0.0.0",
+  gateway: "0.0.0.0",
+  ip: "0.0.0.0",
+  netmask: "0.0.0.0",
+  static_dns_en: 0,
+  static_ip_en: 0,
+});
 
 let scanning = ref(false);
 let scan_cb: any;
 let connectBtnClicked = 0;
-let options: Array<WifiInfo> = [];
+let options: Array<WifiScanInfo> = [];
 const scanText = computed(() => {
   return scanning.value ? "扫描中" : "扫描";
 });
@@ -263,6 +464,7 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       if (connectBtnClicked) {
         connectBtnClicked = 0;
         globalNotifyRightSide(wifiStaApInfo.ssid + " 连接成功", "success");
+        wifi_sta_get_static_info();
       }
       break;
     }
@@ -295,6 +497,61 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       Object.assign(wifiApInfo, info);
       break;
     }
+    case WifiCmd.WIFI_API_JSON_SET_MODE:
+      wifi_get_mode();
+      /* falls through */
+    case WifiCmd.WIFI_API_JSON_GET_MODE: {
+      const modeInfo = msg as IWifiMode;
+      wifiMode_loading.value = false;
+      if (modeInfo.err !== undefined) {
+        globalNotifyRightSide("设置失败", "error");
+        return;
+      }
+
+      if (modeInfo.status !== undefined) {
+        wifiAp_On.value = modeInfo.status === WifiStatus.WIFI_MODE_AP || modeInfo.status === WifiStatus.WIFI_MODE_APSTA;
+        wifiSta_On.value = modeInfo.status === WifiStatus.WIFI_MODE_STA || modeInfo.status === WifiStatus.WIFI_MODE_APSTA;
+      }
+      if (modeInfo.mode !== undefined) {
+        if (modeInfo.mode < WifiMode.WIFI_AP_STOP) {
+          wifiMode.value = modeInfo.mode;
+        } else if (modeInfo.mode === WifiMode.WIFI_AP_START) {
+          wifiAp_On.value = true;
+        } else if (modeInfo.mode === WifiMode.WIFI_AP_STOP) {
+          wifiAp_On.value = false;
+        } else if (modeInfo.mode === WifiMode.WIFI_STA_START) {
+          wifiSta_On.value = true;
+        } else if (modeInfo.mode === WifiMode.WIFI_STA_STOP) {
+          wifiSta_On.value = false;
+        }
+      }
+      break;
+    }
+    case WifiCmd.WIFI_API_JSON_AP_SET_CRED: {
+      const wifiCred = msg as WiFiCredential;
+      if (wifiCred.err !== undefined) {
+        globalNotifyRightSide(wifiCred.err, "error");
+      } else {
+        globalNotifyRightSide("已保存配置", "success");
+      }
+      wifiMode_loading.value = false;
+
+      break;
+    }
+    case WifiCmd.WIFI_API_JSON_STA_GET_STATIC_INFO: {
+      const staticInfo = msg as IWifiStaStaticInfo & ApiJsonMsg;
+      console.log("@@@", staticInfo);
+      Object.assign(wifiStaticInfo, staticInfo);
+      break;
+    }
+    case WifiCmd.WIFI_API_JSON_STA_SET_STATIC_CONF:
+      wifiMode_loading.value = false;
+      break;
+    default:
+      if (isDevMode()) {
+        console.log(msg);
+      }
+      break;
   }
 };
 
@@ -311,6 +568,8 @@ const onClientCtrl = (msg: ControlMsg) => {
   if (msg.data === ControlEvent.CONNECTED) {
     wifi_sta_get_ap_info();
     wifi_ap_get_info();
+    wifi_get_mode();
+    wifi_sta_get_static_info();
   }
 };
 
@@ -334,6 +593,38 @@ function onConnectClick() {
   }
 }
 
+function beforeWifiModeChange(ap_sta: "AP" | "STA" = "AP") {
+  if (ap_sta === "AP") {
+    wifiMode_loading.value = true;
+    wifi_set_mode(wifiAp_On.value ? WifiMode.WIFI_AP_STOP : WifiMode.WIFI_AP_START);
+  } else {
+    wifiMode_loading.value = true;
+    wifi_set_mode(wifiSta_On.value ? WifiMode.WIFI_STA_STOP : WifiMode.WIFI_STA_START);
+  }
+  wifi_sta_get_ap_info();
+  return false;
+}
+
+function wifiChangeMode() {
+  wifiMode_loading.value = true;
+  wifi_set_mode(wifiMode.value);
+}
+
+function wifiApChangeCredential() {
+  if (wifiApInfo.ssid === "") {
+    globalNotifyRightSide("请输入AP名称", "error");
+    return;
+  }
+  wifiMode_loading.value = true;
+  wifi_ap_set_credential(wifiApInfo.ssid, wifiApInfo.password);
+}
+
+function wifiStaSetStaticInfo() {
+  wifiMode_loading.value = true;
+  wifi_sta_set_static_conf(wifiStaticInfo);
+  wifi_sta_get_ap_info();
+}
+
 onMounted(() => {
   registerModule(WtModuleID.WIFI, {
     ctrlCallback: onClientCtrl,
@@ -342,13 +633,14 @@ onMounted(() => {
   });
   wifi_sta_get_ap_info();
   wifi_ap_get_info();
+  wifi_get_mode();
+  wifi_sta_get_static_info();
 });
 
 onUnmounted(() => {
   unregisterModule(WtModuleID.WIFI);
 });
 
-
 </script>