1、调整登录页及首页样式（暂未使用响应式布局，背景图片需压缩，页面加载慢） 2、新增大模型对话页面 3、新增菜单管理使用自定义icon功能 4、调整全...

zhaowei

2024-07-30 b68edf1ec5867dd2bd60ee64a205879093b5cf4f

 src/components/menu/SideMenu.vue

@@ -1,12 +1,14 @@
<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="200px"
    :collapsedWidth="collapsedWidth"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">

    <div id="menu-container">
      <logo/>
      <div class="nav-split-line"></div>
      <s-menu
        :collapsed="collapsed"
        :menu="menus"
@@ -16,21 +18,48 @@
        :mode="mode"
        :style="smenuStyle">
      </s-menu>
      <div class="nav-split-line"></div>
      <div class="avatar">
        <a-avatar :src="getAvatar()" @click="$router.push('/user/UserManagement')"/>
      </div>
    </div>
  </a-layout-sider>

    <a-tooltip placement="right" :mouseLeaveDelay="0">
      <template slot="title">
        {{collapsedWidth!==0?'收起':'展开'}}
      </template>
      <div id="response-line-container" ref="responseLineContainerRef" @click="handleMenuFoldOrNot">
        <template v-if="collapsedWidth!==0">
          <div id="response-line-0"></div>
          <div id="response-line-1"></div>
        </template>
        <template v-else>
          <div id="response-line-3"></div>
          <div id="response-line-4"></div>
        </template>
      </div>
    </a-tooltip>

  </a-layout-sider>
</template>

<script>
  import ALayoutSider from 'ant-design-vue/es/layout/Sider'
  import Logo from '../tools/Logo'
  import SMenu from './index'
  import { mixin, mixinDevice } from '@/utils/mixin.js'
  import { mapGetters } from 'vuex'
  import { getFileAccessHttpUrl } from '@/api/manage'

  export default {
    name: 'SideMenu',
    components: { ALayoutSider, Logo, SMenu },
    components: {  Logo, SMenu },
    mixins: [mixin, mixinDevice],
    data() {
      return {
        normalCollapsedWidth: 100,
        collapsedWidth: 100
      }
    },
    props: {
      mode: {
        type: String,
@@ -69,122 +98,254 @@
      }
    },
    methods: {
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      onSelect(obj) {
        this.$emit('menuSelect', obj)
      },
      onUpdateMenuTitle(obj) {
        this.$emit('updateMenuTitle', obj)
      },
      getAvatar() {
        return getFileAccessHttpUrl(this.avatar())
      },
      handleMenuFoldOrNot() {
        if (this.collapsedWidth !== 0) {
          this.collapsedWidth = 0
          this.$refs.responseLineContainerRef.style.opacity = 1
          document.querySelector('.sider').onmouseenter = () => false
          document.querySelector('.sider').onmouseleave = () => false
        } else {
          this.collapsedWidth = this.normalCollapsedWidth
          this.$refs.responseLineContainerRef.style.opacity = 0
          // 设置透明度后hover鼠标行为失效
          document.querySelector('.sider').onmouseenter = () => this.$refs.responseLineContainerRef.style.opacity = 1
          document.querySelector('.sider').onmouseleave = () => this.$refs.responseLineContainerRef.style.opacity = 0
        }
      }
    }
  }
