feat(components): 新增 Drawer 组件并优化 Playground 页面

- 新增 Drawer 组件用于创建可滑动的抽屉式界面
-优化 Playground 页面布局和样式，增加 logo 和 frosted glass 效果
- 添加统计卡片组件和动画效果，提升用户体验
- 新增数据项目图标组件

src/components/Option/Playground/PlaygroundForm.tsx

@@ -1,10 +1,18 @@
 import { useForm } from "@mantine/form"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import React from "react"
+import React, { useMemo } from "react"
 import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
 import { toBase64 } from "~/libs/to-base64"
 import { useMessageOption } from "~/hooks/useMessageOption"
-import { Checkbox, Dropdown, Image, Switch, Tooltip } from "antd"
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  Image,
+  MenuProps,
+  Switch,
+  Tooltip
+} from "antd"
 import { useWebUI } from "~/store/webui"
 import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
@@ -205,6 +213,41 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   }
 
+  const iodSearchItems = useMemo<MenuProps["items"]>(() => {
+    return [
+      {
+        key: 0,
+        label: (
+          <p
+            onClick={() => {
+              setIodSearch(true)
+            }}>
+            <p
+              className={`${iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
+              <PiNetwork className="h-5 w-5" />开
+            </p>
+            <p className="text-[#00000080]">输出带数联网的回答</p>
+          </p>
+        )
+      },
+      {
+        key: 1,
+        label: (
+          <p
+            onClick={() => {
+              setIodSearch(false)
+            }}>
+            <p
+              className={`${!iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
+              <PiNetwork className="h-5 w-5" /> 关闭
+            </p>
+            <p className="text-[#00000080]">快速直接回答</p>
+          </p>
+        )
+      }
+    ]
+  }, [iodSearch])
+
   return (
     <div className="flex w-full flex-col items-center p-2 px-5 pt-1  pb-4">
       <div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
@@ -318,21 +361,40 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                                 />
                               </div>
                             </Tooltip>
-                            <Tooltip
-                              title={t("tooltip.searchIod")}
-                              className="ml-3">
-                              <div className="inline-flex items-center gap-2">
-                                <PiNetwork
-                                  className={`h-5 w-5 dark:text-gray-300 `}
-                                />
-                                <Switch
-                                  value={iodSearch}
-                                  onChange={(e) => setIodSearch(e)}
-                                  checkedChildren={t("form.webSearch.on")}
-                                  unCheckedChildren={t("form.webSearch.off")}
-                                />
-                              </div>
-                            </Tooltip>
+                            {/*<Tooltip*/}
+                            {/*  title={t("tooltip.searchIod")}*/}
+                            {/*  className="ml-3">*/}
+                            {/*  <div className="inline-flex items-center gap-2">*/}
+                            {/*    <PiNetwork*/}
+                            {/*      className={`h-5 w-5 dark:text-gray-300 `}*/}
+                            {/*    />*/}
+                            {/*    <Switch*/}
+                            {/*      value={iodSearch}*/}
+                            {/*      onChange={(e) => setIodSearch(e)}*/}
+                            {/*      checkedChildren={t("form.webSearch.on")}*/}
+                            {/*      unCheckedChildren={t("form.webSearch.off")}*/}
+                            {/*    />*/}
+                            {/*  </div>*/}
+                            {/*</Tooltip>*/}
+                            <Dropdown
+                              menu={{ items: iodSearchItems }}
+                              placement="bottom"
+                              trigger={["click"]}
+                              arrow>
+                              <Button
+                                color="purple"
+                                variant="filled"
+                                size="large"
+                                className="w-full mt-4 hover:!bg-[#0057ff1a]"
+                                style={{
+                                  color: "#0057ff",
+                                  background: "#0057ff0f",
+                                  border: "1px solid #0066ff26"
+                                }}>
+                                <PiNetwork className="h-5 w-5" />
+                                数联网深度搜索：{iodSearch ? "开" : "关"}
+                              </Button>
+                            </Dropdown>
                           </div>
                         )}
                       </div>