123 lines
3.6 KiB
Vue
123 lines
3.6 KiB
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 { NNotificationProvider, NMessageProvider, NCard, NMenu, NIcon } from 'naive-ui'
|
|
import { ref, watch, h ,shallowRef} from "vue";
|
|
// import { RouterView, useRouter } from "vue-router";
|
|
import {
|
|
ArrowUpCircleOutline as uploadIcon,
|
|
ArrowDownCircleOutline as downloadIcon,
|
|
ChatboxEllipsesOutline as chatIcon,
|
|
SettingsOutline as settingIcon
|
|
|
|
} from '@vicons/ionicons5'
|
|
|
|
const activePage = ref('upload')
|
|
const isComponent = shallowRef(upload)
|
|
watch(activePage, () => {
|
|
isComponent.value={upload,download,setting,chat}[activePage.value]
|
|
})
|
|
function renderIcon(icon) {
|
|
return () => h(NIcon, null, { default: () => h(icon) })
|
|
}
|
|
|
|
const menuOptions = [
|
|
{
|
|
label: '上传',
|
|
key: 'upload',
|
|
icon: renderIcon(uploadIcon),
|
|
},
|
|
{
|
|
label: '下载',
|
|
key: 'download',
|
|
icon: renderIcon(downloadIcon),
|
|
},
|
|
{
|
|
label: 'Chat',
|
|
key: 'chat',
|
|
icon: renderIcon(chatIcon),
|
|
},
|
|
{
|
|
label: '设置',
|
|
key: 'setting',
|
|
icon: renderIcon(settingIcon),
|
|
}
|
|
]
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="windows">
|
|
<n-notification-provider placement="bottom-right" :max="3">
|
|
<n-message-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>
|
|
<!-- <router-view v-slot="{ Component }">
|
|
<keep-alive :include=['uploadFileMiao']>
|
|
<component :is="Component" :key="$route.fullPath"/>
|
|
</keep-alive>
|
|
</router-view> -->
|
|
</div>
|
|
<!-- <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;"
|
|
display-directive="show">
|
|
<n-tab-pane name="上传文件">
|
|
<uploadFileMiao style />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="下载文件">
|
|
<downloadFileMiao style />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="miaoChat">
|
|
<chat style />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="设置">
|
|
<settingMiao style="max-width:100%" />
|
|
</n-tab-pane>
|
|
</n-tabs> -->
|
|
</n-card>
|
|
</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>
|