自动化立体仓库 - WMS系统
#
Junjie
15 小时以前 b9dc5699e4e999bd8f40ef1025791d9e18a074f4
src/main/webapp/views/index.html
@@ -47,6 +47,28 @@
    button:hover {
      background-color: #0069d9;
    }
    /* AI助手抽屉动画 */
    @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; }
    }
    .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;
    }
  </style>
</head>
<body class="layui-layout-body">
@@ -107,6 +129,10 @@
    <span class="pull-right">Version 1.0.0</span>
  </div>
</div>
<!-- 右下角SVG动画 -->
<div id="ai-assistant-btn" style="position: fixed; bottom: 40px; right: 20px; z-index: 9999; cursor: pointer;">
</div>
<!--初始化加载层-->
@@ -181,6 +207,15 @@
<script>
  console.log('%c 中扬立库平台 %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');
  $(function () {
    if ("" === localStorage.getItem('token')) {
      top.location.href = baseUrl + "/login";
    }
  });
  $(function () {
    // 注入AI助手图标
    $('#ai-assistant-btn').html(getAiIconHtml(60, 60));
    if ("" === localStorage.getItem('token')) {
      top.location.href = baseUrl + "/login";
    }
@@ -265,6 +300,72 @@
    var url = logout.getAttribute('href');
    logout.setAttribute('href', baseUrl + "/login");
    // AI助手弹窗索引
    var aiLayerIndex = null;
    // AI助手图标悬浮提示
    $('#ai-assistant-btn').on('mouseenter', function(){
      this.index = layer.tips('AI助手', this, {
        tips: [1, '#333'], // 上方显示,深色背景
        time: -1 // 不自动关闭
      });
    }).on('mouseleave', function(){
      layer.close(this.index);
    }).on('click', function () {
      // 如果已经打开过且未销毁,直接显示
      if (aiLayerIndex !== null && $('#layui-layer' + aiLayerIndex).length > 0) {
        var $layero = $('#layui-layer' + aiLayerIndex);
        var $shade = $('#layui-layer-shade' + 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;
      }
      layer.open({
        type: 2,
        title: false, // 隐藏默认标题栏,更简洁
        closeBtn: 0, // 隐藏关闭按钮,点击遮罩关闭
        shadeClose: false, // 改为手动控制关闭,以便播放动画
        shade: 0.1,
        area: ['600px', '100%'],
        offset: 'r', // 右侧悬浮
        anim: -1, // 禁用默认动画,使用CSS动画
        isOutAnim: false,
        skin: 'ai-drawer-layer', // 自定义皮肤
        content: 'ai/diagnosis.html',
        success: function(layero, index){
          aiLayerIndex = index; // 记录索引
          // 背景模糊效果
          var shadeId = layero.attr('id').replace('layui-layer', 'layui-layer-shade');
          var $shade = $('#' + shadeId);
          $shade.css({
            'backdrop-filter': 'blur(3px)',
            'transition': 'opacity 0.8s'
          });
          // 点击遮罩关闭(带动画)
          $shade.on('click', function() {
            layero.addClass('ai-drawer-layer-close');
            $shade.css('opacity', 0);
            setTimeout(function(){
              // layer.close(index); // 不销毁,改为隐藏
              layero.hide();
              $shade.hide();
            }, 400);
          });
        }
      });
    });
  });
</script>
<script type="text/html" id="menuTpl">