提交 93f1f3c9 编写于 作者: kadycui's avatar kadycui 💻

ADD: 全屏

上级 6f86138f
......@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.4.1",
"@vueuse/integrations": "^10.4.1",
"axios": "^1.5.0",
"element-plus": "^2.3.12",
......@@ -497,9 +498,9 @@
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
"version": "0.0.17",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
"integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
},
"node_modules/@vitejs/plugin-vue": {
"version": "4.3.3",
......@@ -622,14 +623,14 @@
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
},
"node_modules/@vueuse/core": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
"integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.4.1.tgz",
"integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.13.0",
"@vueuse/shared": "9.13.0",
"vue-demi": "*"
"@types/web-bluetooth": "^0.0.17",
"@vueuse/metadata": "10.4.1",
"@vueuse/shared": "10.4.1",
"vue-demi": ">=0.14.5"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
......@@ -716,35 +717,6 @@
}
}
},
"node_modules/@vueuse/integrations/node_modules/@types/web-bluetooth": {
"version": "0.0.17",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
"integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
},
"node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.4.1.tgz",
"integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
"dependencies": {
"@types/web-bluetooth": "^0.0.17",
"@vueuse/metadata": "10.4.1",
"@vueuse/shared": "10.4.1",
"vue-demi": ">=0.14.5"
}
},
"node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.4.1.tgz",
"integrity": "sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg=="
},
"node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.4.1.tgz",
"integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
"dependencies": {
"vue-demi": ">=0.14.5"
}
},
"node_modules/@vueuse/integrations/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
......@@ -768,16 +740,16 @@
}
},
"node_modules/@vueuse/metadata": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
"integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.4.1.tgz",
"integrity": "sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg=="
},
"node_modules/@vueuse/shared": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
"integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
"version": "10.4.1",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.4.1.tgz",
"integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
"dependencies": {
"vue-demi": "*"
"vue-demi": ">=0.14.5"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
......@@ -939,6 +911,79 @@
"vue": "^3.2.0"
}
},
"node_modules/element-plus/node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"node_modules/element-plus/node_modules/@vueuse/core": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
"integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.13.0",
"@vueuse/shared": "9.13.0",
"vue-demi": "*"
}
},
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/element-plus/node_modules/@vueuse/metadata": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
"integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
},
"node_modules/element-plus/node_modules/@vueuse/shared": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
"integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
"dependencies": {
"vue-demi": "*"
}
},
"node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/esbuild": {
"version": "0.18.20",
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz",
......
<template>
<div class="f-header">
<span class="logo">
<el-icon class="mr-1"><SwitchFilled /></el-icon>
<el-icon class="mr-1">
<SwitchFilled />
</el-icon>
GameAdmin
</span>
<el-icon class="icon-btn"><Fold /></el-icon>
<el-icon class="icon-btn"><Refresh /></el-icon>
<el-icon class="icon-btn">
<Fold />
</el-icon>
<el-tooltip effect="dark" content="刷新" placement="bottom">
<el-icon class="icon-btn" @click="handleRefresh"> <Refresh /></el-icon>
</el-tooltip>
<!-- <el-icon><Expand /></el-icon> -->
<div class="ml-auto flex items-center">
<el-icon class="icon-btn"><FullScreen /></el-icon>
<el-dropdown class="dropdown">
<el-tooltip effect="dark" content="全屏" placement="bottom">
<el-icon class="icon-btn" @click="toggle">
<FullScreen v-if="!isFullscreen" />
<Aim v-else/>
</el-icon>
</el-tooltip>
<el-dropdown class="dropdown" @command="handleCommand">
<span class="flex items-center text-light-50">
<el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
{{ $store.state.user.username }}
......@@ -21,8 +34,8 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
<el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -36,12 +49,38 @@ import { useStore } from 'vuex'
import { showModal, toast } from "@/composables/util"
import { removeToken } from "@/composables/auth"
import { logout } from "@/api/manager"
import { useFullscreen } from '@vueuse/core'
const {
// 是否全屏状态
isFullscreen,
// 切换全屏
toggle
} = useFullscreen()
const store = useStore()
const router = useRouter()
const handleCommand = (c) => {
switch (c) {
case "logout":
handleLogout()
break;
case "rePassword":
console.log(c)
break;
}
}
// 刷新
const handleRefresh = () =>location.reload()
function handleLogout() {
showModal("是否要退出登录?").then(res => {
console.log("退出登录")
......@@ -70,29 +109,30 @@ function handleLogout() {
</script>
<style>
.f-header{
.f-header {
@apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
height: 64px;
}
.logo{
.logo {
width: 250px;
@apply flex justify-center items-center text-xl;
}
.icon-btn{
.icon-btn {
@apply flex justify-center items-center;
width: 42px;
height: 64px;
cursor: pointer;
}
.icon-btn:hover{
.icon-btn:hover {
@apply bg-indigo-600;
}
.f-header .dropdown{
.f-header .dropdown {
height: 64px;
cursor: pointer;
@apply flex justify-center items-center mx-5;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册