hy-app 0.1.3 → 0.1.4

package/components/hy-parse/props.ts

@@ -0,0 +1,19 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  content: "",
+  copyLink: "",
+  domain: "",
+  errorImg: "",
+  lazyLoad: false,
+  loadingImg: "",
+  pauseVideo: true,
+  previewImg: true,
+  scrollTable: false,
+  selectable: false,
+  setTitle: true,
+  showImgMenu: true,
+  useAnchor: false,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,68 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 用于渲染的 html 字符串
+   * */
+  content?: string;
+  /**
+   * @description 是否允许外部链接被点击时自动复制
+   * */
+  copyLink?: string;
+  /**
+   * @description 主域名，用于拼接链接
+   * */
+  domain?: string;
+  /**
+   * @description 图片出错时的占位图链接
+   * */
+  errorImg?: string;
+  /**
+   * @description 是否开启图片懒加载
+   * */
+  lazyLoad?: boolean;
+  /**
+   * @description 图片加载过程中的占位图链接
+   * */
+  loadingImg?: string;
+  /**
+   * @description 是否在播放一个视频时自动暂停其他视频
+   * */
+  pauseVideo?: boolean;
+  /**
+   * @description 是否允许图片被点击时自动预览
+   * */
+  previewImg?: boolean;
+  /**
+   * @description 是否给每个表格添加一个滚动层使其能单独横向滚动
+   * */
+  scrollTable?: boolean;
+  /**
+   * @description 是否开启长按复制
+   * */
+  selectable?: boolean;
+  /**
+   * @description 是否将 title 标签的内容设置到页面标题
+   * */
+  setTitle?: boolean;
+  /**
+   * @description 是否允许图片被长按时显示菜单
+   * */
+  showImgMenu?: boolean;
+  /**
+   * @description 是否使用锚点链接
+   * */
+  useAnchor?: boolean;
+  /**
+   * @description 标签的默认样式
+   * */
+  tagStyle?: CSSProperties;
+  /**
+   * @description 容器的样式
+   * */
+  containerStyle?: CSSProperties;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-price/hy-price.vue

@@ -7,9 +7,7 @@
     <text class="hy-price__prefix">{{ symbol }}</text>
     <text
       class="hy-price__text"
-      :style="[
-        { 'font-size': `${Number(fontSize) + Number(fontSize) * 0.8}rpx` },
-      ]"
+      :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]"
       >{{ priceOne[0] }}
     </text>
     <text class="hy-price__decimal">
@@ -22,10 +20,10 @@
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { addUnit, getPx } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { text, textColor, weight, fontSize, slant, customStyle } = toRefs(props);
+const { text, color, weight, size, slant, customStyle } = toRefs(props);
 const emit = defineEmits(["click"]);
 
 /**
@@ -33,13 +31,13 @@ const emit = defineEmits(["click"]);
  * */
 const priceStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    color: textColor.value,
+    color: color.value,
     fontWeight: weight.value,
     fontStyle: slant.value ? "oblique" : "",
-    fontSize: addUnit(fontSize.value),
+    fontSize: addUnit(size.value),
   };
 
-  return Object.assign(style, customStyle);
+  return Object.assign(style, customStyle.value);
 });
 
 /**

package/components/hy-price/index.scss

@@ -2,10 +2,10 @@
   font-size: 32rpx;
   font-weight: 500;
   margin-top: 5px;
-  &__prefix {
-    font-size: 24rpx;
-  }
-  &__decimal {
-    font-size: 24rpx;
-  }
+  //&__prefix {
+  //  font-size: 24rpx;
+  //}
+  //&__decimal {
+  //  font-size: 24rpx;
+  //}
 }

package/components/hy-price/props.ts

@@ -1,11 +1,12 @@
 import type IProps from "./typing";
 
 const defaultProps: IProps = {
-  text: "0.00",
+  text: "",
   symbol: "￥",
+  ratio: 1.4,
   num: 2,
-  textColor: "#FE3232",
-  fontSize: 22,
+  color: "#FE3232",
+  size: 12,
   weight: 500,
   slant: false,
 };

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

@@ -9,6 +9,10 @@ export default interface IProps {
    * @description 金额符号（默认：￥）
    * */
   symbol?: string;
