@ganwei-web/ganwei-pc-cli 6.2.1 → 6.2.3

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/NavigationBar/components/NavBarItemBack.vue

@@ -0,0 +1,18 @@
+<template>
+    <div @click="data.onClick">
+        <template v-if="data.icon">
+            <i class="iconfont-app" :class="data.icon"></i>
+        </template>
+        <template v-if="data.img">
+            <img :src="data.img" alt="" />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { INavItemBack } from '@ganwei-web/gw-app-mfe';
+
+defineProps<{ data: INavItemBack }>()
+</script>
+
+<style lang="scss" scoped></style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/NavigationBar/components/NavBarItemCommon.vue

@@ -0,0 +1,13 @@
+<template>
+    <div @click="data.onClick">
+        {{ data.title }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import { INavItemCommon } from '@ganwei-web/gw-app-mfe';
+
+const props = defineProps<{ data: INavItemCommon }>()
+</script>
+
+<style lang="scss" scoped></style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/NavigationBar/components/NavBarItemLogo.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="nav-bar-item-logo" @click="data.onClick">
+        <template v-if="data.icon">
+            <i class="iconfont-app" :class="data.icon"></i>
+        </template>
+        <template v-if="data.img">
+            <img :src="data.img" alt="" />
+        </template>
+        <span class="title">{{ $t(data.title) || '' }}</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { INavItemLogo } from '@ganwei-web/gw-app-mfe';
+
+const props = defineProps<{ data: INavItemLogo }>()
+</script>
+
+<style lang="scss" scoped>
+.nav-bar-item-logo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    i {
+        text-align: center;
+    }
+
+    .title {
+        font-size: 12px;
+    }
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/NavigationBar/index.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="appTop flex-between-center" :class="classLists">
+        <div class="left">
+            <template v-for="leftItem in options.leftItems" :key="leftItem.title">
+                <NavBarItem :data="leftItem"></NavBarItem>
+            </template>
+        </div>
+        <div class="center">
+            <template v-for="centerItem in options.centerItems" :key="centerItem.title">
+                <NavBarItem :data="centerItem"></NavBarItem>
+            </template>
+        </div>
+        <div class="right iconInfo flex-between-center flex-column">
+            <template v-for="rightItem in options.rightItems" :key="rightItem.title">
+                <NavBarItem :data="rightItem"></NavBarItem>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { NavigationBarType } from '@ganwei-web/gw-app-mfe';
+
+import NavBarItem from './components/NavBarItem.vue';
+import { INavigationBar } from './models';
+
+const props = withDefaults(defineProps<INavigationBar>(), {
+    options: () => ({
+        type: NavigationBarType.Page,
+        leftItems: [],
+        centerItems: [],
+        rightItems: []
+    })
+})
+
+const classLists = computed(() => {
+
+    return {
+        ['Nav-' + props.options.type]: true
+    }
+})
+</script>
+
+<style lang="scss">
+.appTop {
+    padding: 0 16px;
+}
+
+.Nav-Page {
+    height: 70px;
+
+    .left {
+        // font-size: 34px;
+    }
+
+    .right i {
+        font-size: 34px;
+    }
+}
+
+.Nav-Bar {
+    height: 48px;
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/NavigationBar/models/index.ts

@@ -0,0 +1,10 @@
+import { NavigationBarType, NavItem } from '@ganwei-web/gw-app-mfe'
+
+export interface INavigationBar {
+    options: {
+        type: NavigationBarType
+        leftItems: NavItem[]
+        rightItems: NavItem[]
+        centerItems: NavItem[]
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/appFrame.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="appFrame wh100">
+        <appTop :leftText='leftText' :leftIcon='leftIcon' :leftIconSize='leftIconSize' :centerText="centerText"
+            :rightIcon='rightIcon' :rightIconTip='rightIconTip' :rightIconTipColor='rightIconTipColor'
+            :rightIconSize='rightIconSize' :rightIconTipSize='rightIconTipSize' @rightClick='rightClick'
+            :scrollable="scrollable" :qrcode="qrcode" :camera="camera" @changeCamera="changeCamera"
+            @changeQrcode="changeQrcode" @onRichScanCallback="onRichScanCallback">
+            <template v-slot:header-left>
+                <slot name="header-left" />
+            </template>
+            <template v-slot:header-center>
+                <slot name="header-center" />
+            </template>
+            <template v-slot:header-right>
+                <slot name="header-right" />
+            </template>
+        </appTop>
+        <div class="appFrameMain" @touchstart.stop='start' @touchend.stop='end' :style="{ padding: padding }">
+            <slot></slot>
+        </div>
+        <appBottom v-if="showBottom" :selected='selected'></appBottom>
+    </div>
+</template>
+<script lang="ts" setup>
+import appBottom from './bottom.vue'
+import useGesture from './js/useGestrue'
+import appTop from './top.vue'
+
+interface ITopEmits {
+    (e: 'rightClick'): void
+    (e: 'changeCamera', camera: string): void
+    (e: 'changeQrcode', qrcode: boolean): void
+    (e: 'onRichScanCallback', res: unknown): void
+}
+
+const props = withDefaults(defineProps<{
+    padding: string,
+    leftText: string,
+    leftIcon: string,
+    leftIconSize: number,
+    showBottom: boolean,
+    selected: number,
+    centerText: string,
+    rightIcon: string,
+    rightIconSize: number,
+    rightIconTip: string,
+    rightIconTipSize: number,
+    rightIconTipColor: string,
+    touchBack: boolean,
+    scrollable: boolean
+    qrcode: boolean,
+    camera: string
+}>(), {
+    padding: '0 16px',
+    leftIconSize: 20,
+    showBottom: true,
+    selected: 0,
+    rightIconSize: 30,
+    rightIconTipSize: 10,
+    touchBack: false,
+    scrollable: false,
+    qrcode: false,
+    camera: 'off',
+})
+
+const emit = defineEmits<ITopEmits>()
+
+const { start, end } = useGesture(props)
+
+const rightClick = () => {
+    emit('rightClick')
+}
+const changeCamera = (e: string) => {
+    emit('changeCamera', e)
+}
+
+const changeQrcode = (e: boolean) => {
+    emit('changeQrcode', e)
+}
+
+const onRichScanCallback = (res: string) => {
+    emit('onRichScanCallback', res)
+}
+
+</script>
+
+<style lang='scss'>
+.content {
+    width: 100%;
+    height: 100%;
+}
+
+.appFrame {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+
+    .appFrameMain {
+        overflow: hidden;
+
+        // height: calc(100% - 70px - 54px);
+        flex: 1;
+
+        width: 100%;
+        padding: 0 16px;
+
+        background-color: var(--frame-main-background);
+
+        &>div {
+            overflow: auto;
+            height: 100%;
+        }
+    }
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/bottom.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="appBottom flex-between-center" id="voiceImg"
+        v-if="(showBottomMenu && selectedIndex > -1) || $route.params.packageName == 'ganwei-app-empty-page'">
+        <div class="iconItem flex-center" v-for="(item, index) in iconList" :key="index"
+            @click="appBottomSelect(index, item)">
+            <div class="bottom-item" :class="selectedIndex == index ? 'bottom-item-active' : ''">
+                <i :class='selectedIndex==index?item.icon:item.icon' class="iconfont-app bottom-item-icon"></i>
+                <p class="bottom-item-txt" >{{ item.name }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { MenuItem } from '@/models';
+
+const $route = useRoute()
+const $router = useRouter()
+
+const showBottomMenu = ref(true)
+const selectedIndex = ref(0)
+
+const iconList = ref<MenuItem[]>([])
+
+const getBottomMenu = () => {
+    let menu = JSON.parse(sessionStorage.menu) as MenuItem[]
+    iconList.value = menu.filter(i => i.isAppBottomMenu)
+}
+
+const getBottomIndex = () => {
+    return iconList.value.findIndex(
+        icon => {
+            const packageName = ($route.params?.packageName as string)?.toLowerCase()
+            return icon.route.toLocaleLowerCase().includes(packageName)
+        }
+    );
+}
+
+const updateMenu = () => {
+    getBottomMenu()
+    selectedIndex.value = getBottomIndex();
+    if(selectedIndex.value > -1) {
+        $router.push(iconList.value[selectedIndex.value].route)
+        return
+    }
+    if(iconList.value.length > 0) {
+        $router.push(iconList.value[0].route)
+        return
+    }
+    console.error('BottomMenu is empty');
+}
+
+const appBottomSelect = (index: number, item: MenuItem) => {
+    selectedIndex.value = index;
+    $router.push(item.route);
+}
+
+watch(() => $route.path, () => {
+    selectedIndex.value = getBottomIndex();
+    if (selectedIndex.value === -1) {
+        showBottomMenu.value = false;
+        return;
+    }
+    showBottomMenu.value = true;
+})
+
+onMounted(() => {
+    updateMenu()
+})
+
+</script>
+
+<style lang='scss' src='./css/bottom.scss' scoped></style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/css/bottom.scss

@@ -0,0 +1,54 @@
+.appBottom {
+    user-select: none;
+
+    position: fixed;
+    z-index: 8;
+    bottom: 0;
+
+    width: 100%;
+    height: 54px;
+
+    background-color: var(--snapshot-item-bg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
+
+    .iconItem {
+        width: 75px;
+        height: 20px;
+
+        // margin-top: 8px;
+        color: white;
+
+        i {
+            font-size: 24px;
+        }
+
+        .voice-txt {
+            position: absolute;
+            bottom: 7px;
+            font-size: 10px;
+            color: var(--appBottom-color);
+        }
+    }
+
+    .bottom-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: var(--appBottom-color);
+
+        .bottom-item-icon {
+            margin-bottom: 4px;
+            font-size: 24px;
+        }
+
+        .bottom-item-txt {
+            font-size: 10px;
+        }
+    }
+
+    .bottom-item-active .iconfont-app {
+        color: #5697ff;
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/css/top.scss

@@ -0,0 +1,44 @@
+.appTop {
+    @include userselect;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 16px;
+
+    color: var(--appTop-color);
+
+    background-color: var(--appFrameMain-bg);
+
+    &.scrollable {
+        z-index: 1000;
+        background: var(--appTop-scrollBg);
+        backdrop-filter: blur(22px);
+    }
+
+    .leftText {
+        margin-top: 14px;
+        margin-bottom: 22px;
+        font-size: 34px;
+    }
+
+    .leftIcon {
+        height: 48px;
+        font-size: 20px;
+        line-height: 48px;
+    }
+
+    .iconTip {
+        font-size: 14px;
+    }
+
+    .left,
+    .center,
+    .right {
+        min-width: 20px;
+    }
+
+    .header-center {
+        font-size: 18px;
+        font-weight: 600;
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/js/useGestrue.ts

@@ -0,0 +1,22 @@
+import { useRouter } from 'vue-router'
+
+export default function (props: { touchBack: boolean }) {
+    let startX = 0
+    const router = useRouter()
+    const start = (e: TouchEvent) => {
+        startX = e.changedTouches[0].clientX
+    }
+
+    const end = (e: TouchEvent) => {
+        if (startX <= 50 && e.changedTouches[0].clientX - startX > 80) {
+            if (props.touchBack) {
+                router.back()
+            }
+        }
+    }
+
+    return {
+        start,
+        end
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/appFrame/top.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="appTop flex-between-center" :class="{ scrollable: scrollable, marginBottom: !leftText }">
+        <div class="left">
+            <slot name="header-left"></slot>
+            <div v-if="leftText" class="leftText">
+                {{ leftText }}
+            </div>
+            <div class='leftIcon' v-if="leftIcon" @click="back">
+                <i class="iconfont-app" :style="{ fontSize: leftIconSize + 'px' }" :class="leftIcon"></i>
+            </div>
+        </div>
+        <div class="center">
+            <div v-if="centerText" class="topTitle" :style="{ fontSize: titleSize + 'px' }">{{ centerText }}</div>
+            <slot name="header-center"></slot>
+        </div>
+        <div class="right iconInfo flex-between-center flex-column" @click="rightClick">
+            <i v-if="rightIcon" :class='rightIcon' :style="{ fontSize: rightIconSize + 'px' }" class="iconfont-app"></i>
+            <span v-if="rightIconTip" :style="{ fontSize: rightIconTipSize + 'px', color: rightIconTipColor }"
+                class='iconTip'>{{ rightIconTip }}</span>
+            <slot name="header-right"></slot>
+        </div>
+        <QRCode :qrcode="qrcode" v-if="qrcode" :camera="camera" @changeCamera="changeCamera"
+            @changeQrcode="changeQrcode" @onRichScanCallback="onRichScanCallback" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+import QRCode from "@/components/qrcodeReader/qrcodeReader.vue";
+
+interface ITopProps {
+    leftText: string,
+    leftIcon: string,
+    leftIconSize: number,
+    centerText: string,
+    titleSize: number,
+    rightIcon: string,
+    rightIconSize: number,
+    rightIconTip: string,
+    rightIconTipSize: number,
+    rightIconTipColor: string,
+    touchBack: boolean,
+    scrollable: boolean,
+    camera: string
+    qrcode: boolean
+}
+
+interface ITopEmits {
+    (e: 'rightClick'): void
+    (e: 'changeCamera', camera: string): void
+    (e: 'changeQrcode', qrcode: boolean): void
+    (e: 'onRichScanCallback', res: string): void
+}
+
+const props = withDefaults(
+    defineProps<ITopProps>(),
+    {
+        leftIconSize: 20,
+        titleSize: 18,
+        rightIconSize: 30,
+        rightIconTipSize: 10,
+        touchBack: false,
+        scrollable: false,
+        qrcode: false,
+        camera: 'off',
+    }
+)
+
+const emit = defineEmits<ITopEmits>()
+
+const router = useRouter()
+
+const back = () => {
+    router.back()
+}
+const rightClick = () => {
+    emit('rightClick')
+}
+const changeCamera = (e: string) => {
+    emit('changeCamera', e)
+}
+
+const changeQrcode = (e: boolean) => {
+    emit('changeQrcode', e)
+}
+
+const onRichScanCallback = (res: string) => {
+    emit('onRichScanCallback', res)
+}
+</script>
+
+<style lang='scss' src='./css/top.scss'></style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/loading/index.vue

@@ -0,0 +1,71 @@
+
+<template>
+    <div id="menu-loading-center">
+        <div>
+            <div id="loading-center-absolute">
+                <div class="object"><img :src="IMAGE_BASE + 'index-loading.png'" /></div>
+            </div>
+            <!-- <p class="menu-loading-text">{{ $t('login.tips.loading') }}…</p> -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    data () {
+        return {
+            text: null,
+            IMAGE_BASE: import.meta.env.VITE_IMAGE_BASE
+
+        };
+    },
+    methods: {
+
+    }
+};
+</script>
+<style scoped lang="scss">
+#menu-loading-center {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: auto;
+    height: auto;
+
+    background: var(--loading-bgColor);
+}
+
+#menu-loading-center>div {
+    transform: scale(0.6);
+    display: inline-block;
+    text-align: center
+}
+
+.menu-loading-text {
+    margin-top: 10px;
+    color: var(--frame-main-color);
+}
+
+#loading-center-absolute {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 70px;
+    height: 70px;
+}
+
+.object {
+    position: absolute;
+}
+
+.object img {
+    width: 100px;
+    height: auto;
+}
+</style>