hy-app 0.1.5 → 0.2.0

package/components/hy-input/index.scss

@@ -1,11 +1,22 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-input {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(input) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(input) {
   @include flex(row);
   align-items: center;
   justify-content: space-between;
   flex: 1;
+  color:
+$hy-light-color;
 
   &--radius,
   &--square {
@@ -35,7 +46,6 @@
       &__field {
         line-height: 26px;
         text-align: left;
-        color: $hy-text-color;
         height: 24px;
         font-size: 15px;
         flex: 1;

package/components/hy-input/props.ts

@@ -26,7 +26,7 @@ const defaultProps: IProps = {
   adjustPosition: true,
   inputAlign: "left",
   fontSize: "15px",
-  color: "#303133",
+  color: "",
   prefixIcon: {},
   suffixIcon: {},
   border: "surround",

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

@@ -134,6 +134,14 @@ export default interface HyInputProps {
    * @description 定义需要用到的外部样式
    * */
   customStyle?: CSSProperties;
+  /**
+   * @description 值变化事件
+   * */
+  onChange?: Function;
+  /**
+   * @description 失去焦点事件
+   * */
+  onBlur?: Function;
   /**
    * @description 是否忽略组件内对文本合成系统事件的处理。
    * */

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

@@ -2,6 +2,17 @@
   <view class="hy-line" :style="lineStyle"> </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-line',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-line/index.scss

@@ -1,4 +1,7 @@
-.hy-line {
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+@include b(line) {
   /* #ifndef APP-NVUE */
   vertical-align: middle;
   /* #endif */

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

@@ -14,6 +14,9 @@
         <text
           v-if="showText && percentage >= 10"
           class="hy-line-progress__text"
+          :style="{
+            fontSize: fontSize ? addUnit(fontSize) : addUnit(getPx(height)),
+          }"
           >{{ innserPercentage + "%" }}</text
         >
       </slot>
@@ -21,10 +24,22 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-line-progress',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
-  type CSSProperties, getCurrentInstance,
+  type CSSProperties,
+  getCurrentInstance,
   onMounted,
   ref,
   toRefs,
@@ -32,7 +47,7 @@ import {
 } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
-import { addUnit, getRect, range, sleep } from "../../utils";
+import { addUnit, getPx, getRect, range, sleep } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { percentage, activeColor, height } = toRefs(props);

package/components/hy-line-progress/index.scss

@@ -1,16 +1,28 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-line-progress {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(line-progress) {
+      &__background {
+        background-color: $hy-dark-background--track;
+      }
+    }
+  }
+}
+
+@include b(line-progress) {
   align-items: stretch;
   position: relative;
   @include flex(row);
   flex: 1;
   overflow: hidden;
-  border-radius: 100px;
+  border-radius: $hy-border-radius-semicircle;
 
   &__background {
-    background-color: #ececec;
-    border-radius: 100px;
+    background-color: $hy-info-light;
+    border-radius: $hy-border-radius-semicircle;
     flex: 1;
   }
 
@@ -22,17 +34,17 @@
     align-items: center;
     @include flex(row);
     color: #ffffff;
-    border-radius: 100px;
+    border-radius: $hy-border-radius-semicircle;
     transition: width 0.5s ease;
     justify-content: flex-end;
+    background-color: $hy-primary;
   }
 
   &__text {
     font-size: 10px;
-    align-items: center;
-    text-align: right;
     color: #ffffff;
+    margin-bottom: 1px;
     margin-right: 5px;
-    transform: scale(0.9);
+    transform: scale(0.8);
   }
 }

package/components/hy-line-progress/props.ts

@@ -1,12 +1,12 @@
 import type IProps from "./typing";
-import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
-  activeColor: ColorConfig.primary,
-  inactiveColor: "#ececec",
+  activeColor: "",
+  inactiveColor: "",
   percentage: 0,
   showText: true,
-  height: 12,
+  height: 8,
+  fontSize: "",
 };
 
 export default defaultProps;

package/components/hy-line-progress/typing.d.ts

@@ -21,6 +21,10 @@ export default interface HyLineProgressProps {
    * @description 进度条的高度，单位px ( 默认 12 )
    * */
   height?: string | number;
+  /**
+   * @description 字体大小，单位px ( 默认 10 )
+   * */
+  fontSize?: string | number;
   /**
    * @description 自定义样式
    * */

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-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-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,
 });