sz-team/supervision-test-frontend-repo
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

czh-20260603-前端界面美化，添加背景图片

Browse Source
This commit is contained in:
zhihao
2026-06-03 16:56:38 +08:00
parent c22da8a67a
commit 3cfbd1d465
15 changed files with 130 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/default/header/components/user-dropdown/index.vue
+21 -25
View File
@@ -1,7 +1,7 @@
<template>
<Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
<span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
<img :class="`${prefixCls}__header`" :src="getAvatarUrl" />
<!-- <img :class="`${prefixCls}__header`" :src="getAvatarUrl" /> -->
<span :class="`${prefixCls}__info hidden md:block`">
<span :class="`${prefixCls}__name `" class="truncate">
{{ getUserInfo.realname }}
@@ -13,8 +13,8 @@
<Menu @click="handleMenuClick">
<MenuItem itemKey="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
<MenuDivider v-if="getShowDoc" />
<MenuItem itemKey="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
<MenuItem itemKey="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
<!-- <MenuItem itemKey="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" /> -->
<!-- <MenuItem itemKey="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" /> -->
<MenuItem itemKey="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
<MenuItem itemKey="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
<!-- <MenuItem
@@ -29,7 +29,7 @@
</Dropdown>
<LockAction v-if="lockActionVisible" ref="lockActionRef" @register="register" />
<DepartSelect ref="loginSelectRef" />
<UpdatePassword v-if="passwordVisible" ref="updatePasswordRef" />
<!-- <UpdatePassword v-if="passwordVisible" ref="updatePasswordRef" /> -->
</template>
<script lang="ts">
// components
@@ -69,7 +69,7 @@
MenuDivider: Menu.Divider,
LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
// UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
},
props: {
theme: propTypes.oneOf(['dark', 'light']),
@@ -80,7 +80,7 @@
const { getShowDoc, getUseLockPage } = useHeaderSetting();
const userStore = useUserStore();
const go = useGo();
const passwordVisible = ref(false);
// const passwordVisible = ref(false);
const lockActionVisible = ref(false);
const lockActionRef = ref(null);
@@ -142,15 +142,13 @@
function updateCurrentDepart() {
loginSelectRef.value.show();
}
// 修改密码
const updatePasswordRef = ref();
// update-begin--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
async function updatePassword() {
passwordVisible.value = true;
await getRefPromise(updatePasswordRef);
updatePasswordRef.value.show(userStore.getUserInfo.username);
}
// update-end--author:liaozhiyang---date:20230901---for：【QQYUN-6333】空路由问题—首次访问资源太大
// // 修改密码
// const updatePasswordRef = ref();
// async function updatePassword() {
// passwordVisible.value = true;
// await getRefPromise(updatePasswordRef);
// updatePasswordRef.value.show(userStore.getUserInfo.username);
// }
function handleMenuClick(e: { key: MenuEvent }) {
switch (e.key) {
case 'logout':
@@ -168,14 +166,12 @@
case 'depart':
updateCurrentDepart();
break;
case 'password':
updatePassword();
break;
case 'account':
//update-begin---author:wangshuai ---date:20221125 for：进入用户设置页面------------
go(`/system/usersetting`);
//update-end---author:wangshuai ---date:20221125 for：进入用户设置页面--------------
break;
// case 'password':
// updatePassword();
// break;
// case 'account':
// go(`/system/usersetting`);
// break;
}
}
@@ -189,8 +185,8 @@
register,
getUseLockPage,
loginSelectRef,
updatePasswordRef,
passwordVisible,
// updatePasswordRef,
// passwordVisible,
lockActionVisible,
};
},
src/layouts/default/header/index.less
-1
View File
@@ -105,7 +105,6 @@
&-action {
display: flex;
min-width: 180px;
// padding-right: 12px;
align-items: center;
src/layouts/default/header/index.vue
+39 -40
View File
@@ -23,23 +23,23 @@
<!-- action -->
<div :class="`${prefixCls}-action`">
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
<AppSearch :class="`${prefixCls}-action__item `" v-if="false" />
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
<Notify v-if="false" :class="`${prefixCls}-action__item notify-item`" />
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
<LockScreen v-if="getUseLockPage" />
<AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
<AppLocalePicker v-if="false" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
<SettingDrawer v-if="false" :class="`${prefixCls}-action__item`" />
<!-- ai助手 -->
<Aide v-if="false"></Aide>
<UserDropDown :theme="getHeaderTheme" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
<!-- ai助手 -->
<Aide v-if="getAiIconShow"></Aide>
</div>
</Header>
<LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
@@ -54,7 +54,7 @@
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue';
import { AppSearch } from '/@/components/Application';
// import { AppSearch } from '/@/components/Application';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@@ -62,19 +62,19 @@
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { AppLocalePicker } from '/@/components/Application';
// import { AppLocalePicker } from '/@/components/Application';
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
import { UserDropDown, LayoutBreadcrumb, FullScreen, ErrorAction, LockScreen } from './components';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale';
// import { useLocale } from '/@/locales/useLocale';
import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
import { useUserStore } from '/@/store/modules/user';
import { useI18n } from '/@/hooks/web/useI18n';
import Aide from "@/views/dashboard/ai/components/aide/index.vue"
// import Aide from "@/views/dashboard/ai/components/aide/index.vue"
const { t } = useI18n();
export default defineComponent({
@@ -86,17 +86,17 @@
LayoutBreadcrumb,
LayoutMenu,
UserDropDown,
AppLocalePicker,
// AppLocalePicker,
FullScreen,
Notify,
AppSearch,
// Notify,
// AppSearch,
ErrorAction,
LockScreen,
LoginSelect,
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
loading: true,
}),
Aide
// SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
// loading: true,
// }),
// Aide
},
props: {
fixed: propTypes.bool,
@@ -105,23 +105,23 @@
const { prefixCls } = useDesign('layout-header');
const userStore = useUserStore();
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition, getAiIconShow } = useRootSetting();
const { getUseErrorHandle, /* getShowSettingButton, getSettingButtonPosition, getAiIconShow */ } = useRootSetting();
const { title } = useGlobSetting();
const {
getHeaderTheme,
getShowFullScreen,
getShowNotice,
// getShowNotice,
getShowContent,
getShowBread,
getShowHeaderLogo,
getShowHeader,
getShowSearch,
// getShowSearch,
getUseLockPage,
getShowBreadTitle,
} = useHeaderSetting();
const { getShowLocalePicker } = useLocale();
// const { getShowLocalePicker } = useLocale();
const { getIsMobile } = useAppInject();
@@ -137,17 +137,16 @@
];
});
const getShowSetting = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return unref(getShowHeader);
}
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
});
// const getShowSetting = computed(() => {
// if (!unref(getShowSettingButton)) {
// return false;
// }
// const settingButtonPosition = unref(getSettingButtonPosition);
// if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
// return unref(getShowHeader);
// }
// return settingButtonPosition === SettingButtonPositionEnum.HEADER;
// });
const getLogoWidth = computed(() => {
if (!unref(getIsMixMode) || unref(getIsMobile)) {
@@ -202,21 +201,21 @@
getSplit,
getMenuMode,
getShowTopMenu,
getShowLocalePicker,
// getShowLocalePicker,
getShowFullScreen,
getShowNotice,
// getShowNotice,
getUseErrorHandle,
getLogoWidth,
getIsMixSidebar,
getShowSettingButton,
getShowSetting,
getShowSearch,
// getShowSettingButton,
// getShowSetting,
// getShowSearch,
getUseLockPage,
loginSelectOk,
loginSelectRef,
title,
t,
getAiIconShow
// getAiIconShow
};
},
});