From 879872ac238682ceb01f2fc5c0a261fc10572bb6 Mon Sep 17 00:00:00 2001
From: shu <nvcsadjkojf@outlook.com>
Date: Sun, 6 Sep 2026 19:08:03 +0800
Subject: 限制表单示例页面最大宽度并居中展示
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 Mantine Container 包裹表单示例页面，设置 size="xl"
- 设置 px={0}，复用基础布局已有的内边距，避免重复留白
- 保留小屏幕自适应宽度，并同步调整 JSX 缩进

验证：pnpm build、pnpm lint 和 git diff --check 均通过。
---
 src/FormExample.tsx | 337 ++++++++++++++++++++++++++--------------------------
 1 file changed, 170 insertions(+), 167 deletions(-)

(limited to 'src/FormExample.tsx')

diff --git a/src/FormExample.tsx b/src/FormExample.tsx
index 7f38754..631bf53 100644
--- a/src/FormExample.tsx
+++ b/src/FormExample.tsx
@@ -6,6 +6,7 @@ import {
   Cascader,
   Code,
   ColorInput,
+  Container,
   FileInput,
   Group,
   MultiSelect,
@@ -123,184 +124,186 @@ export default function FormExample() {
   }
 
   return (
-    <Stack gap="lg">
-      <div>
-        <Title order={1}>表单示例</Title>
-        <Text c="dimmed">体验常用表单控件。提交后在本页预览结果，数据和文件不会发送到服务器。</Text>
-      </div>
+    <Container size="xl" px={0}>
+      <Stack gap="lg">
+        <div>
+          <Title order={1}>表单示例</Title>
+          <Text c="dimmed">体验常用表单控件。提交后在本页预览结果，数据和文件不会发送到服务器。</Text>
+        </div>
 
-      <Paper withBorder p="md">
-        <form
-          onSubmit={form.onSubmit(submit, () => setSubmitted(null))}
-          onReset={(event) => {
-            event.preventDefault()
-            form.reset()
-            form.setErrors(exampleErrors)
-            setSubmitted(null)
-          }}
-          noValidate
-        >
-          <Stack gap="lg">
-            <Text size="sm" c="dimmed">带 * 的项目为必填项；离开输入框或提交时会校验。邮箱预填了错误值，用于演示错误提示。</Text>
-            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-              <TextInput
-                label="文本输入框"
-                placeholder="请输入名称"
-                required
-                {...form.getInputProps('name')}
-              />
-              <TextInput
-                label="邮箱（错误提示示例）"
-                description="修改为有效邮箱后可正常提交"
-                placeholder="name@example.com"
-                type="email"
-                autoComplete="email"
-                required
-                {...form.getInputProps('email')}
-              />
-              <Select
-                label="选择框"
-                placeholder="请选择角色"
-                data={['开发者', '设计师', '产品经理']}
+        <Paper withBorder p="md">
+          <form
+            onSubmit={form.onSubmit(submit, () => setSubmitted(null))}
+            onReset={(event) => {
+              event.preventDefault()
+              form.reset()
+              form.setErrors(exampleErrors)
+              setSubmitted(null)
+            }}
+            noValidate
+          >
+            <Stack gap="lg">
+              <Text size="sm" c="dimmed">带 * 的项目为必填项；离开输入框或提交时会校验。邮箱预填了错误值，用于演示错误提示。</Text>
+              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                <TextInput
+                  label="文本输入框"
+                  placeholder="请输入名称"
+                  required
+                  {...form.getInputProps('name')}
+                />
+                <TextInput
+                  label="邮箱（错误提示示例）"
+                  description="修改为有效邮箱后可正常提交"
+                  placeholder="name@example.com"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  {...form.getInputProps('email')}
+                />
+                <Select
+                  label="选择框"
+                  placeholder="请选择角色"
+                  data={['开发者', '设计师', '产品经理']}
+                  searchable
+                  clearable
+                  required
+                  {...form.getInputProps('role')}
+                />
+                <NumberInput
+                  label="数值输入框"
+                  description="数量，范围 0–100"
+                  min={0}
+                  max={100}
+                  allowDecimal={false}
+                  {...form.getInputProps('quantity')}
+                />
+                <PasswordInput
+                  label="密码输入框"
+                  description="选填，填写时至少 8 位"
+                  placeholder="请输入示例密码"
+                  autoComplete="new-password"
+                  {...form.getInputProps('password')}
+                />
+              </SimpleGrid>
+
+              <Cascader
+                label="级联选择框"
+                description="选择省、市、区，使用部分示例地区"
+                placeholder="请选择省 / 市 / 区"
+                data={regionOptions}
+                withColumns={withColumns}
                 searchable
                 clearable
-                required
-                {...form.getInputProps('role')}
-              />
-              <NumberInput
-                label="数值输入框"
-                description="数量，范围 0–100"
-                min={0}
-                max={100}
-                allowDecimal={false}
-                {...form.getInputProps('quantity')}
-              />
-              <PasswordInput
-                label="密码输入框"
-                description="选填，填写时至少 8 位"
-                placeholder="请输入示例密码"
-                autoComplete="new-password"
-                {...form.getInputProps('password')}
+                closeOnSelect
+                clearButtonProps={{ 'aria-label': '清空地区' }}
+                nothingFoundMessage="没有匹配的地区"
+                {...form.getInputProps('region')}
               />
-            </SimpleGrid>
 
-            <Cascader
-              label="级联选择框"
-              description="选择省、市、区，使用部分示例地区"
-              placeholder="请选择省 / 市 / 区"
-              data={regionOptions}
-              withColumns={withColumns}
-              searchable
-              clearable
-              closeOnSelect
-              clearButtonProps={{ 'aria-label': '清空地区' }}
-              nothingFoundMessage="没有匹配的地区"
-              {...form.getInputProps('region')}
-            />
+              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                <MultiSelect
+                  label="下拉多选框"
+                  description="选择多个技术方向"
+                  placeholder="请选择技术方向"
+                  data={['React', 'TypeScript', 'Vite', 'Mantine', 'Node.js']}
+                  searchable
+                  clearable
+                  clearButtonProps={{ 'aria-label': '清空技术方向' }}
+                  nothingFoundMessage="没有匹配的选项"
+                  {...form.getInputProps('technologies')}
+                />
+                <TagsInput
+                  label="标签输入框"
+                  description="输入后按 Enter 或逗号添加标签，也可选择推荐标签"
+                  placeholder="输入或选择标签"
+                  data={['学习', '工作', '个人项目', '开源']}
+                  clearable
+                  clearButtonProps={{ 'aria-label': '清空标签' }}
+                  {...form.getInputProps('tags')}
+                />
+                <Radio.Group label="单选框" description="偏好的联系方式" {...form.getInputProps('contact')}>
+                  <Group mt="xs">
+                    <Radio value="email" label="邮件" />
+                    <Radio value="phone" label="电话" />
+                    <Radio value="message" label="站内消息" />
+                  </Group>
+                </Radio.Group>
+                <Checkbox.Group label="多选框" description="感兴趣的方向" {...form.getInputProps('interests')}>
+                  <Group mt="xs">
+                    <Checkbox value="frontend" label="前端" />
+                    <Checkbox value="backend" label="后端" />
+                    <Checkbox value="design" label="设计" />
+                  </Group>
+                </Checkbox.Group>
+                <ColorInput
+                  label="颜色选择框"
+                  format="hex"
+                  swatches={['#228be6', '#40c057', '#fab005', '#fa5252', '#7950f2']}
+                  {...form.getInputProps('color')}
+                />
+                <FileInput
+                  label="文件上传框"
+                  description="支持选择多个文件，仅展示文件信息"
+                  placeholder="点击选择文件"
+                  leftSection={<UploadSimpleIcon aria-hidden="true" />}
+                  multiple
+                  clearable
+                  {...form.getInputProps('files')}
+                />
+              </SimpleGrid>
 
-            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
-              <MultiSelect
-                label="下拉多选框"
-                description="选择多个技术方向"
-                placeholder="请选择技术方向"
-                data={['React', 'TypeScript', 'Vite', 'Mantine', 'Node.js']}
-                searchable
-                clearable
-                clearButtonProps={{ 'aria-label': '清空技术方向' }}
-                nothingFoundMessage="没有匹配的选项"
-                {...form.getInputProps('technologies')}
-              />
-              <TagsInput
-                label="标签输入框"
-                description="输入后按 Enter 或逗号添加标签，也可选择推荐标签"
-                placeholder="输入或选择标签"
-                data={['学习', '工作', '个人项目', '开源']}
-                clearable
-                clearButtonProps={{ 'aria-label': '清空标签' }}
-                {...form.getInputProps('tags')}
-              />
-              <Radio.Group label="单选框" description="偏好的联系方式" {...form.getInputProps('contact')}>
-                <Group mt="xs">
-                  <Radio value="email" label="邮件" />
-                  <Radio value="phone" label="电话" />
-                  <Radio value="message" label="站内消息" />
-                </Group>
-              </Radio.Group>
-              <Checkbox.Group label="多选框" description="感兴趣的方向" {...form.getInputProps('interests')}>
-                <Group mt="xs">
-                  <Checkbox value="frontend" label="前端" />
-                  <Checkbox value="backend" label="后端" />
-                  <Checkbox value="design" label="设计" />
-                </Group>
-              </Checkbox.Group>
-              <ColorInput
-                label="颜色选择框"
-                format="hex"
-                swatches={['#228be6', '#40c057', '#fab005', '#fa5252', '#7950f2']}
-                {...form.getInputProps('color')}
+              {form.values.files.length > 0 && (
+                <Stack gap="xs" aria-live="polite">
+                  {form.values.files.map((file, index) => (
+                    <Text key={`${file.name}-${index}`} size="sm" className={classes.fileName}>
+                      {file.name} · {(file.size / 1024).toFixed(1)} KB
+                    </Text>
+                  ))}
+                </Stack>
+              )}
+
+              <Textarea
+                label="文本框"
+                description="多行文本，例如个人介绍或备注"
+                placeholder="请输入内容"
+                autosize
+                minRows={3}
+                maxRows={8}
+                {...form.getInputProps('description')}
               />
-              <FileInput
-                label="文件上传框"
-                description="支持选择多个文件，仅展示文件信息"
-                placeholder="点击选择文件"
-                leftSection={<UploadSimpleIcon aria-hidden="true" />}
-                multiple
-                clearable
-                {...form.getInputProps('files')}
+              <Switch
+                label="开关：接收消息通知"
+                {...form.getInputProps('notifications', { type: 'checkbox' })}
               />
-            </SimpleGrid>
-
-            {form.values.files.length > 0 && (
-              <Stack gap="xs" aria-live="polite">
-                {form.values.files.map((file, index) => (
-                  <Text key={`${file.name}-${index}`} size="sm" className={classes.fileName}>
-                    {file.name} · {(file.size / 1024).toFixed(1)} KB
+              <Stack gap="xs">
+                <details>
+                  <summary>查看示例协议</summary>
+                  <Text size="sm" c="dimmed" py="xs">
+                    本页面仅用于演示表单交互。提交内容仅在当前页面预览，文件不会上传。
+                    勾选同意用于演示提交前的校验流程，不代表订购或开通服务。
                   </Text>
-                ))}
+                </details>
+                <Checkbox
+                  label="我已阅读并同意示例协议"
+                  required
+                  {...form.getInputProps('acceptedTerms', { type: 'checkbox', withError: true })}
+                />
               </Stack>
-            )}
-
-            <Textarea
-              label="文本框"
-              description="多行文本，例如个人介绍或备注"
-              placeholder="请输入内容"
-              autosize
-              minRows={3}
-              maxRows={8}
-              {...form.getInputProps('description')}
-            />
-            <Switch
-              label="开关：接收消息通知"
-              {...form.getInputProps('notifications', { type: 'checkbox' })}
-            />
-            <Stack gap="xs">
-              <details>
-                <summary>查看示例协议</summary>
-                <Text size="sm" c="dimmed" py="xs">
-                  本页面仅用于演示表单交互。提交内容仅在当前页面预览，文件不会上传。
-                  勾选同意用于演示提交前的校验流程，不代表订购或开通服务。
-                </Text>
-              </details>
-              <Checkbox
-                label="我已阅读并同意示例协议"
-                required
-                {...form.getInputProps('acceptedTerms', { type: 'checkbox', withError: true })}
-              />
+              <Group>
+                <Button type="submit">提交预览</Button>
+                <Button type="reset" variant="default">重置</Button>
+              </Group>
             </Stack>
-            <Group>
-              <Button type="submit">提交预览</Button>
-              <Button type="reset" variant="default">重置</Button>
-            </Group>
-          </Stack>
-        </form>
-      </Paper>
+          </form>
+        </Paper>
 
-      {submitted !== null && (
-        <Stack gap="xs">
-          <Alert title="提交成功" color="green" role="status">以下是本次提交的示例数据。</Alert>
-          <Code block>{submitted}</Code>
-        </Stack>
-      )}
-    </Stack>
+        {submitted !== null && (
+          <Stack gap="xs">
+            <Alert title="提交成功" color="green" role="status">以下是本次提交的示例数据。</Alert>
+            <Code block>{submitted}</Code>
+          </Stack>
+        )}
+      </Stack>
+    </Container>
   )
 }
-- 
cgit v1.2.3