From 5f273fce155e943ee9d5076b711c1772da7bbfb7 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 28 Dec 2023 15:48:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=8F=9C=E5=8D=95=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/app.js | 1 + dist/components/app-menu.js | 14 ++++++++++--- dist/lib/ui/views/tag.js | 6 +++--- dist/store.js | 1 + dist/views/home.js | 41 ++++++++++++++++++++++++++++++++++--- 5 files changed, 54 insertions(+), 9 deletions(-) diff --git a/dist/app.js b/dist/app.js index 706854e..71b9ecd 100644 --- a/dist/app.js +++ b/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' diff --git a/dist/components/app-menu.js b/dist/components/app-menu.js index 90ec96b..a0f9e97 100644 --- a/dist/components/app-menu.js +++ b/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` diff --git a/dist/lib/ui/views/tag.js b/dist/lib/ui/views/tag.js index 67fc9c0..0b07da4 100644 --- a/dist/lib/ui/views/tag.js +++ b/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` +
${this.closable?r``:""}
- `}}a.reg("tag"); + `}}c.reg("tag"); diff --git a/dist/store.js b/dist/store.js index 0973088..5be7626 100644 --- a/dist/store.js +++ b/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' }, diff --git a/dist/views/home.js b/dist/views/home.js index 3265421..77d8b20 100644 --- a/dist/views/home.js +++ b/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`
+
- + ${path === '/' + ? html`` + : html` + + ${this.$store.categories.map( + it => + html` this.$router.push({ path: it.path })} + >${it.name} ` + )} + + `}