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,
|
IconAddCircle,
|
||||||
IconArrowDown,
|
IconArrowDown,
|
||||||
IconBookRead,
|
IconBookRead,
|
||||||
IconDeleteBin,
|
|
||||||
IconSettings,
|
IconSettings,
|
||||||
VButton,
|
VButton,
|
||||||
VCard,
|
VCard,
|
||||||
|
|
@ -107,12 +106,7 @@ onMounted(() => {
|
||||||
</template>
|
</template>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<VSpace>
|
<VSpace>
|
||||||
<VButton size="sm">
|
<VButton :route="{ name: 'Categories' }" size="sm">分类</VButton>
|
||||||
<template #icon>
|
|
||||||
<IconDeleteBin class="h-full w-full" />
|
|
||||||
</template>
|
|
||||||
回收站
|
|
||||||
</VButton>
|
|
||||||
<VButton :route="{ name: 'PostEditor' }" type="secondary">
|
<VButton :route="{ name: 'PostEditor' }" type="secondary">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<IconAddCircle class="h-full w-full" />
|
<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