博主之前用的xmind，后来发现html做成APP似乎更好一些
以下是源码，据此还可以做出Python等
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Bash 内建命令树形结构</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- 引入缩放插件 --> <script src="/A2_全局中心/B_插件工具/3.插件_字体缩放.js"></script> <style> :root { --primary-color: #4f46e5; --secondary-color: #7c3aed; --accent-color: #8b5cf6; --text-color: #1e293b; --text-secondary: #64748b; --bg-color: #f8fafc; --border-color: #e2e8f0; --hover-bg: #f1f5f9; --code-bg: #ffffff; --tree-line: #cbd5e1; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 13px; line-height: 1.5; color: #334155; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); overflow: hidden; height: 100vh; width: 100vw; display: flex; flex-direction: column; } .container { flex: 1; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.95); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); flex-shrink: 0; z-index: 10; } header h1 { font-size: 18px; font-weight: 600; margin-bottom: 4px; } header p { opacity: 0.9; font-size: 12px; } .controls { padding: 10px 16px; background-color: var(--code-bg); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } .controls button { background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-size: 12px; font-family: inherit; } .controls button:hover { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); transform: translateY(-1px); } #searchInput { padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 6px; background-color: rgba(248, 250, 252, 0.8); color: #334155; font-size: 12px; font-family: inherit; width: 180px; } #searchInput:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); } .tree-container { flex: 1; padding: 12px; overflow: auto; background-color: rgba(248, 250, 252, 0.5); } .tree ul { list-style-type: none; padding-left: 16px; margin: 0; } .tree li { position: relative; padding: 1px 0; /* 从2px改为1px，减小间距 */ white-space: nowrap; } .tree li::before { content: ""; position: absolute; left: -10px; top: 8px; width: 10px; height: 1px; background-color: var(--tree-line); } .tree li::after { content: ""; position: absolute; left: -10px; top: -2px; width: 1px; height: 100%; background-color: var(--tree-line); } .tree li:last-child::after { height: 10px; } .tree > ul > li::before, .tree > ul > li::after { display: none; } .tree-node { display: flex; align-items: center; cursor: pointer; padding: 2px 4px; /* 从3px改为2px，减小间距 */ border-radius: 4px; transition: background-color 0.2s; } .tree-node:hover { background-color: var(--hover-bg); } .tree-node i { margin-right: 6px; color: var(--text-color); width: 12px; text-align: center; font-size: 10px; } .tree-node .folder { color: #6366f1; } .tree-node .file { color: var(--text-secondary); } .tree-node .toggle { color: #94a3b8; margin-right: 3px; font-size: 9px; } .tree-content { flex: 1; display: flex; align-items: center; min-width: 0; } .tree-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; color: #1e293b; } .tree-desc { color: #64748b; font-size: 10px; margin-left: 8px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .collapsed > ul { display: none; } .collapsed .toggle.fa-chevron-down::before { content: "\f054"; } .highlight { background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); padding: 0 3px; border-radius: 3px; color: #fff; } footer { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 8px 16px; text-align: center; font-size: 10px; border-top: 1px solid var(--border-color); flex-shrink: 0; z-index: 10; } /* 移动端优化 */ @media (max-width: 768px) { body { font-size: 12px; } header h1 { font-size: 16px; } header p { font-size: 11px; } .tree ul { padding-left: 14px; } .tree li { padding: 0.5px 0; /* 进一步减小移动端间距 */ } .tree-name { font-size: 12px; } .tree-desc { font-size: 9px; margin-left: 6px; max-width: 120px; } #searchInput { width: 140px; font-size: 11px; } .controls button { font-size: 11px; padding: 5px 10px; } } /* 超小屏幕优化 */ @media (max-width: 480px) { body { font-size: 13px; } header h1 { font-size: 14px; } header p { font-size: 10px; } .tree ul { padding-left: 12px; } .tree li { padding: 0; /* 超小屏幕最小间距 */ } .tree-node { padding: 1px 3px; /* 进一步减小 */ } .tree-node i { margin-right: 4px; width: 10px; font-size: 9px; } .tree-name { font-size: 11px; } .tree-desc { font-size: 8px; margin-left: 4px; max-width: 90px; } .tree-container { padding: 8px; } .controls { padding: 8px 12px; } #searchInput { width: 120px; font-size: 10px; padding: 4px 8px; } .controls button { font-size: 10px; padding: 4px 8px; } } </style> </head> <body> <div class="container"> <header> <h1>Bash 内建命令树形结构</h1> <p>Bash Built-in Commands Tree Structure</p> </header> <div class="controls"> <div> <button id="expandAll"><i class="fas fa-plus-square"></i>展开</button> <button id="collapseAll"><i class="fas fa-minus-square"></i> 折叠</button> </div> <div> <input type="text" id="searchInput" placeholder="搜索..."> </div> </div> <div class="tree-container"> <div class="tree"> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">1️⃣ 目录与路径 吝</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">1.1 位移</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">cd</span> <span class="tree-desc">change directory ➡️ 进入指定目录</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">pushd</span> <span class="tree-desc">push directory ⬅️ 把目录压栈并进入</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">popd</span> <span class="tree-desc">pop directory 📤 弹出栈顶目录并进入</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">dirs</span> <span class="tree-desc">directory stack 🗂️ 显示目录栈内容</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">1.2 定位</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">pwd</span> <span class="tree-desc">print working directory 📍 打印当前绝对路径</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">1.3 新建</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">mkdir</span> <span class="tree-desc">make directory 📁 内建递归创建目录</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">2️⃣ 变量与属性 ️</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">2.1 声明</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">declare</span> <span class="tree-desc">声明变量作用域/类型 🏷️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">typeset</span> <span class="tree-desc">同declare旧称 🏷️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">local</span> <span class="tree-desc">函数内局部变量 🔒</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">readonly</span> <span class="tree-desc">设变量只读 🔐</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">2.2 导出</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">export</span> <span class="tree-desc">将变量放进环境 🌍</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">2.3 销毁</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">unset</span> <span class="tree-desc">删除变量/函数 🗑️</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">3️⃣ 流程与控制 </span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">3.1 条件</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">if/then/else</span> <span class="tree-desc">分支结构 </span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">case</span> <span class="tree-desc">多模式匹配 🎛️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">[[ ]]</span> <span class="tree-desc">高级测试 🧪</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">(( ))</span> <span class="tree-desc">算术测试 🔢</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">test/[</span> <span class="tree-desc">兼容测试 🧪</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">3.2 循环</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">for</span> <span class="tree-desc">计数/列表循环 🔁</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">while</span> <span class="tree-desc">条件循环 🔁</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">until</span> <span class="tree-desc">直到条件成立 🔁</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">3.3 跳转</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">break</span> <span class="tree-desc">退出当前循环 ⏹️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">continue</span> <span class="tree-desc">跳过本次循环 ⏭️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">return</span> <span class="tree-desc">函数返回 ↩️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">exit</span> <span class="tree-desc">脚本退出 🚪</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">4️⃣ 输入输出 ️️</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">4.1 打印</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">echo</span> <span class="tree-desc">简单输出 📢</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">printf</span> <span class="tree-desc">格式化输出 🎨</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">4.2 读取</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">read</span> <span class="tree-desc">读一行到变量 ⌨️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">mapfile/readarray</span> <span class="tree-desc">读文件到数组 📥</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">5️⃣ 作业与进程 ⚙️</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">5.1 前后台</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">bg</span> <span class="tree-desc">把作业放后台 ⬅️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">fg</span> <span class="tree-desc">把作业拎前台 ➡️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">jobs</span> <span class="tree-desc">查看作业列表 📋</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">5.2 信号</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">kill</span> <span class="tree-desc">发信号 💥</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">suspend</span> <span class="tree-desc">挂起shell ⏸️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">disown</span> <span class="tree-desc">从作业表移除 🔕</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">5.3 等待</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">wait</span> <span class="tree-desc">等子进程结束 ⏳</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">5.4 计时</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">time</span> <span class="tree-desc">统计命令耗时 ⏱️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">times</span> <span class="tree-desc">打印shell累计时间 ⏲️</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">6️⃣ 调试与元信息 </span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">6.1 帮助</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">help</span> <span class="tree-desc">内建帮助系统 ❓</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">type</span> <span class="tree-desc">查看命令类型 🔎</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">command</span> <span class="tree-desc">强制跳过别名/函数 ⚡</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">6.2 启用/禁用</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">enable</span> <span class="tree-desc">开/关内建 🔛</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">builtin</span> <span class="tree-desc">强制用内建 🔧</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">6.3 历史</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">history</span> <span class="tree-desc">命令历史 📜</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">fc</span> <span class="tree-desc">修复/重跑历史 🔁</span> </div> </div> </li> </ul> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7️⃣ 环境与会话 </span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.1 选项</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">set</span> <span class="tree-desc">开关shell选项 ⚙️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">shopt</span> <span class="tree-desc">开关可选特性 🛠️</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.2 别名</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">alias</span> <span class="tree-desc">建别名 🏷️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">unalias</span> <span class="tree-desc">删别名 🗑️</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.3 限制</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">ulimit</span> <span class="tree-desc">资源上限 🚧</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">umask</span> <span class="tree-desc">默认权限掩码 🎭</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.4 登录</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">logout</span> <span class="tree-desc">退出登录shell 🚪</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">login</span> <span class="tree-desc">替换登录（部分系统） 🔑</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.5 执行</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">source/.</span> <span class="tree-desc">当前环境执行脚本 ▶️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">exec</span> <span class="tree-desc">用新进程替换shell 🔄</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.6 哈希</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">hash</span> <span class="tree-desc">缓存命令路径 ⚡</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.7 陷阱</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">trap</span> <span class="tree-desc">捕获信号/退出 🪤</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.8 求值</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">eval</span> <span class="tree-desc">字符串当命令执行 🧙</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.9 假命令</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">true</span> <span class="tree-desc">永远返回0 ✅</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">false</span> <span class="tree-desc">永远返回1 ❌</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">:</span> <span class="tree-desc">空命令（冒号） 🔳</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.10 行编辑器</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">bind</span> <span class="tree-desc">配置readline快捷键 ⌨️</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">caller</span> <span class="tree-desc">打印调用栈（调试） 📞</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.11 补全</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">compgen</span> <span class="tree-desc">生成补全候选 🔤</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">complete</span> <span class="tree-desc">定义补全规则 🧩</span> </div> </div> </li> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">compopt</span> <span class="tree-desc">修改补全行为 🎛️</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.12 协同进程</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">coproc</span> <span class="tree-desc">建立协程管道 🔄</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.13 参数解析</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">getopts</span> <span class="tree-desc">解析位置参数 📑</span> </div> </div> </li> </ul> </li> <li> <div class="tree-node"> <i class="fas fa-folder folder"></i> <div class="tree-content"> <span class="tree-name">7.14 变量列表</span> </div> </div> <ul> <li> <div class="tree-node"> <i class="fas fa-file file"></i> <div class="tree-content"> <span class="tree-name">variables</span> <span class="tree-desc">打印特殊变量说明 📚</span> </div> </div> </li> </ul> </li> </ul> </li> </ul> </div> </div> <footer> <p>© 2025 Bash 内建命令树形结构 | Generated by 凉安</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // 为所有文件夹节点添加折叠/展开功能 const folderNodes = document.querySelectorAll('.tree-node .folder'); folderNodes.forEach(folder => { const node = folder.parentElement; const li = node.parentElement; // 添加折叠/展开图标 const toggleIcon = document.createElement('i'); toggleIcon.className = 'fas fa-chevron-down toggle'; node.insertBefore(toggleIcon, folder); // 添加点击事件 node.addEventListener('click', function(e) { e.stopPropagation(); li.classList.toggle('collapsed'); }); }); // 展开全部按钮 document.getElementById('expandAll').addEventListener('click', function() { document.querySelectorAll('.tree li.collapsed').forEach(li => { li.classList.remove('collapsed'); }); }); // 折叠全部按钮 document.getElementById('collapseAll').addEventListener('click', function() { document.querySelectorAll('.tree li:has(.folder)').forEach(li => { if (!li.parentElement.classList.contains('tree')) { li.classList.add('collapsed'); } }); }); // 搜索功能 document.getElementById('searchInput').addEventListener('input', function(e) { const searchTerm = e.target.value.toLowerCase(); // 清除之前的高亮 document.querySelectorAll('.highlight').forEach(el => { el.classList.remove('highlight'); }); if (searchTerm === '') return; // 搜索并高亮匹配项 document.querySelectorAll('.tree-node').forEach(node => { const text = node.textContent.toLowerCase(); if (text.includes(searchTerm)) { node.querySelector('.tree-name').classList.add('highlight'); // 展开父节点 let parent = node.closest('li'); while (parent && !parent.classList.contains('tree')) { parent.classList.remove('collapsed'); parent = parent.parentElement.closest('li'); } } }); }); }); </script> </body> </html>
)
