hrp-ui-base 1.0.1 → 1.0.3

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>

package/src/components/layout/SysHeaderTabs.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="top-tabs-header" @wheel="handleWheel">
+    <el-scrollbar ref="scrollbar" class="scroll-container">
+      <div ref="container" class="scrollbar-flex-content">
+        <div
+          v-for="item in tabs"
+          :key="item.path"
+          :ref="(el) => setTabRef(item.path, el)"
+          :class="{ active: activeTab === item.path }"
+          class="tags-view-item"
+        >
+          <span
+            class="tags-view-item-link"
+            @click="handleTabClick(item)"
+            @contextmenu.prevent="openMenu(item, $event)"
+          >
+            {{ item.name || item.title }}
+          </span>
+          <el-icon v-if="item.path !== homeUrl" @click="handleTabClose(item)">
+            <Close />
+          </el-icon>
+        </div>
+      </div>
+    </el-scrollbar>
+    <ul
+      v-show="visible"
+      :style="{ left: coord.left + 'px', top: coord.top + 'px' }"
+      class="contextmenu"
+    >
+      <li
+        v-if="selectedTag?.path !== homeUrl"
+        @click="handleTabClose(selectedTag!)"
+      >
+        关闭当前
+      </li>
+      <li @click="handleCloseOthers">关闭其他</li>
+      <li v-if="!isFirstView()" @click="handleCloseLeft">关闭左侧</li>
+      <li v-if="!isLastView()" @click="handleCloseRight">关闭右侧</li>
+      <li @click="handleCloseAll">全部关闭</li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, nextTick, PropType } from "vue";
+import { ElScrollbar } from "element-plus";
+import type { TabItem } from "./types";
+
+const props = defineProps({
+  tabs: {
+    type: Array as PropType<TabItem[]>,
+    default: () => []
+  },
+  activeTab: {
+    type: String,
+    default: ''
+  },
+  homeUrl: {
+    type: String,
+    default: '/application-entry'
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'tab-click', tab: TabItem): void
+  (e: 'tab-close', tab: TabItem): void
+  (e: 'tab-close-other', tab: TabItem): void
+  (e: 'tab-close-all'): void
+  (e: 'tab-close-left', tab: TabItem): void
+  (e: 'tab-close-right', tab: TabItem): void
+}>();
+
+const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const container = ref<HTMLElement>();
+const tabRefs = ref<Record<string, HTMLElement | null>>({});
+
+/** 右键菜单状态 */
+const visible = ref(false);
+const coord = ref({ left: 0, top: 0 });
+const selectedTag = ref<TabItem>();
+
+/** 设置标签引用 */
+function setTabRef(path: string, el: any) {
+  tabRefs.value["tag" + path] = el;
+}
+
+/** 点击标签 */
+function handleTabClick(tab: TabItem) {
+  emit('tab-click', tab);
+}
+
+/** 关闭标签 */
+function handleTabClose(tab: TabItem) {
+  if (tab.path === props.homeUrl) return;
+  emit('tab-close', tab);
+}
+
+/** 打开右键菜单 */
+function openMenu(tag: TabItem, e: MouseEvent) {
+  coord.value.left = e.clientX;
+  coord.value.top = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+}
+
+/** 关闭右键菜单 */
+function closeMenu() {
+  visible.value = false;
+}
+
+/** 关闭其他标签 */
+function handleCloseOthers() {
+  if (selectedTag.value) {
+    emit('tab-close-other', selectedTag.value);
+  }
+}
+
+/** 关闭全部标签 */
+function handleCloseAll() {
+  emit('tab-close-all');
+}
+
+/** 关闭左侧标签 */
+function handleCloseLeft() {
+  if (selectedTag.value) {
+    emit('tab-close-left', selectedTag.value);
+  }
+}
+
+/** 关闭右侧标签 */
+function handleCloseRight() {
+  if (selectedTag.value) {
+    emit('tab-close-right', selectedTag.value);
+  }
+}
+
+/** 是否是第一个标签 */
+function isFirstView(): boolean {
+  if (!selectedTag.value || props.tabs.length === 0) return true;
+  return selectedTag.value.path === props.tabs[0]?.path;
+}
+
+/** 是否是最后一个标签 */
+function isLastView(): boolean {
+  if (!selectedTag.value || props.tabs.length === 0) return true;
+  return selectedTag.value.path === props.tabs[props.tabs.length - 1]?.path;
+}
+
+/** 滚动到当前标签 */
+function scrollToActiveTab() {
+  nextTick(() => {
+    const activeTabRef = tabRefs.value["tag" + props.activeTab];
+    if (activeTabRef && scrollbar.value) {
+      const containerWidth = container.value?.offsetWidth || 0;
+      const tabLeft = activeTabRef.offsetLeft;
+      const tabWidth = activeTabRef.offsetWidth;
+      if (tabLeft + tabWidth > containerWidth) {
+        scrollbar.value.setScrollLeft(tabLeft - containerWidth + tabWidth + 20);
+      }
+    }
+  });
+}
+
+/** 处理鼠标滚轮事件 */
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  if (scrollbar.value) {
+    const wrapRef = scrollbar.value.wrapRef;
+    if (wrapRef) {
+      wrapRef.scrollLeft += event.deltaY;
+    }
+  }
+}
+
+/** 监听右键菜单显示状态 */
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener("click", closeMenu);
+  } else {
+    document.body.removeEventListener("click", closeMenu);
+  }
+});
+
+/** 监听 activeTab 变化滚动到对应位置 */
+watch(() => props.activeTab, () => {
+  scrollToActiveTab();
+});
+
+/** 暴露方法 */
+defineExpose({ scrollToActiveTab });
+</script>
+
+<style lang="scss" scoped>
+.top-tabs-header {
+  height: 32px;
+  position: relative;
+  overflow: visible;
+  box-sizing: border-box;
+  background: var(--custom-theme-fill-1);
+
+  :deep(.el-scrollbar) {
+    height: 32px;
+    overflow: visible;
+
+    .el-scrollbar__wrap {
+      overflow-x: scroll;
+      overflow-y: hidden;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    .el-scrollbar__bar.is-horizontal {
+      height: 6px;
+      bottom: -6px;
+      left: 0;
+      right: 0;
+      border-radius: 3px;
+      background-color: var(--custom-theme-fill-4);
+      .el-scrollbar__thumb {
+        background-color: var(--custom-theme-text-4);
+        border-radius: 3px;
+        &:hover { background-color: var(--custom-theme-text-3); }
+      }
+    }
+
+    .el-scrollbar__bar.is-vertical { display: none; }
+  }
+
+  .scrollbar-flex-content {
+    display: flex;
+    background: var(--custom-theme-fill-7);
+    height: 32px;
+    padding-top: 2px;
+  }
+
+  .tags-view-item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    height: 30px;
+    line-height: 30px;
+    border-right: 1px solid var(--custom-theme-border-3);
+    border-bottom: 1px solid var(--custom-theme-border-3);
+    color: var(--custom-theme-text-2);
+    background: var(--custom-theme-fill-7);
+    font-size: var(--el-menu-item-font-size);
+    padding: 0 10px;
+
+    .tags-view-item-link {
+      display: inline-block;
+      padding: 0 8px;
+    }
+  }
+
+  .tags-view-item.active {
+    background: var(--custom-main-bg-fill);
+    color: var(--custom-theme-normal-normal);
+    border-bottom: none;
+  }
+
+  .contextmenu {
+    margin: 0;
+    background: var(--custom-theme-fill-7);
+    z-index: 3000;
+    position: fixed;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--custom-theme-text-1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--custom-theme-border-3);
+
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: var(--custom-theme-fill-4);
+        color: var(--custom-theme-normal-normal);
+      }
+    }
+  }
+}
+</style>

