diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c0988d6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+.idea
+.DS*
+.git
+.vscode
+yarn.lock
+node_modules
+desktop/template/dist
+desktop/release/bin
+desktop/release/windows
\ No newline at end of file
diff --git a/desktop/framework/framework.go b/desktop/framework/framework.go
new file mode 100644
index 0000000..7ed19d9
--- /dev/null
+++ b/desktop/framework/framework.go
@@ -0,0 +1,71 @@
+/**
+ ******************************************************************************
+ * @file    framework.go
+ * @author  GEEKROS site:www.geekros.com github:geekros.github.io
+ ******************************************************************************
+ */
+
+package Framework
+
+import (
+	"cnc/framework/windows/start"
+	"embed"
+	"fmt"
+	"github.com/gookit/color"
+	"github.com/wailsapp/wails/v2"
+	"github.com/wailsapp/wails/v2/pkg/options"
+	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	"github.com/wailsapp/wails/v2/pkg/options/windows"
+)
+
+func Init(template embed.FS) {
+
+	start := StartWindows.Init()
+
+	err := wails.Run(&options.App{
+		Title:     "",
+		Width:     1200,
+		Height:    768,
+		MinWidth:  1200,
+		MinHeight: 768,
+		AssetServer: &assetserver.Options{
+			Assets: template,
+		},
+		BackgroundColour: &options.RGBA{R: 30, G: 31, B: 34, A: 1},
+		OnStartup:        start.Startup,
+		OnShutdown:       start.Shutdown,
+		Bind: []interface{}{
+			start,
+		},
+		WindowStartState: options.Maximised,
+		Windows: &windows.Options{
+			WebviewDisableRendererCodeIntegrity: true,
+			DisableWindowIcon:                   true,
+			CustomTheme: &windows.ThemeSettings{
+				// 黑色主题
+				DarkModeTitleBar:  windows.RGB(43, 45, 48),
+				DarkModeTitleText: windows.RGB(187, 187, 187),
+				DarkModeBorder:    windows.RGB(60, 63, 65),
+				// 亮色主题
+				LightModeTitleBar:  windows.RGB(43, 45, 48),
+				LightModeTitleText: windows.RGB(187, 187, 187),
+				LightModeBorder:    windows.RGB(60, 63, 65),
+				// 黑色主题失去焦点时
+				DarkModeTitleBarInactive:  windows.RGB(60, 63, 65),
+				DarkModeTitleTextInactive: windows.RGB(187, 187, 187),
+				DarkModeBorderInactive:    windows.RGB(60, 63, 65),
+				// 亮色主题失去焦点时
+				LightModeTitleBarInactive:  windows.RGB(60, 63, 65),
+				LightModeTitleTextInactive: windows.RGB(187, 187, 187),
+				LightModeBorderInactive:    windows.RGB(60, 63, 65),
+			},
+		},
+		Debug: options.Debug{
+			OpenInspectorOnStartup: false,
+		},
+	})
+
+	if err != nil {
+		fmt.Println("[cnc][framework]：" + color.Gray.Text(err.Error()))
+	}
+}
diff --git a/desktop/framework/windows/start/index.go b/desktop/framework/windows/start/index.go
new file mode 100644
index 0000000..24e1bbe
--- /dev/null
+++ b/desktop/framework/windows/start/index.go
@@ -0,0 +1,151 @@
+/**
+ ******************************************************************************
+ * @file    index.go
+ * @author  GEEKROS site:www.geekros.com github:geekros.github.io
+ ******************************************************************************
+ */
+
+package StartWindows
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"time"
+)
+
+type Api struct {
+	ctx context.Context
+}
+
+type ReturnResponse struct {
+	Code int         `json:"code"`
+	Data interface{} `json:"data"`
+	Msg  string      `json:"msg"`
+}
+
+func Init() *Api {
+	return &Api{}
+}
+
+func (start *Api) Startup(ctx context.Context) {
+	start.ctx = ctx
+}
+
+func (start *Api) Shutdown(ctx context.Context) {
+
+}
+
+func (start *Api) DeviceRequest(host string, path string, method string, parameter any) map[string]interface{} {
+
+	response := map[string]interface{}{"code": 0}
+
+	requestBody, err := json.Marshal(parameter)
+	if err != nil {
+		response["code"] = 10000
+		return response
+	}
+
+	urlWithParams := "http://" + host + path
+	if method == "GET" {
+		queryParams := url.Values{}
+		parameters := map[string]string{}
+		json.Unmarshal(requestBody, &parameters)
+		for key, value := range parameters {
+			queryParams.Add(key, value)
+		}
+		urlWithParams += "?" + queryParams.Encode()
+	}
+
+	request, err := http.NewRequest(method, urlWithParams, bytes.NewReader(requestBody))
+	if err != nil {
+		response["code"] = 10000
+		return response
+	}
+
+	responseBody, err := start.onRequest(request, "application/json", "")
+	if err != nil {
+		response["code"] = 10000
+		return response
+	}
+	defer responseBody.Close()
+
+	if err := json.NewDecoder(responseBody).Decode(&response); err != nil {
+		response["code"] = 10000
+		return response
+	}
+	response["code"] = 0
+	return response
+}
+
+func (start *Api) ServiceRequest(path string, method string, parameter any, token string) ReturnResponse {
+
+	response := ReturnResponse{}
+
+	requestBody, err := json.Marshal(parameter)
+	if err != nil {
+		response.Code = 10000
+		return response
+	}
+
+	urlWithParams := "https://gateway.geekros.com" + path
+	if method == "GET" {
+		queryParams := url.Values{}
+		parameters := map[string]string{}
+		json.Unmarshal(requestBody, &parameters)
+		for key, value := range parameters {
+			queryParams.Add(key, value)
+		}
+		urlWithParams += "?" + queryParams.Encode()
+	}
+
+	request, err := http.NewRequest(method, urlWithParams, bytes.NewReader(requestBody))
+	if err != nil {
+		response.Code = 10000
+		return response
+	}
+
+	responseBody, err := start.onRequest(request, "application/json", token)
+	if err != nil {
+		response.Code = 10000
+		return response
+	}
+	defer responseBody.Close()
+
+	if err := json.NewDecoder(responseBody).Decode(&response); err != nil {
+		response.Code = 10000
+		return response
+	}
+
+	return response
+}
+
+func (start *Api) onRequest(request *http.Request, contentType string, token string) (io.ReadCloser, error) {
+
+	request.Header.Set("Content-Type", contentType)
+	request.Header.Add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 GEEKCNC/1.0.0")
+	request.Header.Set("Account-Token", token)
+
+	HttpClient := &http.Client{
+		Timeout: 15 * time.Second,
+	}
+
+	response, err := HttpClient.Do(request)
+	if err != nil {
+		return nil, fmt.Errorf("error request: %w", err)
+	}
+
+	if response.StatusCode < 200 || response.StatusCode >= 400 {
+		respBody, err := io.ReadAll(response.Body)
+		if err != nil {
+			return nil, err
+		}
+		return nil, fmt.Errorf("error request: %s", respBody)
+	}
+
+	return response.Body, nil
+}
diff --git a/desktop/go.mod b/desktop/go.mod
new file mode 100644
index 0000000..8076a1c
--- /dev/null
+++ b/desktop/go.mod
@@ -0,0 +1,38 @@
+module cnc
+
+go 1.18
+
+require (
+	github.com/gookit/color v1.5.2
+	github.com/wailsapp/wails/v2 v2.5.1
+)
+
+require (
+	github.com/bep/debounce v1.2.1 // indirect
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/google/uuid v1.3.0 // indirect
+	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
+	github.com/labstack/echo/v4 v4.9.0 // indirect
+	github.com/labstack/gommon v0.3.1 // indirect
+	github.com/leaanthony/go-ansi-parser v1.0.1 // indirect
+	github.com/leaanthony/gosod v1.0.3 // indirect
+	github.com/leaanthony/slicer v1.5.0 // indirect
+	github.com/mattn/go-colorable v0.1.12 // indirect
+	github.com/mattn/go-isatty v0.0.16 // indirect
+	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/samber/lo v1.27.1 // indirect
+	github.com/stretchr/testify v1.8.1 // indirect
+	github.com/tkrajina/go-reflector v0.5.5 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasttemplate v1.2.1 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	github.com/xo/terminfo v0.0.0-20210125001918-ca9a967f8778 // indirect
+	golang.org/x/crypto v0.3.0 // indirect
+	golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e // indirect
+	golang.org/x/net v0.7.0 // indirect
+	golang.org/x/sys v0.5.0 // indirect
+	golang.org/x/text v0.7.0 // indirect
+)
+
+// replace github.com/wailsapp/wails/v2 v2.3.1 => C:\Users\admin\go\pkg\mod
diff --git a/desktop/go.sum b/desktop/go.sum
new file mode 100644
index 0000000..e8a6a19
--- /dev/null
+++ b/desktop/go.sum
@@ -0,0 +1,91 @@
+github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
+github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
+github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
+github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gookit/color v1.5.2 h1:uLnfXcaFjlrDnQDT+NCBcfhrXqYTx/rcCa6xn01Y8yI=
+github.com/gookit/color v1.5.2/go.mod h1:w8h4bGiHeeBpvQVePTutdbERIUf3oJE5lZ8HM0UgXyg=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
+github.com/labstack/echo/v4 v4.9.0 h1:wPOF1CE6gvt/kmbMR4dGzWvHMPT+sAEUJOwOTtvITVY=
+github.com/labstack/echo/v4 v4.9.0/go.mod h1:xkCDAdFCIf8jsFQ5NnbK7oqaF/yU1A1X20Ltm0OvSks=
+github.com/labstack/gommon v0.3.1 h1:OomWaJXm7xR6L1HmEtGyQf26TEn7V6X88mktX9kee9o=
+github.com/labstack/gommon v0.3.1/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
+github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
+github.com/leaanthony/debme v1.2.1/go.mod h1:3V+sCm5tYAgQymvSOfYQ5Xx2JCr+OXiD9Jkw3otUjiA=
+github.com/leaanthony/go-ansi-parser v1.0.1 h1:97v6c5kYppVsbScf4r/VZdXyQ21KQIfeQOk2DgKxGG4=
+github.com/leaanthony/go-ansi-parser v1.0.1/go.mod h1:7arTzgVI47srICYhvgUV4CGd063sGEeoSlych5yeSPM=
+github.com/leaanthony/gosod v1.0.3 h1:Fnt+/B6NjQOVuCWOKYRREZnjGyvg+mEhd1nkkA04aTQ=
+github.com/leaanthony/gosod v1.0.3/go.mod h1:BJ2J+oHsQIyIQpnLPjnqFGTMnOZXDbvWtRCSG7jGxs4=
+github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
+github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/mattn/go-colorable v0.1.12 h1:jF+Du6AlPIjs2BiUiQlKOX0rt3SujHxPnksPKZbaA40=
+github.com/mattn/go-colorable v0.1.12/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
+github.com/mattn/go-isatty v0.0.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/samber/lo v1.27.1 h1:sTXwkRiIFIQG+G0HeAvOEnGjqWeWtI9cg5/n51KrxPg=
+github.com/samber/lo v1.27.1/go.mod h1:it33p9UtPMS7z72fP4gw/EIfQB2eI8ke7GR2wc6+Rhg=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/thoas/go-funk v0.9.1 h1:O549iLZqPpTUQ10ykd26sZhzD+rmR5pWhuElrhbC20M=
+github.com/tkrajina/go-reflector v0.5.5 h1:gwoQFNye30Kk7NrExj8zm3zFtrGPqOkzFMLuQZg1DtQ=
+github.com/tkrajina/go-reflector v0.5.5/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasttemplate v1.2.1 h1:TVEnxayobAdVkhQfrfes2IzOB6o+z4roRkPF52WA1u4=
+github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.5.1 h1:mfG+2kWqQXYOwdgI43HEILjOZDXbk5woPYI3jP2b+js=
+github.com/wailsapp/wails/v2 v2.5.1/go.mod h1:jbOZbcr/zm79PxXxAjP8UoVlDd9wLW3uDs+isIthDfs=
+github.com/xo/terminfo v0.0.0-20210125001918-ca9a967f8778 h1:QldyIu/L63oPpyvQmHgvgickp1Yw510KJOqX7H24mg8=
+github.com/xo/terminfo v0.0.0-20210125001918-ca9a967f8778/go.mod h1:2MuV+tbUrU1zIOPMxZ5EncGwgmMJsa+9ucAQZXxsObs=
+golang.org/x/crypto v0.3.0 h1:a06MkbcxBrEFc0w0QIZWXrH/9cCX6KJyWbBOIwAn+7A=
+golang.org/x/crypto v0.3.0/go.mod h1:hebNnKkNXi2UzZN1eVRvBB7co0a+JxK6XbPiWVs/3J4=
+golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e h1:+WEEuIdZHnUeJJmEUjyYC2gfUMj69yZXw17EnHg/otA=
+golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e/go.mod h1:Kr81I6Kryrl9sr8s2FK3vxD90NdsKWRuOIl2O4CvYbA=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.7.0 h1:rJrUqqhjsgNp7KqAIc25s9pZnjU7TUcSY7HcVZjdn1g=
+golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210330210617-4fbd30eecc44/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210616045830-e2b7044e8c71/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.7.0 h1:4BRB4x83lYWy72KwLD/qYDuTu7q9PjSagHvijDw7cLo=
+golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/desktop/main.go b/desktop/main.go
new file mode 100644
index 0000000..f6f40a1
--- /dev/null
+++ b/desktop/main.go
@@ -0,0 +1,23 @@
+/**
+ ******************************************************************************
+ * @file    main.go
+ * @author  GEEKROS site:www.geekros.com github:geekros.github.io
+ ******************************************************************************
+ */
+
+package main
+
+import (
+	"cnc/framework"
+	"embed"
+	"fmt"
+	"github.com/gookit/color"
+)
+
+//go:embed all:template/dist
+var Template embed.FS
+
+func main() {
+	fmt.Println("[cnc][main]：" + color.Gray.Text("starting..."))
+	Framework.Init(Template)
+}
diff --git a/desktop/readme.md b/desktop/readme.md
new file mode 100644
index 0000000..dc75172
--- /dev/null
+++ b/desktop/readme.md
@@ -0,0 +1,63 @@
+# 🛠️ GEEKCNC
+
+⚡ Desktop Application for LinuxCNC. ⚡
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Install
+
+Please make sure that you have installed the GoLang and Node development environments, ensuring that the Go version is 1.18 or higher and the Node version is 18.13 or higher
+
+```shell
+# Query Go version
+go version
+# Query Node version
+node --version
+```
+
+```shell
+go install github.com/wailsapp/wails/v2/cmd/wails@latest
+```
+
+## Live Development
+
+You can run your application in development mode by running `wails dev` from your project directory
+
+```
+wails dev
+```
+
+## Building
+
+Build the installation package for the application using the following command script
+
+```[readme.md](readme.md)
+wails build -webview2 embed -nsis
+```
+
+## 🌞 Development Team
+
+> https://www.geekros.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/desktop/release/appicon.png b/desktop/release/appicon.png
new file mode 100644
index 0000000..27126d6
Binary files /dev/null and b/desktop/release/appicon.png differ
diff --git a/desktop/release/appicon.psd b/desktop/release/appicon.psd
new file mode 100644
index 0000000..84a937d
Binary files /dev/null and b/desktop/release/appicon.psd differ
diff --git a/desktop/template/index.html b/desktop/template/index.html
new file mode 100644
index 0000000..c72f7a1
--- /dev/null
+++ b/desktop/template/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>GEEKCNC</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/desktop/template/package.json b/desktop/template/package.json
new file mode 100644
index 0000000..1055064
--- /dev/null
+++ b/desktop/template/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "frontend",
+    "private": true,
+    "version": "0.0.0",
+    "scripts": {
+        "dev": "vite",
+        "rebuild": "node-gyp rebuild",
+        "build": "vue-tsc --noEmit && vite build",
+        "preview": "vite preview"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "dependencies": {
+        "@element-plus/icons": "^0.0.11",
+        "@element-plus/icons-vue": "^2.0.9",
+        "axios": "^0.27.2",
+        "element-plus": "2.3.7",
+        "nosleep.js": "^0.12.0",
+        "uuid": "^9.0.0",
+        "vue": "^3.2.37",
+        "vue-router": "^4.1.5"
+    },
+    "devDependencies": {
+        "@babel/types": "^7.18.10",
+        "@types/node": "^18.11.18",
+        "@types/roslib": "^1.3.1",
+        "@vitejs/plugin-vue": "^3.0.3",
+        "@vue/tsconfig": "^0.1.3",
+        "fs-extra": "^11.1.1",
+        "typescript": "^4.6.4",
+        "vite": "^3.0.7",
+        "vue-tsc": "^0.39.5"
+    }
+}
diff --git a/desktop/template/package.json.md5 b/desktop/template/package.json.md5
new file mode 100644
index 0000000..f15c03d
--- /dev/null
+++ b/desktop/template/package.json.md5
@@ -0,0 +1 @@
+4ff77190f71bfd84a6cba9f6abd9d2e6
\ No newline at end of file
diff --git a/desktop/template/public/favicon.ico b/desktop/template/public/favicon.ico
new file mode 100644
index 0000000..2322d31
Binary files /dev/null and b/desktop/template/public/favicon.ico differ
diff --git a/desktop/template/public/static/.gitkeep b/desktop/template/public/static/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/desktop/template/src/app.vue b/desktop/template/src/app.vue
new file mode 100644
index 0000000..b42674b
--- /dev/null
+++ b/desktop/template/src/app.vue
@@ -0,0 +1,79 @@
+<template>
+    <router-view ref="routerView" v-slot="{Component}">
+        <component :is="Component" :cnc="cncData" />
+    </router-view>
+</template>
+
+<script lang="ts">
+import {ref, defineComponent} from "vue";
+import {ElLoading} from "element-plus";
+export default defineComponent({
+    name: "App",
+    emits: [],
+    props: [],
+    components: {},
+    setup(props, context) {
+
+        const cncData: any = ref({
+            loading: ElLoading.service({
+                lock: true,
+                background: "rgba(0, 0, 0, .01)",
+            }),
+            sleep: false, // 控制休眠状态
+            fullscreen: false, // 全屏状态切换
+            device: {
+                ip: "",
+                ips: [],
+                alive: false,
+                timed: null,
+                control: {
+                    port: 8000,
+                    socket: false,
+                    status: false,
+                    data: false
+                },
+                message: {
+                    port: 8001,
+                    socket: false,
+                    status: false,
+                    data: {
+                        basicInfo: false
+                    }
+                },
+                camera: {
+                    port: 8080,
+                    socket: false,
+                    status: false
+                }
+            },
+            header: {
+                dialog: {
+                    type: "",
+                    status: false,
+                    config: {
+                        title: "",
+                        width: "",
+                        close: true
+                    },
+                    form: {
+                        loading: false
+                    }
+                }
+            },
+            navigation: {
+                select: "device"
+            }
+        });
+
+        return {
+            props,
+            cncData
+        }
+    }
+});
+</script>
+
+<style>
+@import "./assets/css/base.scss";
+@import "./assets/css/element.scss";
+</style>
diff --git a/desktop/template/src/assets/css/base.scss b/desktop/template/src/assets/css/base.scss
new file mode 100644
index 0000000..8fbff13
--- /dev/null
+++ b/desktop/template/src/assets/css/base.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+
+* {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-appearance: none;
+    -webkit-touch-callout: none;
+    outline: none;
+    user-select: none;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Inter, sans-serif;
+    font-feature-settings: "tnum";
+    font-variant: tabular-nums;
+    -webkit-font-smoothing: antialiased;
+    font-size: 12px;
+    color: #ffffff;
+}
+
+ul li, ol li {
+    list-style: none;
+}
+
+::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 0;
+    box-shadow: inset 0 0 3px rgba(68, 68, 71, 1);
+    background: rgba(68, 68, 71, .5);
+}
+::-webkit-scrollbar-track{
+    box-shadow: none;
+    border-radius: 0;
+    background: rgba(68, 68, 71, 0);
+}
+
+.xterm-screen{
+    width: calc(100% - 10px) !important;
+}
+
+.page-main{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.loading-view{
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+}
+
+@font-face{
+    font-family: Consolas;
+    src:url("../fonts/JetBrainsMono-Regular.woff2") format("truetype");
+    font-weight: 400;
+    font-style:normal
+}
\ No newline at end of file
diff --git a/desktop/template/src/assets/css/element.scss b/desktop/template/src/assets/css/element.scss
new file mode 100644
index 0000000..23e6736
--- /dev/null
+++ b/desktop/template/src/assets/css/element.scss
@@ -0,0 +1,328 @@
+@charset "UTF-8";
+
+.el-overlay, .el-overlay-dialog{
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+.el-overlay.allow{
+    pointer-events:none !important;
+}
+.el-overlay.allow .el-dialog{
+    pointer-events:auto !important;
+}
+
+.el-empty.cnc{
+    height: 100%;
+    padding: 10px;
+}
+.el-empty.cnc .el-empty__description{
+    margin-top: 10px;
+}
+.el-empty.cnc .el-empty__description p{
+    font-size: 12px;
+    color: #666666;
+}
+
+.el-row.cnc .el-col{
+    margin-bottom: 20px;
+}
+
+.el-text.cnc{
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    display: block;
+}
+.el-text.cnc .el-icon{
+    vertical-align: -1px;
+}
+.el-text.cnc span{
+    margin-left: 5px;
+}
+
+.el-dialog.cnc{
+    background-color: rgba(43, 45, 48, 1);
+    border: 1px solid rgba(59, 60, 61, 1);
+    border-radius: 4px;
+}
+.el-dialog.cnc .el-dialog__header{
+    width: 100%;
+    height: 40px;
+    padding: 0;
+    border-bottom: 1px solid rgba(59, 60, 61, 1);
+}
+.el-dialog.cnc .el-dialog__header:before{
+    width: 30px;
+    height: 40px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    content:" ";
+    background: url("../image/logo.png") no-repeat center center;
+    background-size: 50%;
+}
+.el-dialog.cnc .el-dialog__header .el-dialog__title{
+    width: auto;
+    height: 40px;
+    line-height: 39px;
+    color: #ffffff;
+    font-size: 12px;
+    display: inline-block;
+    margin-left: 30px;
+}
+.el-dialog.cnc .el-dialog__header .el-dialog__headerbtn{
+    width: 40px;
+    height: 40px;
+    line-height: 45px;
+    top: 0;
+}
+.el-dialog.cnc .el-dialog__body{
+    width: 100%;
+    padding: 0;
+}
+
+.el-form.cnc .el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+    color: #666666;
+}
+.el-form.cnc .el-form-item:last-child{
+    margin-bottom: 10px;
+}
+.el-form.cnc .el-form-item__content .el-form-tips{
+    width: 100%;
+    font-size: 12px;
+    line-height: 22px;
+    color: #999999;
+}
+.el-form.cnc .el-form-item__content{
+    min-height: 38px;
+}
+.el-form.cnc .el-form-item__content .el-form-tips.first{
+    margin-top: 5px;
+}
+.el-form.cnc .el-form-item__content .el-form-tips span.font{
+    padding: 0 5px;
+    user-select: text;
+}
+.el-form.cnc .tips{
+    width: 100%;
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+    color: #999999;
+}
+.el-form.cnc .tips span{
+    color: #5e4eff;
+    padding: 0 10px;
+}
+.el-form.cnc .tips span:hover{
+    cursor: pointer;
+}
+
+.el-select.cnc{
+    width: auto;
+    border: 0;
+}
+.el-select.cnc .el-input__wrapper{
+    height: 32px !important;
+    background-color: rgba(0, 0, 0, .2);
+    box-shadow: none;
+    border: 0;
+}
+.el-select.cnc .el-input__wrapper .el-input__inner{
+    font-size: 12px;
+}
+.el-select.cnc .el-input.is-focus .el-input__wrapper{
+    box-shadow: none;
+}
+.el-select.cnc .el-input .el-input__wrapper.is-focus {
+    box-shadow: none;
+}
+.el-select.cnc .el-input__inner{
+    color: #ffffff;
+}
+.el-select.cnc .el-input__inner::selection{
+    background-color: rgba(57, 59, 64, 0);
+}
+
+.el-input.cnc{
+    height: 38px;
+}
+.el-input.cnc .el-input__wrapper{
+    height: 38px;
+    background-color: rgba(30, 31, 34, 1);
+    box-shadow: none;
+    padding: 0 10px;
+    border: 1px solid rgba(59, 60, 61, .9);
+}
+.el-input.cnc .el-input__inner{
+    font-size: 12px;
+    color: #ffffff;
+    letter-spacing: 0.1em;
+}
+.el-input.cnc .el-input__inner::placeholder{
+    color: #666666;
+    font-size: 12px;
+}
+.el-input.cnc .el-input-group__prepend{
+    height: 36px;
+    background-color: rgba(30, 31, 34, 1);
+    border: 1px solid rgba(59, 60, 61, .9);
+    box-shadow: none;
+    padding: 0 10px;
+    border-right: 0;
+}
+.el-input.cnc .el-input-group__prepend span{
+    font-size: 12px;
+}
+.el-input.cnc .el-input-group__append{
+    height: 36px;
+    background-color: rgba(30, 31, 34, 1);
+    border: 1px solid rgba(59, 60, 61, .9);
+    box-shadow: none;
+    padding: 0 10px;
+    border-left: 0;
+}
+.el-input.cnc .el-input-group__append span{
+    font-size: 12px;
+}
+.el-input.cnc .el-input-group__append span:hover{
+    color: #ffffff;
+    cursor: pointer;
+}
+.el-input.cnc .el-input__count .el-input__count-inner{
+    background-color: rgba(0, 0, 0, 0);
+}
+.el-input.cnc .el-input-group__append .el-icon{
+    height: 36px;
+    font-size: 14px;
+}
+.el-input.cnc .el-input-group__append .el-icon:hover{
+    cursor: pointer;
+    color: #ffffff;
+}
+
+.el-button.cnc{
+    font-size: 12px;
+    color: #ffffff;
+}
+
+.el-message.cnc{
+    background-color: rgba(57, 59, 64, 1);
+    border: 0;
+    font-size: 12px;
+    padding: 8px 15px;
+}
+.el-message.cnc .el-message__icon{
+    width: 20px;
+    height: 20px;
+    line-height: 24px;
+    margin-right: 2px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 13px;
+}
+.el-message.cnc .el-message__content{
+    width: auto;
+    height: 20px;
+    line-height: 20px;
+    font-size: 12px;
+}
+
+.el-message-box.cnc{
+    max-width: 350px !important;
+    background-color: rgba(43, 45, 48, 1) !important;
+    border: 1px solid rgba(59, 60, 61, 1) !important;
+    border-radius: 4px;
+}
+.el-message-box.cnc .el-message-box__header{
+    width: 100% !important;
+    height: 40px !important;
+    padding: 0 !important;
+    border-bottom: 1px solid rgba(59, 60, 61, 1) !important;
+}
+.el-message-box.cnc .el-message-box__header:before{
+    width: 30px;
+    height: 40px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    content:" ";
+    background: url("../image/logo.png") no-repeat center center;
+    background-size: 50%;
+}
+.el-message-box.cnc .el-message-box__header .el-message-box__title{
+    width: auto;
+    height: 40px !important;
+    line-height: 39px !important;
+    color: #ffffff !important;
+    font-size: 12px !important;
+    display: inline-block;
+    margin-left: 30px;
+}
+.el-message-box.cnc .el-message-box__header .el-message-box__headerbtn{
+    width: 40px !important;
+    height: 40px !important;
+    line-height: 45px !important;
+    top: 0 !important;
+    right: 0 !important;
+}
+.el-message-box.cnc .el-message-box__content{
+    font-size: 12px !important;
+    color: #999999 !important;
+    padding: 10px !important;
+}
+.el-message-box.cnc .el-message-box__content .el-icon{
+    font-size: 14px !important;
+}
+.el-message-box.cnc .el-message-box__content .el-message-box__message{
+    padding-left: 20px !important;
+}
+.el-message-box.cnc .el-message-box__btns{
+    padding: 0 10px !important;
+}
+.el-message-box.cnc .el-message-box__btns .el-button:not(.el-button--primary){
+    background-color: rgba(0, 0, 0, .2) !important;
+    border-color: rgba(0, 0, 0, .2) !important;
+    font-size: 12px !important;
+}
+.el-message-box.cnc .el-message-box__btns .el-button:not(.el-button--primary):hover{
+    color: #999999 !important;
+}
+.el-message-box.cnc .el-message-box__btns .el-button.el-button--primary{
+    background-color: #5e4eff !important;
+    border-color: #5e4eff !important;
+    font-size: 12px !important;
+}
+
+.el-slider.cnc .el-slider__runway{
+    background-color: rgba(0, 0, 0, .2);
+}
+.el-slider.cnc .el-slider__bar{
+    background-color: #5e4eff;
+}
+.el-slider.cnc .el-slider__button-wrapper{
+    width: 14px;
+    height: 14px;
+    top: -7px;
+}
+.el-slider.cnc .el-slider__button-wrapper .el-slider__button{
+    width: 14px;
+    height: 14px;
+    border-color: #5e4eff;
+}
+.el-slider.cnc .el-slider__input{
+    width: 80px;
+}
+.el-slider.cnc .el-slider__runway.show-input{
+    margin-right: 15px;
+}
+.el-slider.cnc .el-input-number .el-input .el-input__wrapper{
+    background-color: rgba(30, 31, 34, 1);
+    box-shadow: none;
+    border: 1px solid rgba(59, 60, 61, .9);
+}
+.el-slider.cnc .el-input-number .el-input .el-input__wrapper input{
+    color: #999999;
+}
\ No newline at end of file
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Bold.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Bold.woff2
new file mode 100644
index 0000000..4917f43
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Bold.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-BoldItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-BoldItalic.woff2
new file mode 100644
index 0000000..536d3f7
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-BoldItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBold.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBold.woff2
new file mode 100644
index 0000000..8f88c54
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBold.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..d1478ba
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLight.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLight.woff2
new file mode 100644
index 0000000..b97239f
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLight.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLightItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLightItalic.woff2
new file mode 100644
index 0000000..be01aac
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-ExtraLightItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Italic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Italic.woff2
new file mode 100644
index 0000000..d60c270
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Italic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Light.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Light.woff2
new file mode 100644
index 0000000..6538498
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Light.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-LightItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-LightItalic.woff2
new file mode 100644
index 0000000..66ca3d2
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-LightItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Medium.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Medium.woff2
new file mode 100644
index 0000000..669d04c
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Medium.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-MediumItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-MediumItalic.woff2
new file mode 100644
index 0000000..80cfd15
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-MediumItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Regular.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Regular.woff2
new file mode 100644
index 0000000..40da427
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Regular.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-SemiBold.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-SemiBold.woff2
new file mode 100644
index 0000000..5ead7b0
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-SemiBold.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-SemiBoldItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-SemiBoldItalic.woff2
new file mode 100644
index 0000000..c5dd294
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-SemiBoldItalic.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-Thin.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-Thin.woff2
new file mode 100644
index 0000000..17270e4
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-Thin.woff2 differ
diff --git a/desktop/template/src/assets/fonts/JetBrainsMono-ThinItalic.woff2 b/desktop/template/src/assets/fonts/JetBrainsMono-ThinItalic.woff2
new file mode 100644
index 0000000..a643215
Binary files /dev/null and b/desktop/template/src/assets/fonts/JetBrainsMono-ThinItalic.woff2 differ
diff --git a/desktop/template/src/assets/image/logo.png b/desktop/template/src/assets/image/logo.png
new file mode 100644
index 0000000..77103bf
Binary files /dev/null and b/desktop/template/src/assets/image/logo.png differ
diff --git a/desktop/template/src/main.ts b/desktop/template/src/main.ts
new file mode 100644
index 0000000..6e06cc2
--- /dev/null
+++ b/desktop/template/src/main.ts
@@ -0,0 +1,42 @@
+import {createApp} from "vue";
+import App from "./app.vue";
+import {router} from "./router";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import * as ElIcons from "@element-plus/icons-vue";
+
+const app = createApp(App);
+
+app.use(ElementPlus, {zIndex: 90000});
+
+for (const [key, component] of Object.entries(ElIcons)) {
+    app.component(key, component);
+}
+
+app.use(router);
+
+app.directive("resize", {
+    mounted(el, binding) {
+        let _this: any = this;
+        function debounce(fn: any, delay = 16) {
+            let time: any = null;
+            return function () {
+                if (time) {
+                    clearTimeout(time);
+                }
+                const context = _this;
+                const args = arguments
+                time = setTimeout(function () {
+                    fn.apply(context, args);
+                }, delay);
+            }
+        }
+        el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 16));
+        el._resizer.observe(el);
+    },
+    unmounted(el) {
+        el._resizer.disconnect();
+    }
+});
+
+app.mount("#app");
diff --git a/desktop/template/src/package/device/index.ts b/desktop/template/src/package/device/index.ts
new file mode 100644
index 0000000..c0bb36f
--- /dev/null
+++ b/desktop/template/src/package/device/index.ts
@@ -0,0 +1,3 @@
+export default ({
+
+});
\ No newline at end of file
diff --git a/desktop/template/src/package/network/network.ts b/desktop/template/src/package/network/network.ts
new file mode 100644
index 0000000..2e1361d
--- /dev/null
+++ b/desktop/template/src/package/network/network.ts
@@ -0,0 +1,16 @@
+export default ({
+    status: (onload: any, onerror: any) =>{
+        let image = new Image();
+        image.onload = function(){
+            if(typeof onload == "function"){
+                onload();
+            }
+        };
+        image.onerror = function(){
+            if(typeof onerror == "function"){
+                onerror();
+            }
+        };
+        image.src = "https://cdn.geekros.com/studio/network/network.png";
+    }
+});
\ No newline at end of file
diff --git a/desktop/template/src/package/wailsjs/go/StartWindows/Api.d.ts b/desktop/template/src/package/wailsjs/go/StartWindows/Api.d.ts
new file mode 100644
index 0000000..c9c5886
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/go/StartWindows/Api.d.ts
@@ -0,0 +1,7 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+import {StartWindows} from '../models';
+
+export function DeviceRequest(arg1:string,arg2:string,arg3:string,arg4:any):Promise<{[key: string]: any}>;
+
+export function ServiceRequest(arg1:string,arg2:string,arg3:any,arg4:string):Promise<StartWindows.ReturnResponse>;
diff --git a/desktop/template/src/package/wailsjs/go/StartWindows/Api.js b/desktop/template/src/package/wailsjs/go/StartWindows/Api.js
new file mode 100644
index 0000000..111e3c4
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/go/StartWindows/Api.js
@@ -0,0 +1,11 @@
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export function DeviceRequest(arg1, arg2, arg3, arg4) {
+  return window['go']['StartWindows']['Api']['DeviceRequest'](arg1, arg2, arg3, arg4);
+}
+
+export function ServiceRequest(arg1, arg2, arg3, arg4) {
+  return window['go']['StartWindows']['Api']['ServiceRequest'](arg1, arg2, arg3, arg4);
+}
diff --git a/desktop/template/src/package/wailsjs/go/models.ts b/desktop/template/src/package/wailsjs/go/models.ts
new file mode 100644
index 0000000..c3e71b5
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/go/models.ts
@@ -0,0 +1,21 @@
+export namespace StartWindows {
+	
+	export class ReturnResponse {
+	    code: number;
+	    data: any;
+	    msg: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new ReturnResponse(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.code = source["code"];
+	        this.data = source["data"];
+	        this.msg = source["msg"];
+	    }
+	}
+
+}
+
diff --git a/desktop/template/src/package/wailsjs/runtime/package.json b/desktop/template/src/package/wailsjs/runtime/package.json
new file mode 100644
index 0000000..1e7c8a5
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/runtime/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@wailsapp/runtime",
+  "version": "2.0.0",
+  "description": "Wails Javascript runtime library",
+  "main": "runtime.js",
+  "types": "runtime.d.ts",
+  "scripts": {
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wailsapp/wails.git"
+  },
+  "keywords": [
+    "Wails",
+    "Javascript",
+    "Go"
+  ],
+  "author": "Lea Anthony <lea.anthony@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wailsapp/wails/issues"
+  },
+  "homepage": "https://github.com/wailsapp/wails#readme"
+}
diff --git a/desktop/template/src/package/wailsjs/runtime/runtime.d.ts b/desktop/template/src/package/wailsjs/runtime/runtime.d.ts
new file mode 100644
index 0000000..a3723f9
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/runtime/runtime.d.ts
@@ -0,0 +1,235 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export interface Position {
+    x: number;
+    y: number;
+}
+
+export interface Size {
+    w: number;
+    h: number;
+}
+
+export interface Screen {
+    isCurrent: boolean;
+    isPrimary: boolean;
+    width : number
+    height : number
+}
+
+// Environment information such as platform, buildtype, ...
+export interface EnvironmentInfo {
+    buildType: string;
+    platform: string;
+    arch: string;
+}
+
+// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
+// emits the given event. Optional data may be passed with the event.
+// This will trigger any event listeners.
+export function EventsEmit(eventName: string, ...data: any): void;
+
+// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
+export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
+// sets up a listener for the given event name, but will only trigger a given number times.
+export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
+
+// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
+// sets up a listener for the given event name, but will only trigger once.
+export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
+// unregisters the listener for the given event name.
+export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
+
+// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
+// unregisters all listeners.
+export function EventsOffAll(): void;
+
+// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
+// logs the given message as a raw message
+export function LogPrint(message: string): void;
+
+// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
+// logs the given message at the `trace` log level.
+export function LogTrace(message: string): void;
+
+// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
+// logs the given message at the `debug` log level.
+export function LogDebug(message: string): void;
+
+// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
+// logs the given message at the `error` log level.
+export function LogError(message: string): void;
+
+// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
+// logs the given message at the `fatal` log level.
+// The application will quit after calling this method.
+export function LogFatal(message: string): void;
+
+// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
+// logs the given message at the `info` log level.
+export function LogInfo(message: string): void;
+
+// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
+// logs the given message at the `warning` log level.
+export function LogWarning(message: string): void;
+
+// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
+// Forces a reload by the main application as well as connected browsers.
+export function WindowReload(): void;
+
+// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
+// Reloads the application frontend.
+export function WindowReloadApp(): void;
+
+// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
+// Sets the window AlwaysOnTop or not on top.
+export function WindowSetAlwaysOnTop(b: boolean): void;
+
+// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
+// *Windows only*
+// Sets window theme to system default (dark/light).
+export function WindowSetSystemDefaultTheme(): void;
+
+// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
+// *Windows only*
+// Sets window to light theme.
+export function WindowSetLightTheme(): void;
+
+// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
+// *Windows only*
+// Sets window to dark theme.
+export function WindowSetDarkTheme(): void;
+
+// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
+// Centers the window on the monitor the window is currently on.
+export function WindowCenter(): void;
+
+// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
+// Sets the text in the window title bar.
+export function WindowSetTitle(title: string): void;
+
+// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
+// Makes the window full screen.
+export function WindowFullscreen(): void;
+
+// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
+// Restores the previous window dimensions and position prior to full screen.
+export function WindowUnfullscreen(): void;
+
+// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
+// Returns the state of the window, i.e. whether the window is in full screen mode or not.
+export function WindowIsFullscreen(): Promise<boolean>;
+
+// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
+// Sets the width and height of the window.
+export function WindowSetSize(width: number, height: number): Promise<Size>;
+
+// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
+// Gets the width and height of the window.
+export function WindowGetSize(): Promise<Size>;
+
+// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
+// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMaxSize(width: number, height: number): void;
+
+// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
+// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMinSize(width: number, height: number): void;
+
+// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
+// Sets the window position relative to the monitor the window is currently on.
+export function WindowSetPosition(x: number, y: number): void;
+
+// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
+// Gets the window position relative to the monitor the window is currently on.
+export function WindowGetPosition(): Promise<Position>;
+
+// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
+// Hides the window.
+export function WindowHide(): void;
+
+// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
+// Shows the window, if it is currently hidden.
+export function WindowShow(): void;
+
+// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
+// Maximises the window to fill the screen.
+export function WindowMaximise(): void;
+
+// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
+// Toggles between Maximised and UnMaximised.
+export function WindowToggleMaximise(): void;
+
+// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
+// Restores the window to the dimensions and position prior to maximising.
+export function WindowUnmaximise(): void;
+
+// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
+// Returns the state of the window, i.e. whether the window is maximised or not.
+export function WindowIsMaximised(): Promise<boolean>;
+
+// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
+// Minimises the window.
+export function WindowMinimise(): void;
+
+// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
+// Restores the window to the dimensions and position prior to minimising.
+export function WindowUnminimise(): void;
+
+// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
+// Returns the state of the window, i.e. whether the window is minimised or not.
+export function WindowIsMinimised(): Promise<boolean>;
+
+// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
+// Returns the state of the window, i.e. whether the window is normal or not.
+export function WindowIsNormal(): Promise<boolean>;
+
+// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
+// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
+export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
+
+// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
+// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
+export function ScreenGetAll(): Promise<Screen[]>;
+
+// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
+// Opens the given URL in the system browser.
+export function BrowserOpenURL(url: string): void;
+
+// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
+// Returns information about the environment
+export function Environment(): Promise<EnvironmentInfo>;
+
+// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
+// Quits the application.
+export function Quit(): void;
+
+// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
+// Hides the application.
+export function Hide(): void;
+
+// [Show](https://wails.io/docs/reference/runtime/intro#show)
+// Shows the application.
+export function Show(): void;
+
+// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
+// Returns the current text stored on clipboard
+export function ClipboardGetText(): Promise<string>;
+
+// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
+// Sets a text on the clipboard
+export function ClipboardSetText(text: string): Promise<boolean>;
diff --git a/desktop/template/src/package/wailsjs/runtime/runtime.js b/desktop/template/src/package/wailsjs/runtime/runtime.js
new file mode 100644
index 0000000..bd4f371
--- /dev/null
+++ b/desktop/template/src/package/wailsjs/runtime/runtime.js
@@ -0,0 +1,202 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export function LogPrint(message) {
+    window.runtime.LogPrint(message);
+}
+
+export function LogTrace(message) {
+    window.runtime.LogTrace(message);
+}
+
+export function LogDebug(message) {
+    window.runtime.LogDebug(message);
+}
+
+export function LogInfo(message) {
+    window.runtime.LogInfo(message);
+}
+
+export function LogWarning(message) {
+    window.runtime.LogWarning(message);
+}
+
+export function LogError(message) {
+    window.runtime.LogError(message);
+}
+
+export function LogFatal(message) {
+    window.runtime.LogFatal(message);
+}
+
+export function EventsOnMultiple(eventName, callback, maxCallbacks) {
+    return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
+}
+
+export function EventsOn(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, -1);
+}
+
+export function EventsOff(eventName, ...additionalEventNames) {
+    return window.runtime.EventsOff(eventName, ...additionalEventNames);
+}
+
+export function EventsOnce(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, 1);
+}
+
+export function EventsEmit(eventName) {
+    let args = [eventName].slice.call(arguments);
+    return window.runtime.EventsEmit.apply(null, args);
+}
+
+export function WindowReload() {
+    window.runtime.WindowReload();
+}
+
+export function WindowReloadApp() {
+    window.runtime.WindowReloadApp();
+}
+
+export function WindowSetAlwaysOnTop(b) {
+    window.runtime.WindowSetAlwaysOnTop(b);
+}
+
+export function WindowSetSystemDefaultTheme() {
+    window.runtime.WindowSetSystemDefaultTheme();
+}
+
+export function WindowSetLightTheme() {
+    window.runtime.WindowSetLightTheme();
+}
+
+export function WindowSetDarkTheme() {
+    window.runtime.WindowSetDarkTheme();
+}
+
+export function WindowCenter() {
+    window.runtime.WindowCenter();
+}
+
+export function WindowSetTitle(title) {
+    window.runtime.WindowSetTitle(title);
+}
+
+export function WindowFullscreen() {
+    window.runtime.WindowFullscreen();
+}
+
+export function WindowUnfullscreen() {
+    window.runtime.WindowUnfullscreen();
+}
+
+export function WindowIsFullscreen() {
+    return window.runtime.WindowIsFullscreen();
+}
+
+export function WindowGetSize() {
+    return window.runtime.WindowGetSize();
+}
+
+export function WindowSetSize(width, height) {
+    window.runtime.WindowSetSize(width, height);
+}
+
+export function WindowSetMaxSize(width, height) {
+    window.runtime.WindowSetMaxSize(width, height);
+}
+
+export function WindowSetMinSize(width, height) {
+    window.runtime.WindowSetMinSize(width, height);
+}
+
+export function WindowSetPosition(x, y) {
+    window.runtime.WindowSetPosition(x, y);
+}
+
+export function WindowGetPosition() {
+    return window.runtime.WindowGetPosition();
+}
+
+export function WindowHide() {
+    window.runtime.WindowHide();
+}
+
+export function WindowShow() {
+    window.runtime.WindowShow();
+}
+
+export function WindowMaximise() {
+    window.runtime.WindowMaximise();
+}
+
+export function WindowToggleMaximise() {
+    window.runtime.WindowToggleMaximise();
+}
+
+export function WindowUnmaximise() {
+    window.runtime.WindowUnmaximise();
+}
+
+export function WindowIsMaximised() {
+    return window.runtime.WindowIsMaximised();
+}
+
+export function WindowMinimise() {
+    window.runtime.WindowMinimise();
+}
+
+export function WindowUnminimise() {
+    window.runtime.WindowUnminimise();
+}
+
+export function WindowSetBackgroundColour(R, G, B, A) {
+    window.runtime.WindowSetBackgroundColour(R, G, B, A);
+}
+
+export function ScreenGetAll() {
+    return window.runtime.ScreenGetAll();
+}
+
+export function WindowIsMinimised() {
+    return window.runtime.WindowIsMinimised();
+}
+
+export function WindowIsNormal() {
+    return window.runtime.WindowIsNormal();
+}
+
+export function BrowserOpenURL(url) {
+    window.runtime.BrowserOpenURL(url);
+}
+
+export function Environment() {
+    return window.runtime.Environment();
+}
+
+export function Quit() {
+    window.runtime.Quit();
+}
+
+export function Hide() {
+    window.runtime.Hide();
+}
+
+export function Show() {
+    window.runtime.Show();
+}
+
+export function ClipboardGetText() {
+    return window.runtime.ClipboardGetText();
+}
+
+export function ClipboardSetText(text) {
+    return window.runtime.ClipboardSetText(text);
+}
\ No newline at end of file
diff --git a/desktop/template/src/router/index.ts b/desktop/template/src/router/index.ts
new file mode 100644
index 0000000..f29cb8e
--- /dev/null
+++ b/desktop/template/src/router/index.ts
@@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import StartPage from "../windows/start.vue";
+
+const routes = [
+    {
+        path: "/",
+        name: "Start",
+        component: StartPage
+    },
+];
+
+export const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes
+})
\ No newline at end of file
diff --git a/desktop/template/src/vite-env.d.ts b/desktop/template/src/vite-env.d.ts
new file mode 100644
index 0000000..8219b17
--- /dev/null
+++ b/desktop/template/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+    import type {DefineComponent} from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
\ No newline at end of file
diff --git a/desktop/template/src/windows/common/dialog/new_device.vue b/desktop/template/src/windows/common/dialog/new_device.vue
new file mode 100644
index 0000000..76e94b1
--- /dev/null
+++ b/desktop/template/src/windows/common/dialog/new_device.vue
@@ -0,0 +1,111 @@
+<template>
+    <el-dialog class="cnc" v-model="props.cnc.header.dialog.status" :title="props.cnc.header.dialog.config.title" :width="props.cnc.header.dialog.config.width" draggable :modal="true" title="" :show-close="props.cnc.header.dialog.config.close" :before-close="dialogClose" :lock-scroll="true" :closeOnClickModal="false" :closeOnPressEscape="false" :destroy-on-close="true">
+        <div class="new-device-dialog">
+            <el-form class="cnc" :model="props.cnc.header.dialog.form" label-width="80px">
+                <el-form-item label="设备IP地址">
+                    <el-input class="cnc" v-model="props.cnc.header.dialog.form.ip" placeholder="请输入设备的IP地址" maxlength="140" autocomplete="off" spellcheck="false" style="width: 200px" />
+                </el-form-item>
+                <el-form-item label="">
+                    <el-button color="#5e4eff" class="cnc" :loading="props.cnc.header.dialog.form.loading" type="primary" @click="onDevice">连接设备</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeUnmount, onMounted} from "vue";
+import {ElMessage} from "element-plus";
+export default defineComponent({
+    name: "NewDeviceDialog",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        function onDevice(){
+            if(props.cnc.header.dialog.form.ip === "" && (props.cnc.header.dialog.form.ip.replace(/\n|\r/g, "")).trim().length === 0){
+                ElMessage.closeAll();
+                ElMessage({
+                    message: "设备IP地址错误",
+                    type: "warning",
+                    customClass: "cnc"
+                });
+                return;
+            }
+            props.cnc.header.dialog.form.loading = true;
+            (window as any).go.StartWindows.Api.DeviceRequest(props.cnc.header.dialog.form.ip + ":" + props.cnc.device.control.port, "/query/inifields/", "GET", {}).then((response: any)=>{
+                if(response.code === 0){
+                    if(response.MACHINE){
+                        props.cnc.device.ip = props.cnc.header.dialog.form.ip;
+                        if(props.cnc.device.ips.length > 0){
+                            let check = false;
+                            props.cnc.device.ips.forEach((item: any, index: any, array: any)=>{
+                                if(item.ip === props.cnc.device.ip){
+                                    check = true;
+                                }
+                            });
+                            if(!check){
+                                props.cnc.device.ips.push({name: response.MACHINE, ip: props.cnc.header.dialog.form.ip});
+                                localStorage.setItem("cnc:device:ips", JSON.stringify(props.cnc.device.ips));
+                            }
+                        }else{
+                            props.cnc.device.ips.push({name: response.MACHINE, ip: props.cnc.header.dialog.form.ip});
+                            localStorage.setItem("cnc:device:ips", JSON.stringify(props.cnc.device.ips));
+                            console.log(props.cnc.device.ips);
+                        }
+                        (window as any).runtime.EventsEmit("event_message", {type: "connected_device"});
+                        dialogClose(false);
+                    }else{
+                        props.cnc.header.dialog.form.loading = false;
+                        ElMessage.closeAll();
+                        ElMessage({
+                            message: "设备连接失败，请检查后重新尝试",
+                            type: "warning",
+                            customClass: "cnc"
+                        });
+                    }
+                }else{
+                    props.cnc.header.dialog.form.loading = false;
+                    ElMessage.closeAll();
+                    ElMessage({
+                        message: "设备连接失败，请检查后重新尝试",
+                        type: "warning",
+                        customClass: "cnc"
+                    });
+                }
+            });
+        }
+
+        function dialogClose(close: any){
+            if(close){
+                close();
+            }
+            props.cnc.header.dialog.status = false;
+            setTimeout(()=>{
+                props.cnc.header.dialog.config.type = "";
+                props.cnc.header.dialog.form = {
+                    loading: false
+                };
+            }, 20);
+        }
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        return {
+            props,
+            onDevice,
+            dialogClose
+        }
+    }
+});
+</script>
+
+<style scoped>
+.new-device-dialog{
+    width: 100%;
+    padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/desktop/template/src/windows/common/footer.vue b/desktop/template/src/windows/common/footer.vue
new file mode 100644
index 0000000..f96b89f
--- /dev/null
+++ b/desktop/template/src/windows/common/footer.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="footer-main">
+        <div class="footer-item"></div>
+        <div class="footer-item"></div>
+        <div class="footer-item">
+            <div class="item">
+                <el-text class="cnc">
+                    <el-icon><ChatLineRound /></el-icon>
+                    <span>{{props.cnc.device.control.status ? "已连接" : "未连接"}}</span>
+                </el-text>
+            </div>
+            <div class="item">
+                <el-text class="cnc">
+                    <el-icon><ChatDotRound /></el-icon>
+                    <span>{{props.cnc.device.message.status ? "已连接" : "未连接"}}</span>
+                </el-text>
+            </div>
+            <div class="item">
+                <el-text class="cnc">
+                    <el-icon><Bell /></el-icon>
+                    <span>GEEKCNC 1.0.0</span>
+                </el-text>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "FooterCommon",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.footer-main{
+    width: 100%;
+    height: 25px;
+}
+.footer-main .footer-item{
+    width: 33.33%;
+    height: 25px;
+    color: #666666;
+    display: inline-block;
+    vertical-align: top;
+}
+.footer-main .footer-item:last-child{
+    text-align: right;
+}
+.footer-main .footer-item .item{
+    width: auto;
+    height: 25px;
+    line-height: 25px;
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 10px;
+}
+.footer-main .footer-item .item:hover{
+    background-color: rgba(43, 45, 48, 1);
+}
+.footer-main .footer-item .item:deep(.el-text){
+    height: 25px;
+    line-height: 25px;
+}
+</style>
diff --git a/desktop/template/src/windows/common/header.vue b/desktop/template/src/windows/common/header.vue
new file mode 100644
index 0000000..fc61213
--- /dev/null
+++ b/desktop/template/src/windows/common/header.vue
@@ -0,0 +1,442 @@
+<template>
+    <div class="header-main">
+        <div class="header-item">
+            <div class="item logo"></div>
+            <div class="item menu">
+                <el-icon><Grid /></el-icon>
+                <div class="dropdown">
+                    <div class="dropdown-item" @click="onSettings">
+                        <div class="dropdown-item-item">
+                            <el-icon><Setting /></el-icon>
+                        </div>
+                        <div class="dropdown-item-item">
+                            <span>设置</span>
+                        </div>
+                        <div class="dropdown-item-item"></div>
+                    </div>
+                    <div class="dropdown-item" @click="onReload">
+                        <div class="dropdown-item-item">
+                            <el-icon><Refresh /></el-icon>
+                        </div>
+                        <div class="dropdown-item-item">
+                            <span>重载应用</span>
+                        </div>
+                        <div class="dropdown-item-item"></div>
+                    </div>
+                    <div class="dropdown-item">
+                        <div class="dropdown-item-item">
+                            <el-icon><QuestionFilled /></el-icon>
+                        </div>
+                        <div class="dropdown-item-item">
+                            <span>帮助</span>
+                        </div>
+                        <div class="dropdown-item-item">
+                            <el-icon class="arrow"><ArrowRight /></el-icon>
+                        </div>
+                        <div class="dropdown-more">
+                            <div class="dropdown-item" @click="onSite">
+                                <div class="dropdown-item-item">
+                                    <el-icon><ChromeFilled /></el-icon>
+                                </div>
+                                <div class="dropdown-item-item">
+                                    <span>官方网站</span>
+                                </div>
+                                <div class="dropdown-item-item"></div>
+                            </div>
+                            <div class="dropdown-item line"></div>
+                            <div class="dropdown-item" @click="onAbout">
+                                <div class="dropdown-item-item"></div>
+                                <div class="dropdown-item-item">
+                                    <span>关于</span>
+                                </div>
+                                <div class="dropdown-item-item"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dropdown-item line"></div>
+                    <div class="dropdown-item" @click="onQuit">
+                        <div class="dropdown-item-item"></div>
+                        <div class="dropdown-item-item">
+                            <span>退出</span>
+                        </div>
+                        <div class="dropdown-item-item"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="item device">
+                <div class="new-device" @click="onNewDevice">
+                    <el-text class="cnc" v-if="!props.cnc.device.control.status && !props.cnc.device.message.status">
+                        <el-icon><Connection /></el-icon>
+                        <span>连接新设备</span>
+                    </el-text>
+                    <el-text class="cnc" v-else>
+                        <el-icon><Connection /></el-icon>
+                        <span>{{props.cnc.device.ip}}</span>
+                        <el-icon style="margin-left: 5px"><Close /></el-icon>
+                    </el-text>
+                </div>
+            </div>
+        </div>
+        <div class="header-item">
+            <div class="item control" @click="onControlStart">
+                <el-tooltip popper-class="cnc" effect="dark" content="运行" placement="bottom">
+                    <el-icon><VideoPlay /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item control" @click="onControlSuspend">
+                <el-tooltip popper-class="cnc" effect="dark" content="暂停" placement="bottom">
+                    <el-icon><VideoPause /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item control" @click="onControlStop">
+                <el-tooltip popper-class="cnc" effect="dark" content="停止" placement="bottom">
+                    <el-icon><WarningFilled /></el-icon>
+                </el-tooltip>
+            </div>
+        </div>
+        <div class="header-item">
+            <div class="item global" @click="onEmergencyStop">
+                <el-tooltip popper-class="cnc" effect="dark" content="紧急停止" placement="bottom">
+                    <el-text class="cnc">
+                        <el-icon><Remove /></el-icon>
+                        <span>紧急停止</span>
+                    </el-text>
+                </el-tooltip>
+            </div>
+            <div class="item global" @click="onDeviceStart">
+                <el-tooltip popper-class="cnc" effect="dark" content="启动设备" placement="bottom">
+                    <el-text class="cnc">
+                        <el-icon><Promotion /></el-icon>
+                        <span>启动设备</span>
+                    </el-text>
+                </el-tooltip>
+            </div>
+            <div class="item global" @click="onDeviceZeroing">
+                <el-tooltip popper-class="cnc" effect="dark" content="设备回零" placement="bottom">
+                    <el-text class="cnc">
+                        <el-icon><Aim /></el-icon>
+                        <span>设备回零</span>
+                    </el-text>
+                </el-tooltip>
+            </div>
+        </div>
+    </div>
+    <NewDeviceDialog ref="newDeviceDialog" :cnc="props.cnc" v-if="props.cnc.header.dialog.config.type === 'new_device'" />
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+import {ElMessageBox} from "element-plus";
+import NewDeviceDialog from "./dialog/new_device.vue";
+export default defineComponent({
+    name: "HeaderCommon",
+    emits: [],
+    props: ["cnc"],
+    components: {
+        NewDeviceDialog
+    },
+    setup(props, context) {
+
+        function onSettings(){
+
+        }
+
+        function onReload(){
+            (window as any).runtime.WindowReloadApp();
+        }
+
+        function onSite(){
+            (window as any).runtime.BrowserOpenURL("https://www.geekros.com");
+        }
+
+        function onAbout(){
+
+        }
+
+        function onQuit(){
+            (window as any).runtime.Quit();
+        }
+
+        function onNewDevice(){
+            if(!props.cnc.device.control.status && !props.cnc.device.message.status){
+                props.cnc.header.dialog.config.type = "new_device";
+                props.cnc.header.dialog.config.title = "连接新设备";
+                props.cnc.header.dialog.config.width = "400px";
+                props.cnc.header.dialog.config.close = true;
+                props.cnc.header.dialog.form = {
+                    ip: "127.0.0.1"
+                }
+                props.cnc.header.dialog.status = true;
+            }else{
+                ElMessageBox.confirm("是否确认断开设备连接？", "操作确认", {
+                    draggable: true,
+                    confirmButtonText: "确认",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                    customClass: "cnc"
+                }).then(() => {
+                    (window as any).runtime.EventsEmit("event_message", {type: "disconnect_device"});
+                }).catch(() => {});
+            }
+        }
+
+        function onControlStart(){
+
+        }
+
+        function onControlSuspend(){
+
+        }
+
+        function onControlStop(){
+
+        }
+
+        function onEmergencyStop(){
+
+        }
+
+        function onDeviceStart(){
+
+        }
+
+        function onDeviceZeroing(){
+
+        }
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons,
+            onSettings,
+            onReload,
+            onSite,
+            onAbout,
+            onQuit,
+            onNewDevice,
+            onControlStart,
+            onControlSuspend,
+            onControlStop,
+            onEmergencyStop,
+            onDeviceStart,
+            onDeviceZeroing
+        }
+    }
+});
+</script>
+
+<style scoped>
+.header-main{
+    width: 100%;
+    height: 40px;
+}
+.header-main .header-item{
+    width: 33.33%;
+    height: 40px;
+    display: inline-block;
+    vertical-align: top;
+}
+.header-main .header-item:nth-child(2){
+    text-align: center;
+    padding: 5px 10px;
+}
+.header-main .header-item:last-child{
+    text-align: right;
+    padding: 0 10px;
+}
+.header-main .header-item .item{
+    width: auto;
+    height: 39px;
+    display: inline-block;
+    vertical-align: top;
+}
+.header-main .header-item .item.logo{
+    width: 40px;
+    background: url("../src/assets/image/logo.png") no-repeat center center;
+    background-size: 50%;
+}
+.header-main .header-item .item.menu{
+    width: 40px;
+    line-height: 36px;
+    text-align: center;
+    padding: 6px;
+    position: relative;
+}
+.header-main .header-item .item.menu:hover{
+    cursor: pointer;
+    background-color: rgba(57, 59, 64, .5);
+}
+.header-main .header-item .item.menu .el-icon{
+    font-size: 18px;
+}
+.header-main .header-item .item.menu .dropdown{
+    width: max-content;
+    white-space: nowrap;
+    min-width: 120px;
+    line-height: normal;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    text-align: left;
+    background-color: rgba(43, 45, 48, 1);
+    border: 1px solid rgba(59, 60, 61, 1);
+    z-index: 100;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+    padding: 5px;
+    border-radius: 4px;
+    color: #999999;
+    display: none;
+}
+.header-main .header-item .item.menu:hover .dropdown{
+    display: block;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item{
+    width: 100%;
+    height: 30px;
+    position: relative;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item:hover{
+    color: #ffffff;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item.line{
+    height: 1px;
+    border-bottom: 1px solid rgba(59, 60, 61, 1);
+    margin: 6px 0;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item{
+    width: auto;
+    height: 30px;
+    line-height: 30px;
+    display: inline-block;
+    vertical-align: top;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item:first-child{
+    width: 30px;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item span{
+    width: auto;
+    min-width: 60px;
+    height: 30px;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: top;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item .el-icon{
+    width: 30px;
+    height: 30px;
+    font-size: 14px;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item:last-child .el-icon{
+    float: right;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item:not(:hover) .dropdown-item-item .el-icon.arrow{
+    font-size: 12px;
+    color: #666666;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item i{
+    color: #666666;
+    padding-right: 5px;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-more{
+    width: max-content;
+    white-space: nowrap;
+    min-width: 140px;
+    line-height: normal;
+    position: absolute;
+    top: 0;
+    left: calc(100%);
+    text-align: left;
+    background-color: rgba(43, 45, 48, 1);
+    border: 1px solid rgba(59, 60, 61, 1);
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+    padding: 5px;
+    border-radius: 4px;
+    color: #999999;
+    display: none;
+}
+.header-main .header-item .item.menu .dropdown .dropdown-item:hover .dropdown-more{
+    display: block;
+}
+.header-main .header-item .item.device{
+    padding: 0 5px;
+    line-height: 34px;
+}
+.header-main .header-item .item.device .new-device{
+    width: auto;
+    height: 32px;
+    line-height: 32px;
+    background-color: rgba(30, 31, 34, .3);
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 4px;
+    padding: 0 10px;
+}
+.header-main .header-item .item.device .new-device:deep(.el-text){
+    color: #999999;
+}
+.header-main .header-item .item.device .new-device:hover:deep(.el-text){
+    cursor: pointer;
+    color: #ffffff;
+}
+.header-main .header-item .item.global{
+    width: auto;
+    height: 39px;
+    line-height: 30px;
+    text-align: center;
+    padding: 6px 10px;
+    position: relative;
+}
+.header-main .header-item .item.global:hover{
+    cursor: pointer;
+    background-color: rgba(57, 59, 64, .5);
+}
+.header-main .header-item .item.global:deep(.el-text){
+    height: 27px;
+    display: inline-block;
+    vertical-align: top;
+    color: #999999;
+}
+.header-main .header-item .item.global:deep(.el-text):hover{
+    color: #ffffff;
+}
+.header-main .header-item .item.global:deep(.el-text .el-icon){
+    font-size: 16px;
+}
+.header-main .header-item .item.global:deep(.el-text span){
+    height: 27px;
+    font-size: 12px;
+    line-height: 27px;
+    display: inline-block;
+    vertical-align: top;
+}
+.header-main .header-item .item.global:first-child:deep(.el-text){
+    color: #F56C6C;
+}
+.header-main .header-item .item.control{
+    width: 40px;
+    height: 30px;
+    line-height: 36px;
+    text-align: center;
+    background-color: rgba(30, 31, 34, .8);
+    border-radius: 4px;
+    margin: 0 5px;
+}
+.header-main .header-item .item.control:hover{
+    cursor: pointer;
+}
+.header-main .header-item .item.control:deep(.el-icon){
+    font-size: 16px;
+    color: #999999;
+}
+.header-main .header-item .item.control:hover:deep(.el-icon){
+    color: #ffffff;
+}
+</style>
diff --git a/desktop/template/src/windows/common/navigation.vue b/desktop/template/src/windows/common/navigation.vue
new file mode 100644
index 0000000..8e3ff83
--- /dev/null
+++ b/desktop/template/src/windows/common/navigation.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="navigation-view">
+        <div class="navigation-item">
+            <div class="item" :class="props.cnc.navigation.select === 'console' ? 'select' : ''" @click="onNavigation('console')">
+                <el-tooltip popper-class="cnc" effect="dark" content="控制台" placement="right">
+                    <el-icon><Place /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item" :class="props.cnc.navigation.select === 'program' ? 'select' : ''" @click="onNavigation('program')">
+                <el-tooltip popper-class="cnc" effect="dark" content="G程序" placement="right">
+                    <el-icon><Finished /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item" :class="props.cnc.navigation.select === 'plugin' ? 'select' : ''" @click="onNavigation('plugin')">
+                <el-tooltip popper-class="cnc" effect="dark" content="插件" placement="right">
+                    <el-icon><Grid /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item" :class="props.cnc.navigation.select === 'blade' ? 'select' : ''" @click="onNavigation('blade')">
+                <el-tooltip popper-class="cnc" effect="dark" content="刀库" placement="right">
+                    <el-icon><MessageBox /></el-icon>
+                </el-tooltip>
+            </div>
+        </div>
+        <div class="navigation-item">
+            <div class="item" :class="props.cnc.navigation.select === 'settings' ? 'select' : ''" @click="onNavigation('settings')">
+                <el-tooltip popper-class="cnc" effect="dark" content="设置" placement="right">
+                    <el-icon><Tools /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item" @click="onDeviceRestart">
+                <el-tooltip popper-class="cnc" effect="dark" content="重启设备" placement="right">
+                    <el-icon><RefreshRight /></el-icon>
+                </el-tooltip>
+            </div>
+            <div class="item" @click="onDeviceShutdown">
+                <el-tooltip popper-class="cnc" effect="dark" content="设备关机" placement="right">
+                    <el-icon><SwitchButton /></el-icon>
+                </el-tooltip>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "NavigationCommon",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        function onNavigation(navigation: any){
+            if(props.cnc.navigation.select !== navigation){
+                props.cnc.navigation.select = navigation;
+            }
+        }
+
+        function onDeviceRestart(){
+
+        }
+
+        function onDeviceShutdown(){
+
+        }
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons,
+            onNavigation,
+            onDeviceRestart,
+            onDeviceShutdown
+        }
+    }
+});
+</script>
+
+<style scoped>
+.navigation-view{
+    width: 100%;
+    height: 100%;
+}
+.navigation-view .navigation-item{
+    width: 100%;
+    height: calc(100% - 120px);
+}
+.navigation-view .navigation-item:last-child{
+    height: 120px;
+}
+.navigation-view .navigation-item .item{
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    font-size: 18px;
+    padding: 5px;
+}
+.navigation-view .navigation-item .item:deep(.el-icon){
+    width: 29px;
+    height: 29px;
+    font-size: 16px;
+    color: #999999;
+}
+.navigation-view .navigation-item .item:hover:deep(.el-icon){
+    cursor: pointer;
+    background-color: rgba(78, 81, 87, .2);
+    border-radius: 4px;
+    color: #ffffff;
+}
+.navigation-view .navigation-item .item.select:deep(.el-icon){
+    cursor: pointer;
+    background-color: rgba(78, 81, 87, .2);
+    border-radius: 4px;
+    color: #ffffff;
+}
+</style>
diff --git a/desktop/template/src/windows/main/blade.vue b/desktop/template/src/windows/main/blade.vue
new file mode 100644
index 0000000..7de6882
--- /dev/null
+++ b/desktop/template/src/windows/main/blade.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="blade-view" :class="props.cnc.navigation.select">
+        <el-empty class="cnc" description="blade" :image-size="30" />
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "BladeMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.blade-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    display: none;
+}
+.blade-view.blade{
+    display: block;
+}
+</style>
diff --git a/desktop/template/src/windows/main/console.vue b/desktop/template/src/windows/main/console.vue
new file mode 100644
index 0000000..98c5116
--- /dev/null
+++ b/desktop/template/src/windows/main/console.vue
@@ -0,0 +1,378 @@
+<template>
+    <div class="console-view" :class="props.cnc.navigation.select">
+        <div class="console-item">
+            <div class="console-main-item">
+
+            </div>
+            <div class="console-main-item">
+                <div class="console-main-header">
+                    <div class="console-header-item"></div>
+                    <div class="console-header-item"></div>
+                    <div class="console-header-item"></div>
+                </div>
+                <div class="console-main-footer"></div>
+            </div>
+        </div>
+        <div class="console-item">
+            <div class="console-right">
+                <div class="console-right-item">
+                    <div class="title">
+                        <el-text class="cnc">
+                            <el-icon><ScaleToOriginal /></el-icon>
+                            <span>步长(mm)</span>
+                        </el-text>
+                    </div>
+                    <div class="box">
+                        <div class="step">
+                            <el-row class="cnc" :gutter="5">
+                                <el-col :span="4">
+                                    <div class="grid-content">0.01</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">0.05</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">0.1</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">0.5</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content select">1</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">5</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">10</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">20</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">50</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">100</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">150</div>
+                                </el-col>
+                                <el-col :span="4">
+                                    <div class="grid-content">360</div>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </div>
+                <div class="console-right-item">
+                    <div class="title">
+                        <el-text class="cnc">
+                            <el-icon><Operation /></el-icon>
+                            <span>速度(min)</span>
+                        </el-text>
+                    </div>
+                    <div class="box">
+                        <div class="speed-box">
+                            <div class="speed-box-item">
+                                <div class="item">点动速度</div>
+                                <div class="item">
+                                    <el-slider class="cnc" size="small" show-input :show-input-controls="false" />
+                                </div>
+                            </div>
+                            <div class="speed-box-item">
+                                <div class="item">最大速度</div>
+                                <div class="item">
+                                    <el-slider class="cnc" size="small" show-input :show-input-controls="false" />
+                                </div>
+                            </div>
+                            <div class="speed-box-item">
+                                <div class="item">点转速度</div>
+                                <div class="item">
+                                    <el-slider class="cnc" size="small" show-input :show-input-controls="false" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="console-right-item">
+                    <div class="title">
+                        <el-text class="cnc">
+                            <el-icon><Coordinate /></el-icon>
+                            <span>调试键盘</span>
+                        </el-text>
+                    </div>
+                    <div class="box">
+                        <div class="keyboard">
+                            <el-row class="cnc" :gutter="5">
+                                <el-col :span="6">
+                                    <div class="grid-content none"></div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowUpBold /></el-icon>
+                                        </div>
+                                        <div class="name">Y+</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content none"></div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowUpBold /></el-icon>
+                                        </div>
+                                        <div class="name">Z+</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowLeftBold /></el-icon>
+                                        </div>
+                                        <div class="name">X-</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowDownBold /></el-icon>
+                                        </div>
+                                        <div class="name">Y-</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowRightBold /></el-icon>
+                                        </div>
+                                        <div class="name">X+</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowDownBold /></el-icon>
+                                        </div>
+                                        <div class="name">Z-</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowLeftBold /></el-icon>
+                                        </div>
+                                        <div class="name">B-</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowRightBold /></el-icon>
+                                        </div>
+                                        <div class="name">B+</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowLeftBold /></el-icon>
+                                        </div>
+                                        <div class="name">C-</div>
+                                    </div>
+                                </el-col>
+                                <el-col :span="6">
+                                    <div class="grid-content">
+                                        <div class="icon">
+                                            <el-icon><ArrowRightBold /></el-icon>
+                                        </div>
+                                        <div class="name">C+</div>
+                                    </div>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "ConsoleMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.console-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    z-index: 100;
+    display: none;
+}
+.console-view.console{
+    display: block;
+}
+.console-view .console-item{
+    width: calc(100% - 380px);
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+}
+.console-view .console-item:last-child{
+    width: 380px;
+    padding: 10px;
+    background-color: rgba(43, 45, 48, 1);
+    border-left: solid 1px rgba(30, 31, 34, 1);
+    overflow-y: auto;
+}
+.console-view .console-item .console-main-item{
+    width: 100%;
+    height: calc(100% - 240px);
+}
+.console-view .console-item .console-main-item:last-child{
+    height: 240px;
+    background-color: rgba(43, 45, 48, .5);
+    border-top: solid 1px rgba(30, 31, 34, .8);
+}
+.console-view .console-item .console-main-item .console-main-header{
+    width: 100%;
+    height: 40px;
+    background-color: rgba(43, 45, 48, .5);
+    border-bottom: solid 1px rgba(30, 31, 34, .8);
+}
+.console-view .console-item .console-main-item .console-main-header .console-header-item{
+    width: 33.33%;
+    height: 40px;
+    display: inline-block;
+    vertical-align: top;
+}
+.console-view .console-item .console-right{
+    width: 100%;
+    min-height: 100%;
+}
+.console-view .console-item .console-right .console-right-item{
+    width: 100%;
+    margin-bottom: 10px;
+}
+.console-view .console-item .console-right .console-right-item .title{
+    width: 100%;
+    margin-bottom: 10px;
+}
+.console-view .console-item .console-right .console-right-item .box{
+    width: 100%;
+}
+.console-view .console-item .console-right .console-right-item .box:deep(.el-row.cnc .el-col){
+    margin-bottom: 5px;
+}
+.console-view .console-item .console-right .console-right-item .box .step .grid-content{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background-color: rgba(30, 31, 34, .3);
+    border-radius: 4px;
+    color: #999999;
+}
+.console-view .console-item .console-right .console-right-item .box .step .grid-content:hover{
+    cursor: pointer;
+    color: #ffffff;
+    background-color: rgba(30, 31, 34, .5);
+}
+.console-view .console-item .console-right .console-right-item .box .step .grid-content.select{
+    background-color: #5e4eff;
+    color: #ffffff;
+}
+.console-view .console-item .console-right .console-right-item .box .speed-box{
+    width: 100%;
+    background-color: rgba(30, 31, 34, .3);
+    border-radius: 4px;
+    padding: 15px;
+}
+.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item{
+    width: 100%;
+    margin-bottom: 15px;
+}
+.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item:last-child{
+    margin-bottom: 0;
+}
+.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item .item{
+    width: calc(100% - 65px);
+    height: 24px;
+    display: inline-block;
+    vertical-align: top;
+}
+.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item .item:first-child{
+    width: 65px;
+    line-height: 24px;
+    font-size: 12px;
+    color: #666666;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard{
+    width: 100%;
+    padding: 0 15px;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content{
+    width: 100%;
+    height: 65px;
+    text-align: center;
+    background-color: rgba(30, 31, 34, .3);
+    border: solid 1px rgba(30, 31, 34, .5);
+    border-radius: 4px;
+    color: #999999;
+    padding: 10px;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content.none{
+    background-color: rgba(30, 31, 34, 0);
+    border: solid 1px rgba(30, 31, 34, 0);
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover{
+    cursor: pointer;
+    color: #ffffff;
+    background-color: #5e4eff;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content .icon{
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    color: #5e4eff;
+    font-size: 16px;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover .icon{
+    color: #ffffff;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content .name{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    color: #999999;
+}
+.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover .name{
+    color: #ffffff;
+}
+</style>
diff --git a/desktop/template/src/windows/main/device.vue b/desktop/template/src/windows/main/device.vue
new file mode 100644
index 0000000..49056fc
--- /dev/null
+++ b/desktop/template/src/windows/main/device.vue
@@ -0,0 +1,142 @@
+<template>
+    <div class="device-view" :class="props.cnc.navigation.select">
+        <div class="device-main">
+            <div class="device-box">
+                <div class="box-title">
+                    <el-text class="cnc">
+                        <el-icon><QuestionFilled /></el-icon>
+                        <span>设备列表</span>
+                    </el-text>
+                </div>
+                <div class="device-item">
+                    <el-row class="cnc" :gutter="20">
+                        <el-col class="cnc" :span="8" v-for="(item, index) in props.cnc.device.ips" :key="index">
+                            <div class="grid-content" @click="onSelectDevice(item)">
+                                <div class="device-name">{{item.name}}</div>
+                                <div class="device-ip">{{item.ip}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+import {ElMessage} from "element-plus";
+export default defineComponent({
+    name: "DeviceMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        function onSelectDevice(device: any){
+            (window as any).go.StartWindows.Api.DeviceRequest(device.ip + ":" + props.cnc.device.control.port, "/query/inifields/", "GET", {}).then((response: any)=>{
+                console.log(response);
+                if(response.code === 0){
+                    if(response.MACHINE){
+                        props.cnc.device.ip = device.ip;
+                        (window as any).runtime.EventsEmit("event_message", {type: "connected_device"});
+                    }else{
+                        ElMessage.closeAll();
+                        ElMessage({
+                            message: "设备连接失败，请检查后重新尝试",
+                            type: "warning",
+                            customClass: "cnc"
+                        });
+                    }
+                }else{
+                    ElMessage.closeAll();
+                    ElMessage({
+                        message: "设备连接失败，请检查后重新尝试",
+                        type: "warning",
+                        customClass: "cnc"
+                    });
+                }
+            });
+        }
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons,
+            onSelectDevice
+        }
+    }
+});
+</script>
+
+<style scoped>
+.device-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    overflow-y: auto;
+    display: none;
+}
+.device-view.device{
+    display: block;
+}
+.device-view .device-main{
+    padding: 30px;
+    min-height: 1000px;
+}
+.device-view .device-main .device-box{
+    width: 850px;
+    padding: 30px;
+    background-color: rgba(43, 45, 48, .5);
+    border-radius: 4px;
+    margin: 0 auto;
+}
+.device-view .device-main .device-box .box-title{
+    width: 100%;
+    margin-bottom: 10px;
+}
+.device-view .device-main .device-box .box-title:deep(.el-text){
+    color: #999999;
+}
+.device-view .device-main .device-box .device-item{
+    width: 100%;
+}
+.device-view .device-main .device-box .device-item .grid-content{
+    width: 100%;
+    height: 80px;
+    padding: 20px;
+    background-color: rgba(43, 45, 48, .5);
+    border-radius: 4px;
+    position: relative;
+}
+.device-view .device-main .device-box .device-item .grid-content:hover{
+    background-color: rgba(43, 45, 48, .8);
+    cursor: pointer;
+}
+.device-view .device-main .device-box .device-item .grid-content .device-name{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    color: #999999;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.device-view .device-main .device-box .device-item .grid-content:hover .device-name{
+    color: #ffffff;
+}
+.device-view .device-main .device-box .device-item .grid-content .device-ip{
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    color: #666666;
+}
+</style>
diff --git a/desktop/template/src/windows/main/plugin.vue b/desktop/template/src/windows/main/plugin.vue
new file mode 100644
index 0000000..4d8e4f9
--- /dev/null
+++ b/desktop/template/src/windows/main/plugin.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="plugin-view" :class="props.cnc.navigation.select">
+        <el-empty class="cnc" description="plugin" :image-size="30" />
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "PluginMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.plugin-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    display: none;
+}
+.plugin-view.plugin{
+    display: block;
+}
+</style>
diff --git a/desktop/template/src/windows/main/program.vue b/desktop/template/src/windows/main/program.vue
new file mode 100644
index 0000000..711adb2
--- /dev/null
+++ b/desktop/template/src/windows/main/program.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="program-view" :class="props.cnc.navigation.select">
+        <el-empty class="cnc" description="program" :image-size="30" />
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "ProgramMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.program-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    display: none;
+}
+.program-view.program{
+    display: block;
+}
+</style>
diff --git a/desktop/template/src/windows/main/settings.vue b/desktop/template/src/windows/main/settings.vue
new file mode 100644
index 0000000..d32fa03
--- /dev/null
+++ b/desktop/template/src/windows/main/settings.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="settings-view" :class="props.cnc.navigation.select">
+        <el-empty class="cnc" description="settings" :image-size="30" />
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
+import * as icons from "@element-plus/icons";
+export default defineComponent({
+    name: "SettingsMain",
+    emits: [],
+    props: ["cnc"],
+    components: {},
+    setup(props, context) {
+
+        onBeforeMount(() => {});
+
+        onMounted(() => {});
+
+        onBeforeUnmount(() => {});
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.settings-view{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30, 31, 34, 1);
+    display: none;
+}
+.settings-view.settings{
+    display: block;
+}
+</style>
diff --git a/desktop/template/src/windows/start.vue b/desktop/template/src/windows/start.vue
new file mode 100644
index 0000000..502bb22
--- /dev/null
+++ b/desktop/template/src/windows/start.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="cnc-main">
+        <div class="main-item">
+            <HeaderCommon ref="headerCommon" :cnc="props.cnc" />
+        </div>
+        <div class="main-item">
+            <div class="main-box">
+                <div class="main-box-item">
+                    <NavigationCommon ref="navigationCommon" :cnc="props.cnc" />
+                </div>
+                <div class="main-box-item">
+                    <DeviceMain ref="deviceMain" :cnc="props.cnc" />
+                    <ConsoleMain ref="consoleMain" :cnc="props.cnc" />
+                    <ProgramMain ref="programMain" :cnc="props.cnc" />
+                    <PluginMain ref="pluginMain" :cnc="props.cnc" />
+                    <BladeMain ref="bladeMain" :cnc="props.cnc" />
+                    <SettingsMain ref="settingsMain" :cnc="props.cnc" />
+                </div>
+            </div>
+        </div>
+        <div class="main-item">
+            <FooterCommon ref="footerCommon" :cnc="props.cnc" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted} from "vue";
+import {ElLoading} from "element-plus";
+import * as icons from "@element-plus/icons";
+import NoSleep from "nosleep.js";
+import HeaderCommon from "./common/header.vue";
+import FooterCommon from "./common/footer.vue";
+import NavigationCommon from "./common/navigation.vue";
+import DeviceMain from "./main/device.vue";
+import ConsoleMain from "./main/console.vue";
+import ProgramMain from "./main/program.vue";
+import PluginMain from "./main/plugin.vue";
+import BladeMain from "./main/blade.vue";
+import SettingsMain from "./main/settings.vue";
+export default defineComponent({
+    name: "Start",
+    emits: [],
+    props: ["cnc"],
+    components: {
+        HeaderCommon,
+        FooterCommon,
+        NavigationCommon,
+        DeviceMain,
+        ConsoleMain,
+        ProgramMain,
+        PluginMain,
+        BladeMain,
+        SettingsMain
+    },
+    setup(props, context) {
+
+        // 消息事件
+        (window as any).runtime.EventsOn("event_message", (message: any) => {
+            if(message.type && message.type === "connected_device"){
+                onConnectedDevice();
+            }
+            if(message.type && message.type === "disconnect_device"){
+                onDisconnectDevice();
+            }
+        });
+
+        // 连接设备
+        function onConnectedDevice(){
+            if(props.cnc.device.ip !== ""){
+                onConnectedDeviceControl();
+            }
+        }
+
+        // 连接设备控制消息服务
+        function onConnectedDeviceControl(){
+            if(!props.cnc.device.control.status){
+                props.cnc.device.control.socket = new WebSocket("ws://" + props.cnc.device.ip + ":" + props.cnc.device.control.port + "/websocket/", undefined);
+                props.cnc.device.control.socket.onopen = function () {
+                    props.cnc.device.control.status = true;
+                    onConnectedDeviceMessage();
+                }
+                props.cnc.device.control.socket.onmessage = function (message: any) {
+                    let message_json = JSON.parse(message.data);
+                    console.log(message_json);
+                }
+                props.cnc.device.control.socket.onerror = function () {
+                    onDisconnectDevice();
+                }
+                props.cnc.device.control.socket.onclose = function () {
+                    onDisconnectDevice();
+                }
+            }
+        }
+
+        // 连接设备消息服务
+        function onConnectedDeviceMessage(){
+            if(!props.cnc.device.message.status){
+                props.cnc.device.message.socket = new WebSocket("ws://" + props.cnc.device.ip + ":" + props.cnc.device.message.port + "/websocket/", undefined);
+                props.cnc.device.message.socket.onopen = function () {
+                    props.cnc.device.message.status = true;
+                    props.cnc.navigation.select = "console";
+                }
+                props.cnc.device.message.socket.onmessage = function (message: any) {
+                    let message_json = JSON.parse(message.data);
+                    if(message_json.type && message_json.name){
+                        if(message_json.name === "basicInfo"){
+                            props.cnc.device.message.data.basicInfo = message_json.datas;
+                        }
+                        if(message_json.name === "errorInfo"){
+                            console.log(message_json.datas.text);
+                        }
+                    }
+                }
+                props.cnc.device.message.socket.onerror = function () {
+                    onDisconnectDevice();
+                }
+                props.cnc.device.message.socket.onclose = function () {
+                    onDisconnectDevice();
+                }
+            }
+        }
+
+        // 断开设备
+        function onDisconnectDevice(){
+            if(props.cnc.device.control.status){
+                props.cnc.device.control.status = false;
+                props.cnc.device.control.socket.close();
+            }
+            if(props.cnc.device.message.status){
+                props.cnc.device.message.status = false;
+                props.cnc.device.message.socket.close();
+            }
+            props.cnc.navigation.select = "device";
+        }
+
+        onBeforeMount(() => {
+            props.cnc.loading = ElLoading.service({
+                lock: true,
+                background: "rgba(0, 0, 0, .01)",
+                fullscreen: true
+            });
+        });
+
+        onMounted(() => {
+            nextTick(()=>{
+                if(!props.cnc.sleep){
+                    // 禁止屏幕休眠
+                    props.cnc.sleep = new NoSleep();
+                    props.cnc.sleep.enable();
+                }
+                let ips = localStorage.getItem("cnc:device:ips");
+                if(ips){
+                    props.cnc.device.ips = JSON.parse(ips);
+                }
+                props.cnc.loading.close();
+            });
+        });
+
+        onBeforeUnmount(()=>{
+            onDisconnectDevice();
+        })
+
+        onUnmounted(() => {});
+
+        return {
+            props,
+            icons
+        }
+    }
+});
+</script>
+
+<style scoped>
+.cnc-main{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.cnc-main .main-item{
+    width: 100%;
+    height: calc(100% - 65px);
+}
+.cnc-main .main-item:first-child{
+    width: 100%;
+    height: 40px;
+    background-color: rgba(43, 45, 48, 1);
+    border-top: solid 1px rgba(30, 31, 34, 1);
+}
+.cnc-main .main-item:last-child{
+    width: 100%;
+    height: 25px;
+    background-color: rgba(43, 45, 48, .8);
+    border-top: 1px solid rgba(30, 31, 34, 1);
+}
+.cnc-main .main-item .main-box{
+    width: 100%;
+    height: 100%;
+    border-top: 1px solid rgba(30, 31, 34, 1);
+}
+.cnc-main .main-item .main-box .main-box-item{
+    width: calc(100% - 40px);
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+}
+.cnc-main .main-item .main-box .main-box-item:first-child{
+    width: 40px;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: rgba(43, 45, 48, 1);
+    border-right: solid 1px rgba(30, 31, 34, 1);
+}
+</style>
diff --git a/desktop/template/tsconfig.json b/desktop/template/tsconfig.json
new file mode 100644
index 0000000..06dc2cc
--- /dev/null
+++ b/desktop/template/tsconfig.json
@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "strict": true,
+        "jsx": "preserve",
+        "sourceMap": false,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "lib": [
+            "ESNext",
+            "DOM"
+        ],
+        "types": [
+            "node"
+        ],
+        "skipLibCheck": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/desktop/template/tsconfig.node.json b/desktop/template/tsconfig.node.json
new file mode 100644
index 0000000..fe7a069
--- /dev/null
+++ b/desktop/template/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "types": [
+            "node"
+        ]
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}
\ No newline at end of file
diff --git a/desktop/template/vite.config.ts b/desktop/template/vite.config.ts
new file mode 100644
index 0000000..4f44920
--- /dev/null
+++ b/desktop/template/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+    server: {
+        port: 6173
+    },
+    plugins: [
+        vue()
+    ],
+    build: {
+        sourcemap: false
+    },
+    optimizeDeps: {
+        exclude: ["punycode"]
+    },
+})
\ No newline at end of file
diff --git a/desktop/wails.json b/desktop/wails.json
new file mode 100644
index 0000000..8a1b3dd
--- /dev/null
+++ b/desktop/wails.json
@@ -0,0 +1,24 @@
+{
+    "$schema": "https://wails.io/schemas/config.v2.json",
+    "name": "cnc",
+    "outputfilename": "cnc",
+    "build:dir": "release",
+    "wailsjsdir": "template/src/package",
+    "frontend:dir": "template",
+    "frontend:install": "yarn",
+    "frontend:build": "yarn build",
+    "frontend:dev:watcher": "yarn dev",
+    "frontend:dev:serverUrl": "auto",
+    "devServer": "localhost:34225",
+    "author": {
+        "name": "GEEKROS",
+        "email": "admin@wileho.com"
+    },
+    "info": {
+        "companyName": "GEEKROS",
+        "productName": "CNC",
+        "productVersion": "1.0.0",
+        "copyright": "Copyright © 2019-2022 GEEKROS All Rights Reserved",
+        "comments": "GEEKROS (https://www.geekros.com)"
+    }
+}
\ No newline at end of file