feat: add Folder component

packages/docs/src/components/component-overview/data.ts

@@ -205,6 +205,28 @@ export const componentOverviewItems: ComponentOverviewItem[] = [
     coverDark:
       "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6ySvTqb7XhkAAAAAAAAAAAAADgCCAQ/original",
   },
+  {
+    slug: "folder",
+    path: "/components/folder",
+    title: "Folder",
+    subtitle: {
+      "zh-CN": "文件树",
+    },
+    description: {
+      "zh-CN": "用于展示层级文件结构的文件树组件。",
+      "en-US":
+        "File tree component for displaying hierarchical file structure.",
+    },
+    group: {
+      "zh-CN": "反馈",
+      "en-US": "Feedback",
+    },
+    groupOrder: 4,
+    cover:
+      "https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/uWJQS7CnYE0AAAAAQCAAAAgADtFMAQFr/original",
+    coverDark:
+      "https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/iUnnR43iHu8AAAAAQCAAAAgADtFMAQFr/original",
+  },
   {
     slug: "sender",
     path: "/components/sender",

packages/docs/src/pages/components/folder/demo/basic.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { FolderTreeData } from "@antdv-next/x";
+
+const treeData: FolderTreeData[] = [
+  {
+    title: "use-x-chat",
+    path: "use-x-chat",
+    children: [
+      {
+        title: "SKILL.md",
+        path: "SKILL.md",
+        content: `---
+name: use-x-chat
+version: 2.3.0
+description: Focus on explaining how to use the useXChat Hook, including custom Provider integration, message management, error handling, etc.
+---
+
+# Quick Start
+
+Use the useXChat Hook to build professional AI conversation applications.
+
+## Requirements
+
+- @ant-design/x-sdk: 2.2.2+
+- @ant-design/x: latest
+`,
+      },
+      {
+        title: "reference",
+        path: "reference",
+        children: [
+          {
+            title: "API.md",
+            path: "API.md",
+            content: `### useXChat
+
+\`\`\`tsx
+const { messages, onRequest, isRequesting } = useXChat({ provider });
+\`\`\`
+
+Message list and request state are exposed from the hook.`,
+          },
+          {
+            title: "CORE.md",
+            path: "CORE.md",
+            content: `### Message Management
+
+- Read current messages
+- Append new messages
+- Abort active request
+- Reload an existing message`,
+          },
+        ],
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <div style="height: 420px">
+    <ax-folder
+      :tree-data="treeData"
+      :default-selected-file="['use-x-chat', 'SKILL.md']"
+    />
+  </div>
+</template>
+
+<docs lang="zh-CN">
+基础用法。
+</docs>
+
+<docs lang="en-US">
+Basic usage.
+</docs>

packages/docs/src/pages/components/folder/demo/custom-icons.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { FolderTreeData } from "@antdv-next/x";
+
+import {
+  CodeOutlined,
+  FileExcelOutlined,
+  FileImageOutlined,
+  FileMarkdownOutlined,
+  FilePdfOutlined,
+  FileTextOutlined,
+  FileWordOutlined,
+  FileZipOutlined,
+  FolderOutlined,
+} from "@antdv-next/icons";
+import { h } from "vue";
+
+const treeData: FolderTreeData[] = [
+  {
+    title: "my-project",
+    path: "my-project",
+    children: [
+      {
+        title: "docs",
+        path: "docs",
+        children: [
+          {
+            title: "README.md",
+            path: "README.md",
+            content: "# Project Documentation",
+          },
+          {
+            title: "API.pdf",
+            path: "API.pdf",
+            content: "API Documentation PDF",
+          },
+        ],
+      },
+      {
+        title: "src",
+        path: "src",
+        children: [
+          {
+            title: "components",
+            path: "components",
+            children: [
+              {
+                title: "Button.tsx",
+                path: "Button.tsx",
+                content: "Button component code...",
+              },
+              {
+                title: "styles.css",
+                path: "styles.css",
+                content: "/* CSS styles */",
+              },
+            ],
+          },
+          {
+            title: "utils",
+            path: "utils",
+            children: [
+              {
+                title: "helpers.ts",
+                path: "helpers.ts",
+                content: "Utility functions...",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: "assets",
+        path: "assets",
+        children: [
+          {
+            title: "logo.png",
+            path: "logo.png",
+            content: "Company logo image",
+          },
+          {
+            title: "banner.jpg",
+            path: "banner.jpg",
+            content: "Website banner image",
+          },
+        ],
+      },
+      {
+        title: "data",
+        path: "data",
+        children: [
+          {
+            title: "users.xlsx",
+            path: "users.xlsx",
+            content: "User data spreadsheet",
+          },
+          {
+            title: "report.docx",
+            path: "report.docx",
+            content: "Monthly report document",
+          },
+          {
+            title: "archive.zip",
+            path: "archive.zip",
+            content: "Project archive",
+          },
+        ],
+      },
+      {
+        title: "package.json",
+        path: "package.json",
+        content: '{\n  "name": "my-project"\n}',
+      },
+    ],
+  },
+];
+
+const iconWithColor = (icon: any, color: string) => () =>
+  h(icon, { style: { color } });
+
+const directoryIcons = {
+  directory: iconWithColor(FolderOutlined, "#faad14"),
+  md: iconWithColor(FileMarkdownOutlined, "#722ed1"),
+  pdf: iconWithColor(FilePdfOutlined, "#ff4d4f"),
+  tsx: iconWithColor(CodeOutlined, "#13c2c2"),
+  css: iconWithColor(CodeOutlined, "#13c2c2"),
+  ts: iconWithColor(CodeOutlined, "#13c2c2"),
+  png: iconWithColor(FileImageOutlined, "#1890ff"),
+  jpg: iconWithColor(FileImageOutlined, "#1890ff"),
+  xlsx: iconWithColor(FileExcelOutlined, "#52c41a"),
+  docx: iconWithColor(FileWordOutlined, "#1890ff"),
+  zip: iconWithColor(FileZipOutlined, "#faad14"),
+  json: iconWithColor(FileTextOutlined, "#666"),
+};
+</script>
+
+<template>
+  <div style="padding: 24px; height: 500px">
+    <ax-folder
+      :tree-data="treeData"
+      :default-selected-file="['my-project', 'package.json']"
+      :directory-icons="directoryIcons"
+    >
+      <template #directoryTitle>
+        <div
+          style="
+            padding: 12px;
+            white-space: nowrap;
+            border-bottom: 1px solid #f0f0f0;
+          "
+        >
+          <strong>Custom Icon File Browser</strong>
+          <div style="font-size: 12px; color: #666; margin-top: 4px">
+            Display different icons based on file type
+          </div>
+        </div>
+      </template>
+    </ax-folder>
+  </div>
+</template>
+
+<docs lang="zh-CN">
+自定义文件图标。
+</docs>
+
+<docs lang="en-US">
+Custom file icons.
+</docs>

packages/docs/src/pages/components/folder/demo/custom-service.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FileContentService, FolderTreeData } from "@antdv-next/x";
+
+const treeData: FolderTreeData[] = [
+  {
+    title: "x-request",
+    path: "x-request",
+    children: [
+      {
+        title: "SKILL.md",
+        path: "SKILL.md",
+      },
+      {
+        title: "reference",
+        path: "reference",
+        children: [
+          {
+            title: "API.md",
+            path: "API.md",
+          },
+          {
+            title: "CORE.md",
+            path: "CORE.md",
+          },
+          {
+            title: "EXAMPLES_SERVICE_PROVIDER.md",
+            path: "EXAMPLES_SERVICE_PROVIDER.md",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const fileContentService: FileContentService = {
+  async loadFileContent(filePath) {
+    const mockFiles: Record<string, string> = {
+      "x-request/SKILL.md": `---
+name: x-request
+version: 2.3.0-beta.1
+description: Focus on explaining the practical configuration and usage of XRequest, providing accurate configuration instructions based on official documentation
+---
+
+# Skill Positioning
+
+This skill focuses on solving how to correctly configure XRequest to adapt to various streaming interface requirements.`,
+      "x-request/reference/API.md": `### XRequest
+
+Use XRequest to connect streaming and non-streaming services with a consistent API.`,
+      "x-request/reference/CORE.md": `### Core Configuration
+
+- Basic request setup
+- Stream response adaptation
+- Error handling
+- Retry strategy`,
+      "x-request/reference/EXAMPLES_SERVICE_PROVIDER.md": `### Service Provider Examples
+
+- OpenAI-compatible endpoint
+- Custom SSE endpoint
+- JSON chunk endpoint`,
+    };
+
+    await new Promise(resolve => setTimeout(resolve, 300));
+    return mockFiles[filePath] ?? `// File not found: ${filePath}`;
+  },
+};
+</script>
+
+<template>
+  <div style="height: 420px">
+    <ax-folder
+      :tree-data="treeData"
+      :file-content-service="fileContentService"
+      :default-selected-file="['x-request', 'SKILL.md']"
+    />
+  </div>
+</template>
+
+<docs lang="zh-CN">
+自定义文件内容服务。
+</docs>
+
+<docs lang="en-US">
+Custom file content service.
+</docs>