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({
+
`
},
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 {
${this.#date}
-
+ (this.$store.powerAppShow = true)}
+ >
`
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
+ * @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`
+
+
+
+ `
+ }
+}
+
+Power.reg('power')