@ganwei-web/ganwei-pc-cli 6.2.6 → 6.2.7

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/indexRightContent/labelPage/index.scss

@@ -0,0 +1,152 @@
+ .container-main {
+     ::v-deep .el-tabs {
+         height: 100%;
+         position: relative;
+         padding-top: 38px;
+
+         iframe {
+             border: 0px;
+         }
+
+         .el-tabs__header {
+             position: absolute;
+             left: 0;
+             top: 0;
+             width: 100%;
+             height: 38px;
+             margin-bottom: 0;
+             background-color: var(--frame-top-background);
+             border-top: 1px solid var(--frame-main-border2);
+             //  border-bottom: 1px solid var(--frame-main-border2);
+             z-index: 1;
+
+             .el-tabs__nav-scroll {
+                 height: 100%;
+                 display: flex;
+                 align-items: end;
+                 gap: 10px;
+                 padding: 2px 10px 0px 10px;
+
+                 ::-webkit-scrollbar {
+                     width: 4px;
+                     height: 4px;
+                 }
+
+                 ::-webkit-scrollbar-button:vertical:start,
+                 ::-webkit-scrollbar-button:vertical:end,
+                 ::-webkit-scrollbar-button:horizontal:start,
+                 ::-webkit-scrollbar-button:horizontal:end {
+                     display: none;
+                 }
+
+                 ::-webkit-scrollbar-corner {
+                     background-color: red;
+                 }
+             }
+
+             .el-tabs__nav-wrap {
+                 height: 100%;
+             }
+
+             .el-tabs__nav {
+                 height: 32px;
+                 border: 0;
+                 gap: 2px;
+
+                 .el-tabs__item {
+                     height: 100%;
+                     margin: 0;
+                     border: 0;
+                     border-radius: 8px 8px 0px 0px;
+                     background: var(--labelpage-background);
+                     box-shadow: 0px 1px 0px 0px var(--labelpage-boxshadow);
+                     color: var(--labelpage-color);
+                     overflow: hidden;
+
+                     >i {
+                         margin-right: 6px;
+                     }
+
+                     &:not(:first-child) {
+                         margin-left: 1px;
+                     }
+
+                     &:only-of-type {
+                         .el-icon-close {
+                             display: none;
+                         }
+                     }
+
+                     .el-icon {
+                         font-size: 14px;
+                         margin-right: 4px;
+                         overflow: hidden;
+                     }
+
+                     span:nth-child(2) {
+                         font-size: 12px;
+                     }
+                 }
+
+                 .el-icon-close {
+                     font-size: 14px;
+
+                     &:hover {
+                         background: transparent;
+                         color: var(--labelpage-icon-color__hover);
+                     }
+                 }
+
+                 .is-active {
+                     background-color: var(--labelpage-background__active);
+                     overflow: hidden;
+
+                     .el-icon-refresh-right {
+                         width: 14px;
+                         transition: all 0.3s;
+
+                         &:hover {
+                             color: var(--labelpage-icon-color__hover);
+                         }
+                     }
+
+                     span,
+                     i {
+                         color: var(--labelpage-color__active);
+                     }
+
+                     .active {
+                         transform: rotate(360deg);
+                         transition: all 0.5s;
+                     }
+                 }
+             }
+         }
+
+         .el-tabs__content {
+             height: 100%;
+
+             .el-tab-pane {
+                 height: 100%;
+             }
+         }
+     }
+
+     .tabs-refresh {
+         position: absolute;
+         right: 30px;
+         top: 10px;
+         z-index: 1;
+         cursor: pointer;
+
+         &:hover {
+             color: var(--button-primary-color);
+         }
+
+         i {
+             color: var(--button-primary-color);
+             font-weight: 600;
+             font-size: 20px;
+         }
+     }
+ }

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/indexRightContent/labelPage/index.vue