package/src/components/layout/components/avatar-component.vue

@@ -0,0 +1,77 @@
+<!--
+ * @description: 用户头像组件
+ * @fileName: avatar-component.vue
+!-->
+<template>
+  <div>
+    <el-dropdown>
+      <div class="icon-box" style="border:none;margin-right: 10px;">
+        <img :src="(avatar ? avatar : AvatarDefaultImg)"
+          style="width: 30px;border-radius: 6px;" id="tourPersonalId">
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handlePersonalSignClick">个人签名</el-dropdown-item>
+        </el-dropdown-menu>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handleCleanCache">清理缓存</el-dropdown-item>
+        </el-dropdown-menu>
+        <el-dropdown-menu v-if="!isInDD && !isInOA">
+          <el-dropdown-item @click="handleExitLogin">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue'
+import AvatarDefaultImg from "../../../assets/layout/avatar-default.svg";
+import dd from "dingtalk-jsapi";
+
+const props = defineProps<{
+  avatar?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'personal-sign'): void
+  (e: 'clean-cache'): void
+  (e: 'logout'): void
+}>()
+
+const isInDD = ref<boolean>(false)
+const isInOA = ref<boolean>(false)
+const avatar = ref(props.avatar)
+
+import { watch } from 'vue'
+watch(() => props.avatar, (val) => { avatar.value = val })
+
+const handlePersonalSignClick = () => {
+  emit('personal-sign')
+}
+
+const handleCleanCache = () => {
+  emit('clean-cache')
+}
+
+const handleExitLogin = () => {
+  emit('logout')
+}
+
+onMounted(() => {
+  if (dd.env.platform !== "notInDingTalk") {
+    isInDD.value = true
+  } else {
+    isInDD.value = false
+  }
+  if ((window as any).oaTool && (window as any).oaTool.isOA) {
+    isInOA.value = true
+  } else {
+    isInOA.value = false
+  }
+})
+</script>
+
+<style scoped lang='scss'>
+@use '../styles/icon.scss';
+</style>

