hy-app 0.1.4 → 0.2.0

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

@@ -66,16 +66,20 @@
 
 <script lang="ts">
 export default {
+  name: 'hy-list',
   options: {
+    addGlobalClass: true,
     virtualHost: true,
-  },
-};
+    styleIsolation: 'shared'
+  }
+}
 </script>
 
 <script lang="ts" setup>
 import {
   computed,
   type CSSProperties,
+  getCurrentInstance,
   nextTick,
   onMounted,
   reactive,
@@ -84,8 +88,7 @@ import {
   useSlots,
   watch,
 } from "vue";
-import { addUnit, debounce, getPx, getRect } from "../../utils";
-import HyDivider from "../hy-divider/hy-divider.vue";
+import { addUnit, getPx, getRect } from "../../utils";
 import type IProps from "./typing";
 import defaultProps from "./props";
 
@@ -109,7 +112,10 @@ const slots = useSlots();
 const scrollTop = ref(0);
 // 可视区域的高度
 const viewHeight = ref(0);
-const waterfall: { left: AnyObject[]; right: AnyObject[] } = reactive({
+const waterfall: {
+  left: AnyObject[];
+  right: AnyObject[];
+} = reactive({
   left: [],
   right: [],
 });
@@ -117,10 +123,11 @@ const waterfall: { left: AnyObject[]; right: AnyObject[] } = reactive({
 const arrange = computed(() => (line.value === 1 ? "column" : "row"));
 const boxHeight = getPx(itemHeight.value) + getPx(marginBottom.value);
 const listHeight = addUnit(containerHeight.value);
+const instance = getCurrentInstance();
 
 onMounted(() => {
   nextTick(async () => {
-    const res = await getRect(".hy-virtual-container");
+    const res = await getRect(".hy-virtual-container", false, instance);
     viewHeight.value = (res as UniApp.NodeInfo).height ?? 0;
   });
 });
@@ -178,9 +185,9 @@ watch(
     if (line.value === 2 && newVal.every((item) => typeof item !== "string")) {
       newVal.forEach((item, i) => {
         if (i % 2 === 0) {
-          waterfall.left.push(item);
+          waterfall.left.push(item as AnyObject);
         } else {
-          waterfall.right.push(item);
+          waterfall.right.push(item as AnyObject);
         }
       });
     }
@@ -217,4 +224,12 @@ const slotDefault = useSlots().default;
 
 <style lang="scss" scoped>
 @import "./index.scss";
+.hy-virtual-container {
+  height: v-bind(listHeight);
+  &__list {
+    padding: v-bind(paddingAttr);
+    display: flex;
+    flex-direction: v-bind(arrange);
+  }
+}
 </style>

package/components/hy-list/index.scss

@@ -1,14 +1,11 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-virtual-container {
-  height: v-bind(listHeight);
+@include b(virtual-container) {
   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;

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

@@ -1,4 +1,4 @@
-export default interface IProps {
+export default interface HyListProps {
   /**
    * @description 数据列表
    * */

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

@@ -46,6 +46,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-loading',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type IProps from "./typing";

package/components/hy-loading/index.scss

@@ -2,7 +2,7 @@
 @use "../../libs/css/mixin.scss" as *;
 
 
-.hy-loading-icon {
+@include b(loading-icon) {
   @include flex(row);
   align-items: center;
   justify-content: center;
@@ -48,7 +48,7 @@
   line-height: 1px;
 }
 
-.hy-loading-icon {
+@include b(loading-icon) {
   &__spinner--spinner {
     animation-timing-function: steps(12);
   }

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

@@ -1,7 +1,6 @@
 import type { CSSProperties } from "vue";
-import type { LoadingMode } from "@/package/typing/modules/common";
 
-export default interface IProps {
+export default interface HyLoadingProps {
   /**
    * @description 是否显示组件 (默认 true)
    * */

package/components/hy-login/TheUserLogin.vue

@@ -1,71 +1,11 @@
 <template>
   <view class="user-login">
-    <HyForm ref="form_1Ref" :columns="userColumns" :formData="userForm">
-      <template #user="{ record, errorStyle }">
-        <HyInput
-          v-model="userForm.name"
-          :placeholder="userPlaceholder"
-          :clearable="true"
-          border="bottom"
-          :customStyle="errorStyle"
-          @change="handleChange($event, record)"
-          @blur="handleBlur($event, record)"
-        >
-          <!-- #ifndef APP-PLUS-NVUE -->
-          <template #prefix>
-            <HyIcon :name="IconConfig.MINE" :color="themeColor"></HyIcon>
-          </template>
-          <template #suffix>
-            <HyIcon
-              :name="
-                !showChoice
-                  ? IconConfig.ARROW_DOWN_FILL
-                  : IconConfig.ARROW_UP_FILL
-              "
-              @tap="showChoice = !showChoice"
-              :color="themeColor"
-            ></HyIcon>
-            <view class="dialog-view" v-if="showChoice && choiceList.length">
-              <view
-                class="dialog-title"
-                v-for="(item, index) in choiceList"
-                :key="index"
-                @click="btnChoiceClick(index)"
-              >
-                {{ item.user }}
-              </view>
-            </view>
-          </template>
-          <!-- #endif -->
-        </HyInput>
-      </template>
-      <template #pwd="{ record }">
-        <HyInput
-          :type="showPwd ? 'text' : 'password'"
-          v-model="userForm.pwd"
-          :placeholder="pwdPlaceholder"
-          :clearable="true"
-          border="bottom"
-          :password-icon="false"
-          @change="handleChange($event, record)"
-          @blur="handleBlur($event, record)"
-        >
-          <!-- #ifndef APP-PLUS-NVUE -->
-          <template #prefix>
-            <HyIcon :name="IconConfig.LOCK" :color="themeColor"></HyIcon>
-          </template>
-          <template v-if="isShowPwd" #suffix>
-            <HyIcon
-              size="16"
-              @click="showPasswordFn"
-              color="#c8c9cc"
-              :name="showPwd ? 'eye-fill' : 'eye-off'"
-            ></HyIcon>
-          </template>
-          <!-- #endif -->
-        </HyInput>
-      </template>
-    </HyForm>
+    <HyForm
+      ref="form_1Ref"
+      :columns="userColumns"
+      :formData="userForm"
+      :input="{ border: 'bottom' }"
+    ></HyForm>
 
     <!-- 记住密码 -->
     <view class="mui-input-row mui-checkbox">
@@ -73,7 +13,7 @@
         :columns="rememberList"
         shape="square"
         :active-color="themeColor"
-        v-model="rememberPassword"
+        v-model="rememberPsw"
         @change="checkboxChange"
       ></HyCheckbox>
     </view>
@@ -81,20 +21,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+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 type { FormColumnsType } from "../../typing";
 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 HyInput from "../hy-input/hy-input.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
 
 interface IProps {
   themeColor: string;
@@ -110,7 +48,7 @@ interface IProps {
 
 const props = withDefaults(defineProps<IProps>(), {
   themeColor: "",
-  prefix: "gxh",
+  prefix: "hy",
   isShowPwd: false,
   userPlaceholder: "",
   pwdPlaceholder: "",
@@ -123,27 +61,60 @@ const emit = defineEmits(["handleHistory", "handleCheckbox"]);
 const userInfoStore = useUserInfo();
 const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore);
 
-const userColumns = reactive([
+const showChoice = ref<boolean>(false);
+const showPwd = ref<boolean>(false);
+const userColumns = computed(() => [
   {
-    field: "user",
+    field: "userName",
     label: "",
-    type: FormTypeEnum.CUSTOM,
+    type: FormTypeEnum.TEXT,
+    input: {
+      clearable: true,
+      placeholder: props.userPlaceholder,
+      prefixIcon: {
+        name: IconConfig.MINE,
+        color: props.themeColor,
+      },
+      suffixIcon: {
+        name: showChoice.value
+          ? IconConfig.ARROW_UP_FILL
+          : IconConfig.ARROW_DOWN_FILL,
+        color: props.themeColor,
+      },
+      onSuffix: () => {
+        showChoice.value = !showChoice.value;
+      },
+    },
     rules: [props.customUserValidator, props.userNumValidator],
   },
   {
-    field: "pwd",
+    field: "password",
     label: "",
-    type: FormTypeEnum.CUSTOM,
+    type: showPwd.value ? FormTypeEnum.TEXT : FormTypeEnum.PASSWORD,
+    input: {
+      clearable: true,
+      placeholder: props.pwdPlaceholder,
+      prefixIcon: {
+        name: IconConfig.LOCK,
+        color: props.themeColor,
+      },
+      suffixIcon: {
+        name: showPwd.value ? IconConfig.EYE : IconConfig.EYE_CLOSE,
+        color: props.themeColor,
+      },
+      onSuffix: () => {
+        showPwd.value = !showPwd.value;
+        console.log(showChoice.value);
+      },
+    },
     rules: [props.customUserValidator, props.pwdNumValidator],
   },
 ]);
 const rememberList = reactive([{ label: "记住密码", value: 1 }]);
-const showPwd = ref<boolean>(false);
-const showChoice = ref<boolean>(false);
 const form_1Ref = ref<InstanceType<typeof HyForm>>();
 // 效验用户名和密码
 const userRules = reactive({
-  name: [
+  userName: [
     {
       required: true,
       message: "请先输入账号",
@@ -153,7 +124,7 @@ const userRules = reactive({
     props.customUserValidator,
     props.userNumValidator,
   ],
-  pwd: [
+  password: [
     {
       required: true,
       message: "请输入密码",
@@ -164,30 +135,27 @@ const userRules = reactive({
     props.customPwdValidator,
   ],
 });
-const rememberPassword = ref([0]);
+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);
   //有缓存就赋值给文本没有就清空
-  rememberPsw.value = result.rememberPsw;
-  if (account) {
-    //获取缓存的账号和密码
-    userForm.value.name = result.userName;
-    userForm.value.pwd = result.password;
-  } else {
-    userForm.value.name = "";
-    userForm.value.pwd = "";
-  }
+  rememberPsw.value = result?.rememberPsw;
+  //获取缓存的账号和密码
+  userForm.value.userName = result?.userName;
+  userForm.value.password = result?.password;
+
   if (accountList) {
-    choiceList.value = decryptData(accountList);
+    choiceList.value = decryptData(accountList) as UserLoginInfoVo[];
   }
 });
 
 onHide(() => {
-  if (!account) return;
+  // if (!account) return;
   //获取缓存的账号和密码
   const { userName, password } = decryptData(account);
   if (choiceList.value.length) {
@@ -222,7 +190,7 @@ onHide(() => {
 const loginFn = () => {
   return new Promise((resolve, reject) => {
     form_1Ref.value
-      .handleSubmit()
+      ?.handleSubmit()
       .then((res) => {
         resolve("success" + res);
       })
@@ -236,7 +204,7 @@ const loginFn = () => {
  * 勾选是否记住密码
  * */
 const checkboxChange = () => {
-  emit("handleCheckbox", rememberPsw.value);
+  emit("handleCheckbox", rememberPassword.value);
 };
 
 /**
@@ -269,17 +237,6 @@ const extensionFun = (index: number, username: string) => {
   }
 };
 
-const showPasswordFn = () => {
-  showPwd.value = !showPwd.value;
-};
-
-const handleChange = (event: string, temp: FormColumnsType) => {
-  form_1Ref.value?.validateField(temp.rules, event, temp.field, "change");
-};
-const handleBlur = (event: string, temp: FormColumnsType) => {
-  form_1Ref.value?.validateField(temp.rules, event, temp.field, "blur");
-};
-
 defineExpose({
   loginFn,
 });

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

@@ -33,6 +33,7 @@
         :customPwdValidator="props.customPwdValidator"
         :userNumValidator="props.userNumValidator"
         :pwdNumValidator="props.pwdNumValidator"
+        @handleCheckbox="handleCheckbox"
       />
       <ThePhoneLogin
         v-if="'phone' === indexCode(currentTab)"
@@ -120,8 +121,8 @@ const tabs = ref([
   },
 ]);
 const currentTab = ref(0);
-const userLoginRef = ref<typeof TheUserLogin>(null);
-const phoneLoginRef = ref<typeof ThePhoneLogin>(null);
+const userLoginRef = ref<InstanceType<typeof TheUserLogin>>();
+const phoneLoginRef = ref<InstanceType<typeof ThePhoneLogin>>();
 watch(
   () => Number(props.loginType),
   (newVal) => {
@@ -146,17 +147,16 @@ const loginFn = async () => {
   const type = await selectModel(currentTab.value);
   switch (type) {
     case "user":
-      let user = userForm.value.name;
-      let pwd = userForm.value.pwd;
-      await userLoginRef.value.loginFn();
+      // let user = userForm.value.userName;
+      // let pwd = userForm.value.password;
+      await userLoginRef.value?.loginFn();
       //缓存账号和密码
-      if (rememberPsw.value == 1) {
+      if (rememberPsw.value) {
         uni.setStorageSync(
           `${props.prefix}_account`,
           encryptData({
             rememberPsw: rememberPsw.value,
-            userName: user,
-            password: pwd,
+            ...userForm.value,
           }),
         );
       } else {
@@ -167,10 +167,10 @@ const loginFn = async () => {
           encryptData({ rememberPsw: rememberPsw.value }),
         );
       }
-      emit("login", { user, pwd });
+      emit("login", userForm.value);
       break;
     case "phone":
-      await phoneLoginRef.value.loginFn();
+      await phoneLoginRef.value?.loginFn();
       break;
     default:
       break;
@@ -183,6 +183,11 @@ const loginFn = async () => {
 const clickMenuFn = (index: number) => {
   emit("handleClickMenu", index);
 };
+
+/**
+ * @description 记住密码
+ * */
+const handleCheckbox = () => {};
 </script>
 
 <style lang="scss" scoped>

package/components/hy-login/props.ts

@@ -4,7 +4,7 @@ const defaultProps: IProps = {
   logo: "",
   loginType: 0,
   themeColor: "#20D56E",
-  prefix: "gxh",
+  prefix: "hy",
   isShowPwd: false,
   userPlaceholder: "输入您的用户名",
   pwdPlaceholder: "输入您的密码",

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

@@ -1,4 +1,9 @@
-export default interface IProps {
+export interface UserLoginInfoVo {
+  userName: string;
+  password: string;
+}
+
+export default interface HyLoginProps {
   /**
    * @description 登录logo
    * */

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

@@ -70,7 +70,7 @@
             v-if="showConfirmButton && showCancelButton"
           ></view>
           <view
-            class="hy-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+            class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
             :hover-stay-time="150"
             hover-class="hy-modal__button-group__wrapper--hover"
             :class="[
@@ -81,14 +81,10 @@
             v-if="showConfirmButton"
             @tap="confirmHandler"
           >
-            <HyIcon
-              v-if="loading"
-              :name="IconConfig.LOADING"
-              :isRotate="loading"
-            ></HyIcon>
+            <HyLoading v-if="loading"></HyLoading>
             <text
               v-else
-              class="hy-modal__button-group__wrapper__text"
+              class="hy-modal__button-group__wrapper__text hy-modal__button-group__wrapper--confirm-text"
               :style="{
                 color: confirmColor,
               }"
@@ -101,6 +97,17 @@
   </HyPopup>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-modal",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
 import { ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
@@ -111,6 +118,7 @@ import { IconConfig } from "../../config";
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 import HyPopup from "../hy-popup/hy-popup.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { show, asyncClose, closeOnClickOverlay } = toRefs(props);

package/components/hy-modal/index.scss

@@ -1,7 +1,19 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-modal {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(modal) {
+      color: $hy-dark-color;
+      &__button-group__wrapper--hover {
+        background-color: $hy-dark-background--hover;
+      }
+    }
+  }
+}
+
+@include b(modal) {
   width: 650rpx;
   border-radius: $hy-border-radius-base;
   overflow: hidden;
@@ -48,7 +60,7 @@
       height: 48px;
 
       &--line {
-        background: $hy-text-color-light;
+        background: $hy-border-color-light;
         width: 1px;
         height: 48px;
       }
@@ -64,7 +76,7 @@
       }
 
       &--hover {
-        background-color: $hy-bg-color-grey;
+        background-color: $hy-light-background-hover;
       }
 
       &__text {
@@ -72,6 +84,10 @@
         font-size: 16px;
         text-align: center;
       }
+
+      &--confirm-text {
+        color: $hy-primary;
+      }
     }
   }
 }

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

@@ -1,4 +1,4 @@
-export default interface IProps {
+export default interface HyModalProps {
   /**
    * @description 是否显示模态框，请赋值给show （默认 false ）
    * */

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

@@ -82,6 +82,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-navbar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type IProps from "./typing";

package/components/hy-navbar/index.scss

@@ -1,7 +1,19 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-navbar {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(navbar) {
+      &__content {
+        color: $hy-dark-color;
+        background-color: $hy-dark-background;
+      }
+    }
+  }
+}
+
+@include b(navbar) {
   &--fixed {
     position: fixed;
     left: 0;
@@ -14,7 +26,7 @@
     @include flex(row);
     align-items: center;
     height: 44px;
-    background-color: #9acafc;
+    background-color: #F8F8F8;
     position: relative;
     justify-content: center;
 
@@ -47,7 +59,6 @@
       text-align: center;
       &--title {
         font-size: $hy-font-size-subtitle;
-        color: $hy-color-title;
       }
       &--sub {
         font-size: $hy-font-size-hint;

package/components/hy-navbar/props.ts

@@ -13,7 +13,7 @@ const defaultProps: IProps = {
   title: "",
   sub: "",
   titleColor: "",
-  bgColor: "#ffffff",
+  bgColor: "",
   titleWidth: "400rpx",
   height: "44px",
   leftIconSize: 20,