feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Aurora Admin · PasswordInput</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./PasswordInput.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">PasswordInput 密码输入</h2>
+    <p class="aa-desc">可见切换 + 强度检测，适用于注册 / 修改密码等场景。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">基础用法（含强度条）</div>
+      <div class="aa-pwd" id="pwd1">
+        <div class="aa-pwd-field">
+          <input class="aa-pwd-input" role="group" type="password" placeholder="请输入密码" />
+          <button class="aa-pwd-toggle" type="button">显示</button>
+        </div>
+        <div class="aa-pwd-strength">
+          <span class="aa-pwd-bar"></span>
+          <span class="aa-pwd-bar"></span>
+          <span class="aa-pwd-bar"></span>
+        </div>
+        <div class="aa-pwd-tip"></div>
+      </div>
+    </div>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">关闭强度条</div>
+      <div class="aa-pwd" id="pwd2">
+        <div class="aa-pwd-field">
+          <input class="aa-pwd-input" role="group" type="password" placeholder="请输入密码" />
+          <button class="aa-pwd-toggle" type="button">显示</button>
+        </div>
+        <div class="aa-pwd-tip"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function initPwd(root) {
+      var field = root.querySelector('.aa-pwd-field');
+      var input = root.querySelector('.aa-pwd-input');
+      var toggle = root.querySelector('.aa-pwd-toggle');
+      var bars = root.querySelectorAll('.aa-pwd-bar');
+      var tip = root.querySelector('.aa-pwd-tip');
+      var showStrength = bars.length > 0;
+      var visible = false;
+
+      function score(v) {
+        if (!v) return 0;
+        var 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++;
+        return s;
+      }
+      function levelOf(v) {
+        if (!v) return '';
+        var s = score(v);
+        if (s <= 2) return 'weak';
+        if (s <= 3) return 'mid';
+        return 'strong';
+      }
+
+      function render() {
+        var v = input.value;
+        var lvl = levelOf(v);
+        bars.forEach(function (b, i) {
+          b.className = 'aa-pwd-bar';
+          if (showStrength && lvl) {
+            var on = (lvl === 'weak' && i < 1) || (lvl === 'mid' && i < 2) || (lvl === 'strong' && i < 3);
+            if (on) b.classList.add('on', lvl);
+          }
+        });
+        if (lvl === 'weak') tip.textContent = '弱：建议使用字母、数字与符号组合';
+        else if (lvl === 'mid') tip.textContent = '中：再增加长度或符号更安全';
+        else if (lvl === 'strong') tip.textContent = '强：密码强度良好';
+        else tip.textContent = '';
+      }
+
+      input.addEventListener('input', render);
+      input.addEventListener('focus', function () { field.classList.add('is-focus'); });
+      input.addEventListener('blur', function () { field.classList.remove('is-focus'); });
+      toggle.addEventListener('click', function () {
+        visible = !visible;
+        input.type = visible ? 'text' : 'password';
+        toggle.textContent = visible ? '隐藏' : '显示';
+      });
+      render();
+    }
+
+    document.querySelectorAll('.aa-pwd').forEach(initPwd);
+  </script>
+</body>
+</html>
@@ -0,0 +1,69 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import './PasswordInput.css';
+
+function levelOf(v) {
+  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';
+}
+
+export default function PasswordInput({ value = '', placeholder = '请输入密码', showStrength = true, onChange }) {
+  const [visible, setVisible] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  const level = useMemo(() => levelOf(value), [value]);
+  const tip = useMemo(() => {
+    if (level === 'weak') return '弱：建议使用字母、数字与符号组合';
+    if (level === 'mid') return '中：再增加长度或符号更安全';
+    if (level === 'strong') return '强：密码强度良好';
+    return '';
+  }, [level]);
+
+  const handle = useCallback(
+    (e) => {
+      if (onChange) onChange(e.target.value);
+    },
+    [onChange]
+  );
+
+  const barClass = (i) => {
+    if (!showStrength || !level) return '';
+    const on =
+      (level === 'weak' && i < 1) || (level === 'mid' && i < 2) || (level === 'strong' && i < 3);
+    return on ? 'on ' + level : '';
+  };
+
+  return (
+    <div className="aa-pwd">
+      <div className={'aa-pwd-field' + (focused ? ' is-focus' : '')}>
+        <input
+          className="aa-pwd-input"
+          type={visible ? 'text' : 'password'}
+          value={value}
+          placeholder={placeholder}
+          onChange={handle}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+        <button className="aa-pwd-toggle" type="button" onClick={() => setVisible((v) => !v)}>
+          {visible ? '隐藏' : '显示'}
+        </button>
+      </div>
+      {showStrength && (
+        <div className="aa-pwd-strength">
+          {[0, 1, 2].map((i) => (
+            <span key={i} className={'aa-pwd-bar ' + barClass(i)} />
+          ))}
+        </div>
+      )}
+      <div className="aa-pwd-tip">{tip}</div>
+    </div>
+  );
+}
@@ -0,0 +1,79 @@
+<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="value"
+        :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>
+export default {
+  name: 'AaPasswordInput',
+  props: {
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请输入密码' },
+    showStrength: { type: Boolean, default: true }
+  },
+  data() {
+    return { visible: false, focused: false };
+  },
+  computed: {
+    level() {
+      const v = this.value;
+      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';
+    },
+    tip() {
+      if (this.level === 'weak') return '弱：建议使用字母、数字与符号组合';
+      if (this.level === 'mid') return '中：再增加长度或符号更安全';
+      if (this.level === 'strong') return '强：密码强度良好';
+      return '';
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+      this.$emit('change', e.target.value);
+    },
+    barClass(i) {
+      if (!this.showStrength || !this.level) return '';
+      const on =
+        (this.level === 'weak' && i < 1) ||
+        (this.level === 'mid' && i < 2) ||
+        (this.level === 'strong' && i < 3);
+      return on ? 'on ' + this.level : '';
+    }
+  }
+};
+</script>
+
+<style src="./PasswordInput.css"></style>
@@ -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>