diff --git a/main/ui/view.html b/main/ui/view.html
new file mode 100644
index 0000000..3b40982
--- /dev/null
+++ b/main/ui/view.html
@@ -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>
\ No newline at end of file
