feat: file explorer

surunzi · surunzi · commit ec9c1840797f · 2025-01-13T18:09:15.000+08:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" spellcheck="false">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "globals": "^15.11.0",
     "licia": "^1.46.0",
     "luna-data-grid": "^1.3.0",
-    "luna-file-list": "^0.2.0",
+    "luna-file-list": "^0.3.0",
     "luna-icon-list": "^0.2.2",
     "luna-image-viewer": "^0.5.2",
     "luna-logcat": "^0.5.1",
@@ -61,7 +61,7 @@
     "luna-performance-monitor": "^1.2.1",
     "luna-setting": "^2.0.1",
     "luna-tab": "^0.3.2",
-    "luna-toolbar": "^0.9.0",
+    "luna-toolbar": "^0.9.1",
     "mobx": "^6.13.5",
     "mobx-react-lite": "^4.0.7",
     "protobufjs": "^7.4.0",
diff --git a/src/common/langs/en-US.json b/src/common/langs/en-US.json
@@ -119,5 +119,13 @@
   "terminal": "Terminal",
   "tools": "Tools",
   "ok": "OK",
-  "cancel": "Cancel"
+  "cancel": "Cancel",
+  "back": "Back",
+  "forward": "Forward",
+  "up": "Up",
+  "iconView": "Icon View",
+  "listView": "List View",
+  "size": "Size",
+  "dateModified": "Date Modified",
+  "directory": "Directory"
 }
diff --git a/src/common/langs/zh-CN.json b/src/common/langs/zh-CN.json
@@ -119,5 +119,13 @@
   "terminal": "终端",
   "tools": "工具",
   "ok": "确定",
-  "cancel": "取消"
+  "cancel": "取消",
+  "back": "返回",
+  "forward": "前进",
+  "up": "上一级",
+  "iconView": "图标视图",
+  "listView": "列表视图",
+  "size": "大小",
+  "dateModified": "修改日期",
+  "directory": "文件夹"
 }
diff --git a/src/main/lib/adb/file.ts b/src/main/lib/adb/file.ts
@@ -1,7 +1,6 @@
 import { Client } from '@devicefarmer/adbkit'
 import fs from 'node:fs'
 import { handleEvent } from '../util'
-import map from 'licia/map'
 
 let client: Client
 
