skyle1995/NetworkAuth
1
0
Fork 0
mirror of https://github.com/skyle1995/NetworkAuth.git synced 2026-05-25 02:24:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enhance user authentication and authentication

Browse Source 
Fix the modification of personal information
Fix the formatted page template
This commit is contained in:
凌动科技
2025-10-26 03:05:27 +08:00
parent 3e170ad526
commit c93ee377fe
22 changed files with 2728 additions and 2420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
config/config.json
View File

@@ -37,6 +37,12 @@
"security": {
"jwt_secret": "your-jwt-secret-key",
"encryption_key": "your-encryption-key",
"jwt_refresh_threshold_hours": 6
"jwt_refresh_threshold_hours": 6,
"cookie": {
"secure": false,
"same_site": "Lax",
"domain": "",
"max_age": 86400
}
}
}

59
controllers/admin/auth.go
View File

@@ -26,8 +26,33 @@ func LoginPageHandler(w http.ResponseWriter, r *http.Request) {
return
}
// 获取或生成CSRF令牌
var token string
if existingToken := utils.GetCSRFTokenFromCookie(r); existingToken != "" {
// 重用现有的Cookie令牌
token = existingToken
} else {
// 生成新的CSRF令牌并设置到Cookie
newToken, err := utils.GenerateCSRFToken()
if err != nil {
http.Error(w, "生成CSRF令牌失败", http.StatusInternalServerError)
return
}
token = newToken
utils.SetCSRFToken(w, token)
}
// 准备模板数据
extraData := map[string]interface{}{
"Title": "管理员登录",
}
data := utils.GetDefaultTemplateData()
data["Title"] = "管理员登录"
data["CSRFToken"] = token
// 合并额外数据
for key, value := range extraData {
data[key] = value
}
utils.RenderTemplate(w, "login.html", data)
}
@@ -97,15 +122,8 @@ func LoginHandler(w http.ResponseWriter, r *http.Request) {
return
}
// 设置JWT Cookie（HttpOnly，安全）
cookie := &http.Cookie{
Name: "admin_session",
Value: token,
Path: "/",
HttpOnly: true,
Secure: false, // 生产环境应设置为true（HTTPS）
MaxAge: 24 * 60 * 60, // 24小时
}
// 设置JWT Cookie（使用安全配置）
cookie := utils.CreateSecureCookie("admin_session", token, utils.GetDefaultCookieMaxAge())
http.SetCookie(w, cookie)
utils.JsonResponse(w, http.StatusOK, true, "登录成功", map[string]interface{}{
@@ -132,15 +150,7 @@ func LogoutHandler(w http.ResponseWriter, r *http.Request) {
// - 统一的Cookie清理函数，确保一致性
// - 在JWT校验失败时自动调用，提升安全性和用户体验
func clearInvalidJWTCookie(w http.ResponseWriter) {
cookie := &http.Cookie{
Name: "admin_session",
Value: "",
Path: "/",
HttpOnly: true,
Secure: false, // 生产环境应设置为true
MaxAge: -1, // 立即失效
Expires: time.Unix(0, 0), // 确保过期
}
cookie := utils.CreateExpiredCookie("admin_session")
http.SetCookie(w, cookie)
}
@@ -434,15 +444,8 @@ func GetCurrentAdminUserWithRefresh(w http.ResponseWriter, r *http.Request) (*JW
}
newToken, err := generateJWTToken(user)
if err == nil {
// 更新Cookie
newCookie := &http.Cookie{
Name: "admin_session",
Value: newToken,
Path: "/",
HttpOnly: true,
Secure: false, // 生产环境应设置为true（HTTPS）
MaxAge: 24 * 60 * 60, // 24小时
}
// 更新Cookie（使用安全配置）
newCookie := utils.CreateSecureCookie("admin_session", newToken, utils.GetDefaultCookieMaxAge())
http.SetCookie(w, newCookie)
refreshed = true

13
controllers/admin/captcha.go
View File

@@ -7,7 +7,8 @@ import (
"math/big"
"net/http"
"strings"
"time"
"networkDev/utils"
"github.com/mojocn/base64Captcha"
)
@@ -62,15 +63,7 @@ func CaptchaHandler(w http.ResponseWriter, r *http.Request) {
// 将验证码ID存储到session中（这里简化处理，实际项目中应该使用更安全的方式）
// 设置cookie来存储验证码ID
cookie := &http.Cookie{
Name: "captcha_id",
Value: id,
Path: "/",
HttpOnly: true,
Secure: false, // 生产环境应设置为true
MaxAge: 300, // 5分钟过期
Expires: time.Now().Add(5 * time.Minute),
}
cookie := utils.CreateSecureCookie("captcha_id", id, 300) // 5分钟过期
http.SetCookie(w, cookie)
// 解码base64图片数据并返回

42
controllers/admin/handlers.go
View File

@@ -26,21 +26,47 @@ func AdminIndexHandler(w http.ResponseWriter, r *http.Request) {
// AdminLayoutHandler 后台布局页渲染
// - 渲染 layout.html，包含顶部导航、侧边栏与动态内容容器
func AdminLayoutHandler(w http.ResponseWriter, r *http.Request) {
data := utils.GetDefaultTemplateData()
// 获取或生成CSRF令牌
var token string
if existingToken := utils.GetCSRFTokenFromCookie(r); existingToken != "" {
// 重用现有的Cookie令牌
token = existingToken
} else {
// 生成新的CSRF令牌并设置到Cookie
newToken, err := utils.GenerateCSRFToken()
if err != nil {
http.Error(w, "生成CSRF令牌失败", http.StatusInternalServerError)
return
}
token = newToken
utils.SetCSRFToken(w, token)
}
// 准备额外的模板数据
extraData := make(map[string]interface{})
// 从数据库读取站点标题
db, err := database.GetDB()
if err != nil {
data["Title"] = "凌动技术"
db, dbErr := database.GetDB()
if dbErr != nil {
extraData["Title"] = "凌动技术"
} else {
siteTitle, err := services.FindSettingByName("site_title", db)
if err != nil || siteTitle == nil {
data["Title"] = "凌动技术"
siteTitle, settingErr := services.FindSettingByName("site_title", db)
if settingErr != nil || siteTitle == nil {
extraData["Title"] = "凌动技术"
} else {
data["Title"] = siteTitle.Value
extraData["Title"] = siteTitle.Value
}
}
// 准备模板数据
data := utils.GetDefaultTemplateData()
data["CSRFToken"] = token
// 合并额外数据
for key, value := range extraData {
data[key] = value
}
utils.RenderTemplate(w, "layout.html", data)
}

25
controllers/admin/user.go
View File

@@ -160,15 +160,8 @@ func UserPasswordUpdateHandler(w http.ResponseWriter, r *http.Request) {
return
}
// 更新Cookie
cookie := &http.Cookie{
Name: "admin_session",
Value: newToken,
Path: "/",
HttpOnly: true,
Secure: false, // 生产环境应设置为true（HTTPS）
MaxAge: 24 * 60 * 60, // 24小时
}
// 更新Cookie（使用安全配置）
cookie := utils.CreateSecureCookie("admin_session", newToken, utils.GetDefaultCookieMaxAge())
http.SetCookie(w, cookie)
// 密码修改成功，已重新生成JWT令牌
@@ -260,20 +253,14 @@ func UserProfileUpdateHandler(w http.ResponseWriter, r *http.Request) {
}
// 重新签发JWT并写入Cookie
newUser := models.User{UUID: claims.UserUUID, Username: username, Role: claims.Role}
token, err := generateJWTToken(newUser)
// 使用完整的用户信息（包含密码）来生成JWT令牌
user.Username = username // 更新用户名
token, err := generateJWTToken(user)
if err != nil {
utils.JsonResponse(w, http.StatusInternalServerError, false, "生成新令牌失败", nil)
return
}
cookie := &http.Cookie{
Name: "admin_session",
Value: token,
Path: "/",
HttpOnly: true,
Secure: false,
MaxAge: 24 * 60 * 60,
}
cookie := utils.CreateSecureCookie("admin_session", token, utils.GetDefaultCookieMaxAge())
http.SetCookie(w, cookie)
utils.JsonResponse(w, http.StatusOK, true, "保存成功", map[string]interface{}{

5
cookies.txt Normal file
View File

@@ -0,0 +1,5 @@
# Netscape HTTP Cookie File
# https://curl.se/docs/http-cookies.html
# This file was generated by libcurl! Edit at your own risk.
#HttpOnly_localhost FALSE / TRUE 1761422606 csrf_token QLYaH1VddKCyAFgijZ80OYxzDht7zVLPbXH-rprEXvM=

9
database/seed_user.go
View File

@@ -8,21 +8,22 @@ import (
)
// SeedDefaultAdmin 初始化默认管理员账号
// - 如果用户名为 admin 的用户已存在，则跳过
// - 如果已存在任何管理员用户（role=0），则跳过
// - 如不存在，则创建用户名为 admin、密码为 admin123（以 bcrypt 哈希存储）、角色 Role=0 的管理员
// - ID和UUID将自动生成
// - 根据需求：默认 admin 用户的 ID 固定为 10000
func SeedDefaultAdmin() error {
db, err := GetDB()
if err != nil {
return err
}
// 检查是否存在用户名为 admin 的用户
// 检查是否存在任何管理员用户（role=0）
var count int64
if dbErr := db.Model(&models.User{}).Where("username = ?", "admin").Count(&count).Error; dbErr != nil {
if dbErr := db.Model(&models.User{}).Where("role = ?", 0).Count(&count).Error; dbErr != nil {
return dbErr
}
if count > 0 {
logrus.Info("已存在管理员用户，跳过默认管理员创建")
return nil
}

47
server/admin.go
View File

@@ -3,6 +3,7 @@ package server
import (
"net/http"
adminctl "networkDev/controllers/admin"
"networkDev/utils"
)
// RegisterAdminRoutes 注册管理员后台相关路由
@@ -23,7 +24,8 @@ func RegisterAdminRoutes(mux *http.ServeMux) {
return
}
if r.Method == http.MethodPost {
adminctl.LoginHandler(w, r)
// 应用CSRF保护
utils.RequireCSRFToken(adminctl.LoginHandler)(w, r)
return
}
w.WriteHeader(http.StatusMethodNotAllowed)
@@ -35,6 +37,9 @@ func RegisterAdminRoutes(mux *http.ServeMux) {
// 验证码生成路由（无需认证）
mux.HandleFunc("/admin/captcha", adminctl.CaptchaHandler)
// CSRF令牌获取API（无需认证，但需要在登录页面等地方获取）
mux.HandleFunc("/admin/api/csrf-token", utils.CSRFTokenHandler)
// 后台布局页（需要管理员认证）
mux.HandleFunc("/admin/layout", adminctl.AdminAuthRequired(adminctl.AdminLayoutHandler))
@@ -51,44 +56,44 @@ func RegisterAdminRoutes(mux *http.ServeMux) {
// 个人资料API
mux.HandleFunc("/admin/api/user/profile", adminctl.AdminAuthRequired(adminctl.UserProfileQueryHandler))
mux.HandleFunc("/admin/api/user/profile/update", adminctl.AdminAuthRequired(adminctl.UserProfileUpdateHandler))
mux.HandleFunc("/admin/api/user/password", adminctl.AdminAuthRequired(adminctl.UserPasswordUpdateHandler))
mux.HandleFunc("/admin/api/user/profile/update", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.UserProfileUpdateHandler)))
mux.HandleFunc("/admin/api/user/password", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.UserPasswordUpdateHandler)))
// 系统设置API
mux.HandleFunc("/admin/api/settings", adminctl.AdminAuthRequired(adminctl.SettingsQueryHandler))
mux.HandleFunc("/admin/api/settings/update", adminctl.AdminAuthRequired(adminctl.SettingsUpdateHandler))
mux.HandleFunc("/admin/api/settings/update", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.SettingsUpdateHandler)))
// 应用管理API
mux.HandleFunc("/admin/api/apps/list", adminctl.AdminAuthRequired(adminctl.AppsListHandler))
mux.HandleFunc("/admin/api/apps/create", adminctl.AdminAuthRequired(adminctl.AppCreateHandler))
mux.HandleFunc("/admin/api/apps/update", adminctl.AdminAuthRequired(adminctl.AppUpdateHandler))
mux.HandleFunc("/admin/api/apps/delete", adminctl.AdminAuthRequired(adminctl.AppDeleteHandler))
mux.HandleFunc("/admin/api/apps/batch_delete", adminctl.AdminAuthRequired(adminctl.AppsBatchDeleteHandler))
mux.HandleFunc("/admin/api/apps/batch_update_status", adminctl.AdminAuthRequired(adminctl.AppsBatchUpdateStatusHandler))
mux.HandleFunc("/admin/api/apps/reset_secret", adminctl.AdminAuthRequired(adminctl.AppResetSecretHandler))
mux.HandleFunc("/admin/api/apps/create", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppCreateHandler)))
mux.HandleFunc("/admin/api/apps/update", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateHandler)))
mux.HandleFunc("/admin/api/apps/delete", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppDeleteHandler)))
mux.HandleFunc("/admin/api/apps/batch_delete", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppsBatchDeleteHandler)))
mux.HandleFunc("/admin/api/apps/batch_update_status", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppsBatchUpdateStatusHandler)))
mux.HandleFunc("/admin/api/apps/reset_secret", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppResetSecretHandler)))
mux.HandleFunc("/admin/api/apps/get_app_data", adminctl.AdminAuthRequired(adminctl.AppGetAppDataHandler))
mux.HandleFunc("/admin/api/apps/update_app_data", adminctl.AdminAuthRequired(adminctl.AppUpdateAppDataHandler))
mux.HandleFunc("/admin/api/apps/update_app_data", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateAppDataHandler)))
mux.HandleFunc("/admin/api/apps/get_announcement", adminctl.AdminAuthRequired(adminctl.AppGetAnnouncementHandler))
mux.HandleFunc("/admin/api/apps/update_announcement", adminctl.AdminAuthRequired(adminctl.AppUpdateAnnouncementHandler))
mux.HandleFunc("/admin/api/apps/update_announcement", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateAnnouncementHandler)))
mux.HandleFunc("/admin/api/apps/get_multi_config", adminctl.AdminAuthRequired(adminctl.AppGetMultiConfigHandler))
mux.HandleFunc("/admin/api/apps/update_multi_config", adminctl.AdminAuthRequired(adminctl.AppUpdateMultiConfigHandler))
mux.HandleFunc("/admin/api/apps/update_multi_config", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateMultiConfigHandler)))
mux.HandleFunc("/admin/api/apps/get_bind_config", adminctl.AdminAuthRequired(adminctl.AppGetBindConfigHandler))
mux.HandleFunc("/admin/api/apps/update_bind_config", adminctl.AdminAuthRequired(adminctl.AppUpdateBindConfigHandler))
mux.HandleFunc("/admin/api/apps/update_bind_config", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateBindConfigHandler)))
mux.HandleFunc("/admin/api/apps/get_register_config", adminctl.AdminAuthRequired(adminctl.AppGetRegisterConfigHandler))
mux.HandleFunc("/admin/api/apps/update_register_config", adminctl.AdminAuthRequired(adminctl.AppUpdateRegisterConfigHandler))
mux.HandleFunc("/admin/api/apps/update_register_config", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.AppUpdateRegisterConfigHandler)))
// API接口管理API
mux.HandleFunc("/admin/api/apis/list", adminctl.AdminAuthRequired(adminctl.APIListHandler))
mux.HandleFunc("/admin/api/apis/update", adminctl.AdminAuthRequired(adminctl.APIUpdateHandler))
mux.HandleFunc("/admin/api/apis/update", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.APIUpdateHandler)))
mux.HandleFunc("/admin/api/apis/apps", adminctl.AdminAuthRequired(adminctl.APIGetAppsHandler))
mux.HandleFunc("/admin/api/apis/types", adminctl.AdminAuthRequired(adminctl.APIGetTypesHandler))
mux.HandleFunc("/admin/api/apis/generate_keys", adminctl.AdminAuthRequired(adminctl.APIGenerateKeysHandler))
mux.HandleFunc("/admin/api/apis/generate_keys", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.APIGenerateKeysHandler)))
// 变量管理API
mux.HandleFunc("/admin/variable/list", adminctl.AdminAuthRequired(adminctl.VariableListHandler))
mux.HandleFunc("/admin/variable/apps", adminctl.AdminAuthRequired(adminctl.VariableGetAppsHandler))
mux.HandleFunc("/admin/variable/create", adminctl.AdminAuthRequired(adminctl.VariableCreateHandler))
mux.HandleFunc("/admin/variable/update", adminctl.AdminAuthRequired(adminctl.VariableUpdateHandler))
mux.HandleFunc("/admin/variable/delete", adminctl.AdminAuthRequired(adminctl.VariableDeleteHandler))
mux.HandleFunc("/admin/variable/batch_delete", adminctl.AdminAuthRequired(adminctl.VariablesBatchDeleteHandler))
mux.HandleFunc("/admin/variable/create", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.VariableCreateHandler)))
mux.HandleFunc("/admin/variable/update", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.VariableUpdateHandler)))
mux.HandleFunc("/admin/variable/delete", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.VariableDeleteHandler)))
mux.HandleFunc("/admin/variable/batch_delete", adminctl.AdminAuthRequired(utils.RequireCSRFToken(adminctl.VariablesBatchDeleteHandler)))
}

