feat: 实现友情链接

src/views/Layout/src/LayoutView.vue

@@ -28,12 +28,14 @@ const handleMenuCollapse = (val: boolean) => {
       </div>
       <Menu v-model="isCollapse" @update:modelValue="handleMenuCollapse"></Menu>
     </el-aside>
+
     <!-- 右侧整体布局 -->
     <el-container style="min-width: 900px">
       <!-- 顶部Header -->
       <el-header class="layout-header">
         <Header></Header>
       </el-header>
+
       <!-- 主体内容 -->
       <el-main class="layout-content">
         <router-view />
@@ -57,12 +59,12 @@ const handleMenuCollapse = (val: boolean) => {
     border-right: 1px solid var(--color-border);
     overflow: hidden;
     transition: all 0.3s;
-    :deep(.el-scrollbar__view) {
-      height: 100%;
-    }
-    .el-menu {
-      height: calc(100% - 120px);
-    }
+    // :deep(.el-scrollbar__view) {
+    //   height: 100%;
+    // }
+    // .el-menu {
+    //   height: calc(100% - 120px);
+    // }
   }
   .layout-header {
     position: relative;

src/views/Layout/src/components/Header/HeaderView.vue

@@ -149,6 +149,10 @@ const handleLogin = () => {
             <span class="font_family icon-icon_password_b"></span>
             Change Password
           </div>
+          <div class="item" @click="handleChangePassword">
+            <span class="font_family icon-icon_password_b"></span>
+            User Manual
+          </div>
           <div class="item" @click="handleLogout">
             <span class="font_family icon-icon_export_b"></span>
             Logout

src/views/Layout/src/components/Menu/MenuView.vue

@@ -1,46 +1,14 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
+import { CaretRight } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
 const isCollapse = defineModel<boolean>()
-// [
-//   {
-//     index: '1',
-//     label: 'Dashboard',
-//     icon: 'icon_data_fill_b',
-//     path: '/dashboard'
-//   },
-//   {
-//     index: '3',
-//     label: 'Booking',
-//     icon: 'icon_booking__fill_b',
-//     path: '/booking'
-//   },
-//   {
-//     index: '4',
-//     label: 'Tracking',
-//     icon: 'icon_tracking__fill_b',
-//     path: '/tracking'
-//   },
 
-//   {
-//     index: '6',
-//     label: 'System Management',
-//     icon: 'icon_system__management_fill_b',
-//     type: 'list',
-//     children: [
-//       {
-//         index: '5-4',
-//         label: 'Operation Log',
-//         path: '/Operationlog'
-//       }
-//     ]
-//   }
-// ]
 const menuList = ref()
 watch(
   () => userStore.username,
@@ -136,51 +104,88 @@ const handleCollapseClick = () => {
   isCollapse.value = !isCollapse.value
 }
 const menuRef = ref()
+
+// 友情链接
+const activeName = ref('1')
+// const blogrollList = ref([
+//   {
+//     icon: () => import('./images/flag.png'),
+//     title: 'Kerry Siam Seaport Web Service',
+//     link: 'https://www.kerrysiamseaport.com/'
+//   }
+// ])
+
+const jumpLink = (link: string) => {
+  window.open(link, '_blank')
+}
 </script>
 
 <template>
-  <el-menu
-    ref="menuRef"
-    class="layout-menu"
-    @select="changeRouter"
-    :default-active="activeMenu"
-    :collapse="isCollapse"
-  >
-    <template v-for="item in menuList" :key="item.index">
-      <el-menu-item
-        :class="{
-          'clear-active-style': route.path === '/login' || route.path === '/reset-password'
-        }"
-        v-if="item.type !== 'list'"
-        :index="item.path"
-      >
-        <span class="font_family" :class="[`icon-${item.icon}`]"></span>
-        <template #title>{{ item.label }}</template>
-      </el-menu-item>
-      <el-sub-menu v-else :index="item.path">
-        <template #title>
-          <div class="font_family" style="font-size: 16px" :class="[`icon-${item.icon}`]"></div>
-          <span>{{ item.label }}</span>
-        </template>
-        <template v-for="childrenItem in item.children" :key="childrenItem.index">
-          <el-menu-item :index="childrenItem.path">{{ childrenItem.label }}</el-menu-item>
-        </template>
-      </el-sub-menu>
-    </template>
-  </el-menu>
-  <div class="collapse-icon">
-    <div @click="handleCollapseClick">
-      <span
-        :style="{ transform: isCollapse ? 'rotate(0deg)' : 'rotate(180deg)' }"
-        class="font_family icon-icon_menu_collapse_b"
-      ></span>
+  <div class="left-section">
+    <el-menu
+      ref="menuRef"
+      class="layout-menu"
+      @select="changeRouter"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+    >
+      <template v-for="item in menuList" :key="item.index">
+        <el-menu-item
+          :class="{
+            'clear-active-style': route.path === '/login' || route.path === '/reset-password'
+          }"
+          v-if="item.type !== 'list'"
+          :index="item.path"
+        >
+          <span class="font_family" :class="[`icon-${item.icon}`]"></span>
+          <template #title>{{ item.label }}</template>
+        </el-menu-item>
+        <el-sub-menu v-else :index="item.path">
+          <template #title>
+            <div class="font_family" style="font-size: 16px" :class="[`icon-${item.icon}`]"></div>
+            <span>{{ item.label }}</span>
+          </template>
+          <template v-for="childrenItem in item.children" :key="childrenItem.index">
+            <el-menu-item :index="childrenItem.path">{{ childrenItem.label }}</el-menu-item>
+          </template>
+        </el-sub-menu>
+      </template>
+    </el-menu>
+    <div class="blogroll" :class="{ collapse: isCollapse }">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item title="REGIONAL SOLUTIONS" name="1" :icon="CaretRight">
+          <div class="blogroll-content">
+            <div class="blogroll-item" @click="jumpLink('https://www.kerrysiamseaport.com/')">
+              <img
+                style="height: 16px; width: 16px; margin-right: 4px"
+                src="./images/flag.png"
+                alt="string"
+              />
+              <span class="title">Kerry Siam Seaport Web Service</span>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="collapse-icon">
+      <div @click="handleCollapseClick">
+        <span
+          :style="{ transform: isCollapse ? 'rotate(0deg)' : 'rotate(180deg)' }"
+          class="font_family icon-icon_menu_collapse_b"
+        ></span>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.left-section {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 64px);
+}
 .layout-menu {
-  height: calc(100% - 120px);
+  flex: 1;
   border-bottom: 1px solid var(--color-border);
   border-right: none;
   .font_family {
@@ -247,4 +252,57 @@ li.clear-active-style {
     padding-left: 36px !important;
   }
 }
+
+.blogroll {
+  position: relative;
+  &.collapse {
+    display: none;
+  }
+  :deep(.el-collapse) {
+    border-top: none;
+    .el-collapse-item__arrow {
+      color: #b5b9bf;
+      align-self: center;
+    }
+  }
+  :deep(.el-collapse-item__header) {
+    align-items: normal;
+    position: sticky;
+    top: 1px;
+    height: 40px;
+    line-height: 42px;
+    padding: 0 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    font-weight: 700;
+  }
+}
+.blogroll-content {
+  max-height: 180px;
+  padding: 0 8px;
+  overflow: auto;
+  .blogroll-item {
+    height: 40px;
+    margin-top: 4px;
+    padding: 0 8px;
+    line-height: 40px;
+    font-size: 12px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: all 0.3s;
+    .font_family {
+      margin-right: 4px;
+    }
+    span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background-color: var(--color-mune-active-bg);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+  }
+}
 </style>