<!-- AI SUMMARY -->
## 快速了解

说明通过 SCSS 变量（尺寸、颜色、z-index）与 CSS 类覆盖（chat-input、用户/助手消息、shortcut-btns、markdown-body、tool-btn 等）自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式，业务侧按需覆写。

### 关联组件
- **chat-container** — 整体布局与侧栏
- **chat-input** — 输入区与渐变边框
- **message-container** — 消息区样式上下文

---
<!-- FULL DOC -->

# 主题配置

> **分类**：theme

`@blueking/chat-x` 使用 SCSS 变量和 CSS 类来控制样式，支持通过覆盖变量或样式来自定义主题。

## 样式引入

组件库的样式会在引入组件时自动加载，无需单独引入：

```typescript
// 引入组件时会自动引入样式
import { ChatInput, MessageContainer } from '@blueking/chat-x';
```

## SCSS 变量

组件库使用以下 SCSS 变量，可以在项目中覆盖：

### 尺寸变量

```scss
// 输入框尺寸
$chat-input-min-width: 350px;
$chat-input-max-width: 700px;
```

### 颜色变量

```scss
// 主题色
$primary-color: #3a84ff;

// 文字颜色
$text-color-primary: #313238;
$text-color-secondary: #4d4f56;
$text-color-placeholder: #979ba5;

// 背景色
$bg-color-white: #fff;
$bg-color-light: #f5f7fa;
$bg-color-hover: #f0f1f5;

// 边框色
$border-color: #dcdee5;
$border-color-hover: #c4c6cc;
```

### Z-Index 变量

组件库使用分层的 z-index 管理：

```scss
// 基础 z-index
$chat-z-index: 9999;

// 编辑器 z-index
$editor-z-index: $chat-z-index + 1;

// 编辑器菜单 z-index
$editor-menu-z-index: $editor-z-index + 1;

// 快捷指令菜单 z-index
$shortcut-menu-z-index: $editor-menu-z-index + 1;

// 划选弹窗 z-index
$selection-z-index: $shortcut-menu-z-index + 1;
```

## CSS 类覆盖

### 输入框样式

```scss
// 覆盖输入框容器样式
.chat-input-container {
  .chat-input {
    min-height: 120px; // 自定义最小高度
    max-height: 250px; // 自定义最大高度
    background: #fafafa; // 自定义背景色

    // 覆盖边框渐变
    &::before {
      background: linear-gradient(180deg, #ff6b6b, #ff8e53);
    }
  }
}
```

### 消息样式

```scss
// 用户消息样式
.ai-user-message {
  &-content {
    background-color: #d4edda; // 自定义背景色
    border-radius: 8px;
  }
}

// AI 消息样式
.assistant-message {
  &-content {
    background-color: #f8f9fa;
    border-left: 3px solid #3a84ff;
    padding-left: 12px;
  }
}
```

### 快捷指令按钮样式

```scss
// 快捷指令按钮
.shortcut-btns {
  &-item {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    // 移除默认渐变边框
    &::before {
      display: none;
    }
  }
}
```

### 消息工具栏样式

```scss
// 工具按钮
.tool-btn {
  width: 24px;
  height: 24px;
  font-size: 16px;

  &:hover {
    background-color: #e1ecff;
    color: #3a84ff;
  }
}
```

### Markdown 内容样式

```scss
// Markdown 内容
.markdown-content {
  .markdown-body {
    font-size: 14px;
    line-height: 1.6;

    // 代码块样式
    pre code.hljs {
      background-color: #1e1e1e;
      border-radius: 8px;
    }

    // 表格样式
    table {
      border-collapse: collapse;

      th,
      td {
        border: 1px solid #dcdee5;
        padding: 8px 12px;
      }

      th {
        background-color: #f5f7fa;
      }
    }
  }
}
```

## 主题切换示例

### 暗色主题

```scss
// 暗色主题变量
.dark-theme {
  // 输入框
  .chat-input-container .chat-input {
    background: #2d2d2d;

    &::before {
      background: linear-gradient(180deg, #4a90d9, #357abd);
    }
  }

  // 用户消息
  .ai-user-message-content {
    background-color: #3d5a80;
    color: #fff;
  }

  // AI 消息
  .assistant-message {
    color: #e0e0e0;
  }

  // Markdown 内容
  .markdown-content .markdown-body {
    color: #e0e0e0;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #fff;
    }

    a {
      color: #6cb2eb;
    }

    code {
      background-color: #3d3d3d;
      color: #e0e0e0;
    }
  }

  // 快捷指令
  .shortcut-btns-item {
    background: #3d3d3d;
    color: #e0e0e0;

    &::before {
      background: linear-gradient(105deg, #4a90d940, #9b59b640);
    }
  }

  // 工具按钮
  .tool-btn {
    color: #9e9e9e;

    &:hover {
      background-color: #424242;
      color: #fff;
    }
  }
}
```

### 使用暗色主题

```vue
<template>
  <div :class="{ 'dark-theme': isDark }">
    <ChatInput v-model="input" />
    <MessageContainer :messages="messages" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ChatInput, MessageContainer } from '@blueking/chat-x';

  const isDark = ref(false);
  const input = ref('');
  const messages = ref([]);
</script>
```

## 渐变边框

组件库使用 CSS mask 实现渐变边框效果：

```scss
// 渐变边框 mixin
@mixin linear-gradient-border($angle: 105deg, $start-color: #235dfa40, $end-color: #bc81ef40) {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient($angle, $start-color, $end-color);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
  pointer-events: none;
}
```

使用示例：

```scss
.custom-card {
  position: relative;
  border-radius: 8px;

  &::before {
    @include linear-gradient-border(180deg, #6cbaff, #3a84ff);
  }
}
```

## 动画效果

### 淡入动画

```scss
// 全局淡入动画
@keyframes ai-markdown-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ai-blueking-markdown-fade-in {
  animation: ai-markdown-fade-in 0.2s ease-out forwards;
}
```

### 弹窗过渡

```scss
// 选择弹窗过渡
.ai-fade-enter-active,
.ai-fade-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ai-fade-enter-from,
.ai-fade-leave-to {
  opacity: 0;
  transform: translateY(4px);
}
```

## 响应式设计

```scss
// 移动端适配
@media (max-width: 768px) {
  .chat-input-container .chat-input {
    min-width: 100%;
    max-width: 100%;
  }

  .shortcut-btns {
    min-width: 100%;
    max-width: 100%;
  }
}
```

## 注意事项

1. **样式优先级**：覆盖样式时可能需要使用更高优先级的选择器
2. **变量位置**：SCSS 变量需要在组件样式之前定义
3. **构建配置**：确保项目配置支持 SCSS 处理
4. **组件隔离**：使用 scoped 样式时，深度选择器 `::v-deep` 或 `:deep()` 可能需要

## 关联组件

- [ChatContainer](../components/molecular/chat-container.md) — 布局与主题根节点
- [ChatInput](../components/molecular/chat-input.md) — 输入区变量与类名
- [MessageContainer](../components/molecular/message-container.md) — 消息列表区域