boyue2025/boyue-ui-admin-vue3
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/boyue-ui-admin-vue3 synced 2025-08-08 16:32:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：【AI 大模型】AI 聊天界面，适配黑色主题

Browse Source
This commit is contained in:
YunaiV 2025-07-17 00:27:55 +08:00
parent cb75527847
commit 71f1a70a8e
6 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/ai/chat/index/components/conversation/ConversationList.vue
View File

@ -391,7 +391,8 @@ onMounted(async () => {
line-height: 30px;
&.active {
background-color: #e6e6e6;
background-color: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-7);
.button {
display: inline-block;
@ -409,7 +410,7 @@ onMounted(async () => {
max-width: 220px;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.77);
color: var(--el-text-color-regular);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -430,7 +431,7 @@ onMounted(async () => {
display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
color: var(--el-text-color-regular);
.btn {
margin: 0;
@ -447,8 +448,8 @@ onMounted(async () => {
right: 0;
//width: 100%;
padding: 0 20px;
background-color: #f4f4f4;
box-shadow: 0 0 1px 1px rgba(228, 228, 228, 0.8);
background-color: var(--el-fill-color-extra-light);
box-shadow: 0 0 1px 1px var(--el-border-color-lighter);
line-height: 35px;
display: flex;
justify-content: space-between;
@ -458,7 +459,7 @@ onMounted(async () => {
> div {
display: flex;
align-items: center;
color: #606266;
color: var(--el-text-color-regular);
padding: 0;
margin: 0;
cursor: pointer;

14
src/views/ai/chat/index/components/message/MessageList.vue
View File

@ -215,13 +215,13 @@ onMounted(async () => {
display: flex;
flex-direction: column;
overflow-wrap: break-word;
background-color: rgba(228, 228, 228, 0.8);
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.8);
background-color: var(--el-fill-color-light);
box-shadow: 0 0 0 1px var(--el-border-color-light);
border-radius: 10px;
padding: 10px 10px 5px 10px;
.left-text {
color: #393939;
color: var(--el-text-color-primary);
font-size: 0.95rem;
}
}
@ -232,10 +232,10 @@ onMounted(async () => {
.right-text {
font-size: 0.95rem;
color: #fff;
color: var(--el-color-white);
display: inline;
background-color: #267fff;
box-shadow: 0 0 0 1px #267fff;
background-color: var(--el-color-primary);
box-shadow: 0 0 0 1px var(--el-color-primary);
border-radius: 10px;
padding: 10px;
width: auto;
@ -270,7 +270,7 @@ onMounted(async () => {
.btn-cus:hover {
cursor: pointer;
background-color: #f6f6f6;
background-color: var(--el-fill-color-lighter);
}
}

4
src/views/ai/chat/index/components/role/RoleHeader.vue
View File

@ -29,14 +29,14 @@ defineProps({
padding: 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #ececec;
background-color: var(--el-bg-color-page);
width: 100%;
.title {
font-size: 20px;
font-weight: bold;
overflow: hidden;
color: #3e3e3e;
color: var(--el-text-color-primary);
max-width: 220px;
}

10
src/views/ai/chat/index/components/role/RoleList.vue
View File

@ -13,10 +13,10 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="['edit', role]">
<Icon icon="ep:edit" color="#787878" />编辑
<Icon icon="ep:edit" color="var(--el-text-color-placeholder)" />编辑
</el-dropdown-item>
<el-dropdown-item :command="['delete', role]" style="color: red">
<Icon icon="ep:delete" color="red" />删除
<el-dropdown-item :command="['delete', role]" style="color: var(--el-color-danger)">
<Icon icon="ep:delete" color="var(--el-color-danger)" />删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
@ -153,13 +153,13 @@ const handleTabsScroll = async () => {
.title {
font-size: 18px;
font-weight: bold;
color: #3e3e3e;
color: var(--el-text-color-primary);
}
.description {
margin-top: 10px;
font-size: 14px;
color: #6a6a6a;
color: var(--el-text-color-regular);
}
}

4
src/views/ai/chat/index/components/role/RoleRepository.vue
View File

@ -23,7 +23,7 @@
@click="handlerAddRole"
class="ml-20px"
>
<Icon icon="ep:user" style="margin-right: 5px;" />
<Icon icon="ep:user" style="margin-right: 5px" />
添加角色
</el-button>
</div>
@ -244,7 +244,7 @@ onMounted(async () => {
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
background-color: var(--el-bg-color);
overflow: hidden;
display: flex;
flex-direction: column;

24
src/views/ai/chat/index/index.vue
View File

@ -22,13 +22,16 @@
<Icon icon="ep:setting" class="ml-10px" />
</el-button>
<el-button size="small" class="btn" @click="handlerMessageClear">
<Icon icon="heroicons-outline:archive-box-x-mark" color="#787878" />
<Icon
icon="heroicons-outline:archive-box-x-mark"
color="var(--el-text-color-placeholder)"
/>
</el-button>
<el-button size="small" class="btn">
<Icon icon="ep:download" color="#787878" />
<Icon icon="ep:download" color="var(--el-text-color-placeholder)" />
</el-button>
<el-button size="small" class="btn" @click="handleGoTopMessage">
<Icon icon="ep:top" color="#787878" />
<Icon icon="ep:top" color="var(--el-text-color-placeholder)" />
</el-button>
</div>
</el-header>
@ -613,7 +616,8 @@ onMounted(async () => {
line-height: 30px;
&.active {
background-color: #e6e6e6;
background-color: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-7);
.button {
display: inline-block;
@ -649,7 +653,7 @@ onMounted(async () => {
display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
color: var(--el-text-color-regular);
.el-icon {
margin-right: 5px;
@ -669,7 +673,7 @@ onMounted(async () => {
> div {
display: flex;
align-items: center;
color: #606266;
color: var(--el-text-color-regular);
padding: 0;
margin: 0;
cursor: pointer;
@ -683,15 +687,15 @@ onMounted(async () => {
// 头部
.detail-container {
background: #ffffff;
background: var(--el-bg-color);
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fbfbfb;
box-shadow: 0 0 0 0 #dcdfe6;
background: var(--el-bg-color-page);
box-shadow: 0 0 0 0 var(--el-border-color-light);
.title {
font-size: 18px;
@ -744,7 +748,7 @@ onMounted(async () => {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border: 1px solid var(--el-border-color);
border-radius: 10px;
margin: 10px 20px 20px 20px;
padding: 9px 10px;