Skip to content

Commit 71f1a70

Browse files
YunaiVYunaiV
committed
feat：【AI 大模型】AI 聊天界面，适配黑色主题
1 parent cb75527 commit 71f1a70

File tree

6 files changed

+42
-37
lines changed

6 files changed

+42
-37
lines changed

‎src/views/ai/chat/index/components/conversation/ConversationList.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,8 @@ onMounted(async () => {
391391
line-height: 30px;
392392
393393
&.active {
394-
background-color: #e6e6e6;
394+
background-color: var(--el-color-primary-light-9);
395+
border: 1px solid var(--el-color-primary-light-7);
395396
396397
.button {
397398
display: inline-block;
@@ -409,7 +410,7 @@ onMounted(async () => {
409410
max-width: 220px;
410411
font-size: 14px;
411412
font-weight: 400;
412-
color: rgba(0, 0, 0, 0.77);
413+
color: var(--el-text-color-regular);
413414
overflow: hidden;
414415
white-space: nowrap;
415416
text-overflow: ellipsis;
@@ -430,7 +431,7 @@ onMounted(async () => {
430431
display: flex;
431432
flex-direction: row;
432433
justify-items: center;
433-
color: #606266;
434+
color: var(--el-text-color-regular);
434435
435436
.btn {
436437
margin: 0;
@@ -447,8 +448,8 @@ onMounted(async () => {
447448
right: 0;
448449
//width: 100%;
449450
padding: 0 20px;
450-
background-color: #f4f4f4;
451-
box-shadow: 0 0 1px 1px rgba(228, 228, 228, 0.8);
451+
background-color: var(--el-fill-color-extra-light);
452+
box-shadow: 0 0 1px 1px var(--el-border-color-lighter);
452453
line-height: 35px;
453454
display: flex;
454455
justify-content: space-between;
@@ -458,7 +459,7 @@ onMounted(async () => {
458459
> div {
459460
display: flex;
460461
align-items: center;
461-
color: #606266;
462+
color: var(--el-text-color-regular);
462463
padding: 0;
463464
margin: 0;
464465
cursor: pointer;

‎src/views/ai/chat/index/components/message/MessageList.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,13 @@ onMounted(async () => {
215215
display: flex;
216216
flex-direction: column;
217217
overflow-wrap: break-word;
218-
background-color: rgba(228, 228, 228, 0.8);
219-
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.8);
218+
background-color: var(--el-fill-color-light);
219+
box-shadow: 0 0 0 1px var(--el-border-color-light);
220220
border-radius: 10px;
221221
padding: 10px 10px 5px 10px;
222222
223223
.left-text {
224-
color: #393939;
224+
color: var(--el-text-color-primary);
225225
font-size: 0.95rem;
226226
}
227227
}
@@ -232,10 +232,10 @@ onMounted(async () => {
232232
233233
.right-text {
234234
font-size: 0.95rem;
235-
color: #fff;
235+
color: var(--el-color-white);
236236
display: inline;
237-
background-color: #267fff;
238-
box-shadow: 0 0 0 1px #267fff;
237+
background-color: var(--el-color-primary);
238+
box-shadow: 0 0 0 1px var(--el-color-primary);
239239
border-radius: 10px;
240240
padding: 10px;
241241
width: auto;
@@ -270,7 +270,7 @@ onMounted(async () => {
270270
271271
.btn-cus:hover {
272272
cursor: pointer;
273-
background-color: #f6f6f6;
273+
background-color: var(--el-fill-color-lighter);
274274
}
275275
}
276276

‎src/views/ai/chat/index/components/role/RoleHeader.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ defineProps({
2929
padding: 0 10px;
3030
white-space: nowrap;
3131
text-overflow: ellipsis;
32-
background-color: #ececec;
32+
background-color: var(--el-bg-color-page);
3333
width: 100%;
3434
3535
.title {
3636
font-size: 20px;
3737
font-weight: bold;
3838
overflow: hidden;
39-
color: #3e3e3e;
39+
color: var(--el-text-color-primary);
4040
max-width: 220px;
4141
}
4242

‎src/views/ai/chat/index/components/role/RoleList.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
<template #dropdown>
1414
<el-dropdown-menu>
1515
<el-dropdown-item :command="['edit', role]">
16-
<Icon icon="ep:edit" color="#787878" />编辑
16+
<Icon icon="ep:edit" color="var(--el-text-color-placeholder)" />编辑
1717
</el-dropdown-item>
18-
<el-dropdown-item :command="['delete', role]" style="color: red">
19-
<Icon icon="ep:delete" color="red" />删除
18+
<el-dropdown-item :command="['delete', role]" style="color: var(--el-color-danger)">
19+
<Icon icon="ep:delete" color="var(--el-color-danger)" />删除
2020
</el-dropdown-item>
2121
</el-dropdown-menu>
2222
</template>
@@ -153,13 +153,13 @@ const handleTabsScroll = async () => {
153153
.title {
154154
font-size: 18px;
155155
font-weight: bold;
156-
color: #3e3e3e;
156+
color: var(--el-text-color-primary);
157157
}
158158
159159
.description {
160160
margin-top: 10px;
161161
font-size: 14px;
162-
color: #6a6a6a;
162+
color: var(--el-text-color-regular);
163163
}
164164
}
165165

‎src/views/ai/chat/index/components/role/RoleRepository.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
@click="handlerAddRole"
2424
class="ml-20px"
2525
>
26-
<Icon icon="ep:user" style="margin-right: 5px;" />
26+
<Icon icon="ep:user" style="margin-right: 5px" />
2727
添加角色
2828
</el-button>
2929
</div>
@@ -64,15 +64,15 @@
6464
</template>
6565

6666
<script setup lang="ts">
67-
import {ref} from 'vue'
67+
import { ref } from 'vue'
6868
import RoleHeader from './RoleHeader.vue'
6969
import RoleList from './RoleList.vue'
7070
import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
7171
import RoleCategoryList from './RoleCategoryList.vue'
72-
import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole'
73-
import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
74-
import {Search} from '@element-plus/icons-vue'
75-
import {TabsPaneContext} from 'element-plus'
72+
import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
73+
import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
74+
import { Search } from '@element-plus/icons-vue'
75+
import { TabsPaneContext } from 'element-plus'
7676
7777
const router = useRouter() // 路由对象
7878
@@ -244,7 +244,7 @@ onMounted(async () => {
244244
right: 0;
245245
top: 0;
246246
bottom: 0;
247-
background-color: #ffffff;
247+
background-color: var(--el-bg-color);
248248
overflow: hidden;
249249
display: flex;
250250
flex-direction: column;

‎src/views/ai/chat/index/index.vue

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,16 @@
2222
<Icon icon="ep:setting" class="ml-10px" />
2323
</el-button>
2424
<el-button size="small" class="btn" @click="handlerMessageClear">
25-
<Icon icon="heroicons-outline:archive-box-x-mark" color="#787878" />
25+
<Icon
26+
icon="heroicons-outline:archive-box-x-mark"
27+
color="var(--el-text-color-placeholder)"
28+
/>
2629
</el-button>
2730
<el-button size="small" class="btn">
28-
<Icon icon="ep:download" color="#787878" />
31+
<Icon icon="ep:download" color="var(--el-text-color-placeholder)" />
2932
</el-button>
3033
<el-button size="small" class="btn" @click="handleGoTopMessage">
31-
<Icon icon="ep:top" color="#787878" />
34+
<Icon icon="ep:top" color="var(--el-text-color-placeholder)" />
3235
</el-button>
3336
</div>
3437
</el-header>
@@ -613,7 +616,8 @@ onMounted(async () => {
613616
line-height: 30px;
614617
615618
&.active {
616-
background-color: #e6e6e6;
619+
background-color: var(--el-color-primary-light-9);
620+
border: 1px solid var(--el-color-primary-light-7);
617621
618622
.button {
619623
display: inline-block;
@@ -649,7 +653,7 @@ onMounted(async () => {
649653
display: flex;
650654
flex-direction: row;
651655
justify-items: center;
652-
color: #606266;
656+
color: var(--el-text-color-regular);
653657
654658
.el-icon {
655659
margin-right: 5px;
@@ -669,7 +673,7 @@ onMounted(async () => {
669673
> div {
670674
display: flex;
671675
align-items: center;
672-
color: #606266;
676+
color: var(--el-text-color-regular);
673677
padding: 0;
674678
margin: 0;
675679
cursor: pointer;
@@ -683,15 +687,15 @@ onMounted(async () => {
683687
684688
// 头部
685689
.detail-container {
686-
background: #ffffff;
690+
background: var(--el-bg-color);
687691
688692
.header {
689693
display: flex;
690694
flex-direction: row;
691695
align-items: center;
692696
justify-content: space-between;
693-
background: #fbfbfb;
694-
box-shadow: 0 0 0 0 #dcdfe6;
697+
background: var(--el-bg-color-page);
698+
box-shadow: 0 0 0 0 var(--el-border-color-light);
695699
696700
.title {
697701
font-size: 18px;
@@ -744,7 +748,7 @@ onMounted(async () => {
744748
display: flex;
745749
flex-direction: column;
746750
height: auto;
747-
border: 1px solid #e3e3e3;
751+
border: 1px solid var(--el-border-color);
748752
border-radius: 10px;
749753
margin: 10px 20px 20px 20px;
750754
padding: 9px 10px;

0 commit comments

Comments
 (0)