{"id":192,"date":"2026-01-03T23:12:43","date_gmt":"2026-01-03T15:12:43","guid":{"rendered":"https:\/\/erishen.cn\/?p=192"},"modified":"2026-01-04T22:30:54","modified_gmt":"2026-01-04T14:30:54","slug":"%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%8c%96%e7%9a%84%e7%bb%84%e4%bb%b6%e5%ba%93%ef%bc%9ashadcn-bun-%e5%b8%a6%e6%9d%a5%e7%9a%84%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e9%9d%a9%e5%91%bd","status":"publish","type":"post","link":"https:\/\/erishen.cn\/?p=192","title":{"rendered":"\u6784\u5efa\u73b0\u4ee3\u5316\u7684\u7ec4\u4ef6\u5e93\uff1ashadcn + Bun \u5e26\u6765\u7684\u524d\u7aef\u5f00\u53d1\u9769\u547d"},"content":{"rendered":"\n<div class=\"quote-block-wrapper\"><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u8fd9\u7bc7\u6587\u7ae0\u5206\u4eab\u4e86\u6211\u5982\u4f55\u57fa\u4e8e shadcn\/ui \u548c Bun \u6784\u5efa\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u6ce8\u518c\u8868\uff0c\u4ee5\u53ca\u8fd9\u4e2a\u8fc7\u7a0b\u7ed9\u6211\u5e26\u6765\u7684\u5173\u4e8e\u524d\u7aef\u5f00\u53d1\u6548\u7387\u7684\u6df1\u5ea6\u601d\u8003\u3002<\/p>\n<\/blockquote><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/erishen.cn\/wordpress\/wp-content\/uploads\/2026\/01\/shadcn-bun-medium-cover.png\" alt=\"\" class=\"wp-image-194\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u524d\u8a00\u91cd\u65b0\u601d\u8003\u7ec4\u4ef6\u83b7\u53d6\u65b9\u5f0f\">\u524d\u8a00\uff1a\u91cd\u65b0\u601d\u8003\u7ec4\u4ef6\u83b7\u53d6\u65b9\u5f0f<\/h2>\n\n\n\n<p>\u6700\u8fd1\u5728\u91cd\u6784\u516c\u53f8\u524d\u7aef\u9879\u76ee\u65f6\uff0c\u6211\u9047\u5230\u4e86\u4e00\u4e2a\u5f88\u6709\u610f\u601d\u7684\u95ee\u9898\uff1a<strong>\u4e3a\u4ec0\u4e48\u6211\u4eec\u603b\u662f\u5728 npm install \u4e0a\u6d6a\u8d39\u8fd9\u4e48\u591a\u65f6\u95f4\uff1f<\/strong><\/p>\n\n\n\n<p>\u8fd9\u4e2a\u95ee\u9898\u8ba9\u6211\u5f00\u59cb\u601d\u8003\uff1a\u4f20\u7edf\u7684\u4f9d\u8d56\u5b89\u88c5\u6a21\u5f0f\u662f\u5426\u771f\u7684\u662f\u6700\u4f18\u89e3\uff1f\u76f4\u5230\u6211\u63a5\u89e6\u5230\u4e86 shadcn \u7684\u7406\u5ff5\u548c Bun \u7684\u6027\u80fd\uff0c\u624d\u610f\u8bc6\u5230\u524d\u7aef\u5f00\u53d1\u5de5\u5177\u94fe\u8fd8\u6709\u5982\u6b64\u5927\u7684\u4f18\u5316\u7a7a\u95f4\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u9879\u76ee\u80cc\u666fshadcn-registry-\u6982\u8ff0\">\u9879\u76ee\u80cc\u666f\uff1ashadcn-registry \u6982\u8ff0<\/h2>\n\n\n\n<p><a href=\"https:\/\/erishen.github.io\/shadcn-registry\/\">shadcn-registry<\/a>&nbsp;\u662f\u6211\u57fa\u4e8e shadcn\/ui \u7406\u5ff5\u6784\u5efa\u7684\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u6ce8\u518c\u8868\u9879\u76ee\u3002\u8fd9\u4e2a\u9879\u76ee\u7684\u6838\u5fc3\u4ef7\u503c\u4e0d\u5728\u4e8e\u7ec4\u4ef6\u672c\u8eab\uff0c\u800c\u5728\u4e8e\u5b83\u4ee3\u8868\u7684\u4e00\u79cd\u65b0\u7684\u5f00\u53d1\u8303\u5f0f\u3002<\/p>\n\n\n\n<p><strong>\u6838\u5fc3\u7406\u5ff5\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udfa8&nbsp;<strong>\u7ec4\u4ef6\u590d\u5236\u800c\u975e\u5b89\u88c5<\/strong>\uff1acopy instead of install<\/li>\n\n\n\n<li>\ud83d\udce6&nbsp;<strong>\u6ce8\u518c\u8868\u6a21\u5f0f<\/strong>\uff1a\u5efa\u7acb\u81ea\u5df1\u7684\u7ec4\u4ef6\u5206\u53d1\u4f53\u7cfb<\/li>\n\n\n\n<li>\u26a1&nbsp;<strong>\u6781\u81f4\u6027\u80fd<\/strong>\uff1a\u4f7f\u7528 Bun \u91cd\u65b0\u5b9a\u4e49\u5f00\u53d1\u4f53\u9a8c<\/li>\n\n\n\n<li>\ud83d\udd27&nbsp;<strong>\u5b8c\u5168\u53ef\u63a7<\/strong>\uff1a\u6e90\u4ee3\u7801\u7ea7\u522b\u7684\u5b9a\u5236\u80fd\u529b<\/li>\n<\/ul>\n\n\n\n<p><strong>\u6280\u672f\u6808\uff1a<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>- \u6846\u67b6\uff1aNext.js 14 (App Router)\n- UI \u5e93\uff1aReact 18 + shadcn\/ui + Radix UI\n- \u6837\u5f0f\uff1aTailwind CSS 4.0\u3001SCSS\u3001styled-components\n- \u8868\u5355\uff1aReact Hook Form + Zod\n- \u6587\u6863\uff1aStorybook 9\n- \u8bed\u8a00\uff1aTypeScript 5.5\n- \u5305\u7ba1\u7406\u5668\uff1aBun 1.3+\n<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u4e3a\u4ec0\u4e48\u9009\u62e9-bun\u4e00\u4e2a\u6027\u80fd\u6781\u5ba2\u7684\u601d\u8003\">\u4e3a\u4ec0\u4e48\u9009\u62e9 Bun\uff1a\u4e00\u4e2a\u6027\u80fd\u6781\u5ba2\u7684\u601d\u8003<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5f00\u53d1\u6548\u7387\u7684\u74f6\u9888\">\u5f00\u53d1\u6548\u7387\u7684\u74f6\u9888<\/h3>\n\n\n\n<p>\u4f5c\u4e3a\u524d\u7aef\u5f00\u53d1\u8005\uff0c\u6211\u4eec\u90fd\u7ecf\u5386\u8fc7\u8fd9\u6837\u7684\u573a\u666f\uff1a<\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u9879\u76ee\u521d\u59cb\u5316\nnpm install                    # \u7b49\u5f85 30-60 \u79d2\nnpm run dev                    # \u7b49\u5f85 8-10 \u79d2\u542f\u52a8\nnpm install @tanstack\/react-table   # \u53c8\u7b49\u5f85 20-30 \u79d2\nnpm run build                  # \u7b49\u5f85 2-3 \u5206\u949f\u6784\u5efa\n<\/code><\/pre><\/div>\n\n\n\n<p>\u8fd9\u4e9b\u7b49\u5f85\u65f6\u95f4\u770b\u4f3c\u5fae\u4e0d\u8db3\u9053\uff0c\u4f46\u7d2f\u8ba1\u8d77\u6765\u5374\u6784\u6210\u4e86\u5de8\u5927\u7684\u6548\u7387\u635f\u8017\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bun-\u7684\u6027\u80fd\u9769\u547d\">Bun \u7684\u6027\u80fd\u9769\u547d<\/h3>\n\n\n\n<p>\u5f53\u6211\u7b2c\u4e00\u6b21\u4f7f\u7528 Bun \u65f6\uff0c\u5b83\u7684\u8868\u73b0\u8ba9\u6211\u9707\u60ca\uff1a<\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u5728\u540c\u4e00\u4e2a Next.js \u9879\u76ee\u4e0a\u7684\u6d4b\u8bd5\u7ed3\u679c\n\n# \ud83d\udc0c npm (\u57fa\u7ebf)\ntime npm install\n# real    0m45.231s\n\n# \u26a1 pnpm \ntime pnpm install\n# real    0m12.456s\n\n# \ud83d\ude80 Bun\ntime bun install\n# real    0m2.134s   # \u6bd4 npm \u5feb 21 \u500d\uff01\n<\/code><\/pre><\/div>\n\n\n\n<p>\u8fd9\u79cd\u901f\u5ea6\u5dee\u5f02\u4e0d\u662f\u7b80\u5355\u7684\u6570\u5b57\u5bf9\u6bd4\uff0c\u800c\u662f\u5f00\u53d1\u4f53\u9a8c\u7684\u6839\u672c\u6027\u6539\u53d8\u3002<\/p>\n\n\n\n<p><strong>Bun \u7684\u6838\u5fc3\u6280\u672f\u4f18\u52bf\uff1a<\/strong><\/p>\n\n\n\n<p><strong>1. \u5e76\u884c\u4e0b\u8f7d\u7b97\u6cd5<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u540c\u65f6\u4e0b\u8f7d\u591a\u4e2a\u5305\uff0c\u5145\u5206\u5229\u7528\u7f51\u7edc\u5e26\u5bbd<\/li>\n\n\n\n<li>\u667a\u80fd\u91cd\u8bd5\u673a\u5236\uff0c\u5904\u7406\u7f51\u7edc\u5f02\u5e38<\/li>\n<\/ul>\n\n\n\n<p><strong>2. \u667a\u80fd\u7f13\u5b58\u7cfb\u7edf<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u672c\u5730\u7f13\u5b58\u5df2\u4e0b\u8f7d\u7684\u5305\uff0c\u907f\u514d\u91cd\u590d\u4e0b\u8f7d<\/li>\n\n\n\n<li>\u8de8\u9879\u76ee\u5171\u4eab\u7f13\u5b58\uff0c\u6700\u5927\u5316\u8d44\u6e90\u5229\u7528<\/li>\n<\/ul>\n\n\n\n<p><strong>3. \u539f\u751f\u6027\u80fd<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 Zig \u8bed\u8a00\u7f16\u5199\uff0c\u65e0 Node.js \u8fd0\u884c\u65f6\u5f00\u9500<\/li>\n\n\n\n<li>\u5185\u7f6e JavaScript \u5f15\u64ce\uff0c\u89e3\u6790\u901f\u5ea6\u66f4\u5feb<\/li>\n<\/ul>\n\n\n\n<p><strong>4. \u5f00\u53d1\u5de5\u5177\u96c6\u6210<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5185\u7f6e ESBuild\uff0c\u6253\u5305\u901f\u5ea6\u63d0\u5347 2-3 \u500d<\/li>\n\n\n\n<li>\u5185\u7f6e\u6d4b\u8bd5\u8fd0\u884c\u5668\uff0c\u65e0\u9700 Jest \u914d\u7f6e<\/li>\n\n\n\n<li>\u539f\u751f TypeScript \u652f\u6301\uff0c\u65e0\u9700\u989d\u5916\u7f16\u8bd1\u6b65\u9aa4<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5bf9\u6bd4\u4f18\u52bf\">\u5bf9\u6bd4\u4f18\u52bf<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u7279\u6027<\/th><th>Bun<\/th><th>npm<\/th><th>pnpm<\/th><\/tr><\/thead><tbody><tr><td>\u5b89\u88c5\u901f\u5ea6<\/td><td>\ud83d\ude80 \u6781\u5feb<\/td><td>\ud83d\udc0c \u6162<\/td><td>\u26a1 \u5feb<\/td><\/tr><tr><td>\u78c1\u76d8\u7a7a\u95f4<\/td><td>\ud83d\udcbe \u8282\u7701<\/td><td>\ud83d\udce6 \u5927<\/td><td>\ud83d\udcbe \u8282\u7701<\/td><\/tr><tr><td>\u542f\u52a8\u901f\u5ea6<\/td><td>\u26a1 7x faster<\/td><td>\ud83d\udc0c baseline<\/td><td>\u26a1 3x faster<\/td><\/tr><tr><td>\u5185\u5b58\u5360\u7528<\/td><td>\ud83d\udca1 \u4f4e<\/td><td>\ud83d\udcc8 \u9ad8<\/td><td>\ud83d\udca1 \u4e2d\u7b49<\/td><\/tr><tr><td>Node \u517c\u5bb9\u6027<\/td><td>\u2705 99%+<\/td><td>\u2705 100%<\/td><td>\u2705 100%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shadcn-\u7684\u7406\u5ff5\u9769\u65b0\u4ece\u5b89\u88c5\u5230\u590d\u5236\">shadcn \u7684\u7406\u5ff5\u9769\u65b0\uff1a\u4ece\u5b89\u88c5\u5230\u590d\u5236<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u4f20\u7edf\u4f9d\u8d56\u7ba1\u7406\u7684\u75db\u70b9\">\u4f20\u7edf\u4f9d\u8d56\u7ba1\u7406\u7684\u75db\u70b9<\/h3>\n\n\n\n<p>\u4f20\u7edf\u7684 npm \u5305\u7ba1\u7406\u65b9\u5f0f\u5b58\u5728\u51e0\u4e2a\u6839\u672c\u6027\u95ee\u9898\uff1a<\/p>\n\n\n\n<p><strong>1. \u4f9d\u8d56\u5730\u72f1<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>\/\/ \u4e00\u4e2a\u7b80\u5355\u7684\u9879\u76ee\u53ef\u80fd\u9700\u8981\u8fd9\u4e48\u591a\u4f9d\u8d56\n{\n  \"dependencies\": {\n    \"@tanstack\/react-table\": \"^8.10.7\",\n    \"@headlessui\/react\": \"^1.7.17\",\n    \"@heroicons\/react\": \"^2.0.18\",\n    \"react-hook-form\": \"^7.47.0\",\n    \"@hookform\/resolvers\": \"^3.3.2\",\n    \"zod\": \"^3.22.4\",\n    \"clsx\": \"^2.0.0\",\n    \"tailwind-merge\": \"^1.14.0\",\n    \"date-fns\": \"^2.30.0\",\n    \"lodash\": \"^4.17.21\"\n    \/\/ ... \u603b\u5171 30+ \u4e2a\u5305\n  }\n}\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>2. \u7248\u672c\u51b2\u7a81<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>npm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR! Found: react@18.2.0\nnpm ERR! Could not resolve dependency: react-dom@17.0.2\nnpm ERR! peer react@\"^16.8.0 || ^17.0.0-rc.1\" from react-dom@17.0.2\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>3. \u5b9a\u5236\u56f0\u96be<\/strong><br>\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\u867d\u7136\u529f\u80fd\u5f3a\u5927\uff0c\u4f46\u5bf9\u4e8e\u6df1\u5ea6\u5b9a\u5236\u7684\u9700\u6c42\uff0c\u5f80\u5f80\u9700\u8981\u590d\u6742\u7684\u914d\u7f6e\u548c\u6837\u5f0f\u8986\u76d6\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"shadcn-\u7684\u89e3\u51b3\u65b9\u6848\">shadcn \u7684\u89e3\u51b3\u65b9\u6848<\/h3>\n\n\n\n<p>shadcn \u63d0\u51fa\u4e86\u4e00\u4e2a\u98a0\u8986\u6027\u7684\u7406\u5ff5\uff1a<strong>&#8220;Copy and paste, not install&#8221;<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u4f20\u7edf\u65b9\u5f0f\uff1a\u5b89\u88c5\u590d\u6742\u4f9d\u8d56\nnpm install @tanstack\/react-table @headlessui\/react @heroicons\/react\n\n# shadcn \u65b9\u5f0f\uff1a\u590d\u5236\u53ef\u63a7\u4ee3\u7801\npnpm dlx shadcn@latest add https:\/\/erishen.github.io\/shadcn-registry\/r\/data-table.json\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u6838\u5fc3\u4f18\u52bf\uff1a<\/strong><\/p>\n\n\n\n<p><strong>1. \u96f6\u4f9d\u8d56<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7ec4\u4ef6\u4ee3\u7801\u76f4\u63a5\u96c6\u6210\u5230\u9879\u76ee\u4e2d<\/li>\n\n\n\n<li>\u65e0\u9700\u62c5\u5fc3\u7248\u672c\u51b2\u7a81\u548c\u4f9d\u8d56\u66f4\u65b0<\/li>\n<\/ul>\n\n\n\n<p><strong>2. \u5b8c\u5168\u53ef\u63a7<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ef\u4ee5\u67e5\u770b\u548c\u4fee\u6539\u6bcf\u4e00\u884c\u4ee3\u7801<\/li>\n\n\n\n<li>\u9002\u5e94\u7279\u5b9a\u7684\u8bbe\u8ba1\u7cfb\u7edf\u548c\u4e1a\u52a1\u9700\u6c42<\/li>\n<\/ul>\n\n\n\n<p><strong>3. \u7cbe\u786e\u63a7\u5236<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tree-shaking \u7684\u6781\u81f4\u5b9e\u73b0<\/li>\n\n\n\n<li>\u53ea\u5305\u542b\u5b9e\u9645\u4f7f\u7528\u7684\u4ee3\u7801<\/li>\n<\/ul>\n\n\n\n<p><strong>4. \u7c7b\u578b\u5b89\u5168<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b8c\u6574\u7684 TypeScript \u652f\u6301<\/li>\n\n\n\n<li>\u7f16\u8bd1\u65f6\u9519\u8bef\u68c0\u67e5<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u9879\u76ee\u67b6\u6784\u7ec4\u4ef6\u6ce8\u518c\u8868\u7684\u8bbe\u8ba1\">\u9879\u76ee\u67b6\u6784\uff1a\u7ec4\u4ef6\u6ce8\u518c\u8868\u7684\u8bbe\u8ba1<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u6ce8\u518c\u8868\u7cfb\u7edf\u67b6\u6784\">\u6ce8\u518c\u8868\u7cfb\u7edf\u67b6\u6784<\/h3>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>shadcn-registry\/\n\u251c\u2500\u2500 app\/                          # Next.js App Router\n\u2502   \u251c\u2500\u2500 layout.tsx                # \u6839\u5e03\u5c40\n\u2502   \u251c\u2500\u2500 page.tsx                  # \u4e3b\u9875\uff08\u7ec4\u4ef6\u5c55\u793a\uff09\n\u2502   \u2514\u2500\u2500 globals.css               # \u5168\u5c40\u6837\u5f0f\n\u251c\u2500\u2500 components\/                   # \u81ea\u5b9a\u4e49\u7ec4\u4ef6\n\u2502   \u251c\u2500\u2500 ComponentPreview.tsx     # \u7ec4\u4ef6\u9884\u89c8\n\u2502   \u251c\u2500\u2500 DataTable.tsx            # \u9ad8\u7ea7\u6570\u636e\u8868\u683c\n\u2502   \u2514\u2500\u2500 ...\n\u251c\u2500\u2500 registry\/                     # \u6ce8\u518c\u8868\u5b9a\u4e49\uff08\u6838\u5fc3\uff09\n\u2502   \u251c\u2500\u2500 new-york\/                # New York \u4e3b\u9898\n\u2502   \u2502   \u251c\u2500\u2500 blocks\/              # \u5757\u7ea7\u7ec4\u4ef6\n\u2502   \u2502   \u2514\u2500\u2500 ui\/                  # \u57fa\u7840 UI \u7ec4\u4ef6\n\u2502   \u251c\u2500\u2500 demo\/                    # \u6f14\u793a\u7ec4\u4ef6\n\u2502   \u251c\u2500\u2500 styled-components\/        # styled-components \u793a\u4f8b\n\u2502   \u2514\u2500\u2500 scss-components\/          # SCSS \u793a\u4f8b\n\u251c\u2500\u2500 stories\/                      # Storybook \u6545\u4e8b\n\u251c\u2500\u2500 public\/r\/                     # \u6ce8\u518c\u8868 JSON \u6587\u4ef6\n\u2514\u2500\u2500 registry.json                 # \u6ce8\u518c\u8868\u914d\u7f6e\n<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6\">\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6<\/h3>\n\n\n\n<p><code>registry.json<\/code>&nbsp;\u662f\u6574\u4e2a\u7cfb\u7edf\u7684\u6838\u5fc3\uff1a<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{\n  \"$schema\": \"https:\/\/ui.shadcn.com\/schema\/registry.json\",\n  \"name\": \"erishen\",\n  \"homepage\": \"https:\/\/erishen.github.io\/shadcn-registry\/\",\n  \"items\": [\n    {\n      \"name\": \"data-table\",\n      \"type\": \"registry:component\",\n      \"title\": \"Data Table\",\n      \"description\": \"A feature-rich data table with sorting, filtering, and pagination\",\n      \"dependencies\": &#91;\"button\", \"input\"&#93;,\n      \"files\": &#91;\n        {\n          \"path\": \"components\/data-table.tsx\",\n          \"type\": \"registry:component\"\n        }\n      &#93;\n    },\n    {\n      \"name\": \"button\",\n      \"type\": \"registry:ui\",\n      \"title\": \"Button\",\n      \"description\": \"A versatile button component with multiple variants\",\n      \"dependencies\": &#91;\"@radix-ui\/react-slot\", \"class-variance-authority\"&#93;,\n      \"files\": &#91;\n        {\n          \"path\": \"registry\/new-york\/ui\/button.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      &#93;\n    }\n  ]\n}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">$schema<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/ui.shadcn.com\/schema\/registry.json<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">name<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">erishen<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">homepage<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">https:\/\/erishen.github.io\/shadcn-registry\/<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">items<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">name<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">data-table<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">type<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">registry:component<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">title<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Data Table<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">description<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">A feature-rich data table with sorting, filtering, and pagination<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">dependencies<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: &#91;<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">button<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">input<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">files<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">path<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">components\/data-table.tsx<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">type<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">registry:component<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      &#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">name<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">button<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">type<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">registry:ui<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">title<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Button<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">description<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">A versatile button component with multiple variants<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">dependencies<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: &#91;<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">@radix-ui\/react-slot<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">class-variance-authority<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">files<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">path<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">registry\/new-york\/ui\/button.tsx<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">type<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">registry:ui<\/span><span style=\"color: #E9F284\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      &#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  ]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u7ec4\u4ef6\u5206\u53d1\u673a\u5236\">\u7ec4\u4ef6\u5206\u53d1\u673a\u5236<\/h3>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u4e00\u952e\u5b89\u88c5\u4efb\u4f55\u7ec4\u4ef6\npnpm dlx shadcn@latest add https:\/\/erishen.github.io\/shadcn-registry\/r\/data-table.json\n\n# \u7cfb\u7edf\u4f1a\u81ea\u52a8\uff1a\n# 1. \u4e0b\u8f7d\u7ec4\u4ef6\u6e90\u7801\n# 2. \u5b89\u88c5\u5fc5\u8981\u4f9d\u8d56\n# 3. \u751f\u6210\u7c7b\u578b\u5b9a\u4e49\n# 4. \u66f4\u65b0\u9879\u76ee\u914d\u7f6e\n<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"datatable-\u7ec4\u4ef6\u7406\u5ff5\u7684\u5b9e\u9645\u5e94\u7528\">DataTable \u7ec4\u4ef6\uff1a\u7406\u5ff5\u7684\u5b9e\u9645\u5e94\u7528<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u4e3a\u4ec0\u4e48\u9009\u62e9-datatable\">\u4e3a\u4ec0\u4e48\u9009\u62e9 DataTable\uff1f<\/h3>\n\n\n\n<p>DataTable \u662f\u4f01\u4e1a\u7ea7\u5e94\u7528\u4e2d\u6700\u590d\u6742\u7684\u7ec4\u4ef6\u4e4b\u4e00\uff0c\u5b83\u80fd\u591f\u5f88\u597d\u5730\u5c55\u793a shadcn \u7406\u5ff5\u7684\u4f18\u52bf\uff1a<\/p>\n\n\n\n<p><strong>\u4f20\u7edf\u8868\u683c\u7ec4\u4ef6\u7684\u4f9d\u8d56\u8d1f\u62c5\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>@tanstack\/react-table\uff1a\u6838\u5fc3\u8868\u683c\u903b\u8f91<\/li>\n\n\n\n<li>@headlessui\/react\uff1aUI \u7ec4\u4ef6<\/li>\n\n\n\n<li>@heroicons\/react\uff1a\u56fe\u6807\u5e93<\/li>\n\n\n\n<li>clsx, tailwind-merge\uff1a\u6837\u5f0f\u5de5\u5177<\/li>\n\n\n\n<li>\u603b\u8ba1\uff1a15+ \u4e2a\u4f9d\u8d56\u5305\uff0c200KB+ \u4f53\u79ef<\/li>\n<\/ul>\n\n\n\n<p><strong>shadcn \u65b9\u5f0f\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1 \u4e2a\u6587\u4ef6\uff0c8KB \u4f53\u79ef<\/li>\n\n\n\n<li>0 \u989d\u5916\u4f9d\u8d56<\/li>\n\n\n\n<li>\u5b8c\u5168\u53ef\u63a7\u7684\u6e90\u7801<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u6838\u5fc3\u5b9e\u73b0\u601d\u8def\">\u6838\u5fc3\u5b9e\u73b0\u601d\u8def<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>'use client';\n\nimport { useState, useMemo } from 'react';\nimport { Button } from '@\/components\/ui\/button';\nimport { Input } from '@\/components\/ui\/input';\n\n\/\/ \u5f3a\u7c7b\u578b\u5b9a\u4e49\nexport interface Column&lt;T> {\n  key: keyof T;\n  label: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  render?: (value: T&#91;keyof T&#93;, row: T) => React.ReactNode;\n}\n\nexport interface DataTableProps&lt;T extends Record&lt;string, any>> {\n  data: T[];\n  columns: Column&lt;T>[];\n  pageSize?: number;\n  onRowClick?: (row: T) => void;\n}\n\n\/\/ \u6027\u80fd\u4f18\u5316\uff1auseMemo \u7f13\u5b58\nconst filteredData = useMemo(() => {\n  return data.filter((row) => {\n    return Object.entries(filters).every((&#91;key, value&#93;) => {\n      if (!value) return true;\n      const cellValue = String(row&#91;key as keyof T&#93;).toLowerCase();\n      return cellValue.includes(value.toLowerCase());\n    });\n  });\n}, &#91;data, filters&#93;);\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">use client<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { useState, useMemo } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">react<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { Button } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@\/components\/ui\/button<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">import<\/span><span style=\"color: #F8F8F2\"> { Input } <\/span><span style=\"color: #FF79C6\">from<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">@\/components\/ui\/input<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ \u5f3a\u7c7b\u578b\u5b9a\u4e49<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">interface<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Column<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  label<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  sortable<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  filterable<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B\">render<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#91;<\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#93;, <\/span><span style=\"color: #FFB86C; font-style: italic\">row<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">React<\/span><span style=\"color: #F8F8F2\">.<\/span><span style=\"color: #8BE9FD; font-style: italic\">ReactNode<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">interface<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">DataTableProps<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">extends<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FFB86C; font-style: italic\">Record<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #8BE9FD; font-style: italic\">any<\/span><span style=\"color: #F8F8F2\">&gt;&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  data<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">[];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  columns<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Column<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&gt;[];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  pageSize<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B\">onRowClick<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">row<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">void<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ \u6027\u80fd\u4f18\u5316\uff1auseMemo \u7f13\u5b58<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> filteredData <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">useMemo<\/span><span style=\"color: #F8F8F2\">(() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> data.<\/span><span style=\"color: #50FA7B\">filter<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">row<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> Object.<\/span><span style=\"color: #50FA7B\">entries<\/span><span style=\"color: #F8F8F2\">(filters).<\/span><span style=\"color: #50FA7B\">every<\/span><span style=\"color: #F8F8F2\">((&#91;<\/span><span style=\"color: #FFB86C; font-style: italic\">key<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #F8F8F2\">&#93;) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FF79C6\">!<\/span><span style=\"color: #F8F8F2\">value) <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> cellValue <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">String<\/span><span style=\"color: #F8F8F2\">(row&#91;key <\/span><span style=\"color: #FF79C6\">as<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#93;).<\/span><span style=\"color: #50FA7B\">toLowerCase<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> cellValue.<\/span><span style=\"color: #50FA7B\">includes<\/span><span style=\"color: #F8F8F2\">(value.<\/span><span style=\"color: #50FA7B\">toLowerCase<\/span><span style=\"color: #F8F8F2\">());<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}, &#91;data, filters&#93;);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>\u8bbe\u8ba1\u4eae\u70b9\uff1a<\/strong><\/p>\n\n\n\n<p><strong>1. \u4e09\u7ea7\u6392\u5e8f\u5faa\u73af<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const handleSort = (key: keyof T) => {\n  if (sortKey === key) {\n    if (sortDirection === 'asc') {\n      setSortDirection('desc');\n    } else if (sortDirection === 'desc') {\n      setSortDirection(null);\n      setSortKey(null);\n    }\n  } else {\n    setSortKey(key);\n    setSortDirection('asc');\n  }\n};\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">handleSort<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (sortKey <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> key) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (sortDirection <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">asc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #50FA7B\">setSortDirection<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">desc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    } <\/span><span style=\"color: #FF79C6\">else<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (sortDirection <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">desc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #50FA7B\">setSortDirection<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">null<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #50FA7B\">setSortKey<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">null<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  } <\/span><span style=\"color: #FF79C6\">else<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">setSortKey<\/span><span style=\"color: #F8F8F2\">(key);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">setSortDirection<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">asc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">};<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>2. \u81ea\u5b9a\u4e49\u6e32\u67d3<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{\n  key: 'status',\n  label: '\u72b6\u6001',\n  render: (value) => (\n    &lt;span className={`px-2 py-1 rounded-full text-xs font-medium ${\n      value === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'\n    }`}>\n      {value === 'active' ? '\u6fc0\u6d3b' : '\u7981\u7528'}\n    &lt;\/span>\n  ),\n}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  key: <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">status<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  label: <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">\u72b6\u6001<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  render: (<\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">={<\/span><span style=\"color: #F1FA8C\">`px-2 py-1 rounded-full text-xs font-medium <\/span><span style=\"color: #FF79C6\">${<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F1FA8C\">      <\/span><span style=\"color: #F8F8F2\">value<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">active<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">bg-green-100 text-green-800<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F1FA8C\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">bg-red-100 text-red-800<\/span><span style=\"color: #E9F284\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F1FA8C\">    <\/span><span style=\"color: #FF79C6\">}<\/span><span style=\"color: #F1FA8C\">`<\/span><span style=\"color: #FF79C6\">}<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">{<\/span><span style=\"color: #F8F8F2\">value <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">active<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">\u6fc0\u6d3b<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">\u7981\u7528<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #FF79C6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u5b9e\u9645\u5e94\u7528interviewappsweb-\u9879\u76ee\u96c6\u6210\">\u5b9e\u9645\u5e94\u7528\uff1ainterview\/apps\/web \u9879\u76ee\u96c6\u6210<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5b89\u88c5\u8fc7\u7a0b\">\u5b89\u88c5\u8fc7\u7a0b<\/h3>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u4ece\u6211\u4eec\u7684\u6ce8\u518c\u8868\u5b89\u88c5 data-table \u7ec4\u4ef6\npnpm dlx shadcn@latest add https:\/\/erishen.github.io\/shadcn-registry\/r\/data-table.json\n<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5b9e\u9645\u4f7f\u7528\u6848\u4f8b\">\u5b9e\u9645\u4f7f\u7528\u6848\u4f8b<\/h3>\n\n\n\n<p>\u5728 interview \u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u7528 DataTable \u5c55\u793a\u4ea7\u54c1\u6570\u636e\uff1a<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>interface Product {\n  id: number;\n  name: string;\n  description?: string;\n  price: number;\n  category?: string;\n  created_at?: string;\n  is_offer?: boolean;\n}\n\nconst columns: Array&lt;Column&lt;Product>> = &#91;\n  {\n    key: 'name',\n    label: 'Product Name',\n    sortable: true,\n    filterable: true,\n  },\n  {\n    key: 'price',\n    label: 'Price (\u00a5)',\n    sortable: true,\n    render: (value: string | number | boolean | undefined) => `\u00a5${Number(value).toFixed(2)}`,\n  },\n  {\n    key: 'is_offer',\n    label: 'Offer',\n    sortable: true,\n    filterable: true,\n    render: (value: string | number | boolean | undefined) => {\n      const isOffer = Boolean(value);\n      return isOffer ? (\n        &lt;span className=\"px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800\">\n          \u7279\u60e0\n        &lt;\/span>\n      ) : (\n        &lt;span className=\"text-slate-400\">-&lt;\/span>\n      );\n    },\n  },\n&#93;;\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #FF79C6\">interface<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Product<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  id<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  name<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  description<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  price<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  category<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  created_at<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  is_offer<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> columns<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Array<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">Column<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">Product<\/span><span style=\"color: #F8F8F2\">&gt;&gt; <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">name<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    label<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Product Name<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    sortable<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    filterable<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">price<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    label<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Price (\u00a5)<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    sortable<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">render<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">undefined<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F1FA8C\">`\u00a5<\/span><span style=\"color: #FF79C6\">${<\/span><span style=\"color: #50FA7B\">Number<\/span><span style=\"color: #F8F8F2\">(value).<\/span><span style=\"color: #50FA7B\">toFixed<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">2<\/span><span style=\"color: #F8F8F2\">)<\/span><span style=\"color: #FF79C6\">}<\/span><span style=\"color: #F1FA8C\">`<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">is_offer<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    label<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Offer<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    sortable<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    filterable<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">render<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">|<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">undefined<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> isOffer <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">Boolean<\/span><span style=\"color: #F8F8F2\">(value);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> isOffer <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F8F8F2\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          \u7279\u60e0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;\/<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      ) <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">text-slate-400<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;-&lt;\/<\/span><span style=\"color: #FF79C6\">span<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&#93;;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>\u96c6\u6210\u4f18\u52bf\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5feb\u901f\u5f00\u53d1<\/strong>\uff1a\u4ece\u5b89\u88c5\u5230\u4f7f\u7528\u53ea\u9700 5 \u5206\u949f<\/li>\n\n\n\n<li><strong>\u5b8c\u5168\u5b9a\u5236<\/strong>\uff1a\u6839\u636e\u4e1a\u52a1\u9700\u6c42\u8c03\u6574\u6837\u5f0f\u548c\u903b\u8f91<\/li>\n\n\n\n<li><strong>\u7c7b\u578b\u5b89\u5168<\/strong>\uff1aTypeScript \u5b8c\u6574\u7684\u7c7b\u578b\u68c0\u67e5<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u4f18\u5f02<\/strong>\uff1auseMemo \u4f18\u5316\uff0c\u5927\u6570\u636e\u91cf\u4e0b\u4f9d\u7136\u6d41\u7545<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u6027\u80fd\u6d4b\u8bd5\u4e0e\u5bf9\u6bd4\">\u6027\u80fd\u6d4b\u8bd5\u4e0e\u5bf9\u6bd4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u7efc\u5408\u6027\u80fd\u6d4b\u8bd5\">\u7efc\u5408\u6027\u80fd\u6d4b\u8bd5<\/h3>\n\n\n\n<p>\u6211\u8fdb\u884c\u4e86\u8be6\u7ec6\u7684\u6027\u80fd\u5bf9\u6bd4\u6d4b\u8bd5\uff1a<\/p>\n\n\n\n<p><strong>\u6d4b\u8bd5\u73af\u5883\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MacBook Pro M1, 16GB RAM<\/li>\n\n\n\n<li>Next.js 14 + React 18<\/li>\n\n\n\n<li>\u5305\u542b 20 \u4e2a\u7ec4\u4ef6\u7684\u4e2d\u7b49\u89c4\u6a21\u9879\u76ee<\/li>\n<\/ul>\n\n\n\n<p><strong>\u6d4b\u8bd5\u7ed3\u679c\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u73af\u8282<\/th><th>\u4f20\u7edf\u65b9\u5f0f (npm)<\/th><th>shadcn + Bun<\/th><th>\u63d0\u5347\u5e45\u5ea6<\/th><\/tr><\/thead><tbody><tr><td>\u9879\u76ee\u521d\u59cb\u5316<\/td><td>45s<\/td><td>3s<\/td><td><strong>15x<\/strong><\/td><\/tr><tr><td>\u4f9d\u8d56\u5b89\u88c5<\/td><td>180s<\/td><td>12s<\/td><td><strong>15x<\/strong><\/td><\/tr><tr><td>\u5f00\u53d1\u542f\u52a8<\/td><td>8.5s<\/td><td>1.2s<\/td><td><strong>7x<\/strong><\/td><\/tr><tr><td>\u70ed\u91cd\u8f7d<\/td><td>450ms<\/td><td>120ms<\/td><td><strong>3.7x<\/strong><\/td><\/tr><tr><td>\u751f\u4ea7\u6784\u5efa<\/td><td>120s<\/td><td>25s<\/td><td><strong>4.8x<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>\u5b9e\u9645\u9879\u76ee\u5bf9\u6bd4\uff1a<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u4f20\u7edf\u65b9\u5f0f (npm)\nnpm install           # 45\u79d2\nnpm run dev           # 8.5\u79d2\u542f\u52a8\nnpm run build         # 2\u5206\u949f\u6784\u5efa\n\u603b\u65f6\u95f4: 2\u520653.5\u79d2\n\n# shadcn + Bun \u65b9\u5f0f\nbun install           # 2\u79d2\uff01\nbun run dev           # 1.2\u79d2\u542f\u52a8\uff01\nbun run build         # 25\u79d2\u6784\u5efa\uff01\n\u603b\u65f6\u95f4: 28.2\u79d2\n\n# \u6548\u7387\u63d0\u5347: 6.1 \u500d\uff01\n<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5f00\u53d1\u8005\u4f53\u9a8c\u63d0\u5347\">\u5f00\u53d1\u8005\u4f53\u9a8c\u63d0\u5347<\/h3>\n\n\n\n<p><strong>\u901f\u5ea6\u63d0\u5347\u53ea\u662f\u8868\u9762\uff0c\u66f4\u91cd\u8981\u7684\u662f\u5f00\u53d1\u4f53\u9a8c\u7684\u6539\u5584\uff1a<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>\/\/ \u4f20\u7edf\u65b9\u5f0f\uff1a\u590d\u6742\u7684\u4f9d\u8d56\u7ba1\u7406\nconst traditionalPain = {\n  install_waiting: \"\u6bcf\u6b21\u5b89\u88c5\u90fd\u8981\u7b49\u5f85 1-3 \u5206\u949f\",\n  version_conflicts: \"\u7ecf\u5e38\u9047\u5230\u4f9d\u8d56\u7248\u672c\u51b2\u7a81\",\n  bundle_size: \"node_modules \u52a8\u8f84 500MB+\",\n  debugging: \"\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u8c03\u8bd5\u56f0\u96be\"\n};\n\n\/\/ shadcn \u65b9\u5f0f\uff1a\u6781\u7b80\u9ad8\u6548\nconst shadcnExperience = {\n  instant_feedback: \"\u4fee\u6539\u4ee3\u7801\u7acb\u5373\u751f\u6548\",\n  zero_conflicts: \"\u65e0\u4f9d\u8d56\u51b2\u7a81\u95ee\u9898\",\n  minimal_size: \"\u7cbe\u786e\u63a7\u5236\u4ee3\u7801\u4f53\u79ef\",\n  full_control: \"\u6e90\u4ee3\u7801\u7ea7\u522b\u8c03\u8bd5\"\n};\n<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u90e8\u7f72\u4e0e\u5206\u53d1\">\u90e8\u7f72\u4e0e\u5206\u53d1<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"github-pages-\u81ea\u52a8\u90e8\u7f72\">GitHub Pages \u81ea\u52a8\u90e8\u7f72<\/h3>\n\n\n\n<p>\u9879\u76ee\u914d\u7f6e\u4e86\u5b8c\u6574\u7684 CI\/CD \u6d41\u7a0b\uff1a<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># .github\/workflows\/deploy.yml\nname: Deploy to GitHub Pages\non:\n  push:\n    branches: &#91; main &#93;\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\/checkout@v3\n      - uses: oven-sh\/setup-bun@v1\n        with:\n          bun-version: latest\n      - run: bun install\n      - run: bun run build\n      - uses: peaceiris\/actions-gh-pages@v3\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_dir: .\/out\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #F8F8F2\"># .github<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">workflows<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">deploy.yml<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">name: Deploy to GitHub Pages<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">on:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  push:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    branches: &#91; main &#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">jobs:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  deploy:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    runs<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">on: ubuntu<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">latest<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    steps:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\"> uses: actions<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">checkout@v3<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\"> uses: oven<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">sh<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">setup<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">bun@v1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FF79C6\">with<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          bun<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">version: latest<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\"> run: bun install<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\"> run: bun run build<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\"> uses: peaceiris<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">actions<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">gh<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">pages@v3<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #FF79C6\">with<\/span><span style=\"color: #F8F8F2\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          github_token: ${{ secrets.<\/span><span style=\"color: #BD93F9\">GITHUB_TOKEN<\/span><span style=\"color: #F8F8F2\"> }}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          publish_dir: .<\/span><span style=\"color: #FF79C6\">\/<\/span><span style=\"color: #F8F8F2\">out<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u7ec4\u4ef6\u5206\u53d1\u4f53\u9a8c\">\u7ec4\u4ef6\u5206\u53d1\u4f53\u9a8c<\/h3>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code># \u5176\u4ed6\u5f00\u53d1\u8005\u53ef\u4ee5\u8fd9\u6837\u4f7f\u7528\u6211\u4eec\u7684\u7ec4\u4ef6\npnpm dlx shadcn@latest add https:\/\/erishen.github.io\/shadcn-registry\/r\/data-table.json\n\n# \u6216\u8005\u4ece\u672c\u5730\u5f00\u53d1\npnpm dlx shadcn@latest add http:\/\/localhost:3000\/r\/data-table.json\n<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u6df1\u5ea6\u601d\u8003\u524d\u7aef\u5f00\u53d1\u7684\u672a\u6765\">\u6df1\u5ea6\u601d\u8003\uff1a\u524d\u7aef\u5f00\u53d1\u7684\u672a\u6765<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u4f20\u7edf\u5f00\u53d1\u6a21\u5f0f\u7684\u5c40\u9650\">\u4f20\u7edf\u5f00\u53d1\u6a21\u5f0f\u7684\u5c40\u9650<\/h3>\n\n\n\n<p>\u5728\u6784\u5efa\u8fd9\u4e2a\u9879\u76ee\u7684\u8fc7\u7a0b\u4e2d\uff0c\u6211\u6df1\u523b\u53cd\u601d\u4e86\u4f20\u7edf\u524d\u7aef\u5f00\u53d1\u7684\u51e0\u4e2a\u95ee\u9898\uff1a<\/p>\n\n\n\n<p><strong>1. \u6548\u7387\u95ee\u9898<\/strong><br>npm \u7684\u5b89\u88c5\u901f\u5ea6\u5df2\u7ecf\u6210\u4e3a\u5f00\u53d1\u6548\u7387\u7684\u74f6\u9888\uff0c\u6bcf\u6b21&nbsp;<code>npm install<\/code>&nbsp;\u90fd\u662f\u5bf9\u5f00\u53d1\u8005\u8010\u5fc3\u7684\u8003\u9a8c\u3002<\/p>\n\n\n\n<p><strong>2. \u4f9d\u8d56\u590d\u6742\u6027<\/strong><br>\u4e00\u4e2a\u7b80\u5355\u7684\u9879\u76ee\u5f80\u5f80\u9700\u8981\u51e0\u5341\u4e2a\u4f9d\u8d56\u5305\uff0c\u4e0d\u4ec5\u589e\u52a0\u4e86\u9879\u76ee\u590d\u6742\u5ea6\uff0c\u4e5f\u5e26\u6765\u4e86\u5b89\u5168\u9690\u60a3\u3002<\/p>\n\n\n\n<p><strong>3. \u5b9a\u5236\u56f0\u96be<\/strong><br>\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\u867d\u7136\u529f\u80fd\u5f3a\u5927\uff0c\u4f46\u6df1\u5ea6\u5b9a\u5236\u5f80\u5f80\u9700\u8981\u590d\u6742\u7684\u914d\u7f6e\u548c\u6837\u5f0f\u8986\u76d6\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u65b0\u8303\u5f0f\u7684\u4f18\u52bf\">\u65b0\u8303\u5f0f\u7684\u4f18\u52bf<\/h3>\n\n\n\n<p><strong>1. \u5f00\u53d1\u8005\u4f53\u9a8c\u4f18\u5148<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>\/\/ shadcn \u7406\u5ff5\uff1a\u5f00\u53d1\u8005\u4f53\u9a8c\u81f3\u4e0a\nconst devExperience = {\n  installation: \"\u4e00\u952e\u5b89\u88c5\uff0c\u65e0\u9700\u7b49\u5f85\",\n  customization: \"\u6e90\u4ee3\u7801\u7ea7\u522b\u7684\u5b9a\u5236\",\n  debugging: \"\u5b8c\u6574\u7684\u8c03\u8bd5\u652f\u6301\",\n  performance: \"\u6781\u81f4\u7684\u6027\u80fd\u4f18\u5316\"\n};\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>2. \u5de5\u5177\u94fe\u4f18\u5316<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>\/\/ Bun \u4ee3\u8868\u7684\u5de5\u5177\u94fe\u4f18\u5316\u65b9\u5411\nconst toolingEvolution = {\n  packageManager: \"\u4ece npm \u5230 Bun \u7684\u6027\u80fd\u9769\u547d\",\n  bundling: \"\u539f\u751f\u6027\u80fd\u7684\u6784\u5efa\u5de5\u5177\",\n  testing: \"\u4e00\u4f53\u5316\u7684\u6d4b\u8bd5\u89e3\u51b3\u65b9\u6848\",\n  typeChecking: \"\u539f\u751f\u7684 TypeScript \u652f\u6301\"\n};\n<\/code><\/pre><\/div>\n\n\n\n<p><strong>3. \u793e\u533a\u751f\u6001<\/strong><\/p>\n\n\n\n<div class=\"code-toolbar\"><pre class=\"wp-block-code\" data-toolbar-order=\"copy\" data-prismjs-copy><code>\/\/ \u7ec4\u4ef6\u6ce8\u518c\u8868\u6a21\u5f0f\u63a8\u52a8\u7684\u751f\u6001\u53d1\u5c55\nconst ecosystemImpact = {\n  componentSharing: \"\u7ec4\u4ef6\u5171\u4eab\u7684\u65b0\u6a21\u5f0f\",\n  standardization: \"\u884c\u4e1a\u6807\u51c6\u7684\u5efa\u7acb\",\n  qualityAssurance: \"\u5f00\u6e90\u7ec4\u4ef6\u7684\u8d28\u91cf\u4fdd\u8bc1\",\n  innovation: \"\u5feb\u901f\u8fed\u4ee3\u7684\u521b\u65b0\u673a\u5236\"\n};\n<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5bf9\u884c\u4e1a\u7684\u5f71\u54cd\">\u5bf9\u884c\u4e1a\u7684\u5f71\u54cd<\/h3>\n\n\n\n<p>\u6211\u8ba4\u4e3a shadcn + Bun \u7684\u7ec4\u5408\u4ee3\u8868\u4e86\u524d\u7aef\u5de5\u5177\u94fe\u53d1\u5c55\u7684\u51e0\u4e2a\u91cd\u8981\u8d8b\u52bf\uff1a<\/p>\n\n\n\n<p><strong>1. \u6027\u80fd\u4f18\u5148<\/strong><br>\u5f00\u53d1\u8005\u5de5\u5177\u7684\u6027\u80fd\u4e0d\u518d\u662f\u53ef\u6709\u53ef\u65e0\u7684\u4f18\u5316\uff0c\u800c\u662f\u6838\u5fc3\u7ade\u4e89\u529b\u3002<\/p>\n\n\n\n<p><strong>2. \u5f00\u53d1\u8005\u4f53\u9a8c<\/strong><br>\u5de5\u5177\u8bbe\u8ba1\u8d8a\u6765\u8d8a\u6ce8\u91cd\u5f00\u53d1\u8005\u7684\u611f\u53d7\uff0c\u4ece\u529f\u80fd\u5bfc\u5411\u8f6c\u5411\u4f53\u9a8c\u5bfc\u5411\u3002<\/p>\n\n\n\n<p><strong>3. \u5b9a\u5236\u80fd\u529b<\/strong><br>\u6807\u51c6\u5316\u4e0e\u5b9a\u5236\u5316\u7684\u5e73\u8861\u6210\u4e3a\u8bbe\u8ba1\u7684\u91cd\u8981\u8003\u91cf\u3002<\/p>\n\n\n\n<p><strong>4. \u751f\u6001\u534f\u4f5c<\/strong><br>\u5f00\u6e90\u793e\u533a\u7684\u534f\u4f5c\u6a21\u5f0f\u4e0d\u65ad\u521b\u65b0\uff0c\u7ec4\u4ef6\u5171\u4eab\u6210\u4e3a\u65b0\u7684\u53d1\u5c55\u8d8b\u52bf\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u6280\u672f\u4eae\u70b9\u603b\u7ed3\">\u6280\u672f\u4eae\u70b9\u603b\u7ed3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-\u6027\u80fd\u4f18\u5316\u7b56\u7565\">1. \u6027\u80fd\u4f18\u5316\u7b56\u7565<\/h3>\n\n\n\n<p><strong>useMemo \u7f13\u5b58\u6a21\u5f0f<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ \u6570\u636e\u8fc7\u6ee4\u4f18\u5316\nconst filteredData = useMemo(() => {\n  return data.filter((row) => {\n    return Object.entries(filters).every((&#91;key, value&#93;) => {\n      if (!value) return true;\n      const cellValue = String(row&#91;key as keyof T&#93;).toLowerCase();\n      return cellValue.includes(value.toLowerCase());\n    });\n  });\n}, &#91;data, filters&#93;);\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ \u6570\u636e\u8fc7\u6ee4\u4f18\u5316<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> filteredData <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">useMemo<\/span><span style=\"color: #F8F8F2\">(() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> data.<\/span><span style=\"color: #50FA7B\">filter<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">row<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> Object.<\/span><span style=\"color: #50FA7B\">entries<\/span><span style=\"color: #F8F8F2\">(filters).<\/span><span style=\"color: #50FA7B\">every<\/span><span style=\"color: #F8F8F2\">((&#91;<\/span><span style=\"color: #FFB86C; font-style: italic\">key<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #F8F8F2\">&#93;) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FF79C6\">!<\/span><span style=\"color: #F8F8F2\">value) <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> cellValue <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">String<\/span><span style=\"color: #F8F8F2\">(row&#91;key <\/span><span style=\"color: #FF79C6\">as<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#93;).<\/span><span style=\"color: #50FA7B\">toLowerCase<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> cellValue.<\/span><span style=\"color: #50FA7B\">includes<\/span><span style=\"color: #F8F8F2\">(value.<\/span><span style=\"color: #50FA7B\">toLowerCase<\/span><span style=\"color: #F8F8F2\">());<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}, &#91;data, filters&#93;);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>\u7cbe\u786e\u7684\u4f9d\u8d56\u6570\u7ec4<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ \u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u8ba1\u7b97\nconst sortedData = useMemo(() => {\n  if (!sortKey || !sortDirection) return filteredData;\n  \n  return &#91;...filteredData&#93;.sort((a, b) => {\n    const aVal = a&#91;sortKey&#93;;\n    const bVal = b&#91;sortKey&#93;;\n    \n    if (aVal &lt; bVal) return sortDirection === 'asc' ? -1 : 1;\n    if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;\n    return 0;\n  });\n}, &#91;filteredData, sortKey, sortDirection&#93;);\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ \u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u8ba1\u7b97<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> sortedData <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">useMemo<\/span><span style=\"color: #F8F8F2\">(() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FF79C6\">!<\/span><span style=\"color: #F8F8F2\">sortKey <\/span><span style=\"color: #FF79C6\">||<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">!<\/span><span style=\"color: #F8F8F2\">sortDirection) <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> filteredData;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> &#91;<\/span><span style=\"color: #FF79C6\">...<\/span><span style=\"color: #F8F8F2\">filteredData&#93;.<\/span><span style=\"color: #50FA7B\">sort<\/span><span style=\"color: #F8F8F2\">((<\/span><span style=\"color: #FFB86C; font-style: italic\">a<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FFB86C; font-style: italic\">b<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> aVal <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> a&#91;sortKey&#93;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> bVal <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> b&#91;sortKey&#93;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (aVal <\/span><span style=\"color: #FF79C6\">&lt;<\/span><span style=\"color: #F8F8F2\"> bVal) <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> sortDirection <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">asc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #BD93F9\">1<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">1<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> (aVal <\/span><span style=\"color: #FF79C6\">&gt;<\/span><span style=\"color: #F8F8F2\"> bVal) <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> sortDirection <\/span><span style=\"color: #FF79C6\">===<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">asc<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">1<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #BD93F9\">1<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}, &#91;filteredData, sortKey, sortDirection&#93;);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-\u7c7b\u578b\u5b89\u5168\u8bbe\u8ba1\">2. \u7c7b\u578b\u5b89\u5168\u8bbe\u8ba1<\/h3>\n\n\n\n<p><strong>\u6cdb\u578b\u7ea6\u675f<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export function DataTable&lt;T extends Record&lt;string, any>>({\n  data,\n  columns,\n  pageSize = 10,\n  onRowClick,\n}: DataTableProps&lt;T>) {\n  \/\/ \u5b8c\u6574\u7684\u7c7b\u578b\u5b89\u5168\u4fdd\u969c\n}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">function<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">DataTable<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">extends<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FFB86C; font-style: italic\">Record<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #8BE9FD; font-style: italic\">any<\/span><span style=\"color: #F8F8F2\">&gt;&gt;({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FFB86C; font-style: italic\">data<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FFB86C; font-style: italic\">columns<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FFB86C; font-style: italic\">pageSize<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">10<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FFB86C; font-style: italic\">onRowClick<\/span><span style=\"color: #F8F8F2\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">DataTableProps<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&gt;) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ \u5b8c\u6574\u7684\u7c7b\u578b\u5b89\u5168\u4fdd\u969c<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>\u63a5\u53e3\u5b9a\u4e49<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export interface Column&lt;T> {\n  key: keyof T;\n  label: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  render?: (value: T&#91;keyof T&#93;, row: T) => React.ReactNode;\n}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">interface<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">Column<\/span><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #FFB86C; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  key<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  label<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">string<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  sortable<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  filterable<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">boolean<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #50FA7B\">render<\/span><span style=\"color: #FF79C6\">?:<\/span><span style=\"color: #F8F8F2\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">value<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#91;<\/span><span style=\"color: #FF79C6\">keyof<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">&#93;, <\/span><span style=\"color: #FFB86C; font-style: italic\">row<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">T<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">React<\/span><span style=\"color: #F8F8F2\">.<\/span><span style=\"color: #8BE9FD; font-style: italic\">ReactNode<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-\u7528\u6237\u4f53\u9a8c\u4f18\u5316\">3. \u7528\u6237\u4f53\u9a8c\u4f18\u5316<\/h3>\n\n\n\n<p><strong>\u52a0\u8f7d\u72b6\u6001\u5904\u7406<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{loading &amp;&amp; (\n  &lt;div className=\"flex justify-center items-center py-16\">\n    &lt;div className=\"animate-spin rounded-full h-14 w-14 border-4 border-slate-200 border-t-blue-600\">&lt;\/div>\n  &lt;\/div>\n)}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #F8F8F2\">{loading <\/span><span style=\"color: #FF79C6\">&amp;&amp;<\/span><span style=\"color: #F8F8F2\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">flex justify-center items-center py-16<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">animate-spin rounded-full h-14 w-14 border-4 border-slate-200 border-t-blue-600<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">)}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<p><strong>\u9519\u8bef\u8fb9\u754c<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"\u590d\u5236\" class=\"code-block-pro-copy-button\"><div class=\"code-toolbar\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\" data-toolbar-order=\"copy\" data-prismjs-copy><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{error &amp;&amp; (\n  &lt;div className=\"bg-red-50 border border-red-200 rounded p-6\">\n    &lt;p className=\"text-red-800\">\u52a0\u8f7d\u5931\u8d25: {error}&lt;\/p>\n    &lt;button onClick={() => loadProducts()}>\u91cd\u8bd5&lt;\/button>\n  &lt;\/div>\n)}\n<\/textarea><\/pre><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><div class=\"code-toolbar\"><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\" data-toolbar-order=\"copy\" data-prismjs-copy><code><span class=\"line\"><span style=\"color: #F8F8F2\">{error <\/span><span style=\"color: #FF79C6\">&amp;&amp;<\/span><span style=\"color: #F8F8F2\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">bg-red-50 border border-red-200 rounded p-6<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #FF79C6\">p<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">className<\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">text-red-800<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&gt;\u52a0\u8f7d\u5931\u8d25: <\/span><span style=\"color: #FF79C6\">{<\/span><span style=\"color: #F8F8F2\">error<\/span><span style=\"color: #FF79C6\">}<\/span><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #FF79C6\">p<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #FF79C6\">button<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B; font-style: italic\">onClick<\/span><span style=\"color: #FF79C6\">={<\/span><span style=\"color: #F8F8F2\">() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">loadProducts<\/span><span style=\"color: #F8F8F2\">()<\/span><span style=\"color: #FF79C6\">}<\/span><span style=\"color: #F8F8F2\">&gt;\u91cd\u8bd5&lt;\/<\/span><span style=\"color: #FF79C6\">button<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #FF79C6\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">)}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u603b\u7ed3\u4e0e\u5c55\u671b\">\u603b\u7ed3\u4e0e\u5c55\u671b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u9879\u76ee\u6536\u83b7\">\u9879\u76ee\u6536\u83b7<\/h3>\n\n\n\n<p>\u901a\u8fc7 shadcn-registry \u9879\u76ee\uff0c\u6211\u6536\u83b7\u7684\u4e0d\u4ec5\u4ec5\u662f\u4e00\u4e2a\u7ec4\u4ef6\u5e93\uff0c\u66f4\u91cd\u8981\u7684\u662f\u5bf9\u524d\u7aef\u5f00\u53d1\u6548\u7387\u7684\u6df1\u5ea6\u601d\u8003\uff1a<\/p>\n\n\n\n<p><strong>1. \u5de5\u5177\u9009\u62e9\u7684\u91cd\u8981\u6027<\/strong><br>\u597d\u7684\u5de5\u5177\u80fd\u591f\u8ba9\u5f00\u53d1\u6548\u7387\u4ea7\u751f\u6570\u91cf\u7ea7\u7684\u63d0\u5347\uff0cBun \u5c31\u662f\u8fd9\u6837\u7684\u5de5\u5177\u3002<\/p>\n\n\n\n<p><strong>2. \u5f00\u53d1\u7406\u5ff5\u7684\u9769\u65b0<\/strong><br>shadcn \u7684 &#8220;copy instead of install&#8221; \u7406\u5ff5\u98a0\u8986\u4e86\u6211\u5bf9\u4f9d\u8d56\u7ba1\u7406\u7684\u8ba4\u77e5\u3002<\/p>\n\n\n\n<p><strong>3. \u6027\u80fd\u4f18\u5316\u7684\u5fc5\u8981\u6027<\/strong><br>\u524d\u7aef\u6027\u80fd\u4f18\u5316\u4e0d\u4ec5\u4ec5\u662f\u7528\u6237\u4f53\u9a8c\u7684\u9700\u6c42\uff0c\u4e5f\u662f\u5f00\u53d1\u8005\u4f53\u9a8c\u7684\u91cd\u8981\u7ec4\u6210\u3002<\/p>\n\n\n\n<p><strong>4. \u5f00\u6e90\u534f\u4f5c\u7684\u4ef7\u503c<\/strong><br>\u901a\u8fc7\u5f00\u6e90\u5206\u4eab\uff0c\u6211\u4eec\u80fd\u591f\u63a8\u52a8\u6574\u4e2a\u884c\u4e1a\u7684\u8fdb\u6b65\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5bf9\u672a\u6765\u7684\u601d\u8003\">\u5bf9\u672a\u6765\u7684\u601d\u8003<\/h3>\n\n\n\n<p><strong>1. \u5de5\u5177\u94fe\u7684\u53d1\u5c55\u65b9\u5411<\/strong><br>\u6211\u8ba4\u4e3a\u524d\u7aef\u5de5\u5177\u94fe\u4f1a\u671d\u7740\u66f4\u5feb\u3001\u66f4\u7b80\u5355\u3001\u66f4\u5f3a\u5927\u7684\u65b9\u5411\u53d1\u5c55\u3002Bun \u53ea\u662f\u4e00\u4e2a\u5f00\u59cb\uff0c\u672a\u6765\u8fd8\u4f1a\u6709\u66f4\u591a\u6027\u80fd\u7a81\u7834\u3002<\/p>\n\n\n\n<p><strong>2. \u7ec4\u4ef6\u751f\u6001\u7684\u6f14\u8fdb<\/strong><br>\u7ec4\u4ef6\u6ce8\u518c\u8868\u6a21\u5f0f\u53ef\u80fd\u4f1a\u91cd\u65b0\u5b9a\u4e49\u5f00\u6e90\u7ec4\u4ef6\u7684\u5206\u53d1\u548c\u534f\u4f5c\u65b9\u5f0f\u3002<\/p>\n\n\n\n<p><strong>3. \u5f00\u53d1\u6548\u7387\u7684\u65b0\u6807\u51c6<\/strong><br>\u968f\u7740\u5de5\u5177\u7684\u4e0d\u65ad\u4f18\u5316\uff0c\u5f00\u53d1\u8005\u5bf9\u6548\u7387\u7684\u671f\u671b\u4e5f\u4f1a\u4e0d\u65ad\u63d0\u9ad8\u3002<\/p>\n\n\n\n<p><strong>4. \u6280\u672f\u6c11\u4e3b\u5316\u7684\u8d8b\u52bf<\/strong><br>\u597d\u7684\u5de5\u5177\u548c\u7406\u5ff5\u5e94\u8be5\u8ba9\u66f4\u591a\u7684\u5f00\u53d1\u8005\u53d7\u76ca\uff0c\u800c\u4e0d\u662f\u6210\u4e3a\u5c11\u6570\u4eba\u7684\u7279\u6743\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u5b9e\u9645\u5e94\u7528\u4ef7\u503c\">\u5b9e\u9645\u5e94\u7528\u4ef7\u503c<\/h3>\n\n\n\n<p><strong>\u5bf9\u4e8e\u56e2\u961f\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7edf\u4e00\u7684\u7ec4\u4ef6\u6807\u51c6<\/li>\n\n\n\n<li>\u63d0\u5347\u7684\u5f00\u53d1\u6548\u7387<\/li>\n\n\n\n<li>\u964d\u4f4e\u7684\u7ef4\u62a4\u6210\u672c<\/li>\n\n\n\n<li>\u66f4\u597d\u7684\u4ee3\u7801\u8d28\u91cf<\/li>\n<\/ul>\n\n\n\n<p><strong>\u5bf9\u4e8e\u4e2a\u4eba\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u66f4\u5feb\u7684\u5f00\u53d1\u53cd\u9988<\/li>\n\n\n\n<li>\u66f4\u5f3a\u7684\u5b9a\u5236\u80fd\u529b<\/li>\n\n\n\n<li>\u66f4\u597d\u7684\u5b66\u4e60\u4f53\u9a8c<\/li>\n\n\n\n<li>\u66f4\u9ad8\u7684\u6280\u672f\u89c6\u91ce<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u8d44\u6e90\u94fe\u63a5\">\u8d44\u6e90\u94fe\u63a5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>shadcn-registry\uff1a<\/strong>&nbsp;<a href=\"https:\/\/erishen.github.io\/shadcn-registry\/\">https:\/\/erishen.github.io\/shadcn-registry\/<\/a><\/li>\n\n\n\n<li><strong>\u6f14\u793a\u9875\u9762\uff1a<\/strong>&nbsp;<a href=\"https:\/\/web.erishen.cn\/data-table-demo\">https:\/\/web.erishen.cn\/data-table-demo<\/a><\/li>\n\n\n\n<li><strong>GitHub \u4ed3\u5e93\uff1a<\/strong>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/erishen\/shadcn-registry\">shadcn-registry<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/erishen\/interview\">interview \u9879\u76ee<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>shadcn\/ui \u6587\u6863\uff1a<\/strong>&nbsp;<a href=\"https:\/\/ui.shadcn.com\/\">https:\/\/ui.shadcn.com\/<\/a><\/li>\n\n\n\n<li><strong>Bun \u5b98\u65b9\u6587\u6863\uff1a<\/strong>&nbsp;<a href=\"https:\/\/bun.sh\/\">https:\/\/bun.sh\/<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>\u5199\u8fd9\u7bc7\u6587\u7ae0\u7684\u8fc7\u7a0b\u4e2d\uff0c\u6211\u6df1\u523b\u611f\u53d7\u5230\u4e86\u6280\u672f\u53d8\u9769\u7684\u529b\u91cf\u3002\u6709\u65f6\u5019\uff0c\u4e00\u4e2a\u7406\u5ff5\u7684\u8f6c\u53d8\u5c31\u80fd\u5e26\u6765\u6548\u7387\u7684\u6570\u91cf\u7ea7\u63d0\u5347\u3002shadcn + Bun \u7684\u7ec4\u5408\u4e0d\u4ec5\u4ec5\u662f\u5de5\u5177\u7684\u5347\u7ea7\uff0c\u66f4\u662f\u5f00\u53d1\u65b9\u5f0f\u7684\u9769\u65b0\u3002<\/strong><\/p>\n\n\n\n<p><strong>\u5e0c\u671b\u8fd9\u7bc7\u6587\u7ae0\u80fd\u591f\u7ed9\u540c\u6837\u5173\u6ce8\u5f00\u53d1\u6548\u7387\u7684\u670b\u53cb\u4eec\u4e00\u4e9b\u542f\u53d1\u3002\u5982\u679c\u4f60\u4e5f\u5728\u601d\u8003\u5982\u4f55\u63d0\u5347\u524d\u7aef\u5f00\u53d1\u6548\u7387\uff0c\u6b22\u8fce\u5728\u8bc4\u8bba\u533a\u4ea4\u6d41\u8ba8\u8bba\u3002<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u7bc7\u6587\u7ae0\u5206\u4eab\u4e86\u6211\u5982\u4f55\u57fa\u4e8e shadcn\/ui \u548c Bun \u6784\u5efa\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u6ce8\u518c\u8868\uff0c\u4ee5\u53ca\u8fd9\u4e2a\u8fc7\u7a0b\u7ed9\u6211\u5e26\u6765\u7684\u5173 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=192"}],"version-history":[{"count":2,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts\/192\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts\/192\/revisions\/196"}],"wp:attachment":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}