优化

hejianhao

2025-03-31 a75ca8047bdf27861bba5752656b1ace1123437d

优化

 src/App.vue

@@ -6,9 +6,41 @@

<script>
export default {
  name: 'App',
  data() {
    return {
      windowWidth: window.innerWidth,
      isCollapse: false
    }
  },
  watch: {
    windowWidth(newWidth) {
      // 当窗口宽度小于某个值时，可以触发折叠
      if (newWidth < 1200 && !this.isCollapse) {
        this.isCollapse = true
        this.$store.commit('SET_ISFOLD', true)
      } else if (newWidth >= 1200 && this.isCollapse) {
        this.isCollapse = false
        this.$store.commit('SET_ISFOLD', false)
      }
    }
  },
  created() {
    // 初始化时检查窗口大小
    this.handleResize()
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  },
}
</script>

 src/components/Table/index.vue

 src/layouts/components/HeaderNav.vue

@@ -4,7 +4,7 @@
    <div class="user-logininfo">
      <div class="user-logininfo-icon">
        <!-- 折叠 -->
        <!-- <i @click="clickFold" class="el-icon-s-fold"></i> -->
        <i @click="clickFold" class="el-icon-s-fold"></i>
        <!-- 标签列表 -->
        <div class="tag-list-container">
          <div class="tag-list" v-for="tag in tagList" :key="tag.name">

 src/layouts/index.vue

@@ -3,23 +3,23 @@
    <!-- 判断是否在空白页打开 -->
    <template v-if="!isOneself">
      <div class="app-wrapper">
        <div class="left" :style="{ width: isFold ? '100px' : '258px' }">
        <div class="left" :style="{ width: isFold ? '0px' : '258px' }">
          <!-- 系统标题 -->
          <div class="system-title">
          <div v-if="!isFold" class="system-title">
            <div class="image">
              <img src="../assets/logo.jpg" alt="" srcset="" />
            </div>
            <div v-if="!isFold" class="title">实验室流程</div>
            <div class="title">实验室流程</div>
          </div>
          <!-- 左侧菜单 -->
          <div class="sidebar-container">
          <div v-if="!isFold" class="sidebar-container">
            <ElMenu />
          </div>
          <div v-if="!isFold" class="sidebar-left-bg"></div>
          <div v-if="!isFold" class="sidebar-bottom-bg"></div>
        </div>
        <!-- 右侧展示内容 -->
        <div class="main-container">
        <div class="main-container" :style="{ width: isFold ? '100%' : 'calc(100% - 258px)' }">
          <HeaderNav class="header-main" />
          <AppContent class="app-main" />
        </div>
@@ -95,6 +95,8 @@

    // 系统标题
    .system-title {
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
@@ -161,9 +163,9 @@
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease-in-out;

    .header-main {
      height: 70px;