hy-app 0.1.2 → 0.1.4

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>

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

@@ -41,8 +41,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, toRefs, computed, CSSProperties } from "vue";
-import IProps from "./typing";
+import {
+  ref,
+  watch,
+  toRefs,
+  computed,
+  type CSSProperties,
+  getCurrentInstance,
+} from "vue";
+import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit, getRect, sleep } from "../../utils";
 import { IconConfig } from "../../config";
@@ -53,6 +60,7 @@ const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { text, speed, fontSize, color } = toRefs(props);
 const emit = defineEmits(["click", "close"]);
 
+const instance = getCurrentInstance();
 const animationDuration = ref<string>("0"); // 动画执行时间
 const animationPlayState = ref<string>("paused"); // 动画的开始和结束执行
 const initValue = ref<string>("");
@@ -60,14 +68,15 @@ 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;
     // 进行一定的延时
     await sleep();
     // 查询盒子和文字的宽度
-    textWidth = (await getRect(".hy-notice__content__text")).width;
-    boxWidth = (await getRect(".hy-notice__content")).width;
+    textWidth = (await getRect(".hy-notice__content__text", false, instance))
+      .width;
+    boxWidth = (await getRect(".hy-notice__content", false, instance)).width;
     // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
     // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
     animationDuration.value = `${textWidth / speed.value}s`;
@@ -76,7 +85,7 @@ watch(
     await sleep(10);
     animationPlayState.value = "running";
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -127,56 +136,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;
+      }
+    }
+  }
+}