mirror of https://github.com/halo-dev/halo
feat: refine tag management page ui
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/3445/head
Ryan Wang
parent
4833ac2025
commit
b617417f4d
|
|
@ -1 +1,142 @@
|
||||||
<template>Tags</template>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import {
|
||||||
|
IconAddCircle,
|
||||||
|
IconBookRead,
|
||||||
|
IconGrid,
|
||||||
|
IconList,
|
||||||
|
IconSettings,
|
||||||
|
VButton,
|
||||||
|
VCard,
|
||||||
|
VPageHeader,
|
||||||
|
VSpace,
|
||||||
|
VTag,
|
||||||
|
} from "@halo-dev/components";
|
||||||
|
import TagEditingModal from "./components/TagEditingModal.vue";
|
||||||
|
|
||||||
|
const editingModal = ref(false);
|
||||||
|
const viewTypes = [
|
||||||
|
{
|
||||||
|
name: "list",
|
||||||
|
icon: IconList,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "grid",
|
||||||
|
icon: IconGrid,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const viewType = ref("list");
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<TagEditingModal v-model:visible="editingModal" />
|
||||||
|
<VPageHeader title="文章标签">
|
||||||
|
<template #icon>
|
||||||
|
<IconBookRead class="mr-2 self-center" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<VSpace>
|
||||||
|
<VButton type="secondary" @click="editingModal = true">
|
||||||
|
<template #icon>
|
||||||
|
<IconAddCircle class="h-full w-full" />
|
||||||
|
</template>
|
||||||
|
新建
|
||||||
|
</VButton>
|
||||||
|
</VSpace>
|
||||||
|
</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="flex flex-row gap-2">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in viewTypes"
|
||||||
|
:key="index"
|
||||||
|
:class="{
|
||||||
|
'bg-gray-200 font-bold text-black': viewType === item.name,
|
||||||
|
}"
|
||||||
|
class="cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||||
|
@click="viewType = item.name"
|
||||||
|
>
|
||||||
|
<component :is="item.icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<ul
|
||||||
|
v-if="viewType === 'list'"
|
||||||
|
class="box-border h-full w-full divide-y divide-gray-100"
|
||||||
|
role="list"
|
||||||
|
>
|
||||||
|
<li v-for="i in 10" :key="i">
|
||||||
|
<div
|
||||||
|
class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<div class="relative flex flex-row items-center">
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex flex-col sm:flex-row">
|
||||||
|
<VTag>主题</VTag>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 flex">
|
||||||
|
<span class="text-xs text-gray-500">
|
||||||
|
https://halo.run/tags/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"
|
||||||
|
@click="editingModal = true"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</VButton>
|
||||||
|
<VButton v-close-popper block type="danger">
|
||||||
|
删除
|
||||||
|
</VButton>
|
||||||
|
</VSpace>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FloatingDropdown>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div v-else class="flex flex-wrap gap-3 p-4" role="list">
|
||||||
|
<VTag v-for="i in 100" :key="i">主题(10)</VTag>
|
||||||
|
</div>
|
||||||
|
</VCard>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<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,
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
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="tag-form" type="form">
|
||||||
|
<FormKit label="名称" type="text" validation="required"></FormKit>
|
||||||
|
<FormKit
|
||||||
|
help="通常作为标签访问地址标识"
|
||||||
|
label="别名"
|
||||||
|
type="text"
|
||||||
|
validation="required"
|
||||||
|
></FormKit>
|
||||||
|
<FormKit help="需要主题适配以支持" label="颜色" type="color"></FormKit>
|
||||||
|
<FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
|
||||||
|
</FormKit>
|
||||||
|
<template #footer>
|
||||||
|
<VSpace>
|
||||||
|
<VButton type="secondary" @click="$formkit.submit('tag-form')">
|
||||||
|
提交 ⌘ + ↵
|
||||||
|
</VButton>
|
||||||
|
<VButton @click="onVisibleChange(false)">取消 Esc</VButton>
|
||||||
|
</VSpace>
|
||||||
|
</template>
|
||||||
|
</VModal>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue