feat:添加主题色配置

src/views/components/style.less

@@ -3,12 +3,12 @@
 // =============================================
 
 // 颜色变量
-@primary-color: #5B8AFE;
-@primary-hover: #4a7df5;
-@primary-light: #7BA6FF;
-@blue-light-1: #f0f5ff;
-@blue-light-2: #f8faff;
-@blue-light-3: #e0e8ff;
+@primary-color: var(--primary-color, #5B8AFE);
+@primary-hover: var(--primary-color-hover, #4a7df5);
+@primary-light: var(--primary-color-light, #7BA6FF);
+@blue-light-1: var(--primary-light-1, #f0f5ff);
+@blue-light-2: var(--primary-light-2, #f8faff);
+@blue-light-3: var(--primary-light-3, #e0e8ff);
 @white: #ffffff;
 @gray-1: #f8f9fa;
 @gray-2: #f5f5f5;
@@ -23,6 +23,13 @@
 @error-color: #f5222d;
 @warning-color: #faad14;
 
+// 新增颜色变量
+@message-time-color: var(--message-time-color, #88a5d0);
+@secondary-color: var(--secondary-color, #2eb0a1);
+@error-border: var(--error-border, #ff4d4f);
+@error-bg: var(--error-bg, #fff2f0);
+@gradient-secondary: var(--gradient-secondary, #c3cfe2);
+
 // 全局滚动条美化 - 悬浮式不占位滚动条
 * {
   padding: 0;
@@ -58,7 +65,7 @@ li {
 .chat-container {
   background-color: @white;
   border-radius: 8px;
-  box-shadow: 0 8px 30px rgba(91, 138, 254, 0.15);
+  box-shadow: 0 8px 30px rgba(var(--primary-color-rgb, 91, 138, 254), 0.15);
   overflow: hidden;
   width: 100%;
   display: flex;
@@ -109,11 +116,11 @@ li {
         font-weight: 500;
         cursor: pointer;
         transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(91, 138, 254, 0.3);
+        box-shadow: 0 4px 15px rgba(var(--primary-color-rgb, 91, 138, 254), 0.3);
 
         &:hover {
           transform: translateY(-2px);
-          box-shadow: 0 6px 20px rgba(91, 138, 254, 0.4);
+          box-shadow: 0 6px 20px rgba(var(--primary-color-rgb, 91, 138, 254), 0.4);
         }
 
         &:active {
@@ -128,8 +135,8 @@ li {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-bottom: 1px solid #e8f2f1;
-    background: #FCFCFC;
+    border-bottom: 1px solid #e8f2f1; // 保持灰色系
+    background: #FCFCFC; // 保持灰色系
     padding: 10px 20px;
 
     .header-avatar {
@@ -169,8 +176,8 @@ li {
   // 输入容器
   .chat-input-container {
     padding: 20px;
-    border-top: 1px solid #e8f2f1;
-    background: #FCFCFC;
+    border-top: 1px solid #e8f2f1; // 保持灰色系
+    background: #FCFCFC; // 保持灰色系
     flex-shrink: 0;
   }
 }
@@ -180,7 +187,7 @@ li {
 // =============================================
 
 .message-time {
-  color: #88a5d0;
+  color: @message-time-color;
   margin-bottom: 6px;
   font-size: 14px;
 }
@@ -236,7 +243,7 @@ li {
 }
 
 .message.sent .avatar {
-  background: linear-gradient(135deg, #A8C6FF 0%, #C2D6FF 100%);
+  background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
   margin-left: 12px;
 }
 
@@ -358,6 +365,23 @@ li {
     z-index: 10;
   }
 
+  // 在需要的地方添加
+  .some-element {
+    color: @secondary-color;
+  }
+
+  .error-element {
+    border: 1px solid @error-border;
+    background-color: @error-bg;
+  }
+
+  .gradient-element {
+    background: linear-gradient(135deg, #f5f7fa 0%, @gradient-secondary 100%);
+  }
+
+  .focus-element {
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 91, 138, 254), 0.1);
+  }
   textarea {
     flex: 1;
     padding: 14px 110px 14px 16px; // 调整内边距：右侧为两个按钮留空间，左侧恢复正常