当前位置: 首页 > news >正文

Vue3.5 企业级管理系统实战(十):面包屑导航组件

1 breadcrumb 组件

1.1 安装插件 path-to-regexp

首先,我们需要安装插件 path-to-regexp,以便在下面的面包屑组件中对路由地址进行解析。

`path-to-regexp`是一个 JavaScript 库,可将路径字符串转化为正则表达式,广泛用于 Web 开发中的路由匹配和参数解析。借助它,开发者能定义含参数的路径模板,如`/user/:id`,并将其编译成正则表达式以测试路径是否匹配,还能解析出路径中的参数值。

`compile`是`path-to-regexp`中的一个实用函数,它根据路径模板生成反向填充路径的函数。通过传入参数对象,可将参数填充到路径模板里,生成完整的路径字符串。同时,它会自动对参数进行 URL 编码,保证生成的路径合法,为路径处理提供了便利。

通过 pnpm 安装  path-to-regexp

pnpm install path-to-regexp

 

1.2 breadcrumb 组件开发

在 /src/layout/components 下新建 BreadCrumb 文件夹,新建 index.vue 文件,代码如下:

///src/layout/components/BreadCrumb/index.vue
<template><!-- 创建一个面包屑导航组件,设置分隔符为 /,并添加一些样式类 --><el-breadcrumb separator="/" leading-50px text-lg ml-30px inline-block><!-- 遍历 list 数组,为每个路由生成一个面包屑项 --><!-- a.path 可能是一个路由参数导航 /test/index/:id --><el-breadcrumb-item v-for="(route, index) in list" :key="route.path"><!-- 如果是最后一个面包屑项,使用 span 标签显示标题,并且置灰 --><span v-if="list.length - 1 === index">{{ route.meta?.title }}</span><!-- 如果不是最后一个面包屑项,使用 a 标签,点击时调用 handleLink 方法进行页面跳转 --><a v-else @click="handleLink(route)">{{ route.meta?.title }}</a></el-breadcrumb-item></el-breadcrumb>
</template><!-- dashboard -->
<script lang="ts" setup>
// 导入路由实例
import router from "@/router";
// 导入 vue-router 中的 RouteLocationMatched 类型
import { RouteLocationMatched } from "vue-router";
// 导入 path-to-regexp 库中的 compile 函数,用于将路径模板和参数组合成完整路径
import { compile } from "path-to-regexp";// 定义 PartialRouteLocationMatched 类型,只取 RouteLocationMatched 的部分属性
type PartialRouteLocationMatched = Partial<RouteLocationMatched>; // 获取当前路由信息
const route = useRoute();
// 定义响应式变量 list,用于存储面包屑导航列表
const list = ref<PartialRouteLocationMatched[]>([]);// 定义获取面包屑导航列表的函数
const getBreadCrumb = () => {// 过滤出有 meta.title 属性的路由匹配项let matched = route.matched.filter((match) => match.meta.title) as PartialRouteLocationMatched[];// 如果当前访问的不是首页,在面包屑列表开头添加首页项if (matched[0]?.path !== "/dashboard") {//  当前访问的不是首页,增加匹配项目(首页的面包屑一直存在)matched = [{path: "/dashboard",meta: {title: "dashboard"}},...matched];}// 过滤掉 meta.breadcrumb 为 false 的路由匹配项list.value = matched.filter((match) => match.meta?.breadcrumb !== false);
};// 监听路由路径的变化,当路径变化时调用 getBreadCrumb 函数,并且在组件初始化时立即执行一次
watch(() => route.path, getBreadCrumb, { immediate: true });// 定义编译路径的函数,根据路径模板和当前路由参数生成完整路径
function compilePath(path: string) {// 获取当前路由的参数const params = route.params;// 使用 compile 函数将路径模板和参数组合成完整路径const resultPath = compile(path)(params);return resultPath;
}// 定义处理面包屑项点击事件的函数
function handleLink(route: PartialRouteLocationMatched) {// 解构出路由的 path 和 redirect 属性const { path, redirect } = route;// 如果存在 redirect 属性,使用 router.push 进行重定向if (redirect) {return router.push(redirect as string);}// 否则,使用 compilePath 函数生成完整路径并进行跳转router.push(compilePath(path!));
}
</script>

