initial commit
This commit is contained in:
commit
1bae314449
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-typescript',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'vue/multi-word-component-names': "off"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea/
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
package-lock.json
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
|
||||||
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||||
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
|
InlineSvg: typeof import('./src/components/InlineSvg.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "vue-project",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --build --force",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"element-plus": "^2.6.1",
|
||||||
|
"mitt": "^3.0.1",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-i18n": "^9.10.2",
|
||||||
|
"vue-router": "^4.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
|
"@tsconfig/node20": "^20.1.2",
|
||||||
|
"@types/node": "^20.11.28",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^12.0.0",
|
||||||
|
"@vue/tsconfig": "^0.5.1",
|
||||||
|
"autoprefixer": "^10.4.19",
|
||||||
|
"eslint": "^8.49.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"lightningcss": "^1.24.1",
|
||||||
|
"npm-run-all2": "^6.1.2",
|
||||||
|
"postcss": "^8.4.38",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "~5.4.0",
|
||||||
|
"unplugin-auto-import": "^0.17.5",
|
||||||
|
"unplugin-vue-components": "^0.26.0",
|
||||||
|
"vite": "^5.1.6",
|
||||||
|
"vite-svg-loader": "^5.1.0",
|
||||||
|
"vue-tsc": "^2.0.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {useWsStore} from "@/stores/websocket";
|
||||||
|
import type {ControlMsg, ServerMsg} from "@/composables/broadcastChannelDef";
|
||||||
|
import type {IWebsocketService} from "@/composables/websocket/websocketService";
|
||||||
|
import {ControlEvent, ControlMsgType} from "@/composables/broadcastChannelDef";
|
||||||
|
import {getWebsocketService} from "@/composables/websocket/websocketService";
|
||||||
|
import {onMounted, onUnmounted} from "vue";
|
||||||
|
|
||||||
|
const wsState = useWsStore();
|
||||||
|
|
||||||
|
const onClientCtrl = (msg: ControlMsg) => {
|
||||||
|
console.log("App.vue:", msg);
|
||||||
|
if (msg.type === ControlMsgType.WS_EVENT) {
|
||||||
|
wsState.$patch({state: msg.data as ControlEvent})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onServerMsg = (msg: ServerMsg) => {
|
||||||
|
console.log("App.vue:", msg);
|
||||||
|
};
|
||||||
|
|
||||||
|
let websocketService: IWebsocketService;
|
||||||
|
onMounted(() => {
|
||||||
|
// const host = window.location
|
||||||
|
console.log("App.vue mounted")
|
||||||
|
|
||||||
|
const host = "192.168.43.61";
|
||||||
|
websocketService = getWebsocketService();
|
||||||
|
websocketService.init(host, onServerMsg, onClientCtrl);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
import NavBar from "@/views/navigation/NavBar.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<nav-bar/>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<p class="m-0">This is body</p>
|
||||||
|
<RouterView/>
|
||||||
|
<p>end</p>
|
||||||
|
<!-- <p>{{ test }}</p>-->
|
||||||
|
<el-button type="danger"><p>test</p></el-button>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.app {
|
||||||
|
background-color: #ddd;
|
||||||
|
box-shadow: 0 0 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-active {
|
||||||
|
background-color: #666;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import {sendJsonMsg} from '@/composables/broadcastChannelDef'
|
||||||
|
|
||||||
|
|
||||||
|
import {type ApiJsonMsg} from '@/api'
|
||||||
|
|
||||||
|
const WifiModuleID = 1;
|
||||||
|
enum WifiCmd {
|
||||||
|
UNKNOWN = 0,
|
||||||
|
WIFI_API_JSON_GET_AP_INFO,
|
||||||
|
WIFI_API_JSON_CONNECT,
|
||||||
|
WIFI_API_JSON_GET_SCAN,
|
||||||
|
WIFI_API_JSON_DISCONNECT,
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WifiMsgOut extends ApiJsonMsg {
|
||||||
|
ssid?: string;
|
||||||
|
password?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wifi_get_scan_list() {
|
||||||
|
const msg : WifiMsgOut = {
|
||||||
|
module: WifiModuleID,
|
||||||
|
cmd: WifiCmd.WIFI_API_JSON_GET_SCAN,
|
||||||
|
}
|
||||||
|
sendJsonMsg(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wifi_get_ap_info() {
|
||||||
|
const msg : WifiMsgOut = {
|
||||||
|
module: WifiModuleID,
|
||||||
|
cmd: WifiCmd.WIFI_API_JSON_GET_AP_INFO,
|
||||||
|
}
|
||||||
|
sendJsonMsg(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wifi_connect_to(ssid: string, password: string) {
|
||||||
|
const msg: WifiMsgOut = {
|
||||||
|
module: WifiModuleID,
|
||||||
|
cmd: WifiCmd.WIFI_API_JSON_CONNECT,
|
||||||
|
ssid: ssid,
|
||||||
|
password: password,
|
||||||
|
}
|
||||||
|
sendJsonMsg(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WifiInfo {
|
||||||
|
rssi: number;
|
||||||
|
ssid: string;
|
||||||
|
mac: string;
|
||||||
|
wifiLogo?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WifiList {
|
||||||
|
scan_list: Array<WifiInfo>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export interface ApiJsonMsg {
|
||||||
|
module: number;
|
||||||
|
cmd: number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 369 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 201 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||||
|
<path d="M128 192h768v128H128zm0 256h512v128H128zm0 256h768v128H128zm576-352 192 160-192 128z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 178 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="18" r="2"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 105 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.671 14.307C16.184 12.819 14.17 12 12 12s-4.184.819-5.671 2.307l1.414 1.414c1.11-1.11 2.621-1.722 4.257-1.722 1.636.001 3.147.612 4.257 1.722l1.414-1.414z"></path><circle cx="12" cy="18" r="2"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 280 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.671 14.307C16.184 12.819 14.17 12 12 12s-4.184.819-5.671 2.307l1.414 1.414c1.11-1.11 2.621-1.722 4.257-1.722 1.636.001 3.147.612 4.257 1.722l1.414-1.414z"></path><path d="M20.437 11.292c-4.572-4.573-12.301-4.573-16.873 0l1.414 1.414c3.807-3.807 10.238-3.807 14.045 0l1.414-1.414z"></path><circle cx="12" cy="18" r="2"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 406 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6c3.537 0 6.837 1.353 9.293 3.809l1.414-1.414C19.874 5.561 16.071 4 12 4c-4.071.001-7.874 1.561-10.707 4.395l1.414 1.414C5.163 7.353 8.463 6 12 6zm5.671 8.307c-3.074-3.074-8.268-3.074-11.342 0l1.414 1.414c2.307-2.307 6.207-2.307 8.514 0l1.414-1.414z"></path><path d="M20.437 11.293c-4.572-4.574-12.301-4.574-16.873 0l1.414 1.414c3.807-3.807 10.238-3.807 14.045 0l1.414-1.414z"></path><circle cx="12" cy="18" r="2"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 502 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
@tailwind variants;
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineAsyncComponent } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const icon = defineAsyncComponent(() =>
|
||||||
|
import('@/assets/icon/' + `${props.name}.svg`)
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<component :is="icon" class="fill-current" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import {type ApiJsonMsg} from "@/api"
|
||||||
|
import {getWebsocketService} from "@/composables/websocket/websocketService";
|
||||||
|
|
||||||
|
export const toServer = new BroadcastChannel("toServer");
|
||||||
|
export const toClient = new BroadcastChannel("toClient");
|
||||||
|
export const toWebsocketCtrl = new BroadcastChannel("toWebsocketCtrl");
|
||||||
|
export const toClientCtrl = new BroadcastChannel("toClientCtrl");
|
||||||
|
|
||||||
|
export enum ControlMsgType {
|
||||||
|
WS_EVENT = "WS_EVENT",
|
||||||
|
WS_SET_HOST = "WS_SET_HOST",
|
||||||
|
WS_GET_STATE = "WS_GET_STATE",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ControlEvent {
|
||||||
|
DISCONNECTED = "DISCONNECTED",
|
||||||
|
LOADED = "LOADED",
|
||||||
|
CONNECTED = "CONNECTED",
|
||||||
|
CONNECTING = "CONNECTING",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ControlMsg {
|
||||||
|
type: ControlMsgType,
|
||||||
|
data: ControlEvent | string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ServerMsg {
|
||||||
|
type: "json" | "binary"
|
||||||
|
data: object
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sendJsonMsg(apiJsonMsg: ApiJsonMsg) {
|
||||||
|
const msg: ServerMsg = {
|
||||||
|
type: "json",
|
||||||
|
data: apiJsonMsg,
|
||||||
|
};
|
||||||
|
getWebsocketService().send(msg);
|
||||||
|
// toServer.postMessage(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sendBinMsg(msg: ApiJsonMsg) {
|
||||||
|
// toServer.postMessage(JSON.stringify(msg));
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
import MyWorker from '@/composables/websocket/ws.sharedworker?sharedworker&inline'
|
||||||
|
import {WebsocketWrapper} from "@/composables/websocket/websocketWrapper";
|
||||||
|
import type {ControlMsg, ServerMsg} from "@/composables/broadcastChannelDef";
|
||||||
|
import {ControlMsgType, toClient, toClientCtrl} from "@/composables/broadcastChannelDef";
|
||||||
|
|
||||||
|
const toServer = new BroadcastChannel("toServer");
|
||||||
|
|
||||||
|
export interface IWebsocketService {
|
||||||
|
init(host: string,
|
||||||
|
msgCallback: (msg: ServerMsg) => any,
|
||||||
|
ctrlCallback: (msg: ControlMsg) => any)
|
||||||
|
: void;
|
||||||
|
|
||||||
|
deinit(): void;
|
||||||
|
|
||||||
|
send(msg: ServerMsg): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Websocket that run in a shared worker, shared across tabs
|
||||||
|
*/
|
||||||
|
class WebsocketShared implements IWebsocketService{
|
||||||
|
private static instance: IWebsocketService;
|
||||||
|
|
||||||
|
private worker: SharedWorker;
|
||||||
|
private msgCallback: (msg: ServerMsg) => any;
|
||||||
|
|
||||||
|
private ctrlCallback: (msg: ControlMsg) => any;
|
||||||
|
|
||||||
|
public static getInstance(): IWebsocketService {
|
||||||
|
if (!WebsocketShared.instance) {
|
||||||
|
WebsocketShared.instance = new WebsocketShared();
|
||||||
|
}
|
||||||
|
return WebsocketShared.instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
console.log("Shared Websocket init")
|
||||||
|
this.msgCallback = () => {}
|
||||||
|
this.ctrlCallback = () => {}
|
||||||
|
this.messageEventProxy = this.messageEventProxy.bind(this);
|
||||||
|
this.controlEventProxy = this.controlEventProxy.bind(this);
|
||||||
|
this.worker = new MyWorker();
|
||||||
|
}
|
||||||
|
|
||||||
|
init(host: string, msgCallback: (msg: ServerMsg) => any, ctrlCallback: (msg: ControlMsg) => any): void {
|
||||||
|
console.log("webworker init")
|
||||||
|
toClient.removeEventListener("message", this.messageEventProxy);
|
||||||
|
toClientCtrl.removeEventListener("message", this.controlEventProxy);
|
||||||
|
this.msgCallback = msgCallback;
|
||||||
|
this.ctrlCallback = ctrlCallback;
|
||||||
|
toClient.addEventListener("message", this.messageEventProxy);
|
||||||
|
toClientCtrl.addEventListener("message", this.controlEventProxy);
|
||||||
|
// this.worker.port.onmessage = this.controlEventProxy;
|
||||||
|
this.worker.port.postMessage({type: ControlMsgType.WS_SET_HOST, data: host} as ControlMsg)
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit(): void {
|
||||||
|
toClient.removeEventListener("message", this.messageEventProxy);
|
||||||
|
toClientCtrl.removeEventListener("message", this.controlEventProxy);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
send(msg: ServerMsg): void {
|
||||||
|
console.log("Websocket Service send (not really)", msg)
|
||||||
|
toServer.postMessage(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
messageEventProxy(ev: MessageEvent<ServerMsg>) {
|
||||||
|
this.msgCallback(ev.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
controlEventProxy(ev: MessageEvent<ControlMsg>) {
|
||||||
|
this.ctrlCallback(ev.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class WebsocketClassic implements IWebsocketService{
|
||||||
|
private static instance: IWebsocketService;
|
||||||
|
private socket: WebsocketWrapper;
|
||||||
|
private static count: number = 0;
|
||||||
|
|
||||||
|
public static getInstance(): IWebsocketService {
|
||||||
|
if (!WebsocketClassic.instance) {
|
||||||
|
WebsocketClassic.instance = new WebsocketClassic();
|
||||||
|
}
|
||||||
|
return WebsocketClassic.instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
this.socket = new WebsocketWrapper();
|
||||||
|
WebsocketClassic.count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
init(host: string, msgCallback: (ev: ServerMsg) => any, ctrlCallback: (msg: ControlMsg) => any): void {
|
||||||
|
console.log("Websocket Service INIT called", WebsocketClassic.count);
|
||||||
|
|
||||||
|
this.socket.init(host, msgCallback, ctrlCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit(): void {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
send(msg: ServerMsg): void {
|
||||||
|
this.socket.send(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWebsocketService(): IWebsocketService {
|
||||||
|
if (typeof SharedWorker !== 'undefined') {
|
||||||
|
return WebsocketShared.getInstance();
|
||||||
|
} else {
|
||||||
|
return WebsocketClassic.getInstance();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,210 @@
|
||||||
|
import type {ServerMsg, ControlMsg} from "@/composables/broadcastChannelDef";
|
||||||
|
import {ControlEvent, ControlMsgType} from "@/composables/broadcastChannelDef";
|
||||||
|
|
||||||
|
|
||||||
|
interface IWebsocket {
|
||||||
|
|
||||||
|
close(): void;
|
||||||
|
|
||||||
|
send(msg: ServerMsg): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
class WebsocketDummy implements IWebsocket {
|
||||||
|
close(): void {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
send(msg: ServerMsg) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class OneTimeWebsocket implements IWebsocket {
|
||||||
|
private readonly heartBeatTimeout: number = 2;
|
||||||
|
private readonly host: string;
|
||||||
|
private readonly intervalId: number;
|
||||||
|
private readonly msgCallback: (ev: ServerMsg) => any;
|
||||||
|
private readonly ctrlCallback: (msg: ControlMsg) => any;
|
||||||
|
private readonly closeCallback: () => void;
|
||||||
|
private socket: WebSocket;
|
||||||
|
private heartBeatTimeCount: number;
|
||||||
|
private stoped: boolean;
|
||||||
|
|
||||||
|
constructor(host: string,
|
||||||
|
msgCallback: (ev: ServerMsg) => any,
|
||||||
|
ctrlCallback: (msg: ControlMsg) => any,
|
||||||
|
closeCallback: () => void
|
||||||
|
) {
|
||||||
|
this.host = host;
|
||||||
|
this.stoped = false;
|
||||||
|
this.msgCallback = msgCallback;
|
||||||
|
this.ctrlCallback = ctrlCallback;
|
||||||
|
this.closeCallback = closeCallback;
|
||||||
|
this.heartBeatTimeCount = 0;
|
||||||
|
this.intervalId = 0;
|
||||||
|
|
||||||
|
this.socket = new WebSocket(`ws://${this.host}/ws`);
|
||||||
|
this.setSocketProp();
|
||||||
|
|
||||||
|
this.intervalId = setInterval(() => {
|
||||||
|
if (this.heartBeatTimeCount > this.heartBeatTimeout) {
|
||||||
|
/* did not receive packet "heartBeatTimeout" times,
|
||||||
|
* connection may be lost: close the socket */
|
||||||
|
this.socket.close();
|
||||||
|
console.log("interval: ", this.heartBeatTimeCount, "state: ", this.socket.readyState);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.heartBeatTimeCount++;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
private setSocketProp() {
|
||||||
|
this.socket.binaryType = 'arraybuffer'
|
||||||
|
this.heartBeatTimeCount = 0;
|
||||||
|
|
||||||
|
this.socket.onmessage = (ev) => {
|
||||||
|
this.heartBeatTimeCount = 0;
|
||||||
|
if (!ev.data)
|
||||||
|
return
|
||||||
|
|
||||||
|
const msg: ServerMsg = {
|
||||||
|
data: {},
|
||||||
|
type: "json",
|
||||||
|
}
|
||||||
|
this.msgCallback(msg);
|
||||||
|
if (typeof ev.data === "string") {
|
||||||
|
try {
|
||||||
|
msg.data = JSON.parse(ev.data);
|
||||||
|
this.msgCallback(msg);
|
||||||
|
} catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(typeof ev.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.socket.onclose = () => {
|
||||||
|
console.log('WebSocket Disconnected');
|
||||||
|
|
||||||
|
clearInterval(this.intervalId);
|
||||||
|
this.socket.onclose = null
|
||||||
|
this.socket.onopen = null
|
||||||
|
this.socket.onerror = null
|
||||||
|
this.socket.onmessage = null;
|
||||||
|
|
||||||
|
const msg: ControlMsg = {
|
||||||
|
type: ControlMsgType.WS_EVENT,
|
||||||
|
data: ControlEvent.DISCONNECTED,
|
||||||
|
}
|
||||||
|
this.ctrlCallback(msg);
|
||||||
|
this.closeCallback();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.socket.onerror = (error) => {
|
||||||
|
console.error('WebSocket Error', error);
|
||||||
|
this.socket.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.socket.onopen = ev => {
|
||||||
|
console.log('WebSocket Connected');
|
||||||
|
if (this.stoped) {
|
||||||
|
this.close();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.heartBeatTimeCount = 0;
|
||||||
|
const msg: ControlMsg = {
|
||||||
|
type: ControlMsgType.WS_EVENT,
|
||||||
|
data: ControlEvent.CONNECTED,
|
||||||
|
}
|
||||||
|
this.ctrlCallback(msg);
|
||||||
|
};
|
||||||
|
|
||||||
|
const msg: ControlMsg = {
|
||||||
|
type: ControlMsgType.WS_EVENT,
|
||||||
|
data: ControlEvent.CONNECTING,
|
||||||
|
}
|
||||||
|
this.ctrlCallback(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.stoped = true;
|
||||||
|
this.socket.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
send(msg: ServerMsg) {
|
||||||
|
if (this.socket.readyState !== WebSocket.OPEN) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('WebSocket proxies data ', msg);
|
||||||
|
if (msg.type === "binary") {
|
||||||
|
// this.socket.send(msg.data);
|
||||||
|
} else if (msg.type === "json") {
|
||||||
|
this.socket.send(JSON.stringify(msg.data));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class WebsocketWrapper {
|
||||||
|
private socket: IWebsocket;
|
||||||
|
private msgCallback: (ev: ServerMsg) => any;
|
||||||
|
private ctrlCallback: (msg: ControlMsg) => any;
|
||||||
|
private timeoutId: number;
|
||||||
|
private host: string;
|
||||||
|
private stoped: boolean;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.socket = new WebsocketDummy();
|
||||||
|
this.msgCallback = () => {};
|
||||||
|
this.ctrlCallback = () => {};
|
||||||
|
this.timeoutId = 0;
|
||||||
|
this.host = "";
|
||||||
|
this.stoped = false;
|
||||||
|
|
||||||
|
this.closeCallback = this.closeCallback.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
init(host: string,
|
||||||
|
msgCallback: (ev: ServerMsg) => any,
|
||||||
|
ctrlCallback: (msg: ControlMsg) => any)
|
||||||
|
{
|
||||||
|
if (this.host === host) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.newConnection(host, msgCallback, ctrlCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
private newConnection(host: string,
|
||||||
|
msgCallback: (ev: ServerMsg) => any,
|
||||||
|
ctrlCallback: (msg: ControlMsg) => any)
|
||||||
|
{
|
||||||
|
this.socket.close();
|
||||||
|
this.host = host;
|
||||||
|
this.msgCallback = msgCallback;
|
||||||
|
this.ctrlCallback = ctrlCallback;
|
||||||
|
this.socket = new OneTimeWebsocket(host, this.msgCallback, this.ctrlCallback, this.closeCallback);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private closeCallback() {
|
||||||
|
if (this.stoped) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.timeoutId = setTimeout(() =>
|
||||||
|
this.newConnection(this.host, this.msgCallback, this.ctrlCallback),
|
||||||
|
2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit() {
|
||||||
|
this.socket.close();
|
||||||
|
this.stoped = true;
|
||||||
|
clearTimeout(this.timeoutId);
|
||||||
|
}
|
||||||
|
|
||||||
|
send(msg: ServerMsg) {
|
||||||
|
console.log('WebSocket send: not ready', msg);
|
||||||
|
// this.socket.send(msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
declare const self: SharedWorkerGlobalScope;
|
||||||
|
|
||||||
|
import {WebsocketWrapper} from "@/composables/websocket/websocketWrapper";
|
||||||
|
import type {ControlMsg, ServerMsg} from "@/composables/broadcastChannelDef";
|
||||||
|
import {ControlEvent, ControlMsgType, toClient, toClientCtrl, toServer} from "@/composables/broadcastChannelDef";
|
||||||
|
|
||||||
|
const websocket = new WebsocketWrapper();
|
||||||
|
let host = "";
|
||||||
|
|
||||||
|
function ctrlBroadcast(msg: ControlMsg) {
|
||||||
|
toClientCtrl.postMessage(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function msgBroadcast(msg: ServerMsg) {
|
||||||
|
toClient.postMessage(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// self.onconnect
|
||||||
|
self.onconnect = function(event) {
|
||||||
|
const port = event.ports[0];
|
||||||
|
port.onmessage = function (e: MessageEvent<ControlMsg>) {
|
||||||
|
console.log('Received message in SharedWorker:', e.data);
|
||||||
|
if (e.data.type === ControlMsgType.WS_SET_HOST) {
|
||||||
|
if (host === "" && e.data.data !== "") {
|
||||||
|
host = e.data.data;
|
||||||
|
websocket.init(host, msgBroadcast, ctrlBroadcast);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const msg: ControlMsg = {
|
||||||
|
type: ControlMsgType.WS_EVENT,
|
||||||
|
data: ControlEvent.LOADED,
|
||||||
|
}
|
||||||
|
port.postMessage(msg);
|
||||||
|
};
|
||||||
|
|
||||||
|
toServer.onmessage = (ev: MessageEvent<ServerMsg>) => {
|
||||||
|
websocket.send(ev.data);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { createI18n } from 'vue-i18n';
|
||||||
|
import zh from '@/locales/zh'
|
||||||
|
import en from '@/locales/en'
|
||||||
|
|
||||||
|
// const locale = localStorage.getItem('lang') || 'zh';
|
||||||
|
const locale = 'zh';
|
||||||
|
|
||||||
|
console.log("langggggg:", locale);
|
||||||
|
|
||||||
|
const i18n = createI18n({
|
||||||
|
globalInjection: true,
|
||||||
|
legacy: false,
|
||||||
|
locale: locale,
|
||||||
|
fallbackLocale: 'zh',
|
||||||
|
messages: {
|
||||||
|
zh,
|
||||||
|
// en,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default {
|
||||||
|
disconnected: "disconnected"
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
export default {
|
||||||
|
DISCONNECTED: "未连接",
|
||||||
|
CONNECTED: "已连接",
|
||||||
|
CONNECTING: "连接中",
|
||||||
|
|
||||||
|
WS: {
|
||||||
|
DISCONNECTED: "未连接",
|
||||||
|
CONNECTED: "已连接",
|
||||||
|
CONNECTING: "连接中",
|
||||||
|
},
|
||||||
|
|
||||||
|
PAGE: {
|
||||||
|
HOME: "主页",
|
||||||
|
ABOUT: "关于",
|
||||||
|
FEEDBACK: "反馈",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import '@/assets/tailwind.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import i18n from '@/i18n';
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.use(i18n);
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import Home from '@/views/Home.vue'
|
||||||
|
import Wifi from '@/views/Wifi.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: Home
|
||||||
|
}, {
|
||||||
|
path: '/home:ext(.*)',
|
||||||
|
component: Home,
|
||||||
|
}, {
|
||||||
|
path: '/wifi:ext(.*)',
|
||||||
|
component: Wifi,
|
||||||
|
}, {
|
||||||
|
path: '/about:ext(.*)',
|
||||||
|
name: 'about',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import('@/views/About.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {defineStore} from "pinia";
|
||||||
|
import {ControlEvent} from "@/composables/broadcastChannelDef";
|
||||||
|
|
||||||
|
export const useWsStore = defineStore('websocket', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
state: ControlEvent.DISCONNECTED as ControlEvent,
|
||||||
|
dummy_var: 1 as number,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<h2>About Page</h2>
|
||||||
|
<!-- Your about page content goes here -->
|
||||||
|
<h2>About Page</h2>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
let name = "about-a";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<h4>Skewed</h4>
|
||||||
|
<input class="tgl tgl-skewed" id="cb3" type="checkbox" checked/>
|
||||||
|
<label class="tgl-btn" data-tg-off="低电平" data-tg-on="高电平" for="cb3"></label>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<h2>Home Page</h2>
|
||||||
|
<!-- Your home page content goes here -->
|
||||||
|
<h2>Home Page</h2>
|
||||||
|
<nav>
|
||||||
|
<!-- <RouterLink to="/">Home</RouterLink>-->
|
||||||
|
<!-- <RouterLink to="/wifi">Wifi</RouterLink>-->
|
||||||
|
<!-- <RouterLink to="/about">About</RouterLink>-->
|
||||||
|
<!-- <RouterLink to="/test">Test</RouterLink>-->
|
||||||
|
<!-- <RouterLink to="/home">home</RouterLink>-->
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
document.title = "Home";
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
<template>
|
||||||
|
<div class="wifiView">
|
||||||
|
<h2>Wifi View</h2>
|
||||||
|
<el-form label-width="auto" ref="formRef" :model="ssidValidateForm">
|
||||||
|
<el-form-item
|
||||||
|
label="Wi-Fi名"
|
||||||
|
prop="wifiSsid"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入WIFI名'},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<el-autocomplete
|
||||||
|
v-model="ssidValidateForm.wifiSsid"
|
||||||
|
clearable
|
||||||
|
:placeholder="wifiListPlaceholder"
|
||||||
|
class="inline-input w-full"
|
||||||
|
:fetch-suggestions="querySearch"
|
||||||
|
value-key="ssid"
|
||||||
|
>
|
||||||
|
<template #default="{ item }">
|
||||||
|
<div class="flex">
|
||||||
|
<InlineSvg :name="item.wifiLogo" class="h-6 pr-4"></InlineSvg>
|
||||||
|
<!-- <span class="w-10">{{ item.rssi }}</span>-->
|
||||||
|
<div>{{ item.ssid }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-autocomplete>
|
||||||
|
<div class="h-8">
|
||||||
|
<el-button class="h-8" @click="onScanClick">扫描</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码">
|
||||||
|
<el-input
|
||||||
|
v-model="password"
|
||||||
|
show-password
|
||||||
|
type="password"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<el-button @click="onConnect" type="primary">连接</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<el-button class="h-8">扫描</el-button>
|
||||||
|
<el-button type="primary">连接</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {inject, onMounted, onUnmounted, reactive, ref} from "vue";
|
||||||
|
import {wifi_get_ap_info, wifi_get_scan_list, type WifiInfo, type WifiList} from "@/api/apiWifi";
|
||||||
|
import type {FormInstance} from "element-plus";
|
||||||
|
import type {ServerMsg,ControlMsg} from "@/composables/broadcastChannelDef";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ControlEvent,
|
||||||
|
ControlMsgType
|
||||||
|
} from "@/composables/broadcastChannelDef";
|
||||||
|
import InlineSvg from "@/components/InlineSvg.vue";
|
||||||
|
import {getWebsocketService} from "@/composables/websocket/websocketService";
|
||||||
|
|
||||||
|
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
let wifiListPlaceholder = ref("我的WIFI")
|
||||||
|
let ssidValidateForm = reactive({
|
||||||
|
wifiSsid: ""
|
||||||
|
})
|
||||||
|
const password = ref('')
|
||||||
|
|
||||||
|
let scanning = false;
|
||||||
|
let scan_cb: any;
|
||||||
|
let options: Array<WifiInfo> = [
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const querySearch = (queryString: string, cb: any) => {
|
||||||
|
if (scanning) {
|
||||||
|
scan_cb = cb;
|
||||||
|
} else {
|
||||||
|
cb(options);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onClientMsg = (ev: MessageEvent<ServerMsg>) => {
|
||||||
|
if (ev.data.type !== "json") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const json: object = ev.data.data;
|
||||||
|
|
||||||
|
let wifiList: WifiList;
|
||||||
|
try {
|
||||||
|
wifiList = ev.data.data as WifiList;
|
||||||
|
console.log(wifiList);
|
||||||
|
} catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
scanning = false;
|
||||||
|
wifiList.scan_list.forEach(value => {
|
||||||
|
if (value.rssi > -50) {
|
||||||
|
value.wifiLogo = "wifi-3";
|
||||||
|
} else if (value.rssi > -65) {
|
||||||
|
value.wifiLogo = "wifi-2";
|
||||||
|
} else {
|
||||||
|
value.wifiLogo = "wifi-1";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
options = wifiList.scan_list;
|
||||||
|
if (scan_cb) {
|
||||||
|
scan_cb(options);
|
||||||
|
scan_cb = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClientCtrl = (ev: MessageEvent<ControlMsg>) => {
|
||||||
|
if (ev.data.type !== ControlMsgType.WS_EVENT) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ev.data.data === ControlEvent.CONNECTED) {
|
||||||
|
wifi_get_ap_info();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onScanClick() {
|
||||||
|
scanning = true;
|
||||||
|
wifi_get_scan_list();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onConnect() {
|
||||||
|
console.log(ssidValidateForm.wifiSsid, password.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wifiView {
|
||||||
|
background-color: bisque;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<template>
|
||||||
|
<nav class="relative px-4 py-1 flex justify-between items-center border-b">
|
||||||
|
<div class="flex">
|
||||||
|
<button @click.prevent="sideMenuOpen=true" class="flex items-center hover:text-blue-600 p-3">
|
||||||
|
<svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>Mobile menu</title>
|
||||||
|
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<router-link to="/" class="text-3xl px-4 font-bold leading-none">
|
||||||
|
<InlineSvg name="home" class="h-10"></InlineSvg>
|
||||||
|
</router-link>
|
||||||
|
<!-- <a class="text-3xl px-4 font-bold leading-none" href="/">-->
|
||||||
|
<!-- <InlineSvg name="home" class="h-10"></InlineSvg>-->
|
||||||
|
<!-- </a>-->
|
||||||
|
<router-link to="/" class="flex items-center text-sm text-blue-600 font-bold">主页</router-link>
|
||||||
|
<!-- <a class="flex items-center text-sm text-blue-600 font-bold" href="/">主页6</a>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 md:flex md:mx-auto md:items-center md:w-auto md:space-x-6">
|
||||||
|
<li><router-link to="/wifi" title="Wifi" class="text-sm text-gray-400 hover:text-gray-800">wifi</router-link></li>
|
||||||
|
<!-- <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>-->
|
||||||
|
<!-- <li><a class="text-sm text-blue-600 font-bold">About Us</a></li>-->
|
||||||
|
<!-- <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>-->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <a class="md:ml-auto md:mr-3"></a>-->
|
||||||
|
<div class="flex">
|
||||||
|
<button @click="stateMenuOpen=true"
|
||||||
|
class="py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200">
|
||||||
|
<span class="flex">
|
||||||
|
<svg class="mr-2" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 19.4998H12.01M2 8.81929C3.69692 7.30051 5.74166 6.16236 8 5.53906M5 12.8584C5.86251 12.0129 6.87754 11.3223 8 10.8319M16 5.53906C18.2583 6.16236 20.3031 7.30051 22 8.81929M16 10.8319C17.1225 11.3223 18.1375 12.0129 19 12.8584M12 4.5V15.4998" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<span>{{ wsState }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<!-- <span>{{ $t("Disconnected") }}</span>-->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div :class='["custom-drawer", {open: sideMenuOpen}]'>
|
||||||
|
<el-drawer
|
||||||
|
v-model="sideMenuOpen"
|
||||||
|
:with-header="false"
|
||||||
|
size=""
|
||||||
|
:direction="'ltr'">
|
||||||
|
<div :class="[sideMenuItemClass]" class="px-6" @click="sideMenuOpen=false">
|
||||||
|
<InlineSvg name="cross" class="w-6"></InlineSvg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-col justify-between m-4 mt-0">
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, index) in menuItems" class="mb-1" :key="index">
|
||||||
|
<router-link @click="sideMenuOpen=false" :title="item.name" :to="item.href" :class="sideMenuItemClass">{{ item.name }}</router-link>
|
||||||
|
<!-- <a :href="item.href" :class="sideMenuItemClass">{{ item.name }}</a>-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto">
|
||||||
|
|
||||||
|
<p class="my-4 text-xs text-center text-gray-400">
|
||||||
|
<span>Copyright kerms 2024</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :class='["custom-drawer", {open: stateMenuOpen}]'>
|
||||||
|
<el-drawer
|
||||||
|
v-model="stateMenuOpen"
|
||||||
|
:with-header="false"
|
||||||
|
size=""
|
||||||
|
modal-class="bg-amber-400 bg-opacity-0"
|
||||||
|
:direction="'rtl'">
|
||||||
|
<div class="flex-col justify-between m-4 bg-white">
|
||||||
|
|
||||||
|
<div class="mt-auto">
|
||||||
|
<div class="pt-6">
|
||||||
|
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold bg-gray-50 hover:bg-gray-100 rounded-xl"
|
||||||
|
href="#">Sign in</a>
|
||||||
|
<a class="block px-4 py-3 mb-2 leading-loose text-xs text-center text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded-xl"
|
||||||
|
href="#">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import InlineSvg from "@/components/InlineSvg.vue";
|
||||||
|
import {computed, ref, toRef} from "vue";
|
||||||
|
import {useWsStore} from "@/stores/websocket";
|
||||||
|
import {useI18n} from "vue-i18n";
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
const wsStore = useWsStore();
|
||||||
|
|
||||||
|
const sideMenuItemClass = "block p-4 text-sm font-semibold text-gray-400 hover:bg-blue-50 hover:text-blue-600 rounded"
|
||||||
|
const sideMenuOpen = ref(false);
|
||||||
|
const stateMenuOpen = ref(false)
|
||||||
|
|
||||||
|
const wsState = computed(() => {
|
||||||
|
|
||||||
|
return t(wsStore.state);
|
||||||
|
});
|
||||||
|
|
||||||
|
const menuItems = ([
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
href: "/",
|
||||||
|
}, {
|
||||||
|
name: "About Us",
|
||||||
|
href: "/about",
|
||||||
|
}, {
|
||||||
|
name: "Services",
|
||||||
|
href: "/",
|
||||||
|
}, {
|
||||||
|
name: "Wifi",
|
||||||
|
href: "/wifi",
|
||||||
|
}, {
|
||||||
|
name: "Contact",
|
||||||
|
href: "/",
|
||||||
|
}, {
|
||||||
|
name: "6",
|
||||||
|
href: "/",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
/*nav *{
|
||||||
|
border: solid 1px;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* drawer */
|
||||||
|
.custom-drawer :deep(.el-drawer) {
|
||||||
|
transition: all 0.1s; /* Custom duration*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* drawer overlay */
|
||||||
|
.custom-drawer.open :deep(.el-overlay) {
|
||||||
|
transition: all 0s; /* Custom duration*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-drawer :deep(.el-drawer__body) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": [
|
||||||
|
"env.d.ts",
|
||||||
|
"src/**/*",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"node_modules/@vue/runtime-core/dist/runtime-core.d.ts"
|
||||||
|
],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"DOM", /* for document.* */
|
||||||
|
"WebWorker", /* for *WorkerGlobalScope */
|
||||||
|
"ESNext"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/node20/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import svgLoader from "vite-svg-loader";
|
||||||
|
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
svgLoader(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: '/tmp/zhuang/dap-web-dist/',
|
||||||
|
emptyOutDir: true,
|
||||||
|
cssMinify: 'lightningcss',
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
assetFileNames: (assetInfo) => {
|
||||||
|
if (!assetInfo || !assetInfo.name) {
|
||||||
|
return 'default-filename.ext';
|
||||||
|
}
|
||||||
|
const info = assetInfo.name.split(".");
|
||||||
|
let extType = info[info.length - 1];
|
||||||
|
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
|
||||||
|
extType = "img";
|
||||||
|
} else if (/woff|woff2/.test(extType)) {
|
||||||
|
extType = "css";
|
||||||
|
} else if (/css/.test(extType)) {
|
||||||
|
extType = "css";
|
||||||
|
return "style.css"
|
||||||
|
}
|
||||||
|
// return `[name]-[hash][extname]`;
|
||||||
|
return `[name][extname]`;
|
||||||
|
},
|
||||||
|
// chunkFileNames: "[name]-[hash].js",
|
||||||
|
chunkFileNames: "[name].js",
|
||||||
|
// entryFileNames: "[name]-[hash].js",
|
||||||
|
entryFileNames: (chunkInfo) => {
|
||||||
|
// console.log(chunkInfo)
|
||||||
|
return "script.js"
|
||||||
|
},
|
||||||
|
|
||||||
|
sourcemapFileNames: "map-[name].js",
|
||||||
|
// sanitizeFileName: "anit-[name].js",
|
||||||
|
// entryFileNames: (chunkInfo) => {
|
||||||
|
// console.log(chunkInfo)
|
||||||
|
// return `${chunkInfo.name}.js`
|
||||||
|
// },
|
||||||
|
manualChunks(id) {
|
||||||
|
/* if (id.match('.*!/src/.*shared[a-zA-Z0-9-_]*[.](ts|js).*')) {
|
||||||
|
// Prevent bundling node_modules into common chunks
|
||||||
|
return 'bundle-shared';
|
||||||
|
}
|
||||||
|
else */{
|
||||||
|
// Prevent bundling node_modules into common chunks
|
||||||
|
return 'script'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue