From 1ba9502dce5f1815bfe720aa4490fbfc9a81b08f Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 11 May 2022 17:20:10 +0800 Subject: [PATCH] feat: add attachment list component Signed-off-by: Ryan Wang --- package.json | 1 + pnpm-lock.yaml | 10 + src/components/base/card/Card.vue | 1 + src/components/base/header/PageHeader.vue | 20 ++ src/components/base/header/index.ts | 1 + src/router/routes.config.ts | 9 +- src/views/attachments/Attachments.vue | 45 ++++ src/views/interface/Themes.vue | 18 ++ src/views/posts/PageList.vue | 265 ++++++++++++++++++++++ src/views/posts/PostList.vue | 18 +- tailwind.config.js | 1 + 11 files changed, 376 insertions(+), 13 deletions(-) create mode 100644 src/components/base/header/PageHeader.vue create mode 100644 src/components/base/header/index.ts create mode 100644 src/views/attachments/Attachments.vue create mode 100644 src/views/interface/Themes.vue create mode 100644 src/views/posts/PageList.vue diff --git a/package.json b/package.json index b9bc622e..f8217be7 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d14fa1f..5ab931a4 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/src/components/base/card/Card.vue b/src/components/base/card/Card.vue index cb236de8..ede7cbf8 100644 --- a/src/components/base/card/Card.vue +++ b/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; diff --git a/src/components/base/header/PageHeader.vue b/src/components/base/header/PageHeader.vue new file mode 100644 index 00000000..46c685b6 --- /dev/null +++ b/src/components/base/header/PageHeader.vue @@ -0,0 +1,20 @@ + + diff --git a/src/components/base/header/index.ts b/src/components/base/header/index.ts new file mode 100644 index 00000000..dae02716 --- /dev/null +++ b/src/components/base/header/index.ts @@ -0,0 +1 @@ +export { default as VPageHeader } from "./PageHeader.vue"; diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts index abc79944..f0d5ed3f 100644 --- a/src/router/routes.config.ts +++ b/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 = [ { @@ -35,7 +38,7 @@ export const routes: Array = [ { path: "/sheets", name: "Sheets", - component: AboutView, + component: PageList, }, { path: "/comment", @@ -45,12 +48,12 @@ export const routes: Array = [ { path: "/attachment", name: "Attachment", - component: AboutView, + component: Attachments, }, { path: "/themes", name: "Themes", - component: AboutView, + component: Themes, }, { path: "/menus", diff --git a/src/views/attachments/Attachments.vue b/src/views/attachments/Attachments.vue new file mode 100644 index 00000000..31e76994 --- /dev/null +++ b/src/views/attachments/Attachments.vue @@ -0,0 +1,45 @@ + + diff --git a/src/views/interface/Themes.vue b/src/views/interface/Themes.vue new file mode 100644 index 00000000..8e91923f --- /dev/null +++ b/src/views/interface/Themes.vue @@ -0,0 +1,18 @@ + + diff --git a/src/views/posts/PageList.vue b/src/views/posts/PageList.vue new file mode 100644 index 00000000..a2c7e1c7 --- /dev/null +++ b/src/views/posts/PageList.vue @@ -0,0 +1,265 @@ + + + + diff --git a/src/views/posts/PostList.vue b/src/views/posts/PostList.vue index d9f40646..b6a32e5c 100644 --- a/src/views/posts/PostList.vue +++ b/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();