添加主应用组件
- 实现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