howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnowHub 管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">KnowHub 全局知识库</h1>
            <div class="flex gap-3">
                <button onclick="toggleSelectAll()" id="selectAllBtn"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
                    全选
                </button>
                <button onclick="batchDelete()" id="batchDeleteBtn"
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
                    disabled>
                    删除选中 (<span id="selectedCount">0</span>)
                </button>
                <button onclick="batchVerify()" id="batchVerifyBtn"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
                    disabled>
                    ✓ 批量验证通过 (<span id="verifyCount">0</span>)
                </button>
                <button onclick="openToolTableModal()"
                    class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
                    🔧 工具表
                </button>
                <button onclick="openAddModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
                    + 新增知识
                </button>
            </div>
        </div>

        <!-- 搜索栏 -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex gap-4">
                <input type="text" id="searchInput" placeholder="输入任务描述进行语义搜索..."
                    class="flex-1 border rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onkeypress="if(event.key==='Enter') performSearch()">
                <button onclick="performSearch()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded">
                    搜索
                </button>
                <button onclick="clearSearch()" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded">
                    清除
                </button>
            </div>
            <div id="searchStatus" class="mt-2 text-sm text-gray-600 hidden"></div>
        </div>

        <!-- 筛选栏 -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">类型 (Types)</label>
                    <div class="space-y-2">
                        <label class="flex items-center"><input type="checkbox" value="strategy"
                                class="mr-2 type-filter"> Strategy</label>
                        <label class="flex items-center"><input type="checkbox" value="tool" class="mr-2 type-filter">
                            Tool</label>
                        <label class="flex items-center"><input type="checkbox" value="user_profile"
                                class="mr-2 type-filter"> User Profile</label>
                        <label class="flex items-center"><input type="checkbox" value="usecase"
                                class="mr-2 type-filter"> Usecase</label>
                        <label class="flex items-center"><input type="checkbox" value="definition"
                                class="mr-2 type-filter"> Definition</label>
                        <label class="flex items-center"><input type="checkbox" value="plan" class="mr-2 type-filter">
                            Plan</label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
                    <div id="tagsFilterContainer" class="space-y-2 max-h-40 overflow-y-auto">
                        <p class="text-sm text-gray-500">加载中...</p>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Owner</label>
                    <input type="text" id="ownerFilter" placeholder="输入 owner" class="w-full border rounded px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Scopes</label>
                    <input type="text" id="scopesFilter" placeholder="输入 scope" class="w-full border rounded px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <div class="space-y-2">
                        <label class="flex items-center"><input type="checkbox" value="approved"
                                class="mr-2 status-filter" checked> Approved</label>
                        <label class="flex items-center"><input type="checkbox" value="checked"
                                class="mr-2 status-filter" checked> Checked</label>
                        <label class="flex items-center"><input type="checkbox" value="rejected"
                                class="mr-2 status-filter"> Rejected</label>
                        <label class="flex items-center"><input type="checkbox" value="pending"
                                class="mr-2 status-filter"> Pending</label>
                    </div>
                </div>
            </div>
            <button onclick="applyFilters()" class="mt-4 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded">
                应用筛选
            </button>
        </div>

        <!-- 知识列表 -->
        <div id="knowledgeList" class="space-y-4"></div>

        <!-- 分页控件 -->
        <div id="pagination" class="flex justify-center items-center gap-4 mt-6 hidden">
            <button onclick="goToPage(currentPage - 1)" id="prevBtn"
                class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed">
                上一页
            </button>
            <span id="pageInfo" class="text-gray-700"></span>
            <button onclick="goToPage(currentPage + 1)" id="nextBtn"
                class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed">
                下一页
            </button>
        </div>
    </div>

    <!-- 新增/编辑 Modal -->
    <div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6">
            <h2 id="modalTitle" class="text-2xl font-bold mb-4">新增知识</h2>
            <form id="knowledgeForm" class="space-y-4">
                <input type="hidden" id="editId">
                <div>
                    <label class="block text-sm font-medium mb-1">Task *</label>
                    <input type="text" id="taskInput" required class="w-full border rounded px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Content *</label>
                    <textarea id="contentInput" required rows="6" class="w-full border rounded px-3 py-2"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Types (多选)</label>
                    <div class="space-y-1">
                        <label class="flex items-center"><input type="checkbox" value="strategy"
                                class="mr-2 type-checkbox"> Strategy</label>
                        <label class="flex items-center"><input type="checkbox" value="tool" class="mr-2 type-checkbox">
                            Tool</label>
                        <label class="flex items-center"><input type="checkbox" value="user_profile"
                                class="mr-2 type-checkbox"> User Profile</label>
                        <label class="flex items-center"><input type="checkbox" value="usecase"
                                class="mr-2 type-checkbox"> Usecase</label>
                        <label class="flex items-center"><input type="checkbox" value="definition"
                                class="mr-2 type-checkbox"> Definition</label>
                        <label class="flex items-center"><input type="checkbox" value="plan" class="mr-2 type-checkbox">
                            Plan</label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Tags (JSON)</label>
                    <textarea id="tagsInput" rows="2" placeholder='{"key": "value"}'
                        class="w-full border rounded px-3 py-2"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Scopes (逗号分隔)</label>
                    <input type="text" id="scopesInput" placeholder="org:cybertogether"
                        class="w-full border rounded px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Owner</label>
                    <input type="text" id="ownerInput" class="w-full border rounded px-3 py-2">
                </div>
                <div id="relationshipsSection" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-2">关联知识</label>
                    <div id="relationshipsList" class="space-y-1 text-sm bg-gray-50 rounded p-3"></div>
                </div>
                <div class="flex gap-2 pt-4">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded">保存</button>
                    <button type="button" onclick="closeModal()"
                        class="bg-gray-300 hover:bg-gray-400 px-6 py-2 rounded">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 工具表 Modal -->
    <div id="toolTableModal"
        class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-5xl max-h-[90vh] flex flex-col">
            <div class="flex justify-between items-center p-6 border-b">
                <h2 class="text-2xl font-bold">🔧 工具表</h2>
                <button onclick="closeToolTableModal()" class="text-gray-400 hover:text-gray-600 text-2xl">✕</button>
            </div>
            <div id="toolCategoryTabs" class="flex gap-2 px-6 pt-4 flex-wrap border-b pb-4"></div>
            <div class="flex flex-1 overflow-hidden">
                <div id="toolList" class="w-[250px] border-r overflow-y-auto p-4 space-y-2 bg-gray-50 flex-shrink-0">
                    <p class="text-sm text-gray-500 text-center mt-4">加载中...</p>
                </div>
                <div id="toolDetail" class="flex-1 overflow-y-auto p-6 bg-white">
                    <div class="flex h-full items-center justify-center text-gray-400">
                        ← 请在左侧选择要查看的工具
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 知识详情弹窗（只读）-->
    <div id="knowledgeDetailModal"
        class="hidden fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center p-4 z-[60]">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[85vh] flex flex-col">
            <div class="flex justify-between items-center p-6 border-b">
                <h2 class="text-xl font-bold text-gray-800">知识详情</h2>
                <button onclick="closeKnowledgeDetailModal()"
                    class="text-gray-400 hover:text-gray-600 text-2xl">✕</button>
            </div>
            <div id="knowledgeDetailContent" class="flex-1 overflow-y-auto p-6">
                <p class="text-gray-400 text-center animate-pulse">加载中...</p>
            </div>
        </div>
    </div>

    <script src="/static/app.js"></script>
</body>

</html>