feat: file tree

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/AccordionItem.vue

@@ -20,5 +20,7 @@ defineProps<{
   content?: string;
 }>();
 
+defineSlots();
+
 const autoValue = useId();
 </script>

components/content/Card.vue

@@ -64,5 +64,8 @@ const {
   showLinkIcon?: boolean;
   horizontal?: boolean;
 }>();
+
+defineSlots();
+
 const [UseTemplate, CardInner] = createReusableTemplate();
 </script>

components/content/CodeGroup.vue

@@ -3,14 +3,15 @@
 </template>
 
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
 import Tabs from './Tabs.vue';
 
 const { inStack = false, sync } = defineProps<{
   inStack?: boolean;
   sync?: string;
 }>();
 
-const _slots = useSlots();
+const _slots: SetupContext['slots'] = useSlots();
 function render() {
   const slots = _slots?.default?.() || [];
   return h(

components/content/Collapsible.vue

@@ -53,5 +53,6 @@ const {
   title?: string;
   defaultOpen?: boolean;
 }>();
+defineSlots();
 const isOpen = ref(defaultOpen);
 </script>

components/content/FileTree.vue

@@ -0,0 +1,90 @@
+<template>
+  <UiCard
+    class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
+  >
+    <div v-if="title" class="flex items-center border-b p-3 font-mono text-sm">
+      <SmartIcon v-if="icon" :name="icon" class="mr-1.5" />
+      <span>{{ title }}</span>
+    </div>
+
+    <div class="w-auto bg-muted/30 p-2">
+      <FileTreeRoot :tree="parsedTree" :show-arrow :show-icon :level="0" />
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+type InputTreeItem = string | {
+  [key: string]: InputTreeItem[];
+};
+
+const {
+  tree,
+  autoSlash = true,
+  showArrow = false,
+  showIcon = true,
+} = defineProps<{
+  title?: string;
+  icon?: string;
+  autoSlash?: boolean;
+  showArrow?: boolean;
+  showIcon?: boolean;
+  tree: InputTreeItem[];
+}>();
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
+
+function getIcon(filename: string, type: 'folder' | 'file') {
+  if (filename === '...')
+    return;
+  if (filename.endsWith('/'))
+    return 'lucide:folder';
+
+  return iconMap.get(filename.split('.')[filename.split('.').length - 1])
+    || iconMap.get(filename.toLowerCase())
+    || (type === 'file' ? 'lucide:file' : 'lucide:folder');
+}
+
+function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[]): FileTreeItem {
+  let title = key;
+  let highlighted = false;
+  if (title.startsWith('^') && title.endsWith('^')) {
+    title = title.substring(1, title.length - 1);
+    highlighted = true;
+  }
+
+  if (type === 'file') {
+    return {
+      title,
+      icon: getIcon(title, 'file'),
+      highlighted,
+    };
+  } else {
+    return {
+      title: `${title}${autoSlash ? '/' : ''}`,
+      icon: getIcon(title, 'folder'),
+      children: children && getTree(children),
+      highlighted,
+    };
+  }
+}
+
+function getTree(tree: InputTreeItem[]) {
+  const res: FileTreeItem[] = [];
+
+  for (const item of tree) {
+    if (typeof item === 'string') {
+      res.push(getItem(item, 'file'));
+    } else if (typeof item === 'object') {
+      for (const key of Object.keys(item))
+        res.push(getItem(key, 'folder', item[key]));
+    }
+  }
+
+  return res;
+}
+
+const parsedTree = computed(() => {
+  return getTree(tree);
+});
+</script>

components/content/FileTreeItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <li>
+    <!-- Folder -->
+    <div v-if="tree.children">
+      <a
+        class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left text-sm font-medium text-foreground/80 hover:bg-muted hover:text-primary"
+        :class="[tree.highlighted && 'underline underline-offset-4']"
+        @click="isOpen = !isOpen"
+      >
+        <SmartIcon
+          v-if="showArrow"
+          name="lucide:chevron-down"
+          class="transition-transform"
+          :class="[!isOpen && '-rotate-90']"
+        />
+
+        <SmartIcon
+          v-if="showIcon && tree.icon"
+          :name="tree.icon"
+          class="min-w-4"
+        />
+
+        <span :class="[tree.highlighted && 'font-bold text-primary']">
+          {{ tree.title }}
+        </span>
+      </a>
+      <div v-show="isOpen">
+        <FileTreeRoot :show-icon :show-arrow :tree="tree.children" :level="level + 1" />
+      </div>
+    </div>
+    <!-- File -->
+    <div
+      v-else
+      class="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+      :class="[tree.highlighted && 'underline underline-offset-4']"
+    >
+      <SmartIcon
+        v-if="showIcon && tree.icon"
+        :name="tree.icon"
+        class="min-w-4"
+      />
+
+      <span :class="[tree.highlighted && 'font-bold text-primary']">
+        {{ tree.title }}
+      </span>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+const { tree, level } = defineProps<{
+  showArrow: boolean;
+  tree: FileTreeItem;
+  showIcon: boolean;
+  level: number;
+}>();
+const isOpen = ref(true);
+</script>

components/content/FileTreeRoot.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul
+    class="flex flex-col font-mono"
+    :class="[level > 0 && 'mx-3.5 border-l px-2']"
+  >
+    <template v-for="link in tree" :key="link._id">
+      <FileTreeItem
+        :show-icon
+        :show-arrow
+        :tree="link"
+        :level="level"
+      />
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tree: FileTreeItem[];
+  level: number;
+  showArrow: boolean;
+  showIcon: boolean;
+}>();
+</script>

components/content/Hero.vue

@@ -58,4 +58,5 @@ defineProps<{
     target?: Target;
   }];
 }>();
+defineSlots();
 </script>

components/content/HeroAlt.vue

@@ -67,4 +67,5 @@ defineProps<{
   }];
   mobileRight?: 'top' | 'bottom';
 }>();
+defineSlots();
 </script>

components/content/Stack.vue

@@ -8,3 +8,7 @@
     </div>
   </UiCard>
 </template>
+
+<script setup lang="ts">
+defineSlots();
+</script>

components/content/Tabs.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
 import TabsInner from './TabsInner.vue';
 
 const {
@@ -23,7 +24,7 @@ const {
   sync?: string;
 }>();
 
-const _slots = useSlots();
+const _slots: SetupContext['slots'] = useSlots();
 function render() {
   const slots = _slots?.default?.() || [];
 

components/content/TabsInner.vue

@@ -190,6 +190,7 @@ const { sync, slotsData } = defineProps<{
   searchEmpty?: string;
   sync?: string;
 }>();
+defineSlots();
 
 const syncState = useCookie<{ scope: string; value?: string }[]>('tabs-sync-state', {
   default: () => [],