增加power界面

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>
     `
   },
 

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>
     `

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' }

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')