feat: Supports Markdown preview

Author: Ayideyia

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",

frontend/pnpm-lock.yaml

@@ -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(() =>

frontend/src/components/CodeViewer/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>

frontend/src/components/Confirm/index.vue

@@ -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: () => {

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 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: () => {