此文档是织信应用主题样式文档。

# 主题样式

## 概述

在某些特定情况下，织信平台预设的样式可能无法满足实际需求，需要进行调整。为解决这个问题，织信平台提供了由设计人员编写
CSS样式的选项，设计人员可以在应用设计器内编写 CSS 样式，实现对默认样式的调整和覆盖。平台提供了**应用主题**和**模块主题**
的设置能力以实现分块的概念，从而提升模块访问时的加载和渲染的效率。

## 使用前瞻

在使用主题样式对应用进行个性化样式调整时，需要设计人员了解`CSS`的相关概念。对于不熟悉前端开发的人员，可通过学习
**CSS：层叠样式表**提高对 CSS 的掌握


## 平台实现

平台应用设计器支持对应用和模块进行独立的 CSS 样式设置。主题样式在**用户进入应用或模块**会`自动挂载`样式，
**用户离开应用或模块**会`自动卸载`样式。

平台内对元素的CSS **class** 进行了规范，我们可以通过对应用的 **class** 覆盖实现对应用的个性化展示；考虑到平台底层版本升级过程中可能会改动已有的
 **class** 名称，平台也在对应的 **class** 基础上增加了以`theme-`为前缀的样式，该类样式在平台升级时不会发生改变，以保证样式的兼容性。

## 使用主题样式自定义对话框样式
以下的示例利用css样式，修改了系统的默认对话框样式，增加了边框和标题文字背景色
```css
.el-dialog{
    border: 2px solid #666 !important;
}
.informat-dialog-title{
    position: relative;
}
.informat-dialog-title::after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    background: rgb(141 244 157 / 50%);
    border-radius: 5px;
    width: 30px;
    height: 10px;
}
```

![主题样式对话框](./images/app-theme-dialog.png)

## 使用主题样式数据表模块样式
```css
/* 条件选择样式覆盖 */
.app-module-Table.app-module-x1744czcz3blh .filter-item-op-condition-label {
    background: rgb(99,163,228);
    color: #fff;
}

/* 顶部工具栏 */
.app-module-Table.app-module-x1744czcz3blh .table-module-toolbar {
    background: linear-gradient(90deg, transparent, rgb(225, 243, 216), transparent);
}

/* 过滤条件 */
.app-module-Table.app-module-x1744czcz3blh .table-side-view .el-input__inner,
.app-module-Table.app-module-x1744czcz3blh .table-side-view .simple-select {
    background: #fff;
    border: 1px solid #ddd;
}

.info-view-box .form-opt-box, .record-opt-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
}
```