Theme Plugin (主题插件)

Theme Plugin 是 ChatBI 系统的核心插件之一，负责管理应用程序的全局主题、配色方案以及布局设置。它允许用户在不同的视觉风格之间无缝切换，并支持亮色/暗色模式的自动适配。

功能特性

• 多主题切换：内置多种精选主题（如暗夜极光、清爽白昼、赛博朋克等），满足不同用户的审美需求。
• 亮色/暗色模式：支持全局的 dark 和 light 模式切换，自动适配 Tailwind CSS 的暗色模式类。
• CSS 变量注入：动态注入 CSS 变量，确保主题颜色在整个应用中实时生效。
• 布局管理：提供布局切换功能（如标准布局、紧凑布局），适应不同的屏幕尺寸和操作习惯。
• 持久化存储：自动保存用户的主题和布局偏好到本地存储，下次访问时自动恢复。

使用指南

1. 引入插件

在应用初始化时注册 Theme Plugin：

import { ThemePlugin } from '@chatbi-v/plugin-theme';
import { pluginManager } from '@chatbi-v/core';

const themePlugin = new ThemePlugin();
pluginManager.register(themePlugin);

2. 主题配置

插件默认提供以下主题，你可以根据需要在 themes.ts 中扩展更多主题：

• 暗夜极光 (Default): 深蓝色调，适合长时间夜间工作。
• 清爽白昼 (Light): 明亮清爽，适合日间高亮环境。
• 赛博朋克 (Cyberpunk): 高对比度霓虹配色，极具科技感。
• 深林幽静 (Forest): 绿色护眼配色，自然舒适。

3. 设置面板

插件注册后，会自动在设置区域提供 ThemeSettings 组件，用户可以通过界面直接进行如下操作：

• 切换主题：点击主题卡片即可实时预览并应用新主题。
• 切换布局：选择不同的布局模式（标准/紧凑）。

4. 开发扩展

添加新主题

在 themes.ts 文件中添加新的主题配置对象：

{
  id: 'new-theme',
  name: '新主题名称',
  type: 'light', // 或 'dark'
  colors: {
    '--color-background': 'R G B', // 背景色
    '--color-surface': 'R G B',    // 表面色（卡片、面板等）
    '--color-primary': 'R G B',    // 主色调
    '--color-secondary': 'R G B',  // 次要色调
    '--color-accent': 'R G B',     // 强调色
    '--color-text-main': 'R G B',  // 主要文本色
    '--color-text-muted': 'R G B', // 次要文本色
    '--color-border': 'R G B',     // 边框色
  }
}

注意：颜色值采用 RGB 三元组格式（如 255 255 255），以便配合 Tailwind CSS 的透明度修饰符使用。

技术细节

• CSS 变量: 插件通过修改 :root 元素的 CSS 变量来实现主题切换。
• Tailwind 适配: 切换主题时会自动在 html 标签上添加或移除 dark 类，触发 Tailwind 的暗色模式样式。
• 本地存储: 配置项通过 Core 层的 StorageManager 统一管理，存储在 plugin:theme:theme 和 plugin:theme:layout 中。