push

2024-05-15 17:29:42 +08:00
commit d0155dbe3c
7296 changed files with 1832517 additions and 0 deletions
--- a/lib/paas/view/system/layout/sider.vue
+++ b/lib/paas/view/system/layout/sider.vue
@@ -0,0 +1,115 @@
+<!-- @format -->
+<template>
+  <nav>
+    <ul>
+      <li>
+        <a
+          class="nav-item h0"
+          :class="{ 'nav-item-current': isRouteLinkActive('/login') }"
+          href="/nervui-main/dashboard">
+          <span class="flag"></span>
+          <i class="iconfont">&#xe6f6;</i>
+          <span class="nav-title h5">总览</span>
+        </a>
+      </li>
+      <li v-for="item in appRecords" :key="item.index">
+        <a class="nav-item h0" :href="item.url" v-if="item.isRedirect">
+          <span class="flag"></span>
+          <i class="iconfont" v-html="item.icon"></i>
+          <span class="nav-title h5">{{ item.label }}</span>
+        </a>
+
+        <a
+          class="nav-item h0"
+          v-if="!item.isRedirect"
+          :class="{ 'nav-item-current': isRouteLinkActive(item.url) }">
+          <span class="flag"></span>
+          <i class="iconfont" v-html="item.icon"></i>
+          <span class="nav-title h5">{{ item.label }}</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'NsSider',
+    components: {},
+    props: {
+      appRecords: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    methods: {
+      isRouteLinkActive(routerLink: string) {
+        let module = routerLink.split('/')[1];
+        let uri = window.location.pathname;
+        return uri.indexOf(module) != -1;
+      },
+    },
+  });
+</script>
+
+<style lang="less">
+  nav {
+    background: @layout-nav-background;
+    position: fixed;
+    left: 0;
+    top: 48px;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: @nav-width;
+    z-index: 99;
+    transition: width 0.2s;
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        .nav-item {
+          display: inline-block;
+          width: 200px;
+          position: relative;
+          height: 48px;
+          line-height: 48px;
+          color: @layout-nav-color;
+          .iconfont {
+            display: inline-block;
+            // vertical-align: middle;
+            width: 48px;
+            text-align: center;
+            font-family: iconfont !important;
+            font-size: 16px;
+            font-style: normal;
+            line-height: 48px;
+            // color: #52616f;
+          }
+          &:hover {
+            background: @layout-nav-hover;
+          }
+        }
+        .nav-item-current {
+          background: @layout-nav-hover;
+          color: @layout-nav-check-color !important;
+          .iconfont {
+            color: #00acff !important;
+          }
+          .flag {
+            display: block;
+            position: absolute;
+            left: 0;
+            border-left: 2px solid #00acff;
+            width: 2px;
+            height: 48px;
+          }
+        }
+      }
+    }
+  }
+  nav:hover {
+    width: @nav-open-width;
+  }
+</style>