增加菜单跳转交互

dist/app.js

@@ -15,6 +15,7 @@ import '@ui/base/link.js'
 import '@ui/form/input.js'
 import '@ui/form/switch.js'
 import '@ui/modal/layer.js'
+import '@ui/views/tag.js'
 import '@ui/nav/pager.js'
 
 import extIcons from '/lib/ext-icon.js'

dist/components/app-menu.js

@@ -96,6 +96,8 @@ class Aside extends Component {
 
   render() {
     let path = this.#path
+    let list = this.$store.categories
+    let paths = list.slice(4).map(it => it.path)
 
     return html`
       <aside class="container">
@@ -108,7 +110,7 @@ class Aside extends Component {
             <wc-icon name="home"></wc-icon>
             <router-link>装机必备</router-link>
           </li>
-          ${this.$store.categories.slice(0, 3).map(
+          ${list.slice(1, 4).map(
             it => html`
               <li class="item ${path === it.path ? 'active' : ''}">
                 <wc-icon name=${it.icon}></wc-icon>
@@ -116,9 +118,15 @@ class Aside extends Component {
               </li>
             `
           )}
-          <li class="item ${path === '/cate/all' ? 'active' : ''}">
+          <li
+            class="item ${path === list[0].path || paths.includes(path)
+              ? 'active'
+              : ''}"
+          >
             <wc-icon name="menu"></wc-icon>
-            <router-link :to=${{ path: '/cate/all' }}>全部分类</router-link>
+            <router-link :to=${{ path: list[0].path }}
+              >${list[0].name}</router-link
+            >
           </li>
         </menu>
       </aside>

dist/lib/ui/views/tag.js

@@ -1,8 +1,8 @@
-import{css as o,html as r,Component as e}from"wkit";import"../base/icon.js";const c={type:"scale"};class a extends e{static props={closable:!1};static styles=[o`:host{display:inline-flex}.container{display:flex;align-items:center;width:auto;height:32px;padding:0 10px;gap:3px;font-size:var(--wc-tag-font, 12px);border:1px solid var(--wc-tag-border-color, var(--color-grey-1));border-radius:3px;background:var(--wc-tag-background, var(--color-plain-1));white-space:nowrap;-webkit-user-select:none;user-select:none}.close{padding:3px;display:inline-flex;--wc-icon-size: 8px;line-height:1;border-radius:50%;cursor:pointer}.close:hover{background:var(--color-grey-2);color:#fff}`,o`:host([size=s]) .container{height:20px;padding:0 6px}:host([size=m]) .container{height:24px;padding:0 8px}`,o`:host([type=primary]) .container{border-color:var(--color-teal-a);background:#ecf5ff;color:var(--color-teal-3)}:host([type=primary]) .close:hover{color:#fff;background:var(--color-teal-1)}:host([type=info]) .container{border-color:var(--color-blue-a);background:#ecf5ff;color:var(--color-blue-3)}:host([type=info]) .close:hover{color:#fff;background:var(--color-blue-1)}:host([type=success]) .container{border-color:var(--color-green-a);background:#f0f9eb;color:var(--color-green-3)}:host([type=success]) .close:hover{color:#fff;background:var(--color-green-1)}:host([type=warning]) .container{border-color:var(--color-orange-a);background:#fdf6ec;color:var(--color-orange-3)}:host([type=warning]) .close:hover{color:#fff;background:var(--color-orange-1)}:host([type=danger]) .container{border-color:var(--color-red-a);background:#fef0f0;color:var(--color-red-3)}:host([type=danger]) .close:hover{color:#fff;background:var(--color-red-1)}`];#o(){this.$refs.tag.$animate(!0).then(t=>this.remove()),this.$emit("close")}render(){return r`
+import{css as o,html as r,Component as e}from"wkit";import"../base/icon.js";const a={type:"scale"};class c extends e{static props={closable:!1};static styles=[o`:host{display:inline-flex}.container{display:flex;align-items:center;width:auto;height:var(--wc-tag-height, 32px);padding:var(--wc-tag-padding, 0 10px);gap:3px;font-size:var(--wc-tag-font, 12px);border:1px solid var(--wc-tag-border-color, var(--color-grey-1));border-radius:3px;background:var(--wc-tag-background, var(--color-plain-1));white-space:nowrap;-webkit-user-select:none;user-select:none}.close{padding:3px;display:inline-flex;--wc-icon-size: 8px;line-height:1;border-radius:50%;cursor:pointer}.close:hover{background:var(--color-grey-2);color:#fff}`,o`:host([size=small]) .container{height:24px;padding:0 8px}`,o`:host([type=primary]) .container{border-color:var(--color-teal-a);background:#ecf5ff;color:var(--color-teal-3)}:host([type=primary]) .close:hover{color:#fff;background:var(--color-teal-1)}:host([type=info]) .container{border-color:var(--color-blue-a);background:#ecf5ff;color:var(--color-blue-3)}:host([type=info]) .close:hover{color:#fff;background:var(--color-blue-1)}:host([type=success]) .container{border-color:var(--color-green-a);background:#f0f9eb;color:var(--color-green-3)}:host([type=success]) .close:hover{color:#fff;background:var(--color-green-1)}:host([type=warning]) .container{border-color:var(--color-orange-a);background:#fdf6ec;color:var(--color-orange-3)}:host([type=warning]) .close:hover{color:#fff;background:var(--color-orange-1)}:host([type=danger]) .container{border-color:var(--color-red-a);background:#fef0f0;color:var(--color-red-3)}:host([type=danger]) .close:hover{color:#fff;background:var(--color-red-1)}`];#o(){this.$refs.tag.$animate(!0).then(n=>this.remove()),this.$emit("close")}render(){return r`
-      <main class="container" ref="tag" #animation=${c}>
+      <main class="container" ref="tag" #animation=${a}>
         <slot></slot>
         ${this.closable?r`<span class="close" @click=${this.#o}
               ><wc-icon name="close"></wc-icon
             ></span>`:""}
       </main>
-    `}}a.reg("tag");
+    `}}c.reg("tag");

dist/store.js

@@ -7,6 +7,7 @@ export default createStore({
   powerAppShow: false,
 
   categories: [
+    { name: '全部分类', icon: 'menu', path: '/cate/all' },
     { name: '办公教育', icon: 'client', path: '/cate/work' },
     { name: '游戏娱乐', icon: 'game', path: '/cate/game' },
     { name: '编程软件', icon: 'code', path: '/cate/coding' },

dist/views/home.js

@@ -99,9 +99,24 @@ class Home extends Component {
         }
       }
     `,
-    css``
+    css`
+      .category {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        gap: 8px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid var(--color-plain-1);
+
+        wc-tag {
+          cursor: pointer;
+        }
+      }
+    `
   ]
 
+  #path = '/'
+
   #hide() {
     this.$store.storeAppShow = false
   }
@@ -111,22 +126,42 @@ class Home extends Component {
     watch('$store.storeAppShow', v => {
       this.$animate(!v)
     })
+    watch('$router.path', r => {
+      this.#path = r.path
+      this.$requestUpdate()
+    })
   }
 
   render() {
+    let path = this.#path
+
     return html`
       <main class="container">
         <wc-titlebar
           minimize
-          maximize
           @close=${this.#hide}
           @minimize=${this.#hide}
         ></wc-titlebar>
         <div class="body">
           <wc-aside class="sidebar"></wc-aside>
+
           <div class="content">
             <div class="wrapper">
-              <wc-slider></wc-slider>
+              ${path === '/'
+                ? html`<wc-slider></wc-slider>`
+                : html`
+                    <menu class="category">
+                      ${this.$store.categories.map(
+                        it =>
+                          html`<wc-tag
+                            size="small"
+                            type=${it.path === path ? 'info' : ''}
+                            @click=${ev => this.$router.push({ path: it.path })}
+                            >${it.name}</wc-tag
+                          > `
+                      )}
+                    </menu>
+                  `}
 
               <wc-list :list=${range(10)}></wc-list>
             </div>