開源軟件 | 使用可視化界面自定義輸出帶註釋的項目文件樹形結構

掃描目錄，分析文件結構和統計信息，給任意文件添加備註，導出帶註釋的樹形文本和其它多種數據格式，大大方便書寫技術文檔。css

若是你須要它，你會很愛它。若是你不須要，可能永遠不會須要。html

Github：folder-explorer
碼雲：folder-explorer

開發這個軟件的初衷是爲了方便我書寫個人項目文檔，其中有一部份內容根據用戶的反饋來看，須要詳細展現項目的重要目錄分別的做用。vue

我找了一下發現能實現導出這類樹形結構文字的項目大體有兩種，一類是網絡上分享的腳本，一類是能夠讀取開源倉庫信息的在線工具。git

個人大體需求是，1 掃描目錄 2 編輯註釋 3 導出美觀的結構圖 4 能夠隱藏我但願忽略的文件。現有的方案顯然都不方便，因此我忙裏偷閒製做了這個軟件。github

下載

macOS | windows | Linuxvue-cli

releasesjson

功能

掃描指定的目錄（支持拖拽）以及再次掃描當前結果中的指定目錄
展現文件結構的樹形統計，支持添加註釋，隱藏單個文件或者文件夾內容
文件類型統計
文件體積分佈統計
導出文字構成的樹形結構圖，支持註釋和自動對齊，支持自定義內容格式
導出 json 文件和 xml 文件供其餘軟件或者程序使用
導出 xmind 結構圖，支持自定義節點、label 和註釋的內容格式化
自定義導出文件的名稱預設
註釋信息記憶功能
個性化設置的備份和導入
其它豐富的設置選項

使用場景

項目文檔書寫，附上文件結構和註釋能夠更清晰地讓別人上手項目
展現課程目錄，若是你是講師，能夠一口氣將你的課程全部章節生成樹形結構展現
統計某個資源文件夾中的文件大小分佈，例如分析你的照片文件夾，或者一目瞭然磁盤裏每部電影占了多大空間

技術方案

vue-cli3 生成的基礎項目，使用 vue-cli-plugin-electron-builder 將其轉化爲可使用 electron 打包的桌面項目。windows

詳細功能介紹

全部演示基於下述的目錄結構：bash

├─.DS_Store 
├─.browserslistrc 
├─.gitignore 
├─README.md 
├─babel.config.js 
├─package.json 
├─postcss.config.js 
├─public 
│ ├─favicon.ico 
│ └─index.html 
├─src 
│ ├─App.vue 
│ ├─assets 
│ │ └─sys 
│ │   └─logo 
│ │     └─w200.png 
│ ├─components 
│ │ └─HelloWorld.vue 
│ ├─layout 
│ │ └─headerAside 
│ │   ├─components 
│ │   │ ├─aside 
│ │   │ │ ├─index.vue 
│ │   │ │ └─style.scss 
│ │   │ └─header 
│ │   │   ├─index.vue 
│ │   │   └─style.scss 
│ │   └─index.vue 
│ └─main.js 
└─yarn.lock 
複製代碼

編輯器

展開和摺疊節點

移除節點

添加註釋

導出的結果：babel

├─README.md --------------- // 介紹
├─babel.config.js 
├─package.json 
├─postcss.config.js 
├─public ------------------ // 公共資源
│ ├─favicon.ico 
│ └─index.html 
├─src 
│ ├─App.vue --------------- // 根組件
│ ├─assets 
│ │ └─sys 
│ │   └─logo 
│ │     └─w200.png 
│ ├─components 
│ │ └─HelloWorld.vue 
│ ├─layout 
│ │ └─headerAside 
│ │   ├─components 
│ │   │ ├─aside 
│ │   │ │ ├─index.vue 
│ │   │ │ └─style.scss 
│ │   │ └─header 
│ │   │   ├─index.vue 
│ │   │   └─style.scss 
│ │   └─index.vue 
│ └─main.js 
└─yarn.lock 
複製代碼