feat(chapter2): add Ant Design demo page

Add the demo route and Ant Design layout, include the missing page styles, and align global CSS and dependencies with the demo setup.

chapter2/package.json

@@ -11,6 +11,9 @@
     "lint:style": "stylelint \"**/*.css\" --fix --cache --cache-location node_modules/.cache/stylelint"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^2.1.2",
+    "@ant-design/nextjs-registry": "^1.3.0",
+    "antd": "^6.6.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.37.0",

chapter2/src/app/demo/layout.module.css

@@ -0,0 +1,11 @@
+/* src/app/(pages)/layout.module.css */
+@reference "#tailwind.css";
+
+.layout {
+    @apply tw:min-h-full tw:w-full tw:flex tw:flex-col tw:bg-background tw:bg-cover tw:bg-fixed tw:bg-center tw:bg-no-repeat tw:bg-[url('../styles/images/bg-light.png')] tw:p-0 tw:m-0;
+
+    html.dark &,
+    html[data-theme='dark'] & {
+        background-image: url('../styles/images/bg-dark.png');
+    }
+}

chapter2/src/app/demo/layout.tsx

@@ -0,0 +1,34 @@
+// src/app/demo/layout.tsx
+'use client';
+import { FC, PropsWithChildren } from 'react';
+
+// src/app/demo/layout.tsx
+import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
+import { AntdRegistry } from '@ant-design/nextjs-registry';
+import { App as AntdApp, ConfigProvider, theme } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+
+import $styles from './layout.module.css';
+
+const px2rem = px2remTransformer();
+const DemoLayout: FC<PropsWithChildren> = ({ children }) => (
+    <AntdRegistry>
+        <ConfigProvider
+            locale={zhCN}
+            theme={{
+                algorithm: theme.defaultAlgorithm,
+                // 启用css变量
+                cssVar: {},
+                hashed: false,
+                token: {},
+            }}
+        >
+            <AntdApp>
+                <StyleProvider transformers={[px2rem]}>
+                    <div className={$styles.layout}>{children}</div>
+                </StyleProvider>
+            </AntdApp>
+        </ConfigProvider>
+    </AntdRegistry>
+);
+export default DemoLayout;

chapter2/src/app/demo/page.module.css

@@ -0,0 +1,9 @@
+@reference "#tailwind.css";
+
+.demo {
+    @apply tw:flex tw:flex-auto tw:flex-wrap tw:items-center tw:justify-center;
+
+    & > .container {
+        @apply tw:bg-neutral-100/40 tw:shadow-black/20 tw:backdrop-blur-sm tw:shadow-md tw:rounded-md tw:p-5 tw:m-5 tw:min-w-[20rem];
+    }
+}

chapter2/src/app/demo/page.tsx

@@ -0,0 +1,23 @@
+// src/app/demo/page.tsx
+// ...
+import { FC } from 'react';
+import { Button } from 'antd';
+
+import $styles from './page.module.css';
+
+const DemoPage: FC = () => (
+    <div className={$styles.demo}>
+        <div className={$styles.container}>
+            <h2 className="tw:text-center">First React App</h2>
+            <div className="tw:flex tw:flex-col tw:items-center">
+                <div className="tw:my-5 tw:flex-auto">
+                    <Button variant="solid" href="https://3rcd.com" target="_blank">
+                        3R教室
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+
+export default DemoPage;

chapter2/src/app/styles/app.css

@@ -3,3 +3,6 @@
     @apply tw:w-4 tw:h-4 tw:stroke-[1px];
 }
 
+.ant-app {
+    @apply tw:h-[100vh] tw:w-full tw:p-0 tw:m-0;
+}

chapter2/src/app/styles/tailwind.css

@@ -1,5 +1,5 @@
 /* src/app/styles/tailwind.css */
-@layer theme, base, components, utilities;
+@layer theme, base, antd, components, utilities;
 
 @import 'tailwindcss' prefix(tw);
 @import 'tw-animate-css';