From 135f75e6be7f5a0ca3d9692e2bb01948ec0b430f Mon Sep 17 00:00:00 2001 From: Developer Date: Thu, 19 Mar 2026 10:11:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=A2=9E=E5=BC=BA=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=E5=92=8C=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - App.vue: 增强 sci-fi 背景动画，mesh 渐变光晕缓慢移动 - ProjectView.vue: 移除侧边栏"返回首页"按钮 - TextSplit.vue: 分割生成页面多选交互改造 - DeleteDialog.vue: 删除确认对话框组件 Co-Authored-By: Claude Opus 4.6 --- frontend/src/App.vue | 66 +- .../src/components/common/DeleteDialog.vue | 175 +- frontend/src/views/ProjectView.vue | 41 +- frontend/src/views/project/TextSplit.vue | 2704 ++++++++++++++--- 4 files changed, 2423 insertions(+), 563 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 87cda5d..b281e5e 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -129,43 +129,59 @@ html, body, #app { .mesh-gradient { position: absolute; border-radius: 50%; - filter: blur(80px); - opacity: 0.6; - animation: float 20s ease-in-out infinite; + filter: blur(100px); + opacity: 0.5; + animation: sciFiFloat 15s ease-in-out infinite; } .mesh-1 { - width: 800px; - height: 800px; - background: radial-gradient(circle, rgba(0, 212, 255, 0.4) 0%, rgba(6, 182, 212, 0.2) 40%, transparent 70%); - top: -300px; - right: -200px; + width: 900px; + height: 900px; + background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, rgba(6, 182, 212, 0.25) 40%, transparent 70%); + top: -400px; + left: -300px; animation-delay: 0s; + animation-duration: 18s; } .mesh-2 { - width: 700px; - height: 700px; - background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, rgba(139, 92, 246, 0.2) 40%, transparent 70%); - bottom: -250px; - left: -200px; - animation-delay: -7s; + width: 800px; + height: 800px; + background: radial-gradient(circle, rgba(124, 58, 237, 0.5) 0%, rgba(139, 92, 246, 0.25) 40%, transparent 70%); + bottom: -300px; + right: -200px; + animation-delay: -5s; + animation-duration: 20s; } .mesh-3 { - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(168, 85, 247, 0.15) 40%, transparent 70%); - top: 30%; - left: 25%; - animation-delay: -14s; + width: 700px; + height: 700px; + background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(168, 85, 247, 0.2) 40%, transparent 70%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation-delay: -10s; + animation-duration: 22s; } -@keyframes float { - 0%, 100% { transform: translate(0, 0) scale(1); } - 25% { transform: translate(60px, -50px) scale(1.1); } - 50% { transform: translate(-40px, 40px) scale(0.95); } - 75% { transform: translate(-50px, -30px) scale(1.05); } +@keyframes sciFiFloat { + 0%, 100% { + transform: translate(0, 0) scale(1) rotate(0deg); + opacity: 0.4; + } + 25% { + transform: translate(200px, -150px) scale(1.2) rotate(10deg); + opacity: 0.65; + } + 50% { + transform: translate(-150px, 100px) scale(0.85) rotate(-5deg); + opacity: 0.5; + } + 75% { + transform: translate(100px, 150px) scale(1.15) rotate(8deg); + opacity: 0.6; + } } .noise-overlay { diff --git a/frontend/src/components/common/DeleteDialog.vue b/frontend/src/components/common/DeleteDialog.vue index 2dbdb8c..86ba6c6 100644 --- a/frontend/src/components/common/DeleteDialog.vue +++ b/frontend/src/components/common/DeleteDialog.vue @@ -2,7 +2,7 @@
-

- 确定要删除 {{ itemName }} 吗？ -

+
+ 目标对象 + {{ itemName }} +

{{ warningText }}

