hy-app 0.1.1 → 0.1.3

package/components/hy-modal/hy-modal.vue

@@ -6,7 +6,7 @@
     :customStyle="{
       borderRadius: '6px',
       overflow: 'hidden',
-      marginTop: `-${addUnit(negativeTop)}`
+      marginTop: `-${addUnit(negativeTop)}`,
     }"
     :closeOnClickOverlay="closeOnClickOverlay"
     :safeAreaInsetBottom="false"
@@ -16,14 +16,14 @@
     <view
       class="hy-modal"
       :style="{
-        width: addUnit(width)
+        width: addUnit(width),
       }"
     >
       <view class="hy-modal__title" v-if="title">{{ title }}</view>
       <view
         class="hy-modal__content"
         :style="{
-          paddingTop: `${title ? 12 : 25}px`
+          paddingTop: `${title ? 12 : 25}px`,
         }"
       >
         <slot>
@@ -42,7 +42,7 @@
         <view
           class="hy-modal__button-group"
           :style="{
-            flexDirection: buttonReverse ? 'row-reverse' : 'row'
+            flexDirection: buttonReverse ? 'row-reverse' : 'row',
           }"
         >
           <view
@@ -52,7 +52,7 @@
             :class="[
               showCancelButton &&
                 !showConfirmButton &&
-                'hy-modal__button-group__wrapper--only-cancel'
+                'hy-modal__button-group__wrapper--only-cancel',
             ]"
             v-if="showCancelButton"
             @tap.stop="cancelHandler"
@@ -60,7 +60,7 @@
             <text
               class="hy-modal__button-group__wrapper__text"
               :style="{
-                color: cancelColor
+                color: cancelColor,
               }"
               >{{ cancelText }}</text
             >
@@ -76,7 +76,7 @@
             :class="[
               !showCancelButton &&
                 showConfirmButton &&
-                'hy-modal__button-group__wrapper--only-confirm'
+                'hy-modal__button-group__wrapper--only-confirm',
             ]"
             v-if="showConfirmButton"
             @tap="confirmHandler"
@@ -90,7 +90,7 @@
               v-else
               class="hy-modal__button-group__wrapper__text"
               :style="{
-                color: confirmColor
+                color: confirmColor,
               }"
               >{{ confirmText }}</text
             >
@@ -104,7 +104,7 @@
 <script setup lang="ts">
 import { ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit } from "../../utils";
 import { IconConfig } from "../../config";
 
@@ -122,7 +122,7 @@ watch(
   () => show.value,
   (newValue) => {
     if (newValue && loading.value) loading.value = false;
-  }
+  },
 );
 
 /**
@@ -158,83 +158,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-$u-modal-border-radius: 6px;
-
-.hy-modal {
-  width: 650rpx;
-  border-radius: $hy-border-radius-base;
-  overflow: hidden;
-
-  &__title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 16px;
-    font-weight: bold;
-    color: $hy-color-title;
-    text-align: center;
-    padding-top: 25px;
-  }
-
-  &__content {
-    padding: 12px 25px 25px 25px;
-    @include flex;
-    justify-content: center;
-
-    &__text {
-      text-align: v-bind(contentTextAlign);
-      font-size: 15px;
-      color: $hy-text-color-grey;
-      flex: 1;
-    }
-  }
-
-  &__button-group {
-    border-top: $hy-border-line;
-    @include flex;
-
-    &--confirm-button {
-      flex-direction: column;
-      padding: 0 25px 15px 25px;
-    }
-
-    &__wrapper {
-      flex: 1;
-      @include flex;
-      justify-content: center;
-      align-items: center;
-      height: 48px;
-
-      &--line {
-        background: $hy-text-color-light;
-        width: 1px;
-        height: 48px;
-      }
-
-      &--confirm,
-      &--only-cancel {
-        border-bottom-right-radius: $hy-border-radius-base;
-      }
-
-      &--cancel,
-      &--only-confirm {
-        border-bottom-left-radius: $hy-border-radius-base;
-      }
-
-      &--hover {
-        background-color: $hy-bg-color-grey;
-      }
-
-      &__text {
-        color: $hy-color-subtitle;
-        font-size: 16px;
-        text-align: center;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-modal/index.scss

@@ -0,0 +1,77 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-modal {
+  width: 650rpx;
+  border-radius: $hy-border-radius-base;
+  overflow: hidden;
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: $hy-color-title;
+    text-align: center;
+    padding-top: 25px;
+  }
+
+  &__content {
+    padding: 30px 40px;
+    @include flex;
+    justify-content: center;
+
+    &__text {
+      text-align: v-bind(contentTextAlign);
+      font-size: 15px;
+      color: $hy-text-color-grey;
+      flex: 1;
+    }
+  }
+
+  &__button-group {
+    border-top: $hy-border-line;
+    @include flex;
+
+    &--confirm-button {
+      flex-direction: column;
+      padding: 0 25px 15px;
+    }
+
+    &__wrapper {
+      flex: 1;
+      @include flex;
+      justify-content: center;
+      align-items: center;
+      height: 48px;
+
+      &--line {
+        background: $hy-text-color-light;
+        width: 1px;
+        height: 48px;
+      }
+
+      &--confirm,
+      &--only-cancel {
+        border-bottom-right-radius: $hy-border-radius-base;
+      }
+
+      &--cancel,
+      &--only-confirm {
+        border-bottom-left-radius: $hy-border-radius-base;
+      }
+
+      &--hover {
+        background-color: $hy-bg-color-grey;
+      }
+
+      &__text {
+        color: $hy-color-subtitle;
+        font-size: 16px;
+        text-align: center;
+      }
+    }
+  }
+}

package/components/hy-modal/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -18,7 +18,7 @@ const defaultProps: IProps = {
   negativeTop: 0,
   width: "650rpx",
   confirmButtonShape: "",
-  contentTextAlign: "left"
+  contentTextAlign: "left",
 };
 
 export default defaultProps;

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

@@ -62,7 +62,7 @@ export default interface IProps {
   /**
    * @description 确认按钮的样式,如设置，将不会显示取消按钮
    * */
-  confirmButtonShape?: HyApp.ShapeType;
+  confirmButtonShape?: HyApp.ShapeType | "";
   /**
    * @description 文案对齐方式
    * */

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>