feat: add post preview modal

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/contents/posts/PostEditor.vue

@@ -13,6 +13,7 @@ import {
   VTabs,
 } from "@halo-dev/components";
 import PostSettingModal from "./components/PostSettingModal.vue";
+import PostPreviewModal from "./components/PostPreviewModal.vue";
 import type { PostRequest } from "@halo-dev/api-client";
 import { computed, onMounted, ref, watch } from "vue";
 import cloneDeep from "lodash.clonedeep";
@@ -65,6 +66,7 @@ const initialFormState: PostRequest = {
 
 const formState = ref<PostRequest>(cloneDeep(initialFormState));
 const settingModal = ref(false);
+const previewModal = ref(false);
 const saving = ref(false);
 const extraActiveId = ref("toc");
 
@@ -217,12 +219,16 @@ onMounted(async () => {
     :post="formState"
     @saved="onSettingSaved"
   />
+  <PostPreviewModal v-model:visible="previewModal" :post="formState.post" />
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
+        <VButton size="sm" type="default" @click="previewModal = true">
+          预览
+        </VButton>
         <VButton :loading="saving" size="sm" type="default" @click="handleSave">
           保存
         </VButton>

src/modules/contents/posts/components/PostPreviewModal.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { Post } from "@halo-dev/api-client";
+import { VModal, IconLink } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    post?: Post | null;
+  }>(),
+  {
+    visible: false,
+    post: null,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:visible", visible: boolean): void;
+  (event: "close"): void;
+}>();
+
+const onVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+</script>
+<template>
+  <VModal
+    :bodyClass="['!p-0']"
+    :visible="visible"
+    fullscreen
+    title="文章预览"
+    @update:visible="onVisibleChange"
+  >
+    <template #actions>
+      <a
+        class="modal-header-action"
+        href="https://halo.run/archives/halo-154-released.html"
+        target="_blank"
+      >
+        <IconLink />
+      </a>
+    </template>
+    <div class="flex h-full items-center justify-center">
+      <iframe
+        v-if="visible"
+        class="h-full w-full border-none transition-all duration-300"
+        src="https://halo.run/archives/halo-154-released.html"
+      ></iframe>
+    </div>
+  </VModal>
+</template>