|
|
@@ -9,7 +9,7 @@
|
|
|
</template> -->
|
|
|
</app-header>
|
|
|
</div>
|
|
|
- <div class="app-page__wrapper">
|
|
|
+ <div class="app-page__wrapper" :style="bodyStyles">
|
|
|
<div class="app-page__sidebar">
|
|
|
<app-sidebar v-model:collapse="isCollapse" />
|
|
|
</div>
|
|
|
@@ -26,10 +26,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="app-page__footer">
|
|
|
- <!-- <div style="height: 4px;background-color:coral;"></div> -->
|
|
|
- <app-footer />
|
|
|
- </div>
|
|
|
+ <app-footer class="app-page__footer" :style="footerStyles" @tab-change="onTabChange">
|
|
|
+ <div style="display: flex;align-items: center; font-size: 16px; gap: 20px;justify-content: flex-end;padding: 0 20px;color: #fff;">
|
|
|
+ <span @click="minimize" style="cursor: pointer;">
|
|
|
+ <AppIcon icon="ArrowUp" v-if="footerWinType === -1" />
|
|
|
+ <AppIcon icon="ArrowDown" v-else />
|
|
|
+ </span>
|
|
|
+ <span @click="maximize" style="cursor: pointer;">
|
|
|
+ <AppIcon icon="g-icon-minimize2" v-if="footerWinType === 1" />
|
|
|
+ <AppIcon icon="g-icon-maximize2" v-else />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </app-footer>
|
|
|
<div class="app-page__statusbar">
|
|
|
<div class="statusbar-left">
|
|
|
<span style="font-size: 12px;color: #444f57;padding: 0 5px;">v1.0.{{ version }}</span>
|
|
|
@@ -55,18 +63,80 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
+import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
|
import { RouteRecordNormalized, RouteRecordName } from 'vue-router'
|
|
|
import { timerTask } from '@/utils/timer'
|
|
|
import { getServerTime } from '@/services/api/common'
|
|
|
import { useGlobalStore, useLoginStore } from '@/stores'
|
|
|
import eventBus from '@/services/bus'
|
|
|
import moment, { Moment } from 'moment'
|
|
|
+import AppIcon from '@pc/components/base/icon/index.vue'
|
|
|
import AppHeader from '../header/index.vue'
|
|
|
import AppFooter from '../footer/index.vue'
|
|
|
import AppNavbar from '../navbar/index.vue'
|
|
|
import AppSidebar from '../sidebar/index.vue'
|
|
|
|
|
|
+
|
|
|
+const footerWinType = ref(0) // -1最小化,0默认,1最大化
|
|
|
+
|
|
|
+const bodyStyles = computed(() => {
|
|
|
+ if (footerWinType.value === 1) {
|
|
|
+ return {
|
|
|
+ flex: 0,
|
|
|
+ overflow: 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ flex: 1,
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const footerStyles = computed(() => {
|
|
|
+ switch (footerWinType.value) {
|
|
|
+ case 1: {
|
|
|
+ return {
|
|
|
+ flex: 1,
|
|
|
+ height: 'auto'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ case -1: {
|
|
|
+ return {
|
|
|
+ height: '36px',
|
|
|
+ overflow: 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ default: {
|
|
|
+ return {
|
|
|
+ height: '360px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const minimize = () => {
|
|
|
+ if (footerWinType.value === -1) {
|
|
|
+ footerWinType.value = 0
|
|
|
+ } else {
|
|
|
+ footerWinType.value = -1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const maximize = () => {
|
|
|
+ if (footerWinType.value === 1) {
|
|
|
+ footerWinType.value = 0
|
|
|
+ } else {
|
|
|
+ footerWinType.value = 1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const onTabChange = () => {
|
|
|
+ if (footerWinType.value === -1) {
|
|
|
+ footerWinType.value = 0
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
const globalStore = useGlobalStore()
|
|
|
const loginStore = useLoginStore()
|
|
|
const fullLoading = ref(false)
|