From b7bbb3155f616b97e3005133d1626790450cac06 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sun, 24 Aug 2025 11:34:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(demo):=20=E6=B7=BB=E5=8A=A0=20Input=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 ComponentsDemo 页面中添加了多种类型的 Input 组件示例
- 包括基本输入、带图标的输入、不同变体的输入以及禁用状态的输入
- 添加了 Select 组件示例
- 优化了页面布局，增加了更多组件的展示
---
 src/pages/ComponentsDemo.tsx | 108 +++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/src/pages/ComponentsDemo.tsx b/src/pages/ComponentsDemo.tsx
index 4019db6..e88cc73 100644
--- a/src/pages/ComponentsDemo.tsx
+++ b/src/pages/ComponentsDemo.tsx
@@ -1,5 +1,7 @@
+import { Icon } from '@iconify-icon/solid';
 import { Component } from 'solid-js';
 import Check from '../components/Check';
+import Input from '../components/Input';
 import Radio from '../components/Radio';
 import RadioGroup from '../components/RadioGroup';
 import ScrollArea from '../components/ScrollArea';
@@ -132,6 +134,112 @@ const ComponentsDemo: Component = () => {
           <div class="flex flex-row gap-1">
             <Switcher />
           </div>
+          <div class="flex flex-row gap-1 items-center">
+            <Select
+              placeholder="Select an option"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+                { label: 'Option 4', value: '4' },
+                { label: 'Option 5', value: '5' },
+                { label: 'Option 6', value: '6' },
+                { label: 'Option 7', value: '7' },
+                { label: 'Option 8', value: '8' },
+                { label: 'Option 9', value: '9' },
+                { label: 'Option 1', value: 'a' },
+                { label: 'Option 2', value: 'b' },
+                { label: 'Option 3', value: 'c' },
+                { label: 'Option 4', value: 'd' },
+                { label: 'Option 5', value: 'e' },
+                { label: 'Option 6', value: 'f' },
+                { label: 'Option 7', value: 'g' },
+              ]}
+            />
+            <Input placeholder="输入一些文字内容" />
+            <Input
+              placeholder="搜索一些内容"
+              value="comfy models"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+          </div>
+          <div class="flex flex-row gap-1 items-center">
+            <Input
+              placeholder="搜索一些内容"
+              value="comfy models"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+            <Input
+              variant="underlined"
+              placeholder="搜索一些内容"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+            <Input
+              variant="immersive"
+              placeholder="搜索一些内容"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+          </div>
+          <div class="flex flex-row gap-1 items-center">
+            <Input
+              placeholder="搜索一些内容"
+              disabled
+              value="comfy models"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+            <Input
+              variant="underlined"
+              disabled
+              placeholder="搜索一些内容"
+              value="comfy models"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+            <Input
+              variant="immersive"
+              disabled
+              placeholder="搜索一些内容"
+              value="comfy models"
+              left={<Icon icon="hugeicons:search-01" />}
+            />
+          </div>
+          <div class="flex flex-row gap-1 items-center">
+            <div class="h-[6em] w-[35em] flex flex-row">
+              <ScrollArea flexExtended enableY>
+                <div class="flex flex-col gap-[2em]">
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra quam
+                    tincidunt, ornare orci quis, commodo quam. Etiam finibus ex dolor, id feugiat
+                    augue porttitor eget. Morbi ornare nisl sed laoreet efficitur. Phasellus
+                    consectetur lacus id sem elementum dignissim. Aliquam pulvinar facilisis eros,
+                    eget scelerisque magna pharetra ac. Suspendisse potenti. Sed eget finibus magna,
+                    vitae laoreet lorem. Vestibulum gravida accumsan ipsum. Duis eget orci porta,
+                    fringilla velit viverra, ultricies est. Ut turpis erat, lobortis nec hendrerit
+                    eu, malesuada eu dui.
+                  </p>
+                  <p>
+                    Morbi elementum eleifend augue non ultrices. Aenean venenatis tincidunt risus,
+                    sit amet tincidunt dui feugiat ac. Morbi eu aliquam nisi, et ultrices tortor.
+                    Quisque eget faucibus lacus. Integer diam arcu, gravida in pellentesque in,
+                    pharetra sit amet orci. Vestibulum molestie porta lectus, ac laoreet justo
+                    fringilla et. Curabitur convallis ipsum erat, sed blandit lorem consequat ac.
+                    Maecenas aliquet lorem a tellus lacinia placerat. Donec id ante malesuada,
+                    rhoncus diam at, sollicitudin ante. Vivamus iaculis nisl urna.
+                  </p>
+                  <p>
+                    Duis sodales tempus nulla, vel accumsan ex. Curabitur sit amet auctor dolor, non
+                    gravida diam. Quisque ac velit felis. Proin imperdiet varius vestibulum. Mauris
+                    hendrerit id felis et maximus. Phasellus interdum felis sit amet urna semper,
+                    nec tincidunt quam molestie. Nam vitae quam laoreet, blandit velit et, molestie
+                    libero. Sed elit augue, convallis quis dictum vel, eleifend sed mi. In tincidunt
+                    sagittis sapien ac consectetur. Nulla volutpat, turpis pellentesque imperdiet
+                    convallis, ipsum felis pulvinar elit, nec luctus massa ipsum ut ligula. Fusce
+                    tristique sit amet lacus nec ullamcorper. Integer eros dolor, sodales eget
+                    maximus eget, efficitur quis nulla. Curabitur ac mollis elit, sed ultrices erat.
+                  </p>
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
         </div>
       </ScrollArea>
     </div>