提交 61dc240b 编写于 作者: RedPig97's avatar RedPig97

update: 更新

上级 272ed9fb
...@@ -17,4 +17,7 @@ onMounted(()=>{ ...@@ -17,4 +17,7 @@ onMounted(()=>{
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.app-loading-x {
display: none;
}
</style> </style>
\ No newline at end of file
<script setup lang="ts"> <script setup lang="ts">
/** import { toggleFullScreen } from '@core';
* import { FullscreenOutlined, FullscreenExitOutlined, LockOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
* import { Ref } from 'vue';
* @param {*} name
* @param {*} value let isFullScreen: Ref<boolean> = ref(false);
* @param {*} bb
* @memberof IbizUser
*/
const dropdownClick = (value: any) => { const dropdownClick = (value: any) => {
const { key } = value; const { key } = value;
// todo // todo
switch (key) { switch (key) {
case 'fullScreen': case 'fullScreen':
isFullScreen.value = toggleFullScreen();
break; break;
case 'screenLock': case 'screenLock':
break; break;
...@@ -22,12 +21,11 @@ const dropdownClick = (value: any) => { ...@@ -22,12 +21,11 @@ const dropdownClick = (value: any) => {
break; break;
case 'logout': case 'logout':
break; break;
default:
break;
} }
}; };
/** /**
* 用户数据 * 用户数据
* *
...@@ -43,68 +41,27 @@ onMounted(() => { ...@@ -43,68 +41,27 @@ onMounted(() => {
// initUser todo // initUser todo
}); });
/**
* 用户下拉列表
*
* @memberof IbizUser
*/
const dropdownList = [
{
tag: 'fullScreen',
label: '应用全屏',
},
{
tag: 'screenLock',
label: '应用屏锁',
},
{
tag: 'changeTheme',
label: '修改主题',
},
{
tag: 'updatePwd',
label: '修改密码',
},
{
tag: 'logout',
label: '退出登录',
},
];
</script> </script>
<template> <template>
<div class="app-user"> <div class="app-user">
<span class="user-name">{{ user.name }}</span>
<a-dropdown> <a-dropdown>
<a-avatar size="large" :src="user.avatar" @click.prevent> <div class="user-info">
<template #icon><AppIconText iconClass="fa fa-user-o"></AppIconText></template> <span class="user-name">{{ user.name }}</span>
</a-avatar> <a-avatar size="large" :src="user.avatar" @click.prevent>
<template #icon><AppIconText iconClass="fa fa-user-o"></AppIconText></template>
</a-avatar>
</div>
<template #overlay> <template #overlay>
<a-menu @click="dropdownClick"> <a-menu @click="dropdownClick">
<a-menu-item :value="item.tag" v-for="item in dropdownList" :key="item.tag"> <a-menu-item value="fullScreen" key="fullScreen">
{{ item.label }} <fullscreen-outlined v-show="!isFullScreen" class="app-user-icon"/>
<fullscreen-exit-outlined v-show="isFullScreen" class="app-user-icon"/>应用全屏
</a-menu-item> </a-menu-item>
<a-menu-item value="screenLock" key="screenLock"><lock-outlined class="app-user-icon"/>应用屏锁</a-menu-item>
<a-menu-item value="logout" key="logout"><poweroff-outlined class="app-user-icon"/>退出登录</a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
</div> </div>
</template> </template>
<style lang='scss'>
.app-user {
.user-name {
padding-right: 10px;
}
.app-icon-text {
text-align: center;
width: 100%;
height: 100%;
i {
width: 100%;
text-align: center;
font-size: 20px;
line-height: 16px;
}
}
}
</style>
...@@ -92,4 +92,33 @@ export class UIBase { ...@@ -92,4 +92,33 @@ export class UIBase {
); );
return { context: _context, viewParams: _viewParams }; return { context: _context, viewParams: _viewParams };
} }
}
/**
* @description 切换应用全屏
* @export
* @return {*} {boolean}
*/
export function toggleFullScreen(): boolean {
const isFullscreen = (document as any).isFullScreen || (document as any).mozIsFullScreen || (document as any).webkitIsFullScreen;
if (isFullscreen) {
if ((document as any).documentElement.requestFullScreen) {
(document as any).exitFullScreen();
} else if ((document as any).documentElement.webkitRequestFullScreen) {
(document as any).webkitCancelFullScreen();
} else if ((document as any).documentElement.mozRequestFullScreen) {
(document as any).mozCancelFullScreen();
}
return false;
} else {
if ((document as any).documentElement.requestFullScreen) {
(document as any).documentElement.requestFullScreen();
} else if ((document as any).documentElement.webkitRequestFullScreen) {
(document as any).documentElement.webkitRequestFullScreen();
} else if ((document as any).documentElement.mozRequestFullScreen) {
(document as any).documentElement.mozRequestFullScreen();
}
return true;
}
} }
\ No newline at end of file
.app-user {
.user-info {
cursor: pointer;
.user-name {
padding-right: 10px;
}
}
.app-icon-text {
text-align: center;
width: 100%;
height: 100%;
i {
width: 100%;
text-align: center;
font-size: 20px;
line-height: 16px;
}
}
}
.app-user-icon {
margin-right: 8px;
}
\ No newline at end of file
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
@use './login.scss'; @use './login.scss';
@use './icon-text.scss'; @use './icon-text.scss';
@use './app-quick-group.scss'; @use './app-quick-group.scss';
@use './app-menu-center.scss'; @use './app-menu-center.scss';
\ No newline at end of file @use './app-user.scss';
\ No newline at end of file
...@@ -2,16 +2,22 @@ ...@@ -2,16 +2,22 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
.index-view-header { .index-view-header {
display: flex;
align-items: center;
font-size: 18px;
.sys-title {
width: 180px;
padding-left: 12px;
}
.trigger:hover {
color: var(--app-color-primary);
}
} }
.center-menu-card { .center-menu-card {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.index-view-header { .ant-layout-content {
font-size: 18px; padding: 12px;
.trigger:hover {
color: #1890ff;
}
} }
} }
...@@ -3,17 +3,18 @@ ...@@ -3,17 +3,18 @@
height: 100%; height: 100%;
.ant-layout-sider { .ant-layout-sider {
overflow-y: auto; overflow-y: auto;
background-color: var(--app-view-layout-header-bg-color); background-color: var(--app-index-view-layout-side-bg-color);
} }
} }
.app-index-view-layout__header { .app-index-view-layout__header {
display: flex; display: flex;
padding: 0 20px; padding: 0 20px;
background-color: var(--app-view-layout-header-bg-color); color: var(--app-index-view-layout-header-color);
background-color: var(--app-index-view-layout-header-bg-color);
justify-content: space-between; justify-content: space-between;
} }
.app-index-view-layout__body { .app-index-view-layout__body {
background-color: var(--app-view-layout-header-bg-color); background-color: var(--app-index-view-layout-body-bg-color);
} }
.app-index-view-layout__footer { .app-index-view-layout__footer {
padding: 0; padding: 0;
......
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
// layout 组件样式 // layout 组件样式
.app-index-view-layout{ .app-index-view-layout{
--app-view-layout-header-bg-color: var(--app-color-white); --app-index-view-layout-header-color: var(--app-color-white);
--app-view-layout-body-bg-color: var(--app-color-white); --app-index-view-layout-header-bg-color: #0B3F80;
--app-view-layout-footer-bg-color: var(--app-color-white); --app-index-view-layout-side-bg-color: var(--app-color-white);
--app-index-view-layout-body-bg-color: #f6f6f6;
--app-index-view-layout-footer-bg-color: var(--app-color-white);
} }
.app-view-layout{ .app-view-layout{
--app-view-layout-padding: 8px 12px 10px; --app-view-layout-padding: 8px 12px 10px;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册