feat: add inputPassword demo

mock/role/index.ts

@@ -249,6 +249,14 @@ const adminList = [
         meta: {
           title: 'router.infotip'
         }
+      },
+      {
+        path: 'input-password',
+        component: 'views/Components/InputPassword',
+        name: 'InputPassword',
+        meta: {
+          title: 'router.inputPassword'
+        }
       }
     ]
   },
@@ -468,6 +476,7 @@ const testList: string[] = [
   '/components/qrcode',
   '/components/highlight',
   '/components/infotip',
+  '/Components/InputPassword',
   '/hooks',
   '/hooks/useWatermark',
   '/level',

src/components/Dialog/src/Dialog.vue

@@ -73,7 +73,7 @@ const dialogStyle = computed(() => {
         </slot>
         <Icon
           v-if="fullscreen"
-          class="mr-15px cursor-pointer is-hover"
+          class="mr-11px cursor-pointer is-hover mt-2px"
           :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
           color="var(--el-color-info)"
           @click="toggleFull"

src/components/InputPassword/src/InputPassword.vue

@@ -85,7 +85,7 @@ const getIconName = computed(() =>
   }
 
   &__bar {
-    background-color: var(--el-text-color-disabled-base);
+    background-color: var(--el-text-color-disabled);
     border-radius: var(--el-border-radius-base);
 
     &::before,

src/config/app.ts

@@ -66,7 +66,7 @@ export const appModules: AppState = {
 
   layout: wsCache.get('layout') || 'classic', // layout布局
   isDark: wsCache.get('isDark') || false, // 是否是暗黑模式
-  currentSize: wsCache.get('default') || 'default', // 组件尺寸
+  currentSize: wsCache.get('default') || '', // 组件尺寸
   theme: wsCache.get('theme') || {
     // 主题色
     elColorPrimary: '#409eff',

src/locales/en.ts

@@ -131,7 +131,8 @@ export default {
     authorization: 'Authorization',
     user: 'User management',
     role: 'Role management',
-    document: 'Document'
+    document: 'Document',
+    inputPassword: 'InputPassword'
   },
   analysis: {
     newUser: 'New user',
@@ -411,5 +412,9 @@ export default {
     remark: 'Remark',
     remarkMessage1: 'Back end control routing permission',
     remarkMessage2: 'Front end control routing permission'
+  },
+  inputPasswordDemo: {
+    title: 'InputPassword',
+    inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
   }
 }

src/locales/zh-CN.ts

@@ -131,7 +131,8 @@ export default {
     authorization: '权限管理',
     user: '用户管理',
     role: '角色管理',
-    document: '文档'
+    document: '文档',
+    inputPassword: '密码输入框'
   },
   analysis: {
     newUser: '新增用户',
@@ -374,7 +375,7 @@ export default {
   },
   descriptionsDemo: {
     descriptions: '描述',
-    descriptionsDes: '基于 ElementPlus 的 descriptions 组件二次封装',
+    descriptionsDes: '基于 ElementPlus 的 Descriptions 组件二次封装',
     username: '用户名',
     nickName: '昵称',
     phone: '联系电话',
@@ -407,5 +408,9 @@ export default {
     remark: '备注',
     remarkMessage1: '后端控制路由权限',
     remarkMessage2: '前端控制路由权限'
+  },
+  inputPasswordDemo: {
+    title: '密码输入框',
+    inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
   }
 }

src/router/index.ts

@@ -300,6 +300,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.infotip')
         }
+      },
+      {
+        path: 'input-password',
+        component: () => import('@/views/Components/InputPassword.vue'),
+        name: 'InputPassword',
+        meta: {
+          title: t('router.inputPassword')
+        }
       }
     ]
   },

src/views/Components/Icon.vue

@@ -12,6 +12,11 @@ const keyClick = (key: string) => {
     window.open('https://iconify.design/')
   }
 }
+
+const peoples = useIcon({ icon: 'svg-icon:peoples' })
+const money = useIcon({ icon: 'svg-icon:money' })
+const aim = useIcon({ icon: 'ep:aim' })
+const alarmClock = useIcon({ icon: 'ep:alarm-clock' })
 </script>
 
 <template>
@@ -48,10 +53,10 @@ const keyClick = (key: string) => {
   </ContentWrap>
   <ContentWrap title="useIcon">
     <div class="flex justify-between">
-      <ElButton :icon="useIcon({ icon: 'svg-icon:peoples' })">Button</ElButton>
+      <ElButton :icon="peoples">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'svg-icon:money' })">Button</ElButton>
+      <ElButton :icon="money">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'ep:aim' })">Button</ElButton>
+      <ElButton :icon="aim">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'ep:alarm-clock' })">Button</ElButton>
+      <ElButton :icon="alarmClock">Button</ElButton>
     </div>
   </ContentWrap>
 </template>

src/views/Components/InputPassword.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { InputPassword } from '@/components/InputPassword'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const password = ref('')
+</script>
+
+<template>
+  <ContentWrap
+    :title="t('inputPasswordDemo.title')"
+    :message="t('inputPasswordDemo.inputPasswordDes')"
+  >
+    <InputPassword v-model="password" class="mb-20px" />
+    <InputPassword v-model="password" strength />
+    <InputPassword v-model="password" strength disabled class="mt-20px" />
+  </ContentWrap>
+</template>