perf: improve post publishing

pull/605/head
Ryan Wang 2022-09-04 17:17:37 +08:00
parent b08cae0f5f
commit f0ce565166
5 changed files with 76 additions and 33 deletions

View File

@ -445,7 +445,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
</div> </div>
<div class="flex"> <div class="flex">
<div <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 <div
class="cursor-pointer text-sm text-gray-500 hover:text-gray-900" class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
@ -506,7 +506,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
</div> </div>
<div class="flex"> <div class="flex">
<div <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 <div
class="cursor-pointer text-sm text-gray-500 hover:text-gray-900" class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
@ -673,7 +673,7 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-col sm:flex-row"> <div class="flex flex-col items-center sm:flex-row">
<RouterLink <RouterLink
:to="{ :to="{
name: 'PostEditor', name: 'PostEditor',
@ -687,16 +687,35 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
</span> </span>
</RouterLink> </RouterLink>
<VSpace class="mt-1 sm:mt-0"> <VSpace class="mt-1 sm:mt-0">
<FloatingTooltip
v-if="post.post.status?.inProgress"
class="hidden items-center sm:flex"
>
<RouterLink <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" v-for="(tag, tagIndex) in post.tags"
:key="tagIndex" :key="tagIndex"
:to="{ :tag="tag"
name: 'Tags', route
query: { name: tag.metadata.name }, ></PostTag>
}"
>
<PostTag :tag="tag"></PostTag>
</RouterLink>
</VSpace> </VSpace>
</div> </div>
<div class="mt-1 flex"> <div class="mt-1 flex">

View File

@ -53,7 +53,7 @@ function onDelete(category: CategoryTree) {
class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50" class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
> >
<div <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" /> <IconList class="h-3.5 w-3.5" />
</div> </div>
@ -75,7 +75,7 @@ function onDelete(category: CategoryTree) {
</div> </div>
<div class="flex"> <div class="flex">
<div <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 <FloatingTooltip
v-if="category.metadata.deletionTimestamp" v-if="category.metadata.deletionTimestamp"

View File

@ -101,6 +101,10 @@ const handleVisibleChange = (visible: boolean) => {
const handleSave = async () => { const handleSave = async () => {
try { try {
saving.value = true; saving.value = true;
// Set rendered content
formState.value.content.content = formState.value.content.raw;
if (isUpdateMode.value) { if (isUpdateMode.value) {
const { data } = await apiClient.post.updateDraftPost( const { data } = await apiClient.post.updateDraftPost(
formState.value.post.metadata.name, formState.value.post.metadata.name,
@ -293,21 +297,10 @@ watchEffect(() => {
<template #footer> <template #footer>
<VSpace> <VSpace>
<VButton <VButton :loading="publishing" type="secondary" @click="handlePublish">
v-if="formState.post.status?.phase === 'PUBLISHED'" {{
:loading="publishCanceling" formState.post.status?.phase === "PUBLISHED" ? "重新发布" : "发布"
type="danger" }}
@click="handlePublishCanceling"
>
取消发布
</VButton>
<VButton
v-else
:loading="publishing"
type="secondary"
@click="handlePublish"
>
发布
</VButton> </VButton>
<VButton <VButton
:loading="saving" :loading="saving"
@ -317,6 +310,15 @@ watchEffect(() => {
> >
仅保存 仅保存
</VButton> </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 size="sm" type="default" @click="handleVisibleChange(false)">
关闭 关闭
</VButton> </VButton>

View File

@ -192,7 +192,7 @@ onMounted(async () => {
</div> </div>
<div class="flex"> <div class="flex">
<div <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 <FloatingTooltip
v-if="tag.metadata.deletionTimestamp" v-if="tag.metadata.deletionTimestamp"

View File

@ -4,10 +4,17 @@ import type { Tag } from "@halo-dev/api-client";
import { computed } from "vue"; import { computed } from "vue";
// @ts-ignore // @ts-ignore
import Color from "colorjs.io"; import Color from "colorjs.io";
import { useRouter } from "vue-router";
const props = defineProps<{ const props = withDefaults(
defineProps<{
tag: Tag; tag: Tag;
}>(); route: boolean;
}>(),
{
route: false,
}
);
const labelColor = computed(() => { const labelColor = computed(() => {
const { color } = props.tag.spec; const { color } = props.tag.spec;
@ -18,9 +25,24 @@ const labelColor = computed(() => {
const onBlack = Math.abs(Color.contrast(color, "black", "APCA")); const onBlack = Math.abs(Color.contrast(color, "black", "APCA"));
return onWhite > onBlack ? "white" : "#333"; 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> </script>
<template> <template>
<VTag :styles="{ background: tag.spec.color, color: labelColor }"> <VTag
:styles="{ background: tag.spec.color, color: labelColor }"
@click="handleRouteToDetail"
>
{{ tag.spec.displayName }} {{ tag.spec.displayName }}
</VTag> </VTag>
</template> </template>