feat(site): support mobile

DevCloudFE · Dec 5, 2021 · 0d62159 · 0d62159
1 parent 8e02f20
commit 0d62159
Show file tree

Hide file tree

Showing 42 changed files with 982 additions and 844 deletions.
diff --git a/.github/workflows/build-site.yml b/.github/workflows/build-site.yml
@@ -16,10 +16,13 @@ jobs:
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn nx build site --configuration=production
-      - run: cp ./dist/packages/site/index.html ./dist/packages/site/200.html
-      - uses: dswistowski/surge-sh-action@v1
+      - uses: garygrossgarten/github-action-scp@release
         with:
-          domain: 'react-devui.surge.sh'
-          project: './dist/packages/site'
-          login: ${{ secrets.SURGE_LOGIN }}
-          token: ${{ secrets.SURGE_TOKEN }}
+          local: './dist/packages/site'
+          remote: '/var/www/html'
+          host: ${{ secrets.SSH_HOST }}
+          port: ${{ secrets.SSH_PORT }}
+          username: ${{ secrets.SSH_USER }}
+          password: ${{ secrets.SSH_PASSWORD }}
+          rmRemote: true
+          dotfiles: true
diff --git a/.gitignore b/.gitignore
@@ -5,8 +5,6 @@
 /tmp
 /out-tsc
 /tools-dist
-packages/site/src/app/configs
-packages/site/src/app/routes
 
 # dependencies
 /node_modules

diff --git a/packages/site/.eslintrc.json b/packages/site/.eslintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "src/app/routes/components/**"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

diff --git a/packages/site/.gitignore b/packages/site/.gitignore
@@ -0,0 +1,6 @@
+src/app/configs/*
+!src/app/configs/icons.json
+
+src/app/i18n/resources.json
+
+src/app/routes/components/
diff --git a/packages/site/project.json b/packages/site/project.json
@@ -21,7 +21,7 @@
         "main": "packages/site/src/main.tsx",
         "polyfills": "packages/site/src/polyfills.ts",
         "tsConfig": "packages/site/tsconfig.app.json",
-        "assets": ["packages/site/src/favicon.ico", "packages/site/src/assets"],
+        "assets": ["packages/site/src/assets"],
         "styles": ["packages/site/src/styles.scss"],
         "scripts": [],
         "webpackConfig": "@nrwl/react/plugins/webpack"

diff --git a/packages/site/src/app/App.tsx b/packages/site/src/app/App.tsx
@@ -6,16 +6,24 @@ import { useAsync, useImmer } from '@react-devui/ui/hooks';
 
 import { environment } from '../environments/environment';
 import { AppHeader, AppSidebar } from './components';
-import icons from './icons.json';
+import icons from './configs/icons.json';
 import { AppRoutes } from './routes/Routes';
 
-export type AppContextData = { onMount: () => void } | null;
-export const AppContext = React.createContext<AppContextData>(null);
+export interface AppContextData {
+  menuOpen: boolean;
+  pageMounted: boolean;
+  onMount: () => void;
+  onMenuOpenChange: (open: boolean) => void;
+}
+export const AppContext = React.createContext<AppContextData | null>(null);
 
 export function App() {
   const { i18n } = useTranslation();
   const asyncCapture = useAsync();
 
+  const [menuOpen, setMenuOpen] = useImmer(false);
+  const [pageMounted, setPageMounted] = useImmer(false);
+
   const [mainEl, setMainEl] = useImmer<HTMLElement | null>(null);
   const mainRef = useCallback(
     (node) => {
@@ -46,9 +54,12 @@ export function App() {
     }
   }, [asyncCapture, mainEl]);
 
-  const contextValue = useMemo(
+  const contextValue = useMemo<AppContextData>(
     () => ({
+      menuOpen,
+      pageMounted,
       onMount: () => {
+        setPageMounted(true);
         if (mainEl) {
           if (window.location.hash) {
             const hash = window.location.hash;
@@ -59,8 +70,11 @@ export function App() {
           }
         }
       },
+      onMenuOpenChange: (open) => {
+        setMenuOpen(open);
+      },
     }),
-    [mainEl]
+    [mainEl, menuOpen, pageMounted, setMenuOpen, setPageMounted]
   );
 
   return (
@@ -71,7 +85,7 @@ export function App() {
             <AppHeader />
             <AppSidebar />
             <main ref={mainRef} className="app-main">
-              <AppRoutes></AppRoutes>
+              <AppRoutes />
             </main>
           </DIconContext.Provider>
         </DConfigContext.Provider>

diff --git a/packages/site/src/app/components/header/Header.scss b/packages/site/src/app/components/header/Header.scss
@@ -1,5 +1,63 @@
 @import '~rfs/scss';
 
+.hamburger {
+  position: relative;
+
+  width: 28px;
+  height: 22px;
+
+  cursor: pointer;
+
+  .line {
+    position: absolute;
+    left: 0;
+
+    display: block;
+    width: 28px;
+    height: 2px;
+    border-radius: 2px;
+
+    background-color: var(--d-text-color);
+    transform-origin: center center;
+
+    transition: all 0.3s ease-in-out;
+
+    &:nth-child(1) {
+      top: 2px;
+    }
+
+    &:nth-child(2) {
+      top: 10px;
+    }
+
+    &:nth-child(3) {
+      top: 18px;
+    }
+  }
+
+  &.is-active {
+    .line {
+      background-color: var(--d-color-primary-lighter);
+    }
+
+    .line:nth-child(1) {
+      top: 10px;
+
+      transform: rotate(45deg);
+    }
+
+    .line:nth-child(2) {
+      opacity: 0;
+    }
+
+    .line:nth-child(3) {
+      top: 10px;
+
+      transform: rotate(-45deg);
+    }
+  }
+}
+
 .app-header {
   position: relative;
   z-index: 910;
@@ -8,16 +66,23 @@
   align-items: center;
   width: 100%;
   height: 64px;
-  padding: 0;
+  padding: 0 20px;
 
   background-color: var(--d-background-color);
 
   &.is-shadow {
     box-shadow: 0 2px 8px 0 var(--d-shadow-color);
   }
 
-  .app-header__logo {
-    margin-left: 28px;
+  .app-header__menu-button {
+    margin-right: auto;
+    padding: 4px;
+  }
+
+  .app-header__logo-container {
+    display: none;
+    align-items: center;
+    margin-right: auto;
   }
 
   .app-header__title {
@@ -26,4 +91,36 @@
     font-weight: bold;
     @include font-size(1.5rem);
   }
+
+  .app-header__github {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin-left: 12px;
+    padding: 0;
+    border: 1px solid var(--d-color-step-150);
+    border-radius: 8px;
+  }
+
+  .app-header__github-icon {
+    width: 20px;
+    height: 20px;
+
+    /* stylelint-disable-next-line */
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  @media (min-width: 768px) {
+    .app-header__menu-button {
+      display: none;
+    }
+
+    .app-header__logo-container {
+      display: inline-flex;
+    }
+  }
 }
