更新首页

dist/components/app-menu.js

@@ -47,16 +47,18 @@ class Aside extends Component {
           height: 36px;
           padding: 0 16px;
           gap: 4px;
+          line-height: 1;
           border-radius: 8px 0 0 8px;
           list-style: none;
-          transition: background 0.2s ease-in-out;
+          transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
 
           &:hover {
-            background: rgba(255, 255, 255, 0.5);
+            background: #fff;
           }
 
           &.active {
-            background: rgba(255, 255, 255, 1);
+            background: #fff;
+            color: var(--color-blue-1);
 
             &::before,
             &::after {
@@ -75,11 +77,26 @@ class Aside extends Component {
             }
           }
         }
+        router-link {
+          flex: 1;
+          height: 100%;
+        }
       }
     `
   ]
 
+  #path = '/'
+
+  mounted() {
+    watch('$router.path', r => {
+      this.#path = r.path
+      this.$requestUpdate()
+    })
+  }
+
   render() {
+    let path = this.#path
+
     return html`
       <aside class="container">
         <search class="searchbar">
@@ -87,17 +104,22 @@ class Aside extends Component {
         </search>
 
         <menu class="category">
-          <li class="item active"><wc-icon name="home"></wc-icon>装机必备</li>
+          <li class="item ${path === '/' ? 'active' : ''}">
-          ${this.$store.categories
+            <wc-icon name="home"></wc-icon>
-            .slice(0, 3)
+            <router-link>装机必备</router-link>
-            .map(
+          </li>
-              it => html`
+          ${this.$store.categories.slice(0, 3).map(
-                <li class="item">
+            it => html`
-                  <wc-icon name=${it.icon}></wc-icon>${it.name}
+              <li class="item ${path === it.path ? 'active' : ''}">
-                </li>
+                <wc-icon name=${it.icon}></wc-icon>
-              `
+                <router-link :to=${{ path: it.path }}>${it.name}</router-link>
-            )}
+              </li>
-          <li class="item"><wc-icon name="menu"></wc-icon>全部分类</li>
+            `
+          )}
+          <li class="item ${path === '/cate/all' ? 'active' : ''}">
+            <wc-icon name="menu"></wc-icon>
+            <router-link :to=${{ path: '/cate/all' }}>全部分类</router-link>
+          </li>
         </menu>
       </aside>
     `

dist/index.html

@@ -16,6 +16,7 @@
       "fetch": "//jscdn.ink/@bytedo/fetch/latest/next.js",
       "wkit": "//jscdn.ink/wkit/latest/index.js",
       "wkitd": "//jscdn.ink/wkitd/latest/index.js",
+      "wkitd": "//127.0.0.1:23333/src/index.js",
       "@ui/": "/lib/ui/"
     }
   }</script>

dist/router.js

@@ -11,6 +11,10 @@ const router = createRouter({
       path: '/',
       name: 'wc-home'
     },
+    {
+      path: '/cate/:id',
+      name: 'wc-home'
+    },
     {
       path: '/view/:id',
       name: 'wc-detail'

dist/views/detail.js

@@ -0,0 +1,43 @@
+import { html, css, Component } from 'wkit'
+import { watch } from 'wkitd'
+
+class Detail extends Component {
+  static props = { result: '', decrypt: '' }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: calc(50vw - 360px);
+        top: calc(50vh - 280px);
+        z-index: 2;
+        width: 720px;
+        height: 560px;
+        font-size: 14px;
+        color: var(--color-dark-1);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        padding: 32px;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.93);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(6px);
+      }
+    `
+  ]
+
+  async mounted() {}
+
+  render() {
+    return html` <div class="container"></div> `
+  }
+}
+
+Detail.reg('detail')