hy-app 0.2.5 → 0.2.6

package/components/hy-cell/typing.d.ts

@@ -1,89 +1,92 @@
-import type { CSSProperties } from "vue";
-import { HyApp } from "@/package/typing/modules/common";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import { HyApp } from '@/package/typing/modules/common'
+import type HyIconProps from '../hy-icon/typing'
 
 export interface CellContentVo extends AnyObject {
   /**
    * @description 单元格左图标
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 单元格标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 单元格副标题
    * */
-  subhead?: string;
+  subhead?: string
   /**
    * @description 是否禁用单元格
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 单元格右图标集合
    * */
-  rightIcon?: Partial<HyIconProps>;
+  rightIcon?: Partial<HyIconProps>
   /**
    * @description 单元格值
    * */
-  value?: string;
+  value?: string | number | boolean
   /**
    * @description 跳转页面地址
    * */
-  url?: string;
+  url?: string
   /**
    * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
    * */
-  arrowDirection?: HyApp.RotateType;
+  arrowDirection?: HyApp.RotateType
 }
 export default interface HyCellProps {
   /**
    * @description cell列表数据
    * */
-  list: CellContentVo[];
+  list: CellContentVo[]
   /**
    * @description 头部标题
    * */
-  title?: string;
+  title?: string
   /**
    * @description 是否显示标题前缀竖线
    * */
-  showVertical?: boolean;
+  showVertical?: boolean
   /**
    * @description 是否显示cell下边框 (默认 true )
    * */
-  border?: boolean;
-  borderRadius?: string | number;
+  border?: boolean
+  /**
+   * @description 圆角
+   * */
+  borderRadius?: string | number
   /**
    * @description 是否禁用cell（默认false）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
    * */
-  clickable?: boolean;
+  clickable?: boolean
   /**
    * @description 单元的大小，可选值为 large，medium，small
    * */
-  size?: HyApp.SizeType;
+  size?: HyApp.SizeType
   /**
    * @description 右侧的内容
    * */
-  value?: string;
+  value?: string
   /**
    * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
    * */
-  arrange?: HyApp.LeftRightType | "center";
+  arrange?: HyApp.LeftRightType | 'center'
   /**
    * @description 右侧的图标箭头icon集合
    * */
-  rightIcon?: Partial<HyIconProps>;
+  rightIcon?: Partial<HyIconProps>
   /**
    * @description 右侧箭头的方向，可选值为：left，up，down
    * */
-  arrowDirection?: "left" | "up" | "down" | "right";
+  arrowDirection?: 'left' | 'up' | 'down' | 'right'
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-empty/hy-empty.vue

@@ -2,7 +2,7 @@
   <view class="hy-empty" v-if="show" :style="emptyStyle">
     <view class="hy-empty__img" :style="imgStyle">
       <HyIcon
-        :name="imageUrl"
+        :name="imageUrl || emptyIcon[mode].icon"
         :width="width"
         :height="height"
         img-mode="widthFix"
@@ -13,7 +13,7 @@
     </view>
     <view class="hy-empty__description" v-else>
       <slot v-if="$slots.description" name="description"></slot>
-      <text v-else :style="descriptionStyle">{{ emptyDescription }}</text>
+      <text v-else :style="descriptionStyle">{{ emptyDescription || emptyIcon[mode].name }}</text>
       <view class="hy-empty__button" v-if="button?.text">
         <HyButton
           :text="button?.text"
@@ -31,41 +31,34 @@
 
 <script lang="ts">
 export default {
-  name: "hy-empty",
+  name: 'hy-empty',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { computed, type CSSProperties, toRefs } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import { addUnit } from '../../utils'
+import emptyIcon from './icon'
 
 // 组件
-import HyButton from "../hy-button/hy-button.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyButton from '../hy-button/hy-button.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  zIndex,
-  width,
-  height,
-  imgMargin,
-  navigateUrl,
-  desSize,
-  desColor,
-  customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { zIndex, width, height, imgMargin, navigateUrl, desSize, desColor, customStyle } =
+  toRefs(props)
+const emit = defineEmits(['click'])
 
 const emptyDescription = computed(() => {
-  return props.description;
-});
+  return props.description
+})
 
 /**
  * @description 整体样式
@@ -73,9 +66,9 @@ const emptyDescription = computed(() => {
 const emptyStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     zIndex: zIndex.value,
-  };
-  return Object.assign(style, customStyle.value);
-});
+  }
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 提示信息样式
@@ -84,9 +77,9 @@ const descriptionStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     fontSize: addUnit(desSize.value),
     color: desColor.value,
-  };
-  return style;
-});
+  }
+  return style
+})
 
 /**
  * @description 图片样式
@@ -96,21 +89,21 @@ const imgStyle = computed<CSSProperties>(() => {
     width: addUnit(width.value),
     height: addUnit(height.value),
     margin: imgMargin.value,
-  };
-});
+  }
+})
 
 /**
  * @description 点击按钮，跳转页面
  * */
 const handleClick = () => {
-  emit("click");
+  emit('click')
   if (navigateUrl.value) {
     uni.navigateTo({
       url: navigateUrl.value,
-    });
+    })
   }
