From ea0b22538280e9960a7c88cb2aeced0bc751cfce Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Thu, 21 Dec 2023 17:43:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0power=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/app.js                         |   4 +-
 dist/components/topbar.js           |  10 ++-
 dist/{components => views}/about.js |   2 +-
 dist/views/power.js                 | 109 ++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+), 3 deletions(-)
 rename dist/{components => views}/about.js (98%)
 create mode 100644 dist/views/power.js

diff --git a/dist/app.js b/dist/app.js
index 8c7dd9d..706854e 100644
--- a/dist/app.js
+++ b/dist/app.js
@@ -25,7 +25,8 @@ import fetch from '/lib/fetch.js'
 
 import './components/dock.js'
 import './components/topbar.js'
-import './components/about.js'
+import './views/about.js'
+import './views/power.js'
 
 Icon.extend(extIcons)
 
@@ -36,6 +37,7 @@ const app = createApp({
       <div class="main-body"><router-view></router-view></div>
       <wc-dock></wc-dock>
       <wc-about></wc-about>
+      <wc-power></wc-power>
     `
   },
 
diff --git a/dist/components/topbar.js b/dist/components/topbar.js
index c9b86bf..247be10 100644
--- a/dist/components/topbar.js
+++ b/dist/components/topbar.js
@@ -45,6 +45,11 @@ class Topbar extends Component {
         justify-content: end;
 
         --wc-icon-size: 16px;
+        color: var(--color-red-1);
+      }
+
+      wc-icon {
+        cursor: pointer;
       }
     `,
     css`
@@ -67,7 +72,10 @@ class Topbar extends Component {
         </div>
         <div class="center">${this.#date}</div>
         <div class="right">
-          <wc-icon name="switch"></wc-icon>
+          <wc-icon
+            name="switch"
+            @click=${_ => (this.$store.powerAppShow = true)}
+          ></wc-icon>
         </div>
       </div>
     `
diff --git a/dist/components/about.js b/dist/views/about.js
similarity index 98%
rename from dist/components/about.js
rename to dist/views/about.js
index c96744c..a34325c 100644
--- a/dist/components/about.js
+++ b/dist/views/about.js
@@ -7,7 +7,7 @@
 import { html, css, Component } from 'wkit'
 import { watch } from 'wkitd'
 
-import './titlebar.js'
+import '../components/titlebar.js'
 
 class About extends Component {
   static animation = { type: 'scale' }
diff --git a/dist/views/power.js b/dist/views/power.js
new file mode 100644
index 0000000..308c705
--- /dev/null
+++ b/dist/views/power.js
@@ -0,0 +1,109 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component, bind } from 'wkit'
+import { watch } from 'wkitd'
+
+class Power extends Component {
+  static animation = {}
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 2;
+        width: 100vw;
+        height: 100vh;
+        font-size: 14px;
+        color: var(--color-plain-2);
+        background: rgba(0, 0, 0, 0.53);
+        backdrop-filter: blur(6px);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      menu,
+      li {
+        list-style: none;
+      }
+
+      .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100vw;
+        height: 100vh;
+      }
+
+      .menu {
+        display: flex;
+        width: auto;
+        height: 160px;
+        padding: 32px;
+        gap: 16px;
+        border-radius: 8px;
+        background: #39404fdd;
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
+
+        .item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 12px;
+          width: 96px;
+          height: 88px;
+          border-radius: 8px;
+          font-size: 12px;
+          background: var(--color-dark-1);
+          transition: background 0.2s ease-in-out;
+
+          &.active,
+          &:hover {
+            background: #a3be8c;
+          }
+        }
+      }
+    `
+  ]
+
+  #hide(ev) {
+    this.$store.powerAppShow = false
+  }
+
+  mounted() {
+    watch('$store.powerAppShow', v => {
+      this.$animate(!v)
+    })
+  }
+
+  render() {
+    return html`
+      <main class="container" @click.self=${this.#hide}>
+        <menu class="menu">
+          <li class="item active">
+            <wc-icon name="lock"></wc-icon>
+            <span>锁屏</span>
+          </li>
+
+          <li class="item">
+            <wc-icon name="user"></wc-icon>
+            <span>登录</span>
+          </li>
+
+          <li class="item">
+            <wc-icon name="switch"></wc-icon>
+            <span>注销登录</span>
+          </li>
+        </menu>
+      </main>
+    `
+  }
+}
+
+Power.reg('power')