sync
This commit is contained in:
Wenjie Zhang
parent
14d2d6594f
commit
4083fa6938
@ -154,7 +154,7 @@ MODEL_NAMES = {
|
||||
"ERNIE-Speed-128K",
|
||||
"ERNIE-Tiny-8K",
|
||||
"ERNIE-Lite-8K",
|
||||
"ERNIE-4.0-8K-Latest"
|
||||
"ERNIE-4.0-8K-Latest",
|
||||
"Yi-34B-Chat",
|
||||
],
|
||||
|
||||
|
||||
@ -19,8 +19,10 @@
|
||||
"d3": "^7.8.3",
|
||||
"echarts": "^5.4.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"highlight.js": "^11.10.0",
|
||||
"less": "^4.1.3",
|
||||
"marked": "^13.0.2",
|
||||
"marked-highlight": "^2.1.4",
|
||||
"pinia": "^2.0.32",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.6 MiB |
@ -1,5 +1,16 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--main-900: #003A51;
|
||||
--main-800: #004F69;
|
||||
--main-700: #00637F;
|
||||
--main-600: #1B7796;
|
||||
--main-500: #2C86A8;
|
||||
--main-400: #4e99b9;
|
||||
--main-300: #6AADCB;
|
||||
--main-200: #8CC6E1;
|
||||
--main-100: #ABE0F7;
|
||||
--main-50: #CDF5FF;
|
||||
|
||||
--c-white: #ffffff;
|
||||
--c-white-soft: #f8f8f8;
|
||||
--c-white-mute: #f2f2f2;
|
||||
@ -8,60 +19,28 @@
|
||||
--c-black-soft: #222222;
|
||||
--c-black-mute: #282828;
|
||||
|
||||
--c-indigo: #2c3e50;
|
||||
|
||||
--c-black-light-1: #333333;
|
||||
--c-black-light-2: #454545;
|
||||
--c-black-light-3: #666666;
|
||||
--c-black-light-4: #999999;
|
||||
|
||||
--c-text-light-1: var(--c-indigo);
|
||||
--c-text-light-2: rgba(60, 66, 70, 0.66);
|
||||
--c-text-dark-1: var(--c-white);
|
||||
--c-text-light-1: var(--c-black);
|
||||
--c-text-dark-1: #0D0D0D;
|
||||
--c-text-dark-2: #b8b8b8;
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--c-white);
|
||||
--color-background-soft: var(--c-white-soft);
|
||||
--color-background-mute: var(--c-white-mute);
|
||||
|
||||
--color-border: var(--c-black-light-2);
|
||||
--color-border-hover: var(--c-black-light-1);
|
||||
|
||||
--color-heading: var(--c-text-light-1);
|
||||
--color-text: var(--c-black);
|
||||
|
||||
--section-gap: 160px;
|
||||
|
||||
--main-color: #005f77;
|
||||
--main-color: var(--main-700);
|
||||
--main-color-dark: #004d5c;
|
||||
--main-light-1: #007f96;
|
||||
--main-light-2: #D3EAED;
|
||||
--main-light-3: #EDF4F5;
|
||||
--main-light-4: #F2F6F7;
|
||||
--main-light-1: #0076AB;
|
||||
--main-light-2: #DAEAED;
|
||||
--main-light-3: #EDF0F1;
|
||||
--main-light-4: #F2F5F5;
|
||||
--main-light-5: #F7FAFB;
|
||||
--main-light-6: #FAFDFD;
|
||||
--min-width: 400px;
|
||||
--min-header-width: 80px;
|
||||
--error-color: #f50a0d;
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--c-black);
|
||||
--color-background-soft: var(--c-black-soft);
|
||||
--color-background-mute: var(--c-black-mute);
|
||||
|
||||
--color-border: var(--c-black-dark-2);
|
||||
--color-border-hover: var(--c-black-dark-1);
|
||||
|
||||
--color-heading: var(--c-text-dark-1);
|
||||
--color-text: var(--c-text-dark-2);
|
||||
}
|
||||
} */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
||||
@ -2,6 +2,6 @@ export const themeConfig = {
|
||||
token: {
|
||||
colorPrimary: '#005F77',
|
||||
colorInfo: '#191919',
|
||||
wireframe: true
|
||||
fontFamily: "'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;"
|
||||
},
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
class="newchat nav-btn"
|
||||
@click="$emit('newconv')"
|
||||
>
|
||||
<PlusCircleOutlined /> <span class="text">新对话</span>
|
||||
<PlusCircleOutlined /> <span class="text">新对话 {{ configStore.config?.model_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__right">
|
||||
@ -107,8 +107,13 @@
|
||||
:class="message.role"
|
||||
>
|
||||
<p v-if="message.role=='sent'" style="white-space: pre-line" class="message-text">{{ message.text }}</p>
|
||||
<div v-else-if="message.text.length == 0" class="loading-dots">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<p v-else
|
||||
v-html="renderMarkdown(message.text)"
|
||||
v-html="renderMarkdown(message)"
|
||||
class="message-md"
|
||||
@click="consoleMsg(message)"></p>
|
||||
|
||||
@ -149,6 +154,7 @@
|
||||
<a-progress :percent="(res.rerank_score * 100).toFixed(2)" stroke-color="#1677FF" :size="[200, 10]"/>
|
||||
</div>
|
||||
</p>
|
||||
<a-divider />
|
||||
<p class="result-text">{{ res.entity.text }}</p>
|
||||
</div>
|
||||
</a-drawer>
|
||||
@ -169,7 +175,7 @@
|
||||
<template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template>
|
||||
</a-button>
|
||||
</div>
|
||||
<p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}:{{ configStore.config?.model_name }}</p>
|
||||
<p class="note">请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}: {{ configStore.config?.model_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -192,8 +198,11 @@ import {
|
||||
FolderOpenOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { marked } from 'marked';
|
||||
import { Marked } from 'marked';
|
||||
import { markedHighlight } from 'marked-highlight';
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/github.css';
|
||||
|
||||
const props = defineProps({
|
||||
conv: Object,
|
||||
@ -232,16 +241,30 @@ const meta = reactive(JSON.parse(localStorage.getItem('meta')) || {
|
||||
history_round: 5,
|
||||
})
|
||||
|
||||
// 更多选项可以在 marked 文档中找到：https://marked.js.org/
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
tables: true,
|
||||
});
|
||||
const marked = new Marked(
|
||||
{
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
tables: true,
|
||||
},
|
||||
markedHighlight({
|
||||
langPrefix: 'hljs language-',
|
||||
highlight(code) {
|
||||
return hljs.highlightAuto(code).value;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
const renderMarkdown = (text) => marked(text)
|
||||
const consoleMsg = (message) => console.log(message)
|
||||
onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
|
||||
const renderMarkdown = (message) => {
|
||||
if (message.status === 'loading') {
|
||||
return marked.parse(message.text + '🟢')
|
||||
} else {
|
||||
return marked.parse(message.text)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
@ -313,16 +336,17 @@ const appendAiMessage = (message, refs=null) => {
|
||||
}
|
||||
|
||||
const updateMessage = (text, id, refs, status) => {
|
||||
const message = conv.value.messages.find((message) => message.id === id)
|
||||
const message = conv.value.messages.find((message) => message.id === id);
|
||||
if (message) {
|
||||
message.text = text
|
||||
message.refs = refs
|
||||
message.status = status
|
||||
message.refs = refs;
|
||||
message.status = status;
|
||||
message.text = text;
|
||||
} else {
|
||||
console.error('Message not found')
|
||||
console.error('Message not found');
|
||||
}
|
||||
scrollToBottom()
|
||||
}
|
||||
scrollToBottom();
|
||||
};
|
||||
|
||||
|
||||
const updateStatus = (id, status) => {
|
||||
const message = conv.value.messages.find((message) => message.id === id)
|
||||
@ -332,7 +356,6 @@ const updateStatus = (id, status) => {
|
||||
console.error('Message not found')
|
||||
}
|
||||
|
||||
console.log("updateStatus", message, message.refs.knowledge_base.results.length > 0)
|
||||
if (message.refs.knowledge_base.results.length > 0) {
|
||||
message.groupedResults = message.refs.knowledge_base.results.reduce((acc, result) => {
|
||||
const { filename } = result.file;
|
||||
@ -373,7 +396,7 @@ const sendMessage = () => {
|
||||
if (user_input) {
|
||||
isStreaming.value = true
|
||||
appendUserMessage(user_input)
|
||||
appendAiMessage("···", null)
|
||||
appendAiMessage("", null)
|
||||
const cur_res_id = conv.value.messages[conv.value.messages.length - 1].id
|
||||
conv.value.inputText = ''
|
||||
meta.db_name = opts.databases[meta.selectedKB]?.metaname
|
||||
@ -585,7 +608,7 @@ watch(
|
||||
|
||||
.chat-box {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
@ -593,25 +616,24 @@ watch(
|
||||
flex-direction: column;
|
||||
|
||||
.message-box {
|
||||
max-width: 95%;
|
||||
display: inline-block;
|
||||
border-radius: 0.8rem;
|
||||
border-radius: 1.5rem;
|
||||
margin: 0.8rem 0;
|
||||
padding: 1rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
user-select: text;
|
||||
word-break: break-word;
|
||||
font-size: 16px;
|
||||
font-variation-settings: 'wght' 400, 'opsz' 10.5;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
color: #0D0D0D;
|
||||
color: black;
|
||||
/* box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16); */
|
||||
/* animation: slideInUp 0.1s ease-in; */
|
||||
}
|
||||
|
||||
.message-box.sent {
|
||||
background-color: #efefef;
|
||||
line-height: 24px;
|
||||
max-width: 95%;
|
||||
background: var(--main-light-3);
|
||||
align-self: flex-end;
|
||||
}
|
||||
@ -620,10 +642,9 @@ watch(
|
||||
color: initial;
|
||||
width: fit-content;
|
||||
padding-top: 16px;
|
||||
background-color: #F5F7F8;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: justify;
|
||||
}
|
||||
@ -651,21 +672,23 @@ watch(
|
||||
.retrieval-detail {
|
||||
.fileinfo {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
background: var(--main-light-3);
|
||||
padding: 1rem;
|
||||
background: var(--main-50);
|
||||
color: var(--main-800);
|
||||
border-radius: 8px;
|
||||
// border: 1px solid var(--main-100);
|
||||
p {
|
||||
margin: 0;
|
||||
margin: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.result-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
padding: 24px 16px 10px 16px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
background: var(--main-light-4);
|
||||
background: var(--main-light-6);
|
||||
|
||||
.result-id,
|
||||
.result-distance,
|
||||
@ -696,23 +719,23 @@ watch(
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem 2rem;
|
||||
padding: 4px 2rem 0 2rem;
|
||||
background: white;
|
||||
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
align-items: flex-end;
|
||||
background-color: #F5F7F8;
|
||||
background-color: var(--main-light-4);
|
||||
border-radius: 2rem;
|
||||
height: auto;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:focus-within {
|
||||
background-color: #F2F2F2;
|
||||
background-color: #ECF1F2;
|
||||
}
|
||||
|
||||
.user-input {
|
||||
@ -762,9 +785,10 @@ watch(
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 2.5rem;
|
||||
background-color: black;
|
||||
background-color: var(--main-color);
|
||||
border-radius: 3rem;
|
||||
color: white;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
@ -772,7 +796,7 @@ watch(
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #D7D7D7;
|
||||
background: #E0E0E0;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -803,8 +827,37 @@ button:disabled {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.slide-out-left{-webkit-animation:slide-out-left .5s 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.5s 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;}
|
||||
.loading-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-dots div {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0 5px;
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
animation: loading 0.8s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.loading-dots div:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.loading-dots div:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.loading-dots div:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@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;}
|
||||
@-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}}
|
||||
|
||||
@ -851,3 +904,16 @@ button:disabled {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.message-box pre {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--main-light-3);
|
||||
padding: 1rem;
|
||||
|
||||
&:has(code.hljs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,6 +9,8 @@ import {
|
||||
BookOutlined,
|
||||
BookFilled,
|
||||
GithubOutlined,
|
||||
DatabaseOutlined,
|
||||
DatabaseFilled,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { themeConfig } from '@/assets/theme'
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
@ -55,7 +57,7 @@ console.log(route)
|
||||
<component class="icon" :is="route.path === '/chat' ? MessageFilled : MessageOutlined" />
|
||||
</RouterLink>
|
||||
<RouterLink to="/database" class="nav-item" active-class="active">
|
||||
<component class="icon" :is="route.path.startsWith('/database') ? BookFilled : BookOutlined" />
|
||||
<component class="icon" :is="route.path.startsWith('/database') ? DatabaseFilled : DatabaseOutlined" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="fill" style="flex-grow: 1;"></div>
|
||||
@ -111,13 +113,13 @@ div.header, #app-router-view {
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 80px;
|
||||
flex: 0 0 70px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-light-3);
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
border-right: 1px solid var(--main-light-2);
|
||||
width: 70px;
|
||||
border-right: 1px solid var(--main-light-3);
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
@ -150,12 +152,12 @@ div.header, #app-router-view {
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: var(--main-color);
|
||||
background-color: var(--main-light-2);
|
||||
color: var(--main-600);
|
||||
background-color: #E6E8E9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-2);
|
||||
background-color: #E6E8E9;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -205,7 +207,7 @@ div.header, #app-router-view {
|
||||
.nav-item {
|
||||
text-decoration: none;
|
||||
width: 40px;
|
||||
color: var(--c-text-light-2);
|
||||
color: var(--c-black-soft);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out;
|
||||
|
||||
@ -6,13 +6,15 @@
|
||||
<span style="font-weight: bold;">对话历史</span>
|
||||
<div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
|
||||
</div>
|
||||
<div class="conversation"
|
||||
v-for="(state, index) in convs"
|
||||
:key="index"
|
||||
:class="{ active: curConvId === index }"
|
||||
@click="goToConversation(index)">
|
||||
<div class="conversation__title">{{ state.title }}</div>
|
||||
<div class="conversation__delete" @click.stop="delConv(index)"><DeleteOutlined /></div>
|
||||
<div class="conversation-list">
|
||||
<div class="conversation"
|
||||
v-for="(state, index) in convs"
|
||||
:key="index"
|
||||
:class="{ active: curConvId === index }"
|
||||
@click="goToConversation(index)">
|
||||
<div class="conversation__title">{{ state.title }}</div>
|
||||
<div class="conversation__delete" @click.stop="delConv(index)"><DeleteOutlined /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChatComponent
|
||||
@ -132,17 +134,12 @@ onMounted(() => {
|
||||
flex: 1 1 auto; /* 当侧边栏打开时，占据可用空间 */
|
||||
}
|
||||
.conversations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 230px; /* 初始宽度 */
|
||||
height: 100%;
|
||||
max-width: 230px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--main-light-3);
|
||||
background-color: #FAFCFD;
|
||||
overflow: hidden; /* 确保内容不溢出 */
|
||||
white-space: nowrap; /* 防止文本换行 */
|
||||
transition: all 0.2s ease-out;
|
||||
max-height: 100%;
|
||||
background-color: #FAFCFD;
|
||||
|
||||
& .actions {
|
||||
height: var(--header-height);
|
||||
@ -150,10 +147,8 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #FAFCFD;
|
||||
z-index: 9;
|
||||
border-bottom: 1px solid var(--main-light-3);
|
||||
|
||||
.action {
|
||||
font-size: 1.2rem;
|
||||
@ -172,7 +167,14 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.conversation {
|
||||
.conversation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.conversation-list .conversation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -199,12 +201,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-left: 3px solid var(--main-color);
|
||||
border-left: 3px solid var(--main-600);
|
||||
padding-left: 13px;
|
||||
background-color: var(--main-light-3);
|
||||
|
||||
& .conversation__title {
|
||||
color: var(--c-black-light-1);
|
||||
color: var(--main-900);
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,33 +220,33 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.conversations::-webkit-scrollbar {
|
||||
.conversation-list::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.conversations::-webkit-scrollbar-track {
|
||||
.conversation-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.conversations::-webkit-scrollbar-thumb {
|
||||
.conversation-list::-webkit-scrollbar-thumb {
|
||||
background: var(--c-text-dark-2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.conversations::-webkit-scrollbar-thumb:hover {
|
||||
.conversation-list::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(100, 100, 100);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.conversations::-webkit-scrollbar-thumb:active {
|
||||
.conversation-list::-webkit-scrollbar-thumb:active {
|
||||
background: rgb(68, 68, 68);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.conversations {
|
||||
.conversation {
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
width: 300px;
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
</div>
|
||||
<a-divider/>
|
||||
<div class="pagebtns">
|
||||
<a-button @click="state.curPage='add'" :class="{ 'active': state.curPage === 'add' }">
|
||||
<div @click="state.curPage='add'" :class="{ 'active': state.curPage === 'add' }">
|
||||
<CloudUploadOutlined />添加文件
|
||||
</a-button>
|
||||
<a-button @click="state.curPage='query-test'" :class="{ 'active': state.curPage === 'query-test' }">
|
||||
</div>
|
||||
<div @click="state.curPage='query-test'" :class="{ 'active': state.curPage === 'query-test' }">
|
||||
<SearchOutlined />检索测试
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="query-params" v-if="state.curPage == 'query-test'">
|
||||
<p style="text-align: center; margin: 0;"><strong>参数配置</strong></p>
|
||||
@ -494,18 +494,31 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
button {
|
||||
> div {
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: var(--main-light-4);
|
||||
background: var(--main-light-5);
|
||||
letter-spacing: 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--main-light-2);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--main-light-3);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: bold;
|
||||
color: var(--main-color);
|
||||
background: var(--main-light-2);
|
||||
background: var(--main-light-3);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<header>江南大学人工智能与计算机学院</header>
|
||||
<header class="glass-header">江南大学人工智能与计算机学院</header>
|
||||
<h1>{{ title }}</h1>
|
||||
<p>大模型驱动的知识库管理工具</p>
|
||||
<button class="home-btn" @click="goToChat">开始对话</button>
|
||||
<img src="/home.png" alt="Placeholder Image" />
|
||||
<footer>© 江南语析 2024</footer>
|
||||
<footer>© 江南语析 2024 [WIP] v0.12.138</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,7 +13,7 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const title = ref('Athena ✨')
|
||||
const title = ref('📢 Athena ✨')
|
||||
const router = useRouter()
|
||||
|
||||
const goToChat = () => {
|
||||
@ -21,45 +22,46 @@ const goToChat = () => {
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* margin-top: 50px; */
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
background: linear-gradient(168deg, #ffd6eb, #ffe7ca, #d3fffb, #dbebff, #ffd8ff);
|
||||
background-size: 1000% 1000%;
|
||||
animation: animateBackground 20s ease infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header {
|
||||
background-color: var(--main-color);
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: aliceblue;
|
||||
color: var(--main-color);
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
backdrop-filter: blur(10px);
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
border-bottom: 2px solid var(--main-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
margin-top: calc(20vh - 80px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 700px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 1rem;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
button.home-btn {
|
||||
padding: 0.5rem 2rem;
|
||||
font-size: 24px;
|
||||
@ -70,12 +72,42 @@ button.home-btn {
|
||||
border-radius: 3rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
margin-top: 20px;
|
||||
margin-bottom: calc(15vh - 80px);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #555;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 700px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 1rem;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
margin-top: auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
/* 动态背景动画 */
|
||||
@keyframes animateBackground {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user