cloudfile-ui/src/layout/indexCommon.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header
        class="nav"
        style="position: sticky; top: 0; left: 0; width: 100%; z-index: 999"
      >
        <div class="nav-top">
          <div>
            <img src="@/assets/images/logos.png" /><span
              >聚合智慧文档管理系统</span
            >
          </div>
          <div class="search">
            <el-input
              v-model="searchText"
              maxlength="32"
              class="w-50 m-2"
              size="small"
              placeholder="搜索文件"
              suffix-icon="Search"
              clearable
              @change="toSearch"
              @@keyup.enter="toSearch"
            />
          </div>
          <div>
            <el-dropdown
              @command="handleCommand"
              class="right-menu-item hover-effect"
              trigger="click"
            >
              <div class="avatar-wrapper">
                <img
                  :src="
                    userStore.avatar
                      ? userStore.avatar
                      : '@/assets/images/profile.png'
                  "
                  class="head-img"
                /><span>{{ userStore.name }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <router-link to="/user/profile">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <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, item)"
              ><div
                style="position: relative"
                :class="
                  $route.path == item.path
                    ? 'acitve-img-style img-style'
                    : 'img-style'
                "
              >
                <img
                  :src="$route.path == item.path ? item.beimgs : item.imgs"
                />
                <div class="text-style" v-if="$route.path != item.path">
                  {{ item.label }}
                </div>
                <span
                  class="yuandian"
                  v-if="
                    websoctStore.messOne?.fromId &&
                    item.path == '/index' &&
                    $route.path != item.path&&clickId!==index
                  "
                ></span>
              </div> </router-link
            ><br />
          </div>
        </el-aside>
        <el-main class="main">
          <router-view v-if="isAlive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { nextTick, onMounted, provide, 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 system from "@/assets/images/system.png";
import issystem from "@/assets/images/issystem.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 highsearch from "@/assets/images/highsearch.png";
import behighsearch from "@/assets/images/behighsearch.png";
import manyBody from "@/assets/images/manyBody.png";
import manyBodyFalse from "@/assets/images/manyBodyFalse.png";
import { AppMain, Navbar, Settings, TagsView } from "./components";
import { flieSearch } from "@/api/search/search.js";
import { useRouter, useRoute } from "vue-router";
import useWebsoctStore from "@/store/modules/websocket";
const websoctStore = useWebsoctStore();
const router = useRouter(); //注册路由
const route = useRoute();
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const searchText = ref(""); //搜索ipt的值
const selectValue = ref(1); //文档空间类型
const wangzhi=import.meta.env.VITE_APP_BASE_API
const isAlive = ref(true);

function reload() {
  isAlive.value = false;
  console.log(11);
  nextTick(() => {
    isAlive.value = true;
  });
}

provide("reload", reload);

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 () => {
  if (!searchText.value) return;
  // console.log('searchText = ',searchText.value);
  const query = {
    keyword: searchText.value,
    isAsc: "asc",
    orderByColumn: "createTime",
    pageSize:3,
    pageNum:1
  };
  const res = await flieSearch(query);
  // console.log("res", res);
  if (res) {
    // console.log("res", res);
    // console.log("router", route.path);
    if (route.path != "/search") {
      router.push({
        path: "/search",
        query: {
          searchData: JSON.stringify(res),
          searchText: searchText.value,
        },
      });
    } else {
      router.replace({
        path: "/allback",
        query: {
          searchData: JSON.stringify(res),
          searchText: searchText.value,
        },
      });
    }
  }
};
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,
    //   disabled:true
    // },
    {
      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: highsearch,
      beimgs: behighsearch,
    },
    {
      label: "传输列表",
      path: "/transFile",
      imgs: chuanshu,
      beimgs: bechuanshu,
    },
    {
      label: "系统管理",
      path: "/admin",
      imgs: system,
      beimgs: issystem,
    },
    {
      label: "我的协作",
      path: "/myjoin",
      imgs: manyBody,
      beimgs: manyBodyFalse,
    },
  ],
});
const clickPath = (index, items) => {
  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: 94vh;
}
: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;
  }
}
.yuandian {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  top: 6px;
  background: #fa5151;
  border-radius: 4px;
}
</style>