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

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

@@ -0,0 +1,661 @@
+<template>
+  <div class="view-config">
+    <div v-if="$configs.headFlag" class="view-config__head">
+      <span class="view-config__back" @click="backPage()"><i class="el-icon-arrow-left"></i></span>
+      <span class="view-config__head-title">对象视图配置{{ viewData.NAME ? ` · ${viewData.NAME}` : '' }}</span>
+      <span class="view-config__head-spacer"></span>
+      <el-button size="small" icon="el-icon-edit" :disabled="!viewLoaded" @click="basicVisible = true">编辑基本信息</el-button>
+      <el-button size="small" icon="el-icon-refresh" :disabled="!viewId" @click="loadAll">刷新</el-button>
+      <el-button type="primary" size="small" icon="el-icon-upload2" :disabled="!viewLoaded" :loading="publishing" @click="publish">发布</el-button>
+    </div>
+
+    <div v-if="!viewId" class="view-config__empty">
+      <i class="el-icon-warning-outline"></i>
+      <div>未指定视图，请通过页面配置 viewId 或页面参数 viewId / id 传入视图实体 id</div>
+    </div>
+
+    <div v-else v-loading="loading" class="view-config__body">
+      <div class="view-config__hero">
+        <div class="view-config__hero-ic"><i class="el-icon-s-grid"></i></div>
+        <div class="view-config__hero-main">
+          <div class="view-config__hero-name">
+            {{ viewData.NAME || '—' }}
+            <span v-if="viewData.CODE" class="view-config__hero-code">{{ viewData.CODE }}</span>
+            <el-tag size="small" :type="published ? 'success' : 'info'">{{ published ? '已发布' : '未发布' }}</el-tag>
+            <span v-if="viewLoaded && !published" class="view-config__hero-tip">配置变更后需重新发布生效</span>
+          </div>
+          <div class="view-config__hero-sub">
+            <span>主对象：</span>
+            <el-tag size="small">{{ mainMeta.name || '—' }}</el-tag>
+            <span v-if="viewData.DB_TABLE" class="view-config__hero-db">
+              物理视图：<code>{{ viewData.DB_TABLE }}</code>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="view-config__tabs">
+        <span
+          v-for="item in tabItems"
+          :key="item.key"
+          :class="['view-config__tab', { 'is-active': tab === item.key }]"
+          @click="switchTab(item.key)"
+        ><i :class="item.icon"></i>{{ item.label }}</span>
+      </div>
+
+      <epx-base-entity-view-config-field-panel
+        v-show="tab === 'fields'"
+        :view-id="viewId"
+        :system="system"
+        :fields="fields"
+        :sources="mainSources"
+        :candidates="mainCandidates"
+        :main-meta="mainMeta"
+        :meta-fields-map="metaFieldsMap"
+        :data-type-map="dataTypeMap"
+        :data-types="dataTypes"
+        :unions="enrichedUnions"
+        :all-sources="enrichedSources"
+        :union-mappings-map="unionMappingsMap"
+        @change="onFieldsChange"
+        @load-meta-fields="loadMetaFields"
+      ></epx-base-entity-view-config-field-panel>
+
+      <epx-base-entity-view-config-union-panel
+        v-show="tab === 'unions'"
+        :view-id="viewId"
+        :system="system"
+        :view-name="viewData.NAME"
+        :unions="enrichedUnions"
+        :union-candidates="unionCandidates"
+        :candidates-error="unionCandidatesError"
+        :sources="enrichedSources"
+        :candidates-map="candidatesMap"
+        :fields="fields"
+        :meta-fields-map="metaFieldsMap"
+        :data-type-map="dataTypeMap"
+        :mappings-map="unionMappingsMap"
+        :mapping-loading="unionMappingsLoading"
+        @change="onUnionsChange"
+        @state-change="onStateChange"
+        @change-mappings="loadUnionMappings"
+        @load-meta-fields="loadMetaFields"
+        @reload-candidates="loadUnionCandidates"
+      ></epx-base-entity-view-config-union-panel>
+
+      <epx-base-entity-view-config-relation-panel
+        v-if="tab === 'relation'"
+        :view-id="viewId"
+        :system="system"
+        :main-meta="mainMeta"
+        :sources="mainSources"
+        :unions="enrichedUnions"
+        :union-mappings-map="unionMappingsMap"
+        :all-sources="enrichedSources"
+        :candidates-map="candidatesMap"
+        :fields="fields"
+        :meta-fields-map="metaFieldsMap"
+        @change="onStateChange"
+        @load-meta-fields="loadMetaFields"
+      ></epx-base-entity-view-config-relation-panel>
+
+      <epx-base-entity-view-config-sql-panel
+        v-show="tab === 'sql'"
+        :sql="sql"
+        :loading="sqlLoading"
+        @refresh="loadSql"
+      ></epx-base-entity-view-config-sql-panel>
+    </div>
+
+    <epx-base-entity-view-config-basic-dialog
+      v-model:visible="basicVisible"
+      :view-id="viewId"
+      :system="system"
+      :view-data="viewData"
+      :main-meta="mainMeta"
+      @saved="loadView"
+    ></epx-base-entity-view-config-basic-dialog>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+import FieldPanel from './FieldPanel.vue'
+import UnionPanel from './UnionPanel.vue'
+import SqlPanel from './SqlPanel.vue'
+import RelationPanel from './RelationPanel.vue'
+import BasicInfoDialog from './BasicInfoDialog.vue'
+import { relTypeLabel } from './constants'
+
+export default {
+  name: 'epx-base-entity-view-config',
+  // 配置点
+  viewId: '', // 视图实体 id，缺省取页面参数 viewId / id（含路由参数与上级页面传入的参数）
+  system: '', // 视图所属业务系统编码，缺省为当前系统
+  headFlag: true, // 是否显示顶部操作栏
+  mixins: [component],
+  components: {
+    [FieldPanel.name]: FieldPanel,
+    [UnionPanel.name]: UnionPanel,
+    [SqlPanel.name]: SqlPanel,
+    [RelationPanel.name]: RelationPanel,
+    [BasicInfoDialog.name]: BasicInfoDialog
+  },
+  data () {
+    return {
+      loading: false,
+      tab: 'fields',
+      viewData: {},
+      mainMeta: {},
+      sources: [],
+      fields: [],
+      unions: [],
+      unionCandidates: [],
+      unionCandidatesError: '',
+      // 各聚合对象的列映射：unionId -> FM_VIEW_UNION_FIELD data 数组（字段列表角标与聚合面板共用）
+      unionMappingsMap: {},
+      unionMappingsLoading: false,
+      // 聚合对象（UNION）接口是否可用；旧版后端未部署 FM_VIEW_UNION 元数据时自动隐藏页签
+      unionEnabled: true,
+      candidatesMap: {},
+      metaFieldsMap: {},
+      metaFieldsLoading: {},
+      sql: '',
+      sqlLoading: false,
+      publishing: false,
+      basicVisible: false
+    }
+  },
+  computed: {
+    viewId () {
+      // 取 $query 而非 $route.query：嵌在步骤条/标签页/弹窗里时，参数由上级以 currentQuery 传入，并不在地址栏上
+      const { viewId, id } = this.$query
+      // 页面配置写成 {{viewId}} 但参数没传进来时，占位符会被原样保留，这里按未配置处理，继续往下取
+      const configViewId = /\{\{|\$\[|#\{/.test(this.$configs.viewId || '') ? '' : this.$configs.viewId
+      return configViewId || viewId || id || ''
+    },
+    system () {
+      return this.$configs.system || ''
+    },
+    viewLoaded () {
+      return !!this.viewData.ID
+    },
+    tabItems () {
+      const items = [
+        { key: 'fields', label: '字段配置', icon: 'el-icon-tickets' }
+      ]
+      if (this.unionEnabled) items.push({ key: 'unions', label: '聚合对象', icon: 'el-icon-copy-document' })
+      items.push(
+        { key: 'relation', label: '数据关系', icon: 'el-icon-share' },
+        { key: 'sql', label: 'SQL语句', icon: 'el-icon-monitor' }
+      )
+      return items
+    },
+    // 字段类型代码表（FM_DATA_TYPE）全量选项
+    dataTypes () {
+      return this.$store.getters.getCodeById('FM_DATA_TYPE') || []
+    },
+    // 字段类型代码表（FM_DATA_TYPE）：编号 -> 名称
+    dataTypeMap () {
+      const map = {}
+      this.dataTypes.forEach(code => { map[code.code] = code.name })
+      return map
+    },
+    published () {
+      return this.viewData.STATE === '1'
+    },
+    // 已配置聚合对象（UNION ALL 分支），名称/编码取自候选对象
+    enrichedUnions () {
+      return this.unions.map(entity => {
+        const data = entity.data || {}
+        const candidate = this.unionCandidates.find(item => item.metaId === data.UNION_META_ID) || {}
+        return {
+          id: data.ID,
+          code: data.UNION_CODE,
+          metaId: data.UNION_META_ID,
+          metaName: candidate.name || data.UNION_CODE,
+          metaCode: candidate.code || '',
+          scope: data.UNION_SCOPE || '',
+          sort: data.SORT || ''
+        }
+      })
+    },
+    enrichedSources () {
+      return this.sources.map(entity => {
+        const data = entity.data || {}
+        const ownerCode = data.OWNER_CODE || 'MAIN'
+        // 关联候选按所属段的主对象解析：主段为视图主对象，聚合段为该分支对象
+        const union = ownerCode === 'MAIN'
+          ? null
+          : this.enrichedUnions.find(item => (item.code || '').toUpperCase() === ownerCode.toUpperCase())
+        const ownerMetaId = ownerCode === 'MAIN' ? this.viewData.VIEW_ENTITY : (union && union.metaId)
+        const candidate = (this.candidatesMap[ownerMetaId] || []).find(item => item.flag === data.REL_FLAG) || {}
+        return {
+          id: data.ID,
+          code: data.SOURCE_CODE,
+          // 源名称：用户可自定义（SOURCE_NAME），默认关联名称（如「所属组织」），而不是关联对象名称
+          name: data.SOURCE_NAME || candidate.title || candidate.relatedName || data.SOURCE_CODE,
+          metaName: candidate.relatedName || '',
+          metaCode: candidate.relatedCode || '',
+          metaId: data.SOURCE_META_ID,
+          relType: data.REL_TYPE || candidate.relType || '',
+          relTypeLabel: relTypeLabel(data.REL_TYPE || candidate.relType) || '关联',
+          flag: data.REL_FLAG,
+          title: candidate.title || '',
+          aggScope: data.AGG_SCOPE || '',
+          // 一对多源「前 N 条」限定（TOP_ORDER 为排序 JSON），数据关系页签可编辑
+          topN: data.TOP_N || '',
+          topOrder: data.TOP_ORDER || '',
+          ownerCode,
+          // 保存时原样回传的字段（OWNER_CODE 创建后不可变，空值不能改提交为 MAIN）
+          rawOwnerCode: data.OWNER_CODE || '',
+          rawName: data.SOURCE_NAME || ''
+        }
+      })
+    },
+    // 主段关联源（OWNER_CODE 空/MAIN）；聚合段的源只在「聚合对象」页签使用
+    mainSources () {
+      return this.enrichedSources.filter(source => source.ownerCode === 'MAIN')
+    },
+    mainCandidates () {
+      return this.candidatesMap[this.viewData.VIEW_ENTITY] || []
+    }
+  },
+  watch: {
+    viewId: {
+      handler (value) {
+        if (value) this.loadAll()
+      },
+      immediate: true
+    },
+    unionEnabled (value) {
+      if (!value && this.tab === 'unions') this.tab = 'fields'
+    }
+  },
+  methods: {
+    requestOptions () {
+      return this.system ? { system: this.system } : {}
+    },
+    switchTab (key) {
+      this.tab = key
+      if (key === 'sql' && !this.sql) this.loadSql()
+    },
+    async loadAll () {
+      this.loading = true
+      this.$store.dispatch({ type: 'ADD_LIST', key: 'FM_DATA_TYPE' })
+      try {
+        await this.loadView()
+        await Promise.all([
+          this.loadMainMeta(),
+          this.loadSources(),
+          this.loadFields(),
+          this.loadUnions(),
+          this.loadUnionCandidates()
+        ])
+        await Promise.all([this.loadAllCandidates(), this.loadAllMetaFields(), this.loadAllUnionMappings()])
+      } catch (error) {
+        if (error && error.message) this.$message.error(error.message)
+      } finally {
+        this.loading = false
+      }
+      if (this.tab === 'sql') this.loadSql()
+    },
+    loadView () {
+      const prevState = this.viewData.STATE
+      return this.$http.$post({
+        entityId: 'FM_ENTITY',
+        action: 'viewGet',
+        id: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.viewData = (data && data.bean && data.bean.data) || {}
+        // 配置保存/删除后后端自动将 STATE 置 0，此处提示用户重新发布
+        if (prevState === '1' && this.viewData.STATE === '0') {
+          this.$message.info('配置已变更，视图需重新发布后生效')
+        }
+      })
+    },
+    loadMainMeta () {
+      const metaId = this.viewData.VIEW_ENTITY
+      if (!metaId) return Promise.resolve()
+      // 走 store ADD_META：返回带 name/code 的 Meta 实例（带缓存，按 metaId 全局解析）；
+      // getSimpleMeta 只返回 code/id 不含 name，故不用
+      return this.$store.dispatch({ type: 'ADD_META', metaId }).then(meta => {
+        this.mainMeta = {
+          id: metaId,
+          name: (meta && (meta.name || meta.label)) || '主对象',
+          code: (meta && meta.code) || ''
+        }
+      }).catch(() => {
+        this.mainMeta = { id: metaId, name: '主对象', code: '' }
+      })
+    },
+    loadCandidates (metaId) {
+      if (!metaId || this.candidatesMap[metaId]) return Promise.resolve()
+      return this.$http.$post({
+        entityId: 'FM_VIEW_SOURCE',
+        action: 'relationCandidates',
+        mainMetaId: metaId
+      }, this.requestOptions()).then(data => {
+        this.candidatesMap[metaId] = (data && data.list) || []
+      })
+    },
+    // 主对象 + 各聚合对象的关联候选（聚合段添加关联源用）
+    loadAllCandidates () {
+      const metaIds = [this.viewData.VIEW_ENTITY, ...this.unions.map(entity => (entity.data || {}).UNION_META_ID)]
+      return Promise.all(metaIds.filter(Boolean).map(metaId => this.loadCandidates(metaId)))
+    },
+    loadSources () {
+      return this.$http.$post({
+        entityId: 'FM_VIEW_SOURCE',
+        action: 'list',
+        viewMetaId: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.sources = (data && data.list) || []
+      })
+    },
+    loadFields () {
+      return this.$http.$post({
+        entityId: 'FM_VIEW_FIELD',
+        action: 'list',
+        viewMetaId: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.fields = ((data && data.list) || []).map(entity => ({ ...(entity.data || {}) }))
+      })
+    },
+    loadUnions () {
+      return this.$http.$post({
+        entityId: 'FM_VIEW_UNION',
+        action: 'list',
+        viewMetaId: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.unions = (data && data.list) || []
+        this.unionEnabled = true
+      }).catch(() => {
+        // 后端未部署聚合对象元数据（接口权限未定义等）时降级：隐藏页签，不阻塞其余配置
+        this.unions = []
+        this.unionEnabled = false
+      })
+    },
+    loadUnionCandidates () {
+      return this.$http.$post({
+        entityId: 'FM_VIEW_UNION',
+        action: 'objectCandidates',
+        viewMetaId: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.unionCandidates = (data && data.list) || []
+        this.unionCandidatesError = ''
+      }).catch(error => {
+        // 记录失败原因（如接口权限未绑定），添加弹窗里展示，不阻塞其余配置
+        this.unionCandidates = []
+        this.unionCandidatesError = (error && error.message) || '候选对象加载失败'
+      })
+    },
+    loadUnionMappings (unionId) {
+      if (!unionId) return Promise.resolve()
+      return this.$http.$post({
+        entityId: 'FM_VIEW_UNION_FIELD',
+        action: 'listMappings',
+        unionId
+      }, this.requestOptions()).then(data => {
+        this.unionMappingsMap[unionId] = ((data && data.list) || []).map(entity => ({ ...(entity.data || {}) }))
+      }).catch(() => {
+        this.unionMappingsMap[unionId] = []
+      })
+    },
+    loadAllUnionMappings () {
+      const unionIds = this.unions.map(entity => (entity.data || {}).ID).filter(Boolean)
+      // 整体重建，顺带清掉已删分支的缓存
+      this.unionMappingsMap = {}
+      if (!unionIds.length) return Promise.resolve()
+      this.unionMappingsLoading = true
+      return Promise.all(unionIds.map(unionId => this.loadUnionMappings(unionId))).finally(() => {
+        this.unionMappingsLoading = false
+      })
+    },
+    loadMetaFields (metaId, viaUnion) {
+      if (!metaId || this.metaFieldsMap[metaId]) return Promise.resolve()
+      if (this.metaFieldsLoading[metaId]) return this.metaFieldsLoading[metaId]
+      const request = viaUnion
+        ? { entityId: 'FM_VIEW_UNION', action: 'objectFields', metaId }
+        : { entityId: 'FM_VIEW_FIELD', action: 'sourceFields', metaId }
+      const promise = this.$http.$post(request, this.requestOptions()).then(data => {
+        this.metaFieldsMap[metaId] = (data && data.list) || []
+      }).finally(() => {
+        delete this.metaFieldsLoading[metaId]
+      })
+      this.metaFieldsLoading[metaId] = promise
+      return promise
+    },
+    loadAllMetaFields () {
+      const metaIds = [this.viewData.VIEW_ENTITY, ...this.sources.map(entity => (entity.data || {}).SOURCE_META_ID)]
+      const unionMetaIds = this.unions.map(entity => (entity.data || {}).UNION_META_ID)
+      return Promise.all([
+        ...metaIds.filter(Boolean).map(metaId => this.loadMetaFields(metaId)),
+        ...unionMetaIds.filter(Boolean).map(metaId => this.loadMetaFields(metaId, true))
+      ])
+    },
+    // 字段保存可能触发后端自动登记关联源，一并刷新源列表
+    onFieldsChange () {
+      this.sql = ''
+      this.loadFields()
+      this.loadSources().then(() => this.loadAllMetaFields())
+      this.loadView()
+    },
+    onUnionsChange () {
+      this.sql = ''
+      Promise.all([this.loadUnions(), this.loadSources()])
+        .then(() => Promise.all([this.loadAllCandidates(), this.loadAllMetaFields(), this.loadAllUnionMappings()]))
+      this.loadView()
+    },
+    // 聚合列映射变更：映射保存可能触发后端自动登记本段关联源
+    onStateChange () {
+      this.sql = ''
+      this.loadSources().then(() => this.loadAllMetaFields())
+      this.loadView()
+    },
+    loadSql () {
+      this.sqlLoading = true
+      this.$http.$post({
+        entityId: 'FM_ENTITY',
+        action: 'viewPreview',
+        viewMetaId: this.viewId
+      }, this.requestOptions()).then(data => {
+        this.sql = (data && data.sql) || ''
+      }).catch(error => {
+        this.sql = ''
+        this.$message.error(error.message || 'SQL 预览失败')
+      }).finally(() => {
+        this.sqlLoading = false
+      })
+    },
+    publish () {
+      this.$confirm(
+        `发布将执行 CREATE OR REPLACE VIEW 并注册视图字段，发布后「${this.viewData.NAME}」可作为对象查询，确定发布吗？`,
+        '发布视图',
+        { type: 'warning' }
+      ).then(() => {
+        this.publishing = true
+        this.$http.$post({
+          entityId: 'FM_ENTITY',
+          action: 'viewPublish',
+          id: this.viewId
+        }, this.requestOptions()).then(() => {
+          this.$message.success('发布成功')
+          this.loadView()
+        }).catch(error => {
+          this.$message.error(error.message || '发布失败')
+        }).finally(() => {
+          this.publishing = false
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.view-config {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--epx-bg);
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: var(--epx-space-2);
+    padding: var(--epx-space-3) 20px;
+    background: var(--epx-bg-card);
+    border-bottom: 1px solid var(--epx-border);
+    flex: 0 0 auto;
+  }
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--epx-radius-base);
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    font-size: var(--epx-font-size-l);
+    &:hover {
+      @include font_color_primary;
+      @include bg_color_primary(0.08);
+    }
+  }
+  &__head-title {
+    font-size: var(--epx-font-size-l);
+    font-weight: 700;
+    color: var(--color-text-title);
+  }
+  &__head-spacer {
+    flex: 1;
+  }
+  &__empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--epx-space-3);
+    color: var(--color-text-assistant);
+    font-size: var(--epx-font-size-base);
+    i {
+      font-size: 40px;
+      color: var(--color-text-disabled);
+    }
+  }
+  &__body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px 20px 20px;
+    display: flex;
+    flex-direction: column;
+    @include scroll-bar;
+  }
+  &__hero {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 22px;
+    background: var(--epx-bg-card);
+    border-radius: var(--epx-radius-l);
+    box-shadow: var(--epx-shadow-s);
+    flex: 0 0 auto;
+  }
+  &__hero-ic {
+    width: 46px;
+    height: 46px;
+    border-radius: var(--epx-radius-l);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    flex: 0 0 auto;
+    @include bg_color_primary;
+    @include box_shadow_primary(0, 5px, 13px, 0, 0.26);
+  }
+  &__hero-main {
+    min-width: 0;
+  }
+  &__hero-name {
+    font-size: var(--epx-font-size-xl);
+    font-weight: 800;
+    color: var(--color-text-title);
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    flex-wrap: wrap;
+  }
+  &__hero-tip {
+    font-size: var(--epx-font-size-s);
+    font-weight: 400;
+    color: #d9822b;
+  }
+  &__hero-code {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: var(--epx-font-size-s);
+    font-weight: 600;
+    border-radius: var(--epx-radius-base);
+    padding: 2px 9px;
+    @include font_color_primary;
+    @include bg_color_primary(0.08);
+    @include border_primary(1px, null, solid, 0.25);
+  }
+  &__hero-sub {
+    font-size: var(--epx-font-size-s);
+    color: var(--color-text-secondary);
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+  &__hero-db {
+    margin-left: var(--epx-space-3);
+    color: var(--color-text-assistant);
+    code {
+      font-family: ui-monospace, Menlo, monospace;
+      color: var(--color-text-secondary);
+    }
+  }
+  &__tabs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 14px 0;
+    background: var(--epx-bg-card);
+    border-radius: var(--epx-radius-l);
+    box-shadow: var(--epx-shadow-s);
+    padding: 6px;
+    flex: 0 0 auto;
+  }
+  &__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    height: 38px;
+    padding: 0 20px;
+    border-radius: var(--epx-radius-base);
+    font-size: var(--epx-font-size-base);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all 0.12s;
+    &:hover {
+      @include font_color_primary;
+      @include bg_color_primary(0.06);
+    }
+    &.is-active {
+      color: #fff;
+      font-weight: 600;
+      @include bg_color_primary;
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>