hrp-ui-base 1.4.7 → 1.4.8

package/src/components/layout/SysHeader.vue

@@ -1,90 +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>
+<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

@@ -1,114 +1,114 @@
-<template>
-  <div class="sys-header-left" ref="headerLeftRef">
-    <img
-      ref="logoRef"
-      src="../../assets/layout/single.png"
-      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="top"
-        :show-submenu-drawer="showSubmenuDrawer"
-        :currentPath="currentPath"
-        @parent-click="(item, index) => emit('parent-click', item, index)"
-        @menu-item-click="(item) => emit('menu-item-click', item)"
-      />
-    </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>
+<template>
+  <div class="sys-header-left" ref="headerLeftRef">
+    <img
+      ref="logoRef"
+      src="../../assets/layout/single.png"
+      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="top"
+        :show-submenu-drawer="showSubmenuDrawer"
+        :currentPath="currentPath"
+        @parent-click="(item, index) => emit('parent-click', item, index)"
+        @menu-item-click="(item) => emit('menu-item-click', item)"
+      />
+    </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

@@ -1,112 +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>
+<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>