Files
k3GPT/main/ui/source.html
2025-11-19 19:43:15 +08:00

367 lines
30 KiB
HTML

<div x-data="source" x-init="fetchSomething">
<!-- 查询器 四角弧形的矩形容器 -->
<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>
<button @click="open_aieditor(-1)" 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 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 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">服务器IP</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>
<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" x-text="item.name">名称</td>
<td class="p-2" x-text="item.type">类型</td>
<td class="p-2" x-text="item.address" >地址</td>
<td class="p-2" x-text="item.user" >用户</td>
<td class="p-2" x-text="item.path" >主目录</td>
<td class="p-2 text-center" x-text="item.scan" >周期</td>
<td class="p-2 text-center" x-text="item.scan_date" >最后时间</td>
<td class="p-2 text-center" x-text="item.count" >文件数</td>
<td class="p-2">
<button @click="test(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="open_aieditor(index)" 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="del_source(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 >=1"><a href="#" @click="pageSlie(1)" :class="curPage===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 >=2"><a href="#" @click="pageSlie(2)" :class="curPage===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 >=3"><a href="#" @click="pageSlie(3)" :class="curPage===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 >=4"><a href="#" @click="pageSlie(4)" :class="curPage===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 >=5"><a href="#" @click="pageSlie(5)" :class="curPage===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 >=6"><a href="#" @click="pageSlie(6)" :class="curPage===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 >=7"><a href="#" @click="pageSlie(7)" :class="curPage===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 >=8"><a href="#" @click="pageSlie(8)" :class="curPage===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 >=9"><a href="#" @click="pageSlie(9)" :class="curPage===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 >=10"><a href="#" @click="pageSlie(10)" :class="curPage===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>
<!-- AI 编辑器 Info Modal -->
<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-center 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="w-full max-w-2xl flex 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="p-4 h-full space-y-2">
<div class="space-y-1"><label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">名称</label>
<input type="text" x-model="source.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 class="space-y-1"><label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">类型</label>
<div class="relative flex w-full flex-col gap-1 text-neutral-600 dark:text-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-2 top-2 h-5 w-5">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
<select x-model="source.type" class="w-full appearance-none rounded border border-zinc-300 bg-zinc-100 px-4 py-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">
<option value="Windows共享" selected>Windows共享</option>
<option value="FTP" selected>FTP</option>
<option value="SFTP" selected>SFTP</option>
<option value="本地" selected>本地</option>
<option value="钉盘" selected>钉盘</option>
</select>
</div>
<div class="space-y-1">
<label x-show="source.type!='钉盘'" class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">服务器</label>
<label x-show="source.type=='钉盘'" class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">应用Key</label>
<input type="text" x-model="source.address" 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 class="space-y-1" x-show="source.type!='钉盘'">
<label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">用户名</label>
<input type="text" x-model="source.user" 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 class="space-y-1">
<label x-show="source.type!='钉盘'" class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">密码</label>
<label x-show="source.type=='钉盘'" class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">应用Secret</label>
<input type="password" x-model="source.password" 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 class="space-y-1">
<label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">主目录(或共享目录名称)</label>
<input type="text" x-model="source.path" 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 class="space-y-1">
<label class="text-sm font-bold font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">扫描周期(小时)</label>
<input type="text" x-model="source.scan" 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" 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>
<!-- Info Alert -->
<div x-show="Info" class="fixed top-10 left-0 right-0 z-30 w-full mx-auto max-w-2xl flex items-center justify-center rounded border border-sky-700 bg-zinc-50 text-neutral-600 dark:bg-zinc-900 dark:text-zinc-200" role="alert">
<div class="flex w-full items-center gap-2 bg-sky-700/10 p-4">
<div class="bg-sky-700/15 text-sky-700 rounded-full p-1" aria-hidden="true">
<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>
<div class="ml-2 max-h-[80vh] overflow-y-auto">
<h3 class="text-sm font-semibold text-sky-700">正在测试中...</h3>
<p class="text-xs font-medium sm:text-sm">文件列表:</p>
<ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium sm:text-sm">
<template x-for="(item,index) in fItems" :key="index">
<li><strong x-text="item.name"></strong> <span x-text="item.m_time.slice(0,10)">minimum 8</span> <span x-text="item.size"></span></li>
</template>
</ul>
</div>
<button @click="Info=false" class="ml-auto" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- Danger Alert -->
<div x-show="Alert" class="fixed top-10 left-0 right-0 z-30 w-full mx-auto max-w-2xl flex items-end justify-center overflow-hidden rounded border border-red-700 bg-zinc-50 text-neutral-600 dark:bg-zinc-900 dark:text-zinc-200" role="alert">
<div class="flex w-full items-center gap-2 bg-red-700/10 p-4">
<div class="bg-red-700/15 text-red-700 rounded-full p-1" aria-hidden="true">
<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="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-2">
<h3 class="text-sm font-semibold text-red-700">测试失败</h3>
<p class="text-xs font-medium sm:text-sm" x-text="message"></p>
</div>
<button @click="Alert=false" class="ml-auto" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</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="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 source(){
return {
checkAll: false,
selected: [],
show_op: false,
AIEditorOpen: false,
Info: false,
InfoAlert: false,
Alert: false,
message: "",
demo: '',
source:{"name":"","type":"FTP","address":"","user":"","password":"","scan":1},
count: 10,
view_count:10,
pageSize:10,
curPage: 1,
aItems:[], //总的数据
Items:[], //当页的数据
fItems:[], //测试文件列表
init(){
//监听选择变化
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 = [];
}
});
},
open_aieditor(index){
//编辑
if (index!=-1){
this.source = this.Items[index]
}
this.AIEditorOpen=true;
},
close_aieditor(){
this.AIEditorOpen=false;
this.fetchSomething();
},
close_info(){
this.InfoAlert=false;
this.fItems =[];
},
fetchSomething() {
axios.get('/api/source?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;
}).catch(error => {
console.error('Error fetching data:', error);
throw error; // 重新抛出错误以便调用者可以处理
});
},
pageSlie(page){
this.curPage = page;
this.Items = this.aItems.slice(this.pageSize*(this.curPage-1),this.pageSize*this.curPage);
},
create(){
// 使用 axios 发送 POST 请求
axios.post('/api/source', this.source)
.then(response =>{
console.info(response.data.code);
this.AIEditorOpen = false;
this.fetchSomething();
})
.catch(error => {
alert(error);
console.error('Error post data:', error);
throw error; // 重新抛出错误以便调用者可以处理
});
},
del_source(name){
axios.delete('/api/source/'+name).then(response => {
this.fetchSomething();
}).catch(error => {
console.error('Error fetching data:', error);
throw error; // 重新抛出错误以便调用者可以处理
});
},
delete_selected(){
let names = this.selected.join(",");
this.del_source(names);
this.checkAll = false;
this.selected = [];
},
test(name) {
axios.get('/api/source/test/'+name).then(response => {
if (response.data.code==200){
this.Info = true;
this.fItems = response.data.data;
}else{
this.Alert=true;
this.message = response.data.message;
}
}).catch(error => {
console.error('Error fetching data:', error);
throw error; // 重新抛出错误以便调用者可以处理
});
},
}
}
</script>