@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/data-check/DataCheckSubList.vue

@@ -0,0 +1,160 @@
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+export default {
+  name: 'epx-base-data-check-sub-list',
+  extends: EntitySubList,
+  operateColumnPosition: 'start', // 操作列位置
+  methods: {
+    setCellClassName ({ row, column }) {
+      const { errors = [] } = this.$configs
+      const error = errors.find(item => item.dataId === row[this.$metaKey])
+      if (error) {
+        const errorFields = error.errorField.split(',')
+        if (errorFields.includes(column.property)) {
+          return 'epx-base-data-check__cell-error'
+        }
+      }
+    },
+    getFields () {
+      const { fieldConfigs = {}, hiddenFields = [] } = this.$configs
+      const linkArr = []
+      const labelFields = []
+      const busiKeyFields = []
+      let listFields = this.$configs.listFields
+
+      if (listFields) {
+        listFields.forEach(item => {
+          const name = item.attriName || item
+          if (name.includes('|')) {
+            const arr = name.split('|')
+            arr.pop()
+            var flags = []
+            arr.forEach((flag, index) => {
+              if (index > 0) {
+                flags.push(flags[index - 1] + '#' + flag.toLowerCase())
+              } else {
+                flags.push(flag.toLowerCase())
+              }
+            })
+            flags.forEach(flag => {
+              if (!linkArr.includes(flag)) {
+                linkArr.push(flag)
+              }
+            })
+          }
+        })
+      } else {
+        const fields = this.$meta.getAllFieldConfigs()
+          .filter((field) => {
+            if (field.attribute.isLabel === '1') {
+              labelFields.push(field)
+              return false
+            } else if (field.attribute.busiKey === '1') {
+              busiKeyFields.push(field)
+              return false
+            }
+            return true
+          })
+        // 数据质量问题、外部标签、业务主键、关联对象字段
+        listFields = [...labelFields, ...busiKeyFields, ...fields]
+      }
+      this.$http.get({
+        action: 'validateRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        metaId: this.$metaId,
+        link: linkArr.join(',')
+      })
+        .then(data => {
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: fieldConfigs,
+            fieldScope: data,
+            fields: listFields,
+            hiddenFields,
+            meta: this.$meta
+          })
+            .then(data => {
+              this.listFields = [{ attriName: 'ERROR_INFO', attriLabel: '数据质量问题', dataType: 'text', width: '200px', color: 'red' }, ...data]
+              if (this.linkAttrData && this.parentId) {
+                this.getData()
+              }
+            })
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    renderField (field, index) {
+      const { errors = [] } = this.$configs
+      return {
+        default: ({ row }) => {
+          if (field.attriName === 'ERROR_INFO') {
+            const error = errors.find(item => item.dataId === row[this.$metaKey])
+            if (error) return <font color="#e53131">{error.errorText}</font>
+            return null
+          } else if (field.newLine) {
+            return (
+              <el-tooltip effect="dark" disabled={field.showTooltip === false} content={row[field.attriName + '#'] || row[field.attriName]} placement="top">
+                <div class="epx-entity-list__table-cell" style={field.newLine ? { maxHeight: `${22 * field.lineNum + 'px'}`, whiteSpace: 'normal', display: 'block' } : ''}>
+                  <epx-entity-list-edit-field class={{ 'epx-entity-tree-list__sort-field': index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 }} fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                  { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                    <el-dropdown class="epx-entity-tree-list__sort" v-slots={{
+                      dropdown: () => (<el-dropdown-menu>
+                        {
+                          this.treeListOperates.map(item => (
+                            <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                          ))
+                        }
+                      </el-dropdown-menu>)
+                    }}>
+                      <span>
+                        <i class="el-icon-sort"></i>
+                      </span>
+
+                    </el-dropdown>
+                  ) }
+                </div>
+              </el-tooltip>
+            )
+          } else {
+            return (
+              <div class={['epx-entity-list__table-cell', { 'epx-entity-list__table-cell--detail': field.state === 'DETAIL' || field.state === 'READONLY' }]}>
+                <epx-entity-list-edit-field class={{ 'epx-entity-tree-list__sort-field': index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 }} fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                  <el-dropdown class="epx-entity-tree-list__sort" v-slots={{
+                    dropdown: () => (<el-dropdown-menu>
+                      {
+                        this.treeListOperates.map(item => (
+                          <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                        ))
+                      }
+                    </el-dropdown-menu>)
+                  }}>
+                    <span>
+                      <i class="el-icon-sort"></i>
+                    </span>
+
+                  </el-dropdown>
+                ) }
+              </div>
+            )
+          }
+        }
+      }
+    },
+    afterData () {
+      this.$emit('update-check-data')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.epx-base-data-check__cell-error {
+  background: #ffdfdf!important;
+  color: #e53131!important;
+  .epx-form-item__content {
+    color: #e53131!important;
+  }
+}
+</style>

package/src/base/entity-view/EntityViewFormItem.vue

@@ -0,0 +1,170 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import AddFormItemVue from '@epxing/components/src/add-form-item/AddFormItem.vue'
+export default {
+  name: 'epx-base-entity-view-form-item',
+  extends: AddFormItemVue,
+  data () {
+    return {
+      linkEntityList: []
+    }
+  },
+  computed: {
+    entityId () {
+      return this.$query.parentId || this.data.ENTITY
+    },
+    orderFields () {
+      const { SORT } = this.data
+      if (SORT) return JSON.parse(SORT)
+      return []
+    },
+    formatFields () {
+      return attriName => {
+        const { [attriName]: fields } = this.data
+        if (fields) return JSON.parse(fields)
+        return []
+      }
+    },
+    linkEntitys: {
+      get () {
+        const { LINK_ENTITYS } = this.data
+        if (LINK_ENTITYS) return LINK_ENTITYS.split(',')
+        return []
+      },
+      set (v) {
+        this.data.LINK_ENTITYS = v.join(',')
+      }
+    }
+  },
+  methods: {
+    initComponent () {
+      this.getLinkEntitys()
+    },
+    getLinkEntitys () {
+      this.$http.list({
+        entityId: 'FM_ENTITY_RELATION',
+        'scope.ENTITY_B': this.entityId
+      })
+        .then(data => {
+          this.linkEntityList = data.entitys
+        })
+    },
+    changeOrderFields (v) {
+      this.data.SORT = JSON.stringify(v)
+    },
+    changeFields (field, v) {
+      this.data[field] = JSON.stringify(v)
+    },
+    renderForm () {
+      let { labelWidthType, labelWidth, valueWidthType, valueWidth, labelFontSize, valueFontSize, lineSpace, mFormStyle, mFormPadding } = this.$configs
+      labelWidth = labelWidthType === 'auto' ? 'auto' : labelWidth
+      valueWidth = valueWidthType === 'auto' ? 'auto' : valueWidth
+      if (this.fieldsConfigs.length > 0 && this.loadForm) {
+        return (
+          <epx-table-form class="epx-add-form-item__content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} pageType={this.componentType} v-model={this.data} fieldRelation={this.fieldRelation} column={this.column} labelAlign={this.$configs.labelAlign} lineSpace={lineSpace} labelWidth={labelWidth} labelFontSize={labelFontSize} valueWidth={valueWidth} valueFontSize={valueFontSize} mFormStyle={mFormStyle} mFormPadding={mFormPadding} showRelyFlag={this.$configs.showRelyFlag !== false} valueRelyFlag={this.$configs.valueRelyFlag !== false} onChange-fields-configs={this.changeFieldsConfigs}
+            v-slots={{
+              default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                return fieldConfigs.attriName === 'SORT' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={this.entityId}
+                    functionList={[]}
+                    variableList={this.variableList}
+                    fieldConfigs={fieldConfigs}
+                  >
+                    <epx-visual-config-order-field metaId={this.entityId} showSubFlag={false} value={this.orderFields} onChangeConfigs={v => this.changeOrderFields(v)}></epx-visual-config-order-field>
+                  </epx-table-form-item>
+                ) : fieldConfigs.attriName === 'SCOPE' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={{ ...fieldConfigs, metaId: this.entityId }}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                  </epx-table-form-item>
+                ) : fieldConfigs.attriName === 'FIELDS' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+
+                    <epx-visual-config-list-field componentMetaId={this.entityId} showFieldWay={false} showSubFlag={false} fieldOptions={[{ key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' }, { key: 'attriLabel', label: '名称', type: 'text' }]} value={this.formatFields(fieldConfigs.attriName)} onChangeConfigs={v => this.changeFields(fieldConfigs.attriName, v)}></epx-visual-config-list-field>
+                  </epx-table-form-item>
+                ) : fieldConfigs.attriName === 'LINK_ENTITYS' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={this.entityId}
+                    functionList={[]}
+                    variableList={this.variableList}
+                    fieldConfigs={fieldConfigs}
+                  >
+                    <el-select v-model={this.linkEntitys} multiple placeholder="请选择关联对象">
+                      {
+                        this.linkEntityList.map(item => (
+                          <el-option
+                            key={item.ID}
+                            label={item.TITLE}
+                            value={item.FLAG}>
+                          </el-option>
+                        ))
+                      }
+                    </el-select>
+                  </epx-table-form-item>
+                ) : fieldConfigs.attriName === 'SEARCH_FIELDS' || fieldConfigs.attriName === 'LIST_FIELDS' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                    <epx-visual-config-field metaId={this.entityId} showSubFlag={false} value={this.formatFields(fieldConfigs.attriName)} onChangeConfigs={v => this.changeFields(fieldConfigs.attriName, v)}></epx-visual-config-field>
+                  </epx-table-form-item>
+                ) : (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                    rules={[{
+                      required: fieldConfigs.isRequired === '1' && fieldConfigs.state !== 'SEARCH',
+                      message: `${fieldConfigs.attriLabel}不能为空`
+                    }]}
+                  >
+                  </epx-table-form-item>
+                )
+              }
+            }}
+          ></epx-table-form>
+        )
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/base/entity-view/EntityViewSubList.vue

@@ -0,0 +1,149 @@
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import { mapGetters } from 'vuex'
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+const getLabel = (attriName, arr) => {
+  for (const item of arr) {
+    if (item.field === attriName) return item.text
+    if (item.children) {
+      const label = getLabel(attriName, item.children)
+      if (label) return label
+    }
+  }
+}
+export default {
+  name: 'epx-base-entity-view-sub-list',
+  extends: EntitySubList,
+  data () {
+    return {
+      linkEntityList: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    fieldStore () {
+      return this.getMetaViewFields(this.$query.id) || []
+    },
+    getFieldLabels () {
+      return (fieldStr) => {
+        if (fieldStr) {
+          const fields = JSON.parse(fieldStr)
+          return fields.map(field => {
+            if (field.attriLabel) return field.attriLabel
+            return getLabel(field.attriName || field, this.fieldStore)
+          }).join('、')
+        }
+        return ''
+      }
+    },
+    getSortFieldLabels () {
+      return (fieldStr) => {
+        if (fieldStr) {
+          const fields = JSON.parse(fieldStr)
+          return fields.map(field => {
+            return getLabel(field.attriName || field, this.fieldStore) + '-' + (field.sort === 'desc' ? '降序' : '升序')
+          }).join('、')
+        }
+        return ''
+      }
+    },
+    getLinkEntityLabel () {
+      return linkEntitys => {
+        if (linkEntitys) {
+          return linkEntitys.split(',').map(item => {
+            const link = this.linkEntityList.find(link => link.FLAG === item)
+            if (link) return link.TITLE
+            return item
+          }).join('、')
+        }
+        return ''
+      }
+    }
+  },
+  methods: {
+    getLinkEntitys () {
+      this.$http.list({
+        entityId: 'FM_ENTITY_RELATION',
+        'scope.ENTITY_B': this.$query.id
+      })
+        .then(data => {
+          this.linkEntityList = data.entitys
+        })
+    },
+    getFieldStore () {
+      if (!(this.fieldStore && this.fieldStore.length > 0)) {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.$query.id
+        })
+      }
+    },
+    renderField (field, index) {
+      return {
+        default: ({ row }) => {
+          if (field.attriName === 'FIELDS' || field.attriName === 'SEARCH_FIELDS' || field.attriName === 'LIST_FIELDS') {
+            return <div style={{ whiteSpace: 'pre-wrap' }}>{this.getFieldLabels(row[field.attriName])}</div>
+          } else if (field.attriName === 'SORT') {
+            return this.getSortFieldLabels(row[field.attriName])
+          } else if (field.attriName === 'LINK_ENTITYS') {
+            return this.getLinkEntityLabel(row[field.attriName])
+          } else if (field.newLine) {
+            return (
+              <el-tooltip effect="dark" disabled={field.showTooltip === false} content={row[field.attriName + '#'] || row[field.attriName]} placement="top">
+                <div class="epx-entity-list__table-cell" style={field.newLine ? { maxHeight: `${22 * field.lineNum + 'px'}`, whiteSpace: 'normal', display: 'block' } : ''}>
+                  <epx-entity-list-edit-field class={{ 'epx-entity-tree-list__sort-field': index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 }} fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                  { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                    <el-dropdown class="epx-entity-tree-list__sort" v-slots={{
+                      dropdown: () => (<el-dropdown-menu>
+                        {
+                          this.treeListOperates.map(item => (
+                            <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                          ))
+                        }
+                      </el-dropdown-menu>)
+                    }}>
+                      <span>
+                        <i class="el-icon-sort"></i>
+                      </span>
+
+                    </el-dropdown>
+                  ) }
+                </div>
+              </el-tooltip>
+            )
+          } else {
+            return (
+              <div class={['epx-entity-list__table-cell', { 'epx-entity-list__table-cell--detail': field.state === 'DETAIL' || field.state === 'READONLY' }]}>
+                <epx-entity-list-edit-field class={{ 'epx-entity-tree-list__sort-field': index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 }} fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+                { index === 0 && this.$configs.type === 'tree' && this.$configs.operateTreeListFlag && this.treeListOperates.length > 0 && (
+                  <el-dropdown class="epx-entity-tree-list__sort" v-slots={{
+                    dropdown: () => (<el-dropdown-menu>
+                      {
+                        this.treeListOperates.map(item => (
+                          <el-dropdown-item onClick={this.$handler.bind(this, item, row)}>{item.text}</el-dropdown-item>
+                        ))
+                      }
+                    </el-dropdown-menu>)
+                  }}>
+                    <span>
+                      <i class="el-icon-sort"></i>
+                    </span>
+
+                  </el-dropdown>
+                ) }
+              </div>
+            )
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.getLinkEntitys()
+    this.getFieldStore()
+  }
+
+}
+</script>

package/src/base/entity-view-config/BasicInfoDialog.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-dialog
+    class="dialog basic-info-dialog"
+    title="编辑基本信息"
+    width="520px"
+    :model-value="visible"
+    append-to-body
+    @close="$emit('update:visible', false)"
+  >
+    <el-form label-position="top" size="small">
+      <el-form-item label="视图名称" required>
+        <el-input v-model="form.name" placeholder="请输入视图名称"></el-input>
+      </el-form-item>
+      <el-form-item label="视图编码">
+        <el-input v-model="form.code" class="basic-info-dialog__mono" disabled></el-input>
+        <div class="basic-info-dialog__hint">视图编码、物理视图名、主对象创建后不可修改</div>
+      </el-form-item>
+      <el-form-item label="物理视图名">
+        <el-input v-model="form.dbTable" class="basic-info-dialog__mono" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="主对象">
+        <el-input :model-value="mainMeta.name" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="数据范围">
+        <div class="basic-info-dialog__scope">
+          <span class="basic-info-dialog__scope-text">{{ scopeSummary }}</span>
+          <el-button size="small" icon="el-icon-set-up" @click="scopeVisible = true">设置数据范围</el-button>
+        </div>
+        <div class="basic-info-dialog__hint">限定主对象「{{ mainMeta.name }}」进入视图的数据范围</div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button size="small" @click="$emit('update:visible', false)">取消</el-button>
+      <el-button type="primary" size="small" :loading="saving" :disabled="!form.name" @click="save">保存</el-button>
+    </template>
+
+    <epx-scope-drawer
+      v-if="mainMeta.id"
+      v-model="scopeParams"
+      v-model:visible="scopeVisible"
+      :meta-id="mainMeta.id"
+    ></epx-scope-drawer>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'epx-base-entity-view-config-basic-dialog',
+  props: {
+    visible: Boolean,
+    viewId: String,
+    system: String,
+    viewData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    mainMeta: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      form: { name: '', code: '', dbTable: '' },
+      scopeParams: [],
+      scopeVisible: false,
+      saving: false
+    }
+  },
+  computed: {
+    scopeSummary () {
+      return this.scopeParams.length ? `${this.scopeParams.length} 个过滤条件` : '全部数据（未设置过滤条件）'
+    }
+  },
+  watch: {
+    visible (value) {
+      if (value) {
+        this.form = {
+          name: this.viewData.NAME || '',
+          code: this.viewData.CODE || '',
+          dbTable: this.viewData.DB_TABLE || ''
+        }
+        try {
+          const scope = this.viewData.VIEW_SCOPE ? JSON.parse(this.viewData.VIEW_SCOPE) : null
+          this.scopeParams = (scope && scope.scopeParams) || []
+        } catch (e) {
+          this.scopeParams = []
+        }
+      }
+    }
+  },
+  methods: {
+    save () {
+      this.saving = true
+      const options = this.system ? { system: this.system } : {}
+      // 走 viewSave 动作（平铺参数）；code/dbTable/mainMetaId 创建后不可变，原值回传
+      this.$http.$post({
+        entityId: 'FM_ENTITY',
+        action: 'viewSave',
+        id: this.viewId,
+        name: this.form.name.trim(),
+        code: this.viewData.CODE || '',
+        dbTable: this.viewData.DB_TABLE || this.viewData.CODE || '',
+        mainMetaId: this.viewData.VIEW_ENTITY || '',
+        scope: this.scopeParams.length ? JSON.stringify({ scopeParams: this.scopeParams }) : ''
+      }, options).then(() => {
+        this.$message.success('保存成功')
+        this.$emit('update:visible', false)
+        this.$emit('saved')
+      }).catch(error => {
+        this.$message.error(error.message || '保存失败')
+      }).finally(() => {
+        this.saving = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-info-dialog {
+  &__mono {
+    :deep(input) {
+      font-family: ui-monospace, Menlo, monospace;
+    }
+  }
+  &__scope {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-3);
+  }
+  &__scope-text {
+    flex: 1;
+    min-width: 0;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    padding: 0 11px;
+    background: var(--epx-bg);
+    border: 1px solid var(--epx-border);
+    border-radius: var(--epx-radius-base);
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+  }
+  &__hint {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-disabled);
+    line-height: 1.5;
+    margin-top: 4px;
+  }
+}
+</style>