From e52c49a3463f710f7b2cad65fe13977e0e79847e Mon Sep 17 00:00:00 2001 From: lsy Date: Mon, 23 Dec 2024 00:41:55 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=A5=BD=E4=BA=86=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E9=80=9A=E7=9F=A5=E7=9A=84=E9=9B=8F=E5=BD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/header.svg | 20 ------ frontend/assets/styling/global.css | 41 +++---------- frontend/assets/styling/tailwind.css | 82 +++++++++++++++++++++++++ frontend/src/common/mod.rs | 2 +- frontend/src/components/mod.rs | 2 + frontend/src/components/notification.rs | 55 +++++++++++++++++ frontend/src/views/home.rs | 2 + frontend/tailwind.config.js | 6 +- 8 files changed, 154 insertions(+), 56 deletions(-) delete mode 100644 frontend/assets/header.svg create mode 100644 frontend/src/components/notification.rs diff --git a/frontend/assets/header.svg b/frontend/assets/header.svg deleted file mode 100644 index 59c96f2..0000000 --- a/frontend/assets/header.svg +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/frontend/assets/styling/global.css b/frontend/assets/styling/global.css index 2413cb9..b3be38c 100644 --- a/frontend/assets/styling/global.css +++ b/frontend/assets/styling/global.css @@ -1,38 +1,11 @@ -:root { - --transition-duration: 150ms; - --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); - --hljs-theme: 'github'; +.light{ + --accent-color:#3F51B5; +} +.light .box{ + background: } -:root[class~="dark"] { - --hljs-theme: 'github-dark'; -} - -/* 确保 Radix UI 主题类包裹整个应用 */ -.radix-themes { - transition: - background-color var(--transition-duration) var(--transition-easing), - color var(--transition-duration) var(--transition-easing); - min-height: 100%; -} - -/* 基础布局样式 */ -html, -body { - height: 100%; -} - -/* 添加暗色模式支持 */ -.radix-themes-dark { - @apply dark; -} - -/* 隐藏不活跃的主题样式 */ -[data-theme="light"] .hljs-dark { - display: none; -} - -[data-theme="dark"] .hljs-light { - display: none; +.dark{ + --accent-color:#4d648d; } diff --git a/frontend/assets/styling/tailwind.css b/frontend/assets/styling/tailwind.css index 7746ab2..f500824 100644 --- a/frontend/assets/styling/tailwind.css +++ b/frontend/assets/styling/tailwind.css @@ -554,12 +554,94 @@ video { display: none; } +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.right-1 { + right: 0.25rem; +} + +.right-8 { + right: 2rem; +} + +.top-1 { + top: 0.25rem; +} + +.top-10 { + top: 2.5rem; +} + +.float-end { + float: inline-end; +} + +.w-\[20rem\] { + width: 20rem; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rounded { + border-radius: 0.25rem; +} + +.border-accent { + border-color: var(--accent-color); +} + .bg-yellow-200 { --tw-bg-opacity: 1; background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1)); } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.backdrop-blur-xl { + --tw-backdrop-blur: blur(24px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.hover\:border-2:hover { + border-width: 2px; +} + .dark\:bg-sky-500:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1)); +} + +@media not all and (min-width: 640px) { + .max-sm\:w-\[12rem\] { + width: 12rem; + } } \ No newline at end of file diff --git a/frontend/src/common/mod.rs b/frontend/src/common/mod.rs index 8cf9376..d49a1df 100644 --- a/frontend/src/common/mod.rs +++ b/frontend/src/common/mod.rs @@ -1,2 +1,2 @@ pub mod dom; -pub mod error; +pub mod error; \ No newline at end of file diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs index afd3043..fe3f360 100644 --- a/frontend/src/components/mod.rs +++ b/frontend/src/components/mod.rs @@ -2,3 +2,5 @@ pub mod navbar; pub use navbar::Navbar; pub mod theme_toggle; pub use theme_toggle::Toggle; +pub mod notification; +pub use notification::Message; diff --git a/frontend/src/components/notification.rs b/frontend/src/components/notification.rs new file mode 100644 index 0000000..e5d88bc --- /dev/null +++ b/frontend/src/components/notification.rs @@ -0,0 +1,55 @@ +use crate::common::error::{CustomErrorInto, CustomResult}; +use dioxus::prelude::*; +use dioxus_free_icons::Icon; +use dioxus_free_icons::icons::bs_icons::BsXLg; + +#[derive(PartialEq, Clone)] +pub enum MessageType { + Info, + Warn, + Error, + Success, +} + +#[derive(PartialEq, Props, Clone)] +pub struct MessageProps { + #[props(default="wight".to_string())] + color: String, + #[props(default="".to_string())] + title: String, + #[props(default="".to_string())] + message: String, + #[props(default=3)] + time:u64, +} + +#[component] +pub fn Message(props: MessageProps) -> Element { + return rsx! { + div { + class: "w-[20rem] px-2 py-3 absolute right-8 top-10 backdrop-blur-xl max-sm:w-[12rem] hover:border-2 border-accent rounded ", + style: "background-color:{props.color}", + + div { + + class:"text-lg", + div { + class:"float-end relative top-1 right-1", + Icon{ + icon:BsXLg, + } + } + div { + class:"truncate", + "我是标题水水水水水水水水水水水水水水水水水水水水水sssssssssssss水水水ssssssssssssssss" + + } + } + div { + class:"text-base", + "我是水水水水水水水水水ssssssssssssssssssssss水水水水内容" + } + + } + }; +} diff --git a/frontend/src/views/home.rs b/frontend/src/views/home.rs index 94b2b56..6fae62b 100644 --- a/frontend/src/views/home.rs +++ b/frontend/src/views/home.rs @@ -1,8 +1,10 @@ use dioxus::prelude::*; +use crate::components::Message; #[component] pub fn Home() -> Element { rsx! { + Message{}, div { class:"bg-yellow-200 dark:bg-sky-500", "hello,world" diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 02bbb7d..2faacb5 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -3,7 +3,11 @@ module.exports = { mode: "all", content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], theme: { - extend: {}, + extend: { + colors: { + accent: 'var(--accent-color)', + }, + }, }, plugins: [], darkMode: ['class'],