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

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
@@ -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,
};
},