st-comp 0.0.149 → 0.0.150

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.149",
+  "version": "0.0.150",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/PasswordPrompt/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StPasswordPrompt from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-passwordPrompt", StPasswordPrompt);
+  },
+}

package/packages/PasswordPrompt/index.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { CircleCheck } from "@element-plus/icons-vue";
+import { computed } from "vue";
+
+const props = defineProps({
+  // 密码
+  value: {
+    type: String,
+    default: "",
+  },
+  // 是否聚焦密码框
+  isFocus: {
+    type: Boolean,
+    default: false,
+  },
+  // 文案颜色
+  textColor: {
+    type: [String, null],
+    default: null,
+  },
+});
+
+// 密码统一校验
+const pwdValidators = [
+  {
+    text: "不能包含空格",
+    validator: (val) => {
+      return !/\s/.test(val);
+    },
+  },
+  {
+    text: "长度为8-18个字符",
+    validator: (val) => {
+      return val.length >= 8 && val.length <= 18;
+    },
+  },
+  {
+    text: "必须包含字母、数字、符号中至少2种",
+    validator: (val) => {
+      const hasLetter = /[a-zA-Z]/.test(val);
+      const hasNumber = /\d/.test(val);
+      const hasSymbol = /[^a-zA-Z0-9]/.test(val);
+      return [hasLetter, hasNumber, hasSymbol].filter(Boolean).length >= 2;
+    },
+  },
+  {
+    text: "请勿输入连续、重复6位以上字母或数字, 0123456, 1111111",
+    validator: (val) => {
+      // 检查是否有6位以上的重复字符
+      const repeatingChars = /([a-zA-Z0-9])\1{6,}/;
+      if (repeatingChars.test(val)) return false;
+
+      // 检查是否有6位以上的连续数字
+      const consecutiveNumbers = /(?:0123456|1234567|2345678|3456789|9876543|8765432|7654321|6543210)/;
+      if (consecutiveNumbers.test(val)) return false;
+
+      // 检查是否有6位以上的连续字母
+      const lowerVal = val.toLowerCase();
+      const isConsecutiveLetters = (str) => {
+        if (!/^[a-z]+$/.test(str)) return false;
+        for (let i = 1; i < str.length; i++) {
+          if (str.charCodeAt(i) !== str.charCodeAt(i - 1) + 1) {
+            return false;
+          }
+        }
+        return true;
+      };
+      for (let i = 0; i <= lowerVal.length - 7; i++) {
+        const segment = lowerVal.substr(i, 7);
+        if (isConsecutiveLetters(segment)) {
+          return false;
+        }
+      }
+      return true;
+    },
+  },
+];
+
+// 基础规则校验是否全部通过
+const allSuccessValidator = computed(() => {
+  const result = pwdValidators.map((item) => item.validator(props.value));
+  return !result.includes(false);
+});
+
+// 密码强度等级(得分制)
+const levelValue = computed(() => {
+  const password = props.value;
+  if (!password) return 0;
+  // 初始得分
+  let score = 0;
+  {
+    // 长度检查
+    if (password.length >= 8) score++;
+    if (password.length >= 12) score++;
+    // 包含数字
+    if (/\d/.test(password)) score++;
+    // 包含小写字母
+    if (/[a-z]/.test(password)) score++;
+    // 包含大写字母
+    if (/[A-Z]/.test(password)) score++;
+    // 包含特殊字符
+    if (/[^a-zA-Z0-9]/.test(password)) score++;
+  }
+  // 将分数映射到1-3的强度等级
+  if (score <= 2) return 1;
+  else if (score <= 4) return 2;
+  else return 3;
+});
+const levelClass = computed(() => {
+  switch (levelValue.value) {
+    case 1:
+      return "lv1";
+    case 2:
+      return "lv2";
+    case 3:
+      return "lv3";
+    default:
+      return "";
+  }
+});
+const levelText = computed(() => {
+  switch (levelValue.value) {
+    case 1:
+      return "弱";
+    case 2:
+      return "中";
+    case 3:
+      return "强";
+    default:
+      return "";
+  }
+});
+
+defineExpose({
+  pwdValidators,
+  // 提供给表单校验使用
+  ruleFormPassword: [
+    { required: true, trigger: "blur", message: "密码不能为空" },
+    ...pwdValidators.map((item) => {
+      return {
+        trigger: "blur",
+        validator: (rule, value, callback) => {
+          if (!item.validator(value)) callback(item.text);
+          else callback();
+        },
+      };
+    }),
+  ],
+});
+</script>
+
+<template>
+  <div
+    class="password-prompt"
+    :style="{ color: textColor ?? 'var(--el-color-info)' }"
+  >
+    <transition name="slide-down">
+      <div
+        v-if="isFocus"
+        class="rule-box"
+      >
+        <div
+          class="rule-item"
+          v-for="(item, index) in pwdValidators"
+          :key="index"
+        >
+          <el-icon v-show="item.validator(value)">
+            <CircleCheck />
+          </el-icon>
+          <span>{{ item.text }}</span>
+        </div>
+      </div>
+    </transition>
+    <div
+      v-if="!isFocus && allSuccessValidator"
+      class="level-box"
+    >
+      <div class="level-color">
+        <div
+          class="levelValue-block"
+          :class="[levelValue >= 1 ? levelClass : '']"
+        />
+        <div
+          class="levelValue-block"
+          :class="[levelValue >= 2 ? levelClass : '']"
+        />
+        <div
+          class="levelValue-block"
+          :class="[levelValue >= 3 ? levelClass : '']"
+        />
+      </div>
+      <div class="level-text">密码强度: {{ levelText }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.password-prompt {
+  width: 100%;
+  position: relative;
+  .rule-box {
+    .rule-item {
+      position: relative;
+      .el-icon {
+        font-size: 16px;
+        color: green;
+        position: absolute;
+        left: 0;
+        top: 9px;
+      }
+      span {
+        font-size: 12px;
+        display: inline-block;
+        padding-left: 20px;
+      }
+    }
+  }
+  .level-box {
+    position: absolute;
+    top: -7px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 10px;
+    .level-color {
+      display: flex;
+      gap: 4px;
+      .levelValue-block {
+        width: 30px;
+        height: 8px;
+        background-color: #ebeef5;
+        border-radius: 2px;
+        transition: all 0.3s;
+      }
+      .lv1 {
+        background-color: #f33434;
+      }
+      .lv2 {
+        background-color: #e6a23c;
+      }
+      .lv3 {
+        background-color: #67c23a;
+      }
+    }
+    .level-text {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+
+  /* 校验规则平滑过渡效果 */
+  .slide-down-enter-active,
+  .slide-down-leave-active {
+    transition: all 0.3s ease;
+    max-height: 200px;
+    overflow: hidden;
+  }
+  .slide-down-enter-from,
+  .slide-down-leave-to {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(0px);
+  }
+}
+</style>

package/packages/User/index.vue

@@ -23,11 +23,14 @@
       前往登录
       <el-icon class="user-login-icon"><Right /></el-icon>
     </div>
+
+    <!-- 修改密码弹窗 -->
     <el-dialog
       v-model="changePasswordVisible"
       title="修改密码"
       width="500"
       :z-index="200"
+      @opened="changePasswordDialogOpen"
       @closed="changePasswordDialogClose"
     >
       <el-form
@@ -38,21 +41,42 @@
         @keyup.enter.native="changePasswordFn"
         label-width="auto"
       >
-        <el-form-item label="原密码" prop="oldPassword">
+        <el-form-item
+          label="原密码"
+          prop="oldPassword"
+        >
           <el-input
             v-model="changePasswordForm.oldPassword"
             type="password"
             :show-password="true"
           />
         </el-form-item>
-        <el-form-item label="新密码" prop="newPassword">
+        <el-form-item
+          label="新密码"
+          prop="newPassword"
+        >
           <el-input
             v-model="changePasswordForm.newPassword"
             type="password"
             :show-password="true"
+            @focus="
+              () => {
+                changePasswordFormRef.clearValidate(['newPassword']);
+                isFocusNewPassword = true;
+              }
+            "
+            @blur="isFocusNewPassword = false"
+          />
+          <PasswordPrompt
+            ref="PasswordPromptRef"
+            :value="changePasswordForm.newPassword"
+            :isFocus="isFocusNewPassword"
           />
         </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword">
+        <el-form-item
+          label="确认密码"
+          prop="confirmPassword"
+        >
           <el-input
             v-model="changePasswordForm.confirmPassword"
             type="password"
@@ -63,7 +87,10 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="changePasswordVisible = false">取消</el-button>
-          <el-button type="primary" @click="changePasswordFn">
+          <el-button
+            type="primary"
+            @click="changePasswordFn"
+          >
             修改
           </el-button>
         </div>
@@ -73,86 +100,98 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue'
-import { UserFilled, ArrowDown, Right } from "@element-plus/icons-vue"
-import { getUserData, login, loginout } from 'st-func'
+import { ref, inject, nextTick } from "vue";
+import { UserFilled, ArrowDown, Right } from "@element-plus/icons-vue";
+import { getUserData, login, loginout } from "st-func";
+import PasswordPrompt from "../PasswordPrompt/index.vue";
 
 const stConfig = inject("stConfig");
-const userData = getUserData()
+const userData = getUserData();
+const PasswordPromptRef = ref(null); // 密码校验强度组件
 
-const emit = defineEmits(['loginout'])
+const emit = defineEmits(["loginout"]);
 const props = defineProps({
   config: {
     type: Object,
-    default: () => ({ }), // loginUrl: 登录后的跳转地址 loginoutToLogin: 是否跳转到登录页 loginoutUrl: 退出登录后的跳转地址
+    default: () => ({}), // loginUrl: 登录后的跳转地址 loginoutToLogin: 是否跳转到登录页 loginoutUrl: 退出登录后的跳转地址
   },
-})
+});
 
-const changePasswordFormRef = ref(null)
-const changePasswordVisible = ref(false)
+const changePasswordFormRef = ref(null);
+const changePasswordVisible = ref(false);
 const changePasswordForm = ref({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: '',
-})
-const checkPassword = (rule, value, callback) => {
-  if (value === '') {
-    callback(new Error('请输入确认密码'))
-  } else if (value !== changePasswordForm.value.newPassword) {
-    callback(new Error("两次输入密码不一致!"))
-  } else {
-    callback()
-  }
-}
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
 const changePasswordRules = ref({
   oldPassword: [
-    { required: true, message: '请输入原密码', trigger: 'blur' },
-    { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
-  ],
-  newPassword: [
-    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { required: true, message: "请输入原密码", trigger: "blur" },
     { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
   ],
+  newPassword: [],
   confirmPassword: [
-    { required: true, message: '请输入确认密码', trigger: 'blur' },
-    { validator: checkPassword, trigger: 'blur' },
+    { required: true, message: "请输入确认密码", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入确认密码"));
+        } else if (value !== changePasswordForm.value.newPassword) {
+          callback(new Error("两次输入密码不一致!"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
     { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
   ],
-})
+});
+const isFocusNewPassword = ref(false); // 是否聚焦新密码
 
 const loginFn = () => {
-  const { loginUrl } = props.config || {}
-  login(loginUrl)
-}
-
+  const { loginUrl } = props.config || {};
+  login(loginUrl);
+};
 const loginoutFn = () => {
-  const { loginoutToLogin, loginoutUrl } = props.config || {}
-  loginout(loginoutToLogin, loginoutUrl)
-  emit('loginout')
-}
-
+  const { loginoutToLogin, loginoutUrl } = props.config || {};
+  loginout(loginoutToLogin, loginoutUrl);
+  emit("loginout");
+};
 const changePasswordFn = () => {
-  changePasswordFormRef.value.validate(async(valid, fields) => {
+  changePasswordFormRef.value.validate(async (valid, fields) => {
     if (valid) {
-      const res = await stConfig.request.post('/invest/sys/user/password', {
+      const res = await stConfig.request.post("/invest/sys/user/password", {
         password: changePasswordForm.value.oldPassword,
         newPassword: changePasswordForm.value.newPassword,
         newPassword2: changePasswordForm.value.confirmPassword,
-      })
-      ElMessage.success(`修改成功!`)
-      changePasswordVisible.value = false
-    } else { }
-  })
-}
-
+      });
+      ElMessage.success(`修改成功!`);
+      changePasswordVisible.value = false;
+    } else {
+    }
+  });
+};
+const changePasswordDialogOpen = () => {
+  if (changePasswordRules.value.newPassword.length === 0) {
+    nextTick(() => {
+      changePasswordRules.value.newPassword = PasswordPromptRef.value?.ruleFormPassword;
+      // 宏任务清除element-plus表单规则调整后的自动校验
+      let timer = setTimeout(() => {
+        changePasswordFormRef.value.resetFields();
+        clearTimeout(timer);
+      }, 0);
+    });
+  }
+};
 const changePasswordDialogClose = () => {
   changePasswordForm.value = {
-    oldPassword: '',
-    newPassword: '',
-    confirmPassword: '',
-  }
-  changePasswordFormRef.value.resetFields()
-}
+    oldPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  };
+  changePasswordFormRef.value.resetFields();
+};
 </script>
 
 <style lang="scss" scoped>