diff --git a/packages/site/src/app/components/header/Header.tsx b/packages/site/src/app/components/header/Header.tsx
@@ -1,11 +1,18 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { DButton } from '@react-devui/ui';
+import { useCustomContext } from '@react-devui/ui/hooks';
+import { getClassName } from '@react-devui/ui/utils';
+
+import { AppContext } from '../../App';
 import './Header.scss';
 
 export function AppHeader() {
   const { i18n } = useTranslation();
 
+  const [{ menuOpen = false, onMenuOpenChange }] = useCustomContext(AppContext);
+
   const changeLanguage = useCallback(() => {
     if (i18n.language === 'en-US') {
       document.body.classList.add('CJK');
@@ -18,9 +25,30 @@ export function AppHeader() {
 
   return (
     <header className="app-header is-shadow">
-      <img className="app-header__logo" src="/assets/logo.svg" alt="Logo" width="36" height="36" />
-      <span className="app-header__title">DevUI</span>
-      <span onClick={changeLanguage}>{i18n.language}</span>
+      <DButton className="app-header__menu-button" dType="text" onClick={() => onMenuOpenChange?.(!menuOpen)}>
+        <div
+          className={getClassName('hamburger', {
+            'is-active': menuOpen,
+          })}
+        >
+          <span className="line"></span>
+          <span className="line"></span>
+          <span className="line"></span>
+        </div>
+      </DButton>
+      <div className="app-header__logo-container">
+        <img className="app-header__logo" src="/assets/logo.svg" alt="Logo" width="36" height="36" />
+        <span className="app-header__title">DevUI</span>
+      </div>
+
+      <DButton className="app-header__language" dType="secondary" onClick={changeLanguage}>
+        {i18n.language === 'en-US' ? '中 文' : 'English'}
+      </DButton>
+      <a href="//github.com/xiejay97/react-devui" target="_blank" rel="noreferrer">
+        <DButton className="app-header__github" dType="text">
+          <span className="app-header__github-icon"></span>
+        </DButton>
+      </a>
     </header>
   );
 }
diff --git a/packages/site/src/app/components/route/DemoBox.scss b/packages/site/src/app/components/route/DemoBox.scss
@@ -15,6 +15,7 @@
 
   .app-demo-box__renderer {
     padding: 42px 24px;
+    overflow-x: auto;
   }
 
   .app-demo-box__info {

diff --git a/packages/site/src/app/components/route/RouteArticle.scss b/packages/site/src/app/components/route/RouteArticle.scss
@@ -1,19 +1,73 @@
 @import '~rfs/scss';
 
-.app-route-anchor {
+.app-route-anchor-md {
   position: fixed;
   top: 120px;
   right: 20px;
   z-index: 910;
 
+  display: none;
+
   width: 168px;
 
   .d-anchor-link > a {
     padding: 4px 0;
   }
+
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
+
+.app-route-anchor-conatiner {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 909;
+
+  width: 100%;
+  height: calc(100% - 64px);
+  padding: 20px;
+  overflow: auto;
+
+  background-color: var(--d-background-color);
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.app-route__anchor-button {
+  position: fixed;
+  right: 20px;
+  bottom: 44px;
+  z-index: 910;
+
+  display: flex;
+  flex-direction: column;
+  gap: 2px 0;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border: 1px solid var(--d-divider-color);
+  border-radius: 50%;
+
+  color: var(--d-color-primary-lighter);
+
+  background-color: var(--d-color-step-800);
+  box-shadow: 0 2px 20px 2px var(--d-shadow-color);
+
+  @media (min-width: 768px) {
+    display: none;
+  }
 }
 
 .app-route-article {
+  code {
+    word-break: break-all;
+  }
+
   pre > code {
     font-family: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   }