refactor(ui): 移除导出数据按钮并优化上传文件提示

重构多个面板组件，移除重复的导出数据按钮和相关样式代码
在GraphView中添加上传文件提示弹窗，根据数据库类型显示不同提示信息

Author: xerrors

web/src/components/GraphDetailPanel.vue

@@ -97,7 +97,7 @@ const filteredEdgeProperties = computed(() => {
 
 <style scoped lang="less">
 .detail-card {
-  position: fixed; // 改为 fixed，避免影响父组件布局
+  position: absolute; // 改为 fixed，避免影响父组件布局
   top: 80px;
   right: 24px;
   width: 300px;

web/src/components/GraphInfoPanel.vue

@@ -12,11 +12,7 @@
       <span v-if="graphInfo?.relationship_count" class="info-total">/ {{ graphInfo.relationship_count }}</span>
     </div>
 
-    <div v-if="graphInfo?.graph_name" class="info-item">
-      <span class="info-label">图谱</span>
-      <span class="info-value">{{ graphInfo.graph_name }}</span>
-    </div>
-
+  
     <div v-if="unindexedCount > 0" class="info-item warning">
       <span class="info-label">未索引</span>
       <span class="info-value warning">{{ unindexedCount }}</span>
@@ -35,17 +31,10 @@
       </a-tooltip>
     </div>
 
-    <div class="actions">
-      <a-button type="default" size="small" @click="$emit('export-data')">
-        <ExportOutlined />
-        导出数据
-      </a-button>
     </div>
-  </div>
 </template>
 
 <script setup>
-import { ExportOutlined } from '@ant-design/icons-vue'
 
 const props = defineProps({
   graphInfo: {
@@ -66,7 +55,7 @@ const props = defineProps({
   }
 })
 
-defineEmits(['index-nodes', 'export-data'])
+defineEmits(['index-nodes'])
 </script>
 
 <style lang="less" scoped>
@@ -120,40 +109,6 @@ defineEmits(['index-nodes', 'export-data'])
   font-size: 12px;
 }
 
-.actions {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-
-  @media (max-width: 768px) {
-    margin-left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-}
-
-:deep(.ant-btn-default) {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  border-radius: 6px;
-  border-color: var(--main-300);
-  color: var(--main-600);
-  background: var(--main-20);
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: var(--main-500);
-    color: var(--main-700);
-    background: var(--main-40);
-    box-shadow: 0 2px 4px rgba(1, 97, 121, 0.1);
-  }
-
-  &:active {
-    transform: translateY(1px);
-  }
-}
-
 :deep(.ant-btn-primary) {
   font-size: 12px;
   height: 28px;

web/src/components/LightRAGInfoPanel.vue

@@ -10,22 +10,11 @@
       <span class="info-value">{{ stats?.total_edges || 0 }}</span>
     </div>
 
-    <div class="info-item">
-      <span class="info-label">知识库</span>
-      <span class="info-value">{{ databaseName }}</span>
-    </div>
-
-    <div class="actions">
-      <a-button type="default" size="small" @click="$emit('export-data')">
-        <ExportOutlined />
-        导出数据
-      </a-button>
-    </div>
-  </div>
+    
+      </div>
 </template>
 
 <script setup>
-import { ExportOutlined } from '@ant-design/icons-vue'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -43,7 +32,6 @@ const props = defineProps({
   }
 })
 
-defineEmits(['export-data'])
 </script>
 
 <style lang="less" scoped>
@@ -83,38 +71,4 @@ defineEmits(['export-data'])
   color: var(--gray-1000);
   font-weight: 600;
 }
-
-.actions {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-
-  @media (max-width: 768px) {
-    margin-left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-}
-
-:deep(.ant-btn-default) {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  border-radius: 6px;
-  border-color: var(--main-300);
-  color: var(--main-600);
-  background: var(--main-20);
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: var(--main-500);
-    color: var(--main-700);
-    background: var(--main-40);
-    box-shadow: 0 2px 4px rgba(1, 97, 121, 0.1);
-  }
-
-  &:active {
-    transform: translateY(1px);
-  }
-}
 </style>

web/src/views/GraphView.vue

@@ -30,7 +30,14 @@
         <!-- <a-button type="default" @click="openLink('http://localhost:7474/')" :icon="h(GlobalOutlined)">
           Neo4j 浏览器
         </a-button> -->
-        <a-button type="primary" @click="state.showModal = true" ><UploadOutlined/> 上传文件</a-button>
+        <a-button
+          v-if="isNeo4j"
+          type="primary"
+          @click="state.showModal = true" ><UploadOutlined/> 上传文件</a-button>
+        <a-button
+          v-else
+          type="primary"
+          @click="state.showUploadTipModal = true" ><UploadOutlined/> 上传文件</a-button>
         <a-button v-if="unindexedCount > 0" type="primary" @click="indexNodes" :loading="state.indexing">
           <SyncOutlined v-if="!state.indexing"/> 为{{ unindexedCount }}个节点添加索引
         </a-button>
@@ -73,6 +80,9 @@
               </a-input>
             </div>
             <div class="actions-right">
+              <a-button type="default" @click="exportGraphData" :icon="h(ExportOutlined)">
+                导出数据
+              </a-button>
               <a-button type="default" @click="state.showInfoModal = true" :icon="h(InfoCircleOutlined)">
                 说明
               </a-button>
@@ -91,14 +101,12 @@
               :unindexed-count="unindexedCount"
               :model-matched="modelMatched"
               @index-nodes="indexNodes"
-              @export-data="exportGraphData"
             />
             <LightRAGInfoPanel
               v-else
               :stats="state.lightragStats"
               :graph-data="graph.graphData"
               :database-name="getDatabaseName()"
-              @export-data="exportGraphData"
             />
           </div>
         </template>
@@ -144,6 +152,32 @@
       </div>
     </a-modal>
 
+    <!-- 上传提示弹窗 -->
+    <a-modal
+      :open="state.showUploadTipModal"
+      title="文件上传说明"
+      @cancel="() => state.showUploadTipModal = false"
+      :footer="null"
+      width="500px"
+    >
+      <div class="upload-tip-content">
+        <a-alert
+          :message="getUploadTipMessage()"
+          type="info"
+          show-icon
+          style="margin-bottom: 16px;"
+        />
+        <div v-if="!isNeo4j" class="upload-tip-actions">
+          <p>如需上传文档到当前选中的知识库，请前往对应的知识库详情页面进行操作：</p>
+          <div class="action-buttons">
+            <a-button type="primary" @click="goToDatabasePage">
+              <DatabaseOutlined/> 前往知识库详情页
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
     <!-- 说明弹窗 -->
     <a-modal
       :open="state.showInfoModal"
@@ -176,9 +210,10 @@
 
 <script setup>
 import { computed, onMounted, reactive, ref, h } from 'vue';
+import { useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import { useConfigStore } from '@/stores/config';
-import { UploadOutlined, SyncOutlined, GlobalOutlined, InfoCircleOutlined, SearchOutlined, ReloadOutlined, LoadingOutlined, HighlightOutlined } from '@ant-design/icons-vue';
+import { UploadOutlined, SyncOutlined, GlobalOutlined, InfoCircleOutlined, SearchOutlined, ReloadOutlined, LoadingOutlined, HighlightOutlined, DatabaseOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import HeaderComponent from '@/components/HeaderComponent.vue';
 import { neo4jApi, unifiedApi } from '@/apis/graph_api';
 import { useUserStore } from '@/stores/user';
@@ -193,6 +228,7 @@ const configStore = useConfigStore();
 const cur_embed_model = computed(() => configStore.config?.embed_model);
 const modelMatched = computed(() => !graphInfo?.value?.embed_model_name || graphInfo.value.embed_model_name === cur_embed_model.value)
 
+const router = useRouter();
 const graphRef = ref(null)
 const graphInfo = ref(null)
 const fileList = ref([]);
@@ -207,6 +243,7 @@ const state = reactive({
   searchLoading: false,
   showModal: false,
   showInfoModal: false,
+  showUploadTipModal: false,
   processing: false,
   indexing: false,
   showPage: true,
@@ -458,6 +495,33 @@ const getDatabaseName = () => {
   return selectedDb ? selectedDb.label : state.selectedDbId;
 };
 
+const getUploadTipMessage = () => {
+  if (isNeo4j.value) {
+    return 'Neo4j 图数据库支持通过上传 JSONL 格式文件直接导入实体和关系数据。';
+  } else {
+    const selectedDb = state.dbOptions.find(db => db.value === state.selectedDbId);
+    const dbType = selectedDb?.type || '未知';
+    const dbName = selectedDb?.label || getDatabaseName();
+    return `当前选择的是 ${dbType.toUpperCase()} 类型的知识库"${dbName}"，该类型知识库需要在文档知识库页面上传文档，系统会自动从中提取知识图谱。`;
+  }
+};
+
+const goToDatabasePage = () => {
+  state.showUploadTipModal = false;
+
+  // 如果不是 Neo4j，需要找到对应的知识库 ID 并跳转
+  if (!isNeo4j.value) {
+    const selectedDb = state.dbOptions.find(db => db.value === state.selectedDbId);
+    if (selectedDb && selectedDb.type !== 'neo4j') {
+      // 跳转到对应的知识库详情页面
+      router.push(`/database/${state.selectedDbId}`);
+    } else {
+      // 如果找不到对应的数据库，跳转到数据库列表页面
+      router.push('/database');
+    }
+  }
+};
+
 </script>
 
 <style lang="less" scoped>
@@ -478,9 +542,8 @@ const getDatabaseName = () => {
   margin-right: 20px;
 
   .label {
+    font-size: 14px;
     margin-right: 8px;
-    font-weight: 500;
-    color: var(--color-text-secondary);
   }
 }
 
@@ -579,4 +642,19 @@ const getDatabaseName = () => {
     box-shadow: none;
   }
 }
+
+.upload-tip-content {
+  .upload-tip-actions {
+    p {
+      margin-bottom: 16px;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+}
 </style>