hy-app 0.1.5 → 0.2.0

package/components/hy-warn/index.scss

@@ -1,7 +1,27 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-alert {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(warn) {
+      &--error--light {
+        background-color: rgba(250, 53, 52, 0.3);
+      }
+      &--success--light {
+        background-color: rgba(25, 190, 107, 0.3);
+      }
+      &--warning--light {
+        background-color: rgba(255, 153, 0, 0.3);
+      }
+      &--info--light {
+        background-color: rgba(144, 147, 153, 0.3);
+      }
+    }
+  }
+}
+
+@include b(warn) {
   position: relative;
   background-color: $hy-primary;
   padding: $hy-border-margin-padding-base;
@@ -15,6 +35,11 @@
 
   &--primary--light {
     background-color: $hy-primary-light;
+    .hy-warn__icon--left {
+      :deep(.hy-icon) {
+        color: $hy-primary;
+      }
+    }
   }
 
   &--error--dark {
@@ -23,6 +48,11 @@
 
   &--error--light {
     background-color: $hy-error-light;
+    .hy-warn__icon--left {
+      :deep(.hy-icon) {
+        color: $hy-error;
+      }
+    }
   }
 
   &--success--dark {
@@ -31,6 +61,11 @@
 
   &--success--light {
     background-color: $hy-success-light;
+    .hy-warn__icon--left {
+      :deep(.hy-icon) {
+        color: $hy-success;
+      }
+    }
   }
 
   &--warning--dark {
@@ -39,6 +74,11 @@
 
   &--warning--light {
     background-color: $hy-warning-light;
+    .hy-warn__icon--left {
+      :deep(.hy-icon) {
+        color: $hy-warning;
+      }
+    }
   }
 
   &--info--dark {
@@ -47,6 +87,11 @@
 
   &--info--light {
     background-color: $hy-info-light;
+    .hy-warn__icon--left {
+      :deep(.hy-icon) {
+        color: $hy-info;
+      }
+    }
   }
 
   &__icon {

package/components/hy-waterfall/hy-waterfall.vue

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

package/components/hy-waterfall/index.scss

@@ -1,6 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-waterfall {
+@include b(waterfall) {
   @include flex;
   flex-direction: row;
   align-items: flex-start;

package/config/icon.ts

@@ -327,6 +327,10 @@ export const IconConfig = {
    * @description 眼睛
    * */
   EYE: "eye",
+  /**
+   * @description 眼睛-关闭
+   * */
+  EYE_CLOSE: "eye-close",
   /**
    * @description 日历
    * */

package/libs/css/common.scss

@@ -13,4 +13,13 @@
 
 .hy-page {
   padding: $hy-border-margin-padding-base;
+  box-sizing: border-box;
+  width: 100%;
+  /* #ifdef H5 */
+  height: calc(100vh - 44px);
+  /* #endif */
+  /* #ifndef H5 */
+  height: 100vh;
+  /* #endif */
+  overflow: auto;
 }

package/libs/css/mixin.scss

@@ -1,3 +1,54 @@
+@use "../../theme.scss";
+$namespace: hy;
+$modifier-separator: '--';
+
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +
+      $selector +
+      $modifier-separator +
+      $unit +
+      ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin themeColor($type, $bg-color: transparent, $border-color: transparent, $color: #FFFFFF) {
+  @include m($type) {
+    background-color: $bg-color;
+    border: 1px solid $border-color;
+    color: $color;
+  }
+}
+
+@mixin borderRadio($shape) {
+  @include m($shape) {
+    @if $shape == circle {
+      border-radius:  theme.$hy-border-radius-semicircle;
+    }
+    @else {
+      border-radius: theme.$hy-border-radius-sm;
+    }
+  }
+}
+
+
+/* flex布局 */
 @mixin flex($direction: row) {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -5,6 +56,17 @@
   flex-direction: $direction;
 }
 
+/* 状态，生成 is-$state 类名 */
+@mixin when($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+
 /* 几行出现省略号 */
 @mixin line-feed($line: 1) {
   display: -webkit-box;
@@ -12,4 +74,20 @@
   -webkit-line-clamp: $line;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+/* 单行超出隐藏 */
+@mixin lineEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 多行超出隐藏 */
+@mixin multiEllipsis($lineNumber: 3) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lineNumber;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.1.5",
-  "description": "优化导出导入",
+  "version": "0.2.0",
+  "description": "全局主题色配置",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/public/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iconfont';  /* Project id 4305932 */
-  src: url('https://at.alicdn.com/t/c/font_4305932_vbkygv82jrg.woff2?t=1745506339367') format('woff2'),
-  url('https://at.alicdn.com/t/c/font_4305932_vbkygv82jrg.woff?t=1745506339367') format('woff'),
-  url('https://at.alicdn.com/t/c/font_4305932_vbkygv82jrg.ttf?t=1745506339367') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4305932_jcbef3d08o8.woff2?t=1747792820979') format('woff2'),
+  url('https://at.alicdn.com/t/c/font_4305932_jcbef3d08o8.woff?t=1747792820979') format('woff'),
+  url('https://at.alicdn.com/t/c/font_4305932_jcbef3d08o8.ttf?t=1747792820979') format('truetype');
 }
 
 .iconfont {

package/store/userInfo.ts

@@ -1,25 +1,26 @@
-// import { defineStore } from "pinia";
-//
-// export const useUserInfo = defineStore("gxh_userInfo", {
-//     state:() => ({
-//         userForm: {
-//             name: '',
-//             pwd: ''
-//         },
-//         phoneForm: {
-//             phone: '',
-//             code: ''
-//         },
-//         rememberPsw: 0,
-//         // 历史账户列表
-//         choiceList:[],
-//         // 选中账户信息
-//         choiceIndex: 0,
-//         secretKey: "hfyk"
-//     }),
-//     actions: {
-//         saveHistoriesList() {
-//             this.choiceList
-//         }
-//     }
-// })
+import { defineStore } from "pinia";
+import type { UserLoginInfoVo } from "../components/hy-login/typing";
+
+export const useUserInfo = defineStore("gxh_userInfo", {
+  state: () => ({
+    userForm: {
+      userName: "",
+      password: "",
+    } as UserLoginInfoVo,
+    phoneForm: {
+      phone: "",
+      code: "",
+    },
+    rememberPsw: false,
+    // 历史账户列表
+    choiceList: [] as UserLoginInfoVo[],
+    // 选中账户信息
+    choiceIndex: 0,
+    secretKey: "hy",
+  }),
+  actions: {
+    saveHistoriesList() {
+      this.choiceList;
+    },
+  },
+});

package/theme.scss

@@ -1,39 +1,64 @@
 /* 主题是相关颜色 */
-$hy-primary: #2979ff !default;
-$hy-primary-dark: #2b85e4;
-$hy-primary-disabled: #a0cfff;
-$hy-primary-light: #ecf5ff;
-
-$hy-warning: #ff9900;
-$hy-warning-dark: #f29100;
-$hy-warning-disabled: #fcbd71;
-$hy-warning-light: #fdf6ec;
-
-$hy-success: #19be6b;
-$hy-success-dark: #18b566;
-$hy-success-disabled: #71d5a1;
-$hy-success-light: #dbf1e1;
-
-$hy-error: #fa3534;
-$hy-error-dark: #dd6161;
-$hy-error-disabled: #fab6b6;
-$hy-error-light: #fef0f0;
-
-$hy-info: #909399;
-$hy-info-dark: #82848a;
-$hy-info-disabled: #c8c9cc;
-$hy-info-light: #f4f4f5;
+$hy-primary: var(--hy-theme-color, #2979ff) !default;
+$hy-primary-dark: var(--hy-theme-dark, #2b85e4) !default;
+$hy-primary-disabled: var(--hy-theme-disabled, #a0cfff) !default;
+$hy-primary-light: var(--hy-theme-color--light, #ecf5ff) !default;
+
+$hy-warning: var(--hy-warning, #ff9900) !default;
+$hy-warning-dark: var(--hy-warning-dark, #f29100) !default;
+$hy-warning-disabled: var(--hy-warning-disabled, #fcbd71) !default;
+$hy-warning-light: var(--hy-warning-light, #fdf6ec) !default;
+
+$hy-success: var(--hy-success, #19be6b) !default;
+$hy-success-dark: var(--hy-success-dark, #18b566) !default;
+$hy-success-disabled: var(--hy-success-disabled, #71d5a1) !default;
+$hy-success-light: var(--hy-success-light, #dbf1e1) !default;
+
+$hy-error: var(--hy-error, #fa3534) !default;
+$hy-error-dark: var(--hy-error-dark, #dd6161) !default;
+$hy-error-disabled: var(--hy-error-disabled, #fab6b6) !default;
+$hy-error-light: var(--hy-error-light, #fef0f0) !default;
+
+$hy-info: var(--hy-info, #909399) !default;
+$hy-info-dark: var(--hy-info-dark, #82848a) !default;
+$hy-info-disabled: var(--hy-info-disabled, #c8c9cc) !default;
+$hy-info-light: var(--hy-info-light, #f4f4f5) !default;
+
+/* 暗黑模式 */
+$hy-dark-background: var(--hy-dark-background, #131313) !default; // 背景色
+$hy-dark-background--2: var(--hy-dark-background--2, #161616) !default; // 弹窗背景色
+$hy-dark-background--container: var(--hy-dark-background--container, #242424) !default;
+$hy-dark-background--track: var(--hy-dark-background--track, #646566) !default;
+$hy-dark-background--empty: var(--hy-dark-background--empty, #3A3A44) !default; // 搜索背景色
+$hy-dark-background--hover: var(--hy-dark-background--hover, #707070) !default; // 点击状态
+$hy-dark-background3: #141414 !default;
+$hy-dark-background6: #380e08 !default;
+
+$hy-dark-bg-disabled: rgba(48, 48, 56, 0.51) !default;
+$hy-dark-color: #ffffff !default;
+$hy-dark-icon: #7C7C7C !default;
+$hy-dark-color2: var(#f2270c) !default;
+$hy-dark-color3: var(rgba(232, 230, 227, 0.8)) !default;
+$hy-dark-color-gray: var(#c0c0c0) !default;
+$hy-dark-text-disabled: #c0c0c0 !default;
+$hy-dark-border-color: var(#3a3a3c) !default;
+
+/* 亮色背景颜色 */
+$hy-light-background: var(--hy-light-background, #F8F8F8) !default;
+$hy-light-background-color: var(--hy-light-background-color, #FFFFFF) !default;
+$hy-light-background-disabled: var(--hy-light-background-disabled, #F5F5F5) !default;
+$hy-light-background-hover: var(--hy-light-background-hover, #f1f1f1) !default; //点击状态颜色
+$hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
+$hy-light-background-image: var(--hy-light-background-image, #F3F3F3) !default; // 图片背景色
 
 /* 文字基本颜色 */
-$hy-text-color: #333; //基本色
-$hy-text-color-inverse: #fff; //反色
-$hy-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
-$hy-text-color-placeholder: #808080;
-$hy-text-color-disable: #c0c0c0;
-$hy-text-color-light: rgba(192, 192, 192, 0.38);
+$hy-light-color: var(--hy-light-color, #333) !default; //基本色
+$hy-text-color-grey: var(--hy-text-color-grey, #999) !default; //辅助灰色，如加载更多的提示信息
+$hy-text-color-placeholder: var(--hy-text-color-placeholder, #808080) !default; // 输入框提示颜色
+$hy-text-color-disable: var(--hy-text-color-disable, #c0c0c0) !default; // 禁用文字颜色
+$hy-text-color-hover: var(--hy-text-color-hover, #58595b)!default;
 
 $hy-tips-color: #909193FF;
-$hy-color-disable-bg: #F5F5F5;
 $hy-color-disable-icon:  #c8c9cc;
 
 /* 文字尺寸 */
@@ -41,15 +66,6 @@ $hy-font-size-sm: 12px;
 $hy-font-size-base: 16px;
 $hy-font-size-lg: 20px;
 
-/* 背景颜色 */
-$hy-bg-color: #F8F8F8;
-$hy-bg-color-disabled: #87BAF3;
-$hy-bg-color-light: #a7cff9a5;
-$hy-bg-color-grey: #f8f8f8;
-$hy-bg-color-hover: #f1f1f1; //点击状态颜色
-$hy-bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色
-$hy-image-bg-color: #F3F3F3;
-
 /* 文章场景相关 */
 $hy-color-title: #2c405a; // 文章标题颜色
 $hy-weight-title: 700;
@@ -63,34 +79,34 @@ $hy-font-size-hint: 26rpx;
 
 
 /* 边框颜色 */
-$k-border-color-light: #c8c7cc;
-$hy-border-color: #c8c7cc66;
+$hy-border-color-light: var(--hy-border-color-light, #c8c7cc) !default;
+$hy-border-color: var(--hy-border-color, #c8c7cc66) !default;
 
 /* 图片尺寸 */
-$hy-img-size-sm: 45rpx;
-$hy-img-size-base: 80rpx;
-$hy-img-size-lg: 120rpx;
+$hy-img-size-sm: var(--hy-img-size-sm, 45rpx) !default;
+$hy-img-size-base: var(--hy-img-size-base, 80rpx) !default;
+$hy-img-size-lg: var(--hy-img-size-lg, 120rpx) !default;
 
 /* 头像大小 */
-$hy-avatar-size-sm: 80rpx;
-$hy-avatar-size-base: 100rpx;
-$hy-avatar-size-lg: 120rpx;
+$hy-avatar-size-sm: var(--hy-avatar-size-sm, 80rpx) !default;
+$hy-avatar-size-base: 100rpx var(--hy-avatar-size-base, 100rpx) !default;
+$hy-avatar-size-lg: var(--hy-avatar-size-lg, 120rpx) !default;
 
 /* 透明度 */
-$hy-opacity-disabled: 0.3; // 组件禁用态的透明度
+$hy-opacity-disabled: var(--hy-opacity-disabled, 0.3) !default; // 组件禁用态的透明度
 
 /* 盒子的圆角 */
-$hy-border-radius-no: 0;
-$hy-border-radius-sm: 8rpx;
-$hy-border-radius-base: 20rpx;
-$hy-border-radius-lg: 32rpx;
-$hy-border-radius-circle: 50%;
-$hy-border-radius-semicircle: 100px;
+$hy-border-radius-no: var(--hy-border-radius-no, 0) !default;
+$hy-border-radius-sm: var(--hy-border-radius-sm, 8rpx) !default;
+$hy-border-radius-base: var(--hy-border-radius-base, 20rpx) !default;
+$hy-border-radius-lg: var(--hy-border-radius-lg, 32rpx) !default;
+$hy-border-radius-circle: var(--hy-border-radius-circle, 50%) !default;
+$hy-border-radius-semicircle: var(--hy-border-radius-semicircle, 100px) !default;
 /* 盒子阴影 */
-$hy-box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.16);
+$hy-box-shadow: var(--hy-box-shadow, 0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)) !default;
 /* 盒内盒外间距 */
-$hy-border-margin-padding-sm: 10rpx;
-$hy-border-margin-padding-base: 20rpx;
-$hy-border-margin-padding-lg: 30rpx;
+$hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default;
+$hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
+$hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: 1px solid #dadbde;
+$hy-border-line: var(--hy-border-line, 1rpx solid #dadbde) !default;

package/typing/modules/common.d.ts

@@ -1,6 +1,10 @@
 import type { IFieldNames } from "@/package/components/hy-check-button/typing";
 
 declare namespace HyApp {
+  /**
+   * @description dark:暗色、light:亮色
+   * */
+  type DarkModeType = "dark" | "light";
   /**
    * @description 主题类型 primary-默认，success-错误，warning-警告，error-错误，info-信息
    * */

package/utils/colorGradient.ts

@@ -7,7 +7,7 @@
 export const colorGradient = (
   startColor: string = "rgb(0, 0, 0)",
   endColor: string = "rgb(255, 255, 255)",
-  step: number = 10,
+  step: number = 100,
 ): any[] => {
   const startRGB = hexToRgb(startColor, false); // 转换为rgb数组模式
 

package/utils/inside.ts

@@ -24,6 +24,9 @@ export const bem = (
     fixed.map((item: string) => {
       // 这里的类名，会一直存在
       classes[prefix + props[item]] = true;
+      if (item === "type" && props["plain"]) {
+        classes[prefix + props[item] + "__plain"] = true;
+      }
     });
   }
   if (change) {

package/components/hy-submitBar/Index.vue

@@ -1,17 +0,0 @@
-<template>
-  <Hy-cell title="基础组件" :list="list_1"></Hy-cell>
-  <hy-cell title="表单组件" :list="list_2"></hy-cell>
-  <hy-cell title="布局组件" :list="list_3"></hy-cell>
-  <hy-cell title="反馈组件" :list="list_4"></hy-cell>
-  <hy-cell title="导航组件" :list="list_5"></hy-cell>
-  <hy-cell title="其他组件" :list="list_6"></hy-cell>
-    <hy-cell title="业务组件" :list="list_7"></hy-cell>
-</template>
-
-<script setup lang="ts">
-import HyCell from "hy-app/components/hy-cell/hy-cell.vue";
-
-import { list_1, list_2, list_3, list_4, list_5, list_6, list_7 } from "./index1";
-</script>
-
-<style lang="scss" scoped></style>

package/components/hy-submitBar/index.scss

@@ -1,9 +0,0 @@
-
-.hy-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-}