fix(web): 优化锁屏弹窗布局与交互

src/components/UserInfo/src/components/LockDialog.vue

@@ -2,11 +2,10 @@
 
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { computed, reactive } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
-import { reactive, computed } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { FormSchema } from '@/components/Form'
 import { ElButton } from 'element-plus'
@@ -41,13 +40,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogVisible = computed({
   get: () => props.modelValue,
-  set: (val) => {
+  set: (val) => emit('update:modelValue', val)
-    console.log('set: ', val)
-    emit('update:modelValue', val)
-  }
 })
 
-const dialogTitle = ref(t('lock.lockScreen'))
+const dialogTitle = computed(() => t('lock.lockScreen'))
 
 const rules = reactive({
   password: [required()]
@@ -60,7 +56,10 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      style: {
+        width: '100%'
+      }
     }
   }
 ])
@@ -82,41 +81,163 @@ const handleLock = async () => {
     }
   })
 }
+
+const cancel = () => {
+  dialogVisible.value = false
+}
 </script>
 
 <template>
   <Dialog
     v-model="dialogVisible"
-    width="500px"
+    width="440px"
-    max-height="170px"
+    max-height="220px"
     :class="prefixCls"
     :title="dialogTitle"
+    :fullscreen="false"
   >
-    <div class="flex flex-col items-center">
+    <template #title>
-      <img
+      <div class="lock-dialog-heading">
-        v-if="avatarUrl"
+        <AppIcon :icon="AppIcons.lock" :size="20" />
-        :src="avatarUrl"
+        <div>
-        alt=""
+          <h2>{{ dialogTitle }}</h2>
-        class="w-70px h-70px rounded-[50%] object-cover"
+          <p>{{ t('lock.description') }}</p>
-      />
+        </div>
-      <span
+      </div>
-        v-else
+    </template>
-        class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
+
-        ><AppIcon :icon="AppIcons.person" :size="30"
+    <div class="lock-dialog-body">
-      /></span>
+      <div class="lock-dialog-user">
-      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{ displayName }}</span>
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="lock-dialog-avatar" />
+        <span v-else class="lock-dialog-avatar lock-dialog-avatar--empty">
+          <AppIcon :icon="AppIcons.person" :size="28" />
+        </span>
+        <span class="lock-dialog-name">{{ displayName }}</span>
+      </div>
+      <div class="lock-password-field" @keyup.enter.prevent.stop="handleLock">
+        <Form
+          :is-col="false"
+          :schema="schema"
+          :rules="rules"
+          label-position="top"
+          @register="formRegister"
+        />
+      </div>
     </div>
-    <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
+
     <template #footer>
-      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+      <ElButton class="lock-dialog-cancel" @click="cancel">{{ t('common.cancel') }}</ElButton>
+      <ElButton type="primary" class="lock-dialog-submit" @click="handleLock">
+        {{ t('lock.lock') }}
+      </ElButton>
     </template>
   </Dialog>
 </template>
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
-  @media (width <= 767px) {
+  width: 440px !important;
+  max-width: calc(100vw - 24px);
+  max-height: 360px;
+}
+
+:global(.v-lock-dialog .el-dialog__header) {
+  height: auto;
+  min-height: 64px;
+  padding: 14px 20px 8px !important;
+  border-bottom: 0;
+}
+
+:global(.v-lock-dialog .el-dialog__body) {
+  padding: 4px 20px 8px !important;
+}
+
+:global(.v-lock-dialog .el-dialog__footer) {
+  padding: 10px 20px 16px;
+}
+
+:global(.v-lock-dialog .el-dialog__footer .el-button) {
+  min-width: 96px;
+  height: 36px;
+}
+
+:global(.v-lock-dialog .el-dialog__header .absolute) {
+  right: -14px !important;
+}
+
+@media (width <= 767px) {
+  :global(.v-lock-dialog) {
     max-width: calc(100vw - 16px);
   }
 }
+
+.lock-dialog-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding-right: 40px;
+  color: var(--el-text-color-primary);
+
+  .app-icon {
+    margin-top: 2px;
+    color: var(--el-color-primary);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 650;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+.lock-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lock-dialog-user {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.lock-dialog-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.lock-dialog-avatar--empty {
+  display: flex;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  align-items: center;
+  justify-content: center;
+}
+
+.lock-dialog-name {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lock-password-field {
+  width: 100%;
+}
+
+.lock-dialog-submit {
+  min-width: 96px;
+}
 </style>

src/locales/en.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: 'Lock screen',
     lock: 'Lock',
     lockPassword: 'Lock screen password',
+    description: 'Enter your password to unlock this session.',
     unlock: 'Click to unlock',
     backToLogin: 'Back to login',
     entrySystem: 'Entry the system',

src/locales/zh-CN.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: '锁定屏幕',
     lock: '锁定',
     lockPassword: '锁屏密码',
+    description: '输入密码解锁当前会话。',
     unlock: '点击解锁',
     backToLogin: '返回登录',
     entrySystem: '进入系统',