From 68cae1ac7bc74a69b624757a0bfd143a31fb735b Mon Sep 17 00:00:00 2001
From: LiuYang <44267488+coderYangLiu@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:44:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E7=A4=BA=E4=BE=8B(ba?=
 =?UTF-8?q?se-usage)=E9=83=A8=E5=88=86=E7=9A=84=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=20(#3654)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/base-usage.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/site/src/components/base-usage.vue b/site/src/components/base-usage.vue
index 72967a9aa3..450903427a 100644
--- a/site/src/components/base-usage.vue
+++ b/site/src/components/base-usage.vue
@@ -19,6 +19,8 @@
 
 <script setup lang="jsx">
 import { ref, compile, onMounted, computed, onBeforeUnmount, watchEffect } from 'vue';
+import * as prettier from 'prettier/standalone';
+import * as parserHtml from 'prettier/parser-html';
 
 const stringifyProp = (name, value) => {
   if (value === true) return name; // 为 true 只展示 name
@@ -73,6 +75,14 @@ const defaultProps = ref(
   }, {}),
 );
 
+function codeFormat(code, options = {}) {
+  return prettier.format(code, {
+    parser: 'vue',
+    ...options,
+    plugins: [parserHtml],
+  });
+}
+
 const usageCode = computed(() => {
   const propsStr = Object.keys(changedProps.value)
     .map((name) => `${stringifyProp(name, changedProps.value[name])}`)
@@ -80,6 +90,6 @@ const usageCode = computed(() => {
   const trueCode = props.code.replace(/\s*v-bind="configProps"/g, () =>
     propsStr.length ? `\n  ${propsStr.join('\n  ')}` : '',
   );
-  return trueCode;
+  return codeFormat(trueCode);
 });
 </script>