diff --git a/README.md b/README.md index 2792fba2..deef2cdc 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由 | [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | | [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | | [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: diff --git a/packages/create-fes-app/templates/app/pc/.fes.js b/packages/create-fes-app/templates/app/pc/.fes.js index 658f9fe3..4f402c18 100644 --- a/packages/create-fes-app/templates/app/pc/.fes.js +++ b/packages/create-fes-app/templates/app/pc/.fes.js @@ -5,12 +5,13 @@ export default { publicPath: './', access: { roles: { - admin: ["/", "/onepiece"] + admin: ["*"], + manager: ["/"] } }, layout: { title: "Fes.js", - footer: 'Created by MumbelFe', + footer: 'Created by MumbleFe', multiTabs: false, menus: [{ name: 'index' diff --git a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js index 279ea2d4..5dd18b4e 100644 --- a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js +++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js @@ -2,7 +2,7 @@ import { unref, computed } from 'vue'; import { plugin } from '@@/core/coreExports'; -const transTitle = (name) => { +export const transTitle = (name) => { const sharedLocale = plugin.getShared('locale'); if (sharedLocale) { const { t } = sharedLocale.useI18n(); diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue index 4ddcbf04..668f9909 100644 --- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue +++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue @@ -7,9 +7,13 @@ @tabClick="switchPage" @edit="onEdit" > - <a-tab-pane v-for="page in pageList" :key="page.path" :closable="route.path !== page.path"> + <a-tab-pane + v-for="page in pageList" + :key="page.path" + :closable="route.path !== page.path" + > <template #tab> - {{page.name}} + {{page.title}} <ReloadOutlined v-show="route.path === page.path" class="layout-tabs-close-icon" @@ -42,7 +46,9 @@ </router-view> </template> <script> -import { reactive, unref } from 'vue'; +import { + computed, onMounted, reactive, unref, ref +} from 'vue'; import Tabs from 'ant-design-vue/lib/tabs'; import Dropdown from 'ant-design-vue/lib/dropdown'; import Menu from 'ant-design-vue/lib/menu'; @@ -51,6 +57,7 @@ import 'ant-design-vue/lib/dropdown/style/css'; import 'ant-design-vue/lib/tabs/style/css'; import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue'; import { useRouter, useRoute } from '@@/core/coreExports'; +import { transTitle } from '../helpers/pluginLocale'; let i = 0; const getKey = () => ++i; @@ -67,26 +74,28 @@ export default { setup() { const route = useRoute(); const router = useRouter(); - const pageList = reactive([ - { - path: unref(route.path), - route: { - query: unref(route.query), - params: unref(route.params) - }, - name: unref(route.meta).name, + const pageList = ref([]); + + const createPage = (route) => { + const title = route.meta.title; + return { + path: route.path, + route, + name: route.meta.name, + title: computed(() => transTitle(title)), key: getKey() - } - ]); - const findPage = path => pageList.find(item => unref(item.path) === unref(path)); + }; + }; + + const findPage = path => pageList.value.find(item => unref(item.path) === unref(path)); + + onMounted(() => { + pageList.value = [createPage(route)]; + }); + router.beforeEach((to) => { if (!findPage(to.path)) { - pageList.push({ - path: to.path, - route: to, - name: to.meta.name, - key: getKey() - }); + pageList.value = [...pageList.value, createPage(to)]; } return true; }); @@ -104,8 +113,10 @@ export default { const onEdit = (targetKey, action) => { if (action === 'remove') { const selectedPage = findPage(targetKey); - const index = pageList.indexOf(selectedPage); - pageList.splice(index, 1); + const list = [...pageList.value]; + const index = list.indexOf(selectedPage); + list.splice(index, 1); + pageList.value = list; } }; const reloadPage = (path) => { @@ -116,8 +127,7 @@ export default { }; const closeOtherPage = (path) => { const selectedPage = findPage(path || unref(route.path)); - pageList.length = 0; - pageList.push(selectedPage); + pageList.value = [selectedPage]; }; const getPageKey = (_route) => { const selectedPage = findPage(_route.path); diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index 105c7a30..6eb6bd2c 100644 --- a/packages/fes-template/.fes.js +++ b/packages/fes-template/.fes.js @@ -33,7 +33,7 @@ export default { layout: { title: "Fes.js", footer: "Created by MumbleFe", - multiTabs: false, + multiTabs: true, navigation: "mixin", theme: 'light', menus: [