@@ -0,0 +1,432 @@
+<template>
+    <el-main class="container-main">
+        <el-tabs @contextmenu.prevent="openContextMenu($event)" v-model="editableTabsValue" type="card" closable
+            @tab-remove="removeTab" @tab-click="tabClick" class="tabs-page-container">
+            <el-tab-pane v-for="(item, index) in editableTabs" :key="item.route" :label="item.title"
+                :disabled="item.disabled" :name="item.name">
+                <template v-slot:label>
+                    <i :class="'iconfont ' + item.icon"></i>
+                    <span ref="tab-title" :res="index">{{ item.title }}</span>
+                </template>
+                <Suspense>
+                    <!-- 通过/Index/jumpIframe/  **  跳转 frame -->
+                    <router-view v-slot="{ Component }" :key="item.route" :editableTabs="editableTabs"
+                        :editableTabsValue="editableTabsValue">
+                        <component :ref="item.route" :is="Component" />
+                    </router-view>
+                </Suspense>
+            </el-tab-pane>
+        </el-tabs>
+        <span class="tabs-refresh">
+            <el-tooltip class="box-item" effect="dark" :content="$t('login.contextMenu.reload')" placement="bottom"
+                popper-class="topToolTip">
+                <el-icon @click.stop.prevent="refresh" class="active">
+                    <RefreshRight />
+                </el-icon>
+            </el-tooltip>
+        </span>
+    </el-main>
+</template>
+
+<script>
+import ContextMenu from '@/components/contextMenu'
+const firstTab = '1'
+export default {
+    props: {
+        allMenus: {
+            type: Array,
+            default: () => []
+        },
+    },
+    inject: ['routesToName', 'outerLinkMap', 'routesToIcon', 'config'],
+
+    data() {
+        return {
+            editableTabs: [],
+            refreshName: '',
+            editableTabsValue: '',
+            isActive: false,
+            menuActive: ''
+        }
+    },
+    mounted() {
+        window.addEventListener('message', e => {
+            if (e.data && typeof e.data == 'object' && 'setMenu' in e.data) {
+                // 传递被删除的菜单项的route到Index组件中
+                this.resetMenu({ route: e.data.route, setMenu: e.data.setMenu })
+            }
+        })
+        window.addEventListener('keyup', e => {
+            this.keyEvent(e)
+        })
+        this.$bus.on('openPage', data => {
+            const { changePath, callback } = data
+            this.$router.push(changePath)
+            if (callback) {
+                this.$nextTick(() => {
+                    callback()
+                })
+            }
+        })
+        // 外挂链接
+        window.openModulePage = this.openModulePage
+        window.refreshModulePage = this.refreshModulePage
+        window.closeModulePage = this.closeModulePage
+    },
+    watch: {
+        editableTabsValue(val) {
+            localStorage.editableTabsValue = val
+        },
+        allMenus: {
+            handler(val) {
+                if (!val.length) {
+                    return;
+                }
+                this.init()
+            },
+            immediate: true
+        },
+        $route() {
+            try { ContextMenu.close() } catch (e) {
+                console.log(e)
+            }
+
+            this.init()
+        }
+    },
+    methods: {
+        init() {
+            let { customize, title, icon, url } = this.$route.query
+            if (customize) {
+                this.openModulePageHandle(title, icon, url)
+            } else {
+                this.updateTabs()
+            }
+        },
+        updateTabs() {
+            this.$nextTick(() => {
+                let fullPath = decodeURIComponent(this.$route.fullPath)
+                let path = decodeURIComponent(this.$route.path)
+                let routesToIcon = this.routesToIcon || {}
+                let routesToName = this.routesToName || {}
+                let icon = routesToIcon[fullPath + 'icon'] || routesToIcon[path + 'icon']
+                if (this.$route.fullPath != '/Index') {
+                    this.$nextTick(() => {
+                        if (this.$route?.query?.currentPageName) {
+                            this.setTableTabs(this.$route.query.currentPageName, icon)
+                            return
+                        }
+                        let name = routesToName[fullPath] || routesToName[path]
+                        this.setTableTabs(name || this.$t('login.noAccess.noPage'), icon)
+                    })
+                }
+            })
+        },
+        resetMenu(data) {
+            // 判断是否删除标签页
+            if (data.route) {
+                // 找到标签页中被删除的菜单
+                this.editableTabs.forEach(item => {
+                    if (data.route == item.route) {
+                        this.removeTab(item.name)
+                    }
+                })
+            }
+        },
+
+        tabClick(event) {
+            this.refreshName = event.props.label
+            let result = (this.editableTabs instanceof Object) ? JSON.parse(JSON.stringify(this.editableTabs)) : []
+            result = result.filter(item => {
+                return item.title == event.props.label
+            })
+            let route = result[0].route
+            this.menuActive = route
+            this.$router.push(route)
+        },
+        openContextMenu(e) {
+            function getTabName(element) {
+                if (!e.currentTarget.contains(element)) {
+                    return ''
+                }
+                if (element.classList.contains('el-tabs__item')) {
+                    return element.id.split('-')[1]
+                }
+                return getTabName(element.parentElement)
+            }
+            let targetName = getTabName(e.target)
+            if (targetName === '') return
+            let startIndex = this.editableTabs.findIndex(i => i.name == targetName)
+            ContextMenu({
+                width: '150',
+                root: e.currentTarget,
+                left: e.clientX,
+                top: e.clientY,
+                commands: [
+                    {
+                        name: 'closeCurrent',
+                        label: this.$t('login.contextMenu.close'),
+                        icon: 'icon-tubiao24_guanbi',
+                        onclick: () => {
+                            this.removeTab(targetName)
+                        },
+                        disabled: this.editableTabs.length <= 1
+                    },
+                    {
+                        name: 'closeOther',
+                        label: this.$t('login.contextMenu.closeOther'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.filter(i => i.name != targetName).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: this.editableTabs.length <= 1
+                    },
+                    {
+                        name: 'closeLeft',
+                        label: this.$t('login.contextMenu.closeLeft'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.slice(0, startIndex).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: startIndex == 0
+                    },
+                    {
+                        name: 'closeRight',
+                        label: this.$t('login.contextMenu.closeRight'),
+                        onclick: async () => {
+                            let toBeCloses = this.editableTabs.slice(startIndex + 1).map(i => i.name)
+                            for (let item of toBeCloses) {
+                                await this.removeTab(item)
+                            }
+                        },
+                        disabled: startIndex == this.editableTabs.length - 1
+                    },
+                    {
+                        name: 'reload',
+                        label: this.$t('login.contextMenu.reload'),
+                        icon: 'icon-tubiao24_qiehuan',
+                        onclick: () => {
+                            this.refreshTab(startIndex)
+                        },
+                        disabled: false
+                    }
+                ]
+            })
+        },
+        // 关闭标签页
+        removeTab(targetName) {
+            if (this.editableTabs.length == 1) return;
+            let tabs = JSON.parse(JSON.stringify(this.editableTabs))
+            let activeNameIndex = this.editableTabsValue
+            this.editableTabs.forEach(item => {
+                if (item.name == targetName) {
+                    item.disabled = true
+                }
+            })
+            return new Promise((resolve => {
+                tabs.forEach((tab, index) => {
+                    if (tab.name === targetName) {
+                        if (activeNameIndex === targetName) {
+                            let nextTab = tabs[(index != 0 ? index - 1 : index + 1)]
+                            if (nextTab) {
+                                activeNameIndex = nextTab.name
+                                localStorage.menuActiveName = nextTab.title
+                                this.menuActive = nextTab.route
+                                this.$router.push(nextTab.route)
+                                this.refreshName = nextTab.title
+                            }
+                            this.editableTabs[index].disabled = true
+                        }
+                        let routerPath = this.editableTabs[index].route
+                        if (routerPath && this.$refs[routerPath]?.[0]?.executeIframeFun) {
+                            this.$refs[routerPath][0].executeIframeFun(() => {
+                                let tagIndex = tabs.findIndex(i => i.name === targetName)
+                                this.editableTabs.splice(tagIndex, 1)
+                                resolve(true)
+                            })
+                        }
+                    }
+                })
+            }))
+
+        },
+
+        // 刷新标签页
+        refresh() {
+            try {
+                let dom = document.querySelectorAll('.tabs-page-container .el-tabs__item.is-active')
+                let index = dom[0].children[1].attributes.res.value
+                this.refreshTab(index)
+            } catch (e) {
+                console.log(e)
+            }
+        },
+        refreshTab(index) {
+            this?.$store?.commit("setLoadingStatus", true)// 防止多次刷新
+            let routerPath = this.editableTabs[index].route
+            if (this.$refs[routerPath]?.[0]?.executeIframeFun) {
+                this.$refs[routerPath][0].executeIframeFun()
+            }
+            this.editableTabs[index].route = ''
+            this.isActive = true
+            setTimeout(() => {
+                this.editableTabs[index].route = routerPath
+                this.isActive = false
+            }, 100)
+        },
+
+        setTableTabs(title, icon) {
+
+            let len = this.editableTabs.length
+            // 判断标签页数组是否存在当前选中导航项
+            // this.editableTabs[index]
+            let isHave = false
+            let fullPath = this.$route.fullPath
+            let noPage = this.$t('login.noAccess.noPage')
+
+            this.editableTabs.forEach(item => {
+                let isRefreshTab = item.route.includes(this.$route.path) && fullPath.includes('refreshTab=true')
+                if (item.route == fullPath || isRefreshTab) {
+                    isHave = true
+                }
+                if (isRefreshTab) {
+                    item.route = fullPath
+                }
+                if (item.title == title && noPage == title) {
+                    isHave = true
+                }
+            })
+
+            // 如果不存在则增加一项进数组，存在则只做标签页选中
+            if (!isHave) {
+                this.editableTabs.push({
+                    title: title,
+                    route: this.$route.fullPath,
+                    name: len ? String(Number(this.editableTabs[len - 1].name) + 1) : firstTab,
+                    disabled: false,
+                    icon: icon
+                })
+                len = this.editableTabs.length
+                this.editableTabsValue = this.editableTabs[len - 1].name
+                let n = this.editableTabs[0].name
+
+                if (len > 6) {
+                    this.removeTab(n)
+                    len--
+                }
+            } else {
+                for (let i = 0; i < len; i++) {
+                    const { route, name } = this.editableTabs[i]
+                    let isRefreshTab = route.includes(this.$route.path) && this.$route.fullPath.includes('refreshTab=true')
+                    if (this.$route.fullPath == route || isRefreshTab) {
+                        this.editableTabsValue = name
+                        if (isRefreshTab) {
+                            this.refreshTab(i)
+                        }
+                        break
+                    }
+                }
+            }
+            this.refreshName = localStorage.menuActiveName = title
+        },
+
+        keyupJump(num) {
+            let length = this.editableTabs.length;
+            for (let i = 0; i < length; i++) {
+                if (num == -1 && i != 0 && this.editableTabs[i].name == this.editableTabsValue) {
+                    this.$router.push(this.editableTabs[i - 1].route);
+                } else if (num == 1 && i != length - 1 && this.editableTabs[i].name == this.editableTabsValue) {
+                    this.$router.push(this.editableTabs[i + 1].route);
+                }
+            }
+        },
+
+        keyEvent(e) {
+            if (e.altKey && e.keyCode == 188) {
+                this.keyupJump(-1);
+            } else if (e.altKey && e.keyCode == 190) {
+                this.keyupJump(1);
+            }
+        },
+
+        openModulePage(hasPage = false, url, title = "模板管理", icon = "icon-caidan_shebeiliebiao", packageId = "", pluginName = "", menuName = "", customParameters = "") {
+            let query = hasPage ? {} : {
+                customize: true,
+                title: title,
+                icon: icon,
+                url: url,
+                packageId: packageId,
+                pluginName: pluginName,
+                menuName: menuName,
+                customParameters: customParameters
+            }
+            this.$router.push({ path: url, query: query })
+        },
+        openModulePageHandle(title, icon, url) {
+            let len = this.editableTabs.length
+            let isHave = false// 判断标签页数组是否存在当前选中导航项
+            let fullPath = url
+            this.editableTabs.forEach(item => {
+                let isRefreshTab = item.route.includes(fullPath)
+                if (item.route == fullPath) {
+                    isHave = true
+                }
+                if (isRefreshTab) {
+                    item.route = fullPath
+                }
+            })
+
+            // 如果不存在则增加一项进数组，存在则只做标签页选中
+            if (!isHave) {
+                this.editableTabs.push({
+                    title: title,
+                    route: fullPath,
+                    name: len ? String(Number(this.editableTabs[len - 1].name) + 1) : firstTab,
+                    disabled: false,
+                    icon: icon
+                })
+
+                len = this.editableTabs.length
+                this.editableTabsValue = this.editableTabs[len - 1].name
+                let n = this.editableTabs[0].name
+                if (len > 6) {
+                    this.removeTab(n)
+                    len--
+                }
+            } else {
+                for (let i = 0; i < len; i++) {
+                    const { route, name } = this.editableTabs[i]
+                    let isRefreshTab = route.includes(fullPath)
+                    if (fullPath == route) {
+                        this.editableTabsValue = name
+                        if (isRefreshTab) {
+                            this.refreshTab(i)
+                        }
+                        break
+                    }
+                }
+            }
+            this.refreshName = localStorage.menuActiveName = title
+        },
+        refreshModulePage() {
+            this.refresh()
+        },
+        closeModulePage(path) {
+            if (path) {
+                this.editableTabs.forEach(item => {
+                    if (item.route.includes(path)) {
+                        this.removeTab(item.name)
+                    }
+                })
+            } else {
+                this.removeTab(this.editableTabsValue)
+            }
+        }
+    }
+}
+</script>
+<style src="./index.scss" scoped></style>

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/indexRightContent/normalPage/index.js

@@ -0,0 +1,82 @@
+export default {
+    name: 'NormalPage',
+    props: {
+        allMenus: {
+            type: Array,
+            default: () => []
+        }
+    },
+    inject: ['routesMap', 'routesToName'],
+    data() {
+        return {
+            breadcrumbList: []
+        }
+    },
+    watch: {
+        '$route.fullPath': {
+            handler() {
+                this.initBreadcrumb()
+            },
+            immediate: true,
+            deep: true
+        }
+    },
+    mounted() {
+        this.initBreadcrumb()
+    },
+    methods: {
+
+        /**
+         * 初始化面包屑
+         */
+        initBreadcrumb() {
+            this.getBreadcrumbList(this.$route)
+        },
+
+        /**
+         * 获取面包屑路径
+         * @param {Object} currentRoute - 当前路由对象
+         */
+        getBreadcrumbList(currentRoute) {
+            const breadcrumb = []
+            const routePath = decodeURIComponent(currentRoute.fullPath || currentRoute)
+
+            // 移除查询参数
+            const routeWithoutQuery = routePath.includes('?')
+                ? routePath.split('?')[0]
+                : routePath
+
+            // 从 allMenus 中查找当前路由的路径
+            const findBreadcrumbPath = (menus, targetRoute, path = []) => {
+                for (const menu of menus) {
+                    const menuRoute = menu.route && menu.route.includes('?')
+                        ? menu.route.split('?')[0]
+                        : menu.route
+
+                    if (menuRoute === routeWithoutQuery) {
+                        // 找到匹配项，添加到路径
+                        return [...path, { title: menu.name }]
+                    }
+
+                    if (menu.children && menu.children.length > 0) {
+                        const result = findBreadcrumbPath(menu.children, targetRoute, [...path, { title: menu.name }])
+                        if (result.length > 0) {
+                            return result
+                        }
+                    }
+                }
+                return []
+            }
+
+            if (this.allMenus && this.allMenus.length > 0) {
+                const path = findBreadcrumbPath(this.allMenus, routeWithoutQuery)
+                this.breadcrumbList = path
+            }
+
+            // 如果没有找到面包屑，尝试使用 routesToName
+            if (this.breadcrumbList.length === 0 && this.routesToName[routeWithoutQuery]) {
+                this.breadcrumbList = [{ title: this.routesToName[routeWithoutQuery] }]
+            }
+        }
+    }
+}