From 4bf34bd64a881d0d00d69b81b8ca6cf1a067cda4 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 19 Oct 2023 10:09:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(component):=20=E5=AF=86=E7=A0=81=E5=A4=8D?=
 =?UTF-8?q?=E6=9D=82=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closed #I895Z6
---
 build/generate/generateModifyVars.ts          | 35 ++++++++++++++++-
 .../StrengthMeter/src/StrengthMeter.vue       | 38 +++++++++++++++++--
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts
index b27d33d6..1bb08e86 100644
--- a/build/generate/generateModifyVars.ts
+++ b/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
   }
 }
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index fe815982..1b6e7f9b 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/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:
-        width 0.5s ease-in-out,
-        background 0.25s;
+      transition: 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;
+      }
     }
   }
 }