From 49a9d02ae7ebfec96c3fe2789971580e258cce97 Mon Sep 17 00:00:00 2001
From: 13315423919 <13315423919@qq.com>
Date: Wed, 19 Nov 2025 19:43:11 +0800
Subject: [PATCH] Add File

---
 main/ui/fs.html | 481 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 481 insertions(+)
 create mode 100644 main/ui/fs.html

diff --git a/main/ui/fs.html b/main/ui/fs.html
new file mode 100644
index 0000000..b750763
--- /dev/null
+++ b/main/ui/fs.html
@@ -0,0 +1,481 @@
+<div x-data="fs">
+<!-- 查询器 四角弧形的矩形容器 -->
+<div class="flex rounded-lg bg-white shadow-lg p-4 space-x-4">
+    <!-- 横向排列的四个元素 -->
+    <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-zinc-200">
+        <input x-model="demo" type="search" class="w-full rounded border border-zinc-300 bg-zinc-100 py-2 pl-10 pr-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 disabled:cursor-not-allowed disabled:opacity-75 dark:border-zinc-700 dark:bg-zinc-800/50 dark:focus-visible:outline-sky-600" name="search" placeholder="Search" aria-label="search"/>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="absolute left-2.5 top-1/2 size-5 -translate-y-1/2 text-neutral-600/50 dark:text-zinc-200/50"> 
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+    </div>
+    <button @click="fetchSomething" type="button" class="cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">查询</button>
+    <input x-ref="fileInput" @input="upload_file" type="file"  multiple hidden class="w-full overflow-clip rounded border border-red-700 bg-zinc-100/50 text-sm text-red-700 file:mr-4 file:cursor-pointer file:border-none file:bg-zinc-100 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-zinc-800/50 dark:file:bg-zinc-800 dark:file:text-zinc-50 dark:focus-visible:outline-sky-600" />
+    <button @click="$refs.fileInput.click()" type="button" class="cursor-pointer inline-flex justify-center items-center gap-2 whitespace-nowrap rounded bg-blue-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-6 opacity-75">
+            <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
+        </svg>
+        上传文件
+    </button>
+    <input x-ref="fileInput2" @input="upload_dirs" type="file" webkitdirectory  directory multiple hidden class="w-full overflow-clip rounded border border-red-700 text-sm text-red-700 file:mr-4 file:cursor-pointer file:border-none file:bg-zinc-100 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-zinc-800/50 dark:file:bg-zinc-800 dark:file:text-zinc-50 dark:focus-visible:outline-sky-600" />
+    <button @click="$refs.fileInput2.click()" type="button" class="cursor-pointer inline-flex justify-center items-center gap-2 whitespace-nowrap rounded bg-green-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-6 opacity-75">
+            <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
+        </svg>
+        上传目录
+    </button>
+    <button @click="open_aieditor(0)" type="button" class="cursor-pointer inline-flex justify-center items-center gap-2 whitespace-nowrap rounded bg-green-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-white dark:fill-white" fill="currentColor">
+            <path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
+        </svg>
+        新建目录
+    </button>
+</div>
+<!-- 当前位置-->
+<div class="mt-4 text-sm">当前位置: /<a href="#" @click="open_fs" class="text-sky-700 cursor-pointer hover:underline transition duration-300 ease-in-out">文件中心</a>
+    <span class="mx-0" x-html="nav"></span>
+</div>
+<!-- 结果表格-->
+<div  class="mt-4 overflow-hidden w-full overflow-x-auto rounded border border-zinc-300 dark:border-zinc-700">
+    <table class="w-full text-left text-sm text-neutral-600 dark:text-zinc-200">
+        <thead class="border-b border-zinc-300 bg-zinc-100 text-sm text-neutral-900 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50">
+            <tr>
+                <th scope="col" class="p-4">
+                    <label for="checkAll" class="flex items-center cursor-pointer text-neutral-600 dark:text-zinc-200 ">
+                        <div class="relative flex items-center">
+                            <input type="checkbox" x-model="checkAll" id="checkAll" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-zinc-300 bg-zinc-50 before:absolute before:inset-0 checked:border-sky-700 checked:before:bg-sky-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-500 checked:focus:outline-sky-700 active:outline-offset-0 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:border-sky-600 dark:checked:before:bg-sky-600 dark:focus:outline-zinc-500 dark:checked:focus:outline-sky-600" />
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:visible dark:text-white">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                            </svg>
+                        </div>
+                    </label>
+                </th>
+                <th scope="col" class="p-4">名称</th>
+                <th scope="col" class="p-4">类型</th>
+                <th scope="col" class="p-4">日期</th>
+                <th scope="col" class="p-4">大小</th>
+                <th scope="col" class="p-4">操作</th>
+            </tr>
+        </thead>
+        <tbody class="divide-y divide-zinc-300 dark:divide-zinc-700">
+            <template x-for="(item,index) in Items" :key="index">
+            <tr>
+                <td class="p-2 px-4">
+                    <label for="user2338" class="flex items-center cursor-pointer text-neutral-600 dark:text-zinc-200 ">
+                        <div class="relative flex items-center">
+                            <input type="checkbox" x-model="selected" :value="item.name" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-zinc-300 bg-zinc-50 before:absolute before:inset-0 checked:border-sky-700 checked:before:bg-sky-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-500 checked:focus:outline-sky-700 active:outline-offset-0 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:border-sky-600 dark:checked:before:bg-sky-600 dark:focus:outline-zinc-500 dark:checked:focus:outline-sky-600"/>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:visible dark:text-white">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                            </svg>
+                        </div>
+                    </label>
+                </td>
+                <td class="p-2 max-w-sm min-w-[24rem]" >
+                    <a x-show="item.size ==-1" @click="open_dir(item.name)" x-text="item.name" class="text-sky-700 font-bold cursor-pointer hover:underline transition duration-300 ease-in-out">打开</a>
+                    <a x-show="item.size !=-1" @click="download(item.name)" x-text="item.name" class="text-sky-700 cursor-pointer hover:underline transition duration-300 ease-in-out">下载</a>
+                </td>
+                <td class="p-2" x-text="item.type">类型</td>
+                
+                <td class="p-2">
+                    <div class="relative">
+                    <button  x-text="item.m_time.slice(0,16)" type="button" class="peer cursor-pointer rounded bg-zinc-50 px-4 py-2 font-medium tracking-wide text-neutral-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus-visible:outline-sky-600" aria-describedby="tooltipExample">Hover Me</button>
+                    <div x-text="item.m_time" id="tooltipExample" class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap rounded bg-zinc-900 px-2 py-1 text-center text-sm text-zinc-50 opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-zinc-50 dark:text-neutral-900" role="tooltip">Tooltip top</div>
+                </div></td>
+                <td class="p-2" >
+                    <div class="relative">
+                        <button  x-text="formatBytes(item.size)" type="button" class="peer cursor-pointer rounded  px-4 py-2 font-medium tracking-wide text-neutral-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus-visible:outline-sky-600" aria-describedby="tooltipExample">Hover Me</button>
+                        <div x-text="item.size" id="tooltipExample" class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap rounded bg-zinc-900 px-2 py-1 text-center text-sm text-zinc-50 opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-zinc-50 dark:text-neutral-900" role="tooltip">Tooltip top</div>
+                    </div>
+                </td>
+                <td class="p-2">
+                    <button @click="move_dir_or_file(item.name)" type="button" class="cursor-pointer whitespace-nowrap rounded bg-transparent p-0.5 font-semibold text-sky-700 outline-sky-700 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-sky-600 dark:outline-sky-600">移动</button>
+                    <button @click="delete_dir_or_file(item.name)" type="button" class="cursor-pointer whitespace-nowrap rounded bg-transparent p-0.5 font-semibold text-sky-700 outline-sky-700 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-sky-600 dark:outline-sky-600">删除</button>
+                
+                </td>
+            </tr>
+        </template>
+        </tbody>
+    </table>
+    
+</div>
+<!-- 翻页-->
+<nav aria-label="pagination">
+    <ul class="flex flex-shrink-0 items-center gap-2 text-sm font-medium">
+        <li> 共<span x-text="count" class="font-bold">200</span>条/显示前<span x-text="view_count" class="font-bold"></span>条</li>
+        <li>
+            <a href="#" @click="curPage===1 ? pageSlie(1): pageSlie(curPage-1) " class="flex items-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="previous page">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
+                    <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+                </svg>
+                上一页
+            </a>
+        </li>
+        <li x-show="count/pageSize+1 >=ps+1"><a href="#" x-text="ps+1" @click="pageSlie(ps+1)" :class="curPage===ps+1 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 1">1</a></li>
+        <li x-show="count/pageSize+1 >=ps+2"><a href="#" x-text="ps+2" @click="pageSlie(ps+2)" :class="curPage===ps+2 ? 'bg-sky-700 text-white font-bold ' :''"  class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:bg-sky-600 dark:text-white" aria-label="page 2">2</a></li>
+        <li x-show="count/pageSize+1 >=ps+3"><a href="#" x-text="ps+3" @click="pageSlie(ps+3)" :class="curPage===ps+3 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 3">3</a></li>
+        <li x-show="count/pageSize+1 >=ps+4"><a href="#" x-text="ps+4" @click="pageSlie(ps+4)" :class="curPage===ps+4 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 4">4</a></li>
+        <li x-show="count/pageSize+1 >=ps+5"><a href="#" x-text="ps+5" @click="pageSlie(ps+5)" :class="curPage===ps+5 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 5">5</a></li>
+        <li x-show="count/pageSize+1 >=ps+6"><a href="#" x-text="ps+6" @click="pageSlie(ps+6)" :class="curPage===ps+6 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 1">6</a></li>
+        <li x-show="count/pageSize+1 >=ps+7"><a href="#" x-text="ps+7" @click="pageSlie(ps+7)" :class="curPage===ps+7 ? 'bg-sky-700 text-white font-bold ' :''"  class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:bg-sky-600 dark:text-white"  aria-label="page 2">7</a></li>
+        <li x-show="count/pageSize+1 >=ps+8"><a href="#" x-text="ps+8" @click="pageSlie(ps+8)" :class="curPage===ps+8 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 3">8</a></li>
+        <li x-show="count/pageSize+1 >=ps+9"><a href="#" x-text="ps+9" @click="pageSlie(ps+9)" :class="curPage===ps+9 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 4">9</a></li>
+        <li x-show="count/pageSize+1 >=ps+10"><a href="#" x-text="ps+10" @click="pageSlie(ps+10)" :class="curPage===ps+10 ? 'bg-sky-700 text-white font-bold ' :''" class="flex size-6 items-center justify-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="page 5">10</a></li>
+      
+        <li>
+            <a href="#" @click="curPage=== parseInt(count/pageSize)+1 ?  pageSlie(parseInt(count/pageSize)+1): pageSlie(curPage+1) " class="flex items-center rounded p-1 text-neutral-600 hover:text-sky-700 dark:text-zinc-200 dark:hover:text-sky-600" aria-label="next page">
+                下一页
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
+                    <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                </svg>
+            </a>
+        </li>
+    </ul>
+</nav>
+
+<!-- 弹出窗口 -->
+<div>
+    <div x-cloak x-show="AIEditorOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="AIEditorOpen" @keydown.esc.window="close_aieditor"  class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 px-4 py-2 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="infoModalTitle">
+        <!-- Modal Dialog -->
+        <div x-show="AIEditorOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100" class="flex w-full max-w-xl flex-col gap-1 overflow-hidden rounded border border-zinc-300 bg-zinc-50 text-neutral-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
+            <!-- Dialog Header -->
+            <div class="flex items-center justify-between border-b border-zinc-300 bg-zinc-100/60 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-900/20">
+                <div class="flex items-center justify-center rounded-full bg-sky-700/20 text-sky-700 p-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
+                    </svg>
+                    新建目录
+                </div>
+                <button @click="close_aieditor" aria-label="close modal">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <!-- Dialog Body -->
+            <div class="px-4 py-2 text-center"> 
+                <div class="space-y-1">
+                    <label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><b>目录名称</b> &nbsp;&nbsp;[当前目录：/<span x-text="curpath"></span>]</label>
+                    <input type="text" x-model="dir_name"  class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
+               
+            </div>
+            <!-- Dialog Footer -->
+            <div class="flex items-center border-t border-zinc-300 bg-zinc-100/60 p-4 dark:border-zinc-700 dark:bg-zinc-900/20 sm:flex-row sm:items-center md:justify-end">
+                <button @click="create_dir" type="button" class="mx-auto cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-center text-sm font-medium tracking-wide text-white transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">保存</button>
+            </div>
+
+
+        </div>
+    </div>
+    <div x-cloak x-show="AIMoveOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="AIMoveOpen" @keydown.esc.window="AIMoveOpen=false"  class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 px-4 py-2 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="infoModalTitle">
+        <!-- Modal Dialog -->
+        <div x-show="AIMoveOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100" class="flex w-full max-w-xl flex-col gap-1 overflow-hidden rounded border border-zinc-300 bg-zinc-50 text-neutral-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
+            <!-- Dialog Header -->
+            <div class="flex items-center justify-between border-b border-zinc-300 bg-zinc-100/60 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-900/20">
+                <div class="flex items-center justify-center rounded-full bg-sky-700/20 text-sky-700 p-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
+                    </svg>
+                    移动或重命名
+                </div>
+                <button @click="AIMoveOpen=false" aria-label="close modal">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+            <!-- Dialog Body -->
+            <div class="px-4 py-2 text-center"> 
+                <div class="space-y-1">
+                    <template x-for="(item,index) in ready_move_dir_or_filename" :key="index">
+                        <p x-text="item" class="text-sm font-bold font-medium text-sky-700"></p>
+                    </template>
+                    <label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><b>移动上述目录和文件到目标目录</b></label>
+                    
+                    <input type="text" x-model="move_to_dir_name"  class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
+               
+            </div>
+            <!-- Dialog Footer -->
+            <div class="flex items-center border-t border-zinc-300 bg-zinc-100/60 p-4 dark:border-zinc-700 dark:bg-zinc-900/20 sm:flex-row sm:items-center md:justify-end">
+                <button @click="do_move_dir_or_file" type="button" class="mx-auto cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-center text-sm font-medium tracking-wide text-white transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">确定</button>
+            </div>
+
+
+        </div>
+    </div>
+</div>
+
+<!-- 选中的面板操作 -->
+<div x-show="show_op" class="fixed bottom-4 right-5 z-30 min-w-xl flex rounded-lg bg-zinc-100 shadow-lg p-4 space-x-4"> 
+    <div class="relative flex w-full px-4 text-sky-700">已选中<span x-text="selected.length"></span>条</div>
+    <button @click="download_selected" type="button" class="cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">批量下载</button>
+    <button @click="move_selected" type="button" class="cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">批量移动</button>
+    <button @click="delete_selected" type="button" class="cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">批量删除</button>
+    <button @click="(checkAll=false, selected = [])" type="button" class="cursor-pointer whitespace-nowrap rounded bg-sky-700 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-600 dark:text-white dark:focus-visible:outline-sky-600">取消</button>
+</div>
+</div>
+
+<script>
+    function fs(){
+        return {
+            checkAll: false,
+            selected: [],
+            show_op: false,
+            AIEditorOpen: false,
+            AIMoveOpen:false,
+            ready_move_dir_or_filename:[],
+            demo: '',
+            nav: '',
+            curpath: '文档',
+            dir_name: "文档",
+            move_to_dir_name:'',
+            count: 10,
+            view_count:10,
+            pageSize:10,
+            curPage: 1,
+            aItems:[],
+            Items:[],
+            ps:0,
+            init(){
+                this.nav += `/<a href="#" @click="reopen_dir('${this.curpath}')" class="text-sky-700 cursor-pointer hover:underline transition duration-300 ease-in-out">文档</a>`
+           
+                //监听选择变化
+                this.$watch('selected',value => {
+                    console.log(value);
+                    if(value.length >0){
+                        this.show_op = true;
+                    }else{
+                        this.show_op = false;
+                    }
+                });
+
+                this.$watch('checkAll',value => {
+                    if(value){
+                        //选中当前页
+                        this.selected = this.Items.map(item =>item.name);
+
+                    }else{
+                        this.selected = [];
+                    }
+                });
+
+                this.fetchSomething();
+
+                axios.get('/api/catalogs').then(response => {
+                    //console.log('Data:', response.data);
+                    this.catalogs = response.data.data;
+                }).catch(error => {
+                    console.error('Error fetching data:', error);
+                    throw error; // 重新抛出错误以便调用者可以处理
+                });
+
+
+            },
+
+            open_aieditor(){
+                this.AIEditorOpen=true;
+            },
+            close_aieditor(){
+                this.AIEditorOpen=false;
+                this.fetchSomething();
+            },
+            fetchSomething() {
+                axios.get('/api/fs/'+this.curpath+'?demo='+this.demo).then(response => {
+                    //console.log('Data:', response.data);
+                    this.aItems = response.data.data;
+                    
+                    this.view_count = this.aItems.length;
+                    this.Items = this.aItems.slice(0,this.pageSize);
+                    this.curPage = 1;
+
+                    this.count=response.data.count;
+                    this.curpath = response.data.curpath;
+                }).catch(error => {
+                    console.error('Error fetching data:', error);
+                    throw error; // 重新抛出错误以便调用者可以处理
+                }); 
+            },
+            open_fs(){
+                this.curpath="";
+                this.nav="";
+                this.fetchSomething();
+                this.nav="";
+            },
+            open_dir(dir_name){// 打开目录
+                if (this.curpath==""){
+                    this.curpath = dir_name;
+                }else{
+                    this.curpath += "/"+ dir_name;
+                }
+                this.nav += `/<a href="#" @click="reopen_dir('${this.curpath}')" class="text-sky-700 cursor-pointer hover:underline transition duration-300 ease-in-out">${dir_name}</a>`
+                this.fetchSomething();
+            },
+
+            reopen_dir(path){
+                // 在导航中刷新某个目录
+                if (path[0]=='/'){
+                    this.curpath = path.slice(1);
+                }else{
+                    this.curpath = path;
+                }
+                
+                this.nav="";
+                var curpath="";
+                for (dir_name of this.curpath.split("/")){
+                    curpath += "/" + dir_name
+                    this.nav += `/<a href="#" @click="reopen_dir('${curpath}')" class="text-sky-700 cursor-pointer hover:underline transition duration-300 ease-in-out">${dir_name}</a>`
+                }
+                this.fetchSomething();
+
+            },
+            create_dir(){
+                //新建目录
+                axios.post('/api/fs/'+this.curpath+"/"+this.dir_name).then(response => {
+                    this.AIEditorOpen = false;
+                    this.fetchSomething();
+                }).catch(error => {
+                    console.error('Error fetching data:', error);
+                    throw error; // 重新抛出错误以便调用者可以处理
+                }); 
+                
+            },
+            pageSlie(page){
+                this.ps = Math.floor((page-1)/10)*10;
+                this.curPage = page;
+                this.Items = this.aItems.slice(this.pageSize*(this.curPage-1),this.pageSize*this.curPage);
+            },
+            delete_dir_or_file(dir_or_file_name){
+                axios.delete('/api/fs/'+this.curpath+"/"+dir_or_file_name).then(response => {
+                
+                    this.fetchSomething();
+                }).catch(error => {
+                    console.error('Error fetching data:', error);
+                    throw error; // 重新抛出错误以便调用者可以处理
+                }); 
+                
+            },
+            delete_selected(){
+                //批量删除
+                this.selected.forEach((item,index)=>{
+                    this.delete_dir_or_file(item);
+                });
+
+                this.checkAll = false;
+                this.selected = [];
+            },
+            move_dir_or_file(dir_or_file_name){
+                this.AIMoveOpen = true;
+                this.ready_move_dir_or_filename = [dir_or_file_name];
+                this.move_to_dir_name = "/"+this.curpath+"/";
+                
+            },
+            move_selected(){
+                //批量移动
+                this.AIMoveOpen = true;
+                this.ready_move_dir_or_filename = this.selected;
+                this.move_to_dir_name = "/"+this.curpath+"/";
+            },
+            do_move_dir_or_file(){
+
+                this.ready_move_dir_or_filename.forEach((item,index)=>{
+
+                    const newItem = {
+                        src: "/"+this.curpath+"/"+item,
+                        dst: this.move_to_dir_name,
+                    };  
+                    axios.post('/api/fs/move_dir_or_file',newItem).then(response => {
+                        this.AIMoveOpen=false;
+                        this.fetchSomething();
+                        this.checkAll = false;
+                        this.selected = [];
+                    }).catch(error => {
+                        console.error('Error fetching data:', error);
+                        throw error; // 重新抛出错误以便调用者可以处理
+                    }); 
+
+                }); 
+            },
+            download(filename){
+                //新窗口下载文件
+                window.open(`/api/fsd/${this.curpath}/${filename}`);
+            },
+            download_selected(){
+
+                this.selected.forEach((item,index)=>{
+                    this.download(item);
+                });
+
+                this.checkAll = false;
+                this.selected = [];
+            },
+            async upload_file(){
+                
+                if (this.$refs.fileInput.files.length==0) return;
+                //多个文件，批量上传
+                for ( let file of this.$refs.fileInput.files) {
+                    const formData = new FormData();
+                    formData.append('file',file)
+                    formData.append("curpath",this.curpath);
+                    
+                    try {
+                        let response1 = await axios.post('/api/fs/upload', formData, {
+                            headers: {
+                                'Content-Type': 'multipart/form-data'
+                            }
+                        }).then( response =>{
+
+                            var result = response.data;
+
+                            if (result.errno === 1) {
+
+                                alert(result.message);
+                            }
+                            //刷新当前目录
+                            this.fetchSomething();
+
+                        });
+                        
+                    } catch (error) {
+                        console.error('上传文件发生错误:', error);
+                        //alert('上传文件发生错误:'+error);
+                    }
+                }
+
+            },// upload_file 上传文件
+            async upload_dirs(){
+                
+                if (this.$refs.fileInput2.files.length==0) return;
+                //多个文件，批量上传
+                for ( let file of this.$refs.fileInput2.files) {
+                    const formData = new FormData();
+                    formData.append('file', file,file.webkitRelativePath)
+                    formData.append("curpath",this.curpath);
+                    console.info(file.webkitRelativePath);
+                    try {
+                        let response1 = await axios.post('/api/fs/upload', formData, {
+                            headers: {
+                                'Content-Type': 'multipart/form-data'
+                            }
+                        }).then( response =>{
+
+                            var result = response.data;
+
+                            if (result.errno === 1) {
+
+                                alert(result.message);
+                            }
+                            //刷新当前目录
+                            this.fetchSomething();
+
+                        });
+                        
+                    } catch (error) {
+                        console.error('上传文件发生错误:', error);
+                        //alert('上传文件发生错误:'+error);
+                    }
+                }
+
+            }// upload_dirs 上传目录
+        }
+    }
+    
+</script>
+