eta_mobile_front/src/views/tabbar/Home.vue

<script setup>
import {ref,computed} from 'vue'
import { useRouter } from "vue-router";
import {apiMenuList, _apiLogin} from '@/api/user'
import {getStaticImg} from '@/hooks/common'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import { showToast } from 'vant';
import { useWindowSize } from '@vueuse/core'
import {usePublicSettingStore} from '@/store/modules/publicSetting'
import useLocaleStore from "@/store/modules/i18n";

const publicSettingStore = usePublicSettingStore()
const { width } = useWindowSize()
const cachedViewsStore=useCachedViewsStore()
cachedViewsStore.removeCaches(-1)
const localeStore = useLocaleStore()
const router=useRouter()
const temp = localeStore.locale === 'zhCn' ? 'zh' : 'en'; //根据当前i18n语言设置表格默认语言
const language_version=ref(temp)//语言版本 zh en 

function goNext(path){
    if(!path){
        showToast('功能开发中，敬请期待！')
        return
    }
    const routerEl=router.resolve({path})
    window.open(routerEl.href,'_blank')
}

if(!localStorage.getItem('token')){
    router.replace('/login')
}

function languageVersionChange(){
    if(language_version.value==='zh'){
        language_version.value='en'
        localeStore.SET_LOCALE('en')
    }else{
        language_version.value='zh'
        localeStore.SET_LOCALE('zhCn')
    }
}
const topImg=computed(()=>{
    let url=''
    if(width.value>650){//大屏
        if(language_version.value==='zh'){
            url='https://hzstatic.hzinsights.com/static/ETA_mobile/tabbar_home_topimg_en_big.png'
        }else{
            url='https://hzstatic.hzinsights.com/static/ETA_mobile/tabbar_home_topimg_zh_big.png'
        }
    }else{
        if(language_version.value==='zh'){
            url='https://hzstatic.hzinsights.com/static/ETA_mobile/tabbar_home_topimg_en.png'
        }else{
            url='https://hzstatic.hzinsights.com/static/ETA_mobile/tabbar_home_topimg_zh.png'
        }
    }
    return url
})
/**
 * zhName 显示的中文版名称
 * enName 显示的英文版名称
 * key 对应接口中的 name
 * level 说明该菜单在数据中的第几级查找
 * type 类型 zh中文 en英文 ==> 默认中文点击切换
 */
// const menuConfig=[
//     // {
//     //     zhName:'中文研报',
//     //     zhDes:'研报一体化管理',
//     //     key:'研报列表',
//     //     type:'zh',
//     //     level:2,
//     //     path:'/report/list',
//     //     icon:getStaticImg('tabbar/icon_report.png'),
//     //     backgroundColor:'#FFFBF6',
//     //     show:false
//     // },
//     // {
//     //     zhName:'英文研报',
//     //     zhDes:'支持共享协作编辑',
//     //     enName:'English Research Report',
//     //     enDes:'Integrated Research Report Management',
//     //     key:'英文研报',
//     //     type:'zh',
//     //     level:2,
//     //     path:'/reportEn/list',
//     //     icon:getStaticImg('tabbar/icon_report.png'),
//     //     backgroundColor:'#FFFBF6',
//     //     show:false
//     // },
//     {
//         zhName:'智能PPT',
//         zhDes:"支持共享协作编辑",
//         enName:'PPT Slides',
//         enDes:'Support for collaborative editing',
//         key:'智能ppt',
//         type:'zh',
//         level:1,
//         path:'/ppt/index',
//         icon:getStaticImg('tabbar/icon_PPT.png'),
//         backgroundColor:'#FFF5F3',
//         show:false
//     },
//     {
//         zhName:'英文ppt',
//         zhDes:'支持共享协作编辑',
//         enName:'ppt in English',
//         enDes:'Support for collaborative editing',
//         key:'英文ppt',
//         type:'zh',
//         level:1,
//         path:'/ppten/index',
//         icon:getStaticImg('tabbar/icon_PPT.png'),
//         backgroundColor:'#FFF5F3',
//         show:false
//     },
//     // {
//     //     zhName:'数据源',
//     //     zhDes:'数据对接与整合',
//     //     key:'数据源',
//     //     type:'zh',
//     //     level:1,
//     //     path:'',
//     //     icon:getStaticImg('tabbar/icon_dataSource.png'),
//     //     backgroundColor:'#F8F9FF',
//     //     show:false
//     // },
//     {
//         zhName:'指标库',
//         zhDes:'数据归类与分析',
//         enName:'Indics',
//         enDes:'Support for collaborative editing',
//         key:'指标库',
//         type:'zh',
//         level:1,
//         path:'/dataEDB/index',
//         icon:getStaticImg('tabbar/icon_EDB.png'),
//         backgroundColor:'#F5FAFF',
//         show:false
//     },
//     // {
//     //     zhName:'预测指标',
//     //     zhDes:'模型预测趋势',
//     //     key:'预测指标',
//     //     type:'zh',
//     //     level:1,
//     //     path:'',
//     //     icon:getStaticImg('tabbar/icon_preEDB.png'),
//     //     backgroundColor:'#FFF5F3',
//     //     show:false
//     // },
//     {
//         zhName:'图库',
//         zhDes:'数据可视化平台',
//         enName:'Charts',
//         enDes:'Support for collaborative editing',
//         key:'图库',
//         type:'zh',
//         level:1,
//         path:'/chartETA/list',
//         icon:getStaticImg('tabbar/icon_chart.png'),
//         backgroundColor:'#F8F9FF',
//         show:false
//     },
//     {
//         zhName:'我的图库',
//         zhDes:'图表收藏',
//         enName:'My Charts',
//         enDes:'Support for collaborative editing',
//         key:'我的投研',
//         type:'zh',
//         level:1,
//         path:'/myETA/index',
//         icon:getStaticImg('tabbar/icon_myChart.png'),
//         backgroundColor:'#F5FAFF',
//         show:false
//     },
//     {
//         zhName:'表格',
//         zhDes:'快速建立平衡表',
//         enName:'Tables',
//         enDes:'Quickly establish a balance sheet',
//         key:'表格',
//         type:'zh',
//         level:1,
//         path:'/sheetList/index',
//         icon:getStaticImg('tabbar/icon_table.png'),
//         backgroundColor:'#FFFBF6',
//         show:false
//     },
// ]

