开发时，将 username 与 password 通过环境变量读取。本地开发使用 .env.local 控制。生产环境通过 explorer.docker-compose.yml 进行控制。

功能比较简单，在原视频弹窗的基础上使用  useReaddirContext 获取所有视频文件，并使用 Menu 组件创建一个菜单列表。通过点击视频左边的“显示 icon”显示列表。

当前主题默认为 “dard” 暗黑模式。这次将支持“暗黑模式”与“明亮模式”之间的切换。开发创建一个“主题”上下文文件explorer/src/components/change-theme/change-theme-context.tsx {代码...} 再创建一个内联 cookie 的文件explorer/src/components/change-theme/inject-cookie.tsx {代码...} 为 SSR 渲染时获取 cookie 内...

某些情况下，使用终端命令可以更方便的处理一些任务，例如mkdir jpg && mv *.jpg ./jpg：批量移动 jpg 文件rm -rf *.jpg：批量删除文件find、grep 搜索命令开发主要使用下面两个工具WebSocketsocket.iosocket.io-clientXterm.js@xterm/addon-fit：自适应父元素高宽node-ptyWebSocket：作为客户端与服务端的链接基础，方...

Next.js 创建 WebSocket 需要使用 pages router。app router 没有完整的 request 与 response 对象。

添加一个新建文件、编辑文件的功能。实现一些轻文本的编辑任务。开发explorer-manage新建、编辑都使用 node 的 fs.writeFileSync 方法。新增三个方法创建文件获取文件内容写入文件 {代码...} explorer客户端使用 @uiw/react-codemirror 这个代码编辑器，后续还可以添加配套的代码语言支持，方便在线编辑与代码着色。当点...

JavaScript 的 array sort 方法对字符串的排序有些问题。纯数字 {代码...} 字符串 {代码...} 数字加字符串 {代码...} 上面的例子发现，字符串的可以排序正常，数字的 11 会拍在 2 的前面。纯数字的可以通过 sort((a, b) => a - b) 的回调控制挣钱排序。如果涉及到"字符串+数字"的时候，简单的 a - b 无法完成排序任务...

使用 async 命令同步文件。实现备份或移动文件。开发dockerfile安装 async 命令 {代码...} explorer-manage使用 node 的 spawn 模块执行 rsync 命令。 {代码...} 新增两个方法，rsync 与 rsyncMovePath 方法rsync：为简单的命令行封装rsyncMovePath：添加一个当同步完成后，删除原目录的参数 --remove-source-files。exp...

由于 node:alpine 不支持 bash 只有 sh，当使用了 bash 的一些语法时，sh 会报错。要支持 bash 需要 apk install bash，会稍微加大 docker 的镜像体积。参考链接：Docker: How to use bash with an Alpine based docker image?

需要开发机安装 ffmpeg 或 docker 容器内安装 ffmpeg 开发。全环境的 ffmpeg 较大，对最终生成的 docker 镜像的大小影响较大。

预下载 mac 与 linux 版本的 7z 二进制文件，放置于 explorer-manage/src/7zip/linux 与 /mac 目录内。可前往 7z 官方进行下载，下载链接。 也可以使用 7zip-bin 这个依赖，内部包含所有环境可运行的二进制文件。由于项目是由镜像进行运行，使用全环境的包会加大镜像的体积。所以这里单独下载特定环境的下二进制文件，可...

explorer-manager新增依赖 {代码...} node-df 执行 linux 的 df 命令，并将内容格式化为 node 可直接使用结构get-folder-size 快速统计文件夹占用大小创建对应方法分析文件夹大小 {代码...} 执行 df 命令文件explorer-manager/src/df.mjs {代码...} 对应 type 文件 {代码...} explorer读取文件夹大小，一个按钮放置在点...

经过一周的零碎开发，大致完成了雏形。简单完成了文件移动、文件删除、图片预览、视频播放。考虑部署一版看看效果。自建 docker registry 私有仓库储存构建好的镜像创建 Dockerfile，开发机器构建好镜像后上传至私有 docker 镜像仓库NAS 使用 Docker Compose 启动容器。通过私有 docker registry 仓库获取镜像运行预备pa...

Next.js@13 提供了一个叫 server action 的功能，可以省略创建 http 接口的过程，客户端可以直接调用服务端的方法。

一个快速选择文件夹树的组件开发文件树 {代码...}  文件路径：explorer/src/components/select-path-input/index.tsx封装一个泡泡弹窗，弹窗内容为文件树组件 {代码...} 文件路径：explorer/src/components/readdir-tree/index.tsx使用 ul、li、文件夹 icon 的文件树组件ul 被装载时通过传入的 parent\_path 指定的目录...

