fix(component): 密码复杂度

closed #I895Z6

build/generate/generateModifyVars.ts

@@ -1,18 +1,49 @@
 import { resolve } from 'node:path'
-import { generateAntColors, primaryColor } from '../config/themeConfig'
+
+import { generate } from '@ant-design/colors'
+
+import { theme } from 'ant-design-vue/lib'
+import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken'
+import { primaryColor } from '../config/themeConfig'
+
+const { defaultAlgorithm, defaultSeed } = theme
+
+function generateAntColors(color: string, theme: 'default' | 'dark' = 'default') {
+  return generate(color, {
+    theme,
+  })
+}
 
 /**
  * less global variable
  */
 export function generateModifyVars() {
   const palettes = generateAntColors(primaryColor)
+  const primary = palettes[5]
 
   const primaryColorObj: Record<string, string> = {}
 
   for (let index = 0; index < 10; index++)
     primaryColorObj[`primary-${index + 1}`] = palettes[index]
 
+  // const modifyVars = getThemeVariables();
+  const mapToken = defaultAlgorithm(defaultSeed)
+  const v3Token = convertLegacyToken(mapToken)
+
   return {
-    hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
+    ...v3Token,
+    // reference:  Avoid repeated references
+    'hack': `true; @import (reference) "${resolve('src/design/config.less')}";`,
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+    'font-size-base': '14px', //  Main font size
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+    'app-content-background': '#fafafa', //   Link color
   }
 }

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -46,7 +46,14 @@ watch(
 
 <template>
   <div :class="prefixCls" class="relative">
-    <InputPassword v-if="showInput" v-bind="$attrs" allow-clear :value="innerValueRef" :disabled="disabled" @change="handleChange">
+    <InputPassword
+      v-if="showInput"
+      v-bind="$attrs"
+      allow-clear
+      :value="innerValueRef"
+      :disabled="disabled"
+      @change="handleChange"
+    >
       <template v-for="item in Object.keys($slots)" #[item]="data">
         <slot :name="item" v-bind="data || {}" />
       </template>
@@ -96,9 +103,32 @@ watch(
       height: inherit;
       background-color: transparent;
       border-radius: inherit;
-      transition:
+      transition: width 0.5s ease-in-out, background 0.25s;
-        width 0.5s ease-in-out,
+
-        background 0.25s;
+      &[data-score='0'] {
+        width: 20%;
+        background-color: darken(@error-color, 10%);
+      }
+
+      &[data-score='1'] {
+        width: 40%;
+        background-color: @error-color;
+      }
+
+      &[data-score='2'] {
+        width: 60%;
+        background-color: @warning-color;
+      }
+
+      &[data-score='3'] {
+        width: 80%;
+        background-color: fade(@success-color, 50%);
+      }
+
+      &[data-score='4'] {
+        width: 100%;
+        background-color: @success-color;
+      }
     }
   }
 }