一飛開源，介紹創意、新奇、有趣、實用的免費開源應用、系統、軟體、硬體及技術，一個探索、發現、分享、使用與互動交流的開源技術社群平台。緻力于打造活力開源社群，共建開源新生态！
一、開源項目簡介
基于Koa2 + Vue3.x + Vite3.x + typescript開發的輕量級快捷圖檔管理系統、圖床系統
程式員日常就是寫部落格，當然寫部落格時就會涉及到在博文中插入圖檔，是以往往會使用圖床來進行圖檔資源管理，市面上較流行的圖床是PicGo，是使用electron-vue開發的桌面應用程式，是以每次需要下載下傳安裝并配置圖床，比較麻煩。是以開發了這款輕快圖檔管理系統，是基于vue3.x + typescript + vite + koa + mysql開發的前後端分離圖床系統，使用該系統可以不需要每次都配置圖床。 前端使用 Vue3.x + Vite3.x + typescript + Element-plus, 後端使用 Koa2 + typescript + mysql 進行開發，使用 Jwt + koa-ts-controllers 做登入驗證和權限校驗。
二、開源協定
使用MIT開源協定
三、界面展示
預覽
登入
注冊
忘記密碼
上傳區
圖檔管理
存儲桶管理
相冊管理
記錄檔
個人中心
使用習慣配置
資料統計
使用者管理
存儲桶源管理
字典管理
系統設定
更新日志
四、功能概述
快捷圖床：使用koa + vue3.x + typescript全家桶實作的線上圖床系統，支援線上存儲桶插件開發，目前支援騰訊雲COS、又拍雲Upyun、阿裡雲OSS、github圖床、gitee圖床、本地存儲桶、七牛雲 KODO等線上圖床存儲桶。市面上最火的圖床系統是picgo，但由于picgo是桌面應用程式，換了新電腦需要重新下載下傳安裝配置，十分麻煩，為了解決該問題，故誕生了這款系統。
内置功能
圖檔上傳
支援圖檔多圖上傳、拖拽上傳、粘貼上傳、一鍵複制多種格式的圖檔外鍊。
圖檔管理
多上傳的圖檔進行管理，支援檔案重命名、移入指定相冊、删除圖檔、預覽圖檔等。
存儲桶管理
支援多桶儲存，可同時添加多個對象存儲桶管理，上不封頂，例如：七牛雲對象存儲、阿裡雲對象存儲、騰訊雲對象存儲等等，系統會統計出每個存儲桶下的圖檔數量以及已使用存儲量。同時也支援控制存儲桶是否顯示在上傳區。
相冊管理
支援相冊管理，可以對圖檔進行分組分類管理，便于使用者将不同的圖檔進行分類挂辦理，同時也支援直接将圖檔上傳到相冊中。
記錄檔管理
完整的可視化日志功能，記錄使用者所有操作，友善事件溯源。普通使用者隻能檢視自己的操作記錄，管理者則能檢視所有人員的操作記錄，于此同時資料統計中的貢獻圖的資料來源也是從操作記錄中提取。
個人資訊維護
使用者可以對自己的資訊管理，如頭像(系統内置4組不同次元的頭像供選擇)、昵稱、職業、性别、個人簡介以及個人登入密碼進行維護管理。
資料統計
系統提供了資料統計功能，統計使用者的圖檔數量、存儲桶數量、總占用存儲量、相冊數量以及系統貢獻度資料進行統計。
使用習慣配置
考慮到每個使用者的使用習慣不同，系統提供了使用習慣配置中心，可以對預設複制的圖檔連結格式、自定義連結格式、常用快捷鍵配置以及是否開啟上傳成功提示、複制連結成功提示等配置。
使用者管理
多使用者管理，根據不同的角色可以管理不同的資料，同時使用者可以通過自主注冊或者管理者在管理頁面直接建立。
存儲桶源管理
存儲桶管理是用于管理者對存儲桶源的相關配置進行管理，例如七牛雲對象存儲，需要使用者在界面上感覺出需要填寫哪些資料、哪些資料時必填項、有哪些資料的智能提示，其實就是對存儲桶擁有哪些中繼資料進行配置，于此同時還提供了是否啟用或者禁用的功能，比如某一個對象存儲已經從市面上out，則管理者可以進行禁用操作，這樣使用者就不能建立該類型的存儲桶。
字典管理
對系統中經常使用的一些較為固定的資料進行維護，例如個人中心的職業、使用者性别、存儲桶頁面不同的存儲桶展示不同的圖示等資料維護。
系統設定
對系統中一些常用的資料進行維護，包括系統名稱、系統logo、備案資訊、更新日志、系統上所使用的的圖示的來源進行配置。
權限控制
完整的權限控制功能，不同的角色可配置設定不同的操作權限，控制對應的删除及檢視。
五、技術選型
環境
- Node版本 >= 14.17.6
- Mysql版本 >= 5.7
- typescript版本 >= 4.8.4
安裝
安裝步驟
1. 安裝node 前往node官網下載下傳node.exe并安裝或者使用nrm進行安裝。
2. 安裝git 前往Git官網下載下傳git并安裝，此步可忽略。
3. 安裝typescript、nodemon、ts-node 使用下面的指令全局安裝typescript
npm install typescript -g
npm install nodemon -g
npm install ts-node -g 4. 克隆代碼 使用git clone指令将代碼克隆到本地，或者直接下載下傳壓縮包到本地并解壓
5. 依賴安裝
# 前端依賴安裝
cd client
npm install
# 服務端依賴安裝
cd server
npm install 6. 項目啟動
# 前端項目啟動
cd client
npm run dev
# 服務端啟動
cd server
npm run start 控制台出現如下如所示即代表啟動成功
7. 項目打包部署 koa項目可以不用打包部署，直接将server目錄下的内容所有内容拷貝到伺服器上然後執行上述的安裝步驟。
# 前端項目打包部署
cd client
npm run build 将打包後生成的dist目錄下的所有内容拷貝到web伺服器上。
六、源碼位址
通路一飛開源：https://code.exmay.com/