miaoShare/src/App.vue

<script setup>
import upload from "./views/uploadFileMiao.vue";
import download from "./views/downloadFileMiao.vue";
import setting from "./views/setting.vue";
import chat from "./views/chat.vue";
import login from "./views/login.vue";
import account from "./views/accountInfo.vue";
import getQueryString from '@/func/getQuery'
import { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon, NModalProvider } from 'naive-ui'
import { ref, watch, h, shallowRef, onMounted, computed } from "vue";
// import { useRoute } from "vue-router";
import {
    CloudUploadOutline as uploadIcon,
    CloudDownloadOutline as downloadIcon,
    // ChatboxEllipsesOutline as chatIcon,
    ChatbubblesOutline as chatIcon,
    SettingsOutline as settingIcon,
    FootstepsOutline as AccountIcon

} from '@vicons/ionicons5'
import { useSettingStore } from "@/pinia/store";
import config from "../miaoShareConfig.json"

// console.log(process.env.NODE_ENV)


const settingData = useSettingStore();
const serverPort = settingData.serverPort;
const baseUrl =
    location.protocol + "//" + location.hostname + ":" + serverPort + "/";
const tokenExpiresIn = config.tokenExpiresIn


const activePage = ref('upload')
const isComponent = shallowRef(upload)
watch(activePage, () => {
    isComponent.value = { upload, download, setting, chat, login, account }[activePage.value]
})
function renderIcon(icon) {
    return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = ref([
    {
        label: '上传',
        key: 'upload',
        icon: renderIcon(uploadIcon),
        disabled: computed(() => {
            // console.log(settingData)
            return settingData.token === null
        })
    },
    {
        label: '下载',
        key: 'download',
        icon: renderIcon(downloadIcon),
        disabled: computed(() => {
            return settingData.token === null
        })
    },
    {
        label: 'Chat',
        key: 'chat',
        icon: renderIcon(chatIcon),
        disabled: computed(() => {
            return settingData.token === null
        })
    },
    {
        label: '设置',
        key: 'setting',
        icon: renderIcon(settingIcon),
        disabled: computed(() => {
            return settingData.token === null
        })
    },
    {
        label: '账户',
        key: 'account',
        icon: renderIcon(AccountIcon),
        disabled: computed(() => {
            return settingData.token === null
        })
    }
])
// function getQueryString(key) {
//     var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
//     var r = window.location.search.substr(1).match(reg);
//     if (r != null) {
//         return unescape(r[2]);
//     }
//     return null;
// }




onMounted(async () => {
    let aP = getQueryString('aP')
    // console.log(aP)
    if (aP) {
        activePage.value = aP
    }
    if (settingData.getToken() === null) {
        aP = activePage.value
        activePage.value = 'login'
        // 登录后跳原来的activePage
        const w = watch(() => settingData.token, () => {
            activePage.value = aP
            w()
        })
    } else {
        // 刷新token
        (async function refreshToken() {
            const old_token = settingData.getToken()
            console.log(old_token)
            const response = await fetch(`${baseUrl}user/refrashToken`, {
                // credentials: 'include',
                method: "POST",
                headers: {
                    'Authorization': `Bearer ${settingData.token}`,
                    "Content-Type": "application/json"
                },
                // body: JSON.stringify({
                //     token:settingData.token
                // })
            });
            console.log(response)
            let data = await response.json()
            if (data.status === 'Error') {
                console.log('falied')
            } else {
                localStorage.setItem('token', data.new_token)
                localStorage.setItem('tokenExpiredTime', parseInt(Date.now()) + parseInt(tokenExpiresIn) * 3600000)
            }
        })()
    }
})
</script>

<template>
    <div id="windows">
        <n-notification-provider placement="bottom-right" :max="3">
            <n-message-provider>
                <n-modal-provider>
                    <n-card content-style="padding: 0; margin:0" id="theCard">
                        <div id="menu">
                            <n-menu mode="horizontal" :responsive="true" v-model:value="activePage"
                                :options="menuOptions" :icon-size="26"></n-menu>
                        </div>

                        <div style="padding: 20px;">
                            <KeepAlive>
                                <component :is="isComponent"></component>
                            </KeepAlive>
                        </div>
                    </n-card>
                </n-modal-provider>
            </n-message-provider>
        </n-notification-provider>
    </div>
</template>

<style scoped>
#windows {
    width: 100%;
    height: 100%;
    padding: 0%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

#theCard {
    width: 40vw;
    height: 90vh;
}

#menu {
    width: 100%;
    height: auto;
    /* background-color: blue; */
    padding-top: 5px;
    border-bottom: 1px solid rgb(60, 60, 60, 0.1);
    user-select: none
}

@media screen and (max-width:768px) {
    #theCard {
        width: 100vw;
        height: 100%;
    }
}
</style>