#

Junjie

15 小时以前 dbc7bc204f66c2dc7f71137bdf5848f612dce137

 src/main/webapp/views/index.html

@@ -509,45 +509,10 @@
      word-break: break-word;
    }

    @keyframes slideInRight {
      from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }

      to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes slideOutRight {
      from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }

      to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }

    @keyframes asideSkeletonShimmer {
      100% {
        transform: translateX(100%);
      }
    }

    .ai-drawer-layer {
      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15) !important;
      border-radius: 8px 0 0 8px !important;
      overflow: hidden;
      animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ai-drawer-layer-close {
      animation: slideOutRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .ai-assistant-btn {
@@ -556,6 +521,87 @@
      bottom: 40px;
      z-index: 9999;
      cursor: pointer;
    }

    .ai-assistant-mask {
      position: fixed;
      inset: 0;
      z-index: 9997;
      background: rgba(15, 23, 42, 0.10);
      backdrop-filter: blur(3px);
    }

    .ai-assistant-drawer {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9998;
      width: min(600px, 100vw);
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 12px 0 0 12px;
      box-shadow: -10px 0 28px rgba(15, 23, 42, 0.18);
      overflow: hidden;
    }

    .ai-drawer-header {
      height: 54px;
      padding: 0 16px 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(226, 232, 240, 0.92);
      background: rgba(248, 251, 255, 0.96);
      color: #243447;
      font-size: 15px;
      font-weight: 700;
      box-sizing: border-box;
    }

    .ai-drawer-close {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #5f7084;
      cursor: pointer;
      font-size: 16px;
    }

    .ai-drawer-close:hover {
      background: rgba(236, 243, 249, 0.92);
      color: #24405c;
    }

    .ai-drawer-frame {
      flex: 1;
      width: 100%;
      border: none;
      background: #fff;
    }

    .ai-mask-enter-active,
    .ai-mask-leave-active {
      transition: opacity .22s ease;
    }

    .ai-mask-enter,
    .ai-mask-leave-to {
      opacity: 0;
    }

    .ai-panel-enter-active,
    .ai-panel-leave-active {
      transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), opacity .22s ease;
    }

    .ai-panel-enter,
    .ai-panel-leave-to {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }

    @media (max-width: 1440px) {
@@ -776,17 +822,42 @@
    </span>
  </el-dialog>

  <div
      id="ai-assistant-btn"
      class="ai-assistant-btn"
      @mouseenter="showAiTip"
      @mouseleave="hideAiTip"
      @click="openAiAssistant">
  </div>
  <el-tooltip :content="t('common.aiAssistant')" placement="left">
    <div
        id="ai-assistant-btn"
        class="ai-assistant-btn"
        @click="openAiAssistant">
    </div>
  </el-tooltip>

  <transition name="ai-mask">
    <div
        v-if="aiAssistantVisible"
        class="ai-assistant-mask"
        @click="closeAiAssistant">
    </div>
  </transition>

  <transition name="ai-panel">
    <div
        v-if="aiAssistantVisible"
        class="ai-assistant-drawer">
      <div class="ai-drawer-header">
        <span>{{ t('common.aiAssistant') }}</span>
        <button type="button" class="ai-drawer-close" @click="closeAiAssistant">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <iframe
          v-if="aiAssistantMounted"
          class="ai-drawer-frame"
          :src="aiAssistantSrc">
      </iframe>
    </div>
  </transition>
</div>

<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/layer/layer.js"></script>
<script type="text/javascript" src="../static/js/common.js?v=20260309_i18n_fix1"></script>
<script type="text/javascript" src="../static/vue/js/vue.min.js"></script>
<script type="text/javascript" src="../static/vue/element/element.js"></script>
@@ -877,8 +948,9 @@
        menuSyncVersion: 0,
        menuSyncTimer: null,
        userName: localStorage.getItem(USER_STORAGE_KEY) || (window.WCS_I18N ? window.WCS_I18N.tl("管理员") : "管理员"),
        aiLayerIndex: null,
        aiTipIndex: null
        aiAssistantVisible: false,
        aiAssistantMounted: false,
        aiAssistantSrc: baseUrl + "/views/ai/diagnosis.html"
      };
    },
    computed: {
@@ -1020,10 +1092,6 @@
      if (this.collapseTimer) {
        clearTimeout(this.collapseTimer);
        this.collapseTimer = null;
      }
      if (this.aiTipIndex) {
        layer.close(this.aiTipIndex);
        this.aiTipIndex = null;
      }
    },
    methods: {
@@ -1831,72 +1899,14 @@
          document.exitFullscreen();
        }
      },
      showAiTip: function () {
        this.hideAiTip();
        this.aiTipIndex = layer.tips(this.t("common.aiAssistant"), "#ai-assistant-btn", {
          tips: [1, "#333"],
          time: -1
        });
      },
      hideAiTip: function () {
        if (this.aiTipIndex) {
          layer.close(this.aiTipIndex);
          this.aiTipIndex = null;
        }
      },
      openAiAssistant: function () {
        var that = this;
        var $layero;
        var $shade;

        this.hideAiTip();

        if (this.aiLayerIndex !== null && $("#layui-layer" + this.aiLayerIndex).length > 0) {
          $layero = $("#layui-layer" + this.aiLayerIndex);
          $shade = $("#layui-layer-shade" + this.aiLayerIndex);

          $shade.show().css("opacity", 0.1);
          $layero.show();
          $layero.removeClass("ai-drawer-layer-close");
          $layero.removeClass("ai-drawer-layer");
          void $layero.get(0).offsetWidth;
          $layero.addClass("ai-drawer-layer");
          return;
        if (!this.aiAssistantMounted) {
          this.aiAssistantMounted = true;
        }

        layer.open({
          type: 2,
          title: false,
          closeBtn: 0,
          shadeClose: false,
          shade: 0.1,
          area: ["600px", "100%"],
          offset: "r",
          anim: -1,
          isOutAnim: false,
          skin: "ai-drawer-layer",
          content: "ai/diagnosis.html",
          success: function (layero, index) {
            var shadeId;
            var $shadeEl;

            that.aiLayerIndex = index;
            shadeId = layero.attr("id").replace("layui-layer", "layui-layer-shade");
            $shadeEl = $("#" + shadeId);
            $shadeEl.css({
              "backdrop-filter": "blur(3px)",
              transition: "opacity 0.8s"
            });
            $shadeEl.off("click.aiAssistant").on("click.aiAssistant", function () {
              layero.addClass("ai-drawer-layer-close");
              $shadeEl.css("opacity", 0);
              setTimeout(function () {
                layero.hide();
                $shadeEl.hide();
              }, 400);
            });
          }
        });
        this.aiAssistantVisible = true;
      },
      closeAiAssistant: function () {
        this.aiAssistantVisible = false;
      },
      handleUserCommand: function (command) {
        if (command === "profile") {