@@ -25,12 +24,23 @@ async function readDir(deviceId: string, path: string) {
   const device = await client.getDevice(deviceId)
   const files: any[] = await device.readdir(path)
 
-  return map(files, (file) => {
-    return {
+  const ret: any[] = []
+  for (let i = 0, len = files.length; i < len; i++) {
+    const file = files[i]
+    const item: any = {
       name: file.name,
-      directory: file.isDirectory(),
+      directory: !file.isFile(),
+      mtime: new Date(file.mtimeMs),
     }
-  })
+
+    if (!item.directory) {
+      item.size = file.size
+    }
+
+    ret.push(item)
+  }
+
+  return ret
 }
 
 export async function init(c: Client) {
diff --git a/src/renderer/icon.css b/src/renderer/icon.css
diff --git a/src/renderer/icon/arrow-left.svg b/src/renderer/icon/arrow-left.svg
@@ -1,6 +1,6 @@
-<svg t="1736740111657" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="3268" width="200" height="200">
+<svg t="1736759730642" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="3609" width="200" height="200">
   <path
-    d="M250.496 544l233.408 233.344-45.312 45.248-296.96-297.024a19.2 19.2 0 0 1 0-27.2l296.96-296.96 45.312 45.184L250.496 480H896v64H250.496z"
-    fill="#000000" fill-opacity=".9" p-id="3269"></path>
+    d="M266.986667 557.738667l198.634666 198.656-60.330666 60.330666L103.594667 515.029333 405.290667 213.333333l60.330666 60.330667-198.741333 198.741333h653.44v85.333334H266.986667z"
+    p-id="3610"></path>
 </svg>
diff --git a/src/renderer/icon/arrow-right.svg b/src/renderer/icon/arrow-right.svg
@@ -1,6 +1,6 @@
-<svg t="1736740128193" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="3415" width="200" height="200">
+<svg t="1736759766116" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="3903" width="200" height="200">
   <path
-    d="M773.504 480L540.096 246.656l45.248-45.248 297.088 297.024a19.2 19.2 0 0 1 0 27.136l-297.088 297.088-45.248-45.248L773.504 544H128v-64h645.504z"
-    fill="#000000" fill-opacity=".9" p-id="3416"></path>
+    d="M756.928 551.68l-198.656 198.656L618.624 810.666667 920.32 508.970667 618.624 207.274667l-60.352 60.330666 198.741333 198.741334H103.573333v85.333333h653.354667z"
+    p-id="3904"></path>
 </svg>
diff --git a/src/renderer/icon/arrow-up.svg b/src/renderer/icon/arrow-up.svg
@@ -1,6 +1,6 @@
-<svg t="1736740139763" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="3562" width="200" height="200">
+<svg t="1736759746597" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="3756" width="200" height="200">
   <path
-    d="M480 250.496L246.656 483.904l-45.312-45.248 297.088-297.088a19.2 19.2 0 0 1 27.136 0l297.024 297.088-45.248 45.248L544 250.496V896h-64V250.496z"
-    fill="#000000" fill-opacity=".9" p-id="3563"></path>
+    d="M554.666667 264l198.656 198.634667 60.330666-60.330667L511.957333 100.608 210.261333 402.304l60.330667 60.330667L469.333333 263.893333V917.333333h85.333334V264z"
+    p-id="3757"></path>
 </svg>
diff --git a/src/renderer/icon/grid.svg b/src/renderer/icon/grid.svg
@@ -0,0 +1,6 @@
+<svg t="1736757643680" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="12480" width="200" height="200">
+  <path
+    d="M426.666667 85.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667v298.666667c0 25.6 17.066667 42.666667 42.666667 42.666666h298.666667c25.6 0 42.666667-17.066667 42.666666-42.666666V128c0-25.6-17.066667-42.666667-42.666666-42.666667zM384 384H170.666667V170.666667h213.333333v213.333333zM896 85.333333h-298.666667c-25.6 0-42.666667 17.066667-42.666666 42.666667v298.666667c0 25.6 17.066667 42.666667 42.666666 42.666666h298.666667c25.6 0 42.666667-17.066667 42.666667-42.666666V128c0-25.6-17.066667-42.666667-42.666667-42.666667z m-42.666667 298.666667h-213.333333V170.666667h213.333333v213.333333zM896 554.666667h-298.666667c-25.6 0-42.666667 17.066667-42.666666 42.666666v298.666667c0 25.6 17.066667 42.666667 42.666666 42.666667h298.666667c25.6 0 42.666667-17.066667 42.666667-42.666667v-298.666667c0-25.6-17.066667-42.666667-42.666667-42.666666z m-42.666667 298.666666h-213.333333v-213.333333h213.333333v213.333333zM426.666667 554.666667H128c-25.6 0-42.666667 17.066667-42.666667 42.666666v298.666667c0 25.6 17.066667 42.666667 42.666667 42.666667h298.666667c25.6 0 42.666667-17.066667 42.666666-42.666667v-298.666667c0-25.6-17.066667-42.666667-42.666666-42.666666z m-42.666667 298.666666H170.666667v-213.333333h213.333333v213.333333z"
+    p-id="12481"></path>
+</svg>
diff --git a/src/renderer/icon/list.svg b/src/renderer/icon/list.svg
@@ -0,0 +1,6 @@
+<svg t="1736757889458" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="17310" width="200" height="200">
+  <path
+    d="M192 192c0 53.02-42.98 96-96 96S0 245.02 0 192s42.98-96 96-96 96 42.98 96 96zM96 416c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z m0 320c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z m192-472h704c17.674 0 32-14.326 32-32V152c0-17.674-14.326-32-32-32H288c-17.674 0-32 14.326-32 32v80c0 17.674 14.326 32 32 32z m0 320h704c17.674 0 32-14.326 32-32v-80c0-17.674-14.326-32-32-32H288c-17.674 0-32 14.326-32 32v80c0 17.674 14.326 32 32 32z m0 320h704c17.674 0 32-14.326 32-32v-80c0-17.674-14.326-32-32-32H288c-17.674 0-32 14.326-32 32v80c0 17.674 14.326 32 32 32z"
+    fill="" p-id="17311"></path>
+</svg>
diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
@@ -19,6 +19,7 @@ import 'luna-icon-list/css'
 import 'luna-file-list/css'
 import './luna.scss'
 import LunaModal from 'luna-modal'
+import LunaFileList from 'luna-file-list'
 
 function renderApp() {
   const container: HTMLElement = document.getElementById('app') as HTMLElement
@@ -51,6 +52,15 @@ if (isDev()) {
     ok: t('ok'),
     cancel: t('cancel'),
   })
+  LunaFileList.i18n.locale('en-US')
+  LunaFileList.i18n.set('en-US', {
+    name: t('name'),
+    size: t('size'),
+    type: t('type'),
+    dateModified: t('dateModified'),
+    directory: t('directory'),
+    file: t('file'),
+  })
 
   document.body.classList.add(`platform-${isMac ? 'mac' : 'windows'}`)
 
diff --git a/src/renderer/main/components/file/File.module.scss b/src/renderer/main/components/file/File.module.scss
@@ -0,0 +1,12 @@
+.path {
+  flex-grow: 1;
+  input {
+    width: 100%;
+  }
+}
+
+.file-list {
+  :global(.luna-data-grid) {
+    border: none !important;
+  }
+}
diff --git a/src/renderer/main/components/file/File.tsx b/src/renderer/main/components/file/File.tsx
@@ -1,30 +1,91 @@
 import { observer } from 'mobx-react-lite'
-import LunaToolbar from 'luna-toolbar/react'
+import LunaToolbar, {
+  LunaToolbarInput,
+  LunaToolbarSeparator,
+} from 'luna-toolbar/react'
 import LunaFileList from 'luna-file-list/react'
 import ToolbarIcon from '../../../components/ToolbarIcon'
 import { useEffect, useState } from 'react'
+import Style from './File.module.scss'
 import store from '../../store'
+import { t } from '../../../../common/util'
+import { IFile } from 'luna-file-list'
+import className from 'licia/className'
 
 export default observer(function File() {
   const [fileList, setFileList] = useState([])
   const [path, setPath] = useState('/')
 
-  useEffect(() => getFiles(), [])
+  useEffect(() => getFiles('/'), [])
 
-  function getFiles() {
+  function getFiles(path: string) {
     if (store.device) {
-      main.readDir(store.device.id, path).then(setFileList)
+      main.readDir(store.device.id, path).then((files) => {
+        setPath(path)
+        setFileList(files)
+      })
+    }
+  }
+
+  function up() {
+    getFiles(path.split('/').slice(0, -2).join('/') + '/')
+  }
+
+  function onDoubleClick(e: MouseEvent, file: IFile) {
+    if (file.directory) {
+      getFiles(path + file.name + '/')
     }
   }
 
   return (
     <div className="panel-with-toolbar">
       <LunaToolbar className="panel-toolbar">
-        <ToolbarIcon icon="arrow-left" title={'Back'} onClick={() => {}} />
-        <ToolbarIcon icon="arrow-right" title={'Forward'} onClick={() => {}} />
-        <ToolbarIcon icon="arrow-up" title={'Up'} onClick={() => {}} />
+        <ToolbarIcon icon="arrow-left" title={t('back')} onClick={() => {}} />
+        <ToolbarIcon
+          icon="arrow-right"
+          title={t('forward')}
+          onClick={() => {}}
+        />
+        <ToolbarIcon
+          icon="arrow-up"
+          title={t('up')}
+          onClick={up}
+          disabled={path === '/'}
+        />
+        <LunaToolbarInput keyName="path" value={path} className={Style.path} />
+        <ToolbarIcon
+          icon="refresh"
+          title={t('refresh')}
+          onClick={() => getFiles(path)}
+        />
+        <LunaToolbarSeparator />
+        <ToolbarIcon
+          icon="grid"
+          title={t('iconView')}
+          state={store.file.listView ? '' : 'hover'}
+          onClick={() => {
+            if (store.file.listView) {
+              store.file.set('listView', false)
+            }
+          }}
+        />
+        <ToolbarIcon
+          icon="list"
+          title={t('listView')}
+          state={store.file.listView ? 'hover' : ''}
+          onClick={() => {
+            if (!store.file.listView) {
+              store.file.set('listView', true)
+            }
+          }}
+        />
       </LunaToolbar>
-      <LunaFileList className="panel-body" files={fileList} />
+      <LunaFileList
+        className={className('panel-body', Style.fileList)}
+        files={fileList}
+        listView={store.file.listView}
+        onDoubleClick={onDoubleClick}
+      />
     </div>
   )
 })
diff --git a/src/renderer/main/store/file.ts b/src/renderer/main/store/file.ts
@@ -0,0 +1,27 @@
+import { makeObservable, observable, runInAction } from 'mobx'
+import extend from 'licia/extend'
+
+export class File {
+  listView = false
+  constructor() {
+    makeObservable(this, {
+      listView: observable,
+    })
+
+    this.init()
+  }
+  async init() {
+    const file = await main.getMainStore('file')
+    if (file) {
+      extend(this, file)
+    }
+  }
+  async set(key: string, val: any) {
+    runInAction(() => {
+      this[key] = val
+    })
+    await main.setMainStore('file', {
+      listView: this.listView,
+    })
+  }
+}
diff --git a/src/renderer/main/store/index.ts b/src/renderer/main/store/index.ts
@@ -5,6 +5,7 @@ import BaseStore from '../../store/BaseStore'
 import { Settings } from './settings'
 import { Application } from './application'
 import { Process } from './process'
+import { File } from './file'
 import { setMainStore } from '../../lib/util'
 import isEmpty from 'licia/isEmpty'
 
@@ -20,6 +21,7 @@ class Store extends BaseStore {
   settings = new Settings()
   application = new Application()
   process = new Process()
+  file = new File()
   constructor() {
     super()
 
