From 2db00c441cd140912d3de77737c352375650a0e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Wed, 22 Dec 2021 12:37:45 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20app=20=E6=A8=A1=E5=BC=8F=E4=B8=8D?= =?UTF-8?q?=E5=86=8D=E4=BD=BF=E7=94=A8=20react=20router=EF=BC=8C=E6=96=B9?= =?UTF-8?q?=E4=BE=BF=E5=90=8E=E7=BB=AD=E5=BC=80=E5=8F=91=E8=B0=83=E8=AF=95?= =?UTF-8?q?=20(#3244)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: app 模式不再使用 react router，方便后续开发调试 * chore: app 模式不再使用 react router，方便后续开发调试 --- docs/zh-CN/components/app.md | 3 +- docs/zh-CN/start/getting-started.md | 4 +- .../{components/APP/index.tsx => app/app.tsx} | 0 examples/app/index.html | 96 ++++++++++++ examples/app/index.jsx | 140 ++++++++++++++++++ .../components/{Example.tsx => Example.jsx} | 54 ++----- fis-conf.js | 3 +- mock/server.conf | 2 + 8 files changed, 254 insertions(+), 48 deletions(-) rename examples/{components/APP/index.tsx => app/app.tsx} (100%) create mode 100644 examples/app/index.html create mode 100644 examples/app/index.jsx rename examples/components/{Example.tsx => Example.jsx} (93%) diff --git a/docs/zh-CN/components/app.md b/docs/zh-CN/components/app.md index adb990ed2..a0dc32cd6 100644 --- a/docs/zh-CN/components/app.md +++ b/docs/zh-CN/components/app.md @@ -12,7 +12,7 @@ order: 99 ## 基本用法 -类型定义为 `app`，通过 pages 定义页面，支持层级，支持内嵌 schema，或者 通过 schemaApi 远程拉取页面，完整用法请参考 [amis-admin](https://github.com/aisuda/amis-admin) 项目 +类型定义为 `app`，通过 pages 定义页面，支持层级，支持内嵌 schema，或者 通过 schemaApi 远程拉取页面，完整用法请参考 [amis-admin](https://github.com/aisuda/amis-admin) 项目里的代码示例，需要修改 `env`： ```json { @@ -21,7 +21,6 @@ order: 99 "pages": [ { "label": "分组1", - "children": [ { "label": "父页面", diff --git a/docs/zh-CN/start/getting-started.md b/docs/zh-CN/start/getting-started.md index cbcf7f844..7186c9066 100644 --- a/docs/zh-CN/start/getting-started.md +++ b/docs/zh-CN/start/getting-started.md @@ -276,7 +276,7 @@ amis.embed( 默认 JSSDK 不是 hash 路由，如果你想改成 hash 路由模式，请查看此处代码实现。只需要修改 env.isCurrentUrl、env.jumpTo 和 env.updateLocation 这几个方法即可。 -参考：https://github.com/baidu/amis/blob/master/examples/components/Example.tsx#L551-L575 +参考：https://github.com/baidu/amis/blob/master/examples/components/Example.jsx#L551-L575 ### 销毁 @@ -436,7 +436,7 @@ class MyComponent extends React.Component { render() { let amisScoped; let theme = 'cxd'; - + // 请勿使用 React.StrictMode，目前还不支持 return (
diff --git a/examples/components/APP/index.tsx b/examples/app/app.tsx similarity index 100% rename from examples/components/APP/index.tsx rename to examples/app/app.tsx diff --git a/examples/app/index.html b/examples/app/index.html new file mode 100644 index 000000000..278c7e3fb --- /dev/null +++ b/examples/app/index.html @@ -0,0 +1,96 @@ + + + + + amis app 模式 + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/examples/app/index.jsx b/examples/app/index.jsx new file mode 100644 index 000000000..bcc358df3 --- /dev/null +++ b/examples/app/index.jsx @@ -0,0 +1,140 @@ +/** + * @file app 模式示例 + */ + +import APPSchema from './app'; +import {createHashHistory} from 'history'; +import {embed} from '../embed'; + +const history = createHashHistory({}); + +function normalizeLink(to, location = history.location) { + to = to || ''; + + if (to && to[0] === '#') { + to = location.pathname + location.search + to; + } else if (to && to[0] === '?') { + to = location.pathname + to; + } + + const idx = to.indexOf('?'); + const idx2 = to.indexOf('#'); + let pathname = ~idx + ? to.substring(0, idx) + : ~idx2 + ? to.substring(0, idx2) + : to; + let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; + let hash = ~idx2 ? to.substring(idx2) : location.hash; + + if (!pathname) { + pathname = location.pathname; + } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) { + let relativeBase = location.pathname; + const paths = relativeBase.split('/'); + paths.pop(); + let m; + while ((m = /^\.\.?\//.exec(pathname))) { + if (m[0] === '../') { + paths.pop(); + } + pathname = pathname.substring(m[0].length); + } + pathname = paths.concat(pathname).join('/'); + } + + return pathname + search + hash; +} + +function isCurrentUrl(to, ctx) { + if (!to) { + return false; + } + const pathname = history.location.pathname; + const link = normalizeLink(to, { + ...location, + pathname, + hash: '' + }); + + if (!~link.indexOf('http') && ~link.indexOf(':')) { + let strict = ctx && ctx.strict; + return match(link, { + decode: decodeURIComponent, + strict: typeof strict !== 'undefined' ? strict : true + })(pathname); + } + + return decodeURI(pathname) === link; +} + +const APPENV = { + updateLocation: (location, replace) => { + location = normalizeLink(location); + if (location === 'goBack') { + return history.goBack(); + } else if ( + (!/^https?\:\/\//.test(location) && + location === history.location.pathname + history.location.search) || + location === history.location.href + ) { + // 目标地址和当前地址一样，不处理，免得重复刷新 + return; + } else if (/^https?\:\/\//.test(location) || !history) { + return (window.location.href = location); + } + + history[replace ? 'replace' : 'push'](location); + }, + jumpTo: (to, action) => { + if (to === 'goBack') { + return history.goBack(); + } + + to = normalizeLink(to); + + if (isCurrentUrl(to)) { + return; + } + + if (action && action.actionType === 'url') { + action.blank === false + ? (window.location.href = to) + : window.open(to, '_blank'); + return; + } else if (action && action.blank) { + window.open(to, '_blank'); + return; + } + + if (/^https?:\/\//.test(to)) { + window.location.href = to; + } else if ( + (!/^https?\:\/\//.test(to) && + to === history.pathname + history.location.search) || + to === history.location.href + ) { + // do nothing + } else { + history.push(to); + } + }, + isCurrentUrl: isCurrentUrl +}; + +export function bootstrap(mountTo) { + const amisInstance = embed( + mountTo, + APPSchema, + { + location: history.location + }, + APPENV + ); + + history.listen(state => { + amisInstance.updateProps({ + location: state.location || state + }); + }); +} diff --git a/examples/components/Example.tsx b/examples/components/Example.jsx similarity index 93% rename from examples/components/Example.tsx rename to examples/components/Example.jsx index 917171737..269bdb132 100644 --- a/examples/components/Example.tsx +++ b/examples/components/Example.jsx @@ -84,7 +84,7 @@ import Tab1Schema from './Tabs/Tab1'; import Tab2Schema from './Tabs/Tab2'; import Tab3Schema from './Tabs/Tab3'; import TestComponent from './Test'; -import APP from './APP/index'; + import {normalizeLink} from '../../src/utils/normalizeLink'; export const examples = [ @@ -577,49 +577,17 @@ export const examples = [ { label: 'APP 多页应用', icon: 'fa fa-cubes', - path: '/examples/app', - component: makeSchemaRenderer(APP, false, { - session: 'app', - jumpTo: (to: string) => { - location.hash = to; - }, - updateLocation: (to, replace) => { - if (to === 'goBack') { - return window.history.back(); - } - - if (replace && window.history.replaceState) { - window.history.replaceState( - '', - document.title, - normalizeLink(to) - ); - return; - } - - window.history.pushState('', document.title, normalizeLink(to)); - }, - isCurrentUrl: (to: string, ctx: any) => { - if (!to) { - return false; - } - const pathname = location.hash ? location.hash.substring(1) : '/'; - const link = normalizeLink(to, { - ...location, - pathname, - hash: '' - }); - - if (!~link.indexOf('http') && ~link.indexOf(':')) { - return match(link, { - decode: decodeURIComponent, - strict: ctx?.strict ?? true - })(pathname); - } - - return pathname === encodeURI(link); + path: '/app/', + component: () => { + // 如果在 gh-pages 里面 + if (/^\/amis/.test(window.location.pathname)) { + window.open(`/amis/app/`, '_blank'); + } else { + window.open(`/examples/app/`, '_blank'); } - }) + + return null; + } } // { diff --git a/fis-conf.js b/fis-conf.js index 48c471132..a558f93ed 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -54,6 +54,7 @@ fis.set('project.files', [ '/scss/helper.scss', '/scss/themes/*.scss', '/examples/*.html', + '/examples/app/*.html', '/examples/*.tpl', '/examples/static/*.png', '/examples/static/*.svg', @@ -906,7 +907,7 @@ if (fis.project.currentMedia() === 'publish') { const DocNavCN = ret.src['/examples/components/DocNavCN.ts']; const Components = ret.src['/examples/components/Components.tsx']; const DocCSS = ret.src['/examples/components/CssDocs.tsx']; - const ExampleJs = ret.src['/examples/components/Example.tsx']; + const ExampleJs = ret.src['/examples/components/Example.jsx']; const pages = []; const source = [ diff --git a/mock/server.conf b/mock/server.conf index 1ad140e48..8c3e7baa8 100644 --- a/mock/server.conf +++ b/mock/server.conf @@ -1,3 +1,5 @@ +rewrite ^\/examples\/app\/$ /examples/app/index.html + rewrite ^\/(?:zh-CN|en-US)?\/?(?:examples|docs|components|style)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html rewrite ^\/play$ /examples/index.html