hrp-ui-base 1.0.2 → 1.0.4

package/src/assets/layout/user-default.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29" height="29" viewBox="0 0 29 29">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #909399;
+      }
+    </style>
+  </defs>
+  <g id="组_60" data-name="组 60" transform="translate(-1878 -19)">
+    <rect id="头像_男孩" data-name="头像 男孩" class="cls-1" width="29" height="29" rx="5" transform="translate(1878 19)"/>
+    <image id="个人中心" width="17" height="17" transform="translate(1884 25)" xlink:href="data:image/png;base64,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"/>
+  </g>
+</svg>

package/src/components/base-layout/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="big-box-outer">
+    <el-container id="common-layout">
+      <!-- 顶部导航栏插槽 -->
+      <slot name="header"></slot>
+      <!-- 额外内容插槽（如个性化引导弹窗等） -->
+      <slot name="extra"></slot>
+
+      <!-- 左侧菜单布局 -->
+      <div v-if="isLeftMenu" class="layout-content is-left-menu">
+        <slot name="side-menu"></slot>
+        <div class="layout-main-column">
+          <slot name="tabs"></slot>
+          <transition name="width-change">
+            <el-main
+              class="common-layout-main"
+              style="padding: 6px 10px; background: var(--custom-main-bg-fill)"
+            >
+              <el-main
+                class="common-workbench-main hide-scroll-bar"
+                style="border-radius: 12px"
+              >
+                <slot></slot>
+              </el-main>
+            </el-main>
+          </transition>
+        </div>
+      </div>
+
+      <!-- 顶部菜单布局 -->
+      <template v-else>
+        <slot name="tabs"></slot>
+        <div class="layout-content">
+          <transition name="width-change">
+            <el-main
+              class="common-layout-main"
+              style="padding: 6px 10px; background: var(--custom-main-bg-fill)"
+            >
+              <el-main
+                class="common-workbench-main hide-scroll-bar"
+                style="border-radius: 12px"
+              >
+                <slot></slot>
+              </el-main>
+            </el-main>
+          </transition>
+        </div>
+      </template>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "BaseLayout",
+});
+
+defineProps({
+  /**
+   * 是否使用左侧菜单布局
+   */
+  isLeftMenu: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.big-box-outer {
+  width: 100%;
+  min-width: 850px;
+  overflow: auto;
+}
+
+/** 隐藏滚动条 */
+#common-layout,
+.common-layout-main {
+  overflow: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  background: var(--custom-theme-fill-7);
+}
+
+#common-layout::-webkit-scrollbar,
+.common-layout-main::-webkit-scrollbar {
+  display: none;
+}
+
+#common-layout {
+  height: 100%;
+  width: 100%;
+  min-width: 600px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  .common-layout {
+    .common-layout-header {
+      width: 100%;
+    }
+
+    .common-layout-main {
+      width: 100%;
+      box-sizing: border-box;
+      height: calc(100% - 78px) !important;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.layout-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  background: var(--custom-theme-fill-7);
+
+  .common-layout-main {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.layout-main-column {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-content.is-left-menu {
+  .common-workbench-main {
+    border-left: none;
+  }
+
+  .common-layout-main {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.common-workbench-main {
+  height: calc(100%);
+  box-sizing: border-box;
+  padding: 0;
+  background: var(--custom-theme-fill-4);
+  border-left: 1px solid var(--el-border-color);
+}
+
+.common-workbench-main-rv {
+  height: calc(100% - 24px);
+  width: 100%;
+}
+
+/* 移动端 */
+@media only screen and (max-device-width: 640px) {
+  .common-layout-header {
+    display: none;
+  }
+
+  #common-layout {
+    height: 100%;
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .common-layout-main {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden;
+  }
+
+  .common-workbench-main {
+    height: 100%;
+    width: 100%;
+  }
+
+  .el-main {
+    padding: 0 !important;
+  }
+}
+
+/* pad端 */
+@media screen and (min-device-width: 640px) and (max-device-width: 1000px) {
+}
+</style>

package/src/components/layout/SysHeader.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="system-header flex-row-between">
+    <SysHeaderLeft
+      :menuList="menuList"
+      :currentApplication="currentApplication"
+      :menuPosition="userConfig.menuPosition"
+      :currentPath="currentPath"
+      :navigationBar="userConfig.navigationBar"
+      :showSubmenuDrawer="showSubmenuDrawer"
+      @menu-item-click="(item) => emit('menu-item-click', item)"
+      @parent-click="(item, index) => emit('parent-click', item, index)"
+      @logo-click="emit('logo-click')"
+      @collapse-change="(val) => emit('collapse-change', val)"
+    />
+    <SysHeaderRight
+      :userConfig="userConfig"
+      :noticeCount="noticeCount"
+      :approvalCount="approvalCount"
+      :avatar="userConfig.avatar"
+      :downloadActive="downloadActive"
+      :todoActive="todoActive"
+      @change-dark="(val, ref) => emit('change-dark', val, ref)"
+      @change-follow-system="(val) => emit('change-follow-system', val)"
+      @change-font-size="(val) => emit('change-font-size', val)"
+      @change-menu-position="(val) => emit('change-menu-position', val)"
+      @download-click="emit('download-click')"
+      @todo-click="emit('todo-click')"
+      @message-click="(val) => emit('message-click', val)"
+      @message-navigate="(notice) => emit('message-navigate', notice)"
+      @message-download="(notice) => emit('message-download', notice)"
+      @message-update-count="emit('message-update-count')"
+      @personal-sign="emit('personal-sign')"
+      @clean-cache="emit('clean-cache')"
+      @logout="emit('logout')"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { PropType } from "vue";
+import SysHeaderRight from "./SysHeaderRight.vue";
+import SysHeaderLeft from "./SysHeaderLeft.vue";
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+import type { UserConfig, DomainInfo } from "./types";
+
+defineProps({
+  userConfig: { type: Object as PropType<UserConfig>, required: true },
+  menuList: { type: Array as PropType<HomeMenu[]>, default: () => [] },
+  currentApplication: { type: Object as PropType<DomainInfo>, default: () => ({ domainName: '-' }) },
+  currentPath: { type: String, default: '' },
+  showSubmenuDrawer: { type: Boolean, default: true },
+  noticeCount: { type: Number, default: 0 },
+  approvalCount: { type: Number, default: 0 },
+  downloadActive: { type: Boolean, default: false },
+  todoActive: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  (e: 'menu-item-click', item: HomeMenu): void
+  (e: 'parent-click', item: HomeMenu, index: number): void
+  (e: 'logo-click'): void
+  (e: 'collapse-change', collapsed: boolean): void
+  (e: 'change-dark', value: string, ref?: HTMLElement): void
+  (e: 'change-follow-system', value: boolean): void
+  (e: 'change-font-size', value: string): void
+  (e: 'change-menu-position', value: string): void
+  (e: 'download-click'): void
+  (e: 'todo-click'): void
+  (e: 'message-click', isOpen: boolean): void
+  (e: 'message-navigate', notice: NoticeVO): void
+  (e: 'message-download', notice: NoticeVO): void
+  (e: 'message-update-count'): void
+  (e: 'personal-sign'): void
+  (e: 'clean-cache'): void
+  (e: 'logout'): void
+}>();
+</script>
+<style scoped lang="scss">
+.system-header {
+  width: 100%;
+  height: 50px;
+  background: var(--custom-theme-bg-0);
+  border-radius: 0;
+  border-bottom: 1px solid var(--el-border-color);
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/src/components/layout/SysHeaderLeft.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="sys-header-left" ref="headerLeftRef">
+    <img
+      ref="logoRef"
+      src="../../assets/layout/avatar-default.svg"
+      style="width: 30px;height: 30px;cursor: pointer;"
+      @click="emit('logo-click')"
+    />
+    <span class="sys-left-area-title" ref="titleRef">
+      {{ currentApplication.domainName || "-" }}
+    </span>
+    <div
+      class="second-menu-list"
+      ref="secondMenuRef"
+      :style="{ width: secondMenuWidth + 'px' }"
+      v-if="Array.isArray(menuList) && menuList.length > 0"
+    >
+      <SideMenu
+        :menuList="menuList"
+        :menuPosition="menuPosition"
+        :show-submenu-drawer="showSubmenuDrawer"
+        :currentPath="currentPath"
+        :navigationBar="navigationBar"
+        @parent-click="(item, index) => emit('parent-click', item, index)"
+        @menu-item-click="(item) => emit('menu-item-click', item)"
+        @collapse-change="(val) => emit('collapse-change', val)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, nextTick, watch, PropType } from "vue";
+import SideMenu from "./sideMenu.vue";
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+import type { DomainInfo } from "./types";
+
+const props = defineProps({
+  menuList: { type: Array as PropType<HomeMenu[]>, default: () => [] },
+  currentApplication: { type: Object as PropType<DomainInfo>, default: () => ({ domainName: '-' }) },
+  menuPosition: { type: String as PropType<"top" | "left">, default: "top" },
+  currentPath: { type: String, default: '' },
+  showSubmenuDrawer: { type: Boolean, default: true },
+  navigationBar: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  (e: 'parent-click', item: HomeMenu, index: number): void
+  (e: 'menu-item-click', item: HomeMenu): void
+  (e: 'logo-click'): void
+  (e: 'collapse-change', collapsed: boolean): void
+}>();
+
+const headerLeftRef = ref<HTMLElement | null>(null);
+const logoRef = ref<HTMLImageElement | null>(null);
+const titleRef = ref<HTMLElement | null>(null);
+const secondMenuRef = ref<HTMLElement | null>(null);
+const secondMenuWidth = ref<number>(0);
+
+const calculateSecondMenuWidth = () => {
+  if (!headerLeftRef.value || !logoRef.value || !titleRef.value) return;
+  const headerLeftWidth = headerLeftRef.value.offsetWidth;
+  const logoWidth = logoRef.value.offsetWidth;
+  const titleWidth = titleRef.value.offsetWidth;
+  const marginOffset = 16;
+  secondMenuWidth.value = Math.max(headerLeftWidth - logoWidth - titleWidth - marginOffset, 0);
+};
+
+const handleResize = () => { calculateSecondMenuWidth(); };
+
+onMounted(async () => {
+  await nextTick();
+  calculateSecondMenuWidth();
+  window.addEventListener('resize', handleResize);
+});
+
+watch(() => props.menuPosition, async () => {
+  await nextTick();
+  calculateSecondMenuWidth();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+<style scoped lang="scss">
+.sys-header-left {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  flex-direction: row;
+  margin-left: 19px;
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+}
+
+.second-menu-list {
+  margin-left: 10px;
+  padding: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sys-left-area-title {
+  color: var(--custom-theme-text-1);
+  font-size: 18px;
+  font-weight: 500;
+  margin-left: 6px;
+  width: auto;
+  color: var(--header-system-big-title);
+  white-space: nowrap;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+</style>

package/src/components/layout/SysHeaderRight.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="sys-header-right">
+    <!-- 下载中心 -->
+    <DownloadComponent :active="downloadActive" @click="emit('download-click')" />
+    <!-- 审批中心 -->
+    <TodoComponent :approvalCount="approvalCount" :active="todoActive" @click="emit('todo-click')" />
+    <!-- 消息 -->
+    <MessageComponent
+      :noticeCount="noticeCount"
+      ref="messageComponentRef"
+      @click="handleMessageClick"
+    />
+    <!-- 昼夜模式 -->
+    <DarkComponent
+      :dayOrNight="userConfig.dayOrNight"
+      :followSystem="userConfig.followSystem"
+      @change-dark="(val, ref) => emit('change-dark', val, ref)"
+      @change-follow-system="(val) => emit('change-follow-system', val)"
+    />
+    <!-- 菜单栏位置 -->
+    <MenuPositionComponent
+      :menuPosition="userConfig.menuPosition"
+      @change="(val) => emit('change-menu-position', val)"
+    />
+    <!-- 修改字体 -->
+    <FontSizeComponent
+      :fontSize="userConfig.fontSize"
+      @change="(val) => emit('change-font-size', val)"
+    />
+    <!-- 个人信息 -->
+    <AvatarComponent
+      :avatar="avatar"
+      @personal-sign="emit('personal-sign')"
+      @clean-cache="emit('clean-cache')"
+      @logout="emit('logout')"
+    />
+    <!-- 消息通知抽屉 -->
+    <MessageNotificationDrawer
+      ref="messageDrawerRef"
+      @close="handleMessageClose"
+      @update-count="emit('message-update-count')"
+      @navigate="(notice) => emit('message-navigate', notice)"
+      @download="(notice) => emit('message-download', notice)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from "vue";
+import TodoComponent from './components/todo-component.vue'
+import MessageComponent from './components/message-component.vue'
+import DownloadComponent from './components/download-component.vue'
+import DarkComponent from './components/dark-component.vue'
+import FontSizeComponent from './components/font-size-component.vue'
+import MenuPositionComponent from './components/menu-position-component.vue'
+import AvatarComponent from './components/avatar-component.vue'
+import MessageNotificationDrawer from './message/message-notification-drawer.vue'
+import type { UserConfig } from "./types";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+
+defineProps({
+  userConfig: { type: Object as PropType<UserConfig>, required: true },
+  noticeCount: { type: Number, default: 0 },
+  approvalCount: { type: Number, default: 0 },
+  avatar: { type: String, default: '' },
+  downloadActive: { type: Boolean, default: false },
+  todoActive: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  (e: 'change-dark', value: string, ref?: HTMLElement): void
+  (e: 'change-follow-system', value: boolean): void
+  (e: 'change-font-size', value: string): void
+  (e: 'change-menu-position', value: string): void
+  (e: 'download-click'): void
+  (e: 'todo-click'): void
+  (e: 'message-click', isOpen: boolean): void
+  (e: 'message-navigate', notice: NoticeVO): void
+  (e: 'message-download', notice: NoticeVO): void
+  (e: 'message-update-count'): void
+  (e: 'personal-sign'): void
+  (e: 'clean-cache'): void
+  (e: 'logout'): void
+}>();
+
+const messageComponentRef = ref()
+const messageDrawerRef = ref()
+
+const handleMessageClick = (isOpen: boolean) => {
+  emit('message-click', isOpen)
+  if (isOpen) {
+    messageDrawerRef.value?.open()
+  } else {
+    messageDrawerRef.value?.close()
+  }
+}
+
+const handleMessageClose = () => {
+  messageComponentRef.value?.close()
+}
+</script>
+<style scoped lang="scss">
+.sys-header-right {
+  width: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  flex-direction: row;
+  margin-right: 9px;
+}
+</style>