// 新增一个用于映射语言版本的函数

const menuConfig=[
    {
        name:'国事研报',
        des:'全系统各类分析报告一体化展示平台',
        key:'国事研报',
        type:'zh',
        level:1,
        path:'/war_research_report/list',
        icon:getStaticImg('tabbar/icon_reportwar.png'),
        backgroundColor:'#F8F9FF',
        show:false
    },
    {
        name:'研报中心',
        des:'研报一体化管理',
        key:'研报中心',
        type:'zh',
        level:2,
        path:'/report/list',
        icon:getStaticImg('tabbar/icon_report.png'),
        backgroundColor:'#FFFBF6',
        show:false
    },
    {
        name:'英文研报',
        des:'研报一体化管理',
        key:'英文研报',
        type:'zh',
        level:2,
        path:'/reportEn/list',
        icon:getStaticImg('tabbar/icon_report.png'),
        backgroundColor:'#FFFBF6',
        show:false
    },
    {
        name:'智能PPT',
        des:"支持共享协作编辑",
        key:'智能ppt',
        type:'zh',
        level:1,
        path:'/ppt/index',
        icon:getStaticImg('tabbar/icon_PPT.png'),
        backgroundColor:'#FFF5F3',
        show:false
    },
    {
        name:'文档管理库',
        des:'支持上传文档报告',
        key:'文档管理库',
        type:'zh',
        level:2,
        path:'/external_report/list',
        icon:getStaticImg('tabbar/icon_report.png'),
        backgroundColor:'#FFFBF6',
        show:false
    },
    {
        name:'英文ppt',
        des:'支持共享协作编辑',
        key:'英文ppt',
        type:'zh',
        level:1,
        path:'/ppten/index',
        icon:getStaticImg('tabbar/icon_PPT.png'),
        backgroundColor:'#FFF5F3',
        show:false
    },
    // {
    //     name:'数据源',
    //     des:'数据对接与整合',
    //     key:'数据源',
    //     type:'zh',
    //     level:1,
    //     path:'',
    //     icon:getStaticImg('tabbar/icon_dataSource.png'),
    //     backgroundColor:'#F8F9FF',
    //     show:false
    // },
    {
        name:'指标库',
        des:'数据归类与分析',
        key:'指标库',
        type:'zh',
        level:1,
        path:'/dataEDB/index',
        icon:getStaticImg('tabbar/icon_EDB.png'),
        backgroundColor:'#F5FAFF',
        show:false
    },
    // {
    //     name:'预测指标',
    //     des:'模型预测趋势',
    //     key:'预测指标',
    //     type:'zh',
    //     level:1,
    //     path:'',
    //     icon:getStaticImg('tabbar/icon_preEDB.png'),
    //     backgroundColor:'#FFF5F3',
    //     show:false
    // },
    {
        name:'图库',
        des:'数据可视化平台',
        key:'图库',
        type:'zh',
        level:1,
        path:'/chartETA/list',
        icon:getStaticImg('tabbar/icon_chart.png'),
        backgroundColor:'#F8F9FF',
        show:false
    },
    {
        name:'我的图库',
        des:'图表收藏',
        key:'我的投研',
        type:'zh',
        level:1,
        path:'/myETA/index',
        icon:getStaticImg('tabbar/icon_myChart.png'),
        backgroundColor:'#F5FAFF',
        show:false
    },
    {
        name:'表格',
        des:'快速建立平衡表',
        key:'表格',
        type:'zh',
        level:1,
        path:'/sheetList/index',
        icon:getStaticImg('tabbar/icon_table.png'),
        backgroundColor:'#FFFBF6',
        show:false
    },
    {
        name:'Tables',
        des:'Quickly establish a balance sheet',
        key:'表格',
        type:'en',
        level:1,
        path:'/sheetList/index',
        icon:getStaticImg('tabbar/icon_table.png'),
        backgroundColor:'#FFFBF6',
        show:false
    },
];
function mapMenuToLanguage(item, language) {
    if (language === 'zh') {
        return { ...item, name: item.zhName, des: item.zhDes, type: 'zh' };
    } else {
        return { ...item, name: item.enName, des: item.enDes, type: 'en' };
    }
}

