feat: 搜索文件

lkzc19 · Aug 18, 2024 · 7c1ae4a · 7c1ae4a
1 parent 8e28253
commit 7c1ae4a
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 13 deletions.
diff --git a/v-demo/demo-fs/fs-nuxt/app.vue b/v-demo/demo-fs/fs-nuxt/app.vue
@@ -8,7 +8,7 @@ useSeoMeta({
 <template>
   <div>
     <NuxtRouteAnnouncer />
-
+    <NuxtPage />
+    <UNotifications />
   </div>
-  <NuxtPage />
 </template>
diff --git a/v-demo/demo-fs/fs-nuxt/components/FileTable.vue b/v-demo/demo-fs/fs-nuxt/components/FileTable.vue
@@ -4,6 +4,7 @@ import {parentPath,toNumber} from "~/utils";
 
 const route = useRoute()
 const baseURL = useRuntimeConfig().public.baseUrl
+const toast = useToast()
 
 const p = ref(toNumber(route.query.p))
 
@@ -84,8 +85,20 @@ watch(p, (newVal, _) => {
 const newDir = ref("")
 const mkdir = async () => {
   // TODO 长度 以及 重复处理 // 删除接口
-  // 通知添加
-  console.log(newDir.value.length)
+  if (newDir.value.length == 0) {
+    toast.add({
+      title: '创建目录失败',
+      description: '目录名不可为空字符串'
+    })
+    return
+  }
+  if (newDir.value.length > 16) {
+    toast.add({
+      title: '创建目录失败',
+      description: '目录名长度不可超过16'
+    })
+    return
+  }
   const _dir = await $fetch(baseURL + "/dir", {
     method: 'PUT',
     query: {

diff --git a/v-demo/demo-fs/fs-nuxt/components/Search.vue b/v-demo/demo-fs/fs-nuxt/components/Search.vue
@@ -1,9 +1,71 @@
 <script setup lang="ts">
+import type {FileMeta} from "~/types";
 
+const toast = useToast()
+const baseURL = useRuntimeConfig().public.baseUrl
+
+const v = ref("")
+const fileList = ref<FileMeta[]>([])
+const isFocused = ref(false)
+const handleFocus = () => isFocused.value = true
+const handleBlur = () => isFocused.value = false
+const handleInput = async () => {
+  if (v.value.length == 0) {
+    fileList.value = []
+    return
+  }
+
+  const _fileList = await $fetch(baseURL + "/file.search", {
+    method: 'GET',
+    query: {
+      "keyword": v.value,
+    }
+  })
+  fileList.value = _fileList as FileMeta[]
+  console.log(_fileList)
+}
 </script>
 
 <template>
-
+  <div>
+    <UContainer
+        class="flex items-center relative bg-slate-900 border border-gray-200 dark:border-gray-800 py-3 px-2"
+        :ui="{padding: 'lg:px-6'}"
+    >
+      <UIcon name="heroicons:magnifying-glass" class="mr-2" />
+      <input type="text"
+             placeholder="搜索..."
+             class="focus:border-transparent focus:outline-none grow bg-slate-900 py-2"
+             v-model="v"
+             @focus="handleFocus"
+             @blur="handleBlur"
+             @input="handleInput"
+      />
+    </UContainer>
+<!--    border-t-->
+    <ul class="absolute mt-1 border border-gray-200 dark:border-gray-800 px-6 bg-slate-900 w-1/2 z-50"
+        v-show=" (isFocused && fileList.length > 0)"
+    >
+      <li v-for="it in fileList" class="py-1">
+        <ULink
+            v-if="it.isDir"
+            active-class="text-primary"
+            inactive-class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        >
+          <UIcon name="heroicons:folder" />
+          {{ it.fullPath }}
+        </ULink>
+        <ULink
+            v-else
+            active-class="text-primary"
+            inactive-class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        >
+          <UIcon name="heroicons:document" />
+          {{ it.fullPath }}
+        </ULink>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>

diff --git a/v-demo/demo-fs/fs-nuxt/components/Upload.vue b/v-demo/demo-fs/fs-nuxt/components/Upload.vue
@@ -3,7 +3,9 @@
 </script>
 
 <template>
-
+  <div>
+    上传文件
+  </div>
 </template>
 
 <style scoped>

diff --git a/v-demo/demo-fs/fs-nuxt/pages/[...slug].vue b/v-demo/demo-fs/fs-nuxt/pages/[...slug].vue
@@ -19,8 +19,8 @@ const baseURL = useRuntimeConfig().public.baseUrl
   </header>
   <main class="mt-5">
     <div class="center">
-      <Upload />
-      <Search />
+      <Upload class="mb-5" />
+      <Search class="mb-5" />
       <FileTable />
     </div>
   </main>
@@ -31,8 +31,4 @@ const baseURL = useRuntimeConfig().public.baseUrl
 .center {
   @apply font-mono w-1/2 mx-auto
 }
-
-.file-table-container {
-  @apply flex-auto
-}
 </style>
diff --git a/v-demo/demo-fs/fs-nuxt/types.ts b/v-demo/demo-fs/fs-nuxt/types.ts
@@ -15,5 +15,6 @@ export interface FileMeta {
     name: string,
     ext: string,
     isDir: boolean,
-    size: number
+    size: number,
+    fullPath: string
 }