feat: 增加keep-alive组件事例

locales/en.json

@@ -41,6 +41,8 @@
   "router.normal": "Normal Permission",
   "router.extra": "Extra Permission",
   "router.button": "Button Permission",
+  "router.alive": "Keep Alive",
+  "router.clock": "Clock",
   "page.403.title": "403",
   "page.403.head_title": "You don't have enough clearance",
   "page.403.second_title": "But don't worry, you can go back to the main page by clicking the button below",

locales/zh-CN.json

@@ -41,6 +41,8 @@
   "router.normal": "普通权限",
   "router.extra": "额外权限",
   "router.button": "按钮权限",
+  "router.alive": "组件缓存",
+  "router.clock": "时钟演示",
   "page.403.title": "403",
   "page.403.head_title": "你的权限不足",
   "page.403.second_title": "不过不要担心,你可以点击下方的按钮回到主页",

src/router/module/alive.ts

@@ -0,0 +1,16 @@
+import { RouteRecordRaw } from "vue-router";
+
+export default {
+  name: "alive",
+  path: "/alive",
+  component: () => import("@/layouts/common-page.vue"),
+  meta: { auth: true, menu: { title: "router.alive", icon: "More" } },
+  children: [
+    {
+      name: "clock",
+      path: "clock",
+      component: () => import("@/views/alive/Clock.vue"),
+      meta: { menu: { title: "router.clock" }, keepAlive: true }
+    }
+  ]
+} as RouteRecordRaw;

src/style/base.scss

@@ -1,5 +1,6 @@
 @import 'reset-css/sass/reset';
 @import 'animate.css';
