64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<template>
|
|
<div class="title-bar">
|
|
<div class="left-container">
|
|
<el-button v-if="appStore.isShowMobileBack"
|
|
type="info" :icon="Back" size="small"
|
|
circle color="#FFFFFF"
|
|
@click="goBackClick" />
|
|
<div v-else class="logo-container">
|
|
<img :src="getAssetsImageFile('logo/logo.png')" alt="暂无图片" class="logo"/>
|
|
<span>{{ appStore.appName }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="title-container">{{ title }}</span>
|
|
|
|
<div class="right-container">
|
|
<svg-icon v-if="appStore.isWebSocket"
|
|
name="home-websocket" style="color: #FFFFFF;"></svg-icon>
|
|
<el-button type="info" :icon="Setting" size="small"
|
|
circle color="#FFFFFF" @click="openSettingClick"/>
|
|
|
|
<el-drawer
|
|
v-model="appStore.isShowSetting"
|
|
title="系统设置" :show-close="false"
|
|
size="50%" class="setting-drawer">
|
|
<mobile-setting />
|
|
</el-drawer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { SvgIcon } from 'vue3-common'
|
|
import MobileSetting from '@/components/Common/MobileSetting.vue'
|
|
import { Back } from '@element-plus/icons-vue'
|
|
import { Setting } from '@element-plus/icons-vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { computed } from 'vue'
|
|
import { getAssetsImageFile } from '@/utils'
|
|
|
|
const appStore = useAppStore()
|
|
const router = useRouter()
|
|
|
|
const title = computed(() => router.currentRoute.value.meta.title)
|
|
|
|
const goBackClick = () => {
|
|
appStore.isShowMobileBack = false
|
|
history.back()
|
|
}
|
|
|
|
const openSettingClick = () => {
|
|
appStore.isShowSetting = true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.setting-drawer {
|
|
.el-drawer__header {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|