From af6fa850b0b9d75c27b73f2ed752d36b1ac697d3 Mon Sep 17 00:00:00 2001
From: zanllp <qc@zanllp.cn>
Date: Sat, 25 Mar 2023 02:19:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BD=BF=E7=94=A8=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=E5=89=8D=E5=BE=80=E7=9B=AE=E7=9A=84=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/components.d.ts                      |  2 +
 vue/src/fileTransfer/fileSort.ts         |  2 +-
 vue/src/fileTransfer/folderNavigator.vue | 19 +++++++
 vue/src/fileTransfer/stackView.vue       | 67 +++++++++++++++---------
 4 files changed, 64 insertions(+), 26 deletions(-)
 create mode 100644 vue/src/fileTransfer/folderNavigator.vue

diff --git a/vue/components.d.ts b/vue/components.d.ts
index f0896d7..30167a9 100644
--- a/vue/components.d.ts
+++ b/vue/components.d.ts
@@ -17,8 +17,10 @@ declare module '@vue/runtime-core' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
     AProgress: typeof import('ant-design-vue/es')['Progress']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
diff --git a/vue/src/fileTransfer/fileSort.ts b/vue/src/fileTransfer/fileSort.ts
index 316c6b5..2ddc00a 100644
--- a/vue/src/fileTransfer/fileSort.ts
+++ b/vue/src/fileTransfer/fileSort.ts
@@ -60,6 +60,6 @@ export const sortFiles = (files: FileList, method: SortMethod) => {
         throw new Error(`Invalid sort method: ${method}`)
     }
   }
-  return files.slice().sort((a, b) => compare(a, b) || compareByType(a, b))
+  return files.slice().sort((a, b) => compareByType(a, b) || compare(a, b))
 }
 
diff --git a/vue/src/fileTransfer/folderNavigator.vue b/vue/src/fileTransfer/folderNavigator.vue
new file mode 100644
index 0000000..ad36070
--- /dev/null
+++ b/vue/src/fileTransfer/folderNavigator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { deepComputedEffect } from 'vue3-ts-util'
+const props = defineProps<{ loc: string }>()
+const loc = deepComputedEffect(() => props.loc)
+const emit = defineEmits<{ (e: 'to', loc: string): void }>()
+const visible = ref(false)
+const onOK = () => {
+  visible.value = false
+  emit('to', loc.value)
+}
+
+</script>
+<template>
+  <a-modal v-model:visible="visible" title="输入地址回车" @ok="onOK">
+    <a-input @press-enter="onOK" v-model:value="loc" style="width: 300px;" allow-clear></a-input>
+  </a-modal>
+  <a style="margin-left: 4px;" @click="visible = true">前往</a>
+</template>
diff --git a/vue/src/fileTransfer/stackView.vue b/vue/src/fileTransfer/stackView.vue
index 37c78ac..101e453 100644
--- a/vue/src/fileTransfer/stackView.vue
+++ b/vue/src/fileTransfer/stackView.vue
@@ -12,6 +12,7 @@ import NProgress from 'multi-nprogress'
 import 'multi-nprogress/nprogress.css'
 import type Progress from 'nprogress'
 import { Modal } from 'ant-design-vue'
+import FolderNavigator from './folderNavigator.vue'
 
 const np = ref<Progress.NProgress>()
 const el = ref<HTMLDivElement>()
@@ -26,6 +27,7 @@ const stack = ref<Page[]>([])
 const global = useGlobalStore()
 const currPage = computed(() => last(stack.value))
 const multiSelectedIdxs = ref([] as number[])
+const currLocation = computed(() => path.join(...getBasePath()))
 
 useWatchDocument('click', () => multiSelectedIdxs.value = [])
 useWatchDocument('blur', () => multiSelectedIdxs.value = [])
@@ -56,7 +58,9 @@ onMounted(async () => {
 const getBasePath = () =>
   stack.value.map((v) => v.curr).slice(global.conf?.is_win && props.target === 'local' ? 1 : 0)
 
-const copyLocation = () => copy2clipboard(path.join(...getBasePath()))
+
+
+const copyLocation = () => copy2clipboard(currLocation.value)
 
 const openNext = async (file: FileNodeInfo) => {
   if (file.type !== 'dir') {
@@ -198,28 +202,34 @@ const onFileDragStart = (e: DragEvent, idx: number) => {
 </script>
 <template>
   <div ref="el" @dragover.prevent @drop.prevent="onDrop($event)" class="container">
-    <div class="location">
-      <a-breadcrumb style="flex: 1">
-        <a-breadcrumb-item v-for="(item, idx) in stack" :key="idx"><a @click.prevent="back(idx)">{{
-          item.curr === '/' ? '根' : item.curr.replace(/:\/$/, '盘')
-        }}</a></a-breadcrumb-item>
-      </a-breadcrumb>
-      <SearchSelect v-model:value="sortMethod" :conv="sortMethodConv" :options="Object.keys(sortMethodMap)" />
-      <a class="opt" @click.prevent="refresh"> 刷新 </a>
-      <a-dropdown v-if="props.target === 'local'">
-        <a class="ant-dropdown-link opt" @click.prevent>
-          快速移动
-          <DownOutlined />
-        </a>
-        <template #overlay>
-          <a-menu>
-            <a-menu-item v-for="item in global.autoCompletedDirList" :key="item.dir">
-              <a @click.prevent="to(item.dir)">{{ item.zh }}</a>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
-      <a class="opt" @click.prevent="copyLocation">复制路径</a>
+    <div class="location-bar">
+      <div class="breadcrumb">
+        <a-breadcrumb style="flex: 1">
+          <a-breadcrumb-item v-for="(item, idx) in stack" :key="idx"><a @click.prevent="back(idx)">{{
+            item.curr === '/' ? '根' : item.curr.replace(/:\/$/, '盘')
+          }}</a></a-breadcrumb-item>
+        </a-breadcrumb>
+      </div>
+      <div class="actions">
+
+        <SearchSelect v-model:value="sortMethod" :conv="sortMethodConv" :options="Object.keys(sortMethodMap)" />
+        <a class="opt" @click.prevent="refresh"> 刷新 </a>
+        <a-dropdown v-if="props.target === 'local'">
+          <a class="ant-dropdown-link opt" @click.prevent>
+            快速移动
+            <DownOutlined />
+          </a>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item v-for="item in global.autoCompletedDirList" :key="item.dir">
+                <a @click.prevent="to(item.dir)">{{ item.zh }}</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+        <a class="opt" @click.prevent="copyLocation">复制路径</a>
+        <folder-navigator :loc="currLocation" @to="to"/>
+      </div>
     </div>
     <div v-if="currPage" class="view">
       <ul class="file-list">
@@ -249,12 +259,19 @@ const onFileDragStart = (e: DragEvent, idx: number) => {
   height: 100%;
 }
 
-.location {
-  margin: 32px;
+.location-bar {
+  margin: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
+  .actions {
+    display: flex;
+    align-items: center;
+
+    flex-shrink: 0;
+  }
+
   a.opt {
     margin-left: 8px;
   }