// 过滤出有权限的菜单项
const filteredMenuConfig = computed(() => {
    return menuConfig.filter(item => {
        // 根据菜单数据权限过滤
        const hasPermission = resMenuList.value.some(f => {
            if (item.level === 1) {
                return f.name.trim() === item.key;
            } else if (item.level === 2) {
                return (f.children || []).some(s => s.name.trim() === item.key);
            }
            return false;
        });
        return hasPermission;
    });
});

// 根据当前语言版本过滤并映射菜单项
// const menuOpts = computed(() => {
//     return filteredMenuConfig.value.map(item => mapMenuToLanguage(item, language_version.value));
// });

const menuOpts=computed(()=>{
    // 过滤中英文
    let arr=menuConfig.filter(item=>item.type===language_version.value)
    
    // 根据菜单数据权限过滤
    arr.forEach(item=>{
        if(item.level===1){
            resMenuList.value.forEach(f=>{
                if(f.name.trim()===item.key){
                    item.show=true
                }
            })
        }
        if(item.level===2){
            resMenuList.value.forEach(f=>{
                const arr=f.children||[]
                arr.forEach(s=>{
                    if(s.name.trim()===item.key){
                        item.show=true
                    }
                })
            })
        }
    })

    arr=arr.filter(item=>item.show)
    return arr||[]
})


// 获取菜单权限数据
const resMenuList=ref([])
async function getMenuList(){
    menuConfig.forEach(item=>{
        item.show=false
    })
    const res=await apiMenuList()
    if(res.Ret===200){
        resMenuList.value=res.Data.List||[]
    }
}

const getSetTitle=()=>{
    _apiLogin.getBaseInfo().then(res=>{
        if(res.Ret == 200){
            document.title=res.Data.TabNameMobile?res.Data.TabNameMobile.ConfVal:''
        }
    })
}

getMenuList()
getSetTitle()

</script>

<template>
    <div class="home-page">
        <img 
            class="top-img"
            :src="topImg" 
            alt=""
            @click="languageVersionChange"
        >

        <div class="list">
            <div 
                v-for="item in menuOpts"
                :key="item.name"
                :class="['item-box',
                    item.type==='en'?'item-box_en':'',
                    item.key==='国事研报'&&'full-item'
                ]"
                :style="{backgroundColor:item.backgroundColor}"
                @click="goNext(item.path)"
            >
                <img class="icon" :src="item.icon" alt="">
                <div class="content">
                    <div class="name">{{item.name}}</div>
                    <div class="des">{{item.des}}</div>
                </div>
            </div>
            <div class="item-box" style="height:0;min-height:0;padding:0"></div>
            <div class="item-box" style="height:0;min-height:0;padding:0"></div>
        </div>
        
    </div>
</template>

<style lang="scss" scoped>
.home-page{
    padding: 30px 34px;
    padding-bottom: 140px;
    .top-img{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        cursor: pointer;
    }
    .list{
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        .item-box{
            width: 331px;
            min-height: 228px;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 32px;
            cursor: pointer;
            &.full-item {
                width: 100%;
                justify-content: left;
            }
            .icon{
                width: 90px;
                height: 90px;
                margin-right: 12px;
            }
            .content{
                .name{
                    font-size: 36px;
                    font-weight: 600;
                }
                .des{
                    font-size: 24px;
                    color: $font-grey_999;
                    margin-top: 12px;
                }
            }
        }
        .item-box_en{
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            .icon{
                width: 48px;
                height: 48px;
                margin-bottom: 12px;
                margin-right: 0;
            }
        }
    }
}

@media screen and (min-width:$media-width){
    .home-page{
        padding: 30px 34px;
        max-width: 1180px;
        margin: 0 auto;
        padding-bottom: 30px;
        .top-img{
            width: 100%;
            margin-bottom: 20px;
        }
        .list{
            gap: 20px;
            justify-content: center;
            .item-box{
                width: 260px;
                min-height: 161px;
                border-radius: 32px;
                padding: 36px 11px;
                .icon{
                    width: 70px;
                    height: 70px;
                    margin-right: 6px;
                }
                .content{
                    .name{
                        font-size: 32px;
                    }
                    .des{
                        font-size: 20px;
                        margin-top: 6px;
                    }
                }
            }
            .item-box_en{
                .icon{
                    width: 70px;
                    height: 70px;
                    margin-bottom: 6px;
                }
            }
        }
    }
}
</style>