设计好了消息通知的雏形

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;
 }
 

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;
+  }
+}

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;

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水水水水内容"
+            }
+            
+          }
+    };
+}

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"

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'],