feat(omi-elements): cross screen adaptation

Tencent · Nov 6, 2023 · 887a814 · 887a814
1 parent 7d3ae10
commit 887a814
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 58 deletions.
diff --git a/packages/omi-elements/package-lock.json b/packages/omi-elements/package-lock.json
diff --git a/packages/omi-elements/package.json b/packages/omi-elements/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
-    "omi": "^7.3.4",
+    "omi": "^7.3.5",
     "omi-router": "^4.0.3",
     "omi-suspense": "^0.0.3",
     "prismjs": "^1.29.0"

diff --git a/packages/omi-elements/src/components/side-nav.tsx b/packages/omi-elements/src/components/side-nav.tsx
@@ -1,6 +1,7 @@
 import { tag, Component, classNames, bind, signal } from 'omi'
 // import css from '../app.css?raw'
 import { tailwind } from '@/tailwind'
+import { Router } from 'omi-router'
 
 export const menuShow = signal(window.innerWidth > 1024)
 
@@ -14,6 +15,12 @@ window.addEventListener('click', () => {
   }
 })
 
+window.addEventListener('touchstart', () => {
+  if (window.innerWidth < 1024) {
+    menuShow.value = false
+  }
+})
+
 @tag('side-nav')
 export class SideNav extends Component {
   static css = [tailwind]
@@ -22,6 +29,15 @@ export class SideNav extends Component {
     active: 'Components',
   }
 
+  router: Router | null = null
+
+  @bind
+  goBackHome(evt: MouseEvent) {
+    evt.preventDefault()
+    this.router?.push('/')
+    menuShow.value = false
+  }
+
   @bind
   toggle(evt: MouseEvent) {
     if (this.state.active === (evt.currentTarget as HTMLElement)?.dataset?.type) {
@@ -37,12 +53,13 @@ export class SideNav extends Component {
   render() {
     return (
       <nav
+        onTouchStart={(evt) => evt.stopPropagation()}
         style={{
           transition: 'all 0.3s linear 0s',
           transform: menuShow.value ? 'translateX(0)' : 'translateX(-100%)',
         }}
         id="sidenav-main"
-        class="fixed left-0 top-0 z-[1036] h-screen w-60 -translate-x-full bg-white shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] dark:bg-neutral-800 lg:data-[te-sidenav-hidden='false']:translate-x-0 sidenav-primary perfect-scrollbar ps--active-y group/ps [overflow-anchor:none] touch-none overflow-auto"
+        class="fixed left-0 top-0 z-[1036] h-screen w-60 -translate-x-full bg-white shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] dark:bg-neutral-800 lg:data-[te-sidenav-hidden='false']:translate-x-0 sidenav-primary perfect-scrollbar ps--active-y group/ps [overflow-anchor:none] overflow-auto"
         data-te-sidenav-init=""
         data-te-sidenav-mode-breakpoint-over="0"
         data-te-sidenav-mode-breakpoint-side="xl"
@@ -52,7 +69,8 @@ export class SideNav extends Component {
         data-te-sidenav-accordion="true"
       >
         <a
-          href="#/"
+          href="javascript:void(0)"
+          onClick={this.goBackHome}
           class=" flex items-center justify-center rounded-md py-6 pr-3 text-lg font-medium outline-none dark:text-neutral-100"
           aria-current="page"
         >

diff --git a/packages/omi-elements/src/routes.tsx b/packages/omi-elements/src/routes.tsx
@@ -17,18 +17,17 @@ declare global {
 export const routes = [
   {
     path: '/',
-    transition: 'fade',
     meta: {},
     render() {
       return (
         <>
           <site-header></site-header>
           <div class="flex">
-            <side-nav class="block w-0 lg:w-60" onClick={(evt: MouseEvent) => evt.stopPropagation()}></side-nav>
+            <side-nav class="block" onClick={(evt: MouseEvent) => evt.stopPropagation()}></side-nav>
             <o-suspense
               imports={[import('./demo/HomePage')]}
               onDataLoaded={window.refreshDark}
-              class="flex-1 ml-10 mr-10 w-0"
+              class="flex-1 ml-10 mr-10 lg:pl-60"
             >
               <home-page />
             </o-suspense>
@@ -270,14 +269,14 @@ components.forEach((component: { type?: string; name?: string; page?: string; de
         <>
           <site-header></site-header>
           <div class="flex">
-            <side-nav class="block w-0 lg:w-60" onClick={(evt: MouseEvent) => evt.stopPropagation()}></side-nav>
+            <side-nav class="block" onClick={(evt: MouseEvent) => evt.stopPropagation()}></side-nav>
             <o-suspense
               minLoadingTime={500}
               imports={[component.dep()]}
               onDataLoaded={window.refreshDark}
               class="flex-1 ml-10 mr-10 w-0"
             >
-              <div slot="pending" class="absolute top-20">
+              <div slot="pending" class="absolute top-20 lg:left-72">
                 <div>
                   <strong>Loading...</strong>
                   <div
@@ -300,7 +299,7 @@ components.forEach((component: { type?: string; name?: string; page?: string; de
                   onInstalled={(evt: CustomEvent) => {
                     updateMenu(evt.detail)
                   }}
-                  class="flex-grow overflow-auto pr-0 lg:pr-40"
+                  class="flex-grow overflow-auto pr-0 lg:pr-40 lg:pl-60"
                 />
               </div>
               <content-nav