menu调整

YM

2024-04-17 1ed69aab3d1c57f5096f57c8d77b396b0c5babe4

 src/views/home.vue

@@ -1,280 +1,175 @@
<template>
  <div class="homeBox">
    <div class="herderBox">
      <p>文件</p>
      <div class="viewChangeBox">
        <el-icon :size="16" v-if="viewMode == 0" @click="setViewMode"><Calendar /></el-icon>
        <el-icon :size="16" v-if="viewMode == 1" @click="setViewMode"><Menu /></el-icon>
    <div class="headerBox">
      <p>数字教材平台</p>
      </div>
      <div class="search">
        <el-input v-model="searchKey" size="small" placeholder="关键字搜索">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
    <div class="contentBox">
      <div class="menuBox">
        <div
          :class="['menuItem', activeMenu == index ? 'active' : '']"
          v-for="(item, index) in menuData"
          :key="index"
          @click="menuItemClick(index)"
        >
          <div class="menuIcon imgBox">
            <img :src="item.icon" />
          </div>
          <p>{{ item.name }}</p>
      </div>
    </div>
      <div class="pageBox"></div>
    <div class="toolBox">
      <div class="checkBox" v-if="viewMode == 0">
        <el-checkbox
          v-model="checkBoxState.check"
          :indeterminate="checkBoxState.indeterminate"
          @change="handleCheckAllChange"
        />
        <span class="checkText">{{
          checkBoxState.selectCount > 0
            ? `已选 ${checkBoxState.selectCount} 项`
            : `共 ${checkBoxState.totalCount} 项`
        }}</span>
      </div>
      <div class="sortBox" v-if="viewMode == 0">
        <el-dropdown trigger="click" @command="sortChange">
          <span class="sortText">
            <el-icon :size="16"><Sort /></el-icon>
            <span>
              按{{ sortState.fields[sortState.selectFieldIndex].name
              }}{{ sortState.types[sortState.selectTypeIndex].name }}排序
            </span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in sortState.fields"
                :key="item.value"
                :command="'fields.' + item.value"
              >
                <p>
                  <span>
                    <el-icon v-if="sortState.selectFieldIndex == index" :size="16" color="#409EFF">
                      <Check />
                    </el-icon>
                  </span>
                  <span>{{ item.name }}</span>
                </p>
              </el-dropdown-item>
              <el-dropdown-item
                v-for="(item, index) in sortState.types"
                :key="item.value"
                :divided="index == 0"
                :command="'types.' + item.value"
              >
                <p>
                  <span>
                    <el-icon v-if="sortState.selectTypeIndex == index" :size="16" color="#409EFF">
                      <Check />
                    </el-icon>
                  </span>
                  <span>{{ item.name }}</span>
                </p>
              </el-dropdown-item>
            </el-dropdown-menu>
        <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>Navigator One</span>
          </template>
        </el-dropdown>
            <el-menu-item-group>
              <template #title><span>Group One</span></template>
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title><span>item four</span></template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <template #title>Navigator Two</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <template #title>Navigator Three</template>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <template #title>Navigator Four</template>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="fileList">
      <div v-if="viewMode == 0" class="blockBox">
        <div class="fileItem" v-for="item in tableData">
          <div class="iconBox">
            <img :src="item.img" alt="" />
          </div>
          <p class="name">{{ item.name }}</p>
          <p class="time">{{ item.createDate }}</p>
        </div>
      </div>
      <el-table v-if="viewMode == 1" :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="80" />
        <el-table-column prop="name" label="名称" sortable />
        <el-table-column prop="createDate" label="创建时间" width="200" sortable />
        <el-table-column prop="size" label="大小" width="200" sortable />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Check } from '@element-plus/icons-vue'
import { useRouter, RouterView } from 'vue-router'
const router = useRouter()
import { ref, reactive, watch } from 'vue'
import mulu from '@/assets/images/menu/mulu.png'
import biji from '@/assets/images/menu/biji.png'
import ziyuan from '@/assets/images/menu/ziyuan.png'
import zhishitupu from '@/assets/images/menu/zhishitupu.png'
import jietu from '@/assets/images/menu/jietu.png'
import biaoqian from '@/assets/images/menu/biaoqian.png'
import topbg from '@/assets/images/header/top-bg.png'

// 搜索
const searchKey = ref('')