@@ -63,6 +70,14 @@ const props = defineProps({ type: String, default: '此操作不可恢复，所有相关数据将被永久删除' }, + detailText: { + type: String, + default: '' + }, + confirmText: { + type: String, + default: '确认删除' + }, loading: { type: Boolean, default: false @@ -83,18 +98,25 @@ const handleCancel = () => { diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue index c8a06cd..e4bc28e 100644 --- a/frontend/src/views/ProjectView.vue +++ b/frontend/src/views/ProjectView.vue @@ -32,13 +32,6 @@ - -
- - - 返回首页 - -
@@ -296,37 +289,6 @@ onMounted(() => fetchProject()) } /* Sidebar Footer */ -.sidebar-footer { - padding: 16px 20px; - border-top: 1px solid var(--border-subtle); -} - -.home-link { - display: flex; - align-items: center; - gap: 12px; - padding: 12px 14px; - border-radius: var(--radius-md); - color: var(--text-tertiary); - font-size: 14px; - text-decoration: none; - transition: all var(--transition-fast); -} - -.home-link:hover { - background: var(--bg-hover); - color: var(--text-primary); -} - -.home-link span { - transition: opacity 0.2s ease; -} - -.sidebar.collapsed .home-link span { - opacity: 0; - width: 0; - overflow: hidden; -} /* Main Content */ .main-content { @@ -348,8 +310,7 @@ onMounted(() => fetchProject()) } .sidebar .project-details, - .sidebar .nav-label, - .sidebar .home-link span { + .sidebar .nav-label { display: none; } diff --git a/frontend/src/views/project/TextSplit.vue b/frontend/src/views/project/TextSplit.vue index 8e16f85..0648821 100644 --- a/frontend/src/views/project/TextSplit.vue +++ b/frontend/src/views/project/TextSplit.vue @@ -7,58 +7,88 @@

选择文件进行智能分割

- - - 刷新 + + + 批量分割 - - 批量生成问答对 + + 批量生成
-
-
- -
-
- {{ files.length }} - 总文件 +
+
+
+
+ +
+
+ {{ files.length }} + 总文件 +
-
-
- -
-
- {{ completedFiles }} - 已分割 +
+
+
+
+ +
+
+ {{ completedFiles }} + 已分割 +
-
-
- -
-
- {{ processingCount }} - 分割中 +
+
+
+
+ +
+
+ {{ processingCount }} + 分割中 +
-
-
- -
-
- {{ totalChunks }} - 总文本块 +
+
+
+
+ +
+
+ {{ totalChunks }} + 总文本块 +
@@ -66,37 +96,67 @@
-
-
- +
+
+
+
+
+
+ +

暂无可分割文件

请先在文件管理中上传文档

-
+
- 文件列表 +
+ + 已选择 {{ selectedCount }} 项 + 全选 + +
+
+ + + 清除选择 + +
+
+ +
-
+
- +
- {{ file.filename }} + {{ file.filename }}.md {{ formatSize(file.size) }}
@@ -119,148 +179,529 @@ 待分割
-
- -
-
-
-
- - -
-
- - - 返回文件列表 - -
-
- - - -
- {{ selectedFile.filename }} -
-
- - -
-
分割配置
-
-
-
- - - - - - - - -
-
-
-
- - -
-
- - -
-
-
- - -
-
- - - 开始分割 - -
-
-
- - -
-
-
- - 文本块 ({{ chunks.length }}) -
- - 总计 {{ totalWords }} 字 - -
-
-
-
-
{{ index + 1 }}
- - {{ chunk.word_count || 0 }} 字 -
- +
+ + + + + + + + + +
+ + + + +
+
+ +
+
+ + + + + +
+
+

批量分割配置

+ {{ selectedFiles.length }} 个文件待处理 +
+ +
+ + +
+ +
+
+ ◆ + 分割算法 +
+
+ +
+
+ + +
+ +
+ + +
+
+ 01 + 块大小控制 +
+
+
+ chunk_size + 每个文本块的字符数 +
+
+ +
+ {{ splitConfig.chunk_size }} + chars +
+
+
+ +
+
预览
+
+
+
+
+
+ +
+
+ 02 + 重叠控制 +
+
+
+ overlap + 相邻块之间的重叠字符数 +
+
+ +
+ {{ splitConfig.overlap }} + chars +
+
+
+ +
+
+
+
+
+
+ + +
+
+ 03 + 自定义分隔符 +
+
+
+ separator + 用于分割文本的字符序列 +
+
+ +
+
+
+ + + + +
+
+ + +
+ + +
+
+
+ + + + + + +
+
+ +
+
+ + + + + +
+
+

预览修改

+ {{ previewFile?.filename }} - {{ previewChunks.length }} 个块 +
+ +
+ +
+ + +
+ + +
+ + + +
+ {{ filteredPreviewChunks.length }} / {{ previewChunks.length }} 块 + {{ modifiedPreviewCount }} 已修改 +
+
+ +
+
+ + + +
+
+ + +
+
+
+
+ 块 {{ activePreviewChunkIndex }} / {{ previewChunks.length }} + + {{ isChunkModified(activePreviewChunk) ? '已修改未保存' : '内容未变更' }} + +
+ {{ activePreviewChunk.word_count || 0 }} 字 +
+
+
+ + +
+
+ + + +
+
+
+
+
+
+

没有匹配的分片

+

试试清空搜索词，或切回“全部”查看所有分片。

+
+
+
+
+ + + +