hy-app 0.1.2 → 0.1.3

package/components/hy-navbar/hy-navbar.vue

@@ -4,18 +4,16 @@
       class="hy-navbar__placeholder"
       v-if="fixed && placeholder"
       :style="{
-        height: addUnit(getPx(height) + statusBarHeight)
+        height: addUnit(getPx(height) + statusBarHeight),
       }"
     ></view>
-    <view
-      :class="[fixed && 'hy-navbar--fixed']"
-      :style="{ paddingTop: addUnit(safeAreaInsets?.top) }"
-    >
+    <view :class="[fixed && 'hy-navbar--fixed']">
+      <HyStatusBar v-if="safeAreaInsetTop" :bgColor="bgColor"></HyStatusBar>
       <view
-        :class="[border && 'hy-border-bottom', 'hy-navbar__content']"
+        :class="[border && 'hy-border__bottom', 'hy-navbar__content']"
         :style="{
           height: addUnit(height),
-          backgroundColor: bgColor
+          backgroundColor: bgColor,
         }"
       >
         <view
@@ -34,7 +32,7 @@
             <text
               v-if="leftText"
               :style="{
-                color: leftIconColor
+                color: leftIconColor,
               }"
               class="hy-navbar__content__left__text"
               >{{ leftText }}</text
@@ -48,9 +46,9 @@
               :style="[
                 {
                   width: addUnit(titleWidth),
-                  color: titleColor
+                  color: titleColor,
                 },
-                titleStyle
+                titleStyle,
               ]"
               >{{ title }}</text
             >
@@ -59,9 +57,9 @@
               :style="[
                 {
                   width: addUnit(titleWidth),
-                  color: titleColor
+                  color: titleColor,
                 },
-                titleStyle
+                titleStyle,
               ]"
               >{{ sub }}</text
             >
@@ -86,17 +84,20 @@
 
 <script setup lang="ts">
 import defaultProps from "./props";
-import IProps from "./typing";
-import { addUnit, getPx } from "../../utils";
+import type IProps from "./typing";
+import { addUnit, getPx, getWindowInfo } from "../../utils";
 
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
+import HyStatusBar from "../hy-status-bar/hy-status-bar.vue";
+import { toRefs } from "vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { autoBack, fixed } = toRefs(props);
 const emit = defineEmits(["leftClick", "rightClick"]);
 
-const { safeAreaInsets } = uni.getSystemSetting();
-const { statusBarHeight } = uni.getWindowInfo();
+// 获取状态栏高度
+const { statusBarHeight } = getWindowInfo();
 
 /**
  * @description 点击左侧区域
@@ -104,12 +105,8 @@ const { statusBarHeight } = uni.getWindowInfo();
 const leftClick = () => {
   // 如果配置了autoBack，自动返回上一页
   emit("leftClick");
-  if (config.interceptor.navbarLeftClick != null) {
-    config.interceptor.navbarLeftClick();
-  } else {
-    if (this.autoBack) {
-      uni.navigateBack();
-    }
+  if (autoBack.value) {
+    uni.navigateBack();
   }
 };
 /**
@@ -121,74 +118,5 @@ const rightClick = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-navbar {
-  &--fixed {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    z-index: 11;
-  }
-
-  &__content {
-    @include flex(row);
-    align-items: center;
-    height: 44px;
-    background-color: #9acafc;
-    position: relative;
-    justify-content: center;
-
-    &__left,
-    &__right {
-      padding: 0 13px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      @include flex(row);
-      align-items: center;
-    }
-
-    &__left {
-      left: 0;
-
-      &--hover {
-        opacity: 0.7;
-      }
-
-      &__text {
-        font-size: 15px;
-        margin-left: 3px;
-      }
-    }
-
-    &__center {
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      &--title {
-        font-size: $hy-font-size-subtitle;
-        color: $hy-color-title;
-      }
-      &--sub {
-        font-size: $hy-font-size-hint;
-        color: $hy-color-hint;
-      }
-    }
-
-    &__right {
-      right: 0;
-
-      &__text {
-        font-size: 15px;
-        margin-left: 3px;
-      }
-    }
-  }
-}
-.hy-border-bottom {
-  border-bottom: $hy-border-line;
-}
+@import "./index.scss";
 </style>

package/components/hy-navbar/index.scss

@@ -0,0 +1,67 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-navbar {
+  &--fixed {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 11;
+  }
+
+  &__content {
+    @include flex(row);
+    align-items: center;
+    height: 44px;
+    background-color: #9acafc;
+    position: relative;
+    justify-content: center;
+
+    &__left,
+    &__right {
+      padding: 0 13px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      @include flex(row);
+      align-items: center;
+    }
+
+    &__left {
+      left: 0;
+
+      &--hover {
+        opacity: 0.7;
+      }
+
+      &__text {
+        font-size: 15px;
+        margin-left: 3px;
+      }
+    }
+
+    &__center {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      &--title {
+        font-size: $hy-font-size-subtitle;
+        color: $hy-color-title;
+      }
+      &--sub {
+        font-size: $hy-font-size-hint;
+        color: $hy-color-hint;
+      }
+    }
+
+    &__right {
+      right: 0;
+
+      &__text {
+        font-size: 15px;
+        margin-left: 3px;
+      }
+    }
+  }
+}

package/components/hy-navbar/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { IconConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -18,7 +18,7 @@ const defaultProps: IProps = {
   height: "44px",
   leftIconSize: 20,
   leftIconColor: "",
-  autoBack: false
+  autoBack: false,
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 import { IconConfig } from "../../config";
 
 export default interface IProps {

package/components/hy-notice-bar/hy-column-notice.vue

@@ -48,12 +48,13 @@
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, toRefs, computed, ref } from "vue";
-import IProps from "./typing";
+import { type CSSProperties, toRefs, computed, ref, watch } from "vue";
+import type IProps from "./typing";
 import defaultProps from "./props";
-import { addUnit } from "../../utils";
+import { addUnit, error } from "../../utils";
 import { IconConfig } from "../../config";
 
+// 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -62,6 +63,12 @@ const emit = defineEmits(["click", "close"]);
 
 const index = ref(0);
 
+watch(
+  () => text.value,
+  (newVal) => !Array.isArray(newVal) && error("传入值必须是数组"),
+  { immediate: true },
+);
+
 /**
  * @description 文字内容的样式
  * */
