make graph alone

This commit is contained in:
xerrors 2024-09-01 18:10:50 +08:00
parent d89b7fdeec
commit c56bbcbf5c
8 changed files with 48 additions and 21 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.svg">

View File

@ -11,6 +11,7 @@
--main-100: #ABE0F7;
--main-50: #CDF5FF;
--main-25: #E6FAFF;
--main-10: #F5FDFF;
--c-white: #ffffff;
--c-white-soft: #f8f8f8;

View File

@ -72,9 +72,9 @@ const showRefs = computed(() => message.value.role=='received' && message.value.
gap: 10px;
.item {
background: var(--main-25);
color: var(--main-800);
border: 1px solid var(--main-100);
background: var(--main-10);
color: var(--main-600);
border: 1px solid var(--main-50);
padding: 2px 8px;
border-radius: 8px;
font-size: 14px;
@ -91,7 +91,7 @@ const showRefs = computed(() => message.value.role=='received' && message.value.
cursor: pointer;
&:hover {
background: var(--main-100);
background: var(--main-25);
}
}
}

View File

@ -11,6 +11,8 @@ import {
GithubOutlined,
DatabaseOutlined,
DatabaseFilled,
GoldOutlined,
GoldFilled,
} from '@ant-design/icons-vue'
import { themeConfig } from '@/assets/theme'
import { useConfigStore } from '@/stores/config'
@ -74,6 +76,9 @@ console.log(route)
<RouterLink to="/database" class="nav-item" active-class="active">
<component class="icon" :is="route.path.startsWith('/database') ? DatabaseFilled : DatabaseOutlined" />
</RouterLink>
<RouterLink to="/graph" class="nav-item" active-class="active">
<component class="icon" :is="route.path.startsWith('/graph') ? GoldFilled: GoldOutlined" />
</RouterLink>
</div>
<div class="fill" style="flex-grow: 1;"></div>
<div class="github nav-item">

View File

@ -30,6 +30,19 @@ const router = createRouter({
}
]
},
{
path: '/graph',
name: 'graph',
component: AppLayout,
children: [
{
path: '',
name: 'Graph',
component: () => import('../views/GraphView.vue'),
meta: { keepAlive: true }
}
]
},
{
path: '/database',
name: 'database',
@ -45,12 +58,6 @@ const router = createRouter({
path: ':database_id',
name: 'databaseInfo',
component: () => import('../views/DataBaseInfoView.vue'),
},
{
path: 'graph',
name: 'graph',
component: () => import('../views/GraphView.vue'),
meta: { keepAlive: true }
}
]
},

View File

@ -3,7 +3,7 @@
<div class="conversations" :class="['conversations', { 'is-open': state.isSidebarOpen }]">
<div class="actions">
<!-- <div class="action new" @click="addNewConv"><FormOutlined /></div> -->
<span style="font-weight: bold;">对话历史</span>
<span style="font-weight: bold; user-select: none;">对话历史</span>
<div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
</div>
<div class="conversation-list">

View File

@ -49,7 +49,7 @@
<!-- <button @click="deleteDatabase(database.collection_name)">删除</button> -->
</div>
</div>
<h2>图数据库 &nbsp; <a-spin v-if="graphloading" :indicator="indicator" /></h2>
<!-- <h2>图数据库 &nbsp; <a-spin v-if="graphloading" :indicator="indicator" /></h2>
<p>基于 neo4j 构建的图数据库</p>
<div :class="{'graphloading': graphloading, 'databases': true}" v-if="graph">
<div class="dbcard graphbase" @click="navigateToGraph">
@ -64,9 +64,8 @@
</div>
</div>
<p class="description">基于 neo4j 构建的图数据库基于 neo4j 构建的图数据库基于 neo4j 构建的图数据库</p>
<!-- <button @click="deleteDatabase(database.collection_name)">删除</button> -->
</div>
</div>
</div> -->
</div>
<div class="database-empty" v-else>
<a-empty>

View File

@ -1,5 +1,5 @@
<template>
<div class="graph-container">
<div class="graph-container" v-if="configStore.config.enable_knowledge_base">
<div class="info">
<h1>Neo4j 图数据库</h1>
<p>基于 Neo4j 构建的图数据库</p>
@ -52,12 +52,24 @@
<div class="main" id="container"></div>
</div>
<div class="database-empty" v-else>
<a-empty>
<template #description>
<span>
前往 <router-link to="/setting" style="color: var(--main-color); font-weight: bold;">设置</router-link>
</span>
</template>
</a-empty>
</div>
</template>
<script setup>
import { Graph } from "@antv/g6";
import { computed, onMounted, reactive, ref } from 'vue';
import { message } from "ant-design-vue";
import { useConfigStore } from '@/stores/config';
const configStore = useConfigStore()
let graphInstance
const fileList = ref([]);
@ -253,7 +265,6 @@ const handleDrop = (event) => {
}
}
#container {
background: #F7F7F7;
margin: 20px 0;
@ -262,8 +273,12 @@ const handleDrop = (event) => {
height: calc(100% - 200px);
}
.database-empty {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex-direction: column;
color: var(--c-text-light-1);
}
</style>