19
utils/common.go
View File

@@ -55,6 +55,25 @@ func GetDefaultTemplateData() map[string]interface{} {
}
}
// GetTemplateDataWithCSRF 获取包含CSRF令牌的模板数据
// 合并默认数据和CSRF令牌，用于需要CSRF保护的页面
func GetTemplateDataWithCSRF(r *http.Request, additionalData map[string]interface{}) map[string]interface{} {
// 获取默认模板数据
data := GetDefaultTemplateData()
// 添加CSRF令牌
data["CSRFToken"] = GetCSRFTokenForTemplate(r)
// 合并额外数据
if additionalData != nil {
for key, value := range additionalData {
data[key] = value
}
}
return data
}
// GetClientIP 获取客户端IP地址
// 优先从 X-Forwarded-For 和 X-Real-IP 头部获取，否则使用 RemoteAddr
func GetClientIP(r *http.Request) string {

77
utils/cookie.go Normal file
View File

@@ -0,0 +1,77 @@
package utils
import (
"net/http"
"time"
"github.com/spf13/viper"
)
// CreateSecureCookie 创建安全的Cookie
// name: Cookie名称
// value: Cookie值
// maxAge: 过期时间（秒），0表示会话Cookie，-1表示立即过期
func CreateSecureCookie(name, value string, maxAge int) *http.Cookie {
cookie := &http.Cookie{
Name: name,
Value: value,
Path: "/",
HttpOnly: true,
MaxAge: maxAge,
}
// 从配置读取安全设置
if viper.GetBool("security.cookie.secure") {
cookie.Secure = true
}
// 设置SameSite属性
sameSite := viper.GetString("security.cookie.same_site")
switch sameSite {
case "Strict":
cookie.SameSite = http.SameSiteStrictMode
case "Lax":
cookie.SameSite = http.SameSiteLaxMode
case "None":
cookie.SameSite = http.SameSiteNoneMode
// SameSite=None 必须配合 Secure=true 使用
cookie.Secure = true
default:
cookie.SameSite = http.SameSiteStrictMode
}
// 设置Domain（如果配置了）
domain := viper.GetString("security.cookie.domain")
if domain != "" {
cookie.Domain = domain
}
// 如果maxAge > 0，设置Expires时间
if maxAge > 0 {
cookie.Expires = time.Now().Add(time.Duration(maxAge) * time.Second)
} else if maxAge == -1 {
// 立即过期
cookie.Expires = time.Unix(0, 0)
}
return cookie
}
// CreateSessionCookie 创建会话Cookie（浏览器关闭时过期）
func CreateSessionCookie(name, value string) *http.Cookie {
return CreateSecureCookie(name, value, 0)
}
// CreateExpiredCookie 创建立即过期的Cookie（用于清理）
func CreateExpiredCookie(name string) *http.Cookie {
return CreateSecureCookie(name, "", -1)
}
// GetDefaultCookieMaxAge 获取默认Cookie过期时间
func GetDefaultCookieMaxAge() int {
maxAge := viper.GetInt("security.cookie.max_age")
if maxAge <= 0 {
return 86400 // 默认24小时
}
return maxAge
}

15
utils/crypto.go
View File

@@ -291,7 +291,8 @@ func DecryptStringWithSalt(enc, salt string) (string, error) {
}
// HashPasswordWithSalt 使用盐值对密码进行哈希处理
// 将密码和盐值组合后使用bcrypt进行哈希
// 将密码和盐值组合后先用SHA256处理，再使用bcrypt进行哈希
// 这样可以避免bcrypt的72字节限制问题
// password: 原始密码
// salt: 密码盐值
// 返回: bcrypt哈希值和错误信息
@@ -299,8 +300,12 @@ func HashPasswordWithSalt(password, salt string) (string, error) {
// 将密码和盐值组合
combined := password + salt
// 先使用SHA256处理组合后的字符串，确保长度固定且不超过bcrypt限制
hash := sha256.Sum256([]byte(combined))
sha256Hash := fmt.Sprintf("%x", hash) // 64字节的十六进制字符串
// 使用bcrypt进行哈希（成本因子10，平衡安全性和性能）
hashed, err := bcrypt.GenerateFromPassword([]byte(combined), 10)
hashed, err := bcrypt.GenerateFromPassword([]byte(sha256Hash), 10)
if err != nil {
return "", err
}
@@ -317,8 +322,12 @@ func VerifyPasswordWithSalt(password, salt, hashedPassword string) bool {
// 将密码和盐值组合
combined := password + salt
// 先使用SHA256处理组合后的字符串，与哈希生成逻辑保持一致
hash := sha256.Sum256([]byte(combined))
sha256Hash := fmt.Sprintf("%x", hash) // 64字节的十六进制字符串
// 使用bcrypt验证
err := bcrypt.CompareHashAndPassword([]byte(hashedPassword), []byte(combined))
err := bcrypt.CompareHashAndPassword([]byte(hashedPassword), []byte(sha256Hash))
return err == nil
}

168
utils/csrf.go Normal file
View File

@@ -0,0 +1,168 @@
package utils
import (
"crypto/rand"
"crypto/subtle"
"encoding/base64"
"net/http"
)
const (
CSRFTokenLength = 32
CSRFCookieName = "csrf_token"
CSRFHeaderName = "X-CSRF-Token"
CSRFFormField = "csrf_token"
)
// generateRandomBytes 生成指定长度的随机字节
func generateRandomBytes(length int) ([]byte, error) {
bytes := make([]byte, length)
_, err := rand.Read(bytes)
if err != nil {
return nil, err
}
return bytes, nil
}
// GenerateCSRFToken 生成CSRF令牌
func GenerateCSRFToken() (string, error) {
bytes, err := generateRandomBytes(CSRFTokenLength)
if err != nil {
return "", err
}
return base64.URLEncoding.EncodeToString(bytes), nil
}
// SetCSRFToken 设置CSRF令牌到Cookie和响应头
func SetCSRFToken(w http.ResponseWriter, token string) {
// 设置CSRF令牌到Cookie
cookie := CreateSecureCookie(CSRFCookieName, token, 3600) // 1小时过期
http.SetCookie(w, cookie)
// 设置CSRF令牌到响应头，方便JavaScript获取
w.Header().Set("X-CSRF-Token", token)
}
// GetCSRFTokenFromRequest 从请求中获取CSRF令牌
// 优先级：Header > Form > Cookie
func GetCSRFTokenFromRequest(r *http.Request) string {
// 1. 从Header获取
if token := r.Header.Get(CSRFHeaderName); token != "" {
return token
}
// 2. 从Form获取
if token := r.FormValue(CSRFFormField); token != "" {
return token
}
// 3. 从Cookie获取（作为备选）
if cookie, err := r.Cookie(CSRFCookieName); err == nil {
return cookie.Value
}
return ""
}
// GetCSRFTokenFromCookie 从Cookie中获取CSRF令牌
func GetCSRFTokenFromCookie(r *http.Request) string {
cookie, err := r.Cookie(CSRFCookieName)
if err != nil {
return ""
}
return cookie.Value
}
// ValidateCSRFToken 验证CSRF令牌
func ValidateCSRFToken(r *http.Request) bool {
// 获取Cookie中的令牌（服务器端存储的）
cookieToken := GetCSRFTokenFromCookie(r)
if cookieToken == "" {
return false
}
// 获取请求中的令牌（客户端提交的）
requestToken := GetCSRFTokenFromRequest(r)
if requestToken == "" {
return false
}
// 使用常量时间比较防止时序攻击
return subtle.ConstantTimeCompare([]byte(cookieToken), []byte(requestToken)) == 1
}
// CSRFProtection CSRF保护中间件
func CSRFProtection(next http.HandlerFunc) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
// 对于GET、HEAD、OPTIONS请求，只生成令牌，不验证
if r.Method == http.MethodGet || r.Method == http.MethodHead || r.Method == http.MethodOptions {
// 生成新的CSRF令牌
token, err := GenerateCSRFToken()
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
return
}
SetCSRFToken(w, token)
next(w, r)
return
}
// 对于POST、PUT、DELETE等修改性请求，验证CSRF令牌
if !ValidateCSRFToken(r) {
JsonResponse(w, http.StatusForbidden, false, "CSRF令牌验证失败", nil)
return
}
// 验证通过，继续处理请求
next(w, r)
}
}
// RequireCSRFToken 要求CSRF令牌的中间件（用于特定路由）
func RequireCSRFToken(next http.HandlerFunc) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
if !ValidateCSRFToken(r) {
JsonResponse(w, http.StatusForbidden, false, "CSRF令牌验证失败", nil)
return
}
next(w, r)
}
}
// GetCSRFTokenForTemplate 获取用于模板的CSRF令牌
func GetCSRFTokenForTemplate(r *http.Request) string {
// 尝试从Cookie获取现有令牌
if token := GetCSRFTokenFromCookie(r); token != "" {
return token
}
// 如果没有现有令牌，生成新的（但不设置到响应中）
token, err := GenerateCSRFToken()
if err != nil {
return ""
}
return token
}
// CSRFTokenHandler 专门用于获取CSRF令牌的API端点
func CSRFTokenHandler(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodGet {
JsonResponse(w, http.StatusMethodNotAllowed, false, "只支持GET请求", nil)
return
}
// 生成新的CSRF令牌
token, err := GenerateCSRFToken()
if err != nil {
JsonResponse(w, http.StatusInternalServerError, false, "生成CSRF令牌失败", nil)
return
}
// 设置令牌到Cookie和响应头
SetCSRFToken(w, token)
// 返回令牌给前端
JsonResponse(w, http.StatusOK, true, "CSRF令牌获取成功", map[string]interface{}{
"csrf_token": token,
})
}

