mirror of https://github.com/halo-dev/halo
110 lines
3.0 KiB
Vue
110 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { singlePageLabels } from "@/constants/labels";
|
|
import SubjectQueryCommentListModal from "@console/modules/contents/comments/components/SubjectQueryCommentListModal.vue";
|
|
import type { ListedSinglePage } from "@halo-dev/api-client";
|
|
import {
|
|
IconExternalLinkLine,
|
|
VEntityField,
|
|
VSpace,
|
|
VStatusDot,
|
|
} from "@halo-dev/components";
|
|
import { computed, ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
singlePage: ListedSinglePage;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const externalUrl = computed(() => {
|
|
const { metadata, status } = props.singlePage.page;
|
|
if (metadata.labels?.[singlePageLabels.PUBLISHED] === "true") {
|
|
return status?.permalink;
|
|
}
|
|
return `/preview/singlepages/${metadata.name}`;
|
|
});
|
|
|
|
const commentSubjectRefKey = `content.halo.run/SinglePage/${props.singlePage.page.metadata.name}`;
|
|
const commentListVisible = ref(false);
|
|
|
|
const commentText = computed(() => {
|
|
const { totalComment, approvedComment } = props.singlePage.stats || {};
|
|
|
|
let text = t("core.page.list.fields.comments", {
|
|
comments: totalComment || 0,
|
|
});
|
|
|
|
const pendingComments = (totalComment || 0) - (approvedComment || 0);
|
|
|
|
if (pendingComments > 0) {
|
|
text += t("core.page.list.fields.comments-with-pending", {
|
|
count: pendingComments,
|
|
});
|
|
}
|
|
return text;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VEntityField
|
|
:title="singlePage.page.spec.title"
|
|
:route="{
|
|
name: 'SinglePageEditor',
|
|
query: { name: singlePage.page.metadata.name },
|
|
}"
|
|
max-width="30rem"
|
|
>
|
|
<template #extra>
|
|
<VSpace>
|
|
<RouterLink
|
|
v-if="singlePage.page.status?.inProgress"
|
|
v-tooltip="$t('core.common.tooltips.unpublished_content_tip')"
|
|
:to="{
|
|
name: 'SinglePageEditor',
|
|
query: { name: singlePage.page.metadata.name },
|
|
}"
|
|
class="flex items-center"
|
|
>
|
|
<VStatusDot state="success" animate />
|
|
</RouterLink>
|
|
<a
|
|
target="_blank"
|
|
:href="externalUrl"
|
|
class="hidden text-gray-600 transition-all hover:text-gray-900 group-hover:inline-block"
|
|
>
|
|
<IconExternalLinkLine class="h-3.5 w-3.5" />
|
|
</a>
|
|
</VSpace>
|
|
</template>
|
|
<template #description>
|
|
<div class="flex w-full flex-col gap-1">
|
|
<VSpace class="w-full">
|
|
<span class="text-xs text-gray-500">
|
|
{{
|
|
$t("core.page.list.fields.visits", {
|
|
visits: singlePage.stats.visit || 0,
|
|
})
|
|
}}
|
|
</span>
|
|
<span
|
|
class="cursor-pointer text-xs text-gray-500 hover:text-gray-900 hover:underline"
|
|
@click="commentListVisible = true"
|
|
>
|
|
{{ commentText }}
|
|
</span>
|
|
</VSpace>
|
|
</div>
|
|
|
|
<SubjectQueryCommentListModal
|
|
v-if="commentListVisible"
|
|
:subject-ref-key="commentSubjectRefKey"
|
|
@close="commentListVisible = false"
|
|
/>
|
|
</template>
|
|
</VEntityField>
|
|
</template>
|