2 Navbar 引入 

在 /src/layout/components/Navbar.vue 中引入 breadcrumb 组件,代码如下:

///src/layout/components/Navbar.vue
<template><div class="navbar" flex><hamburger@toggleCollapse="toggleSidebar":collapse="sidebar.opened"></hamburger><BreadCrumb></BreadCrumb></div>
</template><style scoped lang="scss">
.navbar {@apply h-[var(--navbar-height)];
}
</style><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
// 在解构的时候要考虑值是不是对象,如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore();
</script>

3 页面效果

npm run dev 启动后,页面效果如下:

以上面包屑导航组件就封装好了。

下一篇将继续探讨全屏切换组件,敬请期待~

相关文章:

Vue3.5 企业级管理系统实战(十):面包屑导航组件

1 breadcrumb 组件 1.1 安装插件 path-to-regexp 首先&#xff0c;我们需要安装插件 path-to-regexp&#xff0c;以便在下面的面包屑组件中对路由地址进行解析。 path-to-regexp是一个 JavaScript 库&#xff0c;可将路径字符串转化为正则表达式&#xff0c;广泛用于 Web 开发…...

【python】OpenCV—Hand Detection

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、参考6、其它手部检测和手势识别的方案 更多有趣的代码示例&#xff0c;可参考【Programming】 1、功能描述 基于 opencv-python 和 mediapipe 进行手部检测 2、代码实现 导入必要的库函数 import cv2 import media…...

[ComfyUI] SDXL Prompt Styler 自定义节点的作用解析

1. SDXL Prompt Styler 的位置与基本功能 在 ComfyUI 的 “新建节点” → “实用工具” 下,可以找到 Style 节点(SDXL Prompt Styler)。该节点的主要作用是对输入的描述进行结构化处理,并在转换为 Stable Diffusion XL (SDXL) 提示词时,自动补充风格相关的内容,使提示词…...

Oracle-rman restore遭遇RMAN-03002与ORA-19563

文章目录 在原DB上检查是否有重复的文件名&#xff1a;查看rman恢复的日志修正重名部分重新执行rman恢复结论&#xff1a; 在 RMAN 恢复过程中&#xff0c;遇到RMAN-03002连同ORA-19563:错误。 操作是将 Oracle 10.0.5的数据库备份从 RMAN備份恢复到另一台测试主机的同一个目录…...

FPGA中串行执行方式之使用时钟分频或延迟的方式

FPGA中串行执行方式之使用时钟分频或延迟的方式 在FPGA设计中,​时钟分频和延迟是两种常用的技术,用于控制信号的时序或调整信号的频率。它们可以用来实现简单的串行逻辑、状态转移或其他需要时间控制的场景。 时钟分频(Clock Division) 基本原理:时钟分频是通过将输入…...

Dubbo 全面解析:从 RPC 核心到服务治理实践

一、分布式系统与 RPC 框架概述 在当今互联网时代&#xff0c;随着业务规模的不断扩大&#xff0c;单体架构已经无法满足高并发、高可用的需求&#xff0c;分布式系统架构成为主流选择。而在分布式系统中&#xff0c;远程服务调用&#xff08;Remote Procedure Call&#xff0…...

JavaScript 调试入门指南

