hy-app 0.1.1 → 0.1.3

package/components/hy-list/hy-list.vue

@@ -67,26 +67,26 @@
 <script lang="ts">
 export default {
   options: {
-    virtualHost: true
-  }
+    virtualHost: true,
+  },
 };
 </script>
 
 <script lang="ts" setup>
 import {
   computed,
-  CSSProperties,
+  type CSSProperties,
   nextTick,
   onMounted,
   reactive,
   ref,
   toRefs,
   useSlots,
-  watch
+  watch,
 } from "vue";
 import { addUnit, debounce, getPx, getRect } from "../../utils";
 import HyDivider from "../hy-divider/hy-divider.vue";
-import IProps from "./typing";
+import type IProps from "./typing";
 import defaultProps from "./props";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -100,7 +100,7 @@ const {
   padding,
   borderRadius,
   background,
-  border
+  border,
 } = toRefs(props);
 const emit = defineEmits(["scrollButton", "click"]);
 
@@ -111,7 +111,7 @@ const scrollTop = ref(0);
 const viewHeight = ref(0);
 const waterfall: { left: AnyObject[]; right: AnyObject[] } = reactive({
   left: [],
-  right: []
+  right: [],
 });
 // 排列方式
 const arrange = computed(() => (line.value === 1 ? "column" : "row"));
@@ -132,7 +132,7 @@ const itemStyle = computed((): CSSProperties => {
     marginBottom: addUnit(marginBottom.value),
     borderRadius: addUnit(borderRadius.value),
     background: background.value,
-    border: border.value ? "1px solid #dadbde" : ""
+    border: border.value ? "1px solid #dadbde" : "",
   };
 });
 
@@ -149,7 +149,7 @@ const start = computed(() => {
  */
 const over = computed(() => {
   const o = Math.floor(
-    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5
+    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5,
   );
   return Math.min(list.value.length, o * line.value);
 });
@@ -185,7 +185,7 @@ watch(
       });
     }
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 /**
@@ -216,35 +216,5 @@ const slotDefault = useSlots().default;
 </script>
 
 <style lang="scss" scoped>
-@import "../../theme.scss";
-@import "../../libs/css/mixin.scss";
-.hy-virtual-container {
-  height: v-bind(listHeight);
-  padding: 0 $hy-border-margin-padding-base;
-  box-sizing: border-box;
-
-  &__list {
-    padding: v-bind(paddingAttr);
-    @include flex(v-bind(arrange));
-    overflow-anchor: none;
-    &--item {
-      box-sizing: border-box;
-    }
-
-    &--left {
-      margin-right: $hy-border-margin-padding-base;
-    }
-    &--box {
-      box-sizing: border-box;
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-      &-item {
-        box-sizing: border-box;
-        position: relative;
-        overflow: hidden;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-list/index.scss

@@ -0,0 +1,32 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-virtual-container {
+  height: v-bind(listHeight);
+  padding: 0 $hy-border-margin-padding-base;
+  box-sizing: border-box;
+
+  &__list {
+    padding: v-bind(paddingAttr);
+    @include flex(v-bind(arrange));
+    overflow-anchor: none;
+    &--item {
+      box-sizing: border-box;
+    }
+
+    &--left {
+      margin-right: $hy-border-margin-padding-base;
+    }
+    &--box {
+      box-sizing: border-box;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      &-item {
+        box-sizing: border-box;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/components/hy-list/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
@@ -12,7 +12,7 @@ const defaultProps: IProps = {
   line: 1,
   keyField: "id",
   load: "loadMore",
-  showDivider: true
+  showDivider: true,
 };
 
 export default defaultProps;

package/components/hy-loading/hy-loading.vue

@@ -0,0 +1,95 @@
+<template>
+  <view
+    class="hy-loading-icon"
+    :style="customStyle"
+    :class="[vertical && 'hy-loading-icon--vertical']"
+    v-if="show"
+  >
+    <view
+      v-if="!webviewHide"
+      class="hy-loading-icon__spinner"
+      :class="[`hy-loading-icon__spinner--${mode}`]"
+      ref="ani"
+      :style="{
+        color: color,
+        width: addUnit(size),
+        height: addUnit(size),
+        borderTopColor: color,
+        borderBottomColor: otherBorderColor,
+        borderLeftColor: otherBorderColor,
+        borderRightColor: otherBorderColor,
+        'animation-duration': `${duration}ms`,
+        'animation-timing-function':
+          mode === 'semicircle' || mode === 'circle' ? timingFunction : '',
+      }"
+    >
+      <block v-if="mode === 'spinner'">
+        <!-- #ifndef APP-NVUE -->
+        <view
+          v-for="(item, index) in array12"
+          :key="index"
+          class="hy-loading-icon__dot"
+        >
+        </view>
+        <!-- #endif -->
+      </block>
+    </view>
+    <text
+      v-if="text"
+      class="hy-loading-icon__text"
+      :style="{
+        fontSize: addUnit(textSize),
+        color: textColor,
+      }"
+      >{{ text }}</text
+    >
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import type IProps from "./typing";
+import { toRefs, ref, computed } from "vue";
+import { addUnit, colorGradient } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { show, size, color, mode, inactiveColor } = toRefs(props);
+const emit = defineEmits(["update:modelValue", "change"]);
+
+//动画旋转角度
+const aniAngel = ref(360);
+const array12 = Array.from({
+  length: 12,
+});
+const webviewHide = ref(false);
+
+const otherBorderColor = computed(() => {
+  const lightColor = colorGradient(color.value, "#ffffff", 100)[80];
+  if (mode.value === "circle") {
+    return inactiveColor.value ? inactiveColor.value : lightColor;
+  } else {
+    return "transparent";
+  }
+});
+
+// 监听webview的显示与隐藏
+// const addEventListenerToWebview = () => {
+//   // webview的堆栈
+//   const pages = getCurrentPages()
+//   // 当前页面
+//   const page = pages[pages.length - 1]
+//   // 当前页面的webview实例
+//   const currentWebview = page.$getAppWebview()
+//   // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+//   currentWebview.addEventListener('hide', () => {
+//     webviewHide.value = true
+//   })
+//   currentWebview.addEventListener('show', () => {
+//     webviewHide.value = false
+//   })
+// }
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/components/hy-loading/index.scss

@@ -0,0 +1,103 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+.hy-loading-icon {
+  @include flex(row);
+  align-items: center;
+  justify-content: center;
+  color: #c8c9cc;
+
+  &__text {
+    margin-left: 4px;
+    color: $hy-text-color-grey;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  &__spinner {
+    width: 30px;
+    height: 30px;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    max-width: 100%;
+    max-height: 100%;
+    animation: hy-rotate 1s linear infinite;
+    /* #endif */
+  }
+
+  &__spinner--semicircle {
+    border: 2px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__spinner--circle {
+    border-radius: 50%;
+    border: 2px solid #e5e5e5;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+}
+
+/* #ifndef APP-NVUE */
+:host {
+  font-size: 0;
+  line-height: 1px;
+}
+
+.hy-loading-icon {
+  &__spinner--spinner {
+    animation-timing-function: steps(12);
+  }
+
+  &__text:empty {
+    display: none;
+  }
+
+  &--vertical &__text {
+    margin: 6px 0 0;
+    color: $hy-text-color-grey;
+  }
+
+  &__dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &:before {
+      /* #ifndef APP-NVUE */
+      display: block;
+      /* #endif */
+      width: 2px;
+      height: 25%;
+      margin: 0 auto;
+      background-color: currentColor;
+      border-radius: 40%;
+      content: " ";
+    }
+  }
+}
+
+@for $i from 1 through 12 {
+  .hy-loading-icon__dot:nth-of-type(#{$i}) {
+    transform: rotate($i * 30deg);
+    opacity: 1 - 0.0625 * ($i - 1);
+  }
+}
+
+@keyframes hy-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* #endif */

package/components/hy-loading/props.ts

@@ -0,0 +1,17 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  show: true,
+  color: "#909399",
+  textColor: "#909399",
+  vertical: false,
+  mode: "spinner",
+  size: 24,
+  textSize: 15,
+  text: "",
+  timingFunction: "ease-in-out",
+  duration: 1200,
+  inactiveColor: "",
+};
+
+export default defaultProps;

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

