make graph alone

web/src/assets/main.css

@@ -2,4 +2,15 @@
 
 :root {
   --header-height: 60px;
+}
+
+/* layout */
+
+.layout-container {
+  padding: 10px 30px;
+  background-color: #FCFEFF;
+
+  h2 {
+    margin: 20px 0 10px 0;
+  }
 }

web/src/components/ChatComponent.vue

@@ -14,7 +14,7 @@
           class="newchat nav-btn"
           @click="$emit('newconv')"
         >
-          <PlusCircleOutlined /> <span class="text">新对话 {{ configStore.config?.model_name }}</span>
+          <PlusCircleOutlined /> <span class="text">新对话：{{ configStore.config?.model_name }}</span>
         </div>
       </div>
       <div class="header__right">
@@ -773,7 +773,7 @@ button:disabled {
 @keyframes loading {0%,80%,100%{transform:scale(0.5);}40%{transform:scale(1);}}
 
 .slide-out-left{-webkit-animation:slide-out-left .2s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both}
-.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
+.swing-in-top-fwd{-webkit-animation:swing-in-top-fwd .2s ease-out both;animation:swing-in-top-fwd .2s ease-out both}
 @-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}
 @-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}
 

web/src/layouts/AppLayout.vue

@@ -13,6 +13,7 @@ import {
   DatabaseFilled,
   GoldOutlined,
   GoldFilled,
+  BugOutlined,
 } from '@ant-design/icons-vue'
 import { themeConfig } from '@/assets/theme'
 import { useConfigStore } from '@/stores/config'
@@ -54,7 +55,7 @@ console.log(route)
 <template>
   <div class="app-layout">
     <div class="debug-panel">
-      <div class="shown-btn" @click="showDebug=!showDebug">Debug</div>
+      <div class="shown-btn" @click="showDebug=!showDebug"><BugOutlined /></div>
       <a-drawer
         v-model:open="showDebug"
         title="调试面板"
@@ -123,11 +124,13 @@ console.log(route)
     position: absolute;
     z-index: 100;
     right: 0;
-    top: 50px;
+    bottom: 50px;
-    border-radius: 16px 0 0 16px;
+    border-radius: 20px 0 0 20px;
-    background-color: var(--main-light-3);
+    background-color: var(--main-light-4);
-    padding: 8px 8px 8px 16px;
+    padding: 6px;
-    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
+    padding-left: 12px;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--c-black-soft);
     transition: right 0.3s ease-in-out;
     cursor: pointer;
   }
@@ -186,11 +189,11 @@ div.header, #app-router-view {
     &.active {
       font-weight: bold;
       color: var(--main-600);
-      background-color: #E6E8E9;
+      background-color: rgba(  0,  93, 125, 0.1);
     }
 
     &:hover {
-      background-color: #E6E8E9;
+      background-color: rgba(  0,  93, 125, 0.1);
       cursor: pointer;
     }
   }

web/src/views/DataBaseView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="database-container" v-if="configStore.config.enable_knowledge_base">
+  <div class="database-container layout-container" v-if="configStore.config.enable_knowledge_base">
     <h2>文档知识库</h2>
     <p>知识型数据库，主要是非结构化的文本组成，使用向量检索使用。</p>
     <a-modal :open="newDatabase.open" title="新建数据库" @ok="createDatabase">
@@ -102,7 +102,7 @@ const newDatabase = reactive({
 })
 
 const loadDatabases = () => {
-  loadGraph()
+  // loadGraph()
   fetch('/api/database/', {
     method: "GET",
   })
@@ -153,23 +153,23 @@ const navigateToGraph = () => {
   router.push({ path: `/database/graph` });
 };
 
-const loadGraph = () => {
+// const loadGraph = () => {
-  graphloading.value = true
+//   graphloading.value = true
-  fetch('/api/database/graph', {
+//   fetch('/api/database/graph', {
-    method: "GET",
+//     method: "GET",
-  })
+//   })
-    .then(response => response.json())
+//     .then(response => response.json())
-    .then(data => {
+//     .then(data => {
-      console.log(data)
+//       console.log(data)
-      graph.value = data.graph
+//       graph.value = data.graph
-      graphloading.value = false
+//       graphloading.value = false
-    })
+//     })
-    .catch(error => {
+//     .catch(error => {
-      console.error(error)
+//       console.error(error)
-      message.error(error.message)
+//       message.error(error.message)
-      graphloading.value = false
+//       graphloading.value = false
-    })
+//     })
-}
+// }
 
 watch(() => route.path, (newPath, oldPath) => {
   if (newPath === '/database') {
@@ -184,14 +184,6 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-.database-container {
-  padding: 10px 30px;
-  background-color: #FCFEFF;
-
-  h2 {
-    margin: 20px 0 10px 0;
-  }
-}
 .database-actions, .document-actions {
   margin-bottom: 20px;
 }
@@ -277,10 +269,9 @@ onMounted(() => {
 }
 
 // 整个卡片是模糊的
-.graphloading {
+// .graphloading {
-  filter: blur(2px);
+//   filter: blur(2px);
-}
+// }
-
 
 .database-empty {
   display: flex;

web/src/views/GraphView.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="graph-container" v-if="configStore.config.enable_knowledge_base">
+  <div class="graph-container layout-container" v-if="configStore.config.enable_knowledge_base">
     <div class="info">
-      <h1>Neo4j 图数据库</h1>
+      <h2>Neo4j 图数据库</h2>
       <p>基于 Neo4j 构建的图数据库。</p>
       </div>
     <div class="actions">
@@ -228,10 +228,6 @@ const handleDrop = (event) => {
 </script>
 
 <style lang="less" scoped>
-.graph-container {
-  padding: 20px;
-}
-
 .actions {
   display: flex;
   justify-content: space-between;

web/src/views/SettingView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="setting-container">
+  <div class="setting-container layout-container">
     <div class="setting">
       <h2>设置</h2>
       <h3>模型配置</h3>
@@ -156,10 +156,6 @@ const sendRestart = () => {
 </script>
 
 <style lang="less" scoped>
-.setting-container {
-  width: 100%;
-  padding: 20px;
-}
 
 .setting {
   max-width: 800px;