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