feat: Added the ability to mount hard drives (#143)

* fix(admin-client): 修改游标遍历方向为降序

* feat(fs): 添加挂载功能

* fix(文件管理器): 移除已挂载磁盘缓存并改进挂载逻辑

* refactor(fs): 重构 indexedDB 操作以支持错误处理和单例模式

* feat(fs): 添加挂载文件夹功能支持

* feat(fs): 实现挂载文件系统的get方法

* feat(文件管理器): 添加本地文件夹图标和支持挂载模式

* feat(fs): 添加卸载挂载点功能

* fix(文件管理器): 修复远程文件处理和挂载功能

* feat(文件系统): 添加对挂载文件系统的支持并优化错误提示

* refactor(fs): 重构文件系统挂载相关代码

* fix(sw): 修正拼写错误，将resposeMountedFs改为responseMountedFs

* feat(用户模块): 添加获取挂载信息功能

* Delete mount.js

* fix(fs): 将挂载路径分隔符从冒号改为大于号

* fix(sw): 修正文件挂载路径的正则表达式匹配问题

* chore: bump version

---------

Co-authored-by: huang yao <5945154+kirakiray@users.noreply.github.com>

Author: kirakiray

dist/hashes.json

@@ -1,6 +1,6 @@
 {
   "name": "noneos",
-  "version": "3.2.12",
+  "version": "3.2.13",
   "description": "A browser-based operating system",
   "type": "module",
   "scripts": {

dist/packages.zip

@@ -89,11 +89,24 @@
                       remoteRoot: 1,
                     });
 
-                    arr.push({
-                      name: rootName,
-                      kind: "dir",
-                      path: e,
-                    });
+                    // 挂载模式
+                    if (rootName.startsWith("$mount-")) {
+                      // 挂载模式
+                      const [mark, reRootName] = rootName.split(">");
+
+                      arr.push({
+                        name: reRootName,
+                        kind: "folder-local",
+                        path: e,
+                      });
+                    } else {
+                      arr.push({
+                        name: rootName,
+                        kind: "dir",
+                        path: e,
+                      });
+                    }
+
                     continue;
                   }
                 }

others/apps/admin/pages/record-backup.html

@@ -107,7 +107,7 @@
                 {{$data.name}}
               </p-menu-item>
             </o-fill>
-            <p-menu-item on:click="openWith('web')">
+            <p-menu-item on:click="openWith('web')" attr:disabled="isRemote">
               <n-local-icon name="tab" slot="prefix"></n-local-icon>
               Web
             </p-menu-item>
