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

refactor: post list component 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/3445/head
Ryan Wang 2022-05-11 15:46:23 +08:00
parent f24bd9c503
commit 8b483b5f00
4 changed files with 219 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.husky/pre-commit
View File

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

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

@ -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 class="card-header-title">
{{ title }}
</div>
<div class="card-header-actions">
<slot name="actions" />
</div>
<div v-if="title || $slots.header" class="card-header">
<slot name="header">
<div class="card-header-title">
{{ title }}
</div>
<div class="card-header-actions">
<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">

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

@ -1,10 +1,13 @@
<script lang="ts" setup>
import FilledLayout from "@/layouts/FilledLayout.vue";
import { VButton } from "@/components/base/button";
import { VTag } from "@/components/base/tag";
import { IconBookRead } from "@/core/icons";
import { posts } from "./posts-mock";
import { ref } from "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 {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="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full py-2 align-middle">
<div
class="relative overflow-hidden shadow-sm"
style="border-radius: 4px"
>
<div
v-show="checkAll"
class="absolute top-0 left-12 flex h-12 items-center space-x-3 bg-gray-50 sm:left-16"
>
<VButton size="sm" type="danger"> 删除 </VButton>
<VButton size="sm" type="default"> 更多 </VButton>
</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 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>
</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>

2
src/views/posts/posts-mock.ts
View File

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