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 (
<>
-
+
window.parent.history.back()}>
+
+
{props.location.pathname.replace('/', '')}
+
handleSwitchLocale()}>
+
+
>
@@ -41,7 +65,9 @@ const AppSwitch = () => {
const [locale] = useLocale()
return (
-
+