+  /**
+   * @description 比例大小（默认：1.4）
+   * */
+  ratio?: number;
   /**
    * @description 保留小数点后几位数（默认：2）
    * */
@@ -16,15 +20,15 @@ export default interface IProps {
   /**
    * @description 字体颜色（默认：#FE3232）
    * */
-  textColor?: string;
+  color?: string;
   /**
-   * @description 字体大小（默认：22）
+   * @description 字体大小（默认：12）
    * */
-  fontSize?: string | number;
+  size?: string | number;
   /**
    * @description 字体粗细（默认：500）
    * */
-  weight?: string | number;
+  weight?: number;
   /**
    * @description 是否倾斜（默认：false）
    * */

package/components/hy-slider/hy-slider.vue

@@ -364,7 +364,7 @@ const updateValue = (value: number, drag: boolean, index: number = 1) => {
     width: width + "px",
   };
   // 移动期间无需过渡动画
-  if (drag == true) {
+  if (drag) {
     barStyle_1.transition = "none";
   } else {
     // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
@@ -421,9 +421,10 @@ const format = (value: number, index = 1): number => {
         return 0;
     }
   } else {
+    // 解决精度丢失
     return (
-      Math.round(Math.max(min.value, Math.min(value, max.value)) / step.value) *
-      step.value
+      Math.round(Math.max(min.value, Math.min(value, max.value)) / step.value) * 1000 *
+      step.value / 1000
     );
   }
 };

package/components/hy-submitBar/Index.vue

@@ -0,0 +1,17 @@
+<template>
+  <Hy-cell title="基础组件" :list="list_1"></Hy-cell>
+  <hy-cell title="表单组件" :list="list_2"></hy-cell>
+  <hy-cell title="布局组件" :list="list_3"></hy-cell>
+  <hy-cell title="反馈组件" :list="list_4"></hy-cell>
+  <hy-cell title="导航组件" :list="list_5"></hy-cell>
+  <hy-cell title="其他组件" :list="list_6"></hy-cell>
+    <hy-cell title="业务组件" :list="list_7"></hy-cell>
+</template>
+
+<script setup lang="ts">
+import HyCell from "hy-app/components/hy-cell/hy-cell.vue";
+
+import { list_1, list_2, list_3, list_4, list_5, list_6, list_7 } from "./index1";
+</script>
+
+<style lang="scss" scoped></style>

package/components/hy-submitBar/hy-submitBar.vue

@@ -0,0 +1,216 @@
+<template>
+  <view
+    :class="['hy-submit-bar', border && 'hy-border__top']"
+    :style="submitBarStyle"
+  >
+    <view class="hy-submit-bar__left">
+      <slot name="left">
+        <view
+          class="hy-submit-bar__left--item"
+          v-for="(item, i) in menus"
+          :key="i"
+          @tap="clickMenuFn(i)"
+        >
+          <HyIcon
+            :name="item.icon"
+            :label="item.text"
+            :color="iconColor"
+            :label-color="iconLabelColor"
+            labelPos="bottom"
+            space="7"
+            :size="20"
+          ></HyIcon>
+          <HyBadge
+            :value="item?.badge?.value"
+            :absolute="true"
+            :offset="item?.badge?.offset ?? [-5, 20]"
+            :isDot="item?.badge?.isDot"
+            :type="item?.badge?.type"
+            :color="item?.badge?.color"
+            :shape="item?.badge?.shape"
+            :numberType="item?.badge?.numberType"
+            :inverted="item?.badge?.inverted"
+          ></HyBadge>
+        </view>
+      </slot>
+    </view>
+    <view class="hy-submit-bar__right">
+      <slot name="right">
+        <view
+          class="hy-submit-bar__right--button"
+          v-if="showLeftBtn"
+          :style="leftBtnStyle"
+          @tap.stop="confirmClickFn(0)"
+        >
+          <HyLoading
+            :show="leftLoading"
+            size="13"
+            mode="circle"
+            :custom-style="{ marginRight: '10rpx' }"
+          ></HyLoading>
+          {{ leftBtnText }}
+        </view>
+        <view
+          class="hy-submit-bar__right--button"
+          v-if="showRightBtn"
+          :style="rightBtnStyle"
+          @tap.stop="confirmClickFn(1)"
+        >
+          <HyLoading
+            :show="rightLoading"
+            size="13"
+            mode="circle"
+            :custom-style="{ marginRight: '10rpx' }"
+          ></HyLoading>
+          {{ rightBtnText }}
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { computed, type CSSProperties, toRefs } from "vue";
+import { debounce } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  fixed,
+  showLeftBtn,
+  showRightBtn,
+  leftBtnColor,
+  rightBtnColor,
+  shape,
+  textColor,
+  leftLoading,
+  rightLoading,
+  warn,
+  customStyle,
+} = toRefs(props);
+const emit = defineEmits(["click", "menuClick"]);
+
+/**
+ * @description 整体样式
+ * */
+const submitBarStyle = computed(() => {
+  const style: CSSProperties = {
+    bottom: 0,
+  };
+  if (fixed.value) style.position = "fixed";
+  return Object.assign(style, customStyle.value);
+});
+
+/**
+ * @description 左边按钮样式
+ * */
+const leftBtnStyle = computed(() => {
+  const style: CSSProperties = {
+    background: leftBtnColor.value,
+    color: textColor.value,
+  };
+  if (!showRightBtn.value) {
+    style.flex = 1;
+    if (shape.value === "circle") {
+      style.borderRadius = "100px";
+    } else {
+      style.borderRadius = "2px";
+    }
+  } else {
+    if (shape.value === "circle") {
+      style.borderRadius = "100px 0 0 100px";
+    } else {
+      style.borderRadius = "2px 0 0 2px";
+    }
+  }
+  return style;
+});
+
+/**
+ * @description 右边按钮样式
+ * */
+const rightBtnStyle = computed(() => {
+  const style: CSSProperties = {
+    background: rightBtnColor.value,
+    color: textColor.value,
+  };
+  if (!showLeftBtn.value) {
+    style.flex = 1;
+    if (shape.value === "circle") {
+      style.borderRadius = "100px";
+    } else {
+      style.borderRadius = "2px";
+    }
+  } else {
+    if (shape.value === "circle") {
+      style.borderRadius = "0 100px 100px 0";
+    } else {
+      style.borderRadius = "0 2px 2px 0";
+    }
+  }
+  return style;
+});
+
+/**
+ * @description 点击左边图标
+ * */
+const clickMenuFn = (i: number) => {
+  emit("menuClick", i);
+};
+
+/**
+ * @description 点击按钮
+ * */
+const confirmClickFn = debounce((i: number) => {
+  if (
+    (!leftLoading.value && !rightLoading.value) ||
+    (leftLoading.value && i !== 0) ||
+    (rightLoading.value && i !== 1)
+  ) {
+    emit("click", i);
+  }
+}, warn.value);
+</script>
+
+<style lang="scss" scoped>
+@import "../../theme.scss";
+.hy-submit-bar {
+  display: flex;
+  background-color: #ffffff;
+  padding: $hy-border-margin-padding-base;
+  width: 100%;
+  box-sizing: border-box;
+  /*左边内容*/
+  &__left {
+    display: flex;
+    font-size: 20rpx;
+    flex: 1;
+    &--item {
+      margin: 0 $hy-border-margin-padding-base;
+      position: relative;
+    }
+  }
+
+  /*右边内容*/
+  &__right {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 26rpx;
+    align-items: center;
+    width: 400rpx;
+    &--button {
+      padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
+      color: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

package/components/hy-submitBar/index.scss

@@ -0,0 +1,9 @@
+
+.hy-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+}

package/components/hy-submitBar/props.ts

@@ -0,0 +1,22 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  menus: [],
+  fixed: true,
+  border: true,
+  leftLoading: false,
+  rightLoading: false,
+  iconColor: "",
+  iconLabelColor: "#909193FF",
+  textColor: "",
+  showLeftBtn: true,
+  showRightBtn: true,
+  leftBtnText: "加入购物车",
+  rightBtnText: "立即购买",
+  leftBtnColor: "#ed3f14",
+  rightBtnColor: "#ff7900",
+  shape: "circle",
+  warn: 300,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,88 @@
+import type { CSSProperties } from "vue";
+import type BadgeProps from "../hy-badge/props";
+
+interface IconMenus {
+  /**
+   * @description icon图标
+   * */
+  icon: string;
+  /**
+   * @description 文本
+   * */
+  text: string;
+  /**
+   * @description 徽标值
+   * */
+  badge?: BadgeProps["badge"];
+}
+
+export default interface IProps {
+  /**
+   * @description 左边菜单栏
+   * */
+  menus?: IconMenus[];
+  /**
+   * @description 绝对定位
+   * */
+  fixed?: boolean;
+  /**
+   * @description 是否显示边框
+   * */
+  border?: boolean;
+  /**
+   * @description 加载左边按钮loading
+   * */
+  leftLoading?: boolean;
+  /**
+   * @description 加载右边按钮loading
+   * */
+  rightLoading?: boolean;
+  /**
+   * @description 左边icon的颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description 左边文字的颜色
+   * */
+  iconLabelColor?: string;
+  /**
+   * @description 右边按钮文字颜色
+   * */
+  textColor?: string;
+  /**
+   * @description 显示左边按钮
+   * */
+  showLeftBtn?: boolean;
+  /**
+   * @description 显示右边按钮
+   * */
+  showRightBtn?: boolean;
+  /**
+   * @description 左边按钮文字
+   * */
+  leftBtnText?: string;
+  /**
+   * @description 右边按钮文字
+   * */
+  rightBtnText?: string;
+  /**
+   * @description 左边按钮颜色，支持渐变色
+   * */
+  leftBtnColor?: string;
+  /**
+   * @description 有边按钮颜色，支持渐变色
+   * */
+  rightBtnColor?: string;
+  /**
+   * @description 按钮的形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 按钮点击等待时长（运用了节流方法）
+   * */
+  warn?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-tag/hy-tag.vue

@@ -11,7 +11,7 @@
             :customStyle="{ marginRight: '3px' }"
           ></HyIcon>
         </slot>
-        <text :class="textClass" :style="{ color: color }">
+        <text :class="textClass" :style="textStyle">
           <slot>
             {{ text }}
           </slot>
@@ -40,6 +40,7 @@ import type IProps from "./typing";
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { IconConfig } from "../../config";
+import {colorGradient} from "@/package";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -84,16 +85,33 @@ const tagStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     marginRight: closable.value ? "10px" : 0,
     marginTop: closable.value ? "10px" : 0,
+    background: bgColor.value,
+    borderColor: borderColor.value
   };
-  if (bgColor.value) {
-    style.background = bgColor.value;
-  }
-  if (borderColor.value) {
-    style.borderColor = borderColor.value;
+
+  if(color.value) {
+    if (plain.value) {
+      style.borderColor = color.value;
+      if(plainFill.value) {
+        style.background = colorGradient(color.value, "#FFFFFF", 100)[90];
+      }
+    } else {
+      style.background = color.value;
+      style.borderColor = color.value;
+    }
   }
+
   return Object.assign(style, customStyle.value);
 });
 
+/**
+ * @description 文本样式
+ * */
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if(color.value && plain.value) style.color = color.value;
+  return style;
+})
 /**
  * @description 文本类名
  * */

package/components/hy-tag/index.scss

@@ -2,12 +2,13 @@
 @use "../../libs/css/mixin.scss" as *;
 
 .hy-tag {
+  border-style: solid;
   @include flex;
   align-items: center;
-  border-style: solid;
-
   &__wrapper {
+    @include flex;
     position: relative;
+    box-sizing: border-box;
   }
 
   /*禁用*/

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

@@ -82,7 +82,7 @@ export default interface IProps {
   /**
    * @description 文本对齐方式，可选值left|center|right（默认 'left' ）
    * */
-  align?: HyApp.CenterType;
+  align?: HyApp.RowCenterType;
   /**
    * @description 文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
    * */