2
0
فهرست منبع

✨ feat(deps): 集成完整前端技术栈

- 添加 antd 组件库、@tanstack/react-query、axios、react-router-dom 等核心依赖
- 引入 @heroicons/react 图标库和 dayjs 日期处理工具
- 配置 @ 路径别名和 tsconfig paths
- 创建 ClientOnly 组件用于客户端渲染隔离
- 调整客户端入口逻辑,根据路由加载不同模块

📦 build(config): 更新构建配置

- 在 vite.config.ts 中配置 @ 路径别名
- 在 tsconfig.json 中添加 baseUrl 和 paths 配置
yourname 7 ماه پیش
والد
کامیت
0e99628012
8فایلهای تغییر یافته به همراه789 افزوده شده و 23 حذف شده
  1. 15 12
      index.html
  2. 8 0
      package.json
  3. 725 0
      pnpm-lock.yaml
  4. 5 7
      src/client/index.tsx
  5. 21 0
      src/client/utils/ClientOnly.tsx
  6. 2 2
      src/server/index.tsx
  7. 6 1
      tsconfig.json
  8. 7 1
      vite.config.ts

+ 15 - 12
index.html

@@ -1,14 +1,17 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <!--app-head-->
-  </head>
-  <body>
-    <div id="root"><!--app-html--></div>
-    <script type="module" src="/src/entry-client.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+  <!--app-head-->
+</head>
+
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="/src/client/index.tsx"></script>
+</body>
+
+</html>

+ 8 - 0
package.json

@@ -11,13 +11,21 @@
     "preview": "PORT=8080 cross-env NODE_ENV=production tsx server"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "@hono/node-server": "^1.17.1",
     "@hono/zod-openapi": "^1.0.2",
+    "@tanstack/react-query": "^5.83.0",
+    "antd": "^5.26.6",
+    "axios": "^1.11.0",
     "compression": "^1.8.0",
+    "dayjs": "^1.11.13",
     "express": "^5.1.0",
     "hono": "^4.8.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.61.1",
+    "react-router": "^7.7.0",
+    "react-router-dom": "^7.7.0",
     "sirv": "^3.0.1"
   },
   "devDependencies": {

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 725 - 0
pnpm-lock.yaml


+ 5 - 7
src/client/index.tsx

@@ -1,8 +1,6 @@
 // 如果当前是在 /big 下
-// if (window.location.pathname.startsWith('/admin')) {
-//   import('./admin/index')
-// } else {
-//   import('./home/index')
-// }
-
-import('./home/index')
+if (window.location.pathname.startsWith('/admin')) {
+  import('./admin/index')
+} else {
+  import('./home/index')
+}

+ 21 - 0
src/client/utils/ClientOnly.tsx

@@ -0,0 +1,21 @@
+// components/ClientOnly.tsx
+import { useEffect, useState, ReactNode } from 'react';
+
+interface ClientOnlyProps {
+  // 子组件(仅在客户端渲染)
+  children: ReactNode;
+  // 服务器端渲染时的占位内容(可选,默认 null)
+  fallback?: ReactNode | null;
+}
+
+export default function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const [isClient, setIsClient] = useState<boolean>(false);
+
+  useEffect(() => {
+    // 仅在客户端执行,标记为客户端环境
+    setIsClient(true);
+  }, []);
+
+  // 服务器端渲染时显示 fallback,客户端渲染时显示 children
+  return isClient ? children : fallback;
+}

+ 2 - 2
src/server/index.tsx

@@ -3,12 +3,12 @@ import {
   type RenderToPipeableStreamOptions,
   renderToPipeableStream,
 } from 'react-dom/server'
-import App from '../App'
+// import App from '../App'
 
 export function render(_url: string, options?: RenderToPipeableStreamOptions) {
   return renderToPipeableStream(
     <StrictMode>
-      <App />
+      {/* <App /> */}
     </StrictMode>,
     options,
   )

+ 6 - 1
tsconfig.json

@@ -19,7 +19,12 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

+ 7 - 1
vite.config.ts

@@ -6,5 +6,11 @@ export default defineConfig({
   plugins: [react()],
   server: {
     allowedHosts:true
-  }
+  },
+  // 配置 @ 别名
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 })

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است