develop #30

Merged
zsq merged 33 commits from develop into main 2026-03-31 17:43:07 +08:00
6 changed files with 287 additions and 244 deletions
Showing only changes of commit 4c844e1a12 - Show all commits

View File

@ -14,9 +14,9 @@ export default defineConfig({
},
proxy: {
'/api/': {
target: 'http://10.39.13.78:8002/',
// target: 'http://10.39.13.78:8002/',
// target: 'https://test-admin.linyikj.com.cn/',
// target: 'https://admin.linyikj.com.cn/',
target: 'https://admin.linyikj.com.cn/',
changeOrigin: true,
pathRewrite: { '^': '' },
},

View File

@ -5,7 +5,6 @@ import { history, useLocation } from '@umijs/max';
import type { MenuProps } from 'antd';
import { Dropdown, message, Space, Tabs } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import AvatarProps from './AvatarProps';
import './MyPageContainer.scss';
export interface TabItem {
@ -388,7 +387,14 @@ export function MyPageContainer({
fixedHeader
header={{
title: (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
>
{/* 左侧Tabs标签页 */}
<div style={{ flex: 1 }}>
<Tabs
@ -410,17 +416,9 @@ export function MyPageContainer({
}}
/>
</div>
{/* 右侧:用户信息 */}
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginLeft: '24px' }}>
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
<div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
<AvatarProps user={snap.session.user} />
</div>
</Dropdown>
</div>
</div>
),
style: { backgroundColor: '#FFF', padding: '0 24px !important' },
style: { backgroundColor: '#FFF' },
}}
token={{
paddingBlockPageContainerContent: 0,

View File

@ -1,8 +1,8 @@
// import Logo from '@/assets/bitcoin.webp';
import { MyIcons, MyIconsType, PermissionsType, useMyState } from '@/common';
import { AvatarProps, CustomLogo } from '@/common/components/layout';
import { Link, RuntimeConfig, history } from '@umijs/max';
import AvatarProps from '../../components/layout/AvatarProps';
import { CustomHeader, CustomLogo } from '@/common/components/layout';
import MyLoGo from './logo.jpeg';
const loopMenu = (permissions: PermissionsType[] | undefined) => {
let tree: PermissionsType[] = [];
@ -33,40 +33,72 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => {
const { snap } = useMyState();
return {
title: snap.session.campus?.name ?? '总后台',
logo: false, // 禁用默认logo使用自定义
layout: 'side', // 从 'mix' 改为 'side'
title: '物业管理平台',
logo: MyLoGo, // 禁用默认logo使用自定义
layout: 'mix', // 从 'mix' 改为 'side'
colorPrimary: '#1890ff',
siderWidth: 220,
prefixCls: 'my-prefix',
pure: history.location.pathname === '/login',
// 禁用顶部导航栏的菜单
navTheme: 'light',
// 确保header显示
// 确保header显示 - 强制始终显示header禁用响应式隐藏
header: true,
// 禁用响应式侧边栏确保header始终显示
responsive: false,
// siderMenuType: 'inline',
// 隐藏面包屑导航
breadcrumb: { props: { style: { display: 'none' } } },
// 自定义Header渲染 - 右侧显示用户信息
headerRender: (props, defaultDom) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', paddingRight: 24, paddingLeft: 24 }}>
{/* 左侧可以为空或显示其他内容 */}
<div style={{ flex: 1 }}></div>
{/* 右侧添加用户信息 */}
<div style={{ display: 'flex', alignItems: 'center' }}>
<AvatarProps user={snap.session.user} />
</div>
</div>
);
avatarProps: {
// src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
// size: 'small',
// title: snap?.session?.user?.username ?? '-',
render: (props, dom) => {
return <AvatarProps user={snap.session.user} />;
// return (
// <Dropdown
// menu={{
// items: [
// {
// key: 'logout',
// icon: <LogoutOutlined />,
// label: '退出登录',
// },
// ],
// }}
// >
// {dom}
// </Dropdown>
// );
},
},
// 自定义Header渲染 - 右侧显示用户信息
// headerRender: (props, defaultDom) => {
// return (
// <div
// style={{
// display: 'flex',
// justifyContent: 'space-between',
// alignItems: 'center',
// width: '100%',
// paddingRight: 24,
// paddingLeft: 24,
// height: '100%',
// }}
// >
// {/* 左侧可以为空 */}
// <div style={{ flex: 1 }}></div>
// {/* 右侧添加用户信息 */}
// <div style={{ display: 'flex', alignItems: 'center' }}>
// <AvatarProps user={snap.session.user} />
// </div>
// </div>
// );
// },
// 新增自定义Logo渲染
logoRenderer: (collapsed: boolean) => {
return <CustomLogo collapsed={collapsed} />;
},
// 完全禁用用户信息在侧边栏底部显示
// avatarProps: false, // 这样可以完全禁用
//水印设置
// waterMarkProps: {
// content: snap.session.user?.username,

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -40,7 +40,7 @@ export function MyLoginPage1() {
title="欢迎使用后台管理系统"
// backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
backgroundImageUrl={loginBgImg}
subTitle="物业管理平台管理后台"
subTitle="物业管理平台"
onFinish={async (values: any) => {
Apis.Common.Auth.Login({
...values,

View File

@ -4,239 +4,237 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
line-height: 1.5715;
color: #262626;
background-color: #f5f5f5;
}
// 自定义Logo样式
.custom-logo {
display: flex;
align-items: center;
height: 64px;
padding: 0 16px;
border-bottom: 1px solid #f0f0f0;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
background: #ffffff;
}
// // 自定义Logo样式
// .custom-logo {
// display: flex;
// align-items: center;
// height: 64px;
// padding: 0 16px;
// border-bottom: 1px solid #f0f0f0;
// transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
// background: #ffffff;
// }
.custom-logo .logo-icon {
font-size: 32px;
min-width: 32px;
display: flex;
align-items: center;
justify-content: center;
}
// .custom-logo .logo-icon {
// font-size: 32px;
// min-width: 32px;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.custom-logo .logo-text {
margin-left: 12px;
font-size: 16px;
font-weight: 600;
color: #262626;
white-space: nowrap;
opacity: 1;
transition: opacity 0.2s;
}
// .custom-logo .logo-text {
// margin-left: 12px;
// font-size: 16px;
// font-weight: 600;
// color: #262626;
// white-space: nowrap;
// opacity: 1;
// transition: opacity 0.2s;
// }
// 折叠状态
.ant-layout-sider-collapsed .custom-logo {
padding: 0;
justify-content: center;
}
// // 折叠状态
// .ant-layout-sider-collapsed .custom-logo {
// padding: 0;
// justify-content: center;
// }
.ant-layout-sider-collapsed .custom-logo .logo-text {
display: none;
}
// .ant-layout-sider-collapsed .custom-logo .logo-text {
// display: none;
// }
// PageContainer Header样式 - 固定悬浮在UmiJS Header下方
div[class*="page-container-header"],
.ant-pro-page-container > div[class*="page-container-header"],
.ant-pro-page-container-header {
position: fixed !important;
top: 64px !important; /* UmiJS Header的高度 */
right: 0 !important;
left: 220px !important; /* 侧边栏宽度 */
z-index: 999 !important;
margin: 0 !important;
padding: 8px 24px !important; /* 增加padding */
background: #ffffff !important;
border-bottom: 1px solid #f0f0f0 !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
height: auto !important;
min-height: 40px !important;
max-height: 52px !important;
display: flex !important;
align-items: center !important;
}
// // PageContainer Header样式 - 固定悬浮在UmiJS Header下方
// div[class*='page-container-header'],
// .ant-pro-page-container > div[class*='page-container-header'],
// .ant-pro-page-container-header {
// position: fixed !important;
// top: 64px !important; /* UmiJS Header的高度 */
// right: 0 !important;
// left: 220px !important; /* 侧边栏宽度 */
// z-index: 999 !important;
// margin: 0 !important;
// padding: 8px 24px !important; /* 增加padding */
// background: #ffffff !important;
// border-bottom: 1px solid #f0f0f0 !important;
// box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
// height: auto !important;
// min-height: 40px !important;
// max-height: 52px !important;
// display: flex !important;
// align-items: center !important;
// }
// 当侧边栏折叠时调整tabs header的left值
.ant-layout-sider-collapsed ~ .ant-layout .ant-pro-page-container-header {
left: 64px !important;
}
// // 当侧边栏折叠时调整tabs header的left值
// .ant-layout-sider-collapsed ~ .ant-layout .ant-pro-page-container-header {
// left: 64px !important;
// }
// 强制PageContainer header样式
.ant-pro-page-container .ant-pro-page-container-header {
position: fixed !important;
top: 64px !important;
right: 0 !important;
left: 220px !important;
z-index: 999 !important;
margin: 0 !important;
padding: 8px 24px !important;
min-height: 40px !important;
max-height: 52px !important;
display: flex !important;
align-items: center !important;
}
// // 强制PageContainer header样式
// .ant-pro-page-container .ant-pro-page-container-header {
// position: fixed !important;
// top: 64px !important;
// right: 0 !important;
// left: 220px !important;
// z-index: 999 !important;
// margin: 0 !important;
// padding: 8px 24px !important;
// min-height: 40px !important;
// max-height: 52px !important;
// display: flex !important;
// align-items: center !important;
// }
// 确保UmiJS Header固定在顶部
.ant-pro-header,
.ant-layout-header {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 220px !important;
z-index: 1000 !important;
width: auto !important;
background: #ffffff !important;
border-bottom: 1px solid #f0f0f0 !important;
}
// // 确保UmiJS Header固定在顶部
// .ant-pro-header,
// .ant-layout-header {
// position: fixed !important;
// top: 0 !important;
// right: 0 !important;
// left: 220px !important;
// z-index: 1000 !important;
// width: auto !important;
// background: #ffffff !important;
// border-bottom: 1px solid #f0f0f0 !important;
// }
.ant-layout-sider-collapsed ~ .ant-layout .ant-pro-header,
.ant-layout-sider-collapsed + .ant-layout .ant-pro-header {
left: 64px !important;
}
// .ant-layout-sider-collapsed ~ .ant-layout .ant-pro-header,
// .ant-layout-sider-collapsed + .ant-layout .ant-pro-header {
// left: 64px !important;
// }
// Tabs样式优化 - 减小高度
.ant-pro-page-container-header .tabs-header-only,
div[class*="page-container-header"] .tabs-header-only {
margin: 0 !important;
line-height: 1 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
}
// // Tabs样式优化 - 减小高度
// .ant-pro-page-container-header .tabs-header-only,
// div[class*='page-container-header'] .tabs-header-only {
// margin: 0 !important;
// line-height: 1 !important;
// height: auto !important;
// display: flex !important;
// align-items: center !important;
// }
.ant-pro-page-container-header .ant-tabs,
div[class*="page-container-header"] .ant-tabs {
margin: 0 !important;
height: auto !important;
}
// .ant-pro-page-container-header .ant-tabs,
// div[class*='page-container-header'] .ant-tabs {
// margin: 0 !important;
// height: auto !important;
// }
.ant-pro-page-container-header .ant-tabs-nav,
div[class*="page-container-header"] .ant-tabs-nav {
margin-bottom: 0 !important;
height: auto !important;
}
// .ant-pro-page-container-header .ant-tabs-nav,
// div[class*='page-container-header'] .ant-tabs-nav {
// margin-bottom: 0 !important;
// height: auto !important;
// }
.ant-pro-page-container-header .ant-tabs-nav-list,
div[class*="page-container-header"] .ant-tabs-nav-list {
margin-bottom: 0 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
}
// .ant-pro-page-container-header .ant-tabs-nav-list,
// div[class*='page-container-header'] .ant-tabs-nav-list {
// margin-bottom: 0 !important;
// height: auto !important;
// display: flex !important;
// align-items: center !important;
// }
.ant-pro-page-container-header .ant-tabs-tab,
div[class*="page-container-header"] .ant-tabs-tab {
padding: 4px 10px !important;
background: #f5f5f5;
border-radius: 4px;
margin-right: 4px;
transition: all 0.2s;
height: 26px !important;
line-height: 26px !important;
font-size: 13px;
display: inline-flex !important;
align-items: center !important;
}
// .ant-pro-page-container-header .ant-tabs-tab,
// div[class*='page-container-header'] .ant-tabs-tab {
// padding: 4px 10px !important;
// background: #f5f5f5;
// border-radius: 4px;
// margin-right: 4px;
// transition: all 0.2s;
// height: 26px !important;
// line-height: 26px !important;
// font-size: 13px;
// display: inline-flex !important;
// align-items: center !important;
// }
.ant-pro-page-container-header .ant-tabs-tab-active,
div[class*="page-container-header"] .ant-tabs-tab-active {
background: #ffffff;
font-weight: 500;
}
// .ant-pro-page-container-header .ant-tabs-tab-active,
// div[class*='page-container-header'] .ant-tabs-tab-active {
// background: #ffffff;
// font-weight: 500;
// }
.ant-pro-page-container-header .ant-tabs-ink-bar,
div[class*="page-container-header"] .ant-tabs-ink-bar {
display: none !important;
}
// .ant-pro-page-container-header .ant-tabs-ink-bar,
// div[class*='page-container-header'] .ant-tabs-ink-bar {
// display: none !important;
// }
// 内容区域 - 调整padding以适应固定的header
// // 内容区域 - 调整padding以适应固定的header
.ant-pro-grid-content {
padding: 24px;
padding-top: 120px; /* 64px UmiJS Header + 48px tabs header + 8px */
padding: 15px;
// padding-top: 20px; /* 64px UmiJS Header + 48px tabs header + 8px */
}
.ant-pro-page-container {
padding-top: 0 !important;
.ant-page-header {
padding: 0 15px !important;
}
// .ant-pro-page-container {
// padding-top: 0 !important;
// }
.ant-pro-page-container-warp {
padding-top: 0 !important;
}
// .ant-pro-page-container-warp {
// padding: 0 !important;
// }
.ant-pro-page-container-children-content {
padding: 24px !important;
padding-top: 0 !important;
}
// .ant-pro-page-container-children-content {
// padding: 24px !important;
// padding-top: 0 !important;
// }
// 确保主内容区域正确的padding
.ant-layout-content {
padding-top: 120px !important;
}
// // 确保主内容区域正确的padding
// .custom-header .header-left {
// flex: 1;
// }
.custom-header .header-left {
flex: 1;
}
// .custom-header .header-right {
// display: flex;
// align-items: center;
// gap: 16px;
// }
.custom-header .header-right {
display: flex;
align-items: center;
gap: 16px;
}
// .custom-header .header-right > div {
// display: flex;
// align-items: center;
// transition: opacity 0.2s;
// }
.custom-header .header-right > div {
display: flex;
align-items: center;
transition: opacity 0.2s;
}
// .custom-header .header-right > div:hover {
// opacity: 0.8;
// }
.custom-header .header-right > div:hover {
opacity: 0.8;
}
// // 内容区域 - 添加顶部padding避免被固定header遮挡
// .ant-pro-grid-content {
// padding: 24px;
// padding-top: 24px; /* 恢复正常padding */
// }
// 内容区域 - 添加顶部padding避免被固定header遮挡
.ant-pro-grid-content {
padding: 24px;
padding-top: 24px; /* 恢复正常padding */
}
// .ant-pro-page-container {
// padding-top: 0 !important;
// }
.ant-pro-page-container {
padding-top: 0 !important;
}
// .ant-pro-page-container-children-content {
// padding-top: 0 !important;
// padding: 24px !important;
// }
.ant-pro-page-container-children-content {
padding-top: 0 !important;
padding: 24px !important;
}
// // 页面容器卡片
// .ant-pro-page-container {
// background: transparent;
// }
// 页面容器卡片
.ant-pro-page-container {
background: transparent;
}
// .ant-pro-page-container .ant-pro-page-container-warp {
// background: #ffffff;
// border-radius: 8px;
// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
// padding: 24px;
// }
.ant-pro-page-container .ant-pro-page-container-warp {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
padding: 24px;
}
// 隐藏侧边栏底部的用户信息区域
// // 隐藏侧边栏底部的用户信息区域
.ant-pro-sider .ant-pro-sider-actions {
display: none !important;
}
@ -244,18 +242,33 @@ div[class*="page-container-header"] .ant-tabs-ink-bar {
.ant-pro-sider-collapsed .ant-pro-sider-actions {
display: none !important;
}
// 确保顶部Header显示
.ant-pro-header {
display: flex !important;
.my-prefix-sider-actions {
// display: none !important;
}
// 确保PageContainer的affix header显示
.ant-pro-page-container-affix {
display: block !important;
}
// 确保顶部Header始终显示不受响应式影响
// .ant-pro-header {
// display: flex !important;
// width: 100% !important;
// }
// 只隐藏通用的ant-affix非PageContainer相关
.ant-affix:not(.ant-pro-page-container-affix) {
display: none !important;
}
// 确保在所有屏幕尺寸下header都显示
// @media (min-width: 0px) {
// .ant-pro-header {
// display: flex !important;
// }
// }
// .ant-layout-header {
// display: flex !important;
// }
// // 确保顶部Header显示
// .ant-pro-header {
// display: flex !important;
// }
// // 确保PageContainer的affix header显示
// .ant-pro-page-container-affix {
// display: block !important;
// }