From 231dbbc8f2ed6d3d11f42e9630bce6681fa27fbb Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 21 Dec 2023 13:59:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/app.js | 6 ++ dist/components/about.js | 1 + dist/components/app-menu.js | 107 ++++++++++++++++++++++++++++++ dist/components/list.js | 77 ++++++++++++++++++++++ dist/lib/ext-icon.js | 15 +++++ dist/store.js | 22 ++++++- dist/views/home.js | 126 +++++++++++------------------------- 7 files changed, 264 insertions(+), 90 deletions(-) create mode 100644 dist/components/app-menu.js create mode 100644 dist/components/list.js create mode 100644 dist/lib/ext-icon.js diff --git a/dist/app.js b/dist/app.js index 8c6dd91..8c7dd9d 100644 --- a/dist/app.js +++ b/dist/app.js @@ -8,6 +8,8 @@ import { createApp } from 'wkitd' import { css, html } from 'wkit' import 'es.shim' + +import Icon from '@ui/base/icon.js' import '@ui/base/button.js' import '@ui/base/link.js' import '@ui/form/input.js' @@ -15,6 +17,8 @@ import '@ui/form/switch.js' import '@ui/modal/layer.js' import '@ui/nav/pager.js' +import extIcons from '/lib/ext-icon.js' + import router from './router.js' import store from './store.js' import fetch from '/lib/fetch.js' @@ -23,6 +27,8 @@ import './components/dock.js' import './components/topbar.js' import './components/about.js' +Icon.extend(extIcons) + const app = createApp({ render() { return html` diff --git a/dist/components/about.js b/dist/components/about.js index 3b467d1..c96744c 100644 --- a/dist/components/about.js +++ b/dist/components/about.js @@ -36,6 +36,7 @@ class About extends Component { 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); } `, css` diff --git a/dist/components/app-menu.js b/dist/components/app-menu.js new file mode 100644 index 0000000..4737a31 --- /dev/null +++ b/dist/components/app-menu.js @@ -0,0 +1,107 @@ +import { html, css, Component } from 'wkit' +import { watch } from 'wkitd' + +class Aside extends Component { + static styles = [ + css` + .searchbar { + padding: 0 16px; + + input { + width: 100%; + height: 30px; + padding: 0 16px; + line-height: 1; + border: 1px solid var(--color-grey-1); + border-radius: 16px; + background: rgba(255, 255, 255, 0.5); + font-size: 12px; + color: inherit; + outline: none; + transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; + + &:focus { + background: rgba(255, 255, 255, 1); + border-color: transparent; + } + + &::placeholder { + color: var(--color-grey-2); + } + } + } + + .category { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 16px; + padding-left: 16px; + list-style: none; + --wc-icon-size: 16px; + + .item { + position: relative; + display: flex; + align-items: center; + height: 36px; + padding: 0 16px; + gap: 4px; + border-radius: 8px 0 0 8px; + list-style: none; + transition: background 0.2s ease-in-out; + + &:hover { + background: rgba(255, 255, 255, 0.5); + } + + &.active { + background: rgba(255, 255, 255, 1); + + &::before, + &::after { + position: absolute; + right: 0; + top: -12px; + width: 12px; + height: 12px; + background: url(/assets/img/round.webp); + content: ''; + } + &::after { + top: unset; + bottom: -12px; + transform: rotate(-90deg); + } + } + } + } + ` + ] + + render() { + return html` + + ` + } +} + +Aside.reg('aside') diff --git a/dist/components/list.js b/dist/components/list.js new file mode 100644 index 0000000..1c4ab62 --- /dev/null +++ b/dist/components/list.js @@ -0,0 +1,77 @@ +import { html, css, Component } from 'wkit' +import { watch } from 'wkitd' + +class List extends Component { + static props = { + list: [] + } + + static styles = [ + css` + .list { + display: flex; + flex-wrap: wrap; + width: 100%; + + .item { + display: flex; + gap: 12px; + width: 50%; + height: 96px; + padding: 16px 16px 16px 0; + + .icon { + display: block; + width: 64px; + height: 64px; + border: 0; + border-radius: 16px; + background: var(--color-red-1); + } + .summary { + flex: 1; + display: flex; + flex-direction: column; + padding: 4px 0; + gap: 8px; + } + + .name { + flex: 2; + width: 128px; + // height: 32px; + border-radius: 6px; + background: var(--color-grey-1); + } + .info { + flex: 3; + // height: 32px; + border-radius: 6px; + background: var(--color-plain-2); + } + } + } + ` + ] + + render() { + return html` + + ` + } +} + +List.reg('list') diff --git a/dist/lib/ext-icon.js b/dist/lib/ext-icon.js new file mode 100644 index 0000000..443ffde --- /dev/null +++ b/dist/lib/ext-icon.js @@ -0,0 +1,15 @@ +export default { + safe: 'M818.3809525 174.5c0 0-51.42857168 0-135-32.14285752-90-32.14285752-144.64285752-67.5-144.64285752-67.5L513.02380914 62 490.52380914 74.85714248c0 0-57.85714248 35.35714248-144.64285751 67.5-86.78571416 28.92857168-135 32.14285752-135 32.14285752L169.09523834 177.71428584l0 443.57142832C169.09523834 785.21428584 474.45238082 962 513.02380914 962c35.35714248 0 343.92857168-176.78571416 343.92857168-340.71428584l0-443.57142832L818.3809525 174.5zM490.52380914 685.57142832l-160.71428584-147.85714248 48.21428584-61.07142832 102.85714248 93.21428584 192.85714248-241.07142833 57.85714248 54.64285753L490.52380914 685.57142832 490.52380914 685.57142832z', + game: 'M355.25597906 362.77666688c-39.69 0-70.56000021 30.87000021-70.56000023 70.56000022s30.87000021 70.56000021 70.56000023 70.55999924 70.56000021-30.87000021 70.5600002-70.55999924-33.07499968-70.56000021-70.5600002-70.5600002z M692.62097904 219.45166699c-130.09500023 63.94499989-216.08999957 57.32999957-350.59500064 0-235.93499957 0-370.43999969 624.01499977-194.03999914 624.01499979 149.94000021 0 169.78500021-183.01499989 372.64499914-183.0149999 165.37500032 0 262.39499989 180.81000043 372.64500011 180.80999947 171.98999969 0-6.61500032-621.81000031-200.65499945-621.80999936z m-337.365 330.74999967c-63.94499989 0-114.66000011-50.71500023-114.6600001-114.6600001s50.71500023-114.66000011 114.6600001-114.6600001 114.66000011 50.71500023 114.66000011 114.6600001-52.91999967 114.66000011-114.66000011 114.6600001z m262.3949999-108.04499976c-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 17.63999957 4.40999989 26.46000031 22.05000043 19.845 39.69-4.40999989 15.43500011-22.05000043 24.25499989-39.69 19.845z m77.17499957 48.50999977c-4.40999989 15.43500011-22.05000043 26.46000031-39.69 19.84499999-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.84499999 15.43500011 6.61500032 26.46000031 24.25499989 19.845 39.69z m4.40999989-74.97000011c-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 17.63999957 4.40999989 26.46000031 22.05000043 19.845 39.69-6.61500032 15.43500011-24.25499989 24.25499989-39.69 19.845z m79.38 52.91999968c-4.40999989 15.43500011-22.05000043 26.46000031-39.69 19.845-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 15.43500011 4.40999989 24.25499989 22.05000043 19.845 39.69z', + music: + 'M885.333333 256H138.666667a53.393333 53.393333 0 0 0-53.333334 53.333333v576a53.393333 53.393333 0 0 0 53.333334 53.333334h746.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V309.333333a53.393333 53.393333 0 0 0-53.333334-53.333333zM624.84 596.42a21.333333 21.333333 0 0 1-26.593333-14.246667C593.333333 566 586.18 552 577.513333 541.8a64.24 64.24 0 0 0-13.333333-12 21.473333 21.473333 0 0 1-2.953333-2.366667q-3.38-3.233333-6.586667-6.813333V725.333333c0 23.626667-12.22 46.34-33.526667 62.32C501.333333 802.493333 475.38 810.666667 448 810.666667s-53.333333-8.173333-73.14-23.013334c-21.333333-16-33.526667-38.666667-33.526667-62.32s12.22-46.34 33.526667-62.32C394.666667 648.173333 420.62 640 448 640c23.333333 0 45.666667 5.946667 64 16.893333V405.333333a21.333333 21.333333 0 0 1 20.773333-21.333333h0.56a21.333333 21.333333 0 0 1 21.333334 20.22c0.74 14.14 3.52 35.473333 12.553333 56.78 5.833333 13.753333 13.546667 25.613333 22.36 34.42a107.46 107.46 0 0 1 20.493333 18.78c12.6 14.853333 22.373333 33.573333 29.04 55.626667a21.333333 21.333333 0 0 1-14.273333 26.593333zM512 725.333333c0 23.126667-29.333333 42.666667-64 42.666667s-64-19.54-64-42.666667 29.333333-42.666667 64-42.666666 64 19.54 64 42.666666zM170.666667 106.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h640a21.333333 21.333333 0 0 1 0 42.666667H192a21.333333 21.333333 0 0 1-21.333333-21.333333z m-42.666667 85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 0 42.666666H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333z', + video: + 'M457.62470703 249.49970703L330.12529297 99.50029297H185.75l127.50029297 149.99941406z m375.00029297 0L705.12470703 99.50029297H560.75029297l127.49941406 149.99941406z m-187.49970703 0L517.625 99.50029297H373.24970703L500.75 249.49970703z m241.875-149.99941406H748.25l127.50029297 149.99941406h67.5V155.75029297c0-31.87529297-24.37558594-56.25-56.25-56.25z m-744.37558594 0h-5.625c-31.87441406 0-56.25 24.37470703-56.25 56.25v93.74941406H270.125L142.62470703 99.50029297z m-61.875 768.74941406c0 31.87529297 24.37558594 56.25 56.25 56.25h750.00058594c31.87441406 0 56.25-24.37470703 56.25-56.25V287H80.74970703v581.24970703zM380.75029297 455.75c0-31.87529297 26.24941406-46.87470703 56.25-46.87470703 9.37441406 0 20.62441406 1.87470703 29.99970703 7.49970703L680.75 540.125c37.50029297 20.62529297 37.50029297 73.125 0 93.75029297l-213.75 123.75c-9.37529297 5.625-18.74970703 7.49970703-29.99970703 7.49970703-30.00058594 0-56.25-15.00029297-56.25-46.87470703V455.75z', + zip: 'M404.85714286 465.61904743A53.57142857 53.57142857 0 0 0 378.04761942 512v160.71428571c0 29.57142857 24 53.57142857 53.57142857 53.57142858h26.80952344v32.76190513a47.61904771 47.61904771 0 0 0 47.61904771 47.61904687h11.90476172a47.61904771 47.61904771 0 0 0 47.61904771-47.61904687V726.28571429h26.80952344c29.52380943 0 53.52380943-24 53.52381027-53.57142858V512c0-19.809524-10.76190485-37.14285687-26.76190514-46.38095257V83.42857143h214.28571429A107.14285714 107.14285714 0 0 1 940.57142857 190.57142857v642.85714286A107.14285714 107.14285714 0 0 1 833.42857143 940.57142857H190.57142857A107.14285714 107.14285714 0 0 1 83.42857143 833.42857143V190.57142857A107.14285714 107.14285714 0 0 1 190.57142857 83.42857143h214.28571429zM592.38095201 512v160.71428571h-26.85714258l0.04761914-32.76190513a47.61904771 47.61904771 0 0 0-47.61904771-47.61904687h-11.90476172a47.61904771 47.61904771 0 0 0-47.61904771 47.61904687v32.76190513h-26.80952344V512h160.71428572z m-26.80952344-107.14285714v53.57142857H512V404.85714286h53.57142857zM512 351.28571429V404.85714286H458.42857143V351.28571429H512zM565.57142857 297.71428571v53.57142858H512V297.71428571h53.57142857zM512 244.14285714V297.71428571H458.42857143V244.14285714H512z m53.57142857-53.57142857v53.57142857H512V190.57142857h53.57142857zM512 137V190.57142857H458.42857143V137H512z', + cut: 'M646.53333302 464.79999969l-165.6-103.59999938a46.00000031 46.00000031 0 0 0-72.39999938 37.99999969v205.2a45.6 45.6 0 0 0 25.59999938 40.00000031 46.8 46.8 0 0 0 20.80000031 4.8 43.99999969 43.99999969 0 0 0 25.99999969-8.4l163.2-102a46.39999969 46.39999969 0 0 0 0-74.00000062z m-173.59999969 106.8V432.00000031l111.19999969 69.99999938z M923.73333302 792.00000031h-63.19999969V265.59999969a100.00000031 100.00000031 0 0 0-100.00000031-99.99999938H237.33333302V102.8a32.4 32.4 0 1 0-64.39999969 0v62.80000031H108.13333333a32.4 32.4 0 1 0 0 66.39999938h62.80000031v523.2a100.00000031 100.00000031 0 0 0 99.99999938 100.00000031H797.33333364v63.19999969a32.4 32.4 0 0 0 64.39999969 0v-63.19999969h63.19999969a32.4 32.4 0 0 0 0-64.39999969zM797.33333364 792.00000031H270.93333302a35.59999969 35.59999969 0 0 1-33.6-36.80000062V231.99999969h523.2a35.59999969 35.59999969 0 0 1 35.60000062 35.60000062z', + net: 'M863.61567382 562.19389618c-66.27919922 55.03886749-153.29487335 104.45756866-255.42685517 141.66694366-98.83740234 36.04658203-194.18642578 54.06987305-278.48891601 55.62026398-1.74418945 0-2.51938446 2.32558594-1.16279297 3.48837891C385.90156219 811.61298798 460.32031219 841.45800812 541.71582001 841.45800812c164.14760712 0 300.00058594-120.34907227 325.00063476-277.51992249 0.19379852-1.74418945-1.74418945-2.90698242-3.10078095-1.74418945zM244.23461944 578.8605957c58.13964844 12.40312469 163.37241211 12.20932617 304.26415985-38.95356445 145.93051758-53.1008786 227.32602539-123.64365265 262.01601593-170.54296844 10.07753876-13.56591766 10.46513672-32.17060516 0.775195-45.93032227C751.7937503 238.35605438 653.34394501 182.54199188 541.71582001 182.54199188 359.7387204 182.54199188 212.2578128 330.02290039 212.2578128 512c0 11.0465332 0.58139648 22.09306641 1.74418945 32.75200165a38.75976593 38.75976593 0 0 0 30.23261719 34.10859405z M939.9724118 283.8987796c-20.34887695-56.20166046-81.78310577-90.50405304-166.47319306-101.9381842-8.72094727-1.16279297-13.17832062 10.2713382-6.00776337 15.31010803 21.70546844 15.50390656 41.66674835 33.33339813 59.88383789 53.29467712 3.48837891 3.87597687 7.94575226 6.97675781 12.59692323 9.30234375 23.06206085 11.24033173 38.95356445 26.1628418 45.34892578 43.79853577 26.74423828 73.25595703-96.89941437 210.65932587-317.05488251 290.69824219s-403.10156219 54.26367157-429.65200196-18.99228546c-7.36435577-20.54267548-3.10078094-45.93032227 11.82172822-73.83735352 2.90698242-5.23256836 4.65117187-11.0465332 5.03876983-17.05429657 1.74418945-25.77524384 6.20156281-50.77529266 12.79072266-75.00014648 2.32558594-8.52714874-8.13955078-14.72871063-14.34111358-8.33335022-63.3722168 65.69780273-91.27924805 135.27158234-69.96137666 193.99262726 42.82954132 117.44208984 264.14780243 141.08554718 504.26455049 53.68227508 239.92294952-87.01567413 394.57441437-247.48110382 351.74487304-364.92319275z', + browser: + 'M917.55636406 378.90909125a426.32727281 426.32727281 0 0 1 21.20727188 133.17818156c0 235.63636406-190.99636406 426.67636406-426.67636313 426.67636313-12.52363594 0-24.91636406-0.52363594-37.17818156-1.57090875l191.7818175-324.65454563c18.72-28.8 29.58545438-63.14181844 29.58545531-100.05818156a183.27272719 183.27272719 0 0 0-57.46909125-133.52727281zM159.85454562 271.30181844l189.68727282 326.4a183.79636406 183.79636406 0 0 0 213.51272718 91.54909031l-141.73090968 239.82545531c-192-41.58545438-335.86909125-212.50909125-335.86909032-416.98909125 0-89.32363594 27.44727281-172.27636406 74.4-240.78545437z m352.58181844 107.60727281a133.57090875 133.57090875 0 0 1 116.68363594 198.67636313l-1.13454563 1.65818156-3.53454562 6.10909125a133.52727281 133.52727281 0 0 1-226.99636313-4.93090875l-0.52363687-1.1781825-2.44363594-4.1018175a133.57090875 133.57090875 0 0 1 117.99272719-196.27636406z m-0.34909125-293.45454563a426.72 426.72 0 0 1 385.30909125 243.18545438h-384.91636406a183.88363594 183.88363594 0 0 0-178.95272719 141.55636406L193.23636406 228.58181844a425.62909125 425.62909125 0 0 1 318.85090875-143.12727281z', + im: 'M861.81406249 823.23000001H164.13828124A84.65132813 84.65132813 0 0 1 79.53124999 738.53437501V336.40734376c0-46.73320313 37.918125-84.65132813 84.65132813-84.65132813H861.81406249c46.73320313 0 84.60703125 37.918125 84.60703125 84.65132813v402.12703125a84.65132813 84.65132813 0 0 1-84.60703125 84.695625zM164.13828124 319.48593751a16.92140625 16.92140625 0 0 0-16.92140625 16.92140625v402.12703125c0 9.3909375 7.57476563 16.96570313 16.92140625 16.96570313H861.81406249a16.92140625 16.92140625 0 0 0 16.92140625-16.96570313V336.40734376a16.92140625 16.92140625 0 0 0-16.92140625-16.92140625H164.13828124z M609.49906249 720.77132814H316.56382812a33.8428125 33.8428125 0 1 1 0-67.72992188h292.93523437a33.8428125 33.8428125 0 1 1 0 67.72992188zM214.99109374 653.04140626a33.8428125 33.8428125 0 1 0 33.8428125 33.88710938 33.8428125 33.8428125 0 0 0-33.8428125-33.88710938zM413.08671874 353.32875001a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.88710937 33.8428125 33.8428125 0 0 0-33.88710937-33.88710937z m99.09210937 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937zM214.99109374 454.94578126a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.8428125 33.8428125 33.8428125 0 0 0-33.88710938-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.8428125 33.8428125 33.8428125 0 0 0-33.88710938-33.8428125z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.8428125 33.8428125 33.8428125 0 0 0-33.88710937-33.8428125z m99.09210937 0a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m0 198.095625a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m-496.125-96.52289063a33.8428125 33.8428125 0 1 0 33.8428125 33.88710938 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 1e-8a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.88710937 33.8428125 33.8428125 0 0 0-33.88710937-33.88710937z m298.029375 96.56718749a33.8428125 33.8428125 0 1 0 33.8428125 33.84281251 33.8428125 33.8428125 0 0 0-33.8428125-33.88710938z M759.35539062 624.24843751h-148.17304688a33.8428125 33.8428125 0 1 1 0-67.72992187h148.17304688a16.92140625 16.92140625 0 0 0 16.92140625-16.92140625v-50.80851563a33.8428125 33.8428125 0 1 1 67.77421875 0v50.80851563a84.65132813 84.65132813 0 0 1-84.695625 84.65132812zM314.88054687 421.05867188H214.99109374a33.8428125 33.8428125 0 1 1 0-67.72992187h99.88945313a33.8428125 33.8428125 0 1 1 0 67.77421875z m198.9815625-105.82523437A33.8428125 33.8428125 0 0 1 479.97499999 281.39062501V200.10585939c0-46.73320313 37.918125-84.65132813 84.65132813-84.65132813h47.39765625a16.92140625 16.92140625 0 0 0 16.96570312-16.92140625v-31.3621875a33.8428125 33.8428125 0 1 1 67.72992188 0v31.3621875a84.65132813 84.65132813 0 0 1-84.65132813 84.60703125h-47.39765625a16.92140625 16.92140625 0 0 0-16.96570312 16.96570313V281.39062501a33.8428125 33.8428125 0 0 1-33.8428125 33.8428125z', + code: 'M793.68489309 258.48359597c14.08424494-7.04212205 21.126367-14.08424494 31.68955051-14.08424494 17.60530556 0 28.16848906 10.56318349 31.68955049 17.60530638 7.04212205 10.56318349 31.68955051 17.60530556 42.25273402 17.60530557 7.04212205 0 17.60530556-24.64742845 24.64742844-45.77379546s7.04212205-45.77379545 3.52106145-49.29485606c-3.52106145-3.52106145-31.68955051-10.56318349-38.73167338-10.56318351-3.52106145 3.52106145-10.56318349 7.04212205-24.64742763 7.04212206s-28.16848906-10.56318349-38.73167339-21.126367c-17.60530556-17.60530556-38.73167257-24.64742845-59.85803957-31.68955051-21.126367-7.04212205-45.77379545-7.04212205-66.90016245-7.04212205-31.68955051-3.52106145-66.90016246-3.52106145-98.58971213 7.04212205-14.08424494 3.52106145-24.64742845 7.04212205-38.73167338 14.08424495-3.52106145 3.52106145-14.08424494 7.04212205-17.60530556 7.04212206-3.52106145 3.52106145-3.52106145 7.04212205 0 7.04212289s17.60530556-3.52106145 17.60530556-3.52106145-17.60530556 7.04212205-17.60530556 14.08424496c0 3.52106145 3.52106145 3.52106145 3.52106145 3.5210606s10.56318349-3.52106145 17.60530554-3.5210606c14.08424494 0 35.21061196-7.04212205 52.81591752-7.0421229 21.126367 0 42.252734 7.04212205 63.379101 28.16848989 31.68955051 38.73167257 28.16848906 88.02652945 28.16848907 98.58971212-7.04212205 73.9422845-172.53199747 524.63811362-179.57411953 556.32766497-7.04212205 31.68955051-7.04212205 49.29485607 31.68955051 59.85803956s52.8159175 0 59.85804038-14.08424495c3.52106145-24.64742845 109.15289645-580.97509257 172.53199664-630.26994863z m-137.32138551-35.21061195L89.47265996 311.29951347 181.02025001 899.31672811l302.81126093-49.29485606c-3.52106145-24.64742845 77.46334596-235.91109848 91.54759006-274.64277105l-154.92669107 24.64742845 21.126367-63.379101 109.15289564-17.6053064 28.16848989 35.21061195s7.04212205-17.60530556 7.04212204-24.64742844L434.53665404 342.98906398c-7.04212205-10.56318349-7.04212205-24.64742845 3.52106146-31.68955051l7.04212204-7.04212206c10.56318349-7.04212205 24.64742845-7.04212205 31.68955052 3.52106062l133.80032489 154.9266919c28.16848906-84.50546801 52.8159175-158.44775252 52.81591751-183.09518095 3.52106145-7.04212205 3.52106145-31.68955051-7.04212288-56.33697896z m-422.52734006 348.58505555l95.06865151-17.60530557-24.64742762 63.37910102-63.379101 10.5631835-7.04212289-56.33697895z m204.22154798-179.57411953l10.5631835 3.52106144c14.08424494 3.52106145 17.60530556 17.60530556 14.08424493 31.68955051l-105.63183501 281.6848931L293.69420791 793.68489309l7.04212207-105.63183502 105.631835-281.68489309c3.52106145-14.08424494 17.60530556-17.60530556 31.68955052-14.08424494z m380.27460604-98.58971213c-14.08424494 14.08424494-31.68955051 59.85803957-66.90016245 193.65836364h3.52106144l10.5631835 56.33697896-28.16848905 3.52106145c-3.52106145 17.60530556-7.04212205 35.21061196-14.08424496 56.33697811 59.85803957 31.68955051 28.16848906 109.15289645 24.64742846 109.15289646-3.52106145 0-3.52106145 0-3.52106146-3.52106144s3.52106145-14.08424494-7.04212204-17.60530557c-7.04212205-3.52106145-21.126367-7.04212205-31.68955051-14.08424495-10.56318349 42.252734-21.126367 91.54759007-31.68955051 144.36350841l221.82685354-35.21061194-73.94228452-496.46962456-3.52106144 3.52106143z' +} diff --git a/dist/store.js b/dist/store.js index 1b58ea2..0973088 100644 --- a/dist/store.js +++ b/dist/store.js @@ -4,5 +4,25 @@ export default createStore({ user: {}, aboutAppShow: false, storeAppShow: true, - powerAppShow: false + powerAppShow: false, + + categories: [ + { name: '办公教育', icon: 'client', path: '/cate/work' }, + { name: '游戏娱乐', icon: 'game', path: '/cate/game' }, + { name: '编程软件', icon: 'code', path: '/cate/coding' }, + { name: '聊天社交', icon: 'talk', path: '/cate/social' }, + { name: '输入法', icon: 'im', path: '/cate/input-method' }, + { name: '浏览器', icon: 'browser', path: '/cate/browser' }, + { name: '网络工具', icon: 'net', path: '/cate/network' }, + { name: '下载工具', icon: 'download', path: '/cate/download' }, + { name: '视频直播', icon: 'video', path: '/cate/video' }, + { name: '音乐软件', icon: 'music', path: '/cate/music' }, + { name: '图形图像', icon: 'image', path: '/cate/image' }, + { name: '安全防护', icon: 'safe', path: '/cate/safe' }, + { name: '解压记录', icon: 'zip', path: '/cate/zip' }, + { name: '系统工具', icon: 'setting', path: '/cate/system' }, + { name: '股票网银', icon: 'chart', path: '/cate/stock' }, + { name: '剪辑工具', icon: 'cut', path: '/cate/cut' }, + { name: '桌面美化', icon: 'color', path: '/cate/theme' } + ] }) diff --git a/dist/views/home.js b/dist/views/home.js index 61ae763..3265421 100644 --- a/dist/views/home.js +++ b/dist/views/home.js @@ -4,11 +4,13 @@ * @date 2023/12/19 16:53:27 */ -import { html, css, Component } from 'wkit' +import { html, css, Component, range } from 'wkit' import { watch } from 'wkitd' import '../components/titlebar.js' +import '../components/app-menu.js' import '../components/slider.js' +import '../components/list.js' class Home extends Component { static animation = { type: 'scale', immediate: true } @@ -45,6 +47,8 @@ class Home extends Component { ); } + ul, + menu, li { list-style: none; } @@ -53,6 +57,7 @@ class Home extends Component { .body { flex: 1; display: flex; + height: calc(100% - 48px); line-height: 1.5; } .sidebar { @@ -66,84 +71,35 @@ class Home extends Component { .content { flex: 1; height: 100%; - padding: 0 32px 32px; + padding: 0 8px 8px 0; border-radius: 0 0 8px 0; background: #fff; } + .wrapper { + overflow: hidden auto; + height: 100%; + padding: 0 32px 32px; + + &::-webkit-scrollbar { + width: 3px; + height: 3px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #c6c7ca; + border-radius: 10px; + } + &::-webkit-scrollbar-thumb:hover { + background-color: #a1a1a1; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + } `, - - css` - .searchbar { - padding: 0 16px; - - input { - width: 100%; - height: 30px; - padding: 0 16px; - line-height: 1; - border: 1px solid var(--color-grey-1); - border-radius: 16px; - background: rgba(255, 255, 255, 0.5); - font-size: 12px; - color: inherit; - outline: none; - transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; - - &:focus { - background: rgba(255, 255, 255, 1); - border-color: transparent; - } - - &::placeholder { - color: var(--color-grey-2); - } - } - } - - .category { - display: flex; - flex-direction: column; - gap: 6px; - margin-top: 16px; - padding-left: 16px; - --wc-icon-size: 16px; - - .item { - position: relative; - display: flex; - align-items: center; - height: 36px; - padding: 0 16px; - gap: 4px; - border-radius: 8px 0 0 8px; - transition: background 0.2s ease-in-out; - - &:hover { - background: rgba(255, 255, 255, 0.5); - } - - &.active { - background: rgba(255, 255, 255, 1); - - &::before, - &::after { - position: absolute; - right: 0; - top: -12px; - width: 12px; - height: 12px; - background: url(/assets/img/round.webp); - content: ''; - } - &::after { - top: unset; - bottom: -12px; - transform: rotate(-90deg); - } - } - } - } - ` + css`` ] #hide() { @@ -167,21 +123,13 @@ class Home extends Component { @minimize=${this.#hide} >
- +
- +
+ + + +