云存儲管理 VSCode 擴(kuò)展版上線啦~~~
?? ?? ?? 在 VSCode 上也能管理你的云存儲啦！?。?/p>
?
?
?
?
安裝
Github =>?https://github.com/lxfriday/cloud-storage-dashboard
vscode market =>?https://marketplace.visualstudio.com/items?itemName=lxfriday.cloud-storage-dashboard
擴(kuò)展商店搜索?云存儲管理，點(diǎn)擊安裝。
使用
首次使用需要輸入七牛云平臺的 ak、sk：
輸入正確的 sk、sk 之后，點(diǎn)擊進(jìn)入七牛云即可進(jìn)入管理頁面。
平臺支持情況
?? 七牛云
騰訊云
阿里云
又拍云
青云
亞馬遜 S3
?? 其他（逐步納入開發(fā)計劃）
功能介紹
云存儲管理擴(kuò)展目前已經(jīng)能覆蓋到對云存儲文件的全方位操作
上傳
單、多文件上傳
文件夾上傳
拖拽上傳
粘貼上傳
截圖上傳
從 URL 直接上傳文件
上傳完成時自動復(fù)制
下載
自定義下載目錄
單、多文件下載
一鍵導(dǎo)出文件列表
上傳、下載管理
進(jìn)度管理
取消上傳、下載
文件操作
單擊文件就可以選中某個文件
右鍵文件，點(diǎn)擊全選，則可以選中文件夾下的所有文件
批量選擇
重命名
移動
刪除
CDN 刷新
同時對多文件刪除、刷新 CDN
搜索
文件搜索
文件夾搜索
不區(qū)分大小寫搜索
文件夾
支持文件夾模式顯示
對文件夾刷新 CDN
賬號管理（key 管理）
可以同時打開多個 tab
登錄過之后自動保存
設(shè)置
顯示時啟、停用 HTTPS 鏈接
上傳是否包含原文件名
刪除時可以不需要確認(rèn)直接刪除
復(fù)制到剪切板的格式可以是 url 或者 markdown 格式
自己指定文件下載目錄
自定義擴(kuò)展右下角的背景圖
登錄
輸入 ak、sk 和 別名即可進(jìn)入對應(yīng)平臺的云存儲管理，別名可以理解為就是給這次登錄取個名字，后面選擇登錄的時候方便標(biāo)識
在最下面已登錄中可以看到歷史登錄成功過的記錄（都是在本地的，放心沒有后門）
主功能界面 - 存儲空間
對云存儲的管理基本都在 存儲空間下的對應(yīng) bucket 完成，選擇某個 bucket 就可以對 bucket 里面的文件進(jìn)行相應(yīng)操作。
關(guān)于搜索
各云平臺本不提供搜索能力，搜索的實(shí)現(xiàn)依賴于本地會對 bucket 內(nèi)的文件信息做同步，同步完成之后，本地會最多存儲一個 bucket 內(nèi) 10w 條文件信息（是文件信息不是文件），這些文件信息有兩個作用。一個是用來作為提供搜索服務(wù)，另一個作用是依據(jù)各文件的 key 分析出 bucket 內(nèi)的虛擬文件夾信息，從而提供給前端頁面顯示文件夾。
搜索關(guān)鍵詞不區(qū)分大小寫
可以依據(jù)文件名中的關(guān)鍵字搜索文件
也可以依據(jù)文件夾名，直接搜索文件夾下面的所有文件（最多返回 1000 個）
關(guān)于文件夾
由于各云平臺存儲文件的時候采用的是 k-v 存儲結(jié)構(gòu)，實(shí)際上是不存在文件夾概念的，為了方便管理，也給出了解決方案，就是 key 中使用?/?來區(qū)分文件夾，注意這只是管理層面的區(qū)分。那么依據(jù)?/?就有可以拆分出一層一層的虛擬文件夾。
對于七牛而言，每次獲取文件信息的時候最多只會返回 1000 條數(shù)據(jù)，而其返回的文件夾信息是依據(jù)這 1000 條數(shù)據(jù)分析得到的文件夾，所以是不完整的，因?yàn)椴乓肓?本地 bucket 同步?的概念。本地 bucket 同步會最多同步 bucket 內(nèi) 10w 條文件信息，并且存儲在本地，從這 10w 條數(shù)據(jù)中分析出 bucket 內(nèi)的文件夾概念，再返回給前端，來顯示出更完善的文件夾。
本地 bucket 同步只是擴(kuò)大了分析樣本的數(shù)量，如果 bucket 內(nèi)的文件量大于 10w 條，依然會可能會存在文件夾不對的情況。
關(guān)于創(chuàng)建、變更或者刪除文件之后搜索會出現(xiàn)不同步的情況
上面提到了搜索的原理，簡而言之本地會存儲 bucket 內(nèi)的文件信息，如果創(chuàng)建變更刪除文件，本地同步的 bucket 信息沒那么快同步下來，默認(rèn)策略是隔 1 個小時會同步一次 bucket。
當(dāng)然如果你想要立即獲得最新的搜索信息，你可以把鼠標(biāo)放到搜索條左邊的三個點(diǎn)，然后點(diǎn)擊?強(qiáng)制同步本地 bucket 信息，來讓擴(kuò)展后臺立即執(zhí)行對 bucket 內(nèi)文件的同步。
同步的時候，左下角會提示你是否正在進(jìn)行同步，等同步進(jìn)行完成之后再搜索就可以獲得最新的 bucket 內(nèi)文件信息了。
源碼開發(fā)
這個項目的源碼難度比較大，難點(diǎn)在于需要理解內(nèi)部的一些處理邏輯。
npm run ins?安裝依賴同時安裝 擴(kuò)展 和 react-app 兩個子項目的依賴
npm run dev?啟動 react-app 應(yīng)用服務(wù)器F5?啟動 擴(kuò)展調(diào)試點(diǎn)擊右下角【云存儲管理進(jìn)入頁面】
上述過程一定要先執(zhí)行?npm run dev?再按?F5。因?yàn)?npm run dev?會生成一個公共端口供擴(kuò)展端和 react-app 端一起使用。如果先按?F5?啟動擴(kuò)展，則擴(kuò)展啟動之后加載的端口會與 react-app 服務(wù)器對應(yīng)的端口不一致。
技術(shù)棧
擴(kuò)展端
ts
axios
react-app
react
react-router
redux
antd
關(guān)于擴(kuò)展端和 react-app 協(xié)同工作
兩端的交互依賴于?postMessage，也就是直接傳遞消息來實(shí)現(xiàn)數(shù)據(jù)傳遞，區(qū)別于傳統(tǒng)前端通過網(wǎng)絡(luò)請求獲取數(shù)據(jù)。內(nèi)部封裝了?messageAdaptor.jsx?來實(shí)現(xiàn)雙端便捷通信，使用起來非常簡單。
構(gòu)建&發(fā)布
npm run build?進(jìn)行 extension(ts) 和 前端(react-app) 的編譯處理npm run package?編譯并打包(vsce 自動打包)
Roadmap
see?todo
Repos
Github =>?https://github.com/lxfriday/cloud-storage-dashboard
Gitee =>?https://gitee.com/lxfriday/vscode-cloud-storage-dashboard
vscode market =>?https://marketplace.visualstudio.com/items?itemName=lxfriday.cloud-storage-dashboard
