🐛 添加前端页面

api/frontend/handlers.go

@@ -2,12 +2,19 @@ package frontend
 
 import (
 	"context"
+	"embed"
+	"github.com/LiteyukiStudio/go-logger/log"
 	"github.com/cloudwego/hertz/pkg/app"
-	"os"
+	"github.com/gabriel-vasile/mimetype"
 	"server-status-be/dao"
 	"strings"
 )
 
+//go:embed web/*
+var webFiles embed.FS
+
+var fs2 app.FS
+
 func OnGetServerStatus(ctx context.Context, c *app.RequestContext) {
 	ret := make(map[string]interface{})
 	for k, v := range dao.GetAll() {
@@ -21,25 +28,38 @@ func OnGetServerStatus(ctx context.Context, c *app.RequestContext) {
 }
 
 func OnGetStaticFile(ctx context.Context, c *app.RequestContext) {
-	c.Request.URI().Path()
 	file := c.Param("file")
-	fp := "./web/" + file
+	var fp string
 
 	if file == "" {
 		fp = "web/index.html"
-	}
-	// 判断文件是否存在
-	if _, err := os.Stat(fp); err != nil {
-		fp += ".html"
-		if _, err := os.Stat(fp); err != nil {
-			c.JSON(404, "File Not Found")
-			return
-		} else {
-			c.File(fp)
-			return
-		}
 	} else {
-		c.File(fp)
+		fp = "web/" + file
 	}
-	ctx.Done()
+
+	data, err := webFiles.ReadFile(fp)
+	if err != nil {
+		log.Error("Read file error: ", err)
+	}
+	contentType := mimetype.Detect(data).String()
+	if strings.HasSuffix(fp, ".js") {
+		contentType = "application/javascript"
+	} else if strings.HasSuffix(fp, ".css") {
+		contentType = "text/css"
+	} else if strings.HasSuffix(fp, ".html") {
+		contentType = "text/html"
+	} else if strings.HasSuffix(fp, ".json") {
+		contentType = "application/json"
+	} else if strings.HasSuffix(fp, ".png") {
+		contentType = "image/png"
+	} else if strings.HasSuffix(fp, ".jpg") {
+		contentType = "image/jpeg"
+	} else if strings.HasSuffix(fp, ".ico") {
+		contentType = "image/x-icon"
+	} else if strings.HasSuffix(fp, ".svg") {
+		contentType = "image/svg+xml"
+	}
+
+	log.Info("Get file: ", fp, " with content type: ", contentType)
+	c.Data(200, contentType, data)
 }

api/frontend/web/apiroot

@@ -0,0 +1 @@
+http://127.0.0.1:8088

api/frontend/web/assets/index-D-XXFb5n.css

@@ -0,0 +1 @@
+:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark{color:#fff;background-color:#000}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}.host[data-v-70ccf727]{padding:1em;border:1px solid #ccc;border-radius:20px;margin:.5em;flex-direction:column;justify-content:space-between}.icon[data-v-70ccf727]{margin-right:.5em;height:20px}.section[data-v-70ccf727]{display:flex;margin-right:10px}.label[data-v-70ccf727]{background-color:#535bf2;padding:2px 5px;border-radius:5px;margin-right:10px}.chart[data-v-70ccf727]{width:150px;height:150px}.grid-container[data-v-9196e233]{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding:10px}.grid-item[data-v-9196e233]{background-color:#3bb7c3;padding:20px;text-align:center;border:1px solid #3bb7c3;border-radius:5px}.navbar[data-v-dc98e94b]{z-index:3;display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:80px;background-color:#d0e9ff;box-shadow:0 2px 4px #0000001a}.navbar-left img[data-v-dc98e94b]{height:40px}.navbar-left[data-v-dc98e94b],.navbar-right[data-v-dc98e94b]{display:flex;align-items:center}.navbar-center img[data-v-dc98e94b]{height:80px}.logo[data-v-3a9bcf68]{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo[data-v-3a9bcf68]:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vue[data-v-3a9bcf68]:hover{filter:drop-shadow(0 0 2em #42b883aa)}

api/frontend/web/icon.svg

@@ -0,0 +1 @@
+<svg t="1727822038069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4294" width="500" height="500"><path d="M131.437714 1024h761.124572v-72.704H131.437714V1024z m792.868572-1024H99.766857C44.617143 0 0 44.836571 0 99.913143v604.745143C0 759.734857 44.763429 804.571429 99.693714 804.571429h824.612572C979.236571 804.571429 1024 759.734857 1024 704.658286V99.913143C1024 44.763429 979.382857 0 924.306286 0z m49.371428 475.428571H682.057143L572.854857 297.398857 357.595429 590.043429 243.126857 475.428571H71.972571v-72.704h201.289143l76.068572 76.068572 228.790857-311.222857L722.651429 402.724571h251.172571V475.428571z" p-id="4295" fill="#a2d8f4"></path></svg>

api/frontend/web/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/icon.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Server Status</title>
+  <script type="module" crossorigin src="/assets/index-B8yPNO6K.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-D-XXFb5n.css">
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

api/frontend/web/svg/location.svg

@@ -0,0 +1 @@
+<svg t="1727834531300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" width="500" height="500"><path d="M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z" p-id="2345" fill="#a2d8f4"></path></svg>

api/frontend/web/svg/system.svg

@@ -0,0 +1 @@
+<svg t="1727839277203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3434" width="500" height="500"><path d="M91.83 661.86c1.87 34.09 30.28 60.65 64.43 60.22h331.23v91.74H360.74c-13.34 0-24.16 10.82-24.16 24.16s10.82 24.16 24.16 24.16h302.53c13.34 0 24.16-10.82 24.16-24.16s-10.82-24.16-24.16-24.16H536.51v-91.74h331.24c34.14 0.43 62.55-26.13 64.43-60.22v-55.32H91.83v55.32zM867.74 161.86H156.26c-34.93-0.39-63.66 27.41-64.43 62.33v328.43h840.34V224.19c-0.77-34.93-29.5-62.72-64.43-62.33z" fill="#a2d8f4" p-id="3435"></path></svg>

api/router.go

@@ -16,7 +16,7 @@ import (
 var h *server.Hertz
 
 func init() {
-	h = hertz.NewHertz([]config.Option{server.WithHostPorts(":8088")}, []app.HandlerFunc{})
+	h = hertz.NewHertz([]config.Option{server.WithHostPorts(":8090")}, []app.HandlerFunc{})
 	// cv api 状态客户端接口
 	h.Use(cors.Default())
 
@@ -32,11 +32,11 @@ func init() {
 	{
 		api.GET("/", func(ctx context.Context, c *app.RequestContext) { c.JSON(200, "Hello, api") })
 		api.GET("/status", frontend.OnGetServerStatus)
-
 	}
 
 	// 静态文件
 	h.GET("/*file", frontend.OnGetStaticFile)
+	//h.StaticFS("/", fs)
 }
 
 func Run() {