59
web/static/js/admin.js
View File

@@ -6,6 +6,63 @@ const rootPath = (function (src) {
return src.substring(0, src.lastIndexOf('/') + 1);
})();
// CSRF令牌管理
const CSRFManager = {
// 缓存的CSRF令牌
token: null,
// 获取CSRF令牌
async getToken() {
if (this.token) {
return this.token;
}
try {
const response = await fetch('/admin/api/csrf-token', {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
});
if (response.ok) {
const data = await response.json();
if (data.code === 0 && data.data && data.data.csrf_token) {
this.token = data.data.csrf_token;
return this.token;
}
}
} catch (error) {
console.error('获取CSRF令牌失败:', error);
}
return null;
},
// 清除缓存的令牌
clearToken() {
this.token = null;
},
// 为fetch请求添加CSRF令牌
async addCSRFHeader(headers = {}) {
const token = await this.getToken();
if (token) {
headers['X-CSRF-Token'] = token;
}
return headers;
}
};
// 增强的fetch函数，自动添加CSRF令牌
window.fetchWithCSRF = async function(url, options = {}) {
const headers = await CSRFManager.addCSRFHeader(options.headers || {});
return fetch(url, {
...options,
headers
});
};
const app = document.querySelector('#app')
addLink({ href: layuicss }).then(() => {
@@ -150,7 +207,7 @@ loadScript(layuijs, function () {
});
// 调用登出接口
fetch('/admin/logout', {
fetchWithCSRF('/admin/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',

956
web/template/admin/apis.html
View File

File diff suppressed because it is too large Load Diff

1571
web/template/admin/apps.html
View File

File diff suppressed because it is too large Load Diff

93
web/template/admin/dashboard.html
View File

@@ -38,59 +38,54 @@
</div>
</div>
</section>
<script>
// 仪表盘统计脚本（采用箭头函数与中文注释）
layui.use(['layer', 'util'], function(){
const layer = layui.layer;
const util = layui.util;
const $ = layui.$;
// 仪表盘统计脚本（采用箭头函数与中文注释）
layui.use(['layer', 'util'], function () {
const layer = layui.layer;
const util = layui.util;
const $ = layui.$;
// 全局引用：ECharts CDN 地址
const echartsCdn = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js';
// 全局引用：ECharts CDN 地址
const echartsCdn = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js';
// 工具函数：加载 ECharts 库（若已加载则直接回调）
// 功能：通过全局的 loadScript 方法按需加载图表库，避免重复加载
const ensureECharts = (cb) => {
if (window.echarts) { cb && cb(); return; }
if (typeof loadScript === 'function') {
loadScript(echartsCdn, () => cb && cb());
} else {
// 兜底：直接插入 <script>
const s = document.createElement('script');
s.src = echartsCdn;
s.onload = () => cb && cb();
document.head.appendChild(s);
}
};
// 函数：刷新基本信息和运行状态
// 说明：请求后台获取最新的系统信息并更新页面显示
const refreshSystemInfo = () => {
$.get('/admin/api/system/info', (res) => {
if (res && res.code === 0 && res.data) {
const data = res.data;
// 更新运行时长
if (data.uptime) {
$('.system-info-item').each(function() {
const label = $(this).find('.system-info-label').text();
if (label === '运行时长') {
$(this).find('.system-info-value').text(data.uptime);
}
});
}
// 工具函数：加载 ECharts 库（若已加载则直接回调）
// 功能：通过全局的 loadScript 方法按需加载图表库，避免重复加载
const ensureECharts = (cb) => {
if (window.echarts) { cb && cb(); return; }
if (typeof loadScript === 'function') {
loadScript(echartsCdn, () => cb && cb());
} else {
// 兜底：直接插入 <script>
const s = document.createElement('script');
s.src = echartsCdn;
s.onload = () => cb && cb();
document.head.appendChild(s);
}
}).fail(() => {
console.log('获取系统信息失败');
});
};
};
// 立即刷新一次系统信息
refreshSystemInfo();
});
// 函数：刷新基本信息和运行状态
// 说明：请求后台获取最新的系统信息并更新页面显示
const refreshSystemInfo = () => {
$.get('/admin/api/system/info', (res) => {
if (res && res.code === 0 && res.data) {
const data = res.data;
// 更新运行时长
if (data.uptime) {
$('.system-info-item').each(function () {
const label = $(this).find('.system-info-label').text();
if (label === '运行时长') {
$(this).find('.system-info-value').text(data.uptime);
}
});
}
}
}).fail(() => {
console.log('获取系统信息失败');
});
};
// 立即刷新一次系统信息
refreshSystemInfo();
});
</script>
{{ end }}

128
web/template/admin/layout.html
View File

@@ -1,73 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{{ .Title }} - {{ .SystemName }}</title>
<!-- 站点图标 -->
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/static/css/admin.css" />
<script type="module" src="./static/lib/include.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" id="app">
<div class="layui-header">
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<!-- 刷新页面按钮 -->
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" id="refresh-btn" style="background-color: unset" title="刷新页面">
<i class="layui-icon layui-icon-refresh-3" style="font-size: 20px"></i>
</a>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{{ .Title }} - {{ .SystemName }}</title>
<!-- 站点图标 -->
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/static/css/admin.css" />
<script type="module" src="./static/lib/include.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" id="app">
<div class="layui-header">
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<!-- 刷新页面按钮 -->
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" id="refresh-btn" style="background-color: unset" title="刷新页面">
<i class="layui-icon layui-icon-refresh-3" style="font-size: 20px"></i>
</a>
</li>
<li class="layui-nav-item">
<i id="change-theme" class="layui-icon layui-icon-theme" style="font-size: 20px"></i>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" id="logout-btn" style="background-color: unset" title="退出登录">
<i class="layui-icon layui-icon-logout" style="font-size: 20px"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域 -->
<div class="layui-logo layui-bg-black logo-enhanced">{{ .SystemName }}</div>
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-unselect lay-filter="nav-side" id="ws-nav-side">
<li class="layui-nav-item">
<a class="" href="javascript:;">系统管理</a>
<dl class="layui-nav-child">
<dd><a data-path="dashboard" href="javascript:;">仪表盘</a></dd>
<dd><a data-path="user" href="javascript:;">个人资料</a></dd>
<dd><a data-path="settings" href="javascript:;">系统设置</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<i id="change-theme" class="layui-icon layui-icon-theme" style="font-size: 20px"></i>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" id="logout-btn" style="background-color: unset" title="退出登录">
<i class="layui-icon layui-icon-logout" style="font-size: 20px"></i>
</a>
<a href="javascript:;">应用管理</a>
<dl class="layui-nav-child">
<dd><a data-path="apps" href="javascript:;">应用列表</a></dd>
<dd><a data-path="apis" href="javascript:;">接口列表</a></dd>
<dd><a data-path="variables" href="javascript:;">变量列表</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域 -->
<div class="layui-logo layui-bg-black logo-enhanced">{{ .SystemName }}</div>
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-unselect lay-filter="nav-side" id="ws-nav-side">
<li class="layui-nav-item">
<a class="" href="javascript:;">系统管理</a>
<dl class="layui-nav-child">
<dd><a data-path="dashboard" href="javascript:;">仪表盘</a></dd>
<dd><a data-path="user" href="javascript:;">个人资料</a></dd>
<dd><a data-path="settings" href="javascript:;">系统设置</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">应用管理</a>
<dl class="layui-nav-child">
<dd><a data-path="apps" href="javascript:;">应用列表</a></dd>
<dd><a data-path="apis" href="javascript:;">接口列表</a></dd>
<dd><a data-path="variables" href="javascript:;">变量列表</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<wc-include id="router-view" allow-scripts></wc-include>
</div>
<div class="layui-footer">{{ .FooterText }}</div>
</div>
<script type="module" src="./static/js/admin.js"></script>
</body>
<div class="layui-body">
<!-- 内容主体区域 -->
<wc-include id="router-view" allow-scripts></wc-include>
</div>
<div class="layui-footer">{{ .FooterText }}</div>
</div>
<script type="module" src="./static/js/admin.js"></script>
</body>
</html>

107
web/template/admin/login.html
View File

@@ -1,6 +1,7 @@
{{/* 管理员登录页面模板：使用layui构建的登录界面 */}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -21,6 +22,7 @@
align-items: center;
justify-content: center;
}
.demo-login-container {
width: 400px;
margin: 21px auto 0;
@@ -29,22 +31,26 @@
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.login-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px 20px;
text-align: center;
color: #fff;
}
.login-header h1 {
margin: 0;
font-size: 24px;
font-weight: 300;
}
.login-header p {
margin: 8px 0 0;
opacity: 0.8;
font-size: 14px;
}
.login-form {
padding: 30px 20px;
}
@@ -58,13 +64,15 @@
.login-form .layui-form-item:last-child {
margin-bottom: 0;
}
.demo-login-other .layui-icon {
position: relative;
display: inline-block;
margin: 0 2px;
top: 2px;
font-size: 26px;
}
position: relative;
display: inline-block;
margin: 0 2px;
top: 2px;
font-size: 26px;
}
.login-footer {
text-align: center;
padding: 20px;
@@ -80,12 +88,15 @@
margin: 10px auto;
border-radius: 4px;
}
.login-header {
padding: 25px 15px;
}
.login-header h1 {
font-size: 20px;
}
.login-form {
padding: 25px 15px;
}
@@ -105,12 +116,15 @@
display: flex;
flex-direction: column;
}
.login-header {
padding: 20px 15px;
}
.login-header h1 {
font-size: 18px;
}
.login-form {
padding: 20px 15px;
}
@@ -126,6 +140,7 @@
}
</style>
</head>
<body>
<form class="layui-form">
<div class="demo-login-container">
@@ -135,12 +150,16 @@
</div>
<div class="login-form">
<!-- CSRF令牌隐藏字段 -->
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}" id="csrf-token">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
@@ -149,7 +168,8 @@
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
@@ -160,12 +180,16 @@
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 5px; text-align: right;">
<img id="captcha-img" src="/admin/captcha" onclick="this.src='/admin/captcha?t='+ new Date().getTime();" style="cursor: pointer; height: 38px; border-radius: 4px; width: 100%;" title="点击刷新验证码">
<img id="captcha-img" src="/admin/captcha"
onclick="this.src='/admin/captcha?t='+ new Date().getTime();"
style="cursor: pointer; height: 38px; border-radius: 4px; width: 100%;"
title="点击刷新验证码">
</div>
</div>
</div>
@@ -185,58 +209,63 @@
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.12.1/dist/layui.js"></script>
<script>
layui.use(function(){
layui.use(function () {
var form = layui.form;
var layer = layui.layer;
// 登录提交回调：向 /admin/login 发送请求，并依据 code===0 判断成功与否
form.on('submit(demo-login)', function(data){
form.on('submit(demo-login)', function (data) {
var loadIndex = layer.load(1, {
shade: [0.1, '#fff']
});
// 获取CSRF令牌
var csrfToken = document.getElementById('csrf-token').value;
// 发送登录请求
fetch('/admin/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
body: JSON.stringify(data.field)
})
.then(response => response.json())
.then(result => {
layer.close(loadIndex);
.then(response => response.json())
.then(result => {
layer.close(loadIndex);
// 根据统一接口：code === 0 表示成功
const isOk = result && result.code === 0;
if (isOk) {
layer.msg('登录成功', {
icon: 1,
time: 1500
}, function(){
const redirect = (result.data && result.data.redirect) || '/admin';
window.location.href = redirect;
});
} else {
const msg = (result && (result.msg || result.message)) || '登录失败，请检查用户名和密码';
layer.msg(msg, {icon: 2});
// 根据统一接口：code === 0 表示成功
const isOk = result && result.code === 0;
if (isOk) {
layer.msg('登录成功', {
icon: 1,
time: 1500
}, function () {
const redirect = (result.data && result.data.redirect) || '/admin';
window.location.href = redirect;
});
} else {
const msg = (result && (result.msg || result.message)) || '登录失败，请检查用户名和密码';
layer.msg(msg, { icon: 2 });
// 登录失败时刷新验证码
// 登录失败时刷新验证码
document.getElementById('captcha-img').src = '/admin/captcha?t=' + new Date().getTime();
}
})
.catch(error => {
layer.close(loadIndex);
console.error('登录错误:', error);
layer.msg('网络错误，请稍后重试', { icon: 2 });
// 网络错误时也刷新验证码
document.getElementById('captcha-img').src = '/admin/captcha?t=' + new Date().getTime();
}
})
.catch(error => {
layer.close(loadIndex);
console.error('登录错误:', error);
layer.msg('网络错误，请稍后重试', {icon: 2});
// 网络错误时也刷新验证码
document.getElementById('captcha-img').src = '/admin/captcha?t=' + new Date().getTime();
});
});
return false; // 阻止表单跳转
});
});
</script>
</body>
</html>

299
web/template/admin/settings.html
View File

@@ -1,7 +1,6 @@
{{ define "settings.html" }}
<section>
<h2>系统设置</h2>
<!-- 基本信息设置 -->
<div class="layui-card" style="margin-top: 16px;">
<div class="layui-card-header">基本信息设置</div>
@@ -61,7 +60,8 @@
<label class="layui-form-label" style="cursor: pointer;" data-tips="session-timeout">会话超时</label>
<div class="layui-input-block">
<div style="display: flex; align-items: center; gap: 10px;">
<input type="number" name="session_timeout" placeholder="3600" min="300" max="86400" class="layui-input" style="width: 120px;" />
<input type="number" name="session_timeout" placeholder="3600" min="300" max="86400" class="layui-input"
style="width: 120px;" />
<span class="layui-form-mid">秒（300-86400秒）</span>
</div>
</div>
@@ -103,7 +103,8 @@
<div class="layui-form-item">
<label class="layui-form-label" style="cursor: pointer;" data-tips="psb-record-link">备案链接</label>
<div class="layui-input-block">
<input type="url" name="psb_record_link" placeholder="http://www.beian.gov.cn/portal/registerSystemInfo" class="layui-input" />
<input type="url" name="psb_record_link" placeholder="http://www.beian.gov.cn/portal/registerSystemInfo"
class="layui-input" />
</div>
</div>
</form>
@@ -129,159 +130,159 @@
}
}
waitForLayui(function() {
layui.use(['jquery', 'form', 'layer', 'util'], function() {
waitForLayui(function () {
layui.use(['jquery', 'form', 'layer', 'util'], function () {
const { $, form, layer, util } = layui;
// 缓存上次加载的设置值，用于“重置”恢复
let originalSettings = {};
// 缓存上次加载的设置值，用于“重置”恢复
let originalSettings = {};
/**
* 加载后台所有设置并回填到三个表单
* - 从 /admin/api/settings 获取 name:value 映射
* - 处理开关型字段（maintenance_mode）
* - 渲染 layui 组件
*/
const loadSettings = async () => {
try {
const res = await fetch('/admin/api/settings', {
method: 'GET',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
if (data.code !== 0) {
layer.msg(data.msg || '加载设置失败', { icon: 2 });
return;
}
originalSettings = data.data || {};
fillForms(originalSettings);
} catch (err) {
console.error('获取设置失败:', err);
layer.msg('网络错误，无法加载设置', { icon: 2 });
}
};
/**
* 将 settings 数据回填到各表单控件
* - 文本/文本域/下拉：直接赋值
* - 开关：根据 "1"/"0" 置为选中/未选中
*/
const fillForms = (settings = {}) => {
// 基本信息
$('[name="site_title"]').val(settings.site_title || '');
$('[name="site_keywords"]').val(settings.site_keywords || '');
$('[name="site_description"]').val(settings.site_description || '');
$('[name="site_logo"]').val(settings.site_logo || '');
// 系统配置
const maintenanceChecked = (settings.maintenance_mode || '0') === '1';
$('[name="maintenance_mode"]').prop('checked', maintenanceChecked);
$('[name="default_user_role"]').val(settings.default_user_role || '1');
$('[name="session_timeout"]').val(settings.session_timeout || '3600');
// 页脚与备案
$('[name="footer_text"]').val(settings.footer_text || '');
$('[name="icp_record"]').val(settings.icp_record || '');
$('[name="icp_record_link"]').val(settings.icp_record_link || '');
$('[name="psb_record"]').val(settings.psb_record || '');
$('[name="psb_record_link"]').val(settings.psb_record_link || '');
// 渲染 layui 组件
form.render();
};
/**
* 收集某个表单下所有可用控件的值
* - 统一将 checkbox 转为 "1"/"0"
* - 其他控件转为字符串，避免后端类型不一致
*/
const collectForm = (selector) => {
const obj = {};
const $form = $(selector);
$form.find('input, textarea, select').each(function() {
const $el = $(this);
const name = $el.attr('name');
if (!name) return; // 无 name 不纳入
const type = ($el.attr('type') || '').toLowerCase();
let value = '';
if (type === 'checkbox') {
value = $el.prop('checked') ? '1' : '0';
} else {
value = ($el.val() ?? '').toString();
}
obj[name] = value;
});
return obj;
};
/**
* 汇总三个表单的字段为一个扁平对象
*/
const collectAllSettings = () => {
return {
...collectForm('#basicForm'),
...collectForm('#systemForm'),
...collectForm('#footerForm'),
};
};
/**
* 处理“保存所有设置”点击
* - 二次确认后提交
* - 显示加载中，防重复提交
* - 成功后提示并刷新缓存的 originalSettings
*/
const handleSaveAll = () => {
const payload = collectAllSettings();
layer.confirm('确认保存所有设置？', { icon: 3, title: '提示' }, (idx) => {
layer.close(idx);
const btn = $('#saveAllBtn');
btn.prop('disabled', true).addClass('layui-btn-disabled');
const loadIdx = layer.load(2, { content: '正在保存...' });
fetch('/admin/api/settings/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(payload)
})
.then(resp => resp.json())
.then(res => {
if (res.code === 0) {
layer.msg(res.msg || '保存成功', { icon: 1, time: 1000 });
originalSettings = { ...payload };
} else {
layer.msg(res.msg || '保存失败', { icon: 2 });
}
})
.catch(err => {
console.error('保存设置失败:', err);
layer.msg('网络错误，保存失败', { icon: 2 });
})
.finally(() => {
layer.close(loadIdx);
btn.prop('disabled', false).removeClass('layui-btn-disabled');
/**
* 加载后台所有设置并回填到三个表单
* - 从 /admin/api/settings 获取 name:value 映射
* - 处理开关型字段（maintenance_mode）
* - 渲染 layui 组件
*/
const loadSettings = async () => {
try {
const res = await fetch('/admin/api/settings', {
method: 'GET',
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
});
};
const data = await res.json();
if (data.code !== 0) {
layer.msg(data.msg || '加载设置失败', { icon: 2 });
return;
}
originalSettings = data.data || {};
fillForms(originalSettings);
} catch (err) {
console.error('获取设置失败:', err);
layer.msg('网络错误，无法加载设置', { icon: 2 });
}
};
/**
* 处理“重置”点击
* - 恢复为上次加载的 originalSettings
*/
const handleReset = () => {
fillForms(originalSettings);
layer.msg('已恢复到上次加载的值', { icon: 1, time: 800 });
};
/**
* 将 settings 数据回填到各表单控件
* - 文本/文本域/下拉：直接赋值
* - 开关：根据 "1"/"0" 置为选中/未选中
*/
const fillForms = (settings = {}) => {
// 基本信息
$('[name="site_title"]').val(settings.site_title || '');
$('[name="site_keywords"]').val(settings.site_keywords || '');
$('[name="site_description"]').val(settings.site_description || '');
$('[name="site_logo"]').val(settings.site_logo || '');
// 事件绑定
$('#saveAllBtn').off('click').on('click', handleSaveAll);
$('#resetBtn').off('click').on('click', handleReset);
// 系统配置
const maintenanceChecked = (settings.maintenance_mode || '0') === '1';
$('[name="maintenance_mode"]').prop('checked', maintenanceChecked);
$('[name="default_user_role"]').val(settings.default_user_role || '1');
$('[name="session_timeout"]').val(settings.session_timeout || '3600');
// 初始化：加载设置
loadSettings();
// 页脚与备案
$('[name="footer_text"]').val(settings.footer_text || '');
$('[name="icp_record"]').val(settings.icp_record || '');
$('[name="icp_record_link"]').val(settings.icp_record_link || '');
$('[name="psb_record"]').val(settings.psb_record || '');
$('[name="psb_record_link"]').val(settings.psb_record_link || '');
// 渲染 layui 组件
form.render();
};
/**
* 收集某个表单下所有可用控件的值
* - 统一将 checkbox 转为 "1"/"0"
* - 其他控件转为字符串，避免后端类型不一致
*/
const collectForm = (selector) => {
const obj = {};
const $form = $(selector);
$form.find('input, textarea, select').each(function () {
const $el = $(this);
const name = $el.attr('name');
if (!name) return; // 无 name 不纳入
const type = ($el.attr('type') || '').toLowerCase();
let value = '';
if (type === 'checkbox') {
value = $el.prop('checked') ? '1' : '0';
} else {
value = ($el.val() ?? '').toString();
}
obj[name] = value;
});
return obj;
};
/**
* 汇总三个表单的字段为一个扁平对象
*/
const collectAllSettings = () => {
return {
...collectForm('#basicForm'),
...collectForm('#systemForm'),
...collectForm('#footerForm'),
};
};
/**
* 处理“保存所有设置”点击
* - 二次确认后提交
* - 显示加载中，防重复提交
* - 成功后提示并刷新缓存的 originalSettings
*/
const handleSaveAll = () => {
const payload = collectAllSettings();
layer.confirm('确认保存所有设置？', { icon: 3, title: '提示' }, (idx) => {
layer.close(idx);
const btn = $('#saveAllBtn');
btn.prop('disabled', true).addClass('layui-btn-disabled');
const loadIdx = layer.load(2, { content: '正在保存...' });
fetch('/admin/api/settings/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(payload)
})
.then(resp => resp.json())
.then(res => {
if (res.code === 0) {
layer.msg(res.msg || '保存成功', { icon: 1, time: 1000 });
originalSettings = { ...payload };
} else {
layer.msg(res.msg || '保存失败', { icon: 2 });
}
})
.catch(err => {
console.error('保存设置失败:', err);
layer.msg('网络错误，保存失败', { icon: 2 });
})
.finally(() => {
layer.close(loadIdx);
btn.prop('disabled', false).removeClass('layui-btn-disabled');
});
});
};
/**
* 处理“重置”点击
* - 恢复为上次加载的 originalSettings
*/
const handleReset = () => {
fillForms(originalSettings);
layer.msg('已恢复到上次加载的值', { icon: 1, time: 800 });
};
// 事件绑定
$('#saveAllBtn').off('click').on('click', handleSaveAll);
$('#resetBtn').off('click').on('click', handleReset);
// 初始化：加载设置
loadSettings();
});
});
</script>

723
web/template/admin/user.html
View File

@@ -1,472 +1,357 @@
{{ define "user.html" }}
<style>
/* 基础模块样式 */
.user-module {
margin-bottom: 20px;
}
.user-module .layui-card-header {
font-weight: 600;
transition: background-color 0.3s ease, color 0.3s ease;
}
.module-tabs {
margin-bottom: 20px;
}
.module-tabs .layui-tab-title li {
font-weight: 500;
}
.readonly-field {
cursor: not-allowed !important;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 浅色模式样式 */
:root {
--user-card-header-bg: #f8f9fa;
--user-card-header-color: #333;
--user-readonly-bg: #f5f5f5;
--user-readonly-color: #666;
--user-card-bg: #ffffff;
--user-card-border: #e6e6e6;
--user-input-bg: #ffffff;
--user-input-border: #d9d9d9;
--user-input-color: #333;
}
/* 深色模式样式 */
@media (prefers-color-scheme: dark) {
:root {
--user-card-header-bg: #2f2f2f;
--user-card-header-color: #e6e6e6;
--user-readonly-bg: #3a3a3a;
--user-readonly-color: #999;
--user-card-bg: #1f1f1f;
--user-card-border: #404040;
--user-input-bg: #2a2a2a;
--user-input-border: #404040;
--user-input-color: #e6e6e6;
}
}
/* 手动深色模式类 */
.dark {
--user-card-header-bg: #2f2f2f;
--user-card-header-color: #e6e6e6;
--user-readonly-bg: #3a3a3a;
--user-readonly-color: #999;
--user-card-bg: #1f1f1f;
--user-card-border: #404040;
--user-input-bg: #2a2a2a;
--user-input-border: #404040;
--user-input-color: #e6e6e6;
}
/* 应用CSS变量到元素 */
.user-module .layui-card-header {
background-color: var(--user-card-header-bg) !important;
color: var(--user-card-header-color) !important;
}
.readonly-field {
background-color: var(--user-readonly-bg) !important;
color: var(--user-readonly-color) !important;
}
.user-module .layui-card {
background-color: var(--user-card-bg);
border-color: var(--user-card-border);
}
.user-module .layui-input {
background-color: var(--user-input-bg);
border-color: var(--user-input-border);
color: var(--user-input-color);
}
/* 确保表单元素在深色模式下的可读性 */
.user-module .layui-form-label {
color: var(--user-card-header-color);
}
/* 按钮在深色模式下的样式调整 */
.user-module .layui-btn-primary {
background-color: var(--user-input-bg);
border-color: var(--user-input-border);
color: var(--user-input-color);
}
.user-module .layui-btn-primary:hover {
background-color: var(--user-readonly-bg);
}
/* 标签页在深色模式下的样式 */
.module-tabs .layui-tab-title {
border-bottom-color: var(--user-card-border);
}
.module-tabs .layui-tab-title li {
color: var(--user-input-color);
}
.module-tabs .layui-tab-title .layui-this {
color: var(--lay-color-primary, #1e9fff);
}
/* 图标颜色适配 */
.user-module .layui-icon {
color: var(--user-card-header-color);
}
</style>
<div class="layui-tab layui-tab-brief module-tabs" lay-filter="userTabs">
<ul class="layui-tab-title">
<li class="layui-this">个人资料</li>
<li>修改密码</li>
<li>修改用户名</li>
</ul>
<div class="layui-tab-content">
<!-- 个人资料模块 -->
<div class="layui-tab-item layui-show">
<div class="layui-card user-module">
<div class="layui-card-header">
<i class="layui-icon layui-icon-user"></i> 个人资料
</div>
<div class="layui-card-body">
<form class="layui-form" id="profileForm" lay-filter="profileForm">
<div class="layui-form-item">
<label class="layui-form-label">UUID</label>
<div class="layui-input-block">
<input type="text" name="uuid" disabled readonly class="layui-input readonly-field" style="font-family: monospace; font-size: 12px;" />
<section>
<h2>个人资料</h2>
<div class="layui-tab layui-tab-brief" lay-filter="userTabs" style="margin-top: 16px;">
<ul class="layui-tab-title">
<li class="layui-this">个人资料</li>
<li>修改密码</li>
<li>修改用户名</li>d
</ul>
<div class="layui-tab-content">
<!-- 个人资料模块 -->
<div class="layui-tab-item layui-show">
<div class="layui-card" style="margin-top: 16px;">
<div class="layui-card-header">个人资料</div>
<div class="layui-card-body">
<form class="layui-form" id="profileForm" lay-filter="profileForm">
<div class="layui-form-item">
<label class="layui-form-label">UUID</label>
<div class="layui-input-block">
<input type="text" name="uuid" disabled readonly class="layui-input readonly-field"
style="font-family: monospace; font-size: 12px;" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户组</label>
<div class="layui-input-block">
<input type="text" name="role" disabled readonly class="layui-input readonly-field" />
<div class="layui-form-item">
<label class="layui-form-label">用户组</label>
<div class="layui-input-block">
<input type="text" name="role" disabled readonly class="layui-input readonly-field" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" disabled readonly class="layui-input readonly-field" />
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" disabled readonly class="layui-input readonly-field" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">创建时间</label>
<div class="layui-input-block">
<input type="text" name="created_at" disabled readonly class="layui-input readonly-field" />
<div class="layui-form-item">
<label class="layui-form-label">创建时间</label>
<div class="layui-input-block">
<input type="text" name="created_at" disabled readonly class="layui-input readonly-field" />
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<!-- 修改密码模块 -->
<div class="layui-tab-item">
<div class="layui-card user-module">
<div class="layui-card-header">
<i class="layui-icon layui-icon-password"></i> 修改密码
</div>
<div class="layui-card-body">
<form class="layui-form" id="passwordForm" lay-filter="passwordForm" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">当前密码</label>
<div class="layui-input-block">
<input type="password" name="old_password" placeholder="请输入当前密码" autocomplete="off" class="layui-input" lay-verify="required" />
<!-- 修改密码模块 -->
<div class="layui-tab-item">
<div class="layui-card" style="margin-top: 16px;">
<div class="layui-card-header">修改密码</div>
<div class="layui-card-body">
<form class="layui-form" id="passwordForm" lay-filter="passwordForm" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">当前密码</label>
<div class="layui-input-block">
<input type="password" name="old_password" placeholder="请输入当前密码" autocomplete="off"
class="layui-input" lay-verify="required" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" name="new_password" placeholder="请输入新密码（至少6位）" autocomplete="off" class="layui-input" lay-verify="required" />
<div class="layui-form-item">
<label class="layui-form-label">新密码</label>
<div class="layui-input-block">
<input type="password" name="new_password" placeholder="请输入新密码（至少6位）" autocomplete="off"
class="layui-input" lay-verify="required" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="confirm_password" placeholder="请再次输入新密码" autocomplete="off" class="layui-input" lay-verify="required" />
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="confirm_password" placeholder="请再次输入新密码" autocomplete="off"
class="layui-input" lay-verify="required" />
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitPassword">
<i class="layui-icon layui-icon-ok"></i> 修改密码
</button>
<button type="button" id="resetPasswordBtn" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-refresh"></i> 重置
</button>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitPassword">
<i class="layui-icon layui-icon-ok"></i> 修改密码
</button>
<button type="button" id="resetPasswordBtn" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-refresh"></i> 重置
</button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<!-- 修改用户名模块 -->
<div class="layui-tab-item">
<div class="layui-card user-module">
<div class="layui-card-header">
<i class="layui-icon layui-icon-edit"></i> 修改用户名
</div>
<div class="layui-card-body">
<form class="layui-form" id="usernameForm" lay-filter="usernameForm" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">当前用户名</label>
<div class="layui-input-block">
<input type="text" name="current_username" disabled readonly class="layui-input readonly-field" />
<!-- 修改用户名模块 -->
<div class="layui-tab-item">
<div class="layui-card" style="margin-top: 16px;">
<div class="layui-card-header">修改用户名</div>
<div class="layui-card-body">
<form class="layui-form" id="usernameForm" lay-filter="usernameForm" onsubmit="return false">
<div class="layui-form-item">
<label class="layui-form-label">当前用户名</label>
<div class="layui-input-block">
<input type="text" name="current_username" disabled readonly class="layui-input readonly-field" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新用户名</label>
<div class="layui-input-block">
<input type="text" name="new_username" placeholder="请输入新用户名" autocomplete="off" class="layui-input" lay-verify="required" />
<div class="layui-form-item">
<label class="layui-form-label">新用户名</label>
<div class="layui-input-block">
<input type="text" name="new_username" placeholder="请输入新用户名" autocomplete="off" class="layui-input"
lay-verify="required" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">当前密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入当前密码以确认身份" autocomplete="off" class="layui-input" lay-verify="required" />
<div class="layui-form-item">
<label class="layui-form-label">当前密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入当前密码以确认身份" autocomplete="off"
class="layui-input" lay-verify="required" />
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitUsername">
<i class="layui-icon layui-icon-ok"></i> 修改用户名
</button>
<button type="button" id="resetUsernameBtn" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-refresh"></i> 重置
</button>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitUsername">
<i class="layui-icon layui-icon-ok"></i> 修改用户名
</button>
<button type="button" id="resetUsernameBtn" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-refresh"></i> 重置
</button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 使用自执行函数创建局部作用域，避免与其他页面脚本发生全局命名冲突
(() => {
// 工具方法：将数值角色转为中文标签
const roleToText = (role) => {
const r = typeof role === 'string' ? parseInt(role, 10) : role
return r === 0 ? '管理员' : '普通成员'
}
// 格式化时间
const formatTime = (timeStr) => {
if (!timeStr) return ''
const date = new Date(timeStr)
return date.toLocaleString('zh-CN')
}
// 如果未加载 layui，则按需加载
const ensureLayui = () => new Promise((resolve) => {
if (window.layui) return resolve(window.layui)
const css = document.createElement('link')
css.rel = 'stylesheet'
css.href = 'https://unpkg.com/layui@2.10.1/dist/css/layui.css'
document.head.appendChild(css)
const script = document.createElement('script')
script.src = 'https://unpkg.com/layui@2.10.1/dist/layui.js'
script.onload = () => resolve(window.layui)
document.head.appendChild(script)
})
// 在确保 Layui 可用后再执行页面逻辑
ensureLayui().then(() => {
layui.use(['form', 'layer', 'element'], () => {
const form = layui.form
const layer = layui.layer
const element = layui.element
// 全局变量
let userProfile = null
// 加载个人资料
const loadProfile = async () => {
try {
const res = await fetch('/admin/api/user/profile')
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '加载失败')
userProfile = data.data || {}
// 填充个人资料表单
const profileData = {
...userProfile,
role: roleToText(userProfile.role),
created_at: formatTime(userProfile.created_at)
}
form.val('profileForm', profileData)
// 填充用户名修改表单的当前用户名
form.val('usernameForm', { current_username: userProfile.username })
} catch (e) {
layer.msg(e.message || '加载个人资料失败', { icon: 2 })
}
<script>
// 使用自执行函数创建局部作用域，避免与其他页面脚本发生全局命名冲突
(() => {
// 工具方法：将数值角色转为中文标签
const roleToText = (role) => {
const r = typeof role === 'string' ? parseInt(role, 10) : role
return r === 0 ? '管理员' : '普通成员'
}
// 修改密码模块
const PasswordModule = {
validate: (fields) => {
const { old_password, new_password, confirm_password } = fields
// 格式化时间
const formatTime = (timeStr) => {
if (!timeStr) return ''
const date = new Date(timeStr)
return date.toLocaleString('zh-CN')
}
if (!old_password || !new_password || !confirm_password) {
return { ok: false, msg: '请填写完整的密码信息' }
}
// 如果未加载 layui，则按需加载
const ensureLayui = () => new Promise((resolve) => {
if (window.layui) return resolve(window.layui)
const css = document.createElement('link')
css.rel = 'stylesheet'
css.href = 'https://unpkg.com/layui@2.10.1/dist/css/layui.css'
document.head.appendChild(css)
const script = document.createElement('script')
script.src = 'https://unpkg.com/layui@2.10.1/dist/layui.js'
script.onload = () => resolve(window.layui)
document.head.appendChild(script)
})
if (new_password.length < 6) {
return { ok: false, msg: '新密码长度不能少于6位' }
}
// 在确保 Layui 可用后再执行页面逻辑
ensureLayui().then(() => {
layui.use(['form', 'layer', 'element'], () => {
const form = layui.form
const layer = layui.layer
const element = layui.element
if (new_password !== confirm_password) {
return { ok: false, msg: '两次输入的新密码不一致' }
}
// 全局变量
let userProfile = null
if (old_password === new_password) {
return { ok: false, msg: '新密码不能与当前密码相同' }
}
// 加载个人资料
const loadProfile = async () => {
try {
const res = await fetch('/admin/api/user/profile')
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '加载失败')
return { ok: true }
},
userProfile = data.data || {}
submit: async (fields) => {
const validation = PasswordModule.validate(fields)
if (!validation.ok) {
layer.msg(validation.msg, { icon: 2 })
return false
}
// 填充个人资料表单
const profileData = {
...userProfile,
role: roleToText(userProfile.role),
created_at: formatTime(userProfile.created_at)
}
form.val('profileForm', profileData)
try {
const res = await fetch('/admin/api/user/password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
old_password: fields.old_password,
new_password: fields.new_password,
confirm_password: fields.confirm_password
})
})
// 填充用户名修改表单的当前用户名
form.val('usernameForm', { current_username: userProfile.username })
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '修改密码失败')
// 检查是否需要跳转
if (data.data?.redirect) {
layer.msg('密码修改成功，即将跳转到登录页', { icon: 1, time: 1500 }, () => {
window.location.href = data.data.redirect
})
} else {
// 密码修改成功，不跳转，重置表单
layer.msg('密码修改成功', { icon: 1 })
document.getElementById('passwordForm').reset()
} catch (e) {
layer.msg(e.message || '加载个人资料失败', { icon: 2 })
}
} catch (e) {
layer.msg(e.message || '修改密码失败', { icon: 2 })
}
return false
},
// 修改密码模块
const PasswordModule = {
validate: (fields) => {
const { old_password, new_password, confirm_password } = fields
reset: () => {
document.getElementById('passwordForm').reset()
layer.msg('表单已重置', { icon: 1 })
}
}
if (!old_password || !new_password || !confirm_password) {
return { ok: false, msg: '请填写完整的密码信息' }
}
// 修改用户名模块
const UsernameModule = {
validate: (fields) => {
const { new_username, password } = fields
if (new_password.length < 6) {
return { ok: false, msg: '新密码长度不能少于6位' }
}
if (!new_username || !password) {
return { ok: false, msg: '请填写新用户名和当前密码' }
if (new_password !== confirm_password) {
return { ok: false, msg: '两次输入的新密码不一致' }
}
if (old_password === new_password) {
return { ok: false, msg: '新密码不能与当前密码相同' }
}
return { ok: true }
},
submit: async (fields) => {
const validation = PasswordModule.validate(fields)
if (!validation.ok) {
layer.msg(validation.msg, { icon: 2 })
return false
}
try {
const res = await fetch('/admin/api/user/password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
old_password: fields.old_password,
new_password: fields.new_password,
confirm_password: fields.confirm_password
})
})
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '修改密码失败')
// 检查是否需要跳转
if (data.data?.redirect) {
layer.msg('密码修改成功，即将跳转到登录页', { icon: 1, time: 1500 }, () => {
window.location.href = data.data.redirect
})
} else {
// 密码修改成功，不跳转，重置表单
layer.msg('密码修改成功', { icon: 1 })
document.getElementById('passwordForm').reset()
}
} catch (e) {
layer.msg(e.message || '修改密码失败', { icon: 2 })
}
return false
},
reset: () => {
document.getElementById('passwordForm').reset()
layer.msg('表单已重置', { icon: 1 })
}
}
if (new_username === userProfile?.username) {
return { ok: false, msg: '新用户名不能与当前用户名相同' }
}
// 修改用户名模块
const UsernameModule = {
validate: (fields) => {
const { new_username, password } = fields
if (new_username.length < 3) {
return { ok: false, msg: '用户名长度不能少于3位' }
}
if (!new_username || !password) {
return { ok: false, msg: '请填写新用户名和当前密码' }
}
return { ok: true }
},
if (new_username === userProfile?.username) {
return { ok: false, msg: '新用户名不能与当前用户名相同' }
}
submit: async (fields) => {
const validation = UsernameModule.validate(fields)
if (!validation.ok) {
layer.msg(validation.msg, { icon: 2 })
return false
}
if (new_username.length < 3) {
return { ok: false, msg: '用户名长度不能少于3位' }
}
try {
const res = await fetch('/admin/api/user/profile/update', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: fields.new_username,
old_password: fields.password
return { ok: true }
},
submit: async (fields) => {
const validation = UsernameModule.validate(fields)
if (!validation.ok) {
layer.msg(validation.msg, { icon: 2 })
return false
}
try {
const res = await fetch('/admin/api/user/profile/update', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: fields.new_username,
old_password: fields.password
})
})
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '修改用户名失败')
layer.msg('用户名修改成功', { icon: 1 })
// 重新加载个人资料
await loadProfile()
// 清空表单（不显示重置提示）
form.val('usernameForm', {
new_username: '',
password: '',
current_username: userProfile?.username || ''
})
} catch (e) {
layer.msg(e.message || '修改用户名失败', { icon: 2 })
}
return false
},
reset: () => {
form.val('usernameForm', {
new_username: '',
password: '',
current_username: userProfile?.username || ''
})
})
const data = await res.json()
const ok = (data.success === true) || (data.code === 0)
if (!ok) throw new Error(data.message || data.msg || '修改用户名失败')
layer.msg('用户名修改成功', { icon: 1 })
// 重新加载个人资料
await loadProfile()
// 清空表单
UsernameModule.reset()
} catch (e) {
layer.msg(e.message || '修改用户名失败', { icon: 2 })
layer.msg('表单已重置', { icon: 1 })
}
}
return false
},
reset: () => {
form.val('usernameForm', {
new_username: '',
password: '',
current_username: userProfile?.username || ''
// 绑定表单提交事件
form.on('submit(submitPassword)', (obj) => {
return PasswordModule.submit(obj.field)
})
layer.msg('表单已重置', { icon: 1 })
}
}
// 绑定表单提交事件
form.on('submit(submitPassword)', (obj) => {
return PasswordModule.submit(obj.field)
form.on('submit(submitUsername)', (obj) => {
return UsernameModule.submit(obj.field)
})
// 绑定重置按钮
document.getElementById('resetPasswordBtn')?.addEventListener('click', PasswordModule.reset)
document.getElementById('resetUsernameBtn')?.addEventListener('click', UsernameModule.reset)
// 初始化加载
loadProfile()
})
})
form.on('submit(submitUsername)', (obj) => {
return UsernameModule.submit(obj.field)
})
// 绑定重置按钮
document.getElementById('resetPasswordBtn')?.addEventListener('click', PasswordModule.reset)
document.getElementById('resetUsernameBtn')?.addEventListener('click', UsernameModule.reset)
// 初始化加载
loadProfile()
})
})
})()
</script>
})()
</script>
</section>
{{ end }}

188
web/template/admin/variables.html
View File

@@ -3,7 +3,8 @@
<h2>变量管理</h2>
<div class="layui-btn-container" style="margin:12px 0">
<button class="layui-btn" id="btnAddVariable"><i class="layui-icon layui-icon-add-1"></i> 新增变量</button>
<button class="layui-btn layui-btn-danger" id="btnBatchDeleteVariables"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
<button class="layui-btn layui-btn-danger" id="btnBatchDeleteVariables"><i class="layui-icon layui-icon-delete"></i>
批量删除</button>
</div>
<div class="layui-card" style="margin-top:12px">
@@ -62,7 +63,8 @@
<div class="layui-form-item">
<label class="layui-form-label">变量别名</label>
<div class="layui-input-block">
<input type="text" name="alias" lay-verify="required|alias" placeholder="请输入变量别名（英文开头，只能包含数字和英文字母）" autocomplete="off" class="layui-input" />
<input type="text" name="alias" lay-verify="required|alias" placeholder="请输入变量别名（英文开头，只能包含数字和英文字母）"
autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
@@ -90,47 +92,47 @@
}
}
waitForLayui(function() {
layui.use(['table', 'form', 'layer', 'element'], function() {
const table = layui.table;
const form = layui.form;
const layer = layui.layer;
const $ = layui.$;
waitForLayui(function () {
layui.use(['table', 'form', 'layer', 'element'], function () {
const table = layui.table;
const form = layui.form;
const layer = layui.layer;
const $ = layui.$;
// 自定义验证规则
form.verify({
alias: function(value) {
if (!value) return '别名不能为空';
// 检查是否以英文字母开头，且只包含数字和英文字母
if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(value)) {
return '别名必须以英文字母开头，只能包含数字和英文字母';
// 自定义验证规则
form.verify({
alias: function (value) {
if (!value) return '别名不能为空';
// 检查是否以英文字母开头，且只包含数字和英文字母
if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(value)) {
return '别名必须以英文字母开头，只能包含数字和英文字母';
}
}
}
});
});
// 格式化时间函数
function formatDateTime(dateStr) {
if (!dateStr) return '-';
return new Date(dateStr).toLocaleString();
}
// 格式化时间函数
function formatDateTime(dateStr) {
if (!dateStr) return '-';
return new Date(dateStr).toLocaleString();
}
// 加载应用列表到下拉框
function loadApps() {
$.ajax({
url: '/admin/variable/apps',
type: 'GET',
success: function(res) {
success: function (res) {
if (res.code === 0 && res.data) {
let options = '<option value="">请选择应用</option>';
res.data.forEach(function(app) {
res.data.forEach(function (app) {
options += '<option value="' + app.uuid + '">' + app.name + '</option>';
});
$('select[name="app_uuid"]').html(options);
form.render('select');
}
},
error: function() {
layer.msg('加载应用列表失败', {icon: 2});
error: function () {
layer.msg('加载应用列表失败', { icon: 2 });
}
});
}
@@ -143,7 +145,7 @@
elem: '#variablesTable',
id: 'variablesTable',
url: '/admin/variable/list',
parseData: function(res) {
parseData: function (res) {
return {
code: res.code,
msg: res.msg || '',
@@ -160,20 +162,20 @@
limit: 20,
limits: [10, 20, 50, 100],
loading: true,
done: function(res, curr, count) {
done: function (res, curr, count) {
// 表格渲染完成后的回调
},
cols: [[
{type: 'checkbox', width: 50},
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'app_name', title: '应用名称', minWidth: 120},
{field: 'number', title: '变量编号', width: 180},
{field: 'alias', title: '变量别名', minWidth: 150},
{ type: 'checkbox', width: 50 },
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: 'app_name', title: '应用名称', minWidth: 120 },
{ field: 'number', title: '变量编号', width: 180 },
{ field: 'alias', title: '变量别名', minWidth: 150 },
{
field: 'data',
title: '变量数据',
minWidth: 200,
templet: function(d) {
templet: function (d) {
// 限制显示长度，避免内容过长影响布局
if (d.data && d.data.length > 50) {
return '<span title="' + d.data + '">' + d.data.substring(0, 50) + '...</span>';
@@ -185,7 +187,7 @@
field: 'remark',
title: '备注',
minWidth: 150,
templet: function(d) {
templet: function (d) {
// 限制显示长度，避免内容过长影响布局
if (d.remark && d.remark.length > 30) {
return '<span title="' + d.remark + '">' + d.remark.substring(0, 30) + '...</span>';
@@ -197,29 +199,29 @@
field: 'created_at',
title: '创建时间',
width: 180,
templet: function(d) {
templet: function (d) {
return formatDateTime(d.created_at);
}
},
{title: '操作', width: 180, align: 'center', toolbar: '#tpl-variables-ops', fixed: 'right'}
{ title: '操作', width: 180, align: 'center', toolbar: '#tpl-variables-ops', fixed: 'right' }
]]
});
// 监听应用选择变化
form.on('select(appSelect)', function(data) {
variablesTable.reload({
where: {
app_uuid: data.value,
search: $('input[name="search"]').val()
},
page: {
curr: 1
}
});
});
form.on('select(appSelect)', function (data) {
variablesTable.reload({
where: {
app_uuid: data.value,
search: $('input[name="search"]').val()
},
page: {
curr: 1
}
});
});
// 搜索功能
$('#btnSearchVariables').on('click', function() {
$('#btnSearchVariables').on('click', function () {
variablesTable.reload({
where: {
app_uuid: $('select[name="app_uuid"]').val(),
@@ -232,7 +234,7 @@
});
// 重置搜索
$('#btnResetVariables').on('click', function() {
$('#btnResetVariables').on('click', function () {
$('#variableFilterForm')[0].reset();
form.render();
variablesTable.reload({
@@ -244,7 +246,7 @@
});
// 新增变量
$('#btnAddVariable').on('click', function() {
$('#btnAddVariable').on('click', function () {
console.log('新增变量按钮被点击');
$('#variableForm')[0].reset();
$('input[name="id"]').val('');
@@ -258,10 +260,10 @@
content: $('#variableFormLayer'),
area: ['500px', '460px'],
btn: ['创建', '取消'],
yes: function(index, layero) {
yes: function (index, layero) {
// 手动收集表单数据
var formData = {};
$('#variableForm').find('input, select, textarea').each(function() {
$('#variableForm').find('input, select, textarea').each(function () {
var $this = $(this);
var name = $this.attr('name');
if (name && name !== 'id') {
@@ -273,15 +275,15 @@
// 验证必填字段
if (!formData.app_uuid || formData.app_uuid.trim() === '') {
layer.msg('应用UUID不能为空', {icon: 2});
layer.msg('应用UUID不能为空', { icon: 2 });
return;
}
if (!formData.alias || formData.alias.trim() === '') {
layer.msg('请输入变量别名', {icon: 2});
layer.msg('请输入变量别名', { icon: 2 });
return;
}
if (!formData.data || formData.data.trim() === '') {
layer.msg('请输入变量数据', {icon: 2});
layer.msg('请输入变量数据', { icon: 2 });
return;
}
@@ -292,24 +294,24 @@
type: 'POST',
data: JSON.stringify(formData),
contentType: 'application/json',
success: function(res) {
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1});
layer.msg(res.msg, { icon: 1 });
layer.close(index);
variablesTable.reload();
} else {
layer.msg(res.msg || '操作失败', {icon: 2});
layer.msg(res.msg || '操作失败', { icon: 2 });
}
},
error: function(xhr) {
layer.msg(xhr.responseText || '操作失败', {icon: 2});
error: function (xhr) {
layer.msg(xhr.responseText || '操作失败', { icon: 2 });
}
});
},
btn2: function(index) {
btn2: function (index) {
layer.close(index);
},
success: function() {
success: function () {
form.render();
},
shadeClose: false
@@ -317,32 +319,32 @@
});
// 批量删除
$('#btnBatchDeleteVariables').on('click', function() {
$('#btnBatchDeleteVariables').on('click', function () {
const checkStatus = table.checkStatus('variablesTable');
const data = checkStatus.data;
if (data.length === 0) {
layer.msg('请选择要删除的变量', {icon: 2});
layer.msg('请选择要删除的变量', { icon: 2 });
return;
}
layer.confirm('确定删除选中的 ' + data.length + ' 个变量吗？', {icon: 3, title: '提示'}, function(index) {
layer.confirm('确定删除选中的 ' + data.length + ' 个变量吗？', { icon: 3, title: '提示' }, function (index) {
const ids = data.map(item => item.id);
$.ajax({
url: '/admin/variable/batch_delete',
type: 'POST',
data: JSON.stringify({ids: ids}),
data: JSON.stringify({ ids: ids }),
contentType: 'application/json',
success: function(res) {
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1});
layer.msg(res.msg, { icon: 1 });
variablesTable.reload();
} else {
layer.msg(res.msg || '批量删除失败', {icon: 2});
layer.msg(res.msg || '批量删除失败', { icon: 2 });
}
},
error: function(xhr) {
layer.msg(xhr.responseText || '批量删除失败', {icon: 2});
error: function (xhr) {
layer.msg(xhr.responseText || '批量删除失败', { icon: 2 });
}
});
layer.close(index);
@@ -350,7 +352,7 @@
});
// 表格工具栏事件
table.on('tool(variablesTableFilter)', function(obj) {
table.on('tool(variablesTableFilter)', function (obj) {
const data = obj.data;
if (obj.event === 'edit') {
@@ -361,7 +363,7 @@
// 重新加载应用列表，然后设置选中值
loadApps();
setTimeout(function() {
setTimeout(function () {
$('select[name="app_uuid"]').val(data.app_uuid);
form.render('select');
}, 100);
@@ -376,10 +378,10 @@
content: $('#variableFormLayer'),
area: ['500px', '460px'],
btn: ['保存', '取消'],
yes: function(index, layero) {
yes: function (index, layero) {
// 手动收集表单数据
var formData = {};
$('#variableForm').find('input, select, textarea').each(function() {
$('#variableForm').find('input, select, textarea').each(function () {
var $this = $(this);
var name = $this.attr('name');
if (name && name !== 'id') {
@@ -391,15 +393,15 @@
// 验证必填字段
if (!formData.app_uuid || formData.app_uuid.trim() === '') {
layer.msg('应用UUID不能为空', {icon: 2});
layer.msg('应用UUID不能为空', { icon: 2 });
return;
}
if (!formData.alias || formData.alias.trim() === '') {
layer.msg('请输入变量别名', {icon: 2});
layer.msg('请输入变量别名', { icon: 2 });
return;
}
if (!formData.data || formData.data.trim() === '') {
layer.msg('请输入变量数据', {icon: 2});
layer.msg('请输入变量数据', { icon: 2 });
return;
}
@@ -410,24 +412,24 @@
type: 'POST',
data: JSON.stringify(formData),
contentType: 'application/json',
success: function(res) {
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1});
layer.msg(res.msg, { icon: 1 });
layer.close(index);
variablesTable.reload();
} else {
layer.msg(res.msg || '操作失败', {icon: 2});
layer.msg(res.msg || '操作失败', { icon: 2 });
}
},
error: function(xhr) {
layer.msg(xhr.responseText || '操作失败', {icon: 2});
error: function (xhr) {
layer.msg(xhr.responseText || '操作失败', { icon: 2 });
}
});
},
btn2: function(index) {
btn2: function (index) {
layer.close(index);
},
success: function() {
success: function () {
form.render();
},
shadeClose: false
@@ -435,22 +437,22 @@
} else if (obj.event === 'del') {
// 删除
layer.confirm('确定删除该变量吗？', {icon: 3, title: '提示'}, function(index) {
layer.confirm('确定删除该变量吗？', { icon: 3, title: '提示' }, function (index) {
$.ajax({
url: '/admin/variable/delete',
type: 'POST',
data: JSON.stringify({id: data.id}),
data: JSON.stringify({ id: data.id }),
contentType: 'application/json',
success: function(res) {
success: function (res) {
if (res.code === 0) {
layer.msg(res.msg, {icon: 1});
layer.msg(res.msg, { icon: 1 });
variablesTable.reload();
} else {
layer.msg(res.msg || '删除失败', {icon: 2});
layer.msg(res.msg || '删除失败', { icon: 2 });
}
},
error: function(xhr) {
layer.msg(xhr.responseText || '删除失败', {icon: 2});
error: function (xhr) {
layer.msg(xhr.responseText || '删除失败', { icon: 2 });
}
});
layer.close(index);

351
web/template/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>{{.SystemName}} - 生活就像愤怒的小鸟，失败后总有几只猪在笑。</title>
<!-- 站 点 协 议 -->
@@ -17,9 +18,10 @@
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" />
<!-- 样 式 文 件 -->
<link rel="stylesheet" href="//lib.baomitu.com/layui/2.8.17/css/layui.css"/>
<link rel="stylesheet" href="//lib.baomitu.com/layui/2.8.17/css/layui.css" />
<style>
html, body {
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
@@ -69,6 +71,7 @@
from {
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
to {
text-shadow: 0 0 30px rgba(0, 212, 255, 0.8), 0 0 40px rgba(0, 212, 255, 0.6);
}
@@ -100,8 +103,13 @@
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.box-form .layui-form-item {
@@ -119,8 +127,15 @@
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.info-text {
@@ -174,193 +189,197 @@
}
</style>
</head>
<body>
<!-- 代 码 结 构 -->
<div class="layui-container">
<canvas id="canvas"></canvas>
<div class="body-background body_box">
<div class="layui-form box-form body_box">
<div class="layui-form-item logo-title">
<h1><strong>系统提醒</strong></h1>
</div>
<hr>
<div class="layui-form-item">
<div class="warning-text">🚫 未授权，拒绝访问</div>
</div>
<div class="layui-form-item">
<div class="info-text">💬 如有问题，请联系网站管理员</div>
<!-- 代 码 结 构 -->
<div class="layui-container">
<canvas id="canvas"></canvas>
<div class="body-background body_box">
<div class="layui-form box-form body_box">
<div class="layui-form-item logo-title">
<h1><strong>系统提醒</strong></h1>
</div>
<hr>
<div class="layui-form-item">
<div class="warning-text">🚫 未授权，拒绝访问</div>
</div>
<div class="layui-form-item">
<div class="info-text">💬 如有问题，请联系网站管理员</div>
</div>
</div>
<div class="body_footer">{{.FooterText}}</div>
{{if or .ICPRecord .PSBRecord}}<div class="body_beian">{{if .ICPRecord}}<a href="{{.ICPRecordLink}}"
target="_blank">{{.ICPRecord}}</a>{{end}}{{if and .ICPRecord .PSBRecord}} {{end}}{{if .PSBRecord}}<a
href="{{.PSBRecordLink}}" target="_blank">{{.PSBRecord}}</a>{{end}}</div>{{end}}
</div>
<div class="body_footer">{{.FooterText}}</div>
{{if or .ICPRecord .PSBRecord}}<div class="body_beian">{{if .ICPRecord}}<a href="{{.ICPRecordLink}}" target="_blank">{{.ICPRecord}}</a>{{end}}{{if and .ICPRecord .PSBRecord}} {{end}}{{if .PSBRecord}}<a href="{{.PSBRecordLink}}" target="_blank">{{.PSBRecord}}</a>{{end}}</div>{{end}}
</div>
</div>
<!-- 资 源 引 入 -->
<script src="//lib.baomitu.com/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<!-- 资 源 引 入 -->
<script src="//lib.baomitu.com/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<script>
// 获取canvas元素和绘图上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<script>
// 获取canvas元素和绘图上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas尺寸为全屏
const resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
// 设置canvas尺寸为全屏
const resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 粒子类
class Particle {
constructor() {
this.reset();
}
// 重置粒子位置和属性
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.size = Math.random() * 3 + 1;
this.opacity = Math.random() * 0.8 + 0.2;
this.color = this.getRandomColor();
}
// 获取随机颜色
getRandomColor() {
const colors = [
'#00FF00', '#0080FF', '#FF0080', '#FFFF00',
'#FF8000', '#8000FF', '#00FFFF', '#FF4000'
];
return colors[Math.floor(Math.random() * colors.length)];
}
// 更新粒子位置
update() {
this.x += this.vx;
this.y += this.vy;
// 边界检测，粒子超出边界时重置
if (this.x < 0 || this.x > canvas.width ||
this.y < 0 || this.y > canvas.height) {
// 粒子类
class Particle {
constructor() {
this.reset();
}
// 随机改变透明度
this.opacity += (Math.random() - 0.5) * 0.02;
this.opacity = Math.max(0.1, Math.min(1, this.opacity));
}
// 重置粒子位置和属性
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.size = Math.random() * 3 + 1;
this.opacity = Math.random() * 0.8 + 0.2;
this.color = this.getRandomColor();
}
// 绘制粒子
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// 获取随机颜色
getRandomColor() {
const colors = [
'#00FF00', '#0080FF', '#FF0080', '#FFFF00',
'#FF8000', '#8000FF', '#00FFFF', '#FF4000'
];
return colors[Math.floor(Math.random() * colors.length)];
}
// 创建粒子数组
const particles = [];
const particleCount = 150;
// 更新粒子位置
update() {
this.x += this.vx;
this.y += this.vy;
// 初始化粒子
const initParticles = () => {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
};
// 绘制连线
const drawConnections = () => {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
// 如果距离小于100像素，绘制连线
if (distance < 100) {
ctx.save();
ctx.globalAlpha = (100 - distance) / 100 * 0.3;
ctx.strokeStyle = '#00FF00';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
ctx.restore();
// 边界检测，粒子超出边界时重置
if (this.x < 0 || this.x > canvas.width ||
this.y < 0 || this.y > canvas.height) {
this.reset();
}
// 随机改变透明度
this.opacity += (Math.random() - 0.5) * 0.02;
this.opacity = Math.max(0.1, Math.min(1, this.opacity));
}
// 绘制粒子
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
};
// 动画循环
const animate = () => {
// 清除画布，使用半透明黑色创建拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 创建粒子数组
const particles = [];
const particleCount = 150;
// 更新和绘制所有粒子
particles.forEach(particle => {
particle.update();
particle.draw();
});
// 初始化粒子
const initParticles = () => {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
};
// 绘制粒子间的连线
drawConnections();
// 绘制连线
const drawConnections = () => {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
requestAnimationFrame(animate);
};
// 如果距离小于100像素，绘制连线
if (distance < 100) {
ctx.save();
ctx.globalAlpha = (100 - distance) / 100 * 0.3;
ctx.strokeStyle = '#00FF00';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
ctx.restore();
}
}
}
};
// 鼠标交互效果
const addMouseInteraction = () => {
let mouseX = 0;
let mouseY = 0;
// 动画循环
const animate = () => {
// 清除画布，使用半透明黑色创建拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// 鼠标附近的粒子会被吸引
// 更新和绘制所有粒子
particles.forEach(particle => {
const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
particle.update();
particle.draw();
});
if (distance < 150) {
particle.vx += dx * 0.0001;
particle.vy += dy * 0.0001;
// 绘制粒子间的连线
drawConnections();
requestAnimationFrame(animate);
};
// 鼠标交互效果
const addMouseInteraction = () => {
let mouseX = 0;
let mouseY = 0;
canvas.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// 鼠标附近的粒子会被吸引
particles.forEach(particle => {
const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
particle.vx += dx * 0.0001;
particle.vy += dy * 0.0001;
}
});
});
// 点击时添加新粒子
canvas.addEventListener('click', (e) => {
for (let i = 0; i < 5; i++) {
const newParticle = new Particle();
newParticle.x = e.clientX + (Math.random() - 0.5) * 20;
newParticle.y = e.clientY + (Math.random() - 0.5) * 20;
particles.push(newParticle);
}
// 限制粒子数量
if (particles.length > particleCount + 50) {
particles.splice(0, 5);
}
});
});
};
// 点击时添加新粒子
canvas.addEventListener('click', (e) => {
for (let i = 0; i < 5; i++) {
const newParticle = new Particle();
newParticle.x = e.clientX + (Math.random() - 0.5) * 20;
newParticle.y = e.clientY + (Math.random() - 0.5) * 20;
particles.push(newParticle);
}
// 限制粒子数量
if (particles.length > particleCount + 50) {
particles.splice(0, 5);
}
});
};
// 启动粒子系统
initParticles();
addMouseInteraction();
animate();
</script>
// 启动粒子系统
initParticles();
addMouseInteraction();
animate();
</script>
</body>
</html>