feat: enable filename search in admin dashboard (cf-pages#254)

* feat: add prefix search for admin

* refactor: debounce admin search

* Update admin.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: cf-pages

admin.html

@@ -99,7 +99,7 @@
             </el-table-column>
             <el-table-column align="right">
               <template slot="header" slot-scope="scope">
-                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
+                <el-input v-model="search" @input="handleSearch" size="mini" placeholder="输入关键字搜索" />
               </template>
               <template slot-scope="scope">
                 <el-button size="mini" type="primary" @click="handleCopy(scope.$index,scope.row.name)">复制地址</el-button>
@@ -138,7 +138,8 @@
         id: ''
       },
       search: '',
-      password: '123456'
+      password: '123456',
+      searchTimer: null
     },
     methods: {
       handleBlock(index, key) {
@@ -233,11 +234,33 @@
           type: 'success'
         });
       },
+      handleSearch() {
+        clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(() => {
+          this.tableData = [];
+          this.nextCursor = null;
+          const opts = { method: 'GET', redirect: 'follow', credentials: 'include' };
+          const base = this.search
+            ? `./api/manage/list?limit=100&prefix=${encodeURIComponent(this.search)}`
+            : `./api/manage/list?limit=100`;
+          fetch(base, opts)
+            .then(r => r.json())
+            .then(result => {
+              this.tableData = result.keys || [];
+              this.nextCursor = result.list_complete ? null : result.cursor;
+              this.Number = this.tableData.length;
+            })
+            .catch(() => alert("搜索失败，请检查网络"));
+        }, 300);
+      },
       loadMore() {
         const opts = { method: 'GET', redirect: 'follow', credentials: 'include' };
-        const url = this.nextCursor
-          ? `./api/manage/list?cursor=${encodeURIComponent(this.nextCursor)}`
+        const base = this.search
+          ? `./api/manage/list?limit=100&prefix=${encodeURIComponent(this.search)}`
           : `./api/manage/list?limit=100`;
+        const url = this.nextCursor
+          ? `${base}&cursor=${encodeURIComponent(this.nextCursor)}`
+          : base;
 
         fetch(url, opts)
           .then(r => r.json())

functions/api/manage/list.js

@@ -8,7 +8,8 @@ export async function onRequest(context) {
   if (limit > 1000) limit = 1000;
 
   const cursor = url.searchParams.get("cursor") || undefined;
-  const value = await env.img_url.list({ limit, cursor });
+  const prefix = url.searchParams.get("prefix") || undefined;
+  const value = await env.img_url.list({ limit, cursor, prefix });
 
   return new Response(JSON.stringify(value), {
     headers: { "Content-Type": "application/json" }