2.23

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "marscode.marscode-extension"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "marscode.chatLanguage": "cn",
+    "marscode.codeCompletionPro": {
+        "enableCodeCompletionPro": true
+    },
+    "marscode.enableInlineCommand": true
+}

apps/web/src/app/main/component/People.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { api } from '@nice/client';
+
+function People() {
+    // 使用 useQuery 钩子从 API 获取数据，限制查询结果数量为 10
+    const { data } = api.staff.findMany.useQuery({
+        take: 10, // 限制查询结果数量
+    });
+    // 当 data 发生变化时，打印数据到控制台
+    useEffect(() => {
+        console.log(data);
+    }, [data]);
+
+    return (
+        <div>
+            {
+                // 遍历 data 并渲染每个元素
+                data?.map((i) => {
+                    return (
+                        <table className='table-auto w-full'>
+                            <thead>
+                                <tr>
+                                    <th className='px-4 py-2'>Username</th>
+                                    <th className='px-4 py-2'>ID</th>
+                                    <th className='px-4 py-2'>Showname</th>
+                                    <th className='px-4 py-2'>Password</th>
+                                    <th className='px-4 py-2'>Phone Number</th>
+                                    <th className='px-4 py-2'>Order</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {data?.map((i) => (
+                                    <tr key={i.id} className='hover:bg-gray-100'>
+                                        <td className='border px-4 py-2'>{i.username}</td>
+                                        <td className='border px-4 py-2'>{i.id}</td>
+                                        <td className='border px-4 py-2'>{i.showname}</td>
+                                        <td className='border px-4 py-2'>{i.password}</td>
+                                        <td className='border px-4 py-2'>{i.phoneNumber}</td>
+                                        <td className='border px-4 py-2'>{i.order}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    );
+                })
+            }
+        </div>
+    );
+}
+
+export default People;

apps/web/src/app/main/home/page.tsx

@@ -1,10 +1,31 @@
-import { api } from "@nice/client"
+import { api } from '@nice/client';
-import { useEffect } from "react"
+import { useState, useEffect, useMemo } from 'react';
+import { Button } from 'antd';
+import People from '../component/People';
+// 主页入口组件，负责渲染首页内容
+function HomePage() {
+  // 使用trpc查询接口获取员工列表（取前10条记录）
+  // const { data } = api.staff.findMany.useQuery({
+  //   take: 10, // 限制查询结果数量
+  // });
+  const [counter, setCounter] = useState<number>(0);
+  const counterText = useMemo(() => {
+    return `当前值:${counter}`
+  }, [counter]);
 
-export default function HomePage() {
+  // useEffect(() => {
-  const { data } = api.staff.findMany.useQuery({ take: 10 })
+  //   console.log(data);
-  useEffect(() => {
+  // }, [data]);
-    console.log(data)
+  return (
-  }, [data])
+    <div className='p-2 space-y-2'>
-  return <>Home</>
+      <div className='flex space-x-2'>
-}
+        <Button type="primary" onClick={() => { setCounter(counter + 1) }}>+1</Button>
+        <div className='flex items-center'>{counterText}</div>
+        <Button danger onClick={() => { setCounter(counter - 1) }}>-1</Button>
+      </div>
+    <People></People>
+    </div>
+  );
+}
+//export {HomePage}; MainRoute也要+{}
+export default HomePage;

config/nginx/conf.d/web.conf

@@ -27,7 +27,8 @@ server {
     # 压缩HTTP版本
     gzip_http_version 1.1;
     # 压缩的文件类型
-    gzip_types text/plain
+    gzip_types 
+        text/plain
         text/css
         application/json
         application/javascript
@@ -90,8 +91,8 @@ server {
         add_header 'Access-Control-Allow-Origin' '$http_origin' always;
         add_header 'Access-Control-Allow-Credentials' 'true' always;
         add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
-        add_header 'Access-Control-Allow-Headers'
+        add_header 'Access-Control-Allow-Headers' 
-            'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'
+            'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' 
             always;
     }
     # 内部认证服务位置
@@ -110,4 +111,4 @@ server {
         proxy_set_header Host $host;
         proxy_set_header X-Query-Params $query_string;
     }
-}
+}

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "pnpm run --parallel dev",
-    "db:clear": "pnpm --filter common run db:clear"
+    "db:clear": "pnpm --filter common run db:clear",
+    "studio": "pnpm --filter common run studio"
   },
   "keywords": [],
   "author": "insiinc",