diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..c76c14f
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "marscode.marscode-extension"
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..137d9f4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "marscode.chatLanguage": "cn",
+    "marscode.codeCompletionPro": {
+        "enableCodeCompletionPro": true
+    },
+    "marscode.enableInlineCommand": true
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/component/People.tsx b/apps/web/src/app/main/component/People.tsx
new file mode 100644
index 0000000..835b87e
--- /dev/null
+++ b/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;
diff --git a/apps/web/src/app/main/home/page.tsx b/apps/web/src/app/main/home/page.tsx
index 3697ead..cef1e06 100755
--- a/apps/web/src/app/main/home/page.tsx
+++ b/apps/web/src/app/main/home/page.tsx
@@ -36,4 +36,4 @@ function HomePage() {
   </div>
 }
 // export { HomePage }
-export default HomePage
\ No newline at end of file
+export default HomePage