feat: add attachment list component

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

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@iconify-json/ri": "^1.1.1",
     "@rushstack/eslint-patch": "^1.1.3",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^17.0.31",
     "@vitejs/plugin-vue": "^2.3.2",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@iconify-json/ri': ^1.1.1
   '@rushstack/eslint-patch': ^1.1.3
+  '@tailwindcss/aspect-ratio': ^0.4.0
   '@types/jsdom': ^16.2.14
   '@types/node': ^17.0.31
   '@vitejs/plugin-vue': ^2.3.2
@@ -51,6 +52,7 @@ dependencies:
 devDependencies:
   '@iconify-json/ri': 1.1.1
   '@rushstack/eslint-patch': 1.1.3
+  '@tailwindcss/aspect-ratio': 0.4.0_tailwindcss@3.0.24
   '@types/jsdom': 16.2.14
   '@types/node': 17.0.31
   '@vitejs/plugin-vue': 2.3.2_vite@2.9.8+vue@3.2.33
@@ -643,6 +645,14 @@ packages:
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
     dev: true
 
+  /@tailwindcss/aspect-ratio/0.4.0_tailwindcss@3.0.24:
+    resolution: {integrity: sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==}
+    peerDependencies:
+      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+    dependencies:
+      tailwindcss: 3.0.24
+    dev: true
+
   /@tootallnate/once/2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}

src/components/base/card/Card.vue

@@ -36,6 +36,7 @@ defineProps({
   @apply flex flex-col box-border;
   @apply bg-white;
   @apply shadow-sm;
+  @apply overflow-hidden;
   border-radius: 4px;
   border: 1px solid #eaecf0;
 

src/components/base/header/PageHeader.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+  },
+});
+</script>
+<template>
+  <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">
+        <slot name="icon" />
+        <span>{{ title }}</span>
+      </h2>
+    </div>
+    <div class="self-center">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

src/components/base/header/index.ts

@@ -0,0 +1 @@
+export { default as VPageHeader } from "./PageHeader.vue";

src/router/routes.config.ts