@@ -0,0 +1,52 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否显示组件 (默认 true)
+   * */
+  show?: boolean;
+  /**
+   * @description 动画活动区域的颜色，只对 mode = flower 模式有效
+   * */
+  color?: string;
+  /**
+   * @description 提示文本的颜色
+   * */
+  textColor?: string;
+  /**
+   * @description 文字和图标是否垂直排列 (默认 false )
+   * */
+  vertical?: boolean;
+  /**
+   * @description 模式选择，见官网说明（默认 'circle' ）
+   * */
+  mode?: "spinner" | "circle" | "semicircle";
+  /**
+   * @description 加载图标的大小，单位px （默认 24 ）
+   * */
+  size?: number | string;
+  /**
+   * @description 文字大小（默认 15 ）
+   * */
+  textSize?: number | string;
+  /**
+   * @description 文字内容
+   * */
+  text?: string;
+  /**
+   * @description 动画模式 （默认 'ease-in-out' ）
+   * */
+  timingFunction?: "ease-in-out" | "linear" | "ease-in" | "ease-out" | "ease";
+  /**
+   * @description 动画执行周期时间（默认 1200）
+   * */
+  duration?: number;
+  /**
+   * @description mode=circle时的暗边颜色
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-login/TheUserLogin.vue

@@ -150,18 +150,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { onHide } from "@dcloudio/uni-app";
 import { storeToRefs } from "pinia";
 import { useUserInfo } from "../../store";
 import { decryptData, encryptData } from "../../utils";
+import type { FormColumnsType, FormTypeEnum } from "../../typing";
+import { IconConfig } from "../../config";
 
 // 组件
 import HyCheckbox from "../hy-checkbox/hy-checkbox.vue";
 import HyForm from "../hy-form/hy-form.vue";
 import HyInput from "../hy-input/hy-input.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
-import { FormColumnsType, FormTypeEnum, IconConfig } from "@/package";
 
 interface IProps {
   themeColor: string;
@@ -184,7 +185,7 @@ const props = withDefaults(defineProps<IProps>(), {
   customUserValidator: () => ({}),
   customPwdValidator: () => ({}),
   userNumValidator: () => ({}),
-  pwdNumValidator: () => ({})
+  pwdNumValidator: () => ({}),
 });
 const emit = defineEmits(["handleHistory", "handleCheckbox"]);
 const userInfoStore = useUserInfo();
@@ -195,14 +196,14 @@ const userColumns = reactive([
     field: "user",
     label: "",
     type: FormTypeEnum.CUSTOM,
-    rules: [props.customUserValidator, props.userNumValidator]
+    rules: [props.customUserValidator, props.userNumValidator],
   },
   {
     field: "pwd",
     label: "",
     type: FormTypeEnum.CUSTOM,
-    rules: [props.customUserValidator, props.pwdNumValidator]
-  }
+    rules: [props.customUserValidator, props.pwdNumValidator],
+  },
 ]);
 const rememberList = reactive([{ label: "记住密码", value: 1 }]);
 const showPwd = ref<boolean>(false);
@@ -215,21 +216,21 @@ const userRules = reactive({
       required: true,
       message: "请先输入账号",
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"]
+      trigger: ["blur", "change"],
     },
     props.customUserValidator,
-    props.userNumValidator
+    props.userNumValidator,
   ],
   pwd: [
     {
       required: true,
       message: "请输入密码",
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"]
+      trigger: ["blur", "change"],
     },
     props.pwdNumValidator,
-    props.customPwdValidator
-  ]
+    props.customPwdValidator,
+  ],
 });
 const rememberPassword = ref([0]);
 const account = uni.getStorageSync(`${props.prefix}_account`);
@@ -270,7 +271,7 @@ onHide(() => {
     // 数组前面加数据
     choiceList.value.unshift({
       user: userName,
-      pwd: password
+      pwd: password,
     });
     // 数组最多只放三个账号
     if (choiceList.value.length >= 5) {
@@ -278,7 +279,7 @@ onHide(() => {
     }
     uni.setStorageSync(
       `${props.prefix}_choiceList`,
-      encryptData(choiceList.value)
+      encryptData(choiceList.value),
     );
   }
 });
@@ -291,7 +292,6 @@ const loginFn = () => {
     form_1Ref.value
       .handleSubmit()
       .then((res) => {
-        console.log(111);
         resolve("success" + res);
       })
       .catch((err) => {
@@ -329,7 +329,7 @@ const extensionFun = (index: number, username: string) => {
       choiceList.value.splice(i, 1);
       uni.setStorageSync(
         `${props.prefix}_choiceList`,
-        encryptData(choiceList.value)
+        encryptData(choiceList.value),
       );
       break;
     default:
@@ -349,7 +349,7 @@ const handleBlur = (event: string, temp: FormColumnsType) => {
 };
 
 defineExpose({
-  loginFn
+  loginFn,
 });
 </script>
 

package/components/hy-login/hy-login.vue

@@ -59,12 +59,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs, computed, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { encryptData } from "../../utils";
 import { useUserInfo } from "../../store";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 
 // 组件
 import TheUserLogin from "./TheUserLogin.vue";
@@ -113,11 +113,11 @@ const selectModel = (temp: number) => {
 };
 const tabs = ref([
   {
-    name: "账号登录"
+    name: "账号登录",
   },
   {
-    name: "验证码登录"
-  }
+    name: "验证码登录",
+  },
 ]);
 const currentTab = ref(0);
 const userLoginRef = ref<typeof TheUserLogin>(null);
@@ -136,7 +136,7 @@ watch(
       }
     }).value;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 /**
@@ -156,15 +156,15 @@ const loginFn = async () => {
           encryptData({
             rememberPsw: rememberPsw.value,
             userName: user,
-            password: pwd
-          })
+            password: pwd,
+          }),
         );
       } else {
         // 如果没有选记住密码就移除之前保存的
         uni.removeStorageSync(`${props.prefix}_account`);
         uni.setStorageSync(
           `${props.prefix}_account`,
-          encryptData({ rememberPsw: rememberPsw.value })
+          encryptData({ rememberPsw: rememberPsw.value }),
         );
       }
       emit("login", { user, pwd });

package/components/hy-login/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   logo: "",
@@ -16,7 +16,7 @@ const defaultProps: IProps = {
     min: 6,
     max: 20,
     message: "长度在6-20个字符之间",
-    trigger: ["blur", "change"]
+    trigger: ["blur", "change"],
   }),
   customPhoneValidator: () => ({
     // 自定义验证函数，见上说明
@@ -25,8 +25,8 @@ const defaultProps: IProps = {
       return /^[1][0-9]{10}$/.test(value);
     },
     message: "手机号码不正确",
-    trigger: ["change", "blur"]
-  })
+    trigger: ["change", "blur"],
+  }),
 };
 
 export default defaultProps;