Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,78 @@
+<template>
+  <div class="aa-pwd">
+    <div class="aa-pwd-field" :class="{ 'is-focus': focused }">
+      <input
+        ref="input"
+        class="aa-pwd-input"
+        :type="visible ? 'text' : 'password'"
+        :value="modelValue"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+      <button class="aa-pwd-toggle" type="button" @click="visible = !visible">
+        {{ visible ? '隐藏' : '显示' }}
+      </button>
+    </div>
+    <div v-if="showStrength" class="aa-pwd-strength">
+      <span
+        v-for="(b, i) in 3"
+        :key="i"
+        class="aa-pwd-bar"
+        :class="barClass(i)"
+      ></span>
+    </div>
+    <div class="aa-pwd-tip">{{ tip }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '请输入密码' },
+  showStrength: { type: Boolean, default: true }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const visible = ref(false);
+const focused = ref(false);
+
+const level = computed(() => {
+  const v = props.modelValue;
+  if (!v) return '';
+  let s = 0;
+  if (v.length >= 8) s++;
+  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
+  if (/\d/.test(v)) s++;
+  if (/[^A-Za-z0-9]/.test(v)) s++;
+  if (v.length >= 12) s++;
+  if (s <= 2) return 'weak';
+  if (s <= 3) return 'mid';
+  return 'strong';
+});
+
+const tip = computed(() => {
+  if (level.value === 'weak') return '弱：建议使用字母、数字与符号组合';
+  if (level.value === 'mid') return '中：再增加长度或符号更安全';
+  if (level.value === 'strong') return '强：密码强度良好';
+  return '';
+});
+
+function onInput(e) {
+  emit('update:modelValue', e.target.value);
+  emit('change', e.target.value);
+}
+function barClass(i) {
+  if (!props.showStrength || !level.value) return '';
+  const on =
+    (level.value === 'weak' && i < 1) ||
+    (level.value === 'mid' && i < 2) ||
+    (level.value === 'strong' && i < 3);
+  return on ? 'on ' + level.value : '';
+}
+</script>
+
+<style src="./PasswordInput.css"></style>