From c4f7bd0ae641d92c6fc4e21a2db1092662d50cd2 Mon Sep 17 00:00:00 2001
From: u2nyakim <u2nyakim@gmail.com>
Date: Thu, 28 Aug 2025 16:32:07 +0800
Subject: [PATCH] =?UTF-8?q?up.=20=E4=BF=AE=E5=A4=8D=E5=B1=82=E7=BA=A7?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E5=8F=96=E5=80=BC=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 z_ele/src/layout/components/lock-dialog.vue | 36 +++++++++++++++++++++
 z_ele/src/layout/index.vue                  | 21 +++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 z_ele/src/layout/components/lock-dialog.vue

diff --git a/z_ele/src/layout/components/lock-dialog.vue b/z_ele/src/layout/components/lock-dialog.vue
new file mode 100644
index 0000000..7e5df5b
--- /dev/null
+++ b/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>
diff --git a/z_ele/src/layout/index.vue b/z_ele/src/layout/index.vue
index c7d9635..1806954 100644
--- a/z_ele/src/layout/index.vue
+++ b/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) {