JavaScript 调试入门指南 一、调试准备阶段 1. 必备工具配置 浏览器套件:安装最新Chrome102+,开启实验性功能(地址栏输入chrome://flags/#enable-devtools-experiments)编辑器集成:VS Code安装以下扩展: JavaScript Debugger:支持浏览器与Node.js双端调试Error Lens:实…...

不能将下载行为传输到IDM

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 安装IDM后&#xff0c;调用IDM下载软件显示&#xff1a;不能将下载行为传输到IDM&#xff0c;Error 0x80029C4A 二、原因分析 可能是识别浏览器插件不到&#xff0c;或者本地的插件版本不对导致的 三…...

spring security 认证流程分析

Spring Security 认证流程分析 Spring Security 的认证流程是一个模块化且可扩展的过程&#xff0c;核心围绕 过滤器链 和 认证组件 协作实现。以下是详细流程分析&#xff1a; 1. 请求拦截与过滤器链 • 入口&#xff1a;所有 HTTP 请求经过 Spring Security 的过滤器链。 •…...

Docker Compose 部署 Loki

官方文档&#xff1a;https://grafana.com/docs/loki/latest/setup/install/docker/ 环境准备 安装 Docker和Docker Compose 参考&#xff1a;https://qiangsh.blog.csdn.net/article/details/125375187 创建loki目录 mkdir -p /opt/loki/config mkdir -p /data/monitoring…...

nuxt3 seo优化

在 Nuxt3 中&#xff0c;通过 nuxtjs/seo、nuxtjs/sitemap 和 nuxtjs/robots 模块可以生成包含动态链接的站点地图&#xff08;sitemap.xml&#xff09;&#xff0c;但具体是“实时生成”还是“部署时生成”&#xff0c;取决于你的配置方式和数据更新频率。以下是具体分析&…...

CentOS 8 Stream 配置在线yum源参考 —— 筑梦之路

CentOS 8 Stream ISO 文件下载地址&#xff1a;http://mirrors.aliyun.com/centos-vault/8-stream/isos/x86_64/CentOS-Stream-8-20240603.0-x86_64-dvd1.isoCentOS 8 Stream 网络引导ISO 文件下载地址&#xff1a;http://mirrors.aliyun.com/centos-vault/8-stream/isos/x86_6…...

uniapp 在app上 字体如何不跟着系统字体大小变

在UniApp开发中&#xff0c;默认情况下App的字体可能会跟随系统字体设置而变化。如果你希望保持固定的字体样式&#xff0c;不随系统字体设置改变&#xff0c;可以采用以下几种方法&#xff1a; 方法一&#xff1a;全局CSS设置 在App.vue的样式中添加以下CSS&#xff1a; /*…...

leetcode141.环形链表

直接快慢指针&#xff0c;如果有环&#xff0c;那么快指针一定会在成环的起始点与慢指针相遇 /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ pu…...

【HTML5游戏开发教程】零基础入门合成大西瓜游戏实战 | JS物理引擎+Canvas动画+完整源码详解

《从咖啡杯到财务自由&#xff1a;一个程序员的合成之旅——当代码遇上物理引擎的匠心之作》 &#x1f31f; 这是小游戏开发系列的第四篇送福利文章&#xff0c;感谢一路以来支持和关注这个项目的每一位朋友&#xff01; &#x1f4a1; 文章力求严谨&#xff0c;但难免有疏漏之…...

【C#语言】深入理解C#多线程编程:从基础到高性能实践

文章目录 ⭐前言⭐一、多线程的本质价值&#x1f31f;1、现代计算需求&#x1f31f;2、C#线程演进史 ⭐二、线程实现方案对比&#x1f31f;1、传统线程模型&#x1f31f;2、现代任务模型&#xff08;推荐&#xff09;&#x1f31f;3、异步编程范式 ⭐三、线程安全深度解析&…...

短信验证码安全需求设计

背景&#xff1a; 近期发现部分系统再短信充值频繁&#xff0c;发现存在恶意消耗短信额度现象&#xff0c;数据库表排查&#xff0c;发现大量非合法用户非法调用短信接口API导致额度耗尽。由于系统当初设计存在安全缺陷&#xff0c;故被不法分子进行利用&#xff0c;造成损失。…...

selenium实现自动登录项目(5)

1、163邮箱自动登录功能 遇到的问题&#xff1a; 1、登录页面&#xff0c;在定位表单时候&#xff0c;采用id&#xff0c;xpath&#xff0c;css selector都无法定位成功&#xff0c;因为id后面有个随机生成的数字&#xff08;//*[id"x-URS-iframe1741925838640.6785&quo…...

多 线 程

一.基本知识 线程&#xff1a;线程是操作系统能够运行调度的最小单位 进程&#xff1a;进程是程序执行实体 多线程应用场景&#xff1a;拷贝、迁移大文件&#xff0c;加载大量的资源文件 并发&#xff1a;有多个指令在单个cpu上交替执行 并行&#xff1a;在同一时刻人&…...

C#:类型定义中使用‌问号(?)

在 C# 中&#xff0c;类型定义中的‌问号&#xff08;?&#xff09;‌主要用于控制类型的可空性&#xff0c;但具体行为因类型&#xff08;值类型或引用类型&#xff09;和 C# 版本而异。以下是清晰分类的说明&#xff1a; 一、可空值类型&#xff08;T?&#xff0c;适用于所…...

基于飞腾FT2000+服务器主板与DeepSeek大模型的国产化AI算力探索

随着国产化处理器和AI技术的快速发展&#xff0c;自主可控的算力解决方案日益受到关注。国内大模型技术飞速发展&#xff0c;Deepseek等大模型在自然语言处理、计算机视觉等领域展现出强大的能力。面对大模型的计算需求&#xff0c;服务器硬件的国产化成为重要趋势。 飞腾FT20…...

知识篇 | Oracle的 TEMP表空间管理和优化

Oracle临时表空间&#xff08;TEMP&#xff09;是数据库中用于存储会话级临时数据的核心组件&#xff0c;主要用于支持需要中间结果集的操作&#xff08;如排序、哈希连接&#xff09;。其数据在事务结束或会话终止后自动释放&#xff0c;不持久化存储。 核心特点&#xff1a;…...

鸿蒙进行视频上传,使用 request.uploadFile方法

一.拉起选择器进行视频选择&#xff0c;并且创建文件名称 async getPictureFromAlbum() {// 拉起相册&#xff0c;选择图片let PhotoSelectOptions new photoAccessHelper.PhotoSelectOptions();PhotoSelectOptions.MIMEType photoAccessHelper.PhotoViewMIMETypes.VIDEO_TY…...

如何下载 Postman?快速指南!

Postman 是一款非常受欢迎的 API 测试工具。它最初是作为一个 Chrome 插件发布&#xff0c;后来发展成为一款独立的跨平台软件&#xff0c;支持 Windows、Mac、Linux 等操作系统。 Postman 怎么下载教程&#xff08;2025最新版&#xff09;&#xff1f;...

Angular由一个bug说起之十五:自定义基于Overlay的Tooltip

背景 工具提示&#xff08;tooltip&#xff09;是一个常见的 UI 组件&#xff0c;用于在用户与页面元素交互时提供额外的信息。由于angular/material/tooltip的matTooltip只能显示纯文本&#xff0c;所以我们可以通过自定义Directive来实现一个灵活且功能丰富的tooltip Overlay…...

M系mac怎么关闭sip

SIP是系统级的权限操作&#xff0c;我们无法直接关闭它。记录一下如何成功关闭SIP。 一. 查看自己mac的sip是否关闭&#xff0c;终端中输入该下命令&#xff1a; csrutil status 未关闭&#xff1a;System Integrity Protection status: enabled. 已关闭&#xff1a;System…...

Kafka 的延迟队列、死信队列和重试队列

总结一下实现的方法&#xff1a; 1、延迟队列&#xff0c;首先kafka是没有延迟队列的&#xff0c;那要实现延迟队列的话&#xff0c;就得使用其他方法。在发送消息的时候加上时间戳&#xff0c;再在时间戳上面加上延迟时间。消费的时候判断一下&#xff0c;有没有到达延迟时间&…...

OpenCV正确安装及环境变量配置

安装OpenCV&#xff08;v4.6.0&#xff09;安装Python&#xff08;3.10.6&#xff09;安装VS2022的C桌面开发&#xff0c;手动勾选Windows 10 SDK和MSVC安装CMake&#xff08;3.31.6&#xff09;在.npmrc配置pnpm config set auto-approve-builds true运行pnpm install 接下来是…...

分布式系统的CAP理论、事务和锁实现

分布式系统核心概念 1. CAP理论 CAP理论指出&#xff0c;分布式系统最多同时满足以下三项中的两项&#xff1a; 一致性&#xff08;CC&#xff09;&#xff1a;所有节点访问同一份最新数据。可用性&#xff08;AA&#xff09;&#xff1a;每个请求都能在合理时间内获得非错误…...

JBDev - Theos下一代越狱开发工具

JBDev - Theos下一代越狱开发工具 自越狱诞生以来&#xff0c;Theos一直是越狱开发的主流工具&#xff0c;大多数开发者使用Theos编译代码&#xff0c;再用lldb手动调试。JBDev简化了这个过程&#xff0c;项目地址https://github.com/lich4/JBDev 简介 JBDev用于Xcode越狱开…...

vue3自定义动态锚点列表,实现本页面锚点跳转效果

需求&#xff1a;当前页面存在多个模块且内容很长时&#xff0c;需要提供一个锚点列表&#xff0c;可以快速查看对应模块内容 实现步骤&#xff1a; 1.每个模块添加唯一id&#xff0c;添加锚点列表div <template><!-- 模块A --><div id"modalA">…...

华为、浪潮、华三链路聚合概述

1、华为 链路聚合可以提高链路带宽和链路冗余性。有三种类型&#xff0c;分别是手工链路聚合&#xff0c;静态lacp链路聚合&#xff0c;动态lacp链路聚合。 手工链路模式&#xff1a;也称负载分担模式&#xff0c;需手动指定链路&#xff0c;各链路之间平均分担流量。静态LAC…...

RUBY报告系统

我们常用GFP及其变体如RFP、YFP、mCherry等作为基因表达的报告蛋白——需要荧光显微镜制片观察&#xff1b;此外还有GUS或荧光素酶作为报告酶——需要添加底物。 RUBY报告系统则与众不同&#xff0c;其作用原理是&#xff1a;将酪氨酸转化为鲜艳的红色甜菜碱&#xff0c;无需使…...

HO与OH差异之Navigation三

在上一篇内容中我们介绍了HO与OH差异之Navigator&#xff0c;我们也了解了Navigator的基本概念和大致了解了一下他的基础用法&#xff0c;既然谈到差异肯定就不止这两种差异&#xff0c;今天就让我们来了解第三种差异NavRouter&#xff0c;其中在HO中我们并没有这种路由方式但是…...

PyTorch处理数据--Dataset和DataLoader

在 PyTorch 中&#xff0c;Dataset 和 DataLoader 是处理数据的核心工具。它们的作用是将数据高效地加载到模型中&#xff0c;支持批量处理、多线程加速和数据增强等功能。 一、Dataset&#xff1a;数据集的抽象‌ Dataset 是一个抽象类&#xff0c;用于表示数据集的接口。你…...

Linux搭建NFS服务

1.概述 Network File System的缩写&#xff0c;它最大的功能是可以通过网络使用挂载的方式&#xff0c;让不同的机器、不同的操作系统可以共享彼此的文件 2.名称 软件名 nfs-utils服务名 nfs或者nfs-server 3.端口 nfs-server tcp/2049 负责建立连接 rpcbind tcp/111 负责…...

ubuntu服务器server版安装,ssh远程连接xmanager管理,改ip网络连接。图文教程

ventoy启动服务器版iso镜像&#xff0c;注意看server名称&#xff0c;跟之前desktop版ubuntu不一样。没有gui界面。好&#xff0c;进入命令行界面。语言彻底没汉化了&#xff0c;选英文吧&#xff0c;别的更看不懂。 跟桌面版ubuntu类似&#xff0c;选择是否精简系统&#xff0…...

GC overhead limit exceeded---Java 虚拟机 (JVM) 在进行垃圾回收内存量非常少解决

背景&#xff1a; 我正在跑一个数据处理较为复杂的程序。然后调试了很多遍&#xff0c;出现了GC问题&#xff0c;如下图bug. GC overhead limit exceeded-这个bug错误通常表示 Java 虚拟机 (JVM) 在进行垃圾回收时花费了过多的时间&#xff0c;并且回收的内存量非常少。…...

Pytorch学习笔记(十二)Learning PyTorch - NLP from Scratch

这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 NLP from Scratch 部分。 官网链接&#xff1a;https://pytorch.org/tutorials/intermediate/nlp_from_scratch_index.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwdaa2m 提取码: …...

学习日记0327

A cross-domain knowledge tracing model based on graph optimal transport 我们使用gnn来学习这些节点的特征。在此基础上&#xff0c;我们使用显式分布距离度量对齐来自两个不同域的特征向量&#xff0c;旨在最小化域差异&#xff0c;实现最大的跨域知识转移。 AEGOT-CDKT…...

Postman 下载文件指南:如何请求 Excel/PDF 文件?

在 Postman 中进行 Excel/PDF 文件的请求下载和导出&#xff0c;以下是简明的步骤&#xff0c;帮助你轻松完成任务。首先&#xff0c;我们将从新建接口开始&#xff0c;逐步引导你完成整个过程。 Postman 请求下载/导出 excel/pdf 文件教程...

【HTML】验证与调试工具

个人主页&#xff1a;Guiat 归属专栏&#xff1a;HTML CSS JavaScript 文章目录 1. HTML 验证工具概述1.1 验证的重要性1.2 常见 HTML 错误类型 2. W3C 验证服务2.1 W3C Markup Validation Service2.2 使用 W3C 验证器2.3 验证结果解读 3. 浏览器开发者工具3.1 Chrome DevTools…...

头歌实践教学平台--【数据库概论】--SQL

一、表结构与完整性约束的修改(ALTER) 1.修改表名 USE TestDb1; alter table your_table rename TO my_table; 2.添加与删除字段 #语句1&#xff1a;删除表orderDetail中的列orderDate alter table orderDetail drop orderDate; #语句2&#xff1a;添加列unitPrice alter t…...

2025.03.27【基因分析新工具】| MAST:解锁基因表达差异分析与网络构建

文章目录 1. MAST工具简介&#xff1a;探索生物信息分析的新利器1.1 什么是MAST工具&#xff1f;1.2 MAST工具的优势1.3 MAST工具的应用场景 2. MAST的安装方法&#xff1a;轻松入门的第一步2.1 安装R语言环境2.2 安装MAST包2.3 安装依赖库 3. MAST常用命令&#xff1a;掌握数据…...

JVM - 垃圾回收基本问题

通过一些问题来讨论在 JVM 中&#xff0c;垃圾回收的一些基本问题 为什么要有垃圾回收&#xff1f;Java 垃圾回收中是如何判断一个对象死亡的&#xff1f;请简单介绍一下刚才说到了引用计数法&#xff0c;引用计数法存在什么问题&#xff1f;刚才说到了可达性分析&#xff0c;…...

Python 爬虫案例

以下是一些常见的 Python 爬虫案例&#xff0c;涵盖了不同的应用场景和技术点&#xff1a; 1. 简单网页内容爬取 案例&#xff1a;爬取网页标题和简介 import requests from bs4 import BeautifulSoup url "https://www.runoob.com/" response requests.get(url) …...

从零构建大语言模型全栈开发指南:第三部分:训练与优化技术-3.1.3分布式数据加载与并行处理(PyTorch DataLoader优化)

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 3.1.3 分布式数据加载与并行处理(`PyTorch DataLoader`优化)1. 大规模数据加载的挑战与瓶颈分析1.1 数据加载流程的时间分解2. PyTorch DataLoader的深度优化策略2.1 核心参数调优2.2 分布式数据分片策…...

2025年- G31-Lc105-102. 二叉树层次遍历--java版

1.题目描述 2.思路 思路一&#xff1a; 使用 队列 Queue 来存储当前层的所有节点。关键点在于 levelSize queue.size() 这一行&#xff0c;它决定了当前层的节点数量。 3.代码实现 /*** Definition for a binary tree node.* public class TreeNode {* int val;* Tr…...

Redis 和 MySQL双写一致性的更新策略有哪些?常见面试题深度解答。

目录 一. 业务数据查询&#xff0c;更新顺序简要分析 二. 更新数据库、查询数据库、更新缓存、查询缓存耗时对比 2.1 更新数据库&#xff08;最慢&#xff09; 2.2 查询数据库&#xff08;较慢&#xff09; 2.3 更新缓存&#xff08;次快&#xff09; 2.4 查询缓存&#…...

【DFS】羌笛何须怨杨柳,春风不度玉门关 - 4. 二叉树中的深搜

本篇博客给大家带来的是二叉树深度优先搜索的解法技巧,在后面的文章中题目会涉及到回溯和剪枝,遇到了一并讲清楚. &#x1f40e;文章专栏: DFS &#x1f680;若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的…...