hrp-ui-base 1.0.2 → 1.0.3

package/src/components/layout/sideMenuSonList.vue

@@ -0,0 +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>

package/src/components/layout/styles/icon.scss

@@ -0,0 +1,72 @@
+.icon-box-component-box {
+  position: relative;
+}
+
+.icon-box {
+  width: 34px;
+  height: 34px;
+  margin: 0 18px 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 4px 4px 4px 4px;
+  overflow: hidden;
+
+  img {
+    width: 28px;
+  }
+}
+
+.icon-box:focus-visible {
+  outline: none;
+}
+
+.common-switch-box {
+  padding: 8px;
+
+  .common-switch-box-span {
+    margin-right: 8px;
+  }
+}
+
+.icon-box:hover {
+  background: var(--custom-theme-fill-1);
+}
+
+.icon-box-active:hover {
+  background: var(--custom-theme-fill-1);
+}
+
+.icon-box-active {
+  background: var(--custom-theme-normal-5);
+}
+
+// 弹出层提示词
+.popover-tooltip-custom {
+  position: absolute;
+  top: 46px;
+  left: -31%;
+  z-index: 999;
+  background: #303133;
+  color: #ffffff;
+  padding: 8px;
+  font-size: 12px;
+  width: max-content;
+  max-width: 100vh;
+  border-radius: 6px;
+
+  .triangle-top {
+    width: 0;
+    height: 0;
+    border-left:
+      5px solid transparent;
+    border-right:
+      5px solid transparent;
+    border-bottom:
+      7px solid black;
+    position: absolute;
+    top: -7px;
+    left: calc(50% - 5px);
+  }
+}

package/src/components/layout/types.ts

@@ -0,0 +1,98 @@
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+
+/** 用户配置接口 */
+export interface UserConfig {
+  /** 字体大小 */
+  fontSize: string;
+  /** 昼夜模式 */
+  dayOrNight: string;
+  /** 是否跟随系统 */
+  followSystem: boolean;
+  /** 菜单位置 */
+  menuPosition: string;
+  /** 导航栏折叠状态 */
+  navigationBar: boolean;
+  /** 是否新手引导 */
+  noviceGuide: boolean;
+  /** 暗黑模式状态 */
+  isDark?: string;
+  /** 用户头像 */
+  avatar?: string;
+  /** 文件上传类型 */
+  fileUploadType?: string;
+}
+
+/** Tab 接口 */
+export interface TabItem {
+  /** 标签标题 */
+  title: string;
+  /** 路由路径 */
+  path: string;
+  /** 完整路径 */
+  fullPath?: string;
+  /** 路由查询参数 */
+  query?: Record<string, any>;
+  /** 路由name */
+  name?: string;
+  /** 缓存code */
+  cachedCode?: string;
+  /** 是否可关闭 */
+  closable?: boolean;
+}
+
+/** 域信息接口 */
+export interface DomainInfo {
+  /** 域名 */
+  domainName: string;
+  /** 域ID */
+  domainId?: string;
+  /** 其他属性 */
+  [key: string]: any;
+}
+
+/** 用户信息接口 */
+export interface UserInfo {
+  /** 用户名 */
+  userName?: string;
+  /** 头像 */
+  avatar?: string;
+  /** 其他属性 */
+  [key: string]: any;
+}
+
+/** SysHeader Props */
+export interface SysHeaderProps {
+  /** 用户配置 */
+  userConfig: UserConfig;
+  /** 菜单列表 */
+  menuList: HomeMenu[];
+  /** 当前应用 */
+  currentApplication: DomainInfo;
+  /** 是否显示子菜单抽屉 */
+  showSubmenuDrawer?: boolean;
+  /** 未读消息数量 */
+  noticeCount?: number;
+  /** 审批数量 */
+  approvalCount?: number;
+}
+
+/** SysHeaderTabs Props */
+export interface SysHeaderTabsProps {
+  /** 标签列表 */
+  tabs: TabItem[];
+  /** 当前激活的标签路径 */
+  activeTab: string;
+  /** 首页路径 */
+  homeUrl?: string;
+}
+
+/** PersonalizationGuide Props */
+export interface PersonalizationGuideProps {
+  /** 是否显示 */
+  visible: boolean;
+  /** 用户配置 */
+  userConfig: UserConfig;
+}
+
+export type { HomeMenu, NoticeVO };

package/src/components.ts

@@ -6,6 +6,10 @@ import AnnexUpload from './components/annex-upload/index.vue'
 import AnnexImgUpload from './components/annex-img-upload/index.vue'
 import ListSearchContent from './components/list-search-content/index.vue'
 import AnnexUploadWeijian from './components/annex-upload-weijian/index.vue'
+import BaseLayout from './components/base-layout/index.vue'
+
+// Layout components
+import { SysHeader, SysHeaderTabs, PersonalizationGuideDialog, SideMenu } from './components/layout'
 
 /**
  * 这里默认导出一个vue支持的install方法
@@ -18,13 +22,16 @@ import AnnexUploadWeijian from './components/annex-upload-weijian/index.vue'
 export default {
   install(app: App) {
     app.component("CustomButton", CustomButton);
-    // 如果还有更多的组件需要注册，可以在这里继续添加
     app.component("CustonSwitch", CustonSwitch);
     app.component("AnnexUpload", AnnexUpload);
     app.component("AnnexImgUpload", AnnexImgUpload);
     app.component("ListSearchContent", ListSearchContent);
     app.component("AnnexUploadWeijian", AnnexUploadWeijian);
-
+    app.component("BaseLayout", BaseLayout);
+    app.component("SysHeader", SysHeader);
+    app.component("SysHeaderTabs", SysHeaderTabs);
+    app.component("PersonalizationGuideDialog", PersonalizationGuideDialog);
+    app.component("SideMenu", SideMenu);
   }
 }
 
@@ -33,7 +40,10 @@ export default {
  * 为了将来支持类似这样按需使用 import {AnnexUpload} from "hrp-ui-base";
  * 有多少个组件就添加多少个组件
  */
-export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian };
+export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian, BaseLayout };
+
+// 重新导出布局组件
+export * from './components/layout';
 
 /**
  * 这里是重点，需要将这些组件在ts中声明为全局组件；
@@ -45,6 +55,11 @@ declare module "vue" {
     AnnexUpload: typeof AnnexUpload,
     AnnexImgUpload: typeof AnnexImgUpload,
     ListSearchContent: typeof ListSearchContent,
-    AnnexUploadWeijian: typeof AnnexUploadWeijian
+    AnnexUploadWeijian: typeof AnnexUploadWeijian,
+    BaseLayout: typeof BaseLayout,
+    SysHeader: typeof SysHeader,
+    SysHeaderTabs: typeof SysHeaderTabs,
+    PersonalizationGuideDialog: typeof PersonalizationGuideDialog,
+    SideMenu: typeof SideMenu
   }
 }