Add File
This commit is contained in:
295
main/ui/search.aps
Normal file
295
main/ui/search.aps
Normal file
@@ -0,0 +1,295 @@
|
||||
<div x-data="query" class="flex flex-col h-[92vh]">
|
||||
<!-- 搜索框-->
|
||||
<div class="mx-auto flex flex-col w-full max-w-6xl rounded-lg bg-white shadow-lg p-4 mb-2">
|
||||
|
||||
<div class="flex justify-center">
|
||||
<img :src="$store.nav.logo" id="logo" width="150px" height="24px" @click="fetchSomething()" class="cursor-pointer">
|
||||
<div class="relative my-4 flex w-full max-w-xl mx-4 flex-col gap-1 text-neutral-600 dark:text-zinc-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="absolute left-2 top-1/2 size-5 -translate-y-1/2 text-neutral-600/50 dark:text-zinc-200/50" aria-hidden="true">
|
||||
<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>
|
||||
<input x-model="search" x-on:input.debounce.900ms="fetchSomething()" placeholder="搜索全站知识库、知识百科、文件中心等文档" type="search" class="w-full border border-zinc-300 rounded bg-zinc-50 px-2 py-1.5 pl-9 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-900/50 dark:focus-visible:outline-sky-600" name="search" aria-label="Search" placeholder="Search"/>
|
||||
</div>
|
||||
</div>
|
||||
<div x-text="count" class="flex justify-end text-sm"></div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<div class="mx-auto w-full max-w-6xl flex-grow overflow-y-auto p-4">
|
||||
<!--信息显示-->
|
||||
<div x-show="!showList">
|
||||
<div x-data="info_t" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-zinc-50/40 p-2 text-neutral-600 transition hover:bg-zinc-50/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:outline-offset-0 dark:bg-zinc-900/40 dark:text-zinc-200 dark:hover:bg-zinc-900/60 dark:focus-visible:outline-sky-600" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-zinc-50/40 p-2 text-neutral-600 transition hover:bg-zinc-50/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700 active:outline-offset-0 dark:bg-zinc-900/40 dark:text-zinc-200 dark:hover:bg-zinc-900/60 dark:focus-visible:outline-sky-600" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[70vh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||||
|
||||
<!-- Title and description -->
|
||||
<div class="lg:px-32 lg:py-14 absolute inset-0 z-10 flex flex-col items-center justify-end gap-2 bg-gradient-to-t from-zinc-900/85 to-transparent px-16 py-12 text-center">
|
||||
<h3 class="w-full lg:w-[80%] text-balance text-2xl lg:text-3xl font-bold text-zinc-50" x-text="slide.title" x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"></h3>
|
||||
<p class="lg:w-1/2 w-full text-pretty text-sm text-zinc-200" x-text="slide.description" x-bind:id="'slide' + (index + 1) + 'Description'"></p>
|
||||
</div>
|
||||
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-neutral-600 dark:text-zinc-200" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 cursor-pointer rounded-full transition" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-zinc-200' : 'bg-zinc-200/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--结果列表-->
|
||||
<div x-show="showList" class="flex flex-col gap-2">
|
||||
<template x-for="(item,index) in filteredItems" :key="index">
|
||||
<!-- 老样式
|
||||
<li>
|
||||
<div>
|
||||
<a :href="item.path" target="_blank"><span style="color:red;" x-text="index+1"></span>.<span style="color:red;" x-text="item.name"></span></a>
|
||||
[<span x-text="item.fdate"></span>]
|
||||
</div>
|
||||
|
||||
<div x-html="item.content" class="ml-4"></div>
|
||||
<br>
|
||||
</li>
|
||||
-->
|
||||
<div class="w-full max-w-6xl border-zinc-300 bg-zinc-100 p-2 text-left dark:border-zinc-700 dark:bg-zinc-800 rounded border" >
|
||||
|
||||
<div class="flex items-center gap-2 text-neutral-900 dark:text-zinc-50">
|
||||
<span class="flex size-8 items-center justify-center rounded-full bg-blue-700 text-white dark:bg-sky-600 dark:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span x-text="item.name" class="text-sm font-bold">文件名</span>
|
||||
[<span x-text="item.fdate" class="text-sm">日期</span>]
|
||||
</div>
|
||||
<p x-html="item.content" style="overflow-wrap: break-word;" class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-neutral-600 dark:text-zinc-200">
|
||||
高亮的内容
|
||||
</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button x-on:click="copyToClipboard(item.name);" class="rounded-full p-1 text-neutral-600/75 hover:bg-zinc-900/10 hover:text-neutral-600 focus:outline-none focus-visible:text-neutral-600 focus-visible:zinc-300 focus-visible:outline-offset-0 focus-visible:outline-sky-700 active:bg-zinc-900/5 active:-outline-offset-2 dark:text-zinc-200/75 dark:hover:bg-zinc-50/10 dark:hover:text-zinc-200 dark:focus-visible:text-zinc-200 dark:focus-visible:outline-sky-600 dark:active:bg-zinc-50/5" title="复制" aria-label="Read Aloud" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 下载-->
|
||||
<button @click="download(item.path,item.name,item.base)" class="rounded-full p-1 text-neutral-600/75 hover:bg-zinc-900/10 hover:text-neutral-600 focus:outline-none focus-visible:text-neutral-600 focus-visible:zinc-300 focus-visible:outline-offset-0 focus-visible:outline-sky-700 active:bg-zinc-900/5 active:-outline-offset-2 dark:text-zinc-200/75 dark:hover:bg-zinc-50/10 dark:hover:text-zinc-200 dark:focus-visible:text-zinc-200 dark:focus-visible:outline-sky-600 dark:active:bg-zinc-50/5" title="下载或查看" aria-label="Download" >
|
||||
<template x-if="item.base!='知识百科'">
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-4" fill="currentColor">
|
||||
<path d="M19 9h-4V3H9v6H5l7 7z"/>
|
||||
<path d="M20 18H4v2h16z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<template x-if="item.base=='知识百科'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM5 9a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V9zM14.707 14.707l4.293 4.293a1 1 0 0 1-1.414 1.414l-4.293-4.293a5 5 0 1 1 1.414-1.414z"/>
|
||||
</svg>
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<!-- 点赞 -->
|
||||
<button @click="like_it(item.path,item.name,item.base)" class="rounded-full p-1 text-neutral-600/75 hover:bg-zinc-900/10 hover:text-neutral-600 focus:outline-none focus-visible:text-neutral-600 focus-visible:zinc-300 focus-visible:outline-offset-0 focus-visible:outline-sky-700 active:bg-zinc-900/5 active:-outline-offset-2 dark:text-zinc-200/75 dark:hover:bg-zinc-50/10 dark:hover:text-zinc-200 dark:focus-visible:text-zinc-200 dark:focus-visible:outline-sky-600 dark:active:bg-zinc-50/5" title="点赞" aria-label="Like" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- AI对话，知识问答 -->
|
||||
<button @click="ai_it(item.path,item.name,item.base)" class="rounded-full p-1 text-neutral-600/75 hover:bg-zinc-900/10 hover:text-neutral-600 focus:outline-none focus-visible:text-neutral-600 focus-visible:zinc-300 focus-visible:outline-offset-0 focus-visible:outline-sky-700 active:bg-zinc-900/5 active:-outline-offset-2 dark:text-zinc-200/75 dark:hover:bg-zinc-50/10 dark:hover:text-zinc-200 dark:focus-visible:text-zinc-200 dark:focus-visible:outline-sky-600 dark:active:bg-zinc-50/5" title="知识对话" aria-label="Like" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M3.505 2.365A41.369 41.369 0 0 1 9 2c1.863 0 3.697.124 5.495.365 1.247.167 2.18 1.108 2.435 2.268a4.45 4.45 0 0 0-.577-.069 43.141 43.141 0 0 0-4.706 0C9.229 4.696 7.5 6.727 7.5 8.998v2.24c0 1.413.67 2.735 1.76 3.562l-2.98 2.98A.75.75 0 0 1 5 17.25v-3.443c-.501-.048-1-.106-1.495-.172C2.033 13.438 1 12.162 1 10.72V5.28c0-1.441 1.033-2.717 2.505-2.914Z" />
|
||||
<path d="M14 6c-.762 0-1.52.02-2.271.062C10.157 6.148 9 7.472 9 8.998v2.24c0 1.519 1.147 2.839 2.71 2.935.214.013.428.024.642.034.2.009.385.09.518.224l2.35 2.35a.75.75 0 0 0 1.28-.531v-2.07c1.453-.195 2.5-1.463 2.5-2.915V8.998c0-1.526-1.157-2.85-2.729-2.936A41.645 41.645 0 0 0 14 6Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="rounded-full p-1 text-neutral-600/75 hover:bg-zinc-900/10 hover:text-neutral-600 focus:outline-none focus-visible:text-neutral-600 focus-visible:zinc-300 focus-visible:outline-offset-0 focus-visible:outline-sky-700 active:bg-zinc-900/5 active:-outline-offset-2 dark:text-zinc-200/75 dark:hover:bg-zinc-50/10 dark:hover:text-zinc-200 dark:focus-visible:text-zinc-200 dark:focus-visible:outline-sky-600 dark:active:bg-zinc-50/5" :title="item.path">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
async function search(key){
|
||||
var rsp= await axios.get('/api/search?q='+key);
|
||||
|
||||
return rsp;
|
||||
}
|
||||
|
||||
function query(){
|
||||
return {
|
||||
search: '',
|
||||
count: "",
|
||||
showList: false,
|
||||
filteredItems:[],
|
||||
|
||||
fetchSomething() {
|
||||
|
||||
if (this.search==""){
|
||||
this.showList=false;
|
||||
this.filteredItems=[];
|
||||
this.count="";
|
||||
|
||||
}else{
|
||||
this.showList=true;
|
||||
axios.get('/api/search?q='+this.search).then(response => {
|
||||
//console.log('Data:', response.data);
|
||||
this.filteredItems= response.data.data;
|
||||
this.count="约查到 "+response.data.count+" 个文件";
|
||||
}).catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
throw error; // 重新抛出错误以便调用者可以处理
|
||||
});
|
||||
// var rsp =search(this.search);
|
||||
// console.info(rsp);
|
||||
|
||||
|
||||
}
|
||||
},// fetchSomething
|
||||
download(path,name,base){
|
||||
if (base=="知识百科"){
|
||||
window.open(`/ui/view.html?id=${path}`);
|
||||
}else{
|
||||
window.open(`/api/fd?path=${path}&filename=${name}&base=${base}`);
|
||||
}
|
||||
},
|
||||
like_it(path,name,base){
|
||||
axios.get(`/api/fd/like?path=${path}&filename=${name}&base=${base}`).then(response => {
|
||||
|
||||
}).catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
throw error; // 重新抛出错误以便调用者可以处理
|
||||
});
|
||||
},
|
||||
ai_it(path,name,base){
|
||||
|
||||
this.$store.nav.selectedTab='comments';
|
||||
|
||||
this.$store.nav.qItems=[];
|
||||
this.$store.nav.Items=[];
|
||||
|
||||
this.$store.nav.ai_file={base:base,path:path,name:name};
|
||||
//this.$store.nav.ai_tips=`你好，你选定了《${name}》文件，我可以根据文件内容回答你的问题。如文章的主要内容？文章的大纲？等`;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//内容信息
|
||||
function info_t(){
|
||||
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'images/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
title: '知识搜索，在知识的海洋中荡漾',
|
||||
description: 'The architects of the digital world, constantly battling against their mortal enemy – browser compatibility.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'images/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
title: '知识对话，与智者同行成为智者',
|
||||
description: 'Because not all superheroes wear capes, some wear headphones and stare at terminal screens',
|
||||
},
|
||||
{
|
||||
imgSrc: 'images/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
title: '知识创作，创意无限智慧通天',
|
||||
description: 'Where "burnout" is just a fancy term for "Tuesday".'
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
count() {
|
||||
axios.get('/api/count').then(response => {
|
||||
|
||||
let data_size = response.data.data_size;
|
||||
let baike_count = response.data.baike_count;
|
||||
let catalog_count = response.data.catalog_count;
|
||||
let base_count = response.data.base_count;
|
||||
let doc_count = response.data.doc_count;
|
||||
let QA_count = response.data.QA_count;
|
||||
let watch_sum = response.data.watch_sum;
|
||||
|
||||
//今日统计
|
||||
let qa_cnt = response.data.qa_cnt;
|
||||
let baike_cnt = response.data.baike_cnt;
|
||||
let doc_cnt = response.data.doc_cnt;
|
||||
|
||||
let view_size = formatBytes(data_size);
|
||||
this.slides[0].description=`目前共接入${base_count}个知识库,文档数量达到${doc_count}个,数据总量超过${view_size},今日更新${doc_cnt}个,汇聚让知识更好沉淀！`;
|
||||
this.slides[1].description=`目前共计对话总数超过${QA_count}次,今日新增${qa_cnt}次，让人更方便的获取知识，让知识流动到每一个人的心里`;
|
||||
this.slides[2].description=`目前共创建知识百科${baike_count}条,分类数量达到${catalog_count}个,总计浏览${watch_sum}次，今日更新${baike_cnt}条,创新让知识更有价值`;
|
||||
|
||||
|
||||
}).catch(error => {
|
||||
top.window.location.href="/ui/login.html";
|
||||
});
|
||||
|
||||
},
|
||||
init(){
|
||||
this.count();
|
||||
|
||||
setInterval(() => {
|
||||
this.next();
|
||||
}, 10000);
|
||||
|
||||
//5分钟
|
||||
setInterval(() => {
|
||||
this.count();
|
||||
}, 300000);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user