@@ -2,7 +2,10 @@ import type { RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
 import PostList from "../views/posts/PostList.vue";
+import PageList from "../views/posts/PageList.vue";
 import Profile from "../views/users/Profile.vue";
+import Themes from "../views/interface/Themes.vue";
+import Attachments from "../views/attachments/Attachments.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -35,7 +38,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: "/sheets",
     name: "Sheets",
-    component: AboutView,
+    component: PageList,
   },
   {
     path: "/comment",
@@ -45,12 +48,12 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: "/attachment",
     name: "Attachment",
-    component: AboutView,
+    component: Attachments,
   },
   {
     path: "/themes",
     name: "Themes",
-    component: AboutView,
+    component: Themes,
   },
   {
     path: "/menus",

src/views/attachments/Attachments.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
+import { VPageHeader } from "@/components/base/header";
+import { VButton } from "@/components/base/button";
+import { IconPalette } from "@/core/icons";
+import { VCard } from "@/components/base/card";
+</script>
+<template>
+  <FilledLayout>
+    <VPageHeader title="附件库">
+      <template #icon>
+        <IconPalette class="self-center mr-2" />
+      </template>
+      <template #actions>
+        <VButton type="secondary">上传</VButton>
+      </template>
+    </VPageHeader>
+
+    <div class="m-4">
+      <ul
+        class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
+        role="list"
+      >
+        <li v-for="i in 40" :key="i" class="relative">
+          <VCard :body-class="['!p-0']">
+            <div
+              class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
+            >
+              <img
+                :src="`https://picsum.photos/1000/700?random=${i}`"
+                alt=""
+                class="object-cover pointer-events-none group-hover:opacity-75"
+              />
+            </div>
+            <p
+              class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
+            >
+              {{ i * 100 }}
+            </p>
+          </VCard>
+        </li>
+      </ul>
+    </div>
+  </FilledLayout>
+</template>

src/views/interface/Themes.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { FilledLayout } from "@/layouts";
+import { VPageHeader } from "@/components/base/header";
+import { VButton } from "@/components/base/button";
+import { IconPalette } from "@/core/icons";
+</script>
+<template>
+  <FilledLayout>
+    <VPageHeader title="主题">
+      <template #icon>
+        <IconPalette class="self-center mr-2" />
+      </template>
+      <template #actions>
+        <VButton type="secondary">安装</VButton>
+      </template>
+    </VPageHeader>
+  </FilledLayout>
+</template>

src/views/posts/PageList.vue

@@ -0,0 +1,265 @@
+<script lang="ts" setup>
+import FilledLayout from "@/layouts/FilledLayout.vue";
+import { VButton } from "@/components/base/button";
+import { VCard } from "@/components/base/card";
+import { VSpace } from "@/components/base/space";
+import { VTag } from "@/components/base/tag";
+import { VInput } from "@/components/base/input";
+import { VPageHeader } from "@/components/base/header";
+import { IconPages, IconSettings } from "@/core/icons";
+import { posts } from "./posts-mock";
+import { ref } from "vue";
+
+const postsRef = ref(
+  posts.map((item) => {
+    return {
+      ...item,
+      checked: false,
+    };
+  })
+);
+
+const checkAll = ref(false);
+
+const handleCheckAll = () => {
+  postsRef.value.forEach((item) => {
+    item.checked = checkAll.value;
+  });
+};
+handleCheckAll();
+</script>
+<template>
+  <FilledLayout>
+    <VPageHeader title="页面">
+      <template #icon>
+        <IconPages class="self-center mr-2" />
+      </template>
+      <template #actions>
+        <VButton type="secondary">发布</VButton>
+      </template>
+    </VPageHeader>
+
+    <div class="m-0 md:m-4">
+      <VCard :body-class="['!p-0']">
+        <template #header>
+          <div
+            class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
+          >
+            <div class="flex-1">
+              <VInput placeholder="输入关键词搜索" />
+            </div>
+            <div class="flex flex-row gap-3">
+              <div>分类</div>
+              <div>标签</div>
+              <div>作者</div>
+              <div>排序</div>
+            </div>
+          </div>
+        </template>
+        <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>
+
+<style lang="scss">
+.table-container {
+  @apply table;
+  @apply w-full;
+  border: 1px solid #fff;
+  background: #fff;
+
+  border-radius: 4px;
+
+  .table-item {
+    @apply table-row;
+    @apply cursor-pointer;
+    @apply transition-all;
+
+    &:hover {
+      @apply bg-gray-100;
+    }
+  }
+
+  .table-cell {
+    display: table-cell;
+    padding: 10px;
+  }
+}
+</style>

src/views/posts/PostList.vue

@@ -5,6 +5,7 @@ import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { VTag } from "@/components/base/tag";
 import { VInput } from "@/components/base/input";
+import { VPageHeader } from "@/components/base/header";
 import { IconBookRead, IconSettings } from "@/core/icons";
 import { posts } from "./posts-mock";
 import { ref } from "vue";
@@ -29,17 +30,14 @@ handleCheckAll();
 </script>
 <template>
   <FilledLayout>
-    <div class="flex items-center justify-between p-4 bg-white">
+    <VPageHeader title="文章">
-      <div class="flex-1 self-center min-w-0">
+      <template #icon>
-        <h2 class="flex text-xl font-bold text-gray-800 truncate">
+        <IconBookRead class="self-center mr-2" />
-          <IconBookRead class="self-center mr-2" />
+      </template>
-          <span>文章</span>
+      <template #actions>
-        </h2>
-      </div>
-      <div class="self-center">
         <VButton type="secondary">发布</VButton>
-      </div>
+      </template>
-    </div>
+    </VPageHeader>
 
     <div class="m-0 md:m-4">
       <VCard :body-class="['!p-0']">

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
   },
   plugins: [
     require("tailwindcss-safe-area"),
+    require("@tailwindcss/aspect-ratio"),
     themeable({
       defaultTheme: "default",
       themes: [