github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add attachment list component 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-11 17:20:10 +08:00
parent a18f6f9d28
commit 1ba9502dce
11 changed files with 376 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

10
pnpm-lock.yaml
View File

@ -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'}

1
src/components/base/card/Card.vue
View File

@ -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;

20
src/components/base/header/PageHeader.vue Normal file
View File

@ -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>

1
src/components/base/header/index.ts Normal file
View File

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

9
src/router/routes.config.ts
View File

@ -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",

45
src/views/attachments/Attachments.vue Normal file
View File

@ -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>

18
src/views/interface/Themes.vue Normal file
View File

@ -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>

265
src/views/posts/PageList.vue Normal file
View File

@ -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>

18
src/views/posts/PostList.vue
View File

@ -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">
<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" />
<span>文章</span>
</h2>
</div>
<div class="self-center">
<VPageHeader title="文章">
<template #icon>
<IconBookRead class="self-center mr-2" />
</template>
<template #actions>
<VButton type="secondary">发布</VButton>
</div>
</div>
</template>
</VPageHeader>
<div class="m-0 md:m-4">
<VCard :body-class="['!p-0']">

1
tailwind.config.js
View File

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