feat： 导航

src/main.ts

@@ -8,11 +8,15 @@ import { registerElIcons } from '@/plugins/ElIcons'
 // svg-icons注册导入
 // @ts-ignore: virtual module injected by svg-icons plugin
 // UI框架 element-plus
-import '@/styles/element/index.scss'
+
 import ElementPlus from 'element-plus'
-// import 'element-plus/dist/index.css'
+import '@/styles/element/index.scss'
+import 'element-plus/dist/index.css'
+import '@/styles/common.scss'
 // 引入暗黑模式 element-plus 2.2 内置暗黑模式
 import 'element-plus/theme-chalk/dark/css-vars.css'
+// 自定义暗黑模式样式
+import '@/styles/element/elememt-dark.scss'
 // bootstrap icon
 import "bootstrap-icons/font/bootstrap-icons.css";
 // 引入阿里图标库

src/routers/index.ts

@@ -5,7 +5,7 @@ import {
   createWebHashHistory,
   Router,
 } from 'vue-router'
-import Home from '@/views/home2/Home.vue'
+import Home from '@/views/home/Home.vue'
 
 // 扩展继承属性
 interface extendRoute {

src/styles/index.scss

@@ -1,3 +1,2 @@
 @import './color.scss';
 @import './mixin.scss';
-@import './cwg_common.scss';

src/views/home2/Home.vue → src/views/home/Home.vue

@@ -1,91 +1,84 @@
 <template>
   <el-container class="home" v-loading="loading">
-    <el-aside width="auto">
-      <!--      <nav-menu></nav-menu>-->
+    <!--    侧边导航icon -->
+    <el-aside width="60px" class="aside">
+      <div>
+        <div class="logo-image">
+          <img src="../../assets/image/logo2.png" />
+        </div>
+      </div>
     </el-aside>
-    <el-container>
-      <el-header>
-        <el-row>
-          <el-col :span="2">
-            <div class="btn-control" @click="ChangeCollapse">
-              <el-icon v-show="!isCollapse"><Fold /></el-icon>
-              <el-icon v-show="isCollapse"><Expand /></el-icon>
-            </div>
-          </el-col>
-          <el-col :span="22" class="tool-box">
-            <!--            多语言-->
-            <el-dropdown trigger="click" class="language" @command="chooseLang">
-              <div>
-                <img v-if="currentFlag" :src="currentFlag" alt="flag" class="flag-icon" />
+    <el-container class="nav-head">
+      <NavMenu :isCollapse="isCollapse"/>
+      <el-container>
+        <el-header :class="{ header: isCollapse }">
+          <el-row>
+            <el-col :span="2">
+              <div class="btn-control" @click="ChangeCollapse">
+                <el-icon v-show="!isCollapse"><Fold /></el-icon>
+                <el-icon v-show="isCollapse"><Expand /></el-icon>
+              </div>
+            </el-col>
+            <el-col :span="22" class="tool-box">
+              <!--            多语言-->
+              <el-dropdown trigger="click" class="language" @command="chooseLang">
+                <div>
+                  <img v-if="currentFlag" :src="currentFlag" alt="flag" class="flag-icon" />
+                  <span class="el-dropdown-link">
+                    <span>{{ langList[langName]?.name || langName }}</span>
+                    <el-icon><ArrowDown /></el-icon>
+                  </span>
+                </div>
+
+                <template #dropdown>
+                  <el-dropdown-menu class="language-dropdown">
+                    <el-dropdown-item
+                      v-for="lang in languageOptions"
+                      :key="lang.code"
+                      :command="lang.code"
+                      :class="{ 'is-active': lang.code === langName }"
+                    >
+                      <div class="language-option">
+                        <span>{{ lang.name }}</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <!--            暗黑模式-->
+              <div class="opt-dark" @click="changeDark">
+                <i v-show="!themeConfig.isDark" class="bi bi-sun-fill sun-color"></i>
+                <i v-show="themeConfig.isDark" class="bi bi-moon-fill moon-color"></i>
+              </div>
+              <el-icon class="crm-cursor" style="font-size: 20px; margin-left: 20px">
+                <Bell />
+              </el-icon>
+              <i class="crm-cursor iconquanping iconfont icon" @click="fullScreen"></i>
+              <el-dropdown trigger="click" class="username crm-cursor">
                 <span class="el-dropdown-link">
-                  <span>{{ langList[langName]?.name || langName }}</span>
-                  <el-icon><ArrowDown /></el-icon>
+                  <span>{{ user?.name || 'UserName' }}</span
+                  ><el-icon><ArrowDown /></el-icon>
                 </span>
-              </div>
-
-              <template #dropdown>
-                <el-dropdown-menu class="language-dropdown">
-                  <el-dropdown-item
-                    v-for="lang in languageOptions"
-                    :key="lang.code"
-                    :command="lang.code"
-                    :class="{ 'is-active': lang.code === langName }"
-                  >
-                    <div class="language-option">
-                      <span>{{ lang.name }}</span>
-                    </div>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-            <!--            暗黑模式-->
-            <div class="opt-dark" @click="changeDark">
-              <i v-show="!themeConfig.isDark" class="bi bi-sun-fill sun-color"></i>
-              <i v-show="themeConfig.isDark" class="bi bi-moon-fill moon-color"></i>
-            </div>
-            <el-icon class="crm-cursor" style="font-size: 20px; margin-left: 20px">
-              <Bell />
-            </el-icon>
-            <i class="crm-cursor iconquanping iconfont icon" @click="fullScreen"></i>
-            <el-dropdown trigger="click" class="username crm-cursor">
-              <span class="el-dropdown-link">
-                <span>{{ user?.name || 'UserName' }}</span
-                ><el-icon><ArrowDown /></el-icon>
-              </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click="updatePwd">
-                    <span>
-                      {{ $t('Label.UpdatePwd') }}
-                    </span>
-                  </el-dropdown-item>
-                  <el-dropdown-item @click="beforeLogout"> Logout </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-col>
-        </el-row>
-      </el-header>
-      <el-main>
-<!--        <el-row class="tool">-->
-<!--          <el-col :span="16">-->
-<!--            <bread-crumb></bread-crumb>-->
-<!--          </el-col>-->
-<!--          <el-col :span="8">-->
-<!--            <span>-->
-<!--              {{ $t('Home1.Time') }}-->
-<!--            </span>-->
-<!--            <span class="crm-cursor" @click="toReload">{{ time }}</span>-->
-<!--            <el-icon class="crm-cursor el-icon-refresh-right" @click="toReload">-->
-<!--              <RefreshRight />-->
-<!--            </el-icon>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--        <tab-menu></tab-menu>-->
-        <div class="container">
-          <router-view />
-        </div>
-      </el-main>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="updatePwd">
+                      <span>
+                        {{ $t('Label.UpdatePwd') }}
+                      </span>
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="beforeLogout"> Logout </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </el-col>
+          </el-row>
+        </el-header>
+        <el-main>
+          <div class="container">
+            <router-view />
+          </div>
+        </el-main>
+      </el-container>
     </el-container>
 
     <!-- 修改密码弹出 -->
@@ -164,7 +157,7 @@
   import { useI18n } from 'vue-i18n'
 
   // 组件导入
-  import NavMenu from '@/components/NavMenu.vue'
+  import NavMenu from './components/nav.vue'
   import BreadCrumb from '@/components/BreadCrumb.vue'
   import TabMenu from '@/components/TabMenu.vue'
   import Service from '@/service/login'
@@ -209,26 +202,16 @@
   )
 
   const type = ref('')