@@ -269,6 +269,9 @@
           apps: [], // 所有可用的应用列表
         },
         proto: {
+          get isRemote() {
+            return this.path.startsWith("$user-");
+          },
           async createDir() {
             debugger;
           },
@@ -311,7 +314,11 @@
             const selectedData = this.selecteds[0];
 
             if (data === "web") {
-              window.open("$" + selectedData.path);
+              if (selectedData.path.startsWith("$mount-")) {
+                window.open("/" + encodeURI(selectedData.path));
+                return;
+              }
+              window.open("/$" + encodeURI(selectedData.path));
               return;
             }
 

package.json

@@ -42,6 +42,9 @@
     <o-else-if :value="kind === 'dir'">
       <img src="../sources/list-folder.svg" />
     </o-else-if>
+    <o-else-if :value="kind === 'folder-local'">
+      <img src="../sources/folder-local.svg" />
+    </o-else-if>
     <o-else>
       <img src="../sources/list-file.svg" />
     </o-else>

packages/apps/file-manager.napp/comps/bottom-address.html

@@ -8,6 +8,7 @@
   <l-m src="/packages/comps/user-avatar.html"></l-m>
   <l-m src="/packages/comps/user-name.html"></l-m>
   <l-m src="/packages/comps/user-state.html"></l-m>
+  <l-m src="/packages/pui/button/button.html"></l-m>
   <style>
     :host {
       display: block;
@@ -46,6 +47,10 @@
     .left-bottom {
       margin-top: auto;
     }
+
+    .hide {
+      display: none !important;
+    }
   </style>
   <n-horsp-pannel on:open-dialog="openDialog">
     <div slot="left" class="left-con">
@@ -63,6 +68,32 @@
             <o-fill :value="locals" name="path-item"> </o-fill>
           </p-list>
         </p-list-item>
+        <o-if :value="showMounted">
+          <p-list-item collapse-childs="open" button="suffix">
+            <localized-content style="font-size: 13px; font-weight: 600">
+              <span lang="cn">本机文件夹</span>
+              <span lang="en">Local Folder</span>
+              <span lang="ja">ローカルフォルダ</span>
+            </localized-content>
+            <i toggle-collapse triangle slot="suffix"></i>
+            <p-list slot="childs">
+              <o-fill :value="mounted" name="path-item" fill-key="path">
+              </o-fill>
+              <p-list-item button on:click="mountTab">
+                <n-local-icon
+                  slot="prefix"
+                  name="add"
+                  style="padding-left: var(--padding-left, 8px)"
+                ></n-local-icon>
+                <localized-content>
+                  <span lang="cn">添加</span>
+                  <span lang="en">Add</span>
+                  <span lang="ja">追加</span>
+                </localized-content>
+              </p-list-item>
+            </p-list>
+          </p-list-item>
+        </o-if>
         <p-list-item collapse-childs="open" button="suffix">
           <span style="font-size: 13px; font-weight: 600">
             <localized-content>
@@ -131,6 +162,19 @@
         style="padding-left: var(--padding-left, 8px)"
       ></n-local-icon>
       {{$data.name}}
+
+      <p-button
+        class:hide="!$data.isLocalMount"
+        on:click="$host.unmountTab($data,$event)"
+        size="mini"
+        variant="text"
+        color="normal"
+        style="z-index: 3"
+        slot="suffix"
+        icon
+      >
+        <n-local-icon name="eject"></n-local-icon>
+      </p-button>
     </p-list-item>
   </template>
   <p-dialog :open="showErrorDialog" on:click-mask="showErrorDialog=false">
@@ -140,7 +184,10 @@
 
   <script>
     export default async ({ load, url }) => {
-      const { get } = await load("/packages/fs/main.js");
+      const { get, mount, getMounted, unmount } = await load(
+        "/packages/fs/main.js"
+      );
+      const { confirm } = await load("/packages/pui/util.js");
 
       const { getLocalized } = await load("/packages/i18n/localized-object.js");
 
@@ -190,13 +237,57 @@
           ],
           selectedRootName: null, // 选中的目录的名称
           remotes: [], // 远端设备
+          mounted: [], // 挂载的设备
           showErrorDialog: false,
           dialogData: {
             title: "",
             content: "",
           },
+          showMounted: !!window.showDirectoryPicker, // 是否展示挂载的设备
         },
         proto: {
+          async unmountTab(data, event) {
+            event.stopPropagation();
+
+            const result = await confirm({
+              title: await getLocalized({
+                cn: "确认卸载",
+                en: "Confirm Unmount",
+                ja: "アンマウントを確認",
+              }),
+              content: await getLocalized({
+                cn: `是否确认卸载 ${data.name}？`,
+                en: `Are you sure to unmount ${data.name}?`,
+                ja: `${data.name} をアンマウントしますか？`,
+              }),
+            });
+
+            if (!result) {
+              return;
+            }
+
+            await unmount(data.id);
+            this.loadMounted();
+          },
+          async mountTab() {
+            await mount({
+              save: true,
+            });
+
+            this.loadMounted();
+          },
+          async loadMounted() {
+            const mounted = await getMounted();
+            this.mounted = mounted.map((e) => {
+              return {
+                id: e.id,
+                name: e.name,
+                path: e.path,
+                icon: "ssd",
+                isLocalMount: true,
+              };
+            });
+          },
           openDialog(e) {
             this.showErrorDialog = true;
             this.dialogData.title = e.data.title;
@@ -214,6 +305,7 @@
           },
         },
         async ready() {
+          this.loadMounted();
           const isSafari =
             navigator.userAgent.includes("Safari") &&
             !navigator.userAgent.includes("Chrome");
@@ -279,6 +371,28 @@
                         },
                       ];
                     }
+
+                    // 获取对方挂载信息
+                    remoteUser.getMounted().then((mounteds) => {
+                      mounteds.forEach((mounted) => {
+                        if (
+                          !targetItem.dirs.some((d) => d.path === mounted.path)
+                        ) {
+                          targetItem.dirs.push({
+                            icon: "ssd",
+                            name: mounted.name,
+                            path: mounted.path,
+                          });
+                        } else {
+                          const targetDir = targetItem.dirs.find(
+                            (d) => d.path === mounted.path
+                          );
+                          if (targetDir) {
+                            targetDir.name = mounted.name;
+                          }
+                        }
+                      });
+                    });
                   } else {
                     if (targetItem && targetItem.dirs.length) {
                       targetItem.dirs = [];