kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

make graph alone

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

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

1
web/src/assets/base.css
View File

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

8
web/src/components/RefsComponent.vue
View File

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

5
web/src/layouts/AppLayout.vue
View File

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

19
web/src/router/index.js
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', path: '/database',
name: 'database', name: 'database',
@ -45,12 +58,6 @@ const router = createRouter({
path: ':database_id', path: ':database_id',
name: 'databaseInfo', name: 'databaseInfo',
component: () => import('../views/DataBaseInfoView.vue'), component: () => import('../views/DataBaseInfoView.vue'),
},
{
path: 'graph',
name: 'graph',
component: () => import('../views/GraphView.vue'),
meta: { keepAlive: true }
} }
] ]
}, },

2
web/src/views/ChatView.vue
View File

@ -3,7 +3,7 @@
<div class="conversations" :class="['conversations', { 'is-open': state.isSidebarOpen }]"> <div class="conversations" :class="['conversations', { 'is-open': state.isSidebarOpen }]">
<div class="actions"> <div class="actions">
<!-- <div class="action new" @click="addNewConv"><FormOutlined /></div> --> <!-- <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 class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
</div> </div>
<div class="conversation-list"> <div class="conversation-list">

5
web/src/views/DataBaseView.vue
View File

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

27
web/src/views/GraphView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="graph-container"> <div class="graph-container" v-if="configStore.config.enable_knowledge_base">
<div class="info"> <div class="info">
<h1>Neo4j 图数据库</h1> <h1>Neo4j 图数据库</h1>
<p>基于 Neo4j 构建的图数据库。</p> <p>基于 Neo4j 构建的图数据库。</p>
@ -52,12 +52,24 @@
<div class="main" id="container"></div> <div class="main" id="container"></div>
</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> </template>
<script setup> <script setup>
import { Graph } from "@antv/g6"; import { Graph } from "@antv/g6";
import { computed, onMounted, reactive, ref } from 'vue'; import { computed, onMounted, reactive, ref } from 'vue';
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import { useConfigStore } from '@/stores/config';
const configStore = useConfigStore()
let graphInstance let graphInstance
const fileList = ref([]); const fileList = ref([]);
@ -253,7 +265,6 @@ const handleDrop = (event) => {
} }
} }
#container { #container {
background: #F7F7F7; background: #F7F7F7;
margin: 20px 0; margin: 20px 0;
@ -262,8 +273,12 @@ const handleDrop = (event) => {
height: calc(100% - 200px); 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> </style>