@@ -91,40 +98,5 @@ const close = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-notice {
-  @include flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &__left-icon {
-    align-items: center;
-    margin-right: 5px;
-  }
-
-  &__right-icon {
-    margin-left: 5px;
-    align-items: center;
-  }
-
-  &__swiper {
-    height: 16px;
-    @include flex;
-    align-items: center;
-    flex: 1;
-
-    &__item {
-      @include flex;
-      align-items: center;
-      overflow: hidden;
-
-      &__text {
-        font-size: 14px;
-        color: $hy-warning;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -1,12 +1,12 @@
 <template>
   <view
-    class="u-notice-bar"
+    class="hy-notice-bar"
     v-if="show"
     :style="[
       {
-        backgroundColor: bgColor
+        backgroundColor: bgColor,
       },
-      customStyle
+      customStyle,
     ]"
   >
     <template v-if="direction === 'column' || (direction === 'row' && step)">
@@ -44,9 +44,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 // 组件
 import HyRowNotice from "./hy-row-notice.vue";
 import HyColumnNotice from "./hy-column-notice.vue";
@@ -54,6 +54,7 @@ import HyColumnNotice from "./hy-column-notice.vue";
 const show = ref(true);
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { mode, linkType, url } = toRefs(props);
 const emit = defineEmits(["click", "close"]);
 
 /**
@@ -61,6 +62,9 @@ const emit = defineEmits(["click", "close"]);
  * */
 const click = (index: number) => {
   emit("click", index);
+  if (url.value && linkType.value && mode.value === "link") {
+    (uni as any)[linkType.value]({ url: url.value });
+  }
 };
 /**
  * @description 点击关闭按钮
@@ -72,11 +76,5 @@ const close = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.u-notice-bar {
-  overflow: hidden;
-  padding: 9px 12px;
-  flex: 1;
-}
+@import "./index.scss";
 </style>

package/components/hy-notice-bar/hy-row-notice.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, toRefs, computed, CSSProperties } from "vue";
-import IProps from "./typing";
+import { ref, watch, toRefs, computed, type CSSProperties } from "vue";
+import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit, getRect, sleep } from "../../utils";
 import { IconConfig } from "../../config";
@@ -60,7 +60,7 @@ const initValue = ref<string>("");
 watch(
   () => text.value,
   async (newValue) => {
-    if (Array.isArray(newValue)) initValue.value = newValue.join("，");
+    initValue.value = Array.isArray(newValue) ? newValue.join("") : newValue;
     let boxWidth = 0,
       textWidth = 0;
     // 进行一定的延时
@@ -76,7 +76,7 @@ watch(
     await sleep(10);
     animationPlayState.value = "running";
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -127,56 +127,5 @@ const close = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-notice {
-  @include flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &__left-icon {
-    align-items: center;
-    margin-right: 5px;
-  }
-
-  &__right-icon {
-    margin-left: 5px;
-    align-items: center;
-  }
-
-  &__content {
-    text-align: right;
-    flex: 1;
-    @include flex;
-    flex-wrap: nowrap;
-    overflow: hidden;
-
-    &__text {
-      font-size: 14px;
-      color: $hy-warning;
-      /* #ifndef APP-NVUE */
-      // 这一句很重要，为了能让滚动左右连接起来
-      padding-left: 100%;
-      word-break: keep-all;
-      white-space: nowrap;
-      animation: hy-loop-animation 10s linear infinite both;
-      /* #endif */
-      @include flex(row);
-      line-height: 100%;
-    }
-  }
-}
-
-/* #ifndef APP-NVUE */
-@keyframes hy-loop-animation {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-/* #endif */
+@import "./index.scss";
 </style>

package/components/hy-notice-bar/index.scss

@@ -0,0 +1,93 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+.hy-notice {
+  @include flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left-icon {
+    align-items: center;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    margin-left: 5px;
+    align-items: center;
+  }
+
+  &__content {
+    text-align: right;
+    flex: 1;
+    @include flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+
+    &__text {
+      font-size: 14px;
+      color: $hy-warning;
+      /* #ifndef APP-NVUE */
+      // 这一句很重要，为了能让滚动左右连接起来
+      padding-left: 100%;
+      word-break: keep-all;
+      white-space: nowrap;
+      animation: hy-loop-animation 10s linear infinite both;
+      /* #endif */
+      @include flex(row);
+      line-height: 100%;
+    }
+  }
+}
+
+/* #ifndef APP-NVUE */
+@keyframes hy-loop-animation {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+/* #endif */
+
+.hy-notice-bar {
+  overflow: hidden;
+  padding: 9px 12px;
+  flex: 1;
+}
+
+.hy-notice {
+  @include flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left-icon {
+    align-items: center;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    margin-left: 5px;
+    align-items: center;
+  }
+
+  &__swiper {
+    height: 16px;
+    @include flex;
+    align-items: center;
+    flex: 1;
+
+    &__item {
+      @include flex;
+      align-items: center;
+      overflow: hidden;
+
+      &__text {
+        font-size: 14px;
+        color: $hy-warning;
+      }
+    }
+  }
+}

package/components/hy-notice-bar/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { IconConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -13,7 +13,9 @@ const defaultProps: IProps = {
   fontSize: 14,
   duration: 2000,
   disableTouch: true,
-  justifyContent: "flex-start"
+  justifyContent: "flex-start",
+  linkType: "navigateTo",
+  url: "",
 };
 
 export default defaultProps;

package/components/hy-notice-bar/typing.d.ts

@@ -1,4 +1,6 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
+
+export type NoticeBarModeVo = "closable" | "link" | "";
 
 export default interface IProps {
   /**
@@ -8,7 +10,7 @@ export default interface IProps {
   /**
    * @description 通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
    * */
-  direction?: HyApp.PermutationType;
+  direction?: HyApp.DirectionType;
   /**
    * @description direction = row时，是否使用步进形式滚动  ( 默认 false )
    * */
@@ -20,7 +22,7 @@ export default interface IProps {
   /**
    * @description 通告模式，link-显示右箭头，closable-显示右侧关闭图标
    * */
-  mode?: "closable" | "link" | "";
+  mode?: NoticeBarModeVo;
   /**
    * @description 文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
    * */
@@ -49,6 +51,14 @@ export default interface IProps {
    * @description 分布
    * */
   justifyContent?: HyApp.JustifyContentType;
+  /**
+   * @description 跳转类型
+   * */
+  linkType?: HyApp.NavigationType;
+  /**
+   * @description 跳转地址
+   * */
+  url?: string;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-number-step/hy-number-step.vue

@@ -374,74 +374,5 @@ const onClearTimeout = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-$u-numberBox-hover-bgColor: #e6e6e6 !default;
-$u-numberBox-disabled-color: #c8c9cc !default;
-$u-numberBox-disabled-bgColor: #f7f8fa !default;
-$u-numberBox-plus-radius: 4px !default;
-$u-numberBox-minus-radius: 4px !default;
-$u-numberBox-input-text-align: center !default;
-$u-numberBox-input-font-size: 15px !default;
-$u-numberBox-input-padding: 0 !default;
-$u-numberBox-input-margin: 0 2px !default;
-$u-numberBox-input-disabled-color: #c8c9cc !default;
-$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
-
-.hy-number-box {
-  @include flex(row);
-  align-items: center;
-
-  &__slot {
-    /* #ifndef APP-NVUE */
-    touch-action: none;
-    /* #endif */
-  }
-
-  &__plus,
-  &__minus {
-    width: 35px;
-    @include flex;
-    justify-content: center;
-    align-items: center;
-    /* #ifndef APP-NVUE */
-    touch-action: none;
-    /* #endif */
-
-    &--hover {
-      background-color: $u-numberBox-hover-bgColor !important;
-    }
-
-    &--disabled {
-      color: $u-numberBox-disabled-color;
-      background-color: $u-numberBox-disabled-bgColor;
-    }
-  }
-
-  &__plus {
-    border-top-right-radius: $u-numberBox-plus-radius;
-    border-bottom-right-radius: $u-numberBox-plus-radius;
-  }
-
-  &__minus {
-    border-top-left-radius: $u-numberBox-minus-radius;
-    border-bottom-left-radius: $u-numberBox-minus-radius;
-  }
-
-  &__input {
-    position: relative;
-    text-align: $u-numberBox-input-text-align;
-    font-size: $u-numberBox-input-font-size;
-    padding: $u-numberBox-input-padding;
-    margin: $u-numberBox-input-margin;
-    @include flex;
-    align-items: center;
-    justify-content: center;
-
-    &--disabled {
-      color: $u-numberBox-input-disabled-color;
-      background-color: $u-numberBox-input-disabled-bgColor;
-    }
-  }
-}
+@import "./index.scss";
 </style>