260 lines
7.9 KiB
Vue
260 lines
7.9 KiB
Vue
<script setup lang="ts">
|
|
import resolveConfig from 'tailwindcss/resolveConfig';
|
|
import tailwindConfig from '~/tailwind.config';
|
|
import type { Config } from 'tailwindcss';
|
|
import { useWindowSize } from '@vueuse/core';
|
|
|
|
const theme = useThemeStore();
|
|
const config = resolveConfig(tailwindConfig as Config);
|
|
const { collapsed, manualCollapsed } = storeToRefs(useSystemStore());
|
|
const lg = parseFloat(
|
|
config.theme.screens.lg.substring(0, config.theme.screens.lg.length - 2),
|
|
);
|
|
const modeName = ref('sunny');
|
|
// watch()
|
|
// computed(())
|
|
watch(useWindowSize().width, (val) => {
|
|
console.log(val);
|
|
console.log(collapsed.value);
|
|
console.log(manualCollapsed.value);
|
|
setCollapsed(val);
|
|
});
|
|
function setCollapsed(val: number) {
|
|
if ((val > lg && !collapsed.value) || (val < lg && collapsed.value)) {
|
|
manualCollapsed.value = false;
|
|
return;
|
|
}
|
|
|
|
if (val > lg && collapsed.value) {
|
|
if (manualCollapsed.value) return;
|
|
collapsed.value = false;
|
|
} else if (val < lg && !collapsed.value) {
|
|
if (manualCollapsed.value) return;
|
|
collapsed.value = true;
|
|
}
|
|
}
|
|
function changeCollapsed() {
|
|
collapsed.value = !collapsed.value;
|
|
manualCollapsed.value = true;
|
|
}
|
|
const { currentPage } = storeToRefs(useSystemStore());
|
|
|
|
function changeMode() {
|
|
const x = useColorMode();
|
|
console.log(x.preference);
|
|
console.log(x.value);
|
|
if (x.preference === 'light') {
|
|
x.preference = 'dark';
|
|
modeName.value = 'moon';
|
|
} else if (x.preference === 'dark') {
|
|
x.preference = 'sepia';
|
|
modeName.value = 'tea';
|
|
} else {
|
|
x.preference = 'light';
|
|
modeName.value = 'sunny';
|
|
}
|
|
}
|
|
function changeTheme() {
|
|
console.log(theme.theme);
|
|
if (theme.theme === 'default') {
|
|
theme.setTheme('test');
|
|
} else if (theme.theme === 'test') {
|
|
theme.setTheme('self');
|
|
} else if (theme.theme === 'self') {
|
|
theme.setTheme('default');
|
|
}
|
|
}
|
|
|
|
function backToLogin() {
|
|
const router = useRouter();
|
|
router.push('/login');
|
|
}
|
|
|
|
watch(currentPage, (val) => {
|
|
const router = useRouter();
|
|
router.push('/base/' + val);
|
|
});
|
|
|
|
async function sendTest() {
|
|
try {
|
|
// const response = await $fetch('/api/login/test', {
|
|
// method: 'GET',
|
|
// });
|
|
$fetch('/api/file/test', { method: 'GET' }).catch(() => {
|
|
console.log('error');
|
|
$fetch('/api/login/login', {
|
|
method: 'POST',
|
|
body: {
|
|
username: 'admin',
|
|
password: 'password',
|
|
},
|
|
}).then(async () => {
|
|
const result = await $fetch('/api/file/test', { method: 'GET' });
|
|
console.log(result);
|
|
});
|
|
});
|
|
// const response = await $fetch('/api/login/login', {
|
|
// method: 'POST',
|
|
// body: {
|
|
// username: 'admin',
|
|
// password: 'password',
|
|
// },
|
|
// });
|
|
// console.log(response);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
onMounted(() => setCollapsed(useWindowSize().width.value));
|
|
</script>
|
|
|
|
<template>
|
|
<t-layout class="h-full">
|
|
<t-header>
|
|
<t-head-menu value="item1" height="120px">
|
|
<span class="text-xl">李晨鑫 的 Web 实验</span>
|
|
<template #operations>
|
|
<a @click="changeMode">
|
|
<t-icon class="t-menu__operations-icon" :name="modeName" />
|
|
</a>
|
|
<a @click="changeTheme">
|
|
<t-icon class="t-menu__operations-icon" name="fill-color" />
|
|
</a>
|
|
<a @click="backToLogin">
|
|
<t-icon class="t-menu__operations-icon" name="rollback" />
|
|
</a>
|
|
<t-button @click="sendTest" />
|
|
</template>
|
|
<!-- <template #logo>-->
|
|
<!-- <img-->
|
|
<!-- width="136"-->
|
|
<!-- class="logo"-->
|
|
<!-- src="https://www.tencent.com/img/index/menu_logo_hover.png"-->
|
|
<!-- alt="logo"-->
|
|
<!-- />-->
|
|
<!-- </template>-->
|
|
<!-- <t-menu-item value="item1"> 已选内容 </t-menu-item>-->
|
|
<!-- <t-menu-item value="item2"> 菜单内容一 </t-menu-item>-->
|
|
<!-- <t-menu-item value="item3"> 菜单内容二 </t-menu-item>-->
|
|
<!-- <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>-->
|
|
<!-- <template #operations>-->
|
|
<!-- <a href="javascript:;"-->
|
|
<!-- ><t-icon class="t-menu__operations-icon" name="search"-->
|
|
<!-- /></a>-->
|
|
<!-- <a href="javascript:;"-->
|
|
<!-- ><t-icon class="t-menu__operations-icon" name="notification-filled"-->
|
|
<!-- /></a>-->
|
|
<!-- <a href="javascript:;"-->
|
|
<!-- ><t-icon class="t-menu__operations-icon" name="index"-->
|
|
<!-- /></a>-->
|
|
<!-- </template>-->
|
|
</t-head-menu>
|
|
</t-header>
|
|
<t-layout :class="{ collapsed: collapsed, 'non-collapsed': !collapsed }">
|
|
<t-aside class="border-t border-gray-100 dark:border-gray-700">
|
|
<t-menu
|
|
v-model="currentPage"
|
|
theme="light"
|
|
value="dashboard"
|
|
height="550px"
|
|
:collapsed="collapsed"
|
|
>
|
|
<t-menu-item value="home">
|
|
<template #icon>
|
|
<t-icon name="home" />
|
|
</template>
|
|
首页
|
|
</t-menu-item>
|
|
<t-submenu value="resource" title="功能菜单">
|
|
<template #icon>
|
|
<t-icon name="server" />
|
|
</template>
|
|
<t-menu-item value="peopleManage">
|
|
<span>用户管理</span>
|
|
</t-menu-item>
|
|
<t-menu-item value="fileManage">
|
|
<span>文件管理</span>
|
|
</t-menu-item>
|
|
</t-submenu>
|
|
<t-menu-item value="root">
|
|
<template #icon>
|
|
<t-icon name="root-list" />
|
|
</template>
|
|
导航三
|
|
</t-menu-item>
|
|
<t-menu-item value="control-platform">
|
|
<template #icon>
|
|
<t-icon name="control-platform" />
|
|
</template>
|
|
导航四
|
|
</t-menu-item>
|
|
<t-menu-item value="precise-monitor">
|
|
<template #icon>
|
|
<t-icon name="precise-monitor" />
|
|
</template>
|
|
导航五
|
|
</t-menu-item>
|
|
<t-menu-item value="mail">
|
|
<template #icon>
|
|
<t-icon name="mail" />
|
|
</template>
|
|
导航六
|
|
</t-menu-item>
|
|
<t-menu-item value="user-circle">
|
|
<template #icon>
|
|
<t-icon name="user-circle" />
|
|
</template>
|
|
导航七
|
|
</t-menu-item>
|
|
<t-menu-item value="play-circle">
|
|
<template #icon>
|
|
<t-icon name="play-circle" />
|
|
</template>
|
|
导航八
|
|
</t-menu-item>
|
|
<t-menu-item value="edit1">
|
|
<template #icon>
|
|
<t-icon name="edit-1" />
|
|
</template>
|
|
导航九
|
|
</t-menu-item>
|
|
<template #operations>
|
|
<t-button
|
|
class="t-demo-collapse-btn"
|
|
variant="text"
|
|
shape="square"
|
|
@click="changeCollapsed"
|
|
>
|
|
<template #icon>
|
|
<t-icon name="view-list" />
|
|
</template>
|
|
</t-button>
|
|
</template>
|
|
</t-menu>
|
|
</t-aside>
|
|
<t-layout>
|
|
<t-content class="overflow-auto">
|
|
<NuxtPage />
|
|
</t-content>
|
|
<t-footer class="m-auto">
|
|
Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights
|
|
Reserved
|
|
</t-footer>
|
|
</t-layout>
|
|
</t-layout>
|
|
</t-layout>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.collapsed {
|
|
:deep(.t-layout__sider) {
|
|
@apply w-20;
|
|
}
|
|
}
|
|
.non-collapsed {
|
|
:deep(.t-layout__sider) {
|
|
@apply w-60;
|
|
}
|
|
}
|
|
</style>
|