From 316bc609c29fd37e20a8b0ec0dccd4995e7389b0 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Sun, 27 Jul 2025 02:56:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(DataBaseInfoView):=20=E6=9F=A5=E8=AF=A2?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E5=92=8C=E7=A4=BA=E4=BE=8B=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=A4=BA=E4=BE=8B=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=B9=E8=BF=9B=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/views/DataBaseInfoView.vue | 319 +++++++++++++++++++---------- 1 file changed, 216 insertions(+), 103 deletions(-) diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue index 87ca5363..10295639 100644 --- a/web/src/views/DataBaseInfoView.vue +++ b/web/src/views/DataBaseInfoView.vue @@ -317,21 +317,22 @@ >添加文件
-
- - -
+ + + Auto +
@@ -425,7 +426,7 @@
-
+

知识图谱

@@ -560,29 +561,41 @@
- -
- -
- 示例： - - {{ example }} - +
+
+ + + 搜索 + +
+ 示例： +
+ + + {{ queryExamples[currentExampleIndex] }} + + +
+
+
+
@@ -1272,15 +1285,88 @@ watch(() => database.value, () => { // 添加更多示例查询 const queryExamples = ref([ '孕妇应该避免吃哪些水果？', - '荔枝应该怎么清洗？' + '荔枝应该怎么清洗？', + '如何判断西瓜是否成熟？', + '苹果有哪些营养价值？', + '什么季节最适合吃梨？', + '如何保存草莓以延长保质期？', + '香蕉变黑后还能吃吗？', + '橙子皮可以用来做什么？' ]); +// 当前示例索引 +const currentExampleIndex = ref(0); + // 使用示例查询的方法 const useQueryExample = (example) => { queryText.value = example; onQuery(); }; +// 示例轮播相关 +let exampleCarouselInterval = null; +const startExampleCarousel = () => { + if (exampleCarouselInterval) return; + + exampleCarouselInterval = setInterval(() => { + currentExampleIndex.value = (currentExampleIndex.value + 1) % queryExamples.value.length; + }, 6000); // 每6秒切换一次 +}; + +const stopExampleCarousel = () => { + if (exampleCarouselInterval) { + clearInterval(exampleCarouselInterval); + exampleCarouselInterval = null; + } +}; + +// 组件挂载时启动示例轮播 +onMounted(() => { + getDatabaseInfo(); + startAutoRefresh(); + // 初始化时检查OCR服务健康状态 + checkOcrHealth(); + + setTimeout(() => { + if (isGraphSupported.value) { + refreshGraph(); + } + }, 800); + + // 添加拖拽事件监听 + if (resizeHandle.value) { + resizeHandle.value.addEventListener('mousedown', handleMouseDown); + } + if (resizeHandleHorizontal.value) { + resizeHandleHorizontal.value.addEventListener('mousedown', handleMouseDownHorizontal); + } + + // 添加键盘事件监听 + document.addEventListener('keydown', handleKeyDown); + + // 启动示例轮播 + startExampleCarousel(); +}); + +// 组件卸载时停止示例轮播 +onUnmounted(() => { + stopAutoRefresh(); + if (resizeHandle.value) { + resizeHandle.value.removeEventListener('mousedown', handleMouseDown); + } + if (resizeHandleHorizontal.value) { + resizeHandleHorizontal.value.removeEventListener('mousedown', handleMouseDownHorizontal); + } + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + document.removeEventListener('mousemove', handleMouseMoveHorizontal); + document.removeEventListener('mouseup', handleMouseUpHorizontal); + document.removeEventListener('keydown', handleKeyDown); + + // 停止示例轮播 + stopExampleCarousel(); +}); + // 拖拽调整大小功能 const handleMouseDown = () => { isDragging.value = true; @@ -1340,30 +1426,6 @@ const handleMouseUpHorizontal = () => { document.body.style.userSelect = ''; }; -// 添加事件监听 -onMounted(() => { - getDatabaseInfo(); - startAutoRefresh(); - // 初始化时检查OCR服务健康状态 - checkOcrHealth(); - - setTimeout(() => { - if (isGraphSupported.value) { - refreshGraph(); - } - }, 800); - - // 添加拖拽事件监听 - if (resizeHandle.value) { - resizeHandle.value.addEventListener('mousedown', handleMouseDown); - } - if (resizeHandleHorizontal.value) { - resizeHandleHorizontal.value.addEventListener('mousedown', handleMouseDownHorizontal); - } - - // 添加键盘事件监听 - document.addEventListener('keydown', handleKeyDown); -}); // 键盘事件处理 const handleKeyDown = (e) => { @@ -1772,8 +1834,9 @@ const stopAutoRefresh = () => { }; // 切换自动刷新状态 -const toggleAutoRefresh = (checked) => { - if (checked) { +const toggleAutoRefresh = () => { + state.autoRefresh = !state.autoRefresh; // Toggle the state directly + if (state.autoRefresh) { startAutoRefresh(); } else { stopAutoRefresh(); @@ -1980,6 +2043,7 @@ const getFileIconColor = (filename) => { width: 100%; } + .my-table { button.ant-btn-link { padding: 0; @@ -2504,16 +2568,6 @@ const getFileIconColor = (filename) => { } } - .refresh-group { - display: flex; - align-items: center; - gap: 4px; - background: var(--gray-100); - padding: 0px 6px; - border-radius: 8px; - border: 1px solid var(--gray-300); - } - .ant-btn { transition: all 0.2s ease; border-radius: 4px; @@ -2693,50 +2747,97 @@ const getFileIconColor = (filename) => { .query-input-row { margin-bottom: 4px; flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 8px; } - .compact-query-input { + .compact-query-textarea { width: 100%; - border-radius: 4px; - font-size: 12px; + border-radius: 6px; + font-size: 13px; + border: 1px solid var(--gray-300); + box-shadow: 0 0 4px 0px rgba(2, 10, 15, 0.05); + transition: border-color 0.2s ease; + padding: 8px 12px; - .ant-input { - font-size: 12px; + &:focus { + border-color: var(--main-color); + box-shadow: 0 0 4px 0px rgba(2, 10, 15, 0.05); } - .ant-btn { - font-size: 12px; + :deep(.ant-input) { + font-size: 13px; + padding: 8px 12px; } + + :deep(.ant-input:focus) { + border-color: var(--main-color); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + } + } + + .query-actions { + display: flex; + flex-direction: column; + gap: 8px; + } + + .search-row { + display: flex; + align-items: center; + gap: 12px; + } + + .search-button { + font-size: 13px; + height: 32px; + padding: 4px 16px; + border-color: var(--gray-300); + border-radius: 6px; } .query-examples-compact { - margin-top: 4px; - margin-bottom: 6px; display: flex; - flex-wrap: wrap; - gap: 4px; align-items: center; + gap: 6px; flex-shrink: 0; .examples-label { font-size: 12px; color: var(--gray-600); + white-space: nowrap; } - .example-btn { - background-color: var(--gray-100); - border: 1px solid var(--gray-200); - color: var(--gray-700); - font-size: 12px; + .examples-container { + position: relative; + height: 26px; + min-width: 150px; + font-size: 13px; - &:hover { - background-color: var(--main-light-4); - border-color: var(--main-color); - color: var(--main-color); + .example-btn { + background-color: var(--gray-100); + border: 1px solid var(--gray-200); + color: var(--gray-700); + font-size: 13px; + + &:hover { + background-color: var(--main-light-5); + border-color: var(--main-color); + color: var(--main-400); + } } } } + // 轮播动画 + .fade-enter-active, .fade-leave-active { + transition: opacity 0.2s; + } + .fade-enter-from, .fade-leave-to { + opacity: 0; + } + .query-results { margin-top: 6px; @@ -2813,18 +2914,30 @@ const getFileIconColor = (filename) => { } .panel-action-btn { - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; border-radius: 6px; border: 1px solid var(--gray-300); background-color: var(--gray-50); - transition: all 0.1s ease; color: var(--gray-700); - transform: scaleX(-1); - padding: 4px; + transition: all 0.1s ease; + + &.expanded { + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + transform: scaleX(-1); + padding: 4px; + } + + + &.auto-refresh-btn { + &.ant-btn-primary { + background-color: var(--main-color); /* Ant Design primary color */ + border-color: var(--main-color); + color: #fff; + } + } &:hover { background-color: var(--main-light-5); @@ -2832,7 +2945,7 @@ const getFileIconColor = (filename) => { color: var(--main-color); } - &.active { + &.active.expanded { transform: scaleX(1); } }