-  const isQAlist = ref(false)
-  const attachList = ref([])
   const currentAttachId = ref(null)
 
   const dialogCheckFormRef = ref(null)
   const SettingStore = useSettingStore()
+
   // 设置信息
   const themeConfig = computed(() => SettingStore.themeConfig)
   // 计算属性
   const user = computed(() => safeGetUser(session))
   const expire = computed(() => store.state.home.expire)
-  const currentRoleName = computed(() => {
-    if (attachList.value.length === 0) return ''
-    const currentRole = attachList.value.find((item) => item.id === currentAttachId.value)
-    return currentRole ? currentRole.name : ''
-  })
-  const isShopManager = computed(() => {
-    console.log(user.value)
-    return !!user.value.isMerchantAdmin
-  })
 
   // 验证规则
   const rules = reactive({
@@ -614,12 +597,34 @@
   .home {
     width: 100%;
     height: 100%;
+    .aside {
+      height: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      .logo-image {
+        margin: 10px;
+        width: 40px;
+        img {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+    .nav-head {
 
+
+    }
     .el-header {
       height: 60px;
       background-color: var(--bg-color);
       color: var(--text-color);
       line-height: 60px;
+      padding: 0 60px;
+
+      &.header {
+        padding: 0 30px;
+        transition: padding 0.2s ease;
+      }
 
       .btn-control {
         float: left;
@@ -720,26 +725,14 @@
       object-fit: cover;
     }
   }
-  .dark{
-    .home .el-header .tool-box .language{
-        background-color: #102047;
-      }
+  .dark {
+    .home .el-header .tool-box .language {
+      background-color: #102047;
     }
-
+  }
 </style>
 <style lang="scss">
   .dialog_header_qa.dialog_header_w.el-dialog {
     min-height: 80%;
   }
-
-  // 角色切换下拉框样式
-  .el-dropdown-menu .el-dropdown-item.is-active {
-    color: #409eff;
-    background-color: #f5f7fa;
-
-    .el-icon-check {
-      float: right;
-      color: #409eff;
-    }
-  }
 </style>

src/views/home/components/nav.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-menu class="nav-menu" :class="{'collapse': isCollapse }">
+    <div class="menu-title">CWG Markets</div>
+    <el-menu-item v-for="(item, key) in menus" :key="key" :index="key" :class="{'broder-b': key != menus.length-1}">
+      {{ item.name }}
+    </el-menu-item>
+  </el-menu>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+
+  const props = defineProps({
+  isCollapse: {
+    type: Boolean,
+    default: false
+  }
+  })
+  const isCollapse = computed(()=> props.isCollapse)
+  console.log(isCollapse)
+  const menus = [
+    { link: '1', name: '1' },
+    { link: '2', name: '2' },
+    { link: '3', name: '3' },
+    { link: '4', name: '4' },
+    { link: '5', name: '15' },
+  ]
+</script>
+
+<style scoped lang="scss">
+  .nav-menu{
+    width: 0;
+    display: none;
+
+    transition: all 1s ease;
+    &.collapse{
+      display: block;
+      width: 240px;
+      transition: all 1s ease;
+    }
+  }
+  .menu-title {
+    text-align: left;
+    height: 80px;
+    line-height: 60px;
+    font-size: 30px;
+    font-weight: bold;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #DFE6EE;
+  }
+  .broder-b{
+    box-sizing: content-box;
+    border-bottom: 1px solid #DFE6EE;
+  }
+</style>