🎉 项目基础架构完成
This commit is contained in:
li-chx
@@ -0,0 +1,259 @@
|
||||
<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>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
const x = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<div class="flex md:flex-row flex-col">
|
||||
<div class="flex-[1] m-2 max-h-80">
|
||||
<div class="flex flex-row md:flex-col justify-center">
|
||||
<span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
|
||||
>欢迎 {{ useUserStore().userName }}
|
||||
</span>
|
||||
<t-image
|
||||
src="/avatar.jpg"
|
||||
alt="头像"
|
||||
shape="circle"
|
||||
:fit="'contain'"
|
||||
class="max-h-80 max-w-80 m-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-[2] m-2">
|
||||
<t-calendar> </t-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup lang="tsx">
|
||||
import SuperTable from '~/components/SuperTable.vue';
|
||||
import type { TableProps } from 'tdesign-vue-next';
|
||||
|
||||
const pagination = ref<TableProps['pagination']>({
|
||||
defaultPageSize: 10,
|
||||
total: 100,
|
||||
defaultCurrent: 1,
|
||||
});
|
||||
const columns = ref<TableProps['columns']>([
|
||||
{
|
||||
colKey: 'index',
|
||||
title: '序号',
|
||||
},
|
||||
{
|
||||
colKey: 'date',
|
||||
title: '日期',
|
||||
},
|
||||
{
|
||||
colKey: 'name',
|
||||
title: '姓名',
|
||||
},
|
||||
{
|
||||
colKey: 'province',
|
||||
title: '省份',
|
||||
},
|
||||
{
|
||||
colKey: 'city',
|
||||
title: '市区',
|
||||
},
|
||||
{
|
||||
colKey: 'address',
|
||||
title: '地址',
|
||||
},
|
||||
{
|
||||
colKey: '',
|
||||
title: '邮编',
|
||||
},
|
||||
{
|
||||
colKey: 'operator',
|
||||
title: '操作',
|
||||
cell: (_, { row }) => (
|
||||
<div>
|
||||
<t-button onClick={() => editUser(row)}>编辑</t-button>
|
||||
<t-button onClick={() => deleteUser(row)}>删除</t-button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]);
|
||||
const data = ref([]);
|
||||
for (let i = 0; i < 30; i++) {
|
||||
data.value.push({
|
||||
index: i + 1,
|
||||
date: '2023-10-01',
|
||||
name: 'John Doe',
|
||||
province: 'Province A',
|
||||
city: 'City A',
|
||||
address: 'Address A',
|
||||
postalCode: '123456',
|
||||
} as never);
|
||||
}
|
||||
|
||||
function editUser(row: never) {}
|
||||
|
||||
function deleteUser(row: never) {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between p-4">
|
||||
<t-button>新增</t-button>
|
||||
<t-input placeholder="搜索" clearable class="max-w-60">
|
||||
<template #suffixIcon>
|
||||
<search-icon :style="{ cursor: 'pointer' }" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
<super-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:loading="false"
|
||||
:pagination="pagination"
|
||||
></super-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
Reference in New Issue
Block a user