完成用户端首页静态页面

bin/build.bat

-@echo off
-echo.
-echo [信息] 打包Web工程，生成dist文件。
-echo.
-
-%~d0
-cd %~dp0
-
-cd ..
-yarn build:prod
-
-pause
\ No newline at end of file

bin/package.bat

-@echo off
-echo.
-echo [信息] 安装Web工程，生成node_modules文件。
-echo.
-
-%~d0
-cd %~dp0
-
-cd ..
-yarn --registry=https://registry.npmmirror.com
-
-pause
\ No newline at end of file

bin/run-web.bat

-@echo off
-echo.
-echo [信息] 使用 Vite 命令运行 Web 工程。
-echo.
-
-%~d0
-cd %~dp0
-
-cd ..
-yarn dev
-
-pause
\ No newline at end of file

src/assets/font/index.scss

+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url("YouSheBiaoTiHei.ttf") format("truetype");
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "DIN";
+  src: url("DIN-Regular.otf") format("truetype");
+  font-style: normal;
+  font-weight: normal;
+}
+
+.font-YouSheBiaoTiHei{
+  font-family: YouSheBiaoTiHei, system-ui ;
+}
+
+.font-DIN{
+  font-family: DIN, system-ui ;
+}

src/assets/styles/index.scss

@@ -182,3 +182,50 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.inline-flex-align-center {
+  display: inline-flex;
+  align-items: center;
+}
+
+.flex-align-top {
+  display: flex;
+  align-items: flex-start;
+}
+
+.flex-align-bottom {
+  display: flex;
+  align-items: flex-end;
+}
+
+.flex-space-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-justify-end {
+  display: flex;
+  justify-content: flex-end;
+}

src/layout/components/AppMain.vue

@@ -21,10 +21,10 @@ const tagsViewStore = useTagsViewStore()
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  //min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  //overflow: hidden;
 }
 
 .fixed-header + .app-main {

src/layout/manage-layout.vue

+<template>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar @setLayout="setLayout" />
+<!--        <tags-view v-if="needTagsView" />-->
+      </div>
+      <app-main />
+      <settings ref="settingRef" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useWindowSize } from '@vueuse/core'
+import Sidebar from './components/Sidebar/index.vue'
+import { AppMain, Navbar, Settings, TagsView } from './components'
+import defaultSettings from '@/settings'
+
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const sidebar = computed(() => useAppStore().sidebar);
+const device = computed(() => useAppStore().device);
+const needTagsView = computed(() => settingsStore.tagsView);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+
+const classObj = computed(() => ({
+  hideSidebar: !sidebar.value.opened,
+  openSidebar: sidebar.value.opened,
+  withoutAnimation: sidebar.value.withoutAnimation,
+  mobile: device.value === 'mobile'
+}))
+
+const { width, height } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+watchEffect(() => {
+  if (device.value === 'mobile' && sidebar.value.opened) {
+    useAppStore().closeSideBar({ withoutAnimation: false })
+  }
+  if (width.value - 1 < WIDTH) {
+    useAppStore().toggleDevice('mobile')
+    useAppStore().closeSideBar({ withoutAnimation: true })
+  } else {
+    useAppStore().toggleDevice('desktop')
+  }
+})
+
+function handleClickOutside() {
+  useAppStore().closeSideBar({ withoutAnimation: false })
+}
+
+const settingRef = ref(null);
+function setLayout() {
+  settingRef.value.openSetting();
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "@/assets/styles/mixin.scss";
+  @import "@/assets/styles/variables.module.scss";
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>

src/layout/user-layout.vue

+<template>
+  <div class="app-wrapper">
+    <div class="nav-bar">
+      <div class="logo flex-align-center">
+        <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
+        <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
+        <span class="logo-text">先进公共服务平台</span>
+      </div>
+
+      <div class="menu">
+        <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal">
+          <el-sub-menu index="1">
+            <template #title>计算资源</template>
+            <el-sub-menu index="1-1">
+              <template #title>天河超级计算机</template>
+              <el-menu-item index="1-1-1">天河一代</el-menu-item>
+              <el-menu-item index="1-1-2">天河新一代</el-menu-item>
+            </el-sub-menu>
+            <el-menu-item index="1-2">CPU裸金属服务器</el-menu-item>
+            <el-menu-item index="1-3">存储</el-menu-item>
+            <el-menu-item index="1-4">云计算资源</el-menu-item>
+          </el-sub-menu>
+          <el-menu-item index="2">行业应用</el-menu-item>
+          <el-menu-item index="3">组件服务</el-menu-item>
+          <el-menu-item index="4">合作伙伴</el-menu-item>
+        </el-menu>
+      </div>
+
+      <div class="right-menu">
+        <el-button type="primary">登录/注册</el-button>
+      </div>
+    </div>
+    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>-->
+    <app-main/>
+  </div>
+</template>
+
+<script setup>
+import AppMain from '@/layout/components/AppMain.vue'
+// import Breadcrumb from '@/components/Breadcrumb/index.vue'
+const activeIndex = ref('1')
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.nav-bar {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ECECEB;
+  background-color: #ffffff;
+  padding: 0 80px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  .logo {
+    .nscc {
+      height: 46px;
+    }
+
+    img {
+      margin-right: 20px;
+      height: 50px;
+    }
+
+    .logo-text {
+      font-family: YouSheBiaoTiHei, system-ui;
+      font-weight: 400;
+      font-size: 24px;
+      color: #2E77E3;
+    }
+  }
+
+
+  .menu {
+    width: 600px;
+    flex: 1;
+    margin-left: 72px;
+  }
+
+  :deep(.el-menu) {
+    border-bottom: none;
+
+    .el-sub-menu, .el-menu-item {
+      &.is-active {
+        font-weight: bold;
+      }
+    }
+
+    .el-sub-menu__title, .el-menu-item {
+      font-weight: 400;
+      font-size: 16px;
+      color: #626566;
+    }
+  }
+
+  .el-button {
+    background-color: #2E77E3;
+    height: 38px;
+    border-radius: 2px;
+    font-size: 14px;
+  }
+}
+
+.app-main {
+  padding-top: 64px;
+  //height: calc(100vh - 64px);
+  //overflow-y: auto;
+}
+</style>

src/main.js

@@ -6,6 +6,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
 
+import '@/assets/font/index.scss'
 import '@/assets/styles/index.scss' // global css
 
 import App from './App'
@@ -32,13 +33,13 @@ import Pagination from '@/components/Pagination'
 // 自定义表格工具组件
 import RightToolbar from '@/components/RightToolbar'
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from '@/components/Editor'
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from '@/components/FileUpload'
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from '@/components/ImageUpload'
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from '@/components/ImagePreview'
 // 自定义树选择组件
 import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件

src/router/index.js

 import { createWebHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
+import UserLayout from '@/layout/user-layout.vue'
 
 /**
  * Note: 路由配置项
@@ -59,7 +60,8 @@ export const constantRoutes = [
   },
   {
     path: '',
-    component: Layout,
+    component: UserLayout,
+    // component: Layout,
     redirect: '/index',
     children: [
       {

src/views/login.vue

@@ -69,6 +69,7 @@ import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import useUserStore from '@/store/modules/user'
+import { useRoute, useRouter } from 'vue-router'
 
 const userStore = useUserStore()
 const route = useRoute();