+@import './clock.css';
 
 ::-webkit-scrollbar {
   /*隐藏滚轮*/

src/style/clock.css

@@ -0,0 +1,166 @@
+:root {
+  --clock-bg: linear-gradient(134.17deg, #e6e9ef 4.98%, #e6e9ef 4.99%, #eef0f5 94.88%);
+  --clock-border: linear-gradient(170deg, #ffffff, #bac3cf);
+  --clock-shadow: 19px 25px 92px -32px rgba(166, 180, 200, 0.45), -20px -20px 61px rgba(255, 255, 255, 0.53),
+    13px 14px 12px -6px rgba(166, 180, 200, 0.57);
+  --clock-inner-bg: linear-gradient(90deg, #eceef3 0%, #f1f2f7 100%);
+  --clock-inner-shadow: inset -12px -12px 30px rgba(255, 255, 255, 0.2), inset 7px 7px 8px rgba(166, 180, 200, 0.52),
+    inset 10px 11px 30px -1px rgba(166, 180, 200, 0.71);
+  --hand-color: #646e82;
+  --second-hand-color: #fd382d;
+}
+
+html.dark {
+    --clock-bg: linear-gradient(134.17deg, #3e464f 4.99%, #424a53 94.88%);
+    --clock-border: linear-gradient(170deg, #5d666d, #232a30);
+    --clock-shadow: 19px 25px 92px -32px rgba(35, 40, 45, 0.35), -20px -20px 61px rgba(72, 83, 92, 0.25),
+      13px 14px 12px -6px rgba(35, 40, 45, 0.5);
+    --clock-inner-bg: linear-gradient(248.53deg, #363e46 -12.81%, #2c343c 305.95%);
+    --clock-inner-shadow: inset -12px -12px 30px rgba(72, 83, 92, 0.3), inset 7px 7px 8px rgba(35, 40, 45, 0.25),
+      inset 10px 11px 30px -1px rgba(35, 40, 45, 0.5);
+    --hand-color: #8e98a1;
+}
+
+html.sky {
+  --clock-bg: linear-gradient(134.17deg, #c7e5f9 4.98%, #c3dee6 4.99%, #daeff1 94.88%);
+  --clock-border: linear-gradient(170deg, #c7e5f9, #bac3cf);
+  --clock-inner-bg: linear-gradient(90deg, #c1dcee 0%, #cfefed 100%);
+  --clock-inner-shadow: inset -12px -12px 30px rgba(255, 255, 255, 0.2), inset 7px 7px 8px rgba(166, 180, 200, 0.305),
+    inset 10px 11px 30px -1px rgba(166, 180, 200, 0.417);
+  --hand-color: #646e82;
+  --second-hand-color: #ffffff;
+}
+
+.clock {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background-image: var(--clock-bg);
+  box-shadow: var(--clock-shadow);
+  position: relative;
+}
+/* 利用伪元素和padding实现border渐变效果 */
+.clock::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  padding: 1px;
+  border-radius: 50%;
+  z-index: -1;
+  background-image: var(--clock-border);
+}
+
+.inner-circle {
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-image: var(--clock-inner-bg);
+  box-shadow: var(--clock-inner-shadow);
+}
+
+/* 表盘刻度 使用最少的元素实现四个刻度 */
+.inner-circle::before,
+.inner-circle::after {
+  content: '';
+  border-radius: 2px;
+  background-color: rgba(166, 180, 200, 0.57);
+  position: absolute;
+}
+
+.inner-circle::before {
+  width: 2px;
+  height: 10px;
+  top: 4px;
+  left: calc(50% - 1px);
+  box-shadow: 0 152px rgba(166, 180, 200, 0.57);
+}
+
+.inner-circle::after {
+  width: 10px;
+  height: 2px;
+  left: 4px;
+  top: calc(50% - 1px);
+  box-shadow: 152px 0 rgba(166, 180, 200, 0.57);
+}
+
+/* 表盘指针 */
+.hands {
+  width: 170px;
+  height: 170px;
+  position: relative;
+}
+
+.dots {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--hand-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dots::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--second-hand-color);
+}
+
+.hand {
+  width: 3px;
+  height: var(--hand-length);
+  background-color: var(--hand-color);
+  position: absolute;
+  border-radius: 3px;
+  left: calc(50% - 1.5px);
+  top: var(--top);
+  z-index: -1;
+  transform-origin: center var(--origin-y);
+}
+
+.hour-hand {
+  --hand-length: 60px;
+  --top: 40px;
+  --origin-y: 45px;
+}
+
+.minute-hand {
+  --hand-length: 80px;
+  --top: 24px;
+  --origin-y: 61px;
+}
+
+.second-hand {
+  --hand-length: 100px;
+  --top: 15px;
+  --origin-y: 70px;
+  width: 2px;
+  left: calc(50% - 1px);
+  background-color: var(--second-hand-color);
+  position: relative;
+  z-index: 1;
+}
+
+.second-hand::after {
+  content: '';
+  width: 4px;
+  height: 22px;
+  background-color: var(--second-hand-color);
+  position: absolute;
+  bottom: -2px;
+  border-radius: 2px;
+  left: calc(50% - 2px);
+}

src/views/alive/Clock.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+let date = null;
+let timer: number | undefined;
+
+function handRotation(target: HTMLDivElement, deg: number) {
+  if (target && target.style) {
+    target.style.transform = `rotate(${deg}deg)`;
+  }
+}
+
+function clock() {
+  const secondHand = document.querySelector(".second-hand") as HTMLDivElement;
+  const minuteHand = document.querySelector(".minute-hand") as HTMLDivElement;
+  const hourHand = document.querySelector(".hour-hand") as HTMLDivElement;
+
+  date = new Date();
+  let hour = (date.getHours() % 12) + date.getMinutes() / 59;
+  let minute = date.getMinutes();
+  let second = date.getSeconds();
+
+  handRotation(hourHand, hour * 30);
+  handRotation(minuteHand, minute * 6);
+  handRotation(secondHand, second * 6);
+
+  timer = window.setTimeout(clock, 500);
+}
+
+onDeactivated(() => {
+  window.clearTimeout(timer);
+});
+
+onActivated(() => {
+  clock();
+});
+
+onMounted(() => {
+  clock();
+});
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-auto justify-center align-center">
+    <div class="clock self-center">
+      <div class="inner-circle">
+        <div class="hands">
+          <div class="dots"></div>
+          <div class="hand hour-hand"></div>
+          <div class="hand minute-hand"></div>
+          <div class="hand second-hand"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>