diff --git a/views/friend.html b/views/friend.html
index 979b7f91..ee745061 100644
--- a/views/friend.html
+++ b/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>
diff --git a/views/static/img/status-fail.png b/views/static/img/status-fail.png
new file mode 100644
index 00000000..1576c010
Binary files /dev/null and b/views/static/img/status-fail.png differ
diff --git a/views/static/img/status-ok.png b/views/static/img/status-ok.png
new file mode 100644
index 00000000..5806d9af
Binary files /dev/null and b/views/static/img/status-ok.png differ