mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 03:05:07 +08:00
feat: 路由支持配置base & plugin-locale插件legacy默认false (#154)
* feat: 路由支持配置base & plugin-locale插件legacy默认false * docs: 修改文档
This commit is contained in:
听海
GitHub
parent
92e154e48b
commit
104571b2a4
@ -129,10 +129,14 @@ export function beforeRender(lastOpts) {
|
||||
}
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
:::warning
|
||||
准备删除此API，推荐使用`modifyRoute`
|
||||
:::
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
@ -150,6 +154,51 @@ export function patchRoutes({ routes }) {
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
|
||||
### modifyRoute
|
||||
modifyRoute({base, createHistory, routes})
|
||||
|
||||
修改路由配置信息。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
routes: [
|
||||
{
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
},
|
||||
...memo.routes
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
比如修改 base:
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
base: window.location.href
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
比如改为使用createMemoryHistory：
|
||||
```js
|
||||
export function modifyRoute(memo) {
|
||||
return {
|
||||
...memo,
|
||||
createHistory: createMemoryHistory
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### modifyClientRenderOpts
|
||||
|
||||
modifyClientRenderOpts(lastOpts)
|
||||
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
locale: 'zh-CN', // default locale
|
||||
fallbackLocale: 'zh-CN', // set fallback locale
|
||||
baseNavigator: true, // 开启浏览器语言检测
|
||||
legacy: true, // 用户是否需要 Legacy API 模式
|
||||
legacy: false, // 用户是否需要 Legacy API 模式
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
#### legacy
|
||||
- **类型**：`Boolean`
|
||||
|
||||
- **默认值**：`true`
|
||||
- **默认值**：`false`
|
||||
|
||||
- **详情**：用户是否需要 Legacy API 模式
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ export default (api) => {
|
||||
const userConfig = {
|
||||
locale: 'zh-CN', // default locale
|
||||
fallbackLocale: 'zh-CN', // set fallback locale
|
||||
legacy: true,
|
||||
legacy: false,
|
||||
baseNavigator: true, // 开启浏览器语言检测
|
||||
...api.config.locale,
|
||||
};
|
||||
@ -49,20 +49,14 @@ export default (api) => {
|
||||
|
||||
const locales = getLocales(localeConfigFileBasePath);
|
||||
|
||||
const { baseNavigator, ...otherConfig } = userConfig;
|
||||
|
||||
api.writeTmpFile({
|
||||
path: absoluteFilePath,
|
||||
content: Mustache.render(readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'), {
|
||||
REPLACE_LOCALES: locales,
|
||||
REPLACE_DEFAULT_OPTIONS: JSON.stringify(
|
||||
{
|
||||
locale: userConfig.locale,
|
||||
fallbackLocale: userConfig.fallbackLocale,
|
||||
legacy: userConfig.legacy,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
BASE_NAVIGATOR: userConfig.baseNavigator,
|
||||
REPLACE_DEFAULT_OPTIONS: JSON.stringify(otherConfig, null, 2),
|
||||
BASE_NAVIGATOR: baseNavigator,
|
||||
VUE_I18N_PATH: 'vue-i18n',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -3,312 +3,312 @@ export default {
|
||||
lang: 'ar-EG',
|
||||
label: 'العربية',
|
||||
icon: '🇪🇬',
|
||||
title: 'لغة'
|
||||
title: 'لغة',
|
||||
},
|
||||
'az-AZ': {
|
||||
lang: 'az-AZ',
|
||||
label: 'Azərbaycan dili',
|
||||
icon: '🇦🇿',
|
||||
title: 'Dil'
|
||||
title: 'Dil',
|
||||
},
|
||||
'bg-BG': {
|
||||
lang: 'bg-BG',
|
||||
label: 'Български език',
|
||||
icon: '🇧🇬',
|
||||
title: 'език'
|
||||
title: 'език',
|
||||
},
|
||||
'ca-ES': {
|
||||
lang: 'ca-ES',
|
||||
label: 'Catalá',
|
||||
icon: '🇨🇦',
|
||||
title: 'llengua'
|
||||
title: 'llengua',
|
||||
},
|
||||
'cs-CZ': {
|
||||
lang: 'cs-CZ',
|
||||
label: 'Čeština',
|
||||
icon: '🇨🇿',
|
||||
title: 'Jazyk'
|
||||
title: 'Jazyk',
|
||||
},
|
||||
'da-DK': {
|
||||
lang: 'da-DK',
|
||||
label: 'Dansk',
|
||||
icon: '🇩🇰',
|
||||
title: 'Sprog'
|
||||
title: 'Sprog',
|
||||
},
|
||||
'de-DE': {
|
||||
lang: 'de-DE',
|
||||
label: 'Deutsch',
|
||||
icon: '🇩🇪',
|
||||
title: 'Sprache'
|
||||
title: 'Sprache',
|
||||
},
|
||||
'el-GR': {
|
||||
lang: 'el-GR',
|
||||
label: 'Ελληνικά',
|
||||
icon: '🇬🇷',
|
||||
title: 'Γλώσσα'
|
||||
title: 'Γλώσσα',
|
||||
},
|
||||
'en-GB': {
|
||||
lang: 'en-GB',
|
||||
label: 'English',
|
||||
icon: '🇬🇧',
|
||||
title: 'Language'
|
||||
title: 'Language',
|
||||
},
|
||||
'en-US': {
|
||||
lang: 'en-US',
|
||||
label: 'English',
|
||||
icon: '🇺🇸',
|
||||
title: 'Language'
|
||||
title: 'Language',
|
||||
},
|
||||
'es-ES': {
|
||||
lang: 'es-ES',
|
||||
label: 'Español',
|
||||
icon: '🇪🇸',
|
||||
title: 'Idioma'
|
||||
title: 'Idioma',
|
||||
},
|
||||
'et-EE': {
|
||||
lang: 'et-EE',
|
||||
label: 'Eesti',
|
||||
icon: '🇪🇪',
|
||||
title: 'Keel'
|
||||
title: 'Keel',
|
||||
},
|
||||
'fa-IR': {
|
||||
lang: 'fa-IR',
|
||||
label: 'فارسی',
|
||||
icon: '🇮🇷',
|
||||
title: 'زبان'
|
||||
title: 'زبان',
|
||||
},
|
||||
'fi-FI': {
|
||||
lang: 'fi-FI',
|
||||
label: 'Suomi',
|
||||
icon: '🇫🇮',
|
||||
title: 'Kieli'
|
||||
title: 'Kieli',
|
||||
},
|
||||
'fr-BE': {
|
||||
lang: 'fr-BE',
|
||||
label: 'Français',
|
||||
icon: '🇧🇪',
|
||||
title: 'Langue'
|
||||
title: 'Langue',
|
||||
},
|
||||
'fr-FR': {
|
||||
lang: 'fr-FR',
|
||||
label: 'Français',
|
||||
icon: '🇫🇷',
|
||||
title: 'Langue'
|
||||
title: 'Langue',
|
||||
},
|
||||
'ga-IE': {
|
||||
lang: 'ga-IE',
|
||||
label: 'Gaeilge',
|
||||
icon: '🇮🇪',
|
||||
title: 'Teanga'
|
||||
title: 'Teanga',
|
||||
},
|
||||
'he-IL': {
|
||||
lang: 'he-IL',
|
||||
label: 'עברית',
|
||||
icon: '🇮🇱',
|
||||
title: 'שפה'
|
||||
title: 'שפה',
|
||||
},
|
||||
'hi-IN': {
|
||||
lang: 'hi-IN',
|
||||
label: 'हिन्दी, हिंदी',
|
||||
icon: '🇮🇳',
|
||||
title: 'भाषा: हिन्दी'
|
||||
title: 'भाषा: हिन्दी',
|
||||
},
|
||||
'hr-HR': {
|
||||
lang: 'hr-HR',
|
||||
label: 'Hrvatski jezik',
|
||||
icon: '🇭🇷',
|
||||
title: 'Jezik'
|
||||
title: 'Jezik',
|
||||
},
|
||||
'hu-HU': {
|
||||
lang: 'hu-HU',
|
||||
label: 'Magyar',
|
||||
icon: '🇭🇺',
|
||||
title: 'Nyelv'
|
||||
title: 'Nyelv',
|
||||
},
|
||||
'hy-AM': {
|
||||
lang: 'hu-HU',
|
||||
label: 'Հայերեն',
|
||||
icon: '🇦🇲',
|
||||
title: 'Լեզու'
|
||||
title: 'Լեզու',
|
||||
},
|
||||
'id-ID': {
|
||||
lang: 'id-ID',
|
||||
label: 'Bahasa Indonesia',
|
||||
icon: '🇮🇩',
|
||||
title: 'Bahasa'
|
||||
title: 'Bahasa',
|
||||
},
|
||||
'it-IT': {
|
||||
lang: 'it-IT',
|
||||
label: 'Italiano',
|
||||
icon: '🇮🇹',
|
||||
title: 'Linguaggio'
|
||||
title: 'Linguaggio',
|
||||
},
|
||||
'is-IS': {
|
||||
lang: 'is-IS',
|
||||
label: 'Íslenska',
|
||||
icon: '🇮🇸',
|
||||
title: 'Tungumál'
|
||||
title: 'Tungumál',
|
||||
},
|
||||
'ja-JP': {
|
||||
lang: 'ja-JP',
|
||||
label: '日本語',
|
||||
icon: '🇯🇵',
|
||||
title: '言語'
|
||||
title: '言語',
|
||||
},
|
||||
'ku-IQ': {
|
||||
lang: 'ku-IQ',
|
||||
label: 'کوردی',
|
||||
icon: '🇮🇶',
|
||||
title: 'Ziman'
|
||||
title: 'Ziman',
|
||||
},
|
||||
'kn-IN': {
|
||||
lang: 'zh-TW',
|
||||
label: 'ಕನ್ನಡ',
|
||||
icon: '🇮🇳',
|
||||
title: 'ಭಾಷೆ'
|
||||
title: 'ಭಾಷೆ',
|
||||
},
|
||||
'ko-KR': {
|
||||
lang: 'ko-KR',
|
||||
label: '한국어',
|
||||
icon: '🇰🇷',
|
||||
title: '언어'
|
||||
title: '언어',
|
||||
},
|
||||
'lv-LV': {
|
||||
lang: 'lv-LV',
|
||||
label: 'Latviešu valoda',
|
||||
icon: '🇱🇮',
|
||||
title: 'Kalba'
|
||||
title: 'Kalba',
|
||||
},
|
||||
'mk-MK': {
|
||||
lang: 'mk-MK',
|
||||
label: 'македонски јазик',
|
||||
icon: '🇲🇰',
|
||||
title: 'Јазик'
|
||||
title: 'Јазик',
|
||||
},
|
||||
'mn-MN': {
|
||||
lang: 'mn-MN',
|
||||
label: 'Монгол хэл',
|
||||
icon: '🇲🇳',
|
||||
title: 'Хэл'
|
||||
title: 'Хэл',
|
||||
},
|
||||
'ms-MY': {
|
||||
lang: 'ms-MY',
|
||||
label: 'بهاس ملايو',
|
||||
icon: '🇲🇾',
|
||||
title: 'Bahasa'
|
||||
title: 'Bahasa',
|
||||
},
|
||||
'nb-NO': {
|
||||
lang: 'nb-NO',
|
||||
label: 'Norsk',
|
||||
icon: '🇳🇴',
|
||||
title: 'Språk'
|
||||
title: 'Språk',
|
||||
},
|
||||
'ne-NP': {
|
||||
lang: 'ne-NP',
|
||||
label: 'नेपाली',
|
||||
icon: '🇳🇵',
|
||||
title: 'भाषा'
|
||||
title: 'भाषा',
|
||||
},
|
||||
'nl-BE': {
|
||||
lang: 'nl-BE',
|
||||
label: 'Vlaams',
|
||||
icon: '🇧🇪',
|
||||
title: 'Taal'
|
||||
title: 'Taal',
|
||||
},
|
||||
'nl-NL': {
|
||||
lang: 'nl-NL',
|
||||
label: 'Vlaams',
|
||||
icon: '🇳🇱',
|
||||
title: 'Taal'
|
||||
title: 'Taal',
|
||||
},
|
||||
'pt-BR': {
|
||||
lang: 'pt-BR',
|
||||
label: 'Português',
|
||||
icon: '🇧🇷',
|
||||
title: 'Idiomas'
|
||||
title: 'Idiomas',
|
||||
},
|
||||
'pt-PT': {
|
||||
lang: 'pt-PT',
|
||||
label: 'Português',
|
||||
icon: '🇵🇹',
|
||||
title: 'Idiomas'
|
||||
title: 'Idiomas',
|
||||
},
|
||||
'ro-RO': {
|
||||
lang: 'ro-RO',
|
||||
label: 'Română',
|
||||
icon: '🇷🇴',
|
||||
title: 'Limba'
|
||||
title: 'Limba',
|
||||
},
|
||||
'ru-RU': {
|
||||
lang: 'ru-RU',
|
||||
label: 'русский',
|
||||
icon: '🇷🇺',
|
||||
title: 'язык'
|
||||
title: 'язык',
|
||||
},
|
||||
'sk-SK': {
|
||||
lang: 'sk-SK',
|
||||
label: 'Slovenčina',
|
||||
icon: '🇸🇰',
|
||||
title: 'Jazyk'
|
||||
title: 'Jazyk',
|
||||
},
|
||||
'sr-RS': {
|
||||
lang: 'sr-RS',
|
||||
label: 'српски језик',
|
||||
icon: '🇸🇷',
|
||||
title: 'Језик'
|
||||
title: 'Језик',
|
||||
},
|
||||
'sl-SI': {
|
||||
lang: 'sl-SI',
|
||||
label: 'Slovenščina',
|
||||
icon: '🇸🇱',
|
||||
title: 'Jezik'
|
||||
title: 'Jezik',
|
||||
},
|
||||
'sv-SE': {
|
||||
lang: 'sv-SE',
|
||||
label: 'Svenska',
|
||||
icon: '🇸🇪',
|
||||
title: 'Språk'
|
||||
title: 'Språk',
|
||||
},
|
||||
'ta-IN': {
|
||||
lang: 'ta-IN',
|
||||
label: 'தமிழ்',
|
||||
icon: '🇮🇳',
|
||||
title: 'மொழி'
|
||||
title: 'மொழி',
|
||||
},
|
||||
'th-TH': {
|
||||
lang: 'th-TH',
|
||||
label: 'ไทย',
|
||||
icon: '🇹🇭',
|
||||
title: 'ภาษา'
|
||||
title: 'ภาษา',
|
||||
},
|
||||
'tr-TR': {
|
||||
lang: 'tr-TR',
|
||||
label: 'Türkçe',
|
||||
icon: '🇹🇷',
|
||||
title: 'Dil'
|
||||
title: 'Dil',
|
||||
},
|
||||
'uk-UA': {
|
||||
lang: 'uk-UA',
|
||||
label: 'Українська',
|
||||
icon: '🇺🇰',
|
||||
title: 'Мова'
|
||||
title: 'Мова',
|
||||
},
|
||||
'vi-VN': {
|
||||
lang: 'vi-VN',
|
||||
label: 'Tiếng Việt',
|
||||
icon: '🇻🇳',
|
||||
title: 'Ngôn ngữ'
|
||||
title: 'Ngôn ngữ',
|
||||
},
|
||||
'zh-CN': {
|
||||
lang: 'zh-CN',
|
||||
label: '简体中文',
|
||||
icon: '🇨🇳',
|
||||
title: '语言'
|
||||
title: '语言',
|
||||
},
|
||||
'zh-TW': {
|
||||
lang: 'zh-TW',
|
||||
label: '繁体中文',
|
||||
icon: '🇭🇰',
|
||||
title: '語言'
|
||||
}
|
||||
title: '語言',
|
||||
},
|
||||
};
|
||||
|
||||
@ -27,8 +27,10 @@ export default function (api) {
|
||||
'render',
|
||||
// 修改路由
|
||||
'patchRoutes',
|
||||
// 修改history
|
||||
// 修改创建history API
|
||||
'modifyCreateHistory',
|
||||
// 修改路由配置
|
||||
'modifyRoute',
|
||||
// 生成router时触发
|
||||
'onRouterCreated',
|
||||
],
|
||||
|
||||
@ -309,7 +309,6 @@ export default function (api) {
|
||||
|
||||
const absCoreFilePath = join(namespace, 'routes.js');
|
||||
const absExportsFilePath = join(namespace, 'routeExports.js');
|
||||
|
||||
const absRuntimeFilePath = join(namespace, 'runtime.js');
|
||||
|
||||
const historyType = {
|
||||
@ -334,7 +333,6 @@ export default function (api) {
|
||||
path: absExportsFilePath,
|
||||
content: Mustache.render(routeExportsTpl, {
|
||||
runtimePath,
|
||||
config: api.config,
|
||||
routerBase: api.config.router?.base,
|
||||
CREATE_HISTORY: historyType[api.config.router.mode] || 'createWebHashHistory',
|
||||
}),
|
||||
|
||||
@ -13,16 +13,25 @@ export const createRouter = (routes) => {
|
||||
},
|
||||
initialValue: {{{ CREATE_HISTORY }}},
|
||||
});
|
||||
history = createHistory(ROUTER_BASE);
|
||||
// 修改routes
|
||||
plugin.applyPlugins({
|
||||
key: 'patchRoutes',
|
||||
type: ApplyPluginsType.event,
|
||||
args: { routes },
|
||||
});
|
||||
const route = plugin.applyPlugins({
|
||||
key: 'modifyRoute',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {
|
||||
base: ROUTER_BASE,
|
||||
routes: routes,
|
||||
createHistory: createHistory
|
||||
},
|
||||
});
|
||||
history = route['createHistory']?.(route.base);
|
||||
router = createVueRouter({
|
||||
history,
|
||||
routes
|
||||
routes: route.routes
|
||||
});
|
||||
|
||||
plugin.applyPlugins({
|
||||
|
||||
8
packages/fes-preset-built-in/types.d.ts
vendored
8
packages/fes-preset-built-in/types.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
import { Component, DefineComponent, App } from 'vue';
|
||||
import { RouteRecordRaw, Router, RouterHistory } from 'vue-router';
|
||||
import { RouteRecordRaw, Router, RouterHistory, createMemoryHistory, createWebHashHistory, createWebHistory } from 'vue-router';
|
||||
|
||||
// @ts-ignore
|
||||
import { Plugin } from '@fesjs/runtime';
|
||||
@ -18,6 +18,11 @@ interface ClientRenderOption {
|
||||
|
||||
type RenderFunc = () => Promise<App>
|
||||
|
||||
interface Route {
|
||||
base: string;
|
||||
mode:string;
|
||||
createHistory: createMemoryHistory | createWebHashHistory | createWebHistory;
|
||||
}
|
||||
|
||||
|
||||
export function getRouter(): Router;
|
||||
@ -28,6 +33,7 @@ declare module '@fesjs/fes' {
|
||||
interface PluginRuntimeConfig {
|
||||
beforeRender?: (option: BeforeRenderConfig) => BeforeRenderConfig;
|
||||
patchRoutes?: ({ routes }: { routes: RouteRecordRaw[] }) => void;
|
||||
modifyRoute?: ({base, mode, createHistory }: Route) => Route;
|
||||
modifyClientRenderOpts?: (option: ClientRenderOption) => ClientRenderOption;
|
||||
rootContainer?: (component: DefineComponent, option: { routes: RouteRecordRaw[], plugin: Plugin }) => Component;
|
||||
onAppCreated?: ({ app, routes }: { app: App, routes: RouteRecordRaw[] }) => void;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { defineBuildConfig } from "@fesjs/fes";
|
||||
|
||||
export default defineBuildConfig({
|
||||
// exportStatic: {},
|
||||
define: {
|
||||
__DEV__: false
|
||||
},
|
||||
@ -33,7 +32,6 @@ export default defineBuildConfig({
|
||||
menus: [
|
||||
{
|
||||
name: 'index',
|
||||
|
||||
icon: '/wine-outline.svg',
|
||||
match: ['/route/*']
|
||||
},
|
||||
@ -69,9 +67,6 @@ export default defineBuildConfig({
|
||||
}
|
||||
]
|
||||
},
|
||||
locale: {
|
||||
legacy: false
|
||||
},
|
||||
enums: {
|
||||
status: [
|
||||
['0', '无效的'],
|
||||
|
||||
@ -11,6 +11,8 @@ import { useI18n, defineRouteMeta } from '@fesjs/fes';
|
||||
import { FButton } from '@fesjs/fes-design';
|
||||
|
||||
defineRouteMeta({
|
||||
name: 'index',
|
||||
title: '$home',
|
||||
'keep-alive': true,
|
||||
});
|
||||
|
||||
@ -20,9 +22,7 @@ export default {
|
||||
},
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const a = 'aa'.replaceAll('a', 1);
|
||||
return {
|
||||
a,
|
||||
t,
|
||||
};
|
||||
},
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { defineBuildConfig } from '@fesjs/fes'
|
||||
export default defineBuildConfig({
|
||||
// exportStatic: {},
|
||||
define: {
|
||||
__DEV__: false
|
||||
},
|
||||
@ -75,9 +74,6 @@ export default defineBuildConfig({
|
||||
defaultExpandAll: false
|
||||
}
|
||||
},
|
||||
locale: {
|
||||
legacy: true
|
||||
},
|
||||
devServer: {
|
||||
port: 8080
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user