添加主应用组件
- 实现App主组件框架 - 添加应用样式文件
This commit is contained in:
Leo
parent
cfbdac775f
commit
3db624e274
138
src/App.css
Normal file
138
src/App.css
Normal file
@ -0,0 +1,138 @@
|
||||
/* 全局样式 */
|
||||
.ant-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.ant-layout-header {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文件上传样式优化 */
|
||||
.ant-upload-drag {
|
||||
border: 2px dashed #d9d9d9 !important;
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.ant-upload-drag:hover {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
.ant-upload-drag.ant-upload-drag-hover {
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
|
||||
/* 表格响应式 */
|
||||
.ant-table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* 模态框样式优化 */
|
||||
.ant-modal-body .ant-descriptions-item-label {
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.ant-progress-line {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
.ant-statistic-title {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
.ant-layout-footer {
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.ant-layout-header {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.ant-layout-content {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 卡片阴影 */
|
||||
.ant-card {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.ant-btn-primary {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover,
|
||||
.ant-btn-primary:focus {
|
||||
background: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 警告框样式 */
|
||||
.ant-alert {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 分割线样式 */
|
||||
.ant-divider {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
/* 工具提示样式 */
|
||||
.ant-tooltip-inner {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.ant-spin {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 文本选择样式 */
|
||||
::selection {
|
||||
background: #bae7ff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #bae7ff;
|
||||
color: #000;
|
||||
}
|
||||
207
src/App.js
Normal file
207
src/App.js
Normal file
@ -0,0 +1,207 @@
|
||||
/**
|
||||
* 主应用组件
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Layout,
|
||||
Typography,
|
||||
Space,
|
||||
Button,
|
||||
Alert,
|
||||
Spin,
|
||||
Divider,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Statistic,
|
||||
} from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
SwapOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import FileUpload from './components/FileUpload';
|
||||
import ConversionHistory from './components/ConversionHistory';
|
||||
import { apiService } from './services/api';
|
||||
import './App.css';
|
||||
import 'antd/dist/reset.css';
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const App = () => {
|
||||
const [healthStatus, setHealthStatus] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
||||
|
||||
// 检查服务健康状态
|
||||
const checkHealth = async () => {
|
||||
try {
|
||||
const response = await apiService.healthCheck();
|
||||
setHealthStatus({
|
||||
status: 'success',
|
||||
message: response.data.message,
|
||||
});
|
||||
} catch (err) {
|
||||
setHealthStatus({
|
||||
status: 'error',
|
||||
message: '无法连接到后端服务，请检查服务是否运行',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
checkHealth();
|
||||
}, []);
|
||||
|
||||
// 上传成功回调
|
||||
const handleUploadSuccess = (data) => {
|
||||
// 刷新历史记录
|
||||
setRefreshTrigger(prev => prev + 1);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh'
|
||||
}}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Header style={{
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
padding: '0 50px',
|
||||
}}>
|
||||
<Row justify="space-between" align="middle" style={{ height: '100%' }}>
|
||||
<Col>
|
||||
<Space size="middle">
|
||||
<DatabaseOutlined style={{ fontSize: 24, color: '#1890ff' }} />
|
||||
<Title level={3} style={{ margin: 0, color: '#1890ff' }}>
|
||||
SQL转换器
|
||||
</Title>
|
||||
<SwapOutlined style={{ fontSize: 16, color: '#666' }} />
|
||||
<span style={{ color: '#666' }}>SQL Server 2008 → MySQL 8</span>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space>
|
||||
{healthStatus?.status === 'success' && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
|
||||
onClick={checkHealth}
|
||||
>
|
||||
服务正常
|
||||
</Button>
|
||||
)}
|
||||
{healthStatus?.status === 'error' && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />}
|
||||
onClick={checkHealth}
|
||||
>
|
||||
服务异常
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
|
||||
<Content style={{
|
||||
padding: '24px 50px',
|
||||
background: '#f0f2f5',
|
||||
}}>
|
||||
{/* 服务状态提示 */}
|
||||
{healthStatus?.status === 'error' && (
|
||||
<Alert
|
||||
message="服务连接失败"
|
||||
description={healthStatus.message}
|
||||
type="error"
|
||||
showIcon
|
||||
closable
|
||||
style={{ marginBottom: 24 }}
|
||||
action={
|
||||
<Button size="small" onClick={checkHealth}>
|
||||
重试连接
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 功能介绍 */}
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={24} lg={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="支持格式转换"
|
||||
value="SQL Server 2008"
|
||||
suffix="→ MySQL 8"
|
||||
valueStyle={{ color: '#3f8600' }}
|
||||
prefix={<DatabaseOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} lg={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="最大文件大小"
|
||||
value={50}
|
||||
suffix="MB"
|
||||
valueStyle={{ color: '#1890ff' }}
|
||||
prefix={<SwapOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} lg={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="支持文件格式"
|
||||
value=".sql"
|
||||
valueStyle={{ color: '#722ed1' }}
|
||||
prefix={<CheckCircleOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 文件上传组件 */}
|
||||
<FileUpload onUploadSuccess={handleUploadSuccess} />
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 转换历史组件 */}
|
||||
<ConversionHistory refreshTrigger={refreshTrigger} />
|
||||
</Content>
|
||||
|
||||
<Footer style={{
|
||||
textAlign: 'center',
|
||||
background: '#fff',
|
||||
borderTop: '1px solid #e8e8e8',
|
||||
}}>
|
||||
<Space direction="vertical" size="small">
|
||||
<Paragraph style={{ margin: 0, color: '#666' }}>
|
||||
SQL转换器 ©2025 - 专业的数据库SQL语法转换工具
|
||||
</Paragraph>
|
||||
<Paragraph style={{ margin: 0, fontSize: 12, color: '#999' }}>
|
||||
支持SQL Server 2008语法转换为MySQL 8兼容语法
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</Footer>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Loading…
Reference in New Issue
Block a user