hrp-ui-base 1.0.2 → 1.0.4

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>

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

@@ -0,0 +1,49 @@
+<!--
+ * @description: 下载中心（抽屉展示）
+ * @fileName: download-component.vue
+!-->
+<template>
+  <div>
+    <!-- 下载中心 -->
+    <div :class="'icon-box ' + (isActive ? 'icon-box-active' : '')" @click="showDownload" id="tourDownloadId"
+      @mouseenter="mouseEnterIcon" @mouseleave="mouseLeaveIcon" @mousemove="mouseEnterIcon" style="overflow: visible">
+      <img :src="downloadDefaultIcon" v-if="!isActive">
+      <img :src="downloadActiveIcon" v-if="isActive">
+    </div>
+    <div class="popover-tooltip-custom" ref="popoverTooptipRef" v-show="isMouseEnter && !isActive">
+      <div class="triangle-top"></div>
+      <div>下载中心</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import downloadDefaultIcon from '../../../assets/layout/download-default.svg'
+import downloadActiveIcon from '../../../assets/layout/download-active.svg'
+
+const props = defineProps<{
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const isMouseEnter = ref(false)
+const isActive = ref(props.active || false)
+
+watch(() => props.active, (val) => { isActive.value = !!val })
+
+const mouseEnterIcon = () => { isMouseEnter.value = true }
+const mouseLeaveIcon = () => { isMouseEnter.value = false }
+
+/** 点击下载中心 */
+const showDownload = () => {
+  emit('click')
+}
+</script>
+
+<style scoped lang='scss'>
+@use '../styles/icon.scss';
+</style>

package/src/components/layout/components/font-size-component.vue

@@ -0,0 +1,66 @@
+<!--
+ * @description: 字体大小调整组件
+ * @fileName: font-size-component.vue
+!-->
+<template>
+  <div>
+    <el-dropdown trigger="click" @visible-change="clickChange">
+      <div id="tourFontSizeId" :class="'icon-box ' + (isClick ? 'icon-box-active' : '')" @mouseenter="mouseEnterIcon"
+        @mouseleave="mouseLeaveIcon" @mousemove="mouseEnterIcon">
+        <img :src="fontDefaultIcon" v-if="!isClick">
+        <img :src="fontActiveIcon" v-if="isClick">
+      </div>
+      <template #dropdown>
+        <el-segmented @change="changeFontSize" v-model="localFontSize" :options="fontSizeOption"
+          size="default" />
+      </template>
+    </el-dropdown>
+    <div class="popover-tooltip-custom" ref="popoverTooptipRef" v-show="isMouseEnter && !isClick">
+      <div class="triangle-top"></div>
+      <div>字体大小</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import fontDefaultIcon from '../../../assets/layout/font-default.svg'
+import fontActiveIcon from '../../../assets/layout/font-active.svg'
+
+const props = defineProps<{
+  fontSize: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', size: string): void
+}>()
+
+const localFontSize = ref(props.fontSize)
+watch(() => props.fontSize, (val) => { localFontSize.value = val })
+
+/** 字体的选项 */
+const fontSizeOption = ref([
+  { label: '小', value: 'small' },
+  { label: '中', value: 'medium' },
+  { label: '大', value: 'large' },
+])
+
+const isMouseEnter = ref(false)
+const isClick = ref(false)
+
+const mouseEnterIcon = () => { isMouseEnter.value = true }
+const mouseLeaveIcon = () => { isMouseEnter.value = false }
+
+const clickChange = (isVisiable: boolean) => {
+  isClick.value = isVisiable
+  isMouseEnter.value = false
+}
+
+const changeFontSize = (size: string | number | boolean) => {
+  emit('change', size as string)
+}
+</script>
+
+<style scoped lang='scss'>
+@use '../styles/icon.scss';
+</style>

package/src/components/layout/components/menu-position-component.vue

@@ -0,0 +1,97 @@
+<!--
+ * @description: 菜单栏位置配置
+ * @fileName: menu-position-component.vue
+!-->
+<template>
+  <div>
+    <el-dropdown trigger="click" @visible-change="clickChange">
+      <div
+        id="tourMenuPositionId"
+        :class="'icon-box menu-position-icon ' + (isClick ? 'icon-box-active' : '')"
+        @mouseenter="mouseEnterIcon"
+        @mouseleave="mouseLeaveIcon"
+        @mousemove="mouseEnterIcon"
+      >
+        <img :src="menuPositionDefaultIcon" v-if="!isClick" />
+        <img :src="menuPositionActiveIcon" v-if="isClick" />
+      </div>
+      <template #dropdown>
+        <div class="menu-position-dropdown">
+          <span>菜单栏位置</span>
+          <el-segmented
+            v-model="localMenuPosition"
+            :options="menuPositionOption"
+            size="default"
+            @change="changeMenuPosition"
+          />
+        </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 menuPositionDefaultIcon from '../../../assets/layout/menu-position-default.svg'
+import menuPositionActiveIcon from '../../../assets/layout/menu-position-active.svg'
+
+const props = defineProps<{
+  menuPosition: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'change', value: string): void
+}>()
+
+const localMenuPosition = ref(props.menuPosition)
+watch(() => props.menuPosition, (val) => { localMenuPosition.value = val })
+
+/** 菜单栏位置选项 */
+const menuPositionOption = ref([
+  { label: "顶部", value: "top" },
+  { label: "左侧", value: "left" },
+]);
+
+const isMouseEnter = ref(false);
+const isClick = ref(false);
+const popoverTooptipRef = ref();
+
+const mouseEnterIcon = () => { isMouseEnter.value = true };
+const mouseLeaveIcon = () => { isMouseEnter.value = false };
+
+const clickChange = (isVisiable: boolean) => {
+  isClick.value = isVisiable;
+  isMouseEnter.value = false;
+};
+
+const changeMenuPosition = (menuPosition: string | number | boolean) => {
+  emit('change', menuPosition as string);
+};
+</script>
+
+<style scoped lang="scss">
+@use '../styles/icon.scss';
+
+.menu-position-dropdown {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  white-space: nowrap;
+}
+
+.menu-position-icon {
+  img {
+    width: 23px;
+  }
+}
+</style>