修改文件树插件 添加代码游乐场插件

app/components/content/FileTree.vue

@@ -1,11 +1,13 @@
 <template>
-  <UPage class="mt-4 mb-4 bg-gray-50 dark:bg-gray-900 rounded-xl ">
-    <div v-if="title" class="flex items-center mb-3 font-mono text-sm text-gray-700 dark:text-gray-300">
-      <Icon v-if="icon" :name="icon" class="mr-2 text-gray-500" size="16" />
+  <UPage class="mt-4 mb-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-300 dark:border-gray-700">
+    <div v-if="title" class="flex items-center font-mono text-base m-3 text-gray-700 dark:text-gray-300 rounded-xl ">
+      
+      <Icon v-if="icon" :name="icon" class="mr-2" size="20" />
+      
       <span>{{ title }}</span>
     </div>
 
-    <div class="bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 p-3">
+    <div class="bg-gray-50 dark:bg-gray-800 rounded border-t border-gray-200 dark:border-gray-700 p-3">
       <ClientOnly>
         <div class="space-y-1">
           <div

app/components/content/Playground.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class=" w-full mt-6 mb-6">
+    <iframe
+      v-if="url"
+      :src="url"
+      :title
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      class="w-full h-full min-h-[600px] overflow-hidden rounded-md"
+    />
+    <USkeleton v-else class="w-full min-h-[600px] rounded-md" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const {
+  provider,
+  id,
+  repo,
+  branch = 'main',
+  dir = '',
+  file,
+  title = 'Playground',
+} = defineProps<{
+  provider: 'stackblitz' | 'codesandbox';
+  id?: string;
+  repo?: string;
+  branch?: string;
+  dir?: string;
+  file: string;
+  title?: string;
+}>();
+
+const url = ref('');
+const colorMode = useColorMode();
+
+onMounted(() => {
+  if (provider === 'stackblitz') {
+    if (repo)
+      url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`;
+    else if (id)
+      url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`;
+  } else if (provider === 'codesandbox') {
+    if (repo)
+      url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`;
+    else if (id)
+      url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`;
+  }
+});
+</script>

content/1.简单文档/1.index.md

@@ -5,6 +5,19 @@ navigation:
   icon: i-lucide-house
 ---
 
+::div{label="PostgreSQL" icon="lucide:database"}
+### PostgreSQL column types
+
+```ts
+import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+export const table = pgTable('table', {
+  int: integer('int')
+});
+```
+::
+
+
 :read-more{to="/getting-started/writing/markdown"}
 :read-more{title="Nuxt website" to="https://nuxt.com/" }
 :read-more{to="https://nuxt.com/"}
@@ -39,6 +52,8 @@ wow
 
 ::FileTree
 ---
+title: File Tree
+icon: lucide:folder-tree
 tree:
   - app:
     - components:
@@ -46,9 +61,9 @@ tree:
       - Footer.vue
     - composables:
       - useErrorHandler.ts
-    - ^app.vue^ # This is highlighted
+    - app.vue # This is highlighted
   - docs:
-    - index.md
+    - ^index.md^
 ---
 ::
 

content/1.简单文档/3.usage.md

@@ -5,6 +5,14 @@ navigation:
   icon: i-lucide-sliders
 ---
 
+::playground
+---
+provider: stackblitz
+repo: nuxt/starter
+branch: v3
+file: app.vue
+---
+::
 
 # 这是一个H1标签