Add File
This commit is contained in:
280
main/ui/view.html
Normal file
280
main/ui/view.html
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" href="logo2.png" sizes="16x16" type="image/png">
|
||||||
|
<!--<script src="https://cdn.tailwindcss.com"></script>-->
|
||||||
|
<link rel="stylesheet" href="tw.k3gpt.css">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/axios.min.js"></script>
|
||||||
|
<script src="js/marked.js"></script>
|
||||||
|
<script defer src="js/alpine.js"></script>
|
||||||
|
<script defer src="js/alp_unit.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//格式化输出文件大小
|
||||||
|
function formatBytes(bytes, decimals = 1) {
|
||||||
|
if (bytes === -1) return '';
|
||||||
|
if (bytes === 0) return '0 Bytes';
|
||||||
|
|
||||||
|
const k = 1024;
|
||||||
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* WebKit 浏览器的滚动条 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 4px; /* 滚动条宽度 */
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1; /* 轨道背景色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888; /* 滚动条颜色 */
|
||||||
|
border-radius: 4px; /* 圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555; /* 滚动条悬停时的颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*WangEdit的样式*/
|
||||||
|
#editor-content-view {
|
||||||
|
border: 3px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view p,
|
||||||
|
#editor-content-view li {
|
||||||
|
white-space: pre-wrap; /* 保留空格 */
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view blockquote {
|
||||||
|
border-left: 8px solid #d0e5f2;
|
||||||
|
padding: 10px 10px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view code {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
#editor-content-view pre>code {
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
#editor-content-view td,
|
||||||
|
#editor-content-view th {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
min-width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#editor-content-view th {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view ul,
|
||||||
|
#editor-content-view ol {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-content-view input[type="checkbox"] {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 基础样式 */
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 特定级别样式 */
|
||||||
|
h1 {
|
||||||
|
font-size: 2em; /* 或者使用百分比如 250% */
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.75em;
|
||||||
|
color: #444;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
color: #00f;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1em;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: disc; /* 默认样式为实心圆 */
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 20px; /* 根据需要调整缩进 */
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin-bottom: 0.5em; /* 可选：增加项目之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal; /* 默认样式为数字1, 2, 3... */
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 20px; /* 根据需要调整缩进 */
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li {
|
||||||
|
margin-bottom: 0.5em; /* 可选：增加项目之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ff4d4d; /* 醒目的红色 */
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px 2px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #fff0f0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-block;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div x-data="view" class="w-full h-screen">
|
||||||
|
<div class="flex justify-between border-b-2 text-sky-700 dark:border-zinc-700">
|
||||||
|
<div class="font-bold py-3 "><a href="/ui/index.html">AI知识共享平台-让知识流动起来</a></div>
|
||||||
|
<div class="flex justify-end gap-2 overflow-x-auto border-zinc-300 dark:border-zinc-700" role="tablist" aria-label="tab options">
|
||||||
|
<!-- 搜索不要
|
||||||
|
<div class="relative py-2 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>
|
||||||
|
-->
|
||||||
|
<button @click="gen_pdf" type="button" class="m-2 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>
|
||||||
|
生成PDF文档
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--导航下的页面内容 -->
|
||||||
|
<div class="my-4 px-4 text-neutral-600 dark:text-zinc-200">
|
||||||
|
<div x-show="selectedTab === 'search'" id="tabpanelGroups" role="tabpanel" aria-label="groups">
|
||||||
|
<div alp-unit="search.html"></div>
|
||||||
|
</div>
|
||||||
|
<div x-show="selectedTab === 'content'" id="tabpanelLikes" role="tabpanel" aria-label="likes">
|
||||||
|
<!-- 百科头部-->
|
||||||
|
<div class="bg-sky-700/70 mx-auto flex flex-col w-full max-w-2xl rounded-lg text-white shadow-lg p-4 mb-2">
|
||||||
|
<div>标题：<span x-text="data.title" class="font-bold"></span></div>
|
||||||
|
<div>类别：<span x-text="data.catalog" class="font-bold"></span></div>
|
||||||
|
<div>创建时间：<span x-text="data.c_time.slice(0,19).replace('T',' ')" class="text-sm"></span></div>
|
||||||
|
<div>最后修改时间：<span x-text="data.m_time.slice(0,19).replace('T',' ')" class="text-sm"></span></div>
|
||||||
|
<div>浏览次数：<span x-text="data.view_count" class="text-sm"></span></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 百科内容-->
|
||||||
|
<div x-html="data.html" id="editor-content-view" class="leading-relaxed text-sm mx-auto my-4 flex flex-col w-full max-w-6xl min-h-[20em] rounded-lg bg-white shadow-lg p-4 mb-2">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
var baike_id = url.searchParams.get('id');
|
||||||
|
|
||||||
|
if (baike_id!==undefined){
|
||||||
|
|
||||||
|
baike_id=parseInt(baike_id);
|
||||||
|
}
|
||||||
|
function view(){
|
||||||
|
return {
|
||||||
|
selectedTab: 'content',
|
||||||
|
baike_count: 0,
|
||||||
|
data:{},
|
||||||
|
init(){
|
||||||
|
|
||||||
|
axios.get('/api/baike/'+baike_id).then(response => {
|
||||||
|
|
||||||
|
this.data = response.data;
|
||||||
|
document.title = this.data.title;
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
throw error; // 重新抛出错误以便调用者可以处理
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//生成pdf文档
|
||||||
|
gen_pdf(){
|
||||||
|
|
||||||
|
// 数据对象，代表要发送的数据
|
||||||
|
const newItem = {
|
||||||
|
id: this.data.baike_id,
|
||||||
|
title: this.data.title,
|
||||||
|
catalog: this.data.catalog,
|
||||||
|
html: this.data.html
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用 axios 发送 POST 请求
|
||||||
|
axios.post('/api/baike_gen_pdf', newItem)
|
||||||
|
.then(response =>{
|
||||||
|
window.open(`/api/fsd/${response.data.filename}`);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
alert(error.response.data.detail);
|
||||||
|
console.error('Error post data:', error);
|
||||||
|
throw error; // 重新抛出错误以便调用者可以处理
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user