package/src/components/layout/components/dark-component.vue

@@ -0,0 +1,82 @@
+<!--
+ * @description: 昼夜模式切换组件
+ * @fileName: dark-component.vue
+!-->
+<template>
+  <div>
+    <!-- 昼夜模式 -->
+    <el-dropdown trigger="click" @visible-change="clickChange">
+      <div :class="'icon-box ' + (isClick ?'icon-box-active':'')" id="tourDarkId" ref="iconRef" @mouseenter="mouseEnterIcon"
+        @mouseleave="mouseLeaveIcon" @mousemove="mouseEnterIcon">
+        <img :src="sunDefaultIcon" v-if="!isClick">
+        <img :src="sunActiveIcon" v-if="isClick">
+      </div>
+      <template #dropdown>
+        <div class="flex-row-center common-switch-box">
+          <span>是否跟随系统</span>
+          <el-switch v-model="localFollowSystem" style="margin: 0 12px;"
+            @change="changeFollowSystem" :active-value="true" :inactive-value="false"/>
+        </div>
+        <div v-if="!localFollowSystem" class="flex-row-center common-switch-box" ref="changeDarkRef">
+          <span>黑夜模式</span>
+          <el-switch v-model="localDayOrNight"
+            style="--el-switch-on-color: #333333;--el-switch-off-color:var(--custom-theme-info-normal);--switch-border-color:#f3f3f3;margin: 0 12px;"
+            @change="handleDarkChange" active-action-icon="Moon"
+            inactive-action-icon="Sunny" active-value="night" inactive-value="day"/>
+        </div>
+      </template>
+    </el-dropdown>
+    <div class="popover-tooltip-custom" ref="popoverTooptipRef" v-show="isMouseEnter && !isClick" style="left: -50%;">
+      <div class="triangle-top"></div>
+      <div>昼夜模式切换</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import sunDefaultIcon from '../../../assets/layout/sun-default.svg'
+import sunActiveIcon from '../../../assets/layout/sun-active.svg'
+
+const props = defineProps<{
+  dayOrNight: string
+  followSystem: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'change-dark', value: string, ref?: HTMLElement): void
+  (e: 'change-follow-system', value: boolean): void
+}>()
+
+const isMouseEnter = ref(false)
+const isClick = ref(false)
+const changeDarkRef = ref<HTMLElement>()
+const localFollowSystem = ref(props.followSystem)
+const localDayOrNight = ref(props.dayOrNight)
+
+watch(() => props.followSystem, (val) => { localFollowSystem.value = val })
+watch(() => props.dayOrNight, (val) => { localDayOrNight.value = val })
+
+const mouseEnterIcon = () => { isMouseEnter.value = true }
+const mouseLeaveIcon = () => { isMouseEnter.value = false }
+
+const changeFollowSystem = () => {
+  emit('change-follow-system', localFollowSystem.value)
+}
+
+const handleDarkChange = () => {
+  emit('change-dark', localDayOrNight.value, changeDarkRef.value)
+}
+
+const popoverTooptipRef = ref()
+const iconRef = ref()
+
+const clickChange = (isVisiable: boolean) => {
+  isClick.value = isVisiable
+  isMouseEnter.value = false
+}
+</script>
+
+<style scoped lang='scss'>
+@use '../styles/icon.scss';
+</style>