update

dist/app.js

@@ -19,15 +19,17 @@ import router from './router.js'
 import store from './store.js'
 import fetch from '/lib/fetch.js'
 
-import './components/header.js'
+import './components/dock.js'
-import './components/footer.js'
+import './components/topbar.js'
+import './components/about.js'
 
 const app = createApp({
   render() {
     return html`
-      <wc-header></wc-header>
+      <wc-topbar></wc-topbar>
       <div class="main-body"><router-view></router-view></div>
-      <wc-footer></wc-footer>
+      <wc-dock></wc-dock>
+      <wc-about></wc-about>
     `
   },
 
@@ -35,8 +37,37 @@ const app = createApp({
     :host {
       display: flex;
       flex-direction: column;
-      width: 100%;
+      width: 100vw;
-      min-height: 100vh;
+      height: 100vh;
+      background: radial-gradient(ellipse, var(--color-red-a), transparent),
+        radial-gradient(ellipse at bottom, var(--color-teal-a), transparent),
+        linear-gradient(
+          160deg,
+          var(--color-blue-a),
+          rgba(255, 255, 255, 0.3),
+          var(--color-blue-1)
+        );
+    }
+    :host::before,
+    :host::after {
+      position: fixed;
+      bottom: -100px;
+      display: block;
+      width: 1280px;
+      height: 480px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.1);
+      content: '';
+    }
+    :host::before {
+      left: -256px;
+      transform: rotate(30deg);
+    }
+    :host::after {
+      right: -144px;
+      bottom: -160px;
+      width: 960px;
+      transform: rotate(-30deg);
     }
     .main-body {
       flex: 1;
@@ -65,4 +96,4 @@ const app = createApp({
   }
 })
 
-app.use(router).use(store).mount('.app')
+app.use(router).use(store).mount()

dist/components/about.js

@@ -0,0 +1,84 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+
+import './titlebar.js'
+
+class About extends Component {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        width: 800px;
+        height: 640px;
+        font-size: 14px;
+        color: var(--color-dark-1);
+        transform: translate(-50%, -50%);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.75);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+      }
+    `,
+    css`
+      .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 32px 64px;
+      }
+
+      .name {
+        font: 64px/2 'Sol Thin';
+      }
+      a {
+        text-decoration: none;
+        color: var(--color-blue-1);
+      }
+    `
+  ]
+
+  #date = new Date().format('m月d日 H:i')
+
+  mounted() {}
+
+  render() {
+    return html`
+      <main class="container">
+        <wc-titlebar></wc-titlebar>
+        <div class="content">
+          <header class="name">APP STORE</header>
+          <cite>v1.0.0</cite>
+          <mark>dd</mark>
+
+          <footer>
+            &copy; Powered By yutent, with
+            <a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
+              >wkitd</a
+            >
+          </footer>
+        </div>
+      </main>
+    `
+  }
+}
+
+About.reg('about')

dist/components/dock.js

@@ -0,0 +1,99 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+
+class Dock extends Component {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: 8px;
+        top: 50%;
+        z-index: 2;
+        width: 72px;
+        transform: translateY(-50%);
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 72px;
+        min-height: 256px;
+        gap: 12px;
+        padding: 12px;
+        border-radius: 16px;
+        background: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+      }
+    `,
+    css`
+      .apps {
+        display: flex;
+        flex-direction: column;
+        width: 48px;
+        gap: 12px;
+        cursor: pointer;
+
+        .item {
+          width: 48px;
+          height: 48px;
+          border-radius: 12px;
+          background: var(--color-blue-1);
+          transition: transform 0.2s ease-in-out;
+
+          &:nth-child(2) {
+            background: var(--color-teal-1);
+          }
+          &:nth-child(3) {
+            background: var(--color-red-1);
+          }
+          &:nth-child(4) {
+            background: var(--color-dark-1);
+          }
+
+          &:hover {
+            transform: scale(1.2) translateX(10%);
+          }
+        }
+      }
+      .pipe {
+        width: 32px;
+        height: 1px;
+        background: var(--color-plain-3);
+      }
+      .dashboard,
+      .trash {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        background: var(--color-plain-3);
+        cursor: pointer;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <div class="container">
+        <span class="dashboard"></span>
+        <mark class="pipe"></mark>
+        <nav class="apps">
+          <a class="item"></a>
+          <a class="item"></a>
+          <a class="item"></a>
+          <a class="item"></a>
+        </nav>
+        <mark class="pipe"></mark>
+        <span class="trash"></span>
+      </div>
+    `
+  }
+}
+
+Dock.reg('dock')

dist/components/titlebar.js

@@ -0,0 +1,69 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+
+class Titlebar extends Component {
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      height: 48px;
+    }
+    .titlebar {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 48px;
+      padding: 0 16px;
+      border-radius: 8px 8px 0 0;
+      color: var(--color-dark-1);
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      i {
+        display: block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--color-red-1);
+        cursor: pointer;
+
+        &:nth-child(2) {
+          background: var(--color-orange-1);
+        }
+        &:nth-child(3) {
+          background: var(--color-green-1);
+        }
+      }
+    }
+  `
+
+  #handleClick(ev) {
+    if (ev.currentTarget === ev.target) {
+      return
+    }
+    let { act } = ev.target.dataset
+
+    this.$emit(act)
+  }
+
+  render() {
+    return html`
+      <div class="titlebar">
+        <section class="btns" @click=${this.#handleClick}>
+          <i data-act="close"></i><i data-act="minimize"></i
+          ><i data-act="maximize"></i>
+        </section>
+      </div>
+    `
+  }
+}
+
+Titlebar.reg('titlebar')

dist/components/topbar.js

@@ -0,0 +1,77 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+
+class Topbar extends Component {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 2;
+        width: 100vw;
+        height: 28px;
+        font-size: 14px;
+        color: var(--color-dark-1);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      .container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+      }
+      .left,
+      .right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+      }
+      .center {
+        flex-shrink: 0;
+      }
+      .right {
+        justify-content: end;
+
+        --wc-icon-size: 16px;
+      }
+    `,
+    css`
+      .logo {
+        width: 22px;
+        height: 22px;
+      }
+    `
+  ]
+
+  #date = new Date().format('m月d日 H:i')
+
+  mounted() {}
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="left">
+          <img src="/assets/img/deb.svg" class="logo" />
+        </div>
+        <div class="center">${this.#date}</div>
+        <div class="right">
+          <wc-icon name="switch"></wc-icon>
+        </div>
+      </div>
+    `
+  }
+}
+
+Topbar.reg('topbar')

dist/router.js

@@ -3,7 +3,6 @@ import { createRouter, createWebHistory } from 'wkitd'
 import './views/home.js'
 import './views/detail.js'
 import './views/login.js'
-import './views/about.js'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -12,10 +11,6 @@ const router = createRouter({
       path: '/',
       name: 'wc-home'
     },
-    {
-      path: '/about',
-      name: 'wc-about'
-    },
     {
       path: '/view/:id',
       name: 'wc-detail'