</script>
<style lang="less" scoped>

  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  .sider {
    @scrollBarSize: 10px;

    ul.ant-menu {
    #menu-container {
      background-color: rgba(255, 255, 255, .34);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      border-radius: 12px;
      /*box-shadow: 2px 2px 7.7px 0 rgba(146, 159, 202, 0.19), 0 0 1px 1px rgba(255, 255, 255, 0.45) inset;*/
      padding: 10px;;

      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      &::-webkit-scrollbar {
        width: @scrollBarSize;
        height: @scrollBarSize;
      /deep/ .ant-menu {
        background-color: transparent;
        display: none;
      }

      & .-o-scrollbar {
        display: none;
      }

      /* 兼容IE */
      -ms-overflow-style: none;
      -ms-scroll-chaining: chained;
      -ms-content-zooming: zoom;
      -ms-scroll-rails: none;
      -ms-content-zoom-limit-min: 100%;
      -ms-content-zoom-limit-max: 500%;
      -ms-scroll-snap-type: proximity;
      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

      /* 定义滚动条轨道 */
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      /* 定义滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius: @scrollBarSize;
        background-color: #eee;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

        &:hover {
          background-color: #dddddd;
        width: 60px;
        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
          width: @scrollBarSize;
          height: @scrollBarSize;
          background-color: transparent;
          display: none;
        }

        &:active {
          background-color: #bbbbbb;
        & .-o-scrollbar {
          display: none;
        }

        /* 兼容IE */
        -ms-overflow-style: none;
        -ms-scroll-chaining: chained;
        -ms-content-zooming: zoom;
        -ms-scroll-rails: none;
        -ms-content-zoom-limit-min: 100%;
        -ms-content-zoom-limit-max: 500%;
        -ms-scroll-snap-type: proximity;
        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

        /* 定义滚动条轨道 */
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        /* 定义滑块 */
        &::-webkit-scrollbar-thumb {
          border-radius: @scrollBarSize;
          background-color: #eee;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

          &:hover {
            background-color: #dddddd;
          }

          &:active {
            background-color: #bbbbbb;
          }
        }
      }

      /deep/ .ant-menu-inline-collapsed > .ant-menu-item {
        padding: 0 !important;
        border-radius: 12px;


        a {
          text-align: center;
          border-radius: 12px;
        }
        .anticon {
          font-size: 25px;
        }

        /*导航栏叶子菜单按钮被选中后样式*/
        &.ant-menu-item-selected {
          background-color: transparent;
          a {
            color: rgba(0, 0, 0, 0.65)
          }
        }

        /*导航栏按钮被激活后样式*/
        &.ant-menu-item-active {
          background-color: #E7EBF6;
          a {
            color: rgba(0, 0, 0, 0.65)
          }
        }
      }

      /*导航栏非叶子菜单按钮被选中后样式*/
      /deep/ .ant-menu-vertical .ant-menu-submenu-selected {
        color: rgba(0, 0, 0, 0.65)
      }

      /*导航栏非叶子菜单按钮被激活后样式*/
      /deep/ .ant-menu-vertical .ant-menu-submenu-active {
        .ant-menu-submenu-title {
          background-color: #E7EBF6;
          color: rgba(0, 0, 0, 0.65);
        }
      }

      /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
        padding: 0 !important;
        text-align: center;
        border-radius: 12px;

        .anticon {
          font-size: 25px;
        }
      }

      .nav-split-line {
        width: 50px;
        height: 1px;
        background-color: #E5E5E5;
        border-radius: 12px;
        cursor: pointer;
        margin: 15px auto
      }

      .avatar {
        text-align: center;

        /deep/ .ant-avatar {
          cursor: pointer;
        }
      }
    }

    /** 暗色系滚动条样式 */
    &.dark ul.ant-menu {
      &::-webkit-scrollbar-thumb {
        background-color: #666666;
    #response-line-container {
      width: 12px;
      height: 26px;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      transition: all .2s ease;
      opacity: 0;

        &:hover {
          background-color: #808080;
      #response-line-0, #response-line-1 {
        width: 4px;
        height: 13px;
        background-color: #c6c6c6;
        left: 4px;
        position: absolute;
        transition: all .2s ease;
      }

      #response-line-3 {
        width: 4px;
        background-color: #c6c6c6;
        transform-origin: 50% 0%;
        transform: rotate(-17deg) translateY(1px);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 10px;
        height: 16px;
        left: 4px;
        top: 0;
        position: absolute;
      }

      #response-line-4 {
        width: 4px;
        background-color: #c6c6c6;
        transform-origin: 50% 100%;
        transform: rotate(17deg) translateY(-1px);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 10px;
        height: 16px;
        left: 4px;
        bottom: 0;
        position: absolute;
      }

      #response-line-0 {
        top: 0;
        transform-origin: 50% 0;
      }
      #response-line-1 {
        bottom: 0;
        transform-origin: 50% 100%;
      }

      &:hover {
        #response-line-0 {
          background-color: #fff;
          transform-origin: 50% 0%;
          transform: rotate(17deg) translateY(1px);
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          border-bottom-left-radius: 10px;
          height: 16px;
        }

        &:active {
          background-color: #999999;
        #response-line-1 {
          background-color: #fff;
          transform-origin: 50% 100%;
          transform: rotate(-17deg) translateY(-1px);
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          border-top-left-radius: 10px;
          height: 16px;
        }
        #response-line-3, #response-line-4 {
          background-color: #fff;
        }
      }

    }

    &:hover {
      #response-line-container {
        opacity: 1;
      }
    }
  }

  /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
</style>

<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
  // 选中首页的时候不显示背景颜色，只应用于左侧菜单
  .sider .ant-menu.ant-menu-root {
    & > .ant-menu-item:first-child {
      background-color: transparent;

      & > a, & > a:hover {
        color: rgba(0, 0, 0, 0.65);
      }

      &.ant-menu-item-selected {
        & > a, & > a:hover {
          color: @primary-color;
        }
      }
    }

    &.ant-menu-dark > .ant-menu-item:first-child {
      & > a, & > a:hover {
        color: rgba(255, 255, 255, 0.65);
      }

      &.ant-menu-item-selected {
        & > a, & > a:hover {
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->

<style scoped>
  #menu-container {
    position: absolute;
    top: calc(50% - 251.02px / 2);
  }
</style>