使用 video.js 这个依赖完成浏览器播放视频资源。尝试了一下，常见资源中，除了 AVI 无法正常播放外，mp4、mkv 都能正常播放与快进。  React 稍微简单配置下即可完成视频播

使用 exifreader 依赖读取图片 Exif 信息。可读取常规 jpeg、png、WebP 等格式。数码相机的 RAW、CR2 均可读取。可在本地浏览器直接运行，不需要上传至服务器进行解析。开发安装依赖 {代码...} 用于将 RAW、CR2 Exif 内 Thumbnail 字段转成 blob 后插入 img 标签内。文件树 {代码...} 文件路径：src/components/img-exif...

使用 Next.js 的 Image 组件显示图片。自带图片压缩生成快速预览的 webp 格式图片使用 antd 的 PreviewGroup 组件实现原图浏览，自带缩小、放大、上一张、下一张等功能功能实现文件树 {代码...} 文件路径：explorer/src/components/preview/ext-rxp.tsx一些判断文件后缀名方法 {代码...} 文件路径：explorer/src/compone...

Next.js 返回文件资源explorer-manager新增依赖 {代码...} file-type：通过 buffer 来读取文件信息ext-name：通过文件后缀名返回文件信息explorer-manager/src/main.mjs 新增方法fsStat单独获取文件 stat 信息 {代码...} getFileDetail获取文件信息，当 file-type 获取失败时使用 ext-name 分析文件后缀名返回信息。 用...

这是由于将 column 与 readdir 的数据放在了同一个 context 内，当修改 readdir 或 column 都会导致所有使用该 context value 的都会触发渲染。即使只使用其中一项，例如单用 readdir，没有使用 column。

进行动态控制。这部分逻辑在服务端渲染时，服务端是不知道当前设备的 width，所以首次进入或主动刷新浏览器时会出现布局混乱。需要等待客户端重新渲染后才会正常显示。

添加页脚功能参考 MacOS 的 Finder 页脚格式显示当前文件夹下有多少项目当前磁盘可用空间（该功能暂缓再实现）table 与 card 样式改变按钮文件树 {代码...} 文件路径：explorer/src/app/path/[[...path]]/layout-footer.tsx页脚组件，目前包含当前页面项目总数、切换 table 与 card 呈现 {代码...} 文件路径：explorer/s...

面包屑导航url：domain/path/[[…path]]目前可以通过 url 的的结构信息定位当前目录的情况，但是无法快速的前进与后退。所以使用“面包屑”来完成这一功能功能实现安装依赖 {代码...} 文件树 {代码...} 文件路径：explorer/src/app/path/api/readdir/route.ts新增一个获取指定目录的接口 {代码...} 文件路径：explorer/src/...

Node.js安装依赖 {代码...} 安装 node types 类型描述，20+，不影响实际运行，提升开发体验。获取指定路径下文件夹、文件方法使用 Node.js 的 fs.readdirSync 同步方法读取指定路径下的内容功能实现文件树 {代码...} 文件路径：/explorer-manager/src/format-path.mjs {代码...} formatPath 用于组合路径，可通过环境变...

安装依赖 {代码...} 修改文件目录树 {代码...} 基础组件Ant Design 注册文件路径：/explorer/src/lib/antd-registry.tsx {代码...} AntdStyledComponentsRegistry：配置 Antd SSRAntdConfigProvider：配置“暗黑主题”、默认使用 small 样式AntdRegistry：组合 SSR、主题、Antd App Context Provider 组件参考链接 - 使用 ...

基础框架搭建创建目录项目顶层文件夹 {代码...} Next.js 文件夹 {代码...} Node.js 文件夹 {代码...} 安装 Node.js使用 nvm 管理 Node.js {代码...} 安装 Node.js {代码...} 查看 node 版本 {代码...} 安装 pnpm {代码...} 配置加速源 {代码...} 初始化跟项目 package.json 文件进入项目根目录 {代码...} 初始化 package...

尝试了一些常用的文件资源浏览器，总有一些不痛快本地软件使用 SMB 共享链接，查看大量图片时缩略图显示缓慢基于网页的功能又没有那么丰富远程桌面响应与延迟所以撸起袖子开发一个运行在 NAS 的“远程文件资源管理器”初期功能文件/文件夹列表增/删/移统计大小、文件数呈现样式列表卡片图片预览快速预览缓存显示 exif 信息...