mirror of
https://github.com/zhayujie/chatgpt-on-wechat.git
synced 2026-07-19 12:47:25 +08:00
feat(knowledge): consolidate actions into a New menu and refine docs layout
This commit is contained in:
zhayujie
@@ -829,11 +829,11 @@
|
|||||||
<!-- VIEW: Knowledge -->
|
<!-- VIEW: Knowledge -->
|
||||||
<!-- ====================================================== -->
|
<!-- ====================================================== -->
|
||||||
<div id="view-knowledge" class="view">
|
<div id="view-knowledge" class="view">
|
||||||
<div class="flex-1 overflow-y-auto p-4 md:p-8 lg:p-10">
|
<div class="flex-1 min-h-0 overflow-y-auto md:overflow-hidden p-4 md:p-8 lg:p-10 md:flex md:flex-col">
|
||||||
<div class="w-full max-w-[1600px] mx-auto">
|
<div class="w-full max-w-[1600px] mx-auto md:flex-1 md:min-h-0 md:flex md:flex-col">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 md:mb-6">
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 md:mb-6 md:flex-shrink-0">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="knowledge_title">知识库</h2>
|
<h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="knowledge_title">知识库</h2>
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="knowledge_desc">浏览和探索你的知识库</p>
|
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="knowledge_desc">浏览和探索你的知识库</p>
|
||||||
@@ -841,19 +841,6 @@
|
|||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<span id="knowledge-stats" class="text-xs text-slate-400 dark:text-slate-500 hidden sm:inline"></span>
|
<span id="knowledge-stats" class="text-xs text-slate-400 dark:text-slate-500 hidden sm:inline"></span>
|
||||||
<span id="knowledge-action-status" class="text-xs opacity-0 transition-opacity duration-200"></span>
|
<span id="knowledge-action-status" class="text-xs opacity-0 transition-opacity duration-200"></span>
|
||||||
<button onclick="createKnowledgeCategory()"
|
|
||||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary-500 hover:bg-primary-600 text-white text-xs font-medium cursor-pointer transition-colors">
|
|
||||||
<i class="fas fa-folder-plus"></i><span data-i18n="knowledge_new_category">新建分类</span>
|
|
||||||
</button>
|
|
||||||
<button onclick="createKnowledgeDocument()"
|
|
||||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 text-xs font-medium cursor-pointer transition-colors">
|
|
||||||
<i class="fas fa-file-circle-plus"></i><span data-i18n="knowledge_new_document">新建文档</span>
|
|
||||||
</button>
|
|
||||||
<button onclick="selectKnowledgeImportFiles()"
|
|
||||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 text-xs font-medium cursor-pointer transition-colors">
|
|
||||||
<i class="fas fa-file-arrow-up"></i><span data-i18n="knowledge_import_documents">导入文档</span>
|
|
||||||
</button>
|
|
||||||
<input id="knowledge-import-input" type="file" class="hidden" multiple accept=".md,.txt,text/markdown,text/plain">
|
|
||||||
<div class="flex items-center bg-slate-100 dark:bg-white/10 rounded-lg p-0.5">
|
<div class="flex items-center bg-slate-100 dark:bg-white/10 rounded-lg p-0.5">
|
||||||
<button id="knowledge-tab-docs" onclick="switchKnowledgeTab('docs')"
|
<button id="knowledge-tab-docs" onclick="switchKnowledgeTab('docs')"
|
||||||
class="knowledge-tab px-3 py-1.5 rounded-md text-xs font-medium cursor-pointer transition-colors duration-150 active">
|
class="knowledge-tab px-3 py-1.5 rounded-md text-xs font-medium cursor-pointer transition-colors duration-150 active">
|
||||||
@@ -864,6 +851,28 @@
|
|||||||
<i class="fas fa-diagram-project mr-1.5"></i><span data-i18n="knowledge_tab_graph">图谱</span>
|
<i class="fas fa-diagram-project mr-1.5"></i><span data-i18n="knowledge_tab_graph">图谱</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="knowledge-new-menu" class="relative">
|
||||||
|
<button onclick="toggleKnowledgeNewMenu(event)"
|
||||||
|
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary-500 hover:bg-primary-600 text-white text-xs font-medium cursor-pointer transition-colors">
|
||||||
|
<i class="fas fa-plus"></i><span data-i18n="knowledge_new">新建</span><i class="fas fa-chevron-down text-[9px] ml-0.5"></i>
|
||||||
|
</button>
|
||||||
|
<div id="knowledge-new-menu-list"
|
||||||
|
class="hidden absolute right-0 mt-1.5 w-44 z-50 bg-white dark:bg-[#1A1A1A] border border-slate-200 dark:border-white/10 rounded-lg shadow-lg py-1">
|
||||||
|
<button onclick="createKnowledgeCategory(); closeKnowledgeNewMenu()"
|
||||||
|
class="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 cursor-pointer transition-colors">
|
||||||
|
<i class="fas fa-folder-plus w-3.5 text-slate-400"></i><span data-i18n="knowledge_new_category">新建分类</span>
|
||||||
|
</button>
|
||||||
|
<button onclick="createKnowledgeDocument(); closeKnowledgeNewMenu()"
|
||||||
|
class="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 cursor-pointer transition-colors">
|
||||||
|
<i class="fas fa-file-circle-plus w-3.5 text-slate-400"></i><span data-i18n="knowledge_new_document">新建文档</span>
|
||||||
|
</button>
|
||||||
|
<button onclick="selectKnowledgeImportFiles(); closeKnowledgeNewMenu()"
|
||||||
|
class="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 cursor-pointer transition-colors">
|
||||||
|
<i class="fas fa-file-arrow-up w-3.5 text-slate-400"></i><span data-i18n="knowledge_import_documents">导入文档</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input id="knowledge-import-input" type="file" class="hidden" multiple accept=".md,.txt,text/markdown,text/plain">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -886,12 +895,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Documents panel -->
|
<!-- Documents panel -->
|
||||||
<div id="knowledge-panel-docs" class="hidden">
|
<div id="knowledge-panel-docs" class="hidden md:flex-1 md:min-h-0">
|
||||||
<div class="flex flex-col md:flex-row gap-4 md:gap-6" style="min-height: calc(100vh - 220px)">
|
<div class="flex flex-col md:flex-row gap-4 md:gap-6 md:h-full">
|
||||||
<!-- File tree -->
|
<!-- File tree -->
|
||||||
<div id="knowledge-sidebar" class="w-full md:w-72 lg:w-80 flex-shrink-0">
|
<div id="knowledge-sidebar" class="w-full md:w-72 lg:w-80 flex-shrink-0 md:h-full">
|
||||||
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden">
|
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden flex flex-col md:h-full">
|
||||||
<div class="px-4 py-3 border-b border-slate-200 dark:border-white/10">
|
<div class="px-4 py-3 border-b border-slate-200 dark:border-white/10 flex-shrink-0">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
|
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
|
||||||
<input id="knowledge-search" type="text" placeholder="Search..."
|
<input id="knowledge-search" type="text" placeholder="Search..."
|
||||||
@@ -899,19 +908,19 @@
|
|||||||
oninput="filterKnowledgeTree(this.value)">
|
oninput="filterKnowledgeTree(this.value)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="knowledge-tree" class="p-2 overflow-y-auto max-h-[50vh] md:max-h-[calc(100vh-300px)]"></div>
|
<div id="knowledge-tree" class="p-2 overflow-y-auto flex-1 max-h-[50vh] md:max-h-none"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Content viewer -->
|
<!-- Content viewer -->
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0 md:h-full">
|
||||||
<div id="knowledge-content-placeholder"
|
<div id="knowledge-content-placeholder"
|
||||||
class="flex flex-col items-center justify-center py-20 text-slate-400 dark:text-slate-500">
|
class="flex flex-col items-center justify-center py-20 md:h-full text-slate-400 dark:text-slate-500 bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10">
|
||||||
<i class="fas fa-file-lines text-3xl mb-3 opacity-40"></i>
|
<i class="fas fa-file-lines text-3xl mb-3 opacity-40"></i>
|
||||||
<p class="text-sm" data-i18n="knowledge_select_hint">选择一个文档查看</p>
|
<p class="text-sm" data-i18n="knowledge_select_hint">选择一个文档查看</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="knowledge-content-viewer" class="hidden">
|
<div id="knowledge-content-viewer" class="hidden md:h-full">
|
||||||
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden">
|
<div class="bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden flex flex-col md:h-full">
|
||||||
<div class="flex items-center gap-3 px-4 md:px-5 py-3 border-b border-slate-200 dark:border-white/10">
|
<div class="flex items-center gap-3 px-4 md:px-5 py-3 border-b border-slate-200 dark:border-white/10 flex-shrink-0">
|
||||||
<button onclick="knowledgeMobileBack()" class="md:hidden p-1 -ml-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 cursor-pointer">
|
<button onclick="knowledgeMobileBack()" class="md:hidden p-1 -ml-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 cursor-pointer">
|
||||||
<i class="fas fa-arrow-left text-xs"></i>
|
<i class="fas fa-arrow-left text-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -920,8 +929,7 @@
|
|||||||
<span id="knowledge-viewer-path" class="text-xs text-slate-400 dark:text-slate-500 ml-auto font-mono truncate hidden md:inline"></span>
|
<span id="knowledge-viewer-path" class="text-xs text-slate-400 dark:text-slate-500 ml-auto font-mono truncate hidden md:inline"></span>
|
||||||
</div>
|
</div>
|
||||||
<div id="knowledge-viewer-body"
|
<div id="knowledge-viewer-body"
|
||||||
class="p-4 md:p-5 overflow-y-auto text-sm msg-content text-slate-700 dark:text-slate-200"
|
class="p-4 md:p-5 overflow-y-auto flex-1 max-h-[60vh] md:max-h-none text-sm msg-content text-slate-700 dark:text-slate-200"></div>
|
||||||
style="max-height: calc(100vh - 280px)"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1107,7 +1115,7 @@
|
|||||||
<input id="knowledge-dialog-input" type="text"
|
<input id="knowledge-dialog-input" type="text"
|
||||||
class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500">
|
class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500">
|
||||||
<select id="knowledge-dialog-select"
|
<select id="knowledge-dialog-select"
|
||||||
class="hidden w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-[#222] text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500"></select>
|
class="hidden w-full pl-3 pr-8 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-[#222] text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500"></select>
|
||||||
<textarea id="knowledge-dialog-textarea" rows="8"
|
<textarea id="knowledge-dialog-textarea" rows="8"
|
||||||
class="hidden w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500 font-mono resize-y"></textarea>
|
class="hidden w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100 focus:outline-none focus:border-primary-500 font-mono resize-y"></textarea>
|
||||||
<div id="knowledge-document-form" class="hidden space-y-3">
|
<div id="knowledge-document-form" class="hidden space-y-3">
|
||||||
|
|||||||
@@ -93,6 +93,7 @@ const I18N = {
|
|||||||
knowledge_select_hint: '选择一个文档查看', knowledge_empty_hint: '暂无知识页面',
|
knowledge_select_hint: '选择一个文档查看', knowledge_empty_hint: '暂无知识页面',
|
||||||
knowledge_empty_guide: '在对话中发送文档、链接或主题给 Agent，它会自动整理到你的知识库中。',
|
knowledge_empty_guide: '在对话中发送文档、链接或主题给 Agent，它会自动整理到你的知识库中。',
|
||||||
knowledge_go_chat: '开始对话',
|
knowledge_go_chat: '开始对话',
|
||||||
|
knowledge_new: '新建',
|
||||||
knowledge_new_category: '新建分类',
|
knowledge_new_category: '新建分类',
|
||||||
knowledge_new_document: '新建文档',
|
knowledge_new_document: '新建文档',
|
||||||
knowledge_import_documents: '导入文档',
|
knowledge_import_documents: '导入文档',
|
||||||
@@ -336,9 +337,10 @@ const I18N = {
|
|||||||
knowledge_select_hint: 'Select a document to view', knowledge_empty_hint: 'No knowledge pages yet',
|
knowledge_select_hint: 'Select a document to view', knowledge_empty_hint: 'No knowledge pages yet',
|
||||||
knowledge_empty_guide: 'Send documents, links or topics to the agent in chat, and it will automatically organize them into your knowledge base.',
|
knowledge_empty_guide: 'Send documents, links or topics to the agent in chat, and it will automatically organize them into your knowledge base.',
|
||||||
knowledge_go_chat: 'Start a conversation',
|
knowledge_go_chat: 'Start a conversation',
|
||||||
knowledge_new_category: 'Category',
|
knowledge_new: 'New',
|
||||||
knowledge_new_document: 'Document',
|
knowledge_new_category: 'New category',
|
||||||
knowledge_import_documents: 'Import',
|
knowledge_new_document: 'New document',
|
||||||
|
knowledge_import_documents: 'Import documents',
|
||||||
welcome_subtitle: 'I can help you answer questions, manage your computer, create and execute skills, and keep growing through <br> long-term memory and a personal knowledge base.',
|
welcome_subtitle: 'I can help you answer questions, manage your computer, create and execute skills, and keep growing through <br> long-term memory and a personal knowledge base.',
|
||||||
example_sys_title: 'System', example_sys_text: 'Show me the files in the workspace',
|
example_sys_title: 'System', example_sys_text: 'Show me the files in the workspace',
|
||||||
example_task_title: 'Scheduler', example_task_text: 'Remind me to check the server in 5 minutes',
|
example_task_title: 'Scheduler', example_task_text: 'Remind me to check the server in 5 minutes',
|
||||||
@@ -8087,6 +8089,30 @@ function openKnowledgeDialog(options) {
|
|||||||
setTimeout(() => (options.type === 'select' ? select : (options.type === 'textarea' ? textarea : (options.type === 'document' ? documentFilename : input))).focus(), 0);
|
setTimeout(() => (options.type === 'select' ? select : (options.type === 'textarea' ? textarea : (options.type === 'document' ? documentFilename : input))).focus(), 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function closeKnowledgeNewMenu() {
|
||||||
|
const list = document.getElementById('knowledge-new-menu-list');
|
||||||
|
if (list) list.classList.add('hidden');
|
||||||
|
document.removeEventListener('click', _knowledgeNewMenuOutside, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _knowledgeNewMenuOutside(event) {
|
||||||
|
const menu = document.getElementById('knowledge-new-menu');
|
||||||
|
if (menu && !menu.contains(event.target)) closeKnowledgeNewMenu();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleKnowledgeNewMenu(event) {
|
||||||
|
if (event) event.stopPropagation();
|
||||||
|
const list = document.getElementById('knowledge-new-menu-list');
|
||||||
|
if (!list) return;
|
||||||
|
const willOpen = list.classList.contains('hidden');
|
||||||
|
list.classList.toggle('hidden');
|
||||||
|
if (willOpen) {
|
||||||
|
document.addEventListener('click', _knowledgeNewMenuOutside, true);
|
||||||
|
} else {
|
||||||
|
document.removeEventListener('click', _knowledgeNewMenuOutside, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function createKnowledgeCategory() {
|
function createKnowledgeCategory() {
|
||||||
openKnowledgeDialog({
|
openKnowledgeDialog({
|
||||||
title: currentLang === 'zh' ? '新建分类' : 'New category',
|
title: currentLang === 'zh' ? '新建分类' : 'New category',
|
||||||
|
|||||||
Reference in New Issue
Block a user