hy-app 0.2.16 → 0.3.0

package/components/hy-line-progress/hy-line-progress.vue

@@ -25,11 +25,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
- * @displayName hy-line-progress
- */
-defineOptions({})
 export default {
   name: 'hy-line-progress',
   options: {
@@ -41,18 +36,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  getCurrentInstance,
-  onMounted,
-  type PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, getPx, getRect, range, sleep } from '../../utils'
 
+/**
+ * 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+ * @displayName hy-line-progress
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 激活部分的颜色 */
@@ -67,7 +60,7 @@ const props = defineProps({
   /** 是否在进度条内部显示百分比的值 */
   showText: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   /** 进度条的高度，单位px */
   height: {

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

@@ -62,11 +62,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
- * @displayName hy-list
- */
-defineOptions({})
 export default {
   name: 'hy-list',
   options: {
@@ -93,6 +88,12 @@ import {
 import { addUnit, getPx, getRect } from '../../utils'
 import type { IListEmits } from './typing'
 
+/**
+ * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
+ * @displayName hy-list
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 数据列表 */

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

@@ -43,11 +43,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
- * @displayName hy-loading
- */
-defineOptions({})
 export default {
   name: 'hy-loading',
   options: {
@@ -63,6 +58,12 @@ import { toRefs, ref, computed } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit, colorGradient } from '../../utils'
 
+/**
+ * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
+ * @displayName hy-loading
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示组件 */
@@ -92,12 +93,12 @@ const props = defineProps({
   },
   /** 加载图标的大小，单位px */
   size: {
-    type: Number,
+    type: [String, Number],
     default: 24,
   },
   /** 文字大小 */
   textSize: {
-    type: Number,
+    type: [String, Number],
     default: 15,
   },
   /** 文字内容 */
@@ -115,9 +116,7 @@ const props = defineProps({
   /** mode=circle时的暗边颜色 */
   inactiveColor: String,
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
 })
 const { show, size, color, mode, inactiveColor } = toRefs(props)
 

package/components/hy-login/TheUserLogin.vue

@@ -21,52 +21,52 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
-import { onHide } from "@dcloudio/uni-app";
-import { storeToRefs } from "pinia";
-import { useUserInfo } from "../../store";
-import { decryptData, encryptData } from "../../utils";
-import { FormTypeEnum } from "../../typing";
-import { IconConfig } from "../../config";
-import type { UserLoginInfoVo } from "./typing";
+import { ref, reactive, onMounted, computed } from 'vue'
+import { onHide } from '@dcloudio/uni-app'
+import { storeToRefs } from 'pinia'
+import { useUserInfo } from '../../store'
+import { decryptData, encryptData } from '../../utils'
+import { FormTypeEnum } from '../../typing'
+import { IconConfig } from '../../config'
+import type { UserLoginInfoVo } from './typing'
 
 // 组件
-import HyCheckbox from "../hy-checkbox/hy-checkbox.vue";
-import HyForm from "../hy-form/hy-form.vue";
+import HyCheckbox from '../hy-checkbox/hy-checkbox.vue'
+import HyForm from '@/package/components/hy-form-group/hy-form.vue'
 
 interface IProps {
-  themeColor: string;
-  prefix: string;
-  isShowPwd: boolean;
-  userPlaceholder: string;
-  pwdPlaceholder: string;
-  customUserValidator: Record<string, any>;
-  customPwdValidator: Record<string, any>;
-  userNumValidator: Record<string, any>;
-  pwdNumValidator: Record<string, any>;
+  themeColor: string
+  prefix: string
+  isShowPwd: boolean
+  userPlaceholder: string
+  pwdPlaceholder: string
+  customUserValidator: Record<string, any>
+  customPwdValidator: Record<string, any>
+  userNumValidator: Record<string, any>
+  pwdNumValidator: Record<string, any>
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  themeColor: "",
-  prefix: "hy",
+  themeColor: '',
+  prefix: 'hy',
   isShowPwd: false,
-  userPlaceholder: "",
-  pwdPlaceholder: "",
+  userPlaceholder: '',
+  pwdPlaceholder: '',
   customUserValidator: () => ({}),
   customPwdValidator: () => ({}),
   userNumValidator: () => ({}),
   pwdNumValidator: () => ({}),
-});
-const emit = defineEmits(["handleHistory", "handleCheckbox"]);
-const userInfoStore = useUserInfo();
-const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore);
+})
+const emit = defineEmits(['handleHistory', 'handleCheckbox'])
+const userInfoStore = useUserInfo()
+const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore)
 
-const showChoice = ref<boolean>(false);
-const showPwd = ref<boolean>(false);
+const showChoice = ref<boolean>(false)
+const showPwd = ref<boolean>(false)
 const userColumns = computed(() => [
   {
-    field: "userName",
-    label: "",
+    field: 'userName',
+    label: '',
     type: FormTypeEnum.TEXT,
     input: {
       clearable: true,
@@ -76,20 +76,18 @@ const userColumns = computed(() => [
         color: props.themeColor,
       },
       suffixIcon: {
-        name: showChoice.value
-          ? IconConfig.ARROW_UP_FILL
-          : IconConfig.ARROW_DOWN_FILL,
+        name: showChoice.value ? IconConfig.ARROW_UP_FILL : IconConfig.ARROW_DOWN_FILL,
         color: props.themeColor,
       },
       onSuffix: () => {
-        showChoice.value = !showChoice.value;
+        showChoice.value = !showChoice.value
       },
     },
     rules: [props.customUserValidator, props.userNumValidator],
   },
   {
-    field: "password",
-    label: "",
+    field: 'password',
+    label: '',
     type: showPwd.value ? FormTypeEnum.TEXT : FormTypeEnum.PASSWORD,
     input: {
       clearable: true,
@@ -103,22 +101,22 @@ const userColumns = computed(() => [
         color: props.themeColor,
       },
       onSuffix: () => {
-        showPwd.value = !showPwd.value;
+        showPwd.value = !showPwd.value
       },
     },
     rules: [props.customUserValidator, props.pwdNumValidator],
   },
-]);
-const rememberList = reactive([{ label: "记住密码", value: 1 }]);
-const form_1Ref = ref<InstanceType<typeof HyForm>>();
+])
+const rememberList = reactive([{ label: '记住密码', value: 1 }])
+const form_1Ref = ref<InstanceType<typeof HyForm>>()
 // 效验用户名和密码
 const userRules = reactive({
   userName: [
     {
       required: true,
-      message: "请先输入账号",
+      message: '请先输入账号',
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"],
+      trigger: ['blur', 'change'],
     },
     props.customUserValidator,
     props.userNumValidator,
@@ -126,44 +124,44 @@ const userRules = reactive({
   password: [
     {
       required: true,
-      message: "请输入密码",
+      message: '请输入密码',
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"],
+      trigger: ['blur', 'change'],
     },
     props.pwdNumValidator,
     props.customPwdValidator,
   ],
-});
-const rememberPassword = ref(false);
-const account = uni.getStorageSync(`${props.prefix}_account`);
-const accountList = uni.getStorageSync(`${props.prefix}_choiceList`);
+})
+const rememberPassword = ref(false)
+const account = uni.getStorageSync(`${props.prefix}_account`)
+const accountList = uni.getStorageSync(`${props.prefix}_choiceList`)
 
 onMounted(() => {
-  if (!account) return;
-  const result = decryptData(account);
-  console.log(result);
+  if (!account) return
+  const result = decryptData(account)
+  console.log(result)
   //有缓存就赋值给文本没有就清空
-  rememberPsw.value = result?.rememberPsw;
+  rememberPsw.value = result?.rememberPsw
   //获取缓存的账号和密码
-  userForm.value.userName = result?.userName;
-  userForm.value.password = result?.password;
+  userForm.value.userName = result?.userName
+  userForm.value.password = result?.password
 
   if (accountList) {
-    choiceList.value = decryptData(accountList) as UserLoginInfoVo[];
+    choiceList.value = decryptData(accountList) as UserLoginInfoVo[]
   }
-});
+})
 
 onHide(() => {
   // if (!account) return;
   //获取缓存的账号和密码
-  const { userName, password } = decryptData(account);
+  const { userName, password } = decryptData(account)
   if (choiceList.value.length) {
     // 过滤数判断是否有一样的账号
     const filterArr = choiceList.value.filter((item) => {
-      return item.user === userName;
-    });
+      return item.user === userName
+    })
     // 有一样的账号退出函数不执行下面的
-    if (filterArr.length) return;
+    if (filterArr.length) return
   }
   // 判断是否有保存账号和密码
   if (userName && password) {
@@ -171,17 +169,14 @@ onHide(() => {
     choiceList.value.unshift({
       user: userName,
       pwd: password,
-    });
+    })
     // 数组最多只放三个账号
     if (choiceList.value.length >= 5) {
-      choiceList.value.splice(5, 1);
+      choiceList.value.splice(5, 1)
     }
-    uni.setStorageSync(
-      `${props.prefix}_choiceList`,
-      encryptData(choiceList.value),
-    );
+    uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
   }
-});
+})
 
 /**
  * 登录效验
@@ -191,30 +186,30 @@ const loginFn = () => {
     form_1Ref.value
       ?.handleSubmit()
       .then((res) => {
-        resolve("success" + res);
+        resolve('success' + res)
       })
       .catch((err) => {
-        reject("error" + err);
-      });
-  });
-};
+        reject('error' + err)
+      })
+  })
+}
 
 /**
  * 勾选是否记住密码
  * */
 const checkboxChange = () => {
-  emit("handleCheckbox", rememberPassword.value);
-};
+  emit('handleCheckbox', rememberPassword.value)
+}
 
 /**
  * 选择历史账号
  * */
 const btnChoiceClick = (index: number) => {
-  showChoice.value = false;
-  userForm.value.name = choiceList.value[index].user;
-  userForm.value.pwd = choiceList.value[index].pwd;
-  emit("handleHistory");
-};
+  showChoice.value = false
+  userForm.value.name = choiceList.value[index].user
+  userForm.value.pwd = choiceList.value[index].pwd
+  emit('handleHistory')
+}
 
 /**
  * 长按操作历史账户
@@ -224,21 +219,18 @@ const btnChoiceClick = (index: number) => {
 const extensionFun = (index: number, username: string) => {
   switch (index) {
     case 0:
-      const i = choiceList.value.findIndex((item) => item.user === username);
-      choiceList.value.splice(i, 1);
-      uni.setStorageSync(
-        `${props.prefix}_choiceList`,
-        encryptData(choiceList.value),
-      );
-      break;
+      const i = choiceList.value.findIndex((item) => item.user === username)
+      choiceList.value.splice(i, 1)
+      uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
+      break
     default:
-      break;
+      break
   }
-};
+}
 
 defineExpose({
   loginFn,
-});
+})
 </script>
 
 <style lang="scss" scoped>

package/components/hy-menu/hy-menu.vue

@@ -43,11 +43,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
- * @displayName hy-menu
- */
-defineOptions({})
 export default {
   name: 'hy-menu',
   options: {
@@ -59,21 +54,27 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, PropType, ref, toRefs, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { IMenuEmits, MenusType } from './typing'
 import { addUnit } from '../../utils'
 
 import type HyBadgeProps from '../hy-badge/typing'
 import type HyIconProps from '../hy-icon/typing'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyBadge from '../hy-badge/hy-badge.vue'
 
+/**
+ * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+ * @displayName hy-menu
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 当前值 */
-  modelValue: String,
+  modelValue: [String, Number],
   /** 菜单数据集 */
   list: {
     type: Array as PropType<Array<MenusType>>,
@@ -96,6 +97,8 @@ const props = defineProps({
     type: Object as PropType<HyBadgeProps>,
     default: {},
   },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
 })
 const { modelValue, list, color } = toRefs(props)
 const emit = defineEmits<IMenuEmits>()

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

@@ -88,11 +88,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
- * @displayName hy-modal
- */
-defineOptions({})
 export default {
   name: 'hy-modal',
   options: {
@@ -107,11 +102,16 @@ export default {
 import { ref, toRefs, watch } from 'vue'
 import type { IModalEmits } from './typing'
 import { addUnit } from '../../utils'
-
 // 组件
 import HyPopup from '../hy-popup/hy-popup.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 
+/**
+ * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+ * @displayName hy-modal
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否显示模态框 */

package/components/hy-modal/index.scss

@@ -78,7 +78,7 @@
         /* 取消 */
         &--cancel {
           //background-color: $hy-background--empty;
-          background-color: #323233;
+          background-color: $hy-background--empty;
 
           &-text {
             color: $hy-text-color;

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

@@ -84,11 +84,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
- * @displayName hy-navbar
- */
-defineOptions({})
 export default {
   name: 'hy-navbar',
   options: {
@@ -105,11 +100,16 @@ import type { CSSProperties, PropType } from 'vue'
 import type { INavbarEmits } from './typing'
 import { addUnit, getPx, getWindowInfo } from '../../utils'
 import { IconConfig } from '../../config'
-
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
 
+/**
+ * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
+ * @displayName hy-navbar
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 是否开启顶部安全区适配 */

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

@@ -44,11 +44,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件用于滚动通告场景，有多种模式可供选择
- * @displayName hy-notice-bar
- */
-defineOptions({})
 export default {
   name: 'hy-notice-bar',
   options: {
@@ -61,20 +56,26 @@ export default {
 
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
-import type { INoticeBarEmits } from './typing'
+import type { PropType, CSSProperties } from 'vue'
+import { INoticeBarEmits, NoticeBarModeVo } from './typing'
 import { IconConfig } from '../../config'
-
 // 组件
 import HyRowNotice from './hy-row-notice.vue'
 import HyColumnNotice from './hy-column-notice.vue'
 
+/**
+ * 该组件用于滚动通告场景，有多种模式可供选择
+ * @displayName hy-notice-bar
+ */
+defineOptions({})
+
 const show = ref(true)
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 显示的内容，数组 */
   text: {
-    type: [String, Array],
+    type: [String, Array] as PropType<string | string[]>,
     default: [],
   },
   /**
@@ -99,7 +100,7 @@ const props = defineProps({
    * 通告模式，link-显示右箭头，closable-显示右侧关闭图标
    * @values link,closable
    * */
-  mode: String,
+  mode: String as PropType<NoticeBarModeVo>,
   /** 文字颜色，各图标也会使用文字颜色 */
   color: String,
   /** 背景颜色 */
@@ -142,6 +143,10 @@ const props = defineProps({
   },
   /** 跳转地址 */
   url: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const { mode, linkType, url } = toRefs(props)
 const emit = defineEmits<INoticeBarEmits>()

package/components/hy-notify/hy-notify.vue

@@ -30,11 +30,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
- * @displayName hy-notify
- */
-defineOptions({})
 export default {
   name: 'hy-notify',
   options: {
@@ -50,13 +45,18 @@ import type IProps from './typing'
 import { computed, ref } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { IconConfig } from '../../config'
-
 import { addUnit } from '../../utils'
 // 组件
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
+ * @displayName hy-notify
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 到顶部的距离 */

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

@@ -126,11 +126,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于商城购物选择物品数量的场景
- * @displayName hy-number-step
- */
-defineOptions({})
 export default {
   name: 'hy-number-step',
   options: {
@@ -146,9 +141,16 @@ import { computed, toRefs, ref, watch, onMounted, nextTick } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { addUnit } from '../../utils'
 import { IconConfig } from '../../config'
-import HyIcon from '../hy-icon/hy-icon.vue'
 import type HyIconProps from '../hy-icon/typing'
 import type { INumberStepEmits } from './typing'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 一般用于商城购物选择物品数量的场景
+ * @displayName hy-number-step
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({