diff --git a/docs/demo/src/WTA/wwwroot/components/form/form-input.js b/docs/demo/src/WTA/wwwroot/components/form/form-input.js index 5a83e378..02911edf 100644 --- a/docs/demo/src/WTA/wwwroot/components/form/form-input.js +++ b/docs/demo/src/WTA/wwwroot/components/form/form-input.js @@ -83,9 +83,6 @@ export default { return schema.input ?? schema.type; }; /*end*/ - // if (props.schema.url && !props.schema.options) { - // props.schema.options = (await post(props.schema.url)).map((o) => ({ label: o.name, value: o })); - // } return { model, getDisabled, diff --git a/docs/demo/src/WTA/wwwroot/layouts/index.js b/docs/demo/src/WTA/wwwroot/layouts/index.js index bab17f80..e7f989b3 100644 --- a/docs/demo/src/WTA/wwwroot/layouts/index.js +++ b/docs/demo/src/WTA/wwwroot/layouts/index.js @@ -1,11 +1,14 @@ import html from "html"; import LayoutHeader from "./header.js"; import LayoutMenu from "./menu.js"; +import LayoutTabs from "./tabs.js"; import LayoutFooter from "./footer.js"; import Icon from "../components/icon/index.js"; +import { useAppStore } from "../store/index.js"; +import { computed } from "vue"; export default { - components: { Icon, LayoutHeader, LayoutMenu, LayoutFooter }, + components: { Icon, LayoutHeader, LayoutMenu, LayoutTabs, LayoutFooter }, template: html` @@ -14,8 +17,22 @@ export default { + - + + + + + + @@ -25,4 +42,16 @@ export default { `, + setup() { + const appStore = useAppStore(); + const isRefreshing = computed(() => appStore.isRefreshing); + const path = computed(() => useRoute().matched[0].path); + const items = computed(() => useRoute().matched[0].children); + return { + appStore, + isRefreshing, + path, + items, + }; + }, }; diff --git a/docs/demo/src/WTA/wwwroot/layouts/tabs.js b/docs/demo/src/WTA/wwwroot/layouts/tabs.js new file mode 100644 index 00000000..78390eed --- /dev/null +++ b/docs/demo/src/WTA/wwwroot/layouts/tabs.js @@ -0,0 +1,171 @@ +import html from "html"; +import { ref, nextTick } from "vue"; +import { useRoute, onBeforeRouteUpdate, useRouter } from "vue-router"; +import Icon from "../components/icon/index.js"; +import { useAppStore } from "../store/index.js"; +import MenuItem from "./menu-item.js"; + +export default { + components: { Icon, MenuItem }, + template: html` + + `, + styles: html` + + `, + setup() { + const appStore = useAppStore(); + const itemRefs = ref([]); + const currentRoute = useRoute(); + const router = useRouter(); + const model = ref(currentRoute.fullPath); + + onBeforeRouteUpdate((to) => { + model.value = to.fullPath; + }); + + const setRef = (index, el) => { + if (el) { + itemRefs.value[index] = el; + } else { + itemRefs.value.splice(index, 1); + } + }; + const showContextMenu = (index, show) => { + if (show) { + itemRefs.value.forEach((item, i) => { + if (i !== index) { + item?.handleClose(); + } + }); + } + }; + + const refresh = (index) => { + const currentIndex = appStore.routes.findIndex((o) => o.fullPath === currentRoute.fullPath); + const route = appStore.routes[index]; + if (index !== currentIndex) { + router.push({ path: route.fullPath }); + } + appStore.isRefreshing = true; + nextTick(() => { + appStore.isRefreshing = false; + }); + }; + + const remove = (name) => { + if (appStore.routes.length > 1) { + const index = appStore.routes.findIndex((o) => o.fullPath === name); + const currentIndex = appStore.routes.findIndex((o) => o.fullPath === currentRoute.fullPath); + appStore.routes.splice(index, 1); + if (index === currentIndex) { + if (appStore.routes[index]) { + router.push(appStore.routes[index]); + } else { + router.push(appStore.routes[index - 1]); + } + } + } + }; + + const removeLeft = (index) => { + const currentIndex = appStore.routes.findIndex((o) => o.fullPath === currentRoute.fullPath); + const route = appStore.routes[index]; + appStore.routes.splice(0, index); + if (currentIndex < index) { + router.push(route); + } + }; + + const removeRight = (index) => { + const currentIndex = appStore.routes.findIndex((o) => o.fullPath === currentRoute.fullPath); + appStore.routes.splice(index + 1, appStore.routes.length - index); + if (currentIndex > index) { + router.push(appStore.routes[index]); + } + }; + + const removeOthers = (index) => { + removeRight(index); + removeLeft(index); + if (appStore.routes[0].fullPath !== currentRoute.fullPath) { + router.push(appStore.routes[0]); + } + }; + + const onClick = (context) => { + if (!context.active) { + router.push(context.props.name); + } + }; + return { + model, + appStore, + itemRefs, + onBeforeRouteUpdate, + setRef, + showContextMenu, + refresh, + remove, + removeLeft, + removeRight, + removeOthers, + onClick, + }; + }, +}; diff --git a/docs/demo/src/WTA/wwwroot/router/index.js b/docs/demo/src/WTA/wwwroot/router/index.js index 397800d9..04217e44 100644 --- a/docs/demo/src/WTA/wwwroot/router/index.js +++ b/docs/demo/src/WTA/wwwroot/router/index.js @@ -76,6 +76,8 @@ router.beforeEach(async (to, from, next) => { router.afterEach((to) => { try { + const appStore = useAppStore(); + appStore.add(to); if (to.meta.title) { useTitle().value = `${to.meta.title}`; } diff --git a/docs/demo/src/WTA/wwwroot/store/app.js b/docs/demo/src/WTA/wwwroot/store/app.js index b207408e..32d7c505 100644 --- a/docs/demo/src/WTA/wwwroot/store/app.js +++ b/docs/demo/src/WTA/wwwroot/store/app.js @@ -9,6 +9,8 @@ const useAppStore = defineStore("app", { const state = { settings: { ...settings }, isMenuCollapse: false, + isRefreshing: false, + routes: [], }; const localSettings = JSON.parse(localStorage.getItem("settings") ?? "{}"); Object.assign(state.settings, localSettings); @@ -25,6 +27,14 @@ const useAppStore = defineStore("app", { await refreshRouter(); } }, + add(route) { + if (!this.routes.find((o) => o.fullPath === route.fullPath)) { + this.routes.push(route); + } else { + const index = this.routes.findIndex((o) => o.fullPath === route.fullPath); + this.routes[index] = route; + } + }, }, }); diff --git a/docs/demo/src/WTA/wwwroot/styles/site.css b/docs/demo/src/WTA/wwwroot/styles/site.css index 26b78926..bb320593 100644 --- a/docs/demo/src/WTA/wwwroot/styles/site.css +++ b/docs/demo/src/WTA/wwwroot/styles/site.css @@ -50,7 +50,7 @@ a { } .el-main { - min-height: calc(100% - var(--header)); + min-height: calc(100% - 100px); overflow: auto; }