p7yqafb3h
/
rag-study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化前端

Browse Source
main
林名赫 5 months ago
parent 90a8cd988e
commit 29f76e3273
2 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File

BIN
rag/LightRAG-deepseek/zhiji_webui/dayi_back.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

99
rag/LightRAG-deepseek/zhiji_webui/zhiji_webui.html
Unescape View File

@ -22,27 +22,25 @@
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/extension/graph.min.js"></script>
<!-- Tailwind配置 -->
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
neutral: '#F5F7FA',
dark: '#1D2129',
sidebar: '#0F172A',
'sidebar-hover': '#1E293B',
'text-muted': '#94A3B8'
},
fontFamily: {
sans: ['Segoe UI', 'system-ui', 'sans-serif'],
primary: '#000000', // 主色调改为纯黑
secondary: '#333333', // 辅助色深灰
neutral: '#FFFFFF', // 背景保持白色
dark: '#000000', // 深色纯黑
sidebar: '#F5F5F5', // 侧边栏背景浅灰
'sidebar-hover': '#E0E0E0', // 侧边栏悬停色
'text-muted': '#666666' // 次要文本灰色
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
@ -55,7 +53,7 @@
@apply w-6 h-6 text-gray-400 transition-colors;
}
.sidebar-item {
@apply flex items-center gap-3 px-4 py-3 text-gray-300 hover:bg-sidebar-hover transition-all cursor-pointer;
@apply flex items-center gap-3 px-4 py-3 text-gray-800 hover:bg-sidebar-hover transition-all cursor-pointer;
}
.sidebar-item.active {
@apply bg-primary/10 text-primary border-l-4 border-primary;
@ -98,22 +96,22 @@
}
}
#graph-container {
width: 100%;
height: 100%;
min-height: 500px;
}
width: 100%;
height: 100%;
min-height: 500px;
}
#node-info {
border-top: 1px solid #eee;
}
#node-info {
border-top: 1px solid #eee;
}
.error-message {
color: #dc3545;
}
.error-message {
color: #dc3545;
}
.loading-message {
color: #6c757d;
}
.loading-message {
color: #6c757d;
}
/* 启动页样式 */
.splash-screen {
@ -379,7 +377,7 @@
<!-- 主交互界面（初始隐藏） -->
<div id="main-screen" class="hidden flex flex-col h-screen"> <!-- 用h-screen固定全屏高度 -->
<!-- 标题栏（模拟Windows窗口标题栏） -->
<header class="bg-sidebar text-white px-4 py-2 flex items-center justify-between select-none">
<header class="bg-sidebar text-black px-4 py-2 flex items-center justify-between select-none">
<div class="flex items-center gap-3">
<img src=".\tubiao.png" alt="知记图标" class="dashboard-logo w-6 h-6"> <!-- 替换绝对路径为相对路径 -->
<span>知记 - KnowNote</span>
@ -413,7 +411,7 @@
<div class="flex items-center gap-3">
<img src=".\touxiang.png" alt="用户头像" class="w-8 h-8 rounded-full"> <!-- 替换绝对路径 -->
<div>
<div class="text-sm font-medium" id="user-name">昵称</div>
<div class="text-sm font-medium text-black" id="user-name">昵称</div>
<div class="text-xs text-text-muted" id="user-grade-major">年级 | 专业</div>
</div>
</div>
@ -448,46 +446,45 @@
</div>
<!-- 智能答疑视图（默认隐藏） -->
<div id="qa-view" class="view-container hidden flex flex-col h-full"> <!-- 用flex-col垂直排列聊天区和输入区 -->
<!-- 智能答疑视图（默认隐藏） -->
<div id="qa-view" class="view-container hidden flex flex-col h-full"> <!-- 用flex-col垂直排列聊天区和输入区 -->
<div class="bg-white p-4 border-b border-gray-200">
<h1 class="text-xl font-semibold">智能答疑</h1>
<h1 class="text-xl font-semibold">智能答疑</h1>
</div>
<!-- 聊天消息容器：占满剩余空间，可滚动 -->
<div id="chat-messages" class="flex-1 overflow-y-auto p-6 space-y-6"> <!-- 用space-y统一消息间距 -->
<!-- 系统消息示例 -->
<div class="max-w-[80%]">
<!-- 聊天消息容器：占满剩余空间，可滚动（添加背景图） -->
<div id="chat-messages" class="flex-1 overflow-y-auto p-6 space-y-6"
style="background-image: url('dayi_back.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
<!-- 系统消息示例 -->
<div class="max-w-[80%]">
<div class="flex items-center gap-2 mb-1">
<img src=".\touxiang.png" alt="AI" class="w-6 h-6 rounded-full">
<span class="text-sm font-medium text-gray-700">知记助手--KnowNo</span>
<img src=".\touxiang.png" alt="AI" class="w-6 h-6 rounded-full">
<span class="text-sm font-medium text-gray-700">知记助手--KnowNo</span>
</div>
<div class="bg-gray-100/90 backdrop-blur-sm p-3 rounded-lg rounded-tl-none">
<p>你好！我是KnowNo，有什么可以帮你解答的问题吗？</p>
</div>
<div class="bg-gray-100 p-3 rounded-lg rounded-tl-none">
<p>你好！我是KnowNo，有什么可以帮你解答的问题吗？</p>
</div>
</div>
</div>
<!-- 输入区域：固定在底部 -->
<div class="border-t p-4 bg-white">
<textarea
<div class="border-t p-4 bg-white/90 backdrop-blur-sm">
<textarea
id="question-input"
placeholder="输入你的问题..."
class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 bg-white/80"
rows="3"
></textarea>
<div class="mt-2 flex justify-end">
></textarea>
<div class="mt-2 flex justify-end">
<button
id="send-question"
class="btn-primary bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center hover:bg-blue-700 transition-colors"
id="send-question"
class="btn-primary bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center hover:bg-blue-700 transition-colors"
>
<i class="fa fa-paper-plane mr-1"></i> 发送
<i class="fa fa-paper-plane mr-1"></i> 发送
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 知识图谱视图 -->
<div id="knowledge-graph-view" class="view-container hidden flex flex-col h-full relative">

Write Preview
Loading…
Cancel
Save