95 lines
1.6 KiB
Vue
95 lines
1.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<router-view />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
onMounted(async () => {
|
|
// 應用啟動時檢查用戶是否已登入
|
|
await authStore.checkAuth()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#app {
|
|
width: 100%;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// 全局樣式重置
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background-color: var(--el-bg-color-page);
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
// 自定義滾動條樣式
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--el-border-color-light);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--el-border-color);
|
|
}
|
|
|
|
// Element Plus 主題色彩自定義 - 深色系
|
|
:root {
|
|
--el-color-primary: #2c3e50;
|
|
--el-color-primary-light-3: #5d6d7e;
|
|
--el-color-primary-light-5: #85929e;
|
|
--el-color-primary-light-7: #aeb6bf;
|
|
--el-color-primary-light-8: #d5d8dc;
|
|
--el-color-primary-light-9: #eaeded;
|
|
--el-color-primary-dark-2: #1a252f;
|
|
}
|
|
|
|
// 過渡動畫
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-enter-active,
|
|
.slide-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.slide-enter-from {
|
|
transform: translateX(-20px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-leave-to {
|
|
transform: translateX(20px);
|
|
opacity: 0;
|
|
}
|
|
</style> |