feat 搭建架构骨架

src/components/PasswordStrength.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getPasswordLevel } from '@/utils/validate'
+
+interface Props {
+  password: string
+}
+
+const props = defineProps<Props>()
+
+const level = computed(() => getPasswordLevel(props.password))
+
+const levelText = computed(() => {
+  if (!props.password) return ''
+  return level.value === 'strong' ? '强' : level.value === 'medium' ? '中' : '弱'
+})
+
+const levelIndex = computed(() => (level.value === 'strong' ? 3 : level.value === 'medium' ? 2 : 1))
+</script>
+
+<template>
+  <div v-if="password" class="pwd-strength">
+    <div class="pwd-strength__bars">
+      <span
+        v-for="i in 3"
+        :key="i"
+        class="pwd-strength__bar"
+        :class="{ 'is-on': i <= levelIndex, [`is-${level}`]: i <= levelIndex }"
+      />
+    </div>
+    <span class="pwd-strength__label" :class="`is-${level}`">密码强度：{{ levelText }}</span>
+    <p v-if="level === 'weak'" class="pwd-strength__tip">
+      密码等级过低，请重新输入（建议字母+数字+符号组合）
+    </p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.pwd-strength {
+  .flex(column, flex-start);
+    gap: @spacing-xs;
+
+  &__bars {
+    .flex(row, center);
+    gap: 4px;
+  }
+
+  &__bar {
+    width: 56px;
+    height: 4px;
+    border-radius: @radius-round;
+    background: @border-color;
+
+    &.is-on.is-weak {
+      background: @danger-color;
+    }
+
+    &.is-on.is-medium {
+      background: @warning-color;
+    }
+
+    &.is-on.is-strong {
+      background: @success-color;
+    }
+  }
+
+  &__label {
+    font-size: @font-size-sm;
+
+    &.is-weak {
+      color: @danger-color;
+    }
+
+    &.is-medium {
+      color: @warning-color;
+    }
+
+    &.is-strong {
+      color: @success-color;
+    }
+  }
+
+  &__tip {
+    font-size: @font-size-sm;
+    color: @danger-color;
+  }
+}
+</style>