Ver código fonte

feat(app): 添加页面加载模板和 TypeScript 配置

- 新增 Template 组件,用于页面加载动画和主要内容的渲染
- 添加 tsconfig.json 配置文件,设置 TypeScript 编译选项
-配置模块解析、jsx 支持和类型定义
nahida 8 meses atrás
pai
commit
7c16d68f73
2 arquivos alterados com 53 adições e 0 exclusões
  1. 26 0
      src/app/template.tsx
  2. 27 0
      tsconfig.json

+ 26 - 0
src/app/template.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { useState, useEffect } from 'react'
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return (
+    <>
+      {/* 页面加载动画 */}
+      {!isMounted && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white">
+          <div className="h-16 w-16 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
+        </div>
+      )}
+
+      {/* 主要内容 */}
+      <div className={`transition-opacity duration-300 ${isMounted ? 'opacity-100' : 'opacity-0'}`}>
+        {children}
+      </div>
+    </>
+  )
+}

+ 27 - 0
tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}