加首页

src/client/home/index.tsx

@@ -2,44 +2,296 @@ import { createRoot } from 'react-dom/client'
 import { getGlobalConfig } from '../utils/utils'
 
 const Home = () => {
+
   return (
-    
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div className="max-w-md w-full space-y-8">
-      {/* 系统介绍区域 */}
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">
-          {getGlobalConfig('APP_NAME')}
-        </h1>
-        <p className="text-lg text-gray-600 mb-8">
-          全功能应用Starter
-        </p>
-        <p className="text-base text-gray-500 mb-8">
-          这是一个基于Hono和React的应用Starter，提供了用户认证、文件管理、图表分析、地图集成和主题切换等常用功能。
-        </p>
-      </div>
-
-      {/* 管理入口按钮 */}
-      <div className="space-y-4">
-        <a
-          href="/admin"
-          className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          进入管理后台
-        </a>
-        
-        {/* 移动端入口按钮 */}
-        <a
-          href="/mobile"
-          className="w-full flex justify-center py-3 px-4 border border-blue-600 rounded-md shadow-sm text-lg font-medium text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          进入移动端
-        </a>
-        
-      </div>
+    <div style={{ 
+      minHeight: "100vh", 
+      display: "flex", 
+      flexDirection: "column",
+      backgroundColor: "#f9fafb"
+    }}>
+      {/* 顶部导航 */}
+      <header style={{ 
+        backgroundColor: "#fff", 
+        boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        padding: "1rem"
+      }}>
+        <div style={{ 
+          maxWidth: "1280px", 
+          margin: "0 auto", 
+          display: "flex", 
+          justifyContent: "space-between", 
+          alignItems: "center" 
+        }}>
+          <div style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#1f2937" }}>
+            Excel to JSON 转换平台
+          </div>
+          <a href="/admin/home" style={{ 
+            padding: "0.5rem 1rem", 
+            backgroundColor: "#1d4ed8", 
+            color: "#fff", 
+            borderRadius: "0.375rem", 
+            textDecoration: "none",
+            fontWeight: "500",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+          }}>
+            进入用户中心
+          </a>
+        </div>
+      </header>
+
+      {/* 主要内容 */}
+      <main style={{ flexGrow: 1 }}>
+        {/* 英雄区域 */}
+        <div style={{ 
+          backgroundColor: "#1d4ed8", 
+          padding: "3rem 1rem", 
+          color: "#fff",
+          textAlign: "center"
+        }}>
+          <h1 style={{ 
+            fontSize: "2.5rem", 
+            fontWeight: "800", 
+            marginBottom: "1.5rem" 
+          }}>
+            Excel to JSON 转换平台
+          </h1>
+          <p style={{ 
+            fontSize: "1.25rem", 
+            maxWidth: "800px", 
+            margin: "0 auto",
+            color: "#bfdbfe"
+          }}>
+            基于Remix.js + TypeScript构建的管理系统，提供可视化Excel格式配置及标准化JSON数据转换服务。
+          </p>
+          <div style={{ 
+            marginTop: "2rem", 
+            display: "flex", 
+            justifyContent: "center",
+            gap: "1rem"
+          }}>
+            <a href="/admin/home" style={{ 
+              padding: "0.75rem 1.5rem", 
+              backgroundColor: "#fff", 
+              color: "#1d4ed8", 
+              borderRadius: "0.375rem", 
+              textDecoration: "none",
+              fontWeight: "500"
+            }}>
+              开始使用
+            </a>
+            <a href="/admin/api-playground" style={{ 
+              padding: "0.75rem 1.5rem", 
+              backgroundColor: "#1e40af", 
+              color: "#fff", 
+              borderRadius: "0.375rem", 
+              textDecoration: "none",
+              fontWeight: "500"
+            }}>
+              API调试
+            </a>
+          </div>
+        </div>
+
+        {/* 核心功能区域 */}
+        <div style={{ 
+          padding: "3rem 1rem", 
+          backgroundColor: "#fff"
+        }}>
+          <div style={{ 
+            maxWidth: "1280px", 
+            margin: "0 auto" 
+          }}>
+            <h2 style={{ 
+              fontSize: "2rem", 
+              fontWeight: "700", 
+              textAlign: "center",
+              marginBottom: "2rem",
+              color: "#1f2937"
+            }}>
+              核心功能
+            </h2>
+
+            <div style={{ 
+              display: "grid", 
+              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", 
+              gap: "2rem" 
+            }}>
+              {/* 配置管理 */}
+              <div style={{ 
+                padding: "1.5rem", 
+                borderRadius: "0.5rem", 
+                backgroundColor: "#f9fafb",
+                border: "1px solid #f3f4f6"
+              }}>
+                <h3 style={{ 
+                  fontSize: "1.25rem", 
+                  fontWeight: "700", 
+                  textAlign: "center",
+                  marginBottom: "1rem",
+                  color: "#1f2937"
+                }}>
+                  配置管理
+                </h3>
+                <ul style={{ 
+                  listStyleType: "none", 
+                  padding: 0, 
+                  margin: 0, 
+                  color: "#4b5563"
+                }}>
+                  <li style={{ marginBottom: "0.5rem" }}>📁 多格式模板支持 - 可创建多种Excel文件格式模板</li>
+                  <li style={{ marginBottom: "0.5rem" }}>📑 多工作表配置 - 支持为每个模板配置多个工作表参数</li>
+                  <li style={{ marginBottom: "0.5rem" }}>⚙️ 字段映射配置 - 可视化配置Excel列与JSON字段的映射关系</li>
+                  <li style={{ marginBottom: "0.5rem" }}>🛠 验证规则设置 - 配置必填字段、数据校验规则</li>
+                </ul>
+              </div>
+
+              {/* 数据转换 */}
+              <div style={{ 
+                padding: "1.5rem", 
+                borderRadius: "0.5rem", 
+                backgroundColor: "#f9fafb",
+                border: "1px solid #f3f4f6"
+              }}>
+                <h3 style={{ 
+                  fontSize: "1.25rem", 
+                  fontWeight: "700", 
+                  textAlign: "center",
+                  marginBottom: "1rem",
+                  color: "#1f2937"
+                }}>
+                  数据转换
+                </h3>
+                <ul style={{ 
+                  listStyleType: "none", 
+                  padding: 0, 
+                  margin: 0, 
+                  color: "#4b5563"
+                }}>
+                  <li style={{ marginBottom: "0.5rem" }}>⬆️ 多格式文件上传 - 支持xlsx、csv等多种格式文件上传</li>
+                  <li style={{ marginBottom: "0.5rem" }}>👁 实时预览 - 提供表格视图和JSON视图两种数据预览模式</li>
+                  <li style={{ marginBottom: "0.5rem" }}>📥 数据导出 - 支持导出标准化JSON文件</li>
+                  <li style={{ marginBottom: "0.5rem" }}>🔄 批量转换 - 支持同时处理多个Excel文件</li>
+                </ul>
+              </div>
+
+              {/* API服务 */}
+              <div style={{ 
+                padding: "1.5rem", 
+                borderRadius: "0.5rem", 
+                backgroundColor: "#f9fafb",
+                border: "1px solid #f3f4f6"
+              }}>
+                <h3 style={{ 
+                  fontSize: "1.25rem", 
+                  fontWeight: "700", 
+                  textAlign: "center",
+                  marginBottom: "1rem",
+                  color: "#1f2937"
+                }}>
+                  API服务
+                </h3>
+                <ul style={{ 
+                  listStyleType: "none", 
+                  padding: 0, 
+                  margin: 0, 
+                  color: "#4b5563"
+                }}>
+                  <li style={{ marginBottom: "0.5rem" }}>🚀 多输入源支持 - 接收文件、URL、Base64等多种输入形式</li>
+                  <li style={{ marginBottom: "0.5rem" }}>⚡ 实时转换 - 提供RESTful API即时转换服务</li>
+                  <li style={{ marginBottom: "0.5rem" }}>🔒 权限验证 - 支持JWT令牌验证访问权限</li>
+                  <li style={{ marginBottom: "0.5rem" }}>📊 数据校验 - 自动验证数据格式和必填字段</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 快速开始 */}
+        <div style={{ 
+          padding: "3rem 1rem", 
+          backgroundColor: "#f9fafb"
+        }}>
+          <div style={{ 
+            maxWidth: "1280px", 
+            margin: "0 auto",
+            textAlign: "center"
+          }}>
+            <h2 style={{ 
+              fontSize: "2rem", 
+              fontWeight: "700", 
+              marginBottom: "1rem",
+              color: "#1f2937"
+            }}>
+              快速开始
+            </h2>
+            <p style={{ 
+              fontSize: "1.25rem", 
+              color: "#6b7280", 
+              marginBottom: "2rem" 
+            }}>
+              立即体验Excel to JSON强大的转换功能
+            </p>
+
+            <div style={{ 
+              display: "flex", 
+              justifyContent: "center",
+              gap: "1rem"
+            }}>
+              <a href="/admin/templates" style={{ 
+                padding: "0.75rem 1.5rem", 
+                backgroundColor: "#1d4ed8", 
+                color: "#fff", 
+                borderRadius: "0.375rem", 
+                textDecoration: "none",
+                fontWeight: "500"
+              }}>
+                浏览模板库
+              </a>
+              <a href="/admin/template/add" style={{ 
+                padding: "0.75rem 1.5rem", 
+                backgroundColor: "#10b981", 
+                color: "#fff", 
+                borderRadius: "0.375rem", 
+                textDecoration: "none",
+                fontWeight: "500"
+              }}>
+                创建新模板
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* 页脚 */}
+      <footer style={{ 
+        backgroundColor: "#fff",
+        padding: "2rem 1rem",
+        borderTop: "1px solid #e5e7eb"
+      }}>
+        <div style={{ 
+          maxWidth: "1280px", 
+          margin: "0 auto",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center"
+        }}>
+          <div style={{ 
+            display: "flex", 
+            gap: "1.5rem", 
+            marginBottom: "1rem" 
+          }}>
+            <a href="/admin/home" style={{ color: "#9ca3af", textDecoration: "none" }}>
+              用户中心
+            </a>
+          </div>
+          <p style={{ color: "#9ca3af", fontSize: "0.875rem" }}>
+            &copy; 2023 Excel to JSON 转换平台. 保留所有权利.
+          </p>
+        </div>
+      </footer>
     </div>
-  </div>
-  )
+  );
 }
 
 const rootElement = document.getElementById('root')