From 9eee20371e01608ded6c59bac5c35dc08236bca2 Mon Sep 17 00:00:00 2001
From: Ayideyia <150233177+Ayideyia@users.noreply.github.com>
Date: Wed, 25 Sep 2024 17:01:52 +0800
Subject: [PATCH] feat: Supports Markdown preview

---
 frontend/package.json                        |  1 +
 frontend/pnpm-lock.yaml                      | 10 +++++++
 frontend/src/components/CodeViewer/index.vue |  2 +-
 frontend/src/components/Confirm/index.vue    | 30 +++++++++++++++-----
 frontend/src/hooks/useAlert.ts               |  6 ++--
 frontend/src/hooks/useConfirm.ts             |  6 ++--
 6 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 039ba66..e69f774 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "@codemirror/lang-yaml": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "codemirror": "6.0.1",
+    "marked": "^14.1.2",
     "pinia": "^2.2.2",
     "vue": "^3.5.6",
     "vue-codemirror6": "^1.3.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 910978a..493d83d 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       codemirror:
         specifier: 6.0.1
         version: 6.0.1(@lezer/common@1.2.1)
+      marked:
+        specifier: ^14.1.2
+        version: 14.1.2
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.6.2)(vue@3.5.6(typescript@5.6.2))
@@ -1078,6 +1081,11 @@ packages:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
 
+  marked@14.1.2:
+    resolution: {integrity: sha512-f3r0yqpz31VXiDB/wj9GaOB0a2PRLQl6vJmXiFrniNwjkKdvakqJRULhjFKJpxOchlCRiG5fcacoUZY5Xa6PEQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -2533,6 +2541,8 @@ snapshots:
       semver: 5.7.2
     optional: true
 
+  marked@14.1.2: {}
+
   memorystream@0.3.1: {}
 
   merge2@1.4.1: {}
diff --git a/frontend/src/components/CodeViewer/index.vue b/frontend/src/components/CodeViewer/index.vue
index f365cf9..3047bba 100644
--- a/frontend/src/components/CodeViewer/index.vue
+++ b/frontend/src/components/CodeViewer/index.vue
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 const ready = ref(false)
 const appSettings = useAppSettingsStore()
 
-const lang = { json, javascript, yaml }[props.lang]()
+const lang = { json, javascript, yaml }[props.lang]?.()
 const linter = props.lang === 'json' ? jsonParseLinter() : undefined
 
 const completion = computed(() =>
diff --git a/frontend/src/components/Confirm/index.vue b/frontend/src/components/Confirm/index.vue
index 1546036..e693715 100644
--- a/frontend/src/components/Confirm/index.vue
+++ b/frontend/src/components/Confirm/index.vue
@@ -1,13 +1,24 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { marked } from 'marked'
+
 import useI18n from '@/lang'
 
+export type Options = {
+  type: 'text' | 'markdown'
+}
+
 interface Props {
   title: string
   message: string | Record<string, any>
+  options?: Options
   cancel?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), { cancel: true })
+const props = withDefaults(defineProps<Props>(), {
+  cancel: true,
+  options: () => ({ type: 'text' })
+})
 
 const emits = defineEmits(['confirm', 'cancel', 'finish'])
 
@@ -23,19 +34,22 @@ const handleCancel = () => {
   emits('finish')
 }
 
-const getMessage = () => {
-  if (typeof props.message === 'string') {
+const message = computed(() => {
+  if (typeof props.message !== 'string') {
+    return props.message
+  }
+  if (props.options.type === 'text') {
     return t(props.message)
   }
-  return props.message
-}
+  return marked.use().parse(props.message)
+})
 </script>
 
 <template>
   <Transition name="slide-down" appear>
     <div class="confirm">
       <div class="title">{{ t(title) }}</div>
-      <div class="message select-text">{{ getMessage() }}</div>
+      <div class="message select-text" v-html="message"></div>
       <div class="form-action">
         <Button v-if="cancel" @click="handleCancel" size="small">{{ t('common.cancel') }}</Button>
         <Button @click="handleConfirm" size="small" type="primary">
@@ -54,6 +68,8 @@ const getMessage = () => {
   background: var(--toast-bg);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
 
   .title {
     font-weight: bold;
@@ -66,8 +82,8 @@ const getMessage = () => {
     padding: 6px;
     word-break: break-all;
     white-space: pre-wrap;
-    max-height: 300px;
     overflow-y: auto;
+    flex: 1;
   }
 }
 </style>
diff --git a/frontend/src/hooks/useAlert.ts b/frontend/src/hooks/useAlert.ts
index 1141cfb..d0a9c6d 100644
--- a/frontend/src/hooks/useAlert.ts
+++ b/frontend/src/hooks/useAlert.ts
@@ -1,8 +1,8 @@
 import { render, createVNode } from 'vue'
 
-import ConfirmComp from '@/components/Confirm/index.vue'
+import ConfirmComp, { type Options } from '@/components/Confirm/index.vue'
 
-const createAlert = (title: string, message: string) => {
+const createAlert = (title: string, message: string, options: Partial<Options> = {}) => {
   return new Promise((resolve) => {
     const dom = document.createElement('div')
     dom.style.cssText = `
@@ -13,10 +13,12 @@ const createAlert = (title: string, message: string) => {
       right: 0;
       display: flex;
       justify-content: center;
+      max-height: 70%;
     `
     const vnode = createVNode(ConfirmComp, {
       title,
       message,
+      options,
       cancel: false,
       onConfirm: resolve,
       onFinish: () => {
diff --git a/frontend/src/hooks/useConfirm.ts b/frontend/src/hooks/useConfirm.ts
index 79d7dac..2caa5b0 100644
--- a/frontend/src/hooks/useConfirm.ts
+++ b/frontend/src/hooks/useConfirm.ts
@@ -1,8 +1,8 @@
 import { render, createVNode } from 'vue'
 
-import ConfirmComp from '@/components/Confirm/index.vue'
+import ConfirmComp, { type Options } from '@/components/Confirm/index.vue'
 
-const createConfirm = (title: string, message: string) => {
+const createConfirm = (title: string, message: string, options: Partial<Options> = {}) => {
   return new Promise((resolve, reject) => {
     const dom = document.createElement('div')
     dom.style.cssText = `
@@ -13,10 +13,12 @@ const createConfirm = (title: string, message: string) => {
       right: 0;
       display: flex;
       justify-content: center;
+      max-height: 70%;
     `
     const vnode = createVNode(ConfirmComp, {
       title,
       message,
+      options,
       onConfirm: resolve,
       onCancel: () => reject('cancelled'),
       onFinish: () => {