hrp-ui-base 1.4.7 → 1.4.9

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

@@ -1,77 +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>
+<!--
+ * @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

@@ -1,82 +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>
+<!--
+ * @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

@@ -1,49 +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>
+<!--
+ * @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

@@ -1,66 +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>
+<!--
+ * @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>