修复若干问题并优化文件管理界面

oi-contrib · Feb 5, 2025 · a224197 · a224197
1 parent 45ec761
commit a224197
Show file tree

Hide file tree

Showing 16 changed files with 1,452 additions and 815 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -15,4 +15,15 @@ v0.1.0:
             * 双击文件打开
               （包括：视频）
             * 右键事件
-            * 底部操作按钮
+            * 底部操作按钮
+v0.2.0:
+    date:2025-02-05
+    changes:
+      - 修复bug
+        1、修复文件夹错误显示可直接下载问题
+      - 优化改造
+        1、文件列表界面优化
+      - 新增功能
+        1、文件管理界面
+            * 双击文件打开
+              （包括：文本、图片）
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# [File System](https://github.com/zxl20070701/FileSystem)
+# [File System](https://github.com/oi-contrib/FileSystem)
 🔥文件管理系统 ✨☁️📁✨ 支持：文件或文件夹的上传、下载、ZIP文件压缩与解压、在线查看等
 
 ## 如何开发

diff --git a/client/htmls/index/mod.css b/client/htmls/index/mod.css
@@ -47,14 +47,14 @@ body {
 /* 内容列表 */
 .filelist {
     position: fixed;
-    left: 20px;
-    top: 90px;
+    left: 50px;
+    top: 70px;
     outline: 1px solid #9E9E9E;
-    width: calc(100vw - 40px);
-    height: calc(100vh - 160px);
+    width: calc(100vw - 100px);
+    height: calc(100% - 140px);
     overflow: auto;
-    padding: 20px 50px;
-    border-radius: 5px;
+    padding: 20px;
+    border-radius: 0 0 5px 5px;
     background-color: #fcfcfc;
 }
 
@@ -98,6 +98,9 @@ body {
     background-size: auto 90%;
     padding-left: 30px;
     color: #000000;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .filelist>table>tbody>tr>th.name>span {
@@ -122,7 +125,7 @@ body {
 
 /* 底部按钮 */
 .mult-bottom-btns {
-    width: 100vw;
+    width: 100%;
     height: 70px;
     position: fixed;
     left: 0;
@@ -147,6 +150,12 @@ body {
     display: inline-block;
 }
 
+.mult-bottom-btns>.button.exit {
+    background-color: red;
+    color: white;
+    outline: none;
+}
+
 .mult-bottom-btns>.button:hover {
     font-weight: 800;
     outline-color: black;
@@ -244,24 +253,38 @@ body {
 /* 显示文件 */
 .showfile-view {
     position: fixed;
-    left: 50px;
-    bottom: 50px;
-    width: 400px;
-    height: 300px;
+    left: 20px;
+    top: 20px;
+    width: calc(100% - 40px);
+    height: calc(100% - 40px);
     background-color: #ffffff;
     box-shadow: 0 0 5px 3px #9E9E9E;
+    text-align: left;
+    z-index: 2;
+    border-radius: 10px;
+}
+
+.showfile-mask {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.4);
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
 }
 
 .showfile-view>header>h2 {
     background-size: auto 70%;
-    background-position: 5px center;
+    background-position: 10px center;
     background-repeat: no-repeat;
-    line-height: 30px;
-    font-size: 14px;
+    line-height: 40px;
+    font-size: 16px;
     font-family: cursive;
-    padding-left: 35px;
+    padding-left: 50px;
     background-color: #b0c9dd;
     background-image: url("../../images/logo.png");
+    border-radius: 10px 10px 0 0;
 }
 
 .showfile-view>header>.close {
@@ -270,12 +293,75 @@ body {
     background-image: url("../../images/close-btn.png");
     font-size: 0;
     position: absolute;
-    right: 10px;
+    right: 30px;
     top: 0;
     cursor: pointer;
 }
 
-.showfile-view>header>.content {
+.showfile-view>.content {
     width: 100%;
-    height: 270px;
+    height: calc(100% - 40px);
+}
+
+.showfile-view>.content.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.showfile-view>.content.plain {
+    margin: 0;
+    padding: 10px;
+    overflow: auto;
+}
+
+.showfile-view>.content.plain>pre {
+    user-select: text;
+    white-space: break-spaces;
+}
+
+.showfile-view>.content.img>img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+/* 无文件 */
+.filelist>.blank {
+    text-align: center;
+}
+
+.filelist>.blank>.title {
+    text-align: center;
+    font-weight: 700;
+    color: #1a1a1a;
+    font-size: 36px;
+    line-height: 48px;
+    padding-top: 50px;
+}
+
+.filelist>.blank>.tips {
+    text-align: center;
+    line-height: 30px;
+    font-size: 22px;
+    color: #1a1a1a;
+    font-weight: 300;
+    margin: 10px 0;
+}
+
+.filelist>.blank>.file {
+    line-height: 50px;
+    display: inline-block;
+    border: 1px solid gray;
+    background-image: url("../../images/addFile.svg");
+    background-repeat: no-repeat;
+    background-position: 5px center;
+    background-size: auto 70%;
+    padding-left: 40px;
+    padding-right: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.filelist>.blank>.file:hover {
+    text-decoration: underline;
 }
diff --git a/client/htmls/index/mod.html b/client/htmls/index/mod.html
@@ -17,7 +17,7 @@ <h2>
         </div>
     </div>
     <div class="filelist">
-        <table>
+        <table ng-if="currentPath != './' || fileList.length>0">
             <thead>
                 <tr>
                     <th>
@@ -32,20 +32,16 @@ <h2>
                     <th>
                         大小
                     </th>
-                    <th>
-                        操作
-                    </th>
                 </tr>
             </thead>
             <tbody>
-                <tr ng-dblclick="openBtn()" class="folder">
+                <tr ng-if="currentPath != './'" ng-dblclick="openBtn()" class="folder">
                     <th class="name">..</th>
                     <th>-</th>
                     <th>
                         文件夹
                     </th>
                     <th>-</th>
-                    <th>-</th>
                 </tr>
                 <tr ng-repeat="item in fileList" draggable='true' ui-dragstart="doDragstart($event,item)"
                     ng-dblclick="openBtn(item)" ng-click="doSelect($index)"
@@ -55,10 +51,16 @@ <h2>
                     <th>{{item.mtime}}</th>
                     <th>{{item.isDirectory?'文件夹':item.type}}</th>
                     <th>{{item.size||"-"}}</th>
-                    <th>-</th>
                 </tr>
             </tbody>
         </table>
+        <div class="blank" ng-if="fileList.length<=0">
+            <h2 class="title">列表为空</h2>
+            <div class="tips">
+                你可以拖拽文件或文件夹到这里，或直接选择文件夹上传～
+            </div>
+            <label class="file" for="selectFolder">选择文件夹</label>
+        </div>
     </div>
 
     <!-- 底部操作按钮 -->
@@ -68,7 +70,7 @@ <h2>
         <label class="button" for="selectFile">上传文件</label>
         <label class="button" for="selectFolder">上传文件夹</label>
         <button class="button" ng-click="doPaste()">粘贴</button>
-        <button class="button" ng-click="doExit()">退出</button>
+        <button class="button exit" ng-click="doExit()">退出</button>
     </div>
 
     <!-- 辅助元素 -->
@@ -110,7 +112,7 @@ <h2>
             <li ng-click="doCut()">
                 剪切
             </li>
-            <li ng-click="doDownload()">
+            <li ng-click="doDownload()" ng-if="rightmenu.type!='folder'">
                 下载到本地
             </li>
             <li ng-click="doZip()" ng-if="!rightmenu.isZip &&  rightmenu.type=='folder'">
@@ -142,11 +144,25 @@ <h2>
     </div>
 
     <!-- 统一弹框 -->
+    <div ng-if="showFileType" class="showfile-mask"></div>
     <div ng-if="showFileType" class="showfile-view">
         <header>
             <h2>打开文件</h2>
             <div class="close" title="关闭" ng-click="hiddenShowfile()"></div>
-            <video ng-if="videoSrc" class="content" controls src="{{videoSrc}}" autoplay></video>
         </header>
+
+        <!-- 视频 -->
+        <video ng-if="videoSrc" class="content" controls src="{{videoSrc}}" autoplay></video>
+
+        <!-- 文本 -->
+        <div ng-if="plainContent" class="content plain">
+            <pre>{{plainContent}}</pre>
+        </div>
+
+        <!-- 图片 -->
+        <div ng-if="imgSrc" class="content img center">
+            <img src="{{imgSrc}}" />
+        </div>
+
     </div>
 </div>
diff --git a/client/htmls/index/mod.js b/client/htmls/index/mod.js
@@ -78,14 +78,28 @@ ctrlapp.register.controller('IndexController', ['$scope', '$fetch', '$url', '$up
 
                 // 视频
                 if (/^video/.test(item.type)) {
-
-                    console.log($scope.currentPath + item.name)
                     $scope.showFileType = true;
                     $scope.videoSrc = "/" + window.systemInfo.data.folder + "/" + $scope.currentPath + item.name;
                 }
 
+                // 文本
+                else if (/^text/.test(item.type) || ['application/json', 'application/javascript'].indexOf(item.type) > -1) {
+                    $fetch.get("/handler/readPlainFile?fullPath=" + $scope.currentPath + item.name).then(function (res) {
+                        $scope.showFileType = true;
+                        $scope.plainContent = res.msg;
+                        $scope.$digest();
+                    });
+                }
+
+                // 图片
+                else if (/^image/.test(item.type)) {
+                    $scope.showFileType = true;
+                    $scope.imgSrc = "/" + window.systemInfo.data.folder + "/" + $scope.currentPath + item.name;
+                }
+
                 // 否则还没有支持
                 else {
+                    // console.log(item)
                     alert("当前类型文件打开方式未支持！");
                 }
             }
@@ -105,6 +119,8 @@ ctrlapp.register.controller('IndexController', ['$scope', '$fetch', '$url', '$up
     $scope.hiddenShowfile = function () {
         $scope.showFileType = false;
         $scope.videoSrc = false;
+        $scope.plainContent = "";
+        $scope.imgSrc = false;
     };
 
     $scope.doExit = function () {

diff --git a/client/images/addFile.svg b/client/images/addFile.svg
diff --git a/client/index.html b/client/index.html
@@ -22,14 +22,15 @@
             width: 160px;
             line-height: 30px;
             position: fixed;
-            background-color: red;
+            background-color: #607D8B;
             text-align: center;
             color: white;
-            outline: 2px dashed red;
+            outline: 2px dashed #607D8B;
             width: 200px;
-            transform: rotate(-45deg);
-            right: -40px;
-            bottom: 44px;
+            transform: rotate(45deg);
+            right: -45px;
+            top: 45px;
+            z-index: 1;
         }
     </style>
     <script>
@@ -42,7 +43,7 @@
 <body>
     <div ui-view></div>
     <script src="./libs/preload.js"></script>
-    <a href="https://github.com/zxl20070701/FileSystem" target="_blank" class="fork">
+    <a href="https://github.com/oi-contrib/FileSystem" target="_blank" class="fork">
         Fork me on Github
     </a>
 </body>