AIManage/src/App.vue

<template>
  <el-config-provider :locale="locale" :size="size">
    <!-- 开启水印 -->
    <el-watermark v-if="watermarkEnabled" :font="{ color: fontColor }" :content="defaultSettings.watermarkContent"
      class="wh-full">
      <router-view />
    </el-watermark>
    <!-- 关闭水印 -->
    <router-view v-else />
  </el-config-provider>
</template>

<script setup lang="ts">
import { useAppStore, useSettingsStore } from "@/store";
import defaultSettings from "@/settings";
import { ThemeEnum } from "@/enums/ThemeEnum";
import { SizeEnum } from "@/enums/SizeEnum";

const appStore = useAppStore();
const settingsStore = useSettingsStore();

const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size as SizeEnum);
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);

// 明亮/暗黑主题水印字体颜色适配
const fontColor = computed(() => {
  return settingsStore.theme === ThemeEnum.DARK
    ? "rgba(255, 255, 255, .15)"
    : "rgba(0, 0, 0, .15)";
});
</script>
<style lang="scss">
.router-link-active .el-menu-item {
  background-color: #EEF3FB;
  border-right: solid 3px var(--el-color-primary);
}

.table-container .el-form-item--default {
  margin-bottom: 0px !important;
}

.el-table__header {
  th {
    background-color: #edebeb6e !important;
  }
}

.el-pagination {
  justify-content: end;
}

.scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: rgb(1, 169, 255);
  border-radius: 4px;
}

.lf-ai-node,
.lf-element-text {
  cursor: pointer !important;
}

.card-footer {
  z-index: 99;
}

.command {
  cursor: pointer;
}

.blue {
  color: var(--el-color-primary);
}
</style>

<style lang="scss">
html.dark {
  .dashboard-container {
    .top-row1 {
      .top-row {
        .div-title {
          color: #3399ff;
        }

        .div-num {
          color: #aaa
        }
      }

    }

    .top-row2 {
      .dev-item {
        .el-card {
          background: #2B3553;

          .dev-title {
            svg * {
              fill: #fff !important;
            }
          }

          .el-card__body {
            background: #2B3553;
            color: #aaa;
          }
        }
      }

    }

    .right-panel {
      .top-row2.notice-card {
        .el-card__header {
          border-bottom: 1px solid #5e6572;

          div {
            color: #fff !important;
          }
        }

        .notice-item {
          .row-1 {
            color: #aaa !important;
          }

          .row-2 {
            border-bottom: 1px solid #5e6572 !important;
          }
        }
      }

    }
    .proc-card{
      .el-card__header{
        .row2-top{
          div{
            color:#fff !important;
          }
        }
      }
      &.model-proc{
        .el-card__body{
          background-image: url(images/procbg.png) !important;
          background-size: 100% 100% !important;
        }
      }
      .el-card__body{
        background: transparent;
        
        background-size: 100% 100%;
        color:#aaa;
        box-shadow: none;
        .model-flow .card-item .div-img{
          background: transparent;
        }
        .model-flow .card-item.is-active .div-img{
          background: #3399ff;
        }
        .model-flow2 .card-item .div-img{
          background: transparent;
        }
        .model-flow2 .card-item.is-active .div-img{
          background: #3399ff;
        }
        .el-badge__content--danger{
          background: #6F89A6;
          width: 24px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          border-radius: 12px;
        }
      }
    }
    .proc-card.server-status{
      background: #242B43;
      .el-card__header{
        .row2-top{
          div{
            color:#fff !important;
          }
        }
      }
    }
  }
  .jv-container.jv-light{
    background: #242B43;
  }
  .add-report .row-norm .el-form-item__content{
    background: #242B43;
  }
  .add-report .div-nav-header{
    color:#fff;
  }
}
</style>