mirror of https://github.com/halo-dev/halo-admin
feat: refine category management page ui
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/599/head
Ryan Wang
parent
ec4c87be32
commit
4d251aa7df
|
|
@ -3,7 +3,6 @@ import {
|
|||
IconAddCircle,
|
||||
IconArrowDown,
|
||||
IconBookRead,
|
||||
IconDeleteBin,
|
||||
IconSettings,
|
||||
VButton,
|
||||
VCard,
|
||||
|
|
@ -107,12 +106,7 @@ onMounted(() => {
|
|||
</template>
|
||||
<template #actions>
|
||||
<VSpace>
|
||||
<VButton size="sm">
|
||||
<template #icon>
|
||||
<IconDeleteBin class="h-full w-full" />
|
||||
</template>
|
||||
回收站
|
||||
</VButton>
|
||||
<VButton :route="{ name: 'Categories' }" size="sm">分类</VButton>
|
||||
<VButton :route="{ name: 'PostEditor' }" type="secondary">
|
||||
<template #icon>
|
||||
<IconAddCircle class="h-full w-full" />
|
||||
|
|
|
|||
|
|
@ -1 +1,109 @@
|
|||
<template>Categories</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
IconBookRead,
|
||||
IconList,
|
||||
IconSettings,
|
||||
VButton,
|
||||
VCard,
|
||||
VPageHeader,
|
||||
VSpace,
|
||||
} from "@halo-dev/components";
|
||||
import CategoryEditingModal from "./components/CategoryEditingModal.vue";
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
const editingModal = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<CategoryEditingModal v-model:visible="editingModal" />
|
||||
<VPageHeader title="文章分类">
|
||||
<template #icon>
|
||||
<IconBookRead class="mr-2 self-center" />
|
||||
</template>
|
||||
</VPageHeader>
|
||||
<div class="m-0 md:m-4">
|
||||
<VCard :body-class="['!p-0']">
|
||||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
>
|
||||
<div class="flex w-full flex-1 sm:w-auto">
|
||||
<span class="text-base font-medium"> {{ 10 }} 个分类 </span>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace>
|
||||
<VButton size="xs" type="default" @click="editingModal = true">
|
||||
新增
|
||||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
|
||||
<li v-for="i in 10" :key="i">
|
||||
<div
|
||||
class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
|
||||
>
|
||||
<div
|
||||
class="drag-element absolute inset-y-0 left-0 flex hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
|
||||
>
|
||||
<IconList class="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div class="relative flex flex-row items-center">
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<span
|
||||
class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
|
||||
>
|
||||
主题
|
||||
</span>
|
||||
<VSpace class="mt-1 sm:mt-0"></VSpace>
|
||||
</div>
|
||||
<div class="mt-1 flex">
|
||||
<span class="text-xs text-gray-500">
|
||||
https://halo.run/categories/themes
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div
|
||||
class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
|
||||
>
|
||||
<div
|
||||
class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
|
||||
>
|
||||
20 篇文章
|
||||
</div>
|
||||
<time class="text-sm text-gray-500" datetime="2020-01-07">
|
||||
2020-01-07
|
||||
</time>
|
||||
<span class="cursor-pointer">
|
||||
<FloatingDropdown>
|
||||
<IconSettings
|
||||
class="cursor-pointer transition-all hover:text-blue-600"
|
||||
/>
|
||||
<template #popper>
|
||||
<div class="w-48 p-2">
|
||||
<VSpace class="w-full" direction="column">
|
||||
<VButton v-close-popper block type="secondary">
|
||||
修改
|
||||
</VButton>
|
||||
<VButton v-close-popper block type="danger">
|
||||
删除
|
||||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
</template>
|
||||
</FloatingDropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<script lang="ts" setup>
|
||||
import { VButton, VModal, VSpace } from "@halo-dev/components";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
category: {
|
||||
type: Object as PropType<unknown | null>,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "close"]);
|
||||
|
||||
const onVisibleChange = (visible: boolean) => {
|
||||
emit("update:visible", visible);
|
||||
if (!visible) {
|
||||
emit("close");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VModal
|
||||
:visible="visible"
|
||||
:width="600"
|
||||
title="编辑文章分类"
|
||||
@update:visible="onVisibleChange"
|
||||
>
|
||||
<FormKit id="category-form" type="form">
|
||||
<FormKit label="名称" type="text" validation="required"></FormKit>
|
||||
<FormKit
|
||||
help="通常作为分类访问地址标识"
|
||||
label="别名"
|
||||
type="text"
|
||||
validation="required"
|
||||
></FormKit>
|
||||
<FormKit label="上级目录" type="select"></FormKit>
|
||||
<FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
|
||||
<FormKit help="需要主题适配以支持" label="描述" type="textarea"></FormKit>
|
||||
</FormKit>
|
||||
<template #footer>
|
||||
<VSpace>
|
||||
<VButton type="secondary" @click="$formkit.submit('category-form')">
|
||||
提交 ⌘ + ↵
|
||||
</VButton>
|
||||
<VButton @click="onVisibleChange(false)">取消 Esc</VButton>
|
||||
</VSpace>
|
||||
</template>
|
||||
</VModal>
|
||||
</template>
|
||||
Loading…
Reference in New Issue