package/packages/index.ts

@@ -11,6 +11,7 @@ import StLinearLegend from "./LinearLegend/index.ts"
 import StMap from "./Map/index.ts"
 import StMonacoEditor from "./MonacoEditor/index.ts"
 import StPagination from "./Pagination/index.ts"
+import StPasswordPrompt from "./PasswordPrompt/index.ts"
 import StPie from "./Pie/index.ts"
 import StTable from "./Table/index.ts"
 import StTreeMap from "./TreeMap/index.ts"
@@ -32,6 +33,7 @@ export default {
     StMap.install(app)
     StMonacoEditor.install(app)
     StPagination.install(app)
+    StPasswordPrompt.install(app)
     StPie.install(app)
     StTable.install(app)
     StTreeMap.install(app)

package/src/pages/PasswordPrompt/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    PasswordPrompt
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/router/routes.ts

@@ -59,6 +59,11 @@ export default [
     name: 'Pagination',
     component: () => import('../pages/Pagination/index.vue'),
   },
+  {
+    path: '/passwordPrompt',
+    name: 'PasswordPrompt',
+    component: () => import('../pages/PasswordPrompt/index.vue'),
+  },
   {
     path: '/pie',
     name: 'Pie',

package/es/_initCloneObject-441db749.cjs

@@ -1 +0,0 @@
-"use strict";const c=require("./use-form-common-props-1b84d8f4.cjs"),o=require("./el-popper-746070ba.cjs"),s=require("./base-ec05f348.cjs");var a=Object.create,P=function(){function e(){}return function(n){if(!s.isObject$1(n))return{};if(a)return a(n);e.prototype=n;var r=new e;return e.prototype=void 0,r}}();const w=P;function A(e,n){var r=-1,t=e.length;for(n||(n=Array(t));++r<t;)n[r]=e[r];return n}function b(e,n,r,t){var d=!r;r||(r={});for(var f=-1,h=n.length;++f<h;){var i=n[f],u=t?t(r[i],e[i],i,r,e):void 0;u===void 0&&(u=e[i]),d?c.baseAssignValue(r,i,u):c.assignValue(r,i,u)}return r}function C(e){var n=[];if(e!=null)for(var r in Object(e))n.push(r);return n}var x=Object.prototype,B=x.hasOwnProperty;function I(e){if(!s.isObject$1(e))return C(e);var n=o.isPrototype(e),r=[];for(var t in e)t=="constructor"&&(n||!B.call(e,t))||r.push(t);return r}function T(e){return o.isArrayLike(e)?o.arrayLikeKeys(e,!0):I(e)}var U=o.overArg(Object.getPrototypeOf,Object);const y=U;var g=typeof exports=="object"&&exports&&!exports.nodeType&&exports,l=g&&typeof module=="object"&&module&&!module.nodeType&&module,$=l&&l.exports===g,p=$?s.root.Buffer:void 0,v=p?p.allocUnsafe:void 0;function m(e,n){if(n)return e.slice();var r=e.length,t=v?v(r):new e.constructor(r);return e.copy(t),t}function O(e){var n=new e.constructor(e.byteLength);return new o.Uint8Array(n).set(new o.Uint8Array(e)),n}function q(e,n){var r=n?O(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}function K(e){return typeof e.constructor=="function"&&!o.isPrototype(e)?w(y(e)):{}}exports.cloneArrayBuffer=O;exports.cloneBuffer=m;exports.cloneTypedArray=q;exports.copyArray=A;exports.copyObject=b;exports.getPrototype=y;exports.initCloneObject=K;exports.keysIn=T;