From 4202d29f0bd4f0ddeb15c4989c635fa6fe66b9ee Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Wed, 20 Nov 2024 18:43:33 +0800
Subject: [PATCH] feat(prose): fixed height code block

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/ProseCode.vue | 16 +++++++++++++---
 content/2.components/1.prose.md  | 30 +++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 10da8d38..6c8cdd24 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -16,13 +16,13 @@
       <CodeCopy :code />
     </span>
     <div class="bg-muted/30">
-      <UiScrollArea>
+      <UiScrollArea :style="[parsedMeta.has('height') && `height: ${parsedMeta.get('height')}px`]">
         <div
           class="overflow-x-auto py-3 text-sm"
           :class="[
             !inGroup && !filename && 'inline-copy',
             !language && 'pl-3', !inGroup,
-            showLineNumber && 'show-line-number',
+            parsedMeta.has('line-numbers') && 'show-line-number',
           ]"
         >
           <slot />
@@ -54,7 +54,17 @@ const {
   meta?: string;
 }>();
 
-const showLineNumber = computed(() => meta?.includes('line-numbers'));
+const parsedMeta = computed(() => {
+  const split = meta?.split(' ') ?? [];
+  const params = new Map<string, string | undefined>();
+
+  for (const param of split) {
+    const [key, val] = param.split('=');
+    params.set(key, val);
+  }
+
+  return params;
+});
 
 const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
 const icon = computed(() => {
diff --git a/content/2.components/1.prose.md b/content/2.components/1.prose.md
index 0a31b4b3..27eab271 100644
--- a/content/2.components/1.prose.md
+++ b/content/2.components/1.prose.md
@@ -77,6 +77,20 @@ icon: lucide:letter-text
   const line2 = 'This is line 2';
   const line3 = 'This is line 3';
   ```
+
+  ```ts [Fixed Height] height=150
+  const parsedMeta = computed(() => {
+    const split = meta?.split(' ') ?? [];
+    const params = new Map<string, string | undefined>();
+
+    for (const param of split) {
+      const [key, val] = param.split('=');
+      params.set(key, val);
+    }
+
+    return params;
+  });
+  ```
   ::
 
   ````md [Code]
@@ -103,7 +117,21 @@ icon: lucide:letter-text
   const line2 = 'This is line 2';
   const line3 = 'This is line 3';
   ```
-  ````
+
+  ```ts [Fixed Height] height=150
+  const parsedMeta = computed(() => {
+    const split = meta?.split(' ') ?? [];
+    const params = new Map<string, string | undefined>();
+
+    for (const param of split) {
+      const [key, val] = param.split('=');
+      params.set(key, val);
+    }
+
+    return params;
+  });
+  ```
+````
 ::
 
 ### Inline Code