From c44c7ed0f0427d4767a6bf43f6b89850cf197eb5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 9 Sep 2023 08:01:00 +0800
Subject: [PATCH] fix filemanager

---
 src/api/types.ts                         |  1 +
 src/components/FileBrowser.vue           | 10 ++++++++
 src/components/filebrowser/List.vue      | 30 +++++++++++++++---------
 src/components/filebrowser/Toolbar.vue   | 26 +++++++++++++++++++-
 src/views/reorganize/FileBrowserView.vue |  2 +-
 5 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 5f1762b3..6148f1ab 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -908,4 +908,5 @@ export interface FileItem {
   extension: string
   size: number
   children: FileItem[]
+  modify_time: number
 }
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 9c31989f..6629547b 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -57,6 +57,8 @@ const loading = ref(0)
 const activeStorage = ref('local')
 // 刷新
 const refreshPending = ref(false)
+// 排序
+const sort = ref('name')
 // axios实例
 const axiosInstance = ref<Axios>()
 
@@ -83,6 +85,12 @@ function pathChanged(_path: string) {
   emit('pathchanged', _path)
 }
 
+// 排序变化
+function sortChanged(s: string) {
+  sort.value = s
+  refreshPending.value = true
+}
+
 // 初始化
 onBeforeMount(() => {
   activeStorage.value = props.storage ?? 'local'
@@ -101,6 +109,7 @@ onBeforeMount(() => {
       @storagechanged="storageChanged"
       @pathchanged="pathChanged"
       @foldercreated="refreshPending = true"
+      @sortchanged="sortChanged"
     />
     <VRow no-gutters>
       <VCol v-if="tree" sm="auto" class="d-none d-md-block">
@@ -125,6 +134,7 @@ onBeforeMount(() => {
           :endpoints="endpoints"
           :axios="axiosInstance"
           :refreshpending="refreshPending"
+          :sort="sort"
           @pathchanged="pathChanged"
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 6dca4bbe..b56fe22c 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -19,6 +19,7 @@ const inProps = defineProps({
   endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
   refreshpending: Boolean,
+  sort: String,
 })
 
 // 对外事件
@@ -125,18 +126,18 @@ const isImage = computed(() => {
 async function load() {
   loading.value = true
   emit('loading', true)
-  if (isDir.value) {
-    const url = inProps.endpoints?.list.url
-      .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
+  // 参数
+  const url = inProps.endpoints?.list.url
+    .replace(/{storage}/g, storage.value)
+    .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
+    .replace(/{sort}/g, inProps.sort || 'name')
 
-    const config = {
-      url,
-      method: inProps.endpoints?.list.method || 'get',
-    }
-    // 加载数据
-    items.value = await axiosInstance.value.request(config) ?? []
+  const config = {
+    url,
+    method: inProps.endpoints?.list.method || 'get',
   }
+  // 加载数据
+  items.value = await axiosInstance.value.request(config) ?? []
   emit('loading', false)
   loading.value = false
 }
@@ -275,6 +276,11 @@ async function transfer() {
   }
 }
 
+// 将文件修改时间（timestape）转换为本地时间
+function formatTime(timestape: number) {
+  return new Date(timestape * 1000).toLocaleString()
+}
+
 // 监听path变化
 watch(
   () => inProps.path,
@@ -408,7 +414,9 @@ onMounted(() => {
       v-else-if="isFile && !isImage"
       class="text-center break-all"
     >
-      文件: {{ path }}
+      <strong>{{ items[0]?.name }}</strong><br>
+      大小：{{ formatBytes(items[0]?.size || 0) }}<br>
+      修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
     </VCardText>
     <VCardText
       v-else-if="isFile && isImage"
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index e79e335e..43831925 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -12,7 +12,7 @@ const inProps = defineProps({
 })
 
 // 对外事件
-const emit = defineEmits(['storagechanged', 'pathchanged', 'loading', 'foldercreated'])
+const emit = defineEmits(['storagechanged', 'pathchanged', 'loading', 'foldercreated', 'sortchanged'])
 
 // 新建文件夹名称
 const newFolderPopper = ref(false)
@@ -20,6 +20,19 @@ const newFolderPopper = ref(false)
 // 新建文件名称
 const newFolderName = ref('')
 
+// 排序方式
+const sort = ref('name')
+
+// 调整排序方式
+function changeSort() {
+  if (sort.value === 'name')
+    sort.value = 'time'
+  else
+    sort.value = 'name'
+
+  emit('sortchanged', sort.value)
+}
+
 // 计算PATH面包屑
 const pathSegments = computed(() => {
   let path_str = ''
@@ -81,6 +94,14 @@ async function mkdir() {
   // 通知重新加载
   emit('foldercreated')
 }
+
+// 计算排序图标
+const sortIcon = computed(() => {
+  if (sort.value === 'time')
+    return 'mdi-sort-clock-ascending-outline'
+  else
+    return 'mdi-sort-alphabetical-ascending'
+})
 </script>
 
 <template>
@@ -123,6 +144,9 @@ async function mkdir() {
       </template>
     </VToolbarItems>
     <div class="flex-grow-1" />
+    <IconBtn @click="changeSort">
+      <VIcon :icon="sortIcon" />
+    </IconBtn>
     <IconBtn v-if="pathSegments.length > 0" @click="goUp">
       <VIcon icon="mdi-arrow-up-bold-outline" />
     </IconBtn>
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index 82b39f67..d3ba0bae 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -3,7 +3,7 @@ import api from '@/api'
 import FileBrowser from '@/components/FileBrowser.vue'
 
 const endpoints = {
-  list: { url: '/filebrowser/list?path={path}', method: 'get' },
+  list: { url: '/filebrowser/list?path={path}&sort={sort}', method: 'get' },
   mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
   delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
   download: { url: '/filebrowser/download?path={path}', method: 'get' },