密码强度校验输入组件通过自定义元素实现，继承HTMLInputElement，集成多维度评分规则、Shadow DOM可视化反馈及属性配置与事件通知机制。
自定义元素实现密码强度校验输入组件，核心是封装一个带实时反馈的 <password-input></password-input> 自定义标签，内部集成规则判断、状态更新和 UI 提示逻辑，不依赖外部框架。
定义元素并监听输入变化
用 customElements.define() 注册类，继承 HTMLInputElement，确保原生表单行为（如 value、required、name）正常工作。在 connectedCallback 中绑定 input 和 blur 事件，触发校验：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每次输入时调用校验函数，避免防抖干扰即时反馈
- 使用
setCustomValidity()配合reportValidity()触发原生验证提示 - 监听
focus和blur控制提示区域显隐
内置多级强度规则与评分机制
密码强度不靠单一正则，而是分维度打分：长度 ≥8（1分）、含小写字母（1分）、含大写字母（1分）、含数字（1分）、含特殊字符（1分）。总分 0–5，对应「极弱→强」五档：
- 得分 ≤2：标红，提示“需增加复杂度”
- 得分 3–4：橙色，提示“建议添加大小写字母或符号”
- 得分 5：绿色，显示“安全”
- 空值或长度为 0 时隐藏所有提示，避免干扰
封装可视化反馈 UI
在 Shadow DOM 中插入进度条（<div class="strength-bar">）和文字提示（<code><span class="hint"></span>），通过 CSS 变量动态控制颜色与宽度：
- 用
--strength-color和--strength-width控制样式，便于主题切换 - 进度条宽度 = 得分 × 20%，避免硬编码像素值
- 文字提示内容随得分实时更新，不使用 i18n 硬编码，留出 slot 或属性扩展空间
支持外部配置与事件通知
提供 min-length、require-uppercase 等布尔/数值属性，允许业务侧覆盖默认规则。同时派发 strength-change 自定义事件，携带 {score, level, valid} 数据：
- 表单提交前可监听该事件做最终拦截
- 配合
form.addEventListener('submit', ...)阻止弱密码提交 - 属性变更时重跑校验（监听
attributeChangedCallback）
