up. 修复层级下的取值问题

z_ele/src/layout/components/lock-dialog.vue

@@ -0,0 +1,36 @@
+<!-- 锁屏弹窗 -->
+<template>
+  <ele-modal
+    title="锁定客户端"
+    :width="480"
+    v-model="visible"
+    :modal-penetrable="false"
+    :append-to-body="true"
+    :lock-scroll="true"
+    center
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+  >
+    <el-input type="password" v-model="lockPassword" size="large" placeholder="请输入临时锁定密码/为空则使用默认使用账号密码"></el-input>
+    <div style="margin-top: 20px;">
+      <el-button class="ele-fluid" type="primary" @click="confirmLock">锁定客户端</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { useMobile } from '@/utils/use-mobile';
+
+/** 弹窗是否打开 */
+const visible = defineModel({ type: Boolean });
+
+/** 是否是移动端 */
+const { mobile } = useMobile();
+
+const lockLoading = ref(false);
+const lockPassword = ref("");
+const confirmLock = ()=>{
+  lockLoading.value = true;
+}
+</script>

z_ele/src/layout/index.vue

@@ -85,6 +85,12 @@
     </template>
     <!-- 顶栏右侧按钮 -->
     <template #right>
+      <!-- 锁屏 -->
+      <layout-tool class="hidden-sm-and-down" @click="lockClient">
+        <el-icon style="transform: scale(1.18)">
+          <LockOutlined style="stroke-width: 4" />
+        </el-icon>
+      </layout-tool>
       <!-- 全屏切换 -->
       <layout-tool class="hidden-sm-and-down" @click="toggleFullscreen">
         <el-icon style="transform: scale(1.18)">
@@ -171,6 +177,8 @@
   </ele-pro-layout>
   <!-- 主题设置抽屉 -->
   <setting-drawer v-model="settingVisible" />
+  <!-- 锁定客户端-->
+  <lock-dialog v-model="lockVisible" />
 </template>
 
 <script lang="ts" setup>
@@ -205,7 +213,8 @@
     MinusCircleOutlined,
     CloseCircleOutlined,
     MoonOutlined,
-    SunOutlined
+    SunOutlined,
+    LockOutlined
   } from '@/components/icons';
   import { PROJECT_NAME, HOME_PATH, REDIRECT_PATH } from '@/config/setting';
   import { doWithTransition } from '@/utils/common';
@@ -219,6 +228,8 @@
   import I18nIcon from './components/i18n-icon.vue';
   import PageFooter from './components/page-footer.vue';
   import SettingDrawer from './components/setting-drawer.vue';
+  import LockDialog from './components/lock-dialog.vue';
+
 
   defineOptions({ name: 'Layout' });
 
@@ -285,6 +296,9 @@
   /** 是否显示主题设置抽屉 */
   const settingVisible = ref(false);
 
+  /** 是否显示锁屏功能 */
+  const lockVisible = ref(false);
+
   /** 页签右键菜单 */
   const tabContext = computed<DropdownItem[]>(() => {
     return [
@@ -369,6 +383,11 @@
     isFullscreen.value = checkFullscreen();
   };
 
+  /** 锁定客户端 */
+  const lockClient = () => {
+    lockVisible.value = true;
+  }
+
   /** 全屏切换 */
   const toggleFullscreen = () => {
     if (isFullscreen.value) {