🎨 好友列表页显示效果优化

views/friend.html

@@ -21,87 +21,79 @@
   <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">
-          <thead class="bg-gray-50">
-          <tr>
-            <th scope="col"
-                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-              微信Id
-            </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">
-              是否启用AI
-            </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">
+        <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
           {{ range .friends }}
-          <tr class="even:bg-gray-50">
-            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-              {{ .Wxid }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{
-              .CustomAccount }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{
-              .Nickname }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ if eq .LastActive.IsNil true }}
-              无数据
-              {{ else }}
-              {{ .LastActive }}
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ if eq .IsOk 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 }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ template "ai" . }}
-              <!-- 使用的模型 -->
-              {{ if eq .EnableAi true }}
-              <select id="location" name="location"
-                      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"
-                      onchange="aiModelChange(event, {{.Wxid}})">
-                <option value="" {{ if eq .AiModel
-                "" }}selected{{ end }}>默认(gpt-3.5-turbo-0613)
-                </option>
-
-                {{$useModel := .AiModel}}
-                {{ range $.aiModels }}
-                <option value="{{.Model}}" {{ if eq $useModel .Model}}selected{{ end }}>
-                  {{.Name}}({{.Model}})
-                </option>
+          <li class="overflow-hidden rounded-xl border border-gray-200">
+            <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
+              <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 }}
+                <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 }}
-              </select>
+              </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">
+                <dt class="text-gray-500">原始微信Id<br/>微信号</dt>
+                <dd>
+                  <div class="text-gray-700">{{ .Wxid }}</div>
+                  {{ if not (eq .CustomAccount "") }}
+                  <div class="truncate text-gray-500">{{ .CustomAccount }}</div>
+                  {{end}}
+                </dd>
+              </div>
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">最后活跃时间</dt>
+                <dd class="flex items-start gap-x-2">
+                  <div class="font-medium text-gray-900">
+                    {{ if eq .LastActive.IsNil true }}
+                    无数据
+                    {{ else }}
+                    <time datetime="{{ .LastActive }}">{{ .LastActive }}</time>
+                    {{ end }}
+                  </div>
+                </dd>
+              </div>
+
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">AI</dt>
+                <dd class="flex items-start gap-x-2">
+                  {{ template "ai" . }}
+                </dd>
+              </div>
+              {{ if eq .EnableAi true }}
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500 mt-2">AI模型</dt>
+                <dd class="flex items-start gap-x-2">
+                  <label>
+                    <select 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" onchange="aiModelChange(event, {{.Wxid}})">
+                      {{$useModel := .AiModel}}
+                      {{ range $.aiModels }}
+                      <option value="{{.Model}}" {{ if eq $useModel .Model}}selected{{ end }}>
+                        {{.Name}}
+                      </option>
+                      {{ end }}
+                    </select>
+                  </label>
+                </dd>
+              </div>
               {{ end }}
-            </td>
-            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-              {{ template "command" . }}
-            </td>
-          </tr>
+
+              <div class="flex justify-between gap-x-4 py-3">
+                <dt class="text-gray-500">指令</dt>
+                <dd class="flex items-start gap-x-2">
+                  {{ template "command" . }}
+                </dd>
+              </div>
+
+            </dl>
+          </li>
           {{ end }}
-          </tbody>
-        </table>
+        </ul>
+
       </div>
     </div>
   </main>