From 3db624e274324098a2d922a8934bbc3324fbc6d9 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 20 Oct 2025 14:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=BB=E5=BA=94=E7=94=A8?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 实现App主组件框架
- 添加应用样式文件
---
src/App.css | 138 +++++++++++++++++++++++++++++++++++
src/App.js | 207 ++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 345 insertions(+)
create mode 100644 src/App.css
create mode 100644 src/App.js
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..1bbc89e
--- /dev/null
+++ b/src/App.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..10bd807
--- /dev/null
+++ b/src/App.js
@@ -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 (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ SQL转换器
+
+
+ SQL Server 2008 → MySQL 8
+
+
+
+
+ {healthStatus?.status === 'success' && (
+ }
+ onClick={checkHealth}
+ >
+ 服务正常
+
+ )}
+ {healthStatus?.status === 'error' && (
+ }
+ onClick={checkHealth}
+ >
+ 服务异常
+
+ )}
+
+
+
+
+
+
+ {/* 服务状态提示 */}
+ {healthStatus?.status === 'error' && (
+
+ 重试连接
+
+ }
+ />
+ )}
+
+ {/* 功能介绍 */}
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ {/* 文件上传组件 */}
+
+
+
+
+ {/* 转换历史组件 */}
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file