Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

提交 dba991d5 编写于 作者: O oasis-cloud
浏览文件
操作

chore: 文档预览功能同步

上级 d653ef8b
隐藏空白更改
内联 并排
Showing with 314 addition and 51 deletion
src/sites/assets/locale/uselocale.ts
浏览文件 @ dba991d5
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
}
......
src/sites/assets/styles/md-style.scss
浏览文件 @ dba991d5
......@@ -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;
......
src/sites/doc/App.scss
浏览文件 @ dba991d5
......@@ -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;
......
src/sites/doc/App.tsx
浏览文件 @ dba991d5
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 (
<div className="title">
{componentName.name}&nbsp;{componentName.cName}
</div>
)
}
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 (
<div>
<HashRouter>
<Header></Header>
<Nav></Nav>
<div className="doc-content">
<div className="doc-content-document">
<div className="doc-title">
<div
className={`doc-title-position ${fixed ? 'fixed' : ''} ${
hidden ? 'hidden' : ''
}`}
>
<Title></Title>
<Issue></Issue>
</div>
</div>
<div className="doc-content-document isComponent">
<Switch>
{routers.map((ru, k) => {
return (
<Route key={Math.random()} path={`${lang ? `/${lang}` : ''}/${ru}`}>
<Route
key={Math.random()}
path={`${lang ? `/${lang}` : ''}/${ru}`}
>
<ReactMarkdown
children={getMarkdownByLang(ru)}
remarkPlugins={[remarkGfm, remarkDirective, myRemarkPlugin]}
remarkPlugins={[
remarkGfm,
remarkDirective,
myRemarkPlugin,
]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline && match ? (
<Demoblock text={String(children).replace(/\n$/, '')}>
<Demoblock
text={String(children).replace(/\n$/, '')}
>
<SyntaxHighlighter
children={String(children).replace(/\n$/, '')}
language={match[1]}
......@@ -92,7 +171,7 @@ const App = () => {
</Switch>
</div>
<div className="markdown-body">
<DemoPreview></DemoPreview>
<DemoPreview className={`${fixed ? 'fixed' : ''}`}></DemoPreview>
</div>
</div>
</HashRouter>
......
src/sites/doc/components/demo-preview/demo-preview.scss
浏览文件 @ dba991d5
......@@ -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%;
......
src/sites/doc/components/demo-preview/demo-preview.tsx
浏览文件 @ dba991d5
......@@ -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 (
<div className="doc-demo-preview">
<div className={`doc-demo-preview ${props.className}`}>
<iframe src={`/react/demo.html#${URL}`} frameBorder="0"></iframe>
</div>
)
......
src/sites/doc/components/header/header.scss
浏览文件 @ dba991d5
.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;
......
src/sites/doc/components/header/header.tsx
浏览文件 @ dba991d5
......@@ -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 (
<div className="doc-header doc-header-black">
<div className="doc-header doc-header-red">
<div className="header-logo">
<a className="logo-link" href="#/" onClick={toHome}></a>
<span className="logo-border"></span>
......@@ -65,16 +67,17 @@ const Header = () => {
</div>
<div className="header-nav">
<a href="https//github.com/jdf2e/nutui-docs" target="_blank">
当前环境：development ,代码 PR 合并后，文档会自动同步至 https//github.com/jdf2e/nutui-docs
当前环境：development ,代码 PR 合并后，文档会自动同步至
https//github.com/jdf2e/nutui-docs
</a>
</div>
<div className={'switch'}>
<div className={'switch-content'}>
<Popover visible={visible} theme={'dark'} onClick={handleSwitchLocale} list={langs}>
<span className={'curr-lang'}>{currLang ? currLang['name'] : '中文'}</span>
</Popover>
</div>
</div>
{/*<div className={'switch'}>*/}
{/* <div className={'switch-content'}>*/}
{/* <Popover visible={visible} theme={'dark'} onClick={handleSwitchLocale} list={langs}>*/}
{/* <span className={'curr-lang'}>{currLang ? currLang['name'] : '中文'}</span>*/}
{/* </Popover>*/}
{/* </div>*/}
{/*</div>*/}
</div>
)
}
......
src/sites/doc/components/issue/index.ts 0 → 100644
浏览文件 @ dba991d5
import { Issue } from '@/sites/doc/components/issue/issue'
export default Issue
src/sites/doc/components/issue/issue.scss 0 → 100644
浏览文件 @ dba991d5
.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);
}
}
}
src/sites/doc/components/issue/issue.tsx 0 → 100644
浏览文件 @ dba991d5
import './issue.scss'
import React from 'react'
import Icon from '@/packages/icon'
export function Issue() {
return (
<>
<div className="doc-content-issue">
<a
className="issue-item"
href="https://github.com/jdf2e/nutui/issues"
target="_blank"
>
<Icon name="uploader"></Icon>
Issue
</a>
<a
className="issue-item"
href="https://github.com/jdf2e/nutui/issues?q=is:issue+is:open"
target="_blank"
>
<Icon name="issue"></Icon>
Open
</a>
<a
className="issue-item"
href="'https://github.com/jdf2e/nutui/issues?q=is:issue+is:closed+' + component"
target="_blank"
>
<Icon name="checklist"></Icon>
Closed
</a>
</div>
</>
)
}
src/sites/doc/components/nav/nav.scss
浏览文件 @ dba991d5
.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 {
......
src/sites/doc/components/nav/nav.tsx
浏览文件 @ dba991d5
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<any>(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 (
<div className="doc-nav">
<div className={`doc-nav ${fixed ? 'fixed' : ''}`}>
<ol>
{cNav.map((cn: any) => {
return (
......
src/sites/mobile/App.scss
浏览文件 @ dba991d5
......@@ -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 {
......
src/sites/mobile/App.tsx
浏览文件 @ dba991d5
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<any>) => {
const WithNav: FunctionComponent = (props: PropsWithChildren<any>) => {
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 (
<>
<div id="nav">
<div className="back"></div>
<div className="back" onClick={() => window.parent.history.back()}>
<Icon name="left"></Icon>
</div>
{props.location.pathname.replace('/', '')}
<div className="translate" onClick={() => handleSwitchLocale()}>
<Icon name="https://img14.360buyimg.com/imagetools/jfs/t1/135168/8/21387/6193/625fa81aEe07cc347/55ad5bc2580c53a6.png"></Icon>
</div>
</div>
<C key={Math.random()} />
</>
......@@ -41,7 +65,9 @@ const AppSwitch = () => {
const [locale] = useLocale()
return (
<Configprovider locale={languages[((locale as string) || 'zh-CN').replace('-', '')]}>
<Configprovider
locale={languages[((locale as string) || 'zh-CN').replace('-', '')]}
>
<Switch>
<Route path="/" exact>
<div className="index">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或