File Tree 组件

FileTree 由三个组件组成：

• FileTree：根容器。
• FileTreeFolder：目录节点。
• FileTreeFile：文件节点。

默认已为常见代码文件、办公文件、图片音视频文件配置图标，也支持自定义图标。现在也支持网盘下载场景：可在树顶部显示网盘下载头部，并在节点上展示大小、描述或可复制提取码。网盘节点中 description 与 extractionCode 为互斥展示。

基础用法

• src

  • components

    • LinkCard.vue4 KB卡片跳转组件
    • Tabs.vue5 KB页签切换组件
    • Accordion.vue6 KB折叠面板组件
  • assets

    • cover.png280 KB封面图
    • intro.mp418 MB演示视频
  • README.md2 KB组件说明入口
• 设计评审.docx92 KB需求评审记录
• 排期.xlsx36 KB项目排期表
• 宣讲.pptx18 MB宣讲幻灯片

<FileTree>
  <FileTreeFolder name="src" :default-open="true">
    <FileTreeFolder name="components" :default-open="true">
      <FileTreeFile name="LinkCard.vue" size="4 KB" description="卡片跳转组件" />
      <FileTreeFile name="Tabs.vue" size="5 KB" description="页签切换组件" />
    </FileTreeFolder>
    <FileTreeFile name="README.md" size="2 KB" description="组件说明入口" />
  </FileTreeFolder>
</FileTree>

网盘下载

网盘下载

主下载线路，适合国内网络环境。

• cyberdog_raceV2.tar9.8 GB
• 说明文档.pdf1.4 MB所有网盘共用同一份说明文件
• 校验文件.sha2562 KB

备用下载线路。

• cyberdog_raceV2.tar9.8 GB
• 说明文档.pdf1.4 MB所有网盘共用同一份说明文件
• 校验文件.sha2562 KB

公开分享链接示例。

• cyberdog_raceV2.tar512 MB公开分享链接示例
• 说明文档.pdf1.4 MB所有网盘共用同一份说明文件
• 校验文件.sha2562 KB

<DownloadTabs
  title="网盘下载"
  :providers="['baidu', { value: '123pan', label: '123网盘' }]"
>
  <template #default="{ provider }">
    <FileTree :provider="provider?.alias || ''" :show-header="false">
      <FileTreeFile
        name="cyberdog_raceV2.tar"
        :links="{
          baidu: {
            href: 'https://pan.baidu.com/...',
            size: '9.8 GB',
            extractionCode: 'zxwg'
          },
          '123网盘': {
            href: 'https://www.123865.com/...',
            size: '9.8 GB',
            extractionCode: 'dWkW'
          }
        }"
      />
    </FileTree>
  </template>
</DownloadTabs>

自定义图标

• reports

  • custom-node.dat

Props

FileTree

参数	类型	默认值	说明	示例
label	string	File tree	role=tree 的可访问标签。	label="项目目录"
variant	'default' | 'download'	'default'	强制切换为普通模式或网盘下载模式；传入 provider 时默认会进入下载模式。	variant="download"
provider	string	''	网盘别名或全名，用于顶部标题和节点网盘信息。	provider="baidu"
providerName	string	''	覆盖顶部显示的网盘名称。	provider-name="校内镜像"
providerIcon	string	''	覆盖顶部显示的网盘图标。	provider-icon="provider:download"
showHeader	boolean	true	下载模式下是否显示顶部头部；多个网盘放在 Tabs 中时通常可关闭。	:show-header="false"
title	string	网盘下载	下载模式顶部标题。	title="镜像下载"
description	string	''	顶部补充说明。	description="提供多个网盘入口"

FileTreeFolder

参数	类型	默认值	说明	示例
name	string	-	目录名（必填）。	name="src"
icon	string	''	目录图标（同时作为开关默认图标）。	icon="mdi:folder-star-outline"
openIcon	string	''	展开态图标。	open-icon="mdi:folder-open-outline"
closedIcon	string	''	折叠态图标。	closed-icon="mdi:folder-outline"
href	string	''	文件夹名后方显示跳转图标，点击跳转（与展开操作分离）。	href="/resource/project-components"
target	string	''	链接打开方式。	target="_blank"
defaultOpen	boolean	true	初始是否展开。	:default-open="false"
size	string	''	节点大小信息。	size="9.8 GB"
description	string	''	节点补充描述；下载模式下若同时传入 extractionCode，则优先显示提取码。	description="Docker 镜像"
provider	string	''	覆盖节点所属网盘。默认继承 FileTree。	provider="icloud"
extractionCode	string	''	下载提取码；以段内代码样式显示，点击可复制。	extraction-code="zxwg"
links	Record<string, string | false | { href?: string; target?: string; extractionCode?: string; description?: string; size?: string }>	undefined	同一套目录树下为不同网盘覆写链接和元信息；false 表示该网盘下该节点不可下载。	:links="{ baidu: { href: 'https://pan.baidu.com/...' }, '123网盘': false }"

FileTreeFile

参数	类型	默认值	说明	示例
name	string	-	文件名（必填）。	name="README.md"
icon	string	''	自定义文件图标。	icon="mdi:file-star-outline"
href	string	''	普通模式显示跳转图标；下载模式显示 点击下载 badge。	href="/guides/index"
target	string	''	链接打开方式。	target="_blank"
size	string	''	文件大小信息。	size="512 MB"
description	string	''	文件描述；下载模式下若同时传入 extractionCode，则优先显示提取码。	description="课程资源合集"
provider	string	''	覆盖节点所属网盘。默认继承 FileTree。	provider="gdrive"
extractionCode	string	''	下载提取码；以段内代码样式显示，点击可复制。	extraction-code="THFn"
links	Record<string, string | false | { href?: string; target?: string; extractionCode?: string; description?: string; size?: string }>	undefined	同一套目录树下为不同网盘覆写链接和元信息；false 表示该网盘下该节点不可下载。	:links="{ baidu: { href: 'https://pan.baidu.com/...' }, '123网盘': false }"

支持的网盘、别名与图标

网盘	别名	图标
115	115	provider:download
123网盘	123pan	provider:download
中国移动云盘	mobile	provider:download
天翼云盘	ecloud	provider:download
阿里云盘	aliyundrive	provider:download
OpenList	openlist	provider:download
百度网盘	baidu	provider:baidu
一刻相册	album	provider:download
豆包分享	doubao	provider:download
Google Drive	gdrive	provider:googledrive
蓝奏云	lanzou	provider:download
分秒帧	mseconds	provider:download
Mega	mega	provider:mega
OneDrive	onedrive	provider:onedrive
PikPak	pikpak	provider:download
夸克网盘	quark	provider:download
SMB	smb	provider:download
Teambition	teambition	provider:download
Terabox	terabox	provider:download
迅雷	xunlei	provider:download
UC网盘	uc	provider:download
联通云盘	unicom	provider:download
GitHub	github	provider:github
iCloud	icloud	provider:icloud