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

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

@ -215,13 +215,13 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-wrap: break-word; overflow-wrap: break-word;
background-color: rgba(228, 228, 228, 0.8); background-color: var(--el-fill-color-light);
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.8); box-shadow: 0 0 0 1px var(--el-border-color-light);
border-radius: 10px; border-radius: 10px;
padding: 10px 10px 5px 10px; padding: 10px 10px 5px 10px;
.left-text { .left-text {
color: #393939; color: var(--el-text-color-primary);
font-size: 0.95rem; font-size: 0.95rem;
} }
} }
@ -232,10 +232,10 @@ onMounted(async () => {
.right-text { .right-text {
font-size: 0.95rem; font-size: 0.95rem;
color: #fff; color: var(--el-color-white);
display: inline; display: inline;
background-color: #267fff; background-color: var(--el-color-primary);
box-shadow: 0 0 0 1px #267fff; box-shadow: 0 0 0 1px var(--el-color-primary);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
width: auto; width: auto;
@ -270,7 +270,7 @@ onMounted(async () => {
.btn-cus:hover { .btn-cus:hover {
cursor: pointer; 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; padding: 0 10px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background-color: #ececec; background-color: var(--el-bg-color-page);
width: 100%; width: 100%;
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
color: #3e3e3e; color: var(--el-text-color-primary);
max-width: 220px; max-width: 220px;
} }

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

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

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

@ -23,7 +23,7 @@
@click="handlerAddRole" @click="handlerAddRole"
class="ml-20px" class="ml-20px"
> >
<Icon icon="ep:user" style="margin-right: 5px;" /> <Icon icon="ep:user" style="margin-right: 5px" />
添加角色 添加角色
</el-button> </el-button>
</div> </div>
@ -64,15 +64,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from 'vue' import { ref } from 'vue'
import RoleHeader from './RoleHeader.vue' import RoleHeader from './RoleHeader.vue'
import RoleList from './RoleList.vue' import RoleList from './RoleList.vue'
import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue' import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
import RoleCategoryList from './RoleCategoryList.vue' import RoleCategoryList from './RoleCategoryList.vue'
import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole' import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation' import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
import {Search} from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import {TabsPaneContext} from 'element-plus' import { TabsPaneContext } from 'element-plus'
const router = useRouter() // 路由对象 const router = useRouter() // 路由对象
@ -244,7 +244,7 @@ onMounted(async () => {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #ffffff; background-color: var(--el-bg-color);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

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