refactor: post list component

Signed-off-by: Ryan Wang <i@ryanc.cc>

.husky/pre-commit

@@ -4,5 +4,3 @@
 pnpm test:unit
 pnpm typecheck
 pnpm lint
-
-git add .

src/components/base/card/Card.vue

@@ -1,22 +1,29 @@
 <script lang="ts" setup>
+import type { PropType } from "vue";
+
 defineProps({
   title: {
     type: String,
   },
+  bodyClass: {
+    type: Object as PropType<string[]>,
+  },
 });
 </script>
 
 <template>
   <div class="card-wrapper">
-    <div v-if="title" class="card-header">
+    <div v-if="title || $slots.header" class="card-header">
-      <div class="card-header-title">
+      <slot name="header">
-        {{ title }}
+        <div class="card-header-title">
-      </div>
+          {{ title }}
-      <div class="card-header-actions">
+        </div>
-        <slot name="actions" />
+        <div class="card-header-actions">
-      </div>
+          <slot name="actions" />
+        </div>
+      </slot>
     </div>
-    <div class="card-body">
+    <div :class="bodyClass" class="card-body">
       <slot />
     </div>
     <div v-if="$slots.footer" class="card-footer">

src/views/posts/PostList.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import FilledLayout from "@/layouts/FilledLayout.vue";
-import { VButton } from "@/components/base/button";
+import {VButton} from "@/components/base/button";
-import { VTag } from "@/components/base/tag";
+import {VCard} from "@/components/base/card";
-import { IconBookRead } from "@/core/icons";
+import {VSpace} from "@/components/base/space";
-import { posts } from "./posts-mock";
+import {VTag} from "@/components/base/tag";
-import { ref } from "vue";
+import {VInput} from "@/components/base/input";
+import {IconBookRead, IconSettings} from "@/core/icons";
+import {posts} from "./posts-mock";
+import {ref} from "vue";
 
 const postsRef = ref(
   posts.map((item) => {
@@ -22,13 +25,14 @@ const handleCheckAll = () => {
     item.checked = checkAll.value;
   });
 };
+handleCheckAll()
 </script>
 <template>
   <FilledLayout>
     <div class="flex items-center justify-between p-4 bg-white">
       <div class="flex-1 self-center min-w-0">
         <h2 class="flex text-xl font-bold text-gray-800 truncate">
-          <IconBookRead class="self-center mr-2" />
+          <IconBookRead class="self-center mr-2"/>
           <span>文章</span>
         </h2>
       </div>
@@ -37,127 +41,201 @@ const handleCheckAll = () => {
       </div>
     </div>
 
-    <div class="m-4">
+    <div class="m-0 md:m-4">
-      <div class="flex flex-col">
+      <VCard :body-class="['!p-0']">
-        <div class="overflow-x-auto">
+        <template #header>
-          <div class="inline-block min-w-full py-2 align-middle">
+          <div
-            <div
+            class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
-              class="relative overflow-hidden shadow-sm"
+          >
-              style="border-radius: 4px"
+            <div class="flex-1">
-            >
+              <VInput placeholder="输入关键词搜索"/>
-              <div
+            </div>
-                v-show="checkAll"
+            <div class="flex flex-row gap-3">
-                class="absolute top-0 left-12 flex h-12 items-center space-x-3 bg-gray-50 sm:left-16"
+              <div>分类</div>
-              >
+              <div>标签</div>
-                <VButton size="sm" type="danger"> 删除 </VButton>
+              <div>作者</div>
-                <VButton size="sm" type="default"> 更多 </VButton>
+              <div>排序</div>
-              </div>
-
-              <table class="min-w-full table-fixed divide-y divide-gray-300">
-                <thead class="bg-gray-50">
-                  <tr>
-                    <th class="relative w-12 px-6 sm:w-16 sm:px-8" scope="col">
-                      <input
-                        v-model="checkAll"
-                        class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-themeable-primary-600 focus:ring-themeable-primary-500 sm:left-6"
-                        type="checkbox"
-                        @change="handleCheckAll"
-                      />
-                    </th>
-                    <th
-                      class="min-w-[12rem] py-3.5 pr-3 text-left text-sm font-semibold text-gray-900"
-                      scope="col"
-                    >
-                      标题
-                    </th>
-                    <th
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      scope="col"
-                    >
-                      分类
-                    </th>
-                    <th
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      scope="col"
-                    >
-                      标签
-                    </th>
-                    <th
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      scope="col"
-                    >
-                      作者
-                    </th>
-                    <th
-                      class="relative py-3.5 pl-3 pr-4 sm:pr-6 text-right"
-                      scope="col"
-                    >
-                      操作
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-200 bg-white">
-                  <tr
-                    v-for="(post, index) in postsRef"
-                    :key="index"
-                    class="cursor-pointer hover:bg-gray-100"
-                  >
-                    <td class="relative w-12 px-6 sm:w-16 sm:px-8">
-                      <div
-                        v-if="post.checked"
-                        class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
-                      ></div>
-
-                      <input
-                        v-model="post.checked"
-                        class="absolute cursor-pointer left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-themeable-primary-600 focus:ring-themeable-primary-500 sm:left-6"
-                        type="checkbox"
-                      />
-                    </td>
-                    <td
-                      class="whitespace-nowrap py-4 pr-3 text-sm font-medium text-gray-900"
-                    >
-                      <span class="mr-1 self-center">{{ post.title }}</span>
-                      <VTag v-if="index === 0" class="self-center">草稿</VTag>
-
-                      <dl class="font-normal lg:hidden">
-                        <dt class="sr-only">Title</dt>
-                        <dd class="mt-1 truncate text-gray-700">
-                          Front-end Developer
-                        </dd>
-                        <dt class="sr-only sm:hidden">Email</dt>
-                        <dd class="mt-1 truncate text-gray-500 sm:hidden">
-                          lindsay.walton@example.com
-                        </dd>
-                      </dl>
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                    >
-                      分类
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                    >
-                      标签
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                    >
-                      作者
-                    </td>
-                    <td
-                      class="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
-                    >
-                      操作
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
           </div>
-        </div>
+        </template>
-      </div>
+        <ul
+          class="divide-y divide-gray-100 box-border w-full h-full"
+          role="list"
+        >
+          <li v-for="(post, index) in postsRef" :key="index">
+            <div
+              class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
+            >
+              <div class="flex flex-row items-center relative">
+                <div class="flex-1">
+                  <div class="flex flex-col sm:flex-row">
+                    <span
+                      class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                    >
+                      {{ post.title }}
+                    </span>
+                    <VSpace class="mt-1 sm:mt-0">
+                      <VTag
+                        v-for="(tag, tagIndex) in post.tags"
+                        :key="tagIndex"
+                      >
+                        {{ tag.name }}
+                      </VTag>
+                    </VSpace>
+                  </div>
+                  <div class="flex mt-1">
+                    <VSpace>
+                      <span class="text-xs text-gray-500"
+                      >阅读 {{ post.visits }}</span
+                      >
+                      <span class="text-xs text-gray-500"
+                      >评论 {{ post.commentCount }}</span
+                      >
+                    </VSpace>
+                  </div>
+                </div>
+                <div class="flex">
+                  <div
+                    class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                  >
+                    <img
+                      class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                      src="https://ryanc.cc/avatar"
+                    />
+                    <time class="text-sm text-gray-500" datetime="2020-01-07">
+                      2020-01-07
+                    </time>
+                    <span>
+                      <IconSettings/>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+
+        <template #footer>
+          <div class="bg-white flex items-center justify-between">
+            <div class="flex-1 flex justify-between sm:hidden">
+              <a
+                class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                href="#"
+              >
+                Previous
+              </a>
+              <a
+                class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                href="#"
+              >
+                Next
+              </a>
+            </div>
+            <div
+              class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
+            >
+              <div>
+                <p class="text-sm text-gray-700">
+                  Showing
+                  <span class="font-medium">1</span>
+                  to
+                  <span class="font-medium">10</span>
+                  of
+                  <span class="font-medium">97</span>
+                  results
+                </p>
+              </div>
+              <div>
+                <nav
+                  aria-label="Pagination"
+                  class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                >
+                  <a
+                    class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                    href="#"
+                  >
+                    <span class="sr-only">Previous</span>
+                    <svg
+                      aria-hidden="true"
+                      class="h-5 w-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    aria-current="page"
+                    class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    1
+                  </a>
+                  <a
+                    class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    2
+                  </a>
+                  <a
+                    class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    3
+                  </a>
+                  <span
+                    class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                  >
+                    ...
+                  </span>
+                  <a
+                    class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    8
+                  </a>
+                  <a
+                    class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    9
+                  </a>
+                  <a
+                    class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                    href="#"
+                  >
+                    10
+                  </a>
+                  <a
+                    class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                    href="#"
+                  >
+                    <span class="sr-only">Next</span>
+                    <svg
+                      aria-hidden="true"
+                      class="h-5 w-5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </a>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </template>
+      </VCard>
     </div>
   </FilledLayout>
 </template>

src/views/posts/posts-mock.ts

@@ -1,7 +1,7 @@
 export const posts = [
   {
     id: 514,
-    title: "Halo 1.5.3 发布",
+    title: "Halo 1.5.3 发布了",
     status: "PUBLISHED",
     slug: "halo-153-released",
     editorType: "MARKDOWN",