Appearance
样式入口与主题变量
Lingxi UI 的样式分为全量入口和组件按需入口。业务项目应优先选择与 JS 入口匹配的 CSS，避免普通聊天页加载图谱、脑图、表格等重型样式。
样式入口
| 使用方式 | JS 入口 | CSS 入口 |
|---|---|---|
| 全量组件库 | @zhiyongui/lingxi-ui | @zhiyongui/lingxi-ui/style.css |
| 基础聊天 IIFE | lingxi-chat.iife.js | lingxi-chat.css |
| 文件预览 IIFE | lingxi-file-preview.iife.js | lingxi-file-preview.css |
| 可视化 IIFE | lingxi-visualization.iife.js | lingxi-visualization.css |
| 单组件按需 | @zhiyongui/lingxi-ui/<entry> | @zhiyongui/lingxi-ui/<entry>/style.css |
示例：
ts
import { AiSender } from '@zhiyongui/lingxi-ui/ai-sender'
import '@zhiyongui/lingxi-ui/ai-sender/style.css'职责边界
| 文件 | 职责 |
|---|---|
src/styles/index.css | 全量样式入口，只负责汇总组件样式。 |
src/styles/components/*.css | 单个组件或能力域的样式，不应写全局页面样式。 |
scripts/component-style-manifest.mjs | 维护组件按需 style.css 由哪些源 CSS 拼接生成。 |
scripts/copy-component-styles.mjs | 根据 manifest 生成 dist/<entry>/style.css，并校验 package exports 覆盖。 |
命名规范
- 组件根类名使用
lingxi-ai-*，例如.lingxi-ai-file-preview。 - 组件内部元素使用 BEM 风格后缀，例如
.lingxi-ai-file-preview__header。 - 状态类使用
is-*，例如.is-active、.is-loading。 - 允许在组件根节点下覆盖 Element Plus 或第三方库局部类名，例如
.lingxi-ai-thought-chain .el-timeline。 - 不新增无作用域的
.el-*、body、html或页面级选择器。
主题变量
当前主题变量以组件域划分，并默认回落到 Element Plus token。业务项目可以在组件根节点或上层容器覆盖这些变量。
RichContent
| 变量 | 默认来源 | 用途 |
|---|---|---|
--lingxi-rich-bg | --el-bg-color | 富内容背景。 |
--lingxi-rich-muted-bg | --el-fill-color-light | 次级背景。 |
--lingxi-rich-border | --el-border-color-light | 边框。 |
--lingxi-rich-text | --el-text-color-primary | 主文本。 |
--lingxi-rich-muted | --el-text-color-secondary | 次级文本。 |
--lingxi-rich-primary | --el-color-primary | 选中、hover、强调色。 |
--lingxi-rich-soft | --el-fill-color-extra-light | 文件卡片等柔和背景。 |
MindMap
| 变量 | 默认来源 | 用途 |
|---|---|---|
--lingxi-mind-bg | --el-bg-color | 脑图容器背景。 |
--lingxi-mind-soft | --el-fill-color-extra-light | 工具栏和空状态背景。 |
--lingxi-mind-border | --el-border-color-light | 边框。 |
--lingxi-mind-text | --el-text-color-primary | 主文本。 |
--lingxi-mind-muted | --el-text-color-secondary | 次级文本。 |
--lingxi-mind-primary | --el-color-primary | 主色。 |
KnowledgeGraph
| 变量 | 默认来源 | 用途 |
|---|---|---|
--lingxi-graph-bg | --el-bg-color | 图谱容器背景。 |
--lingxi-graph-soft | --el-fill-color-extra-light | 工具栏和编辑器背景。 |
--lingxi-graph-border | --el-border-color-light | 边框。 |
--lingxi-graph-text | --el-text-color-primary | 主文本。 |
--lingxi-graph-muted | --el-text-color-secondary | 次级文本。 |
--lingxi-graph-primary | --el-color-primary | 主色。 |
ExcelEditor
| 变量 | 默认值 | 用途 |
|---|---|---|
--lingxi-excel-bg | --el-bg-color | 工作簿背景。 |
--lingxi-excel-soft | #f3f3f3 | 工具栏和表头背景。 |
--lingxi-excel-border | #d0d0d0 | 外框和控件边框。 |
--lingxi-excel-grid | #e2e2e2 | 表格网格线。 |
--lingxi-excel-text | #242424 | 主文本。 |
--lingxi-excel-muted | #666 | 次级文本。 |
--lingxi-excel-primary | #217346 | 主色。 |
--lingxi-excel-primary-dark | #185c37 | 深主色。 |
ThoughtChain
| 变量 | 默认来源 | 用途 |
|---|---|---|
--lingxi-thought-border | --el-border-color-lighter | 折叠面板边框。 |
--lingxi-thought-text | --el-text-color-primary | 主文本。 |
--lingxi-thought-muted | --el-text-color-secondary | 次级文本。 |
--lingxi-thought-line | --el-border-color | 时间线。 |
覆盖示例
css
.customer-report-theme {
--lingxi-rich-primary: #0f766e;
--lingxi-rich-soft: #f0fdfa;
--lingxi-graph-primary: #2563eb;
}vue
<section class="customer-report-theme">
<AiRichContent v-model="document" />
</section>构建校验
按需样式由 scripts/component-style-manifest.mjs 生成。新增公开组件入口时，需要同时补齐：
package.jsonexports 中的./<entry>和./<entry>/style.css。src/entries/<entry>.ts。scripts/component-style-manifest.mjs中的样式清单。- 对应组件文档中的样式入口说明。
npm.cmd run build 会校验 exports 中声明的按需样式入口是否都在 manifest 中。