feat: 实现system massage页面框架

src/router/index.ts

@@ -87,6 +87,11 @@ const router = createRouter({
           path: '/Operationlog',
           name: 'Operationlog',
           component: () => import('../views/OperationLog')
+        },
+        {
+          path: '/system-message',
+          name: 'System Message',
+          component: () => import('../views/SystemMessage')
         }
       ]
     }

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

@@ -17,11 +17,49 @@ watch(
   }
 )
 const getMenuList = () => {
-  $api.getMenuList().then((res) => {
-    if (res.code === 200) {
-      menuList.value = res.data
+  // $api.getMenuList().then((res) => {
+  //   if (res.code === 200) {
+  //     menuList.value = res.data
+  //   }
+  // })
+  menuList.value = [
+    {
+      index: '1',
+      label: 'Dashboard',
+      icon: 'icon_data_fill_b',
+      path: '/dashboard'
+    },
+    {
+      index: 2,
+      label: 'Booking',
+      icon: 'icon_booking__fill_b',
+      path: '/booking'
+    },
+    {
+      index: 3,
+      label: 'Tracking',
+      icon: 'icon_tracking__fill_b',
+      path: '/tracking'
+    },
+    {
+      index: 4,
+      label: 'System Management',
+      icon: 'icon_system__management_fill_b',
+      type: 'list',
+      children: [
+        {
+          index: '4-1',
+          label: 'Operation Log',
+          path: '/Operationlog'
+        },
+        {
+          index: '4-2',
+          label: 'System Message',
+          path: '/system-message'
+        }
+      ]
     }
-  })
+  ]
 }
 getMenuList()
 //监听窗口大小

src/views/SystemMessage/index.ts

@@ -0,0 +1 @@
+export { default } from './src/SystemMessage.vue'

src/views/SystemMessage/src/SystemMessage.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const collapseVModel = ref<string[]>([])
+</script>
+
+<template>
+  <div class="Title">System Massage</div>
+  <div class="system-message">
+    <div class="left-nav">
+      <el-collapse v-model="collapseVModel">
+        <el-collapse-item title="Event Notifications" name="1">
+          <div class="collapse-item">
+            <div class="active-sign"></div>
+            <span>Milestone Update</span>
+            <div class="count">
+              <span>2</span>
+            </div>
+          </div>
+          <div class="collapse-item">
+            <div class="active-sign"></div>
+            Container Status Update
+          </div>
+          <div class="collapse-item">Departure/Arrival Delay</div>
+          <div class="collapse-item">ETD/ETA Change</div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="right-content"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.Title {
+  display: flex;
+  height: 68px;
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  padding: 0 24px;
+  align-items: center;
+}
+.left-nav {
+  width: 280px;
+  padding: 24px;
+  padding-right: 16px;
+  .collapse-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 240px;
+    height: 48px;
+    padding: 0 16px;
+    border-radius: 12px;
+    &:hover {
+      background-color: var(--color-table-header-bg);
+      .active-sign {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 21px;
+        border-radius: 12px;
+        background-color: var(--color-theme);
+      }
+    }
+
+    .count {
+      display: inline-flex;
+      justify-content: center;
+      height: 18px;
+      min-width: 18px;
+      padding-left: 5px;
+      padding-right: 5px;
+      background-color: var(--color-theme);
+      border-radius: 9px;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+      span {
+        color: var(--color-white);
+        font-weight: 700;
+      }
+    }
+    &.is-active {
+      background-color: var(--color-table-header-bg);
+    }
+  }
+  :deep(.el-collapse-item__header) {
+    width: 240px;
+    padding: 16px;
+  }
+}
+</style>