🆕 修改群组页面为卡片

app/friend.go

@@ -23,6 +23,13 @@ type changeUseAiModelParam struct {
 	Model string `json:"model" binding:"required"` // 模型代码
 }
 
+// autoClearMembers
+// @description: 自动清理群成员
+type autoClearMembers struct {
+	WxId string `json:"wxid" binding:"required"` // 群Id
+	Days int    `json:"days"`                    // 多少天未发言
+}
+
 // ChangeEnableAiStatus
 // @description: 修改是否开启AI
 // @param ctx
@@ -227,3 +234,26 @@ func ChangeEnableNewsStatus(ctx *gin.Context) {
 
 	ctx.String(http.StatusOK, "操作成功")
 }
+
+// AutoClearMembers
+// @description: 自动清理群成员
+// @param ctx
+func AutoClearMembers(ctx *gin.Context) {
+	var p autoClearMembers
+	if err := ctx.ShouldBindJSON(&p); err != nil {
+		ctx.String(http.StatusBadRequest, "参数错误")
+		return
+	}
+	log.Printf("待修改的Id：%s", p.WxId)
+
+	err := client.MySQL.Model(&entity.Friend{}).
+		Where("wxid = ?", p.WxId).
+		Update("`clear_member`", p.Days).Error
+	if err != nil {
+		log.Printf("修改自动清理群成员阈值失败：%s", err)
+		ctx.String(http.StatusInternalServerError, "操作失败: %s", err)
+		return
+	}
+
+	ctx.String(http.StatusOK, "操作成功")
+}

router/router.go

@@ -32,4 +32,5 @@ func Init(g *gin.Engine) {
 	api.PUT("/grouprank/skip", app.ChangeSkipGroupRankStatus)     // 修改是否跳过水群排行榜状态
 	api.GET("/group/users", app.GetGroupUsers)                    // 获取群成员列表
 	api.PUT("/summary/status", app.ChangeEnableSummaryStatus)     // 修改是否开启群聊总结状态
+	api.PUT("/clearmembers", app.AutoClearMembers)                // 自动清理群成员
 }

views/components.html

@@ -197,9 +197,9 @@
 {{define "flagTag"}}
 {{ if eq . true }}
 <span
-  class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">是</span>
+  class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">在通讯录</span>
 {{ else }}
 <span
-  class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">否</span>
+  class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">不在通讯录</span>
 {{ end }}
 {{end}}

views/group.html

@@ -21,101 +21,113 @@
   <main class="-mt-32">
     <div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
       <div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6 text-2xl">
-        <table class="min-w-full divide-y divide-gray-300">
+        <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
-          <thead class="bg-gray-50">
-          <tr>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">群名称
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              最后活跃时间
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              是否在通讯录
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              AI
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              排行榜
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              总结
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              迎新
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              早报
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              指令
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              末位淘汰(天)
-            </th>
-            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
-              操作
-            </th>
-          </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200 bg-white">
           {{ range .groups }}
-          <tr class="even:bg-gray-50">
+          <li class="overflow-hidden rounded-xl border border-gray-200">
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+            <div class="flex items -center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
-              <div class="font-medium text-gray-900">{{ .Nickname }}</div>
+              <img src="assets/img/status-{{ if eq .IsOk true }}ok{{else}}fail{{end}}.png" alt="Tuple"
-              <div class="mt-1 truncate text-gray-500">{{ .Wxid }}</div>
+                   class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
-            </td>
+              <div class="text-sm flex-1">
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                <div class="font-medium leading-6 text-gray-900">{{ .Nickname }}</div>
-              {{ if eq .LastActive.IsNil true }}
+                <div class="font-medium text-gray-500">{{ .Wxid }}</div>
-              无数据
-              {{ else }}
-              {{ .LastActive }}
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                 {{ template "flagTag" .IsOk }}
-            </td>
+                <button type="button" class="btn-link float-end text-red-600" onclick="getGroupUsers({{.Wxid}}, {{.Nickname}})">群成员</button>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+            </div>
+
+            <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
+              <!-- 最后活跃时间 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">最后活跃时间</dt>
+                <dd class="flex items-start gap-x-2">
+                  {{ if eq .LastActive.IsNil true }}
+                  无活跃数据
+                  {{ else }}
+                  <time datetime="{{ .LastActive }}">{{ .LastActive }}</time>
+                  {{ end }}
+                </dd>
+              </div>
+              <!-- AI -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">AI</dt>
+                <dd class="flex items-start gap-x-2">
+                  <div>
                     {{ template "ai" . }}