-};
+}
 </script>
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-empty/icon.ts

@@ -0,0 +1,78 @@
+export default {
+  car: {
+    name: '购物车为空',
+    icon: 'https://pic1.imgdb.cn/item/685b54cb58cb8da5c86d0d4c.png',
+  },
+  page: {
+    name: '页面不存在',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f64.webp',
+  },
+  search: {
+    name: '没有搜索结果',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e84.webp',
+  },
+  address: {
+    name: '没有收货地址',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1a.webp',
+  },
+  wifi: {
+    name: '没有网络',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e87.webp',
+  },
+  order: {
+    name: '订单为空',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e85.webp',
+  },
+  coupon: {
+    name: '没有优惠券',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f63.webp',
+  },
+  favor: {
+    name: '暂无收藏',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1b.webp',
+  },
+  permission: {
+    name: '无权限',
+    icon: 'https://pic1.imgdb.cn/item/685a6b4358cb8da5c86b6f85.webp',
+  },
+  history: {
+    name: '无历史记录',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f62.webp',
+  },
+  message: {
+    name: '消息列表为空',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d30.webp',
+  },
+  image: {
+    name: '暂无图片',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f65.webp',
+  },
+  video: {
+    name: '暂无视频',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3f58cb8da5c86b6f66.webp',
+  },
+  comment: {
+    name: '暂无评论',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d30.webp',
+  },
+  integral: {
+    name: '暂无积分',
+    icon: 'https://pic1.imgdb.cn/item/685a6aef58cb8da5c86b6d2f.webp',
+  },
+  subscribe: {
+    name: '暂无预约',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e86.webp',
+  },
+  earnings: {
+    name: '暂无收益',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1c.webp',
+  },
+  announcement: {
+    name: '暂无公告',
+    icon: 'https://pic1.imgdb.cn/item/685a6b3558cb8da5c86b6f1d.webp',
+  },
+  signIn: {
+    name: '暂无打卡',
+    icon: 'https://pic1.imgdb.cn/item/685a6b1f58cb8da5c86b6e83.webp',
+  },
+}

package/components/hy-empty/index.scss

@@ -16,9 +16,10 @@
     width: 70%;
     text-align: center;
     margin-top: $hy-border-margin-padding-base;
+    color: $hy-text-color--grey;
   }
 
   &__button {
     margin-top: 100rpx;
   }
-}
+}

package/components/hy-empty/props.ts

@@ -1,17 +1,18 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
   show: true,
-  imageUrl: "https://pic.imgdb.cn/item/6737057ad29ded1a8c6f843b.webp",
+  mode: 'car',
+  imageUrl: '',
   zIndex: 889,
   width: 350,
-  height: "auto",
-  description: "暂无数据",
+  height: 'auto',
+  description: '',
   desSize: 15,
-  desColor: "#5e6d82",
-  imgMargin: "",
+  desColor: '',
+  imgMargin: '',
   button: {},
-  navigateUrl: "",
-};
+  navigateUrl: '',
+}
 
-export default defaultProps;
+export default defaultProps

package/components/hy-empty/typing.d.ts

