From 6762b84fd8509d1723f4ecb0822ee61d0885552f Mon Sep 17 00:00:00 2001 From: tommy Date: Mon, 3 Nov 2025 14:25:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8=E6=96=87?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/echo.rs | 61 ------------------------------------------ src/components/hero.rs | 25 ----------------- src/components/mod.rs | 6 ----- src/views/home.rs | 29 ++++++++------------ 4 files changed, 11 insertions(+), 110 deletions(-) delete mode 100644 src/components/echo.rs delete mode 100644 src/components/hero.rs diff --git a/src/components/echo.rs b/src/components/echo.rs deleted file mode 100644 index 1af21dd..0000000 --- a/src/components/echo.rs +++ /dev/null @@ -1,61 +0,0 @@ -use dioxus::prelude::*; - -const ECHO_CSS: Asset = asset!("/assets/styling/echo.css"); - -/// Echo component that demonstrates fullstack server functions. -#[component] -pub fn Echo() -> Element { - // use_signal is a hook. Hooks in dioxus must be run in a consistent order every time the component is rendered. - // That means they can't be run inside other hooks, async blocks, if statements, or loops. - // - // use_signal is a hook that creates a state for the component. It takes a closure that returns the initial value of the state. - // The state is automatically tracked and will rerun any other hooks or components that read it whenever it changes. - let mut response = use_signal(|| String::new()); - - rsx! { - document::Link { rel: "stylesheet", href: ECHO_CSS } - - div { - id: "echo", - h4 { "ServerFn Echo" } - input { - placeholder: "Type here to echo...", - // `oninput` is an event handler that will run when the input changes. It can return either nothing or a future - // that will be run when the event runs. - oninput: move |event| async move { - // When we call the echo_server function from the client, it will fire a request to the server and return - // the response. It handles serialization and deserialization of the request and response for us. - let data = echo_server(event.value()).await.unwrap(); - - // After we have the data from the server, we can set the state of the signal to the new value. - // Since we read the `response` signal later in this component, the component will rerun. - response.set(data); - }, - } - - // Signals can be called like a function to clone the current value of the signal - if !response().is_empty() { - p { - "Server echoed: " - // Since we read the signal inside this component, the component "subscribes" to the signal. Whenever - // the signal changes, the component will rerun. - i { "{response}" } - } - } - } - } -} - -// Server functions let us define public APIs on the server that can be called like a normal async function from the client. -// Each server function needs to be annotated with the `#[post]`/`#[get]` attributes, accept and return serializable types, and return -// a `Result` with the error type [`ServerFnError`]. -// -// When the server function is called from the client, it will just serialize the arguments, call the API, and deserialize the -// response. -#[post("/api/echo")] -async fn echo_server(input: String) -> Result { - // The body of server function like this comment are only included on the server. If you have any server-only logic like - // database queries, you can put it here. Any imports for the server function should either be imported inside the function - // or imported under a `#[cfg(feature = "server")]` block. - Ok(input) -} diff --git a/src/components/hero.rs b/src/components/hero.rs deleted file mode 100644 index 3088c5c..0000000 --- a/src/components/hero.rs +++ /dev/null @@ -1,25 +0,0 @@ -use dioxus::prelude::*; - -const HEADER_SVG: Asset = asset!("/assets/header.svg"); - -#[component] -pub fn Hero() -> Element { - rsx! { - // We can create elements inside the rsx macro with the element name followed by a block of attributes and children. - div { - // Attributes should be defined in the element before any children - id: "hero", - // After all attributes are defined, we can define child elements and components - img { src: HEADER_SVG, id: "header" } - div { id: "links", - // The RSX macro also supports text nodes surrounded by quotes - a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" } - a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } - a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } - a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" } - a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" } - a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } - } - } - } -} diff --git a/src/components/mod.rs b/src/components/mod.rs index 6dd12cb..3a5a3fd 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -2,10 +2,4 @@ //! They can be used to defined common UI elements like buttons, forms, and modals. In this template, we define a Hero //! component and an Echo component for fullstack apps to be used in our app. -mod hero; -pub use hero::Hero; - -mod echo; -pub use echo::Echo; - pub mod ui; diff --git a/src/views/home.rs b/src/views/home.rs index ba2374f..355d804 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -1,18 +1,14 @@ -use crate::components::{ - ui::{ - Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertVariant, Avatar, - Badge, BadgeVariant, Breadcrumb, Button, ButtonSize, ButtonVariant, Card, CardContent, - CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandItem, CommandPalette, - ContextItem, ContextMenu, Crumb, Dialog, DropdownMenu, DropdownMenuItem, HoverCard, Input, - Label, Menubar, MenubarItem, MenubarMenu, NavigationItem, NavigationMenu, Pagination, - Popover, Progress, RadioGroup, RadioGroupItem, Select, SelectOption, Separator, - SeparatorOrientation, Sheet, SheetSide, Sidebar, SidebarContent, SidebarFooter, - SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, - SidebarLayout, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarSeparator, - SidebarTrigger, Slider, StepItem, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, - Textarea, Toast, ToastViewport, Tooltip, - }, - Echo, Hero, +use crate::components::ui::{ + Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertVariant, Avatar, + Badge, BadgeVariant, Breadcrumb, Button, ButtonSize, ButtonVariant, Card, CardContent, + CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandItem, CommandPalette, + ContextItem, ContextMenu, Crumb, Dialog, DropdownMenu, DropdownMenuItem, HoverCard, Input, + Label, Menubar, MenubarItem, MenubarMenu, NavigationItem, NavigationMenu, Pagination, Popover, + Progress, RadioGroup, RadioGroupItem, Select, SelectOption, Separator, SeparatorOrientation, + Sheet, SheetSide, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, + SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuButton, + SidebarMenuItem, SidebarSeparator, SidebarTrigger, Slider, StepItem, Steps, Switch, Tabs, + TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastViewport, Tooltip, }; use dioxus::prelude::*; @@ -20,12 +16,9 @@ use dioxus::prelude::*; #[component] pub fn Home() -> Element { rsx! { - Hero {} - Echo {} UiShowcase {} } } - #[component] fn UiShowcase() -> Element { let accepted_terms = use_signal(|| false);