From d16e6c90757393f0bc6e49c86d9bd1ac962d0706 Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Tue, 12 Jan 2021 22:48:55 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.01.12:=E6=96=B0=E5=A2=9E=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=85=8D=E7=BD=AE=E8=87=AA=E5=8A=A8=E9=94=81=E5=B1=8F?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-admin-wonderful-next/package.json         |   2 +-
 vue-admin-wonderful-next/src/App.vue          |  12 +-
 vue-admin-wonderful-next/src/store/index.ts   |   3 +-
 .../src/utils/themeConfig.ts                  |   3 +-
 .../src/views/layout/lockScreen/index.vue     | 212 ++++++++++++------
 .../layout/navBars/breadcrumb/setings.vue     |  14 +-
 6 files changed, 169 insertions(+), 77 deletions(-)

diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json
index 4fb1842..d41813a 100644
--- a/vue-admin-wonderful-next/package.json
+++ b/vue-admin-wonderful-next/package.json
@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.23",
+    "element-plus": "^v1.0.1-beta.24",
     "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "vue": "^3.0.5",
diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue
index d56e3d1..26001aa 100644
--- a/vue-admin-wonderful-next/src/App.vue
+++ b/vue-admin-wonderful-next/src/App.vue
@@ -1,10 +1,10 @@
 <template>
   <router-view />
-  <LockScreen />
+  <LockScreen v-if="getThemeConfig.isLockScreen" />
 </template>
 
 <script lang="ts">
-import { onBeforeMount } from "vue";
+import { onBeforeMount, computed } from "vue";
 import { useStore } from "/@/store/index.ts";
 import { setIconfont } from "/@/utils/setIconfont.ts";
 import LockScreen from "/@/views/layout/lockScreen/index.vue";
@@ -13,11 +13,17 @@ export default {
   components: { LockScreen },
   setup() {
     const store = useStore();
-    console.log(store);
+    // 获取布局配置信息
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
     // 设置批量第三方 icon 图标
     onBeforeMount(() => {
       setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
     });
+    return {
+      getThemeConfig,
+    };
   },
 };
 </script>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts
