feat ui设计稿

src/components/PasswordStrength.vue

@@ -36,20 +36,25 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
 </template>
 
 <style lang="less" scoped>
+// 设计稿（54/55）：满宽强度条（弱=首段红，余段浅灰轨道）+ 右端灰色强度文字 + 下方红色提示
 .pwd-strength {
-  .flex(column, flex-start);
-    gap: @spacing-xs;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: @spacing-sm;
+  row-gap: 9px;
+  align-items: center;
 
   &__bars {
     .flex(row, center);
-    gap: 4px;
+    gap: 8px;
   }
 
+  // 设计稿轨道实取 #EDEFF2，条高 5 设计px ≈ 4px
   &__bar {
-    width: 56px;
+    flex: 1;
     height: 4px;
-    border-radius: @radius-round;
-    background: @border-color;
+    border-radius: 2px;
+    background: @auth-track;
 
     &.is-on.is-weak {
       background: @danger-color;
@@ -64,24 +69,17 @@ const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value ==
     }
   }
 
+  // 设计稿强度文字为 11 设计px 中性灰（「弱」实取 rgba(156,163,175)）
   &__label {
-    font-size: @font-size-sm;
-
-    &.is-weak {
-      color: @danger-color;
-    }
-
-    &.is-medium {
-      color: @warning-color;
-    }
-
-    &.is-strong {
-      color: @success-color;
-    }
+    justify-self: end;
+    font-size: 11px;
+    color: @text-color-disabled;
   }
 
   &__tip {
-    font-size: @font-size-sm;
+    grid-column: 1 / -1;
+    margin: 0;
+    font-size: 11px;
     color: @danger-color;
   }
 }