Web端使用semi框架的自定义主题

一、进入主题编辑平台

打开 Semi 官方 DSM 主题编辑器：
https://semi.design/dsm/web_console/components_panel?dsmID=28301

在平台内可自由修改：

• 主色 / 辅助色 / 功能色
• 圆角、阴影、间距
• 字体、字号
• 各组件样式（按钮、输入框、弹窗等）

二、编辑完成后发布主题

编辑完成后点击右上角 发布，系统会自动打包生成专属主题包。

三、安装主题包

在项目 web 目录下执行：

bun add @semi-bot/semi-theme-ai-mandao

安装成功后，可在 package.json 中看到已安装：
@semi-bot/semi-theme-ai-mandao

四、在项目中引入主题样式

打开文件：
web/src/index.jsx
按如下顺序引入样式（必须保证顺序）：

// 1. 先引入 Semi 官方基础样式
import '@douyinfe/semi-ui/dist/css/semi.css';

// 2. 再引入自定义主题（必须放在下一行，避免样式覆盖异常）
import '@semi-bot/semi-theme-ai-mandao/dist/css/semi.css';

注意
主题样式必须放在官方 semi.css 之后
确保不要重复引入、颠倒顺序