index f980d1a..3aba339 100644
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/vue-admin-wonderful-next/src/store/index.ts
@@ -23,7 +23,8 @@ export interface RootStateTypes {
         isFixedHeader: boolean,
         isFixedHeaderChange: boolean,
         isCollapse1: boolean,
-        menuWidth1: number,
+        isLockScreen: boolean,
+        lockScreenTime: number,
         isShowLogo: boolean,
         isShowLogoChange: boolean,
         isBreadcrumb: boolean,
diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts
index bdfa254..7d62a57 100644
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts
@@ -20,7 +20,8 @@ export default {
     isFixedHeader: false,
     isFixedHeaderChange: false,
     isCollapse1: false,
-    menuWidth1: 200,
+    isLockScreen: false,
+    lockScreenTime: 30,
     isShowLogo: false,
     isShowLogoChange: false,
     isBreadcrumb: true,
diff --git a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
index 9dd731b..871c89d 100644
--- a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
@@ -1,92 +1,164 @@
 <template>
-  <div class="layout-lock-screen-mask"></div>
-  <div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
-  <div class="layout-lock-screen">
-    <div class="layout-lock-screen-date">
-      <div class="layout-lock-screen-date-box">
-        <div class="layout-lock-screen-date-box-time">22:14</div>
-        <div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
+  <div v-show="isShowLockScreen">
+    <div class="layout-lock-screen-mask"></div>
+    <div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
+    <div class="layout-lock-screen">
+      <div class="layout-lock-screen-date" @mousedown="onDown" @mousemove="onMove" @mouseup="onEnd"
+        @touchstart.stop="onDown" @touchmove.stop="onMove" @touchend.stop="onEnd">
+        <div class="layout-lock-screen-date-box">
+          <div class="layout-lock-screen-date-box-time">{{time.hm}}<span
+              class="layout-lock-screen-date-box-minutes">{{time.s}}</span></div>
+          <div class="layout-lock-screen-date-box-info">{{time.mdq}}</div>
+        </div>
       </div>
+      <transition name="el-zoom-in-center">
+        <div v-show="isShowLoockLogin" class="layout-lock-screen-login">
+          <div class="layout-lock-screen-login-box">
+            <div class="layout-lock-screen-login-box-img">
+              <img
+                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
+            </div>
+            <div class="layout-lock-screen-login-box-name">Administrator</div>
+            <div class="layout-lock-screen-login-box-value">
+              <el-input placeholder="请输入密码" ref="layoutLockScreenInputRef">
+                <template #append>
+                  <el-button icon="el-icon-right"></el-button>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          <div class="layout-lock-screen-login-icon">
+            <i class="el-icon-microphone"></i>
+            <i class="el-icon-alarm-clock"></i>
+            <i class="el-icon-switch-button"></i>
+          </div>
+        </div>
+      </transition>
     </div>
-    <transition name="el-zoom-in-center">
-      <div v-show="isShowLoockLogin" class="layout-lock-screen-login">
-        <div class="layout-lock-screen-login-box">
-          <div class="layout-lock-screen-login-box-img">
-            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
-          </div>
-          <div class="layout-lock-screen-login-box-name">Administrator</div>
-          <div class="layout-lock-screen-login-box-value">
-            <el-input placeholder="密码">
-              <template #append>
-                <el-button icon="el-icon-right"></el-button>
-              </template>
-            </el-input>
-          </div>
-        </div>
-        <div class="layout-lock-screen-login-icon">
-          <i class="el-icon-microphone"></i>
-          <i class="el-icon-alarm-clock"></i>
-          <i class="el-icon-switch-button"></i>
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { nextTick, onMounted, reactive, toRefs } from "vue";
+import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted } from "vue";
+import { useStore } from "/@/store/index.ts";
+import { formatDate } from "/@/utils/formatTime.ts";
 export default {
   name: "layoutLockScreen",
   setup() {
+    const layoutLockScreenInputRef = ref();
+    const store = useStore();
     const state = reactive({
-      moveDifference: 0,
       transparency: 1,
+      downClientY: 0,
+      moveDifference: 0,
       isShowLoockLogin: false,
+      isFlags: false,
+      querySelectorEl: null,
+      time: {
+        hm: "",
+        s: "",
+        mdq: "",
+      },
+      setIntervalTime: null,
+      isShowLockScreen: false,
+      isShowLockScreenIntervalTime: null,
     });
+    // 鼠标按下
+    const onDown = (down) => {
+      state.isFlags = true;
+      state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
+    };
+    // 鼠标移动
+    const onMove = (move) => {
+      if (state.isFlags) {
+        const el = state.querySelectorEl;
+        const opacitys = (state.transparency -= 1 / 200);
+        if (move.touches) {
+          state.moveDifference = move.touches[0].clientY - state.downClientY;
+        } else {
+          state.moveDifference = move.clientY - state.downClientY;
+        }
+        if (state.moveDifference >= 0) return false;
+        el.setAttribute(
+          "style",
+          `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`
+        );
+        if (state.moveDifference < -400) {
+          el.setAttribute(
+            "style",
+            `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`
+          );
+          state.moveDifference = -el.clientHeight;
+          setTimeout(() => {
+            el.remove();
+          }, 300);
+        }
+        if (state.moveDifference === -el.clientHeight) {
+          state.isShowLoockLogin = true;
+          layoutLockScreenInputRef.value.focus();
+        }
+      }
+    };
+    // 鼠标松开
+    const onEnd = () => {
+      state.isFlags = false;
+      state.transparency = 1;
+      if (state.moveDifference >= -400) {
+        state.querySelectorEl.setAttribute(
+          "style",
+          `top:0px;opacity:1;transition:all 0.3s ease;`
+        );
+      }
+    };
+    // 获取要拖拽的初始元素
     const initGetElement = () => {
       nextTick(() => {
-        const el = document.querySelector(".layout-lock-screen-date");
-        el.onmousedown = (down) => {
-          document.onmousemove = (move) => {
-            let opacitys = (state.transparency -= 1 / 200);
-            state.moveDifference = move.clientY - down.clientY;
-            if (state.moveDifference >= 0) return false;
-            el.setAttribute(
-              "style",
-              `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`
-            );
-            if (state.moveDifference < -400) {
-              el.setAttribute(
-                "style",
-                `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`
-              );
-              state.moveDifference = -el.clientHeight;
-              setTimeout(() => {
-                el.remove();
-              }, 300);
-            }
-            if (state.moveDifference === -el.clientHeight) {
-              state.isShowLoockLogin = true;
-            }
-          };
-          document.onmouseup = (seup) => {
-            state.transparency = 1;
-            if (state.moveDifference >= -400) {
-              el.setAttribute(
-                "style",
-                `top:0px;opacity:1;transition:all 0.3s ease;`
-              );
-            }
-            document.onmousemove = null;
-            document.onmouseup = null;
-          };
-        };
+        state.querySelectorEl = document.querySelector(
+          ".layout-lock-screen-date"
+        );
       });
     };
+    // 时间初始化
+    const initTime = () => {
+      state.time.hm = formatDate(new Date(), "HH:MM");
+      state.time.s = formatDate(new Date(), "SS");
+      state.time.mdq = formatDate(new Date(), "mm月dd日，WWW");
+    };
+    // 时间初始化定时器
+    const initSetTime = () => {
+      initTime();
+      state.setIntervalTime = setInterval(() => {
+        initTime();
+      }, 1000);
+    };
+    // 锁屏时间定时器
+    const initLockScreen = () => {
+      if (store.state.themeConfig.isLockScreen) {
+        state.isShowLockScreenIntervalTime = setInterval(() => {
+          if (store.state.themeConfig.lockScreenTime <= 0) {
+            state.isShowLockScreen = true;
+            return false;
+          }
+          store.state.themeConfig.lockScreenTime--;
+        }, 1000);
+      } else {
+        clearInterval(state.isShowLockScreenIntervalTime);
+      }
+    };
     onMounted(() => {
       initGetElement();
+      initSetTime();
+      initLockScreen();
+    });
+    onUnmounted(() => {
+      clearInterval(state.setIntervalTime);
+      clearInterval(state.isShowLockScreenIntervalTime);
     });
     return {
+      layoutLockScreenInputRef,
+      onDown,
+      onMove,
+      onEnd,
       ...toRefs(state),
     };
   },
@@ -137,6 +209,9 @@ export default {
       &-info {
         font-size: 40px;
       }
+      &-minutes {
+        font-size: 16px;
+      }
     }
   }
   &-login {
@@ -190,5 +265,8 @@ export default {
 }
 ::v-deep(.el-input__inner) {
   border-right-color: #f6f6f6;
+  &:hover {
+    border-color: #f6f6f6;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
index 1532a8f..d20c0f4 100644
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
@@ -132,10 +132,16 @@
             <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt11">
-          <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-input-number v-model="getThemeConfig.menuWidth1" controls-position="right" :min="1" :max="999"
+            <el-switch v-model="getThemeConfig.isLockScreen"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt11">
+          <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
               size="mini" style="width:90px;">
             </el-input-number>
           </div>
@@ -212,7 +218,7 @@
             </el-select>
           </div>
         </div>
-        <div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
+        <div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
           <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">