// 选择框
const checkBoxState = reactive({
  selectCount: 0,
  totalCount: 0,
  check: false,
  indeterminate: false
})

const handleCheckAllChange = (val) => {
  if (val) {
    checkBoxState.check = true
  } else {
    checkBoxState.check = false
  }
  checkBoxState.indeterminate = false
}

// 排序
const sortState = reactive({
  fields: [
// 菜单
const menuData = reactive([
    {
      name: '名称',
      value: 'Name'
    name: '目录',
    icon: mulu
    },
    {
      name: '创建时间',
      value: 'CreateDate'
    name: '笔记',
    icon: biji
    },
    {
      name: '文件大小',
      value: 'Size'
    }
  ],
  types: [
    {
      name: '升序',
      value: 'Asc'
    name: '资源',
    icon: ziyuan
    },
    {
      name: '降序',
      value: 'Desc'
    name: '知识图谱',
    icon: zhishitupu
  },
  {
    name: '截图',
    icon: jietu
  },
  {
    name: '标签',
    icon: biaoqian
    }
  ],
  selectFieldIndex: 1,
  selectTypeIndex: 1
})
])

const sortChange = (command) => {
  const type = command.split('.')[0]
  const data = command.split('.')[1]
  if (type == 'fields') {
    sortState.selectFieldIndex = sortState.fields.findIndex((item) => item.value == data)
  } else {
    sortState.selectTypeIndex = sortState.types.findIndex((item) => item.value == data)
  }
// 选中菜单
const activeMenu = ref(0)

// // 监听路由变化，默认选中菜单
// watch(
//   () => router.currentRoute.value,
//   (newRoute) => {
//     console.log(newRoute.path)

//     const index = menuData.findIndex((item) => item.router == newRoute.path)
//     activeMenu.value = index > -1 ? index : 0
//   }
// )

// 菜单点击
const menuItemClick = (index) => {
  activeMenu.value = index
}

// 视图模式 0:块状视图  1:表格视图
const viewMode = ref(0)
const setViewMode = () => {
  if (viewMode.value == 0) {
    viewMode.value = 1
  } else {
    viewMode.value = 0
  }
}

// 文件列表
const tableData = ref([])
// 右侧工具
const isCollapse = ref(false)
</script>

<style lang="less">
.homeBox {
  width: 100%;
  height: 100%;
  padding: 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .herderBox {
    overflow: hidden;
    margin-bottom: 20px;
  .headerBox {
    height: 48px;
    background-image: url('@/assets/images/header/top-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 20px;
    line-height: 48px;
    p {
      float: left;
      font-size: 20px;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 2px;
      font-weight: bold;
      line-height: 32px;
    }
    .search {
      float: right;
      margin-right: 20px;
    }
    .viewChangeBox {
      float: right;
      line-height: 32px;
      i {
        cursor: pointer;
        vertical-align: sub;
      }
    }
  }
  .toolBox {
  .contentBox {
    overflow: hidden;
    margin-bottom: 10px;
    line-height: 32px;
    .checkBox {
      float: left;
      .checkText {
        display: inline-block;
        line-height: 32px;
        vertical-align: top;
        margin-left: 8px;
      }
    }
    .sortBox {
      float: right;
      .sortText {
        width: 150px;
        line-height: 32px;
    flex: 1;
    display: flex;
    .menuBox {
      width: 80px;
      border-right: 1px solid #e6e7e8;
      padding-bottom: 20px;
      box-sizing: border-box;
      .menuItem {
        text-align: center;
        line-height: 1;
        cursor: pointer;
        i,
        span {
          vertical-align: middle;
        padding: 10px 0;
        &.active,
        &:hover {
          background-color: #cfebff;
          p {
            color: #0093ff;
          }
        }
        .menuIcon {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-bottom: 4px;
        }
      }
    }
  }
  .fileList {

    .pageBox {
    flex: 1;
    overflow: auto;
    .blockBox {
      overflow: hidden;
      .fileItem {
        width: 140px;
        float: left;
        margin: 20px;
        padding: 15px;
        border-radius: 10px;
        cursor: context-menu;
        &:hover {
          background-color: #f1f1f1;
        }
        .iconBox {
          width: 100%;
          height: 140px;
          margin-bottom: 10px;
          position: relative;
          img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border-radius: 6px;
          }
        }
        .name {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 8px;
        }
        .time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}