🆕 完善页面(未完成)

app/friend.go

@@ -0,0 +1,56 @@
+package app
+
+import (
+	"github.com/gin-gonic/gin"
+	"log"
+	"net/http"
+)
+
+// changeStatusParam
+// @description: 修改状态用的参数集
+type changeStatusParam struct {
+	WxId   string `json:"wxId" binding:"required"`
+	UserId string `json:"userId"`
+}
+
+// ChangeEnableAiStatus
+// @description: 修改是否开启AI
+// @param ctx
+func ChangeEnableAiStatus(ctx *gin.Context) {
+	var p changeStatusParam
+	if err := ctx.ShouldBindJSON(&p); err != nil {
+		ctx.String(http.StatusBadRequest, "参数错误")
+		return
+	}
+	log.Printf("待修改的微信Id：%s", p.WxId)
+
+	ctx.String(http.StatusOK, "操作成功")
+}
+
+// ChangeEnableGroupRankStatus
+// @description: 修改是否开启水群排行榜
+// @param ctx
+func ChangeEnableGroupRankStatus(ctx *gin.Context) {
+	var p changeStatusParam
+	if err := ctx.ShouldBindJSON(&p); err != nil {
+		ctx.String(http.StatusBadRequest, "参数错误")
+		return
+	}
+	log.Printf("待修改的群Id：%s", p.WxId)
+
+	ctx.String(http.StatusOK, "操作成功")
+}
+
+// ChangeSkipGroupRankStatus
+// @description: 修改是否跳过水群排行榜
+// @param ctx
+func ChangeSkipGroupRankStatus(ctx *gin.Context) {
+	var p changeStatusParam
+	if err := ctx.ShouldBindJSON(&p); err != nil {
+		ctx.String(http.StatusBadRequest, "参数错误")
+		return
+	}
+	log.Printf("待修改的群Id：%s -> %s", p.WxId, p.UserId)
+
+	ctx.String(http.StatusOK, "操作成功")
+}

app/group.go

@@ -0,0 +1,31 @@
+package app
+
+import (
+	"github.com/gin-gonic/gin"
+	"go-wechat/client"
+	"go-wechat/entity"
+	"net/http"
+)
+
+type getGroupUser struct {
+	GroupId string `json:"groupId" form:"groupId" binding:"required"` // 群Id
+}
+
+// GetGroupUsers
+// @description: 获取群成员列表
+// @param ctx
+func GetGroupUsers(ctx *gin.Context) {
+	var p getGroupUser
+	if err := ctx.ShouldBind(&p); err != nil {
+		ctx.String(http.StatusBadRequest, "参数错误")
+		return
+	}
+	// 查询数据
+	var users []entity.GroupUser
+	if err := client.MySQL.Where("group_id = ?", p.GroupId).Find(&users).Error; err != nil {
+		ctx.String(http.StatusInternalServerError, "查询数据失败")
+		return
+	}
+	// 暂时先就这样写着，跑通了再改
+	ctx.JSON(http.StatusOK, users)
+}

common/types/datetime.go

