diff --git a/src/sites/assets/locale/uselocale.ts b/src/sites/assets/locale/uselocale.ts index 58b98092d0091b8f8c8a5b783fa0d9c6664a814a..55afa52bef60883e3746b56cb822d46a016fbcfa 100644 --- a/src/sites/assets/locale/uselocale.ts +++ b/src/sites/assets/locale/uselocale.ts @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react' import config from '@/sites/config/env' -const getLocale = () => { - let locale = '' +export const getLocale = () => { + let locale = 'zh-CN' const matched = window.parent.location.href.match(/#\/([a-z-]+)/i) if (matched) { ;[, locale] = matched - if (config.locales.indexOf(locale) === -1) locale = '' + if (config.locales.indexOf(locale) === -1) locale = 'zh-CN' } return locale } diff --git a/src/sites/assets/styles/md-style.scss b/src/sites/assets/styles/md-style.scss index b5e88124878b2a4bceaaa5feb2dabed2880aa3e7..7060aa862c0844ea15f1eb2c92a412a008201607 100644 --- a/src/sites/assets/styles/md-style.scss +++ b/src/sites/assets/styles/md-style.scss @@ -3,8 +3,8 @@ .doc-content-document { position: relative; background: #fff; - padding-top: 48px; - padding-bottom: 48px; + padding-top: 40px; + padding-bottom: 40px; padding-left: 40px; padding-right: 445px; .card { @@ -44,6 +44,12 @@ } } + &.isComponent { + h1 { + display: none; + } + } + h1 { margin: 0 0 30px; font-size: 30px; @@ -51,6 +57,7 @@ font-weight: bold; position: relative; margin-bottom: 56px; + // display: none; &:after { content: ''; position: absolute; diff --git a/src/sites/doc/App.scss b/src/sites/doc/App.scss index 8860afd089c037ac654a8c01a1069cd5df9e27da..add324a7a507806b9fb2f1a305a2f0ee92d4ece5 100644 --- a/src/sites/doc/App.scss +++ b/src/sites/doc/App.scss @@ -2,16 +2,55 @@ background: $doc-default-color; color: #fff; } + +$doc-title-height: 137px; + #doc { background: #fff; height: 100%; width: 100%; display: flex; flex-direction: column; - padding-top: $doc-header-height; + //padding-top: $doc-header-height; } .doc { + &-title { + width: 100%; + height: $doc-title-height; + z-index: 2; + &-position { + top: 0px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 40px; + // line-height: 56px; + border-bottom: 1px solid #eee; + background: #fff; + visibility: visible; + opacity: 1; + // transition: opacity 0.8s linear, visibility 0.8s linear; + transition: opacity 0.8s; + &.fixed { + width: calc(100% - 290px); + position: fixed; + padding: 24px 48px; + .title { + font-size: 24px; + font-weight: bold; + } + } + &.hidden { + visibility: hidden; + opacity: 0; + } + .title { + font-size: 40px; + font-weight: bold; + } + } + } &-content { margin-left: 290px; display: flex; @@ -19,6 +58,9 @@ &-document { min-height: 800px; + .markdown-body { + min-height: 600px; + } } &-tabs { position: absolute; diff --git a/src/sites/doc/App.tsx b/src/sites/doc/App.tsx index 9641c23a64bb33143e292fc9daa1a7e9bd169e7f..1f0087ec2293868d9c17f4437dfb5cf66a6c8d4c 100644 --- a/src/sites/doc/App.tsx +++ b/src/sites/doc/App.tsx @@ -1,6 +1,13 @@ import React, { useEffect, useState } from 'react' -import { HashRouter, Switch, Route, Redirect } from 'react-router-dom' +import { + HashRouter, + Switch, + Route, + Redirect, + useLocation, +} from 'react-router-dom' import './App.scss' +import { nav } from '@/config.json' import useLocale from '../assets/locale/uselocale' import remarkGfm from 'remark-gfm' import { routers, raws } from './docs' @@ -11,6 +18,7 @@ import remarkDirective from 'remark-directive' import Header from '@/sites/doc/components/header' import Demoblock from '@/sites/doc/components/demoblock' import DemoPreview from '@/sites/doc/components/demo-preview' +import Issue from '@/sites/doc/components/issue' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' function myRemarkPlugin() { @@ -30,9 +38,39 @@ function myRemarkPlugin() { } } +const Title = () => { + let location = useLocation() + + const getComponentName = () => { + const s = window.location.hash.split('/') + const cname = s[s.length - 1].toLowerCase() + const component: any = {} + nav.forEach((item: any) => { + item.packages.forEach((sItem: any) => { + if (sItem.name.toLowerCase() == cname) { + component.name = sItem.name + component.cName = sItem.cName + return + } + }) + }) + return component + } + useEffect(() => { + const componentName = getComponentName() + setComponentName(componentName) + }, [location]) + const [componentName, setComponentName] = useState({ name: '', cName: '' }) + return ( +
+ {componentName.name} {componentName.cName} +
+ ) +} + const App = () => { const [lang] = useLocale() - console.log('doc app') + const getMarkdownByLang = (ru: string) => { if (lang === 'zh-CN' || lang === '') { // @ts-ignore @@ -42,28 +80,69 @@ const App = () => { return raws[`${ru}${lang.replace('-', '')}`] } } + // useEffect(() => {}, [lang]) + + const [fixed, setFixed] = useState(false) + const [hidden, setHidden] = useState(false) + + const scrollTitle = () => { + let top = document.documentElement.scrollTop + // console.log('state.hidden', state.hidden) + if (top > 127) { + setFixed(true) + if (top < 142) { + setHidden(true) + } else { + setHidden(false) + } + } else { + setFixed(false) + setHidden(false) + } + } + useEffect(() => { - console.log('sssssss') - }, [lang]) + document.addEventListener('scroll', scrollTitle) + }, []) + return (
-
+
+ +
+
{routers.map((ru, k) => { return ( - + + {
- +
diff --git a/src/sites/doc/components/demo-preview/demo-preview.scss b/src/sites/doc/components/demo-preview/demo-preview.scss index 22874fd06b36cb3dbf0db6bfbc149b8dc68263a0..b6533c600f999d05c511866dca420cd550b005d7 100644 --- a/src/sites/doc/components/demo-preview/demo-preview.scss +++ b/src/sites/doc/components/demo-preview/demo-preview.scss @@ -2,13 +2,13 @@ &-demo-preview { height: 667px; width: 375px; - position: fixed; + position: absolute; right: 30px; - top: 100px; + top: 240px; + -webkit-box-shadow: #ebedf0 0 4px 12px; box-shadow: #ebedf0 0 4px 12px; border-radius: 12px; overflow: hidden; - iframe { height: 100%; width: 100%; diff --git a/src/sites/doc/components/demo-preview/demo-preview.tsx b/src/sites/doc/components/demo-preview/demo-preview.tsx index 99957e07ecc1b64ebf7b40652ab464d5e77b4ec7..c719430039709b4f839a73a2fe8fec2e43f11268 100644 --- a/src/sites/doc/components/demo-preview/demo-preview.tsx +++ b/src/sites/doc/components/demo-preview/demo-preview.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import './demo-preview.scss' import { useHistory, useLocation } from 'react-router-dom' -const DemoPreview = () => { +const DemoPreview = (props: any) => { const history = useHistory() const location = useLocation() const [URL, setURL] = useState(history.location.pathname) @@ -12,7 +12,7 @@ const DemoPreview = () => { }, [location]) return ( -
+
) diff --git a/src/sites/doc/components/header/header.scss b/src/sites/doc/components/header/header.scss index bf97d0d65c3a9d0d91fddf6f0e5f29a7dedc1adb..a090f32d67d360fce7133d734264c21074918801 100644 --- a/src/sites/doc/components/header/header.scss +++ b/src/sites/doc/components/header/header.scss @@ -1,6 +1,6 @@ .doc { &-header { - position: fixed; + //position: fixed; z-index: 2; top: 0; left: 0; @@ -163,7 +163,8 @@ .header { &-logo { .logo-link { - background: url('../../assets/images/logo-header-white.png') no-repeat center/100%; + background: url('../../assets/images/logo-header-white.png') no-repeat + center/100%; } .logo-border { background: $theme-red-border; @@ -241,7 +242,8 @@ .header { &-logo { .logo-link { - background: url('../../assets/images/logo-header-red.png') no-repeat center/100%; + background: url('../../assets/images/logo-header-red.png') no-repeat + center/100%; } .logo-border { background: $theme-white-border; @@ -319,7 +321,8 @@ .header { &-logo { .logo-link { - background: url('../../assets/images/logo-header-red.png') no-repeat center/100%; + background: url('../../assets/images/logo-header-red.png') no-repeat + center/100%; } .logo-border { background: $theme-black-border; diff --git a/src/sites/doc/components/header/header.tsx b/src/sites/doc/components/header/header.tsx index dbe54d762faf5df31a8a9e19d8fc233642340d7d..d2f91e504aa5d186048f5d7e732d8ee744a12c2b 100644 --- a/src/sites/doc/components/header/header.tsx +++ b/src/sites/doc/components/header/header.tsx @@ -26,7 +26,9 @@ const Header = () => { }, []) useEffect(() => { - const lang = langs.filter((l) => location.pathname.indexOf(l.locale) > -1)[0] + const lang = langs.filter( + (l) => location.pathname.indexOf(l.locale) > -1 + )[0] setCurrLang(lang) }, [location]) @@ -57,7 +59,7 @@ const Header = () => { } return ( -
+
@@ -65,16 +67,17 @@ const Header = () => {
-
-
- - {currLang ? currLang['name'] : '中文'} - -
-
+ {/*
*/} + {/*
*/} + {/* */} + {/* {currLang ? currLang['name'] : '中文'}*/} + {/* */} + {/*
*/} + {/*
*/}
) } diff --git a/src/sites/doc/components/issue/index.ts b/src/sites/doc/components/issue/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8904b01c9578fb0283010d4ab2627c8cb6da4c87 --- /dev/null +++ b/src/sites/doc/components/issue/index.ts @@ -0,0 +1,3 @@ +import { Issue } from '@/sites/doc/components/issue/issue' + +export default Issue diff --git a/src/sites/doc/components/issue/issue.scss b/src/sites/doc/components/issue/issue.scss new file mode 100644 index 0000000000000000000000000000000000000000..366ad8f812d2cd462c92b086febac3de7b0dfbfc --- /dev/null +++ b/src/sites/doc/components/issue/issue.scss @@ -0,0 +1,38 @@ +.doc-content-issue { + // position: absolute; + // right: 605px; + // top: 51px; + display: flex; + align-items: center; + z-index: 1; + padding: 4px; + height: 40px; + // background: var(--bg-color-component-transparent); + border-radius: 6px; + align-items: center; + background: #fff; + box-shadow: 0px 1px 7px 0px #edeef1; + .issue-item { + display: flex; + align-items: center; + border-radius: var(--border-radius); + transition: all 0.2s ease 0s; + display: flex; + align-items: center; + padding: 5px 8px; + line-height: 22px; + font-size: 16px; + color: #333; + cursor: pointer; + text-decoration: none; + border-radius: 2px; + .nut-icon { + font-size: 12px; + margin-right: 5px; + } + &:hover { + color: #000; + background: rgba(64, 69, 82, 0.1); + } + } +} diff --git a/src/sites/doc/components/issue/issue.tsx b/src/sites/doc/components/issue/issue.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a1c1f84b7215a04b8457fce4809dd40d7a1704e7 --- /dev/null +++ b/src/sites/doc/components/issue/issue.tsx @@ -0,0 +1,36 @@ +import './issue.scss' +import React from 'react' +import Icon from '@/packages/icon' + +export function Issue() { + return ( + <> + + + ) +} diff --git a/src/sites/doc/components/nav/nav.scss b/src/sites/doc/components/nav/nav.scss index 2c0ce6139233fbf70c4708cf20c3e716cca5d989..2246072c11b93c9fcf0bcc65acf23f86a9abf80a 100644 --- a/src/sites/doc/components/nav/nav.scss +++ b/src/sites/doc/components/nav/nav.scss @@ -1,15 +1,20 @@ .doc { &-nav { - position: fixed; - top: $doc-header-height + 50; + position: absolute; + top: $doc-header-height; left: 0; bottom: 0; z-index: 1; background: $white; width: 290px; + height: 100vh; border-right: 1px solid #eee; overflow: auto; padding-left: 35px; + &.fixed { + position: fixed; + top: 0; + } ol { &.introduce { padding-left: 5px; @@ -29,10 +34,6 @@ position: relative; &.active { - } - } - .selected { - li { &::before { position: absolute; content: ''; @@ -52,6 +53,7 @@ li { padding-left: 29px; cursor: pointer; + &:hover { a { color: $doc-default-color; @@ -63,16 +65,17 @@ color: $doc-default-color !important; } + &:link, + &:visited { + color: $title-color; + } + &:hover { color: $doc-default-color; &:visited { color: $doc-default-color; } } - &:link, - &:visited { - color: $title-color; - } height: 100%; b { diff --git a/src/sites/doc/components/nav/nav.tsx b/src/sites/doc/components/nav/nav.tsx index b7197fbb376609f5935cef4b51a9d53c02a5738d..7d440482cf41989c3a6aae078c4478a97d8b29d3 100644 --- a/src/sites/doc/components/nav/nav.tsx +++ b/src/sites/doc/components/nav/nav.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { nav } from '@/config.json' import { NavLink } from 'react-router-dom' import './nav.scss' @@ -7,8 +7,20 @@ import useLocale from '@/sites/assets/locale/uselocale' const Nav = () => { const [cNav] = useState(nav) const [lang] = useLocale() + const [fixed, setFixed] = useState(false) + const scrollNav = () => { + let top = document.documentElement.scrollTop + if (top > 64) { + setFixed(true) + } else { + setFixed(false) + } + } + useEffect(() => { + document.addEventListener('scroll', scrollNav) + }, []) return ( -
+
    {cNav.map((cn: any) => { return ( diff --git a/src/sites/mobile/App.scss b/src/sites/mobile/App.scss index 467c83daa247d6bcf9883a18d3242a83dc3cf7c5..e44654d5c5e6007a9ec3a3e5fe3665031598b3e9 100644 --- a/src/sites/mobile/App.scss +++ b/src/sites/mobile/App.scss @@ -30,6 +30,17 @@ justify-content: center; cursor: pointer; } + .translate { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } } .demo { diff --git a/src/sites/mobile/App.tsx b/src/sites/mobile/App.tsx index 22bc05af4cb6a613099a96f8076aaa42814563ab..ac47f7cf99178c68e9e9cdfed0d0d1396d1bb251 100644 --- a/src/sites/mobile/App.tsx +++ b/src/sites/mobile/App.tsx @@ -1,17 +1,24 @@ import './App.scss' import React, { FunctionComponent, PropsWithChildren, useState } from 'react' -import { HashRouter, Switch, Route, Redirect } from 'react-router-dom' +import { + HashRouter, + Switch, + Route, + Redirect, + useHistory, +} from 'react-router-dom' import loadable, { LoadableComponent } from '@loadable/component' import routes from './router' import Links from './Links' import logo from '@/sites/assets/images/logo-red.png' -import useLocale from '@/sites/assets/locale/uselocale' +import useLocale, { getLocale } from '@/sites/assets/locale/uselocale' import Configprovider from '@/packages/configprovider' import zhTW from '@/locales/zh-TW' import zhCN from '@/locales/zh-CN' import enUS from '@/locales/en-US' import { BaseLang } from '@/locales/base' -import Popover from '@/packages/popover' +import Icon from '@/packages/Icon' +import config from '@/sites/config/env' interface Languages { [key: string]: BaseLang @@ -25,11 +32,28 @@ const languages: Languages = { const WithNavRouter = (C: LoadableComponent) => { const WithNav: FunctionComponent = (props: PropsWithChildren) => { + const handleSwitchLocale = () => { + let href = '' + let locale = getLocale() + let location = window.parent.location + if (locale == 'zh-CN') { + href = location.href.replace('zh-CN', 'en-US') + } else { + href = location.href.replace('en-US', 'zh-CN') + } + location.href = href + } + return ( <> @@ -41,7 +65,9 @@ const AppSwitch = () => { const [locale] = useLocale() return ( - +