🆕 添加群成员显示(WIP)

views/components.html

@@ -136,3 +136,43 @@
   </span>
 </button>
 {{end}}
+
+
+<!-- 水群排行榜 -->
+{{define "groupRank"}}
+<button type="button"
+        class="{{ if eq .EnableWelcome true }}bg-green-600{{ else }}bg-gray-200{{ end }} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2"
+        role="switch" aria-checked="false" onclick="changeUserGroupRankSkipStatus({{.Wxid}})">
+  <span
+    class="{{ if eq .EnableWelcome true }}translate-x-5{{ else }}translate-x-0{{ end }} pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
+    <span
+      class="{{ if eq .EnableWelcome true }}opacity-0 duration-100 ease-out{{ else }}opacity-100 duration-200 ease-in{{ end }} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+      aria-hidden="true">
+      <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+        <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round"/>
+      </svg>
+    </span>
+    <span
+      class="{{ if eq .EnableWelcome true }}opacity-100 duration-200 ease-in{{ else }}opacity-0 duration-100 ease-out{{ end }} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+      aria-hidden="true">
+      <svg class="h-3 w-3 text-green-600" fill="currentColor" viewBox="0 0 12 12">
+        <path
+          d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"/>
+      </svg>
+    </span>
+  </span>
+</button>
+{{end}}
+
+
+<!-- 是否tag -->
+{{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>
+{{ 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>
+{{ end }}
+{{end}}

views/friend.html

@@ -28,11 +28,7 @@
               <img src="assets/img/status-{{ if eq .IsOk true }}ok{{else}}fail{{end}}.png" alt="Tuple" class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
               <div class="flex-1">
                 <div class="text-sm font-medium leading-6 text-gray-900">{{ .Nickname }}</div>
-                {{ if eq .IsOk true }}
+                {{ template "flagTag" .IsOk }}
-                <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>
-                {{ end }}
               </div>
             </div>
             <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">

views/group.html

@@ -47,6 +47,9 @@
             <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">
@@ -64,13 +67,7 @@
               {{ end }}
             </td>
             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ if eq .IsOk true }}
+              {{ template "flagTag" .IsOk }}
-              <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>
-              {{ end }}
             </td>
             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
               {{ template "ai" . }}
@@ -104,6 +101,9 @@
             <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
               {{ template "command" . }}
             </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+              <button class="btn btn-link" onclick="getGroupUsers({{.Wxid}}, {{.Nickname}})">成员</button>
+            </td>
           </tr>
           {{ end }}
           </tbody>
@@ -113,6 +113,8 @@
   </main>
 
   {{ template "footer.html" }}
+
+  {{ template "groupuser.html" }}
 </div>
 
 </body>

views/groupuser.html

@@ -0,0 +1,21 @@
+<dialog id="groupUserModal" class="modal">
+  <div class="modal-box w-11/12 max-w-7xl">
+    <h3 class="font-bold text-lg" id="groupUserModalName">我是群名称</h3>
+    <div class="divider divider-warning">成员列表</div>
+    <table class="table table-zebra">
+      <thead>
+      <tr>
+        <th>微信Id</th>
+        <th>昵称</th>
+        <th>是否群成员</th>
+        <th>是否群主</th>
+        <th>加群时间</th>
+        <th>最后活跃时间</th>
+        <th>退群时间</th>
+        <th>是否跳过水群排行榜</th>
+      </tr>
+      </thead>
+      <tbody id="groupUsers"></tbody>
+    </table>
+  </div>
+</dialog>

views/static/js/index.js

@@ -155,12 +155,13 @@ function getGroupUsers(groupId, groupName) {
             // Insert data into cells
             row.insertCell(0).innerHTML = wxid;
             row.insertCell(1).innerHTML = nickname;
-            row.insertCell(2).innerHTML = `<div class="badge badge-${isMember ? 'info' : 'error'} gap-2">${isMember ? '是' : '否'}</div>`;
+            row.insertCell(2).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isMember ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isMember ? '是' : '否'}</span>`;
-            row.insertCell(3).innerHTML = `<div class="badge badge-${isAdmin ? 'info' : 'error'} gap-2">${isAdmin ? '是' : '否'}</div>`;
+            row.insertCell(3).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isAdmin ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isAdmin ? '是' : '否'}</span>`;
             row.insertCell(4).innerHTML = joinTime;
             row.insertCell(5).innerHTML = lastActive;
             row.insertCell(6).innerHTML = leaveTime;
-            row.insertCell(7).innerHTML = `<input type="checkbox" class="toggle toggle-error" ${skipChatRank ? 'checked' : ''} onclick="changeUserGroupRankSkipStatus('${groupId}', '${wxid}')" />`;
+            // row.insertCell(7).innerHTML = `<input type="checkbox" class="toggle toggle-error" ${skipChatRank ? 'checked' : ''} onclick="changeUserGroupRankSkipStatus('${groupId}', '${wxid}')" />`;
+            row.insertCell(7).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${skipChatRank ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${skipChatRank ? '是' : '否'}</span>`;
         });
     }).catch(function (error) {
         console.log(`错误信息: ${error}`);