marchglow/webgame-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: BaseLayout

Browse Source
This commit is contained in:
Azure
2026-06-17 11:48:43 +08:00
parent cb9687e472
commit 09221c819a
3 changed files with 111 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/request/refreshInterceptor.ts
View File

@@ -74,7 +74,6 @@ export function createRefreshTokenInterceptor(config: RefreshInterceptorConfig)
throw error throw error
} }
console.log('[401] 刷新 token 中...', isRefreshing.value)
// 正在刷新中 → 将请求加入队列，等待刷新完成后重试 // 正在刷新中 → 将请求加入队列，等待刷新完成后重试
if (isRefreshing.value) { if (isRefreshing.value) {
return new Promise((resolve) => { return new Promise((resolve) => {

110
src/layouts/BaseLayout.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="base-layout">
<!-- 顶部导航栏 -->
<div class="base-layout__topbar"></div>
<!-- 主体区域 -->
<div class="base-layout__main">
<!-- 侧边栏 -->
<div class="base-layout__sidebar">
<!-- 侧边栏内容 -->
<div class="base-layout__sidebar-content"></div>
<!-- 侧边栏底部固定区域 -->
<div class="base-layout__sidebar-bottom">
<div class="base-layout__sidebar-bottom-inner"></div>
</div>
<!-- 拖拽调整宽度的手柄 -->
<div class="base-layout__resize-handle"></div>
</div>
<!-- 主内容区域 -->
<div class="base-layout__content"></div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.base-layout {
display: flex;
flex-direction: column;
height: 100lvh;
width: 100lvw;
overflow: hidden;
}
.base-layout__topbar {
display: flex;
width: 100%;
height: 40px;
background-color: #fde68a; // amber-200
}
.base-layout__main {
display: flex;
flex: 1;
width: 100%;
height: 100%;
}
.base-layout__sidebar {
display: flex;
flex-direction: column;
position: relative;
width: 400px;
height: 100%;
padding: 8px;
background-color: #fcd34d; // amber-300
}
.base-layout__sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
padding-bottom: 72px;
background-color: #f59e0b; // amber-500
}
.base-layout__sidebar-bottom {
position: absolute;
display: flex;
flex-shrink: 0;
width: 100%;
height: 72px;
left: 0;
bottom: 0;
padding: 8px;
}
.base-layout__sidebar-bottom-inner {
display: flex;
flex: 1;
width: 100%;
height: 100%;
border-radius: 12px;
background-color: #92400e; // amber-800
}
.base-layout__resize-handle {
position: absolute;
width: 4px;
height: 100%;
top: 0;
right: 0;
cursor: ew-resize;
&:hover {
background-color: #d1d5db; // gray-300
}
}
.base-layout__content {
display: flex;
flex: 1;
width: 100%;
height: 100%;
background-color: #fbbf24; // amber-400
}
</style>

2
src/router/routes.ts
View File

@@ -4,7 +4,7 @@ const routes: RouteRecordRaw[] = [
{ {
path: '/', path: '/',
name: 'Root', name: 'Root',
component: () => import('@/views/HomeView.vue'), component: () => import('@/layouts/BaseLayout.vue'),
children: [] children: []
}, },
{ {