cloudfile-ui/src/layout/indexCommon.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="nav">
        <div class="nav-top">
          <div>
            <img src="@/assets/images/logos.png" /><span>DOMINO'S File</span>
          </div>
          <div class="search">
            <el-input
              v-model="searchText"
              class="w-50 m-2"
              size="small"
              placeholder="搜索文件"
              suffix-icon="Search"
              clearable
              @change="toSearch"
            />
          </div>
          <div>
            <el-dropdown
              @command="handleCommand"
              class="right-menu-item hover-effect"
              trigger="click"
            >
              <div class="avatar-wrapper">
                <img
                  src="@/assets/images/profile.jpg"
                  class="head-img"
                /><span>{{ logingName }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item divided command="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="92px" class="asides">
          <div class="aside-con">
            <router-link
              :to="item.path"
              v-for="(item, index) in menuList.data"
              :key="index"
              @click="clickPath(index)"
              ><div
                :class="
                  $route.path == item.path
                    ? 'acitve-img-style img-style'
                    : 'img-style'
                "
              >
                <img :src="clickId == index ? item.beimgs : item.imgs" />
                <div class="text-style" v-if="clickId != index">
                  {{ item.label }}
                </div>
              </div> </router-link
            ><br />
          </div>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
import useAppStore from "@/store/modules/app";
import useUserStore from "@/store/modules/user";
import useSettingsStore from "@/store/modules/settings";
import Cookies from "js-cookie";
import chat from "@/assets/images/chat.png";
import bechat from "@/assets/images/bechat.png";
import zuijin from "@/assets/images/zuijin.png";
import bezuijin from "@/assets/images/bezuijin.png";
import colloect from "@/assets/images/colloect.png";
import becolloect from "@/assets/images/becolloect.png";
import my from "@/assets/images/my.png";
import bemy from "@/assets/images/bemy.png";
import bumen from "@/assets/images/bumen.png";
import bebumen from "@/assets/images/bebumen.png";
import common from "@/assets/images/common.png";
import becommon from "@/assets/images/becommon.png";
import chuanshu from "@/assets/images/chuanshu.png";
import bechuanshu from "@/assets/images/bechuanshu.png";
import { AppMain, Navbar, Settings, TagsView } from "./components";
import { search } from "@/api/search/search.js";
import { useRouter } from "vue-router";
const router = useRouter(); //注册路由
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const searchText = ref(""); //搜索ipt的值
const selectValue = ref(1); //文档空间类型


function toggleSideBar() {
  appStore.toggleSideBar();
}
const logingName = ref("");
onMounted(() => {
  logingName.value = Cookies.get("username");
  // console.log('router',router)
});
function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}

// 跳转到全文搜索
const toSearch = async () => {
  // console.log('searchText = ',searchText.value);
  const query = {
    keyword: searchText.value,
    page: 1,
    size: 10,
    type: selectValue.value,
  };
  const res = await search(query);
  console.log("res", res);
  if (res) {
    router.push({
      path: "/search",
      query: { searchData: JSON.stringify(res) },
    });
  }
};
const emits = defineEmits(["setLayout"]);
function setLayout() {
  emits("setLayout");
}
const clickId = ref("");
const menuList = reactive({
  data: [
    {
      label: "会话消息",
      path: "/index",
      imgs: chat,
      beimgs: bechat,
    },
    {
      label: "接口",
      path: "/swagger",
      imgs: chat,
      beimgs: bechat,
    },
    {
      label: "最近文件",
      path: "/recent",
      imgs: zuijin,
      beimgs: bezuijin,
    },
    {
      label: "收藏文件",
      path: "/collect",
      imgs: colloect,
      beimgs: becolloect,
    },
    {
      label: "我的文件",
      path: "/myfile",
      imgs: my,
      beimgs: bemy,
    },
    {
      label: "部门文件",
      path: "/department",
      imgs: bumen,
      beimgs: bebumen,
    },
    {
      label: "公共文件",
      path: "/swagger",
      imgs: common,
      beimgs: becommon,
    },
     {
      label: "高级搜索",
      path: "/highsearch",
      imgs: common,
      beimgs: becommon,
    },
    {
      label: "传输列表",
      path: "/ws",
      imgs: chuanshu,
      beimgs: bechuanshu,
    },
  ],
});

const clickPath = (index) => {
  clickId.value = index;
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
//整体布局css
.common-layout,
.el-container {
  height: 100vh;
}
:deep .el-main {
  --el-main-padding: 8px !important;
}
.nav {
  background: #06286c;
  height: 48px;
  .nav-top {
    width: 98%;
    display: flex;
    justify-content: space-between;
    & > div:first-child {
      font-family: "Inter-SemiBold";
    }
    & > div:first-child,
    & > div:last-child {
      display: flex;
      align-items: center;
      color: #fff;
      & > img {
        width: 48px;
        height: 48px;
      }
    }
  }
  .head-img {
    border-radius: 12px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  .avatar-wrapper {
    color: #fff;
    display: flex;
    align-items: center;
  }
  .search {
    .w-50,
    :deep .el-input {
      width: 400px;
      height: 32px;
      border-radius: 4px;
      margin-top: 8px;
      background: #6f85b5 !important;
      --el-input-border-color: #6f85b5;
    }
    ::v-deep .el-input__inner {
      color: #fff !important;
    }
  }
  :deep .el-input__wrapper {
    background: #1f3f7e !important;
  }
}

.asides {
  padding: 8px 10px !important;
  font-size: 14px;
  color: #000;
  background: #fff;
}
.main {
  background: #c7cbd8;
}
//侧边栏css
.acitve-img-style {
  background-color: #f5f7f9;
  border-radius: 4px;
}
.img-style {
  width: 72px;
  height: 72px;
  display: flex;
  margin-bottom: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  & > img {
    width: 40px;
    height: 40px;
  }
}
.text-style {
  text-align: center;
  color: #000;
}
</style>
<style lang="scss">
.el-popper.is-light.type_popper {
  background-color: #1f3f7e !important;
  border-radius: 4px 4px 4px 4px !important;
  border: none !important;
  // padding: 0 16px !important;
  // box-sizing: border-box !important;
}
.el-popper__arrow::before{
  content: none;
}
 //鼠标移动上去的选中色
.type_popper {
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: #6F85B5  !important;
    }
 //下拉框的文本颜色
    .el-select-dropdown__item {
        color: #A4B0D8  !important;
    }
 //选中之后的颜色
    .el-select-dropdown__item.selected {
        background: #6F85B5  !important;
        color: #fff !important;
    }
}
</style>