mirror of https://github.com/halo-dev/halo-admin
perf: improve post publishing
parent
b08cae0f5f
commit
f0ce565166
|
@ -445,7 +445,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
|
|||
</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"
|
||||
class="inline-flex flex-col 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"
|
||||
|
@ -506,7 +506,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
|
|||
</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"
|
||||
class="inline-flex flex-col 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"
|
||||
|
@ -673,7 +673,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
|
|||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-col sm:flex-row">
|
||||
<div class="flex flex-col items-center sm:flex-row">
|
||||
<RouterLink
|
||||
:to="{
|
||||
name: 'PostEditor',
|
||||
|
@ -687,16 +687,35 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
|
|||
</span>
|
||||
</RouterLink>
|
||||
<VSpace class="mt-1 sm:mt-0">
|
||||
<RouterLink
|
||||
<FloatingTooltip
|
||||
v-if="post.post.status?.inProgress"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<RouterLink
|
||||
:to="{
|
||||
name: 'PostEditor',
|
||||
query: { name: post.post.metadata.name },
|
||||
}"
|
||||
class="flex items-center"
|
||||
>
|
||||
<div
|
||||
class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-600"
|
||||
>
|
||||
<span
|
||||
class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-orange-600"
|
||||
></span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
<template #popper>
|
||||
当前有内容已保存,但还未发布。
|
||||
</template>
|
||||
</FloatingTooltip>
|
||||
<PostTag
|
||||
v-for="(tag, tagIndex) in post.tags"
|
||||
:key="tagIndex"
|
||||
:to="{
|
||||
name: 'Tags',
|
||||
query: { name: tag.metadata.name },
|
||||
}"
|
||||
>
|
||||
<PostTag :tag="tag"></PostTag>
|
||||
</RouterLink>
|
||||
:tag="tag"
|
||||
route
|
||||
></PostTag>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-1 flex">
|
||||
|
|
|
@ -53,7 +53,7 @@ function onDelete(category: CategoryTree) {
|
|||
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"
|
||||
class="drag-element absolute inset-y-0 left-0 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>
|
||||
|
@ -75,7 +75,7 @@ function onDelete(category: CategoryTree) {
|
|||
</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"
|
||||
class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
|
||||
>
|
||||
<FloatingTooltip
|
||||
v-if="category.metadata.deletionTimestamp"
|
||||
|
|
|
@ -101,6 +101,10 @@ const handleVisibleChange = (visible: boolean) => {
|
|||
const handleSave = async () => {
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
// Set rendered content
|
||||
formState.value.content.content = formState.value.content.raw;
|
||||
|
||||
if (isUpdateMode.value) {
|
||||
const { data } = await apiClient.post.updateDraftPost(
|
||||
formState.value.post.metadata.name,
|
||||
|
@ -293,21 +297,10 @@ watchEffect(() => {
|
|||
|
||||
<template #footer>
|
||||
<VSpace>
|
||||
<VButton
|
||||
v-if="formState.post.status?.phase === 'PUBLISHED'"
|
||||
:loading="publishCanceling"
|
||||
type="danger"
|
||||
@click="handlePublishCanceling"
|
||||
>
|
||||
取消发布
|
||||
</VButton>
|
||||
<VButton
|
||||
v-else
|
||||
:loading="publishing"
|
||||
type="secondary"
|
||||
@click="handlePublish"
|
||||
>
|
||||
发布
|
||||
<VButton :loading="publishing" type="secondary" @click="handlePublish">
|
||||
{{
|
||||
formState.post.status?.phase === "PUBLISHED" ? "重新发布" : "发布"
|
||||
}}
|
||||
</VButton>
|
||||
<VButton
|
||||
:loading="saving"
|
||||
|
@ -317,6 +310,15 @@ watchEffect(() => {
|
|||
>
|
||||
仅保存
|
||||
</VButton>
|
||||
<VButton
|
||||
v-if="formState.post.status?.phase === 'PUBLISHED'"
|
||||
:loading="publishCanceling"
|
||||
type="danger"
|
||||
size="sm"
|
||||
@click="handlePublishCanceling"
|
||||
>
|
||||
取消发布
|
||||
</VButton>
|
||||
<VButton size="sm" type="default" @click="handleVisibleChange(false)">
|
||||
关闭
|
||||
</VButton>
|
||||
|
|
|
@ -192,7 +192,7 @@ onMounted(async () => {
|
|||
</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"
|
||||
class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
|
||||
>
|
||||
<FloatingTooltip
|
||||
v-if="tag.metadata.deletionTimestamp"
|
||||
|
|
|
@ -4,10 +4,17 @@ import type { Tag } from "@halo-dev/api-client";
|
|||
import { computed } from "vue";
|
||||
// @ts-ignore
|
||||
import Color from "colorjs.io";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const props = defineProps<{
|
||||
tag: Tag;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tag: Tag;
|
||||
route: boolean;
|
||||
}>(),
|
||||
{
|
||||
route: false,
|
||||
}
|
||||
);
|
||||
|
||||
const labelColor = computed(() => {
|
||||
const { color } = props.tag.spec;
|
||||
|
@ -18,9 +25,24 @@ const labelColor = computed(() => {
|
|||
const onBlack = Math.abs(Color.contrast(color, "black", "APCA"));
|
||||
return onWhite > onBlack ? "white" : "#333";
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleRouteToDetail = () => {
|
||||
if (!props.route) {
|
||||
return;
|
||||
}
|
||||
router.push({
|
||||
name: "Tags",
|
||||
query: { name: props.tag.metadata.name },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VTag :styles="{ background: tag.spec.color, color: labelColor }">
|
||||
<VTag
|
||||
:styles="{ background: tag.spec.color, color: labelColor }"
|
||||
@click="handleRouteToDetail"
|
||||
>
|
||||
{{ tag.spec.displayName }}
|
||||
</VTag>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue