hrp-ui-base 1.4.6 → 1.4.7

package/src/components/layout/sideMenuSonList.vue

@@ -1,185 +1,185 @@
-<template>
-  <div class="sidebar-menu-son-list-box">
-    <div
-      class="sidebar-menu-son-list"
-      v-for="(item, index) in currentData"
-      :key="index"
-    >
-      <!-- 分组标题 -->
-      <div class="sidebar-menu-son-list-title">{{ item.menuName }}</div>
-      
-      <!-- 子菜单列表 -->
-      <div class="sidebar-menu-son-list-little-menu">
-        <div
-          v-for="(child, childIndex) in item.children"
-          :key="childIndex"
-          class="menu-item"
-          :class="{ 'is-active': isActive(child.url) }"
-          @click="handleMenuClick(child)"
-        >
-          <span class="menu-name">{{ child.menuName }}</span>
-          <i class="el-icon-arrow-right menu-arrow"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from "vue";
-import type HomeMenu from "../../../api/bms/home/bo/HomeMenu";
-
-const props = defineProps({
-  currentData: {
-    type: Object as PropType<HomeMenu[]>,
-    required: true,
-  },
-  currentPath: {
-    type: String,
-    default: ''
-  }
-});
-
-const emit = defineEmits<{
-  (e: 'menu-click', menu: HomeMenu): void
-}>();
-
-// 判断菜单是否激活
-const isActive = (url: string) => {
-  if (!url) return false;
-  return props.currentPath === url;
-};
-
-// 处理菜单点击
-const handleMenuClick = (menu: HomeMenu) => {
-  if (!menu.url) {
-    return;
-  }
-  emit('menu-click', menu);
-};
-</script>
-
-<style lang="scss" scoped>
-.sidebar-menu-son-list-box {
-  width: 100%;
-  max-height: none;
-  overflow-y: visible;
-  padding: 12px;
-  background: transparent;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--el-border-color-light);
-    border-radius: 3px;
-    &:hover {
-      background: var(--el-border-color);
-    }
-  }
-}
-
-.sidebar-menu-son-list {
-  margin-bottom: 24px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.sidebar-menu-son-list-title {
-  padding: 10px 12px;
-  margin-bottom: 8px;
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--el-text-color-primary);
-  background: var(--el-fill-color-light);
-  border-left: 4px solid var(--el-color-primary-light-7);
-  border-radius: 4px;
-  user-select: none;
-}
-
-.sidebar-menu-son-list-little-menu {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 0 4px;
-
-  .menu-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 250px;
-    padding: 10px 12px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    user-select: none;
-    min-width: 0;
-    overflow: hidden;
-    box-sizing: border-box;
-    color: var(--el-text-color-primary);
-    background: transparent;
-
-    .menu-name {
-      flex: 1;
-      min-width: 0;
-      font-size: 14px;
-      font-weight: 400;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .menu-arrow {
-      flex-shrink: 0;
-      margin-left: 6px;
-      font-size: 12px;
-      color: var(--el-text-color-placeholder);
-      opacity: 0;
-      transform: translateX(-4px);
-      transition: all 0.2s;
-    }
-
-    &:hover {
-      background: var(--el-fill-color-light);
-      transform: translateX(2px);
-      .menu-arrow {
-        opacity: 1;
-        transform: translateX(0);
-        color: var(--el-color-primary);
-      }
-    }
-
-    &.is-active {
-      background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-color-primary-light-8) 100%);
-      color: var(--el-color-primary);
-      font-weight: 500;
-      border: 1px solid var(--el-color-primary-light-7);
-      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
-
-      .menu-arrow {
-        opacity: 1;
-        transform: translateX(0);
-        color: var(--el-color-primary);
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 6px;
-        height: 6px;
-        background: var(--el-color-primary);
-        border-radius: 50%;
-        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
-      }
-    }
-
-    &:active {
-      transform: translateX(2px) scale(0.98);
-    }
-  }
-}
-</style>
+<template>
+  <div class="sidebar-menu-son-list-box">
+    <div
+      class="sidebar-menu-son-list"
+      v-for="(item, index) in currentData"
+      :key="index"
+    >
+      <!-- 分组标题 -->
+      <div class="sidebar-menu-son-list-title">{{ item.menuName }}</div>
+      
+      <!-- 子菜单列表 -->
+      <div class="sidebar-menu-son-list-little-menu">
+        <div
+          v-for="(child, childIndex) in item.children"
+          :key="childIndex"
+          class="menu-item"
+          :class="{ 'is-active': isActive(child.url) }"
+          @click="handleMenuClick(child)"
+        >
+          <span class="menu-name">{{ child.menuName }}</span>
+          <i class="el-icon-arrow-right menu-arrow"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from "vue";
+import type HomeMenu from "../../../api/bms/home/bo/HomeMenu";
+
+const props = defineProps({
+  currentData: {
+    type: Object as PropType<HomeMenu[]>,
+    required: true,
+  },
+  currentPath: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'menu-click', menu: HomeMenu): void
+}>();
+
+// 判断菜单是否激活
+const isActive = (url: string) => {
+  if (!url) return false;
+  return props.currentPath === url;
+};
+
+// 处理菜单点击
+const handleMenuClick = (menu: HomeMenu) => {
+  if (!menu.url) {
+    return;
+  }
+  emit('menu-click', menu);
+};
+</script>
+
+<style lang="scss" scoped>
+.sidebar-menu-son-list-box {
+  width: 100%;
+  max-height: none;
+  overflow-y: visible;
+  padding: 12px;
+  background: transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--el-border-color-light);
+    border-radius: 3px;
+    &:hover {
+      background: var(--el-border-color);
+    }
+  }
+}
+
+.sidebar-menu-son-list {
+  margin-bottom: 24px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sidebar-menu-son-list-title {
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  background: var(--el-fill-color-light);
+  border-left: 4px solid var(--el-color-primary-light-7);
+  border-radius: 4px;
+  user-select: none;
+}
+
+.sidebar-menu-son-list-little-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 4px;
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 250px;
+    padding: 10px 12px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+    min-width: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    color: var(--el-text-color-primary);
+    background: transparent;
+
+    .menu-name {
+      flex: 1;
+      min-width: 0;
+      font-size: 14px;
+      font-weight: 400;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .menu-arrow {
+      flex-shrink: 0;
+      margin-left: 6px;
+      font-size: 12px;
+      color: var(--el-text-color-placeholder);
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: all 0.2s;
+    }
+
+    &:hover {
+      background: var(--el-fill-color-light);
+      transform: translateX(2px);
+      .menu-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--el-color-primary);
+      }
+    }
+
+    &.is-active {
+      background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-color-primary-light-8) 100%);
+      color: var(--el-color-primary);
+      font-weight: 500;
+      border: 1px solid var(--el-color-primary-light-7);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+
+      .menu-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--el-color-primary);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 6px;
+        background: var(--el-color-primary);
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
+      }
+    }
+
+    &:active {
+      transform: translateX(2px) scale(0.98);
+    }
+  }
+}
+</style>

package/src/components/layout/stores/index.ts

@@ -1,5 +1,5 @@
-export { useLayoutConfigStore, UserConfigBo } from "./useLayoutConfigStore";
-export { useLayoutMenuStore } from "./useLayoutMenuStore";
-export { useLayoutTabsStore } from "./useLayoutTabsStore";
-export type { TabsOptions } from "./useLayoutTabsStore";
-export { useLayoutNoticeStore } from "./useLayoutNoticeStore";
+export { useLayoutConfigStore, UserConfigBo } from "./useLayoutConfigStore";
+export { useLayoutMenuStore } from "./useLayoutMenuStore";
+export { useLayoutTabsStore } from "./useLayoutTabsStore";
+export type { TabsOptions } from "./useLayoutTabsStore";
+export { useLayoutNoticeStore } from "./useLayoutNoticeStore";