From 25e72bf2267d6335059e77e7bd7c3411463c1d17 Mon Sep 17 00:00:00 2001 From: tommy Date: Thu, 6 Nov 2025 11:01:55 +0800 Subject: [PATCH] fix style --- assets/styling/admin.css | 113 -------------------------------------- assets/styling/orders.css | 112 +++++++++++++++++++++++++++++++++++++ assets/styling/shadcn.css | 10 ++-- src/main.rs | 2 + src/views/orders.rs | 13 ----- 5 files changed, 120 insertions(+), 130 deletions(-) create mode 100644 assets/styling/orders.css diff --git a/assets/styling/admin.css b/assets/styling/admin.css index b2a6d1d..008aa57 100644 --- a/assets/styling/admin.css +++ b/assets/styling/admin.css @@ -198,119 +198,6 @@ font-weight: 600; } -.orders-metrics { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 20px; - align-items: stretch; -} - -.orders-metric-card { - display: flex; - flex-direction: column; - gap: 8px; - padding: 18px 20px; - border-radius: calc(var(--radius)); - border: 1px solid hsl(var(--border)); - background-color: hsl(var(--card)); - box-shadow: var(--shadow-sm); -} - -.orders-metric-label { - font-size: 0.78rem; - text-transform: uppercase; - letter-spacing: 0.08em; - color: hsl(var(--muted-foreground)); -} - -.orders-metric-value { - font-size: 2rem; - font-weight: 600; - color: hsl(var(--foreground)); -} - -.orders-metric-sub { - font-size: 0.85rem; - color: hsl(var(--muted-foreground)); - line-height: 1.4; -} - -.orders-filter-grid { - display: grid; - gap: 18px; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - align-items: start; -} - -.orders-filter-wide { - grid-column: 1 / -1; -} - -.orders-tag-cloud { - display: flex; - flex-wrap: wrap; - gap: 12px; -} - -.orders-date-trigger { - width: 100%; - display: inline-flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 0.55rem 0.9rem; - border-radius: calc(var(--radius) - 1px); - border: 1px solid hsl(var(--border)); - background-color: hsl(var(--background)); - color: hsl(var(--foreground)); - box-shadow: inset 0 1px 0 hsl(var(--background)); - transition: - border-color 0.2s ease, - box-shadow 0.2s ease, - background-color 0.2s ease; - font-size: 0.95rem; -} - -.orders-date-trigger:hover { - border-color: hsl(var(--ring)); - background-color: hsl(var(--muted)); -} - -.orders-date-trigger-text { - flex: 1; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.orders-date-trigger-icon { - font-size: 0.95rem; - opacity: 0.7; -} - -.orders-date-popover { - padding: 12px; - min-width: 320px; - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.orders-date-actions { - display: flex; - justify-content: flex-end; -} - -.orders-empty { - padding: 60px 20px; - text-align: center; - border: 1px dashed hsl(var(--border)); - border-radius: calc(var(--radius)); - color: hsl(var(--muted-foreground)); - background-color: hsl(var(--muted) / 0.25); -} - .sidebar-profile-role { color: hsl(var(--muted-foreground)); font-size: 0.8rem; diff --git a/assets/styling/orders.css b/assets/styling/orders.css new file mode 100644 index 0000000..5683f35 --- /dev/null +++ b/assets/styling/orders.css @@ -0,0 +1,112 @@ +.orders-metrics { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; + align-items: stretch; +} + +.orders-metric-card { + display: flex; + flex-direction: column; + gap: 8px; + padding: 18px 20px; + border-radius: calc(var(--radius)); + border: 1px solid hsl(var(--border)); + background-color: hsl(var(--card)); + box-shadow: var(--shadow-sm); +} + +.orders-metric-label { + font-size: 0.78rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: hsl(var(--muted-foreground)); +} + +.orders-metric-value { + font-size: 2rem; + font-weight: 600; + color: hsl(var(--foreground)); +} + +.orders-metric-sub { + font-size: 0.85rem; + color: hsl(var(--muted-foreground)); + line-height: 1.4; +} + +.orders-filter-grid { + display: grid; + gap: 18px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + align-items: start; +} + +.orders-filter-wide { + grid-column: 1 / -1; +} + +.orders-tag-cloud { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.orders-date-trigger { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 0.55rem 0.9rem; + border-radius: calc(var(--radius) - 1px); + border: 1px solid hsl(var(--border)); + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); + box-shadow: inset 0 1px 0 hsl(var(--background)); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease, + background-color 0.2s ease; + font-size: 0.95rem; +} + +.orders-date-trigger:hover { + border-color: hsl(var(--ring)); + background-color: hsl(var(--muted)); +} + +.orders-date-trigger-text { + flex: 1; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.orders-date-trigger-icon { + font-size: 0.95rem; + opacity: 0.7; +} + +.orders-date-popover { + padding: 12px; + min-width: 320px; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.orders-date-actions { + display: flex; + justify-content: flex-end; +} + +.orders-empty { + padding: 60px 20px; + text-align: center; + border: 1px dashed hsl(var(--border)); + border-radius: calc(var(--radius)); + color: hsl(var(--muted-foreground)); + background-color: hsl(var(--muted) / 0.25); +} diff --git a/assets/styling/shadcn.css b/assets/styling/shadcn.css index 44d3a77..626f43a 100644 --- a/assets/styling/shadcn.css +++ b/assets/styling/shadcn.css @@ -19,11 +19,10 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; - --radius: 0.5rem; + --radius: 0.3rem; --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05); --shadow-md: - 0 4px 6px -1px rgb(15 23 42 / 0.1), - 0 2px 4px -2px rgb(15 23 42 / 0.1); + 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1); } .dark, @@ -203,7 +202,10 @@ align-items: center; justify-content: center; gap: 0.35rem; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease, transform 0.2s ease; } diff --git a/src/main.rs b/src/main.rs index fd9f0c3..cab0ac1 100644 --- a/src/main.rs +++ b/src/main.rs @@ -38,6 +38,7 @@ const FAVICON: Asset = asset!("/assets/favicon.ico"); const MAIN_CSS: Asset = asset!("/assets/styling/main.css"); const SHADCN_CSS: Asset = asset!("/assets/styling/shadcn.css"); const ADMIN_CSS: Asset = asset!("/assets/styling/admin.css"); +const ORDERS_CSS: Asset = asset!("/assets/styling/orders.css"); fn main() { // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature @@ -59,6 +60,7 @@ fn App() -> Element { document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: SHADCN_CSS } document::Link { rel: "stylesheet", href: ADMIN_CSS } + document::Link { rel: "stylesheet", href: ORDERS_CSS } // The router component renders the route enum we defined above. It will handle synchronization of the URL and render diff --git a/src/views/orders.rs b/src/views/orders.rs index 9ce0ae4..50e29da 100644 --- a/src/views/orders.rs +++ b/src/views/orders.rs @@ -900,19 +900,6 @@ pub fn Orders() -> Element { } span { class: "ui-field-helper", {format!("已选标签：{}", active_tag_count)} } } - div { class: "ui-stack", style: "gap: 0.5rem;", - Label { "重点订单" } - div { class: "ui-cluster", style: "gap: 0.75rem;", - Switch { - checked: flagged_only_value, - on_checked_change: { - let mut setter = flagged_only.clone(); - move |state: bool| setter.set(state) - }, - } - span { "仅查看标记关注的订单" } - } - } } } CardFooter {