@@ -55,7 +55,7 @@ func (dt DateTime) Value() (dv driver.Value, err error) {
 
 // 用于 fmt.Println 和后续验证场景
 func (dt DateTime) String() string {
-	return dt.Format(dateTimeFormat)
+	return dt.Format("2006-01-02 15:04:05")
 }
 
 // Format 格式化

main.go

@@ -8,7 +8,10 @@ import (
 	"go-wechat/tasks"
 	"go-wechat/tcpserver"
 	"go-wechat/utils"
+	"html/template"
 	"log"
+	"net/http"
+	"strings"
 	"time"
 )
 
@@ -30,14 +33,32 @@ func main() {
 
 	// 启动HTTP服务
 	app := gin.Default()
+
+	// 自定义模板引擎函数
+	app.SetFuncMap(template.FuncMap{
+		"checkSwap": func(flag bool) string {
+			if flag {
+				return "swap-active"
+			}
+			return ""
+		},
+	})
+
 	app.LoadHTMLGlob("views/*.html")
 	app.Static("/assets", "./views/static")
 	app.StaticFile("/favicon.ico", "./views/wechat.ico")
 	// 404返回数据
 	app.NoRoute(func(ctx *gin.Context) {
+		if strings.HasPrefix(ctx.Request.URL.Path, "/api") {
+			ctx.String(404, "接口不存在")
+			return
+		}
 		// 404直接跳转到首页
 		ctx.Redirect(302, "/index.html")
 	})
+	app.NoMethod(func(ctx *gin.Context) {
+		ctx.String(http.StatusMethodNotAllowed, "不支持的请求方式")
+	})
 	// 初始化路由
 	router.Init(app)
 	if err := app.Run(":8080"); err != nil {

router/router.go

@@ -18,4 +18,11 @@ func Init(g *gin.Engine) {
 	g.GET("/test.html", func(ctx *gin.Context) {
 		ctx.HTML(200, "test.html", nil)
 	})
+
+	// 接口
+	api := g.Group("/api")
+	api.PUT("/ai/status", app.ChangeEnableAiStatus)               // 修改是否开启AI状态
+	api.PUT("/grouprank/status", app.ChangeEnableGroupRankStatus) // 修改是否开启水群排行榜状态
+	api.PUT("/grouprank/skip", app.ChangeSkipGroupRankStatus)     // 修改是否跳过水群排行榜状态
+	api.GET("/group/users", app.GetGroupUsers)                    // 获取群成员列表
 }

views/index.html

@@ -5,7 +5,11 @@
     <title>水群助手</title>
 
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.14/dist/full.min.css" rel="stylesheet" type="text/css" />
+
+    <link href="assets/css/index.css" rel="stylesheet" type="text/css" />
+
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
 
     <script src="assets/js/index.js"></script>
 </head>
@@ -19,14 +23,10 @@
         </div>
         {{ end }}
 
-        <div class="collapse collapse-arrow bg-base-200">
-            <input type="radio" name="my-accordion-2" checked="checked" />
-            <div class="collapse-title text-xl font-medium">
-                好友列表
-            </div>
-            <div class="collapse-content">
+        <div role="tablist" class="tabs tabs-bordered">
+            <input type="radio" name="friend_tab" role="tab" class="tab" aria-label="好友列表" />
+            <div role="tabpanel" class="tab-content p-6">
                 <!-- 循环好友列表 -->
-                <div class="overflow-x-auto">
                 <table class="table table-zebra">
                     <!-- head -->
                     <thead>
@@ -37,7 +37,6 @@
                         <th>最后活跃时间</th>
                         <th>是否在通讯录</th>
                         <th>是否启用AI</th>
-                            <th>是否启用水群排行榜</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -53,24 +52,34 @@
                             {{ .LastActiveTime }}
                             {{ end }}
                         </td>
-                            <td>{{ .IsOk }}</td>
-                            <td>{{ .EnableAi }}</td>
-                            <td>{{ .EnableChatRank }}</td>
+                        <td>
+                            {{ if eq .IsOk true }}
+                            <div class="badge badge-info gap-2">
+                                是
+                            </div>
+                            {{ else }}
+                            <div class="badge badge-error gap-2">
+                                否
+                            </div>
+                            {{ end }}
+                        </td>
+                        <td>
+                            <label class="swap swap-flip {{ checkSwap .EnableAi }}">
+                                <input type="checkbox" onclick="changeAiEnableStatus({{.Wxid}})"/>
+
+                                <div class="swap-on">✔️已启用</div>
+                                <div class="swap-off">❌已禁用</div>
+                            </label>
+                        </td>
                     </tr>
                     {{ end }}
                     </tbody>
                 </table>
             </div>
-            </div>
-        </div>
-        <div class="collapse collapse-arrow bg-base-200">
-            <input type="radio" name="my-accordion-2" />
-            <div class="collapse-title text-xl font-medium">
-                群列表
-            </div>
-            <div class="collapse-content">
+
+            <input type="radio" name="friend_tab" role="tab" class="tab" aria-label="群列表" checked/>
+            <div role="tabpanel" class="tab-content p-6">
                 <!-- 循环群列表 -->
-                <div class="overflow-x-auto">
                 <table class="table table-zebra">
                     <!-- head -->
                     <thead>
@@ -81,6 +90,7 @@
                         <th>是否在通讯录</th>
                         <th>是否启用AI</th>
                         <th>是否启用水群排行榜</th>
+                        <th>操作</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -95,16 +105,80 @@
                             {{ .LastActiveTime }}
                             {{ end }}
                         </td>
-                            <td>{{ .IsOk }}</td>
-                            <td>{{ .EnableAi }}</td>
-                            <td>{{ .EnableChatRank }}</td>
+                        <td>
+                            {{ if eq .IsOk true }}
+                            <div class="badge badge-info gap-2">
+                                是
+                            </div>
+                            {{ else }}
+                            <div class="badge badge-error gap-2">
+                                否
+                            </div>
+                            {{ end }}
+                        </td>
+                        <td>
+                            <!-- EnableAi -->
+                            <label class="swap swap-flip {{ checkSwap .EnableAi }}">
+                                <input type="checkbox" onclick="changeAiEnableStatus({{.Wxid}})"/>
+
+                                <div class="swap-on">✔️已启用</div>
+                                <div class="swap-off">❌已禁用</div>
+                            </label>
+                        </td>
+                        <td>
+                            <!-- EnableChatRank -->
+                            <label class="swap swap-flip {{ checkSwap .EnableChatRank }}">
+                                <input type="checkbox" onclick="changeGroupRankEnableStatus({{.Wxid}})"/>
+
+                                <div class="swap-on">✔️已启用</div>
+                                <div class="swap-off">❌已禁用</div>
+                            </label>
+                        </td>
+                        <td>
+                            <button class="btn btn-link" onclick="getGroupUsers({{.Wxid}})">查看群成员</button>
+                        </td>
                     </tr>
                     {{ end }}
                     </tbody>
                 </table>
             </div>
         </div>
+
+
     </div>
+
+    <dialog id="groupUserModal" class="modal">
+        <div class="modal-box w-11/12 max-w-5xl">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <h3 class="font-bold text-lg">我是群名称</h3>
+            <table class="table table-zebra">
+                <!-- head -->
+                <thead>
+                <tr>
+                    <th>微信Id</th>
+                    <th>昵称</th>
+                    <th>是否群成员</th>
+                    <th>最后活跃时间</th>
+                    <th>退群时间</th>
+                    <th>是否跳过水群排行榜</th>
+                </tr>
+                </thead>
+                <tbody id="groupUsers">
+                <tr>
+                    <td>25984982106634049@openim</td>
+                    <td>成员</td>
+                    <td>true</td>
+                    <td>2023-11-30 16:49:42</td>
+                    <td>2023-11-30 16:49:42</td>
+                    <td>
+                        <input type="checkbox" class="toggle toggle-success" onclick="changeUserGroupRankSkipStatus()" />
+                    </td>
+                </tr>
+                </tbody>
+            </table>
         </div>
+    </dialog>
 </body>
 </html>

views/static/css/index.css

@@ -0,0 +1,4 @@
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: none;
+}

views/static/js/index.js

@@ -1 +1,104 @@
 console.log("打开首页")
+
+//	改变AI开启状态
+function changeAiEnableStatus(wxId) {
+    console.log("修改AI开启状态: ", wxId)
+
+    axios({
+        method: 'put',
+        url: '/api/ai/status',
+        data: {
+            wxId: wxId
+        }
+    }).then(function (response) {
+        console.log(`返回结果: ${JSON.stringify(response)}`);
+    }).catch(function (error) {
+        console.log(`错误信息: ${error}`);
+    })
+}
+
+// 修改水群排行榜状态
+function changeGroupRankEnableStatus(wxId) {
+    console.log("修改水群排行榜开启状态: ", wxId)
+    axios({
+        method: 'put',
+        url: '/api/grouprank/status',
+        data: {
+            wxId: wxId
+        }
+    }).then(function (response) {
+        console.log(`返回结果: ${JSON.stringify(response)}`);
+    }).catch(function (error) {
+        console.log(`错误信息: ${error}`);
+    })
+}
+
+// 修改群成员是否参与排行榜状态
+function changeUserGroupRankSkipStatus(groupId, userId) {
+    console.log("修改水群排行榜开启状态: ", groupId, userId)
+    axios({
+        method: 'put',
+        url: '/api/grouprank/skip',
+        data: {
+            wxId: wxId,
+            userId: userId
+        }
+    }).then(function (response) {
+        console.log(`返回结果: ${JSON.stringify(response)}`);
+    }).catch(function (error) {
+        console.log(`错误信息: ${error}`);
+    })
+}
+
+// 获取群成员列表
+function getGroupUsers(groupId) {
+    // 打开模态框
+    const modal = document.getElementById("groupUserModal");
+    modal.showModal()
+
+    axios.get('/api/group/users', {
+        params: {
+            groupId: groupId
+        }
+    }).then(function (response) {
+        console.log(`返回结果: ${JSON.stringify(response)}`);
+        // 渲染群成员列表
+        const groupUsers = response.data
+
+        // const groupUserList = document.getElementById("groupUsers")
+
+        // 获取表格的tbody部分，以便稍后向其中添加行
+        var tbody = document.getElementById("groupUsers");
+        for (let i = 0; i < groupUsers.length; i++) {
+            const groupUser = groupUsers[i]
+
+            var row = tbody.insertRow(i); // 插入新行
+
+            // 微信Id
+            var wxId = row.insertCell(0);
+            wxId.innerHTML = data[i].wxId;
+
+            // 昵称
+            var nickname = row.insertCell(1);
+            nickname.innerHTML = data[i].wxId;
+
+            // 是否群成员
+            var isMember = row.insertCell(2);
+            isMember.innerHTML = data[i].wxId;
+
+            // 最后活跃时间
+            var wxId = row.insertCell(3);
+            wxId.innerHTML = data[i].wxId;
+
+            // 退群时间
+            var wxId = row.insertCell(4);
+            wxId.innerHTML = data[i].wxId;
+
+            // 是否跳过水群排行榜
+            var wxId = row.insertCell(5);
+            wxId.innerHTML = data[i].wxId;
+        }
+    }).catch(function (error) {
+        console.log(`错误信息: ${error}`);
+    })
+}