update the ui
This commit is contained in:
Wenjie Zhang
parent
ee950e40c9
commit
e0cb01eb8d
@ -16,18 +16,21 @@
|
||||
--main-10: #F5FDFF;
|
||||
--main-5: #FAFCFD;
|
||||
|
||||
--gray-10000: #000000;
|
||||
--gray-2000: #0C1214;
|
||||
--gray-1000: #171C1F;
|
||||
--gray-900: #212729;
|
||||
--gray-800: #42484A;
|
||||
--gray-700: #616161;
|
||||
--gray-600: #8C9194;
|
||||
--gray-500: #A7ACAF;
|
||||
--gray-400: #C2C7CA;
|
||||
--gray-300: #DEE3E6;
|
||||
--gray-200: #EFF1F4;
|
||||
--gray-100: #F8FAFD;
|
||||
--gray-50: #FBFDFF;
|
||||
--gray-600: #8C9193;
|
||||
--gray-500: #A7ACAD;
|
||||
--gray-400: #C4C7C8;
|
||||
--gray-300: #DFE3E4;
|
||||
--gray-200: #EFF1F2;
|
||||
--gray-100: #F8FAFB;
|
||||
--gray-50: #FBFDFE;
|
||||
--gray-10: #FDFEFF;
|
||||
--gray-0: #FFFFFF;
|
||||
|
||||
--main-color: #1c6586;
|
||||
--main-color-dark: #004d5c;
|
||||
|
||||
@ -10,12 +10,11 @@
|
||||
>
|
||||
<MenuOutlined />
|
||||
</div>
|
||||
<div
|
||||
class="newchat nav-btn"
|
||||
@click="$emit('newconv')"
|
||||
>
|
||||
<PlusCircleOutlined /> <span class="text">{{ configStore.config?.model_name }}</span>
|
||||
<a-tooltip :title="configStore.config?.model_name">
|
||||
<div class="newchat nav-btn" @click="$emit('newconv')">
|
||||
<PlusCircleOutlined /> <span class="text">新对话</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="header__right">
|
||||
<!-- <div class="nav-btn text metas">
|
||||
@ -42,7 +41,7 @@
|
||||
<div class="nav-btn text" @click="opts.showPanel = !opts.showPanel">
|
||||
<component :is="opts.showPanel ? FolderOpenOutlined : FolderOutlined" /> <span class="text">选项</span>
|
||||
</div>
|
||||
<div v-if="opts.showPanel" class="my-panal swing-in-top-fwd" ref="panel">
|
||||
<div v-if="opts.showPanel" class="my-panal r0 top100 swing-in-top-fwd" ref="panel">
|
||||
<div class="flex-center" v-if="configStore.config.enable_knowledge_base">
|
||||
知识库
|
||||
<div @click.stop>
|
||||
@ -93,7 +92,7 @@
|
||||
class="opt__button"
|
||||
v-for="(exp, key) in examples"
|
||||
:key="key"
|
||||
@click="autoSend(exp)"
|
||||
@click="conv.inputText = exp"
|
||||
>
|
||||
{{ exp }}
|
||||
</div>
|
||||
@ -113,11 +112,10 @@
|
||||
<div></div>
|
||||
</div>
|
||||
<div v-else-if="message.text.length == 0 || message.status == 'error'" class="err-msg">请求错误，请重试</div>
|
||||
<p v-else
|
||||
<div v-else
|
||||
v-html="renderMarkdown(message)"
|
||||
class="message-md"
|
||||
@click="consoleMsg(message)"></p>
|
||||
|
||||
@click="consoleMsg(message)"></div>
|
||||
<RefsComponent v-if="message.role=='received' && message.status=='finished'" :message="message" />
|
||||
</div>
|
||||
</div>
|
||||
@ -180,11 +178,11 @@ const { conv, state } = toRefs(props)
|
||||
const chatContainer = ref(null)
|
||||
const isStreaming = ref(false)
|
||||
const panel = ref(null)
|
||||
const modelCard = ref(null)
|
||||
const examples = ref([
|
||||
'写一个冒泡排序',
|
||||
'肉碱的分子量是多少？直接回答',
|
||||
'简述大蒜的功效是什么？',
|
||||
'A大于B，B小于C，A和C哪个大？',
|
||||
'总结大蒜的功效是什么？',
|
||||
'今天天气怎么样？',
|
||||
'吃饭吃出苍蝇可以索赔吗？',
|
||||
'帮我写一个请假条',
|
||||
@ -192,6 +190,7 @@ const examples = ref([
|
||||
|
||||
const opts = reactive({
|
||||
showPanel: false,
|
||||
showModelCard: false,
|
||||
openDetail: false,
|
||||
databases: [],
|
||||
})
|
||||
@ -221,9 +220,10 @@ const marked = new Marked(
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
const consoleMsg = (message) => console.log(message)
|
||||
onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
|
||||
onClickOutside(modelCard, () => setTimeout(() => opts.showModelCard = false, 30))
|
||||
|
||||
const renderMarkdown = (message) => {
|
||||
if (message.status === 'loading') {
|
||||
return marked.parse(message.text + '🟢')
|
||||
@ -523,8 +523,6 @@ watch(
|
||||
|
||||
.my-panal {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
@ -550,6 +548,15 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
.my-panal.r0.top100 {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.my-panal.l0.top100 {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.chat-examples {
|
||||
padding: 0 50px;
|
||||
@ -572,7 +579,7 @@ watch(
|
||||
gap: 10px;
|
||||
|
||||
.opt__button {
|
||||
background-color: #f2f5f5;
|
||||
background-color: var(--gray-200);
|
||||
color: #333;
|
||||
padding: .5rem 1.5rem;
|
||||
border-radius: 2rem;
|
||||
@ -869,4 +876,10 @@ watch(
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-md {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -164,24 +164,25 @@ const getPercent = (value) => {
|
||||
.refs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
color: var(--c-text-light-4);
|
||||
color: var(--gray-500);
|
||||
font-size: 14px;
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
background: var(--main-25);
|
||||
color: var(--main-500);
|
||||
background: var(--gray-100);
|
||||
color: var(--gray-800);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
|
||||
&.btn {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--main-25);
|
||||
background: var(--gray-200);
|
||||
}
|
||||
&:active {
|
||||
background: var(--main-50);
|
||||
background: var(--gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="result-container">
|
||||
<div class="input-container">
|
||||
<div class="actions">
|
||||
<span :class="{'active': !state.useFile}" @click="state.useFile = false">上传文本</span>
|
||||
<span :class="{'active': !state.useFile}" @click="state.useFile = false">输入文本</span>
|
||||
<span :class="{'active': state.useFile}" @click="state.useFile = true">上传文件</span>
|
||||
</div>
|
||||
<div class="upload" v-if="state.useFile">
|
||||
@ -189,18 +189,19 @@ const chunkText = async () => {
|
||||
margin-bottom: 10px;
|
||||
width: fit-content;
|
||||
background-color: var(--gray-200);
|
||||
padding: 8px 6px;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
span {
|
||||
color: var(--gray-900);
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&.active {
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -175,10 +175,10 @@ div.header, #app-router-view {
|
||||
flex: 0 0 70px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--gray-100);
|
||||
height: 100%;
|
||||
width: 74px;
|
||||
border-right: 1px solid var(--main-light-3);
|
||||
border-right: 1px solid var(--gray-300);
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
@ -237,8 +237,7 @@ div.header, #app-router-view {
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: var(--main-600);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
|
||||
@ -182,6 +182,7 @@ onMounted(() => {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&__title {
|
||||
color: var(--gray-700);
|
||||
@ -192,7 +193,8 @@ onMounted(() => {
|
||||
|
||||
&__delete {
|
||||
display: none;
|
||||
color: #7D7D7D;
|
||||
color: var(--gray-500);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: #F93A37;
|
||||
@ -203,20 +205,21 @@ onMounted(() => {
|
||||
&.active {
|
||||
border-right: 3px solid var(--main-500);
|
||||
padding-right: 13px;
|
||||
background-color: var(--main-light-3);
|
||||
background-color: var(--gray-200);
|
||||
|
||||
& .conversation__title {
|
||||
color: var(--main-900);
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(.active):hover {
|
||||
background-color: var(--main-light-3);
|
||||
|
||||
& .conversation__delete {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -197,8 +197,8 @@ onMounted(() => {
|
||||
}
|
||||
.databases {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
|
||||
.new-database {
|
||||
@ -207,7 +207,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.database, .graphbase {
|
||||
flex: 1 1 380px;
|
||||
background-color: white;
|
||||
box-shadow: 0px 1px 2px 0px rgba(16,24,40,.06),0px 1px 3px 0px rgba(16,24,40,.1);
|
||||
border: 2px solid white;
|
||||
@ -219,14 +218,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.dbcard, .database {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
width: 340px;
|
||||
height: 160px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
flex: 1 1 380px;
|
||||
max-width: 450px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
|
||||
@ -83,7 +83,7 @@ onMounted(() => {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user