@@ -1,53 +1,78 @@
-import type { CSSProperties } from "vue";
-import type HyButtonProps from "../hy-button/typing";
+import type { CSSProperties } from 'vue'
+import type HyButtonProps from '../hy-button/typing'
+
+type EmptyModeType =
+  | 'car'
+  | 'page'
+  | 'search'
+  | 'address'
+  | 'wifi'
+  | 'order'
+  | 'coupon'
+  | 'favor'
+  | 'permission'
+  | 'history'
+  | 'message'
+  | 'image'
+  | 'video'
+  | 'comment'
+  | 'integral'
+  | 'subscribe'
+  | 'earnings'
+  | 'announcement'
+  | 'signIn'
 
 export default interface HyEmptyProps {
   /**
    * @description 是否显示空状态
    * */
-  show?: boolean;
+  show?: boolean
+  /**
+   * @description 缺省页内容
+   * */
+  mode?: EmptyModeType
   /**
    * @description 空状态图片
    * */
-  imageUrl?: string;
+  imageUrl?: string
   /**
    * @description 组件层级
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description icon宽度
    * */
-  width?: number | string;
+  width?: number | string
   /**
    * @description icon高度
    * */
-  height?: number | string;
+  height?: number | string
   /**
    * @description 提示信息
    * */
-  description?: string;
+  description?: string
   /**
    * @description 提示信息大小
    * */
-  desSize?: string | number;
+  desSize?: string | number
   /**
    * @description 提示信息颜色
    * */
-  desColor?: string;
+  desColor?: string
   /**
    * @description 图片margin
    * */
-  imgMargin?: string;
+  imgMargin?: string
   /**
    * @description 按钮属性只
    * */
-  button?: HyButtonProps;
+  button?: HyButtonProps
   /**
    * @description 跳转地址
    * */
-  navigateUrl?: string;
+  navigateUrl?: string
   /**
    * @description 自定义输入框外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

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

@@ -10,6 +10,9 @@
       },
       `hy-float-button__${shape}`,
     ]"
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
   >
     <view
       :class="['hy-float-button__container']"
@@ -72,7 +75,7 @@ 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 } from '../../utils'
+import { addUnit, getPx, getRect, getWindowInfo, guid, isH5 } from '../../utils'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -82,8 +85,9 @@ const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   menus,
   customStyle,
+  gap,
   left,
-  bottom,
+  top,
   zIndex,
   bgColor,
   text,
@@ -91,10 +95,12 @@ const {
   size,
   fixed,
   direction,
+  draggable,
 } = toRefs(props)
 const emit = defineEmits(['click', 'clickItem'])
 
 const instance = getCurrentInstance()
+const { windowWidth } = getWindowInfo()
 const btnSize: AnyObject = {
   small: '50px',
   medium: '60px',
@@ -104,6 +110,15 @@ 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,
+})
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
 
 /**
  * @description 获取组件大小
@@ -121,11 +136,12 @@ const getFloatBtnSize = computed(() => {
  * */
 const FloatButtonStyle = computed(() => {
   const style: CSSProperties = {
-    bottom: addUnit(bottom.value),
-    left: addUnit(left.value),
+    top: addUnit(currentCoordinate.top),
+    left: addUnit(currentCoordinate.left),
     backgroundColor: bgColor.value,
     zIndex: zIndex.value,
     color: textColor.value,
+    transition: 'all ease 0.3s',
   }
   if (fixed.value) style.position = 'fixed'
 
@@ -167,14 +183,26 @@ const menusStyle = computed(() => {
   return style
 })
 
-onMounted(() => {
-  const { windowWidth } = getWindowInfo()
-  getRect(`#${soleId}`, false, instance).then((rect) => {
-    const { left } = rect as UniApp.NodeInfo
-    if (left && left > windowWidth / 2) showLeft.value = true
-  })
+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
+      fabSize.width = width
+      fabSize.height = height
+      if (left && left > windowWidth / 2) showLeft.value = true
+      resolve(rect)
+    })
+  })
+}
+
 /**
  * @description 点击悬浮按钮
  * */
@@ -195,6 +223,66 @@ const handleMenuItemClick = (temp: MenusType, index: number) => {
     })
   }
 }
+
+const getBounding = () => {
+  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 bounding = {
+  minLeft: 10,
+  minTop: 10,
+  maxLeft: 380,
+  maxTop: 680,
+}
+const handleTouchStart = (e: TouchEvent) => {
+  if (!draggable.value) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - getPx(currentCoordinate.left)
+  touchOffset.y = touch.clientY - getPx(currentCoordinate.top)
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (!draggable.value) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  currentCoordinate.top = y
+  currentCoordinate.left = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = currentCoordinate.left + fabSize.width / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    currentCoordinate.left = bounding.minLeft
+    // fabDirection.value = 'right'
+  } else {
+    currentCoordinate.left = bounding.maxLeft
+    // fabDirection.value = 'left'
+  }
+}
 </script>
 
 <style scoped lang="scss">

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

@@ -1,25 +1,27 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../config";
+import type IProps from './typing'
+import { IconConfig } from '../../config'
 
 const defaultProps: IProps = {
   menus: [],
-  direction: "column",
+  direction: 'column',
   icon: IconConfig.PLUS,
-  iconSize: "",
-  iconColor: "",
-  bottom: 80,
+  iconSize: '',
+  iconColor: '',
+  gap: { left: 16, right: 16 },
+  top: 80,
   left: 20,
   zIndex: 10086,
-  bgColor: "",
-  text: "",
-  fontSize: "12px",
-  textColor: "",
-  size: "medium",
-  shape: "circle",
+  bgColor: '',
+  text: '',
+  fontSize: '12px',
+  textColor: '',
+  size: 'medium',
+  shape: 'circle',
   opacity: 1,
   shadow: true,
   float: true,
   fixed: true,
-};
+  draggable: true,
+}
 
-export default defaultProps;
+export default defaultProps