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>
|
||||||
<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">
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue