ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
asp_ly 2024-12-27 21:27:06 +08:00
parent f03bcbdc80
commit 6b34ae7f72
2 changed files with 83 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/components/ui/layout.tsx Normal file
View File

@ -0,0 +1,66 @@
import * as React from "react";
import { cn } from "@/lib/utils";
const Layout = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex h-screen overflow-hidden",
className
)}
{...props}
/>
));
Layout.displayName = "Layout";
const LayoutContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex flex-1 flex-col overflow-hidden",
className
)}
{...props}
/>
));
LayoutContent.displayName = "LayoutContent";
const Header = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex h-16 items-center border-b bg-background px-6",
"z-40",
"shadow-sm",
className
)}
{...props}
/>
));
Header.displayName = "Header";
const Main = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex-1 overflow-auto p-6",
className
)}
{...props}
/>
));
Main.displayName = "Main";
export { Layout, LayoutContent, Header, Main };

79
frontend/src/layouts/BasicLayout.tsx
View File

@ -1,5 +1,5 @@
import React, {useEffect, useState, useCallback} from 'react';
import {Layout, Dropdown, Modal, message, Spin, Space, Tooltip} from 'antd';
import {Dropdown, Modal, message, Spin, Space, Tooltip} from 'antd';
import {useNavigate, useLocation, Outlet} from 'react-router-dom';
import {useDispatch, useSelector} from 'react-redux';
import {
@ -17,8 +17,8 @@ import type {RootState} from '../store';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { AppMenu } from '@/components/AppMenu';
import { Layout, LayoutContent, Header, Main } from '@/components/ui/layout';
const {Header, Content} = Layout;
const {confirm} = Modal;
// 设置中文语言
@ -153,91 +153,46 @@ const BasicLayout: React.FC = () => {
if (loading) {
return (
<div style={{
height: '100vh',
width: '100vw',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
background: '#f0f2f5'
}}>
<div className="flex h-screen w-screen flex-col items-center justify-center bg-slate-50">
<Spin size="large"/>
<div style={{
marginTop: 24,
fontSize: 16,
color: 'rgba(0, 0, 0, 0.45)',
textAlign: 'center'
}}>
<p>正在为您准备系统资源</p>
<p style={{fontSize: 14}}>请稍候，马上就好...</p>
<div className="mt-6 text-center text-slate-500">
<p className="text-base">正在为您准备系统资源</p>
<p className="text-sm">请稍候，马上就好...</p>
</div>
</div>
);
}
return (
<Layout style={{
height: '100vh',
display: 'flex',
flexDirection: 'row',
overflow: 'hidden'
}}>
<Layout>
<AppMenu openKeys={openKeys} onOpenChange={handleOpenChange} />
<Layout style={{flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
<Header style={{
padding: '0 24px',
background: '#fff',
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
boxShadow: '0 1px 4px rgba(0,21,41,.08)',
height: 64,
flexShrink: 0
}}>
<LayoutContent>
<Header className="justify-end">
<Space size={24}>
<Space size={16}>
<span style={{
display: 'inline-flex',
alignItems: 'center',
color: 'rgba(0, 0, 0, 0.65)',
fontSize: 14
}}>
<ClockCircleOutlined style={{marginRight: 8}}/>
<span className="inline-flex items-center text-sm text-slate-600">
<ClockCircleOutlined className="mr-2" />
{currentTime.format('YYYY年MM月DD日 HH:mm:ss')} 星期{currentTime.format('dd')}
</span>
<Tooltip title={`${weather.city}`}>
<span style={{
display: 'inline-flex',
alignItems: 'center',
color: 'rgba(0, 0, 0, 0.65)',
fontSize: 14
}}>
<CloudOutlined style={{marginRight: 8}}/>
<span className="inline-flex items-center text-sm text-slate-600">
<CloudOutlined className="mr-2" />
{weather.weather} {weather.temp}℃
</span>
</Tooltip>
</Space>
<Dropdown menu={{items: userMenuItems}} trigger={['hover']}>
<Space style={{cursor: 'pointer'}}>
<Space className="cursor-pointer">
<UserOutlined/>
<span>{userInfo?.nickname || userInfo?.username}</span>
</Space>
</Dropdown>
</Space>
</Header>
<Content style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
flex: 1,
overflow: 'auto',
display: 'flex',
flexDirection: 'column'
}}>
<Main className="bg-white">
<Outlet/>
</Content>
</Layout>
</Main>
</LayoutContent>
</Layout>
);
}