hy-app 0.2.6 → 0.2.7

package/components/hy-float-button/hy-float-button.vue

@@ -75,7 +75,8 @@ import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, toRef
 import type IProps from './typing'
 import type { MenusType } from './typing'
 import defaultProps from './props'
-import { addUnit, getPx, getRect, getWindowInfo, guid, isH5 } from '../../utils'
+import { addUnit, getPx, getRect, guid, isH5 } from '../../utils'
+import { HyApp } from '../../typing/modules/common'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -86,8 +87,6 @@ const {
   menus,
   customStyle,
   gap,
-  left,
-  top,
   zIndex,
   bgColor,
   text,
@@ -96,11 +95,12 @@ const {
   fixed,
   direction,
   draggable,
+  position,
+  expandable,
 } = toRefs(props)
 const emit = defineEmits(['click', 'clickItem'])
 
 const instance = getCurrentInstance()
-const { windowWidth } = getWindowInfo()
 const btnSize: AnyObject = {
   small: '50px',
   medium: '60px',
@@ -109,16 +109,94 @@ const btnSize: AnyObject = {
 const open = ref(false)
 const rotate = computed(() => (open.value && !text.value ? '45deg' : '0deg'))
 const soleId = `hy-float-button__${guid()}`
-const showLeft = ref(false)
 const fabSize = reactive({ width: 0, height: 0 }) // 悬浮按钮大小
 const screen = reactive({ width: 0, height: 0 })
 const currentCoordinate = reactive({
-  top: gap.value.top,
-  left: gap.value.left,
+  top: 0,
+  left: 0,
 })
 // 按下时坐标相对于元素的偏移量
 const touchOffset = reactive({ x: 0, y: 0 })
 const attractTransition = ref<boolean>(false)
+const fabDirection = ref<HyApp.LeftRightType>('left')
+const fabDirection2 = ref<HyApp.TopBottomType>('top')
+const bounding = reactive({
+  minLeft: 10,
+  minTop: 10,
+  maxLeft: 380,
+  maxTop: 680,
+})
+
+onMounted(async () => {
+  await getFatRect()
+  await getBounding()
+  initPosition()
+})
+
+watch(
+  () => position.value,
+  () => initPosition(),
+)
+
+/**
+ * @description 初始化距离
+ * */
+const initPosition = () => {
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (position.value) {
+    case 'left-top':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'top'
+      break
+    case 'right-top':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'top'
+      break
+    case 'left-bottom':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+    case 'right-bottom':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'bottom'
+      break
+    case 'left-center':
+      currentCoordinate.top = centerY
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+    case 'right-center':
+      currentCoordinate.top = centerY
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'bottom'
+      break
+    case 'top-center':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = centerX
+      fabDirection.value = 'left'
+      fabDirection2.value = 'top'
+      break
+    case 'bottom-center':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = centerX
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+  }
+}
 
 /**
  * @description 获取组件大小
@@ -136,8 +214,8 @@ const getFloatBtnSize = computed(() => {
  * */
 const FloatButtonStyle = computed(() => {
   const style: CSSProperties = {
-    top: addUnit(currentCoordinate.top),
-    left: addUnit(currentCoordinate.left),
+    top: currentCoordinate.top + 'px',
+    left: currentCoordinate.left + 'px',
     backgroundColor: bgColor.value,
     zIndex: zIndex.value,
     color: textColor.value,
@@ -156,7 +234,7 @@ const menusStyle = computed(() => {
 
   // 判断横向展示还是纵向展示
   if (direction.value === 'row') {
-    if (showLeft.value) {
+    if (fabDirection.value === 'right') {
       style.transform = 'translateX(-100%)'
       style.left = '100%'
       style.paddingRight = getFloatBtnSize.value
@@ -171,33 +249,34 @@ const menusStyle = computed(() => {
       ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
       : 0
   } else {
-    style.bottom = 0
-    style.left = 0
+    if (fabDirection2.value === 'top') {
+      style.transform = 'translateX(-100%)'
+      style.height = '100%'
+      style.left = getFloatBtnSize.value
+      style.top = '0px'
+      style.paddingTop = getFloatBtnSize.value
+    } else {
+      style.paddingBottom = getFloatBtnSize.value
+      style.bottom = 0
+    }
     style.transition = 'height 0.5s ease'
     style.width = getFloatBtnSize.value
     style.height = open.value
       ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
       : 0
-    style.paddingBottom = getFloatBtnSize.value
   }
   return style
 })
 
-onMounted(async () => {
-  await getFatRect()
-  getBounding()
-})
-
 /**
  * @description 获取悬浮按钮大小
  * */
 const getFatRect = () => {
   return new Promise((resolve, reject) => {
     getRect(`#${soleId}`, false, instance).then((rect) => {
-      const { left, width, height } = rect as UniApp.NodeInfo
+      const { width, height } = rect as UniApp.NodeInfo
       fabSize.width = width
       fabSize.height = height
-      if (left && left > windowWidth / 2) showLeft.value = true
       resolve(rect)
     })
   })
@@ -208,7 +287,9 @@ const getFatRect = () => {
  * */
 const handleClick = () => {
   emit('click')
-  open.value = !open.value
+  if (expandable.value) {
+    open.value = !open.value
+  }
 }
 
 /**
@@ -225,23 +306,20 @@ const handleMenuItemClick = (temp: MenusType, index: number) => {
 }
 
 const getBounding = () => {
-  const sysInfo = uni.getSystemInfoSync()
+  return new Promise((resolve) => {
+    const sysInfo = uni.getSystemInfoSync()
 
-  const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
-  screen.width = sysInfo.windowWidth
-  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
-  bounding.minTop = isH5 ? sysInfo.windowTop + top : top
-  bounding.minLeft = left
-  bounding.maxLeft = screen.width - fabSize.width - right
-  bounding.maxTop = screen.height - fabSize.height - bottom
+    const { top = 16, left = 16, right = 16, bottom = 16 } = gap.value
+    screen.width = sysInfo.windowWidth
+    screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+    bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+    bounding.minLeft = left
+    bounding.maxLeft = screen.width - fabSize.width - right
+    bounding.maxTop = screen.height - fabSize.height - bottom
+    resolve(bounding)
+  })
 }
 
-const bounding = {
-  minLeft: 10,
-  minTop: 10,
-  maxLeft: 380,
-  maxTop: 680,
-}
 const handleTouchStart = (e: TouchEvent) => {
   if (!draggable.value) return
 
@@ -277,10 +355,10 @@ function handleTouchEnd() {
   attractTransition.value = true
   if (fabCenterX < screenCenterX) {
     currentCoordinate.left = bounding.minLeft
-    // fabDirection.value = 'right'
+    fabDirection.value = 'left'
   } else {
     currentCoordinate.left = bounding.maxLeft
-    // fabDirection.value = 'left'
+    fabDirection.value = 'right'
   }
 }
 </script>

package/components/hy-float-button/props.ts

@@ -7,9 +7,7 @@ const defaultProps: IProps = {
   icon: IconConfig.PLUS,
   iconSize: '',
   iconColor: '',
-  gap: { left: 16, right: 16 },
-  top: 80,
-  left: 20,
+  gap: { left: 16, right: 16, top: 16, bottom: 40 },
   zIndex: 10086,
   bgColor: '',
   text: '',
@@ -22,6 +20,8 @@ const defaultProps: IProps = {
   float: true,
   fixed: true,
   draggable: true,
+  position: 'right-bottom',
+  expandable: true,
 }
 
 export default defaultProps

package/components/hy-float-button/typing.d.ts

@@ -19,6 +19,16 @@ export type IGap = {
   bottom?: number
 }
 
+export type FloatPositionVo =
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom'
+  | 'left-center'
+  | 'right-center'
+  | 'top-center'
+  | 'bottom-center'
+
 export default interface HyFloatButtonProps {
   /**
    * @description 菜单栏集合
@@ -40,15 +50,10 @@ export default interface HyFloatButtonProps {
    * @description 按钮图标颜色
    * */
   iconColor?: string
-  gap?: IGap
   /**
-   * @description 按钮距离底部的距离，默认单位为px
+   * @description 到边框最小距离
    * */
-  top?: number | string
-  /**
-   * @description 按钮距离左边的距离，默认单位为px
-   * */
-  left?: number | string
+  gap?: IGap
   /**
    * @description 层级（默认：10086）
    * */
@@ -97,6 +102,14 @@ export default interface HyFloatButtonProps {
    * @description 是否能拖动（默认：true）
    * */
   draggable?: boolean
+  /**
+   * @description 悬浮按钮位置 （默认：right-bottom）
+   * */
+  position?: FloatPositionVo
+  /**
+   * @description 禁用点击打开菜单栏
+   * */
+  expandable?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-icon/hy-icon.vue

@@ -5,7 +5,7 @@
       v-if="isImg"
       :src="name"
       :mode="imgMode"
-      :style="[imgStyle]"
+      :style="[imgStyle, customStyle]"
     ></image>
     <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->

package/components/hy-image/hy-image.vue

@@ -1,15 +1,6 @@
 <template>
-  <HyTransition
-    mode="fade"
-    :show="show"
-    :style="transStyle"
-    :duration="fade ? 1000 : 0"
-  >
-    <view
-      class="hy-image box-border"
-      @tap="clickHandler"
-      :style="[wrapStyle, backgroundStyle]"
-    >
+  <HyTransition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+    <view class="hy-image box-border" @tap="clickHandler" :style="[wrapStyle, backgroundStyle]">
       <image
         v-if="!isError"
         :src="src"
@@ -18,11 +9,11 @@
         @load="onLoadHandler"
         :show-menu-by-longpress="showMenuByLongPress"
         :lazy-load="lazyLoad"
-        class="hy-image__image"
+        :class="['hy-image__url', indistinct && 'hy-image__indistinct']"
         :style="{
           width: addUnit(width),
           height: addUnit(height),
-          borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
+          borderRadius: shape == 'circle' ? '1000px' : addUnit(radius),
         }"
       ></image>
       <view
@@ -36,7 +27,7 @@
         }"
       >
         <slot name="loading">
-          <HyIcon :name="loadingIcon"></HyIcon>
+          <HyLoading :name="loadingIcon"></HyLoading>
         </slot>
       </view>
       <view
@@ -47,7 +38,7 @@
         }"
       >
         <slot name="error">
-          <HyIcon :name="errorIcon"></HyIcon>
+          <HyIcon :name="errorIcon" size="30"></HyIcon>
         </slot>
       </view>
     </view>
@@ -56,34 +47,27 @@
 
 <script lang="ts">
 export default {
-  name: "hy-image",
+  name: 'hy-image',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  onMounted,
-  ref,
-  toRefs,
-  watch,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getPx } from "../../utils";
+import { computed, type CSSProperties, onMounted, ref, toRefs, watch } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import { addUnit, getPx } from '../../utils'
 
 // 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyLoading from '../hy-loading/hy-loading.vue'
 
-import HyTransition from "../hy-transition/hy-transition.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
-
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   customStyle,
   duration,
@@ -95,133 +79,114 @@ const {
   radius,
   bgColor,
   previewImage,
-} = toRefs(props);
-const emit = defineEmits(["click", "error", "load"]);
+  indistinct,
+} = toRefs(props)
+const emit = defineEmits(['click', 'error', 'load'])
 
 // 图片是否加载错误，如果是，则显示错误占位图
-const isError = ref(false);
+const isError = ref(false)
 // 初始化组件时，默认为加载中状态
-const loading = ref(true);
+const loading = ref(true)
 // 不透明度，为了实现淡入淡出的效果
-const opacity = ref(1);
+const opacity = ref(1)
 // 过渡时间，因为props的值无法修改，故需要一个中间值
-const durationTime = ref(duration.value);
+const durationTime = ref(duration.value)
 // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
-const backgroundStyle = ref({});
+const backgroundStyle = ref({})
 // 用于fade模式的控制组件显示与否
-const show = ref(false);
+const show = ref(false)
 
 watch(
   () => src.value,
   (newValue) => {
     if (!newValue) {
       // 如果传入null或者''，或者false，或者undefined，标记为错误状态
-      isError.value = true;
+      isError.value = true
+      loading.value = false
     } else {
-      isError.value = false;
-      loading.value = true;
+      isError.value = false
+      loading.value = true
     }
   },
   { immediate: true },
-);
+)
 
 const transStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  if (
-    loading.value ||
-    isError.value ||
-    width.value == "100%" ||
-    mode.value != "heightFix"
-  ) {
-    style.width = addUnit(width.value);
+  const style: CSSProperties = {}
+  if (loading.value || isError.value || width.value == '100%' || mode.value != 'heightFix') {
+    style.width = addUnit(width.value)
   } else {
-    style.width = "fit-content";
+    style.width = 'fit-content'
   }
-  if (
-    loading.value ||
-    isError.value ||
-    height.value == "100%" ||
-    mode.value != "widthFix"
-  ) {
-    style.height = addUnit(height.value);
+  if (loading.value || isError.value || height.value == '100%' || mode.value != 'widthFix') {
+    style.height = addUnit(height.value)
   } else {
-    style.height = "fit-content";
+    style.height = 'fit-content'
   }
-  return style;
-});
+  return style
+})
 
 const wrapStyle = computed(() => {
-  const style: CSSProperties = {};
-  if (
-    loading.value ||
-    isError.value ||
-    width.value == "100%" ||
-    mode.value != "heightFix"
-  ) {
-    style.width = addUnit(width.value);
+  const style: CSSProperties = {}
+  if (loading.value || isError.value || width.value == '100%' || mode.value != 'heightFix') {
+    style.width = addUnit(width.value)
   } else {
-    style.width = "fit-content";
+    style.width = 'fit-content'
   }
-  if (
-    loading.value ||
-    isError.value ||
-    height.value == "100%" ||
-    mode.value != "widthFix"
-  ) {
-    style.height = addUnit(height.value);
+  if (loading.value || isError.value || height.value == '100%' || mode.value != 'widthFix') {
+    style.height = addUnit(height.value)
   } else {
-    style.height = "fit-content";
+    style.height = 'fit-content'
   }
   // 如果是显示圆形，设置一个很多的半径值即可
-  style.borderRadius =
-    shape.value == "circle" ? "10000px" : addUnit(radius.value);
+  style.borderRadius = shape.value == 'circle' ? '10000px' : addUnit(radius.value)
   // 如果设置圆角，必须要有hidden，否则可能圆角无效
-  style.overflow = getPx(radius.value) > 0 ? "hidden" : "visible";
+  style.overflow = getPx(radius.value) > 0 ? 'hidden' : 'visible'
 
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 
 onMounted(() => {
-  show.value = true;
-});
+  show.value = true
+})
 
 const clickHandler = () => {
-  emit("click");
+  emit('click')
 
   if (previewImage.value) {
     uni.previewImage({
       urls: [src.value],
-    });
+    })
   }
-};
+}
 
 /**
  * @description 图片加载失败
  * */
 const onErrorHandler = (err: Event) => {
-  loading.value = false;
-  isError.value = true;
-  emit("error", err);
-};
+  loading.value = false
+  isError.value = true
+  emit('error', err)
+}
 
 /**
  * @description 图片加载成功
  * */
 const onLoadHandler = (e: Event) => {
-  loading.value = false;
-  isError.value = false;
-  emit("load", e);
-  removeBgColor();
-};
+  loading.value = false
+  isError.value = false
+  emit('load', e)
+  removeBgColor()
+}
 
 const removeBgColor = () => {
   // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
   backgroundStyle.value = {
-    backgroundColor: bgColor.value || "",
-  };
-};
+    backgroundColor: bgColor.value || '',
+  }
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-image/index.scss

@@ -4,14 +4,31 @@
 @include b(image) {
   position: relative;
   transition: opacity 0.5s ease-in-out;
+  width: 250px;
+  height: 200px;
 
-  &__image {
+  @include e(url) {
     width: 100%;
     height: 100%;
   }
+  @include e(indistinct) {
+    position: relative;
+    @include pseudo(after) {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.2); /* 半透明背景 */
+      backdrop-filter: blur(6px); /* 磨砂效果 */
+      filter: blur(6px);
+      -webkit-filter: blur(6px); /* 兼容 iOS */
+      z-index: 999;
+    }
+  }
 
-  &__loading,
-  &__error {
+  @include e(loading, error) {
     position: absolute;
     top: 0;
     left: 0;
@@ -22,6 +39,5 @@
     justify-content: center;
     background-color: $hy-background--empty;
     color: $hy-text-color--grey;
-    font-size: 46px;
   }
-}
+}

package/components/hy-image/props.ts

@@ -1,12 +1,12 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../config";
+import type IProps from './typing'
+import { IconConfig } from '../../config'
 
 const defaultProps: IProps = {
-  src: "",
-  mode: "aspectFill",
-  width: "200",
-  height: "150",
-  shape: "square",
+  src: '',
+  mode: 'aspectFill',
+  width: '',
+  height: '',
+  shape: 'square',
   radius: 0,
   lazyLoad: true,
   showMenuByLongPress: true,
@@ -17,8 +17,9 @@ const defaultProps: IProps = {
   fade: true,
   webp: false,
   duration: 500,
-  bgColor: "",
+  bgColor: '',
+  indistinct: false,
   previewImage: false,
-};
+}
 
-export default defaultProps;
+export default defaultProps