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

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

@@ -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;

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

@@ -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);
   }
 }
 

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

@@ -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;
   }
 

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

@@ -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);
         }
       }
 

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

@@ -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>
@@ -64,15 +64,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import { ref } from 'vue'
 import RoleHeader from './RoleHeader.vue'
 import RoleList from './RoleList.vue'
 import ChatRoleForm from '@/views/ai/model/chatRole/ChatRoleForm.vue'
 import RoleCategoryList from './RoleCategoryList.vue'
-import {ChatRoleApi, ChatRolePageReqVO, ChatRoleVO} from '@/api/ai/model/chatRole'
-import {ChatConversationApi, ChatConversationVO} from '@/api/ai/chat/conversation'
-import {Search} from '@element-plus/icons-vue'
-import {TabsPaneContext} from 'element-plus'
+import { ChatRoleApi, ChatRolePageReqVO, ChatRoleVO } from '@/api/ai/model/chatRole'
+import { ChatConversationApi, ChatConversationVO } from '@/api/ai/chat/conversation'
+import { Search } from '@element-plus/icons-vue'
+import { TabsPaneContext } from 'element-plus'
 
 const router = useRouter() // 路由对象
 
@@ -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;

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

@@ -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;