Merge branch 'main' of http://113.45.157.195:3003/insiinc/nice-playground

.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;