开发时，将 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...

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

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) 的回调控制挣钱排序。如果涉及到...

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

由于 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 文件 {...

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

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

一个快速选择文件夹树的组件开发文件树 {代码...}  文件路径：explorer/src/components/select-path-input/index.tsx封装一个泡泡弹窗，弹窗内容为文件树组件 {代码...} 文件路径：explorer/src/components/readdir-tree/index.tsx使用 ul、li、文件夹 icon 的文件树...

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

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

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

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

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