Spaces:

zhenhai18
/

kmlu

Running

App Files Files Community

zhenhai18 commited on Jul 4, 2025

Commit

3cee05d

verified ·

1 Parent(s): 5956616

这个好像只是个前端界面，没有设计交互，后端服务支持吧，需要在次基础上开发和完善后端服务和业务交互。 - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1162 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Kmlu
-emoji: 📚
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: kmlu
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1162 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能知识库管理系统</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .sidebar-collapsed {
+            width: 70px;
+        }
+        .sidebar-collapsed .nav-text {
+            display: none;
+        }
+        .sidebar-expanded {
+            width: 250px;
+        }
+        .content-collapsed {
+            margin-left: 70px;
+        }
+        .content-expanded {
+            margin-left: 250px;
+        }
+        .folder-item:hover, .file-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .tree-view {
+            transition: all 0.3s ease;
+        }
+        .tree-node {
+            cursor: pointer;
+        }
+        .context-menu {
+            position: absolute;
+            z-index: 1000;
+            background: white;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            display: none;
+        }
+        .context-menu-item {
+            padding: 8px 16px;
+            cursor: pointer;
+        }
+        .context-menu-item:hover {
+            background-color: #f0f0f0;
+        }
+        .json-viewer {
+            background-color: #f8f8f8;
+            border-radius: 4px;
+            padding: 10px;
+            overflow-x: auto;
+        }
+        .loading-spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .chat-bubble {
+            max-width: 70%;
+            padding: 10px 15px;
+            border-radius: 18px;
+            margin-bottom: 10px;
+        }
+        .user-bubble {
+            background-color: #3b82f6;
+            color: white;
+            margin-left: auto;
+        }
+        .ai-bubble {
+            background-color: #f3f4f6;
+            color: #333;
+            margin-right: auto;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="flex h-screen overflow-hidden">
+        <!-- 侧边栏 -->
+        <div id="sidebar" class="sidebar-expanded bg-white shadow-md flex flex-col h-full transition-all duration-300">
+            <div class="flex items-center justify-between p-4 border-b">
+                <div class="flex items-center">
+                    <i class="fas fa-brain text-blue-500 text-xl mr-2"></i>
+                    <span class="text-lg font-semibold">智能知识库</span>
+                </div>
+                <button id="toggleSidebar" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+            <div class="flex-1 overflow-y-auto p-2">
+                <div class="flex items-center justify-between mb-2 px-2">
+                    <span class="text-sm font-medium text-gray-500">知识库结构</span>
+                    <button id="createRootFolder" class="text-blue-500 hover:text-blue-700 text-sm">
+                        <i class="fas fa-plus"></i>
+                        <span class="nav-text ml-1">新增</span>
+                    </button>
+                </div>
+                <div id="knowledgeTree" class="tree-view space-y-1">
+                    <!-- 动态生成的知识库树结构 -->
+                </div>
+            </div>
+            <div class="p-4 border-t">
+                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center">
+                    <i class="fas fa-cloud-upload-alt mr-2"></i>
+                    <span class="nav-text">同步云端</span>
+                </button>
+            </div>
+        </div>
+        <!-- 主内容区 -->
+        <div class="content-expanded flex-1 flex flex-col overflow-hidden transition-all duration-300">
+            <!-- 顶部导航 -->
+            <header class="bg-white shadow-sm p-4 flex items-center justify-between">
+                <div class="flex items-center">
+                    <h1 class="text-xl font-semibold text-gray-800" id="currentLocation">知识库管理</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <input type="text" placeholder="搜索知识库..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full">
+                            <i class="fas fa-user"></i>
+                        </button>
+                        <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 p-2 rounded-full">
+                            <i class="fas fa-cog"></i>
+                        </button>
+                    </div>
+                </div>
+            </header>
+            <!-- 主内容面板 -->
+            <main class="flex-1 overflow-hidden flex">
+                <!-- 文件夹内容区 -->
+                <div id="folderContent" class="w-2/3 bg-white border-r overflow-y-auto p-6">
+                    <div class="flex items-center justify-between mb-6">
+                        <h2 class="text-lg font-semibold">文件夹内容</h2>
+                        <div class="flex space-x-2">
+                            <button id="uploadFileBtn" class="flex items-center bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
+                                <i class="fas fa-upload mr-1"></i> 上传文件
+                                <input type="file" id="fileInput" class="hidden" multiple>
+                            </button>
+                            <button id="createFolderBtn" class="flex items-center bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm">
+                                <i class="fas fa-folder-plus mr-1"></i> 新建文件夹
+                            </button>
+                        </div>
+                    </div>
+                    <!-- 面包屑导航 -->
+                    <div id="breadcrumb" class="flex items-center text-sm text-gray-600 mb-6">
+                        <span class="hover:text-blue-500 cursor-pointer">知识库</span>
+                    </div>
+                    <!-- 文件列表 -->
+                    <div id="fileList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <!-- 动态生成的文件和文件夹列表 -->
+                        <div class="text-center py-10 text-gray-400">
+                            <i class="fas fa-folder-open text-4xl mb-2"></i>
+                            <p>当前文件夹为空</p>
+                        </div>
+                    </div>
+                    <!-- 文件预览面板 -->
+                    <div id="filePreview" class="hidden mt-6 p-4 border rounded-lg bg-gray-50">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="font-medium">文件预览</h3>
+                            <div>
+                                <button class="text-gray-500 hover:text-gray-700 mr-2">
+                                    <i class="fas fa-download"></i>
+                                </button>
+                                <button class="text-gray-500 hover:text-gray-700">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div id="previewContent" class="max-h-80 overflow-auto">
+                            <!-- 动态生成的文件预览内容 -->
+                        </div>
+                    </div>
+                </div>
+                <!-- AI助手面板 -->
+                <div id="aiPanel" class="w-1/3 bg-white p-4 overflow-y-auto">
+                    <div class="sticky top-0 bg-white pb-2 border-b mb-4">
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-lg font-semibold">AI知识助手</h2>
+                            <div class="flex space-x-2">
+                                <button class="text-gray-500 hover:text-gray-700">
+                                    <i class="fas fa-history"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="mt-4">
+                            <div class="flex items-center space-x-2 mb-2">
+                                <label class="text-sm font-medium text-gray-700">AI模型:</label>
+                                <select id="aiModelSelect" class="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <option value="gpt-4">GPT-4</option>
+                                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                                    <option value="claude-2">Claude 2</option>
+                                    <option value="llama-2">Llama 2</option>
+                                </select>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <label class="text-sm font-medium text-gray-700">检索方式:</label>
+                                <select id="searchMethodSelect" class="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <option value="semantic">语义检索</option>
+                                    <option value="keyword">关键词检索</option>
+                                    <option value="hybrid">混合检索</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 聊天消息区 -->
+                    <div id="chatContainer" class="space-y-3 mb-4">
+                        <div class="chat-bubble ai-bubble">
+                            <div class="font-medium mb-1">AI助手</div>
+                            <p>您好！我是您的AI知识助手。您可以向我提问关于知识库中的任何内容，或者让我根据现有知识生成新的文档。</p>
+                        </div>
+                    </div>
+                    <!-- 聊天输入区 -->
+                    <div class="sticky bottom-0 bg-white pt-4">
+                        <div class="flex space-x-2 mb-4">
+                            <button class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-1 rounded text-sm">
+                                <i class="fas fa-lightbulb mr-1"></i> 文档观点
+                            </button>
+                            <button class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-3 py-1 rounded text-sm">
+                                <i class="fas fa-file-alt mr-1"></i> 文档摘要
+                            </button>
+                            <button id="generateDocBtn" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded text-sm">
+                                <i class="fas fa-magic mr-1"></i> 生成文档
+                            </button>
+                        </div>
+                        <div class="relative">
+                            <textarea id="chatInput" rows="3" class="w-full border rounded-lg p-3 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入您的问题或文档生成要求..."></textarea>
+                            <button id="sendChatBtn" class="absolute right-2 bottom-2 bg-blue-500 text-white p-1 rounded-md hover:bg-blue-600">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- 上下文菜单 -->
+    <div id="contextMenu" class="context-menu">
+        <div class="context-menu-item rename-item"><i class="fas fa-edit mr-2"></i>重命名</div>
+        <div class="context-menu-item move-item"><i class="fas fa-share mr-2"></i>移动</div>
+        <div class="context-menu-item delete-item"><i class="fas fa-trash mr-2"></i>删除</div>
+        <div class="border-t"></div>
+        <div class="context-menu-item properties-item"><i class="fas fa-info-circle mr-2"></i>属性</div>
+    </div>
+    <!-- 模态框 -->
+    <div id="modalOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
+        <div id="modal" class="bg-white rounded-lg w-full max-w-md">
+            <div class="flex justify-between items-center p-4 border-b">
+                <h3 id="modalTitle" class="text-lg font-medium">模态框标题</h3>
+                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="modalContent" class="p-4">
+                <!-- 动态内容 -->
+            </div>
+            <div class="flex justify-end p-4 border-t space-x-2">
+                <button id="cancelModal" class="px-4 py-2 border rounded-md hover:bg-gray-50">取消</button>
+                <button id="confirmModal" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">确认</button>
+            </div>
+        </div>
+    </div>
+    <!-- 文档生成设置模态框 -->
+    <div id="docGenModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
+        <div class="bg-white rounded-lg w-full max-w-xl">
+            <div class="flex justify-between items-center p-4 border-b">
+                <h3 class="text-lg font-medium">文档生成设置</h3>
+                <button id="closeDocGenModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">文档类型</label>
+                    <select id="docType" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="report">报告</option>
+                        <option value="summary">摘要</option>
+                        <option value="manual">手册</option>
+                        <option value="article">文章</option>
+                        <option value="presentation">演示文稿</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">文档风格</label>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="style-btn border px-3 py-2 rounded-lg hover:bg-gray-50" data-style="professional">专业正式</button>
+                        <button class="style-btn border px-3 py-2 rounded-lg hover:bg-gray-50" data-style="concise">简洁明了</button>
+                        <button class="style-btn border px-3 py-2 rounded-lg hover:bg-gray-50" data-style="detailed">详细深入</button>
+                        <button class="style-btn border px-3 py-2 rounded-lg hover:bg-gray-50" data-style="persuasive">有说服力</button>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">文档长度</label>
+                    <div class="flex items-center space-x-2">
+                        <input type="range" id="docLength" min="100" max="5000" step="100" value="1500" class="w-full">
+                        <span id="lengthDisplay" class="text-sm text-gray-600">1500字</span>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">具体要求</label>
+                    <textarea id="docRequirements" rows="4" class="w-full border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入您的具体要求，例如格式、重点内容等..."></textarea>
+                </div>
+            </div>
+            <div class="flex justify-between p-4 border-t">
+                <button id="cancelDocGen" class="px-4 py-2 border rounded-md hover:bg-gray-50">取消</button>
+                <button id="startDocGen" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">开始生成</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // API 基础配置
+        const API_BASE_URL = '/api';
+        const API_ENDPOINTS = {
+            auth: {
+                check: '/auth/check',
+                login: '/auth/login',
+                logout: '/auth/logout'
+            },
+            knowledge: {
+                tree: '/knowledge/tree',
+                folder: '/knowledge/folder',
+                file: '/knowledge/file',
+                search: '/knowledge/search',
+                upload: '/knowledge/upload'
+            },
+            ai: {
+                chat: '/ai/chat',
+                generate: '/ai/generate',
+                summarize: '/ai/summarize'
+            }
+        };
+        // 检查用户登录状态
+        async function checkAuth() {
+            try {
+                const response = await fetch('/api/auth/check');
+                if (!response.ok) {
+                    window.location.href = '/login';
+                }
+            } catch (error) {
+                window.location.href = '/login';
+            }
+        }
+        // 显示错误消息
+        function showError(message) {
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4';
+            errorDiv.innerHTML = `<p>${message}</p>`;
+            document.body.prepend(errorDiv);
+            setTimeout(() => errorDiv.remove(), 5000);
+        }
+        // 显示加载状态
+        function showLoading(selector) {
+            const container = document.querySelector(selector);
+            if (container) {
+                container.innerHTML = `
+                    <div class="flex justify-center items-center py-10">
+                        <i class="fas fa-spinner fa-spin text-blue-500 text-2xl"></i>
+                        <span class="ml-2">加载中...</span>
+                    </div>
+                `;
+            }
+        }
+        document.addEventListener('DOMContentLoaded', async function() {
+            try {
+                await checkAuth();
+                showLoading('#knowledgeTree');
+                await loadKnowledgeTree();
+            } catch (error) {
+                console.error('Initialization error:', error);
+                showError('初始化失败，请刷新页面重试');
+            }
+        // 知识库数据
+        let knowledgeBase = {};
+        // 从API加载知识库树
+        async function loadKnowledgeTree() {
+            try {
+                const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.knowledge.tree}`);
+                if (!response.ok) throw new Error('Failed to load knowledge tree');
+                knowledgeBase = await response.json();
+                renderKnowledgeTree();
+                renderFileList(knowledgeBase);
+            } catch (error) {
+                console.error('Error loading knowledge tree:', error);
+                showError('加载知识库失败，请稍后重试');
+            }
+        }
+                {
+                    id: 'folder1',
+                    name: '产品文档',
+                    type: 'folder',
+                    children: [
+                        {
+                            id: 'file1',
+                            name: '用户手册.pdf',
+                            type: 'file',
+                            size: '2.4 MB',
+                            lastModified: '2023-10-15'
+                        },
+                        {
+                            id: 'file2',
+                            name: 'API文档.md',
+                            type: 'file',
+                            size: '124 KB',
+                            lastModified: '2023-10-10'
+                        }
+                    ]
+                },
+                {
+                    id: 'folder2',
+                    name: '研究资料',
+                    type: 'folder',
+                    children: [
+                        {
+                            id: 'file3',
+                            name: '市场分析.xlsx',
+                            type: 'file',
+                            size: '3.7 MB',
+                            lastModified: '2023-09-25'
+                        },
+                        {
+                            id: 'file4',
+                            name: '用户调研报告.docx',
+                            type: 'file',
+                            size: '1.2 MB',
+                            lastModified: '2023-09-18'
+                        }
+                    ]
+                },
+                {
+                    id: 'file5',
+                    name: '公司简介.docx',
+                    type: 'file',
+                    size: '456 KB',
+                    lastModified: '2023-08-30'
+                }
+            ]
+        };
+        let currentFolder = {...knowledgeBase};
+        let breadcrumbStack = [knowledgeBase];
+        // DOM元素
+        const sidebar = document.getElementById('sidebar');
+        const toggleSidebarBtn = document.getElementById('toggleSidebar');
+        const contentArea = document.querySelector('.content-expanded');
+        const knowledgeTree = document.getElementById('knowledgeTree');
+        const breadcrumb = document.getElementById('breadcrumb');
+        const fileList = document.getElementById('fileList');
+        const currentLocation = document.getElementById('currentLocation');
+        const chatContainer = document.getElementById('chatContainer');
+        const chatInput = document.getElementById('chatInput');
+        const sendChatBtn = document.getElementById('sendChatBtn');
+        const generateDocBtn = document.getElementById('generateDocBtn');
+        const contextMenu = document.getElementById('contextMenu');
+        const modalOverlay = document.getElementById('modalOverlay');
+        const modal = document.getElementById('modal');
+        const modalTitle = document.getElementById('modalTitle');
+        const modalContent = document.getElementById('modalContent');
+        const confirmModal = document.getElementById('confirmModal');
+        const cancelModal = document.getElementById('cancelModal');
+        const closeModal = document.getElementById('closeModal');
+        const docGenModal = document.getElementById('docGenModal');
+        const closeDocGenModal = document.getElementById('closeDocGenModal');
+        const cancelDocGen = document.getElementById('cancelDocGen');
+        const startDocGen = document.getElementById('startDocGen');
+        const docLength = document.getElementById('docLength');
+        const lengthDisplay = document.getElementById('lengthDisplay');
+        // 初始化UI
+        // 处理文件上传
+        async function handleFileUpload(files, folderId = currentFolder.id) {
+            const formData = new FormData();
+            for (let i = 0; i < files.length; i++) {
+                formData.append('files', files[i]);
+            }
+            formData.append('folderId', folderId);
+            try {
+                showLoading('#fileList');
+                const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.knowledge.upload}`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) throw new Error('上传失败');
+                const result = await response.json();
+                // 刷新当前文件夹内容
+                await loadFolderContent(currentFolder.id);
+                showSuccess('文件上传成功');
+            } catch (error) {
+                console.error('Upload error:', error);
+                showError('文件上传失败');
+            }
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            // 文件上传事件监听
+            document.getElementById('fileInput').addEventListener('change', (e) => {
+                if (e.target.files.length > 0) {
+                    handleFileUpload(e.target.files);
+                }
+            });
+            renderKnowledgeTree();
+            renderFileList(currentFolder);
+            renderBreadcrumb();
+            // 设置当前位置
+            currentLocation.textContent = currentFolder.name;
+            // 添加事件监听器
+            toggleSidebarBtn.addEventListener('click', toggleSidebar);
+            sendChatBtn.addEventListener('click', sendMessage);
+            chatInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            generateDocBtn.addEventListener('click', showDocGenModal);
+            document.addEventListener('click', closeContextMenu);
+            confirmModal.addEventListener('click', handleModalConfirm);
+            cancelModal.addEventListener('click', closeModalWindow);
+            closeModal.addEventListener('click', closeModalWindow);
+            docLength.addEventListener('input', updateLengthDisplay);
+            closeDocGenModal.addEventListener('click', () => docGenModal.classList.add('hidden'));
+            cancelDocGen.addEventListener('click', () => docGenModal.classList.add('hidden'));
+            startDocGen.addEventListener('click', generateDocument);
+            // 样式按钮事件
+            document.querySelectorAll('.style-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('bg-blue-100', 'border-blue-500'));
+                    this.classList.add('bg-blue-100', 'border-blue-500');
+                });
+            });
+        });
+        // 渲染知识库树
+        function renderKnowledgeTree() {
+            knowledgeTree.innerHTML = '';
+            renderTreeItem(knowledgeBase, knowledgeTree);
+            function renderTreeItem(item, container) {
+                const treeItem = document.createElement('div');
+                treeItem.className = 'tree-node';
+                treeItem.dataset.id = item.id;
+                const itemContent = document.createElement('div');
+                itemContent.className = 'flex items-center py-1 px-2 rounded hover:bg-gray-100';
+                const icon = document.createElement('i');
+                icon.className = item.type === 'folder' ? 'fas fa-folder text-yellow-400 mr-2' : 'fas fa-file text-gray-400 mr-2';
+                const name = document.createElement('span');
+                name.className = 'text-sm nav-text';
+                name.textContent = item.name;
+                itemContent.appendChild(icon);
+                itemContent.appendChild(name);
+                treeItem.appendChild(itemContent);
+                if (item.type === 'folder' && item.children && item.children.length > 0) {
+                    const toggleIcon = document.createElement('i');
+                    toggleIcon.className = 'fas fa-chevron-down text-xs ml-auto nav-text';
+                    const childrenContainer = document.createElement('div');
+                    childrenContainer.className = 'ml-4 hidden';
+                    item.children.forEach(child => {
+                        renderTreeItem(child, childrenContainer);
+                    });
+                    itemContent.appendChild(toggleIcon);
+                    treeItem.appendChild(childrenContainer);
+                    itemContent.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        if (e.target === toggleIcon || e.target.parentElement === toggleIcon) {
+                            childrenContainer.classList.toggle('hidden');
+                            toggleIcon.classList.toggle('fa-chevron-down');
+                            toggleIcon.classList.toggle('fa-chevron-right');
+                        } else {
+                            navigateToFolder(item);
+                        }
+                    });
+                } else {
+                    itemContent.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        if (item.type === 'file') {
+                            previewFile(item);
+                        }
+                    });
+                }
+                // 为树项目添加上下文菜单
+                treeItem.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    showContextMenu(e, item);
+                });
+                container.appendChild(treeItem);
+            }
+        }
+        // 渲染文件列表
+        function renderFileList(folder) {
+            fileList.innerHTML = '';
+            if (!folder.children || folder.children.length === 0) {
+                const emptyMsg = document.createElement('div');
+                emptyMsg.className = 'text-center py-10 text-gray-400 col-span-3';
+                emptyMsg.innerHTML = `
+                    <i class="fas fa-folder-open text-4xl mb-2"></i>
+                    <p>当前文件夹为空</p>
+                `;
+                fileList.appendChild(emptyMsg);
+                return;
+            }
+            folder.children.forEach(item => {
+                const fileCard = document.createElement('div');
+                fileCard.className = item.type === 'folder' ? 'folder-item p-3 border rounded-lg cursor-pointer flex flex-col items-center' : 'file-item p-3 border rounded-lg cursor-pointer flex flex-col items-center';
+                const icon = document.createElement('i');
+                icon.className = item.type === 'folder' ? 'fas fa-folder text-yellow-400 mb-2 text-4xl' : getFileIcon(item.name);
+                const name = document.createElement('div');
+                name.className = 'text-sm font-medium text-center truncate w-full';
+                name.textContent = item.name;
+                const meta = document.createElement('div');
+                meta.className = 'text-xs text-gray-500 mt-1';
+                meta.textContent = item.size || '';
+                fileCard.appendChild(icon);
+                fileCard.appendChild(name);
+                fileCard.appendChild(meta);
+                fileCard.addEventListener('click', function() {
+                    if (item.type === 'folder') {
+                        navigateToFolder(item);
+                    } else {
+                        previewFile(item);
+                    }
+                });
+                // 添加上下文菜单
+                fileCard.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    showContextMenu(e, item);
+                });
+                fileList.appendChild(fileCard);
+            });
+        }
+        // 获取文件图标
+        function getFileIcon(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            switch(ext) {
+                case 'pdf':
+                    return 'fas fa-file-pdf text-red-400 mb-2 text-4xl';
+                case 'doc':
+                case 'docx':
+                    return 'fas fa-file-word text-blue-400 mb-2 text-4xl';
+                case 'xls':
+                case 'xlsx':
+                    return 'fas fa-file-excel text-green-400 mb-2 text-4xl';
+                case 'ppt':
+                case 'pptx':
+                    return 'fas fa-file-powerpoint text-orange-400 mb-2 text-4xl';
+                case 'txt':
+                    return 'fas fa-file-alt text-gray-400 mb-2 text-4xl';
+                case 'md':
+                    return 'fas fa-markdown text-gray-600 mb-2 text-4xl';
+                default:
+                    return 'fas fa-file text-gray-400 mb-2 text-4xl';
+            }
+        }
+        // 渲染面包屑导航
+        function renderBreadcrumb() {
+            breadcrumb.innerHTML = '';
+            breadcrumbStack.forEach((folder, index) => {
+                const crumb = document.createElement('span');
+                crumb.className = 'hover:text-blue-500 cursor-pointer';
+                crumb.textContent = folder.name;
+                crumb.addEventListener('click', function() {
+                    const newStack = breadcrumbStack.slice(0, index + 1);
+                    const targetFolder = newStack[newStack.length - 1];
+                    // 找到完整的文件夹对象（包括children）
+                    let fullFolder = findFullFolder(knowledgeBase, targetFolder.id);
+                    breadcrumbStack = newStack;
+                    currentFolder = fullFolder;
+                    renderFileList(currentFolder);
+                    renderBreadcrumb();
+                    currentLocation.textContent = currentFolder.name;
+                });
+                breadcrumb.appendChild(crumb);
+                if (index < breadcrumbStack.length - 1) {
+                    const separator = document.createElement('span');
+                    separator.className = 'mx-1';
+                    separator.textContent = '>';
+                    breadcrumb.appendChild(separator);
+                }
+            });
+        }
+        // 在知识库中找到完整的文件夹对象
+        function findFullFolder(startFolder, id) {
+            if (startFolder.id === id) {
+                return {...startFolder};
+            }
+            if (startFolder.children) {
+                for (let child of startFolder.children) {
+                    if (child.id === id) {
+                        return {...child};
+                    }
+                    if (child.type === 'folder') {
+                        const found = findFullFolder(child, id);
+                        if (found) return found;
+                    }
+                }
+            }
+            return null;
+        }
+        // 加载文件夹内容
+        async function loadFolderContent(folderId) {
+            try {
+                const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.knowledge.folder}/${folderId}`);
+                if (!response.ok) throw new Error('Failed to load folder');
+                const folderData = await response.json();
+                currentFolder = folderData;
+                renderFileList(currentFolder);
+                renderBreadcrumb();
+            } catch (error) {
+                console.error('Error loading folder:', error);
+                showError('加载文件夹内容失败');
+            }
+        }
+        // 导航到文件夹
+        async function navigateToFolder(folder) {
+            const fullFolder = findFullFolder(knowledgeBase, folder.id);
+            if (fullFolder) {
+                currentFolder = fullFolder;
+                breadcrumbStack.push(currentFolder);
+                renderFileList(currentFolder);
+                renderBreadcrumb();
+                currentLocation.textContent = currentFolder.name;
+            }
+        }
+        // 预览文件
+        function previewFile(file) {
+            const previewContent = document.getElementById('previewContent');
+            previewContent.innerHTML = '';
+            // 模拟不同文件类型的预览
+            if (file.name.endsWith('.pdf')) {
+                previewContent.innerHTML = `
+                    <div class="text-center py-10">
+                        <i class="fas fa-file-pdf text-6xl text-red-400 mb-4"></i>
+                        <h4 class="font-medium mb-2">${file.name}</h4>
+                        <p class="text-sm text-gray-500">这是PDF文件的预览占位符</p>
+                    </div>
+                `;
+            } else if (file.name.endsWith('.docx') || file.name.endsWith('.doc')) {
+                previewContent.innerHTML = `
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-bold">${file.name.replace('.docx', '').replace('.doc', '')}</h3>
+                        <p class="text-sm">这是Word文档的预览占位符。</p>
+                        <p class="text-sm">在实际应用中，这里将显示文档的实际内容。</p>
+                    </div>
+                `;
+            } else if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
+                previewContent.innerHTML = `
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2023</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2022</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">收入</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,200,000</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$980,000</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">支出</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$750,000</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$620,000</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p class="text-xs text-gray-500 mt-2">这是Excel表格的预览占位符</p>
+                `;
+            } else if (file.name.endsWith('.md')) {
+                previewContent.innerHTML = `
+                    <div class="prose max-w-none">
+                        <h1>${file.name.replace('.md', '')}</h1>
+                        <p>这是Markdown文件的预览。</p>
+                        <ul>
+                            <li>可以渲染Markdown语法</li>
+                            <li>支持标题、列表、代码等</li>
+                        </ul>
+                        <pre><code>const example = "这里是代码块";</code></pre>
+                    </div>
+                `;
+            } else {
+                previewContent.innerHTML = `
+                    <div>
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <tbody>
+                                <tr>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-500">文件名</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">${file.name}</td>
+                                </tr>
+                                <tr>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-500">大小</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">${file.size}</td>
+                                </tr>
+                                <tr>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-500">修改日期</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-600">${file.lastModified}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                `;
+            }
+            document.getElementById('filePreview').classList.remove('hidden');
+        }
+        // 切换侧边栏
+        function toggleSidebar() {
+            sidebar.classList.toggle('sidebar-collapsed');
+            sidebar.classList.toggle('sidebar-expanded');
+            contentArea.classList.toggle('content-collapsed');
+            contentArea.classList.toggle('content-expanded');
+        }
+        // 获取聊天上下文
+        function getChatContext() {
+            return {
+                currentFolder: currentFolder.id,
+                recentFiles: breadcrumbStack.map(f => f.id),
+                chatHistory: Array.from(chatContainer.children)
+                    .filter(el => el.classList.contains('chat-bubble'))
+                    .map(el => ({
+                        role: el.classList.contains('user-bubble') ? 'user' : 'assistant',
+                        content: el.querySelector('div:last-child').textContent
+                    }))
+            };
+        }
+        // 发送消息
+        async function sendMessage() {
+            const message = chatInput.value.trim();
+            if (!message) return;
+            // 添加用户消息到聊天界面
+            addMessageToChat('user', message);
+            // 清空输入框
+            chatInput.value = '';
+            // 调用AI服务API
+            try {
+                const response = await fetch('/api/ai/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        message: message,
+                        context: getChatContext() // 当前聊天上下文
+                    })
+                });
+                const data = await response.json();
+                addMessageToChat('ai', data.response);
+            } catch (error) {
+                addMessageToChat('ai', '抱歉，AI服务暂时不可用');
+            }
+        }
+        // 添加消息到聊天界面
+        function addMessageToChat(sender, message) {
+            const messageElement = document.createElement('div');
+            messageElement.className = `chat-bubble ${sender === 'user' ? 'user-bubble' : 'ai-bubble'}`;
+            if (sender === 'ai') {
+                messageElement.innerHTML = `
+                    <div class="font-medium mb-1">AI助手</div>
+                    <div>${message}</div>
+                `;
+            } else {
+                messageElement.innerHTML = `
+                    <div class="font-medium mb-1">您</div>
+                    <div>${message}</div>
+                `;
+            }
+            chatContainer.appendChild(messageElement);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // 模拟AI回复
+        function generateAiResponse(message) {
+            const lowerMessage = message.toLowerCase();
+            if (lowerMessage.includes('你好') || lowerMessage.includes('hi')) {
+                return '您好！我是您的AI知识助手。我可以帮助您检索知识库中的信息，或者根据现有内容生成新的文档。';
+            } else if (lowerMessage.includes('帮助') || lowerMessage.includes('help') || lowerMessage.includes('功能')) {
+                return '我可以提供以下帮助：<br>1. 搜索知识库中的信息<br>2. 回答与知识库内容相关的问题<br>3. 生成总结或摘要<br>4. 根据要求创建新的文档<br>5. 分析文档内容提供见解';
+            } else if (lowerMessage.includes('产品') && lowerMessage.includes('文档')) {
+                return '根据知识库内容，我已找到以下产品文档：<br>1. 用户手册.pdf - 包含产品使用说明<br>2. API文档.md - REST API接口说明<br>是否需要我帮忙提取其中的特定信息？';
+            } else if (lowerMessage.includes('市场分析')) {
+                return '知识库中有一份"市场分析.xlsx"文档，该文档包含以下数据：<br>- 2023年市场增长率：12.5%<br>- 主要竞争对手分析<br>- 市场细分数据<br>需要我为您生成一份摘要吗？';
+            } else if (lowerMessage.includes('总结') || lowerMessage.includes('摘要')) {
+                return '我已分析了知识库中的相关内容，以下是摘要：<br>1. 产品文档提供了详细的用户指南和API说明<br>2. 研究资料中包含市场分析和用户调研<br>3. 知识库整体结构良好，但建议增加开发规范文档';
+            } else {
+                return '我已检索了知识库中的相关内容，但未找到完全匹配的信息。您可以尝试更具体地描述您的需求，或者让我帮助您生成基于现有内容的新文档。';
+            }
+        }
+        // 显示文档生成模态框
+        function showDocGenModal() {
+            docGenModal.classList.remove('hidden');
+        }
+        // 更新文档长度显示
+        function updateLengthDisplay() {
+            lengthDisplay.textContent = docLength.value + '字';
+        }
+        // 生成文档
+        async function generateDocument() {
+            const docType = document.getElementById('docType').value;
+            const docStyle = document.querySelector('.style-btn.bg-blue-100')?.dataset.style || 'professional';
+            const docLength = document.getElementById('docLength').value;
+            const docRequirements = document.getElementById('docRequirements').value;
+            try {
+                const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.ai.generate}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        type: docType,
+                        style: docStyle,
+                        length: docLength,
+                        requirements: docRequirements,
+                        context: getChatContext()
+                    })
+                });
+                if (!response.ok) throw new Error('生成失败');
+                const result = await response.json();
+                // 显示生成的文档
+                addMessageToChat('ai', `文档生成成功:<br><br><strong>${result.title}</strong><br><br>${result.content}`);
+            } catch (error) {
+                console.error('Document generation error:', error);
+                addMessageToChat('ai', '文档生成失败，请稍后重试');
+            }
+            const docType = document.getElementById('docType').value;
+            const docRequirements = document.getElementById('docRequirements').value;
+            docGenModal.classList.add('hidden');
+            // 显示生成中的消息
+            const generatingMsg = document.createElement('div');
+            generatingMsg.className = 'chat-bubble ai-bubble flex items-center';
+            generatingMsg.innerHTML = `
+                <div class="mr-2 loading-spinner">
+                    <i class="fas fa-spinner"></i>
+                </div>
+                <div>正在为您生成文档...</div>
+            `;
+            chatContainer.appendChild(generatingMsg);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            // 模拟生成过程
+            setTimeout(() => {
+                chatContainer.removeChild(generatingMsg);
+                // 添加生成结果
+                const generatedDocument = generateExampleDocument(docType, docRequirements);
+                addMessageToChat('ai', `我已根据您的要求生成了一份文档:<br><br><strong>${generatedDocument.title}</strong><br><br>${generatedDocument.content}`);
+                // 询问用户是否要保存
+                const savePrompt = document.createElement('div');
+                savePrompt.className = 'chat-bubble ai-bubble';
+                savePrompt.innerHTML = `
+                    <div>您想将生成的文档保存到知识库中吗？</div>
+                    <div class="flex space-x-2 mt-2">
+                        <button id="saveDocYes" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm">保存</button>
+                        <button id="saveDocNo" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm">取消</button>
+                    </div>
+                `;
+                chatContainer.appendChild(savePrompt);
+                document.getElementById('saveDocYes').addEventListener('click', () => {
+                    savePrompt.innerHTML = '<div>文档已保存到"产品文档"文件夹。</div>';
+                    // 在实际应用中，这里会调用API保存文档
+                });
+                document.getElementById('saveDocNo').addEventListener('click', () => {
+                    savePrompt.innerHTML = '<div>好的，没有保存文档。</div>';
+                });
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }, 3000);
+        }
+        // 生成示例文档
+        function generateExampleDocument(type, requirements) {
+            const titles = {
+                report: '市场分析报告',
+                summary: '项目摘要',
+                manual: '用户手册',
+                article: '技术文章',
+                presentation: '演示文稿'
+            };
+            const contents = {
+                report: `市场分析报告（${new Date().getFullYear()}年）\n\n本报告分析了当前市场趋势和竞争对手情况。根据知识库中的研究资料，我们发现：\n\n1. 市场增长率预计为12.5%\n2. 主要竞争对手的市场份额为35%\n3. 客户满意度提升了8个百分点\n\n${requirements ? "\n额外要求:" + requirements : ""}`,
+                summary: `文档摘要\n\n本摘要基于知识库中的多个文档内容整合而成：\n\n1. 用户手册.pdf - 包含核心功能说明\n2. API文档.md - 详细接口规范\n3. 市场分析.xlsx - 最新市场数据\n\n关键结论：\n- 产品功能完整但文档需要更新\n- API接口设计良好\n- 市场前景乐观`,
+                manual: `用户手册\n\n产品名称: ${requirements || "默认产品"}\n\n版本: 1.0\n\n目录\n1. 简介\n2. 功能说明\n3. 常见问题\n\n第1章 简介\n本产品是一款基于先进技术的解决方案，旨在解决用户的核心需求。`,
+                article: `技术文章：${requirements || "知识管理的最佳实践"}\n\n随着信息量的爆炸式增长，高效的知识管理变得越来越重要。本文探讨了构建有效知识库系统的几种方法：\n\n1. 结构化分类\n2. 智能检索\n3. 人工智能辅助\n\n基于本知识库系统的经验，我们发现...`,
+                presentation: `演示文稿大纲：${requirements || "新产品发布会"}\n\n1. 封面\n2. 公司简介\n3. 产品概述\n4. 核心优势\n5. 市场前景\n6. Q&A\n\n每页主要内容：\n- 幻灯片1: 标题+产品图片\n- 幻灯片2: 公司里程碑\n- 幻灯片3: 产品功能概览`
+            };
+            return {
+                title: titles[type],
+                content: contents[type]
+            };
+        }
+        // 显示上下文菜单
+        function showContextMenu(e, item) {
+            e.preventDefault();
+            contextMenu.style.display = 'block';
+            contextMenu.style.left = e.pageX + 'px';
+            contextMenu.style.top = e.pageY + 'px';
+            // 设置当前上下文项
+            contextMenu.dataset.itemId = item.id;
+            contextMenu.dataset.itemType = item.type;
+            // 阻止事件冒泡
+            contextMenu.addEventListener('click', function(e) {
+                e.stopPropagation();
+            });
+        }
+        // 关闭上下文菜单
+        function closeContextMenu(e) {
+            if (contextMenu.style.display === 'block' && e.target !== contextMenu) {
+                contextMenu.style.display = 'none';
+            }
+        }
+        // 打开模态框
+        function openModal(title, content, confirmCallback) {
+            modalTitle.textContent = title;
+            modalContent.innerHTML = content;
+            modalOverlay.classList.remove('hidden');
+            // 临时存储确认回调
+            modal.dataset.confirmCallback = confirmCallback ? confirmCallback.toString() : '';
+        }
+        // 关闭模态框
+        function closeModalWindow() {
+            modalOverlay.classList.add('hidden');
+        }
+        // 处理模态框确认
+        function handleModalConfirm() {
+            // 在实际应用中，这里会根据不同的模态框执行不同的操作
+            closeModalWindow();
+        }
+        // 示例：添加一个新的文件夹
+        function addNewFolder() {
+            openModal('新建文件夹', `
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">文件夹名称</label>
+                        <input type="text" id="newFolderName" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">位置</label>
+                        <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option>${currentFolder.name}</option>
+                        </select>
+                    </div>
+                </div>
+            `, function() {
+                const folderName = document.getElementById('newFolderName').value;
+                if (folderName) {
+                    // 在实际应用中，这里会调用API创建文件夹
+                    alert(`文件夹"${folderName}"已创建`);
+                }
+            });
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zhenhai18/kmlu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>