项目重构

gaoluyang

5 天以前 c7566bba45e6f90594d36ec4b80ac4ff89f577ee

 src/layout/components/TagsView/index.vue

@@ -14,7 +14,6 @@
        :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        class="tags-view-item"
        :style="tagActiveStyle(tag)"
        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent="openMenu(tag, $event)"
      >
@@ -93,7 +92,6 @@

const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
const theme = computed(() => useSettingsStore().theme)
const tagsIcon = computed(() => useSettingsStore().tagsIcon)
const tagsViewPersist = computed(() => useSettingsStore().tagsViewPersist)
const tagsViewStyle = computed(() => useSettingsStore().tagsViewStyle)
@@ -139,14 +137,6 @@

function isActive(r) {
  return r.path === route.path
}

function tagActiveStyle(tag) {
  if (!isActive(tag) || tagsViewStyle.value !== 'card') return {}
  return {
    'background-color': theme.value,
    'border-color': theme.value
  }
}

function isAffix(tag) {
@@ -375,16 +365,16 @@
.tags-view-container {
  height: $tags-bar-height;
  width: 100%;
  background: var(--tags-bg, #fff);
  border-bottom: 1px solid var(--tags-item-border, #d8dce5);
  background: var(--tags-bg, var(--lims-surface));
  border-bottom: 1px solid var(--tags-item-border, var(--lims-divider));
  display: flex;
  align-items: center;
  overflow: hidden;

  $btn-width: 28px;
  $btn-color: #71717a;
  $btn-hover-bg: #f0f2f5;
  $btn-hover-color: #303133;
  $btn-hover-bg: #f2f7f6;
  $btn-hover-color: #1f2d2b;
  $btn-disabled-color: #c0c4cc;
  $divider: 1px solid var(--tags-item-border, #d8dce5);

@@ -427,13 +417,13 @@
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid var(--tags-item-border, #d8dce5);
      color: var(--tags-item-text, #495060);
      background: var(--tags-item-bg, #fff);
      border: 1px solid var(--tags-item-border, var(--lims-border));
      color: var(--tags-item-text, var(--lims-text-2));
      background: var(--tags-item-bg, var(--lims-surface));
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      border-radius: 3px;
      border-radius: var(--lims-radius-sm);
      text-decoration: none;
      vertical-align: middle;
      padding-top: 2px !important;
@@ -444,13 +434,14 @@
  }

  &:not(.tags-view-container--chrome) .tags-view-wrapper .tags-view-item.active {
    background-color: #42b983;
    color: #fff;
    border-color: #42b983;
    background-color: var(--sidebar-active-bg, #e4f2ef);
    color: var(--el-color-primary);
    border-color: var(--el-color-primary-light-7, #b6dedb);
    font-weight: 600;

    &::before {
      content: '';
      background: #fff;
      background: var(--el-color-primary);
      display: inline-block;
      width: 8px;
      height: 8px;