-              <!-- 使用的模型 -->
+                  </div>
                   {{ if eq .EnableAi true }}
-              <select id="location" name="location"
+                  <div class="float-end">
-                      class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6"
+                    <select
-                      onchange="aiModelChange(event, {{.Wxid}})">
+                      class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-green-600 sm:text-sm sm:leading-6"
-                {{$useModel := .AiModel}}
+                      onchange="aiAssistantChange(event, {{.Wxid}})">
-                {{ range $.aiModels }}
+                      <option value="" {{ if eq .Prompt
-                <option value="{{.Model}}" {{ if eq $useModel .Model}}selected{{ end }}>
+                      "" }}selected{{ end }}>默认</option>
-                  {{.Name}}({{.Model}})
+
+                      {{$usePrompt := .Prompt}}
+                      {{ range $.assistant }}
+                      <option value="{{.Id}}" {{ if eq $usePrompt .Id}}selected{{ end }}>
+                        {{.Name}}
                       </option>
                       {{ end }}
                     </select>
+                  </div>
                   {{ end }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+              <!-- 水群排行榜 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">水群排行榜</dt>
+                <dd class="flex items-start gap-x-2">
                   {{ template "chatRank" . }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+              <!-- 群聊总结 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">群聊总结</dt>
+                <dd class="flex items-start gap-x-2">
                   {{ template "summary" . }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+              <!-- 迎新 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">迎新</dt>
+                <dd class="flex items-start gap-x-2">
                   {{ template "welcome" . }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+              <!-- 早报 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">早报</dt>
+                <dd class="flex items-start gap-x-2">
                   {{ template "news" . }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
+              <!-- 指令 -->
+              <div class="flex justify-between gap-x-4 py-3 items-center">
+                <dt class="text-gray-500">迎新</dt>
+                <dd class="flex items-start gap-x-2">
                   {{ template "command" . }}
-            </td>
+                </dd>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              </div>
-              {{ .ClearMember }}
+              <!-- 自动清理不活跃成员 -->
-            </td>
+              <div class="flex justify-between gap-x-4 py-3 items-center">
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                <dt class="text-gray-500">末位淘汰</dt>
-              <button class="btn btn-link" onclick="getGroupUsers({{.Wxid}}, {{.Nickname}})">成员</button>
+                <dd class="flex items-start gap-x-2">
-            </td>
+                  <div class="relative rounded-md shadow-sm">
-          </tr>
+                    <label>
+                      <input type="number" id="auto-cm-{{ .Wxid }}" min="0" class="block w-1/2 float-end rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="N天不活跃自动移除"
+                             value="{{.ClearMember}}"
+                             onblur="changeClearMember({{.Wxid}}, {{.ClearMember}}, this.value)"
+                      >
+                    </label>
+                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                      <span class="text-gray-500 sm:text-sm" id="price-currency">天</span>
+                    </div>
+                  </div>
+                </dd>
+              </div>
+            </dl>
             {{ end }}
-          </tbody>
+        </ul>
-        </table>
       </div>
     </div>
   </main>

views/static/css/index.css

@@ -2,3 +2,13 @@
 ::-webkit-scrollbar {
     display: none;
 }
+
+/* 隐藏input输入数字时的箭头 */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type=number] {
+  -moz-appearance:textfield;
+}

views/static/js/index.js

@@ -236,3 +236,33 @@ function aiAssistantChange(event, wxid) {
     window.location.reload();
   })
 }
+
+// 修改清理群成员值
+function changeClearMember(wxid, oldVal, newVal) {
+  oldVal = Number(oldVal)
+  newVal = Number(newVal)
+
+  if (oldVal === newVal) {
+    return
+  }
+  if (newVal < 0) {
+    alert('不活跃天数的值不能小于0')
+  }
+  // 请求接口
+  axios({
+    method: 'put',
+    url: '/api/clearmembers',
+    data: {
+      wxid: wxid,
+      days: Number(newVal)
+    }
+  }).then(function (response) {
+    console.log(`返回结果: ${JSON.stringify(response)}`);
+    alert(`${response.data}`)
+  }).catch(function (error) {
+    console.log(`错误信息: ${error}`);
+    alert("修改失败")
+  }).finally(function () {
+    window.location.reload();
+  })
+}